Feat/sub-route (#38)

* blog subroute support
* docs: update readme and blog

Co-authored-by: mrhut10 <ahut10@gmail.com>

lib/mdx.js

@@ -1,12 +1,12 @@
+import MDXComponents from '@/components/MDXComponents'
 import fs from 'fs'
 import matter from 'gray-matter'
-import visit from 'unist-util-visit'
+import renderToString from 'next-mdx-remote/render-to-string'
 import path from 'path'
 import readingTime from 'reading-time'
-import renderToString from 'next-mdx-remote/render-to-string'
-
-import MDXComponents from '@/components/MDXComponents'
+import visit from 'unist-util-visit'
 import imgToJsx from './img-to-jsx'
+import getAllFilesRecursively from './utils/files'
 
 const root = process.cwd()
 
@@ -24,8 +24,11 @@ const tokenClassNames = {
   comment: 'text-gray-400 italic',
 }
 
-export async function getFiles(type) {
-  return fs.readdirSync(path.join(root, 'data', type))
+export function getFiles(type) {
+  const prefixPaths = path.join(root, 'data', type)
+  const files = getAllFilesRecursively(prefixPaths)
+  // Only want to return blog/path and ignore root
+  return files.map(file => file.slice(prefixPaths.length + 1))
 }
 
 export function formatSlug(slug) {
@@ -39,8 +42,8 @@ export function dateSortDesc(a, b) {
 }
 
 export async function getFileBySlug(type, slug) {
-  const mdxPath = path.join(root, 'data', type, `${slug}.mdx`)
-  const mdPath = path.join(root, 'data', type, `${slug}.md`)
+  const mdxPath = path.join(root, 'data', type, `${slug.join('/')}.mdx`)
+  const mdPath = path.join(root, 'data', type, `${slug.join('/')}.md`)
   const source = fs.existsSync(mdxPath)
     ? fs.readFileSync(mdxPath, 'utf8')
     : fs.readFileSync(mdPath, 'utf8')
@@ -86,16 +89,19 @@ export async function getFileBySlug(type, slug) {
   }
 }
 
-export async function getAllFilesFrontMatter(type) {
-  const files = fs.readdirSync(path.join(root, 'data', type))
+export async function getAllFilesFrontMatter(folder) {
+  const prefixPaths = path.join(root, 'data', folder)
+
+  const files = getAllFilesRecursively(prefixPaths)
 
   const allFrontMatter = []
 
   files.forEach((file) => {
-    const source = fs.readFileSync(path.join(root, 'data', type, file), 'utf8')
+    const fileName = file.slice(prefixPaths.length + 1)
+    const source = fs.readFileSync(file, 'utf8')
     const { data } = matter(source)
     if (data.draft !== true) {
-      allFrontMatter.push({ ...data, slug: formatSlug(file) })
+      allFrontMatter.push({ ...data, slug: formatSlug(fileName) })
     }
   })
 

lib/tags.js

@@ -1,12 +1,13 @@
 import fs from 'fs'
 import matter from 'gray-matter'
 import path from 'path'
-import { kebabCase } from './utils'
+import { getFiles } from './mdx'
+import kebabCase from './utils/kebabCase'
 
 const root = process.cwd()
 
 export async function getAllTags(type) {
-  const files = fs.readdirSync(path.join(root, 'data', type))
+  const files = await getFiles(type)
 
   let tagCount = {}
   // Iterate through each post, putting all found tags into `tags`

lib/utils/files.js

@@ -0,0 +1,20 @@
+import fs from 'fs'
+import path from 'path'
+
+const pipe = (...fns) => (x) => fns.reduce((v, f) => f(v), x)
+
+const flatternArray = (input) =>
+  input.reduce((acc, item) => [...acc, ...(Array.isArray(item) ? item : [item])], [])
+
+const map = (fn) => (input) => input.map(fn)
+
+const walkDir = (fullPath) => {
+  return fs.statSync(fullPath).isFile() ? fullPath : getAllFilesRecursively(fullPath)
+}
+
+const pathJoinPrefix = (prefix) => (extraPath) => path.join(prefix, extraPath)
+
+const getAllFilesRecursively = (folder) =>
+  pipe(fs.readdirSync, map(pipe(pathJoinPrefix(folder), walkDir)), flatternArray)(folder)
+
+export default getAllFilesRecursively

lib/utils/kebabCase.js

@@ -1,6 +1,8 @@
-export const kebabCase = (str) =>
+const kebabCase = (str) =>
   str &&
   str
     .match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g)
     .map((x) => x.toLowerCase())
     .join('-')
+
+export default kebabCase