Add docs for OnShape and fix link style (#451)

app/views/docs/index.html.erb

@@ -126,7 +126,7 @@
           ['Android Studio', 'android-studio'], ['Xcode', 'xcode'], ['Unity', 'unity'],
           ['Godot', 'godot'], ['Cursor', 'cursor'], ['Zed', 'zed'],
           ['Terminal', 'terminal'], ['WebStorm', 'webstorm'], ['Eclipse', 'eclipse'],
-          ['Notepad++', 'notepad++'], ['Emacs', 'emacs'], ['Jupyter', 'jupyter']
+          ['Emacs', 'emacs'], ['Jupyter', 'jupyter'], ['OnShape', 'onshape']
         ] %>
         <% popular_editors.each do |name, slug| %>
           <a href="<%= doc_path("editors/#{slug}") %>" class="bg-darkless rounded-lg p-3 hover:bg-primary/10 transition-colors text-center block">
@@ -155,7 +155,7 @@
           ['IntelliJ IDEA', 'intellij-idea'], ['Jupyter', 'jupyter'], ['Kakoune', 'kakoune'], ['Kate', 'kate'],
           ['Komodo', 'komodo'], ['Micro', 'micro'], ['MPS', 'mps'], ['Neovim', 'neovim'],
           ['NetBeans', 'netbeans'], ['Notepad++', 'notepad++'], ['Nova', 'nova'], ['Obsidian', 'obsidian'],
-          ['Oxygen', 'oxygen'], ['PhpStorm', 'phpstorm'], ['Postman', 'postman'], ['PowerPoint', 'powerpoint'],
+          ['OnShape', 'onshape'], ['Oxygen', 'oxygen'], ['PhpStorm', 'phpstorm'], ['Postman', 'postman'], ['PowerPoint', 'powerpoint'],
           ['Processing', 'processing'], ['Pulsar', 'pulsar'], ['PyCharm', 'pycharm'], ['ReClassEx', 'reclassex'],
           ['Rider', 'rider'], ['Roblox Studio', 'roblox-studio'], ['RubyMine', 'rubymine'], ['RustRover', 'rustrover'],
           ['Safari', 'safari'], ['SiYuan', 'siyuan'], ['Sketch', 'sketch'], ['SlickEdit', 'slickedit'],

app/views/docs/show.html.erb

@@ -36,6 +36,17 @@
       }
     }
   </script>
+  <style>
+    .prose a {
+      color: var(--color-primary) !important;
+      text-decoration: underline !important;
+      font-weight: 500 !important;
+    }
+    .prose a:hover {
+      color: var(--color-red) !important;
+      
+    }
+  </style>
 <% end %>
 
 <div class="min-h-screen text-white">

docs/editors/onshape.md

@@ -0,0 +1,36 @@
+# Onshape Setup Guide
+
+![Onshape](/images/editor-icons/onshape-128.png)
+
+Follow these steps to start tracking your coding time in OnShape with Hackatime.
+
+## Step 1: Log into Hackatime
+
+Make sure you have a [Hackatime account](https://hackatime.hackclub.com) and are logged in.
+
+## Step 2: Get Your API key
+
+Visit the [setup page](https://hackatime.hackclub.com/my/wakatime_setup#show-advanced-button), press on the button called "Custom Setup" and copy the api key. 
+
+It should be random letters and numbers with some dashes in between. EX: 1234abcd-56ef-7891-abcd-efgh2345abcd
+
+## Step 3: Install the Wakatime for OnShape Extension
+
+Install the extension from [Chrome Web Store](https://chromewebstore.google.com/detail/onshape-wakatime/kieglbolocchhhcblnhaiodbpgkjcecg) or from the [FireFox Addons](https://addons.mozilla.org/en-US/firefox/addon/onshape-wakatime/). (PS: If you like it, pls rate it!)
+
+
+## Step 4: Config Your OnShape Extension
+
+Visit [OnShape](https://onshape.com/) and login. Go to any of your documents and press on the Wakatime for Onshape extension icon to open its config page. 
+
+In the WAKA api key section, paste your api key from Step 2 and make sure tracking is enabled (You should see some green on the switch). Do not change the API url. 
+
+## Troubleshooting
+
+- **Not seeing your time?** Make sure you have completed all the steps above and set the correct api key
+- **Plugin not working?** Try refreshing OnShape after installation
+- **Still stuck?** Ask for help in by pinging @Jeffrey Wang on [Hack Club Slack](https://hackclub.slack.com) (#hackatime-v2 channel)
+
+## Next Steps
+
+Once configured, your designing time will automatically appear on your [Hackatime dashboard](https://hackatime.hackclub.com). Happy designing!