Skip to content

Commit 2a32cbb

Browse files
pokeypokey
committed
Highlight section from url hash
1 parent 2fdf417 commit 2a32cbb

File tree

6 files changed

+79
-38
lines changed

6 files changed

+79
-38
lines changed

‎cheatsheet/package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,8 @@
2727
"gatsby-source-filesystem": "^4.10.1",
2828
"react": "^17.0.1",
2929
"react-dom": "^17.0.1",
30-
"react-helmet": "^6.1.0"
30+
"react-helmet": "^6.1.0",
31+
"react-use": "^17.3.2"
3132
},
3233
"devDependencies": {
3334
"@types/node": "^17.0.21",

‎cheatsheet/src/components/CheatsheetLegendComponent.tsx

Lines changed: 32 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import * as React from "react";
22
import { CheatsheetLegend } from "../cheatsheetLegend";
3+
import useIsHighlighted from "../hooks/useIsHighlighted";
34
import SmartLink from "./SmartLink";
45

56
type Props = {
@@ -9,33 +10,46 @@ type Props = {
910
export default function CheatsheetLegendComponent({
1011
data,
1112
}: Props): JSX.Element {
13+
const isHighlighted = useIsHighlighted("legend");
14+
15+
const borderClassName = isHighlighted
16+
? "border-violet-500 dark:border-violet-300"
17+
: "border-violet-300 dark:border-violet-500";
18+
1219
return (
1320
<div
1421
id="legend"
15-
className="border border-violet-300 dark:border-violet-500 rounded-lg bg-violet-100 dark:bg-violet-900"
22+
className={`border ${borderClassName} rounded-lg bg-violet-100 dark:bg-violet-900`}
1623
>
1724
<h2 className="text-xl text-center my-1 text-violet-900 dark:text-violet-100">
1825
Legend
1926
</h2>
2027
<table className="w-full">
21-
<tr className="text bg-violet-300 dark:bg-violet-500">
22-
<th className="px-1 font-normal">Term</th>
23-
<th className="px-1 border-l border-violet-400 font-normal">
24-
Definition
25-
</th>
26-
</tr>
27-
{data.map(({ term, definition, link }) => (
28-
<tr className="odd:bg-violet-200 odd:dark:bg-violet-600 dark:bg-violet-800">
29-
<td className="px-1">{`<${term}>`}</td>
30-
<td className="border-l border-violet-400 px-1">
31-
{link != null ? (
32-
<SmartLink to={link}>{definition}</SmartLink>
33-
) : (
34-
definition
35-
)}
36-
</td>
28+
<thead>
29+
<tr className="text bg-violet-300 dark:bg-violet-500">
30+
<th className="px-1 font-normal">Term</th>
31+
<th className="px-1 border-l border-violet-400 font-normal">
32+
Definition
33+
</th>
3734
</tr>
38-
))}
35+
</thead>
36+
<tbody>
37+
{data.map(({ term, definition, link, id }) => (
38+
<tr
39+
key={id}
40+
className="odd:bg-violet-200 odd:dark:bg-violet-600 dark:bg-violet-800"
41+
>
42+
<td className="px-1">{`<${term}>`}</td>
43+
<td className="border-l border-violet-400 px-1">
44+
{link != null ? (
45+
<SmartLink to={link}>{definition}</SmartLink>
46+
) : (
47+
definition
48+
)}
49+
</td>
50+
</tr>
51+
))}
52+
</tbody>
3953
</table>
4054
</div>
4155
);

‎cheatsheet/src/components/CheatsheetListComponent.tsx

Lines changed: 32 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import * as React from "react";
2+
import useIsHighlighted from "../hooks/useIsHighlighted";
23
import { CheatsheetSection } from "../pages/Section";
34

45
type Props = {
@@ -8,6 +9,8 @@ type Props = {
89
export default function CheatsheetListComponent({
910
section,
1011
}: Props): JSX.Element {
12+
const isHighlighted = useIsHighlighted(section.id);
13+
1114
const spokenForms = section.items.flatMap((item) =>
1215
item.spokenForms.map((spokenForm) => ({
1316
item,
@@ -19,31 +22,42 @@ export default function CheatsheetListComponent({
1922
form1.spokenForm.spokenForm.localeCompare(form2.spokenForm.spokenForm)
2023
);
2124

25+
const borderClassName = isHighlighted
26+
? "border-violet-500 dark:border-violet-400"
27+
: "border-stone-300 dark:border-stone-500";
28+
2229
return (
2330
<div
2431
id={section.id}
25-
className="border border-stone-300 dark:border-stone-500 rounded-lg bg-stone-100 dark:bg-stone-700"
32+
className={`border ${borderClassName} rounded-lg bg-stone-100 dark:bg-stone-700`}
2633
>
2734
<h2 className="text-xl text-center my-1">{section.name}</h2>
2835
<table className="w-full">
29-
<tr className="text bg-stone-300 dark:bg-stone-500">
30-
<th className="px-1 font-normal">Spoken form</th>
31-
<th className="px-1 border-l border-stone-400 font-normal">
32-
Meaning
33-
</th>
34-
</tr>
35-
{spokenForms.map(({ item, spokenForm }) => (
36-
<tr className="odd:bg-stone-200 dark:odd:bg-stone-600">
37-
<td className="px-1">
38-
<span className="text-stone-400">"</span>
39-
{spokenForm.spokenForm}
40-
<span className="text-stone-400">"</span>
41-
</td>
42-
<td className="border-l border-stone-400 px-1">
43-
{spokenForm.description}
44-
</td>
36+
<thead>
37+
<tr className="text bg-stone-300 dark:bg-stone-500">
38+
<th className="px-1 font-normal">Spoken form</th>
39+
<th className="px-1 border-l border-stone-400 font-normal">
40+
Meaning
41+
</th>
4542
</tr>
46-
))}
43+
</thead>
44+
<tbody>
45+
{spokenForms.map(({ item, spokenForm }) => (
46+
<tr
47+
key={spokenForm.spokenForm}
48+
className="odd:bg-stone-200 dark:odd:bg-stone-600"
49+
>
50+
<td className="px-1">
51+
<span className="text-stone-400">"</span>
52+
{spokenForm.spokenForm}
53+
<span className="text-stone-400">"</span>
54+
</td>
55+
<td className="border-l border-stone-400 px-1">
56+
{spokenForm.description}
57+
</td>
58+
</tr>
59+
))}
60+
</tbody>
4761
</table>
4862
</div>
4963
);

‎cheatsheet/src/components/SmartLink.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,8 @@ const SmartLink: React.FC<SmartLinkProps> = ({ to, children }) => (
1919
<a href={to} target="_blank" rel="noopener noreferrer">
2020
{children}
2121
</a>
22+
) : to.startsWith("#") ? (
23+
<a href={to}>{children}</a>
2224
) : (
2325
<Link to={to}>{children}</Link>
2426
)}

‎cheatsheet/src/hooks/useIsHighlighted.ts

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { useHash } from "react-use";
2+
3+
// Check if window is defined (so if in the browser or in node.js).
4+
const isBrowser = typeof window !== "undefined";
5+
6+
export default function useIsHighlighted(id: string) {
7+
const [hash, _] = isBrowser ? useHash() : ["", null];
8+
9+
return hash.length > 1 && hash.substring(1) === id;
10+
}

‎cheatsheet/src/pages/cheatsheet.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ const Cheatsheet = () => (
3636
{cheatsheetInfo.sections
3737
.filter((section) => section.items.length > 0)
3838
.map((section) => (
39-
<CheatsheetSection>
39+
<CheatsheetSection key={section.id}>
4040
<CheatsheetListComponent section={section} />
4141
</CheatsheetSection>
4242
))}

0 commit comments

Comments
 (0)