feat: add hacka-box to badges settings (#1073)

* feat: add hacka-box to badges settings

* style: fix rubocop and svelte formatting issues (literally 1984 btw)

* Fix formatting in HackaBox Gist section

---------

Co-authored-by: Mahad Kalam <55807755+skyfallwastaken@users.noreply.github.com>

app/controllers/settings/base_controller.rb

@@ -187,7 +187,9 @@ class Settings::BaseController < InertiaController
         markscribe_reference_url: "https://github.com/taciturnaxolotl/markscribe#your-wakatime-languages-formated-as-a-bar",
         markscribe_preview_image_url: "https://cdn.fluff.pw/slackcdn/524e293aa09bc5f9115c0c29c18fb4bc.png",
         heatmap_badge_url: "https://heatmap.shymike.dev/?id=#{@user.id}&timezone=#{@user.timezone}",
-        heatmap_config_url: "https://hackatime-heatmap.shymike.dev/?id=#{@user.id}&timezone=#{@user.timezone}"
+        heatmap_config_url: "https://hackatime-heatmap.shymike.dev/?id=#{@user.id}&timezone=#{@user.timezone}",
+        hackabox_repo_url: "https://github.com/quackclub/hacka-box",
+        hackabox_preview_image_url: "https://user-cdn.hackclub-assets.com/019cef81-366a-7543-ad7c-21b738310f23/image.png"
       },
       config_file: {
         content: generated_wakatime_config(@latest_api_key_token),

app/javascript/pages/Users/Settings/Badges.svelte

@@ -178,4 +178,26 @@
         class="mt-2 overflow-x-auto text-xs text-surface-content">{badges.heatmap_badge_url}</pre>
     </div>
   </SectionCard>
+  <SectionCard
+    id="user_hackabox"
+    title="Hackabox Gist"
+    description="Fork the Hackabox template repository to create a pinned profile gist with your coding stats, updated daily."
+    wide
+  >
+    <p class="mt-3 text-sm text-muted">
+      Reference:
+      <a
+        href={badges.hackabox_repo_url}
+        target="_blank"
+        class="text-primary underline"
+      >
+        hackabox setup instructions
+      </a>
+    </p>
+    <img
+      src={badges.hackabox_preview_image_url}
+      alt="Example hackabox output"
+      class="mt-4 w-full max-w-3xl rounded-md border border-surface-200"
+    />
+  </SectionCard>
 </SettingsShell>

app/javascript/pages/Users/Settings/types.ts

@@ -145,6 +145,8 @@ export type BadgesProps = {
   markscribe_preview_image_url: string;
   heatmap_badge_url: string;
   heatmap_config_url: string;
+  hackabox_repo_url: string;
+  hackabox_preview_image_url: string;
 };
 
 export type ConfigFileProps = {
@@ -329,6 +331,7 @@ const subsectionMap: Record<SectionId, SettingsSubsection[]> = {
     { id: "user_stats_badges", label: "Stats badges" },
     { id: "user_markscribe", label: "Markscribe" },
     { id: "user_heatmap", label: "Heatmap" },
+    { id: "user_hackabox", label: "Hackabox" },
   ],
   data: [
     { id: "user_imports", label: "Imports" },
@@ -365,6 +368,7 @@ const hashSectionMap: Record<string, SectionId> = {
   user_stats_badges: "badges",
   user_markscribe: "badges",
   user_heatmap: "badges",
+  user_hackabox: "badges",
   user_imports: "data",
   download_user_data: "data",
   delete_account: "data",