next() Packaged Middleware

    @arshad/gatsby-theme-photo-core

    1.1.6 • Public • Published

    @arshad/gatsby-theme-photo-core

    Version License PRs welcome!

    This core theme includes a Photo type that you can use to build a photography site. It includes no styles.

    Installation

    Step 1: In the root of your Gatsby site, run the following command:

    yarn add @arshad/gatsby-theme-photo-core

    Step 2: Enable it in gatsby-config.js

    // gatsby-config.js
    ...
      plugins: [
        `@arshad/gatsby-theme-photo-core`
      ]
    ...

    Theme options

    Key Default value Description
    contentPath content/photos Location of your photos
    basePath /photography Root url for all photo posts
    photosPerPage 9 Number of photos to show per page for pagination
    pageTitle Photography The title for the photos page. Leave blank for no title
    pageExcerpt null The excerpt for the photos page. Leave blank for no excerpt

    Example usage

    // gatsby-config.js
    ...
      plugins: [
        {
          resolve: `@arshad/gatsby-theme-photo-core`,
          options: {
            basePath: `/photos`,
            photosPerPage: 10,
          }
        }
      ]
    ...

    Data models

    Photo

    type Photo implements Node @dontInfer {
      id: ID!
      title: String!
      date: Date! @dateformat
      image: File @fileByRelativePath
      excerpt(pruneLength: Int = 150): String
      slug: String!
      body: String!
    }

    Example

    Place your photos inside content/photos as follows:

    site
      ├── content
      │   └── photos
      │       └── photo-1
      │           ├── photo.jpg
      │           └── index.mdx
      ├── node_modules
      ├── gatsby-config.js
      └── package.json
    
    # site/content/photos/photo-1/index.mdx
    
    ---
    
    title: Proident enim aliqua
    date: 2019-10-11
    excerpt: Consequat consectetur mollit commodo nisi reprehent velit aliqua quis nisi laborum.
    image: ./photo.jpg
    
    ---
    
    Et aliquip labore id minim adipisicing excepteur labore in ex deserunt duis quis cillum in.

    Customization

    Create the following components in your site to shadow and customize the core components:

    src
    └── @arshad
        └── gatsby-theme-photo-core
            └── components
                ├── photo-teaser.js
                ├── photo.js
                └── photos.js
    

    To learn more about component shadowing, check out the official theme docs.

    Support

    Create an issue on the main repo @arshad/gatsby-themes.

    Install

    npm i @arshad/gatsby-theme-photo-core

    DownloadsWeekly Downloads

    18

    Version

    1.1.6

    License

    MIT

    Unpacked Size

    14.7 kB

    Total Files

    13

    Last publish

    Collaborators

    • arshad