From 4f63fa282979b1f095fdbf78345c04ff9e8a5ba9 Mon Sep 17 00:00:00 2001 From: toddriley Date: Thu, 5 Oct 2023 17:54:08 -0400 Subject: [PATCH 1/6] Hide subnavigation on /other-platforms --- docs/src/components/Navigation/Navigation.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/docs/src/components/Navigation/Navigation.tsx b/docs/src/components/Navigation/Navigation.tsx index 218de502..7fe702fd 100644 --- a/docs/src/components/Navigation/Navigation.tsx +++ b/docs/src/components/Navigation/Navigation.tsx @@ -39,7 +39,9 @@ export function Navigation() { setSelectIsOpen={setSelectIsOpen} handleChange={handleChange} /> - + {pathParts.language !== "other-platforms" && ( + + )} ); } From 78c9c8e3955942367a37db8f1257a2bd8a81213a Mon Sep 17 00:00:00 2001 From: toddriley Date: Fri, 6 Oct 2023 10:43:07 -0400 Subject: [PATCH 2/6] Use a react component for the headings that will have navigation dropdowns. --- docs/src/components/NavHeading.tsx | 17 +++++++++++++++++ docs/src/pages/index.mdx | 5 +++-- docs/src/pages/js/index.mdx | 11 ++++++++--- docs/src/pages/jvm/index.mdx | 5 +++-- 4 files changed, 31 insertions(+), 7 deletions(-) create mode 100644 docs/src/components/NavHeading.tsx diff --git a/docs/src/components/NavHeading.tsx b/docs/src/components/NavHeading.tsx new file mode 100644 index 00000000..0e1e5cbd --- /dev/null +++ b/docs/src/components/NavHeading.tsx @@ -0,0 +1,17 @@ +import clsx from "clsx"; +import { Selfie } from "./Selfie"; + +type NavHeadingProps = { + text: string; +}; + +export function NavHeading({ text }: NavHeadingProps) { + return ( + <> +
+

+ is {text} +

+ + ); +} 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. From c3a4b846ba5df86d4398704a19620f8e183bbe07 Mon Sep 17 00:00:00 2001 From: toddriley Date: Fri, 6 Oct 2023 10:46:55 -0400 Subject: [PATCH 3/6] Fix auto import path. --- docs/src/components/ButtonList.tsx | 2 +- docs/src/components/Navigation/Navigation.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) 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/Navigation/Navigation.tsx b/docs/src/components/Navigation/Navigation.tsx index 7fe702fd..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"; From 51b5ecf99fafa4d71dbf1b78ddae3cf3c1124442 Mon Sep 17 00:00:00 2001 From: toddriley Date: Fri, 6 Oct 2023 13:10:59 -0400 Subject: [PATCH 4/6] Add a language selector in #literal and #lensable headings on mobile. --- docs/src/components/HeadingLanguageSelect.tsx | 82 +++++++++++++++++++ docs/src/components/NavHeading.tsx | 35 +++++++- 2 files changed, 114 insertions(+), 3 deletions(-) create mode 100644 docs/src/components/HeadingLanguageSelect.tsx diff --git a/docs/src/components/HeadingLanguageSelect.tsx b/docs/src/components/HeadingLanguageSelect.tsx new file mode 100644 index 00000000..73f85875 --- /dev/null +++ b/docs/src/components/HeadingLanguageSelect.tsx @@ -0,0 +1,82 @@ +import { + LanguageSlug, + PathParts, + languageSlugsToLabels, +} from "@/lib/languageFromPath"; +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) { + 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] + */ diff --git a/docs/src/components/NavHeading.tsx b/docs/src/components/NavHeading.tsx index 0e1e5cbd..2d320133 100644 --- a/docs/src/components/NavHeading.tsx +++ b/docs/src/components/NavHeading.tsx @@ -1,17 +1,46 @@ import clsx from "clsx"; import { Selfie } from "./Selfie"; +import { useRouter } from "next/router"; +import { LanguageSlug, getPathParts } from "@/lib/languageFromPath"; +import { useState } from "react"; +import { HeadingLanguageSelect } from "./HeadingLanguageSelect"; 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} -

+
+

+ is {text}{" "} +

+ +
); } From 08415e43fed0801b61eb6241df46b1364cc02bd2 Mon Sep 17 00:00:00 2001 From: toddriley Date: Fri, 6 Oct 2023 13:12:35 -0400 Subject: [PATCH 5/6] Clean up imports. --- docs/src/components/NavHeading.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/src/components/NavHeading.tsx b/docs/src/components/NavHeading.tsx index 2d320133..f06903a3 100644 --- a/docs/src/components/NavHeading.tsx +++ b/docs/src/components/NavHeading.tsx @@ -1,9 +1,9 @@ +import { LanguageSlug, getPathParts } from "@/lib/languageFromPath"; import clsx from "clsx"; -import { Selfie } from "./Selfie"; import { useRouter } from "next/router"; -import { LanguageSlug, getPathParts } from "@/lib/languageFromPath"; import { useState } from "react"; import { HeadingLanguageSelect } from "./HeadingLanguageSelect"; +import { Selfie } from "./Selfie"; type NavHeadingProps = { text: string; From 90a6d26e3bab3d864ed69a7a3cc9b5595777721d Mon Sep 17 00:00:00 2001 From: toddriley Date: Fri, 6 Oct 2023 16:39:22 -0400 Subject: [PATCH 6/6] Show sub nav on all screen sizes. --- docs/src/components/HeadingLanguageSelect.tsx | 18 +++++++++++++-- docs/src/lib/useResizing.ts | 23 +++++++++++++++++++ 2 files changed, 39 insertions(+), 2 deletions(-) create mode 100644 docs/src/lib/useResizing.ts diff --git a/docs/src/components/HeadingLanguageSelect.tsx b/docs/src/components/HeadingLanguageSelect.tsx index 73f85875..69401df6 100644 --- a/docs/src/components/HeadingLanguageSelect.tsx +++ b/docs/src/components/HeadingLanguageSelect.tsx @@ -3,6 +3,7 @@ import { PathParts, languageSlugsToLabels, } from "@/lib/languageFromPath"; +import { useResizing } from "@/lib/useResizing"; import clsx from "clsx"; import { Dispatch, SetStateAction } from "react"; import { Button } from "./Button"; @@ -22,8 +23,9 @@ export function HeadingLanguageSelect({ isOpen, handleChange, }: HeadingLanguageSelectProps) { + const resizing = useResizing(); return ( -
+