Skip to content
Branch: master
Find file History
LekoArts chore(release): Publish
 - @lekoarts/gatsby-theme-cara@0.0.9
 - @lekoarts/gatsby-theme-emma@0.0.17
 - @lekoarts/gatsby-theme-status-dashboard@0.0.12
Latest commit 42fc41f Aug 12, 2019

README.md

Gatsby Theme

@lekoarts/gatsby-theme-emma

@lekoarts/gatsby-theme-emma is released under the MIT license. Current npm package version. Downloads per month on npm. Total downloads on npm. PRs welcome! Follow @lekoarts_de

Minimalistic portfolio with full-width grid, page transitions, support for additional MDX pages, and a focus on large images. Especially designers and/or photographers will love this theme! Built with MDX and Theme UI.

Demo Website (Source Code)

Also be sure to checkout other Free & Open Source Gatsby Themes

Features

  • MDX
  • Theme UI-based theming
  • react-spring page animations
  • Optional MDX pages which automatically get added to the navigation

Installation

npm install @lekoarts/gatsby-theme-emma

Install as a starter

This will generate a new site (with the folder name "emma") that pre-configures use of the theme including example content.

gatsby new emma LekoArts/gatsby-starter-portfolio-emma

View the starter's code

Usage

Theme options

Key Default Value Description
basePath / Root url for the theme
projectsPath content/projects Location of projects
pagesPath content/pages Location of additional pages (optional)
mdx true Configure gatsby-plugin-mdx (if your website already is using the plugin pass false to turn this off)

The usage of content/pages is optional. If no page/MDX file is found the navigation will be hidden.

Example usage

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `@lekoarts/gatsby-theme-emma`,
      options: {
        // basePath defaults to `/`
        basePath: `/sideproject`,
        // projectsPath defaults to `content/projects`
        projectsPath: `content/cool-projects`
      }
    }
  ]
};

Additional configuration

In addition to the theme options, there are a handful of items you can customize via the siteMetadata object in your site's gatsby-config.js

// gatsby-config.js
module.exports = {
  siteMetadata: {
    // Used for the title template on pages other than the index site
    siteTitle: `Emma`,
    // Default title of the page
    siteTitleAlt: `Emma - @lekoarts/gatsby-theme-emma`,
    // Can be used for e.g. JSONLD
    siteHeadline: `Emma - Gatsby Theme from @lekoarts`,
    // Will be used to generate absolute URLs for og:image etc.
    siteUrl: `https://emma.lekoarts.de`,
    // Used for SEO
    siteDescription: `Minimalistic portfolio with full-width grid, page transitions, support for additional MDX pages, and a focus on large images`,
    // Will be set on the <html /> tag
    siteLanguage: `en`,
    // Used for og:image and must be placed inside the `static` folder
    siteImage: `/banner.jpg`,
    // Twitter Handle
    author: `@lekoarts_de`
  }
};

Formats

Projects need the following frontmatter:

---
client: "LekoArts"
title: "Theme"
cover: "./image.jpg"
date: "2019-06-10"
service: "Theme"
color: "#8e9d31"
---

Pages need the following frontmatter:

---
title: "Name"
slug: "/name"
cover: "./name.jpg"
---
You can’t perform that action at this time.