Restructure page components, add canonical links

2018-06-22 12:18:54 +03:00
parent c34664f556
commit e22335dbfc
15 changed files with 122 additions and 16 deletions
@@ -3993,8 +3993,7 @@
    "deep-equal": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.0.1.tgz",
-      "integrity": "sha1-9dJgKStmDghO/0zbyfCK0yR0SLU=",
-      "dev": true
+      "integrity": "sha1-9dJgKStmDghO/0zbyfCK0yR0SLU="
    },
    "deep-extend": {
      "version": "0.6.0",
@@ -4774,6 +4773,11 @@
        "meow": "^3.1.0"
      }
    },
+    "exenv": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz",
+      "integrity": "sha1-KueOhdmJQVhnCwPUe+wfA72Ru50="
+    },
    "exif-parser": {
      "version": "0.1.12",
      "resolved": "https://registry.npmjs.org/exif-parser/-/exif-parser-0.1.12.tgz",
@@ -13166,6 +13170,17 @@
        "prop-types": "^15.6.0"
      }
    },
+    "react-helmet": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-5.2.0.tgz",
+      "integrity": "sha1-qBgR3yExOm1VxfBYxK66XW89l6c=",
+      "requires": {
+        "deep-equal": "^1.0.1",
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.5.4",
+        "react-side-effect": "^1.1.0"
+      }
+    },
    "react-hot-loader": {
      "version": "4.3.3",
      "resolved": "https://registry.npmjs.org/react-hot-loader/-/react-hot-loader-4.3.3.tgz",
@@ -13227,6 +13242,15 @@
        "warning": "^4.0.1"
      }
    },
+    "react-side-effect": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-1.1.5.tgz",
+      "integrity": "sha512-Z2ZJE4p/jIfvUpiUMRydEVpQRf2f8GMHczT6qLcARmX7QRb28JDBTpnM2g/i5y/p7ZDEXYGHWg0RbhikE+hJRw==",
+      "requires": {
+        "exenv": "^1.2.1",
+        "shallowequal": "^1.0.1"
+      }
+    },
    "read-all-stream": {
      "version": "3.1.0",
      "resolved": "https://registry.npmjs.org/read-all-stream/-/read-all-stream-3.1.0.tgz",
@@ -14385,8 +14409,7 @@
    "shallowequal": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.0.2.tgz",
-      "integrity": "sha512-zlVXeVUKvo+HEv1e2KQF/csyeMKx2oHvatQ9l6XjCUj3agvC8XGf6R9HvIPDSmp8FNPvx7b5kaEJTRi7CqxtEw==",
-      "dev": true
+      "integrity": "sha512-zlVXeVUKvo+HEv1e2KQF/csyeMKx2oHvatQ9l6XjCUj3agvC8XGf6R9HvIPDSmp8FNPvx7b5kaEJTRi7CqxtEw=="
    },
    "shebang-command": {
      "version": "1.2.0",
@@ -89,6 +89,7 @@
    "mobx": "^5.0.3",
    "mobx-react": "^5.2.3",
    "normalize.css": "^8.0.0",
+    "react-helmet": "^5.2.0",
    "react-router": "^4.3.1",
    "react-router-dom": "^4.3.1"
  },
@@ -6,8 +6,9 @@ import {{ camelCase store_name }} from "../../stores/{{ properCase store_name }}
 import "./{{ properCase name}}.scss";

 export interface {{ properCase name }}Props {}
+export interface {{ properCase name }}State {}

-{{#if observer}}@observer{{/if}} class {{ properCase name }} extends React.Component<{{ properCase name }}Props, undefined> {
+{{#if observer}}@observer{{/if}} class {{ properCase name }} extends React.Component<{{ properCase name }}Props, {{ properCase name }}State> {
  render() {
    return (
      <div className="{{ dashCase name }}">
@@ -0,0 +1,3 @@
+.{{ dashCase name }} {
+
+}
@@ -0,0 +1,21 @@
+import * as React from "react";
+import Helmet from "react-helmet";
+import "./{{ properCase name}}.scss";
+
+export interface {{ properCase name }}Props {}
+export interface {{ properCase name }}State {}
+
+class {{ properCase name }} extends React.Component<{{ properCase name }}Props, {{ properCase name }}State> {
+  render() {
+    return (
+      <div className="{{ dashCase name }}">
+        <Helmet>
+          <link rel="canonical" href="https://sik.ayy.fi/INSERT_PATH_HERE!" />
+        </Helmet>
+        {{ titleCase name }}
+      </div>
+    );
+  }
+}
+
+export default {{ properCase name }};
@@ -41,6 +41,36 @@ module.exports = function(plop) {
      }
    ]
  });
+  plop.setGenerator("New page", {
+    description: "Create a new TSX + SCSS page for React.",
+    prompts: [
+      {
+        type: "input",
+        name: "name",
+        message: "Page name (has to end in \"page\"):"
+      },
+    ],
+    actions: [
+      {
+        type: "add",
+        path: "src/pages/{{ properCase name }}/{{ properCase name }}.tsx",
+        templateFile: "plop-templates/page.tsx",
+        abortOnFail: true
+      },
+      {
+        type: "add",
+        path: "src/pages/{{ properCase name }}/{{ properCase name }}.scss",
+        templateFile: "plop-templates/page.scss",
+        abortOnFail: true
+      },
+      {
+        type: "add",
+        path: "src/pages/{{ properCase name }}/index.ts",
+        templateFile: "plop-templates/index.ts",
+        abortOnFail: true
+      }
+    ]
+  });
  plop.setGenerator("New MobX state store", {
    description: "Create a new store for MobX.",
    prompts: [
@@ -1,2 +0,0 @@
-import App from "./App";
-export default App;
@@ -1,11 +1,12 @@
 import * as React from "react";
 import { observer } from "mobx-react";
-import "./App.scss";
+import Helmet from "react-helmet";
+import "./FrontPage.scss";
 import appStore from "../../stores/AppStore";
-import Button from "../Button";
 import { getPosts, Post as PostInterface } from "../../models/Post";
-import Post from "../Post";
-import JsonLD from "../JsonLD";
+import Button from "../../components/Button";
+import Post from "../../components/Post";
+import JsonLD from "../../components/JsonLD";

 export interface AppProps {
  appStore: {
@@ -19,7 +20,7 @@ export interface AppState {
  error: string | Error;
 }

-@observer class App extends React.Component<AppProps, AppState> {
+@observer class FrontPage extends React.Component<AppProps, AppState> {
  constructor(props) {
    super(props);
    this.fetchPosts = this.fetchPosts.bind(this);
@@ -45,6 +46,9 @@ export interface AppState {

  render() {
      return <div className="app__landing">
+      <Helmet>
+        <link rel="canonical" href="https://sik.ayy.fi" />
+      </Helmet>
      <h1>Aalto-yliopiston sähköinsinöörikilta!</h1>
      <p>Sähköä, viinaa, naisia.</p>
      <div className="app__landing__container--button">
@@ -67,4 +71,4 @@ export interface AppState {
  }
 }

-export default props => <App appStore={appStore} {...props} />;
+export default props => <FrontPage appStore={appStore} {...props} />;
@@ -0,0 +1,2 @@
+import FrontPage from "./FrontPage";
+export default FrontPage;
@@ -1,4 +1,5 @@
 import * as React from "react";
+import Helmet from "react-helmet";
 import "./NotFoundPage.scss";

 export interface NotFoundPageProps {}
@@ -7,6 +8,11 @@ export interface NotFoundPageProps {}
  render() {
    return (
      <div className="not-found-page">
+        <Helmet>
+          <link rel="canonical" href="https://sik.ayy.fi/404" />
+          <title>404 | Ei vaan löydy</title>
+          <meta name="robots" content="noindex" />
+        </Helmet>
        <strong>404</strong> | Ei vaan löydy
      </div>
    );
@@ -1,11 +1,11 @@
 import * as React from "react";
 import { Switch, Route } from "react-router-dom";
-import App from "./components/App";
-import NotFoundPage from "./components/NotFoundPage";
+import FrontPage from "./pages/FrontPage";
+import NotFoundPage from "./pages/NotFoundPage";

 const Routes = () => (
  <Switch>
-    <Route exact path="/" component={App} />
+    <Route exact path="/" component={FrontPage} />
    <Route component={NotFoundPage} />
  </Switch>
 );
@@ -0,0 +1,17 @@
+/**
+ * TestCafé test fixtures.
+ * This file is used by TestCafé to run end-to-end tests with chrome against the site.
+ * Tests are grouped into fixtures and fixtures into files.
+ */
+import { Selector } from "testcafe";
+
+fixture`404 page renders and functions correctly`.page("http://localhost:3000/404");
+
+test("Page contains the text 404", async t => {
+  /**
+   * Test if there is a favicon element on the page
+   */
+  const elem = Selector(".not-found-page");
+  await t.expect(elem.textContent).contains("404");
+});
+