full translation (#967)

4 files changed, 30 insertions, 24 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>