Gatsby-theme-simple-bio NPM

Gatsby Theme - Simple Bio

This theme is developed using gatsby. One can use this theme for having a website with brief introduction and social profiles.

See the live demo.

Installation

To use this theme in your Gatsby sites, follow these instructions:

Install the theme

npm install --save gatsby-theme-simple-bio

Add the theme to your gatsby-config.js:

module.exports = {
  plugins: [
    {
      resolve: 'gatsby-theme-simple-bio',
      options: {
        // See Options section for more details
      }
    }
  ]
}

Start your site
```
gatsby develop
```

Usage

Site setup

Required directories
- author

├── author
│   └── john-doe.yml
├── content
│   ├── assets
│   │   ├── profile.png
│   │   └── profile.svg
│   └── home
│       └── index.mdx
├── gatsby-config.js
├── package-lock.json
├── package.json
└── src
    ├── gatsby-theme-simple-bio
    │   ├── components
    │   │   └── bio
    │   │       └── figure.js
    │   └── gatsby-plugin-theme-ui
    │       ├── colors.js
    │       └── index.js
    └── pages
        └── 404.js

You need to have an author directory which contains a yml file containing author information
The structure of yml file in author is expected to be

# Author info
name: John Doe
description: A passionate web designer
cover: ../content/assets/profile.png
username:
  linkedin: john-doe
  github: john-doe
  facebook: john.doe
  twitter: john_doe
  email: john_doe@mail.com
positions:
  - title: Position 1
    company: XYZ Company
    duration: July YYYY - Present
  :
  :

The image provided in cover entry of yml is expected to be an image file (other than SVGs) which is locally present (Currently online image links are not supported)

NOTE: This image should be present in the directory specified by assetsPath in theme options.

If you don't wish to provide any usernames, make the entry an empty string as below

username:
  github: ""

Description of the person should be provided in the folder specified in homePath option of the theme. The MDX file present in this folder should have type "home-page" in the front matter.

Theme Options

Below are the options available for the theme

// Base url for rendering site
baseUrl: "/", // Default: "/"
// Directory path for images
assetsPath: "content/assets", // Default: "content/assets"
// Directory path for MDX home page content
homePath: "content/home", // Default: "content/home"
// Should the theme have rounded components
rounded: false, // Default: false

Key	Default	Description
`baseUrl`	`/`	Base url for rendering site
`assetsPath`	`content/assets`	Directory path for images
`homePath`	`content/home`	Directory path for MDX home page content
`rounded`	`false`	Should the theme have rounded components

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: {
    // Name of the gatsby site
    appName: "Demo of gatsby-theme-simple-bio",
    // Used for the site title and SEO
    title: "Demo of gatsby-theme-simple-bio",
    // Used to provide alt text for your avatar
    author: "John Doe",
    // URL for the website
    siteUrl: "https://www.gatsbyjs.org",
    // Used for SEO
    description:
      "This site is a demonstration for using theme " +
      "gatsby-theme-simple-bio",
    // Used for social links in the root footer
    social: {
      // Facebook
      facebook: "john-doe",
      // Twitter
      twitter: "john-doe",
      // Email
      email: "john-doe",
      // LinkedIn
      linkedin: "john-doe",
      // Github
      github: "john-doe",
    },
  },
}