Skip to content

Commit c6b9810

Browse files
nedtwiggnedtwigg
authored
Remove cool multilanguage heading dropdown, many small styling improvements (#93 for #88)
2 parents c980c47 + db5dda4 commit c6b9810

11 files changed

+144
-130
lines changed

‎docs/github-mark.svg

+1
Loading

‎docs/src/components/HeadingLanguageSelect.tsx

-96
This file was deleted.

‎docs/src/components/HeadingPopout.tsx

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import { PathParts } from "@/lib/languageFromPath";
2+
import clsx from "clsx";
3+
import { Button } from "./Button";
4+
import { Popout } from "./Icons/Popout";
5+
6+
type HeadingPopoutProps = {
7+
pathParts: PathParts;
8+
currentHeading: string;
9+
};
10+
11+
export function HeadingPopout({
12+
currentHeading,
13+
pathParts,
14+
}: HeadingPopoutProps) {
15+
function handleClick() {
16+
window.history.pushState({}, "", `#${currentHeading}`);
17+
window.location.href = `/${pathParts.language}/get-started#quickstart`;
18+
}
19+
return (
20+
<Button
21+
className={clsx([
22+
"text-white",
23+
"bg-blue",
24+
"w-[70px]",
25+
"rounded-[4px]",
26+
"h-[30px]",
27+
"z-20",
28+
"relative",
29+
"desktop:w-[94px]",
30+
"mb-[7px]",
31+
])}
32+
onClick={handleClick}
33+
>
34+
<Popout width={36} height={36} />
35+
</Button>
36+
);
37+
}

‎docs/src/components/Icons/Octocat.tsx

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { SVGProps } from "react";
2+
3+
export function Octocat(props: SVGProps<SVGSVGElement>) {
4+
return (
5+
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" {...props}>
6+
<path
7+
fillRule="evenodd"
8+
clipRule="evenodd"
9+
d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"
10+
/>
11+
</svg>
12+
);
13+
}

‎docs/src/components/Icons/Popout.tsx

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { SVGProps } from "react";
2+
3+
export function Popout(props: SVGProps<SVGSVGElement>) {
4+
return (
5+
<svg fill="#FFF" viewBox="0 0 32 32" {...props}>
6+
<path d="M15.694 13.541l2.666 2.665 5.016-5.017 2.59 2.59 0.004-7.734-7.785-0.046 2.526 2.525-5.017 5.017zM25.926 16.945l-1.92-1.947 0.035 9.007-16.015 0.009 0.016-15.973 8.958-0.040-2-2h-7c-1.104 0-2 0.896-2 2v16c0 1.104 0.896 2 2 2h16c1.104 0 2-0.896 2-2l-0.074-7.056z" />
7+
</svg>
8+
);
9+
}

‎docs/src/components/IntroText.tsx

+7-5
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import slugify from "@sindresorhus/slugify";
33
import { Button } from "./Button";
44
import Link from "next/link";
55

6+
const THE_CONTEXT_WINDOW = "https://thecontextwindow.ai/assertions-are-just-bad-snapshots";
7+
68
export function IntroText() {
79
return (
810
<div
@@ -65,18 +67,18 @@ export function IntroText() {
6567
>
6668
<p>
6769
Snapshot testing is the <br />{" "}
68-
<span className="text-blue">fastest and most precise</span>
70+
<a href={THE_CONTEXT_WINDOW} className="text-blue hover:underline cursor-pointer">fastest and most precise</a>
6971
<br />
7072
mechanism to{" "}
71-
<span className="text-red">
73+
<a href={THE_CONTEXT_WINDOW} className="text-red hover:underline cursor-pointer">
7274
record <br /> and specify
73-
</span>{" "}
75+
</a>{" "}
7476
the <br />
75-
<span className="text-green">
77+
<a href={THE_CONTEXT_WINDOW} className="text-green hover:underline cursor-pointer">
7678
behavior of your <br />
7779
system and its <br />
7880
components
79-
</span>
81+
</a>
8082
.
8183
</p>
8284
<p>

‎docs/src/components/NavHeading.tsx

+4-18
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
1-
import { LanguageSlug, getPathParts } from "@/lib/languageFromPath";
1+
import { getPathParts } from "@/lib/languageFromPath";
22
import clsx from "clsx";
33
import { useRouter } from "next/router";
4-
import { useState } from "react";
5-
import { HeadingLanguageSelect } from "./HeadingLanguageSelect";
4+
import { HeadingPopout } from "./HeadingPopout";
65
import { Selfie } from "./Selfie";
76

87
type NavHeadingProps = {
@@ -16,29 +15,16 @@ export function NavHeading({ text }: NavHeadingProps) {
1615
pathParts.language = "jvm";
1716
}
1817

19-
function handleChange(value: LanguageSlug) {
20-
let nextRoute = "/" + value;
21-
if (pathParts.subpath) {
22-
nextRoute += "/" + pathParts.subpath;
23-
}
24-
router.push(nextRoute + `#${text}`);
25-
setSelectIsOpen(false);
26-
}
27-
28-
const [selectIsOpen, setSelectIsOpen] = useState<boolean>(false);
29-
3018
return (
3119
<>
3220
<br />
3321
<div className={clsx(["flex", "items-end", "justify-between"])}>
3422
<h2 id={text}>
3523
<Selfie /> is {text.replace(/\-/g, ' ')}{" "}
3624
</h2>
37-
<HeadingLanguageSelect
25+
<HeadingPopout
26+
currentHeading={text}
3827
pathParts={pathParts}
39-
isOpen={selectIsOpen}
40-
setSelectIsOpen={setSelectIsOpen}
41-
handleChange={handleChange}
4228
/>
4329
</div>
4430
</>

‎docs/src/components/Navigation/SubNavigation.tsx

+22
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { PathParts } from "@/lib/languageFromPath";
22
import clsx from "clsx";
33
import Link from "next/link";
44
import { Button } from "../Button";
5+
import { Octocat } from "../Icons/Octocat";
56

67
type SubNavButton = {
78
text: string;
@@ -70,6 +71,27 @@ export function SubNavigation({ pathParts, selectIsOpen }: SubNavigationProps) {
7071
</Link>
7172
);
7273
})}
74+
<Link href="https://github.com/diffplug/selfie">
75+
<Button
76+
className={clsx([
77+
unPressedClasses,
78+
"fill-black",
79+
"hover:fill-white",
80+
"desktop:px-2",
81+
])}
82+
>
83+
<Octocat
84+
className={clsx([
85+
"w-[16px]",
86+
"h-[16px]",
87+
"wide-phone:w-[22px]",
88+
"wide-phone:h-[22px]",
89+
"desktop:w-[32px]",
90+
"desktop:h-[32px]",
91+
])}
92+
/>
93+
</Button>
94+
</Link>
7395
</li>
7496
</ul>
7597
</nav>

‎docs/src/components/mdx.tsx

+40-9
Original file line numberDiff line numberDiff line change
@@ -38,12 +38,10 @@ export function code({ children, ...props }: ParentComponentProps) {
3838
? ""
3939
: clsx([
4040
"bg-grey",
41-
"px-[14px]",
42-
"pt-[6px]",
43-
"pb-[2px]",
44-
"rounded-xl",
41+
"px-[7px]",
42+
"py-[2px]",
43+
"rounded",
4544
"text-sm",
46-
"desktop:text-base",
4745
"leading-[1.5em]",
4846
]);
4947
return children ? (
@@ -62,16 +60,15 @@ export function pre({ children, ...props }: ParentComponentProps) {
6260
<CodeBlockContext.Provider value={true}>
6361
<div
6462
className={clsx([
65-
"rounded-2xl",
63+
"rounded-lg",
6664
"bg-grey/60",
6765
"shadow",
6866
"text-sm",
69-
"desktop:text-base",
7067
"overflow-hidden",
7168
"leading-[1.5em]",
7269
])}
7370
>
74-
<pre className="overflow-scroll p-4" {...props}>
71+
<pre className="overflow-scroll p-2" {...props}>
7572
{children}
7673
</pre>
7774
</div>
@@ -81,7 +78,7 @@ export function pre({ children, ...props }: ParentComponentProps) {
8178

8279
export function p({ children, ...props }: ParentComponentProps) {
8380
return (
84-
<p {...props} className="py-[13px] desktop:py-[20px]">
81+
<p {...props} className="py-[13px]">
8582
{children}
8683
</p>
8784
);
@@ -95,3 +92,37 @@ export function h2({ children, ...props }: ParentComponentProps) {
9592
</>
9693
);
9794
}
95+
96+
export function h3({ children, ...props }: ParentComponentProps) {
97+
return (
98+
<>
99+
<h3 {...props} className="text-lg">
100+
{children}
101+
</h3>
102+
</>
103+
);
104+
}
105+
106+
export function a({ children, ...props }: ParentComponentProps) {
107+
return (
108+
<a {...props} className="text-blue underline visited:text-purple">
109+
{children}
110+
</a>
111+
);
112+
}
113+
114+
export function ul({ children, ...props }: ParentComponentProps) {
115+
return (
116+
<ul {...props} className="list-inside list-disc">
117+
{children}
118+
</ul>
119+
);
120+
}
121+
122+
export function li({ children, ...props }: ParentComponentProps) {
123+
return (
124+
<li {...props}>
125+
<span className="-ml-3">{children}</span>
126+
</li>
127+
);
128+
}

‎docs/src/styles/tailwind.css

+9-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@
55
@layer base {
66
body {
77
@apply text-base;
8-
@apply desktop:text-xl;
98
}
109

1110
h2 {
@@ -26,4 +25,13 @@
2625
--shiki-token-punctuation: #BBB;
2726
--shiki-token-link: #0099ff;
2827
}
28+
29+
ul ul {
30+
margin-left: 26px;
31+
margin-bottom: 8px;
32+
}
33+
34+
ul ul li {
35+
list-style-type: circle;
36+
}
2937
}

‎docs/tailwind.config.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ module.exports = {
99
green: "#78ACAE",
1010
red: "#E35C61",
1111
grey: "#EEE",
12+
purple: "#8250DF",
1213
},
1314
boxShadow: {
1415
button: "2px 2px 1px #4D4D4D",
@@ -56,7 +57,7 @@ module.exports = {
5657
base: [
5758
"22px",
5859
{
59-
lineHeight: "1.2em",
60+
lineHeight: "1.4em",
6061
fontWeight: 400,
6162
},
6263
],

0 commit comments

Comments
 (0)