#11 Implements ArticlePreview component

.github/workflows/gh-pages.yml

@@ -26,6 +26,7 @@ jobs:
       - name: Build
         run: |
           npm install
+          npm run test
           npm run build
           npm run export
           touch ./out/.nojekyll

.gitignore

@@ -34,9 +34,9 @@ yarn-error.log*
 .vercel
 
 # content
-content/Private
-content/.obsidian
-content/Daily
+lib/content/Private
+lib/content/.obsidian
+lib/content/Daily
 
 # idea
 .idea

jest.config.js

@@ -0,0 +1,12 @@
+// jest.config.js
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const nextJest = require('next/jest')
+
+const createJestConfig = nextJest({ dir: './' })
+
+const customJestConfig = {
+  moduleDirectories: ['node_modules', '<rootDir>/'],
+  testEnvironment: 'jest-environment-jsdom',
+}
+
+module.exports = createJestConfig(customJestConfig)

lib/article.test.ts

@@ -0,0 +1,8 @@
+import { getAllArticles } from './article';
+
+test('getAllArticles', () => {
+  const articles = getAllArticles()
+  expect(articles).toHaveLength(5)
+
+  expect(articles[0].title?.length).toBeGreaterThanOrEqual(0)
+})

lib/article.ts

@@ -0,0 +1,34 @@
+import { join } from 'path';
+import { readdirSync, readFileSync, statSync } from 'fs';
+import matter from 'gray-matter';
+
+const ARTICLE_DIRECTORY = join(process.cwd(), 'lib', 'content', 'article')
+
+export function getAllArticles(): Article[] {
+  return readdirSync(ARTICLE_DIRECTORY)
+    .filter((file) => !file.startsWith('_'))
+    .map((file) => readArticleSync(file))
+}
+
+function readArticleSync(file: string): Article {
+  const filePath = join(ARTICLE_DIRECTORY, file)
+  const fileContent = readFileSync(filePath, 'utf8')
+  const { data, content } = matter(fileContent)
+  return {
+    slug: file.replace(/\.md$/, ''),
+    title: data.title,
+    date: data.date
+      ? data.date.toDateString()
+      : statSync(filePath).birthtime.toDateString(),
+    tags: data.tags ? data.tags : [],
+    content,
+  }
+}
+
+export interface Article {
+  slug: string,
+  title?: string,
+  date: string,
+  tags: string[],
+  content: string
+}

content/post/emoji-support.md → lib/content/article/emoji-support.md

@@ -1,12 +1,12 @@
-+++
-author = "lee.so"
-title = "Emoji Support"
-date = "2019-03-05"
-description = "Guide to emoji usage in Hugo"
-tags = [
+---
+author : lee.so
+title : Emoji Support
+date : 2019-03-05
+description : Guide to emoji usage in Hugo
+tags : [
     "emoji",
 ]
-+++
+---
 
 Emoji can be enabled in a Hugo project in a number of ways. 
 <!--more-->

content/post/markdown-syntax.md → lib/content/article/markdown-syntax.md

@@ -1,20 +1,20 @@
-+++
-author = "lee.so"
-title = "Markdown Syntax Guide"
-date = "2019-03-11"
-description = "Sample article showcasing basic Markdown syntax and formatting for HTML elements."
-tags = [
+---
+author : lee.so
+title : Markdown Syntax Guide
+date : 2019-03-11
+description : Sample article showcasing basic Markdown syntax and formatting for HTML elements.
+tags : [
     "markdown",
     "css",
     "html",
 ]
-categories = [
+categories : [
     "themes",
     "syntax",
 ]
-series = ["Themes Guide"]
-aliases = ["migrate-from-jekyl"]
-+++
+series : ["Themes Guide"]
+aliases : ["migrate-from-jekyl"]
+---
 
 This article offers a sample of basic Markdown syntax that can be used in Hugo content files, also it shows whether basic HTML elements are decorated with CSS in a Hugo theme.
 <!--more-->

content/post/placeholder-text.md → lib/content/article/placeholder-text.md

@@ -1,13 +1,13 @@
-+++
-author = "lee.so"
-title = "Placeholder Text"
-date = "2019-03-09"
-description = "Lorem Ipsum Dolor Si Amet"
-tags = [
+---
+author: lee.so
+title: Placeholder Text
+date: 2019-03-09
+description: Lorem Ipsum Dolor Si Amet
+tags: [
     "markdown",
     "text",
 ]
-+++
+---
 
 Lorem est tota propiore conpellat pectoribus de pectora summo. <!--more-->Redit teque digerit hominumque toris verebor lumina non cervice subde tollit usus habet Arctonque, furores quas nec ferunt. Quoque montibus nunc caluere tempus inhospita parcite confusaque translucet patri vestro qui optatis lumine cognoscere flos nubis! Fronde ipsamque patulos Dryopen deorum.
 
@@ -19,7 +19,7 @@ Lorem est tota propiore conpellat pectoribus de pectora summo. <!--more-->Redit
 Rursus nulli murmur; hastile inridet ut ab gravi sententia! Nomine potitus silentia flumen, sustinet placuit petis in dilapsa erat sunt. Atria tractus malis.
 
 1. Comas hunc haec pietate fetum procerum dixit
-2. Post torum vates letum Tiresia
+2. Article torum vates letum Tiresia
 3. Flumen querellas
 4. Arcanaque montibus omnes
 5. Quidem et

content/post/rich-content.md → lib/content/article/rich-content.md

@@ -1,13 +1,13 @@
-+++
-author = "lee.so"
-title = "Rich Content"
-date = "2019-03-10"
-description = "A brief description of Hugo Shortcodes"
-tags = [
+---
+author : lee.so
+title : Rich Content
+date : 2019-03-10
+description : A brief description of Hugo Shortcodes
+tags : [
     "shortcodes",
     "privacy",
 ]
-+++
+---
 
 Hugo ships with several [Built-in Shortcodes](https://gohugo.io/content-management/shortcodes/#use-hugos-built-in-shortcodes) for rich content, along with a [Privacy Config](https://gohugo.io/about/hugo-and-gdpr/) and a set of Simple Shortcodes that enable static and no-JS versions of various social media embeds.
 <!--more-->