Add blog to website

blog/2020-06-18-welcome-to-luigi-blog.md

@@ -0,0 +1,18 @@
+---
+title: Welcome to the Luigi blog!
+description: This is our first blog entry and it introduces our new blog section.
+author:
+  - Aleksandra Simeonova
+layout: blog
+---
+
+The new blog section of our website will help you stay on top of the latest Luigi news and updates.
+<!-- Excerpt -->
+
+The Luigi project is growing quickly and attracting more attention in the open-source community. Micro frontend architecture is becoming more popular as an efficient strategy for future-proof, scalable applications. New features are added to Luigi regularly, and we want to keep you up to date.
+
+This is why we are adding a blog to our website to inform you of the latest Luigi releases, updates, and other important news! You can expect regular posts in the future documenting every release and other Luigi-related topics. If you have an idea for a blog post, you can write to aleksandra.simeonova@sap.com.
+
+And yes, our first blog post is just to let you know that we have a blog now. #meta #nerdy
+
+P.S. Follow us on [Twitter](https://twitter.com/luigiprojectio?lang=en) and [YouTube](https://www.youtube.com/channel/UC5WsYsHapDlg2K3iXS4n4AQ) for more Luigi content.

package.json

@@ -33,7 +33,7 @@
   },
   "husky": {
     "hooks": {
-      "pre-commit": "./scripts/hooks/apply-formatters.sh && ./scripts/hooks/remove-test-prefixes.sh && ./scripts/hooks/generate-docu.sh && ./scripts/hooks/prevent-illegal-characters.sh"
+      "pre-commit": "./scripts/hooks/apply-formatters.sh && ./scripts/hooks/remove-test-prefixes.sh && ./scripts/hooks/generate-docu.sh && ./scripts/hooks/generate-website-blog.sh && ./scripts/hooks/prevent-illegal-characters.sh"
     }
   }
 }

scripts/hooks/generate-website-blog.sh

@@ -0,0 +1,47 @@
+#!/bin/bash
+
+# Checks if there are changes in blog or website folder
+# and generates website if necessary
+# Run this script only from Luigi root folder, else git adding won't work.
+# ./scripts/hooks/generate-website-blog.sh
+
+function check_and_generate_website() {
+  staged_changes=$(git diff --cached --name-only --diff-filter=ACM | grep -e "website/landingpage/" -e "blog/" | wc -l)
+  if [[ "$staged_changes" != *"0"* ]]; then
+    echo "Changes in website or blog found. Building landingpage"
+    BASE=`pwd`
+    cd website/landingpage/dev
+    npm run build
+    RES=$?
+    cd $BASE;
+    if [ "$RES" != 0 ]; then
+      echo "lerna run build.website failed."
+      exit 1;
+    fi
+
+    if [ -z "$staged_changes" ]; then
+      echo "No website or blog changes found. Ok"
+    else
+      not_staged_md=$(git diff --name-only | grep -e "website/landingpage")
+      untracked_landingpage=$(git ls-files -o --exclude-standard | grep "landingpage/public")
+      if [ ! -z "$not_staged_md" ] || [ ! -z "$untracked_landingpage" ]; then
+        echo "Staging generated website files"
+        if [ ! -z "$not_staged_md" ]; then
+          echo "$not_staged_md"
+          echo "$not_staged_md" | xargs git add
+        fi
+        if [ ! -z "$untracked_landingpage" ]; then
+          echo "$untracked_landingpage"
+          echo "$untracked_landingpage" | xargs git add
+        fi
+        exit 0
+      else
+        echo "No website or blog changes found. Ok"
+      fi
+    fi
+  fi
+}
+
+check_and_generate_website
+
+exit 0

website/landingpage/README.md

@@ -1,3 +1,36 @@
 [![Netlify Status](https://api.netlify.com/api/v1/badges/bc94a377-3681-456e-9318-a915b71038b9/deploy-status)](https://app.netlify.com/sites/dazzling-roentgen-7c50f8/deploys)
 
 Luigi landingpage, deployed via netlify and accessible at https://luigi-project.io
+
+
+## Blog entry creation
+
+Create a .md file in /blog with schema: `YYYY-MM-DD-page-slug.md`
+
+Front Matter data allows to set SEO title, description as well as author (can be single or list). Layout must be `blog`.
+Excerpt content for overview page is separated with `<!-- Excerpt -->`.
+
+```markdown
+---
+title: Our first blog entry
+description: This is our first blog entry and it introduces our new blog section.
+author:
+  - Name 1
+  - Name 2
+layout: blog
+---
+
+This is a collection of advanced use cases and example implementations. If you are new to Luigi, take a look at our [Getting Started](/docs/getting-started.md) section first.
+<!-- Excerpt -->
+
+Google's `id_token` contains basic identity data like name and user ID, which allows for this data to be shown in the profile.
+
+1. one
+2. two
+3. three
+
+- another
+- unordered
+- list
+- entry
+```

website/landingpage/dev/gulpfile.babel.js

@@ -14,6 +14,7 @@ import webpack2 from 'webpack';
 import named from 'vinyl-named';
 import uncss from 'uncss';
 import autoprefixer from 'autoprefixer';
+import { writeBlogFiles } from './src/services/blogprocessor';
 
 // Load all Gulp plugins into one variable
 const $ = plugins();
@@ -33,7 +34,7 @@ function loadConfig() {
 // Sass must be run later so UnCSS can search for used classes in the others assets.
 gulp.task(
   'build',
-  gulp.series(gulp.parallel(pages, javascript, images, copy), sass)
+  gulp.series(gulp.parallel(buildBlogFiles, pages, javascript, images, copy), sass)
 );
 
 // Build the site, run the server, and watch for file changes
@@ -172,11 +173,25 @@ function reload(done) {
   done();
 }
 
+function buildBlogFiles(done) {
+  writeBlogFiles();
+  done();
+}
+
 // Watch for changes to static assets, pages, Sass, and JavaScript
 function watch() {
   gulp.watch(PATHS.assets, copy);
   gulp
-    .watch('src/pages/**/*.html')
+    .watch([
+      __dirname + '/../../../blog/*.md',
+      'src/services/*.js'
+    ])
+    .on('all', gulp.series(buildBlogFiles, resetPages, pages, browser.reload));
+  gulp
+    .watch([
+      'src/pages/**/*.html',
+      '!src/pages/blog/20*.html' // skip processed blog entries
+      ])
     .on('all', gulp.series(pages, browser.reload));
   gulp
     .watch('src/{layouts,partials}/**/*.html')