New content

.eleventy.js

@@ -1,13 +1,13 @@
 const { DateTime } = require("luxon");
-const fs = require("fs");
+const { promises: fs, readFileSync } = require("fs");
 const pluginRss = require("@11ty/eleventy-plugin-rss");
 const pluginSyntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
 const pluginNavigation = require("@11ty/eleventy-navigation");
 const markdownIt = require("markdown-it");
 const markdownItAnchor = require("markdown-it-anchor");
 const pluginSass = require("eleventy-plugin-sass");
 const htmlmin = require("html-minifier");
-
+const { exec } = require("child_process");
 
 module.exports = function(eleventyConfig) {
 
@@ -49,18 +49,8 @@ module.exports = function(eleventyConfig) {
     return array.slice(0, n);
   });
 
-  // compress and combine js files
-  eleventyConfig.addFilter("jsmin", function(code) {
-    const UglifyJS = require("uglify-js");
-    let minified = UglifyJS.minify(code);
-    if( minified.error ) {
-      console.log("UglifyJS error: ", minified.error);
-      return code;
-    }
-    return minified.code;
-  });
-
   eleventyConfig.addPassthroughCopy("src/**/*.jpg");
+  eleventyConfig.addPassthroughCopy("src/**/*.jpeg");
   eleventyConfig.addPassthroughCopy("src/**/*.ico");
   eleventyConfig.addPassthroughCopy("src/**/*.png");
   eleventyConfig.addPassthroughCopy("src/**/*.svg");
@@ -80,12 +70,11 @@ module.exports = function(eleventyConfig) {
   // minify html
   eleventyConfig.addTransform("htmlmin", function(content, outputPath) {
     if( outputPath.endsWith(".html") ) {
-      let minified = htmlmin.minify(content, {
+      return htmlmin.minify(content, {
         useShortDoctype: true,
         removeComments: true,
         collapseWhitespace: true
       });
-      return minified;
     }
     return content;
   });
@@ -96,13 +85,14 @@ module.exports = function(eleventyConfig) {
     port: 5555,
     callbacks: {
       ready: function(err, browserSync) {
-        const content_404 = fs.readFileSync('_site/404/index.html');
+        const content_404 = readFileSync('_site/404/index.html');
 
         browserSync.addMiddleware("*", (req, res) => {
           // Provides the 404 content without redirect.
           res.write(content_404);
           res.end();
         });
+        exec("npm run build:js");
       }
     }
   });

.eleventyignore

@@ -1,2 +1,3 @@
 README.md
 _11ty/
+tmp/

netlify.toml

@@ -1,6 +1,6 @@
 [build]
   publish = "_site"
-  command = "DEBUG=* eleventy"
+  command = "npm run debug"
 [[redirects]]
   from = "/*"
   to = "/404/"

package.json

@@ -3,10 +3,11 @@
   "version": "2.0.0",
   "description": "Static generator for company website",
   "scripts": {
-    "build": "npx eleventy",
+    "build": "npx eleventy && npm run build:js",
     "watch": "npx eleventy --watch",
     "serve": "npx eleventy --serve",
-    "debug": "DEBUG=* npx eleventy"
+    "debug": "DEBUG=* eleventy && npm run build:js",
+    "build:js": "rollup -c"
   },
   "repository": {
     "type": "git",
@@ -28,6 +29,16 @@
     "luxon": "^1.25.0",
     "markdown-it": "^8.4.2",
     "markdown-it-anchor": "^5.3.0",
+    "rollup-plugin-terser": "^7.0.2",
     "uglify-js": "^3.11.1"
+  },
+  "dependencies": {
+    "@babel/core": "^7.12.8",
+    "@babel/preset-env": "^7.12.7",
+    "@rollup/plugin-commonjs": "^16.0.0",
+    "@rollup/plugin-node-resolve": "^10.0.0",
+    "aos": "^2.3.4",
+    "rollup": "^2.33.3",
+    "swiper": "^6.3.5"
   }
 }

rollup.config.js

@@ -0,0 +1,18 @@
+import nodeResolve from "@rollup/plugin-node-resolve";
+import commonjs from "@rollup/plugin-commonjs";
+import { terser } from "rollup-plugin-terser";
+
+module.exports = {
+  input: "src/_js/main.js",
+  sourceMap: true,
+  plugins: [
+    nodeResolve(),
+    commonjs()
+  ],
+  output: {
+    file: "_site/main.js",
+    format: "iife",
+    sourceMap: true,
+    plugins: [terser()]
+  }
+};

src/_includes/footer.njk

@@ -36,8 +36,8 @@
 
 <footer class="footer">
   <div class="container">
-    <div class="columns is-vcentered">
-      <div class="column is-6">
+    <div class="columns">
+      <div class="column is-vcentered is-6">
         <img class="small-footer-logo" src="/img/logo-light.png" alt="">
         <p class="moto">made with ♥ in Hamburg &copy; 2020</p>
       </div>
@@ -54,6 +54,19 @@
           showExcerpt: false
         }) | safe }}
       </div>
+      <div class="column">
+        <h2>Unternehmen</h2>
+        {{ collections["footer_company"] | eleventyNavigation | eleventyNavigationToHtml({
+          listElement: "ul",
+          listItemElement: "li",
+
+          listClass: "footer-nav",
+          listItemClass: "footer-nav-link",
+          activeListItemClass: "active",
+          activeKey: eleventyNavigation.key,
+          showExcerpt: false
+        }) | safe }}
+      </div>
       <div class="column">
         <h2>Profile</h2>
         <ul>

src/_includes/layouts/base-fixed-hero.njk

@@ -0,0 +1,33 @@
+<!doctype html>
+<html lang="de">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>{{ renderData.title or title or metadata.title }}</title>
+  <meta name="robots" content="index,follow">
+  <meta name="generator" content="Eleventy">
+  <meta name="Description" content="{{ renderData.description or description or metadata.description }}">
+  <meta property="og:type" content="website">
+  <meta property="og:title" content="{{ renderData.title or title or metadata.title }}">
+  <meta property="og:description" content="{{ renderData.description or description or metadata.description }}">
+  <meta property="og:image" content="{{ metadata.url }}/img/og-previews/{{ renderData.ogImage or ogImage or metadata.ogImage }}">
+  <link rel="shortcut icon" type="image/x-icon" href="/img/favicon.ico">
+  <link rel="stylesheet" href="{{ '/css/style.css' | url }}">
+  {% if embed %}{{ embed | safe }}{% endif %}
+</head>
+<body{% if templateClass %} class="{{ templateClass }}"{% endif %}>
+
+{% include "navbar.njk" %}
+
+{{ content | safe }}
+
+
+<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
+<script src="/main.js"></script>
+
+<script>
+  AOS.init();
+</script>
+
+</body>
+</html>

src/_includes/layouts/base.njk

@@ -23,13 +23,12 @@
 
 {% include "footer.njk" %}
 
+<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
+<script src="/main.js"></script>
 
-{% set js %}
-  {% include "js/cookieconsent.js" %}
-  {% include "js/tracking.js" %}
-  {% include "js/main.js" %}
-{% endset %}
+<script>
+  AOS.init();
+</script>
 
-<script>{{ js | jsmin | safe }}</script>
 </body>
 </html>

src/_includes/navbar.njk

@@ -14,7 +14,6 @@
 
     <div id="navbar-menu" class="navbar-menu">
 
-
       {{ collections.main | eleventyNavigation | eleventyNavigationToHtml({
         listElement: "div",
         listItemElement: "div",
@@ -25,6 +24,27 @@
         activeKey: eleventyNavigation.key,
         showExcerpt: false
       }) | safe }}
-    </div>
+
+
+      <div class="navbar-item has-dropdown is-hoverable is-mega">
+        <div class="navbar-link">
+          <p class="navbar-title">Unternehmen</p>
+        </div>
+        <div class="navbar-dropdown">
+          <div class="navbar-dropdown-content">
+            {{ collections.company | eleventyNavigation | eleventyNavigationToHtml({
+              listElement: "div",
+              listItemElement: "div",
+              listClass: "nav-block",
+              listItemClass: "navbar-item",
+              activeListItemClass: "active",
+              activeKey: eleventyNavigation.key,
+              showExcerpt: false
+            }) | safe }}
+          </div>
+        </div>
+      </div>
+
+      </div>
   </div>
 </nav>

src/_includes/js/main.js → src/_js/main.js

@@ -1,4 +1,7 @@
-// {% raw %}
+import "./cookieconsent";
+import "./swiper";
+import "./tracking";
+
 // Event DOM ready
 var callback = function(){
   // trigger events on Dom ready.

src/_js/swiper.js

@@ -0,0 +1,27 @@
+import Swiper, { Pagination, Autoplay} from 'swiper';
+
+// configure Swiper to use modules
+Swiper.use([Pagination, Autoplay]);
+
+var swiperAuto = new Swiper('.swiper-autoplay', {
+  spaceBetween: 30,
+  centeredSlides: true,
+  autoplay: {
+    delay: 2500,
+    disableOnInteraction: false,
+  },
+  pagination: {
+    el: '.swiper-pagination',
+    clickable: true,
+  }
+});
+
+var swiper = new Swiper('.swiper-default', {
+  slidesPerView: 1,
+  spaceBetween: 30,
+  loop: true,
+  pagination: {
+    el: '.swiper-pagination',
+    clickable: true,
+  }
+});

src/about/index.njk

@@ -2,13 +2,13 @@
 layout: layouts/home.njk
 eleventyNavigation:
   key: about
-  order: 50
   title: Über uns
+  order: 50
 
 date: Last Modified
 tags:
-  - main
-  - footer
+  - company
+  - footer_company
 
 
 title: rocketbase.io - Über uns

src/css/_custom/_background.scss

@@ -12,6 +12,20 @@
   text-shadow: 2px 2px 4px #fff, -2px -2px 4px #fff;
 }
 
+.collaborative-background-image {
+  @media all and (max-width: 800px) {
+    background-image: url("/open-source/opensource-collaboration.jpeg");
+  }
+  @media all and (min-width: 801px) {
+    background-image: url("/open-source/opensource-collaboration.jpeg");
+  }
+  @media all and (min-width: 1201px) {
+    background-image: url("/open-source/opensource-collaboration.jpeg");
+  }
+  background-size: cover;
+  text-shadow: 2px 2px 4px #fff, -2px -2px 4px #fff;
+}
+
 .team-background-image {
   @media all and (max-width: 800px) {
     background-image: url("../img/background/team-800.jpg");
@@ -48,6 +62,10 @@
   margin: 80px 1.8vw 1.8vw 1.8vw;
 }
 
+.framed-margin-top {
+  margin: 53px 0;
+}
+
 .frame-1 {
   background-image: url("../img/background/frame-1.svg");
   background-size: 100% 100%;
@@ -63,10 +81,16 @@
 }
 
 .main-frame-wrapper {
+  height: 100%;
   position: relative;
   margin: -2px -2px -2px -2px;
 }
 
 .light-gray-bg {
   background-color: $light-grey;
 }
+
+.overflow-section {
+  background-color: white;
+  position: relative;
+}