init with working gulp file and all needed dependencies. Next step to actually...

init with working gulp file and all needed dependencies. Next step to actually create a working test site with the created TypeScript definitions

.gitignore

+/build/
+/.idea/
+/node_modules/

gulpfile.js

+const { src, dest, parallel, series, watch } = require('gulp')
+var ts = require('gulp-typescript')
+var concat = require('gulp-concat')
+var merge = require('merge2')
+var fs = require('file-system')
+var del = require('del')
+var wp = require('webpack')
+var webpacks = require('webpack-stream')
+var browserSync = require('browser-sync').create()
+var argv = require('yargs').argv
+
+var paths = {
+  src: './src/',
+  tsbuild: './src/ts/build/',
+  build: './build/'
+}
+
+var files = {
+  css: 'style.css',
+  mainjs: 'js/ts/page.js',
+  js: 'page.js'
+}
+
+
+function cleantsc() {
+  return del([paths.tsbuild])
+}
+function clean() {
+  return del([paths.tsbuild , paths.build])
+}
+exports.clean = clean
+exports.clean.description = 'Cleans the project'
+
+function transpile() {
+  var tsResult = src(paths.src + '**/*.ts')
+    .pipe(ts.createProject(require('./tsconfig').compilerOptions)())
+
+  return merge([
+    tsResult.dts.pipe(dest(paths.tsbuild + 'd/')),
+    tsResult.js.pipe(dest(paths.tsbuild + 'js/'))
+  ])
+}
+exports.transpile = series(clean, transpile)
+exports.transpile.description = 'Transpiles .ts files using tsconfig.json'
+
+function webpack() {
+  return src(paths.tsbuild + files.mainjs)
+    .pipe(webpacks({
+      output: { filename: files.js },
+      plugins: [
+        new wp.NoEmitOnErrorsPlugin()
+      ],
+      devtool: 'source-map',
+      mode: 'none'
+    }))
+    .pipe(dest(paths.build))
+    .pipe(browserSync.stream())
+}
+exports.webpack = series(clean, transpile, webpack)
+exports.webpack.description = 'Bundles the main JavaScript file'
+
+
+function css() {
+  return src(paths.src + 'css/*.css')
+    .pipe(concat(files.css))
+    .pipe(dest(paths.build))
+}
+exports.css = css
+exports.css.description = 'Bundles CSS source files into style.css'
+
+
+// Generate icon-definitions.ts from optimized icons
+// This removes stoke and fill colors since we set them with css to save space
+function icon_definitions() {
+  var data = ''
+  fs.recurseSync(paths.src+'icons', function(filepath, relative, filename) {
+    if (!filename) return
+    const fileContent = fs.fs.readFileSync(filepath).toString().replace(/\n/g, '');
+    data += 'export const ' + filename.slice(0, -4).replace('-', '_') + '_icon = '
+    data += '`' + fileContent + '`;';
+    data += '\n\n'
+  })
+  data = data.replace(/ ?(?:stroke|fill)="(none|#?[0-9A-Za-z]+)"/g, (match, value) => {    //remove stroke and fill attributes: fill="black" or stroke="#aaa"
+    return value.toLowerCase() === 'none' ? `${match}` : '';    // preserve 'none' values for fill and stroke
+  });
+  data = data.replace(/style="([^"]*)"/g, (match, styleAttr) => {    //remove stroke and fill elements in style attribute: style="stroke:black"
+    const cleanedStyle = styleAttr.replace(/\b(?:fill|stroke):\s*([^;]*);?/gi, (match, value) => {
+      return value.toLowerCase() === 'none' ? `${match};` : '';    // Preserve 'none' values for fill and stroke
+    });
+    return `style="${cleanedStyle}"`;
+  });
+  data = data.replace(/ ?style=" *" ?/g,'').replace(/;;+/g,';')    //remove redundant semicolons and empty style attributes
+  fs.writeFile(paths.src + "ts/icon-definitions.ts", data)
+  return Promise.resolve('')
+}
+exports.icons = series(icon_definitions)
+exports.icons.description = 'Optimises SVG files and writes icon-definitions.ts'
+
+function html() {
+  src(paths.src + 'html/**/*.*')
+    .pipe(dest(paths.build))
+  return src(paths.src + 'tests/**/*.*')
+    .pipe(dest(paths.build + 'tests/'))
+}
+exports.assemble = parallel(exports.webpack, html, css, exports.icons)
+exports.assemble.description = 'Assembles HTML, CSS, and JS output files'
+
+function copy() {
+  fs.recurseSync(paths.build + 'html', function(filepath, relative, filename) {
+    //if filename is undefined, it's a directory
+    if(filename == undefined && (filepath.match(/\\/g) || []).length == 2) {
+      src(paths.build)
+        .pipe(dest(filepath))
+    }
+  })
+  src(paths.build)
+    .pipe(dest(paths.build))
+  return Promise.resolve('')
+}
+
+exports.build = series(clean, exports.assemble)
+exports.build.description = 'Cleans and builds the project'
+
+function stream() {
+  return browserSync.stream()
+}
+const buildnc = series(parallel(series(cleantsc, transpile, webpack), html, css), copy, stream)
+
+function loop() {
+  var arg = (argv.slide || argv.s);
+  var dir = 'tests/';
+  var file = 'notes.html';
+  if(arg) {
+    if(arg.lastIndexOf('/'))
+      dir = arg.substring(0, arg.lastIndexOf('/')+1);
+    file = arg.substring(arg.lastIndexOf('/')+1);
+  }
+
+  browserSync.init({
+    server: {
+      index: dir + file,
+      baseDir: [paths.build, paths.build + dir],
+    }
+  })
+  watch(paths.src + '**/*.*', buildnc)
+}
+const gwatch = series(exports.build, loop)
+exports.watch = gwatch
+exports.watch.description = 'Automatically triggers build whenever a source file is changed and updates the browser'
+exports.watch.flags = { '--slide | -s': 'Pass a custom slide deck to display (e.g. examples/rslidy-intro/index.html)' };
+
+exports.default = exports.build
\ No newline at end of file

package.json

+{
+  "name": "rslidy",
+  "version": "1.0.0",
+  "description": "Rslidy: Lightweight, Accessible, and Responsive HTML5 Slide Decks",
+  "main": "build/rslidy.js",
+  "author": "Keith Andrews",
+  "license": "MIT",
+  "homepage": "https://projects.isds.tugraz.at/rslidy/",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/tugraz-isds/rslidy.git"
+  },
+  "keywords": [
+    "Rslidy",
+    "responsive",
+    "accessible",
+    "lightweight",
+    "HTML5",
+    "slides",
+    "slide decks"
+  ],
+  "devDependencies": {
+    "browser-sync": "^2.27.5",
+    "bufferutil": "^4.0.4",
+    "del": "^3.0.0",
+    "file-system": "^2.2.2",
+    "gulp": "^4.0.2",
+    "gulp-concat": "^2.6.1",
+    "gulp-gzip": "^1.4.2",
+    "gulp-rename": "^1.4.0",
+    "gulp-terser": "^2.1.0",
+    "gulp-typescript": "^6.0.0-alpha.1",
+    "gulp-uglifycss": "^1.1.0",
+    "lodash.template": "^4.5.0",
+    "merge2": "^1.3.0",
+    "source-map": "0.7.4",
+    "svgo": "^2.7.0",
+    "typescript": "^2.9.2",
+    "utf-8-validate": "^5.0.6",
+    "webpack": "^5.89.0",
+    "webpack-stream": "^7.0.0",
+    "yargs": "^15.0.2"
+  }
+}

src/css/style.css

+svg {
+  fill: black;
+}
+
+svg:hover {
+  fill: olivedrab;
+}
+
+svg:disabled {
+  fill: gray;
+}
+
+input[type="checkbox"] + label {
+  width: 2em;
+  height: 1em;
+  margin-left: 0.5em;
+  background-size: cover;
+  background-repeat: no-repeat;
+  display: inline-block;
+  fill: var(--slider-fill-off);
+  stroke: var(--slider-stroke-off);
+  cursor: pointer;
+}
+
+input[type="checkbox"]:checked + label {
+  transform: scaleX(-1);
+  fill: olivedrab;
+  stroke: olivedrab;
+}
\ No newline at end of file

src/html/index.html

+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+  <script src="page.js"></script>
+  <title>Use Cases for SVG in the Web</title>
+</head>
+<body>
+
+
+
+</body>
+</html>
\ No newline at end of file

src/icons/all-slides.svg

+<svg viewBox="0 0 100 100"
+  xmlns="http://www.w3.org/2000/svg">
+<line x1="5" y1="5" x2="5" y2="95" style="stroke:black;stroke-width:8"/>
+<line x1="95" y1="5" x2="95" y2="95" style="stroke:black;stroke-width:8"/>
+<text x="50" y="50" dominant-baseline="middle" text-anchor="middle" fill="black" font-size="100">n</text>
+</svg>
\ No newline at end of file

src/icons/font-minus.svg

+<svg viewBox="0 0 100 100"
+  xmlns="http://www.w3.org/2000/svg">
+<text x="50" y="95" text-anchor="middle" fill="black" font-size="80">A</text>
+<text x="60" y="45" fill="black" font-weight="bold" font-size="55">-</text>
+</svg>
\ No newline at end of file

src/icons/font-plus.svg

+<svg viewBox="0 0 100 100"
+  xmlns="http://www.w3.org/2000/svg">
+<text x="50" y="95" text-anchor="middle" fill="black" font-size="100">A</text>
+<text x="55" y="40" fill="black" font-weight="bold" font-size="55">+</text>
+</svg>
\ No newline at end of file

src/icons/font-reset.svg

+<svg viewBox="0 0 100 100"
+  xmlns="http://www.w3.org/2000/svg">
+<text x="50" y="95" text-anchor="middle" fill="black" font-size="90">A</text>
+</svg>
\ No newline at end of file

src/icons/help.svg

+<svg viewBox="0 0 100 100"
+  xmlns="http://www.w3.org/2000/svg">
+<g transform="scale(0.7)">
+<path fill="none" stroke="black" stroke-width="20" d="M45,67c0-13 1-19 8-26c7-9 18-10 28-8c10,2 22,12 22,26c0,14-11,19-15,22c-7,2-10,6-11,11v20m0,12v16"/>
+</g>
+</svg>
\ No newline at end of file

src/icons/hide.svg

+<svg viewBox="0 0 100 100"
+  xmlns="http://www.w3.org/2000/svg">
+<line stroke-linecap="round" x1="20" y1="15" x2="50" y2="45" stroke="black" stroke-width="10"/>
+<line stroke-linecap="round" x1="50" y1="45" x2="80" y2="15" stroke="black" stroke-width="10"/>
+<line stroke-linecap="round" x1="20" y1="55" x2="50" y2="85" stroke="black" stroke-width="10"/>
+<line stroke-linecap="round" x1="50" y1="85" x2="80" y2="55" stroke="black" stroke-width="10"/>
+</svg>
\ No newline at end of file

src/icons/last.svg

+<svg viewBox="0 0 100 100"
+  xmlns="http://www.w3.org/2000/svg">
+<polygon points="5,5 5,95 70,50"
+  fill="black" stroke="black" stroke-width="1"/>
+<line x1="85" y1="5" x2="85" y2="95" style="stroke:black;stroke-width:15"/>
+</svg>
\ No newline at end of file

src/icons/next.svg

+<svg viewBox="0 0 100 100"
+  xmlns="http://www.w3.org/2000/svg">
+<polygon points="15,5 15,95 85,50"
+  fill="black" stroke="black" stroke-width="1"/>
+</svg>
\ No newline at end of file

src/icons/next_pointer.svg

+<svg viewBox="0 0 100 100"
+     xmlns="http://www.w3.org/2000/svg" width="15" height="15">
+    <polygon points="0,1 0,99 99,50" style="fill:#808080"/>
+</svg>
\ No newline at end of file

src/icons/one-slide.svg

+<svg viewBox="0 0 100 100"
+  xmlns="http://www.w3.org/2000/svg">
+<rect x="5" y="5" width="90" height="90" style="fill:transparent;stroke-width:6;stroke:black" />
+<text x="50" y="50" dominant-baseline="central" text-anchor="middle" fill="black" font-size="80">1</text>
+</svg>
\ No newline at end of file

src/icons/overview.svg

+<svg viewBox="0 0 100 100"
+  xmlns="http://www.w3.org/2000/svg">
+<rect x="0" y="0" width="100" height="100" style="fill:none;stroke-width:8;stroke:black" />
+<line x1="48" y1="0" x2="48" y2="100" style="stroke:black;stroke-width:4"/>
+<rect x="8" y="7" width="33" height="25" style="fill:black" />
+<rect x="8" y="37.5" width="33" height="25" style="fill:black" />
+<rect x="8" y="68" width="33" height="25" style="fill:black" />
+</svg>
\ No newline at end of file

src/icons/previous_pointer.svg

+<svg viewBox="0 0 100 100"
+     xmlns="http://www.w3.org/2000/svg" width="15" height="15">
+    <polygon points="99,1 99,99 1,50" style="fill:#808080"/>
+</svg>
\ No newline at end of file

src/icons/print.svg

+<svg viewBox="0 0 100 100"
+  xmlns="http://www.w3.org/2000/svg">
+<line x1="6" y1="30" x2="94" y2="30" style="stroke:black;stroke-width:8"/>
+<line x1="10" y1="30" x2="10" y2="80" style="stroke:black;stroke-width:8"/>
+<line x1="22" y1="23" x2="30" y2="23" style="stroke:black;stroke-width:8"/>
+<line x1="70" y1="23" x2="78" y2="23" style="stroke:black;stroke-width:8"/>
+<line x1="90" y1="30" x2="90" y2="80" style="stroke:black;stroke-width:8"/>
+<line x1="6" y1="80" x2="30" y2="80" style="stroke:black;stroke-width:8"/>
+<line x1="94" y1="80" x2="70" y2="80" style="stroke:black;stroke-width:8"/>
+
+<line x1="6" y1="33" x2="94" y2="33" style="stroke:black;stroke-width:8"/>
+<line x1="6" y1="40" x2="20" y2="40" style="stroke:black;stroke-width:12"/>
+<line x1="33" y1="40" x2="94" y2="40" style="stroke:black;stroke-width:12"/>
+<line x1="6" y1="55" x2="94" y2="55" style="stroke:black;stroke-width:24"/>
+<line x1="6" y1="75" x2="30" y2="75" style="stroke:black;stroke-width:24"/>
+<line x1="94" y1="75" x2="70" y2="75" style="stroke:black;stroke-width:24"/>
+
+<line x1="35" y1="73" x2="65" y2="73" style="stroke:black;stroke-width:4"/>
+<line x1="35" y1="83" x2="65" y2="83" style="stroke:black;stroke-width:4"/>
+
+<rect x="30" y="5" width="40" height="25" rx="5" ry="5" style="fill:none;stroke-width:4;stroke:black"/>
+<rect x="30" y="65" width="40" height="30" rx="5" ry="5" style="fill:none;stroke-width:4;stroke:black"/>
+</svg>
\ No newline at end of file

src/icons/settings.svg

+<svg viewBox="0 0 100 100"
+  xmlns:xlink="http://www.w3.org/1999/xlink"
+  xmlns="http://www.w3.org/2000/svg">
+<defs>
+<g id="gear">
+<polygon points="40,75 43,95 57,95 60,75" fill="black"/>
+<polygon points="40,25 43,5 57,5 60,25" fill="black"/>
+<polygon points="25,40 5,43 5,57 25,60" fill="black"/>
+<polygon points="75,40 95,43 95,57 75,60" fill="black"/>
+</g>
+</defs>
+<circle cx="50" cy="50" r="25" fill="none" style="stroke:black;stroke-width:15" />
+<use xlink:href="#gear"/>
+<use xlink:href="#gear" transform="rotate(45 50 50)"/>
+</svg>
\ No newline at end of file