Added content to the Bottom Navigation Codelab, synced submodule, and…

… made changes to the rendered html to support better url snippets and paper buttons
MoonWolf125 · May 22, 2020 · fafe82a · fafe82a
1 parent 24deddd
commit fafe82a
Show file tree

Hide file tree

Showing 7 changed files with 218 additions and 3 deletions.
diff --git a/codelabs/articles/Android-Kotlin-Bottom-Navigation/codelab.json b/codelabs/articles/Android-Kotlin-Bottom-Navigation/codelab.json
@@ -3,9 +3,9 @@
   "format": "html",
   "prefix": "https://storage.googleapis.com",
   "mainga": "UA-49880327-14",
-  "updated": "2020-05-19T19:25:34-05:00",
+  "updated": "2020-05-22T01:15:38-05:00",
   "id": "Android-Kotlin-Bottom-Navigation",
-  "duration": 0,
+  "duration": 6,
   "title": "Android in Kotlin: Bottom Navigation",
   "authors": "Kyle Dahn",
   "summary": "Android in Kotlin: Bottom Navigation",

diff --git a/codelabs/articles/Android-Kotlin-Bottom-Navigation/index.html b/codelabs/articles/Android-Kotlin-Bottom-Navigation/index.html
@@ -27,6 +27,31 @@
                   environment="web"
                   feedback-link="https://github.com/MoonWolf125/Codelabs">
 
+      <google-codelab-step label="Overview" duration="1">
+        <h2 class="checklist" is-upgraded>What You&#39;ll Learn</h2>
+<ul class="checklist">
+<li>How to create a menu for Navigation</li>
+<li>How to add a Bottom Navigation View</li>
+<li>How to add a Navigation Item Selected Listener</li>
+<li>Navigate to the Home Fragment using the Listener</li>
+</ul>
+
+
+      </google-codelab-step>
+
+      <google-codelab-step label="Getting Started" duration="5">
+        <h2 is-upgraded>Get the Code</h2>
+<p>Clone the navigation codelab from GitHub:</p>
+<pre>$ git clone https://github.com/MoonWolf125/Android-Kotlin-Bottom-Navigation.git
+</pre>
+<p>Alternatively you can download the repository as a Zip file:</p>
+<p><a href="https://github.com/MoonWolf125/Android-Kotlin-Bottom-Navigation/archive/0c8042c55a2702ae00b04a23477db1ec315c13a2.zip" target="_blank">
+  <paper-button class="colored" raised="">Download Zip</paper-button>
+</a></p>
+
+
+      </google-codelab-step>
+
   </google-codelab>
 
   <script src="https://storage.googleapis.com/codelab-elements/native-shim.js"></script>

diff --git a/codelabs/articles/how-to-write-a-codelab/codelab.json b/codelabs/articles/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": "2020-05-22T00:14:49-05:00",
+  "id": "how-to-write-a-codelab",
+  "duration": 8,
+  "title": "How to Write a Codelab",
+  "authors": "Zarin",
+  "summary": "How to Write a Codelab",
+  "source": "how-to.md",
+  "theme": "",
+  "status": [
+    "published"
+  ],
+  "category": [
+    "sample"
+  ],
+  "tags": [
+    "medium"
+  ],
+  "feedback": "https://zarin.io",
+  "url": "how-to-write-a-codelab"
+}
diff --git a/codelabs/articles/how-to-write-a-codelab/img/0.jpg b/codelabs/articles/how-to-write-a-codelab/img/0.jpg
diff --git a/codelabs/articles/how-to-write-a-codelab/index.html b/codelabs/articles/how-to-write-a-codelab/index.html
@@ -0,0 +1,96 @@
+
+<!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/codelab-elements/codelab-elements.css">
+  <style>
+    .success {
+      color: #1e8e3e;
+    }
+    .error {
+      color: red;
+    }
+  </style>
+</head>
+<body>
+  <google-codelab-analytics gaid="UA-49880327-14"></google-codelab-analytics>
+  <google-codelab codelab-gaid=""
+                  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>{ 
+  key1: &#34;string&#34;, 
+  key2: integer,
+  key3: &#34;string&#34;
+}
+</code></pre>
+<h2 is-upgraded>Java</h2>
+<pre><code>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="1">
+        <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/0.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/codelab-elements/native-shim.js"></script>
+  <script src="https://storage.googleapis.com/codelab-elements/custom-elements.min.js"></script>
+  <script src="https://storage.googleapis.com/codelab-elements/prettify.js"></script>
+  <script src="https://storage.googleapis.com/codelab-elements/codelab-elements.js"></script>
+  <script src="//support.google.com/inapp/api.js"></script>
+
+</body>
+</html>
diff --git a/codelabs/articles/how-to.md b/codelabs/articles/how-to.md
@@ -0,0 +1,69 @@
+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
+Duration: 1
+### 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)
diff --git a/codelabs/submodules/Android-Kotlin-Bottom-Navigation b/codelabs/submodules/Android-Kotlin-Bottom-Navigation