Clean Blog system

- Improved the blog posts
- Add a test to visit the blog index
- Add Tailwind Typography for the markdown blog posts

_posts/another-example.mdx

@@ -1,34 +0,0 @@
----
-title: Another example
-description: A very small example of a blog post with a title and a description.
-excerpt: Want to easily integrate a blog into your SaaS? Nothing could be simpler, with SupaNexTail, everything is already configured, you just have to write!
-date: '2022-01-17'
-coverImage: '/blog/covers/writeblog.png'
-author:
-  name: 'Michael B'
-  picture: '/blog/author/Avatar1.svg'
-ogImage: '/blog/covers/writeblog.png'
-url: '/blog/Blog.png'
----
-
-import Button from '../components/ButtonMdx';
-
-## A header
-
-This is a small example of a blog post.
-Can you make it bigger?
-I'm sure you can!
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id pulvinar velit, ut dignissim nibh. Nullam commodo pharetra sem. Donec in erat diam. Donec efficitur arcu sagittis felis vulputate feugiat in in enim. Sed ultricies tincidunt eros, et mattis erat hendrerit nec. Cras congue nec augue non imperdiet. Proin tincidunt luctus erat sit amet lobortis. Sed urna erat, ornare vel suscipit id, pharetra vel elit.
-
-Suspendisse fringilla sit amet lorem nec semper. Curabitur aliquet ultrices rhoncus. Morbi facilisis, nibh eu dapibus maximus, lectus ante porttitor ante, quis dictum ipsum dui in velit. Pellentesque sapien enim, laoreet eu aliquam non, pellentesque in dui. Curabitur tristique magna lacus, ac pulvinar ex aliquam luctus. Etiam volutpat faucibus purus. Integer non euismod diam. Nam tincidunt vulputate nulla, a porta est accumsan non. Morbi et suscipit arcu. Cras placerat turpis eu mauris placerat, quis commodo ipsum iaculis. Vivamus turpis diam, posuere id ligula a, rhoncus volutpat risus. Fusce accumsan magna vitae odio molestie ultrices. Donec efficitur tellus ut leo posuere, vitae porttitor ipsum consectetur. Mauris tempor odio non laoreet luctus. Curabitur finibus vestibulum justo nec auctor.
-
-## A second header
-
-Integer egestas nulla non ultricies ultricies. Nulla et ultrices odio. Etiam eget tempor ipsum. Pellentesque sit amet commodo est. Praesent tincidunt faucibus orci. Proin at aliquet orci. Sed eget ultrices ligula. Maecenas bibendum, leo quis suscipit posuere, tellus libero maximus nibh, vel bibendum eros leo non nulla. Proin quis gravida leo. Cras efficitur mi congue lacus viverra placerat quis in leo. Nam faucibus est sollicitudin, suscipit erat ac, ultrices metus. Fusce sagittis vulputate turpis eget laoreet.
-
-### And this is a MDX example
-
-This button is a React component inside a MDX file. Crazy, right?
-
-<Button>Click me</Button>

_posts/blog-post-example.mdx

@@ -0,0 +1,44 @@
+---
+title: Blog Post Example
+description: A very small example of a blog post with a title and a description.
+excerpt: Want to easily integrate a blog into your SaaS? Nothing could be simpler, with SupaNexTail, everything is already configured, you just have to write!
+date: '2022-01-17'
+coverImage: '/blog/covers/writeblog.png'
+author:
+  name: 'Michael B'
+  picture: '/blog/author/Avatar1.svg'
+ogImage:
+  url: '/blog/covers/writeblog.png'
+---
+
+import Button from '../components/ButtonMdx';
+
+## A MDX Blog
+
+This is a small example of a blog post.
+Can you make it bigger?
+I'm sure you can!
+
+In this article, you can see a small button at the bottom. It's a React component!
+This is possible thanks to the support of the .mdx format. Want to know more?
+You can go [on this site](https://mdxjs.com/).
+
+## Tailwind Typography
+
+The blog posts are formatted with the Tailwind Typography plugin.
+Here is the description from the official documentation:
+
+_The official Tailwind CSS Typography plugin provides a set of prose classes you can use to add beautiful typographic defaults to any vanilla HTML you don’t control, like HTML rendered from Markdown, or pulled from a CMS._
+
+If you want to customize the typography,
+you can change the classes in the post-body.tsx file.
+To know more about Tailwind Typography,
+you can [check the documentation](https://tailwindcss.com/docs/typography-plugin).
+
+## And this is a MDX example
+
+This button is a React component inside a MDX file. Crazy, right?
+
+<Button>Click me</Button>
+
+![alt text](/logo.svg 'Logo Website')

_posts/example-post.mdx

@@ -23,5 +23,3 @@ Suspendisse fringilla sit amet lorem nec semper. Curabitur aliquet ultrices rhon
 ## A second header
 
 Integer egestas nulla non ultricies ultricies. Nulla et ultrices odio. Etiam eget tempor ipsum. Pellentesque sit amet commodo est. Praesent tincidunt faucibus orci. Proin at aliquet orci. Sed eget ultrices ligula. Maecenas bibendum, leo quis suscipit posuere, tellus libero maximus nibh, vel bibendum eros leo non nulla. Proin quis gravida leo. Cras efficitur mi congue lacus viverra placerat quis in leo. Nam faucibus est sollicitudin, suscipit erat ac, ultrices metus. Fusce sagittis vulputate turpis eget laoreet.
-
-### A smaller header

_posts/old-example.mdx

@@ -1,5 +1,5 @@
 ---
-title: Lorem Ipsum 1
+title: An old blog post
 description: A very small example
 date: '2022-01-17'
 author:
@@ -23,5 +23,3 @@ Suspendisse fringilla sit amet lorem nec semper. Curabitur aliquet ultrices rhon
 ## A second header
 
 Integer egestas nulla non ultricies ultricies. Nulla et ultrices odio. Etiam eget tempor ipsum. Pellentesque sit amet commodo est. Praesent tincidunt faucibus orci. Proin at aliquet orci. Sed eget ultrices ligula. Maecenas bibendum, leo quis suscipit posuere, tellus libero maximus nibh, vel bibendum eros leo non nulla. Proin quis gravida leo. Cras efficitur mi congue lacus viverra placerat quis in leo. Nam faucibus est sollicitudin, suscipit erat ac, ultrices metus. Fusce sagittis vulputate turpis eget laoreet.
-
-### A smaller header

components/ButtonMdx.tsx

@@ -1,3 +1,5 @@
+// This button is used as an example of how to use the MDX button component
+
 export default function Button({ children }: any): JSX.Element {
   return <button className="btn-primary btn">{children}</button>;
 }

components/Nav.tsx

@@ -25,7 +25,7 @@ const Nav = ({ user, signOut }: NavProperties): JSX.Element => {
       )}
 
       <Link href="/blog">
-        <a id="pricing" className="nav-btn">
+        <a id="blog" className="nav-btn">
           Blog
         </a>
       </Link>

components/blog/post-body.tsx

@@ -9,7 +9,7 @@ type Properties = {
 const PostBody = ({ code }: Properties): JSX.Element => {
   const BlogPost = useMemo(() => getMDXComponent(code), [code]);
   return (
-    <div className="max-w-2xl mx-auto">
+    <div className="max-w-2xl mx-auto prose lg:prose-xl">
       <BlogPost />
     </div>
   );

lib/blogApi.ts

@@ -1,3 +1,5 @@
+// This is a set of functions for the Blog system.
+
 import { bundleMDX } from 'mdx-bundler';
 import fs from 'node:fs';
 import { join } from 'node:path';

package.json

@@ -1,6 +1,6 @@
 {
   "name": "supanextail",
-  "version": "1.0.0",
+  "version": "1.5.0",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -39,6 +39,7 @@
   "devDependencies": {
     "@next/eslint-plugin-next": "^12.0.7",
     "@playwright/test": "^1.17.1",
+    "@tailwindcss/typography": "^0.5.0",
     "@types/cors": "^2.8.12",
     "@types/express-rate-limit": "^5.1.3",
     "@types/micro": "^7.3.6",

pages/blog.tsx

@@ -6,7 +6,7 @@ import Layout from 'components/Layout';
 import MoreStories from 'components/blog/more-stories';
 import Post from '../types/post';
 import SectionSeparator from 'components/blog/section-separator';
-import { getAllPosts } from '../lib/api';
+import { getAllPosts } from '../lib/blogApi';
 
 type Properties = {
   allPosts: Post[];

pages/blog/[slug].tsx

@@ -1,5 +1,5 @@
 import { GetStaticPathsResult, GetStaticPropsResult } from 'next';
-import { getAllPosts, getPostData } from 'lib/api';
+import { getAllPosts, getPostData } from 'lib/blogApi';
 
 import Container from 'components/blog/container';
 import Head from 'next/head';

pnpm-lock.yaml

@@ -8,6 +8,7 @@ specifiers:
   '@stripe/stripe-js': ^1.22.0
   '@supabase/gotrue-js': ^1.21.7
   '@supabase/supabase-js': ^1.29.1
+  '@tailwindcss/typography': ^0.5.0
   '@types/cors': ^2.8.12
   '@types/express-rate-limit': ^5.1.3
   '@types/micro': ^7.3.6
@@ -81,6 +82,7 @@ dependencies:
 devDependencies:
   '@next/eslint-plugin-next': 12.0.7
   '@playwright/test': 1.17.1
+  '@tailwindcss/typography': 0.5.0_tailwindcss@3.0.7
   '@types/cors': 2.8.12
   '@types/express-rate-limit': 5.1.3
   '@types/micro': 7.3.6
@@ -1067,6 +1069,18 @@ packages:
       defer-to-connect: 2.0.1
     dev: false
 
+  /@tailwindcss/typography/0.5.0_tailwindcss@3.0.7:
+    resolution: {integrity: sha512-1p/3C6C+JJziS/ghtG8ACYalbA2SyLJY27Pm33cVTlAoY6VQ7zfm2H64cPxUMBkVIlWXTtWHhZcZJPobMRmQAA==}
+    peerDependencies:
+      tailwindcss: '>=3.0.0 || >= 3.0.0-alpha.1 || insiders'
+    dependencies:
+      lodash.castarray: 4.4.0
+      lodash.isplainobject: 4.0.6
+      lodash.merge: 4.6.2
+      lodash.uniq: 4.5.0
+      tailwindcss: 3.0.7_16a290f6d0e3717bf6d2667234aebd30
+    dev: true
+
   /@types/acorn/4.0.6:
     resolution: {integrity: sha512-veQTnWP+1D/xbxVrPC3zHnCZRjSrKfhbMUlEA43iMZLu7EsnTtkJklIuwrCPbOi8YkvDQAiW05VQQFvvz9oieQ==}
     dependencies:
@@ -4052,6 +4066,14 @@ packages:
     dependencies:
       p-locate: 4.1.0
 
+  /lodash.castarray/4.4.0:
+    resolution: {integrity: sha1-wCUTUV4wna3dTCTGDP3c9ZdtkRU=}
+    dev: true
+
+  /lodash.isplainobject/4.0.6:
+    resolution: {integrity: sha1-fFJqUtibRcRcxpC4gWO+BJf1UMs=}
+    dev: true
+
   /lodash.merge/4.6.2:
     resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
     dev: true
@@ -4060,6 +4082,10 @@ packages:
     resolution: {integrity: sha1-7dFMgk4sycHgsKG0K7UhBRakJDg=}
     dev: false
 
+  /lodash.uniq/4.5.0:
+    resolution: {integrity: sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=}
+    dev: true
+
   /lodash/4.17.21:
     resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
     dev: true

tailwind.config.js

@@ -13,7 +13,7 @@ module.exports = {
   variants: {
     extend: {},
   },
-  plugins: [require('daisyui')],
+  plugins: [require('daisyui'), require('@tailwindcss/typography')],
   daisyui: {
     themes: [
       {

tests/basic.spec.ts

@@ -9,5 +9,6 @@ test('basic test', async ({ page }) => {
   // Go through all pages
   await page.click('#login');
   await page.click('#pricing');
+  await page.click('#blog');
   await page.click('#signup');
 });