fix(website): prioritize getting started across language editions

scripts/website.py

@@ -16,9 +16,9 @@ from urllib.parse import quote, urlsplit
 SITE_ORIGIN = "https://rea.tools"
 NOTES_FIXTURES = {"examples/notes-electron/index.html", "examples/notes-web/index.html"}
 NAVIGATION = (
+    ("Get started", "get-started/"),
     ("Showcases", "showcase/"),
     ("Blog", "blog/"),
-    ("Get started", "get-started/"),
     ("Guides", "guides/"),
     ("FAQ", "faq/"),
 )

website/public/assets/styles.css

@@ -159,6 +159,7 @@ section[id] {
 }
 .language-picker {
   position: relative;
+  min-inline-size: 0;
   font-size: 0.8rem;
 }
 .language-picker summary {
@@ -174,11 +175,17 @@ section[id] {
   white-space: nowrap;
   list-style: none;
 }
+.language-picker summary > span:last-child {
+  min-inline-size: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 .language-picker summary::-webkit-details-marker {
   display: none;
 }
 .language-picker summary::after {
   content: "⌄";
+  flex-shrink: 0;
 }
 .language-picker nav {
   position: absolute;
@@ -237,6 +244,7 @@ section[id] {
 .brand-name {
   font-size: 1.45rem;
   font-weight: 750;
+  white-space: nowrap;
   letter-spacing: -0.065em;
 }
 .brand-caption {
@@ -379,6 +387,18 @@ section[id] {
 .button.secondary:hover {
   background: var(--soft);
 }
+.button.home-setup-link {
+  gap: 0.5rem;
+  border-color: var(--accent);
+  color: var(--accent);
+  font-weight: 600;
+}
+.button.home-setup-link:hover {
+  background: #eef3fa;
+}
+html[dir="rtl"] .home-setup-link .button-arrow {
+  transform: scaleX(-1);
+}
 .text-link {
   font-size: 0.95rem;
   font-weight: 500;
@@ -2751,7 +2771,7 @@ html[dir="rtl"] .brand-name {
 }
 @media (max-width: 850px) {
   .header-inner {
-    grid-template-columns: minmax(0, 1fr) auto;
+    grid-template-columns: auto minmax(0, 1fr);
   }
   .brand-caption {
     display: none;
@@ -2765,6 +2785,8 @@ html[dir="rtl"] .brand-name {
   .header-social {
     grid-column: 2;
     grid-row: 1;
+    min-inline-size: 0;
+    justify-content: flex-end;
     gap: 0.45rem;
   }
   .nav-github-count {
@@ -2783,6 +2805,12 @@ html[dir="rtl"] .brand-name {
   }
 }
 @media (max-width: 400px) {
+  .header-inner {
+    column-gap: 1rem;
+  }
+  .language-picker summary > span[aria-hidden="true"] {
+    display: none;
+  }
   .header-social .nav-x {
     display: none;
   }

website/public/blog/index.html

@@ -115,9 +115,9 @@
           ><span class="brand-caption" data-i18n-skip>Reverse Engineer Anything</span></a
         >
         <nav class="navigation" aria-label="Main navigation">
+          <a href="../get-started/" class="nav-start">Get started</a>
           <a href="../showcase/">Showcases</a>
           <a href="../blog/" aria-current="page">Blog</a>
-          <a href="../get-started/" class="nav-start">Get started</a>
           <a href="../guides/">Guides</a>
           <a href="../faq/">FAQ</a>
         </nav>

website/public/blog/touhou-reconstruction/index.html

@@ -115,9 +115,9 @@
           ><span class="brand-caption" data-i18n-skip>Reverse Engineer Anything</span></a
         >
         <nav class="navigation" aria-label="Main navigation">
+          <a href="../../get-started/" class="nav-start">Get started</a>
           <a href="../../showcase/">Showcases</a>
           <a href="../../blog/" aria-current="page">Blog</a>
-          <a href="../../get-started/" class="nav-start">Get started</a>
           <a href="../../guides/">Guides</a>
           <a href="../../faq/">FAQ</a>
         </nav>

website/public/examples/dino-lab/index.html

@@ -116,9 +116,9 @@
           ><span class="brand-caption" data-i18n-skip>Reverse Engineer Anything</span></a
         >
         <nav class="navigation" aria-label="Main navigation">
+          <a href="../../get-started/" class="nav-start">Get started</a>
           <a href="../../showcase/">Showcases</a>
           <a href="../../blog/">Blog</a>
-          <a href="../../get-started/" class="nav-start">Get started</a>
           <a href="../../guides/">Guides</a>
           <a href="../../faq/">FAQ</a>
         </nav>

website/public/faq/index.html

@@ -115,9 +115,9 @@
           ><span class="brand-caption" data-i18n-skip>Reverse Engineer Anything</span></a
         >
         <nav class="navigation" aria-label="Main navigation">
+          <a href="../get-started/" class="nav-start">Get started</a>
           <a href="../showcase/">Showcases</a>
           <a href="../blog/">Blog</a>
-          <a href="../get-started/" class="nav-start">Get started</a>
           <a href="../guides/">Guides</a>
           <a href="../faq/" aria-current="page">FAQ</a>
         </nav>

website/public/first-investigation/index.html

@@ -115,9 +115,9 @@
           ><span class="brand-caption" data-i18n-skip>Reverse Engineer Anything</span></a
         >
         <nav class="navigation" aria-label="Main navigation">
+          <a href="../get-started/" class="nav-start">Get started</a>
           <a href="../showcase/">Showcases</a>
           <a href="../blog/">Blog</a>
-          <a href="../get-started/" class="nav-start">Get started</a>
           <a href="../guides/">Guides</a>
           <a href="../faq/">FAQ</a>
         </nav>

website/public/get-started/index.html

@@ -115,9 +115,9 @@
           ><span class="brand-caption" data-i18n-skip>Reverse Engineer Anything</span></a
         >
         <nav class="navigation" aria-label="Main navigation">
+          <a href="../get-started/" class="nav-start" aria-current="page">Get started</a>
           <a href="../showcase/">Showcases</a>
           <a href="../blog/">Blog</a>
-          <a href="../get-started/" class="nav-start" aria-current="page">Get started</a>
           <a href="../guides/">Guides</a>
           <a href="../faq/">FAQ</a>
         </nav>

website/public/guides/browser/index.html

@@ -115,9 +115,9 @@
           ><span class="brand-caption" data-i18n-skip>Reverse Engineer Anything</span></a
         >
         <nav class="navigation" aria-label="Main navigation">
+          <a href="../../get-started/" class="nav-start">Get started</a>
           <a href="../../showcase/">Showcases</a>
           <a href="../../blog/">Blog</a>
-          <a href="../../get-started/" class="nav-start">Get started</a>
           <a href="../../guides/" aria-current="page">Guides</a>
           <a href="../../faq/">FAQ</a>
         </nav>

website/public/guides/index.html

@@ -115,9 +115,9 @@
           ><span class="brand-caption" data-i18n-skip>Reverse Engineer Anything</span></a
         >
         <nav class="navigation" aria-label="Main navigation">
+          <a href="../get-started/" class="nav-start">Get started</a>
           <a href="../showcase/">Showcases</a>
           <a href="../blog/">Blog</a>
-          <a href="../get-started/" class="nav-start">Get started</a>
           <a href="../guides/" aria-current="page">Guides</a>
           <a href="../faq/">FAQ</a>
         </nav>

website/public/guides/javascript/index.html

@@ -115,9 +115,9 @@
           ><span class="brand-caption" data-i18n-skip>Reverse Engineer Anything</span></a
         >
         <nav class="navigation" aria-label="Main navigation">
+          <a href="../../get-started/" class="nav-start">Get started</a>
           <a href="../../showcase/">Showcases</a>
           <a href="../../blog/">Blog</a>
-          <a href="../../get-started/" class="nav-start">Get started</a>
           <a href="../../guides/" aria-current="page">Guides</a>
           <a href="../../faq/">FAQ</a>
         </nav>

website/public/guides/native/index.html

@@ -115,9 +115,9 @@
           ><span class="brand-caption" data-i18n-skip>Reverse Engineer Anything</span></a
         >
         <nav class="navigation" aria-label="Main navigation">
+          <a href="../../get-started/" class="nav-start">Get started</a>
           <a href="../../showcase/">Showcases</a>
           <a href="../../blog/">Blog</a>
-          <a href="../../get-started/" class="nav-start">Get started</a>
           <a href="../../guides/" aria-current="page">Guides</a>
           <a href="../../faq/">FAQ</a>
         </nav>

website/public/index.html

@@ -117,9 +117,9 @@
           ><span class="brand-caption" data-i18n-skip>Reverse Engineer Anything</span></a
         >
         <nav class="navigation" aria-label="Main navigation">
+          <a href="./get-started/" class="nav-start">Get started</a>
           <a href="./showcase/">Showcases</a>
           <a href="./blog/">Blog</a>
-          <a href="./get-started/" class="nav-start">Get started</a>
           <a href="./guides/">Guides</a>
           <a href="./faq/">FAQ</a>
         </nav>
@@ -226,7 +226,12 @@
             </p>
             <div class="actions">
               <a class="button" href="#what-is-re">See how REA works ↓</a>
-              <a class="button secondary" href="get-started/">Setup guide</a>
+              <a class="button secondary home-setup-link" href="get-started/"
+                >Get started
+                <span class="button-arrow" aria-hidden="true" data-i18n-skip
+                  >→</span
+                ></a
+              >
               <a class="text-link" href="showcase/">Showcases →</a>
             </div>
             <p class="home-expert-shortcut">

website/public/showcase/aegis/index.html

@@ -116,9 +116,9 @@
           ><span class="brand-caption" data-i18n-skip>Reverse Engineer Anything</span></a
         >
         <nav class="navigation" aria-label="Main navigation">
+          <a href="../../get-started/" class="nav-start">Get started</a>
           <a href="../../showcase/" aria-current="page">Showcases</a>
           <a href="../../blog/">Blog</a>
-          <a href="../../get-started/" class="nav-start">Get started</a>
           <a href="../../guides/">Guides</a>
           <a href="../../faq/">FAQ</a>
         </nav>

website/public/showcase/ctf/index.html

@@ -115,9 +115,9 @@
           ><span class="brand-caption" data-i18n-skip>Reverse Engineer Anything</span></a
         >
         <nav class="navigation" aria-label="Main navigation">
+          <a href="../../get-started/" class="nav-start">Get started</a>
           <a href="../../showcase/" aria-current="page">Showcases</a>
           <a href="../../blog/">Blog</a>
-          <a href="../../get-started/" class="nav-start">Get started</a>
           <a href="../../guides/">Guides</a>
           <a href="../../faq/">FAQ</a>
         </nav>

website/public/showcase/dx-ball/index.html

@@ -115,9 +115,9 @@
           ><span class="brand-caption" data-i18n-skip>Reverse Engineer Anything</span></a
         >
         <nav class="navigation" aria-label="Main navigation">
+          <a href="../../get-started/" class="nav-start">Get started</a>
           <a href="../../showcase/" aria-current="page">Showcases</a>
           <a href="../../blog/">Blog</a>
-          <a href="../../get-started/" class="nav-start">Get started</a>
           <a href="../../guides/">Guides</a>
           <a href="../../faq/">FAQ</a>
         </nav>

website/public/showcase/index.html

@@ -115,9 +115,9 @@
           ><span class="brand-caption" data-i18n-skip>Reverse Engineer Anything</span></a
         >
         <nav class="navigation" aria-label="Main navigation">
+          <a href="../get-started/" class="nav-start">Get started</a>
           <a href="../showcase/" aria-current="page">Showcases</a>
           <a href="../blog/">Blog</a>
-          <a href="../get-started/" class="nav-start">Get started</a>
           <a href="../guides/">Guides</a>
           <a href="../faq/">FAQ</a>
         </nav>

website/public/showcase/notion/index.html

@@ -115,9 +115,9 @@
           ><span class="brand-caption" data-i18n-skip>Reverse Engineer Anything</span></a
         >
         <nav class="navigation" aria-label="Main navigation">
+          <a href="../../get-started/" class="nav-start">Get started</a>
           <a href="../../showcase/" aria-current="page">Showcases</a>
           <a href="../../blog/">Blog</a>
-          <a href="../../get-started/" class="nav-start">Get started</a>
           <a href="../../guides/">Guides</a>
           <a href="../../faq/">FAQ</a>
         </nav>

website/public/showcase/th04/index.html

@@ -115,9 +115,9 @@
           ><span class="brand-caption" data-i18n-skip>Reverse Engineer Anything</span></a
         >
         <nav class="navigation" aria-label="Main navigation">
+          <a href="../../get-started/" class="nav-start">Get started</a>
           <a href="../../showcase/" aria-current="page">Showcases</a>
           <a href="../../blog/">Blog</a>
-          <a href="../../get-started/" class="nav-start">Get started</a>
           <a href="../../guides/">Guides</a>
           <a href="../../faq/">FAQ</a>
         </nav>