The Metric

Web application for The Metric

---

System Architecture

• The website is hosted and collaborated on in GitHub
• Content is posted, tagged with topics, and managed in Ghost
• The themetric.org domain is registered and configured on GoDaddy
• The website sources content from Ghost and is built as a static website
• The website is hosted on Netlify, it deploys automatically with each new commit to the master branch
• The Ghost instance is hosted on Vultr
  • It can be accessed at ghost.themetric.org
  • You can access the Vultr instance via console on the Vultr website. You will need the credentials to log into that account.
  • Install process was similar to this guide.
• The Ghost instance is hosted on Heroku
  • It can be accessed at the-metric.herokuapp.com/ghost/
  • Images are uploaded via Ghost and hosted in AWS S3

---

Writing

Ghost is a little brittle in terms of what fields it supports. To get around this, we do a few things:

• The location field for each Ghost Author is split into both loc and role by placing a "|" between the two parts of this field. An example format is: "Los Angeles, CA | Web Developer"
• Similarly, the excerpt field for each Ghost Post is spit into both subtitle and featureImageCaption. An example format for this is "This is my subtitle | This is my image caption."

---

Website Architecture

• Gatsby is a library for building static websites with React
• TypeScript is a superset of JavaScript for adding static types to variables
• ESLint is a library for enforcing style and formatting rules
• Prettier is a library for automatically reformatting code, it works hand and hand with ESLint under our configuration
• styled-components is a library for writing CSS-in-JS
• To get an email from the Ghost instance, you must be an "Authorized Recipient" in Mailgun

---

Getting Started

Clone this repository to your machine. Navigate to the cloned directory in your terminal and run yarn to install all dependencies.

Configure your environment to have a GHOST_API_KEY for sourcing content from Ghost. For linux users, this can be done via an env.sh file of the form:

export GHOST_API_KEY="..."

Next, source the environment. For the env.sh file, this can be done by running source env.sh.

To run the website locally, run yarn dev and navigate to localhost:8000 in your browser.

To build a production build, which serves as a good indicator of if a deploy to Netlify will work as expected, run yarn build.

---

Debugging

If there are issues with stale content, components, or otherwise odd occurrences, try running yarn clean and re-running the website locally. This deletes the cache of assets and components which Gatsby produces for performance reasons.

---

Todo

Todo

• Favicon for dark mode browser
• Mailing list
• Icons for regions
• Highlight matching words in search results
• Tabbing through navigation, don't be able to tab through a navbar which is not visible, other accessibility improvements
• Accept paypal donations

Completed

• TypeScript in gatsby-node https://gist.github.com/clarkdave/53cc050fa58d9a70418f8a76982dd6c8
• Decide on final names for regions
• Port over all existing content to Ghost
• Webhook for rebuilding website in response to changes
• Responsive font sizing on article page (especially for headers)
• Homepage, featured posts
• Share search state between search components via a reducer
• Topics page
• Mobile search
• Toggle should toggle everything (including mobile nav)
• Fix flickering shade animation
• useWindowSize hook for deciding which search to render
• Fix "More Reading" section
• Toggle doubleclick should not re-toggle
• Author page don't render all articles at once
• Send author slugs as context
• Remote images to gatsby-image
• Show users (members of The Metric org) who have no posts (like Cameron)
  • Manually create GhostAuthor object?
  • Page for manual authors
• Parse out facebook and twitter usernames from author objects
• Figure out how to store roles on author objects
  • Parse as part of location
  • Perhaps https://www.gatsbyjs.org/docs/node-apis/#createSchemaCustomization
• Add isRegion field to tag object
• Fix invalid DOM nesting for author thumbnails
• Fix linking for tags which are regions
• Pagination for tags
• Hosting on Netlify
• Dropdowns in navbar
• Shadow on navbar
• Pagination for articles
• Comments via Disqus
• Google Analytics
• Make Ghost API key be in env
• RSS feed
• Social icons in navbar
• Links to share on article show page
• Hide navbar on scroll down, show on scroll up
• Port from tslint to eslint
• Contact page
• About page
• Article page
• Next post and previous post
• Favicon
• Connect with Ghost
• 404 page
• Style links
• Author page
• Full width nav and footer on tablet
• Document technical side of things
• Search
• Tags section on homepage (maybe only show some of the most popular)