mirror of
https://github.com/Llewellynvdm/conky.git
synced 2024-11-19 11:35:12 +00:00
Bump web deps, improve mdx handling
This commit is contained in:
Brenden Matthews
parent
ee39370a83
commit
90472292b3
7620
web/package-lock.json
generated
7620
web/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -21,50 +21,49 @@
|
||||
"e2e:headless": "start-server-and-test dev http://localhost:3000 \"cypress run --e2e\""
|
||||
},
|
||||
"dependencies": {
|
||||
"@fontsource-variable/fira-code": "^5.0.15",
|
||||
"@fontsource-variable/inter": "^5.0.15",
|
||||
"@fontsource-variable/newsreader": "^5.0.16",
|
||||
"@headlessui/react": "^1.7.17",
|
||||
"@mapbox/rehype-prism": "^0.8.0",
|
||||
"@netlify/plugin-nextjs": "^4.41.1",
|
||||
"@fontsource-variable/fira-code": "^5.0.16",
|
||||
"@fontsource-variable/inter": "^5.0.16",
|
||||
"@fontsource-variable/newsreader": "^5.0.17",
|
||||
"@headlessui/react": "^1.7.18",
|
||||
"@netlify/plugin-nextjs": "^4.41.3",
|
||||
"@tailwindcss/typography": "^0.5.10",
|
||||
"classnames": "^2.3.2",
|
||||
"classnames": "^2.5.1",
|
||||
"colord": "^2.9.3",
|
||||
"fuse.js": "^7.0.0",
|
||||
"gray-matter": "^4.0.3",
|
||||
"inter-ui": "^3.19.3",
|
||||
"next": "^14.0.1",
|
||||
"prismjs": "^1.29.0",
|
||||
"inter-ui": "^4.0.2",
|
||||
"next": "^14.1.0",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-feather": "^2.0.10"
|
||||
"react-feather": "^2.0.10",
|
||||
"rehype-parse": "^9.0.0",
|
||||
"rehype-react": "^8.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/eslint": "^8.44.7",
|
||||
"@types/eslint": "^8.56.3",
|
||||
"@types/js-yaml": "^4.0.9",
|
||||
"@types/mapbox__rehype-prism": "^0.8.1",
|
||||
"@types/node": "^20.9.0",
|
||||
"@types/prismjs": "^1.26.3",
|
||||
"@types/react": "^18.2.37",
|
||||
"@types/react-dom": "^18.2.15",
|
||||
"@typescript-eslint/eslint-plugin": "^6.10.0",
|
||||
"@typescript-eslint/parser": "^6.10.0",
|
||||
"autoprefixer": "^10.4.16",
|
||||
"cypress": "^13.4.0",
|
||||
"eslint": "^8.53.0",
|
||||
"eslint-config-next": "^14.0.1",
|
||||
"eslint-config-prettier": "^9.0.0",
|
||||
"@types/node": "^20.11.20",
|
||||
"@types/react": "^18.2.57",
|
||||
"@types/react-dom": "^18.2.19",
|
||||
"@typescript-eslint/eslint-plugin": "^7.0.2",
|
||||
"@typescript-eslint/parser": "^7.0.2",
|
||||
"autoprefixer": "^10.4.17",
|
||||
"cypress": "^13.6.6",
|
||||
"eslint": "^8.56.0",
|
||||
"eslint-config-next": "^14.1.0",
|
||||
"eslint-config-prettier": "^9.1.0",
|
||||
"eslint-plugin-cypress": "^2.15.1",
|
||||
"eslint-plugin-mdx": "^2.2.0",
|
||||
"eslint-plugin-mdx": "^3.1.5",
|
||||
"js-yaml": "^4.1.0",
|
||||
"netlify-plugin-cypress": "^2.2.1",
|
||||
"next-mdx-remote": "^4.4.1",
|
||||
"next-remote-watch": "2.0.0",
|
||||
"postcss": "^8.4.31",
|
||||
"rehype-stringify": "^9.0.4",
|
||||
"remark-gfm": "^3.0.1",
|
||||
"start-server-and-test": "^2.0.2",
|
||||
"tailwindcss": "^3.3.5",
|
||||
"typescript": "^5.2.2"
|
||||
"postcss": "^8.4.35",
|
||||
"rehype-stringify": "^10.0.0",
|
||||
"remark-gfm": "^4.0.0",
|
||||
"remark-parse": "^11.0.0",
|
||||
"remark-rehype": "^11.1.0",
|
||||
"start-server-and-test": "^2.0.3",
|
||||
"tailwindcss": "^3.4.1",
|
||||
"typescript": "^5.3.3"
|
||||
}
|
||||
}
|
||||
|
||||
@ -5,26 +5,19 @@ import {
|
||||
documentFilePaths,
|
||||
} from '../../utils/mdx-utils'
|
||||
|
||||
import { MDXRemote, MDXRemoteProps } from 'next-mdx-remote'
|
||||
import Head from 'next/head'
|
||||
import Layout from '../../components/Layout'
|
||||
import SEO from '../../components/SEO'
|
||||
import { GetStaticProps } from 'next'
|
||||
import { getSearchIndex, SearchIndex } from '../../utils/search'
|
||||
import Link from 'next/link'
|
||||
import { MDXComponents } from 'mdx/types'
|
||||
import { unified } from 'unified'
|
||||
import rehypeReact from 'rehype-react'
|
||||
import * as prod from 'react/jsx-runtime'
|
||||
import rehypeParse from 'rehype-parse'
|
||||
import { createElement, Fragment, useEffect, useState } from 'react'
|
||||
|
||||
// Custom components/renderers to pass to MDX.
|
||||
// Since the MDX files aren't loaded by webpack, they have no knowledge of how
|
||||
// to handle import statements. Instead, you must include components in scope
|
||||
// here.
|
||||
const components = {
|
||||
a: Link,
|
||||
// It also works with dynamically-imported components, which is especially
|
||||
// useful for conditionally loading components for certain routes.
|
||||
// See the notes in README.md for more details.
|
||||
Head,
|
||||
}
|
||||
// @ts-expect-error: the react types are missing.
|
||||
const production = { Fragment: prod.Fragment, jsx: prod.jsx, jsxs: prod.jsxs }
|
||||
|
||||
interface FrontMatter {
|
||||
title: string
|
||||
@ -32,7 +25,7 @@ interface FrontMatter {
|
||||
}
|
||||
|
||||
interface DocumentPageProps {
|
||||
source: MDXRemoteProps
|
||||
source: string
|
||||
frontMatter: FrontMatter
|
||||
searchIndex: SearchIndex
|
||||
}
|
||||
@ -42,6 +35,23 @@ export default function DocumentPage({
|
||||
frontMatter,
|
||||
searchIndex,
|
||||
}: DocumentPageProps) {
|
||||
const [children, setChildren] = useState(createElement(Fragment))
|
||||
|
||||
useEffect(
|
||||
function () {
|
||||
;(async function () {
|
||||
const file = await unified()
|
||||
.use(rehypeParse, { fragment: true })
|
||||
// @ts-expect-error: the react types are missing.
|
||||
.use(rehypeReact, { ...production, components: { a: Link } })
|
||||
.process(source)
|
||||
|
||||
setChildren(file.result)
|
||||
})()
|
||||
},
|
||||
[source]
|
||||
)
|
||||
|
||||
return (
|
||||
<Layout searchIndex={searchIndex}>
|
||||
<SEO
|
||||
@ -58,9 +68,7 @@ export default function DocumentPage({
|
||||
)}
|
||||
</header>
|
||||
<main>
|
||||
<article className="prose dark:prose-invert">
|
||||
<MDXRemote {...source} components={components as MDXComponents} />
|
||||
</article>
|
||||
<article className="prose dark:prose-invert">{children}</article>
|
||||
</main>
|
||||
</article>
|
||||
</Layout>
|
||||
@ -69,7 +77,7 @@ export default function DocumentPage({
|
||||
|
||||
export const getStaticProps: GetStaticProps = async ({ params }) => {
|
||||
if (params) {
|
||||
const { mdxSource, data } = await getDocumentBySlug(params.slug as string)
|
||||
const { source, data } = await getDocumentBySlug(params.slug as string)
|
||||
const prevDocument = getPreviousDocumentBySlug(params.slug as string)
|
||||
const nextDocument = getNextDocumentBySlug(params.slug as string)
|
||||
const searchIndex = getSearchIndex()
|
||||
@ -77,7 +85,7 @@ export const getStaticProps: GetStaticProps = async ({ params }) => {
|
||||
return {
|
||||
props: {
|
||||
searchIndex,
|
||||
source: mdxSource,
|
||||
source,
|
||||
frontMatter: data,
|
||||
prevDocument,
|
||||
nextDocument,
|
||||
|
||||
@ -1,9 +1,11 @@
|
||||
import fs from 'fs'
|
||||
import path from 'path'
|
||||
import matter from 'gray-matter'
|
||||
import { serialize } from 'next-mdx-remote/serialize'
|
||||
import rehypePrism from '@mapbox/rehype-prism'
|
||||
import { unified } from 'unified'
|
||||
import remarkGfm from 'remark-gfm'
|
||||
import remarkParse from 'remark-parse'
|
||||
import remarkRehype from 'remark-rehype'
|
||||
import rehypeStringify from 'rehype-stringify'
|
||||
|
||||
// DOCUMENTS_PATH is useful when you want to get the path to a specific file
|
||||
export const DOCUMENTS_PATH = path.join(process.cwd(), 'documents')
|
||||
@ -16,7 +18,7 @@ export const documentFilePaths = fs
|
||||
|
||||
export interface Document {
|
||||
content: string
|
||||
data: any
|
||||
data: object
|
||||
filePath: string
|
||||
}
|
||||
|
||||
@ -51,16 +53,15 @@ export const getDocumentBySlug = async (slug: string) => {
|
||||
|
||||
const { content, data } = matter(source)
|
||||
|
||||
const mdxSource = await serialize(content, {
|
||||
// Optionally pass remark/rehype plugins
|
||||
mdxOptions: {
|
||||
remarkPlugins: [remarkGfm],
|
||||
rehypePlugins: [rehypePrism],
|
||||
},
|
||||
scope: data,
|
||||
})
|
||||
const result = await unified()
|
||||
.use(remarkParse)
|
||||
.use(remarkGfm)
|
||||
.use(remarkRehype)
|
||||
// .use(rehypePrism)
|
||||
.use(rehypeStringify)
|
||||
.process(content)
|
||||
|
||||
return { mdxSource, data, documentFilePath }
|
||||
return { source: result.value, data, documentFilePath }
|
||||
}
|
||||
|
||||
export const getNextDocumentBySlug = (slug: string) => {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user