restructure template components

config.js

@@ -38,5 +38,9 @@ module.exports = {
   darkModeConfig: {
     classNameDark: 'dark',
     classNameLight: 'light'
+  },
+  ad: {
+    title: 'Ledger Nano X: Keep your crypto secure, everywhere.',
+    link: 'https://shop.ledger.com/pages/ledger-nano-x?r=3176d705002a'
   }
 }

gatsby/createPages.js

@@ -1,5 +1,5 @@
 const path = require('path')
-const postsTemplate = path.resolve('src/templates/Posts.tsx')
+const postsTemplate = path.resolve('src/components/templates/Posts.tsx')
 const { itemsPerPage } = require('../config')
 
 const redirects = [
@@ -24,7 +24,7 @@ function getPaginationData(i, numPages, slug) {
 }
 
 exports.generatePostPages = (createPage, posts) => {
-  const postTemplate = path.resolve('src/templates/Post.tsx')
+  const postTemplate = path.resolve('src/components/templates/Post/index.tsx')
 
   // Create Post pages
   posts.forEach(post => {

jest/__fixtures__/meta.json

@@ -33,7 +33,11 @@
       "rss": "/feed.xml",
       "jsonfeed": "/feed.json",
       "itemsPerPage": 20,
-      "repoContentPath": "https://github.com/kremalicious/blog/tree/master/content"
+      "repoContentPath": "https://github.com/kremalicious/blog/tree/master/content",
+      "ad": {
+        "title": "",
+        "link": ""
+      }
     }
   }
 }

src/@types/Site.d.ts

@@ -30,4 +30,8 @@ export interface Site {
     classNameDark: string
     classNameLight: string
   }
+  ad: {
+    title: string
+    link: string
+  }
 }

src/components/atoms/Ad.module.scss

@@ -0,0 +1,21 @@
+@import 'variables';
+
+.ad {
+  font-style: italic;
+  display: block;
+  text-align: center;
+  position: relative;
+  margin-top: $spacer * 3;
+  margin-bottom: $spacer;
+
+  &::before {
+    content: 'AFFILIATE';
+    font-size: $font-size-mini;
+    position: absolute;
+    width: 100%;
+    left: 0;
+    top: 100%;
+    color: $text-color-light;
+    text-align: center;
+  }
+}

src/components/atoms/Ad.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import styles from './Ad.module.scss'
+import { useSiteMetadata } from '../../hooks/use-site-metadata'
+
+interface WindowWithMatomo extends Window {
+  _paq?: any
+}
+
+export default function Ad() {
+  const { ad } = useSiteMetadata()
+
+  function handleClick(e: React.MouseEvent) {
+    e.preventDefault()
+    const { _paq } = window as WindowWithMatomo
+    _paq && _paq.push(['trackEvent', 'Ad Interaction', 'click'])
+
+    window.open(ad.link)
+  }
+
+  return (
+    <a
+      className={styles.ad}
+      href={ad.link}
+      onClick={(e: React.MouseEvent) => handleClick(e)}
+    >
+      {ad.title}
+    </a>
+  )
+}

src/components/templates/Page.module.scss

@@ -1,6 +1,6 @@
 @import 'variables';
 
 .pageTitle {
-  composes: archivetitle from '../templates/Posts.module.scss';
+  composes: archivetitle from './Posts.module.scss';
   margin-bottom: $spacer * 2;
 }

src/components/templates/Page.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Helmet } from 'react-helmet'
-import { Post } from '../@types/Post'
+import { Post } from '../../@types/Post'
-import SEO from '../components/atoms/SEO'
+import SEO from '../atoms/SEO'
 import styles from './Page.module.scss'
 
 export default function Page({

src/components/templates/Post/Actions.module.scss

@@ -4,7 +4,8 @@
 .actions {
   @include breakoutviewport;
 
-  margin-top: $spacer * 3;
+  margin-top: $spacer * 2;
+  margin-bottom: $spacer * 2;
   background: rgba(#fff, 0.5);
   padding-top: $spacer;
   padding-bottom: $spacer;

src/components/templates/Post/index.test.tsx

@@ -1,10 +1,10 @@
 import React from 'react'
 import { render } from '@testing-library/react'
 
-import Post from './Post'
+import Post from '.'
-import post from '../../jest/__fixtures__/post.json'
+import post from '../../../../jest/__fixtures__/post.json'
-import postWithMore from '../../jest/__fixtures__/postWithMore.json'
+import postWithMore from '../../../../jest/__fixtures__/postWithMore.json'
-import link from '../../jest/__fixtures__/link.json'
+import link from '../../../../jest/__fixtures__/link.json'
 
 describe('Post', () => {
   const pageContext = {

src/components/templates/Post/index.tsx

@@ -1,19 +1,20 @@
 import React from 'react'
 import { Helmet } from 'react-helmet'
 import { graphql } from 'gatsby'
-import { Post as PostMetadata } from '../@types/Post'
+import { Post as PostMetadata } from '../../../@types/Post'
-import Exif from '../components/atoms/Exif'
+import Exif from '../../atoms/Exif'
-import SEO from '../components/atoms/SEO'
+import SEO from '../../atoms/SEO'
-import RelatedPosts from '../components/molecules/RelatedPosts'
+import RelatedPosts from '../../molecules/RelatedPosts'
-import PostTitle from '../components/organisms/Post/Title'
+import PostTitle from './Title'
-import PostLead from '../components/organisms/Post/Lead'
+import PostLead from './Lead'
-import PostContent from '../components/organisms/Post/Content'
+import PostContent from './Content'
-import PostActions from '../components/organisms/Post/Actions'
+import PostActions from './Actions'
-import PostLinkActions from '../components/organisms/Post/LinkActions'
+import PostLinkActions from './LinkActions'
-import PostMeta from '../components/organisms/Post/Meta'
+import PostMeta from './Meta'
-import PrevNext from '../components/organisms/Post/PrevNext'
+import PostAd from '../../atoms/Ad'
-import styles from './Post.module.scss'
+import PrevNext from './PrevNext'
-import { Image } from '../components/atoms/Image'
+import styles from './index.module.scss'
+import { Image } from '../../atoms/Image'
 
 export default function Post({
   data,
@@ -58,8 +59,9 @@ export default function Post({
         {type !== 'photo' && <PostContent post={post} />}
 
         {type === 'link' && <PostLinkActions slug={slug} linkurl={linkurl} />}
-        <PostActions slug={slug} githubLink={githubLink} />
         <PostMeta post={post} />
+        <PostActions slug={slug} githubLink={githubLink} />
+        <PostAd />
       </article>
 
       <RelatedPosts photos={type === 'photo'} tags={tags} />

src/components/templates/Posts.test.tsx

@@ -3,7 +3,7 @@ import { render } from '@testing-library/react'
 import { createHistory, createMemorySource } from '@reach/router'
 
 import Posts from './Posts'
-import data from '../../jest/__fixtures__/posts.json'
+import data from '../../../jest/__fixtures__/posts.json'
 
 describe('Post', () => {
   const history = createHistory(createMemorySource('/photos'))

src/components/templates/Posts.tsx

@@ -1,16 +1,16 @@
 import React from 'react'
 import { Link, graphql } from 'gatsby'
-import { Post } from '../@types/Post'
+import { Post } from '../../@types/Post'
-import Pagination from '../components/molecules/Pagination'
+import Pagination from '../molecules/Pagination'
-import Featured from '../components/molecules/Featured'
+import Featured from '../molecules/Featured'
-import PostTitle from '../components/organisms/Post/Title'
+import PostTitle from './Post/Title'
-import PostLead from '../components/organisms/Post/Lead'
+import PostLead from './Post/Lead'
-import PostContent from '../components/organisms/Post/Content'
+import PostContent from './Post/Content'
-import PostMore from '../components/organisms/Post/More'
+import PostMore from './Post/More'
-import PostLinkActions from '../components/organisms/Post/LinkActions'
+import PostLinkActions from './Post/LinkActions'
-import SEO from '../components/atoms/SEO'
+import SEO from '../atoms/SEO'
 import styles from './Posts.module.scss'
-import { Image } from '../components/atoms/Image'
+import { Image } from '../atoms/Image'
 
 export default function Posts({
   data,

src/hooks/use-site-metadata.ts

@@ -32,6 +32,10 @@ const query = graphql`
           classNameDark
           classNameLight
         }
+        ad {
+          title
+          link
+        }
       }
     }
   }

src/pages/404.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { Link } from 'gatsby'
-import Page from '../templates/Page'
+import Page from '../components/templates/Page'
 import styles from './404.module.scss'
 
 const page = {

src/pages/photos.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { graphql, Link } from 'gatsby'
-import Page from '../templates/Page'
+import Page from '../components/templates/Page'
 import { Post } from '../@types/Post'
 import { Image } from '../components/atoms/Image'
 import styles from './photos.module.scss'

src/pages/tags.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { graphql } from 'gatsby'
-import Page from '../templates/Page'
+import Page from '../components/templates/Page'
 import Tag from '../components/atoms/Tag'
 import styles from './tags.module.scss'