Add handlebars templating to deal with lists rendering

Signed-off-by: Wojciech Kosla <[email protected]>

.gitignore

@@ -1,5 +1,3 @@
 package-lock.json
 node_modules/
-source/assets/css/
-source/assets/js/
 build/

gulpfile.js

@@ -2,60 +2,116 @@ const gulp = require('gulp'),
   sass = require('gulp-sass'),
   prefix = require('gulp-autoprefixer'),
   babel = require('gulp-babel'),
+  uglify = require('gulp-uglify'),
+  hb = require('gulp-handlebars-all'),
+  imagemin = require('gulp-imagemin'),
+  newer = require('gulp-newer'),
+  rename = require('gulp-rename'),
+  purgecss = require('gulp-purgecss'),
   browsersync = require('browser-sync').create()
 
 function browserSync(done) {
   browsersync.init({
     server: {
-      baseDir: "./source/"
+      baseDir: './build/'
     },
     port: 3000
   })
   done()
 }
 
-function browserSyncReload(done) {
-  browsersync.reload()
-  done()
+function images() {
+  return gulp
+    .src('./source/assets/img/**/*')
+    .pipe(newer('./build/assets/img'))
+    .pipe(
+      imagemin([
+        imagemin.gifsicle({
+          interlaced: true
+        }),
+        imagemin.jpegtran({
+          progressive: true
+        }),
+        imagemin.optipng({
+          optimizationLevel: 5
+        }),
+        imagemin.svgo({
+          plugins: [{
+            removeViewBox: false,
+            collapseGroups: true
+          }]
+        })
+      ])
+    )
+    .pipe(gulp.dest('./build/assets/img'))
+}
+
+function imagesMove() {
+  return gulp
+    .src('./source/assets/img/**/*')
+    .pipe(newer('./build/assets/img'))
+    .pipe(gulp.dest('./build/assets/img'))
+    .pipe(browsersync.stream())
 }
 
 function css() {
   return gulp
-    .src("./source/assets/scss/**/*.scss")
-    .pipe(sass())
+    .src('./source/assets/css/main.scss')
+    .pipe(sass({
+      outputStyle: 'compressed'
+    }))
+    .pipe(purgecss({
+      content: ['./source/**/*.hbs'],
+      whitelistPatterns: [/tns/]
+    }))
     .pipe(prefix())
-    .pipe(gulp.dest("./source/assets/css/"))
+    .pipe(gulp.dest('./build/assets/css/'))
     .pipe(browsersync.stream())
 }
 
 function scripts() {
   return gulp
-    .src("./source/assets/es6/**/*.js")
+    .src('./source/assets/js/**/*.js')
     .pipe(babel({
       presets: ['@babel/env']
     }))
-    .pipe(gulp.dest("./source/assets/js/"))
+    .pipe(uglify())
+    .pipe(gulp.dest('./build/assets/js/'))
+    .pipe(browsersync.stream());
+}
+
+function handlebars() {
+  delete require.cache[require.resolve('./source/assets/data/data.json')]
+  return gulp
+    .src('./source/index.hbs')
+    .pipe(hb('html', {
+      context: require('./source/assets/data/data.json')
+    }))
+    .pipe(rename(path => path.extname = '.html'))
+    .pipe(gulp.dest('./build'))
     .pipe(browsersync.stream());
 }
 
 function watchFiles() {
-  gulp.watch("./source/assets/scss/**/*", css)
-  gulp.watch("./source/assets/es6/**/*", scripts)
-  gulp.watch([
-    "./source/**/*.html",
-    "./source/assets/img/**/*"
-  ], browserSyncReload)
+  gulp.watch('./source/assets/fonts/**/*', fonts)
+  gulp.watch('./source/assets/css/**/*', css)
+  gulp.watch('./source/assets/js/**/*', scripts)
+  gulp.watch(['./source/index.hbs', './source/assets/data/data.json'], handlebars)
+  gulp.watch('./source/assets/img/**/*', images)
 }
 
-function build() {
+function fonts() {
   return gulp
-    .src(["./source/**/*", "!./source/assets/{scss,scss/**/*}", "!./source/assets/{es6,es6/**/*}"])
-    .pipe(gulp.dest("./build/"))
+    .src('./source/assets/fonts/**/*')
+    .pipe(gulp.dest('./build/assets/fonts'))
 }
 
-gulp.task('css', css)
-gulp.task('js', scripts)
-
-gulp.task('watch', gulp.parallel(css, scripts, watchFiles, browserSync))
+const build = gulp.parallel(css, scripts, images, fonts, handlebars, () => {
+  return gulp
+    .src('./source/**/*.html')
+    .pipe(gulp.dest('./build'))
+}),
+  watch = gulp.series(gulp.parallel(css, scripts, imagesMove, fonts, handlebars), gulp.parallel(watchFiles, browserSync))
 
-gulp.task('build', gulp.series(gulp.series(css, scripts), build))
+exports.build = build
+exports.watch = watch

package.json

@@ -15,7 +15,13 @@
     "gulp": "^4.0.0",
     "gulp-autoprefixer": "^6.0.0",
     "gulp-babel": "^8.0.0",
-    "gulp-sass": "^4.0.2"
+    "gulp-handlebars-all": "^0.1.1",
+    "gulp-imagemin": "^5.0.3",
+    "gulp-newer": "^1.4.0",
+    "gulp-purgecss": "^1.1.1",
+    "gulp-rename": "^1.4.0",
+    "gulp-sass": "^4.0.2",
+    "gulp-uglify": "^3.0.1"
   },
   "dependencies": {}
 }

source/assets/scss/main.scss → source/assets/css/main.scss

@@ -672,6 +672,65 @@ a {
   margin: 0 auto;
 }
 
+.tns-ovh {
+  height: 175px !important;
+}
+
+.tns-nav {
+  display: none;
+}
+
+.tns-outer {
+  position: relative;
+  margin: 100px 0 40px;
+}
+
+.tns-controls {
+  text-align: center;
+  position: absolute;
+  width: 100%;
+  height: calc(100% + 80px);
+  top: -40px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  button {
+    width: 29px;
+    height: 29px;
+    padding: 29px 0 0 0;
+    overflow: hidden;
+    margin: 0;
+    border: 0;
+    outline: 0;
+    transition: .3s;
+    &:first-child {
+      background: url('../img/chevron-circle-up-solid.svg') 29px;
+    }
+    &:last-child {
+      background: url('../img/chevron-circle-down-solid.svg') 29px;
+    }
+    &:hover {
+      opacity: .7;
+    }
+  }
+}
+
+.talks__arrow {
+  cursor: pointer;
+  display: block;
+  width: 29px;
+  margin: 0 auto 20px;
+  color: $header-primary;
+  transition: .3s;
+  &--down {
+    margin: 20px auto 0;
+  }
+  &:hover {
+    color: transparentize($header-primary, .3);
+  }
+}
+
 .help__list,
 .talks__list {
   li {

source/assets/data/data.json

@@ -0,0 +1,60 @@
+{
+  "boards": [
+    {
+      "name": "Digilent Arty A7‑35T",
+      "FPGA": "XC7A35T",
+      "image": "arty.png",
+      "url": "https://store.digilentinc.com/arty-a7-artix-7-fpga-development-board-for-makers-and-hobbyists/"
+    },
+    {
+      "name": "Digilent Basys 3 Artix‑7",
+      "FPGA": "XC7A35T",
+      "image": "basys.png",
+      "url": "https://store.digilentinc.com/basys-3-artix-7-fpga-trainer-board-recommended-for-introductory-users/"
+    },
+    {
+      "name": "Digilent Zybo Z7",
+      "FPGA": "XC7Z010",
+      "image": "zybo.png",
+      "url": "https://store.digilentinc.com/zybo-z7-zynq-7000-arm-fpga-soc-development-board/"
+    },
+    {
+      "name": "Alphamax NeTV2",
+      "FPGA": "XC7A35T",
+      "image": "netv2.png",
+      "url": "https://www.crowdsupply.com/alphamax/netv2"
+    },
+    {
+      "name": "ECP5-5G Versa",
+      "FPGA": "LFE5UM5G-45F",
+      "image": "versa5g.png",
+      "url": "https://www.latticesemi.com/en/Products/DevelopmentBoardsAndKits/ECP55GVersaDevKit"
+    },
+    {
+      "name": "ULX3S",
+      "FPGA": "LFE5U-12F/-25F/-45F/-85F",
+      "image": "ulx3s.jpg",
+      "url": "http://radiona.org/new-fpga-board-ulx3s/"
+    },
+    {
+      "name": "TinyFPGA Ex",
+      "FPGA": "LFE5U-85F/LFE5UM5G-85F",
+      "image": "tinyfpga_ex.jpg",
+      "url": "https://www.crowdsupply.com/tinyfpga/tinyfpga-ex"
+    }
+  ],
+  "talks": [
+    {
+      "title": "SymbiFlow talk at ORCONF 2018",
+      "url": "https://orconf.org/#symbiflow"
+    },
+    {
+      "title": "nextpnr talk at ORCONF 2018",
+      "url": "https://orconf.org/#symbioticeda"
+    },
+    {
+      "title": "Project Trellis talk at ORCONF 2018",
+      "url": "https://orconf.org/#trellis"
+    }
+  ]
+}

source/assets/es6/script.js → source/assets/js/script.js

@@ -49,3 +49,9 @@ new Glide('.glide', {
     }
   }
 }).mount()
+
+let slider = tns({
+  container: '.talks__list',
+  items: 3,
+  axis: 'vertical'
+})

source/index.html → source/index.hbs

@@ -7,6 +7,7 @@
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>SymbiFlow - the GCC of FPGAs</title>
   <link rel="stylesheet" href="assets/css/main.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.1/tiny-slider.css">
 </head>
 
 <body>
@@ -409,9 +410,9 @@ <h2 class="header row__header talks__header">
       Talks
     </h2>
     <ul class="talks__list">
-      <li><a class="inline-link" href="https://orconf.org/#symbiflow">SymbiFlow talk at ORCONF 2018</a></li>
-      <li><a class="inline-link" href="https://orconf.org/#symbioticeda">nextpnr talk at ORCONF 2018</a></li>
-      <li><a class="inline-link" href="https://orconf.org/#trellis">Project Trellis talk at ORCONF 2018</a></li>
+      {{#each talks}}
+        <li><a class="inline-link" href="{{url}}">{{{title}}}</a></li>
+      {{/each}}
     </ul>
   </section>
   <section class="row row__help" id="help">
@@ -455,58 +456,15 @@ <h2 class="header row__header boards__header">
 
       <div class="glide__track boards" data-glide-el="track">
         <ul class="glide__slides">
-          <a class="board__anchor" href="https://store.digilentinc.com/arty-a7-artix-7-fpga-development-board-for-makers-and-hobbyists/"
-            target="_blank">
-            <li class="glide__slide board">
-              <img class="board__img" src="assets/img/arty.png" alt="Board">
-              <span class="board__name">Digilent Arty A7&#8209;35T</span>
-              <span class="board__fpga">XC7A35T</span>
-            </li>
-          </a>
-          <a href="https://store.digilentinc.com/basys-3-artix-7-fpga-trainer-board-recommended-for-introductory-users/"
-            target="_blank" class="board__anchor">
-            <li class="glide__slide board">
-              <img class="board__img" src="assets/img/basys.png" alt="Board">
-              <span class="board__name">Digilent Basys 3 Artix&#8209;7</span>
-              <span class="board__fpga">XC7A35T</span>
-            </li>
-          </a>
-          <a href="https://store.digilentinc.com/zybo-z7-zynq-7000-arm-fpga-soc-development-board/" target="_blank"
-            class="board__anchor">
-            <li class="glide__slide board">
-              <img class="board__img" src="assets/img/zybo.png" alt="Board">
-              <span class="board__name">Digilent Zybo Z7</span>
-              <span class="board__fpga">XC7Z010</span>
-            </li>
-          </a>
-          <a href="https://www.crowdsupply.com/alphamax/netv2" target="_blank" class="board__anchor">
-            <li class="glide__slide board">
-              <img class="board__img" src="assets/img/netv2.png" alt="Board">
-              <span class="board__name">Alphamax NeTV2</span>
-              <span class="board__fpga">XC7A35T</span>
-            </li>
-          </a>
-          <a href="https://www.latticesemi.com/en/Products/DevelopmentBoardsAndKits/ECP55GVersaDevKit" target="_blank" class="board__anchor">
-            <li class="glide__slide board">
-              <img class="board__img" src="assets/img/versa5g.png" alt="Board">
-              <span class="board__name">ECP5-5G Versa</span>
-              <span class="board__fpga">LFE5UM5G-45F</span>
-            </li>
-          </a>
-          <a href="http://radiona.org/new-fpga-board-ulx3s/" target="_blank" class="board__anchor">
-            <li class="glide__slide board">
-              <img class="board__img" src="assets/img/ulx3s.jpg" alt="Board">
-              <span class="board__name">ULX3S</span>
-              <span class="board__fpga">LFE5U-12F/-25F/-45F/-85F</span>
-            </li>
-          </a>
-          <a href="https://www.crowdsupply.com/tinyfpga/tinyfpga-ex" target="_blank" class="board__anchor">
-            <li class="glide__slide board">
-              <img class="board__img" src="assets/img/tinyfpga_ex.jpg" alt="Board">
-              <span class="board__name">TinyFPGA Ex</span>
-              <span class="board__fpga">LFE5U-85F/LFE5UM5G-85F</span>
-            </li>
-          </a>
+          {{#each boards}}
+            <a class="board__anchor" href="{{url}}" target="_blank">
+              <li class="glide__slide board">
+                <img class="board__img" src="assets/img/{{image}}" alt="{{{name}}}">
+                <span class="board__name">{{{name}}}</span>
+                <span class="board__fpga">{{{FPGA}}}</span>
+              </li>
+            </a>
+          {{/each}}
         </ul>
       </div>
 
@@ -545,6 +503,7 @@ <h2 class="header row__header boards__header">
 
   <script src="https://cdn.jsdelivr.net/gh/cferdinandi/smooth-scroll/dist/smooth-scroll.polyfills.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/@glidejs/glide"></script>
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/tiny-slider.min.js"></script>
   <script src="assets/js/script.js"></script>
 </body>