├── .gitignore
├── home
    ├── public
    │   ├── favicon.ico
    │   └── zeit.svg
    ├── components
    │   └── Header.jsx
    ├── package.json
    ├── .gitignore
    ├── pages
    │   ├── _document.js
    │   └── index.js
    ├── next.config.js
    └── README.md
└── pdp
    ├── public
        ├── favicon.ico
        └── zeit.svg
    ├── package.json
    ├── .gitignore
    ├── pages
        ├── _document.js
        └── index.js
    ├── next.config.js
    └── README.md


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | out
3 | 


--------------------------------------------------------------------------------
/home/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jherr/wp5-nextjs-10/HEAD/home/public/favicon.ico


--------------------------------------------------------------------------------
/pdp/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jherr/wp5-nextjs-10/HEAD/pdp/public/favicon.ico


--------------------------------------------------------------------------------
/home/components/Header.jsx:
--------------------------------------------------------------------------------
 1 | const Header = () => (
 2 |   <div
 3 |     style={{
 4 |       backgroundColor: "darkred",
 5 |       color: "white",
 6 |       width: "100%",
 7 |       padding: "1em",
 8 |     }}
 9 |   >
10 |     <h1>Header</h1>
11 |   </div>
12 | );
13 | 
14 | export default Header;
15 | 


--------------------------------------------------------------------------------
/home/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "home",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start"
 9 |   },
10 |   "resolutions": {
11 |     "webpack": "5.1.3",
12 |     "next": "9.5.5"
13 |   },
14 |   "dependencies": {
15 |     "@module-federation/nextjs-mf": "0.0.1-beta.4",
16 |     "next": "^9.5.6-canary.0",
17 |     "react": "17.0.1",
18 |     "react-dom": "17.0.1"
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/pdp/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "pdp",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev -p 3001",
 7 |     "build": "next build",
 8 |     "start": "next start"
 9 |   },
10 |   "resolutions": {
11 |     "webpack": "5.1.3",
12 |     "next": "9.5.5"
13 |   },
14 |   "dependencies": {
15 |     "@module-federation/nextjs-mf": "0.0.1-beta.4",
16 |     "next": "^9.5.6-canary.0",
17 |     "react": "17.0.1",
18 |     "react-dom": "17.0.1"
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/home/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # next.js
12 | /.next/
13 | /out/
14 | 
15 | # production
16 | /build
17 | 
18 | # misc
19 | .DS_Store
20 | 
21 | # debug
22 | npm-debug.log*
23 | yarn-debug.log*
24 | yarn-error.log*
25 | 
26 | # local env files
27 | .env.local
28 | .env.development.local
29 | .env.test.local
30 | .env.production.local
31 | 


--------------------------------------------------------------------------------
/pdp/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # next.js
12 | /.next/
13 | /out/
14 | 
15 | # production
16 | /build
17 | 
18 | # misc
19 | .DS_Store
20 | 
21 | # debug
22 | npm-debug.log*
23 | yarn-debug.log*
24 | yarn-error.log*
25 | 
26 | # local env files
27 | .env.local
28 | .env.development.local
29 | .env.test.local
30 | .env.production.local
31 | 


--------------------------------------------------------------------------------
/home/pages/_document.js:
--------------------------------------------------------------------------------
 1 | import Document, { Html, Head, Main, NextScript } from "next/document";
 2 | import { patchSharing } from "@module-federation/nextjs-mf";
 3 | 
 4 | class MyDocument extends Document {
 5 |   static async getInitialProps(ctx) {
 6 |     const initialProps = await Document.getInitialProps(ctx);
 7 |     return { ...initialProps };
 8 |   }
 9 | 
10 |   render() {
11 |     return (
12 |       <Html>
13 |         {patchSharing()}
14 |         <Head />
15 |         <body>
16 |           <Main />
17 |           <NextScript />
18 |         </body>
19 |       </Html>
20 |     );
21 |   }
22 | }
23 | 
24 | export default MyDocument;
25 | 


--------------------------------------------------------------------------------
/pdp/pages/_document.js:
--------------------------------------------------------------------------------
 1 | import Document, { Html, Head, Main, NextScript } from "next/document";
 2 | import { patchSharing } from "@module-federation/nextjs-mf";
 3 | 
 4 | class MyDocument extends Document {
 5 |   static async getInitialProps(ctx) {
 6 |     const initialProps = await Document.getInitialProps(ctx);
 7 |     return { ...initialProps };
 8 |   }
 9 | 
10 |   render() {
11 |     return (
12 |       <Html>
13 |         {patchSharing()}
14 |         <script src="http://localhost:3000/_next/static/remoteEntryMerged.js" />
15 |         <Head />
16 |         <body>
17 |           <Main />
18 |           <NextScript />
19 |         </body>
20 |       </Html>
21 |     );
22 |   }
23 | }
24 | 
25 | export default MyDocument;
26 | 


--------------------------------------------------------------------------------
/home/public/zeit.svg:
--------------------------------------------------------------------------------
 1 | <svg width="82" height="16" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 |     <path fill="url(#prefix__paint0_linear)" d="M9.018 0l9.019 16H0L9.018 0z"/>
 3 |     <path fill="#333" fill-rule="evenodd" d="M51.634 12.028h-6.492V2.052h6.492v1.256H46.61v3.007h4.37V7.57h-4.37v3.202h5.024v1.255zm-14.063 0h-7.235v-1.096l5.342-7.624h-5.253V2.052h7.058v1.097l-5.342 7.623h5.43v1.256zm21.88 0h6.333v-1.256h-2.423V3.308h2.423V2.052h-6.332v1.256h2.441v7.465h-2.441v1.255zm18.22 0h-1.468v-8.72h-3.36V2.052h8.225v1.256H77.67v8.72z" clip-rule="evenodd"/>
 4 |     <defs>
 5 |         <linearGradient id="prefix__paint0_linear" x1="28.022" x2="16.189" y1="22.991" y2="8.569" gradientUnits="userSpaceOnUse">
 6 |             <stop stop-color="#fff"/>
 7 |             <stop offset="1"/>
 8 |         </linearGradient>
 9 |     </defs>
10 | </svg>
11 | 


--------------------------------------------------------------------------------
/pdp/public/zeit.svg:
--------------------------------------------------------------------------------
 1 | <svg width="82" height="16" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 |     <path fill="url(#prefix__paint0_linear)" d="M9.018 0l9.019 16H0L9.018 0z"/>
 3 |     <path fill="#333" fill-rule="evenodd" d="M51.634 12.028h-6.492V2.052h6.492v1.256H46.61v3.007h4.37V7.57h-4.37v3.202h5.024v1.255zm-14.063 0h-7.235v-1.096l5.342-7.624h-5.253V2.052h7.058v1.097l-5.342 7.623h5.43v1.256zm21.88 0h6.333v-1.256h-2.423V3.308h2.423V2.052h-6.332v1.256h2.441v7.465h-2.441v1.255zm18.22 0h-1.468v-8.72h-3.36V2.052h8.225v1.256H77.67v8.72z" clip-rule="evenodd"/>
 4 |     <defs>
 5 |         <linearGradient id="prefix__paint0_linear" x1="28.022" x2="16.189" y1="22.991" y2="8.569" gradientUnits="userSpaceOnUse">
 6 |             <stop stop-color="#fff"/>
 7 |             <stop offset="1"/>
 8 |         </linearGradient>
 9 |     </defs>
10 | </svg>
11 | 


--------------------------------------------------------------------------------
/home/next.config.js:
--------------------------------------------------------------------------------
 1 | const {
 2 |   withModuleFederation,
 3 |   MergeRuntime,
 4 | } = require("@module-federation/nextjs-mf");
 5 | const path = require("path");
 6 | 
 7 | module.exports = {
 8 |   webpack: (config, options) => {
 9 |     const { buildId, dev, isServer, defaultLoaders, webpack } = options;
10 |     const mfConf = {
11 |       name: "home",
12 |       library: { type: config.output.libraryTarget, name: "home" },
13 |       filename: "static/runtime/remoteEntry.js",
14 |       remotes: {},
15 |       exposes: {
16 |         "./Header": "./components/Header",
17 |       },
18 |       shared: [],
19 |     };
20 | 
21 |     // Configures ModuleFederation and other Webpack properties
22 |     withModuleFederation(config, options, mfConf);
23 | 
24 |     config.plugins.push(new MergeRuntime());
25 | 
26 |     if (!isServer) {
27 |       config.output.publicPath = "http://localhost:3000/_next/";
28 |     }
29 | 
30 |     return config;
31 |   },
32 | };
33 | 


--------------------------------------------------------------------------------
/pdp/next.config.js:
--------------------------------------------------------------------------------
 1 | const {
 2 |   withModuleFederation,
 3 |   MergeRuntime,
 4 | } = require("@module-federation/nextjs-mf");
 5 | const path = require("path");
 6 | 
 7 | module.exports = {
 8 |   webpack: (config, options) => {
 9 |     const { buildId, dev, isServer, defaultLoaders, webpack } = options;
10 |     const mfConf = {
11 |       name: "pdp",
12 |       library: { type: config.output.libraryTarget, name: "pdp" },
13 |       filename: "static/runtime/remoteEntry.js",
14 |       remotes: {
15 |         // For SSR, resolve to disk path (or you can use code streaming if you have access)
16 |         home: isServer
17 |           ? path.resolve(
18 |               __dirname,
19 |               "../home/.next/server/static/runtime/remoteEntry.js"
20 |             )
21 |           : "home", // for client, treat it as a global
22 |       },
23 |       exposes: {},
24 |       shared: [],
25 |     };
26 | 
27 |     // Configures ModuleFederation and other Webpack properties
28 |     withModuleFederation(config, options, mfConf);
29 | 
30 |     if (!isServer) {
31 |       config.output.publicPath = "http://localhost:3001/_next/";
32 |     }
33 | 
34 |     config.plugins.push(new MergeRuntime());
35 | 
36 |     return config;
37 |   },
38 | };
39 | 


--------------------------------------------------------------------------------
/home/README.md:
--------------------------------------------------------------------------------
 1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/zeit/next.js/tree/canary/packages/create-next-app).
 2 | 
 3 | ## Getting Started
 4 | 
 5 | First, run the development server:
 6 | 
 7 | ```bash
 8 | npm run dev
 9 | # or
10 | yarn dev
11 | ```
12 | 
13 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
14 | 
15 | You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
16 | 
17 | ## Learn More
18 | 
19 | To learn more about Next.js, take a look at the following resources:
20 | 
21 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
22 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
23 | 
24 | You can check out [the Next.js GitHub repository](https://github.com/zeit/next.js/) - your feedback and contributions are welcome!
25 | 
26 | ## Deploy on ZEIT Now
27 | 
28 | The easiest way to deploy your Next.js app is to use the [ZEIT Now Platform](https://zeit.co/import?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
29 | 
30 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
31 | 


--------------------------------------------------------------------------------
/pdp/README.md:
--------------------------------------------------------------------------------
 1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/zeit/next.js/tree/canary/packages/create-next-app).
 2 | 
 3 | ## Getting Started
 4 | 
 5 | First, run the development server:
 6 | 
 7 | ```bash
 8 | npm run dev
 9 | # or
10 | yarn dev
11 | ```
12 | 
13 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
14 | 
15 | You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
16 | 
17 | ## Learn More
18 | 
19 | To learn more about Next.js, take a look at the following resources:
20 | 
21 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
22 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
23 | 
24 | You can check out [the Next.js GitHub repository](https://github.com/zeit/next.js/) - your feedback and contributions are welcome!
25 | 
26 | ## Deploy on ZEIT Now
27 | 
28 | The easiest way to deploy your Next.js app is to use the [ZEIT Now Platform](https://zeit.co/import?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
29 | 
30 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
31 | 


--------------------------------------------------------------------------------
/home/pages/index.js:
--------------------------------------------------------------------------------
  1 | import Head from "next/head";
  2 | 
  3 | import Header from "../components/Header.jsx";
  4 | 
  5 | const Home = () => (
  6 |   <div className="container">
  7 |     <Head>
  8 |       <title>Create Next App</title>
  9 |       <link rel="icon" href="/favicon.ico" />
 10 |     </Head>
 11 | 
 12 |     <main>
 13 |       <Header />
 14 |       <h1 className="title">
 15 |         Welcome to <a href="https://nextjs.org">Next.js!</a>
 16 |       </h1>
 17 | 
 18 |       <p className="description">
 19 |         Get started by editing <code>pages/index.js</code>
 20 |       </p>
 21 | 
 22 |       <div className="grid">
 23 |         <a href="https://nextjs.org/docs" className="card">
 24 |           <h3>Documentation &rarr;</h3>
 25 |           <p>Find in-depth information about Next.js features and API.</p>
 26 |         </a>
 27 | 
 28 |         <a href="https://nextjs.org/learn" className="card">
 29 |           <h3>Learn &rarr;</h3>
 30 |           <p>Learn about Next.js in an interactive course with quizzes!</p>
 31 |         </a>
 32 | 
 33 |         <a
 34 |           href="https://github.com/zeit/next.js/tree/master/examples"
 35 |           className="card"
 36 |         >
 37 |           <h3>Examples &rarr;</h3>
 38 |           <p>Discover and deploy boilerplate example Next.js projects.</p>
 39 |         </a>
 40 | 
 41 |         <a
 42 |           href="https://zeit.co/import?filter=next.js&utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
 43 |           className="card"
 44 |         >
 45 |           <h3>Deploy &rarr;</h3>
 46 |           <p>
 47 |             Instantly deploy your Next.js site to a public URL with ZEIT Now.
 48 |           </p>
 49 |         </a>
 50 |       </div>
 51 |     </main>
 52 | 
 53 |     <footer>
 54 |       <a
 55 |         href="https://zeit.co?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
 56 |         target="_blank"
 57 |         rel="noopener noreferrer"
 58 |       >
 59 |         Powered by <img src="/zeit.svg" alt="ZEIT Logo" />
 60 |       </a>
 61 |     </footer>
 62 | 
 63 |     <style jsx>{`
 64 |       .container {
 65 |         min-height: 100vh;
 66 |         padding: 0 0.5rem;
 67 |         display: flex;
 68 |         flex-direction: column;
 69 |         justify-content: center;
 70 |         align-items: center;
 71 |       }
 72 | 
 73 |       main {
 74 |         padding: 5rem 0;
 75 |         flex: 1;
 76 |         display: flex;
 77 |         flex-direction: column;
 78 |         justify-content: center;
 79 |         align-items: center;
 80 |       }
 81 | 
 82 |       footer {
 83 |         width: 100%;
 84 |         height: 100px;
 85 |         border-top: 1px solid #eaeaea;
 86 |         display: flex;
 87 |         justify-content: center;
 88 |         align-items: center;
 89 |       }
 90 | 
 91 |       footer img {
 92 |         margin-left: 0.5rem;
 93 |       }
 94 | 
 95 |       footer a {
 96 |         display: flex;
 97 |         justify-content: center;
 98 |         align-items: center;
 99 |       }
100 | 
101 |       a {
102 |         color: inherit;
103 |         text-decoration: none;
104 |       }
105 | 
106 |       .title a {
107 |         color: #0070f3;
108 |         text-decoration: none;
109 |       }
110 | 
111 |       .title a:hover,
112 |       .title a:focus,
113 |       .title a:active {
114 |         text-decoration: underline;
115 |       }
116 | 
117 |       .title {
118 |         margin: 0;
119 |         line-height: 1.15;
120 |         font-size: 4rem;
121 |       }
122 | 
123 |       .title,
124 |       .description {
125 |         text-align: center;
126 |       }
127 | 
128 |       .description {
129 |         line-height: 1.5;
130 |         font-size: 1.5rem;
131 |       }
132 | 
133 |       code {
134 |         background: #fafafa;
135 |         border-radius: 5px;
136 |         padding: 0.75rem;
137 |         font-size: 1.1rem;
138 |         font-family: Menlo, Monaco, Lucida Console, Liberation Mono,
139 |           DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
140 |       }
141 | 
142 |       .grid {
143 |         display: flex;
144 |         align-items: center;
145 |         justify-content: center;
146 |         flex-wrap: wrap;
147 | 
148 |         max-width: 800px;
149 |         margin-top: 3rem;
150 |       }
151 | 
152 |       .card {
153 |         margin: 1rem;
154 |         flex-basis: 45%;
155 |         padding: 1.5rem;
156 |         text-align: left;
157 |         color: inherit;
158 |         text-decoration: none;
159 |         border: 1px solid #eaeaea;
160 |         border-radius: 10px;
161 |         transition: color 0.15s ease, border-color 0.15s ease;
162 |       }
163 | 
164 |       .card:hover,
165 |       .card:focus,
166 |       .card:active {
167 |         color: #0070f3;
168 |         border-color: #0070f3;
169 |       }
170 | 
171 |       .card h3 {
172 |         margin: 0 0 1rem 0;
173 |         font-size: 1.5rem;
174 |       }
175 | 
176 |       .card p {
177 |         margin: 0;
178 |         font-size: 1.25rem;
179 |         line-height: 1.5;
180 |       }
181 | 
182 |       @media (max-width: 600px) {
183 |         .grid {
184 |           width: 100%;
185 |           flex-direction: column;
186 |         }
187 |       }
188 |     `}</style>
189 | 
190 |     <style jsx global>{`
191 |       html,
192 |       body {
193 |         padding: 0;
194 |         margin: 0;
195 |         font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
196 |           Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
197 |       }
198 | 
199 |       * {
200 |         box-sizing: border-box;
201 |       }
202 |     `}</style>
203 |   </div>
204 | );
205 | 
206 | export default Home;
207 | 


--------------------------------------------------------------------------------
/pdp/pages/index.js:
--------------------------------------------------------------------------------
  1 | import Head from "next/head";
  2 | 
  3 | const Header = (await import("home/Header")).default;
  4 | 
  5 | const Home = () => (
  6 |   <div className="container">
  7 |     <Head>
  8 |       <title>Create Next App</title>
  9 |       <link rel="icon" href="/favicon.ico" />
 10 |     </Head>
 11 | 
 12 |     <main>
 13 |       <Header />
 14 |       <h1 className="title">
 15 |         Welcome to <a href="https://nextjs.org">Next.js!</a>
 16 |       </h1>
 17 | 
 18 |       <p className="description">
 19 |         Get started by editing <code>pages/index.js</code>
 20 |       </p>
 21 | 
 22 |       <div className="grid">
 23 |         <a href="https://nextjs.org/docs" className="card">
 24 |           <h3>Documentation &rarr;</h3>
 25 |           <p>Find in-depth information about Next.js features and API.</p>
 26 |         </a>
 27 | 
 28 |         <a href="https://nextjs.org/learn" className="card">
 29 |           <h3>Learn &rarr;</h3>
 30 |           <p>Learn about Next.js in an interactive course with quizzes!</p>
 31 |         </a>
 32 | 
 33 |         <a
 34 |           href="https://github.com/zeit/next.js/tree/master/examples"
 35 |           className="card"
 36 |         >
 37 |           <h3>Examples &rarr;</h3>
 38 |           <p>Discover and deploy boilerplate example Next.js projects.</p>
 39 |         </a>
 40 | 
 41 |         <a
 42 |           href="https://zeit.co/import?filter=next.js&utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
 43 |           className="card"
 44 |         >
 45 |           <h3>Deploy &rarr;</h3>
 46 |           <p>
 47 |             Instantly deploy your Next.js site to a public URL with ZEIT Now.
 48 |           </p>
 49 |         </a>
 50 |       </div>
 51 |     </main>
 52 | 
 53 |     <footer>
 54 |       <a
 55 |         href="https://zeit.co?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
 56 |         target="_blank"
 57 |         rel="noopener noreferrer"
 58 |       >
 59 |         Powered by <img src="/zeit.svg" alt="ZEIT Logo" />
 60 |       </a>
 61 |     </footer>
 62 | 
 63 |     <style jsx>{`
 64 |       .container {
 65 |         min-height: 100vh;
 66 |         padding: 0 0.5rem;
 67 |         display: flex;
 68 |         flex-direction: column;
 69 |         justify-content: center;
 70 |         align-items: center;
 71 |       }
 72 | 
 73 |       main {
 74 |         padding: 5rem 0;
 75 |         flex: 1;
 76 |         display: flex;
 77 |         flex-direction: column;
 78 |         justify-content: center;
 79 |         align-items: center;
 80 |       }
 81 | 
 82 |       footer {
 83 |         width: 100%;
 84 |         height: 100px;
 85 |         border-top: 1px solid #eaeaea;
 86 |         display: flex;
 87 |         justify-content: center;
 88 |         align-items: center;
 89 |       }
 90 | 
 91 |       footer img {
 92 |         margin-left: 0.5rem;
 93 |       }
 94 | 
 95 |       footer a {
 96 |         display: flex;
 97 |         justify-content: center;
 98 |         align-items: center;
 99 |       }
100 | 
101 |       a {
102 |         color: inherit;
103 |         text-decoration: none;
104 |       }
105 | 
106 |       .title a {
107 |         color: #0070f3;
108 |         text-decoration: none;
109 |       }
110 | 
111 |       .title a:hover,
112 |       .title a:focus,
113 |       .title a:active {
114 |         text-decoration: underline;
115 |       }
116 | 
117 |       .title {
118 |         margin: 0;
119 |         line-height: 1.15;
120 |         font-size: 4rem;
121 |       }
122 | 
123 |       .title,
124 |       .description {
125 |         text-align: center;
126 |       }
127 | 
128 |       .description {
129 |         line-height: 1.5;
130 |         font-size: 1.5rem;
131 |       }
132 | 
133 |       code {
134 |         background: #fafafa;
135 |         border-radius: 5px;
136 |         padding: 0.75rem;
137 |         font-size: 1.1rem;
138 |         font-family: Menlo, Monaco, Lucida Console, Liberation Mono,
139 |           DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
140 |       }
141 | 
142 |       .grid {
143 |         display: flex;
144 |         align-items: center;
145 |         justify-content: center;
146 |         flex-wrap: wrap;
147 | 
148 |         max-width: 800px;
149 |         margin-top: 3rem;
150 |       }
151 | 
152 |       .card {
153 |         margin: 1rem;
154 |         flex-basis: 45%;
155 |         padding: 1.5rem;
156 |         text-align: left;
157 |         color: inherit;
158 |         text-decoration: none;
159 |         border: 1px solid #eaeaea;
160 |         border-radius: 10px;
161 |         transition: color 0.15s ease, border-color 0.15s ease;
162 |       }
163 | 
164 |       .card:hover,
165 |       .card:focus,
166 |       .card:active {
167 |         color: #0070f3;
168 |         border-color: #0070f3;
169 |       }
170 | 
171 |       .card h3 {
172 |         margin: 0 0 1rem 0;
173 |         font-size: 1.5rem;
174 |       }
175 | 
176 |       .card p {
177 |         margin: 0;
178 |         font-size: 1.25rem;
179 |         line-height: 1.5;
180 |       }
181 | 
182 |       @media (max-width: 600px) {
183 |         .grid {
184 |           width: 100%;
185 |           flex-direction: column;
186 |         }
187 |       }
188 |     `}</style>
189 | 
190 |     <style jsx global>{`
191 |       html,
192 |       body {
193 |         padding: 0;
194 |         margin: 0;
195 |         font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
196 |           Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
197 |       }
198 | 
199 |       * {
200 |         box-sizing: border-box;
201 |       }
202 |     `}</style>
203 |   </div>
204 | );
205 | 
206 | export default Home;
207 | 


--------------------------------------------------------------------------------