full translation (#967)

8 files changed, 84 insertions, 82 deletions

diff --git a/docs/src/components/Header/Header.astro b/docs/src/components/Header/Header.astro
index 6ee66e24e..8471e4ebf 100644
--- a/docs/src/components/Header/Header.astro
+++ b/docs/src/components/Header/Header.astro
@@ -1,8 +1,11 @@
 ---
 import SkipToContent from './SkipToContent.astro';
 import SidebarToggle from './SidebarToggle.tsx';
+import LanguageSelect from './LanguageSelect.jsx';
 import Search from "./Search.jsx";
-// import LanguageSelect from './LanguageSelect.jsx';
+import { getLanguageFromURL } from '../../util.ts';
+const {currentPage} = Astro.props;
+const lang = currentPage && getLanguageFromURL(currentPage);
 ---
 <style>
       header {
@@ -149,7 +152,7 @@ import Search from "./Search.jsx";
         </a>
     </div>
     <div style="flex-grow: 1;"></div>
-    <!-- Add back when ready: <LanguageSelect client:idle /> -->
+    {lang && <LanguageSelect lang={lang} client:idle />}
     <div class="search-item"><Search client:idle /></div>
     </nav>
 </header>
\ No newline at end of file
diff --git a/docs/src/components/Header/LanguageSelect.tsx b/docs/src/components/Header/LanguageSelect.tsx
index 4eb80c2ad..8cdedb8ae 100644
--- a/docs/src/components/Header/LanguageSelect.tsx
+++ b/docs/src/components/Header/LanguageSelect.tsx
@@ -2,16 +2,7 @@ import type { FunctionalComponent } from 'preact';
 import { h } from 'preact';
 import './LanguageSelect.css';
 
-const SelectLanguage: FunctionalComponent<{}> = ({}) => {
-  let defaultValue = undefined;
-  if (!import.meta.env.SSR) {
-    const oldPathname = window.location.pathname;
-    const oldPathnameParts = oldPathname.split('/');
-    if (/[a-z]{2}/.test(oldPathnameParts[1])) {
-      defaultValue = oldPathnameParts[1];
-    }
-  }
-
+const LanguageSelect: FunctionalComponent<{lang: string}> = ({lang}) => {
   return (
     <div class="language-select-wrapper">
       <svg
@@ -23,19 +14,18 @@ const SelectLanguage: FunctionalComponent<{}> = ({}) => {
         height="1.2em"
         width="1.2em"
       >
-        {' '}
         <path
           fill="currentColor"
           d="M61,24.6h7.9l18.7,51.6h-7.7l-5.4-15.5H54.3l-5.6,15.5h-7.2L61,24.6z M72.6,55l-8-22.8L56.3,55H72.6z"
-        />{' '}
+        />
         <path
           fill="currentColor"
           d="M53.6,60.6c-10-4-16-9-22-14c0,0,1.3,1.3,0,0c-6,5-20,13-20,13l-4-6c8-5,10-6,19-13c-2.1-1.9-12-13-13-19h8          c4,9,10,14,10,14c10-8,10-19,10-19h8c0,0-1,13-12,24l0,0c5,5,10,9,19,13L53.6,60.6z M1.6,16.6h56v-8h-23v-7h-9v7h-24V16.6z"
-        />{' '}
+        />
       </svg>
       <select
         class="language-select"
-        value={defaultValue}
+        value={lang}
         onChange={(e) => {
           const newLang = e.target.value;
           if (newLang === 'en') {
@@ -70,4 +60,4 @@ const SelectLanguage: FunctionalComponent<{}> = ({}) => {
   );
 };
 
-export default SelectLanguage;
+export default LanguageSelect;
diff --git a/docs/src/components/LeftSidebar/LeftSidebar.astro b/docs/src/components/LeftSidebar/LeftSidebar.astro
index f44762dba..813de0cf7 100644
--- a/docs/src/components/LeftSidebar/LeftSidebar.astro
+++ b/docs/src/components/LeftSidebar/LeftSidebar.astro
@@ -1,17 +1,30 @@
 ---
 import { SIDEBAR } from '../../config.ts';
+import { getLanguageFromURL } from '../../util.ts';
 const {currentPage} = Astro.props;
+const currentPageMatch = currentPage.slice(1);
+const langCode = getLanguageFromURL(currentPage);
+// SIDEBAR is a flat array. Group it by sections to properly render. 
+const sidebarSections = SIDEBAR[langCode].reduce((col, item) => {
+  if (item.header) {
+    col.push({...item, children: []});
+  } else {
+    col[col.length-1].children.push(item);
+  }
+  return col;
+}, []);
+
 ---
 
 <nav aria-labelledby="grid-left">
   <ul class="nav-groups">  
-    {SIDEBAR.map(category => (
+    {sidebarSections.map(section => (
       <li>
         <div class="nav-group">
-          <h2 class="nav-group-title">{category.text}</h2>
+          <h2 class="nav-group-title">{section.text}</h2>
           <ul>
-            {category.children.map(child => (
-              <li class="nav-link"><a href={`${Astro.site.pathname}${child.link}`} aria-current={`${currentPage === child.link ? 'page' : 'false'}`}>{child.text}</a></li>
+            {section.children.map(child => (
+              <li class="nav-link"><a href={`${Astro.site.pathname}${child.link}`} aria-current={`${currentPageMatch === child.link ? 'page' : 'false'}`}>{child.text}</a></li>
             ))}
           </ul>
         </div>
diff --git a/docs/src/components/RightSidebar/MoreMenu.astro b/docs/src/components/RightSidebar/MoreMenu.astro
index 6014bdee7..88a31da28 100644
--- a/docs/src/components/RightSidebar/MoreMenu.astro
+++ b/docs/src/components/RightSidebar/MoreMenu.astro
@@ -35,7 +35,7 @@ const {editHref} = Astro.props;
     </a>
   </li>
   <li class={`header-link depth-2`}>
-    <a href={editHref} target="_blank">
+    <a href="https://github.com/snowpackjs/astro/blob/main/CONTRIBUTING.md#translations" target="_blank">
       <svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 88.6 77.3" height="1.24em" width="1.24em" style="margin: -2px;"> <path fill="currentColor" d="M61,24.6h7.9l18.7,51.6h-7.7l-5.4-15.5H54.3l-5.6,15.5h-7.2L61,24.6z M72.6,55l-8-22.8L56.3,55H72.6z" /> <path fill="currentColor" d="M53.6,60.6c-10-4-16-9-22-14c0,0,1.3,1.3,0,0c-6,5-20,13-20,13l-4-6c8-5,10-6,19-13c-2.1-1.9-12-13-13-19h8          c4,9,10,14,10,14c10-8,10-19,10-19h8c0,0-1,13-12,24l0,0c5,5,10,9,19,13L53.6,60.6z M1.6,16.6h56v-8h-23v-7h-9v7h-24V16.6z" /> </svg>
       <span>Translate this page</span>
     </a>
@@ -59,10 +59,10 @@ const {editHref} = Astro.props;
           d="M448 0H64C28.7 0 0 28.7 0 64v288c0 35.3 28.7 64 64 64h96v84c0 9.8 11.2 15.5 19.1 9.7L304 416h144c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64z"
         ></path>
       </svg>
-      <span>Join the community</span>
+      <span>Join our community</span>
     </a>
   </li>
 </ul>
 <div style="margin: 2rem 0; text-align: center;">
-  <ThemeToggleButton client:visible />
+  <ThemeToggleButton client:idle />
 </div>
diff --git a/docs/src/config.ts b/docs/src/config.ts
index 3e677a27e..b887bec40 100644
--- a/docs/src/config.ts
+++ b/docs/src/config.ts
@@ -1,56 +1,50 @@
-export const SIDEBAR = [
-  {
-    text: 'Setup',
-    link: '',
-    children: [
-      { text: 'Getting Started', link: 'getting-started' },
-      { text: 'Quickstart', link: 'quick-start' },
-      { text: 'Installation', link: 'installation' },
-      { text: 'Examples', link: 'examples' },
-      { text: 'Astro vs. X', link: 'comparing-astro-vs-other-tools' },
-    ],
-  },
-  {
-    text: 'Basics',
-    link: 'core-concepts',
-    children: [
-      { text: 'Project Structure', link: 'core-concepts/project-structure' },
-      { text: 'Components', link: 'core-concepts/astro-components' },
-      { text: 'Pages', link: 'core-concepts/astro-pages' },
-      { text: 'Layouts', link: 'core-concepts/layouts' },
-      { text: 'Collections', link: 'core-concepts/collections' },
-      { text: 'Partial Hydration', link: 'core-concepts/component-hydration' },
-    ],
-  },
-  {
-    text: 'Guides',
-    link: 'guides',
-    children: [
-      { text: 'Styling & CSS', link: 'guides/styling' },
-      { text: 'Data Fetching', link: 'guides/data-fetching' },
-      { text: 'Markdown', link: 'guides/markdown-content' },
-      { text: 'Supported Imports', link: 'guides/imports' },
-      // To be written when https://github.com/snowpackjs/astro/issues/501 is completed
-      // { text: 'Pagination', link: 'guides/pagination' },
-      { text: 'Deploy a Website', link: 'guides/deploy' },
-      { text: 'Publish a Component', link: 'guides/publish-to-npm' },
-    ],
-  },
-  {
-    text: 'Reference',
-    link: 'reference',
-    children: [
-      { text: 'Built-In Components', link: 'reference/builtin-components' },
-      { text: 'API Reference', link: 'reference/api-reference' },
-      { text: 'CLI Reference', link: 'reference/cli-reference' },
-      {
-        text: 'Configuration Reference',
-        link: 'reference/configuration-reference',
-      },
-      { text: 'Renderer Reference', link: 'reference/renderer-reference' },
-    ],
-  },
-];
+export const SIDEBAR = {
+  'en': [
+    { text: 'Setup', header: true },
+    { text: 'Getting Started', link: 'getting-started' },
+    { text: 'Quickstart', link: 'quick-start' },
+    { text: 'Installation', link: 'installation' },
+    { text: 'Examples', link: 'examples' },
+    { text: 'Astro vs. X', link: 'comparing-astro-vs-other-tools' },
+    
+    { text: 'Basics', header: true },
+    { text: 'Project Structure', link: 'core-concepts/project-structure' },
+    { text: 'Components', link: 'core-concepts/astro-components' },
+    { text: 'Pages', link: 'core-concepts/astro-pages' },
+    { text: 'Layouts', link: 'core-concepts/layouts' },
+    { text: 'Collections', link: 'core-concepts/collections' },
+    { text: 'Partial Hydration', link: 'core-concepts/component-hydration' },
+    
+    { text: 'Guides', header: true },
+    { text: 'Styling & CSS', link: 'guides/styling' },
+    { text: 'Data Fetching', link: 'guides/data-fetching' },
+    { text: 'Markdown', link: 'guides/markdown-content' },
+    { text: 'Supported Imports', link: 'guides/imports' },
+    { text: 'Deploy a Website', link: 'guides/deploy' },
+    { text: 'Publish a Component', link: 'guides/publish-to-npm' },
+    
+    { text: 'Reference', header: true },
+    { text: 'Built-In Components', link: 'reference/builtin-components' },
+    { text: 'API Reference', link: 'reference/api-reference' },
+    { text: 'CLI Reference', link: 'reference/cli-reference' },
+    {
+      text: 'Configuration Reference',
+      link: 'reference/configuration-reference',
+    },
+    { text: 'Renderer Reference', link: 'reference/renderer-reference' },
+  ],
+  'nl': [
+    { text: 'Welkom', header: true },
+    { text: 'Beginnen', link: 'nl/getting-started' },
+  ],
+  'fi': [
+    { text: 'Tervetuloa', header: true },
+    { text: 'Aloittaminen', link: 'fi/getting-started' },
+    { text: 'Pika-aloitus', link: 'fi/quick-start' },
+    { text: 'Asennus', link: 'fi/installation' },
+  ],
+}
+
 
 export const SITE = {
   title: 'Astro Documentation',
diff --git a/docs/src/layouts/MainLayout.astro b/docs/src/layouts/MainLayout.astro
index c96091559..0e9c39fc4 100644
--- a/docs/src/layouts/MainLayout.astro
+++ b/docs/src/layouts/MainLayout.astro
@@ -104,10 +104,10 @@ const githubEditUrl = `https://github.com/snowpackjs/astro/blob/main/docs/${curr
   </head>
 
   <body>
-    <Header />
+    <Header currentPage={currentPage} />
     <main class="layout">
       <aside id="grid-left" class="grid-sidebar" title="Site Navigation">
-        <LeftSidebar currentPage={currentPage.slice(1) ?? ''} />
+        <LeftSidebar currentPage={currentPage} />
       </aside>
       <div id="grid-main">
         <PageContent content={content} githubEditUrl={githubEditUrl}>
diff --git a/docs/src/pages/index.astro b/docs/src/pages/index.astro
index eafd01f46..234d938ad 100644
--- a/docs/src/pages/index.astro
+++ b/docs/src/pages/index.astro
@@ -3,9 +3,7 @@ import Layout from '../layouts/MainLayout.astro';
 ---
 
 <script>
-  // This is some wip redirect code based on the browser language.
-  // A vercel.json redirect is enforced in production, so no user should ever see this page.
-  // Remove the vercel.json redirect when this is ready.
+  // Redirect the user, based on their browser language.
   const KNOWN_LANGUAGES = ['en', 'nl', 'fi'];
   let newLang = (window.navigator.userLanguage || window.navigator.language || 'en').substr(0, 2);
   if (newLang === 'en') {
diff --git a/docs/src/util.ts b/docs/src/util.ts
new file mode 100644
index 000000000..ba4f4fb3d
--- /dev/null
+++ b/docs/src/util.ts
@@ -0,0 +1,4 @@
+export function getLanguageFromURL(pathname:string) {
+  const langCodeMatch = pathname.match(/\/([a-z]{2})\//);
+  return langCodeMatch ? langCodeMatch[1] : 'en';
+}
\ No newline at end of file