included webpack => major restructuring, see #75, next level over-eng…

…ineering ✅

.gitignore

@@ -4,3 +4,16 @@ _site
 .project
 .settings/
 .settings/*
+
+node_modules/
+
+# files generated by jekyll (the final static site)
+site/
+
+# files generated by webpack
+manifest.js
+*-bundle*
+*.bundle*
+
+# fonts from npm are copied to this directory
+static/fonts/

.travis.yml

@@ -16,17 +16,23 @@ cache:
   - node_modules
 
 before_install:
+  # use nvm to install npm, as it is only included by Travis CI in node_js projects
   - . $HOME/.nvm/nvm.sh
   - nvm install stable
   - nvm use stable
   - npm install
+  # install yarn (explanation for npm is true here as well)
+  # for documentation, see https://yarnpkg.com/lang/en/docs/install-ci/#travis-tab
   - curl -o- -L https://yarnpkg.com/install.sh | bash -s -- --version 0.27.5
   - export PATH=$HOME/.yarn/bin:$PATH
 
 before_script:
+  # run yarn to install our dependencies from package.json
   - yarn
 
 script:
+  # pack libs, fonts, etc. together
+  - node_modules/.bin/webpack -p
   # use additional config for CI (changes baseurl for GH Pages)
   # settings defined in later files overwrite ones from earlier files
   - bundle exec jekyll build --config _config.yml,_config_travis.yml 

_config.yml

@@ -44,6 +44,9 @@ metatag:
 
 # Build settings
 markdown: kramdown
+source: sources
+destination: site
+
 
 plugins:
  - jekyll-coffeescript
@@ -60,7 +63,6 @@ keep_files:
 exclude:
   - .c9
   - .git
-  - vendor/bundle
 
 permalink: none
 
@@ -95,9 +97,6 @@ defaults:
     values:
       layout: "en-page"
 
-sass:
-  style: :compressed
-
 collections:
   news:
   sidebar:

_config_travis.yml

@@ -3,9 +3,5 @@ username: fsr
 repo: ese-website
 branch: development
 
-# build settings
-source: .
-destination: _site
-
 # change the baseurl when deploying to GitHub Pages
 baseurl: "/ese-website"

package.json

@@ -1,5 +1,22 @@
 {
   "dependencies": {
-    "slick-carousel": "^1.6.0"
+    "jquery": "^2.2.4",
+    "modernizr": "^3.5.0",
+    "pace-progress": "^1.0.2",
+    "slick-carousel": "^1.6.0",
+    "typeface-open-sans": "^0.0.31",
+    "typeface-work-sans": "^0.0.31"
+  },
+  "devDependencies": {
+    "css-loader": "^0.28.4",
+    "expose-loader": "^0.7.3",
+    "extract-text-webpack-plugin": "^3.0.0",
+    "file-loader": "^0.11.2",
+    "node-sass": "^4.5.3",
+    "sass-loader": "^6.0.6",
+    "script-loader": "^0.7.0",
+    "style-loader": "^0.18.2",
+    "url-loader": "^0.5.9",
+    "webpack": "^3.4.1"
   }
 }

_assets/css/_custom.scss → sources/_assets/css/_custom.scss

@@ -1,3 +1,33 @@
+/*
+ * Font settings
+ * TODO: get rid of all those !important statements when final and use foundation variables instead :)
+ 
+$body-font-weight: 300;
+$header-font-family: "Work Sans", sans-serif;
+$header-font-weight: 400;
+$header-font-color: #323232;
+$paragraph-font-weight: $body-font-weight;
+
+ */
+
+
+
+h1, h2, h3, h4, h5, h6{
+font-family: 'Work Sans', sans-serif !important;
+}
+
+.sidebar h4{
+  font-weight: 300;
+}
+
+p{
+  font-weight:300 !important;
+}
+
+strong{
+  font-weight:400 !important;
+}
+
 /*
  * Pace
  */
@@ -36,6 +66,10 @@ header {
   box-shadow: 0 1.5px 3px rgba(0, 0, 0, .24), 0 3px 8px rgba(0, 0, 0, .05);
 }
 
+header a{
+  font-weight: 300 !important;
+}
+
 header a:hover{
   text-decoration: none;
 

_assets/css/_init.scss → sources/_assets/css/_init.scss

@@ -7,9 +7,6 @@
 $base-font-size: 100%;
 $base-line-height: 150%;
 
-
-@import url('https://fonts.googleapis.com/css?family=Open+Sans:300');
-
 $font-family-sans-serif: "Open Sans", Arial, sans-serif;
 $font-family-serif: Georgia, Cambria, "Times New Roman", Times, serif;
 $font-family-monospace: Consolas, "Liberation Mono", Courier, monospace;
@@ -48,8 +45,7 @@ $info-color       : #A0D3E8;
 
 // We use these to control various global styles
 $body-bg: $white-smoke;
-$body-font-color: $jet;
-$body-font-family: $font-family-sans-serif;
+$body-font-color: #323232;
 
 // Accordion
 $accordion-navigation-bg-color: $brand-color;

sources/_assets/css/fonts.scss

@@ -0,0 +1,43 @@
+/* DEPRECATED */
+
+/* open-sans-300normal - latin */
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 300;
+  src: url(asset_path('open-sans-latin-300.eot')); /* IE9 Compat Modes */
+  src:
+    url(asset_path('open-sans-latin-300.eot?#iefix')) format('embedded-opentype'), /* IE6-IE8 */
+    url(asset_path('open-sans-latin-300.woff2')) format('woff2'), /* Super Modern Browsers */
+    url(asset_path('open-sans-latin-300.woff')) format('woff'), /* Modern Browsers */
+    url(asset_path('open-sans-latin-300.svg#OpenSans')) format('svg'); /* Legacy iOS */
+}
+/* open-sans-300italic - latin */
+@font-face {
+  font-family: 'Open Sans';
+  font-style: italic;
+  font-weight: 300;
+  src: url(asset_path('open-sans-latin-300italic.eot')); /* IE9 Compat Modes */
+  src:
+    local('Open Sans Light italic'),
+    local('Open Sans-Lightitalic'),
+    url(asset_path('open-sans-latin-300italic.eot?#iefix')) format('embedded-opentype'), /* IE6-IE8 */
+    url(asset_path('open-sans-latin-300italic.woff2')) format('woff2'), /* Super Modern Browsers */
+    url(asset_path('open-sans-latin-300italic.woff')) format('woff'), /* Modern Browsers */
+    url(asset_path('open-sans-latin-300italic.svg#OpenSans')) format('svg'); /* Legacy iOS */
+}
+
+/* open-sans-400normal - latin */
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: url(asset_path('open-sans-latin-400.eot')); /* IE9 Compat Modes */
+  src:
+    local('Open Sans Regular '),
+    local('Open Sans-Regular'),
+    url(asset_path('open-sans-latin-400.eot?#iefix')) format('embedded-opentype'), /* IE6-IE8 */
+    url(asset_path('open-sans-latin-400.woff2')) format('woff2'), /* Super Modern Browsers */
+    url(asset_path('open-sans-latin-400.woff')) format('woff'), /* Modern Browsers */
+    url(asset_path('open-sans-latin-400.svg#OpenSans')) format('svg'); /* Legacy iOS */
+}

_data/events.yaml → sources/_data/events.yaml

@@ -4,7 +4,7 @@ days:
   -
     name: "Montag"
     name-en: Monday
-    date: 02.10.2016
+    date: 02.10.2017
     events:
         -
             begin: "9:00"
@@ -42,7 +42,7 @@ days:
   -
     name: "Dienstag"
     name-en: Tuesday
-    date: 03.10.2016
+    date: 03.10.2017
     events:
         -
             title: "Wanderung"
@@ -63,7 +63,7 @@ days:
   -
     name: "Mittwoch"
     name-en: Wednesday
-    date: 04.10.2016
+    date: 04.10.2017
     events:
         -
             begin: "9:00"
@@ -103,7 +103,7 @@ days:
   -
     name: "Don­ners­tag"
     name-en: Thurs­day
-    date: 05.10.2016
+    date: 05.10.2017
     events:
       -
         title: "Frühstück"
@@ -143,7 +143,7 @@ days:
   -
     name: "Freitag"
     name-en: Friday
-    date: 06.10.2016
+    date: 06.10.2017
     events:
       -
         title: "Frühstück"
@@ -174,7 +174,7 @@ days:
   -
     name: "Sams­tag"
     name-en: Satur­day
-    date: 08.10.2016
+    date: 08.10.2017
     events:
       -
         title: "Stadt­führung"

_includes/head.html → sources/_includes/head.html

@@ -39,17 +39,15 @@
 	<meta name="msapplication-TileColor" content="{{ site.data.icons.ms-tilecolor }}" />
 	<meta name="theme-color" content="{{ site.color }}" />
 	<link rel="shortcut icon" type="image/x-icon" href="{{ "/favicon.ico" | prepend: site.baseurl }}" />
-
-	<!-- use liquid tag provieded by plugin Jekyll Assets and include the stylesheet -->
-	{% css style %}
-	<!-- TODO: move slick to assets -->
-	<link rel="stylesheet" type="text/css" href="{{ site.baseurl }}/node_modules/slick-carousel/slick/slick.css"/>
-
 	<link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}" />
 	<link rel="alternate" type="application/rss+xml" title="{{ site.title }}" href="{{ "/feed.xml" | prepend: site.baseurl }}" />
 
-	{% for s in site.data.scripts.default.pre %}
-		{% include script.html script=s %}
-	{% endfor %}
+	<!-- use liquid tag provided by plugin Jekyll Assets and include the main stylesheet -->
+	{% css style %}
+
+	<!-- bundle files create by webpack -->
+	{% js manifest %}
+	{% css app_preload-bundle %}
+	{% js app_preload-bundle %}
 
 </head>

_includes/header.html → sources/_includes/header.html

@@ -1,4 +1,9 @@
-{% if include.pages %}{% assign pages = include.pages %}{% else %}{% assign pages = site.pages %}{% endif %}
+{% if include.pages %}
+    {% assign pages = include.pages %}
+{% else %}
+    {% assign pages = site.pages %}
+{% endif %}
+
 <header>
     <div class="row">
         <div class="top-bar site-nav small-12" data-topbar="" role="navigation">

_includes/index.html → sources/_includes/index.html

@@ -1,4 +1,8 @@
-{% if include.news %}{% assign news = include.news %}{% else %}{% assign news = site.news %}{% endif %}
+{% if include.news %}
+	{% assign news = include.news %}
+{% else %}
+	{% assign news = site.news %}
+{% endif %}
 
 {% include slideshow.html %}
 <section class="news">