V4 (#1361)

* Move html colors to classes

* Refactor routing and navbar

* Unify SEO definitions, set some base url and email strings

* Lots of refactoring, cleaning up, polish

* Fix variable fonts, typography, some dark mode polish

* Clean up bookmarks, ama, about

* Fix stack font weight

* Restructure pages, make mono default type

* Polish and pages cleanup

* Projects pages cleanup

* Dark mode polish

* Start repopulating home

* Copy, type polish

* Work on changelog

* Fix 404, typescript errors

* Responsive polish and cleanup

* Yarn and fix tests

* Remove husky

.eslintrc.json

@@ -4,8 +4,7 @@
     "plugin:react/recommended",
     "plugin:@typescript-eslint/recommended",
     "prettier/@typescript-eslint",
-    "plugin:prettier/recommended",
-    "plugin:mdx/recommended"
+    "plugin:prettier/recommended"
   ],
   "plugins": [
     "react",

cypress/integration/home_spec.ts

@@ -14,7 +14,7 @@ describe.skip('Home', () => {
     })
   })
 
-  it('should render overthought', () => {
-    cy.contains('Overthought').scrollIntoView().should('be.visible')
+  it('should render writing', () => {
+    cy.contains('Writing').scrollIntoView().should('be.visible')
   })
 })

cypress/integration/overthought_post_spec.ts

@@ -1,23 +1,24 @@
 /// <reference types="cypress" />
 /// <reference types="@testing-library/cypress" />
 
-describe('Overthought index', () => {
+describe('Posts index', () => {
   it('should render post', () => {
-    cy.visit('/overthought/adding-dark-mode-with-next-js')
-    cy.get('[data-cy="overthought-post"]').scrollIntoView().should('be.visible')
+    cy.visit('/writing/adding-dark-mode-with-next-js')
+    cy.get('[data-cy="post"]').scrollIntoView().should('be.visible')
   })
 
   it('should render 404', () => {
-    cy.visit('/overthought/foobar')
+    cy.visit('/writing/foobar')
     cy.wait(1000)
-    cy.get('[data-cy="overthought-not-found"]')
-      .scrollIntoView()
-      .should('be.visible')
+    cy.get('[data-cy="post-not-found"]').scrollIntoView().should('be.visible')
   })
 
   it('should render newsletter', () => {
-    cy.visit('/overthought/adding-dark-mode-with-next-js')
-    cy.get('[data-cy="overthought-subscribe-box"]')
+    cy.visit('/writing/adding-dark-mode-with-next-js')
+    cy.get('[data-cy="writing-feedback-box"]')
+      .scrollIntoView()
+      .should('be.visible')
+    cy.get('[data-cy="writing-subscribe-box"]')
       .scrollIntoView()
       .should('be.visible')
   })

cypress/integration/overthought_spec.ts

@@ -1,17 +1,17 @@
 /// <reference types="cypress" />
 /// <reference types="@testing-library/cypress" />
 
-describe('Overthought index', () => {
+describe('Posts index', () => {
   before(() => {
-    cy.visit('/overthought')
+    cy.visit('/writing')
   })
 
   it('should render header', () => {
-    cy.get('[data-cy="overthought"]').scrollIntoView().should('be.visible')
+    cy.get('[data-cy="writing"]').scrollIntoView().should('be.visible')
   })
 
   it('should render newsletter', () => {
-    cy.get('[data-cy="overthought-subscribe-box"]')
+    cy.get('[data-cy="writing-subscribe-box"]')
       .scrollIntoView()
       .should('be.visible')
   })

next.config.js

@@ -1,17 +1,45 @@
-const path = require('path')
-const withMDX = require('@next/mdx')({
-  extension: /\.mdx?$/,
-})
-
-module.exports = withMDX({
-  pageExtensions: ['ts', 'tsx', 'mdx'],
+module.exports = {
   images: {
-    domains: ['pbs.twimg.com'],
+    domains: ['pbs.twimg.com', 'overthought.ghost.io'],
   },
   env: {
     FATHOM_SITE_ID: process.env.FATHOM_SITE_ID,
     FATHOM_CUSTOM_URL: process.env.FATHOM_CUSTOM_URL,
     GHOST_API_KEY: process.env.GHOST_API_KEY,
     SIMPLECAST_V2_API_KEY: process.env.SIMPLECAST_V2_API_KEY,
   },
-})
+  async redirects() {
+    return [
+      {
+        source: '/uses',
+        destination: '/stack',
+        permanent: true,
+      },
+      {
+        source: '/design-details',
+        destination: '/app-dissection',
+        permanent: true,
+      },
+      {
+        source: '/design-details/:slug',
+        destination: '/app-dissection/:slug',
+        permanent: true,
+      },
+      {
+        source: '/journal',
+        destination: '/writing',
+        permanent: true,
+      },
+      {
+        source: '/overthought',
+        destination: '/writing',
+        permanent: true,
+      },
+      {
+        source: '/overthought/:slug',
+        destination: '/writing/:slug',
+        permanent: true,
+      },
+    ]
+  },
+}

package.json

@@ -22,11 +22,6 @@
     "@apollo/client": "^3.3.10",
     "@apollo/link-error": "^2.0.0-beta.3",
     "@apollo/link-schema": "^2.0.0-beta.3",
-    "@mdx-js/loader": "^1.6.22",
-    "@mdx-js/react": "^1.6.22",
-    "@next/bundle-analyzer": "^10.0.6",
-    "@next/mdx": "^10.0.6",
-    "@now/node": "^1.8.5",
     "@tailwindcss/forms": "^0.2.1",
     "@tailwindcss/typography": "^0.4.0",
     "@tippy.js/react": "^3.1.1",
@@ -47,15 +42,11 @@
     "postmark": "^2.7.1",
     "prismjs": "^1.23.0",
     "react": "^17.0.1",
-    "react-clipboard.js": "^2.0.16",
     "react-dom": "^17.0.1",
     "react-feather": "^2.0.9",
-    "react-flip-move": "^3.0.4",
     "react-linkify": "^1.0.0-alpha",
     "react-markdown": "^5.0.3",
     "react-visibility-sensor": "^5.1.1",
-    "rebass": "^4.0.7",
-    "reflexbox": "^4.0.6",
     "rehype-parse": "^7.0.1",
     "rehype-remark": "^8.0.0",
     "remark-preset-lint-recommended": "^5.0.0",
@@ -64,9 +55,6 @@
     "serve-favicon": "^2.5.0",
     "string-replace-to-array": "^1.0.3",
     "styled-components": "^4.4.1",
-    "terser": "^5.6.0",
-    "theme-ui": "^0.3.5",
-    "throttle-debounce": "^3.0.1",
     "timeago.js": "^4.0.2",
     "twilio": "^3.57.0",
     "unified": "^9.2.1",
@@ -93,14 +81,14 @@
     "autoprefixer": "^10.2.4",
     "babel-eslint": "^10.1.0",
     "babel-plugin-styled-components": "^1.12.0",
-    "cypress": "6.5.0",
+    "cypress": "^6.6.0",
     "eslint": "^7.21.0",
     "eslint-config-prettier": "^7.2.0",
     "eslint-plugin-cypress": "^2.11.2",
     "eslint-plugin-mdx": "^1.9.0",
     "eslint-plugin-prettier": "^3.3.1",
     "eslint-plugin-react": "^7.22.0",
-    "husky": "^5.1.2",
+    "husky": "^5.1.3",
     "lint-staged": "^10.5.4",
     "now-env": "^3.2.0",
     "postcss": "^8.2.5",
@@ -123,4 +111,4 @@
   },
   "pre-commit": "lint:staged && generate",
   "license": "MIT"
-}
+}

src/components/AMAQuestions/AskQuestion.tsx

@@ -1,6 +1,8 @@
 import * as React from 'react'
 import { useAddAmaQuestionMutation } from '~/graphql/types.generated'
 import { Textarea } from '~/components/Input'
+import { ErrorAlert, SuccessAlert } from '../Alert'
+import Button from '../Button'
 
 export default function AddBookmark() {
   const [question, setQuestion] = React.useState('')
@@ -37,7 +39,7 @@ export default function AddBookmark() {
   }
 
   return (
-    <form className="flex flex-col items-stretch space-y-4" onSubmit={onSubmit}>
+    <form className="items-stretch space-y-4" onSubmit={onSubmit}>
       <Textarea
         value={question}
         placeholder="Ask me anything..."
@@ -46,16 +48,14 @@ export default function AddBookmark() {
       />
       {question.length > 0 && (
         <div className="flex self-end">
-          <button className="btn btn-primary" onClick={onSubmit}>
-            Ask away!
-          </button>
+          <Button onClick={onSubmit}>Ask away!</Button>
         </div>
       )}
-      {error && <p className="text-red-500">{error}</p>}
+      {error && <ErrorAlert>{error}</ErrorAlert>}
       {success && (
-        <p className="text-green-500">
+        <SuccessAlert>
           Thanks for asking! I’ll reply soon, so feel free to check back 👋
-        </p>
+        </SuccessAlert>
       )}
     </form>
   )

src/components/AMAQuestions/EditQuestion.tsx

@@ -7,6 +7,7 @@ import {
 } from '~/graphql/types.generated'
 import { GET_AMA_QUESTIONS } from '~/graphql/queries'
 import { Textarea } from '~/components/Input'
+import Button from '../Button'
 
 interface Props {
   question: Ama
@@ -160,7 +161,7 @@ export default function EditQuestion(props: Props) {
   }
 
   return (
-    <form className="flex flex-col space-y-4" onSubmit={handleSave}>
+    <form className="space-y-4" onSubmit={handleSave}>
       <Textarea
         placeholder="Question"
         value={state.question}
@@ -169,7 +170,6 @@ export default function EditQuestion(props: Props) {
       />
 
       <Textarea
-        autoFocus
         placeholder="Answer..."
         value={state.answer}
         onChange={onAnswerChange}
@@ -179,18 +179,12 @@ export default function EditQuestion(props: Props) {
 
       {state.error && <p className="text-red-500">{state.error}</p>}
 
-      <div className="flex space-between justify-between">
+      <div className="flex justify-between space-between">
+        <Button onClick={() => handleDelete()}>Delete</Button>
         <div className="flex space-x-3">
-          <button className="text-blue-500" onClick={handleSave}>
-            Save
-          </button>
-          <button className="black-link" onClick={onDone}>
-            Cancel
-          </button>
+          <Button onClick={onDone}>Cancel</Button>
+          <Button onClick={handleSave}>Save</Button>
         </div>
-        <button className="text-red-500" onClick={() => handleDelete()}>
-          Delete
-        </button>
       </div>
     </form>
   )

src/components/AMAQuestions/PendingQuestions.tsx

@@ -22,7 +22,7 @@ export default function PendingQuestion() {
   if (!data || !data.amaQuestions) return null
 
   return (
-    <div className="flex flex-col space-y-8">
+    <div className=" space-y-8">
       {data.amaQuestions.map((question) => (
         <QuestionItem editable={true} key={question.id} question={question} />
       ))}

src/components/AMAQuestions/QuestionItem.tsx

@@ -4,6 +4,7 @@ import { format } from 'timeago.js'
 import QuestionReaction from './QuestionReaction'
 import EditQuestion from './EditQuestion'
 import MarkdownRenderer from '../MarkdownRenderer'
+import Linkify from '../Linkify'
 
 interface Props {
   editable: boolean
@@ -28,39 +29,37 @@ export const QuestionItem = React.memo((props: Props) => {
   }
 
   return (
-    <div className="flex flex-col space-y-2">
-      <p className="font-bold">{question.question}</p>
+    <div className="space-y-1 ">
+      <span>
+        <p className="font-medium text-primary">{question.question}</p>
+      </span>
       {question.answer && (
-        <div className="prose lg:prose-lg flex flex-col">
-          <MarkdownRenderer>{question.answer}</MarkdownRenderer>
-        </div>
+        <p className="text-tertiary clamp-3">
+          <Linkify>{question.answer}</Linkify>
+        </p>
       )}
-
-      <div className="flex items-center space-x-3">
+      <span className="flex items-center space-x-2 text-tertiary">
         <QuestionReaction question={question} />
-
-        <span className="divider-gray">/</span>
+        <span className="text-quaternary">{' · '}</span>
 
         <p
-          className={`p-small ${
-            question.answer ? 'text-gray-700' : 'text-yellow-500'
-          }`}
+          className={`${question.answer ? 'text-tertiary' : 'text-yellow-500'}`}
         >
-          {question.answer ? 'Updated' : 'Asked'} {format(updatedAt)}
+          {format(updatedAt)}
         </p>
 
         {editable && (
           <div className="flex space-x-2">
-            <span className="divider-gray">/</span>
+            <span className="text-quaternary">·</span>
             <button
-              className="p-small black-link"
+              className="text-tertiary hover:text-gray-1000 dark:hover:text-gray-50"
               onClick={() => setIsEditing(true)}
             >
               Edit
             </button>
           </div>
         )}
-      </div>
+      </span>
     </div>
   )
 })

src/components/AMAQuestions/QuestionReaction.tsx

@@ -28,7 +28,7 @@ export default function QuestionReaction(props: Props) {
 
   return (
     <button
-      className="flex space-x-2 items-center focus:ring-opacity-0"
+      className="flex items-center space-x-2 focus:ring-opacity-0"
       onClick={handleReaction}
     >
       <svg
@@ -42,14 +42,12 @@ export default function QuestionReaction(props: Props) {
           fillRule="evenodd"
           clipRule="evenodd"
           className={`fill-current ${
-            question.reactions > 0
-              ? 'text-red-500'
-              : 'text-gray-400 dark:text-gray-600'
+            question.reactions > 0 ? 'text-red-500' : 'text-quaternary'
           }`}
           d="M7.655 14.9159C7.65523 14.9161 7.65543 14.9162 8 14.25C8.34457 14.9162 8.34477 14.9161 8.34501 14.9159C8.12889 15.0277 7.87111 15.0277 7.655 14.9159ZM7.655 14.9159L8 14.25L8.34501 14.9159L8.34731 14.9147L8.35269 14.9119L8.37117 14.9022C8.38687 14.8939 8.40926 14.882 8.4379 14.8665C8.49516 14.8356 8.57746 14.7904 8.6812 14.7317C8.8886 14.6142 9.18229 14.442 9.53358 14.2199C10.2346 13.7767 11.1728 13.13 12.1147 12.3181C13.9554 10.7312 16 8.35031 16 5.5C16 2.83579 13.9142 1 11.75 1C10.2026 1 8.84711 1.80151 8 3.01995C7.15289 1.80151 5.79736 1 4.25 1C2.08579 1 0 2.83579 0 5.5C0 8.35031 2.04459 10.7312 3.8853 12.3181C4.82717 13.13 5.76538 13.7767 6.46642 14.2199C6.81771 14.442 7.1114 14.6142 7.3188 14.7317C7.42254 14.7904 7.50484 14.8356 7.5621 14.8665C7.59074 14.882 7.61313 14.8939 7.62883 14.9022L7.64731 14.9119L7.65269 14.9147L7.655 14.9159Z"
         ></path>
       </svg>
-      <span className="p-small">{question.reactions.toLocaleString()}</span>
+      <span>{question.reactions.toLocaleString()}</span>
     </button>
   )
 }