03_js-dom/unterricht/tag21/03_website-gulp-js/contact.html

@@ -13,19 +13,21 @@
   <meta name="apple-mobile-web-app-title" content="JS Course" />
   <link rel="manifest" href="/favicon/site.webmanifest" />
 
-    <link rel="stylesheet" href="assets/css/main.css" />
+  <link rel="stylesheet" href="/assets/css/main.css" />
-    <script src="assets/js/build.js" defer></script>
+  <script src="/assets/js/build.js" defer></script>
 </head>
+
   <body>
     <!-- header.header-main>.content-box>figure.logo-main>img+figc -->
 <header class="header-main">
   <div class="content-box">
     <figure class="logo-main">
-          <img src="https://dummyimage.com/280x160/555/000.jpg" alt="Logo" />
+      <img src="/assets/img/logo-js.min.svg" alt="Logo - JS Course" />
-          <figcaption>Logo - Slogan</figcaption>
+      <figcaption>JS course</figcaption>
     </figure>
   </div>
 </header>
+
     <!-- nav.menu-main>ul.list>li*4>a[href="#"]{Link $} -->
     <nav class="menu-main">
   <ul class="list">
@@ -43,6 +45,7 @@
     <li><a href="/contact.html">Contact</a></li>
   </ul>
 </nav>
+
     <main>
       <div class="container py-5">
         <h1>Kontakt</h1>

03_js-dom/unterricht/tag21/03_website-gulp-js/dev/html/includes/head.html

@@ -0,0 +1,16 @@
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Webseite mit HTML & CSS (SCSS)</title>
+  <!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" /> -->
+
+  <link rel="icon" type="image/png" href="/favicon/favicon-96x96.png" sizes="96x96" />
+  <link rel="icon" type="image/svg+xml" href="/favicon/favicon.svg" />
+  <link rel="shortcut icon" href="/favicon/favicon.ico" />
+  <link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png" />
+  <meta name="apple-mobile-web-app-title" content="JS Course" />
+  <link rel="manifest" href="/favicon/site.webmanifest" />
+
+  <link rel="stylesheet" href="/assets/css/main.css" />
+  <script src="/assets/js/build.js" defer></script>
+</head>

03_js-dom/unterricht/tag21/03_website-gulp-js/dev/html/includes/header-main.html

@@ -0,0 +1,9 @@
+<!-- header.header-main>.content-box>figure.logo-main>img+figc -->
+<header class="header-main">
+  <div class="content-box">
+    <figure class="logo-main">
+      <img src="/assets/img/logo-js.min.svg" alt="Logo - JS Course" />
+      <figcaption>JS course</figcaption>
+    </figure>
+  </div>
+</header>

03_js-dom/unterricht/tag21/03_website-gulp-js/dev/html/includes/menu-main.html

@@ -0,0 +1,16 @@
+<nav class="menu-main">
+  <ul class="list">
+    <li><a href="/">Home</a></li>
+    <li><a href="/about.html">About</a></li>
+    <li>
+      <a href="#dropdown">Projects</a>
+      <!-- ul.sublist>li*3>a[href="#"]{Project $} -->
+      <ul class="sublist">
+        <li><a href="/projects/01_jokes.html">01 Chuck Norris Jokes</a></li>
+        <li><a href="#">Project 2</a></li>
+        <li><a href="#">Project 3</a></li>
+      </ul>
+    </li>
+    <li><a href="/contact.html">Contact</a></li>
+  </ul>
+</nav>

03_js-dom/unterricht/tag21/03_website-gulp-js/dev/html/pages/contact.html

@@ -0,0 +1,80 @@
+<!doctype html>
+<html lang="de">
+  @@include('head.html')
+  <body>
+    @@include('header-main.html')
+    <!-- nav.menu-main>ul.list>li*4>a[href="#"]{Link $} -->
+    @@include('menu-main.html')
+    <main>
+      <div class="container py-5">
+        <h1>Kontakt</h1>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet, iste?</p>
+        <form class="form-contact">
+          <div class="row">
+            <!-- .col>.mb-3>label.form-label -->
+            <div class="col-12 col-md-6">
+              <div class="mb-3">
+                <label for="input-firstname" class="form-label">First name:</label>
+                <input
+                  type="text"
+                  name="firstname"
+                  id="input-firstname"
+                  class="form-control input-firstname"
+                  required />
+              </div>
+            </div>
+            <!-- ▲ /col ▲ -->
+            <!-- .col>.mb-3>label.form-label -->
+            <div class="col-12 col-md-6">
+              <div class="mb-3">
+                <label for="input-lastname" class="form-label">Last name:</label>
+                <input type="text" name="lastname" id="input-lastname" class="form-control input-lastname" required />
+              </div>
+            </div>
+            <!-- ▲ /col ▲ -->
+          </div>
+          <!-- .row>.col>.mb-3>label.form-label+input:email.form-control -->
+          <div class="row">
+            <div class="col">
+              <div class="mb-3">
+                <label for="input-email" class="form-label">E-mail</label>
+                <input type="email" name="email" id="input-email" class="form-control input-email" required />
+              </div>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col">
+              <div class="mb-3">
+                <label for="input-subject" class="form-label">Subject</label>
+                <input type="text" name="subject" id="input-subject" class="form-control input-subject" />
+              </div>
+            </div>
+          </div>
+          <!-- .row>.col>.mb-3>label.form-label+textarea.form-control -->
+          <div class="row">
+            <div class="col">
+              <div class="mb-3">
+                <label for="textarea-message" class="form-label">Message</label>
+
+                <textarea
+                  name="message"
+                  id="textarea-message"
+                  cols="12"
+                  rows="8"
+                  class="form-control textarea-message"></textarea>
+              </div>
+            </div>
+          </div>
+          <!-- .row>.col>.mb-3>button:submit.btn.btn-dark.button-submit -->
+          <div class="row">
+            <div class="col">
+              <div class="mb-3">
+                <button type="submit" class="btn btn-dark button-submit">Send</button>
+              </div>
+            </div>
+          </div>
+        </form>
+      </div>
+    </main>
+  </body>
+</html>

03_js-dom/unterricht/tag21/03_website-gulp-js/dev/html/pages/index.html

@@ -0,0 +1,28 @@
+<!doctype html>
+<html lang="de">
+  @@include('head.html')
+  <body>
+    @@include('header-main.html')
+    <!-- nav.menu-main>ul.list>li*4>a[href="#"]{Link $} -->
+    @@include('menu-main.html')
+    <main>
+      <div class="container py-5">
+        <h1>Webseite mit HTML & CSS (SCSS)</h1>
+        <p>
+          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem, earum? Harum fuga itaque a natus tempora
+          dolor vero officiis eos tempore! Impedit nobis ea eum labore, aut assumenda nostrum dicta.
+        </p>
+        <div class="card" style="width: 18rem">
+          <img src="https://picsum.photos/300/200" class="card-img-top" alt="..." />
+          <div class="card-body">
+            <h5 class="card-title">Card title</h5>
+            <p class="card-text">
+              Some quick example text to build on the card title and make up the bulk of the card’s content.
+            </p>
+            <a href="#" class="btn btn-primary">Go somewhere</a>
+          </div>
+        </div>
+      </div>
+    </main>
+  </body>
+</html>

03_js-dom/unterricht/tag21/03_website-gulp-js/gulpfile.js

@@ -22,6 +22,24 @@ task('reload', (done) => {
   done();
 });
 
+// HTML ========
+import fileInclude from 'gulp-file-include';
+task('html', (done) => {
+  const sourceFiles = ['./dev/html/pages/**/*.html', './dev/html/pages/*.html'];
+  const targetFolder = './';
+
+  src(sourceFiles)
+    .pipe(
+      fileInclude({
+        prefix: '@@',
+        basepath: './dev/html/includes',
+      }),
+    )
+    .pipe(dest(targetFolder));
+
+  done();
+});
+
 // JS ===========
 
 // npm install rollup @rollup/stream @rollup/plugin-replace @rollup/plugin-node-resolve @rollup/plugin-commonjs vinyl-source-stream vinyl-buffer -D
@@ -167,10 +185,11 @@ task('css', (done) => {
 task('watcher', () => {
   watch(['./dev/scss/**/*.+(scss|css)', './dev/scss/*.+(scss|css)'], series('css', 'reload'));
   watch(['./dev/scripts/**/*.js', './dev/scripts/*.js'], series('js', 'reload'));
+  watch(['./dev/html/**/*.html'], series('html', 'reload'));
 });
 
 // Main DEV Task ========
-task('dev', series('css', 'js', parallel('server', 'watcher')));
+task('dev', series('css', 'js', 'html', parallel('server', 'watcher')));
 
 // Test Tasks
 

03_js-dom/unterricht/tag21/03_website-gulp-js/index.html

@@ -16,6 +16,7 @@
   <link rel="stylesheet" href="/assets/css/main.css" />
   <script src="/assets/js/build.js" defer></script>
 </head>
+
   <body>
     <!-- header.header-main>.content-box>figure.logo-main>img+figc -->
 <header class="header-main">
@@ -26,6 +27,7 @@
     </figure>
   </div>
 </header>
+
     <!-- nav.menu-main>ul.list>li*4>a[href="#"]{Link $} -->
     <nav class="menu-main">
   <ul class="list">
@@ -43,6 +45,7 @@
     <li><a href="/contact.html">Contact</a></li>
   </ul>
 </nav>
+
     <main>
       <div class="container py-5">
         <h1>Webseite mit HTML & CSS (SCSS)</h1>

03_js-dom/unterricht/tag21/03_website-gulp-js/package-lock.json

@@ -20,6 +20,7 @@
         "esbuild": "^0.28.2",
         "gulp": "^5.0.1",
         "gulp-autoprefixer": "^10.0.0",
+        "gulp-file-include": "^2.3.0",
         "gulp-sass": "^6.0.1",
         "gulp-sourcemaps": "^3.0.0",
         "npm-run-all": "^4.1.5",
@@ -3860,6 +3861,13 @@
         "ieee754": "^1.2.1"
       }
     },
+    "node_modules/buffer-from": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
+      "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/bytes": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
@@ -4105,6 +4113,22 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/concat-stream": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-2.0.0.tgz",
+      "integrity": "sha512-MWufYdFw53ccGjCA+Ol7XJYpAlW6/prSMzuPOTRnJGcGzuhLn4Scrz7qf6o8bROZ514ltazcIFJZevcfbo0x7A==",
+      "dev": true,
+      "engines": [
+        "node >= 6.0"
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "buffer-from": "^1.0.0",
+        "inherits": "^2.0.3",
+        "readable-stream": "^3.0.2",
+        "typedarray": "^0.0.6"
+      }
+    },
     "node_modules/connect": {
       "version": "3.6.6",
       "resolved": "https://registry.npmjs.org/connect/-/connect-3.6.6.tgz",
@@ -5326,6 +5350,13 @@
         "node": ">= 10.13.0"
       }
     },
+    "node_modules/flatnest": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/flatnest/-/flatnest-1.0.1.tgz",
+      "integrity": "sha512-fw6V/6LdrkB/q/mW/8M4PfX9sDUo4k5UZ9vlRlTrsbhDrxbe51puGoGHOmfr5hAczTH/33Q4jzuDnOBerGaIlQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/flru": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/flru/-/flru-1.0.2.tgz",
@@ -5975,6 +6006,61 @@
         "node": ">=10"
       }
     },
+    "node_modules/gulp-file-include": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/gulp-file-include/-/gulp-file-include-2.3.0.tgz",
+      "integrity": "sha512-OoMq5QtXHYz6hu2dZm1OxravcqrPXGeCNvOtz+8/589zFKcdpKGGvFXz/Aw4hx8pKZqaS+oJusgKDVQ4dCzqSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-stream": "^2.0.0",
+        "extend": "^3.0.2",
+        "flatnest": "^1.0.0",
+        "json5": "^2.1.3",
+        "plugin-error": "^1.0.1",
+        "through2": "^4.0.2",
+        "vinyl": "^2.2.1"
+      }
+    },
+    "node_modules/gulp-file-include/node_modules/replace-ext": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/replace-ext/-/replace-ext-1.0.1.tgz",
+      "integrity": "sha512-yD5BHCe7quCgBph4rMQ+0KkIRKwWCrHDOX1p1Gp6HwjPM5kVoCdKGNhN7ydqqsX6lJEnQDKZ/tFMiEdQ1dvPEw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/gulp-file-include/node_modules/through2": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/through2/-/through2-4.0.2.tgz",
+      "integrity": "sha512-iOqSav00cVxEEICeD7TjLB1sueEL+81Wpzp2bY17uZjZN0pWZPuo4suZ/61VujxmqSGFfgOcNuTZ85QJwNZQpw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "readable-stream": "3"
+      }
+    },
+    "node_modules/gulp-file-include/node_modules/vinyl": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/vinyl/-/vinyl-2.2.1.tgz",
+      "integrity": "sha512-LII3bXRFBZLlezoG5FfZVcXflZgWP/4dCwKtxd5ky9+LOtM4CS3bIRQsmR1KMnMW07jpE8fqR2lcxPZ+8sJIcw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "clone": "^2.1.1",
+        "clone-buffer": "^1.0.0",
+        "clone-stats": "^1.0.0",
+        "cloneable-readable": "^1.0.0",
+        "remove-trailing-separator": "^1.0.1",
+        "replace-ext": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
     "node_modules/gulp-plugin-extras": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/gulp-plugin-extras/-/gulp-plugin-extras-1.1.0.tgz",
@@ -9278,6 +9364,13 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/typedarray": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
+      "integrity": "sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/ua-parser-js": {
       "version": "1.0.41",
       "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-1.0.41.tgz",

03_js-dom/unterricht/tag21/03_website-gulp-js/package.json

@@ -24,6 +24,7 @@
     "esbuild": "^0.28.2",
     "gulp": "^5.0.1",
     "gulp-autoprefixer": "^10.0.0",
+    "gulp-file-include": "^2.3.0",
     "gulp-sass": "^6.0.1",
     "gulp-sourcemaps": "^3.0.0",
     "npm-run-all": "^4.1.5",