Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/cieloazul310/gatsby-aoi
Monorepo for gatsby-aoi theme
https://github.com/cieloazul310/gatsby-aoi
gatsby gatsby-theme material-ui mui typescript
Last synced: about 2 months ago
JSON representation
Monorepo for gatsby-aoi theme
- Host: GitHub
- URL: https://github.com/cieloazul310/gatsby-aoi
- Owner: cieloazul310
- Created: 2021-10-03T22:35:49.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-03-16T20:05:50.000Z (11 months ago)
- Last Synced: 2024-12-09T17:52:28.065Z (2 months ago)
- Topics: gatsby, gatsby-theme, material-ui, mui, typescript
- Language: TypeScript
- Homepage: https://gatsby-theme-aoi.netlify.app/
- Size: 13.7 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# Gatsby Theme Aoi
> TypeScript based [Gatsby theme][Gatsby Themes] for [MUI] (Material-UI)
- TypeScript
- MUI
- Mobile friendlly responsive UI
- MUI components composed with Gatsby routing
- Holding global app state
- Dark mode
[](https://badge.fury.io/js/@cieloazul310%2Fgatsby-theme-aoi) [](https://app.netlify.com/sites/gatsby-theme-aoi/deploys)
## Notice
See [Migration from v2 to v3](./docs/migration-from-v2-to-v3.md).
## Install
### Quick Start with starters
- **Gatsby Starter Aoi Theme**: Simple starter
- **Gatsby Starter Aoi Blog**: Blog starter
#### Gatsby Starter Aoi Theme
```shell
curl https://codeload.github.com/cieloazul310/gatsby-aoi/tar.gz/main | tar -xz --strip=2 gatsby-aoi-main/starters/gatsby-starter-aoi-theme
cd gatsby-starter-aoi-theme
```
See:
Default Theme Demo
### Gatsby Starter Aoi Blog
```shell
curl https://codeload.github.com/cieloazul310/gatsby-aoi/tar.gz/main | tar -xz --strip=2 gatsby-aoi-main/starters/gatsby-starter-aoi-blog
cd gatsby-starter-aoi-blog
```
See:
Blog Starter Demo
```shell
# install
npm install
# develop
npm run dev
# build
npm run build
```
### Manual install
#### 1. Install
```shell
npm install @cieloazul310/gatsby-theme-aoi
```
and install following peer dependencies:
[`@mui/material`](https://www.npmjs.com/package/@mui/material) [`@mui/icons-material`](https://www.npmjs.com/package/@mui/icons-material) [`@emotion/react`](https://www.npmjs.com/package/@emotion/react) [`@emotion/styled`](https://www.npmjs.com/package/@emotion/styled)
```shell
npm install @mui/material @mui/icons-material @emotion/react @emotion/styled
```
#### 2. Configuration
```javascript
// gatsby-config.js
module.exports = {
plugins: [
{
resolve: `@cieloazul310/gatsby-theme-aoi`,
options: {
siteId: `your-site-id`,
},
},
],
}
```
## 2. Using Aoi Layout
Gatsby Theme Aoi Layout is a simple layout built with MUI including ``, ``, ``, ``.
```typescript
import { Layout } from '@cieloazul310/gatsby-theme-aoi';
function Page() {
return (
);
}
export default Page;
```
See:
[`@cieloazul310/gatsby-theme-aoi-layout`]
## 3. Using Aoi components
```tsx
import {
AppLink,
Section,
SectionDivider,
Article,
ArticleTitle,
Paragraph,
Jumbotron,
} from '@cieloazul310/gatsby-theme-aoi';
function Contents() {
return (
Page
hogehogehoge
Go to Page 2
);
}
```
### Major components
#### ``
MUI Link component composed with [Gatsby Link].
#### ``
#### ``, ``
#### ``
See:
[`@cieloazul310/gatsby-theme-aoi-components`]
## 4. Shadowing
```txt
.
├── gatsby-config.js
├── index.js
├── node_modules
├── package.json
└── src
├── @cieloazul310
│ ├── gatsby-theme-aoi-layout
│ │ └── menu.tsx
│ └── gatsby-theme-aoi-top-layout
│ ├── utils
│ │ ├── AppState.ts
│ │ └── AppStateContext.tsx
│ └── theme.ts
└── pages
```
Shadowing in Gatsby Themes
### Shadowing enabled packages
| パッケージ名 | Shadowing | About |
|---------------------------------------------|-----------|--------|
|[`@cieloazul310/gatsby-theme-aoi`] | ❌ | |
|[`@cieloazul310/gatsby-theme-aoi-components`]| ❌ | |
|[`@cieloazul310/gatsby-theme-aoi-layout`] | ✅ | Layout |
|[`@cieloazul310/gatsby-theme-aoi-top-layout`]| ✅ | Theme, AppState |
|[`@cieloazul310/gatsby-theme-aoi-utils`] | ❌ | |
### Customizing MUI theme
`src/@cieloazul310/gatsby-theme-aoi-top-layout/theme.ts`
```typescript
// src/@cieloazul310/gatsby-theme-aoi-top-layout/theme.ts
import { teal, orange } from '@mui/material/colors';
import { createTheme, responsiveFontSizes } from '@mui/material/styles';
const theme = createTheme({
palette: {
primary: teal,
secondary: orange,
},
});
export default responsiveFontSizes(theme);
```
See:
### Customizing global app state
`src/@cieloazul310/gatsby-theme-aoi-top-layout/utils/AppState.ts`
```typescript
// src/@cieloazul310/gatsby-theme-aoi-top-layout/utils/AppState.ts
export type AppState = {
// set your app state
count: number;
};
// set your initial app state
export const initialAppState: AppState = { count: 0 };
// set your action
export type Action = { type: 'RESET' } | { type: 'INCREMENT' } | { type: 'DECREMENT' } | { type: 'SET_COUNT'; count: number };
export default function reducer(state: AppState, action: Action): AppState {
switch (action.type) {
case 'RESET':
return initialAppState;
case 'INCREMENT':
return { ...state, count: state.count + 1 };
case 'DECREMENT':
return { ...state, count: state.count - 1 };
case 'SET_COUNT':
return { ...state, count: action.count };
default:
throw new Error("Reducer don't match the action type.");
}
}
```
### Using global app state
Copy [`AppStateContext.tsx`](https://github.com/cieloazul310/gatsby-aoi/blob/main/packages/gatsby-theme-aoi-top-layout/src/utils/AppStateContext.tsx) and paste it to `src/@cieloazul310/gatsby-theme-aoi-top-layout/utils/AppStateContext.tsx`.
```tsx
// src/pages/index.tsx
import { useAppState, useDispatch } from '../@cieloazul310/gatsby-theme-aoi-top-layout/utils/AppStateContext';
function Page() {
const { count } = useAppState();
const dispatch = useDispatch();
const increment = () => {
dispatch({ type: 'INCREMENT' });
};
return (
Count: {count}
Increment
)
}
export default Page;
```
### Shadowing layout components
### Customizing menu
`src/@cieloazul310/gatsby-theme-aoi-layout/menu.tsx`
```tsx
// src/@cieloazul310/gatsby-theme-aoi-layout/menu.tsx
import * as React from 'react';
import HomeIcon from '@mui/icons-material/Home';
import ListIcon from '@mui/icons-material/List';
import SportsHandballIcon from '@mui/icons-material/SportsHandball';
export type Menu = {
title: string;
path: string;
icon: JSX.Element;
};
const menu: Menu[] = [
{ title: 'Top', path: '/', icon: },
{ title: 'Page 2', path: '/page-2/', icon: },
{ title: 'About', path: '/about/', icon: },
];
export default menu;
```
## Gatsby Theme Aoi packages
- [`@cieloazul310/gatsby-theme-aoi`]
- [`@cieloazul310/gatsby-theme-aoi-components`]
- [`@cieloazul310/gatsby-theme-aoi-layout`]
- [`@cieloazul310/gatsby-theme-aoi-top-layout`]
- [`@cieloazul310/gatsby-theme-aoi-utils`]
## References
- [Gatsby]
- [MUI]
- [gatsby-plugin-material-ui](https://github.com/hupe1980/gatsby-plugin-material-ui)
- [gatsby-theme-material-ui](https://github.com/hupe1980/gatsby-theme-material-ui)
[Gatsby]: https://www.gatsbyjs.com/ "Gatsby"
[MUI]: https://mui.org/ "MUI"
[Gatsby Themes]: https://gatsbyjs.com/docs/themes/ "Themes"
[Gatsby Starters]: https://www.gatsbyjs.com/docs/starters/ "Gatsby Starters"
[Shadowing]: https://www.gatsbyjs.com/docs/how-to/plugins-and-themes/shadowing/ "Shadowing in Gatsby Themes"
[Gatsby Link]: https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-link/ "Gatsby Link API"
[`@cieloazul310/gatsby-theme-aoi`]: https://github.com/cieloazul310/gatsby-aoi/tree/main/packages/gatsby-theme-aoi
[`@cieloazul310/gatsby-theme-aoi-components`]: https://github.com/cieloazul310/gatsby-aoi/tree/main/packages/gatsby-theme-aoi-components
[`@cieloazul310/gatsby-theme-aoi-layout`]: https://github.com/cieloazul310/gatsby-aoi/tree/main/packages/gatsby-theme-aoi-layout
[`@cieloazul310/gatsby-theme-aoi-top-layout`]: https://github.com/cieloazul310/gatsby-aoi/tree/main/packages/gatsby-theme-aoi-top-layout
[`@cieloazul310/gatsby-theme-aoi-utils`]: https://github.com/cieloazul310/gatsby-aoi/tree/main/packages/gatsby-theme-aoi-utils