HansKre · October 21, 2022 04:18
diff --git a/app.tsx b/app.tsx
 import '../styles/globals.css';
 import '../styles/xglb-theme.css';
 import type { AppProps } from 'next/app';
 import Layout from '../components/layout/Layout';

 function MyApp({ Component, pageProps }: AppProps) {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  );
 }
 export default MyApp;

 // get layout example
 // https://stackblitz.com/github/vercel/next.js/tree/canary/examples/layout-component?file=pages%2F_app.js
diff --git a/document.tsx b/document.tsx
 /* eslint-disable react/display-name */
 import Document, { DocumentContext } from 'next/document';
 import { ServerStyleSheet } from 'styled-components';

 export default class MyDocument extends Document {
  static async getInitialProps(ctx: DocumentContext) {
    const sheet = new ServerStyleSheet();
    const originalRenderPage = ctx.renderPage;

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: (App) => (props) =>
            sheet.collectStyles(<App {...props} />),
        });

      const initialProps = await Document.getInitialProps(ctx);
      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        ),
      };
    } finally {
      sheet.seal();
    }
  }
 }
diff --git a/index.tsx b/index.tsx
 import styles from '../styles/Home.module.css';

 export default function Home() {
  return (
    <main className={styles.main}>
      <h1 className={styles.title}>Xaption XGLB Cloud</h1>

      <p className={styles.description}>
        Die Cloud-Lösung für Ihre EU-Gelangensbestätigung
      </p>

      <div className={styles.grid}>
        <a href='https://nextjs.org/docs' className={styles.card}>
          <h2>Documentation &rarr;</h2>
          <p>Find in-depth information about Next.js features and API.</p>
        </a>

        <a href='https://nextjs.org/learn' className={styles.card}>
          <h2>Learn &rarr;</h2>
          <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}
        >
          <h2>Examples &rarr;</h2>
          <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}
        >
          <h2>Deploy &rarr;</h2>
          <p>Instantly deploy your Next.js site to a public URL with Vercel.</p>
        </a>
      </div>
    </main>
  );
 }
diff --git a/Layout.tsx b/Layout.tsx
 import { ReactNode } from 'react';
 import styled, { ThemeProvider } from 'styled-components';
 import Head from 'next/head';
 // import Footer from '../footer/Footer';
 import WithFadeInAnimation from '../WithFadeInAnimation';
 import useWindowResize from '../../hooks/useWindowResize';
 // import Navbar from '../navbar/Navbar';
 import mainTheme from '../../styles/mainTheme';

 /* Full height container with 44px for
 for out-of-viewport footer */
 const LayoutContainer = styled.div<{ innerHeight: number }>`
  background-color: ${(props) => props.theme.backgroundColor};
  min-height: ${(props) => `calc(${props.innerHeight}px + 0px)`};
  height: ${(props) => `calc(${props.innerHeight}px + 0px)`};
  max-height: ${(props) => `calc(${props.innerHeight}px + 0px)`};
  min-width: 100vw;
  width: 100vw;
  max-width: 100vw;
  padding: 1rem 1rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
 `;

 const Main = styled.main`
  display: flex;
  flex: auto;
  overflow: scroll;
 `;

 export default function Layout({ children }: { children: ReactNode }) {
  const { height: innerHeight } = useWindowResize();
  return (
    <ThemeProvider theme={mainTheme}>
      <WithFadeInAnimation>
        <LayoutContainer innerHeight={innerHeight}>
          <Head>
            <title>XGLB Cloud</title>
            <meta
              name='description'
              content='Xaption Gelangensbestätigung in der Cloud'
            />
            {/* viewport-fit=cover lets webpage scale to use notch-space on iOS when in landscape orientation
                maximum-scale=1 avoids automatic zoom on iOS when inputs are focused and focused element's font-size is less then 16px */}
            <meta
              name='viewport'
              content='width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover'
            />
            <link rel='icon' href='/favicon.ico' />
          </Head>
          {/* <Navbar /> */}
          <Main>{children}</Main>
          {/* <Footer /> */}
        </LayoutContainer>
      </WithFadeInAnimation>
    </ThemeProvider>
  );
 }

 // https://nextjs.org/docs/basic-features/layouts
 // https://github.com/vercel/next.js/tree/canary/examples/layout-component
	import '../styles/globals.css';
	import '../styles/xglb-theme.css';
	import type { AppProps } from 'next/app';
	import Layout from '../components/layout/Layout';

	function MyApp({ Component, pageProps }: AppProps) {
	return (
	<Layout>
	<Component {...pageProps} />
	</Layout>
	);
	}
	export default MyApp;

	// get layout example
	// https://stackblitz.com/github/vercel/next.js/tree/canary/examples/layout-component?file=pages%2F_app.js
	/* eslint-disable react/display-name */
	import Document, { DocumentContext } from 'next/document';
	import { ServerStyleSheet } from 'styled-components';

	export default class MyDocument extends Document {
	static async getInitialProps(ctx: DocumentContext) {
	const sheet = new ServerStyleSheet();
	const originalRenderPage = ctx.renderPage;

	try {
	ctx.renderPage = () =>
	originalRenderPage({
	enhanceApp: (App) => (props) =>
	sheet.collectStyles(<App {...props} />),
	});

	const initialProps = await Document.getInitialProps(ctx);
	return {
	...initialProps,
	styles: (
	<>
	{initialProps.styles}
	{sheet.getStyleElement()}
	</>
	),
	};
	} finally {
	sheet.seal();
	}
	}
	}
	import styles from '../styles/Home.module.css';

	export default function Home() {
	return (
	<main className={styles.main}>
	<h1 className={styles.title}>Xaption XGLB Cloud</h1>

	<p className={styles.description}>
	Die Cloud-Lösung für Ihre EU-Gelangensbestätigung
	</p>

	<div className={styles.grid}>
	<a href='https://nextjs.org/docs' className={styles.card}>
	<h2>Documentation →</h2>
	<p>Find in-depth information about Next.js features and API.</p>
	</a>

	<a href='https://nextjs.org/learn' className={styles.card}>
	<h2>Learn →</h2>
	<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}
	>
	<h2>Examples →</h2>
	<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}
	>
	<h2>Deploy →</h2>
	<p>Instantly deploy your Next.js site to a public URL with Vercel.</p>
	</a>
	</div>
	</main>
	);
	}
	import { ReactNode } from 'react';
	import styled, { ThemeProvider } from 'styled-components';
	import Head from 'next/head';
	// import Footer from '../footer/Footer';
	import WithFadeInAnimation from '../WithFadeInAnimation';
	import useWindowResize from '../../hooks/useWindowResize';
	// import Navbar from '../navbar/Navbar';
	import mainTheme from '../../styles/mainTheme';

	/* Full height container with 44px for
	for out-of-viewport footer */
	const LayoutContainer = styled.div<{ innerHeight: number }>`
	background-color: ${(props) => props.theme.backgroundColor};
	min-height: ${(props) => `calc(${props.innerHeight}px + 0px)`};
	height: ${(props) => `calc(${props.innerHeight}px + 0px)`};
	max-height: ${(props) => `calc(${props.innerHeight}px + 0px)`};
	min-width: 100vw;
	width: 100vw;
	max-width: 100vw;
	padding: 1rem 1rem 1rem 1rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	`;

	const Main = styled.main`
	display: flex;
	flex: auto;
	overflow: scroll;
	`;

	export default function Layout({ children }: { children: ReactNode }) {
	const { height: innerHeight } = useWindowResize();
	return (
	<ThemeProvider theme={mainTheme}>
	<WithFadeInAnimation>
	<LayoutContainer innerHeight={innerHeight}>
	<Head>
	<title>XGLB Cloud</title>
	<meta
	name='description'
	content='Xaption Gelangensbestätigung in der Cloud'
	/>
	{/* viewport-fit=cover lets webpage scale to use notch-space on iOS when in landscape orientation
	maximum-scale=1 avoids automatic zoom on iOS when inputs are focused and focused element's font-size is less then 16px */}
	<meta
	name='viewport'
	content='width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover'
	/>
	<link rel='icon' href='/favicon.ico' />
	</Head>
	{/* <Navbar /> */}
	<Main>{children}</Main>
	{/* <Footer /> */}
	</LayoutContainer>
	</WithFadeInAnimation>
	</ThemeProvider>
	);
	}

	// https://nextjs.org/docs/basic-features/layouts
	// https://github.com/vercel/next.js/tree/canary/examples/layout-component