Skip to content

Commit 8c5fbbf

Browse files
fa7adfa7ad
committed
add linky headings
1 parent f1e8bcf commit 8c5fbbf

10 files changed

Lines changed: 285 additions & 283 deletions

File tree

‎app/(home)/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import type { Metadata } from 'next'
22

33
import PostPreview from 'components/PostPreview'
4-
import * as Posts from 'lib/Posts'
4+
import * as Posts from 'lib/posts'
55

66
export default async function Home() {
77
const posts = await Posts.findAll()

‎app/(page)/music/components.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
/* eslint-disable jsx-a11y/heading-has-content */
22
import clsx from 'clsx'
3+
import { makeHeadingLinky } from 'lib/heading'
34

45
import type { ComponentProps } from 'react'
56

67
export function Head3(props: ComponentProps<'h3'>) {
7-
return <h3 {...props} className={clsx(props?.className, '!mt-0 text-center !text-2xl')} />
8+
const H3 = makeHeadingLinky('h3')
9+
return <H3 {...props} className={clsx(props?.className, '!mb-0 text-center !text-2xl')} />
810
}
911

1012
export function SmallCenteredContainer(props: ComponentProps<'div'>) {
@@ -13,6 +15,9 @@ export function SmallCenteredContainer(props: ComponentProps<'div'>) {
1315

1416
export function BorderedBox(props: ComponentProps<'div'>) {
1517
return (
16-
<div {...props} className={clsx(props?.className, 'mb-2 border border-dashed border-secondary-400 px-4 py-8')} />
18+
<div
19+
{...props}
20+
className={clsx(props?.className, 'mb-2 border border-dashed border-secondary-400 px-4 pb-16 pt-4')}
21+
/>
1722
)
1823
}

‎app/(page)/music/page.mdx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,9 @@ no matter how bad it sounds to anyone listening.
1616

1717
The name? Its just the word "water" in Icelandic (vökva). For whatever reason, I was thinking of ice and water and thus water in *Ice*landic.
1818

19-
<h2 style={{ color: `var(--color-primary-600)` }}>vokva: the works</h2>
19+
## vokva: the works
2020
<BorderedBox id='latest'>
21-
<Head3 id='mm'>💿 lost in acid ✨</Head3>
21+
<Head3 id='lia'>💿 lost in acid ✨</Head3>
2222
<SmallCenteredContainer>
2323
![Cover art for "lost in acid"](/images/prio+lost-in-acid_1200x1200.webp)
2424
<LinkFarm

‎components/Header/index.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,7 @@ const Header = () => {
9595
<style>{`
9696
#header {
9797
--scroll: ${scrollPosition};
98+
--tw-bg-opacity: 60%;
9899
}
99100
`}</style>
100101
<div

‎lib/heading.tsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import type { ComponentProps } from 'react'
2+
3+
export function makeHeadingLinky<T extends 'h1' | 'h2' | 'h3' | 'h4' | 'h5'>(level: T): React.FC<ComponentProps<T>> {
4+
const Comp: string = level
5+
return function HeadingX({ children, ...props }) {
6+
const id = props.id || children?.toString().toLowerCase().replace(/\W/g, ' ').trim().replaceAll(' ', '-')
7+
const render = <Comp {...props}>{children}</Comp>
8+
return (
9+
<a id={id} href={`#${id}`} className='no-underline'>
10+
{render}
11+
</a>
12+
)
13+
}
14+
}

lib/Posts.tsx renamed to lib/posts.tsx

File renamed without changes.

‎mdx-components.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import Image from 'next/image'
33
import type { MDXComponents } from 'mdx/types'
44
import type { ComponentProps } from 'react'
55

6+
import { makeHeadingLinky } from 'lib/heading'
7+
68
// This file is required to use @next/mdx in the `app` directory.
79
export function useMDXComponents(components: MDXComponents): MDXComponents {
810
return {
@@ -40,6 +42,9 @@ export function useMDXComponents(components: MDXComponents): MDXComponents {
4042
// eslint-disable-next-line jsx-a11y/alt-text, @next/next/no-img-element
4143
return <img {...props} />
4244
},
43-
style: props => <style {...props} suppressHydrationWarning />
45+
style: props => <style {...props} suppressHydrationWarning />,
46+
h1: makeHeadingLinky('h1'),
47+
h2: makeHeadingLinky('h2'),
48+
h3: makeHeadingLinky('h3')
4449
}
4550
}

‎package.json‎

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,6 @@
2121
"@mdx-js/node-loader": "^3.0.1",
2222
"@mdx-js/react": "^3.0.1",
2323
"@next/mdx": "^14.2.3",
24-
"@reduxjs/toolkit": "2.2.3",
2524
"@tailwindcss/typography": "0.5.13",
2625
"@types/ramda": "^0.30.0",
2726
"clsx": "2.1.1",
@@ -31,7 +30,7 @@
3130
"next": "14.2.3",
3231
"next-sitemap": "4.2.3",
3332
"prismjs": "^1.29.0",
34-
"ramda": "^0.30.0",
33+
"ramda": "^0.30.1",
3534
"react": "18.3.1",
3635
"react-dom": "18.3.1",
3736
"react-redux": "^9.1.2",
@@ -41,18 +40,18 @@
4140
"remark-gfm": "^4.0.0",
4241
"remark-math": "^6.0.0",
4342
"schema-dts": "1.1.2",
44-
"sharp": "^0.33.3",
43+
"sharp": "^0.33.4",
4544
"unified": "^11.0.4",
46-
"wasm-vips": "0.0.8",
45+
"wasm-vips": "0.0.9",
4746
"yargs": "17.7.2"
4847
},
4948
"devDependencies": {
5049
"@next/env": "^14.2.3",
51-
"@types/node": "^20.12.8",
52-
"@types/react": "^18.3.1",
50+
"@types/node": "^20.14.2",
51+
"@types/react": "^18.3.3",
5352
"@types/react-dom": "^18.3.0",
54-
"@typescript-eslint/eslint-plugin": "^7.8.0",
55-
"@typescript-eslint/parser": "^7.8.0",
53+
"@typescript-eslint/eslint-plugin": "^7.12.0",
54+
"@typescript-eslint/parser": "^7.12.0",
5655
"autoprefixer": "^10.4.19",
5756
"eslint": "^8.57.0",
5857
"eslint-config-next": "^14.2.3",
@@ -62,14 +61,14 @@
6261
"eslint-plugin-jsx-a11y": "^6.8.0",
6362
"eslint-plugin-node": "^11.1.0",
6463
"eslint-plugin-prettier": "^5.1.3",
65-
"eslint-plugin-promise": "^6.1.1",
66-
"eslint-plugin-react": "^7.34.1",
64+
"eslint-plugin-promise": "^6.2.0",
65+
"eslint-plugin-react": "^7.34.2",
6766
"image-size": "^1.1.1",
6867
"npm-run-all": "4.1.5",
6968
"postcss": "^8.4.38",
70-
"prettier": "^3.2.5",
71-
"prettier-plugin-tailwindcss": "^0.5.14",
72-
"tailwindcss": "^3.4.3",
69+
"prettier": "^3.3.1",
70+
"prettier-plugin-tailwindcss": "^0.6.2",
71+
"tailwindcss": "^3.4.4",
7372
"ts-node": "^10.9.2",
7473
"types-ramda": "^0.30.0",
7574
"typescript": "^5.4.5"

‎public/sitemap-0.xml‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
<?xml version="1.0" encoding="UTF-8"?>
22
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
3-
<url><loc>https://mildlyboring.com/about</loc><lastmod>2024-05-03T19:02:23.604Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
4-
<url><loc>https://mildlyboring.com/music</loc><lastmod>2024-05-03T19:02:23.605Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
5-
<url><loc>https://mildlyboring.com/posts/fp-functions</loc><lastmod>2024-05-03T19:02:23.605Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
6-
<url><loc>https://mildlyboring.com/posts/hello-blog</loc><lastmod>2024-05-03T19:02:23.605Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
7-
<url><loc>https://mildlyboring.com/posts/fp-higher-order-functions</loc><lastmod>2024-05-03T19:02:23.605Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
8-
<url><loc>https://mildlyboring.com/posts/fp-the-introduction</loc><lastmod>2024-05-03T19:02:23.605Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
9-
<url><loc>https://mildlyboring.com/posts/fp-trial-tribulations</loc><lastmod>2024-05-03T19:02:23.605Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
10-
<url><loc>https://mildlyboring.com</loc><lastmod>2024-05-03T19:02:23.605Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
11-
<url><loc>https://mildlyboring.com/contact</loc><lastmod>2024-05-03T19:02:23.605Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
3+
<url><loc>https://mildlyboring.com</loc><lastmod>2024-06-08T16:42:07.625Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
4+
<url><loc>https://mildlyboring.com/about</loc><lastmod>2024-06-08T16:42:07.625Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
5+
<url><loc>https://mildlyboring.com/posts/fp-functions</loc><lastmod>2024-06-08T16:42:07.625Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
6+
<url><loc>https://mildlyboring.com/posts/fp-trial-tribulations</loc><lastmod>2024-06-08T16:42:07.625Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
7+
<url><loc>https://mildlyboring.com/contact</loc><lastmod>2024-06-08T16:42:07.625Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
8+
<url><loc>https://mildlyboring.com/posts/hello-blog</loc><lastmod>2024-06-08T16:42:07.625Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
9+
<url><loc>https://mildlyboring.com/posts/fp-higher-order-functions</loc><lastmod>2024-06-08T16:42:07.625Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
10+
<url><loc>https://mildlyboring.com/music</loc><lastmod>2024-06-08T16:42:07.625Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
11+
<url><loc>https://mildlyboring.com/posts/fp-the-introduction</loc><lastmod>2024-06-08T16:42:07.625Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
1212
</urlset>

0 commit comments

Comments
 (0)