diff --git a/package.json b/package.json index 93e539ad..617ced3a 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "@commitlint/cli": "^18.2.0", "@commitlint/config-conventional": "^18.1.0", "@playwright/test": "^1.40.1", + "@tailwindcss/typography": "^0.5.10", "@types/eslint": "^8.56.1", "@types/jest": "^29.5.11", "@types/mdx": "^2.0.10", @@ -47,6 +48,8 @@ "@next/mdx": "^13.5.4", "@nextui-org/react": "^2.2.9", "@radix-ui/react-dropdown-menu": "^2.0.6", + "@radix-ui/react-label": "^2.0.2", + "@radix-ui/react-separator": "^1.0.3", "@radix-ui/react-slot": "^1.0.2", "@types/mapbox__rehype-prism": "^0.8.3", "class-variance-authority": "^0.7.0", @@ -72,6 +75,7 @@ "sugar-high": "^0.5.6", "tailwind-merge": "^2.2.0", "tailwindcss-animate": "^1.0.7", - "uuid": "^9.0.1" + "uuid": "^9.0.1", + "zod": "^3.22.4" } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c8bf56c8..98b8b8ee 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -26,6 +26,12 @@ dependencies: '@radix-ui/react-dropdown-menu': specifier: ^2.0.6 version: 2.0.6(@types/react-dom@18.2.18)(@types/react@18.2.47)(react-dom@18.2.0)(react@18.2.0) + '@radix-ui/react-label': + specifier: ^2.0.2 + version: 2.0.2(@types/react-dom@18.2.18)(@types/react@18.2.47)(react-dom@18.2.0)(react@18.2.0) + '@radix-ui/react-separator': + specifier: ^1.0.3 + version: 1.0.3(@types/react-dom@18.2.18)(@types/react@18.2.47)(react-dom@18.2.0)(react@18.2.0) '@radix-ui/react-slot': specifier: ^1.0.2 version: 1.0.2(@types/react@18.2.47)(react@18.2.0) @@ -104,6 +110,9 @@ dependencies: uuid: specifier: ^9.0.1 version: 9.0.1 + zod: + specifier: ^3.22.4 + version: 3.22.4 devDependencies: '@commitlint/cli': @@ -115,6 +124,9 @@ devDependencies: '@playwright/test': specifier: ^1.40.1 version: 1.40.1 + '@tailwindcss/typography': + specifier: ^0.5.10 + version: 0.5.10(tailwindcss@3.4.1) '@types/eslint': specifier: ^8.56.1 version: 8.56.1 @@ -3976,6 +3988,30 @@ packages: react: 18.2.0 dev: false + /@radix-ui/react-label@2.0.2(@types/react-dom@18.2.18)(@types/react@18.2.47)(react-dom@18.2.0)(react@18.2.0): + resolution: + { + integrity: sha512-N5ehvlM7qoTLx7nWPodsPYPgMzA5WM8zZChQg8nyFJKnDO5WHdba1vv5/H6IO5LtJMfD2Q3wh1qHFGNtK0w3bQ==, + } + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + dependencies: + '@babel/runtime': 7.23.8 + '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.18)(@types/react@18.2.47)(react-dom@18.2.0)(react@18.2.0) + '@types/react': 18.2.47 + '@types/react-dom': 18.2.18 + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + dev: false + /@radix-ui/react-menu@2.0.6(@types/react-dom@18.2.18)(@types/react@18.2.47)(react-dom@18.2.0)(react@18.2.0): resolution: { @@ -4155,6 +4191,30 @@ packages: react-dom: 18.2.0(react@18.2.0) dev: false + /@radix-ui/react-separator@1.0.3(@types/react-dom@18.2.18)(@types/react@18.2.47)(react-dom@18.2.0)(react@18.2.0): + resolution: + { + integrity: sha512-itYmTy/kokS21aiV5+Z56MZB54KrhPgn6eHDKkFeOLR34HMN2s8PaN47qZZAGnvupcjxHaFZnW4pQEh0BvvVuw==, + } + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + dependencies: + '@babel/runtime': 7.23.8 + '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.18)(@types/react@18.2.47)(react-dom@18.2.0)(react@18.2.0) + '@types/react': 18.2.47 + '@types/react-dom': 18.2.18 + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + dev: false + /@radix-ui/react-slot@1.0.2(@types/react@18.2.47)(react@18.2.0): resolution: { @@ -5494,6 +5554,21 @@ packages: tslib: 2.6.2 dev: false + /@tailwindcss/typography@0.5.10(tailwindcss@3.4.1): + resolution: + { + integrity: sha512-Pe8BuPJQJd3FfRnm6H0ulKIGoMEQS+Vq01R6M5aCrFB/ccR/shT+0kXLjouGC1gFLm9hopTFN+DMP0pfwRWzPw==, + } + peerDependencies: + tailwindcss: '>=3.0.0 || insiders' + dependencies: + lodash.castarray: 4.4.0 + lodash.isplainobject: 4.0.6 + lodash.merge: 4.6.2 + postcss-selector-parser: 6.0.10 + tailwindcss: 3.4.1(ts-node@10.9.2) + dev: true + /@tsconfig/node10@1.0.9: resolution: { @@ -10608,6 +10683,13 @@ packages: } dev: true + /lodash.castarray@4.4.0: + resolution: + { + integrity: sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==, + } + dev: true + /lodash.foreach@4.5.0: resolution: { @@ -12744,6 +12826,17 @@ packages: postcss: 8.4.33 postcss-selector-parser: 6.0.15 + /postcss-selector-parser@6.0.10: + resolution: + { + integrity: sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==, + } + engines: { node: '>=4' } + dependencies: + cssesc: 3.0.0 + util-deprecate: 1.0.2 + dev: true + /postcss-selector-parser@6.0.15: resolution: { @@ -15535,6 +15628,13 @@ packages: engines: { node: '>=10' } dev: true + /zod@3.22.4: + resolution: + { + integrity: sha512-iC+8Io04lddc+mVqQ9AZ7OQ2MrUKGN+oIQyq1vemgt46jwCwLfhq7/pwnBnNXXXZb8VTVLKwp9EDkx+ryxIWmg==, + } + dev: false + /zwitch@2.0.4: resolution: { diff --git a/public/blogs/tester.mdx b/public/blogs/tester.mdx index 72776adc..e8b7e5c0 100644 --- a/public/blogs/tester.mdx +++ b/public/blogs/tester.mdx @@ -16,7 +16,7 @@ tags: First we might talk about how to run in parallel and run the app on any machine, you can choose from two methods: Using **``getStaticQueryParams()``** for isolation or, you can use Google if already have Python installed, the latter option. -**During the installation process, you will receive instructions on how to re-run the app if needed, one can mention:** +**During the installation process, you will receive instructions on how to re-run the app if needed, one can mention:** * \- **Referrer**: Static site generation diff --git a/src/app/(pages)/blog/[slug]/page.tsx b/src/app/(pages)/blog/[slug]/page.tsx index 66ac34b9..db90aa91 100644 --- a/src/app/(pages)/blog/[slug]/page.tsx +++ b/src/app/(pages)/blog/[slug]/page.tsx @@ -1,65 +1,68 @@ +import { Suspense } from 'react'; +import LoadingScreen from '@/app/components/reusables/loading-screen'; import StyledMDX from '@/app/components/mdx/styled-mdx'; import { Heading1 as H1 } from '@/app/components/reusables/headers'; import { formatDate, isSameMonthAndYear } from '@/lib/funcs/dates'; import { MediumSection } from '@/app/components/reusables/sections'; -import type { Metadata, ResolvingMetadata } from 'next'; - import { notFound } from 'next/navigation'; import { pub } from '@/lib/env'; -import { getBlogPosts } from '@/app/(pages)/blog/content'; import { Badge } from '@/app/components/ui/badge'; +import { getPost } from '@/app/actions/blog'; -export default function Blog({ params }: { params: { slug: string } }) { - let post = getBlogPosts().find((post) => post?.filenameSlug === params.slug); - if (!post) { - notFound(); +export default async function Blog({ params }: { params: { slug: string } }) { + const post = await getPost(params.slug); + if (post) { + return ( + }> +
+