Add Projects-Module

src/templates/project.js

@@ -0,0 +1,75 @@
+import React from "react"
+import {graphql} from "gatsby"
+import {Link, Trans, useTranslation} from 'gatsby-plugin-react-i18next';
+import Layout from "../layouts/default";
+
+import styles from "./project.module.scss";
+
+export const query = graphql`
+query GetProject($urlname: String!, $lang: String!) {
+  allProjectsJson(filter: {urlname: {eq: $urlname}, lang: {eq: $lang}}) {
+    nodes {
+      lang
+      urlname
+      name
+      links {
+        github
+        website
+      }
+      image {
+        publicURL
+      }
+      longDescription
+      shortDescription
+    }
+  }
+}
+`
+
+export default function ProjectTemplate({data}) {
+  let project = data.allProjectsJson.nodes[0];
+  let projectName = project.name;
+
+    return (
+        <Layout>
+          <section className={styles.projectHeader}>
+            <div>
+              <div className={styles.headerBackground} style={{backgroundImage: "url("+project.image.publicURL+")"}}></div> 
+              <header>
+                <div className={styles.headerInner}>
+                  <h1><Trans>project</Trans>: {projectName}</h1>
+                  <span className={styles.postMeta}>{project.shortDescription}</span>
+                </div>
+              </header>
+              <div className={styles.headerPlaceholder}></div>
+            </div>
+          </section>
+          {project.longDescription != null ? 
+            <section className={styles.projectAbout}>
+              <article>
+                <h1><Trans projectName={projectName} i18nKey="projectAboutHeader">projectAboutHeader{{projectName}}</Trans></h1>
+                <p>{project.longDescription}</p>
+              </article>
+            </section>
+          : null}
+          {project.links.github !== null || project.links.website !== null  ? 
+            <section className={styles.projectLinks}>
+              <div>
+                <h1>Links</h1>
+                <div className={styles.linkList}>
+                  {project.links.github !== null ? <a href={project.links.github} target="_blank"><i className="fab fa-github" aria-hidden="true"></i> <Trans>projectViewGitHub</Trans></a> : null}
+                  {project.links.website !== null ? <a href={project.links.website} target="_blank"><i className="fas fa-external-link-alt" aria-hidden="true"></i> <Trans>projectViewWebsite</Trans></a> : null}
+
+                </div>
+              </div>
+            </section>
+          : null}
+          {/*<section>
+            <div>
+
+              <pre>{JSON.stringify(data, null, 2)}</pre>
+            </div>
+          </section>*/}
+        </Layout>
+    );
+}

src/templates/project.module.scss

@@ -0,0 +1,74 @@
+@import "../variables";
+
+.projectHeader .headerBackground {
+    position: absolute;
+    left: 0;
+    width: 100%;
+    height: 200px;
+    background-position: center;
+    background-size: cover;
+}
+
+.projectHeader header {
+    position: absolute;
+    left: 0;
+    width: 100%;
+    height: 200px;
+    background: rgba(0, 0, 0, .5);
+}
+
+.projectHeader .headerInner {
+    max-width: $layoutWidth;
+    width: 100%;
+    margin: 0 auto;
+    padding: 65px 20px 0;
+}
+
+.projectHeader .headerInner * {
+    margin: 0;
+    color: white;
+}
+
+.headerPlaceholder {
+    width: 100%;
+    height: 225px;
+}
+
+.projectHeader .headerPlaceholder {
+    width: 100%;
+    height: 200px;
+}
+
+.projectHeader h1 {
+    font-size: 2em;
+}
+
+.projectHeader > div {
+    padding-bottom: 0 !important;
+}
+
+.projectAbout {
+    background: #060606;
+    color: white;
+}
+
+.projectLinks .linkList {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+}
+
+.projectLinks a {
+    display: inline-block;
+    border: thin solid rgb(200, 200, 200);
+    border-radius: 5px;
+    padding: 10px 15px;
+    margin: 5px;
+    color: $textColor;
+    text-decoration-skip: none;
+    text-decoration: underline dotted currentColor;
+}
+
+.projectLinks a i.fab, .projectLinks a i.fas, .projectLinks a i.fa, .projectLinks a i.far, .projectLinks a i.fal {
+    display: inline;
+}