changes

README.md

@@ -228,7 +228,7 @@ npm run new photo /path/to/photo.jpg
 ```
 
 - [`scripts/new.js`](scripts/new.js)
-- [`scripts/new.md`](scripts/new.md)
+- [`scripts/new-article.md`](scripts/new-article.md)
 - [`scripts/new-photo.md`](scripts/new-photo.md)
 
 ## 🚚 Deployment

package.json

@@ -20,7 +20,7 @@
     "format": "prettier --ignore-path .gitignore --write '**/*.{js,jsx,ts,tsx,md,json,css,scss}'",
     "tsc": "tsc --noEmit",
     "deploy": "./scripts/deploy-s3.sh",
-    "new": "babel-node ./scripts/new.js"
+    "new": "ts-node ./scripts/new.ts"
   },
   "browserslist": [
     ">0.2%",
@@ -86,12 +86,11 @@
     "use-dark-mode": "^2.3.1"
   },
   "devDependencies": {
-    "@babel/node": "^7.12.16",
-    "@babel/preset-typescript": "^7.12.16",
     "@svgr/webpack": "^5.5.0",
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/react": "^11.2.5",
     "@types/classnames": "^2.2.11",
+    "@types/fs-extra": "^9.0.7",
     "@types/jest": "^26.0.20",
     "@types/loadable__component": "^5.13.3",
     "@types/lunr": "^2.3.3",
@@ -129,6 +128,7 @@
     "stylelint-config-prettier": "^8.0.2",
     "stylelint-config-standard": "^20.0.0",
     "stylelint-prettier": "^1.1.2",
+    "ts-node": "^9.1.1",
     "typescript": "^4.1.5"
   },
   "repository": {

scripts/.babelrc

@@ -1,3 +0,0 @@
-{
-  "presets": ["@babel/env"]
-}

scripts/new.ts

@@ -5,7 +5,7 @@ import ora from 'ora'
 import fastExif from 'fast-exif'
 import iptc from 'node-iptc'
 
-const templatePath = path.join(__dirname, 'new.md')
+const templatePath = path.join(__dirname, 'new-article.md')
 const templatePathPhoto = path.join(__dirname, 'new-photo.md')
 const template = fs.readFileSync(templatePath).toString()
 const templatePhoto = fs.readFileSync(templatePathPhoto).toString()
@@ -22,12 +22,12 @@ const isPhoto = process.argv[2] === 'photo'
 spinner.text = `Adding '${title}'.`
 
 let titleSlug = slugify(title, { lower: true })
-const postsPath = path.join('.', 'content', 'posts')
+const postsPath = path.join('.', 'content', 'articles')
 const photosPath = path.join('.', 'content', 'photos')
 
 let date = new Date().toISOString()
 
-async function getIptc(imagePath) {
+async function getIptc(imagePath: string) {
   return new Promise((resolve, reject) => {
     fs.readFile(imagePath, (err, data) => {
       if (err) reject(err)
@@ -37,7 +37,7 @@ async function getIptc(imagePath) {
   })
 }
 
-async function getExif(imagePath) {
+async function getExif(imagePath: string) {
   let exifData
   try {
     exifData = await fastExif.read(imagePath, true)
@@ -45,7 +45,7 @@ async function getExif(imagePath) {
     return null
   }
 
-  let iptcData
+  let iptcData = {}
   try {
     iptcData = await getIptc(imagePath)
   } catch (error) {
@@ -115,5 +115,5 @@ if (isPhoto) {
   fs.outputFile(file, newContents)
     .then(() => fs.readFile(file, 'utf8'))
     .then(() => spinner.succeed(`New post '${title}' created.`))
-    .catch((err) => spinner.fail(`Error creating post: ${err}`))
+    .catch((err: Error) => spinner.fail(`Error creating post: ${err.message}`))
 }

src/@types/node_modules.d.ts

@@ -3,6 +3,8 @@ declare module 'pigeon-marker'
 declare module 'react-blockies'
 declare module 'remark-react'
 declare module 'unified'
+declare module 'fast-exif'
+declare module 'node-iptc'
 
 declare module 'ethereum-blockies' {
   export function toDataUrl(address: string): string

src/components/atoms/Exif.module.scss

@@ -20,7 +20,7 @@
     display: block;
     flex: 1 1 20%;
     white-space: nowrap;
-    padding: $spacer $spacer / 1.5;
+    padding: $spacer;
     border-bottom: 1px dashed $brand-grey-dimmed;
 
     svg {
@@ -45,7 +45,6 @@
     span {
       border-left: 1px dashed $brand-grey-dimmed;
       border-bottom: 0;
-      padding: $spacer * 1.5 $spacer;
 
       &,
       &:first-child {

src/components/molecules/PostTeaser.module.scss

@@ -5,7 +5,7 @@
   padding-left: 0.2rem;
   padding-right: 0.2rem;
   margin-top: $spacer / 2;
-  margin-bottom: $spacer / 6;
+  margin-bottom: 0;
   font-size: $font-size-base;
   transition: color 0.2s ease-out;
 }

src/components/molecules/PostTeaser.tsx

@@ -31,10 +31,12 @@ export const postTeaserQuery = graphql`
 
 export default function PostTeaser({
   post,
-  toggleSearch
+  toggleSearch,
+  hideDate
 }: {
   post: Partial<Post>
   toggleSearch?: () => void
+  hideDate?: boolean
 }): ReactElement {
   const { image, title, type, updated } = post.frontmatter
   const { slug, date } = post.fields
@@ -57,7 +59,7 @@ export default function PostTeaser({
       )}
 
       <PostTitle slug={slug} title={title} className={styles.title} />
-      {date && (
+      {date && !hideDate && (
         <div className={styles.time}>
           <Time date={date} />
         </div>

src/components/templates/Archive.module.scss

@@ -13,5 +13,5 @@
 }
 
 .posts h1 {
-  font-size: $font-size-h3;
+  font-size: $font-size-h4;
 }

src/components/templates/Post/index.tsx

@@ -59,8 +59,8 @@ export default function Post({
 
         {type === 'photo' ? (
           <>
-            <PostContent post={post} />
             {image && image.fields && <Exif exif={image.fields.exif} />}
+            <PostContent post={post} />
           </>
         ) : (
           <PostContent post={post} />

src/pages/index.module.scss

@@ -19,13 +19,13 @@
 
 .articles {
   @media (min-width: $screen-sm) {
-    gap: $spacer * 2;
+    gap: $spacer * 1.5;
     grid-template-columns: repeat(2, 1fr);
   }
 }
 
 .articles:first-of-type h1 {
-  font-size: $font-size-h3;
+  font-size: $font-size-h4;
 }
 
 .articlesLast {

src/pages/index.tsx

@@ -7,7 +7,7 @@ import { PhotoThumb } from '../components/templates/Photos'
 import PostMore from '../components/templates/Post/More'
 import styles from './index.module.scss'
 
-export default function Home(props: PageProps): ReactElement {
+export default function Home({ data }: PageProps): ReactElement {
   return (
     <>
       <SEO />
@@ -17,17 +17,17 @@ export default function Home(props: PageProps): ReactElement {
         </h2>
 
         <div className={styles.articles}>
-          {(props.data as any).latestArticles.edges
+          {(data as any).latestArticles.edges
             .slice(0, 2)
             .map(({ node }: { node: Post }) => (
-              <PostTeaser key={node.id} post={node} />
+              <PostTeaser key={node.id} post={node} hideDate />
             ))}
         </div>
         <div className={`${styles.articles} ${styles.articlesLast}`}>
-          {(props.data as any).latestArticles.edges
+          {(data as any).latestArticles.edges
             .slice(2, 8)
             .map(({ node }: { node: Post }) => (
-              <PostTeaser key={node.id} post={node} />
+              <PostTeaser key={node.id} post={node} hideDate />
             ))}
         </div>
       </section>
@@ -38,11 +38,9 @@ export default function Home(props: PageProps): ReactElement {
         </h2>
 
         <div className={styles.photos}>
-          {(props.data as any).latestPhotos.edges.map(
-            ({ node }: { node: Post }) => (
-              <PhotoThumb key={node.id} photo={node} />
-            )
-          )}
+          {(data as any).latestPhotos.edges.map(({ node }: { node: Post }) => (
+            <PhotoThumb key={node.id} photo={node} />
+          ))}
         </div>
       </section>
     </>

tsconfig.json

@@ -13,5 +13,5 @@
     "noImplicitAny": true
   },
   "exclude": ["node_modules", "public", ".cache", "*.js"],
-  "include": ["./src/**/*", "./jest/**/*"]
+  "include": ["./src/**/*", "./scripts/*.ts", "./jest/**/*"]
 }