Skip to content
A Gatsby theme for creating course platform.
JavaScript
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo Fixed app state init bug. Aug 6, 2019
gatsby-theme-courses Fixed app state init bug. Aug 6, 2019
.gitattributes Initial commit Aug 1, 2019
.gitignore
README.md Add "start learning" button. Add like feature Aug 3, 2019
demo.jpg Add autoplay and progress save features. Aug 2, 2019
netlify.toml Update README.md Aug 1, 2019
package.json Initial commit Aug 1, 2019
yarn.lock Add AppContext (user settings) and PageContext (page data). Aug 5, 2019

README.md

A Gatsby course theme

hangindev gatsby-theme-courses

A Gatsby theme for creating a course platform, using Youtube as video host.

Theme features

📝 Use .mdx file to save course & lesson information and notes.

📹 Youtube as video host

🏍️ Support autoplay

💹 Save learning progress

💖 Bookmark courses

Installation

npm install --save @hangindev/gatsby-theme-courses

Usage

Theme options

Key Default value Description
basePath / Root url for all course courses
contentPath content/courses Location of course courses
mdx true Configure gatsby-plugin-mdx (if your website already is using the plugin pass false to turn this off)

Example usage

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-theme-course`,
      options: {
        basePath: `/courses`
      }
    }
  ]
};

Data layer

Courses are consisted of lessons and the relationships are represented by the folder structure. Every directory in the contentPath represent a course.

Course info (title, tags, cover image, description) and lesson info(title, youtubeId, note) are stored as .mdx file under the course directory.

See demo for the required metadata of the .mdx file.

Example course folder structure

content
  |
  └─courses
      |
      ├─bitcoin-and-cryptocurrency  # slug of course "Bitcoin and Cryptocurrency"
      │      index.mdx  # course info should be written in index.mdx
      │      01-intro.mdx  # other .mdx files will be interpreted as lessons
      │      02-how-bitcoin-achieves-decentralization.mdx
      │      03-mechanics-of-bitcoin.mdx
      │      04-how-to-store-and-use-bitcoins.mdx
      │      cover.jpg  # related course materials/images can be stored in the same directory
      │
      └─how-to-start-a-startup
              index.mdx
              01-how-to-start-a-startup.mdx
              02-team.mdx
              cover.jpg

Example course index.mdx file

---
title: "Bitcoin and Cryptocurrency"
lastUpdated: 2015-02-16
tags: ["bitcoin", "cryptocurrency", "blockchain"]
coverImage: "./cover.jpg"
---

Notes...

Example lesson .mdx file

---
title: Intro to Crypto and Cryptocurrencies
youtubeId: fOMVZXLjKYo
duration: 3521
---

Notes...

Override theme

This theme used styled-components. You can override the theme settings in src/styled folder or directly override the components in src/components folder.

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 for SEO.

// gatsby-config.js
module.exports = {
  siteMetadata: {
    title: `My course Title`,
    author: `My Name`,
    description: `My site description...`,
    social: [
      {
        name: `GitHub`,
        url: `https://github.com/hangindev`
      }
    ]
  }
};

Roadmap

[ ] Read Youtube video duration with API

[ ] Restriced access

You can’t perform that action at this time.