CONTENT add service-worker and berlinstudios

metalsmith.js

@@ -126,7 +126,8 @@ Metalsmith(__dirname)
   )
   .use(collections({
     works: {
-      refer: false // if true, an error occurs
+      refer: false, // if true, an error occurs
+      reverse: true // newest date first
     }
   }))
   .use(layouts(templateConfig))

src/content/web/berlinstudios-org.md

@@ -0,0 +1,30 @@
+---
+layout: project-page.njk
+collection: 
+  - works
+  - web
+date: 2020-02-14 14:12:39
+createdAt: 2010-11-30 04:11:36
+
+project:
+  summary: Static website
+  previewImage: "previews/berlinstudios.jpg"
+  usedTechnic: Metalsmith, nodeJS, vanilla JS
+  format: <a target="_blank" href="https://berlinstudios.org" title="berlinstudios.org">berlinstudios.org</a>
+  year: since 2012
+  slides:
+    - { image: "content/berlinstudios_org-home", ext: "png", title: "Homepage" }
+    - { image: "content/berlinstudios_org-dvlpmt", ext: "png", title: "Development" }
+    - { image: "content/berlinstudios_org-map", ext: "png", title: "OpenStreetMap" }
+    - { image: "content/berlinstudios_org-studios", ext: "png", title: "Studios and subsections" }
+    - { image: "content/berlinstudios_org-ateliers-mobile", ext: "png", title: "Mobile view" }
+
+seo:
+  title: berlinStudios
+  description: Project Website "berlinStudios" - Coworking spaces and ateliers
+---
+Relaunched the website as a simple static page. Easy as that. <strong>High running performance of course.</strong> Used a nice <strong>page transition technique</strong> like on this website too. The Fetch API is just fine for that.
+
+From first plans until the first buildings of Vera C. Ritters <strong>co-working spaces and atelier studios</strong> I provided her my support and took care for the right web-presentation.
+
+Content fulfillment and Consulting about <em>internet and web topics </em>are part of this work.

src/content/works/invoicelly.md

@@ -1,6 +1,8 @@
 ---
 layout: project-page.njk
 collection: works
+date: 2018-10-25 12:52:19
+createdAt: 2018-10-25 12:25:09
 
 project:
   summary: Billing Tool

src/content/works/jspdf-template.md

@@ -1,6 +1,8 @@
 ---
 layout: project-page.njk
 collection: works
+date: 2018-06-22 13:35:12
+createdAt: 2018-06-22 13:27:23
 
 project:
   summary: PDF with JavaScript

src/content/works/mapple.md

@@ -1,6 +1,8 @@
 ---
 layout: project-page.njk
 collection: works
+date: 2018-06-22 13:26:30
+createdAt: 2018-04-18 12:01:15
 
 project:
   summary: Wordpress plugin

src/content/works/service-worker.md

@@ -0,0 +1,22 @@
+---
+layout: project-page.njk
+collection: works
+date: 2018-05-15 09:49:30
+createdAt: 2018-03-28 08:35:38
+
+project:
+  summary: Slide presentation
+  previewImage: "previews/service-worker.jpg"
+  usedTechnic: 
+  format: slides.com
+  year: 2018
+  beforeSlider: <iframe src="//slides.com/andrekelling/service-worker/embed" width="576" height="420" scrolling="no" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
+
+seo:
+  title: service worker
+  description: A presentation about that web technology
+---
+During my employeetime at <a href="https://inviqa.de/" rel="nofollow noreferrer noopener" target="_blank" title="my former employer">inviqa</a> i had good chances to do researches on a recent web technology. I started to prepare a presentation as a slidedeck and wrote a <a href="https://inviqa.com/blog/service-workers-guide-building-offline-web-experiences" rel="nofollow noreferrer noopener" target="_blank" title="blog entry on inviqa site">blog entry</a>. Which is now authored by a former good colleague. I don't know why. But you can see my origin in the little debugging gif animation on the blog entry.
+
+A Service Worker is a good technology partner to improve a websites <strong>performance</strong> and provide an <strong>offline</strong> experience for a returning visitor.<br />
+<strong>Progressive Web Apps</strong> do rely on.

src/layouts/project-page.njk

@@ -7,28 +7,32 @@
     <h1>{{ seo.title }}</h1>
     <h2>{{ seo.description }}</h2>
 
-    <ak-slider>
-      <h3>{{ project.slides[0].title }}</h3>
-      <img
-        src="{{ imagePath }}{{ project.slides[0].image }}-md.{{ project.slides[0].ext }}"
-        srcset="{{ imagePath }}{{ project.slides[0].image }}-lg.{{ project.slides[0].ext }} 2x"
-        alt="{{ project.slides[0].title }}"
-      >
+    {{ project.beforeSlider | safe }}
 
-      <nav class="slider--pager">
-        {% for slide in project.slides %}
-          <span
-            data-image="{{ imagePath }}{{ slide.image }}-md.{{ slide.ext }}"
-            data-image2x="{{ imagePath }}{{ slide.image }}-lg.{{ slide.ext }}"
-            data-image-title="{{ slide.title }}"
-            title="Show {{ slide.title }}"
-            role="button"
-          >
+    {% if project.slides[0] %}
+      <ak-slider>
+        <h3>{{ project.slides[0].title }}</h3>
+        <img
+          src="{{ imagePath }}{{ project.slides[0].image }}-md.{{ project.slides[0].ext }}"
+          srcset="{{ imagePath }}{{ project.slides[0].image }}-lg.{{ project.slides[0].ext }} 2x"
+          alt="{{ project.slides[0].title }}"
+        >
+
+        <nav class="slider--pager">
+          {% for slide in project.slides %}
+            <span
+              data-image="{{ imagePath }}{{ slide.image }}-md.{{ slide.ext }}"
+              data-image2x="{{ imagePath }}{{ slide.image }}-lg.{{ slide.ext }}"
+              data-image-title="{{ slide.title }}"
+              title="Show {{ slide.title }}"
+              role="button"
+            >
           <img src="{{ imagePath }}{{ slide.image }}-md.{{ slide.ext }}" alt="{{ slide.title }}">
         </span>
-        {% endfor %}
-      </nav>
-    </ak-slider>
+          {% endfor %}
+        </nav>
+      </ak-slider>
+    {% endif %}
 
     <div class="details">
       {{ components.details("wrench", "Techs", project.usedTechnic) }}