theWhiteWulfy / web-proj

Personal site built with Gatsby

Metoric Teachings Source Code

This is the source code of Metoric Teachings, a personal blog and portfolio built with Gatsby, Travis CI, and Netlify.

Getting started

1. Install dependencies

   yarn install

2. Add .env file to the root with your GitHub API token.

   GITHUB_API_TOKEN=yourPersonalGitHubApiToken

   Note: do not commit this file. Builds will fail with a TypeError: Cannot read property 'match' of undefined since GitHub repo listing on /pages/works.js can't resolve the GraphQL query.

3. Start developing.

   gatsby develop

   Note: When developing on Windows prepend all Gatsby commands with dotenv to load environment variables. e.g. dotenv gatsby build

4. Default structure:

   .
   ├── config
   |   └──site.js             # => site wide config
   ├── src
   |   ├── comments           # => comments content
   |   ├── components
   |   ├── data
   |   |   └── taxonomy.yml   # => taxonomy content
   |   ├── images
   |   ├── pages
   |   ├── posts
   |   ├── styles
   |   ├── templates
   |   └── html.js
   ├── .travis.yml
   ├── gatsby-browser.js
   ├── gatsby-config.js
   ├── gatsby.node.js
   └── staticman.yml

Posts and Pages

Posts are all Markdown files and should be placed in src/posts/ and filed under the appropriate category. Pages can be Markdown or .js files placed in src/pages/.

.
├── src
|   ├── posts
|   |   ├── category-name-1
|   |   |   └── filename-slug.md
|   |   ├── category-name-2
|   |   |   └── another-filename-slug.md

Front matter available for Markdown files.

	Type	Description	Example
title	string	Page title.	"How I use Jekyll to build sites"
path	string	Page permalink.	/category-name/file-name-slug/
date	datetime	Published date.	2020-01-09
last_modified_at	datetime	Updated date.	2020-01-09T13:52:13-05:00
excerpt	string	Page description used a teaser text in listings and SEO purposes.	"This is a most excellent post about static site generators."
image	string	Path to an image (relative to the Markdown file) used as a cover or teaser in listings and SEO purposes.	../../images/post-image.jpeg
categories	array	Categories to classify the post as.	[articles]
tags	array	Tags to classify the post as.	[web development, GitHub, tutorial]
toc	boolean	Display table of contents links.	true
hide_meta	boolean	Hide post meta data from page e.g. (date, read time, etc.)	true
comments	boolean	Display comments. Disabled by default.	true
comments_locked	boolean	Lock a comment threads discussion.	true
featured	boolean	Mark a post post/page as featured.	true

Taxonomy Data File

src/data/taxonomy.yml file contains key/value pairs for all categories and tags used across the site. This file is useful for adding custom content to be used on category and tag pages.

	Type	Description
id	string	Value used in tags and categories arrays.
name	string	Display name.
excerpt	string	Plain text description.
html	string	HTML description.

Example:

- id: work
  name: Works
  excerpt: A selection of things I’ve designed, illustrated, and developed.
  html: |
    <p>A selection of things I’ve designed, illustrated, and developed.</p>

Markdown content

HTML recipes and such for styling custom bits of content used in Markdown files.

Figures

TODO: Migrate into a component. For now HTML in Markdown will suffice.

Example:

<figure>
  <img src="../../images/image.jpeg" alt="">
  <figcaption><p>Figure caption goes here.</p></figcaption>
</figure>

Two column rows:

<figure class="two-column">
  <img src="../../images/image-1.jpeg" alt="">
  <img src="../../images/image-2.jpeg" alt="">
  <figcaption><p>Figure caption goes here.</p></figcaption>
</figure>

Three column rows:

<figure class="three-column">
  <img src="../../images/image-1.jpeg" alt="">
  <img src="../../images/image-2.jpeg" alt="">
  <img src="../../images/image-3.jpeg" alt="">
  <figcaption><p>Figure caption goes here.</p></figcaption>
</figure>

Notices

Call-out text via gatsby-remark-custom-blocks plugin with Markdown.

Example:

[[notice | iOS screen recording]]
| Apple has built this feature directly into iOS allowing you to [capture the screen](https://support.apple.com/en-us/HT207935) directly on device.

Thumbnail gallery

TODO: Migrate into a component. For now HTML in Markdown will suffice.

Example:

<ul class="gallery-thumbnails">
  <li>
    <a href="../../images/thumbnail-1.jpeg">
      <img src="../../images/image-1.jpeg" alt="">
    </a>
  </li>
  ...
</ul>

Browser frame

Wrap an image with the .browser-frame class to give it browser chrome styling.

Example:

<div class="browser-frame">
  <img src="../../images/webpage.jpeg" alt="">
</div>

Button links

Style links to look like a button.

Example:

<p>
  <a href="#" class="btn">Link label</a>
</p>

---

License

The MIT License (MIT)

Copyright (c) 2004-2020 Alok Prateek

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Metoric Teachings incorporates photographs from Unsplash.