michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

full translation (#967)

Browse source
This commit is contained in:
Fred K. Schott 2021-08-01 23:38:50 -07:00 committed by GitHub
parent c6af27a1aa
commit 94f89a3c88
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 85 additions and 83 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
docs/src/components/Header/Header.astro
View file

@ -1,8 +1,11 @@
--- ---
import SkipToContent from './SkipToContent.astro'; import SkipToContent from './SkipToContent.astro';
import SidebarToggle from './SidebarToggle.tsx'; import SidebarToggle from './SidebarToggle.tsx';
import LanguageSelect from './LanguageSelect.jsx';
import Search from "./Search.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> <style>
header { header {
@ -149,7 +152,7 @@ import Search from "./Search.jsx";
</a> </a>
</div> </div>
<div style="flex-grow: 1;"></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> <div class="search-item"><Search client:idle /></div>
</nav> </nav>
</header> </header>

20
docs/src/components/Header/LanguageSelect.tsx
View file

@ -2,16 +2,7 @@ import type { FunctionalComponent } from 'preact';
import { h } from 'preact'; import { h } from 'preact';
import './LanguageSelect.css'; import './LanguageSelect.css';
const SelectLanguage: FunctionalComponent<{}> = ({}) => { const LanguageSelect: FunctionalComponent<{lang: string}> = ({lang}) => {
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];
}
}
return ( return (
<div class="language-select-wrapper"> <div class="language-select-wrapper">
<svg <svg
@ -23,19 +14,18 @@ const SelectLanguage: FunctionalComponent<{}> = ({}) => {
height="1.2em" height="1.2em"
width="1.2em" width="1.2em"
> >
{' '}
<path <path
fill="currentColor" 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" 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 <path
fill="currentColor" 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" 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> </svg>
<select <select
class="language-select" class="language-select"
value={defaultValue} value={lang}
onChange={(e) => { onChange={(e) => {
const newLang = e.target.value; const newLang = e.target.value;
if (newLang === 'en') { if (newLang === 'en') {
@ -70,4 +60,4 @@ const SelectLanguage: FunctionalComponent<{}> = ({}) => {
); );
}; };
export default SelectLanguage; export default LanguageSelect;

21
docs/src/components/LeftSidebar/LeftSidebar.astro
View file

@ -1,17 +1,30 @@
--- ---
import { SIDEBAR } from '../../config.ts'; import { SIDEBAR } from '../../config.ts';
import { getLanguageFromURL } from '../../util.ts';
const {currentPage} = Astro.props; 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"> <nav aria-labelledby="grid-left">
<ul class="nav-groups"> <ul class="nav-groups">
{SIDEBAR.map(category => ( {sidebarSections.map(section => (
<li> <li>
<div class="nav-group"> <div class="nav-group">
<h2 class="nav-group-title">{category.text}</h2> <h2 class="nav-group-title">{section.text}</h2>
<ul> <ul>
{category.children.map(child => ( {section.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> <li class="nav-link"><a href={`${Astro.site.pathname}${child.link}`} aria-current={`${currentPageMatch === child.link ? 'page' : 'false'}`}>{child.text}</a></li>
))} ))}
</ul> </ul>
</div> </div>

6
docs/src/components/RightSidebar/MoreMenu.astro
View file

@ -35,7 +35,7 @@ const {editHref} = Astro.props;
</a> </a>
</li> </li>
<li class={`header-link depth-2`}> <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> <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> <span>Translate this page</span>
</a> </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" 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> ></path>
</svg> </svg>
<span>Join the community</span> <span>Join our community</span>
</a> </a>
</li> </li>
</ul> </ul>
<div style="margin: 2rem 0; text-align: center;"> <div style="margin: 2rem 0; text-align: center;">
<ThemeToggleButton client:visible /> <ThemeToggleButton client:idle />
</div> </div>

100
docs/src/config.ts
View file

@ -1,56 +1,50 @@
export const SIDEBAR = [ export const SIDEBAR = {
{ 'en': [
text: 'Setup', { text: 'Setup', header: true },
link: '', { text: 'Getting Started', link: 'getting-started' },
children: [ { text: 'Quickstart', link: 'quick-start' },
{ text: 'Getting Started', link: 'getting-started' }, { text: 'Installation', link: 'installation' },
{ text: 'Quickstart', link: 'quick-start' }, { text: 'Examples', link: 'examples' },
{ text: 'Installation', link: 'installation' }, { text: 'Astro vs. X', link: 'comparing-astro-vs-other-tools' },
{ 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: 'Basics', { text: 'Layouts', link: 'core-concepts/layouts' },
link: 'core-concepts', { text: 'Collections', link: 'core-concepts/collections' },
children: [ { text: 'Partial Hydration', link: 'core-concepts/component-hydration' },
{ text: 'Project Structure', link: 'core-concepts/project-structure' },
{ text: 'Components', link: 'core-concepts/astro-components' }, { text: 'Guides', header: true },
{ text: 'Pages', link: 'core-concepts/astro-pages' }, { text: 'Styling & CSS', link: 'guides/styling' },
{ text: 'Layouts', link: 'core-concepts/layouts' }, { text: 'Data Fetching', link: 'guides/data-fetching' },
{ text: 'Collections', link: 'core-concepts/collections' }, { text: 'Markdown', link: 'guides/markdown-content' },
{ text: 'Partial Hydration', link: 'core-concepts/component-hydration' }, { text: 'Supported Imports', link: 'guides/imports' },
], { text: 'Deploy a Website', link: 'guides/deploy' },
}, { text: 'Publish a Component', link: 'guides/publish-to-npm' },
{
text: 'Guides', { text: 'Reference', header: true },
link: 'guides', { text: 'Built-In Components', link: 'reference/builtin-components' },
children: [ { text: 'API Reference', link: 'reference/api-reference' },
{ text: 'Styling & CSS', link: 'guides/styling' }, { text: 'CLI Reference', link: 'reference/cli-reference' },
{ text: 'Data Fetching', link: 'guides/data-fetching' }, {
{ text: 'Markdown', link: 'guides/markdown-content' }, text: 'Configuration Reference',
{ text: 'Supported Imports', link: 'guides/imports' }, link: 'reference/configuration-reference',
// To be written when https://github.com/snowpackjs/astro/issues/501 is completed },
// { text: 'Pagination', link: 'guides/pagination' }, { text: 'Renderer Reference', link: 'reference/renderer-reference' },
{ text: 'Deploy a Website', link: 'guides/deploy' }, ],
{ text: 'Publish a Component', link: 'guides/publish-to-npm' }, 'nl': [
], { text: 'Welkom', header: true },
}, { text: 'Beginnen', link: 'nl/getting-started' },
{ ],
text: 'Reference', 'fi': [
link: 'reference', { text: 'Tervetuloa', header: true },
children: [ { text: 'Aloittaminen', link: 'fi/getting-started' },
{ text: 'Built-In Components', link: 'reference/builtin-components' }, { text: 'Pika-aloitus', link: 'fi/quick-start' },
{ text: 'API Reference', link: 'reference/api-reference' }, { text: 'Asennus', link: 'fi/installation' },
{ text: 'CLI Reference', link: 'reference/cli-reference' }, ],
{ }
text: 'Configuration Reference',
link: 'reference/configuration-reference',
},
{ text: 'Renderer Reference', link: 'reference/renderer-reference' },
],
},
];
export const SITE = { export const SITE = {
title: 'Astro Documentation', title: 'Astro Documentation',

4
docs/src/layouts/MainLayout.astro
View file

@ -104,10 +104,10 @@ const githubEditUrl = `https://github.com/snowpackjs/astro/blob/main/docs/${curr
</head> </head>
<body> <body>
<Header /> <Header currentPage={currentPage} />
<main class="layout"> <main class="layout">
<aside id="grid-left" class="grid-sidebar" title="Site Navigation"> <aside id="grid-left" class="grid-sidebar" title="Site Navigation">
<LeftSidebar currentPage={currentPage.slice(1) ?? ''} /> <LeftSidebar currentPage={currentPage} />
</aside> </aside>
<div id="grid-main"> <div id="grid-main">
<PageContent content={content} githubEditUrl={githubEditUrl}> <PageContent content={content} githubEditUrl={githubEditUrl}>

4
docs/src/pages/index.astro
View file

@ -3,9 +3,7 @@ import Layout from '../layouts/MainLayout.astro';
--- ---
<script> <script>
// This is some wip redirect code based on the browser language. // Redirect the user, based on their 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.
const KNOWN_LANGUAGES = ['en', 'nl', 'fi']; const KNOWN_LANGUAGES = ['en', 'nl', 'fi'];
let newLang = (window.navigator.userLanguage || window.navigator.language || 'en').substr(0, 2); let newLang = (window.navigator.userLanguage || window.navigator.language || 'en').substr(0, 2);
if (newLang === 'en') { if (newLang === 'en') {

4
docs/src/util.ts Normal file
View file

@ -0,0 +1,4 @@
export function getLanguageFromURL(pathname:string) {
const langCodeMatch = pathname.match(/\/([a-z]{2})\//);
return langCodeMatch ? langCodeMatch[1] : 'en';
}

2
tools/vscode/.vscodeignore
View file

@ -1,4 +1,4 @@
src/ src/
tsconfig.base.json tsconfig.base.json
tsconfig.json tsconfig.json
contributing.md CONTRIBUTING.md