Koala Templates: Gatsby Theme 'Architects'

Minimal 2-template GatsbyJS theme for Portfolios or Online shops.

Link to Demo | Link to Github

Features

1. Minimal theme with 2 templates: List template and Item template
2. Pure vanilla modular CSS, no dependency on other CSS or CSS-in-JS frameworks. Modular CSS ensures locally scoped CSS and independence from other components.
3. Smart rendering of photos: Render first photo as the main banner of a post. Render the rest of the photos after the body of a post. Detect the dimension of a photo and render accordingly. Portrait image renders 50% of the contain's width. Landscape imane renders 100% of the width.

Setup the theme

1. Run yarn global add gatsby-cli to install Gatsby CLI
2. Run gatsby new architect-blog to start the 'architect-blog' website
3. Run yarn add @koalatemplates/gatsby-theme-architects to fetch the theme as NPM dependency into your site
4. Create the folder [root of your Gatsby site]/architect-data. This is where your data will live. This is put into the contentPath in the gatsby-config.js below.
5. Copy the sample data from the data directory of this package into the folder [root of your Gatsby site]/architect-data
6. Copy the following snippet into gatsby-config.js as below:

// [root of your Gatsby site]/gatsby-config.js

module.exports = {
  ...
  plugins: [
    {
      resolve: "@koalatemplates/gatsby-theme-architects",
      options: {
        contentPath: "architect-data",
        basePath: "/"
      }
    }
  ]
};

Run your website gatsby develop

Structure of a post e.g. article.mdx

---
title: 'Title of the post'
date: 'Date string'
tags: ["project"|"article"]
photos: [
  "../images/nameOfPhoto1.jpg",
  "../images/nameOfPhoto2jpg"
]
---

Body of the post

• tags: If tags include "project", posts are rendered on the right column. If tags include "article", posts are rendered on the left column.
• photos: An array of photos. First photo is used as the main image. The rest of the photos are rendered after the post's body.