Skip to content
This repository has been archived by the owner on May 31, 2020. It is now read-only.

EmaSuriano/gatsby-theme-anchor

Β 
Β 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

Gatsby Theme Anchor

⚠️ Project not longer mantained. I don't have plans to remove the project from Github, so you can use the theme for your projects ⚠️

Netlify Status

Cover
A Gatsby Theme to showcase your podcast in Anchor

Motivation πŸ€”

When a podcast starts the most difficult part is sharing it with the rest of world, this Gatsby Theme will help to solve that! The idea behind it is to provide a customizable platform where the podcasters can:

  • Have a Landing page with the last episodes of the show and more relevant information.
  • Add information about the show inside the About Page
  • Showcase all the podcast inside the Podcast Page
  • Possibility to add/edit/remove content using a CMS view

BTW, I recorded a really short podcast in which I talked about this project. So in case you want to know more about it here it's the link to the episde!

Features 🀹

  • Gatsby theme πŸ”₯
  • Typescript support
  • CSS in JS using Rebass
  • Theming with ThemeProvider
  • Anchor integration
  • Netlify CMS integration
  • Ready for deployment with Netlify
  • SEO
  • PWA - Offline Support

Lighthouse score πŸ“ˆ

Ligthouse score

Screenshot and Design πŸ‘©β€πŸŽ¨

Before jumping into the screenshots I want to thank all these amazing resources that allowed to make it that good ✨:

Landing

Desktop Mobile
landing desktop landing mobile

About

Desktop Mobile
about desktop about mobile

Episodes

Desktop Mobile
episodes desktop episodes mobile
no episodes desktop no episodes mobile

404

Desktop Mobile
404 desktop 404 mobile

CMS

Landing About
CMS landing CMS about

How to Start πŸ‘·β€

Given this project use yarn Workspace if you download the project you will download the entire project, demo and theme all together. You can always clone the project and remove the additional folder.

In order to avoid confusion, I created a branch called demo with only the code to run the example. Go your terminal and run:

> git clone --single-branch --branch demo https://github.com/EmaSuriano/gatsby-theme-anchor.git

This will clone the project with only the example on it. Then you need to install the dependencies and in this case, gatsby-theme-anchor will be taken from npm and not from the local folder (like yarn workspace was doing).

> yarn #install dependencies
> yarn start #start project

After running the project you should be able to go to the http://localhost:8000 and see the Landing Page. This means that you set up the theme successfully, now let's see how to make it yours!

Customization πŸ›

Extracted to Customization.

Trouble Shooting πŸ’₯

Extracted to Troubleshooting.

Deploying your site πŸ“¦

In order to deploy and enable all the powerful of the CMS I highly recommend using Netlify. It's a static website hosting with the capability of synchronizing with your GitHub repository, so then every time you push a new deployment is released!

Please follow this Step by Step Guide from the official documentation of Netlify. When you reach to the point of setting the command the output folder, you need to set as command yarn build and as output folder /dist.

This last step is totally optionally but it's one of my favorite of this setup. As this theme use Netlify CMS you can enable the Identity feature inside the deployment configuration that will allow to modify your data through the deployed site by making commit to the repository.

Please follow this Guide to enable.I already provide a proper config.yml inside /static/admin folder but you still need to enable from your side. In order to check if everything is working, go to the route /admin of your deployed site, there you need to authenticate (you can pick different services in the previous step) and once you are inside the CMS every change you make it will push a commit to the repository. Dispatching a new release of your website πŸ˜„

Contributing πŸ’ͺ

This project is using yarn Workspace in order to be able to run a Gatsby project using the source code of the theme. Follow these steps to run the demo locally:

  1. Clone the repo: git clone https://github.com/EmaSuriano/gatsby-theme-anchor.git
  2. Install dependencies: cd gatsby-theme-anchor && yarn
  3. Start the demo: yarn workspace demo start

License

MIT.

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 92.8%
  • JavaScript 7.2%