This package has been deprecated

Author message:

Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

gatsby-theme-aoi

1.2.2 • Public • Published

Gatsby Theme Aoi

npm version

A Gatsby theme for TypeScript-based Gatsby projects Material-UI.

DEMO: https://cieloazul310.github.io/gatsby-starter-aoi-theme/

Features

  • TypeScript
  • Material-UI
  • Mobile friendlly responsive UI layout
  • Hold App State
  • Dark Mode

Getting Started

  1. Install
  2. Use Layout
  3. Set your MuiTheme
  4. Use App State

install

Using gatsby-starter-aoi-theme

gatsby new ${your_project} gatsby-starter-aoi-theme

or if individually

yarn add gatsby-theme-aoi

and

module.exports = {
  ...,
  plugins: [
    ...plugins,
    `gatsby-theme-aoi`
  ]
}

Use Layout

Default Layout

import Typography from '@material-ui/core/Typography';
import Layout from 'gatsby-theme-aoi/src/layout';

function Page() {
  return (
    <Layout title="Default Layout Example" maxWidth="md">
      <Typography variant="h3" component="h2">
        Welcome to $your_project
      </Typography>
    </Layout>
  );
}
export default Page;

Easy to customize

Tab Layout

import Typography from '@material-ui/core/Typography';
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';
import Layout from 'gatsby-theme-aoi/src/layouts/TabPageLayout';
import TabPane from 'gatsby-theme-aoi/src/layout/TabPane';

function Page() {
  const [tab, setTab] = React.useState(0);
  const _handleTab = (event: React.ChangeEvent<{}>, newValue: number) => {
    setTab(newValue);
  };
  const _handleTabIndex = (index: number) => () => {
    setTab(index);
  };
  const tabs = (
    <Tabs value={tab} onChange={_handleTab}>
      <Tab label="Tab1" />
      <Tab label="Tab2" />
    </Tabs>
  );
  return (
    <Layout title="Tab Layout" tabSticky tabs={tabs}>
      <TabPane index={0} value={tab} id="tab-1">
        <Typography variant="h2">Tab1</Typogrphy>
      </TabPane>
      <TabPane index={1} value={tab} id="tab-2">
        <Typography variant="h2">Tab2</Typogrphy>
      </TabPane>
    </Layout>
  );
}
export default Page;

Example

Jumbotron Layout

import Box from '@material-ui/core/Box';
import Typography from '@material-ui/core/Typography';
import Layout from 'gatsby-theme-aoi/src/layouts/Jumbotron';

function Page() {
  const junmbotron = (
    <Box bgColor="silver" height={280} p={4} display="flex" flexDirection="column" justifyContent="center">
      <Typography variant="subtitle1">Gatsby Theme Aoi</Typography>
      <Typography variant="h2">Jumbotron Layout</Typography>
    </Box>
  );
  return (
    <Layout title="JumbotronPage" maxWidth="md" jumbotron={jumbotron}>
      <Typography variant="h4" component="h3">
        Welcome to $your_project
      </Typography>
    </Layout>
  );
}
export default Page;

Example

Create your Layout

Use componentViewports props
<Layout
  title="Full Width Layout"
  componentViewports={{
    PermanentDrawer: false,
    SwipeableDrawer: true,
    Fab: true
    BottomNav: 'smDown'
  }}
>
  {any}
</Layout>

value: Viewport (xsDown, xsUp, smDown, smUp, mdDown, mdUp, lgDown, lgUp, xlDown, xlUp) | boolean | null

true means components always showing and false means always hiding (equal to former disableDrawer, disableFab, disableBottomNav).

component default
PermanentDrawer mdUp
SwipeableDrawer smDown
Fab smDown
BottomNav xsDown
Insert Contents from page
<Layout
  title="Insert Fab"
  componentViewports={{
    Fab: true
  }}
  fab={<Fab onClick={_toggleDark}>{isDark ? <Brightness4Icon /> : <Brightness5Icon />}</Fab>}
>
  {any}
</Layout>

Layout API

Props

<Layout> component have a props of Material-UI <Container> which is first child of main section. https://material-ui.com/api/container/

Name Type Default Description
children node child element
title string for Header, SEO
description string for SEO
keywords string[] for SEO
image string for SEO
disablePaddingTop boolean false set padding to contents top
componentViewports Partial<ComponentViewports>
drawerWidth number 280
tabSticky boolean false enable sticky tab component
drawerContents node Insert drawer contents from props, which is displayed top of drawer
tabs node Insert tabs from props
bottomNavigation node Insert BottomNav from props
fab node Insert Fab from props

Every prop is optional.

Layout Structure

<div>
  <SEO />
  <Header />
  <Drawer />
  <div>
    <Container {...props}>
      <Box pt={disablePaddingTop ? 0 : 6}>
        {tabs ? <Tabs /> : null}
        <main>{children}</main>
      </Box>
    </Container>
    <Footer />
  </div>
  <Fab />
  <BottomNav />
</div>

Layout Shadowing

your project src directory
src
├── gatsby-theme-aoi
│   ├── layout
│   │   ├── DrawerInner
│   │   │   └── Contents.tsx
│   │   └── SEO
│   │       └── index.tsx
│   └── utils
│       ├── AppState.ts
│       └── theme.ts
└── pages
    ├── 404.tsx
    ├── index.tsx
    └── page-2.tsx

Gatsby automatically conbined these components.

Theme Layout Structure
.
├── BottomNavigation
│   └── index.tsx
├── DrawerInner
│   ├── Contents.tsx
│   ├── DrawerFooter.tsx
│   ├── DrawerSharer.tsx
│   ├── StateHandler.tsx
│   └── index.tsx
├── Footer
│   ├── Socials.tsx
│   └── index.tsx
├── Header
│   ├── ButtonLeft.tsx
│   ├── ButtonRight.tsx
│   ├── ShareButtons.tsx
│   └── index.tsx
├── SEO
│   └── index.tsx
├── TabPane
│   └── index.tsx
├── Tabs
│   └── index.tsx
└── index.tsx

Set Your MuiTheme

change your src/gatsby-theme-aoi-top-layout/utils/theme.ts

import blue from '@material-ui/core/colors/blue';
import red from '@material-ui/core/colors/red';
import { createMuiTheme, responsiveFontSizes } from '@material-ui/core/styles';

const theme = createMuiTheme({
  palette: {
    primary: blue, // your primary color
    secondary: red, // your secondary color
  },
});

export default responsiveFontSizes(theme);
// or export default theme;

Use App State

change your src/gatsby-theme-aoi-top-layout/utils/AppState.ts

/**
 * Gatsby Theme Shadowing
 * MUST
 * export type AppState;
 * export const initialAppState
 * export type Action
 * export default function reducer
 */

export interface AppState {
  count: number;
}

export const initialAppState: AppState = {
  count: 0,
};

export type Action = { type: 'INCREMENT' } | { type: 'DECREMENT' } | { type: 'RESET_COUNT' };

export default function reducer(state: AppState, action: Action): AppState {
  switch (action.type) {
    case 'INCREMENT':
      return {
        ...state,
        count: state.count + 1,
      };
    case 'DECREMENT':
      return {
        ...state,
        count: Math.max(state.count - 1, 0),
      };
    case 'RESET_COUNT':
      return {
        ...state,
        count: 0,
      };
    default:
      throw new Error();
  }
}

Related Repositories

Dependents (0)

Package Sidebar

Install

npm i gatsby-theme-aoi

Weekly Downloads

17

Version

1.2.2

License

MIT

Unpacked Size

76 kB

Total Files

73

Last publish

Collaborators

  • cieloazul310