Merge pull request #9 from trisbee/dev/example-dynamic

fixed assets bug
trisbee · Jun 11, 2020 · 54f2266 · 54f2266
2 parents 35f1ffd + aa1f4ee
commit 54f2266
Show file tree

Hide file tree

Showing 15 changed files with 7,828 additions and 17 deletions.
diff --git a/examples/simple/package-lock.json b/examples/simple/package-lock.json
diff --git a/examples/simple/package.json b/examples/simple/package.json
@@ -1,6 +1,6 @@
 {
   "name": "simple",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "An \"simple example\" for next-i18n-routes package",
   "main": "index.js",
   "scripts": {
@@ -11,10 +11,11 @@
   "author": "Tomáš Uhrík",
   "license": "ISC",
   "dependencies": {
-    "@trisbee/next-i18n-routes-middleware": "^0.1.3",
+    "@trisbee/next-i18n-routes-middleware": "^0.1.5",
     "express": "^4.17.1",
-    "next": "^9.3.5",
+    "next": "^9.4.4",
     "react": "^16.13.1",
-    "react-dom": "^16.13.1"
+    "react-dom": "^16.13.1",
+    "styled-components": "^5.1.1"
   }
 }
diff --git a/examples/simple/pages/[brand]/[model]/[year]/index.jsx b/examples/simple/pages/[brand]/[model]/[year]/index.jsx
@@ -0,0 +1,24 @@
+import Layout from "../../../src/components/Layout";
+
+const YearPage = (props) => {
+    return (
+        <Layout>
+            <h1>Selected year is: {props.year}</h1>
+            <ul>
+                <li>Selected model is: {props.model}</li>
+                <li>Selected brand is: {props.brand}</li>
+            </ul>
+        </Layout>
+    );
+};
+
+YearPage.getInitialProps = ({ query }) => {
+    const { year, model, brand } = query;
+    return {
+        year: year,
+        model: model,
+        brand: brand
+    }
+};
+
+export default YearPage;
diff --git a/examples/simple/pages/[brand]/[model]/index.jsx b/examples/simple/pages/[brand]/[model]/index.jsx
@@ -0,0 +1,22 @@
+import Layout from "../../src/components/Layout";
+
+const ModelPage = (props) => {
+    return (
+        <Layout>
+            <h1>Selected model is: {props.year}</h1>
+            <ul>
+                <li>Selected brand is: {props.brand}</li>
+            </ul>
+        </Layout>
+    );
+};
+
+ModelPage.getInitialProps = ({ query }) => {
+    const { year, model, brand } = query;
+    return {
+        model: model,
+        brand: brand
+    }
+};
+
+export default ModelPage;
diff --git a/examples/simple/pages/[brand]/index.jsx b/examples/simple/pages/[brand]/index.jsx
@@ -0,0 +1,18 @@
+import Layout from "../src/components/Layout";
+
+const BrandPage = (props) => {
+    return (
+        <Layout>
+            <h1>Selected brand is: {props.brand}</h1>
+        </Layout>
+    );
+};
+
+BrandPage.getInitialProps = ({ query }) => {
+    const { brand } = query;
+    return {
+        brand: brand
+    }
+};
+
+export default BrandPage;
diff --git a/examples/simple/pages/_document.jsx b/examples/simple/pages/_document.jsx
@@ -0,0 +1,36 @@
+import Document, { Head, Main, NextScript } from 'next/document';
+// Import styled components ServerStyleSheet
+import { ServerStyleSheet } from 'styled-components';
+
+export default class MyDocument extends Document {
+    static getInitialProps({ renderPage }) {
+        // Step 1: Create an instance of ServerStyleSheet
+        const sheet = new ServerStyleSheet();
+
+        // Step 2: Retrieve styles from components in the page
+        const page = renderPage((App) => (props) =>
+            sheet.collectStyles(<App {...props} />),
+        );
+
+        // Step 3: Extract the styles as <style> tags
+        const styleTags = sheet.getStyleElement();
+
+        // Step 4: Pass styleTags as a prop
+        return { ...page, styleTags };
+    }
+
+    render() {
+        return (
+            <html>
+            <Head>
+            {/* Step 5: Output the styles in the head  */}
+            {this.props.styleTags}
+            </Head>
+            <body>
+            <Main />
+            <NextScript />
+            </body>
+            </html>
+        );
+    }
+}
diff --git a/examples/simple/pages/dynamic.jsx b/examples/simple/pages/dynamic.jsx
@@ -1,5 +1,11 @@
+import Layout from "./src/components/Layout";
+
 const Dynamic = ({ query }) => {
-  return <h1>Hello world, I am a dynamic page and x is {query ? query.x : 'undefined'}</h1>
+  return (
+      <Layout>
+        <h1>Hello world, I am a dynamic page and x is {query ? query.x : 'undefined'}</h1>
+      </Layout>
+  );
 };
 
 Dynamic.getInitialProps = ({ query }) => {

diff --git a/examples/simple/pages/index.jsx b/examples/simple/pages/index.jsx
@@ -1,5 +1,11 @@
+import Layout from "./src/components/Layout";
+
 const Home = () => {
-  return <h1>Hello world, I am an index page</h1>
+  return (
+      <Layout>
+        <h1>Hello world, I am an index page</h1>
+      </Layout>
+  )
 };
 
 export default Home;
diff --git a/examples/simple/pages/nested/dynamicComplex.jsx b/examples/simple/pages/nested/dynamicComplex.jsx
@@ -1,9 +1,13 @@
+import Layout from "../src/components/Layout";
+
 const DynamicComplex = ({ query }) => {
-  return <div>
-    <h1>Hello world, I am a dynamicComplex page</h1>
-    <p>X is {query ? query.x : 'undefined'}</p>
-    <p>Y is {query ? query.y : 'undefined'}</p>
-  </div>
+  return (
+    <Layout>
+      <h1>Hello world, I am a dynamicComplex page</h1>
+      <p>X is {query ? query.x : 'undefined'}</p>
+      <p>Y is {query ? query.y : 'undefined'}</p>
+    </Layout>
+  )
 };
 
 DynamicComplex.getInitialProps = ({ query }) => {

diff --git a/examples/simple/pages/src/GlobalStyle.jsx b/examples/simple/pages/src/GlobalStyle.jsx
@@ -0,0 +1,51 @@
+import { createGlobalStyle } from 'styled-components';
+
+const GlobalStyle = createGlobalStyle`
+ :root {
+   --font-base: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+ }
+
+ * {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+
+  html, body {
+    width: 100%;
+    min-height: 100vh;
+    scroll-behavior: smooth;
+    overflow-y: ${props => (props.loading ? 'hidden' : 'auto')}
+  }
+
+  body {
+    line-height: 1.5;
+    font-size: 14px;
+    font-family: var(--font-base);
+    color: #666;
+  }
+
+  a {
+    color: #959595;
+    text-decoration: underline;
+
+    &:hover {
+    color: #000;
+    }
+  }
+
+  /* Disable arrows in number input type
+  Chrome, Safari, Edge, Opera */
+  input::-webkit-outer-spin-button,
+  input::-webkit-inner-spin-button {
+   -webkit-appearance: none;
+  margin: 0;
+}
+
+  /* Firefox */
+  input[type=number] {
+    -moz-appearance: textfield;
+}
+`;
+
+export default GlobalStyle;
diff --git a/examples/simple/pages/src/components/Layout.jsx b/examples/simple/pages/src/components/Layout.jsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import styled from 'styled-components';
+import GlobalStyle from "../GlobalStyle";
+
+function Layout(props) {
+    return (
+        <Wrapper>
+            <GlobalStyle />
+            {props.children}
+        </Wrapper>
+    );
+}
+
+const Wrapper = styled.div`
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 20px 25px;
+  background: #F0F0F0;
+`;
+
+export default Layout;
diff --git a/examples/simple/pages/subpage.jsx b/examples/simple/pages/subpage.jsx
@@ -1,5 +1,11 @@
+import Layout from "./src/components/Layout";
+
 const Subpage = () => {
-  return <h1>I am a subpage</h1>
+  return (
+      <Layout>
+        <h1>I am a subpage</h1>
+      </Layout>
+  )
 };
 
 export default Subpage;
diff --git a/examples/simple/server/routes.js b/examples/simple/server/routes.js
@@ -7,7 +7,10 @@ const paths = {
   homepage: "/route:homepage",
   subpage: '/route:subpage',
   dynamic: "/route:dynamic",
-  dynamicComplex: '/route:dynamicComplex'
+  dynamicComplex: '/route:dynamicComplex',
+  brand: "/route:brand",
+  model: "/route:model",
+  year: "/route:year"
 };
 
 const routes = [
@@ -21,10 +24,10 @@ const routes = [
   },
   {
     id: paths.subpage,
-    template: '/subpage',
+    template: "/subpage",
     aliases: {
-      cs: '/cs/podstranka',
-      en: '/en/subpage',
+      cs: "/cs/podstranka",
+      en: "/en/subpage",
     }
   },
   {
@@ -43,6 +46,30 @@ const routes = [
       en: "/en/dynamic/:x/complex/:y"
     }
   },
+  {
+    id: paths.brand,
+    template: "/[brand]",
+    aliases: {
+      cs: "/cs/:brand",
+      en: "/en/:brand"
+    }
+  },
+  {
+    id: paths.model,
+    template: "/[brand]/[model]",
+    aliases: {
+      cs: "/cs/:brand/:model",
+      en: "/en/:brand/:model"
+    }
+  },
+  {
+    id: paths.year,
+    template: "/[brand]/[model]/[year]",
+    aliases: {
+      cs: "/cs/:brand/:model/:year",
+      en: "/en/:brand/:model/:year"
+    }
+  },
 ];
 
 module.exports.supportedLangs = supportedLangs;

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@trisbee/next-i18n-routes-middleware",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "A middleware (+ utility tools) for having fully internationalized routes in your Next.js apps.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

diff --git a/src/middleware/index.ts b/src/middleware/index.ts
@@ -43,6 +43,16 @@ const getNextI18nRoutesMiddleware: GetNextI18nRoutesMiddleware = (
       );
     });
 
+    const handle = app.getRequestHandler();
+
+    server.get("*", (req, res) => {
+      handle(req, res);
+    });
+
+    server.post('*', (req, res) => {
+      return handle(req, res)
+    });
+
     next();
   };
 };