WIP - Validate metadata

.gitignore

@@ -1,3 +1,5 @@
+scripts/build
+
 # Logs
 logs
 *.log
@@ -69,4 +71,4 @@ yarn-error.log
 .yarn-integrity
 
 # Local Netlify folder
-.netlify
+.netlify

package.json

@@ -1,7 +1,7 @@
 {
     "name": "stephencharlesweiss.com",
     "private": true,
-    "description": "A personal blog using Gatsby and Markdown",
+    "description": "A personal blog built with Gatsby",
     "version": "0.1.0",
     "author": "Stephen Weiss <[email protected]>",
     "dependencies": {
@@ -47,12 +47,16 @@
         "@babel/plugin-transform-react-jsx-development": "^7.9.0",
         "@commitlint/cli": "^8.3.5",
         "@commitlint/config-conventional": "^8.3.4",
+        "@types/lodash.kebabcase": "^4.1.6",
+        "@types/node": "^14.14.10",
         "babel-plugin-styled-components": "^1.10.7",
         "babel-preset-gatsby": "^0.4.7",
         "eslint": "^7.1.0",
         "eslint-plugin-react": "^7.18.0",
         "gatsby-remark-code-titles": "^1.1.0",
+        "gray-matter": "^4.0.2",
         "husky": "^4.2.1",
+        "lodash.kebabcase": "^4.1.1",
         "netlify-cli": "^2.59.1",
         "prettier": "^2.0.5",
         "pretty-quick": "^2.0.1",
@@ -61,7 +65,8 @@
         "stylelint": "^13.5.0",
         "stylelint-config-recommended": "^3.0.0",
         "stylelint-config-styled-components": "^0.1.1",
-        "stylelint-processor-styled-components": "^1.9.0"
+        "stylelint-processor-styled-components": "^1.9.0",
+        "typescript": "^4.1.2"
     },
     "keywords": [
         "gatsby",
@@ -72,6 +77,7 @@
     "scripts": {
         "analyze": "ANALYZE_BUNDLE_SIZE=true gatsby build",
         "build": "npm run pre-build && gatsby build",
+        "build:scripts": "tsc -p ./scripts/tsconfig.scripts.json",
         "clean": "rm -rf .cache && rm -rf public",
         "dev": "gatsby develop",
         "develop": "npm run dev",
@@ -82,11 +88,14 @@
         "nofilter": "nofilter='true' npm run dev",
         "preview": "npm run nofilter",
         "start": "npm run develop",
-        "pre-build": "npm run clean && npm run site-stats",
+        "pre-build": "npm run validate:complete && npm run clean && npm run site-stats",
         "publish:site": "netlify deploy",
         "site-stats": "cloc . --exclude-dir=$(tr '\n' ',' < .clocignore) --md > ./content/stats/current-stats.md",
         "test": "echo \"Write tests! -> https://gatsby.app/unit-testing\"",
-        "updt:content": "git submodule update --remote"
+        "updt:content": "git submodule update --remote",
+        "permission:scripts": "chmod -R u+x ./scripts/build",
+        "validate": "./scripts/build/validate-metadata.js",
+        "validate:complete": "npm run build:scripts && npm run permission:scripts && npm run validate"
     },
     "husky": {
         "hooks": {

scripts/src/README.md

@@ -0,0 +1,27 @@
+These scripts are designed to increase confidence that the data coming in from the submodule is conforming to the expected shape.
+
+## Usage
+
+tl;dr:
+
+```
+$ npm run build:scripts
+$ npm run permission:scripts
+$ npm run validate
+```
+
+Since the scripts are written in typescript, they must be compiled prior to running.
+
+The `tsconfig.scripts.json` file in the root of the `scripts` directory is principally responsible for this process. That said, this config is an extension of the `tsconfig.json` in the root of the project - so any settings not explicitly set in the config should be reviewed there.
+
+In `package.json`, there is a script for compilation:
+
+```shell
+$ npm run build:scripts
+```
+
+However, given that these are written as shell scripts, we also need to update the permissions on the transpiled files as the default file generated does not have execution rights.<sup>[1](#footnotes)<a id="fn1"></a></sup> To make this easier
+
+## Footnotes
+
+-   <sup>[1](#fn1)</sup> This, I admit, is a bit of a conceit and is not strictly necessary. Since these scripts will primarily be invoked via scripts in the `package.json`, we could just as easily prepend the script with `node`, however, the fact that they're written as scripts makes it clear that they're used procedurally.

scripts/src/utils/dateHelpers.ts

@@ -0,0 +1,13 @@
+const dayjs = require('dayjs')
+const utc = require('dayjs/plugin/utc')
+dayjs.extend(utc)
+
+function formatDt(date: string, format?: string) {
+    return dayjs(date).utc().format(format)
+}
+
+function isValidDt(date: string) {
+    return date && dayjs(date).isValid()
+}
+
+module.exports = { formatDt, isValidDt }

scripts/src/validate-metadata.ts

@@ -0,0 +1,98 @@
+#!/usr/bin/env node
+
+// import kebabCase from 'lodash.kebabcase'
+
+// const matter = require('gray-matter')
+
+const fs = require('fs')
+const path = require('path')
+const os = require('os')
+// const { formatDt, isValidDt } = require('./utils/dateHelpers')
+// const dayjs = require('dayjs')
+// const utc = require('dayjs/plugin/utc')
+// dayjs.extend(utc)
+
+const HOME = os.homedir()
+const PATH = path.join(HOME, 'code/digital-garden/notes')
+
+// function formatDt(date: string, format?: string) {
+//     return dayjs(date).utc().format(format)
+// }
+
+// function isValidDt(date: string) {
+//     return date && dayjs(date).isValid()
+// }
+
+function findAllMdFiles() {
+    const mdFilePaths: string[] = []
+    const dirQueue = [PATH]
+
+    while (dirQueue.length) {
+        const dir = dirQueue.pop() ?? ''
+        const dirContents = fs.readdirSync(dir)
+        dirContents.forEach((el: string) => {
+            const elPath = path.resolve(dir, el)
+            const stat = fs.statSync(elPath)
+            if (stat && stat.isDirectory()) {
+                dirQueue.push(elPath)
+            } else if (stat && path.extname(elPath) === '.md') {
+                mdFilePaths.push(elPath)
+            }
+        })
+    }
+    return mdFilePaths
+}
+
+function validateFrontmatter() {
+    const files = findAllMdFiles()
+    console.log({ files })
+
+    // files.forEach((file) => updateFrontmatter(file))
+    console.log(`VALIDATION IS A WIP`)
+}
+
+// function updateFrontmatter(file: string) {
+//     const { content, data, path } = matter.read(file)
+//     const { publish, slug, title } = data
+//     console.log({ title, slug })
+//     if (publish && !slug) {
+//         data.slug = kebabCase(title)
+//         // fs.writeFile(
+//         //     path,
+//         //     `${generateFrontmatter(data)}${content}`,
+//         //     (err: Error) => {
+//         //         if (err) console.log({ err })
+//         //     }
+//         // )
+//     }
+
+//     // if (publish && !stage) {
+//     //   data.stage = 'published';
+//     // }
+// }
+
+// function generateFrontmatter(options: any) {
+//     let frontmatter = ''
+//     for (let [key, val] of Object.entries(options)) {
+//         if (!val) {
+//             frontmatter += `# ${key}: undefined`
+//         } else if (key === 'private') {
+//             frontmatter += `private: ${val}` // special handling due to Private being a restricted word in JS
+//         } else if (key === 'date' || key === 'publish') {
+//             if (!isValidDt(val as string))
+//                 throw new Error(
+//                     `Invalid date in ${options.title}\nBad date value: ${val}`
+//                 )
+//             frontmatter += `${key}: ${formatDt(val as string)}`
+//         } else if (typeof val === 'string') {
+//             frontmatter += `${key}: "${val}"`
+//         } else if (Array.isArray(val)) {
+//             frontmatter += `${key}: [${val.map((el) => `"${el}"`).join(', ')}]`
+//         }
+
+//         frontmatter += `\n`
+//     }
+//     return `---\n${frontmatter}---\n`
+// }
+
+validateFrontmatter()

scripts/tsconfig.scripts.json

@@ -0,0 +1,8 @@
+{
+    "extends": "../tsconfig.json",
+    "include": ["src", "types"],
+    "compilerOptions": {
+        "outDir": "build",
+        "rootDir": "./src"
+    }
+}

src/components/Header.jsx

@@ -13,17 +13,11 @@ const SiteHeader = styled.header`
 `
 
 const ContainerHeader = styled.div`
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-
-    grid-template-areas: '
-        logo links
-    ';
-
-    justify-content: space-between;
-
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
     @media screen and (min-width: 40rem) {
-        min-width: 40rem;
+        flex-direction: row;
     }
 `
 

src/components/Layout.jsx

@@ -34,8 +34,10 @@ export function Layout({ children }) {
     const { menuOptions } = useSiteMetadata()
     return (
         <Paper>
-            <Header menuOptions={menuOptions} />
-            <Wrapper>{children}</Wrapper>
+            <Wrapper>
+                <Header menuOptions={menuOptions} />
+                {children}
+            </Wrapper>
             <Footer>
                 © {new Date().getFullYear()}&nbsp; Built with ❤️ using&nbsp;
                 <a href="https://www.gatsbyjs.org">Gatsby</a>

tsconfig.json

@@ -0,0 +1,35 @@
+{
+    // see https://www.typescriptlang.org/tsconfig to better understand tsconfigs
+    "include": ["src", "types"],
+    "compilerOptions": {
+        "module": "esnext",
+        "lib": ["dom", "esnext"],
+        "importHelpers": true,
+        // output .d.ts declaration files for consumers
+        "declaration": true,
+        // output .js.map sourcemap files for consumers
+        "sourceMap": true,
+        // match output dir to input dir. e.g. dist/index instead of dist/src/index
+        "rootDir": "./src",
+        // stricter type-checking for stronger correctness. Recommended by TS
+        "strict": true,
+        // linter checks for common issues
+        "noImplicitReturns": true,
+        "noFallthroughCasesInSwitch": true,
+        // noUnused* overlap with @typescript-eslint/no-unused-vars, can disable if duplicative
+        "noUnusedLocals": true,
+        "noUnusedParameters": true,
+        // use Node's module resolution algorithm, instead of the legacy TS one
+        "moduleResolution": "node",
+        // transpile JSX to React.createElement
+        "jsx": "react",
+        // interop between ESM and CJS modules. Recommended by TS
+        "esModuleInterop": true,
+        // significant perf increase by skipping checking .d.ts files, particularly those in node_modules. Recommended by TS
+        "skipLibCheck": true,
+        // error out if import and file system have a casing mismatch. Recommended by TS
+        "forceConsistentCasingInFileNames": true
+        // `tsdx build` ignores this option, but it is commonly used when type-checking separately with `tsc`
+        // "noEmit": true
+    }
+}