Merge pull request #1 from dig-dao/i18n

I18n
dig-dao · Dec 17, 2023 · a1c1aba · a1c1aba
2 parents c1e1ba4 + 2f63d23
commit a1c1aba
Show file tree

Hide file tree

Showing 16 changed files with 330 additions and 161 deletions.
diff --git a/astro-i18n.config.ts b/astro-i18n.config.ts
@@ -0,0 +1,14 @@
+import { defineAstroI18nConfig } from "astro-i18n"
+
+export default defineAstroI18nConfig({
+	primaryLocale: "ja", // default app locale
+	secondaryLocales: ['en'], // other supported locales
+	fallbackLocale: "ja", // fallback locale (on missing translation)
+	trailingSlash: "never", // "never" or "always"
+	run: "client+server", // "client+server" or "server"
+	showPrimaryLocale: false, // "/en/about" vs "/about"
+	translationLoadingRules: [], // per page group loading
+	translationDirectory: {}, // translation directory names
+	translations: {}, // { [translation_group1]: { [locale1]: {}, ... } }
+	routes: {}, // { [secondary_locale1]: { about: "about-translated", ... } }
+})
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,60 +1,65 @@
 {
-  "name": "astroplate",
-  "version": "2.5.0",
-  "description": "Astro and Tailwindcss boilerplate",
-  "author": "zeon.studio",
-  "license": "MIT",
-  "packageManager": "[email protected]",
-  "scripts": {
-    "dev": "yarn generate-json && astro dev",
-    "build": "yarn generate-json && astro build",
-    "preview": "astro preview",
-    "format": "prettier -w ./src",
-    "generate-json": "node scripts/jsonGenerator.js",
-    "remove-darkmode": "node scripts/removeDarkmode.js && yarn format"
-  },
-  "dependencies": {
-    "@astrojs/mdx": "^1.1.5",
-    "@astrojs/react": "^3.0.6",
-    "@astrojs/rss": "^3.0.0",
-    "@astrojs/sitemap": "^3.0.3",
-    "@astrojs/tailwind": "^5.0.2",
-    "astro": "^3.6.4",
-    "astro-auto-import": "^0.4.1",
-    "date-fns": "^2.30.0",
-    "date-fns-tz": "^2.0.0",
-    "disqus-react": "^1.1.5",
-    "github-slugger": "^2.0.0",
-    "gray-matter": "^4.0.3",
-    "marked": "^11.0.0",
-    "prettier-plugin-astro": "^0.12.2",
-    "prettier-plugin-tailwindcss": "^0.5.7",
-    "prop-types": "^15.8.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-icons": "^4.12.0",
-    "react-lite-youtube-embed": "^2.4.0",
-    "remark-collapse": "^0.1.2",
-    "remark-toc": "^9.0.0",
-    "sharp": "^0.33.0",
-    "swiper": "^11.0.5"
-  },
-  "devDependencies": {
-    "@tailwindcss/forms": "^0.5.7",
-    "@tailwindcss/typography": "^0.5.10",
-    "@types/marked": "^5.0.2",
-    "@types/node": "20.10.2",
-    "@types/react": "18.2.41",
-    "@types/react-dom": "18.2.17",
-    "autoprefixer": "^10.4.16",
-    "eslint": "^8.55.0",
-    "postcss": "^8.4.32",
-    "prettier": "^3.1.0",
-    "prettier-plugin-astro": "^0.12.2",
-    "prettier-plugin-tailwindcss": "^0.5.7",
-    "sass": "^1.69.5",
-    "tailwindcss": "^3.3.5",
-    "tailwind-bootstrap-grid": "^5.1.0",
-    "typescript": "5.3.2"
-  }
+	"name": "astroplate",
+	"version": "2.5.0",
+	"description": "Astro and Tailwindcss boilerplate",
+	"author": "zeon.studio",
+	"license": "MIT",
+	"packageManager": "[email protected]",
+	"scripts": {
+		"dev": "yarn generate-json && astro dev",
+		"build": "yarn generate-json && astro build",
+		"preview": "astro preview",
+		"format": "prettier -w ./src",
+		"generate-json": "node scripts/jsonGenerator.js",
+		"remove-darkmode": "node scripts/removeDarkmode.js && yarn format",
+		"i18n:extract": "astro-i18n extract",
+		"i18n:generate:pages": "astro-i18n generate:pages --purge",
+		"i18n:generate:types": "astro-i18n generate:types",
+		"i18n:sync": "npm run i18n:generate:pages && npm run i18n:generate:types"
+	},
+	"dependencies": {
+		"@astrojs/mdx": "^1.1.5",
+		"@astrojs/react": "^3.0.6",
+		"@astrojs/rss": "^3.0.0",
+		"@astrojs/sitemap": "^3.0.3",
+		"@astrojs/tailwind": "^5.0.2",
+		"astro": "^3.6.4",
+		"astro-auto-import": "^0.4.1",
+		"astro-i18n": "^2.1.18",
+		"date-fns": "^2.30.0",
+		"date-fns-tz": "^2.0.0",
+		"disqus-react": "^1.1.5",
+		"github-slugger": "^2.0.0",
+		"gray-matter": "^4.0.3",
+		"marked": "^11.0.0",
+		"prettier-plugin-astro": "^0.12.2",
+		"prettier-plugin-tailwindcss": "^0.5.7",
+		"prop-types": "^15.8.1",
+		"react": "^18.2.0",
+		"react-dom": "^18.2.0",
+		"react-icons": "^4.12.0",
+		"react-lite-youtube-embed": "^2.4.0",
+		"remark-collapse": "^0.1.2",
+		"remark-toc": "^9.0.0",
+		"sharp": "^0.33.0",
+		"swiper": "^11.0.5"
+	},
+	"devDependencies": {
+		"@tailwindcss/forms": "^0.5.7",
+		"@tailwindcss/typography": "^0.5.10",
+		"@types/marked": "^5.0.2",
+		"@types/node": "20.10.2",
+		"@types/react": "18.2.41",
+		"@types/react-dom": "18.2.17",
+		"autoprefixer": "^10.4.16",
+		"eslint": "^8.55.0",
+		"postcss": "^8.4.32",
+		"prettier": "^3.1.0",
+		"prettier-plugin-astro": "^0.12.2",
+		"prettier-plugin-tailwindcss": "^0.5.7",
+		"sass": "^1.69.5",
+		"tailwind-bootstrap-grid": "^5.1.0",
+		"tailwindcss": "^3.3.5",
+		"typescript": "5.3.2"
+	}
 }
diff --git a/src/content/homepage/-index-en.md b/src/content/homepage/-index-en.md
@@ -0,0 +1,34 @@
+---
+# Banner
+banner:
+  title: "Dig DAO: web3 Research Community"
+  content: "The purpose of our activities is to discuss, research, practice, and disclose the ecosystem of Web 3.0 and the environment that should be maintained in order for it to be used for the healthy development of society."
+  image: "/images/banner.png"
+  button:
+    enable: false
+    label: "Get Started For Free"
+    link: "https://github.com/zeon-studio/astroplate"
+
+# Features
+features:
+  - title: "Who we are"
+    image: "/images/digdao-photo.jpg"
+    content: "Dig DAO is a community for research and development of web3, which was born out of the Digital Agency's Web3.0 Study Group."
+    button:
+      enable: false
+      label: "Get Started Now"
+      link: "#"
+
+  - title: "Projects"
+    image: "/images/verifier.png"
+    content: "We organize a variety of research and development related to the development of web3."
+    bulletpoints:
+      - "DID/VC SBT project"
+      - "DAO research project"
+      - "Supporting digital public goods"
+    button:
+      enable: false
+      label: "Get Started Now"
+      link: "https://github.com/zeon-studio/astroplate"
+
+---
diff --git a/src/content/homepage/-index.md → src/content/homepage/-index-ja.md b/src/content/homepage/-index.md → src/content/homepage/-index-ja.md
@@ -25,7 +25,7 @@ features:
     bulletpoints:
       - "DID/VC SBT プロジェクト"
       - "DAO リサーチプロジェクト"
-      - "デジタル公共資本基金"
+      - "デジタル公共材のサポート環境づくり"
     button:
       enable: false
       label: "Get Started Now"

diff --git a/src/content/sections/call-to-action-en.md b/src/content/sections/call-to-action-en.md
@@ -0,0 +1,10 @@
+---
+enable: true
+title: "Dig DAO Bounenkai"
+image: "/images/party.png"
+description: "On December 26, let's review on this year together and prepare for the web3/DAO in 2024! We will hold a year-end party at Crypto Cafe & Bar in Ebisu."
+button:
+  enable: true
+  label: "Join"
+  link: "https://lu.ma/zjbfz1ik"
+---
diff --git a/src/content/sections/call-to-action.md → src/content/sections/call-to-action-ja.md b/src/content/sections/call-to-action.md → src/content/sections/call-to-action-ja.md
diff --git a/src/i18n/common/en.json b/src/i18n/common/en.json
@@ -0,0 +1,6 @@
+{
+	"your_common": "コモン",
+	"they": {
+		"can": "できる"
+	}
+}
diff --git a/src/i18n/common/ja.json b/src/i18n/common/ja.json
@@ -0,0 +1,6 @@
+{
+	"your_common": "translations here",
+	"they": {
+		"can": "be nested"
+	}
+}
diff --git a/src/layouts/components/LanguageSwitcher.astro b/src/layouts/components/LanguageSwitcher.astro
@@ -0,0 +1,30 @@
+---
+import { astroI18n } from "astro-i18n";
+---
+
+<script>
+  import { l } from "astro-i18n";
+  const switchLang = (e: any) => {
+    console.log("switching lang to ", e.target.value);
+    window.location.href = l(
+      window.location.pathname,
+      {},
+      { targetLocale: e.target.value },
+    );
+  };
+  const selector = document.querySelector(
+    "#language-switcher",
+  ) as HTMLSelectElement;
+  console.log("add event listener to ", selector);
+  selector.addEventListener("change", switchLang);
+</script>
+<label for="language-switcher">Language</label>
+<select id="language-switcher" class="ml-2">
+  {
+    Object.entries(astroI18n.locales).map(([id, lang]) => (
+      <option value={lang} selected={lang === astroI18n.locale}>
+        {lang}
+      </option>
+    ))
+  }
+</select>
diff --git a/src/layouts/components/pages/HomePage.astro b/src/layouts/components/pages/HomePage.astro
@@ -0,0 +1,110 @@
+---
+import { astroI18n, t } from "astro-i18n";
+
+import { markdownify } from "@/lib/utils/textConverter";
+import CallToAction from "@/partials/CallToAction.astro";
+import Testimonial from "@/partials/Testimonial.astro";
+import type { Button, Feature } from "@/types";
+import { Image } from "astro:assets";
+import { getEntry } from "astro:content";
+import { FaCheck } from "react-icons/fa/index.js";
+
+console.log();
+
+interface Homepage {
+  banner: {
+    title: string;
+    content: string;
+    image: string;
+    button: Button;
+  };
+  features: Feature[];
+}
+
+const homepage = await getEntry("homepage", `-index-${astroI18n.locale}`);
+
+const testimonial = await getEntry("sections", "testimonial");
+const call_to_action = await getEntry(
+  "sections",
+  `call-to-action-${astroI18n.locale}`,
+);
+const { banner, features }: Homepage = homepage!.data;
+---
+
+<!-- Banner -->
+<section class="section pt-14">
+  <div class="container">
+    <div class="row justify-center">
+      <div class="mb-16 text-center lg:col-7">
+        <h1 set:html={markdownify(banner.title)} class="mb-4 h2" />
+        <p set:html={markdownify(banner.content)} class="mb-8" />
+        {
+          banner.button.enable && (
+            <a class="btn btn-primary" href={banner.button.link}>
+              {banner.button.label}
+            </a>
+          )
+        }
+      </div>
+      {
+        banner.image && (
+          <div class="col-12 flex justify-center">
+            <Image
+              src={banner.image}
+              height={380}
+              width={1200}
+              alt="banner image"
+              format="webp"
+            />
+          </div>
+        )
+      }
+    </div>
+  </div>
+</section>
+<!-- /Banner -->
+
+<!-- Features -->
+{
+  features.map((feature, index: number) => (
+    <section class={`section-sm ${index % 2 === 0 && "bg-gradient"}`}>
+      <div class="container">
+        <div class="row items-center justify-between">
+          <div
+            class={`mb:md-0 mb-6 md:col-5 ${index % 2 !== 0 && "md:order-2"}`}
+          >
+            <Image
+              src={feature.image}
+              height={480}
+              width={520}
+              alt={feature.title}
+              format="webp"
+            />
+          </div>
+          <div class={`md:col-7 lg:col-6 ${index % 2 !== 0 && "md:order-1"}`}>
+            <h2 set:html={markdownify(feature.title)} class="mb-4" />
+            <p set:html={markdownify(feature.content)} class="mb-8 text-lg" />
+            <ul>
+              {feature.bulletpoints &&
+                feature.bulletpoints.map((bullet: string) => (
+                  <li class="relative mb-4 pl-6">
+                    <FaCheck className={"absolute left-0 top-1.5"} />
+                    <span set:html={markdownify(bullet)} />
+                  </li>
+                ))}
+            </ul>
+            {feature.button.enable && (
+              <a class="btn btn-primary mt-5" href={feature.button.link}>
+                {feature.button.label}
+              </a>
+            )}
+          </div>
+        </div>
+      </div>
+    </section>
+  ))
+}
+<!-- /Features -->
+
+<Testimonial testimonial={testimonial} />
+<CallToAction call_to_action={call_to_action} />