add WIP basic translations

2 years ago · ba847cf45e
parent 9a357e005b
commit ba847cf45e
21 changed files with 274 additions and 113 deletions
--- a/.yarn/cache/@types-hoist-non-react-statics-npm-3.3.1-c0081332b2-2c0778570d.zip
+++ b/.yarn/cache/@types-hoist-non-react-statics-npm-3.3.1-c0081332b2-2c0778570d.zip
--- a/.yarn/cache/core-js-npm-3.25.2-923ea16673-e93c6c645d.zip
+++ b/.yarn/cache/core-js-npm-3.25.2-923ea16673-e93c6c645d.zip
--- a/.yarn/cache/hoist-non-react-statics-npm-3.3.2-e7b709e6c1-b153827042.zip
+++ b/.yarn/cache/hoist-non-react-statics-npm-3.3.2-e7b709e6c1-b153827042.zip
--- a/.yarn/cache/html-parse-stringify-npm-3.0.1-5762cd4b01-334fdebd4b.zip
+++ b/.yarn/cache/html-parse-stringify-npm-3.0.1-5762cd4b01-334fdebd4b.zip
--- a/.yarn/cache/i18next-fs-backend-npm-1.1.5-60d9f019a2-71f6c4b0ff.zip
+++ b/.yarn/cache/i18next-fs-backend-npm-1.1.5-60d9f019a2-71f6c4b0ff.zip
--- a/.yarn/cache/i18next-npm-21.9.2-2e8a124cb7-e53b3885fa.zip
+++ b/.yarn/cache/i18next-npm-21.9.2-2e8a124cb7-e53b3885fa.zip
--- a/.yarn/cache/next-i18next-npm-12.0.1-b8d6198552-9f8e86748a.zip
+++ b/.yarn/cache/next-i18next-npm-12.0.1-b8d6198552-9f8e86748a.zip
--- a/.yarn/cache/react-i18next-npm-11.18.6-53352f444a-624c0a0313.zip
+++ b/.yarn/cache/react-i18next-npm-11.18.6-53352f444a-624c0a0313.zip
--- a/.yarn/cache/void-elements-npm-3.1.0-4f43780839-0390f81810.zip
+++ b/.yarn/cache/void-elements-npm-3.1.0-4f43780839-0390f81810.zip
--- a/2
+++ b/2
@ -1 +1 @@
-Subproject commit 20f632085c08e874ac84a59132cb87117820dae6
+Subproject commit 5226e1d625fafcc62ca828e2817ccd80ea802735
--- a/components/footer.tsx
+++ b/components/footer.tsx
@ -6,123 +6,127 @@ import {
 } from "@fortawesome/free-brands-svg-icons";
 import {
  faDonate,
-  faMessage as faSolidMessage
+  faMessage as faSolidMessage,
 } from "@fortawesome/free-solid-svg-icons";
 import { faMessage } from "@fortawesome/free-regular-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import Link from "next/link";
+import { useTranslation } from "next-i18next";

-const Footer = () => (
-  <footer className="border-t border-ctp-mantle text-ctp-text">
-    <div className="mx-auto flex max-w-8xl flex-col gap-8 px-4 py-6 md:flex-row md:px-8">
-      <section className="basis-1/3">
-        <h4 className="text-2xl font-bold">About</h4>
-        <p>
-          Crystal Linux is a brand new Arch Linux based distribution. Friendly,
-          easy to use, and powerful.
-        </p>
-      </section>
-      <section className="basis-1/3">
-        <h4 className="text-2xl font-bold">Community</h4>
-        <ul>
-          <li>
-            <a href="https://forum.getcryst.al/">
-              <FontAwesomeIcon
-                icon={faSolidMessage}
-                className="mr-1"
-                fixedWidth={true}
-              />
-              Forums
-            </a>
-          </li>
-          <li>
-            <a href="https://twitter.com/Crystal_Linux">
-              <FontAwesomeIcon
-                icon={faTwitter}
-                className="mr-1"
-                fixedWidth={true}
-              />
-              Twitter
-            </a>
-          </li>
-          <li>
-            <a href="https://fosstodon.org/@crystal_linux">
-              <FontAwesomeIcon
-                icon={faMastodon}
-                className="mr-1"
-                fixedWidth={true}
-              />
-              Mastodon
-            </a>
-          </li>
-          <li>
-            <a href="https://github.com/crystal-linux">
-              <FontAwesomeIcon
-                icon={faGithub}
-                className="mr-1"
-                fixedWidth={true}
-              />
-              Github
-            </a>
-          </li>
-          <li>
-            <Link href="/discord">
-              <a>
+const Footer = () => {
+  const { t } = useTranslation('footer');
+
+  return (
+    <footer className="border-t border-ctp-mantle text-ctp-text">
+      <div className="mx-auto flex max-w-8xl flex-col gap-8 px-4 py-6 md:flex-row md:px-8">
+        <section className="basis-1/3">
+          <h4 className="text-2xl font-bold">About</h4>
+          <p>
+            {t("subtitle")}
+          </p>
+        </section>
+        <section className="basis-1/3">
+          <h4 className="text-2xl font-bold">Community</h4>
+          <ul>
+            <li>
+              <a href="https://forum.getcryst.al/">
+                <FontAwesomeIcon
+                  icon={faSolidMessage}
+                  className="mr-1"
+                  fixedWidth={true}
+                />
+                Forums
+              </a>
+            </li>
+            <li>
+              <a href="https://twitter.com/Crystal_Linux">
                <FontAwesomeIcon
-                  icon={faDiscord}
+                  icon={faTwitter}
                  className="mr-1"
                  fixedWidth={true}
                />
-                Discord
+                Twitter
              </a>
-            </Link>
-          </li>
-          <li>
-            <Link href="https://matrix.to/#/#crystal:tar.black">
-              <a>
+            </li>
+            <li>
+              <a href="https://fosstodon.org/@crystal_linux">
                <FontAwesomeIcon
-                  icon={faMessage}
+                  icon={faMastodon}
                  className="mr-1"
                  fixedWidth={true}
                />
-                Matrix
+                Mastodon
              </a>
-            </Link>
-          </li>
-        </ul>
-      </section>
-      <section className="basis-1/3">
-        <h4 className="text-2xl font-bold">Other</h4>
-        <ul>
-        <li>
-            <Link href="https://opencollective.com/crystal-linux">
-              <a>
+            </li>
+            <li>
+              <a href="https://github.com/crystal-linux">
                <FontAwesomeIcon
-                  icon={faDonate}
+                  icon={faGithub}
                  className="mr-1"
                  fixedWidth={true}
                />
-                Open Collective
+                Github
+              </a>
+            </li>
+            <li>
+              <Link href="/discord">
+                <a>
+                  <FontAwesomeIcon
+                    icon={faDiscord}
+                    className="mr-1"
+                    fixedWidth={true}
+                  />
+                  Discord
+                </a>
+              </Link>
+            </li>
+            <li>
+              <Link href="https://matrix.to/#/#crystal:tar.black">
+                <a>
+                  <FontAwesomeIcon
+                    icon={faMessage}
+                    className="mr-1"
+                    fixedWidth={true}
+                  />
+                  Matrix
+                </a>
+              </Link>
+            </li>
+          </ul>
+        </section>
+        <section className="basis-1/3">
+          <h4 className="text-2xl font-bold">Other</h4>
+          <ul>
+            <li>
+              <Link href="https://opencollective.com/crystal-linux">
+                <a>
+                  <FontAwesomeIcon
+                    icon={faDonate}
+                    className="mr-1"
+                    fixedWidth={true}
+                  />
+                  Open Collective
+                </a>
+              </Link>
+            </li>
+            <li>
+              <a href="https://github.com/crystal-linux/.github/blob/main/CONTRIBUTING.md">
+                Contributing Guidelines
+              </a>
+            </li>
+            <li>
+              <a href="https://www.contributor-covenant.org/">
+                The Contributor Covenant
              </a>
-            </Link>
-          </li>
-          <li>
-            <a href="https://github.com/crystal-linux/.github/blob/main/CONTRIBUTING.md">
-              Contributing Guidelines
-            </a>
-          </li>
-          <li>
-            <a href="https://www.contributor-covenant.org/">
-              The Contributor Covenant
-            </a>
-          </li>
-          <li>
-            <a href="https://developercertificate.org/">The DCO</a>
-          </li>
-        </ul>
-      </section>
-    </div>
-  </footer>
-);
+            </li>
+            <li>
+              <a href="https://developercertificate.org/">The DCO</a>
+            </li>
+          </ul>
+        </section>
+      </div>
+    </footer>
+  );
+};

 export default Footer;
--- a/lib/i18n.ts
+++ b/lib/i18n.ts
@ -0,0 +1,23 @@
+import type { I18n } from "@lingui/core";
+import { en, de } from "make-plural/plurals";
+
+//anounce which locales we are going to use and connect them to approprite plural rules
+export function initTranslation(i18n: I18n) {
+  i18n.loadLocaleData({
+    en: { plurals: en },
+    de: { plurals: de },
+    pseudo: { plurals: en },
+  });
+}
+
+export async function loadTranslation(locale: string, isProduction = true) {
+  if (isProduction) {
+    return (await import(`../translations/locales/${locale}/messages`)).messages;
+  } else {
+    return (
+      await import(
+        `@lingui/loader!../translations/locales/${locale}/messages.po`
+      )
+    ).messages;
+  }
+}
--- a/next-i18next.config.js
+++ b/next-i18next.config.js
@ -0,0 +1,6 @@
+module.exports = {
+  i18n: {
+    defaultLocale: 'en',
+    locales: ['en', 'de'],
+  },
+};
--- a/next.config.mjs
+++ b/next.config.mjs
@ -1,6 +1,7 @@
 // next.config.mjs
 import remarkGfm from "remark-gfm";
 import createMDX from "@next/mdx";
+// import { i18n } from "./next-i18next.config"

 /** @type {import('next').NextConfig} */
 const nextConfig = {
@ -31,6 +32,10 @@ const nextConfig = {
      },
    ];
  },
+  i18n: {
+    defaultLocale: 'en',
+    locales: ['en', 'de'],
+  },
 };

 const withMDX = createMDX({
--- a/package.json
+++ b/package.json
@ -26,6 +26,7 @@
    "front-matter": "^4.0.2",
    "js-yaml": "^4.1.0",
    "next": "12.2.5",
+    "next-i18next": "^12.0.1",
    "next-mdx-remote": "^4.1.0",
    "next-seo": "^5.5.0",
    "next-themes": "^0.2.0",
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@ -8,8 +8,9 @@ import SEO from "../next-seo.config";
 import { config } from "@fortawesome/fontawesome-svg-core";
 import "@fortawesome/fontawesome-svg-core/styles.css";
 import { ThemeProvider } from "next-themes";
-import { ReactElement, ReactNode } from "react";
+import { ReactElement, ReactNode, useRef } from "react";
 import { NextPage } from "next";
+import { appWithTranslation } from "next-i18next";

 config.autoAddCss = false;

@ -21,7 +22,7 @@ type AppPropsWithLayout = AppProps & {
  Component: NextPageWithLayout;
 };

-export default function GetCrystal({
+function GetCrystal({
  Component,
  pageProps,
 }: AppPropsWithLayout) {
@ -45,3 +46,5 @@ export default function GetCrystal({
    </ThemeProvider>
  );
 }
+
+export default appWithTranslation(GetCrystal);
--- a/pages/index.tsx
+++ b/pages/index.tsx
@ -3,30 +3,42 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useTheme } from "next-themes";
 import Link from "next/link";
 import Image from "next/future/image";
-
 import { NextPageWithLayout } from "./_app";
 import { ReactElement } from "react";
-
 import onyxDark from "../public/demos/onyx-dark.png";
 import onyxLight from "../public/demos/onyx-light.png";
-import snapshots from "../public/demos/snapshots.png"
 import timeshiftSnapshots from "../public/demos/timeshift-snapshots.png"
 import AmePreview from "../components/AmePreview";
 import HomeSection from "../components/HomeSection";
+import { useRouter } from "next/router";
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
+import { GetStaticProps } from "next";
+import { useTranslation } from "next-i18next";
+
+export const getStaticProps: GetStaticProps = async ({ locale }) => {
+  return {
+    props: {
+      ...(await serverSideTranslations(locale!, ['common', 'footer', 'home'])),
+    },
+  };
+}

 const Home: NextPageWithLayout = () => {
  const { resolvedTheme } = useTheme();
+  const { locale } = useRouter()
+
+  const { t: common }  = useTranslation("common")
+  const { t }  = useTranslation("home")

  return (
    <>
      <section>
-        <div className="flex flex-col items-center justify-center px-4 pt-36 text-center md:px-8 md:pb-32 lg:pt-44">
+        <div className="flex-col items-center justify-center px-4 pt-36 flex text-center md:px-8 md:pb-32 lg:pt-44">
          <h1 className="mb-4 text-4xl font-extrabold leading-none tracking-tight text-ctp-text md:text-5xl lg:text-6xl">
-            An Arch based distribution
+            {common("header")}
          </h1>
          <p className="mb-6 text-lg font-normal text-ctp-subtext1 sm:px-16 lg:text-xl xl:px-48">
-            Crystal Linux is a brand new Arch Linux based distribution.
-            Friendly, powerful and easy to use.
+            {common("subtitle")}
          </p>

          <div className="w-full flex gap-2 justify-center flex-wrap">
@ -34,12 +46,12 @@ const Home: NextPageWithLayout = () => {
              className="inline-flex w-full items-center justify-center rounded-lg bg-ctp-mauve py-3 px-5 text-center text-base font-medium text-ctp-base no-underline focus:ring-4 sm:w-fit"
              href="https://github.com/crystal-linux/iso/releases/latest"
            >
-              Download
+              {common("generics.download")}
            </a>

            <Link href="/docs/crystal-linux/getting-started">
              <a className="inline-flex w-full items-center justify-center gap-2 rounded-lg py-3 px-5 text-center text-base font-medium text-ctp-text no-underline focus:ring-4 sm:w-fit">
-                Getting Started
+                {common("generics.getting_started")}
                <FontAwesomeIcon icon={faArrowRight} />
              </a>
            </Link>
@ -49,7 +61,7 @@ const Home: NextPageWithLayout = () => {

      <HomeSection className="">
        <div className="basis-1/4">
-          <p className="mt-8 font-semibold text-ctp-maroon">Beautiful</p>
+          <p className="mt-8 font-semibold text-ctp-maroon"></p>
          <p className="mt-4 text-3xl font-extrabold tracking-tight text-ctp-text sm:text-4xl">
            Onyx built-in
          </p>
--- a/public/locales/de/common.json
+++ b/public/locales/de/common.json
@ -0,0 +1,3 @@
+{
+  "subtitle": "this is german"
+}
--- a/public/locales/en/common.json
+++ b/public/locales/en/common.json
@ -0,0 +1,9 @@
+{
+  "header": "An Arch based distribution",
+  "subtitle": "Crystal Linux is a brand new Arch Linux based distribution. Friendly, powerful and easy to use.",
+  
+  "generics": {
+    "download": "Download",
+    "getting_started": "Getting Started"
+  }
+}
--- a/public/locales/en/home.json
+++ b/public/locales/en/home.json
--- a/yarn.lock
+++ b/yarn.lock
@ -1339,7 +1339,7 @@ __metadata:
  languageName: node
  linkType: hard

-"@babel/runtime@npm:^7.10.2, @babel/runtime@npm:^7.18.9, @babel/runtime@npm:^7.8.4":
+"@babel/runtime@npm:^7.10.2, @babel/runtime@npm:^7.14.5, @babel/runtime@npm:^7.17.2, @babel/runtime@npm:^7.18.9, @babel/runtime@npm:^7.8.4":
  version: 7.19.0
  resolution: "@babel/runtime@npm:7.19.0"
  dependencies:
@ -2022,6 +2022,16 @@ __metadata:
  languageName: node
  linkType: hard

+"@types/hoist-non-react-statics@npm:^3.3.1":
+  version: 3.3.1
+  resolution: "@types/hoist-non-react-statics@npm:3.3.1"
+  dependencies:
+    "@types/react": "*"
+    hoist-non-react-statics: ^3.3.0
+  checksum: 2c0778570d9a01d05afabc781b32163f28409bb98f7245c38d5eaf082416fdb73034003f5825eb5e21313044e8d2d9e1f3fe2831e345d3d1b1d20bcd12270719
+  languageName: node
+  linkType: hard
+
 "@types/js-yaml@npm:^4.0.0, @types/js-yaml@npm:^4.0.5":
  version: 4.0.5
  resolution: "@types/js-yaml@npm:4.0.5"
@ -2891,6 +2901,13 @@ __metadata:
  languageName: node
  linkType: hard

+"core-js@npm:^3":
+  version: 3.25.2
+  resolution: "core-js@npm:3.25.2"
+  checksum: e93c6c645d44d98973efb07750975552ad405f080f5a563a99972ff6b2c5c6ee25705f55accd363f5dccd51e9e5f56be25e2be6c14a7294da65763e0e5659c02
+  languageName: node
+  linkType: hard
+
 "cosmiconfig@npm:^7.0.1":
  version: 7.0.1
  resolution: "cosmiconfig@npm:7.0.1"
@ -3958,6 +3975,7 @@ __metadata:
    husky: ^8.0.1
    js-yaml: ^4.1.0
    next: 12.2.5
+    next-i18next: ^12.0.1
    next-mdx-remote: ^4.1.0
    next-seo: ^5.5.0
    next-themes: ^0.2.0
@ -4239,6 +4257,24 @@ __metadata:
  languageName: node
  linkType: hard

+"hoist-non-react-statics@npm:^3.3.0, hoist-non-react-statics@npm:^3.3.2":
+  version: 3.3.2
+  resolution: "hoist-non-react-statics@npm:3.3.2"
+  dependencies:
+    react-is: ^16.7.0
+  checksum: b1538270429b13901ee586aa44f4cc3ecd8831c061d06cb8322e50ea17b3f5ce4d0e2e66394761e6c8e152cd8c34fb3b4b690116c6ce2bd45b18c746516cb9e8
+  languageName: node
+  linkType: hard
+
+"html-parse-stringify@npm:^3.0.1":
+  version: 3.0.1
+  resolution: "html-parse-stringify@npm:3.0.1"
+  dependencies:
+    void-elements: 3.1.0
+  checksum: 334fdebd4b5c355dba8e95284cead6f62bf865a2359da2759b039db58c805646350016d2017875718bc3c4b9bf81a0d11be5ee0cf4774a3a5a7b97cde21cfd67
+  languageName: node
+  linkType: hard
+
 "http-cache-semantics@npm:^4.1.0":
  version: 4.1.0
  resolution: "http-cache-semantics@npm:4.1.0"
@ -4285,6 +4321,22 @@ __metadata:
  languageName: node
  linkType: hard

+"i18next-fs-backend@npm:^1.1.5":
+  version: 1.1.5
+  resolution: "i18next-fs-backend@npm:1.1.5"
+  checksum: 71f6c4b0ff071676d69f1668675a68f2d72e1836dafcc8014123523bb584a78b0e4fccd16f83d7f37755b58d1dfcb4d6ad36c60b261833b509ccf20313419d9e
+  languageName: node
+  linkType: hard
+
+"i18next@npm:^21.9.1":
+  version: 21.9.2
+  resolution: "i18next@npm:21.9.2"
+  dependencies:
+    "@babel/runtime": ^7.17.2
+  checksum: e53b3885fa85cab7fcd4f8667b7fc3d37b06f095494703994d49fa0e961ad1f495181621e569dc58e759ff12c63a9c7704c33592ba529b7689ea7f5304be0423
+  languageName: node
+  linkType: hard
+
 "iconv-lite@npm:^0.6.2":
  version: 0.6.3
  resolution: "iconv-lite@npm:0.6.3"
@ -5738,6 +5790,24 @@ __metadata:
  languageName: node
  linkType: hard

+"next-i18next@npm:^12.0.1":
+  version: 12.0.1
+  resolution: "next-i18next@npm:12.0.1"
+  dependencies:
+    "@babel/runtime": ^7.18.9
+    "@types/hoist-non-react-statics": ^3.3.1
+    core-js: ^3
+    hoist-non-react-statics: ^3.3.2
+    i18next: ^21.9.1
+    i18next-fs-backend: ^1.1.5
+    react-i18next: ^11.18.4
+  peerDependencies:
+    next: ">= 10.0.0"
+    react: ">= 16.8.0"
+  checksum: 9f8e86748abeac49caeca03d48d632b66ea0765792acdbcb18abe80d6e886252208a8e0ada818ccbe2cd09e2925ce240534eb587027dcb8392e5e157a4579933
+  languageName: node
+  linkType: hard
+
 "next-mdx-remote@npm:^4.1.0":
  version: 4.1.0
  resolution: "next-mdx-remote@npm:4.1.0"
@ -6402,7 +6472,25 @@ __metadata:
  languageName: node
  linkType: hard

-"react-is@npm:^16.13.1":
+"react-i18next@npm:^11.18.4":
+  version: 11.18.6
+  resolution: "react-i18next@npm:11.18.6"
+  dependencies:
+    "@babel/runtime": ^7.14.5
+    html-parse-stringify: ^3.0.1
+  peerDependencies:
+    i18next: ">= 19.0.0"
+    react: ">= 16.8.0"
+  peerDependenciesMeta:
+    react-dom:
+      optional: true
+    react-native:
+      optional: true
+  checksum: 624c0a0313fac4e0d18560b83c99a8bd0a83abc02e5db8d01984e0643ac409d178668aa3a4720d01f7a0d9520d38598dcbff801d6f69a970bae67461de6cd852
+  languageName: node
+  linkType: hard
+
+"react-is@npm:^16.13.1, react-is@npm:^16.7.0":
  version: 16.13.1
  resolution: "react-is@npm:16.13.1"
  checksum: f7a19ac3496de32ca9ae12aa030f00f14a3d45374f1ceca0af707c831b2a6098ef0d6bdae51bd437b0a306d7f01d4677fcc8de7c0d331eb47ad0f46130e53c5f
@ -7579,6 +7667,13 @@ __metadata:
  languageName: node
  linkType: hard

+"void-elements@npm:3.1.0":
+  version: 3.1.0
+  resolution: "void-elements@npm:3.1.0"
+  checksum: 0390f818107fa8fce55bb0a5c3f661056001c1d5a2a48c28d582d4d847347c2ab5b7f8272314cac58acf62345126b6b09bea623a185935f6b1c3bbce0dfd7f7f
+  languageName: node
+  linkType: hard
+
 "which-boxed-primitive@npm:^1.0.2":
  version: 1.0.2
  resolution: "which-boxed-primitive@npm:1.0.2"