Fix: Codelabs UI was not starting due to gulpfile and task updates

site/app/styles/_categories.scss

@@ -47,33 +47,34 @@ $color-weave-green: #0f9d58;
 /* Mixins */
 
 @mixin codelab-card($categories, $color, $icon) {
-  %bg-#{$color} {
+  $color-name: unique-id();
+
+  .bg-#{$color-name} {
     background-color: $color;
   }
 
-  %border-#{$color} {
+  .border-#{$color-name} {
     border-bottom-color: $color;
   }
 
-  %icon-#{$icon} {
+  .icon-#{$icon} {
     background-image: url('/images/icons/#{$icon}');
   }
 
   @each $category in $categories {
     .codelab-card.category-#{$category} {
-      @extend %border-#{$color};
+      border-bottom-color: $color;
     }
 
     .#{$category}-bg {
-      @extend %bg-#{$color};
+      background-color: $color;
     }
 
     .#{$category}-icon {
-      @extend %icon-#{$icon};
+      background-image: url('/images/icons/#{$icon}');
     }
   }
 }
-
 /* Actual CSS classes */
 
 @include codelab-card(['about'],

site/app/styles/_codelab-card.scss

@@ -14,6 +14,8 @@
  * limitations under the License.
  */
 
+@use "sass:math";
+
 @import "_variables";
 @import "_categories";
 
@@ -45,7 +47,7 @@ $card-col-height: 200px; // column mode
   }
 
   img {
-    margin-right: $keyline / 2;
+    margin-right: math.div($keyline, 2);
   }
 
   .card-header {

site/app/views/medium/view.json

@@ -0,0 +1,10 @@
+{
+  "title": "Medium Articles",
+  "description": "Hosting codelabs that have been used to write Medium articles",
+  "logoUrl": "/medium/medium.png",
+  "tags": ["medium"],
+  "exclude": [
+    ".*-about$",
+    "^lang-.*"
+  ]
+}

site/codelabs/how-to-write-a-codelab.md

@@ -0,0 +1,70 @@
+summary: How to Write a Codelab
+id: how-to-write-a-codelab
+categories: Sample
+tags: medium
+status: Published 
+authors: Zarin
+Feedback Link: https://zarin.io
+
+# How to Write a Codelab
+
+<!-- ---------------------------------------------------------------------------- --> 
+## Overview 
+Duration: 1
+
+### What You'll Learn 
+- how to set the amount of time each slide will take to finish 
+- how to include code snippets 
+- how to hyperlink items 
+- how to include images 
+- other stuff
+
+<!-- ---------------------------------------------------------------------------- --> 
+## Setting Duration
+Duration: 2
+
+To indicate how long each slide will take to go through, set the `Duration` under each Heading 2 (i.e. `##`) to an integer. 
+The integers refer to minutes. If you set `Duration: 4` then a particular slide will take 4 minutes to complete. 
+
+The total time will automatically be calculated for you and will be displayed on the codelab once you create it. 
+
+<!-- ---------------------------------------------------------------------------- --> 
+## Code Snippets
+Duration: 3
+
+To include code snippets you can do a few things. 
+- Inline highlighting can be done using the tiny tick mark on your keyboard: "`"
+- Embedded code
+
+### JavaScript
+
+```javascript
+{ 
+  key1: "string", 
+  key2: integer,
+  key3: "string"
+}
+```
+
+### Java
+
+```java
+for (statement 1; statement 2; statement 3) {
+  // code block to be executed
+}
+```
+
+<!-- ---------------------------------------------------------------------------- --> 
+## Hyperlinking and Embedded Images
+
+### Hyperlinking
+[Youtube - Halsey Playlists](https://www.youtube.com/user/iamhalsey/playlists)
+
+### Images
+![alt-text-here](assets/puppy.jpg)
+
+<!-- ---------------------------------------------------------------------------- --> 
+## Other Stuff
+Duration: 1
+
+Checkout the official documentation here: [Codelab Formatting Guide](https://github.com/googlecodelabs/tools/blob/master/FORMAT-GUIDE.md)

site/codelabs/how-to-write-a-codelab/codelab.json

@@ -0,0 +1,25 @@
+{
+  "environment": "web",
+  "format": "html",
+  "prefix": "https://storage.googleapis.com",
+  "mainga": "UA-49880327-14",
+  "updated": "2024-09-09T21:53:59-04:00",
+  "id": "how-to-write-a-codelab",
+  "duration": 7,
+  "title": "How to Write a Codelab",
+  "authors": "Zarin",
+  "summary": "How to Write a Codelab",
+  "source": "how-to-write-a-codelab.md",
+  "theme": "",
+  "status": [
+    "published"
+  ],
+  "category": [
+    "sample"
+  ],
+  "tags": [
+    "medium"
+  ],
+  "feedback": "https://zarin.io",
+  "url": "how-to-write-a-codelab"
+}

site/codelabs/how-to-write-a-codelab/index.html

@@ -0,0 +1,97 @@
+
+<!doctype html>
+
+<html>
+<head>
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+  <meta name="theme-color" content="#4F7DC9">
+  <meta charset="UTF-8">
+  <title>How to Write a Codelab</title>
+  <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Source+Code+Pro:400|Roboto:400,300,400italic,500,700|Roboto+Mono">
+  <link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">
+  <link rel="stylesheet" href="https://storage.googleapis.com/claat-public/codelab-elements.css">
+  <style>
+    .success {
+      color: #1e8e3e;
+    }
+    .error {
+      color: red;
+    }
+  </style>
+</head>
+<body>
+  <google-codelab-analytics gaid="UA-49880327-14" ga4id=""></google-codelab-analytics>
+  <google-codelab codelab-gaid=""
+                  codelab-ga4id=""
+                  id="how-to-write-a-codelab"
+                  title="How to Write a Codelab"
+                  environment="web"
+                  feedback-link="https://zarin.io">
+
+      <google-codelab-step label="Overview" duration="1">
+        <h2 class="checklist" is-upgraded>What You&#39;ll Learn</h2>
+<ul class="checklist">
+<li>how to set the amount of time each slide will take to finish</li>
+<li>how to include code snippets</li>
+<li>how to hyperlink items</li>
+<li>how to include images</li>
+<li>other stuff</li>
+</ul>
+
+
+      </google-codelab-step>
+
+      <google-codelab-step label="Setting Duration" duration="2">
+        <p>To indicate how long each slide will take to go through, set the <code>Duration</code> under each Heading 2 (i.e. <code>##</code>) to an integer. The integers refer to minutes. If you set <code>Duration: 4</code> then a particular slide will take 4 minutes to complete.</p>
+<p>The total time will automatically be calculated for you and will be displayed on the codelab once you create it.</p>
+
+
+      </google-codelab-step>
+
+      <google-codelab-step label="Code Snippets" duration="3">
+        <p>To include code snippets you can do a few things.</p>
+<ul>
+<li>Inline highlighting can be done using the tiny tick mark on your keyboard: &#34;`&#34;</li>
+<li>Embedded code</li>
+</ul>
+<h2 is-upgraded>JavaScript</h2>
+<pre><code language="language-javascript" class="language-javascript">{ 
+  key1: &#34;string&#34;, 
+  key2: integer,
+  key3: &#34;string&#34;
+}
+</code></pre>
+<h2 is-upgraded>Java</h2>
+<pre><code language="language-java" class="language-java">for (statement 1; statement 2; statement 3) {
+  // code block to be executed
+}
+</code></pre>
+
+
+      </google-codelab-step>
+
+      <google-codelab-step label="Hyperlinking and Embedded Images" duration="0">
+        <h2 is-upgraded>Hyperlinking</h2>
+<p><a href="https://www.youtube.com/user/iamhalsey/playlists" target="_blank">Youtube - Halsey Playlists</a></p>
+<h2 is-upgraded>Images</h2>
+<p class="image-container"><img alt="alt-text-here" src="img/7d7408824e1ed9e.jpg"></p>
+
+
+      </google-codelab-step>
+
+      <google-codelab-step label="Other Stuff" duration="1">
+        <p>Checkout the official documentation here: <a href="https://github.com/googlecodelabs/tools/blob/master/FORMAT-GUIDE.md" target="_blank">Codelab Formatting Guide</a></p>
+
+
+      </google-codelab-step>
+
+  </google-codelab>
+
+  <script src="https://storage.googleapis.com/claat-public/native-shim.js"></script>
+  <script src="https://storage.googleapis.com/claat-public/custom-elements.min.js"></script>
+  <script src="https://storage.googleapis.com/claat-public/prettify.js"></script>
+  <script src="https://storage.googleapis.com/claat-public/codelab-elements.js"></script>
+  <script src="//support.google.com/inapp/api.js"></script>
+
+</body>
+</html>

site/codelabs/how-to-write-another-codelab.md

@@ -0,0 +1,69 @@
+summary: How to Write Another Codelab
+id: how-to-write-another-codelab
+categories: Web
+status: Published 
+authors: Zarin
+Feedback Link: https://zarin.io
+
+# How to Write Another Codelab
+
+<!-- ---------------------------------------------------------------------------- --> 
+## Overview 
+Duration: 1
+
+### What You'll Learn 
+- how to set the amount of time each slide will take to finish 
+- how to include code snippets 
+- how to hyperlink items 
+- how to include images 
+- other stuff
+
+<!-- ---------------------------------------------------------------------------- --> 
+## Setting Duration
+Duration: 2
+
+To indicate how long each slide will take to go through, set the `Duration` under each Heading 2 (i.e. `##`) to an integer. 
+The integers refer to minutes. If you set `Duration: 4` then a particular slide will take 4 minutes to complete. 
+
+The total time will automatically be calculated for you and will be displayed on the codelab once you create it. 
+
+<!-- ---------------------------------------------------------------------------- --> 
+## Code Snippets
+Duration: 3
+
+To include code snippets you can do a few things. 
+- Inline highlighting can be done using the tiny tick mark on your keyboard: "`"
+- Embedded code
+
+### JavaScript
+
+```javascript
+{ 
+  key1: "string", 
+  key2: integer,
+  key3: "string"
+}
+```
+
+### Java
+
+```java
+for (statement 1; statement 2; statement 3) {
+  // code block to be executed
+}
+```
+
+<!-- ---------------------------------------------------------------------------- --> 
+## Hyperlinking and Embedded Images
+
+### Hyperlinking
+[Youtube - Halsey Playlists](https://www.youtube.com/user/iamhalsey/playlists)
+
+### Images
+![alt-text-here](assets/puppy.jpg)
+
+<!-- ---------------------------------------------------------------------------- --> 
+## Other Stuff
+Duration: 1
+
+Checkout the official documentation here: [Codelab Formatting Guide](https://github.com/googlecodelabs/tools/blob/master/FORMAT-GUIDE.md)

site/codelabs/how-to-write-another-codelab/codelab.json

@@ -0,0 +1,23 @@
+{
+  "environment": "web",
+  "format": "html",
+  "prefix": "https://storage.googleapis.com",
+  "mainga": "UA-49880327-14",
+  "updated": "2024-09-09T21:53:59-04:00",
+  "id": "how-to-write-another-codelab",
+  "duration": 7,
+  "title": "How to Write Another Codelab",
+  "authors": "Zarin",
+  "summary": "How to Write Another Codelab",
+  "source": "how-to-write-another-codelab.md",
+  "theme": "",
+  "status": [
+    "published"
+  ],
+  "category": [
+    "web"
+  ],
+  "tags": [],
+  "feedback": "https://zarin.io",
+  "url": "how-to-write-another-codelab"
+}