withApollo
21 | withApolloPreview
37 |
14 | { type === '404' ?
15 |
19 |
20 |
21 |
22 |
23 |
12 |
20 | { ({ node }) => (
21 | <>
22 |
27 | }
28 |
29 | );
30 |
31 | MainLayout.propTypes = {
32 | children: PropTypes.node,
33 | className: PropTypes.string,
34 | };
35 |
36 | export default MainLayout;
37 |
--------------------------------------------------------------------------------
/www/shared/modules/nprogress/nprogress.js:
--------------------------------------------------------------------------------
1 | import Router from 'next/router'; // eslint-disable-line no-restricted-imports
2 | import NProgress from 'nprogress';
3 |
4 | NProgress.configure({
5 | minimum: 0.2,
6 | speed: 300,
7 | trickleSpeed: 300,
8 | showSpinner: false,
9 | });
10 |
11 | const START_DELAY = 700;
12 |
13 | let refCount = 0;
14 | let startDelayTimeout;
15 |
16 | const start = () => {
17 | refCount += 1;
18 |
19 | if (refCount === 1) {
20 | clearTimeout(startDelayTimeout);
21 | startDelayTimeout = setTimeout(() => NProgress.start(), START_DELAY);
22 | }
23 | };
24 |
25 | const done = () => {
26 | refCount -= 1;
27 |
28 | if (refCount === 0) {
29 | clearTimeout(startDelayTimeout);
30 | NProgress.done();
31 | }
32 | };
33 |
34 | let subscribedToRouter = false;
35 |
36 | const subscribeToRouter = () => {
37 | if (typeof window !== 'undefined' && !subscribedToRouter) {
38 | Router.events.on('routeChangeStart', start);
39 | Router.events.on('routeChangeComplete', done);
40 | Router.events.on('routeChangeError', done);
41 |
42 | subscribedToRouter = true;
43 | }
44 | };
45 |
46 | export default { start, done };
47 | export { subscribeToRouter };
48 |
--------------------------------------------------------------------------------
/docusaurus/docs/what-is-included/everything-else.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: everything-else
3 | title: And everything that comes with Next.js
4 | sidebar_label: And everything from Next.js
5 | ---
6 |
7 | ## File-System Routing
8 |
9 | Next.js comes with a default routing system, which will serve each file in the `/pages` folder with pathname corresponding to the filename. For example, `/pages/some_page.js` would be server at `website.com/some_page`.
10 |
11 | ## Automatic Code Splitting
12 |
13 | Next.js will automatically split pages and common code into separate chunks based on several metrics, improving load time performance.
14 |
15 | ## Server Side Rendering
16 |
17 | Next.js is built to render pages server side, and rehydrate them in the client whenever it's necessary.
18 |
19 | If you're looking for more information about server-side rendering and its benefits, you can read through [this article](https://developers.google.com/web/updates/2019/02/rendering-on-the-web), where rehydration is also covered.
20 |
21 | ## Static Exporting
22 |
23 | Next.js guarantees that static pages also benefit from these features, as well as other things still, like dynamic imports and prefetching.
24 |
25 | ## And more
26 |
27 | Check the [Next.js documentation](https://nextjs.org/#more) for all the features available.
28 |
--------------------------------------------------------------------------------
/www/shared/modules/google-tag-manager/google-tag-manager.js:
--------------------------------------------------------------------------------
1 | const mockIfMissingTrackigId = (fn) => process.env.GTM_CONTAINER_ID ? fn : () => {};
2 |
3 | export const initGTM = mockIfMissingTrackigId(() => {
4 | if (document.getElementById(`gtm-${process.env.GTM_CONTAINER_ID}`)) {
5 | return;
6 | }
7 |
8 | const script = document.createElement('script');
9 |
10 | script.id = `gtm-${process.env.GTM_CONTAINER_ID}`;
11 | script.innerHTML = `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','${process.env.GTM_CONTAINER_ID}');`;
12 |
13 | document.head.appendChild(script);
14 |
15 | window.dataLayer = [];
16 | });
17 |
18 | export const destroyGTM = mockIfMissingTrackigId(() => {
19 | const script = document.getElementById(`gtm-${process.env.GTM_CONTAINER_ID}`);
20 |
21 | script?.parentNode?.removeChild(script);
22 |
23 | delete window.dataLayer;
24 | });
25 |
26 | export const dataLayer = mockIfMissingTrackigId((dataLayer) => {
27 | window.dataLayer = window.dataLayer ?? [];
28 | window.dataLayer.push(dataLayer);
29 | });
30 |
--------------------------------------------------------------------------------
/www/shared/styles/imports/custom-medias.css:
--------------------------------------------------------------------------------
1 | /* ==========================================================================
2 | Custom media queries - for more information check https://github.com/postcss/postcss-custom-media
3 |
4 | Use it like so: @media (--sm) { ... }
5 | ========================================================================== */
6 |
7 | /* Use these if you are developing for desktop first and want to target lower resolutions */
8 |
9 | @custom-media --lt-xxs (width < 20em); /* 320px */
10 | @custom-media --lt-xs (width < 30em); /* 480px */
11 | @custom-media --lt-sm (width < 48em); /* 768px */
12 | @custom-media --lt-md (width < 64em); /* 1024px */
13 | @custom-media --lt-lg (width < 80em); /* 1280px */
14 | @custom-media --lt-xl (width < 90em); /* 1440px */
15 | @custom-media --lt-xxl (width < 120em); /* 1920px */
16 |
17 | /* Use these if you are developing for mobile first and want to target higher resolutions */
18 |
19 | @custom-media --gte-xxs (width >= 0); /* 0 */
20 | @custom-media --gte-xs (width >= 30em); /* 480px */
21 | @custom-media --gte-sm (width >= 48em); /* 768px */
22 | @custom-media --gte-md (width >= 64em); /* 1024px */
23 | @custom-media --gte-lg (width >= 80em); /* 1280px */
24 | @custom-media --gte-xl (width >= 90em); /* 1440px */
25 | @custom-media --gte-xxl (width >= 120em); /* 1920px */
26 |
--------------------------------------------------------------------------------
/docusaurus/static/recipes-assets/dato-cms/graphql/graphql.js:
--------------------------------------------------------------------------------
1 | import { introspectSchema, makeRemoteExecutableSchema } from 'apollo-server';
2 | import { ApolloServer } from 'apollo-server-micro';
3 | import { setContext } from 'apollo-link-context';
4 | import { HttpLink } from 'apollo-link-http';
5 | import fetch from 'node-fetch';
6 |
7 | const http = new HttpLink({
8 | uri: 'https://graphql.datocms.com/',
9 | fetch,
10 | });
11 |
12 | const link = setContext(() => ({
13 | headers: {
14 | 'Content-Type': 'application/json',
15 | Accept: 'application/json',
16 | Authorization: `Bearer ${process.env.DATOCMS_TOKEN}`,
17 | },
18 | })).concat(http);
19 |
20 | let schema = {};
21 |
22 | const getSchema = async () => {
23 | try {
24 | schema = await introspectSchema(link);
25 | } catch (error) {
26 | console.log(error);
27 | }
28 |
29 | const executableSchema = makeRemoteExecutableSchema({
30 | schema,
31 | link,
32 | });
33 |
34 | return executableSchema;
35 | };
36 |
37 | const apolloServer = new ApolloServer({
38 | schema: getSchema(),
39 | introspection: true,
40 | playground: {
41 | settings: {
42 | 'schema.polling.enable': false,
43 | },
44 | },
45 | });
46 |
47 | export default apolloServer.createHandler({ path: '/api/graphql' });
48 |
--------------------------------------------------------------------------------
/docusaurus/docs/what-is-included/top-progress-bar.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: top-progress-bar
3 | title: Top progress bar
4 | sidebar_label: Top progress bar
5 | ---
6 |
7 | A very subtle progress bar is displayed when Next.js is performing route changes, which can take some time depending on how fast the page assets and data are loaded (via `getInitialProps`, `getServerSideProps` or `getStaticProps` with `revalidate`).
8 |
9 | We use the [`NProgress`](https://github.com/rstacruz/nprogress) library for the heavy-lifting of the progress bar UI. Under `shared/modules/nprogress`, you will find a `NProgress` sub-facade that:
10 |
11 | - Has `start()` and `done()` methods that are ref-count aware, meaning you can call them several times around your code-base; only the first start call and last done call will be accounted for to show / hide the progress bar.
12 | - Adds a built-in start delay, so that the progress bar is not shown right away.
13 |
14 | ## Removing this feature
15 |
16 | If you are going to have another loading solution for Next.js page transitions, follow these steps:
17 |
18 | 1. Uninstall `nprogress`.
19 | 2. Delete `shared/modules/nprogress` folder and its import & usage from `app/App.js`.
20 | 3. Delete `shared/styles/global/nprogress.css` and its import from `shared/styles/global/index.css`.
21 | 4. Remove the `--z-index-nprogress` CSS variable from `shared/styles/imports/variables.css`.
22 |
--------------------------------------------------------------------------------
/intl/en-US.json5:
--------------------------------------------------------------------------------
1 | {
2 | // Base SEO used for all pages.
3 | "seo.title": "{project-name}",
4 | "seo.description": "{project-description}",
5 | "seo.keywords": "{project-keyword-1}, {project-keyword-2}",
6 |
7 | // Home page.
8 | "home.title": "Homepage",
9 |
10 | // Error page.
11 | "error.internal.title": "An error has occurred",
12 | "error.not-found.title": "Page not found",
13 | "error.return-to-home": "Return to home",
14 |
15 | // Contacts page.
16 | "contacts.seo.title": "Contacts",
17 | "contacts.seo.description": "Know how you can contact us",
18 | "contacts.seo.keywords": "contact, email, telephone, telephone number, phone, phone number, address",
19 | "contacts.title": "Contacts",
20 | "contacts.name": "Name: { name }",
21 | "contacts.email": "Email: { email }",
22 |
23 | // Terms page.
24 | "terms.seo.title": "Terms and Conditions",
25 | "terms.seo.description": "Read the Terms and Conditions before using this website",
26 | "terms.seo.keywords": "terms, conditions, read",
27 | "terms.title": "Terms and Conditions",
28 |
29 | // CookieBanner component.
30 | "cookie-banner.text": "We use cookies to personalize content and to collect analytics to improve our website. Please review our terms and conditions for more information.",
31 | "cookie-banner.accept": "Accept",
32 | "cookie-banner.reject": "Reject"
33 | }
34 |
--------------------------------------------------------------------------------
/docusaurus/docs/what-is-included/customizable-page-transitions.md:
--------------------------------------------------------------------------------
1 | ---
2 | id: customizable-page-transitions
3 | title: Customizable page transitions
4 | sidebar_label: Customizable page transitions
5 | ---
6 |
7 | The boilerplate includes [`@moxy/react-page-swapper`](https://github.com/moxystudio/react-page-swapper) which eases out the implementation of page transitions.
8 |
9 | A simple `fade` transition built with `{ node }
23 |
24 |
25 | ) }
26 | 
2 |
3 | # Next.js with MOXY
4 |
5 | [![Build Status][build-status-image]][build-status-url] [![Coverage Status][codecov-image]][codecov-url] [![Dependency status][david-dm-image]][david-dm-url] [![Dev Dependency status][david-dm-dev-image]][david-dm-dev-url]
6 |
7 | [build-status-url]:https://github.com/moxystudio/next-with-moxy/actions
8 | [build-status-image]:https://img.shields.io/github/workflow/status/moxystudio/next-with-moxy/Node%20CI/master
9 | [codecov-url]:https://codecov.io/gh/moxystudio/next-with-moxy
10 | [codecov-image]:https://img.shields.io/codecov/c/github/moxystudio/next-with-moxy/master.svg
11 | [david-dm-url]:https://david-dm.org/moxystudio/next-with-moxy
12 | [david-dm-image]:https://img.shields.io/david/moxystudio/next-with-moxy.svg
13 | [david-dm-dev-url]:https://david-dm.org/moxystudio/next-with-moxy?type=dev
14 | [david-dm-dev-image]:https://img.shields.io/david/dev/moxystudio/next-with-moxy.svg
15 |
16 | MOXY's boilerplate to accelerate the setup of new [Next.js](https://nextjs.org/) based web applications.
17 |
18 | You may preview the boilerplate at https://next-with-moxy.vercel.app.
19 |
20 | ## Documentation
21 |
22 | Please check out the documentation page at https://next-with.moxy.tech.
23 |
24 | To view the documentation locally, you may run:
25 |
26 | ```bash
27 | npm i --prefix docusaurus
28 | npm run docs
29 | ```
30 |
31 | ## License
32 |
33 | [MIT License](./LICENSE.md)
34 |
--------------------------------------------------------------------------------
/docusaurus/static/img/logo-moxy.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/www/pages/home/Home.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { FormattedMessage } from 'react-intl';
3 | import { getIntlProps } from '@moxy/next-intl';
4 | import { Container } from '../../shared/react/grid';
5 |
6 | import styles from './Home.module.css';
7 |
8 | const Home = () => (
9 |
12 |
14 |
15 |
16 |
31 | typography-h1
17 |typography-h2
18 |typography-h3
19 |typography-h4
20 |typography-h5
21 |typography-h6
22 | 23 |typography-subtitle-1
24 | typography-subtitle-2
25 | typography-body-1
26 | typography-body-2
27 | typography-text-button
28 | typography-caption
29 | typography-overline
30 |
27 | { children }
28 |
29 | 0 && progress < 1,
25 | [styles.loaded]: progress === 1,
26 | }, className) }>
27 |
31 |
32 | { error ?
34 | ) }
35 | foo
;
8 |
9 | it('should render correctly when in prop is false', () => {
10 | render(