add language button

package.json

@@ -81,6 +81,7 @@
     "serve-handler": "^6.1.5",
     "shiki": "^1.1.6",
     "source-map-support": "^0.5.21",
+    "three": "^0.162.0",
     "to-vfile": "^8.0.0",
     "toml": "^3.0.0",
     "unified": "^11.0.4",

quartz.config.ts

@@ -88,3 +88,34 @@ const config: QuartzConfig = {
 }
 
 export default config
+
+const repositories = {
+  en: 'hakuguen.github.io/design-o-sphereEN',
+  vn: 'hakuguen.github.io/design-o-sphereVN'
+};
+
+type Language = 'en' | 'vn';
+let currentLanguage: Language = 'en'; // Default language
+
+function toggleLanguage(): void {
+  currentLanguage = currentLanguage === 'en' ? 'vn' : 'en';
+  redirectToCorrespondingNote();
+}
+
+function redirectToCorrespondingNote(): void {
+  const currentNoteName = getCurrentNoteName(); // Implement this function based on your application
+  const correspondingNoteUrl = getCorrespondingNoteUrl(currentNoteName, currentLanguage);
+  window.location.href = correspondingNoteUrl;
+}
+
+function getCurrentNoteName(): string {
+  // This should be implemented based on how you can identify notes in your application.
+  // For example, you might use the URL, a data attribute, or another method.
+  return ''; // Placeholder return
+}
+
+function getCorrespondingNoteUrl(noteName: string, language: Language): string {
+  // Implement the logic to construct the URL for the note's counterpart in the selected language.
+  // This might involve replacing part of the current URL, or looking up a mapping.
+  return `${repositories[language]}/${noteName}`;
+}

quartz.layout.ts

@@ -26,6 +26,7 @@ export const defaultContentPageLayout: PageLayout = {
     Component.MobileOnly(Component.Spacer()),
     Component.Search(),
     Component.Darkmode(),
+    Component.LanguageToggle(),
     Component.DesktopOnly(Component.Explorer()),
   ],
   right: [
@@ -43,6 +44,7 @@ export const defaultListPageLayout: PageLayout = {
     Component.MobileOnly(Component.Spacer()),
     Component.Search(),
     Component.Darkmode(),
+    Component.LanguageToggle(),
     Component.DesktopOnly(Component.Explorer()),
   ],
   right: [],

quartz/components/Landing.tsx

@@ -0,0 +1,92 @@
+import { QuartzComponentConstructor } from "./types"
+import landingStyle from "./styles/Landing.scss"
+
+export const TOTAL_CARDS = 8
+export const CARDS = {
+  basics: (
+    <a href={"/basics"}>
+      <div class="card card-1">
+        <p class="card-title">The Basics</p>
+        <p class="card-subhead">Issue 001</p>
+        <img src="/static/1-illo.png" class="card-illustration-1" />
+      </div>
+    </a>
+  ),
+  "getting-started": (
+    <a href={"/getting-started"}>
+      <div class="card card-2">
+        <p class="card-title">Getting Started</p>
+        <p class="card-subhead">Issue 002</p>
+        <img src="/static/2-illo.png" class="card-illustration-2" />
+      </div>
+    </a>
+  ),
+  "growing-people": (
+    <a href={"/growing-people"}>
+      <div class="card card-3">
+        <p class="card-title">Growing People</p>
+        <p class="card-subhead">Issue 003</p>
+        <img src="/static/3-illo.png" class="card-illustration-3" />
+      </div>
+    </a>
+  ),
+  "superboosting-ideas": (
+    <a href={"/superboosting-ideas"}>
+      <div class="card card-4">
+        <p class="card-title">Super- boosting Ideas</p>
+        <p class="card-subhead">Issue 004</p>
+        <img src="/static/4-illo.png" class="card-illustration-4" />
+      </div>
+    </a>
+  ),
+  maintenance: (
+    <a href={"/maintenance"}>
+      <div class="card card-5">
+        <p class="card-title">Maintenance</p>
+        <p class="card-subhead">Issue 005</p>
+        <img src="/static/5-illo.png" class="card-illustration-5" />
+      </div>
+    </a>
+  ),
+}
+
+export default (() => {
+  function LandingComponent() {
+    return (
+      <div>
+        <div class="content-container">
+          <p class="landing-header">Welcome to Socratica</p>
+          <p class="page-subhead">
+            This is a guide •{" "}
+            <a href="https://www.socratica.info/" target="_blank">
+              Back to main site
+            </a>{" "}
+            •{" "}
+            <a href="https://github.com/Socratica-Org/toolbox" target="_blank">
+              Contribute
+            </a>{" "}
+            •{" "}
+            <a href="https://toolbox.socratica.info/credits" target="_self">
+              Credits
+            </a>
+          </p>
+
+          <div class="issue-container">
+            {Object.values(CARDS)}
+            {Array(TOTAL_CARDS - Object.keys(CARDS).length)
+              .fill(0)
+              .map(() => (
+                <div class="card card-coming">
+                  <p class="card-title">Coming Soon</p>
+                  <p class="card-subhead">Issue XXX</p>
+                </div>
+              ))}
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  LandingComponent.css = landingStyle
+  return LandingComponent
+}) satisfies QuartzComponentConstructor

quartz/components/LanguageToggle.tsx

@@ -0,0 +1,18 @@
+import { QuartzComponentConstructor } from "./types"
+export default (() => {
+  function LanguageToggle() {
+    return <a class="red-text" href="https://hakuguen.github.io/design-o-sphereVN"
+    >
+    VIETNAMESE
+ </a>
+
+  }
+
+  LanguageToggle.css = `
+  p.red-text {
+    color: red;
+  }
+  `
+
+  return LanguageToggle
+}) satisfies QuartzComponentConstructor

quartz/components/ThreeJS.tsx

@@ -0,0 +1,17 @@
+import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
+
+// @ts-ignore
+import script from "./scripts/threejs.inline"
+
+// import styles from "./styles/ThreeJsComponent.scss"
+
+export default (() => {
+  function ThreeJsComponent() {
+    return <div id="threejs-container"></div>
+  }
+
+  ThreeJsComponent.afterDOMLoaded = script
+
+  //   ThreeJsComponent.css = styles
+  return ThreeJsComponent
+}) satisfies QuartzComponentConstructor

quartz/components/index.ts

@@ -19,6 +19,9 @@ import DesktopOnly from "./DesktopOnly"
 import MobileOnly from "./MobileOnly"
 import RecentNotes from "./RecentNotes"
 import Breadcrumbs from "./Breadcrumbs"
+import LanguageToggle from "./LanguageToggle"
+import ThreeJS from "./ThreeJS"
+import Landing from "./Landing"
 
 export {
   ArticleTitle,
@@ -42,4 +45,7 @@ export {
   RecentNotes,
   NotFound,
   Breadcrumbs,
+  LanguageToggle,
+  Landing,
+  ThreeJS
 }

quartz/components/scripts/threejs.inline.ts

@@ -0,0 +1,75 @@
+import * as THREE from "three"
+
+document.addEventListener("nav", async (e: unknown) => {
+  var scene = new THREE.Scene()
+  var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
+  var renderer = new THREE.WebGLRenderer()
+
+  renderer.setClearColor(0xfbf8ef)
+
+  renderer.setSize(window.innerWidth, window.innerHeight)
+  document.getElementById("threejs-container")!.appendChild(renderer.domElement)
+
+  var group = new THREE.Group()
+
+  // Create 5 boxes, each increasing in width by 1.25 and positioned lower on the y axis
+  for (let i = 0; i < 5; i++) {
+    var geometry = new THREE.BoxGeometry(1 + i * 1.25, 1, 1)
+    var material = new THREE.MeshBasicMaterial({ color: 0xffffff }) // Different color for distinction
+    var cube = new THREE.Mesh(geometry, material)
+    cube.position.y -= i // Adjust this value to change the height of the box
+    var edges = new THREE.EdgesGeometry(geometry)
+    var line = new THREE.LineSegments(edges, new THREE.LineBasicMaterial({ color: 0x000000 })) // Black color
+    line.position.y -= i // Adjust this value to change the height of the box
+    group.add(cube)
+    group.add(line)
+    scene.add(group)
+  }
+
+  var animateGroup = new THREE.Group()
+  animateGroup.add(group)
+
+  scene.add(animateGroup)
+
+  camera.position.z = 5
+
+  // function animate() {
+  //   requestAnimationFrame(animate)
+
+  //   animateGroup.rotation.z += 0.01
+  //   animateGroup.rotation.y += 0.01
+
+  //   // Render the scene with the camera
+  //   renderer.render(scene, camera)
+  // }
+
+  // // Call the animate function
+  // animate()
+
+  // Add scroll event listener to move the second cube
+  let previousScrollPosition = window.scrollY
+  window.addEventListener("scroll", function () {
+    var scrollChange = window.scrollY - previousScrollPosition
+    previousScrollPosition = window.scrollY
+
+    // Iterate over each child in the group
+    for (let i = 0; i < group.children.length; i++) {
+      // Apply a different speed of movement to each box
+      let speedFactor = (i + 1) * 1.5 // Adjust this value to change the speed difference between boxes
+      group.children[i].position.y += (scrollChange / window.innerHeight) * speedFactor
+    }
+  })
+
+  renderer.render(scene, camera)
+
+  renderer.render(scene, camera)
+  var leftElements = document.getElementsByClassName("left")
+  for (let i = 0; i < leftElements.length; i++) {
+    ;(leftElements[i] as HTMLElement).style.display = "none"
+  }
+
+  var rightElements = document.getElementsByClassName("right")
+  for (let i = 0; i < rightElements.length; i++) {
+    ;(rightElements[i] as HTMLElement).style.display = "none"
+  }
+})