full translation (#967)

2021-08-01 23:38:50 -07:00 · 2021-08-01 23:38:50 -07:00 · 94f89a3c88
commit 94f89a3c88
parent c6af27a1aa
9 changed files with 85 additions and 83 deletions
--- 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>
--- 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;
--- 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>
--- 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>
--- 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',
--- 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}>
--- 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') {
--- a/docs/src/util.ts
+++ 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';
+}
--- a/tools/vscode/.vscodeignore
+++ b/tools/vscode/.vscodeignore
@ -1,4 +1,4 @@
 src/
 tsconfig.base.json
 tsconfig.json
-contributing.md
+CONTRIBUTING.md