diff --git a/app/layout.tsx b/app/layout.tsx index c309f5f..1075033 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -7,9 +7,8 @@ import RUAThemeProvider from 'components/pages/theme-provider'; import fonts from 'lib/fonts'; import { Metadata } from 'next'; import 'styles/globals.css'; -import 'styles/prism-one-dark.css'; -import 'styles/prism-one-light.css'; import 'styles/rua.css'; +import '@catppuccin/highlightjs/sass/catppuccin.variables.scss'; export const metadata: Metadata = { title: 'RUA', @@ -41,7 +40,7 @@ export default function RootLayout({ crossOrigin="" /> - +
diff --git a/app/p/[slug]/page.tsx b/app/p/[slug]/page.tsx index 419139a..1d01411 100644 --- a/app/p/[slug]/page.tsx +++ b/app/p/[slug]/page.tsx @@ -1,4 +1,3 @@ -import rehypePrism from '@mapbox/rehype-prism'; import clsx from 'clsx'; import components from 'components/mdx/components'; import data from 'content/mdx-data'; @@ -9,6 +8,7 @@ import dynamic from 'next/dynamic'; import { notFound } from 'next/navigation'; import rehypeSlug from 'rehype-slug'; import remarkGfm from 'remark-gfm'; +import rehypeHighlight from 'rehype-highlight'; import { Post } from 'types'; const PostToc = dynamic(() => import('components/post/post-toc')); @@ -46,7 +46,7 @@ const Page = async ({ mdxOptions: { remarkPlugins: [remarkGfm], rehypePlugins: [ - [rehypePrism, { alias: { vue: 'xml' }, ignoreMissing: true }], + [rehypeHighlight, { alias: { vue: 'xml' }, ignoreMissing: true }], rehypeSlug, ], }, @@ -70,7 +70,6 @@ const Page = async ({
{mdxSource.content} -
diff --git a/package.json b/package.json index db8aab2..d317745 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "prepare": "husky install" }, "dependencies": { + "@catppuccin/palette": "^0.2.0", "@codesandbox/sandpack-react": "^2.9.0", "@docsearch/css": "^3.5.2", "@docsearch/react": "^3.5.2", @@ -34,6 +35,7 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "react-icons": "^4.11.0", + "rehype-highlight": "^6.0.0", "rehype-react": "^7.2.0", "rehype-slug": "^5.1.0", "remark-frontmatter": "^4.0.1", @@ -46,6 +48,8 @@ "zustand": "^4.4.6" }, "devDependencies": { + "@catppuccin/highlightjs": "^0.1.3", + "@catppuccin/tailwindcss": "^0.1.6", "@next/bundle-analyzer": "^14.0.1", "@testing-library/jest-dom": "^6.1.4", "@testing-library/react": "^14.0.0", @@ -69,6 +73,7 @@ "postcss": "^8.4.31", "prettier": "^3.0.3", "raw-loader": "^4.0.2", + "sass": "^1.69.5", "tailwindcss": "^3.3.5", "typescript": "5.2.2", "url-loader": "^4.1.1" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0b0bc94..e2ae962 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -5,6 +5,9 @@ settings: excludeLinksFromLockfile: false dependencies: + '@catppuccin/palette': + specifier: ^0.2.0 + version: 0.2.0 '@codesandbox/sandpack-react': specifier: ^2.9.0 version: 2.9.0(@lezer/common@1.0.4)(react-dom@18.2.0)(react@18.2.0) @@ -40,7 +43,7 @@ dependencies: version: 1.11.10 next: specifier: 14.0.1 - version: 14.0.1(@babel/core@7.22.17)(react-dom@18.2.0)(react@18.2.0) + version: 14.0.1(@babel/core@7.22.17)(react-dom@18.2.0)(react@18.2.0)(sass@1.69.5) next-mdx-remote: specifier: ^4.4.1 version: 4.4.1(react-dom@18.2.0)(react@18.2.0) @@ -59,6 +62,9 @@ dependencies: react-icons: specifier: ^4.11.0 version: 4.11.0(react@18.2.0) + rehype-highlight: + specifier: ^6.0.0 + version: 6.0.0 rehype-react: specifier: ^7.2.0 version: 7.2.0(@types/react@18.2.36) @@ -91,6 +97,12 @@ dependencies: version: 4.4.6(@types/react@18.2.36)(react@18.2.0) devDependencies: + '@catppuccin/highlightjs': + specifier: ^0.1.3 + version: 0.1.3 + '@catppuccin/tailwindcss': + specifier: ^0.1.6 + version: 0.1.6(tailwindcss@3.3.5) '@next/bundle-analyzer': specifier: ^14.0.1 version: 14.0.1 @@ -160,6 +172,9 @@ devDependencies: raw-loader: specifier: ^4.0.2 version: 4.0.2(webpack@5.88.2) + sass: + specifier: ^1.69.5 + version: 1.69.5 tailwindcss: specifier: ^3.3.5 version: 3.3.5 @@ -641,6 +656,22 @@ packages: resolution: {integrity: sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==} dev: true + /@catppuccin/highlightjs@0.1.3: + resolution: {integrity: sha512-NpC67ktdwR2nvGYb18uuMU8QDrwL+NUZJ3hMqhyRmVLAr9xJcuFOcDluJAKE3V13xD95aHTaIvyEW6PiWlaQwA==} + dev: true + + /@catppuccin/palette@0.2.0: + resolution: {integrity: sha512-PoAMQMEbL8fBEO80eusB+XQg+1i2kxQHw6COwBRC4bVWxWuRroZjm3K6bOdqPHNHKikDIV7wLi9hSG4NoD1FEQ==} + dev: false + + /@catppuccin/tailwindcss@0.1.6(tailwindcss@3.3.5): + resolution: {integrity: sha512-V+Y0AwZ5SSyvOVAcDl7Ng30xy+m82OKnEJ+9+kcZZ7lRyXuZrAb2GScdq9XR3v+ggt8qiZ/G4TvaC9cJ88AAXA==} + peerDependencies: + tailwindcss: '>=3.0.0' + dependencies: + tailwindcss: 3.3.5 + dev: true + /@codemirror/autocomplete@6.9.0(@codemirror/language@6.9.0)(@codemirror/state@6.2.1)(@codemirror/view@6.18.1)(@lezer/common@1.0.4): resolution: {integrity: sha512-Fbwm0V/Wn3BkEJZRhr0hi5BhCo5a7eBL6LYaliPjOSwCyfOpnjXY59HruSxOUNV+1OYer0Tgx1zRNQttjXyDog==} peerDependencies: @@ -2882,7 +2913,6 @@ packages: dependencies: normalize-path: 3.0.0 picomatch: 2.3.1 - dev: true /arg@5.0.2: resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==} @@ -3152,7 +3182,6 @@ packages: /binary-extensions@2.2.0: resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==} engines: {node: '>=8'} - dev: true /bl@4.1.0: resolution: {integrity: sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==} @@ -3178,7 +3207,6 @@ packages: engines: {node: '>=8'} dependencies: fill-range: 7.0.1 - dev: true /browserslist@4.21.10: resolution: {integrity: sha512-bipEBdZfVH5/pwrvqc+Ub0kUPVfGUhlKxbvfD+z1BDnPEO/X98ruXGA1WP5ASpAFKan7Qr6j736IacbZQuAlKQ==} @@ -3345,7 +3373,6 @@ packages: readdirp: 3.6.0 optionalDependencies: fsevents: 2.3.3 - dev: true /chownr@1.1.4: resolution: {integrity: sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==} @@ -4474,7 +4501,6 @@ packages: engines: {node: '>=8'} dependencies: to-regex-range: 5.0.1 - dev: true /find-up@4.1.0: resolution: {integrity: sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==} @@ -4547,7 +4573,6 @@ packages: engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0} os: [darwin] requiresBuild: true - dev: true optional: true /function-bind@1.1.1: @@ -4634,7 +4659,6 @@ packages: engines: {node: '>= 6'} dependencies: is-glob: 4.0.3 - dev: true /glob-parent@6.0.2: resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==} @@ -4807,6 +4831,13 @@ packages: '@types/hast': 2.3.5 dev: false + /hast-util-is-element@2.1.3: + resolution: {integrity: sha512-O1bKah6mhgEq2WtVMk+Ta5K7pPMqsBBlmzysLdcwKVrqzZQ0CHqUPiIVspNhAG1rvxpvJjtGee17XfauZYKqVA==} + dependencies: + '@types/hast': 2.3.5 + '@types/unist': 2.0.8 + dev: false + /hast-util-parse-selector@2.2.5: resolution: {integrity: sha512-7j6mrk/qqkSehsM92wQjdIgWM2/BW61u/53G6xmC8i1OmEdKLHbk419QKQUjz6LglWsfqoiHmyMRkP1BGjecNQ==} dev: false @@ -4843,6 +4874,15 @@ packages: '@types/hast': 2.3.5 dev: false + /hast-util-to-text@3.1.2: + resolution: {integrity: sha512-tcllLfp23dJJ+ju5wCCZHVpzsQQ43+moJbqVX3jNWPB7z/KFC4FyZD6R7y94cHL6MQ33YtMZL8Z0aIXXI4XFTw==} + dependencies: + '@types/hast': 2.3.5 + '@types/unist': 2.0.8 + hast-util-is-element: 2.1.3 + unist-util-find-after: 4.0.1 + dev: false + /hast-util-whitespace@2.0.1: resolution: {integrity: sha512-nAxA0v8+vXSBDt3AnRUNjyRIQ0rD+ntpbAp4LnPkumc5M9yUbSMa4XDU9Q6etY4f1Wp4bNgvc1yjiZtsTTrSng==} dev: false @@ -4857,6 +4897,11 @@ packages: space-separated-tokens: 1.1.5 dev: false + /highlight.js@11.8.0: + resolution: {integrity: sha512-MedQhoqVdr0U6SSnWPzfiadUcDHfN/Wzq25AkXiQv9oiOO/sG0S7XkvpFIqWBl9Yq1UYyYOOVORs5UW2XlPyzg==} + engines: {node: '>=12.0.0'} + dev: false + /html-encoding-sniffer@3.0.0: resolution: {integrity: sha512-oWv4T4yJ52iKrufjnyZPkrN0CH3QnrUqdB6In1g5Fe1mia8GmF36gnfNySxoZtxD5+NmYw1EElVXiBk93UeskA==} engines: {node: '>=12'} @@ -4916,6 +4961,9 @@ packages: engines: {node: '>= 4'} dev: true + /immutable@4.3.4: + resolution: {integrity: sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA==} + /import-fresh@3.3.0: resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==} engines: {node: '>=6'} @@ -5037,7 +5085,6 @@ packages: engines: {node: '>=8'} dependencies: binary-extensions: 2.2.0 - dev: true /is-boolean-object@1.1.2: resolution: {integrity: sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==} @@ -5093,7 +5140,6 @@ packages: /is-extglob@2.1.1: resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==} engines: {node: '>=0.10.0'} - dev: true /is-finalizationregistry@1.0.2: resolution: {integrity: sha512-0by5vtUJs8iFQb5TYUHHPudOR+qXYIMKtiUzvLIZITZUjknFmziyBJuLhVRc+Ds0dREFlskDNJKYIdIzu/9pfw==} @@ -5123,7 +5169,6 @@ packages: engines: {node: '>=0.10.0'} dependencies: is-extglob: 2.1.1 - dev: true /is-hexadecimal@1.0.4: resolution: {integrity: sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw==} @@ -5152,7 +5197,6 @@ packages: /is-number@7.0.0: resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==} engines: {node: '>=0.12.0'} - dev: true /is-path-inside@3.0.3: resolution: {integrity: sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==} @@ -6100,6 +6144,14 @@ packages: dependencies: js-tokens: 4.0.0 + /lowlight@2.9.0: + resolution: {integrity: sha512-OpcaUTCLmHuVuBcyNckKfH5B0oA4JUavb/M/8n9iAvanJYNQkrVm4pvyX0SUaqkBG4dnWHKt7p50B3ngAG2Rfw==} + dependencies: + '@types/hast': 2.3.5 + fault: 2.0.1 + highlight.js: 11.8.0 + dev: false + /lru-cache@10.0.1: resolution: {integrity: sha512-IJ4uwUTi2qCccrioU6g9g/5rvvVl13bsdczUUcqbciD9iLr095yj8DQKdObriEvuNSx325N1rV1O0sJFszx75g==} engines: {node: 14 || >=16.14} @@ -6839,7 +6891,7 @@ packages: react: '*' react-dom: '*' dependencies: - next: 14.0.1(@babel/core@7.22.17)(react-dom@18.2.0)(react@18.2.0) + next: 14.0.1(@babel/core@7.22.17)(react-dom@18.2.0)(react@18.2.0)(sass@1.69.5) react: 18.2.0 react-dom: 18.2.0(react@18.2.0) dev: false @@ -6848,7 +6900,7 @@ packages: resolution: {integrity: sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ==} dev: false - /next@14.0.1(@babel/core@7.22.17)(react-dom@18.2.0)(react@18.2.0): + /next@14.0.1(@babel/core@7.22.17)(react-dom@18.2.0)(react@18.2.0)(sass@1.69.5): resolution: {integrity: sha512-s4YaLpE4b0gmb3ggtmpmV+wt+lPRuGtANzojMQ2+gmBpgX9w5fTbjsy6dXByBuENsdCX5pukZH/GxdFgO62+pA==} engines: {node: '>=18.17.0'} hasBin: true @@ -6870,6 +6922,7 @@ packages: postcss: 8.4.31 react: 18.2.0 react-dom: 18.2.0(react@18.2.0) + sass: 1.69.5 styled-jsx: 5.1.1(@babel/core@7.22.17)(react@18.2.0) watchpack: 2.4.0 optionalDependencies: @@ -6908,7 +6961,6 @@ packages: /normalize-path@3.0.0: resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==} engines: {node: '>=0.10.0'} - dev: true /normalize-range@0.1.2: resolution: {integrity: sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==} @@ -7171,7 +7223,6 @@ packages: /picomatch@2.3.1: resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==} engines: {node: '>=8.6'} - dev: true /pify@2.3.0: resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==} @@ -7516,7 +7567,6 @@ packages: engines: {node: '>=8.10.0'} dependencies: picomatch: 2.3.1 - dev: true /redent@3.0.0: resolution: {integrity: sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==} @@ -7558,6 +7608,16 @@ packages: set-function-name: 2.0.0 dev: true + /rehype-highlight@6.0.0: + resolution: {integrity: sha512-q7UtlFicLhetp7K48ZgZiJgchYscMma7XjzX7t23bqEJF8m6/s+viXQEe4oHjrATTIZpX7RG8CKD7BlNZoh9gw==} + dependencies: + '@types/hast': 2.3.5 + hast-util-to-text: 3.1.2 + lowlight: 2.9.0 + unified: 10.1.2 + unist-util-visit: 4.1.2 + dev: false + /rehype-react@7.2.0(@types/react@18.2.36): resolution: {integrity: sha512-MHYyCHka+3TtzBMKtcuvVOBAbI1HrfoYA+XH9m7/rlrQQATCPwtJnPdkxKKcIGF8vc9mxqQja9r9f+FHItQeWg==} peerDependencies: @@ -7739,6 +7799,15 @@ packages: resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==} dev: true + /sass@1.69.5: + resolution: {integrity: sha512-qg2+UCJibLr2LCVOt3OlPhr/dqVHWOa9XtZf2OjbLs/T4VPSJ00udtgJxH3neXZm+QqX8B+3cU7RaLqp1iVfcQ==} + engines: {node: '>=14.0.0'} + hasBin: true + dependencies: + chokidar: 3.5.3 + immutable: 4.3.4 + source-map-js: 1.0.2 + /saxes@6.0.0: resolution: {integrity: sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==} engines: {node: '>=v12.22.7'} @@ -8344,7 +8413,6 @@ packages: engines: {node: '>=8.0'} dependencies: is-number: 7.0.0 - dev: true /totalist@1.1.0: resolution: {integrity: sha512-gduQwd1rOdDMGxFG1gEvhV88Oirdo2p+KjoYFU7k2g+i7n6AFFbDQ5kMPUsW0pNbfQsB/cwXvT1i4Bue0s9g5g==} @@ -8529,6 +8597,13 @@ packages: vfile: 5.3.7 dev: false + /unist-util-find-after@4.0.1: + resolution: {integrity: sha512-QO/PuPMm2ERxC6vFXEPtmAutOopy5PknD+Oq64gGwxKtk4xwo9Z97t9Av1obPmGU0IyTa6EKYUfTrK2QJS3Ozw==} + dependencies: + '@types/unist': 2.0.8 + unist-util-is: 5.2.1 + dev: false + /unist-util-generated@2.0.1: resolution: {integrity: sha512-qF72kLmPxAw0oN2fwpWIqbXAVyEqUzDHMsbtPvOudIlUzXYFIeQIuxXQCRCFh22B7cixvU0MG7m3MW8FTq/S+A==} dev: false diff --git a/tailwind.config.js b/tailwind.config.js index a2cca56..6a0aee2 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,5 +1,6 @@ module.exports = { darkMode: 'class', + plugins: [require('@catppuccin/tailwindcss')], content: [ './app/**/*.{js,ts,jsx,tsx,md,mdx}', './pages/**/*.{js,ts,jsx,tsx,md,mdx}', @@ -44,5 +45,4 @@ module.exports = { }, }, }, - plugins: [], };