feat: remove translation based path

Author: LeadcodeDev

apps/blog/src/pages/index.astro

@@ -15,8 +15,15 @@ const fallback = supportedLocales.includes('en') ? 'en' : supportedLocales[0]
     <title>Redirecting…</title>
     <meta http-equiv="refresh" content={`0;url=/${fallback}`} />
     <script define:vars={{ supportedLocales, fallback }}>
+      function getCookie(name) {
+        const match = document.cookie.match(new RegExp('(?:^|; )' + name + '=([^;]*)'))
+        return match ? match[1] : null
+      }
+      const cookieLocale = getCookie('locale')
       const browserLang = (navigator.language || '').split('-')[0]
-      const locale = supportedLocales.includes(browserLang) ? browserLang : fallback
+      const locale = (cookieLocale && supportedLocales.includes(cookieLocale))
+        ? cookieLocale
+        : supportedLocales.includes(browserLang) ? browserLang : fallback
       window.location.replace('/' + locale)
     </script>
   </head>

apps/website/src/components/cta-section.astro

@@ -1,15 +1,6 @@
 ---
 import { Icon } from "@iconify/react";
 import { Button } from "@explainer/ui";
-
-const title = "Ready to get started?";
-const description =
-  "Start building your documentation in minutes. Free, open source, and yours to customize.";
-
-const action = {
-  label: "Read the docs",
-  href: "/docs/documentation/getting-started/getting-started",
-};
 ---
 
 <div class="w-full max-w-6xl mx-auto px-5 py-16 sm:py-24 lg:py-32">
@@ -35,20 +26,20 @@ const action = {
       <div class="absolute top-8 right-1/4 size-2.5 rounded-full bg-primary/10">
       </div>
       <div
-        class="absolute bottom-10 left-[30%] size-2 rounded-full bg-primary/[0.08]"
+        class="absolute bottom-10 left-[30%] size-2 rounded-full bg-primary/8"
       >
       </div>
     </div>
-    <h2 class="text-3xl font-semibold text-foreground sm:text-4xl">
-      {title}
+    <h2 class="text-3xl font-semibold text-foreground sm:text-4xl" data-t="cta.title">
+      Ready to get started?
     </h2>
-    <p class="mt-4 text-lg text-muted-foreground max-w-xl mx-auto text-balance">
-      {description}
+    <p class="mt-4 text-lg text-muted-foreground max-w-xl mx-auto text-balance" data-t="cta.description">
+      Start building your documentation in minutes. Free, open source, and yours to customize.
     </p>
     <div class="mt-8 flex justify-center">
       <Button size="lg" className="cursor-pointer" client:load>
-        <a href={action.href} class="flex gap-2" rel="noopener noreferrer">
-          {action.label}
+        <a href="/docs/documentation/getting-started/getting-started" class="flex gap-2" rel="noopener noreferrer">
+          <span data-t="cta.action">Read the docs</span>
           <Icon
             icon="mdi:arrow-right"
             aria-hidden="true"

apps/website/src/components/features-section.astro

@@ -1,46 +1,13 @@
 ---
 import { Icon } from "@iconify/react";
 
-const title = "Everything you need, out of the box";
-const description = "Explainer gives you the tools to focus on your content, not your tooling.";
-
 const features = [
-  {
-    icon: "mdi:language-markdown",
-    title: "Markdown & MDX",
-    description:
-      "Write content in Markdown or MDX with custom components, directives, and JSX support.",
-  },
-  {
-    icon: "mdi:flash-outline",
-    title: "Lightning fast",
-    description:
-      "Static site generation for instant page loads. Zero JavaScript shipped by default.",
-  },
-  {
-    icon: "mdi:code-braces",
-    title: "Rich code blocks",
-    description:
-      "Dual-theme syntax highlighting, line diffs, focus mode, and 60+ language icons.",
-  },
-  {
-    icon: "mdi:magnify",
-    title: "Built-in search",
-    description:
-      "Command palette search so your readers find any page instantly.",
-  },
-  {
-    icon: "mdi:search-web",
-    title: "SEO ready",
-    description:
-      "Auto-generated OG thumbnails, sitemap, robots.txt, and RSS feed.",
-  },
-  {
-    icon: "mdi:theme-light-dark",
-    title: "Dark mode",
-    description:
-      "Full light and dark theme support with system preference detection.",
-  },
+  { icon: "mdi:language-markdown", titleKey: "features.markdown.title", descKey: "features.markdown.description", title: "Markdown & MDX", description: "Write content in Markdown or MDX with custom components, directives, and JSX support." },
+  { icon: "mdi:flash-outline", titleKey: "features.fast.title", descKey: "features.fast.description", title: "Lightning fast", description: "Static site generation for instant page loads. Zero JavaScript shipped by default." },
+  { icon: "mdi:code-braces", titleKey: "features.code.title", descKey: "features.code.description", title: "Rich code blocks", description: "Dual-theme syntax highlighting, line diffs, focus mode, and 60+ language icons." },
+  { icon: "mdi:magnify", titleKey: "features.search.title", descKey: "features.search.description", title: "Built-in search", description: "Command palette search so your readers find any page instantly." },
+  { icon: "mdi:search-web", titleKey: "features.seo.title", descKey: "features.seo.description", title: "SEO ready", description: "Auto-generated OG thumbnails, sitemap, robots.txt, and RSS feed." },
+  { icon: "mdi:theme-light-dark", titleKey: "features.darkMode.title", descKey: "features.darkMode.description", title: "Dark mode", description: "Full light and dark theme support with system preference detection." },
 ];
 ---
 
@@ -76,16 +43,18 @@ const features = [
     <div class="text-center mb-16">
       <p
         class="text-sm font-semibold text-primary uppercase tracking-wide mb-3"
+        data-t="features.label"
       >
         Features
       </p>
-      <h2 class="text-3xl font-semibold text-foreground sm:text-4xl">
-        {title}
+      <h2 class="text-3xl font-semibold text-foreground sm:text-4xl" data-t="features.title">
+        Everything you need, out of the box
       </h2>
       <p
         class="mt-4 text-lg text-muted-foreground max-w-2xl mx-auto text-balance"
+        data-t="features.description"
       >
-        {description}
+        Explainer gives you the tools to focus on your content, not your tooling.
       </p>
     </div>
 
@@ -102,10 +71,10 @@ const features = [
                 />
               </div>
               <div>
-                <h3 class="text-base font-semibold text-foreground">
+                <h3 class="text-base font-semibold text-foreground" data-t={feature.titleKey}>
                   {feature.title}
                 </h3>
-                <p class="text-sm text-muted-foreground mt-1.5 leading-relaxed">
+                <p class="text-sm text-muted-foreground mt-1.5 leading-relaxed" data-t={feature.descKey}>
                   {feature.description}
                 </p>
               </div>

apps/website/src/components/hero-section.astro

@@ -2,27 +2,6 @@
 import { BackgroundAnimation } from "./background-animation";
 import { Icon } from "@iconify/react";
 import { Button } from "@explainer/ui";
-
-const badge = "Explainer";
-const title = "Explain your ideas";
-const description =
-  "Quickly design your documentation and optimise it for search engine optimisation to showcase your products.";
-
-const primaryAction = {
-  label: "Getting Started",
-  href: "/docs/framework/getting-started/getting-started",
-};
-const secondaryAction = {
-  label: "View on GitHub",
-  href: "https://github.com/explainer/explainer",
-  icon: "mdi:github",
-};
-
-const socialProof = [
-  { icon: "mdi:open-source-initiative", text: "Open source" },
-  { icon: "mdi:license", text: "MIT License" },
-  { icon: "mdi:download-outline", text: "1k+ downloads" },
-];
 ---
 
 <div
@@ -103,31 +82,33 @@ const socialProof = [
             rel="noopener noreferrer"
             class="rounded-full font-semibold inline-flex items-center gap-2 transition-colors px-4 py-1.5 text-xs ring ring-inset ring-primary/50 text-primary hover:bg-primary/10 active:bg-primary/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary"
           >
-            <span>{badge}</span>
+            <span data-t="hero.badge">Explainer</span>
             <Icon icon="mdi:arrow-right" className="size-3.5" client:load />
           </a>
         </div>
         <h1
           class="text-5xl text-pretty tracking-tight text-foreground font-semibold sm:text-7xl max-w-6xl mx-auto"
+          data-t="hero.title"
         >
-          {title}
+          Explain your ideas
         </h1>
         <p
           class="text-lg sm:text-xl/8 text-muted-foreground text-balance mt-6 max-w-2xl mx-auto"
+          data-t="hero.description"
         >
-          {description}
+          Quickly design your documentation and optimise it for search engine optimisation to showcase your products.
         </p>
       </div>
 
       <div class="pt-10 flex items-center justify-center">
         <div class="flex flex-wrap gap-x-4 gap-y-3">
           <Button size="lg" className="cursor-pointer" client:load>
             <a
-              href={primaryAction.href}
+              href="/docs/framework/getting-started/getting-started"
               class="flex gap-2"
               rel="noopener noreferrer"
             >
-              {primaryAction.label}
+              <span data-t="hero.primaryAction">Getting Started</span>
               <Icon
                 icon="mdi:arrow-right"
                 aria-hidden="true"
@@ -143,18 +124,18 @@ const socialProof = [
             client:load
           >
             <a
-              href={secondaryAction.href}
+              href="https://github.com/explainer/explainer"
               class="flex gap-2"
               target="_blank"
               rel="noopener noreferrer"
             >
               <Icon
-                icon={secondaryAction.icon}
+                icon="mdi:github"
                 aria-hidden="true"
                 className="size-5"
                 client:load
               />
-              {secondaryAction.label}
+              <span data-t="hero.secondaryAction">View on GitHub</span>
             </a>
           </Button>
         </div>
@@ -163,18 +144,18 @@ const socialProof = [
       <div
         class="mt-10 flex items-center justify-center gap-x-8 gap-y-3 flex-wrap"
       >
-        {
-          socialProof.map((item) => (
-            <div class="flex items-center gap-2 text-sm text-muted-foreground">
-              <Icon
-                icon={item.icon}
-                className="size-4 text-primary/70"
-                client:load
-              />
-              <span>{item.text}</span>
-            </div>
-          ))
-        }
+        <div class="flex items-center gap-2 text-sm text-muted-foreground">
+          <Icon icon="mdi:open-source-initiative" className="size-4 text-primary/70" client:load />
+          <span data-t="hero.openSource">Open source</span>
+        </div>
+        <div class="flex items-center gap-2 text-sm text-muted-foreground">
+          <Icon icon="mdi:license" className="size-4 text-primary/70" client:load />
+          <span data-t="hero.license">MIT License</span>
+        </div>
+        <div class="flex items-center gap-2 text-sm text-muted-foreground">
+          <Icon icon="mdi:download-outline" className="size-4 text-primary/70" client:load />
+          <span data-t="hero.downloads">1k+ downloads</span>
+        </div>
       </div>
     </div>
   </div>

apps/website/src/components/highlights-section.astro

@@ -1,39 +1,11 @@
 ---
 import { Icon } from "@iconify/react";
 
-const title = "Why Explainer?";
-const description =
-  "Built for developers who care about their users' experience.";
-
 const highlights = [
-  {
-    icon: "mdi:rocket-launch",
-    title: "Ship docs in minutes, not days",
-    description:
-      "Clone the repo, write your Markdown, deploy. No complex setup, no build pipeline to configure. Your documentation is live before your coffee gets cold.",
-    span: 4,
-  },
-  {
-    icon: "mdi:palette-swatch-variant",
-    title: "Your brand, your way",
-    description:
-      "Tailwind CSS design tokens let you match your documentation to your product identity with a few CSS variable changes.",
-    span: 2,
-  },
-  {
-    icon: "mdi:puzzle-outline",
-    title: "Extensible by design",
-    description:
-      "Drop in React, Vue, or Svelte components directly in your Markdown. Build interactive examples, live demos, and API playgrounds.",
-    span: 2,
-  },
-  {
-    icon: "mdi:chart-line",
-    title: "Built for growth",
-    description:
-      "From a single getting-started guide to hundreds of pages — the architecture scales with your project. Multi-collection docs, versioning-ready structure, and automatic navigation.",
-    span: 4,
-  },
+  { icon: "mdi:rocket-launch", titleKey: "highlights.ship.title", descKey: "highlights.ship.description", title: "Ship docs in minutes, not days", description: "Clone the repo, write your Markdown, deploy. No complex setup, no build pipeline to configure. Your documentation is live before your coffee gets cold.", span: 4 },
+  { icon: "mdi:palette-swatch-variant", titleKey: "highlights.brand.title", descKey: "highlights.brand.description", title: "Your brand, your way", description: "Tailwind CSS design tokens let you match your documentation to your product identity with a few CSS variable changes.", span: 2 },
+  { icon: "mdi:puzzle-outline", titleKey: "highlights.extensible.title", descKey: "highlights.extensible.description", title: "Extensible by design", description: "Drop in React, Vue, or Svelte components directly in your Markdown. Build interactive examples, live demos, and API playgrounds.", span: 2 },
+  { icon: "mdi:chart-line", titleKey: "highlights.growth.title", descKey: "highlights.growth.description", title: "Built for growth", description: "From a single getting-started guide to hundreds of pages — the architecture scales with your project. Multi-collection docs, versioning-ready structure, and automatic navigation.", span: 4 },
 ];
 ---
 
@@ -54,18 +26,18 @@ const highlights = [
     </div>
 
     <div
-      class="absolute -bottom-16 -right-24 w-80 h-80 rounded-full border-2 border-primary/[0.09]"
+      class="absolute -bottom-16 -right-24 w-80 h-80 rounded-full border-2 border-primary/9"
     >
     </div>
 
     <div class="absolute top-8 right-1/3 size-2.5 rounded-full bg-primary/10">
     </div>
     <div
-      class="absolute bottom-1/4 left-[20%] size-2 rounded-full bg-primary/[0.08]"
+      class="absolute bottom-1/4 left-[20%] size-2 rounded-full bg-primary/8"
     >
     </div>
     <div
-      class="absolute top-[60%] right-[8%] size-1.5 rounded-full bg-primary/[0.09]"
+      class="absolute top-[60%] right-[8%] size-1.5 rounded-full bg-primary/9"
     >
     </div>
   </div>
@@ -75,16 +47,18 @@ const highlights = [
     <div class="text-center mb-16">
       <p
         class="text-sm font-semibold text-primary uppercase tracking-wide mb-3"
+        data-t="highlights.label"
       >
         Highlights
       </p>
-      <h2 class="text-3xl font-semibold text-foreground sm:text-4xl">
-        {title}
+      <h2 class="text-3xl font-semibold text-foreground sm:text-4xl" data-t="highlights.title">
+        Why Explainer?
       </h2>
       <p
         class="mt-4 text-lg text-muted-foreground max-w-2xl mx-auto text-balance"
+        data-t="highlights.description"
       >
-        {description}
+        Built for developers who care about their users' experience.
       </p>
     </div>
 
@@ -106,10 +80,10 @@ const highlights = [
                 />
               </div>
               <div>
-                <h3 class="text-xl font-semibold text-foreground">
+                <h3 class="text-xl font-semibold text-foreground" data-t={item.titleKey}>
                   {item.title}
                 </h3>
-                <p class="text-sm text-muted-foreground mt-2 leading-relaxed">
+                <p class="text-sm text-muted-foreground mt-2 leading-relaxed" data-t={item.descKey}>
                   {item.description}
                 </p>
               </div>