# gatsby-crudzoo

> gatsby theme for crudzoo

Latest version **0.6.1** (published 2022-03-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install gatsby-crudzoo
pnpm add gatsby-crudzoo
yarn add gatsby-crudzoo
bun add gatsby-crudzoo
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.6.1 |
| Published | 2022-03-05 |
| First published | 2019-06-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 38 |
| Unpacked size | 99.8 KB |
| Known vulnerabilities | 0 (+5 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 6 |
| Author | hidekazoo |
| Maintainers | hidekazoo |
| Keywords | gatsby, gatsby-theme, gatsby-plugin |

## Links

- npm: https://www.npmjs.com/package/gatsby-crudzoo
- Repository: https://github.com/Hidekazoo/gatsby-theme-crudzoo
- Homepage: https://github.com/Hidekazoo/gatsby-theme-crudzoo#readme
- Issues: https://github.com/Hidekazoo/gatsby-theme-crudzoo/issues
- npm.io page: https://npm.io/package/gatsby-crudzoo

## Dependencies (38)

- [dayjs](https://npm.io/package/dayjs.md) ^1.9.8
- [react](https://npm.io/package/react.md) ^17.0.2
- [sharp](https://npm.io/package/sharp.md) ^0.29.3
- [dotenv](https://npm.io/package/dotenv.md) ^10.0.0
- [gatsby](https://npm.io/package/gatsby.md) ^4.7.1
- [postcss](https://npm.io/package/postcss.md) ^8.4.7
- [prismjs](https://npm.io/package/prismjs.md) ^1.27.0
- [react-dom](https://npm.io/package/react-dom.md) ^17.0.2
- [classnames](https://npm.io/package/classnames.md) ^2.3.1
- [typescript](https://npm.io/package/typescript.md) ^4.2.4
- [@mdx-js/mdx](https://npm.io/package/@mdx-js/mdx.md) ^1.6.22
- [@mdx-js/tag](https://npm.io/package/@mdx-js/tag.md) ^0.20.3
- [@types/react](https://npm.io/package/@types/react.md) ^17.0.3
- [autoprefixer](https://npm.io/package/autoprefixer.md) ^10.2.5
- [gatsby-image](https://npm.io/package/gatsby-image.md) ^3.3.0
- [react-helmet](https://npm.io/package/react-helmet.md) ^6.1.0
- [@mdx-js/react](https://npm.io/package/@mdx-js/react.md) ^1.6.22
- [algoliasearch](https://npm.io/package/algoliasearch.md) ^4.9.0
- [path-browserify](https://npm.io/package/path-browserify.md) ^1.0.1
- [@types/react-dom](https://npm.io/package/@types/react-dom.md) ^17.0.3
- [gatsby-plugin-mdx](https://npm.io/package/gatsby-plugin-mdx.md) ^3.4.0
- [postcss-preset-env](https://npm.io/package/postcss-preset-env.md) ^7.4.2
- [@types/react-helmet](https://npm.io/package/@types/react-helmet.md) ^6.1.1
- [gatsby-plugin-sharp](https://npm.io/package/gatsby-plugin-sharp.md) ^4.4.0
- [gatsby-remark-images](https://npm.io/package/gatsby-remark-images.md) ^6.4.0
- [gatsby-plugin-algolia](https://npm.io/package/gatsby-plugin-algolia.md) ^0.25.0
- [gatsby-plugin-postcss](https://npm.io/package/gatsby-plugin-postcss.md) ^5.4.0
- [gatsby-remark-prismjs](https://npm.io/package/gatsby-remark-prismjs.md) ^6.4.0
- [gatsby-transformer-json](https://npm.io/package/gatsby-transformer-json.md) ^4.4.0
- [react-instantsearch-dom](https://npm.io/package/react-instantsearch-dom.md) ^6.10.3
- [gatsby-plugin-typescript](https://npm.io/package/gatsby-plugin-typescript.md) ^4.4.0
- [gatsby-source-filesystem](https://npm.io/package/gatsby-source-filesystem.md) ^4.4.0
- [gatsby-transformer-sharp](https://npm.io/package/gatsby-transformer-sharp.md) ^4.4.0
- [gatsby-awesome-pagination](https://npm.io/package/gatsby-awesome-pagination.md) ^0.3.8
- [gatsby-transformer-remark](https://npm.io/package/gatsby-transformer-remark.md) ^5.4.0
- [gatsby-plugin-page-creator](https://npm.io/package/gatsby-plugin-page-creator.md) ^4.4.0
- [gatsby-plugin-react-helmet](https://npm.io/package/gatsby-plugin-react-helmet.md) ^5.4.0
- [gatsby-plugin-compile-es6-packages](https://npm.io/package/gatsby-plugin-compile-es6-packages.md) ^2.1.0

## Recent versions

- 0.6.1 (latest) — 2022-03-05
- 0.6.0 — 2022-03-05
- 0.5.5 — 2022-02-12
- 0.5.4 — 2022-02-11
- 0.5.3 — 2022-01-31
- 0.5.2 — 2021-07-31
- 0.5.1 — 2021-04-25
- 0.5.0 — 2021-04-25
- 0.3.2 — 2021-02-07
- 0.3.1 — 2021-02-04
- 0.3.0 — 2020-12-30
- 0.2.1 — 2020-03-05
- 0.2.0 — 2019-11-07
- 0.1.4 — 2019-08-13
- 0.1.3 — 2019-07-29
- … 15 more at https://npm.io/package/gatsby-crudzoo/versions

## README

Gatsby-crudzoo is Gatsby theme for blog site. gatsby@3 supported

## Demo site

[demo](https://sharp-pike-0a4ab7.netlify.com/)

[repository](https://github.com/Hidekazoo/gatsby-crudzoo-demo)

I also use gatsby-crudzoo theme on my website.
[https://crudzoo.com](https://crudzoo.com)

## Getting started

### Installation

```
npm init -y
npm install gatsby react react-dom gatsby-crudzoo gatsby-plugin-postcss
```

or using yarn

```
yarn init -y
yarn add gatsby react react-dom gatsby-crudzoo gatsby-plugin-postcss
```

### Update package.json

Add a new Scripts "develop" and "build" to your package.json. And It is convenient to add cache clear command "clean"

#### Example

```
{
  "scripts": {
    "develop": "gatsby develop",
    "build": "gatsby build",
    "clean": "rm -rf .cache public"
  }
}
```

### create setting files

create setting files in your root directory.

#### gatsby-config.js

##### Example

```javascript
module.exports = {
  siteMetadata: {
    language: `en`,
    title: `site title`,
    author: `your name`,
    keywords: [`blog`, `gatsby`],
    heroText: ``,
    description: `site description`,
    social: {
      twitter: `your twitter name`,
    },
  },
  plugins: [
    {
      resolve: "gatsby-crudzoo",
      options: {},
    },
  ],
};
```

### write your first article

Write your first post at mdx on blog/hello-world/index.mdx and place the thumbnail file in the same folder.

Include the following key in the first article to avoid graphql errors

1. id
1. title
1. date
1. tags
1. spoiler
1. image
1. template
1. link
1. score

#### Example

```
// blog/about/index.mdx
---
id: "article-1"
title: "Profile Page"
date: "2019-06-03T21:58:03.284Z"
tags: ["profile", "self-introduction"]
spoiler: "this is my first article"
image: "./thumbnail.png"
template: ""
link: ""
score: ""
---

hello world!
```

### Series folder

By creating a json file in the series folder, You can create a list of articles called series

```json
{
  "seriesId": "sample",
  "title": "sample title",
  "spoiler": "my sample series",
  "image": "sample.png",
  "articles": ["article-1"]
}
```

### Folder Structure

the folder structure is as follows

```
  .
  ├── blog
  │   └── about
  │        ├── thumbnail.png
  │        └── index.mdx
  ├── series
  │   ├── sample.png
  │   └── sample.json
  │
  ├── gatsby-config.js
  ├── package-lock.json
  └── package.json
```

### Start Developing

```
npm develop
```

or using yarn

```
yarn develop
```

## book-review template

There is a template for book reviews. If you are writing a book review article, this may be useful.

```
---
title: Sample Book
date: "2020-12-31T12:26:28+09:00"
tags: ["Book Review"]
spoiler: "spoiler"
image: ./thumbnail.jpg
score: 5
template: "book-review"
link: "https://example.com"
---

your review
```

## Recommended override Components

Use shadowing to use the original Component.
Create in the next level `src/gatsby-crudzoo/components`

- HeroImg.tsx
- HomeHeroDescription.tsx
- HomeSidebarBlock.tsx

see demo site [repository](https://github.com/Hidekazoo/gatsby-crudzoo-demo)

## Theme Development

We will use the Yarn workspace.Modify the code in packages/gatsby-theme-crudzoo.

```
yarn workspace example development
```

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