As a 2019-2020 Watson Fellow, I am traveling the world to study the politics of digital technology. This website is where I write about the journey, reviews the works I am studying, and update a podcast documenting the year.
.
├── /src
│ ├── /components
│ ├── /utils
│ ├── /pages
| | ├── 404.js
| | ├── about.js
│ | └── tags.js
│ └── /templates
| ├── list.js
│ └── post.js
|
├── /content
│ ├── /images
│ └── tag-descriptions.yaml
|
├── /static
| ├── _redirects
| ├── robots.txt
| ├── favicon.ico
| ├── thesis.pdf
| └── resume.pdf
|
├── gatsby-config.json
├── gatsby-node.js
├── package.json
├── netlify.toml
└── ...
- Formatting responsive images in Ghost posts
- Using YAML data for tag descriptions
- Interactive citations in
mobiledoceditor - Spacing and margins are not the same in development and server environment
-
Use state for mailchimp subscriber form -
Gatsby image deforms images in Mailchimp RSS email campaign -
Filtering Home Page based on tags and templates
- Styled System and Styled Components (No Global CSS)
- Dark Mode (Achieved with Styled System)
- Interactive Reference Component
- Mapbox Integration
- Observable NPM packages
- Comments through Netlify Lambda Functions
-
Toggle Hover Headers - Failure Resume Toggle
- Download Resume PDF
-
Podcast Feed -
Publish-to-Medium -
Publish-to-Mailchimp
post.js is my template for all single page posts on the website. Whether its a podcast page or blog entry or reference to published or academic writing, the template is the same. The elements of the GraphQL are explained below. Bold is required for the page to render. Italic means the tag is optional.
export const postQuery = graphql`
query($slug: String!) {
ghostPost(slug: { eq: $slug }) {
### For rendering the page content ###
html
id
### Page name and introduction ###
title
excerpt
### Pages ordered by publication, updates optional ###
published_at(formatString: "MMMM DD, YYYY")
updated_at(formatString: "MMMM DD, YYYY")
### All frontmatter is coded in the tags, explained below. ###
tags {
name
}
}
}
`tags[0].name: Template (Writing, Audio, Academic, Photo)
tags[1].name: Location
tags[2].name: Region
tags[3].name: Country
tags[3:].name: Tags (Multiple)
book.js is my template for all book reviews I write. It has different formatting from other single page posts, so it needs its own data schema. The elements of the GraphQL are explained below. Bold is required for the page to render. Italic means the tag is optional.
export const bookQuery = graphql`
query($slug: String!) {
ghostPost(slug: { eq: $slug }) {
### For rendering the page content ###
html
id
### Book name and book subtitle ###
title
excerpt
### Pages ordered by date book read, updates optional ###
updated_at(formatString: "MMMM DD, YYYY")
published_at(formatString: "MMMM DD, YYYY")
### All frontmatter is coded in the tags, explained below. ###
tags {
name
}
}
}
`tags[0].name: Title
tags[1].name: Primary Author
tags[2].name: Publication Year
tags[3].name: Country
tags[3:].name: Additional Author (Multiple)
version-3 is the default branch for this repository. As such, Netlify automatically publishes a production build every time this branch is updated. For all intents and purposes, this branch acts like "master."
version-2 was the second version of my website. It is published to https://version-2.elibenton.co/ subdomain. It was my first attempt to build a site with Gatsby. It is no longer actively maintained.
version-1 is the branch of my first site's codebase. It is published to https://version-1.elibenton.co/ subdomain. Keep in mind that this site is build with Hugo rather than Gatsby, and as such, it has a different build command set in "netlify.toml." It is no longer actively maintained.
dev is my development branch. It can be found at https://dev.elibenton.co/. I always push commits to dev first, so I can ensure they work once hosted publicly on netlify. Once I am confident I like the changes, I open a pull request and then merge dev with version-3. Soon, I would prefer to close this branch and use Netlify Dev or Gatsby Cloud instead.
React: front-end and UI
Gatsby: react development framework, pull any data, deploy statically
GraphQL: query language to programmatically call data
Styled Components: visual primitives for react components
Prettier: automatic formatting
Netlify: CDN and continuous deployment
VSCode: editor with terminal, git, & typescript integration
Ghost CMS: Headless CMS that manages both content and users
Gatsby Cloud: Realtime preview and build chain management for rapid development
Backtracks: Podcast hosting, embedding, and analytics
Digital Ocean: Server space for the Ghost CMS