Various updates (#17)

* update favicons

Signed-off-by: Zander Martineau <[email protected]>

* rename static to public

Signed-off-by: Zander Martineau <[email protected]>

* move all source code into the src dir

Signed-off-by: Zander Martineau <[email protected]>

* cache bust

* try experimental flag

https://nextjs.org/blog/next-9-1#module--nomodule
vercel/next.js#7704

* fix paths

Signed-off-by: Zander Martineau <[email protected]>

* fix paths again

Signed-off-by: Zander Martineau <[email protected]>

.nvmrc

@@ -0,0 +1 @@
+10.13.0

.vscode/settings.json

@@ -1,6 +1,17 @@
 {
   "workbench.colorCustomizations": {
-    "statusBar.background": "#DB4E87",
-    "statusBar.foreground": "#fff"
-  }
+    "activityBar.background": "#e478a4",
+    "activityBar.foreground": "#15202b",
+    "activityBar.inactiveForeground": "#15202b99",
+    "activityBarBadge.background": "#b7ea95",
+    "activityBarBadge.foreground": "#15202b",
+    "titleBar.activeBackground": "#db4e87",
+    "titleBar.inactiveBackground": "#db4e8799",
+    "titleBar.activeForeground": "#e7e7e7",
+    "titleBar.inactiveForeground": "#e7e7e799",
+    "statusBar.background": "#db4e87",
+    "statusBarItem.hoverBackground": "#e478a4",
+    "statusBar.foreground": "#e7e7e7"
+  },
+  "peacock.color": "#DB4E87"
 }

next.config.js

@@ -1 +1 @@
-module.exports = { target: 'serverless' }
+module.exports = { target: 'serverless', experimental: { modern: true } }

now.json

@@ -11,11 +11,11 @@
       "dest": "/scripts/build-rss.js"
     },
     {
-      "src": "/static/(.*)",
+      "src": "/public/(.*)",
       "headers": {
         "cache-control": "s-maxage=31536000,immutable"
       },
-      "dest": "/static/$1"
+      "dest": "/$1"
     }
   ],
   "builds": [

package.json

@@ -8,7 +8,7 @@
     "build": "next build",
     "start": "NODE_ENV=production node server.js",
     "export": "next export",
-    "lint": "eslint 'pages/**/*.js' 'utils/**/*.js' 'components/**/*.js' 'designsystem/**/*.js'",
+    "lint": "eslint 'src/**/*.js'",
     "fix:js": "eslint --fix **/*.js",
     "format": "prettier --write **/*.js"
   },
@@ -20,34 +20,34 @@
   "dependencies": {
     "@libshin/random-array": "^1.1.2",
     "axios": "^0.19.0",
-    "cacheable-response": "^1.6.12",
-    "date-fns": "^2.1.0",
+    "cacheable-response": "^1.7.4",
+    "date-fns": "^2.5.1",
     "design-system-utils": "^1.5.0",
     "express": "^4.17.1",
     "fetch-everywhere": "^1.0.5",
     "format-number": "^3.0.0",
     "lru-cache": "^5.1.1",
     "modularscale-js": "^3.0.1",
-    "next": "^9.0.5",
+    "next": "^9.1.1",
     "prismic-dom": "^2.1.0",
     "prismic-javascript": "^2.1.1",
-    "prismic-reactjs": "^1.1.0",
+    "prismic-reactjs": "^1.1.1",
     "prismic-reactjs-custom": "^0.4.0",
-    "react": "^16.9.0",
-    "react-dom": "^16.9.0",
+    "react": "^16.10.2",
+    "react-dom": "^16.10.2",
     "rss": "^1.2.2",
-    "styled-components": "^4.3.2",
+    "styled-components": "^4.4.0",
     "sub-in": "^1.0.2"
   },
   "devDependencies": {
     "babel-eslint": "^10.0.3",
     "babel-plugin-styled-components": "^1.10.6",
-    "eslint": "^6.3.0",
-    "eslint-config-prettier": "^6.2.0",
+    "eslint": "^6.5.1",
+    "eslint-config-prettier": "^6.4.0",
     "eslint-plugin-import": "^2.18.2",
     "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-prettier": "^3.1.0",
-    "eslint-plugin-react": "^7.14.3",
+    "eslint-plugin-prettier": "^3.1.1",
+    "eslint-plugin-react": "^7.16.0",
     "prettier": "^1.18.2"
   }
 }

static/favicon/browserconfig.xml → public/favicon/browserconfig.xml

@@ -2,7 +2,7 @@
 <browserconfig>
     <msapplication>
         <tile>
-            <square150x150logo src="/static/favicon/mstile-150x150.png?v=4769nKP32a"/>
+            <square310x310logo src="/favicon/mstile-310x310.png"/>
             <TileColor>#15181c</TileColor>
         </tile>
     </msapplication>

public/favicon/html_code.html

@@ -0,0 +1,32 @@
+<link
+  rel="apple-touch-icon"
+  sizes="180x180"
+  href="/favicon/apple-touch-icon.png?v=4769nKP32b"
+/>
+<link
+  rel="icon"
+  type="image/png"
+  sizes="32x32"
+  href="/favicon/favicon-32x32.png?v=4769nKP32b"
+/>
+<link
+  rel="icon"
+  type="image/png"
+  sizes="16x16"
+  href="/favicon/favicon-16x16.png?v=4769nKP32b"
+/>
+<link rel="manifest" href="/favicon/site.webmanifest?v=4769nKP32b" />
+<link
+  rel="mask-icon"
+  href="/favicon/safari-pinned-tab.svg?v=4769nKP32b"
+  color="#15181c"
+/>
+<link rel="shortcut icon" href="/favicon/favicon.ico?v=4769nKP32b" />
+<meta name="apple-mobile-web-app-title" content="zander.wtf" />
+<meta name="application-name" content="zander.wtf" />
+<meta name="msapplication-TileColor" content="#15181c" />
+<meta
+  name="msapplication-config"
+  content="/favicon/browserconfig.xml?v=4769nKP32b"
+/>
+<meta name="theme-color" content="#15181c" />

public/favicon/site.webmanifest

@@ -0,0 +1,19 @@
+{
+  "name": "zander.wtf",
+  "short_name": "zander.wtf",
+  "icons": [
+    {
+      "src": "/favicon/android-chrome-192x192.png?v=4769nKP32b",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/favicon/android-chrome-512x512.png?v=4769nKP32b",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "theme_color": "#15181c",
+  "background_color": "#15181c",
+  "display": "standalone"
+}

components/Feed.js → src/components/Feed.js

@@ -1,7 +1,6 @@
 import styled from 'styled-components'
 import { ds } from '../designsystem'
 import { pxTo } from 'design-system-utils'
-import { paddedLinkStyles } from '../designsystem/globalStyles'
 
 export const FeedWrapper = styled.div`
   margin: ${pxTo(80, 25, 'rem')} 0;

src/components/Webmentions.js

@@ -0,0 +1,51 @@
+import React, { useEffect, useState } from 'react'
+import jsonp from 'jsonp'
+
+const WEBMENTIONS_BASE_PATH =
+  'https://webmention.io/api/mentions?perPage=50&jsonp=parseWebmentions&target='
+
+export const Webmentions = () => {
+  const [mentions, setMentions] = useState([])
+
+  useEffect(() => {
+    jsonp(
+      `${WEBMENTIONS_BASE_PATH}${window.location.href}`,
+      null,
+      (err, data) => {
+        if (err) {
+          console.error(err.message)
+        } else {
+          setMentions(data)
+        }
+      }
+    )
+  })
+
+  return mentions.map((item, index) => {
+    return (
+      <div className="note note--list h-entry" key={index}>
+        <div className="note__date">
+          <a
+            className="u-url dt-published"
+            href="https://keithjgrant.com/replies/2019/01/yes-do-it/"
+          >
+            {item.verified_date}
+          </a>
+        </div>
+        <div className="metadata text-left">
+          in reply to
+          <a
+            className="u-in-reply-to"
+            rel="in-reply-to"
+            href="https://twitter.com/SaraSoueidan/status/1084833046140981248"
+          >
+            a post on twitter.com
+          </a>
+        </div>
+        <div className="note__body e-content show-embeds">
+          <p>Yes! DO IT ✨</p>
+        </div>
+      </div>
+    )
+  })
+}

designsystem/globalStyles.js → src/designsystem/globalStyles.js

@@ -72,27 +72,27 @@ export default createGlobalStyle`
   @font-face {
     font-family: 'iA Writer Duospace';
     font-weight: normal;
-    src: url('/static/fonts/iAWriterDuospace/iAWriterDuospace-Regular.woff2') format('woff2');
+    src: url('/fonts/iAWriterDuospace/iAWriterDuospace-Regular.woff2') format('woff2');
   }
 
   @font-face {
     font-family: 'iA Writer Duospace';
     font-weight: normal;
     font-style: italic;
-    src: url('/static/fonts/iAWriterDuospace/iAWriterDuospace-Italic.woff2') format('woff2');
+    src: url('/fonts/iAWriterDuospace/iAWriterDuospace-Italic.woff2') format('woff2');
   }
 
   @font-face {
     font-family: 'iA Writer Duospace';
     font-weight: bold;
-    src: url('/static/fonts/iAWriterDuospace/iAWriterDuospace-Bold.woff2') format('woff2');
+    src: url('/fonts/iAWriterDuospace/iAWriterDuospace-Bold.woff2') format('woff2');
   }
 
   @font-face {
     font-family: 'iA Writer Duospace';
     font-weight: bold;
     font-style: italic;
-    src: url('/static/fonts/iAWriterDuospace/iAWriterDuospace-BoldItalic.woff2') format('woff2');
+    src: url('/fonts/iAWriterDuospace/iAWriterDuospace-BoldItalic.woff2') format('woff2');
   }
 
   html {

pages/_document.js → src/pages/_document.js

@@ -3,7 +3,6 @@ import { ServerStyleSheet } from 'styled-components'
 
 export default class MyDocument extends Document {
   static async getInitialProps(ctx) {
-    console.log('TCL: MyDocument -> getInitialProps -> ctx.asPath', ctx.asPath)
     const sheet = new ServerStyleSheet()
     const originalRenderPage = ctx.renderPage
 
@@ -53,75 +52,64 @@ export default class MyDocument extends Document {
           <meta name="geo.region" content="GB" />
           <meta name="geo.placename" content="London" />
           <link rel="dns-prefetch" href="https://zanderwtf.prismic.io" />
-          <link rel="dns-prefetch" href="https://pinboard-api.now.sh" />
-          <link rel="preconnect" href="https://pinboard-api.now.sh" />
           <link rel="preconnect" href="https://zanderwtf.prismic.io" />
           <link
             rel="prefetch"
-            href="https://zander.wtf/static/fonts/iAWriterDuospace/iAWriterDuospace-Regular.woff2"
+            href="/fonts/iAWriterDuospace/iAWriterDuospace-Regular.woff2"
           />
           <link
             rel="prefetch"
-            href="https://zander.wtf/static/fonts/iAWriterDuospace/iAWriterDuospace-Italic.woff2"
+            href="/fonts/iAWriterDuospace/iAWriterDuospace-Italic.woff2"
           />
           <link
             rel="prefetch"
-            href="https://zander.wtf/static/fonts/iAWriterDuospace/iAWriterDuospace-Bold.woff2"
+            href="/fonts/iAWriterDuospace/iAWriterDuospace-Bold.woff2"
           />
           <link
             rel="prefetch"
-            href="https://zander.wtf/static/fonts/iAWriterDuospace/iAWriterDuospace-BoldItalic.woff2"
+            href="/fonts/iAWriterDuospace/iAWriterDuospace-BoldItalic.woff2"
           />
 
           <link
             rel="apple-touch-icon"
             sizes="180x180"
-            href="https://zander.wtf/static/favicon/apple-touch-icon.png?v=4769nKP32a"
+            href="/favicon/apple-touch-icon.png?v=4769nKP32b"
           />
           <link
             rel="icon"
             type="image/png"
             sizes="32x32"
-            href="https://zander.wtf/static/favicon/favicon-32x32.png?v=4769nKP32a"
+            href="/favicon/favicon-32x32.png?v=4769nKP32b"
           />
           <link
             rel="icon"
             type="image/png"
             sizes="16x16"
-            href="https://zander.wtf/static/favicon/favicon-16x16.png?v=4769nKP32a"
-          />
-          <link
-            rel="manifest"
-            href="https://zander.wtf/static/favicon/site.webmanifest?v=4769nKP32a"
+            href="/favicon/favicon-16x16.png?v=4769nKP32b"
           />
+          <link rel="manifest" href="/favicon/site.webmanifest?v=4769nKP32b" />
           <link
             rel="mask-icon"
-            href="https://zander.wtf/static/favicon/safari-pinned-tab.svg?v=4769nKP32a"
+            href="/favicon/safari-pinned-tab.svg?v=4769nKP32b"
             color="#15181c"
           />
-          <link
-            rel="shortcut icon"
-            href="https://zander.wtf/static/favicon/favicon.ico?v=4769nKP32a"
-          />
+          <link rel="shortcut icon" href="/favicon/favicon.ico?v=4769nKP32b" />
           <meta name="apple-mobile-web-app-title" content="zander.wtf" />
           <meta name="application-name" content="zander.wtf" />
           <meta name="msapplication-TileColor" content="#15181c" />
           <meta
             name="msapplication-config"
-            content="https://zander.wtf/static/favicon/browserconfig.xml?v=4769nKP32a"
+            content="/favicon/browserconfig.xml?v=4769nKP32b"
           />
           <meta name="theme-color" content="#15181c"></meta>
           <meta name="twitter:card" content="summary" />
           <meta name="twitter:site" content="@mrmartineau" />
           <meta property="og:locale" content="en_GB" />
-          <meta
-            property="og:image"
-            content="https://zander.wtf/static/opengraph.jpg"
-          />
+          <meta property="og:image" content="/opengraph.jpg" />
           <meta property="og:url" content="https://zander.wtf" />
           <link
             rel="alternate"
-            href="https://zander.wtf/atom.xml"
+            href="/atom.xml"
             type="application/atom+xml"
             title="RSS Feed"
           />