gatsby-theme-prismic-starter

0.1.0 • Public • Published

🌈 gatsby-theme-prismic-starter

⚠️ Gatsby Themes are currently experimental ⚠️

A Gatsby Starter Theme with Headless CMS Prismic. Based on gatsby-starter-default.

License: MIT npm version


🚀 Instructions

Quick Start

  1. Create a directory for your new website

  2. Initialize your package.json with yarn init

  3. Install gatsby, react, react-dom and the theme
    yarn add gatsby react react-dom gatsby-theme-prismic-starter

  4. Add a gatsby-config.js file to activate and controll the theme:

    module.exports = {
    __experimentalThemes: [
     {
       resolve: "gatsby-theme-prismic-starter",
       options: {
         // SITE METADATA
         siteUrl: "http://localhost:8000/", // Important for gatsby-plugin-sitemap
         title: "gatsby-theme-prismic-starter",
         author: "Dennis Kossowski",
         description: "A GatsbyJS Theme With Headless CMS Prismic.",
     
         // MANIFEST OPTIONS
         name: "Gatsby Theme Prismic Starter",
         short_name: "Prismic Theme",
         start_url: "/",
         background_color: "#663399",
         theme_color: "#663399",
         display: "minimal-ui",
         // icon: `src/images/gatsby-icon.png`,
     
         // PRISMIC OPTIONS
         repositoryName: "your-prismic-repository-name",
         // It's highly recommended to define your Prismic API access token trough a .env file
         // Just create a .env in your root directory with following content: "API_KEY="your-key-here"
         // If you want to define the access token in this options you can do it (at your own risk):
         //accessToken: "your-access-token",
     
         // TYPOGRAPHY OPTIONS
         // To configure your own typography just add a "config" directory with typography.js
         // pathToConfigModule: "config/typography.js"
       }
     }
     ]};
  5. run gatsby develop and build your site!

After you started the develop server, open localhost:8000/ for further information how this theme works!


🤔 What's inside

Dependencies:

  • @emotion/core
  • @emotion/styled
  • emotion-theming
  • gatsby-plugin-emotion
  • @mdx-js/mdx
  • @mdx-js/react
  • @mdx-js/tag
  • dotenv
  • gatsby-image
  • gatsby-plugin-compile-es6-packages
  • gatsby-plugin-manifest
  • gatsby-plugin-page-creator
  • gatsby-plugin-react-helmet
  • gatsby-plugin-sharp
  • gatsby-plugin-sitemap
  • gatsby-plugin-typography
  • gatsby-source-filesystem
  • gatsby-source-prismic
  • gatsby-transformer-sharp
  • mkdirp
  • prop-types
  • react-helmet
  • react-typography
  • typography

emotion for styling
typography for easy font-theming
gatsby-plugin-sitemap for sitemap support
mdx-plugin for JSX in Markdown
gatsby-source-prismic for pulling data into Gatsby from prismic.io repositories

Components:

  • seo.js

Include the SEO component import { SEO } from 'gatsby-theme-prismic-starter'



🔄 Changelog

All notable changes to this project will be documented in this file.

[0.1.0] – 2019-05-03

⚠️ Removed

Dependencies:

  • @fortawesome/fontawesome-svg-core
  • @fortawesome/free-solid-svg-icons
  • @fortawesome/react-fontawesome
  • gatsby-plugin-netlify
  • react-grid-system

Removed this packages to make the theme more flexible if you want to use other similar dependencies.

If you have used this packages just reinstall them in your project.

[0.0.8] – 2019-05-01

Added

  • NEW: mdx support ✨ Just add a .mdx file in your pages folder

Package Sidebar

Install

npm i gatsby-theme-prismic-starter

Weekly Downloads

0

Version

0.1.0

License

MIT

Unpacked Size

36.1 kB

Total Files

12

Last publish

Collaborators

  • kozo