diff --git a/src/app/blog/[slug]/page.jsx b/src/app/blog/[slug]/page.jsx index fc9da7f..a6b49df 100644 --- a/src/app/blog/[slug]/page.jsx +++ b/src/app/blog/[slug]/page.jsx @@ -1,6 +1,4 @@ -// [slug]/page.jsx import { getBlogBySlug, getAllBlogSlugs } from "@/lib/mdx"; -import MdxProvider from "@/components/prism/mdx-provider"; export async function generateStaticParams() { const slugs = await getAllBlogSlugs(); @@ -11,18 +9,12 @@ 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.frontmatter.title}

+

{blog.frontmatter.author}

+

{blog.frontmatter.date}

+
{blog.content}
+
); } - diff --git a/src/app/layout.js b/src/app/layout.js index eb3b0a5..73bcfbe 100644 --- a/src/app/layout.js +++ b/src/app/layout.js @@ -1,11 +1,9 @@ // 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 = { @@ -17,9 +15,6 @@ export const metadata = { export default function Layout({children}) { return ( - - -
{Items.map((item) => ( diff --git a/src/components/header/default.jsx b/src/components/header/default.jsx index c4a4955..2023957 100644 --- a/src/components/header/default.jsx +++ b/src/components/header/default.jsx @@ -22,6 +22,7 @@ function DefaultHeader() { lg:px-6 md:px-5 sm:px-4 lg:py-1.5 md:py-1.5 lg:text-4xl md:text-3xl font-bold justify-center + bg-light-background dark:bg-dark-background ">
{Links.map((link) => ( diff --git a/src/components/prism/mdx-provider.js b/src/components/prism/mdx-provider.js deleted file mode 100644 index 9d77b54..0000000 --- a/src/components/prism/mdx-provider.js +++ /dev/null @@ -1,32 +0,0 @@ -"use client" - -// mdx-provider.js -import { MDXProvider } from '@mdx-js/react'; -import Prism from './prism-setup'; -import { useEffect } from 'react'; - -const CodeBlock = ({ children, className }) => { - 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 deleted file mode 100644 index 5a595e5..0000000 --- a/src/components/prism/prism-setup.js +++ /dev/null @@ -1,10 +0,0 @@ -// 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/mdxTheme.js b/src/style/mdxTheme.js deleted file mode 100644 index dd1365e..0000000 --- a/src/style/mdxTheme.js +++ /dev/null @@ -1,98 +0,0 @@ -// theme.js - -// Define the light theme colors -const lightColors = { - text: '#000000', - background: '#ffffff', - foreground: '#ebdbb2', - red: { - 1: '#cc241d', - 2: '#fb4934', - }, - orange: { - 1: '#d65d0e', - 2: '#fe8019', - }, - green: { - 1: '#98971a', - 2: '#b8bb26', - }, - yellow: { - 1: '#d79921', - 2: '#fabd2f', - }, - blue: { - 1: '#458588', - 2: '#83a598', - }, - purple: { - 1: '#b16286', - 2: '#d3869b', - }, - aqua: { - 1: '#689d6a', - 2: '#8ec07c', - }, -}; - -// Define the dark theme colors -const darkColors = { - text: '#ebdbb2', - background: '#000000', - foreground: '#ebdbb2', - red: { - 1: '#cc241d', - 2: '#fb4934', - }, - orange: { - 1: '#d65d0e', - 2: '#fe8019', - }, - green: { - 1: '#98971a', - 2: '#b8bb26', - }, - yellow: { - 1: '#d79921', - 2: '#fabd2f', - }, - blue: { - 1: '#458588', - 2: '#83a598', - }, - purple: { - 1: '#b16286', - 2: '#d3869b', - }, - aqua: { - 1: '#689d6a', - 2: '#8ec07c', - }, -}; - -// Define the common styles for both light and dark themes -const commonStyles = { - fonts: { - body: "ComicCode", - heading: "ComicCode", - }, - fontWeights: { - heading: 700, - }, - // Add other common styles as needed -}; - -// Combine the light and dark themes -const theme = { - light: { - colors: lightColors, - ...commonStyles, - }, - dark: { - colors: darkColors, - ...commonStyles, - }, -}; - -export default theme; - diff --git a/src/style/prism-theme.css b/src/style/prism-theme.css deleted file mode 100644 index b570451..0000000 --- a/src/style/prism-theme.css +++ /dev/null @@ -1,143 +0,0 @@ -/** - * 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 */ -}