seasharp
/
anvil
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: modify nextjs templates and index to use material ui

Browse Source
main
Josue 4 years ago committed by Tsu-ba-me
parent 0ba269f9f3
commit 6b0ce569f3
3 changed files with 113 additions and 97 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 30
      striker-ui/pages/_app.tsx
  2. 78
      striker-ui/pages/_document.tsx
  3. 102
      striker-ui/pages/index.tsx

30
striker-ui/pages/_app.tsx
Unescape View File

@ -1,10 +1,32 @@
import { useEffect } from 'react';
import { AppProps } from 'next/app';
import { ThemeProvider } from '@material-ui/core/styles';
import theme from '../theme';
import Header from '../components/organisms/Header';
import '../styles/globals.css'; import '../styles/globals.css';
import { AppProps } from 'next/app'; const App = ({ Component, pageProps }: AppProps): JSX.Element => {
// return <Component {...pageProps} />;
// This hook is for ensuring the styling is in sync between client and server
useEffect(() => {
// Remove the server-side injected CSS.
const jssStyles = document.querySelector('#jss-server-side');
if (jssStyles) {
jssStyles.parentElement?.removeChild(jssStyles);
}
}, []);
function App({ Component, pageProps }: AppProps): JSX.Element {
// eslint-disable-next-line react/jsx-props-no-spreading // eslint-disable-next-line react/jsx-props-no-spreading
return <Component {...pageProps} />; return (
} <ThemeProvider theme={theme}>
<Header />
<Component
// eslint-disable-next-line react/jsx-props-no-spreading
{...pageProps}
/>
;
</ThemeProvider>
);
};
export default App; export default App;

78
striker-ui/pages/_document.tsx
Unescape View File

@ -1,36 +1,52 @@
import Document, { DocumentContext, DocumentInitialProps } from 'next/document'; import { Children } from 'react';
import { ServerStyleSheet } from 'styled-components'; import Document, { Html, Head, Main, NextScript } from 'next/document';
import { ServerStyleSheets } from '@material-ui/core/styles';
class StyledDocument extends Document { export default class MyDocument extends Document {
static async getInitialProps( render(): JSX.Element {
context: DocumentContext, return (
): Promise<DocumentInitialProps> { <Html lang="en">
const styleSheet = new ServerStyleSheet(); <Head>
const originalRenderPage = context.renderPage; <link
rel="stylesheet"
try { href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
context.renderPage = () => />
originalRenderPage({ </Head>
enhanceApp: (App) => (props) => <body>
// eslint-disable-next-line react/jsx-props-no-spreading <Main />
styleSheet.collectStyles(<App {...props} />), <NextScript />
}); </body>
</Html>
);
}
}
const initialProps = await Document.getInitialProps(context); // `getInitialProps` belongs to `_document` (instead of `_app`),
// it's compatible with server-side generation (SSG).
MyDocument.getInitialProps = async (ctx) => {
// Render app and page and get the context of the page with collected side effects.
const sheets = new ServerStyleSheets();
const originalRenderPage = ctx.renderPage;
return { ctx.renderPage = () =>
...initialProps, originalRenderPage({
styles: ( enhanceApp: (App) => (props) =>
<> sheets.collect(
{initialProps.styles} <App
{styleSheet.getStyleElement()} /* eslint-disable react/jsx-props-no-spreading */
</> {...props}
/>,
), ),
}; });
} finally {
styleSheet.seal(); const initialProps = await Document.getInitialProps(ctx);
}
}
}
export default StyledDocument; return {
...initialProps,
// Styles fragment is rendered after the app and page rendering finish.
styles: [
...Children.toArray(initialProps.styles),
sheets.getStyleElement(),
],
};
};

102
striker-ui/pages/index.tsx
Unescape View File

@ -1,67 +1,45 @@
import Head from 'next/head'; import { GetServerSidePropsResult } from 'next';
import styles from '../styles/Home.module.css'; import { Grid } from '@material-ui/core';
import Anvils from '../components/Anvils';
import Nodes from '../components/Nodes';
import CPU from '../components/CPU';
import SharedStorage from '../components/SharedStorage';
import ReplicatedStorage from '../components/ReplicatedStorage';
import State from '../components/State';
import Memory from '../components/Memory';
import API_BASE_URL from '../lib/consts/API_BASE_URL';
import fetchJSON from '../lib/fetchers/fetchJSON';
import 'typeface-muli';
export async function getServerSideProps(): Promise<
GetServerSidePropsResult<AnvilList>
> {
return {
props: await fetchJSON(`${API_BASE_URL}/api/anvils`),
};
}
function Home(): JSX.Element { const Home = (): JSX.Element => {
return ( return (
<div className={styles.container}> <Grid container alignItems="center" justify="space-around">
<Head> <Grid item xs={3}>
<title>Create Next App</title> <Anvils />
<link rel="icon" href="/favicon.ico" /> <State />
</Head> <Nodes />
</Grid>
<main className={styles.main}> <Grid item xs={5}>
<h1 className={styles.title}> <ReplicatedStorage />
Welcome to <a href="https://nextjs.org">Next.js!</a> </Grid>
</h1> <Grid item xs={3}>
<CPU />
<p className={styles.description}> <SharedStorage />
Get started by editing{' '} <Memory />
<code className={styles.code}>pages/index.js</code> </Grid>
</p> </Grid>
<div className={styles.grid}>
<a href="https://nextjs.org/docs" className={styles.card}>
<h3>Documentation &rarr;</h3>
<p>Find in-depth information about Next.js features and API.</p>
</a>
<a href="https://nextjs.org/learn" className={styles.card}>
<h3>Learn &rarr;</h3>
<p>Learn about Next.js in an interactive course with quizzes!</p>
</a>
<a
href="https://github.com/vercel/next.js/tree/master/examples"
className={styles.card}
>
<h3>Examples &rarr;</h3>
<p>Discover and deploy boilerplate example Next.js projects.</p>
</a>
<a
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
className={styles.card}
>
<h3>Deploy &rarr;</h3>
<p>
Instantly deploy your Next.js site to a public URL with Vercel.
</p>
</a>
</div>
</main>
<footer className={styles.footer}>
<a
href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
Powered by{' '}
<img src="/vercel.svg" alt="Vercel Logo" className={styles.logo} />
</a>
</footer>
</div>
); );
} };
export default Home; export default Home;

Write Preview
Loading…
Cancel
Save