# @react95/gatsby-theme

> A React95 theme for your Gatsby blog

Latest version **2.2.1** (published 2024-01-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install @react95/gatsby-theme
pnpm add @react95/gatsby-theme
yarn add @react95/gatsby-theme
bun add @react95/gatsby-theme
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.2.1 |
| Published | 2024-01-12 |
| First published | 2021-09-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 19 |
| Unpacked size | 1.1 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 11 |
| Author | ggdaltoso |
| Maintainers | allyssonsantos, ggdaltoso |
| Keywords | gatsby, gatsby-theme, gatsby-plugin, react, react95, nostalgic, windows95, blog |

## Links

- npm: https://www.npmjs.com/package/@react95/gatsby-theme
- Repository: https://github.com/React95/gatsby-theme
- Homepage: https://react95.github.io/gatsby-theme
- Issues: https://github.com/React95/gatsby-theme/issues
- npm.io page: https://npm.io/package/@react95/gatsby-theme

## Dependencies (19)

- [prismjs](https://npm.io/package/prismjs.md) ^1.29.0
- [cross-env](https://npm.io/package/cross-env.md) ^7.0.3
- [@mdx-js/mdx](https://npm.io/package/@mdx-js/mdx.md) ^2.3.0
- [gatsby-link](https://npm.io/package/gatsby-link.md) ^5.8.0
- [object-path](https://npm.io/package/object-path.md) ^0.11.8
- [react-helmet](https://npm.io/package/react-helmet.md) ^6.1.0
- [@mdx-js/react](https://npm.io/package/@mdx-js/react.md) ^2.3.0
- [lodash.startcase](https://npm.io/package/lodash.startcase.md) ^4.4.0
- [gatsby-plugin-mdx](https://npm.io/package/gatsby-plugin-mdx.md) ^5.8.0
- [gatsby-remark-prismjs](https://npm.io/package/gatsby-remark-prismjs.md) ^7.9.0
- [@gatsbyjs/reach-router](https://npm.io/package/@gatsbyjs/reach-router.md) 2.0.1
- [gatsby-plugin-typescript](https://npm.io/package/gatsby-plugin-typescript.md) ^5.8.0
- [gatsby-source-filesystem](https://npm.io/package/gatsby-source-filesystem.md) ^5.8.0
- [@xstyled/styled-components](https://npm.io/package/@xstyled/styled-components.md) ^3.8.0
- [gatsby-plugin-react-helmet](https://npm.io/package/gatsby-plugin-react-helmet.md) ^6.8.0
- [gatsby-react-router-scroll](https://npm.io/package/gatsby-react-router-scroll.md) ^6.8.0
- [gatsby-plugin-mdx-frontmatter](https://npm.io/package/gatsby-plugin-mdx-frontmatter.md) ^0.0.4
- [babel-plugin-styled-components](https://npm.io/package/babel-plugin-styled-components.md) ^2.1.1
- [gatsby-plugin-styled-components](https://npm.io/package/gatsby-plugin-styled-components.md) ^6.8.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 2.2.1 (latest) — 2024-01-12
- 1.4.0-alpha.0 (alpha) — 2022-02-14
- 2.2.0 — 2023-04-23
- 2.1.2 — 2023-04-22
- 2.1.1 — 2023-04-18
- 2.1.0 — 2023-04-18
- 2.0.0 — 2023-04-15
- 1.3.14 — 2023-01-31
- 1.3.13 — 2022-11-10
- 1.3.12 — 2022-07-06
- 1.3.11 — 2022-06-07
- 1.3.10 — 2022-06-07
- 1.3.9 — 2022-06-07
- 1.3.8 — 2022-06-03
- 1.3.7 — 2022-06-03
- … 16 more at https://npm.io/package/@react95/gatsby-theme/versions

## README

<p align="center">
  <a href="https://www.gatsbyjs.com">
    <img alt="Gatsby" src="https://raw.githubusercontent.com/React95/gatsby-theme/master/React95-Gatsby.png" width="260" />
  </a>
</p>

<h1 align="center">
  The React95 Gatsby theme
</h1>

## 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
---

<Frame
  bg="white"
  p={6}
  boxShadow="in"
  height="100%"
>

# How to

...

</Frame>
```

## Examples

<table>
  <tr>
    <td>
      File structure
    </td>
    <td>
      <img alt="folder structure" src="./screenshots/file-structure.png" />
    </td>
  </tr>
  <tr>
    <td>
      Desktop View
    </td>
    <td>
      <img alt="Desktop view" src="./screenshots/desktop-view.png" />
    </td>
  </tr>
  <tr>
    <td>
      404 page
    </td>
    <td>
      <img alt="Desktop view" src="./screenshots/404.png" />
    </td>
  </tr>
</table>

---
_Source: https://npm.io/package/@react95/gatsby-theme · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._