diff --git a/_posts/another-example.mdx b/_posts/another-example.mdx deleted file mode 100644 index 946169b..0000000 --- a/_posts/another-example.mdx +++ /dev/null @@ -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? - - diff --git a/_posts/blog-post-example.mdx b/_posts/blog-post-example.mdx new file mode 100644 index 0000000..9b25090 --- /dev/null +++ b/_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? + + + +![alt text](/logo.svg 'Logo Website') diff --git a/_posts/example-post.mdx b/_posts/example-post.mdx index dfead91..a6c2d9b 100644 --- a/_posts/example-post.mdx +++ b/_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 diff --git a/_posts/lorem-ipsum1.mdx b/_posts/old-example.mdx similarity index 97% rename from _posts/lorem-ipsum1.mdx rename to _posts/old-example.mdx index fd77deb..7854ff6 100644 --- a/_posts/lorem-ipsum1.mdx +++ b/_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 diff --git a/components/ButtonMdx.tsx b/components/ButtonMdx.tsx index a8e1c00..1e64e63 100644 --- a/components/ButtonMdx.tsx +++ b/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 ; } diff --git a/components/Nav.tsx b/components/Nav.tsx index 7c5eae2..95842d4 100644 --- a/components/Nav.tsx +++ b/components/Nav.tsx @@ -25,7 +25,7 @@ const Nav = ({ user, signOut }: NavProperties): JSX.Element => { )} - + Blog diff --git a/components/blog/post-body.tsx b/components/blog/post-body.tsx index dadd32d..162bd76 100644 --- a/components/blog/post-body.tsx +++ b/components/blog/post-body.tsx @@ -9,7 +9,7 @@ type Properties = { const PostBody = ({ code }: Properties): JSX.Element => { const BlogPost = useMemo(() => getMDXComponent(code), [code]); return ( -
+
); diff --git a/lib/api.ts b/lib/blogApi.ts similarity index 97% rename from lib/api.ts rename to lib/blogApi.ts index cdc0af6..37d8885 100644 --- a/lib/api.ts +++ b/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'; diff --git a/package.json b/package.json index 3d44161..8874454 100644 --- a/package.json +++ b/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", diff --git a/pages/blog.tsx b/pages/blog.tsx index 5397b45..c0afa85 100644 --- a/pages/blog.tsx +++ b/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[]; diff --git a/pages/blog/[slug].tsx b/pages/blog/[slug].tsx index 3dd81cb..6327053 100644 --- a/pages/blog/[slug].tsx +++ b/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'; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index b8e9cca..5f802db 100644 --- a/pnpm-lock.yaml +++ b/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 diff --git a/tailwind.config.js b/tailwind.config.js index 0d262b1..fa79758 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -13,7 +13,7 @@ module.exports = { variants: { extend: {}, }, - plugins: [require('daisyui')], + plugins: [require('daisyui'), require('@tailwindcss/typography')], daisyui: { themes: [ { diff --git a/tests/basic.spec.ts b/tests/basic.spec.ts index 0a7db0e..da59ce9 100644 --- a/tests/basic.spec.ts +++ b/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'); });