Add all kinds of placeholder content

db.json

@@ -1,19 +1,3 @@
 {
-  "posts": [
-    {
-      "id": 1,
-      "title": "json-server",
-      "author": "typicode"
-    }
-  ],
-  "comments": [
-    {
-      "id": 1,
-      "body": "some comment",
-      "postId": 1
-    }
-  ],
-  "profile": {
-    "name": "typicode"
-  }
+
 }

plop-templates/component.scss

@@ -1,3 +1,5 @@
+@import "../../index.scss";
+
 .{{ dashCase name }} {
 
 }

src/assets/scss/normalize.css

@@ -0,0 +1,341 @@
+/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+html {
+  line-height: 1.15; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+   ========================================================================== */
+
+/**
+ * Remove the margin in all browsers.
+ */
+
+body {
+  margin: 0;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a {
+  background-color: transparent;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+
+img {
+  border-style: none;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input { /* 1 */
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select { /* 1 */
+  text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+  display: list-item;
+}
+
+/* Misc
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10+.
+ */
+
+template {
+  display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+
+[hidden] {
+  display: none;
+}

src/components/Card/Card.scss

@@ -0,0 +1,27 @@
+@import "../../index.scss";
+
+.card {
+  background-color: $white;
+  width: 20rem;
+  white-space: wrap;
+  text-align: left;
+  margin: 1rem 1rem;
+
+  &__title {
+    font-weight: bold;
+    font-size: 1.4rem;
+    padding: 1rem;
+    display: flex;
+  }
+
+  &__image {
+    width: 100%;
+    margin-bottom: 1rem;
+  }
+
+  &__text {
+    font-size: 0.8rem;
+    font-weight: lighter;
+    padding: 1rem;
+  }
+}

src/components/Card/Card.tsx

@@ -0,0 +1,25 @@
+import * as React from "react";
+import { Link } from "react-router-dom";
+import "./Card.scss";
+
+export interface CardProps {
+  title: string;
+  text: string;
+  image: string;
+}
+export interface CardState {}
+
+class Card extends React.Component<CardProps, CardState> {
+  render() {
+    const { title, text, image } = this.props;
+    return (
+      <Link to="/events/1" className="card">
+        <div className="card__title">{title}</div>
+        <img src={image} className="card__image" />
+        <div className="card__text">{text}</div>
+      </Link>
+    );
+  }
+}
+
+export default Card;

src/components/Card/index.ts

@@ -0,0 +1,2 @@
+import Card from "./Card";
+export default Card;

src/components/Footer/Footer.scss

@@ -0,0 +1,15 @@
+@import "../../index.scss";
+
+.footer {
+  width: 100%;
+  padding: 0.5rem;
+  margin-top: 10rem;
+
+  &__content {
+    position: absolute;
+    bottom: 0;
+    padding: 1rem;
+    width: 100%;
+    text-align: center;
+  }
+}

src/components/Footer/Footer.tsx

@@ -0,0 +1,19 @@
+import * as React from "react";
+import "./Footer.scss";
+
+export interface FooterProps {}
+export interface FooterState {}
+
+class Footer extends React.Component<FooterProps, FooterState> {
+  render() {
+    return <React.Fragment>
+      <div className="footer">
+      </div>
+      <div className="footer__content">
+        Aalto-yliopiston Sähköinsinöörikilta &copy; 2018
+      </div>
+    </React.Fragment>;
+  }
+}
+
+export default Footer;

src/components/Footer/index.ts

@@ -0,0 +1,2 @@
+import Footer from "./Footer";
+export default Footer;

src/components/Header/Header.scss

@@ -0,0 +1,5 @@
+.header {
+  display: flex;
+  flex-flow: column nowrap;
+  align-items: center;
+}

src/components/Header/Header.tsx

@@ -0,0 +1,19 @@
+import * as React from "react";
+import "./Header.scss";
+import Navigation from "../Navigation";
+
+export interface HeaderProps {}
+export interface HeaderState {}
+
+class Header extends React.Component<HeaderProps, HeaderState> {
+  render() {
+    return (
+      <div className="header">
+        <h1>Aalto-yliopiston Sähköinsinöörikilta</h1>
+        <Navigation />
+      </div>
+    );
+  }
+}
+
+export default Header;

src/components/Header/index.ts

@@ -0,0 +1,2 @@
+import Header from "./Header";
+export default Header;

src/components/Navigation/Navigation.scss

@@ -0,0 +1,22 @@
+@import "../../index.scss";
+$border-width: 4px;
+
+.navigation {
+  width: 100%;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+  margin-bottom: 3rem;
+
+  &__item {
+    background-color: $off-white;
+    padding: 0.8rem 2rem;
+    transition: background-color 0.2s;
+    border-bottom: $border-width solid $blue;
+    cursor: pointer;
+
+    &:hover {
+      background-color: $light-blue;
+    }
+  }
+}

src/components/Navigation/Navigation.tsx

@@ -0,0 +1,22 @@
+import * as React from "react";
+import "./Navigation.scss";
+import { Link } from "react-router-dom";
+
+export interface NavigationProps {}
+export interface NavigationState {}
+
+class Navigation extends React.Component<NavigationProps, NavigationState> {
+  render() {
+    return (
+      <div className="navigation">
+        <Link className="navigation__item" to="/">Etusivu</Link>
+        <Link className="navigation__item" to="/kilta">Kilta</Link>
+        <Link className="navigation__item" to="/international">International</Link>
+        <Link className="navigation__item" to="/opinnot">Opinnot</Link>
+        <Link className="navigation__item" to="/yrityksille">Yrityksille</Link>
+      </div>
+    );
+  }
+}
+
+export default Navigation;

src/components/Navigation/index.ts

@@ -0,0 +1,2 @@
+import Navigation from "./Navigation";
+export default Navigation;

src/index.d.ts

@@ -0,0 +1,3 @@
+declare module "*.jpeg" { export default '' as string; };
+declare module '*.css' { export default '' as string; };
+declare module '*.png' { export default '' as string; };

src/index.scss

@@ -1,4 +1,8 @@
-$white: #f4f7fc;
+@import "{}/src/assets/scss/normalize.css";
+
+$white: #fff;
+$off-white: #f4f7fc;
+$light-blue: #e4ecfa;
 $blue: #2f6c76;
 $dark-blue: #193b41;
 
@@ -7,11 +11,17 @@ $font-helvetica: helvetica, arial, sans-serif;
 html,
 body {
   font-size: 16px;
-  margin-top: 2rem;
-  background-color: $white;
+  background-color: $off-white;
   height: 100%;
   font-family: $font-helvetica;
   color: $blue;
+  text-align: center;
+  overflow: auto;
+}
+
+#root {
+  position: relative;
+  min-height: 100vh;
 }
 
 body {
@@ -28,3 +38,9 @@ p {
   color: $dark-blue;
   font-size: 1.5rem;
 }
+
+a,
+a:hover {
+  text-decoration: none;
+  color: $blue;
+}

src/index.tsx

@@ -5,6 +5,7 @@ import {AppContainer} from "react-hot-loader";
 import Routes from "./routes";
 import "normalize.css";
 import "./index.scss";
+import "./index.d.ts";
 
 const rootEl = document.getElementById("root");
 

src/pages/CommonPage/CommonPage.tsx

@@ -0,0 +1,23 @@
+import * as React from "react";
+import Header from "../../components/Header";
+import Footer from "../../components/Footer";
+
+export interface CommonPageProps {
+  page: any;
+}
+export interface CommonPageState {}
+
+class CommonPage extends React.Component<CommonPageProps, CommonPageState> {
+  render() {
+    const Page = this.props.page;
+    return (
+      <React.Fragment>
+        <Header />
+        <Page />
+        <Footer />
+      </React.Fragment>
+    );
+  }
+}
+
+export default CommonPage;

src/pages/CommonPage/index.ts

@@ -0,0 +1,2 @@
+import CommonPage from "./CommonPage";
+export default CommonPage;

src/pages/FrontPage/FrontPage.scss

@@ -1,5 +1,5 @@
-.app {
-  &__landing {
-    text-align: center;
-  }
+.front-page {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: center;
 }

src/pages/FrontPage/FrontPage.tsx

@@ -1,5 +1,4 @@
 import * as React from "react";
-import { observer } from "mobx-react";
 import Helmet from "react-helmet";
 import "./FrontPage.scss";
 import appStore from "../../stores/AppStore";
@@ -7,66 +6,33 @@ import { getPosts, Post as PostInterface } from "../../models/Post";
 import Button from "../../components/Button";
 import Post from "../../components/Post";
 import JsonLD from "../../components/JsonLD";
+import Card from "../../components/Card";
+// @ts-ignore
+import * as BeerImage from "../../assets/img/beer.jpeg";
 
-export interface AppProps {
-  appStore: {
-    increment: () => string,
-    counter: number
-  };
-}
-
-export interface AppState {
-  posts: PostInterface[];
-  error: string | Error;
-}
-
-@observer class FrontPage extends React.Component<AppProps, AppState> {
-  constructor(props) {
-    super(props);
-    this.fetchPosts = this.fetchPosts.bind(this);
-    this.state = {
-      error: "",
-      posts: [],
-    };
-    this.fetchPosts();
-  }
-
-  async fetchPosts() {
-    try {
-      const posts = await getPosts();
-      this.setState({
-        posts,
-      });
-    } catch (err) {
-      this.setState({
-        error: "Failed to get posts! Is the mock backend on?",
-      });
-    }
-  }
-
+class FrontPage extends React.Component<undefined, undefined> {
   render() {
-      return <div className="app__landing">
+      return <div className="front-page">
       <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">
-        <h2>Increment button (MobX)</h2>
-        <Button onClick={this.props.appStore.increment}>{this.props.appStore.counter}</Button>
-      </div>
-      <div className="app__landing__container--posts">
-        <h2>Posts from mock server</h2>
-        { this.state.posts.map((post, index) => <Post key={index} post={post} />)}
-      </div>
-      <div className="app__landing__container--error">
-        { this.state.error }
-      </div>
       <JsonLD data={{
         "@context": "http://schema.org",
         "@type": "WebSite",
         "url": "https://sik.ayy.fi",
       }} />
+      <Card
+        title="Øhlhäfv 15.2.2019"
+        text="Selittelyjen aika on ohi, nyt heevataan!"
+        image={BeerImage} />
+      <Card
+        title="Øhlhäfv 15.2.2019"
+        text="Selittelyjen aika on ohi, nyt heevataan! Selittelyjen aika on ohi, nyt heevataan! Selittelyjen aika on ohi, nyt heevataan!"
+        image={BeerImage} />
+      <Card
+        title="Øhlhäfv 15.2.2019"
+        text="Selittelyjen aika on ohi, nyt heevataan!"
+        image={BeerImage} />
     </div>;
   }
 }

src/pages/NotFoundPage/NotFoundPage.scss

@@ -1,6 +1,9 @@
 .not-found-page {
   text-align: center;
-  margin-top: 30vh;
   font-size: 4rem;
   font-weight: 200;
+  position: absolute;
+  height: 10rem;
+  top: calc(50vh - 5rem);
+  width: 100%;
 }

src/routes.tsx

@@ -2,10 +2,11 @@ import * as React from "react";
 import { Switch, Route } from "react-router-dom";
 import FrontPage from "./pages/FrontPage";
 import NotFoundPage from "./pages/NotFoundPage";
+import CommonPage from "./pages/CommonPage";
 
 const Routes = () => (
   <Switch>
-    <Route exact path="/" component={FrontPage} />
+    <Route exact path="/" render={() => <CommonPage page={FrontPage} />} />
     <Route component={NotFoundPage} />
   </Switch>
 );

tests/testcafe/index.test.ts

@@ -15,37 +15,11 @@ test("Favicon exists", async t => {
   await t.expect(elem.exists).ok();
 });
 
-test("Paragraph exists and is visible", async t => {
-  /**
-   * Test if there is a paragraph on the page.
-   */
-  const p = Selector("p");
-  await t.expect(p.exists).ok();
-});
-
-test("Header contains text \"Aalto-yliopiston sähköinsinöörikilta!\"", async t => {
+test("Header contains text \"Aalto-yliopiston Sähköinsinöörikilta\"", async t => {
   /**
    * Test if the header contains the text.
    */
   const header = Selector("h1");
   await t.expect(header.textContent)
-         .contains("Aalto-yliopiston sähköinsinöörikilta!");
-});
-
-test("Increment button functions correctly", async t => {
-  /**
-   * Test if the increment button works and increments the number inside the button
-   */
-  const button = Selector("button");
-  await t.expect(button.textContent).contains("0");
-  await t.click(button);
-  await t.expect(button.textContent).contains("1");
-});
-
-test("At least one post exists", async t => {
-  /**
-   * Test if the API responds with at least one post and it is rendered to the page
-   */
-  const post = Selector(".post");
-  await t.expect(post.count).gte(1);
+         .contains("Aalto-yliopiston Sähköinsinöörikilta");
 });