Initial work to replace MDX with home-built

.gitignore

@@ -32,3 +32,5 @@ yarn-error.log*
 
 # vercel
 .vercel
+
+/public/posts

@types/remark-html.d.ts

@@ -1 +0,0 @@
-declare module 'remark-html'

lib/constants.ts

@@ -1,4 +0,0 @@
-export const EXAMPLE_PATH = 'blog-starter-typescript'
-export const CMS_NAME = 'Markdown'
-export const HOME_OG_IMAGE_URL =
-  'https://og-image.vercel.app/Next.js%20Blog%20Starter%20Example.png?theme=light&md=1&fontSize=100px&images=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg'

next.config.js

@@ -0,0 +1,19 @@
+const path = require('path');
+const CopyPlugin = require("copy-webpack-plugin");
+
+module.exports = {
+    webpack: config => {
+        config.plugins.push(
+            new CopyPlugin({
+                patterns: [
+                    {
+                        from: path.resolve(__dirname, "content/blog"),
+                        to: path.resolve(__dirname, 'public/posts')
+                    }
+                ]
+            })
+        )
+
+        return config;
+    }
+}

package.json

@@ -8,11 +8,13 @@
   },
   "dependencies": {
     "classnames": "2.3.1",
+    "copy-webpack-plugin": "^9.0.1",
     "date-fns": "2.21.3",
     "gray-matter": "4.0.3",
     "next": "latest",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "rehype-img-size": "^0.0.1",
     "rehype-parse": "^8.0.3",
     "rehype-react": "^7.0.3",
     "rehype-stringify": "^9.0.2",

src/api/index.ts

@@ -0,0 +1 @@
+export * from './api';

src/hooks/useMarkdownRenderer.tsx

@@ -13,13 +13,13 @@ interface useMarkdownRendererProps {
 }
 
 const getComponents = ({
-                           postsDirectory,
                            slug
                        }: useMarkdownRendererProps) => ({
     img: (imgProps: unknown) => {
         const {src, ...props2} = imgProps as ImageProps;
-        const imagePath = join(postsDirectory, slug, src as string);
+        const imagePath = join('/posts', slug, src as string);
-        const beResponsive = props2.height && props2.width;
+        const beResponsive = !!(props2.height && props2.width);
+
         return (
             <Image
                 src={imagePath}

src/pages/index.tsx

@@ -1,12 +1,15 @@
-import {getAllPosts} from '../lib/api'
+import {getAllPosts} from '../api/api'
 import Post from '../types/post'
 import React from 'react'
 import Link from 'next/link';
+import consts from '../utils/constants';
 
 type Props = {
     allPosts: Post[]
 }
 
+
+
 const Index = ({allPosts}: Props) => {
     return (
         <>
@@ -15,7 +18,7 @@ const Index = ({allPosts}: Props) => {
                     post =>
                         <li key={post.slug}>
                             <h2>
-                                <Link href="/posts/[slug]" as={`/posts/${post.slug}`}>
+                                <Link href={`/posts/[slug]`} as={`/posts/${post.slug}`}>
                                     <a>{post.title}</a>
                                 </Link>
                             </h2>

src/pages/posts/[slug].tsx

@@ -1,9 +1,9 @@
 // import { useRouter } from 'next/router'
 // import ErrorPage from 'next/error'
-import {getPostBySlug, getAllPosts, postsDirectory} from '../../lib/api'
+import {getPostBySlug, getAllPosts, postsDirectory} from '../../api/api'
 import * as React from 'react';
 
-import markdownToHtml from "../../lib/markdownToHtml";
+import markdownToHtml from "../../utils/markdownToHtml";
 import {useMarkdownRenderer} from "../../hooks/useMarkdownRenderer";
 
 type Props = {

src/utils/markdownToHtml.ts

@@ -3,9 +3,13 @@ import remarkParse from "remark-parse";
 import remarkStringify from "remark-stringify";
 import remarkToRehype from 'remark-rehype';
 import rehypeStringify from "rehype-stringify";
+import path from "path";
+import {postsDirectory} from "../api";
 
+// Optional now. Probably should move to an array that's passed or something
 // TODO: Create types
 const behead = require('remark-behead')
+const rehypeImageSize = require('rehype-img-size');
 
 export default async function markdownToHtml(slug: string, markdown: string) {
   const result = await unified()
@@ -16,7 +20,10 @@ export default async function markdownToHtml(slug: string, markdown: string) {
       .use(remarkStringify)
       .use(remarkToRehype)
       /* start rehype plugins here */
-
+      // TODO: https://github.com/ksoichiro/rehype-img-size/issues/4
+      .use(rehypeImageSize, {
+        dir: path.resolve(postsDirectory, slug),
+      })
       /* end rehype plugins here */
       .use(rehypeStringify)
       .process(markdown);