diff --git a/app/views/users/wakatime_setup_step_2.html.erb b/app/views/users/wakatime_setup_step_2.html.erb index 44bcd81..38ac606 100644 --- a/app/views/users/wakatime_setup_step_2.html.erb +++ b/app/views/users/wakatime_setup_step_2.html.erb @@ -22,89 +22,88 @@

Let's setup one for now, you can setup more later!

-
-
- <%= link_to my_wakatime_setup_step_3_path(anchor: "vs-code"), class: "flex items-center gap-4 text-white no-underline" do %> -
- VS Code -
-
-

Visual Studio Code

-

Most popular code editor, loved by millions

-
-
- - - -
- <% end %> -
+
+ <%= link_to my_wakatime_setup_step_3_path(editor: "vscode"), class: "bg-dark rounded-lg p-6 hover:bg-darkless transition-colors flex flex-col items-center justify-center text-center gap-4 text-white no-underline group h-full" do %> +
+ VS Code +
+
+

VS Code

+
+ <% end %> -
- <%= link_to my_wakatime_setup_step_3_path(anchor: "vim"), class: "flex items-center gap-4 text-white no-underline" do %> -
- Vim -
-
-

Vim

-

Terminal-based editor, for the cool kids

-
-
- - - -
- <% end %> -
+ <%= link_to my_wakatime_setup_step_3_path(editor: "vim"), class: "bg-dark rounded-lg p-6 hover:bg-darkless transition-colors flex flex-col items-center justify-center text-center gap-4 text-white no-underline group h-full" do %> +
+ Vim +
+
+

Vim

+
+ <% end %> -
- <%= link_to my_wakatime_setup_step_3_path(anchor: "emacs"), class: "flex items-center gap-4 text-white no-underline" do %> -
- Emacs -
-
-

Emacs

-

Powerful extensible editor, for the power users

-
-
- - - -
- <% end %> -
+ <%= link_to my_wakatime_setup_step_3_path(editor: "neovim"), class: "bg-dark rounded-lg p-6 hover:bg-darkless transition-colors flex flex-col items-center justify-center text-center gap-4 text-white no-underline group h-full" do %> +
+ Neovim +
+
+

Neovim

+
+ <% end %> -
- <%= link_to my_wakatime_setup_step_3_path(anchor: "godot"), class: "flex items-center gap-4 text-white no-underline" do %> -
- Godot -
-
-

Godot

-

Open source game engine for all

-
-
- - - -
- <% end %> -
+ <%= link_to my_wakatime_setup_step_3_path(editor: "emacs"), class: "bg-dark rounded-lg p-6 hover:bg-darkless transition-colors flex flex-col items-center justify-center text-center gap-4 text-white no-underline group h-full" do %> +
+ Emacs +
+
+

Emacs

+
+ <% end %> -
- <%= link_to my_wakatime_setup_step_3_path, class: "flex items-center gap-4 text-white no-underline" do %> -
🔧
-
-

Not listed here!

-

Any WakaTime-supported editor, there are hundreds!

-
-
- - - -
- <% end %> -
+ <%= link_to my_wakatime_setup_step_3_path(editor: "pycharm"), class: "bg-dark rounded-lg p-6 hover:bg-darkless transition-colors flex flex-col items-center justify-center text-center gap-4 text-white no-underline group h-full" do %> +
+ PyCharm +
+
+

PyCharm

+
+ <% end %> + + <%= link_to my_wakatime_setup_step_3_path(editor: "sublime"), class: "bg-dark rounded-lg p-6 hover:bg-darkless transition-colors flex flex-col items-center justify-center text-center gap-4 text-white no-underline group h-full" do %> +
+ Sublime +
+
+

Sublime Text

+
+ <% end %> + + <%= link_to my_wakatime_setup_step_3_path(editor: "unity"), class: "bg-dark rounded-lg p-6 hover:bg-darkless transition-colors flex flex-col items-center justify-center text-center gap-4 text-white no-underline group h-full" do %> +
+ Unity +
+
+

Unity

+
+ <% end %> + + <%= link_to my_wakatime_setup_step_3_path(editor: "godot"), class: "bg-dark rounded-lg p-6 hover:bg-darkless transition-colors flex flex-col items-center justify-center text-center gap-4 text-white no-underline group h-full" do %> +
+ Godot +
+
+

Godot

+
+ <% end %> + + <%= link_to my_wakatime_setup_step_3_path(editor: "other"), class: "bg-dark rounded-lg p-6 hover:bg-darkless transition-colors flex flex-col items-center justify-center text-center gap-4 text-white no-underline group h-full col-span-2 md:col-span-3 lg:col-span-4" do %> +
+
🔧
+
+
+

Other Editor

+

Hackatime supports 70+ editors

+
+ <% end %>
diff --git a/app/views/users/wakatime_setup_step_3.html.erb b/app/views/users/wakatime_setup_step_3.html.erb index 4e44acf..0997eef 100644 --- a/app/views/users/wakatime_setup_step_3.html.erb +++ b/app/views/users/wakatime_setup_step_3.html.erb @@ -25,153 +25,159 @@

Install Plugin!

-
-

💻 VS Code (Visual Studio Code)

-
-

- Install the WakaTime extension from the marketplace. -

+ <% if params[:editor] == "vscode" %> +
+

💻 VS Code (Visual Studio Code)

+
+

+ Install the WakaTime extension from the marketplace. +

-
-

Step-by-step:

-
    -
  1. Open VS Code
    2. -
  2. Click the Extensions icon (squares) on the left sidebar
    3. -
  3. Search for "WakaTime"
    4. -
  4. Click Install on the WakaTime extension
    5. -
  5. Restart VS Code if prompted
    6. -
-
+
+

Step-by-step:

+
    +
  1. Open VS Code
    2. +
  2. Click the Extensions icon (squares) on the left sidebar
    3. +
  3. Search for "WakaTime"
    4. +
  4. Click Install on the WakaTime extension
    5. +
  5. Restart VS Code if prompted
    6. +
+
-
-

You'll know it works if you see a clock in your status bar:

- WakaTime status bar in VS Code +

You'll know it works if you see a clock in your status bar:

+
+ WakaTime status bar in VS Code +
-
-
+
-
-

📟 Vim

-
-

- Install the WakaTime plugin using your preferred plugin manager: -

+ <% elsif params[:editor] == "vim" %> +
+

📟 Vim

+
+

+ Install the WakaTime plugin using your preferred plugin manager: +

-
-
-

Using vim-plug:

- 
Plug 'wakatime/vim-wakatime'
-

Then run :PlugInstall

-
+
+
+

Using vim-plug:

+ 
Plug 'wakatime/vim-wakatime'
+

Then run :PlugInstall

+
-
-

Using Vundle:

- 
Plugin 'wakatime/vim-wakatime'
-

Then run :PluginInstall

-
+
+

Using Vundle:

+ 
Plugin 'wakatime/vim-wakatime'
+

Then run :PluginInstall

+
-
-

Manual installation:

- 
cd ~/.vim/bundle
-git clone https://github.com/wakatime/vim-wakatime.git
+
+

Manual installation:

+ 
cd ~/.vim/bundle
+  git clone https://github.com/wakatime/vim-wakatime.git
+
-
-
+
-
-

🔮 Emacs

-
-

- Install the WakaTime package using your preferred method: -

+ <% elsif params[:editor] == "emacs" %> +
+

🔮 Emacs

+
+

+ Install the WakaTime package using your preferred method: +

-
-
-

Using MELPA:

- 
M-x package-install RET wakatime-mode RET
-

Then add to your config: (global-wakatime-mode)

-
+
+
+

Using MELPA:

+ 
M-x package-install RET wakatime-mode RET
+

Then add to your config: (global-wakatime-mode)

+
-
-

Using use-package:

- 
(use-package wakatime-mode
-  :ensure t
-  :config
-  (global-wakatime-mode))
+
+

Using use-package:

+ 
(use-package wakatime-mode
+    :ensure t
+    :config
+    (global-wakatime-mode))
+
-
-
+
-
-

🎮 Godot

-
-

- Follow our comprehensive Godot & Hackatime Setup guide with video tutorial! -

+ <% elsif params[:editor] == "godot" %> +
+

🎮 Godot

+
+

+ Follow our comprehensive Godot & Hackatime Setup guide with video tutorial! +

-
-

Quick steps:

-
    -
  1. Open your Godot project
    2. -
  2. Go to the AssetLib tab
    3. -
  3. Search for "Godot Super Wakatime"
    4. -
  4. Click Download and Install
    5. -
  5. Enable in Project → Project Settings → Plugins
    6. -
-

- 📺 Watch the workshop recording for a complete walkthrough! +

+

Quick steps:

+
    +
  1. Open your Godot project
    2. +
  2. Go to the AssetLib tab
    3. +
  3. Search for "Godot Super Wakatime"
    4. +
  4. Click Download and Install
    5. +
  5. Enable in Project → Project Settings → Plugins
    6. +
+

+ 📺 Watch the workshop recording for a complete walkthrough! +

+
+ +
+

+ Note: You need to install the plugin for each Godot project separately (it's a Godot limitation). +

+
+
+
+ + <% else %> +
+

🔧 Setup your Editor

+
+

+ Hackatime works with any editor that supports WakaTime! This includes PyCharm, IntelliJ, Sublime Text, Atom, Neovim, Unity, Godot, and 77+ more editors.

-
-

- Note: You need to install the plugin for each Godot project separately (it's a Godot limitation). -

-
-
-
+
+
+

Popular Editors:

+
+ + PyCharm + PyCharm + + + Sublime Text + Sublime Text + + + Unity + Unity + + + Neovim + Neovim + +
+
-
-

🔧 Other Editors

-
-

- Hackatime works with any editor that supports WakaTime! This includes PyCharm, IntelliJ, Sublime Text, Atom, Neovim, Unity, Godot, and 77+ more editors. -

-
- -
-
-

Popular Editors:

-
- - PyCharm - PyCharm - - - Sublime Text - Sublime Text - - - Unity - Unity - - - Neovim - Neovim - +
+

⚠️ Important:

+

When setting up WakaTime plugins, skip any steps that ask you to update ~/.wakatime.cfg or change the api_url. The setup script from Step 1 already configured this correctly!

- -
-

⚠️ Important:

-

When setting up WakaTime plugins, skip any steps that ask you to update ~/.wakatime.cfg or change the api_url. The setup script from Step 1 already configured this correctly!

-
-
-
+ + <% end %>
<%= link_to my_wakatime_setup_step_4_path, class: "bg-primary hover:bg-red text-white px-6 py-3 rounded-lg font-semibold transition-colors" do %> @@ -180,15 +186,3 @@ git clone https://github.com/wakatime/vim-wakatime.git
- -