TypeScript based Gatsby theme for MUI (Material-UI)
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: https://github.com/cieloazul310/gatsby-aoi/tree/main/starters/gatsby-starter-aoi-theme
Default Theme Demo https://cieloazul310.github.io/gatsby-aoi
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: https://github.com/cieloazul310/gatsby-aoi/tree/main/starters/gatsby-starter-aoi-blog
Blog Starter Demo https://gatsby-theme-aoi.netlify.app/
# install
npm install
# develop
npm run dev
# build
npm run build
npm install @cieloazul310/gatsby-theme-aoi
and install following peer dependencies:
@mui/material
@mui/icons-material
@emotion/react
@emotion/styled
npm install @mui/material @mui/icons-material @emotion/react @emotion/styled
// gatsby-config.js
module.exports = {
plugins: [
{
resolve: `@cieloazul310/gatsby-theme-aoi`,
options: {
siteId: `your-site-id`,
},
},
],
}
Gatsby Theme Aoi Layout is a simple layout built with MUI including <AppBar>
, <Drawer>
, <BottomNavigation>
, <Fab>
.
import { Layout } from '@cieloazul310/gatsby-theme-aoi';
function Page() {
return (
<Layout title="Page Title">
</Layout>
);
}
export default Page;
See:
@cieloazul310/gatsby-theme-aoi-layout
import {
AppLink,
Section,
SectionDivider,
Article,
ArticleTitle,
Paragraph,
Jumbotron,
} from '@cieloazul310/gatsby-theme-aoi';
function Contents() {
return (
<Layout title="Components">
<Jumbotron title="Aoi Components" />
<SectionDivider />
<Section>
<Article>
<ArticleTitile>
Page
</ArticleTitle>
<Paragraph>
hogehogehoge
</Paragrah>
<AppLink to="/page-2/">
Go to Page 2
</AppLink>
</Article>
</Section>
</Layout>
);
}
<AppLink>
MUI Link component composed with Gatsby Link.
<Jumbotron>
<Section>
, <SectionDivider>
<Article>
See:
@cieloazul310/gatsby-theme-aoi-components
.
├── 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 https://www.gatsbyjs.com/docs/how-to/plugins-and-themes/shadowing/
パッケージ名 | 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 |
❌ |
src/@cieloazul310/gatsby-theme-aoi-top-layout/theme.ts
// 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: https://mui.com/customization/theming/
src/@cieloazul310/gatsby-theme-aoi-top-layout/utils/AppState.ts
// 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.");
}
}
Copy AppStateContext.tsx
and paste it to src/@cieloazul310/gatsby-theme-aoi-top-layout/utils/AppStateContext.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 (
<Layout>
<p>Count: {count}</p>
<Button onClick={increment}>
Increment
</Button>
</Layout>
)
}
export default Page;
src/@cieloazul310/gatsby-theme-aoi-layout/menu.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: <HomeIcon /> },
{ title: 'Page 2', path: '/page-2/', icon: <ListIcon /> },
{ title: 'About', path: '/about/', icon: <SportsHandballIcon /> },
];
export default menu;
@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