diff --git a/src/app/blog/[slug]/page.jsx b/src/app/blog/[slug]/page.jsx index 93d870e..fc9da7f 100644 --- a/src/app/blog/[slug]/page.jsx +++ b/src/app/blog/[slug]/page.jsx @@ -1,4 +1,6 @@ +// [slug]/page.jsx import { getBlogBySlug, getAllBlogSlugs } from "@/lib/mdx"; +import MdxProvider from "@/components/prism/mdx-provider"; export async function generateStaticParams() { const slugs = await getAllBlogSlugs(); @@ -9,14 +11,18 @@ export async function generateStaticParams() { export default async function BlogPage({ params }) { const blog = await getBlogBySlug(params.slug); + return ( -
+

{blog.frontmatter.title}

{blog.frontmatter.author}

{blog.frontmatter.date}

-
{blog.content}
+ +
{blog.content}
+
); } + diff --git a/src/app/blog/posts/corebooting-my-thinkpad.mdx b/src/app/blog/posts/corebooting-my-thinkpad.mdx index fd17e6a..f5cb32e 100644 --- a/src/app/blog/posts/corebooting-my-thinkpad.mdx +++ b/src/app/blog/posts/corebooting-my-thinkpad.mdx @@ -6,6 +6,12 @@ description: "This is a sample MDX file." tags: ["coreboot", "t440p", "dgpu"] --- + +```python +import random +print(random.randint(1, 100)) +``` + # Heading 1 ## Heading 2 diff --git a/src/app/layout.js b/src/app/layout.js index 73bcfbe..eb3b0a5 100644 --- a/src/app/layout.js +++ b/src/app/layout.js @@ -1,9 +1,11 @@ // Imports import "@/style/globals.css"; +import "@/style/prism-theme.css"; import Theme from "@/app/theme"; import Header from "@/components/header"; import Footer from "@/components/footer"; import Container from "@/components/ui/container"; +import Head from 'next/head'; // Metadata export const metadata = { @@ -15,6 +17,9 @@ export const metadata = { export default function Layout({children}) { return ( + + + { + const language = className?.replace(/language-/, '') || ''; + + useEffect(() => { + Prism.highlightAll(); + }, []); + + return ( + 
+      {children}
+
+ ); +}; + +const components = { + pre: CodeBlock, + code: CodeBlock, +}; + +const MdxProvider = ({ children }) => { + return {children}; +}; + +export default MdxProvider; + diff --git a/src/components/prism/prism-setup.js b/src/components/prism/prism-setup.js new file mode 100644 index 0000000..5a595e5 --- /dev/null +++ b/src/components/prism/prism-setup.js @@ -0,0 +1,10 @@ +// prism-setup.js +import Prism from 'prismjs'; +import 'prismjs/components/prism-python'; // Add more languages as needed + +// Add more languages as needed, e.g.: +// import 'prismjs/components/prism-python'; +// import 'prismjs/components/prism-java'; + +export default Prism; + diff --git a/src/style/prism-theme.css b/src/style/prism-theme.css new file mode 100644 index 0000000..b570451 --- /dev/null +++ b/src/style/prism-theme.css @@ -0,0 +1,143 @@ +/** + * Gruvbox dark theme + * + * Adapted from a theme based on: + * Vim Gruvbox dark Theme (https://github.com/morhetz/gruvbox) + * + * @author Azat S. + * @version 1.0 + */ + +code[class*="language-"], +pre[class*="language-"] { + color: #ebdbb2; /* fg1 / fg */ + font-family: Consolas, Monaco, "Andale Mono", monospace; + direction: ltr; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + line-height: 1.5; + + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; +} + +pre[class*="language-"]::-moz-selection, +pre[class*="language-"] ::-moz-selection, +code[class*="language-"]::-moz-selection, +code[class*="language-"] ::-moz-selection { + color: #fbf1c7; /* fg0 */ + background: #7c6f64; /* bg4 */ +} + +pre[class*="language-"]::selection, +pre[class*="language-"] ::selection, +code[class*="language-"]::selection, +code[class*="language-"] ::selection { + color: #fbf1c7; /* fg0 */ + background: #7c6f64; /* bg4 */ +} + +/* Code blocks */ +pre[class*="language-"] { + padding: 1em; + margin: 0.5em 0; + overflow: auto; +} + +:not(pre) > code[class*="language-"], +pre[class*="language-"] { + background: #1d2021; /* bg0_h */ +} + +/* Inline code */ +:not(pre) > code[class*="language-"] { + padding: 0.1em; + border-radius: 0.3em; +} + +.token.comment, +.token.prolog, +.token.cdata { + color: #a89984; /* fg4 / gray1 */ +} + +.token.delimiter, +.token.boolean, +.token.keyword, +.token.selector, +.token.important, +.token.atrule { + color: #fb4934; /* red2 */ +} + +.token.operator, +.token.punctuation, +.token.attr-name { + color: #a89984; /* fg4 / gray1 */ +} + +.token.tag, +.token.tag .punctuation, +.token.doctype, +.token.builtin { + color: #fabd2f; /* yellow2 */ +} + +.token.entity, +.token.number, +.token.symbol { + color: #d3869b; /* purple2 */ +} + +.token.property, +.token.constant, +.token.variable { + color: #fb4934; /* red2 */ +} + +.token.string, +.token.char { + color: #b8bb26; /* green2 */ +} + +.token.attr-value, +.token.attr-value .punctuation { + color: #a89984; /* fg4 / gray1 */ +} + +.token.url { + color: #b8bb26; /* green2 */ + text-decoration: underline; +} + +.token.function { + color: #fabd2f; /* yellow2 */ +} + +.token.regex { + background: #b8bb26; /* green2 */ +} + +.token.bold { + font-weight: bold; +} + +.token.italic { + font-style: italic; +} + +.token.inserted { + background: #a89984; /* fg4 / gray1 */ +} + +.token.deleted { + background: #fb4934; /* red2 */ +}