Feat/routing

docs/src/components/Advanced.tsx

@@ -0,0 +1,10 @@
+import clsx from "clsx";
+
+export function Advanced() {
+  return (
+    <img
+      src="/advanced.webp"
+      className={clsx(["wide-phone:w-2/4", "wide-phone:float-left"])}
+    />
+  );
+}

docs/src/components/Button.tsx

@@ -1,53 +1,34 @@
 import clsx from "clsx";
-import { CSSProperties } from "react";
+import { ReactNode } from "react";
 
 type ButtonProps = {
-  text: string;
-  isDepressed?: boolean;
-  isWide?: boolean;
+  children: ReactNode;
+  className?: string;
 };
 
-export function Button({
-  text,
-  isDepressed = false,
-  isWide = false,
-}: ButtonProps) {
+export function Button({ children, className }: ButtonProps) {
   return (
-    <div
+    <span
       className={clsx([
         "flex",
-        isWide ? "w-[154px]" : "w-[44px]",
-        isWide ? "h-[35px]" : "h-[23px]",
         "justify-center",
         "items-center",
-        isWide ? "rounded-[10px]" : "rounded-[4px]",
         "border",
         "border-2",
         "border-black",
-        "hover:text-white",
-        "hover:bg-blue",
         "cursor-pointer",
-        isDepressed && "mt-[1px]",
-        isDepressed ? "text-white" : "text-black",
-        isDepressed ? "bg-blue" : "bg-white",
-        isDepressed ? "shadow-none" : "shadow-button",
-        isWide ? "text-[22px]" : "text-[14px]",
-        isWide ? "tablet:w-[154px]" : "tablet:w-[73px]",
         "tablet:h-[35px]",
         "tablet:text-[22px]",
         "tablet:border-[3px]",
         "tablet:rounded-[10px]",
-        isDepressed && "tablet:mt-[2px]",
-        isDepressed ? "shadow-none" : "tablet:shadow-button-tablet",
-        isWide ? "desktop:w-[232px]" : "desktop:w-[110px]",
         "desktop:h-[53px]",
         "desktop:text-[34px]",
         "desktop:border-[4px]",
         "desktop:rounded-[16px]",
-        isDepressed && "tablet:mt-[3px]",
+        className,
       ])}
     >
-      {text}
-    </div>
+      {children}
+    </span>
   );
 }

docs/src/components/ButtonList.tsx

@@ -1,7 +1,12 @@
 import clsx from "clsx";
+import Link from "next/link";
 import { Button } from "./Button";
+import { useRouter } from "next/dist/client/router";
+import { getPathParts } from "@/lib/languageFromPath";
 
 export function ButtonList() {
+  const router = useRouter();
+  const selectedLanguage = getPathParts(router.pathname).language;
   return (
     <div
       className={clsx([
@@ -15,10 +20,74 @@ export function ButtonList() {
         "desktop:w-[490px]",
       ])}
     >
-      <Button text="jvm" isDepressed={true} />
-      <Button text="js" />
-      <Button text="go" />
-      <Button text="..." />
+      <Link href="/jvm">
+        <Button
+          className={
+            ["jvm", ""].includes(selectedLanguage)
+              ? pressedClasses
+              : unPressedClasses
+          }
+        >
+          jvm
+        </Button>
+      </Link>
+      <Link href="/js">
+        <Button
+          className={
+            selectedLanguage === "js" ? pressedClasses : unPressedClasses
+          }
+        >
+          js
+        </Button>
+      </Link>
+      <Link href="/other-platforms">
+        <Button
+          className={
+            selectedLanguage === "go" ? pressedClasses : unPressedClasses
+          }
+        >
+          go
+        </Button>
+      </Link>
+      <Link href="/other-platforms">
+        <Button
+          className={
+            selectedLanguage === "other-platforms"
+              ? pressedClasses
+              : unPressedClasses
+          }
+        >
+          ...
+        </Button>
+      </Link>
     </div>
   );
 }
+
+const sharedClasses = clsx([
+  "w-[44px]",
+  "h-[23px]",
+  "rounded-[4px]",
+  "text-[14px]",
+  "tablet:w-[73px]",
+  "desktop:w-[110px]",
+  "hover:text-white",
+  "hover:bg-blue",
+]);
+
+const pressedClasses = clsx([
+  "mt-[1px]",
+  "text-white",
+  "bg-blue",
+  "shadow-none",
+  "tablet:mt-[3px]",
+  sharedClasses,
+]);
+
+const unPressedClasses = clsx([
+  "text-black",
+  "bg-white",
+  "shadow-button",
+  "tablet:shadow-button-tablet",
+  sharedClasses,
+]);

docs/src/components/GetStarted.tsx

@@ -0,0 +1,10 @@
+import clsx from "clsx";
+
+export function GetStarted() {
+  return (
+    <img
+      src="/get-started.webp"
+      className={clsx(["wide-phone:w-2/4", "wide-phone:float-left"])}
+    />
+  );
+}

docs/src/components/Icons/CaretBottom.tsx

@@ -0,0 +1,9 @@
+import { SVGProps } from "react";
+
+export function CaretBottom(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="0 0 32 32" {...props}>
+      <path d="M24 11.305l-7.997 11.39L8 11.305z" />
+    </svg>
+  );
+}

docs/src/components/IntroText.tsx

@@ -1,5 +1,6 @@
 import clsx from "clsx";
 import { Button } from "./Button";
+import Link from "next/link";
 
 export function IntroText() {
   return (
@@ -28,11 +29,38 @@ export function IntroText() {
         ])}
       >
         Which is <br className="tablet:hidden" />{" "}
-        <Link href="#literal">literal</Link>,{" "}
-        <Link href="#lensable">lensable</Link>
-        <br /> and <Link href="#like-a-filesytem">like a filesystem</Link>
+        <Link href="#literal" className="cursor-pointer underline">
+          literal
+        </Link>
+        ,{" "}
+        <Link href="#lensable" className="cursor-pointer underline">
+          lensable
+        </Link>
+        <br /> and{" "}
+        <Link href="#like-a-filesytem" className="cursor-pointer underline">
+          like a filesystem
+        </Link>
       </p>
-      <Button text="get started" isWide={true} />
+      <Link href="/jvm/get-started">
+        <Button
+          className={clsx([
+            "w-[154px]",
+            "h-[35px]",
+            "rounded-[10px]",
+            "text-[22px]",
+            "tablet:w-[154px]",
+            "desktop:w-[232px]",
+            "text-black",
+            "bg-white",
+            "shadow-button",
+            "tablet:shadow-button-tablet",
+            "hover:text-white",
+            "hover:bg-blue",
+          ])}
+        >
+          get started
+        </Button>
+      </Link>
       <div
         className={clsx([
           "text-[18px]",
@@ -71,15 +99,3 @@ export function IntroText() {
     </div>
   );
 }
-
-type LinkProps = {
-  href: string;
-  children: React.ReactNode;
-};
-function Link({ href, children }: LinkProps) {
-  return (
-    <a href={href} className="cursor-pointer underline">
-      {children}
-    </a>
-  );
-}

docs/src/components/Mascot.tsx

@@ -52,7 +52,6 @@ export function Mascot() {
         "object-cover",
         "object-left",
         "block",
-        "overflow-visible",
         "animate-slide-and-fade",
         "block",
         "z-[-1]",

docs/src/components/Navigation/LanguageSelect.tsx

@@ -0,0 +1,72 @@
+import { LanguageSlug, languageSlugsToLabels } from "@/lib/languageFromPath";
+import { Listbox } from "@headlessui/react";
+import clsx from "clsx";
+import { Button } from "../Button";
+import { CaretBottom } from "../Icons/CaretBottom";
+
+type LanguageSelectProps = {
+  selectedLanguage: LanguageSlug;
+  handleChange(value: LanguageSlug): void;
+};
+
+export function LanguageSelect({
+  selectedLanguage,
+  handleChange,
+}: LanguageSelectProps) {
+  return (
+    <div className={clsx(["relative"])}>
+      <Listbox value={selectedLanguage} onChange={handleChange}>
+        <Listbox.Button>
+          {({ open }) => {
+            return (
+              <Button
+                className={clsx([
+                  "text-white",
+                  "bg-blue",
+                  "w-[110px]",
+                  "rounded-[4px]",
+                ])}
+              >
+                {languageSlugsToLabels[selectedLanguage]}
+                <CaretBottom
+                  className={clsx(["h-5", "w-5", open && "rotate-180"])}
+                  fill="#FFFFFF"
+                />
+              </Button>
+            );
+          }}
+        </Listbox.Button>
+        <Listbox.Options
+          className={clsx([
+            "absolute",
+            "bg-white",
+            "shadow-xl",
+            "flex",
+            "flex-col",
+            "mt-[5px]",
+            "gap-[5px]",
+          ])}
+        >
+          {Object.keys(languageSlugsToLabels)
+            .filter((slug) => slug !== selectedLanguage)
+            .map((slug) => (
+              <Listbox.Option value={slug} key={slug}>
+                <Button
+                  className={clsx([
+                    "w-[110px]",
+                    "shadow-button",
+                    "tablet:shadow-button-tablet",
+                    "rounded-[4px]",
+                    "hover:text-white",
+                    "hover:bg-blue",
+                  ])}
+                >
+                  {languageSlugsToLabels[slug as LanguageSlug]}
+                </Button>
+              </Listbox.Option>
+            ))}
+        </Listbox.Options>
+      </Listbox>
+    </div>
+  );
+}