From 3f940e40be6699c8a6ba7557e6aafa2ea047f7d9 Mon Sep 17 00:00:00 2001 From: Mahad Kalam Date: Fri, 1 May 2026 01:32:47 +0100 Subject: [PATCH 1/2] New docs layout + remove Extensions --- app/controllers/docs_controller.rb | 32 ++ app/controllers/extensions_controller.rb | 7 - app/controllers/inertia_controller.rb | 4 +- app/helpers/extensions_helper.rb | 2 - app/javascript/layouts/AppLayout.svelte | 3 +- app/javascript/layouts/DocsLayout.svelte | 307 +++++++++++++++++++ app/javascript/pages/Docs/Index.svelte | 266 ++++++++-------- app/javascript/pages/Docs/Show.svelte | 172 +++++------ app/javascript/pages/Extensions/Index.svelte | 93 ------ 9 files changed, 556 insertions(+), 330 deletions(-) delete mode 100644 app/controllers/extensions_controller.rb delete mode 100644 app/helpers/extensions_helper.rb create mode 100644 app/javascript/layouts/DocsLayout.svelte delete mode 100644 app/javascript/pages/Extensions/Index.svelte diff --git a/app/controllers/docs_controller.rb b/app/controllers/docs_controller.rb index cefc25c08..6e69b23c1 100644 --- a/app/controllers/docs_controller.rb +++ b/app/controllers/docs_controller.rb @@ -1,6 +1,8 @@ class DocsController < InertiaController layout "inertia" + inertia_share docs_nav: -> { docs_nav_props } + POPULAR_EDITORS = [ [ "VS Code", "vs-code" ], [ "PyCharm", "pycharm" ], [ "IntelliJ IDEA", "intellij-idea" ], [ "Sublime Text", "sublime-text" ], [ "Vim", "vim" ], [ "Neovim", "neovim" ], @@ -104,6 +106,36 @@ def show private + def docs_nav_props + current_path = request.path + { + current_path: current_path, + home_url: docs_path, + api_docs_url: "/api-docs", + github_url: "https://github.com/hackclub/hackatime", + slack_url: "https://hackclub.slack.com/archives/C07MQ845X1F", + sections: [ + { + title: "Getting Started", + links: [ + { label: "Quick Start", href: doc_path("getting-started/quick-start") }, + { label: "Installation", href: doc_path("getting-started/installation") }, + { label: "Configuration", href: doc_path("getting-started/configuration") } + ] + }, + { + title: "Developers", + links: [ + { label: "API Docs", href: "/api-docs/" }, + { label: "OAuth Apps", href: doc_path("oauth/oauth-apps") } + ] + } + ], + popular_editors: POPULAR_EDITORS, + all_editors: ALL_EDITORS + } + end + def sanitize_path(path) # Remove any directory traversal attempts and normalize path return "index" if path.blank? diff --git a/app/controllers/extensions_controller.rb b/app/controllers/extensions_controller.rb deleted file mode 100644 index a17528106..000000000 --- a/app/controllers/extensions_controller.rb +++ /dev/null @@ -1,7 +0,0 @@ -class ExtensionsController < InertiaController - layout "inertia" - - def index - render inertia: "Extensions/Index" - end -end diff --git a/app/controllers/inertia_controller.rb b/app/controllers/inertia_controller.rb index 1a5f2a6fd..aa889a779 100644 --- a/app/controllers/inertia_controller.rb +++ b/app/controllers/inertia_controller.rb @@ -71,13 +71,13 @@ def inertia_primary_links if current_user links << inertia_link("Projects", my_projects_path, active: request.path.start_with?("/my/projects"), inertia: true) links << inertia_link("Docs", docs_path, active: helpers.current_page?(docs_path) || request.path.start_with?("/docs"), inertia: true) - links << inertia_link("Extensions", extensions_path, active: helpers.current_page?(extensions_path), inertia: true) + links << inertia_link("Setup", my_wakatime_setup_path, active: helpers.current_page?(my_wakatime_setup_path), inertia: true) links << inertia_link("Settings", my_settings_path, active: request.path.start_with?("/my/settings"), inertia: true) links << inertia_link("My OAuth Apps", oauth_applications_path, active: helpers.current_page?(oauth_applications_path) || request.path.start_with?("/oauth/applications"), inertia: true) links << { label: "Logout", action: "logout" } else links << inertia_link("Docs", docs_path, active: helpers.current_page?(docs_path) || request.path.start_with?("/docs"), inertia: true) - links << inertia_link("Extensions", extensions_path, active: helpers.current_page?(extensions_path), inertia: true) + links << inertia_link("Setup", my_wakatime_setup_path, active: helpers.current_page?(my_wakatime_setup_path), inertia: true) end links diff --git a/app/helpers/extensions_helper.rb b/app/helpers/extensions_helper.rb deleted file mode 100644 index 383b12c96..000000000 --- a/app/helpers/extensions_helper.rb +++ /dev/null @@ -1,2 +0,0 @@ -module ExtensionsHelper -end diff --git a/app/javascript/layouts/AppLayout.svelte b/app/javascript/layouts/AppLayout.svelte index 4a8dc081e..e1b1d7bcb 100644 --- a/app/javascript/layouts/AppLayout.svelte +++ b/app/javascript/layouts/AppLayout.svelte @@ -153,8 +153,7 @@ const navLinkWithToolClass = (link: NavLink, toolClass = "") => `${navLinkClass(link.active)}${toolClass ? ` ${toolClass}` : ""}`; - const isLongCachedLink = (link: NavLink) => - link.label === "Docs" || link.label === "Extensions"; + const isLongCachedLink = (link: NavLink) => link.label === "Docs"; const linkCacheFor = (link: NavLink): string | [string, string] => isLongCachedLink(link) ? "10m" : ["0s", "30s"]; diff --git a/app/javascript/layouts/DocsLayout.svelte b/app/javascript/layouts/DocsLayout.svelte new file mode 100644 index 000000000..4ad7f1236 --- /dev/null +++ b/app/javascript/layouts/DocsLayout.svelte @@ -0,0 +1,307 @@ + + + + + + + + +
+
+ {@render children?.()} +
+
+ + diff --git a/app/javascript/pages/Docs/Index.svelte b/app/javascript/pages/Docs/Index.svelte index 98ea3b0d8..1d3297b14 100644 --- a/app/javascript/pages/Docs/Index.svelte +++ b/app/javascript/pages/Docs/Index.svelte @@ -1,3 +1,8 @@ + + + - - - Extensions - Hackatime - - -
-
-

Extensions

-

- Third-party tools created by the community. - - * Not guaranteed to work. - -

-
- -
- {#each EXTENSIONS as extension} -
-
-

- {extension.name} -

-
- -

- {extension.description} -

- -
- - {extension.buttonLabel ?? "Install"} - - - - - Source - -
-
- {/each} -
-
From 243fe90cbebfec0a14949eaeb74f0321caa9995e Mon Sep 17 00:00:00 2001 From: Mahad Kalam Date: Fri, 1 May 2026 01:39:06 +0100 Subject: [PATCH 2/2] ok --- app/javascript/layouts/DocsLayout.svelte | 72 +++++++++++---------- app/javascript/pages/Docs/Index.svelte | 65 ++++++++----------- app/javascript/pages/Docs/Show.svelte | 80 +++++++++++------------- 3 files changed, 101 insertions(+), 116 deletions(-) diff --git a/app/javascript/layouts/DocsLayout.svelte b/app/javascript/layouts/DocsLayout.svelte index 4ad7f1236..f393ae939 100644 --- a/app/javascript/layouts/DocsLayout.svelte +++ b/app/javascript/layouts/DocsLayout.svelte @@ -67,18 +67,27 @@ } }); + const inactiveNavClass = + "text-surface-content hover:bg-darkless hover:text-primary"; + const activeNavClass = "bg-darkless text-primary"; + const navItemClass = "rounded-md px-3 py-2 text-sm transition-colors"; + const inlineNavItemClass = `flex items-center gap-2 ${navItemClass}`; + const splitNavItemClass = `flex items-center justify-between ${navItemClass}`; + const navLinkClass = (active?: boolean) => - `block px-3 py-2 rounded-md text-sm transition-colors ${ - active - ? "bg-primary text-on-primary font-bold" - : "text-surface-content hover:bg-darkless hover:text-primary" - }`; + `block ${navItemClass} ${active ? activeNavClass : inactiveNavClass}`; + + const inlineNavLinkClass = (active?: boolean) => + `${inlineNavItemClass} ${active ? activeNavClass : inactiveNavClass}`; const sectionTitleClass = - "px-3 pt-3 pb-1 text-[11px] uppercase tracking-wider text-secondary/80 font-semibold"; + "px-3 pt-3 pb-1 text-[0.6875rem] font-semibold uppercase tracking-wider text-secondary/80"; + + const resourceLinkClass = `${splitNavItemClass} ${inactiveNavClass}`; - const resourceLinkClass = - "flex items-center justify-between px-3 py-2 rounded-md text-sm transition-colors text-surface-content hover:bg-darkless hover:text-primary"; + const secondaryNavLinkClass = `block ${navItemClass} text-secondary hover:bg-darkless hover:text-primary`; + + const externalIconClass = "size-3 text-muted"; -
-
+
+
{@render children?.()}
diff --git a/app/javascript/pages/Docs/Index.svelte b/app/javascript/pages/Docs/Index.svelte index 1d3297b14..3dc6b625b 100644 --- a/app/javascript/pages/Docs/Index.svelte +++ b/app/javascript/pages/Docs/Index.svelte @@ -13,6 +13,13 @@ popular_editors: [string, string][]; all_editors: [string, string][]; } = $props(); + + const quickLinkClass = + "group flex items-start gap-3 rounded-lg border border-surface-200 bg-surface p-4 transition-colors hover:border-primary"; + const editorCardClass = + "flex flex-col items-center rounded-lg border border-surface-200 bg-surface p-3 transition-colors hover:border-primary"; + const compactEditorCardClass = + "flex flex-col items-center rounded p-2 transition-colors hover:bg-surface-200"; @@ -34,10 +41,7 @@
- +

Quick Start

@@ -46,10 +50,7 @@

- +

Installation

@@ -58,10 +59,7 @@

- +

API Reference

@@ -70,10 +68,7 @@

- +

OAuth Apps

@@ -87,25 +82,20 @@

Popular editors

- {popular_editors.length} of {all_editors.length} +
+ {popular_editors.length} of {all_editors.length} +
{#each popular_editors as [name, slug]} - + {name} - {name} +
{name}
{/each}
@@ -116,11 +106,11 @@ - Browse all {all_editors.length} supported editors +
+ Browse all {all_editors.length} supported editors +
{#each all_editors as [name, slug]} - + {name} - {name} +
{name}
{/each}
@@ -157,7 +142,7 @@