remove src/ and update importFromGoogleDocs

app/Header.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { usePathname } from 'next/navigation'
-import Link from '../src/components/Link'
+import Link from './components/Link'
 
 export default function Header() {
   const pathname = usePathname()

app/becoming-an-independent-consultant/article.tsx

@@ -1,12 +1,6 @@
-import Image from '../../src/components/image/Image'
-import {
-  H2,
-  H3,
-  P,
-  Ul,
-  UlReferences,
-} from '../../src/components/article/Common'
-import Link from '../../src/components/Link'
+import Image from '../components/image/Image'
+import { H2, H3, P, Ul, UlReferences } from '../components/article/Common'
+import Link from '../components/Link'
 
 import independent from './independent.jpg'
 import consultantVsContractors from './consultant-vs-contractors.jpg'

app/becoming-an-independent-consultant/page.tsx

@@ -1,6 +1,6 @@
 import { article } from './article'
 import { Metadata } from 'next'
-import { Article } from '../../src/components/article/Article'
+import { Article } from '../components/article/Article'
 
 export const metadata: Metadata = {
   title: article.title,

app/being-considerate/article.tsx

@@ -1,5 +1,5 @@
-import { H2, P } from '../../src/components/article/Common'
-import Image from '../../src/components/image/Image'
+import { H2, P } from '../components/article/Common'
+import Image from '../components/image/Image'
 
 import tBarLift from './t-bar-lift.jpg'
 import tBarLiftLarge from './t-bar-lift-large.jpg'

app/being-considerate/page.tsx

@@ -1,6 +1,6 @@
 import { article } from './article'
 import { Metadata } from 'next'
-import { Article } from '../../src/components/article/Article'
+import { Article } from '../components/article/Article'
 
 export const metadata: Metadata = {
   title: article.title,

app/cargo-culting-in-software/article.tsx

@@ -1,6 +1,6 @@
-import Image from '../../src/components/image/Image'
-import { H2, H3, P, UlReferences } from '../../src/components/article/Common'
-import Link from '../../src/components/Link'
+import Image from '../components/image/Image'
+import { H2, H3, P, UlReferences } from '../components/article/Common'
+import Link from '../components/Link'
 
 import vanuatuJohnFrumDay from './vanuatu-john-frum-day.jpg'
 import microservices from './microservices.png'

app/cargo-culting-in-software/page.tsx

@@ -1,6 +1,6 @@
 import { article } from './article'
 import { Metadata } from 'next'
-import { Article } from '../../src/components/article/Article'
+import { Article } from '../components/article/Article'
 
 export const metadata: Metadata = {
   title: article.title,

src/components/article/Article.tsx → app/components/article/Article.tsx

@@ -1,8 +1,8 @@
 import { StaticImageData } from 'next/image'
 import { ReactNode } from 'react'
 import { H1 } from './Common'
-import { unixTimestampToMonthYear } from '../../utils'
 import InPageNavigation from './InPageNavigation'
+import { unixTimestampToMonthYear } from '../../utils'
 
 type Props = {
   thumbnail: StaticImageData

src/components/article/Common.tsx → app/components/article/Common.tsx

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react'
+
 import { getSlug } from '../../utils'
 
 type PropsString = {

src/components/article/InPageNavigation.tsx → app/components/article/InPageNavigation.tsx

@@ -2,8 +2,8 @@
 
 import React, { useState, useEffect } from 'react'
 import debounce from 'lodash.debounce'
-import { classNames, getSlug } from '../../utils'
 import Link from '../Link'
+import { classNames, getSlug } from '../../utils'
 
 /*
   some hash links, when clicked, result in 0 < getBoundingClientRect().top < 1

src/components/image/Image.tsx → app/components/image/Image.tsx

@@ -3,8 +3,8 @@
 import { useEffect, useState } from 'react'
 import NextImage, { StaticImageData } from 'next/image'
 import calculateZoom from './calculateZoom'
-import { classNames } from '../../utils'
 import { Caption } from '../article/Caption'
+import { classNames } from '../../utils'
 
 /*
   If zoomSrc is provided:

src/components/image/ImageFloat.tsx → app/components/image/ImageFloat.tsx

@@ -1,6 +1,6 @@
 import NextImage, { StaticImageData } from 'next/image'
-import { classNames } from '../../utils'
 import { Caption } from '../article/Caption'
+import { classNames } from '../../utils'
 
 type Props = {
   data: StaticImageData

app/getArticles.ts

@@ -0,0 +1,41 @@
+import { readdir, stat } from 'fs/promises'
+import path from 'path'
+
+const ARTICLES_DIRECTORY = path.join(process.cwd(), 'app')
+
+export async function getArticles() {
+  const slugs: string[] = []
+
+  async function readDirectory(dir) {
+    const entries = await readdir(dir)
+
+    for (const entry of entries) {
+      const entryPath = path.join(dir, entry)
+
+      if (!(await stat(entryPath)).isDirectory()) {
+        continue
+      }
+
+      try {
+        await stat(path.join(entryPath, 'article.tsx'))
+      } catch (e) {
+        continue
+      }
+
+      slugs.push(entry)
+    }
+  }
+
+  await readDirectory(ARTICLES_DIRECTORY)
+
+  const articles = await Promise.all(
+    slugs.map((slug) =>
+      import(`./${slug}/article`).then((m) => ({
+        ...m.article,
+        slug,
+      })),
+    ),
+  )
+
+  return articles.sort((a, b) => b.published - a.published)
+}

app/how-not-to-design-an-sdk/article.tsx

@@ -1,22 +1,22 @@
-import Image from '../../src/components/image/Image'
+import Image from '../components/image/Image'
 import {
   CodeInline,
   H2,
   H3,
   P,
   BlockQuote,
   UlReferences,
-} from '../../src/components/article/Common'
-import Link from '../../src/components/Link'
-import Code from '../../src/components/article/Code'
+} from '../components/article/Common'
+import Link from '../components/Link'
+import Code from '../components/article/Code'
 
 import feelsBadMan from './feels-bad-man.png'
 import npmInstallStart from './npm-install-start.png'
 import excessiveInformation from './excessive-information.png'
 import excessiveInformationLarge from './excessive-information-large.png'
 import objectOrientedProgrammer from './object-oriented-programmer.png'
 import objectOrientedProgrammerSmall from './object-oriented-programmer-small.png'
-import ImageFloat from '../../src/components/image/ImageFloat'
+import ImageFloat from '../components/image/ImageFloat'
 
 const headings = [
   'Azure Blob Storage',

app/how-not-to-design-an-sdk/page.tsx

@@ -1,6 +1,6 @@
 import { article } from './article'
 import { Metadata } from 'next'
-import { Article } from '../../src/components/article/Article'
+import { Article } from '../components/article/Article'
 
 export const metadata: Metadata = {
   title: article.title,

app/layout.tsx

@@ -1,7 +1,7 @@
 import React, { ReactNode } from 'react'
 import { Roboto_Flex } from 'next/font/google'
 import { Metadata } from 'next'
-import Footer from '../src/components/footer/Footer'
+import Footer from './components/footer/Footer'
 import Header from './Header'
 import Script from 'next/script'
 

app/page.tsx

@@ -1,7 +1,7 @@
-import Link from '../src/components/Link'
+import Link from './components/Link'
 import NextImage from 'next/image'
-import { unixTimestampToMonthYear } from '../src/utils'
-import { getArticles } from './utils'
+import { unixTimestampToMonthYear } from './utils'
+import { getArticles } from './getArticles'
 
 export default async function Home() {
   const articles = await getArticles()

app/sql-injection-prevention/article.tsx

@@ -1,6 +1,6 @@
-import Image from '../../src/components/image/Image'
-import Code from '../../src/components/article/Code'
-import { H2, P } from '../../src/components/article/Common'
+import Image from '../components/image/Image'
+import Code from '../components/article/Code'
+import { H2, P } from '../components/article/Common'
 
 import postgresqlDataInsertion from './postgresql-data-insertion.png'
 

app/sql-injection-prevention/page.tsx

@@ -1,6 +1,6 @@
 import { article } from './article'
 import { Metadata } from 'next'
-import { Article } from '../../src/components/article/Article'
+import { Article } from '../components/article/Article'
 
 export const metadata: Metadata = {
   title: article.title,

app/the-rise-of-javascript-frameworks/article.tsx

@@ -1,6 +1,6 @@
-import { H2, P } from '../../src/components/article/Common'
-import Image from '../../src/components/image/Image'
-import Code from '../../src/components/article/Code'
+import { H2, P } from '../components/article/Common'
+import Image from '../components/image/Image'
+import Code from '../components/article/Code'
 
 import angularReactVueTrends from './angular-react-vue-trends.png'
 import barebonesMessagingApp from './barebones-messaging-app.png'

app/the-rise-of-javascript-frameworks/page.tsx

@@ -1,6 +1,6 @@
 import { article } from './article'
 import { Metadata } from 'next'
-import { Article } from '../../src/components/article/Article'
+import { Article } from '../components/article/Article'
 
 export const metadata: Metadata = {
   title: article.title,

app/the-store-that-kept-on-giving/article.tsx

@@ -1,8 +1,8 @@
-import { CodeInline, H2, P, Ul } from '../../src/components/article/Common'
-import Code from '../../src/components/article/Code'
+import { CodeInline, H2, P, Ul } from '../components/article/Common'
+import Code from '../components/article/Code'
 import oprahMeme from './oprah-meme.jpg'
 import sfccCartoon from './salesforce-commerce-cloud-cartoon.png'
-import ImageFloat from '../../src/components/image/ImageFloat'
+import ImageFloat from '../components/image/ImageFloat'
 
 const headings = [
   'A shiny brand-new store',

app/the-store-that-kept-on-giving/page.tsx

@@ -1,6 +1,6 @@
 import { article } from './article'
 import { Metadata } from 'next'
-import { Article } from '../../src/components/article/Article'
+import { Article } from '../components/article/Article'
 
 export const metadata: Metadata = {
   title: article.title,

app/utils.ts

@@ -1,33 +1,18 @@
-import { readdir, stat } from 'fs/promises'
-import path from 'path'
-
-const ARTICLES_DIRECTORY = path.join(process.cwd(), 'app')
-
-export async function getArticles() {
-  const slugs: string[] = []
-
-  async function readDirectory(dir) {
-    const entries = await readdir(dir)
-
-    for (const entry of entries) {
-      const entryPath = path.join(dir, entry)
-
-      if ((await stat(entryPath)).isDirectory()) {
-        slugs.push(entry)
-      }
-    }
-  }
+export function classNames(...classes: string[]) {
+  return classes.filter(Boolean).join(' ')
+}
 
-  await readDirectory(ARTICLES_DIRECTORY)
+export function unixTimestampToMonthYear(unixTimestamp: number) {
+  const date = new Date(unixTimestamp * 1000)
+  const month = new Intl.DateTimeFormat('en-US', { month: 'long' }).format(date)
+  const year = date.getFullYear()
 
-  const articles = await Promise.all(
-    slugs.map((slug) =>
-      import(`./${slug}/article`).then((m) => ({
-        ...m.article,
-        slug,
-      })),
-    ),
-  )
+  return `${month}, ${year}`
+}
 
-  return articles.sort((a, b) => b.published - a.published)
+export function getSlug(text: string) {
+  return text
+    .toLowerCase()
+    .replace(/\s+/g, '-')
+    .replace(/[^0-9a-z\-]/gi, '')
 }

scripts/importFromGoogleDocs.ts

@@ -1,7 +1,8 @@
 import { docs, auth } from '@googleapis/docs'
-import { writeFile } from 'fs/promises'
+import { writeFile, readFile, mkdir } from 'fs/promises'
 import childProcess from 'child_process'
 import util from 'util'
+import { getSlug } from '../app/utils'
 
 const exec = util.promisify(childProcess.exec)
 
@@ -40,8 +41,6 @@ async function main() {
 
   const { title, body } = data
 
-  const filename = `${title.replace(/\s/g, '-').toLowerCase()}.tsx`
-
   const headings = []
   const headingLevels = new Set()
   const elements = []
@@ -70,26 +69,26 @@ async function main() {
       elements.push(`<P>${content}</P>`)
     })
 
-  const output = `
+  const articleOutput = `
     ${
       headingLevels.size > 0 &&
       `import { ${Array.from(headingLevels).join(
         ', ',
-      )} } from '../src/components/article/Common';`
+      )} } from '../components/article/Common';`
     }
-    import { P } from '../src/components/article/Common';
+    import { P } from '../components/article/Common';
     
     const headings = [
       ${headings.map((heading) => `'${heading}',`).join('\n')}
     ]
     
-    const body = () => (
+    const body = (
       <>
         ${elements.join('\n')}
       </>
     )
     
-    const article = {
+    export const article = {
       thumbnail: '',
       title: '${title}',
       teaser: '',
@@ -98,15 +97,21 @@ async function main() {
       headings,
       body,
     }
-    
-    export default article
   `
 
-  const filepath = `${__dirname}/${filename}`
+  const slug = getSlug(title)
+
+  await mkdir(`${__dirname}/../app/${slug}`, { recursive: true })
 
-  await writeFile(filepath, output)
+  const articleFilePath = `${__dirname}/../app/${slug}/article.tsx`
+  await writeFile(articleFilePath, articleOutput)
+  await exec(`prettier ${articleFilePath} --write`)
 
-  await exec(`prettier ${filepath} --write`)
+  const pageOutput = await readFile(
+    `${__dirname}/../app/cargo-culting-in-software/page.tsx`,
+    'utf8',
+  )
+  await writeFile(`${__dirname}/../app/${slug}/page.tsx`, pageOutput)
 
   process.exit()
 }