diff --git a/docs/src/components/ButtonList.tsx b/docs/src/components/ButtonList.tsx index 4f05fec3..552e2952 100644 --- a/docs/src/components/ButtonList.tsx +++ b/docs/src/components/ButtonList.tsx @@ -1,7 +1,7 @@ import clsx from "clsx"; import Link from "next/link"; import { Button } from "./Button"; -import { useRouter } from "next/dist/client/router"; +import { useRouter } from "next/router"; import { getPathParts } from "@/lib/languageFromPath"; export function ButtonList() { diff --git a/docs/src/components/HeadingLanguageSelect.tsx b/docs/src/components/HeadingLanguageSelect.tsx new file mode 100644 index 00000000..69401df6 --- /dev/null +++ b/docs/src/components/HeadingLanguageSelect.tsx @@ -0,0 +1,96 @@ +import { + LanguageSlug, + PathParts, + languageSlugsToLabels, +} from "@/lib/languageFromPath"; +import { useResizing } from "@/lib/useResizing"; +import clsx from "clsx"; +import { Dispatch, SetStateAction } from "react"; +import { Button } from "./Button"; +import { CaretBottom } from "./Icons/CaretBottom"; +import { Close } from "./Icons/Close"; + +type HeadingLanguageSelectProps = { + pathParts: PathParts; + setSelectIsOpen: Dispatch>; + isOpen: boolean; + handleChange(value: LanguageSlug): void; +}; + +export function HeadingLanguageSelect({ + pathParts, + setSelectIsOpen, + isOpen, + handleChange, +}: HeadingLanguageSelectProps) { + const resizing = useResizing(); + return ( +
+ +
+ {Object.keys(languageSlugsToLabels) + .filter((slug) => slug !== pathParts.language) + .map((slug, idx) => ( + + ))} +
+
+ ); +} + +/** + * **DO NOT DELETE** These are all possible outcomes of the math + * inside the string interpolation above. Tailwind magic isn't + * smart enough to do the math and it needs this list at build + * time in order to include these styles in the output. + * + * translate-y-[40px] translate-y-[50px] translate-y-[60px] + * translate-y-[-0px] translate-y-[-30px] translate-y-[-60px] + * tablet:translate-y-[45px] tablet:translate-y-[55px] tablet:translate-y-[65px] + * tablet:translate-y-[-0px] tablet:translate-y-[-35px] tablet:translate-y-[-70px] + * desktop:translate-y-[63px] desktop:translate-y-[73px] desktop:translate-y-[83px] + * desktop:translate-y-[-0px] desktop:translate-y-[-53px] desktop:translate-y-[-106px] + */ diff --git a/docs/src/components/NavHeading.tsx b/docs/src/components/NavHeading.tsx new file mode 100644 index 00000000..f06903a3 --- /dev/null +++ b/docs/src/components/NavHeading.tsx @@ -0,0 +1,46 @@ +import { LanguageSlug, getPathParts } from "@/lib/languageFromPath"; +import clsx from "clsx"; +import { useRouter } from "next/router"; +import { useState } from "react"; +import { HeadingLanguageSelect } from "./HeadingLanguageSelect"; +import { Selfie } from "./Selfie"; + +type NavHeadingProps = { + text: string; +}; + +export function NavHeading({ text }: NavHeadingProps) { + const router = useRouter(); + const pathParts = getPathParts(router.pathname); + if (!pathParts.language) { + pathParts.language = "jvm"; + } + + function handleChange(value: LanguageSlug) { + let nextRoute = "/" + value; + if (pathParts.subpath) { + nextRoute += "/" + pathParts.subpath; + } + router.push(nextRoute + `#${text}`); + setSelectIsOpen(false); + } + + const [selectIsOpen, setSelectIsOpen] = useState(false); + + return ( + <> +
+
+

+ is {text}{" "} +

+ +
+ + ); +} diff --git a/docs/src/components/Navigation/Navigation.tsx b/docs/src/components/Navigation/Navigation.tsx index 218de502..7eb566a7 100644 --- a/docs/src/components/Navigation/Navigation.tsx +++ b/docs/src/components/Navigation/Navigation.tsx @@ -1,6 +1,6 @@ import { LanguageSlug, getPathParts } from "@/lib/languageFromPath"; import clsx from "clsx"; -import { useRouter } from "next/dist/client/router"; +import { useRouter } from "next/router"; import { useState } from "react"; import { LanguageSelect } from "./LanguageSelect"; import { SubNavigation } from "./SubNavigation"; @@ -39,7 +39,9 @@ export function Navigation() { setSelectIsOpen={setSelectIsOpen} handleChange={handleChange} /> - + {pathParts.language !== "other-platforms" && ( + + )} ); } diff --git a/docs/src/lib/useResizing.ts b/docs/src/lib/useResizing.ts new file mode 100644 index 00000000..9e13c6d9 --- /dev/null +++ b/docs/src/lib/useResizing.ts @@ -0,0 +1,23 @@ +import { useEffect, useState } from "react"; + +export function useResizing() { + const [resizing, setResizing] = useState(false); + + useEffect(() => { + let timer: NodeJS.Timeout; + function doneResizing() { + setResizing(false); + } + function handleResize() { + setResizing(true); + clearTimeout(timer); + + timer = setTimeout(doneResizing, 100); + } + window.addEventListener("resize", handleResize); + + return () => window.removeEventListener("resize", handleResize); + }, []); + + return resizing; +} diff --git a/docs/src/pages/index.mdx b/docs/src/pages/index.mdx index c3157a0a..5b1eabb1 100644 --- a/docs/src/pages/index.mdx +++ b/docs/src/pages/index.mdx @@ -1,10 +1,11 @@ import { Hero } from "@/components/Hero"; import { Selfie } from "@/components/Selfie"; +import { NavHeading } from "@/components/NavHeading"; {/* show the homepage hero component and hide the navigation used everywhere else in the app */} export const showHero = true -## is literal + Sure, you could write your assertions like this. @@ -61,7 +62,7 @@ public void preventCssBloat() { } ``` -## is lensable + Some snapshots are so big that it would be cumbersome to put them inline into your test code. So selfie helps you put them on disk. diff --git a/docs/src/pages/js/index.mdx b/docs/src/pages/js/index.mdx index 112279b2..91686f28 100644 --- a/docs/src/pages/js/index.mdx +++ b/docs/src/pages/js/index.mdx @@ -1,9 +1,10 @@ import { Hero } from "@/components/Hero"; import { Selfie } from "@/components/Selfie"; +import { NavHeading } from "@/components/NavHeading"; export const showHero = true; -## is literal + Sure, you could write your assertions like this. @@ -45,7 +46,7 @@ describe("login", () => { ... And so on ... -## is lensable + Some snapshots are so big that it would be cumbersome to put them inline into your test code. So selfie helps you put them on disk. @@ -68,4 +69,8 @@ describe("orderFlow", () => { }); ``` -... Remaining content ... +## is like a filesystem + +Selfie's snapshot files `.ss` are incredibly simple to parse, and you can use `selfie-lib` to parse them for you if you want. You can treat them as an output deliverable of your code, and use them as an input to other tooling. + +TODO. diff --git a/docs/src/pages/jvm/index.mdx b/docs/src/pages/jvm/index.mdx index a39ba0fb..a99c0397 100644 --- a/docs/src/pages/jvm/index.mdx +++ b/docs/src/pages/jvm/index.mdx @@ -1,9 +1,10 @@ import { Hero } from "@/components/Hero"; import { Selfie } from "@/components/Selfie"; +import { NavHeading } from "@/components/NavHeading"; export const showHero = true; -## is literal + Sure, you could write your assertions like this. @@ -60,7 +61,7 @@ public void preventCssBloat() { } ``` -## is lensable + Some snapshots are so big that it would be cumbersome to put them inline into your test code. So selfie helps you put them on disk.