timmypidashev/web
1
0
Fork 0
mirror of https://github.com/timmypidashev/web.git synced 2026-04-14 19:13:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add mdx styling

Browse Source
This commit is contained in:
Timothy Pidashev
2024-06-09 17:41:57 -07:00
parent 73e6e2c354
commit 6bd0616d54
4 changed files with 108 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/app/blog/[slug]/page.jsx
View File

@@ -10,11 +10,11 @@ export async function generateStaticParams() {
export default async function BlogPage({ params }) {
const blog = await getBlogBySlug(params.slug);
return (
<section className="prose mx-auto">
<section className="py-16 prose">
<article>
<h1>{blog.frontmatter.title}</h1>
<p>{blog.frontmatter.author}</p>
<p>{blog.frontmatter.date}</p>
<h1 className="text-light-foreground dark:text-dark-foreground">{blog.frontmatter.title}</h1>
<p className="text-light-yellow-1 dark:text-dark-yellow-1">{blog.frontmatter.author}</p>
<p className="text-light-blue-1 dark:text-dark-blue-1">{blog.frontmatter.date}</p>
<div>{blog.content}</div>
</article>
</section>

2
src/package.json
View File

@@ -14,6 +14,8 @@
"next": "14.2.3",
"next-mdx-remote": "^5.0.0",
"next-themes": "^0.3.0",
"prism-react-renderer": "^2.3.1",
"prismjs": "^1.29.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-icons": "^5.2.1",

79
src/tailwind.config.js
View File

@@ -74,7 +74,86 @@ module.exports = {
},
},
},
typography: (theme) => ({
DEFAULT: {
css: {
color: theme('colors.light.foreground'),
a: {
color: theme('colors.light.blue.2'),
'&:hover': {
color: theme('colors.light.blue.1'),
},
},
h1: {
color: theme('colors.light.foreground'),
},
h2: {
color: theme('colors.light.foreground'),
},
h3: {
color: theme('colors.light.foreground'),
},
h4: {
color: theme('colors.light.foreground'),
},
h5: {
color: theme('colors.light.foreground'),
},
h6: {
color: theme('colors.light.foreground'),
},
strong: {
color: theme('colors.light.foreground'),
},
code: {
color: theme('colors.light.orange.1'),
},
blockquote: {
color: theme('colors.light.foreground'),
},
},
},
dark: {
css: {
color: theme('colors.light.foreground'), // Keeping same as light mode
a: {
color: theme('colors.light.blue.2'),
'&:hover': {
color: theme('colors.light.blue.1'),
},
},
h1: {
color: theme('colors.light.foreground'),
},
h2: {
color: theme('colors.light.foreground'),
},
h3: {
color: theme('colors.light.foreground'),
},
h4: {
color: theme('colors.light.foreground'),
},
h5: {
color: theme('colors.light.foreground'),
},
h6: {
color: theme('colors.light.foreground'),
},
strong: {
color: theme('colors.light.foreground'),
},
code: {
color: theme('colors.light.orange.1'),
},
blockquote: {
color: theme('colors.light.foreground'),
},
},
},
}),
},
},
plugins: [require("@tailwindcss/typography")],
};

23
src/yarn.lock
View File

@@ -259,6 +259,11 @@
resolved "https://registry.yarnpkg.com/@types/ms/-/ms-0.7.34.tgz#10964ba0dee6ac4cd462e2795b6bebd407303433"
integrity sha512-nG96G3Wp6acyAgJqGasjODb+acrI7KltPiRxzHPXnP3NgI28bpQDRv53olbqGXbfcgF5aiiHmO3xpwEpS5Ld9g==
"@types/prismjs@^1.26.0":
version "1.26.4"
resolved "https://registry.yarnpkg.com/@types/prismjs/-/prismjs-1.26.4.tgz#1a9e1074619ce1d7322669e5b46fbe823925103a"
integrity sha512-rlAnzkW2sZOjbqZ743IHUhFcvzaGbqijwOu8QZnZCjfQzBqFE3s4lOTJEsxikImav9uzz/42I+O7YUs1mWgMlg==
"@types/prop-types@*":
version "15.7.12"
resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.12.tgz#12bb1e2be27293c1406acb6af1c3f3a1481d98c6"
@@ -449,6 +454,11 @@ client-only@0.0.1:
resolved "https://registry.yarnpkg.com/client-only/-/client-only-0.0.1.tgz#38bba5d403c41ab150bff64a95c85013cf73bca1"
integrity sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==
clsx@^2.0.0:
version "2.1.1"
resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.1.tgz#eed397c9fd8bd882bfb18deab7102049a2f32999"
integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==
collapse-white-space@^2.0.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/collapse-white-space/-/collapse-white-space-2.1.0.tgz#640257174f9f42c740b40f3b55ee752924feefca"
@@ -1747,6 +1757,19 @@ postcss@^8, postcss@^8.4.23:
picocolors "^1.0.0"
source-map-js "^1.2.0"
prism-react-renderer@^2.3.1:
version "2.3.1"
resolved "https://registry.yarnpkg.com/prism-react-renderer/-/prism-react-renderer-2.3.1.tgz#e59e5450052ede17488f6bc85de1553f584ff8d5"
integrity sha512-Rdf+HzBLR7KYjzpJ1rSoxT9ioO85nZngQEoFIhL07XhtJHlCU3SOz0GJ6+qvMyQe0Se+BV3qpe6Yd/NmQF5Juw==
dependencies:
"@types/prismjs" "^1.26.0"
clsx "^2.0.0"
prismjs@^1.29.0:
version "1.29.0"
resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.29.0.tgz#f113555a8fa9b57c35e637bba27509dcf802dd12"
integrity sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==
prop-types@^15.8.1:
version "15.8.1"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"