Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/react95/gatsby-theme
A React95 theme for your Gatsby blog
https://github.com/react95/gatsby-theme
gatsby nostalgic react react95 theme
Last synced: 2 months ago
JSON representation
A React95 theme for your Gatsby blog
- Host: GitHub
- URL: https://github.com/react95/gatsby-theme
- Owner: React95
- Created: 2023-04-10T23:42:22.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2024-01-12T00:54:06.000Z (12 months ago)
- Last Synced: 2024-10-31T18:24:37.510Z (2 months ago)
- Topics: gatsby, nostalgic, react, react95, theme
- Language: JavaScript
- Homepage: https://react95.github.io/gatsby-theme
- Size: 11 MB
- Stars: 11
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: readme.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
The React95 Gatsby theme
## Installation
### For a new site
If you're creating a new site and want to use the React95 theme, you can use the [Gatsby CLI](https://www.gatsbyjs.com/docs/reference/gatsby-cli/#new) (make sure to select styled-components as your styling system)
```shell
gatsby new my-nostalgic-blog
```
Follow the CLI and when you've finished, go to the next step
### For an existing site
If you already have a site you'd like to add the React95 theme to, you can manually configure it.
1. Install the React95 theme
```bash
npm install @react95/core @react95/gatsby-theme styled-components
# or
yarn add @react95/core @react95/gatsby-theme styled-components
```
2. Add the configuration to your `gatsby-config.js` file
```js
// gatsby-config.js
module.exports = {
plugins: [
{
resolve: `@react95/gatsby-theme`,
options: {
// basePath defaults to `/`
basePath: `/site`,
},
},
],
};
```
3. Add content to your site by creating `md` or `mdx` files inside `/content` folder.
> React95 theme will create everything for you so you might not need `src/pages`.
> Note that if you've changed the default `contentPath` in the configuration, you'll want to add your markdown files in the directory specified by that path.
4. Run your site using `gatsby develop` and see your content in the TaskBar. If you used the above configuration, your URL will be `http://localhost:8000/site`
> If you have no content in the beginning, React95 theme will generate a starter for you.
## Usage
### Theme options
| Key | Default value | Description |
| ------------- | ------------- | ------------------------ |
| `basePath` | `/` | Root url for all content |
| `contentPath` | `content` | Location of your content |
### 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`
```js
// gatsby-config.js
module.exports = {
siteMetadata: {
// Used for the site title and SEO
title: `Gatsby - Powered By React95`,
// Used for SEO
description: `This is a Gatsby website that uses React95`,
// Used for resolving images in social cards
siteUrl: `https://example.com`,
// Used for SEO in social cards
image: `/path-to/your/image`,
// Used for SEO
author: `@mynickname`,
},
};
```
### Content Fields
The following are the defined content fields based on the node interface in the schema
| Field | Type |
| ----------- | ------- |
| title | String |
| image | String |
| description | String |
| icon | Icon |
| image | String |
| modal | Boolean |
Icon type
| Field | Type |
| ------- | ------ |
| name | String |
| variant | String |
```md
# content/getting-started.mdx
---
title: Getting Started
description: Your awesome and nostalgic website!
modal:false
icon:
name: Computer
variant: 32x32_4
---
# Your website starts on this folder
Feel free to add your content!
```
### Image Behavior
Content can include references to images from static folder inside frontmatter.
```md
---
title: Hello World (example)
image: /some-image.jpg
icon:
name: Computer
variant: 32x32_4
---
```
When adding an `image` it will be the featured image within the post.
### How Styles work
Inside any `mdx` file you have all React95 components at your service:
```md
---
title: How to
icon:
name: FolderExe
variant: 16x16_4
---
# How to
...
```
## Examples
File structure
Desktop View
404 page
