mirror of
https://github.com/System-End/hackatime.git
synced 2026-04-19 19:55:16 +00:00
136 lines
11 KiB
Text
136 lines
11 KiB
Text
<% content_for :title, "Documentation" %>
|
|
<% content_for :meta_description, "Complete documentation for Hackatime - learn how to track your coding time and use our API." %>
|
|
|
|
<div class="min-h-screen text-white">
|
|
<div class="max-w-6xl mx-auto px-6 py-8">
|
|
<h1 class="text-4xl font-bold mb-4">Welcome to <span class="text-primary">Hackatime</span></h1>
|
|
<p class="text-secondary text-lg mb-8">Tracks your coding time - made by <a href="https://hackclub.com" target="_blank" class="text-primary hover:text-red underline">Hack Club</a></p>
|
|
|
|
<div class="bg-dark rounded-lg p-6 mb-8">
|
|
<p class="mb-4">Hackatime is a free tool from Hack Club. It shows you how much time you spend coding. You can see what other Hack Clubbers are building too!</p>
|
|
|
|
<p class="mb-4"><strong class="text-primary">Why we made this:</strong> The more time you spend making things, the better you get at building cool projects!</p>
|
|
|
|
<p>Hackatime is totally free. Anyone can see the <a href="https://github.com/hackclub/hackatime" target="_blank" class="text-primary hover:text-red underline">code</a>. It's like <a href="https://wakatime.com" target="_blank" class="text-primary hover:text-red underline">WakaTime</a> but free and open source.</p>
|
|
</div>
|
|
|
|
<h3 class="text-2xl font-semibold text-primary mb-4">🎯 How to Start</h3>
|
|
<div class="bg-darkless rounded-lg p-6 mb-8">
|
|
<ol class="space-y-3 text-lg">
|
|
<li><strong class="text-white">Make an account</strong> at <a href="<%= root_url %>" class="text-primary hover:text-red underline">hackatime.hackclub.com</a></li>
|
|
<li><strong class="text-white">Do the setup</strong>: Go to our <a href="<%= my_wakatime_setup_path %>" class="text-primary hover:text-red underline">setup page</a></li>
|
|
<li><strong class="text-white">Add a plugin</strong>: Put WakaTime in your code editor</li>
|
|
<li><strong class="text-white">Start coding</strong>: It tracks your time by itself!</li>
|
|
</ol>
|
|
</div>
|
|
|
|
<div class="bg-dark border-l-4 border-primary rounded-r-lg p-6 mb-8"><strong class="text-primary">💡 Tip:</strong> The <a href="<%= my_wakatime_setup_path %>" class="text-primary hover:text-red underline">setup page</a> does everything for you. No hard stuff to figure out!</div>
|
|
|
|
<h3 class="text-2xl font-semibold text-primary mb-4">🔌 What Code Editors Work</h3>
|
|
<div class="bg-dark rounded-lg p-6 mb-8">
|
|
<p class="mb-6">Hackatime works with <strong class="text-white">any editor</strong> that has <a href="https://wakatime.com" target="_blank" class="text-primary hover:text-red underline">WakaTime</a>. Just add the WakaTime plugin to your editor:</p>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div class="bg-darkless rounded-lg p-4">
|
|
<strong class="text-primary text-lg block mb-3">Popular Ones:</strong>
|
|
<ul class="space-y-2">
|
|
<li><%= link_to "VS Code", doc_path("editors/vs-code"), class: "text-white hover:text-primary" %></li>
|
|
<li><%= link_to "PyCharm", doc_path("editors/pycharm"), class: "text-white hover:text-primary" %></li>
|
|
<li><%= link_to "Vim", doc_path("editors/vim"), class: "text-white hover:text-primary" %></li>
|
|
<li><%= link_to "Sublime Text", doc_path("editors/sublime-text"), class: "text-white hover:text-primary" %></li>
|
|
</ul>
|
|
</div>
|
|
<div class="bg-darkless rounded-lg p-4">
|
|
<strong class="text-primary text-lg block mb-3">Lots More:</strong>
|
|
<ul class="space-y-2">
|
|
<li><%= link_to "Brackets", doc_path("editors/brackets"), class: "text-white hover:text-primary" %></li>
|
|
<li class="text-secondary">All JetBrains apps</li>
|
|
<li><%= link_to "Command Line", doc_path("editors/terminal"), class: "text-white hover:text-primary" %></li>
|
|
<li><a href="#supported-editors" onclick="document.getElementById('all-editors').parentElement.open = true; document.getElementById('all-editors').scrollIntoView({behavior: 'smooth'});" class="text-primary hover:text-red">70+ others</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h3 class="text-2xl font-semibold text-primary mb-4">📚 Help Pages</h3>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
|
|
<div class="bg-dark rounded-lg p-6">
|
|
<h4 class="text-xl font-semibold text-primary mb-4">Getting Started</h4>
|
|
<ul class="space-y-3">
|
|
<li><%= link_to "Quick Start Guide", doc_path("getting-started/quick-start"), class: "text-white hover:text-primary" %> <span class="text-secondary">- Start in 5 minutes</span></li>
|
|
<li><%= link_to "Installation", doc_path("getting-started/installation"), class: "text-white hover:text-primary" %> <span class="text-secondary">- Add plugins to your editor</span></li>
|
|
<li><%= link_to "Configuration", doc_path("getting-started/configuration"), class: "text-white hover:text-primary" %> <span class="text-secondary">- Advanced setup stuff</span></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="bg-dark rounded-lg p-6">
|
|
<h4 class="text-xl font-semibold text-primary mb-4">For Coders</h4>
|
|
<ul class="space-y-3">
|
|
<li><a href="/api-docs" class="text-white hover:text-primary">API Documentation</a> <span class="text-secondary">- Interactive API docs with Swagger</span></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<h3 class="text-2xl font-semibold text-primary mb-4">🔒 Safe & Free</h3>
|
|
<div class="bg-dark rounded-lg p-6 mb-8">
|
|
<ul class="space-y-3">
|
|
<li><strong class="text-primary">Open Source</strong>: You can see all the code on <a href="https://github.com/hackclub/hackatime" target="_blank" class="text-primary hover:text-red underline">GitHub</a></li>
|
|
<li><strong class="text-primary">Works Offline</strong>: Time tracking continues even without internet - your data syncs when you reconnect</li>
|
|
<li><strong class="text-primary">Private</strong>: We only see how long you code, not what you type</li>
|
|
<li><strong class="text-primary">Community Made</strong>: Built by Hack Club</li>
|
|
<li><strong class="text-primary">Free</strong>: You can donate to cover server costs at <a href="https://hackclub.com/donate" target="_blank" class="text-primary hover:text-red underline">hackclub.com/donate</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<h3 class="text-2xl font-semibold text-primary mb-4">🆘 Need Help?</h3>
|
|
<div class="bg-darkless rounded-lg p-6 mb-8">
|
|
<p class="mb-4">
|
|
<strong class="text-primary">Not seeing your time?</strong> Go to the <a href="<%= my_wakatime_setup_path %>" class="text-primary hover:text-red underline">setup page</a>
|
|
to check if everything is working.
|
|
</p>
|
|
<p><strong class="text-primary">Have questions?</strong> Ask in the <a href="https://hackclub.slack.com" target="_blank" class="text-primary hover:text-red underline">Hack Club Slack</a> (#hackatime-v2 channel) or <a href="https://github.com/hackclub/hackatime/issues" target="_blank" class="text-primary hover:text-red underline">ask on GitHub</a>.</p>
|
|
</div>
|
|
|
|
<h3 class="text-2xl font-semibold text-primary mb-4">🔧 Supported Editors</h3>
|
|
<div class="bg-dark rounded-lg p-6 mb-8">
|
|
<p class="mb-6">Hackatime works with any editor that supports WakaTime. Click on your editor below for setup instructions:</p>
|
|
|
|
<div id="supported-editors" class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
|
|
<!-- Most popular editors among teenagers, ordered by popularity -->
|
|
<% popular_editors = [['VS Code', 'vs-code'], %w[PyCharm pycharm], ['IntelliJ IDEA', 'intellij-idea'], ['Sublime Text', 'sublime-text'], %w[Vim vim], %w[Neovim neovim], ['Android Studio', 'android-studio'], %w[Xcode xcode], %w[Unity unity], %w[Godot godot], %w[Cursor cursor], %w[Zed zed], %w[Terminal terminal], %w[WebStorm webstorm], %w[Eclipse eclipse], %w[Emacs emacs], %w[Jupyter jupyter], %w[OnShape onshape]] %>
|
|
<% popular_editors.each do |name, slug| %>
|
|
<a href="<%= doc_path("editors/#{slug}") %>" class="bg-darkless rounded-lg p-3 hover:bg-primary/75 transition-colors text-center block">
|
|
<img src="/images/editor-icons/<%= slug %>-128.png" alt="<%= name %>" class="w-12 h-12 mx-auto mb-2">
|
|
<div class="text-sm text-white"><%= name %></div>
|
|
</a>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
|
|
<details class="bg-dark rounded-lg p-6 mb-8">
|
|
<summary class="cursor-pointer font-semibold text-primary">View all 80 supported editors</summary>
|
|
<div id="all-editors" class="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 lg:grid-cols-8 gap-3 mt-4 p-4">
|
|
<%
|
|
# All 80 editors - alphabetically sorted
|
|
all_editors = [['Android Studio', 'android-studio'], %w[AppCode appcode], %w[Aptana aptana], ['Arduino IDE', 'arduino-ide'], ['Azure Data Studio', 'azure-data-studio'], %w[Blender blender], %w[Brackets brackets], %w[Brave brave], ['C++ Builder', 'c++-builder'], %w[Canva canva], %w[Chrome chrome], %w[CLion clion], %w[Cloud9 cloud9], %w[Coda coda], %w[CodeTasty codetasty], %w[Cursor cursor], %w[DataGrip datagrip], %w[DataSpell dataspell], %w[DBeaver dbeaver], %w[Delphi delphi], %w[Discord discord], %w[Eclipse eclipse], %w[Edge edge], %w[Emacs emacs], %w[Eric eric], %w[Excel excel], %w[Figma figma], %w[Firefox firefox], %w[Gedit gedit], %w[Godot godot], %w[GoLand goland], ['HBuilder X', 'hbuilder-x'], ['IDA Pro', 'ida-pro'], ['IntelliJ IDEA', 'intellij-idea'], %w[Jupyter jupyter], %w[Kakoune kakoune], %w[Kate kate], %w[Komodo komodo], %w[Micro micro], %w[MPS mps], %w[Neovim neovim], %w[NetBeans netbeans], %w[Notepad++ notepad++], %w[Nova nova], %w[Obsidian obsidian], %w[OnShape onshape], %w[Oxygen oxygen], %w[PhpStorm phpstorm], %w[Postman postman], %w[PowerPoint powerpoint], %w[Processing processing], %w[Pulsar pulsar], %w[PyCharm pycharm], %w[ReClassEx reclassex], %w[Rider rider], ['Roblox Studio', 'roblox-studio'], %w[RubyMine rubymine], %w[RustRover rustrover], %w[Safari safari], %w[SiYuan siyuan], %w[Sketch sketch], %w[SlickEdit slickedit], ['SQL Server Management Studio', 'sql-server-management-studio'], ['Sublime Text', 'sublime-text'], %w[Terminal terminal], %w[TeXstudio texstudio], %w[TextMate textmate], %w[Trae trae], %w[Unity unity], ['Unreal Engine 4', 'unreal-engine-4'], %w[Vim vim], ['Visual Studio', 'visual-studio'], ['VS Code', 'vs-code'], %w[WebStorm webstorm], %w[Windsurf windsurf], %w[Wing wing], %w[Word word], %w[Xcode xcode], %w[Zed zed], ['Swift Playgrounds', 'swift-playgrounds']].sort_by { |editor| editor[0] }
|
|
%>
|
|
<% all_editors.each do |name, slug| %>
|
|
<a href="<%= doc_path("editors/#{slug}") %>" class="bg-darkless rounded p-2 hover:bg-primary/75 transition-colors text-center block">
|
|
<img src="/images/editor-icons/<%= slug %>-128.png" alt="<%= name %>" class="w-8 h-8 mx-auto mb-1">
|
|
<div class="text-xs text-white leading-tight"><%= name %></div>
|
|
</a>
|
|
<% end %>
|
|
</div>
|
|
</details>
|
|
|
|
<div class="border-t border-darkless my-8"></div>
|
|
|
|
<div class="text-center">
|
|
<p class="text-secondary">
|
|
Found an issue with the docs?
|
|
<a href="https://github.com/hackclub/hackatime" target="_blank" class="text-primary hover:text-red underline"> Edit on GitHub </a> - we'd love your help making them better!
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|