Skip to content
This repository has been archived by the owner on Oct 30, 2023. It is now read-only.

The metadata is modified for deployment. #1

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
+77 −110
Open

The metadata is modified for deployment. #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4d6ed3a
The metadata is modified for deployment.
Aug 21, 2019
1c13ea8
Remove extra section; make minor updates (https://github.com/Mrc0113/…
Sep 4, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 2 additions & 4 deletions codelab-4-codelab-markdown/codelab.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
"format": "html",
"prefix": "https://storage.googleapis.com",
"mainga": "UA-49880327-14",
"updated": "2019-07-23T10:15:30-04:00",
"updated": "2019-09-04T12:06:40-03:00",
"id": "codelab-4-codelab-markdown",
"duration": 14,
"title": "CodeLab to Create a CodeLab",
Expand All @@ -14,13 +14,11 @@
"published"
],
"category": [
"codelab",
"markdown"
"web"
],
"tags": [
"web"
],
"feedback": "https://github.com/Mrc0113/codelab-4-codelab",
"ga": "UA-139902608-1",
"url": "codelab-4-codelab-markdown"
}
79 changes: 34 additions & 45 deletions codelab-4-codelab-markdown/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
</head>
<body>
<google-codelab-analytics gaid="UA-49880327-14"></google-codelab-analytics>
<google-codelab codelab-gaid="UA-139902608-1"
<google-codelab codelab-gaid=""
id="codelab-4-codelab-markdown"
title="CodeLab to Create a CodeLab"
environment="web"
Expand All @@ -34,10 +34,11 @@
<li>Using a markdown file</li>
</ol>
<p>In this codelab we are going to use the second option and author our codelab using a markdown file. This gives us the flexibility of using our markdown file for other things and also storing it in our github repo with any code that might be used for a tutorial.</p>
<p>Here is an example image of another CodeLab that I created:<br><img alt="image_caption" src="img/e2500cc24e07c73f.png"></p>
<p>Here is an example image of another CodeLab that I created:<br><img alt="image_caption" src="img\e2500cc24e07c73f.png"></p>
<p><strong>Resources:</strong></p>
<ul>
<li>The markdown for this codelab is located here: <a href="https://github.com/Mrc0113/codelab-4-codelab/blob/master/codelab.md" target="_blank">codelab.md</a></li>
<li>This codelab&#39;s original home is located here: <a href="https://www.marcd.dev/codelab-4-codelab" target="_blank">Link to Codelab</a></li>
<li>The markdown for the original codelab is located here: <a href="https://github.com/Mrc0113/codelab-4-codelab/blob/master/codelab.md" target="_blank">codelab.md</a></li>
<li><a href="https://github.com/googlecodelabs/tools" target="_blank">Google CodeLabs Tools Github</a> - The repo that contains the claat tool we&#39;ll be using today</li>
<li><a href="https://groups.google.com/forum/#!forum/codelab-authors" target="_blank">Google Group for CodeLab Authors</a> - great forum for asking questions about codelabs and discussing future functionality</li>
<li><a href="https://medium.com/@mariopce/tutorial-how-to-make-tutorials-using-google-code-labs-gangdam-style-d62b35476816" target="_blank">A blog that I used when getting started with Google Codelabs</a></li>
Expand All @@ -49,16 +50,21 @@
<google-codelab-step label="Environment Setup" duration="4">
<p>In order to create a CodeLab you need <em>Go</em> and <em>claat</em> (the codelabs command line tool) installed.</p>
<p>The instructions below are what worked for me on Mac, but you can also find instructions <a href="https://github.com/googlecodelabs/tools/tree/master/claat" target="_blank">here</a></p>
<h3 is-upgraded>Install Go &amp; claat</h3>
<h3 is-upgraded>Install Go</h3>
<p>Install <a href="https://golang.org/dl/" target="_blank">Go</a> if you don&#39;t have it.<br>You can use Homebrew if you have it on mac</p>
<pre><code>$ brew install go
$ go get -u -v -x github.com/googlecodelabs/tools/claat
</code></pre>
<h3 is-upgraded>Setup Environment Variables</h3>
<h3 is-upgraded>Setup Go Environment Variables</h3>
<p>Below is what I set on mac, but instructions are <a href="https://golang.org/doc/install" target="_blank">here</a> for other OS options</p>
<pre><code>$ export GOPATH=$HOME/Go
$ export GOROOT=/usr/local/opt/go/libexec
$ export PATH=$PATH:$GOPATH/bin
$ export PATH=$PATH:$GOROOT/bin
</code></pre>
<h3 is-upgraded>Install claat</h3>
<p>Install claat</p>
<pre><code>$ go get -u -v -x github.com/googlecodelabs/tools/claat
</code></pre>
<p>You should now have the <em>claat</em> command available to you.</p>
<pre><code>$ claat
</code></pre>
Expand All @@ -68,6 +74,8 @@ <h3 is-upgraded>Setup Environment Variables</h3>

<google-codelab-step label="Create your initial CodeLab" duration="5">
<p>Now that we have the environment setup let&#39;s go ahead and create a markdown file where we&#39;ll create the actual codelab.</p>
<aside class="warning"><p>If you&#39;re using Windows make sure to set your text editor to use UNIX line endings!</p>
</aside>
<pre><code>$ vim codelab.md
</code></pre>
<h3 is-upgraded>Fill-in the header metadata</h3>
Expand Down Expand Up @@ -101,8 +109,8 @@ <h3 is-upgraded>Add the Title</h3>
<p>Next add your title using a single ‘#&#39; character</p>
<pre><code># Title of codelab
</code></pre>
<h3 is-upgraded>Add Sections &amp; Durations</h3>
<p>Then for each section use Header 2 or ‘##&#39; &amp; specify an optional duration beneath for time remaining calculations<br>Optional section times will be used to automatically total &amp; remaining tutorial times<br>In markdown I&#39;ve found that the time is formatted hh:mm:ss</p>
<h3 is-upgraded>Add Sections and Durations</h3>
<p>Then for each section use Header 2 or ‘##&#39; and specify an optional duration beneath for time remaining calculations<br>Optional section times will be used to automatically total and remaining tutorial times<br>In markdown I&#39;ve found that the time is formatted hh:mm:ss</p>
<p>Example</p>
<pre><code>## Section 1
Duration: 0:10:00
Expand All @@ -111,10 +119,10 @@ <h3 is-upgraded>Add Sections &amp; Durations</h3>
Duration: 0:05:00
</code></pre>
<h3 is-upgraded>Add Section Content</h3>
<p>Now that we have 2 sections to our titled codelab let&#39;s go ahead and add some content to each section.<br>Make up your own or copy &amp; paste the example below:</p>
<p>Now that we have 2 sections to our titled codelab let&#39;s go ahead and add some content to each section.<br>Make up your own or copy and paste the example below:</p>
<p>Copy into section 1 (Below Duration and above Section 2):</p>
<pre><code>### Info Boxes
Plain Text followed by green &amp; yellow info boxes
Plain Text followed by green and yellow info boxes

Negative
: This will appear in a yellow info box.
Expand All @@ -131,23 +139,34 @@ <h3 is-upgraded>Add Section Content</h3>
* World

You created bullets!

### Numbered List
1. List
1. Using
1. Numbers

You created a numbered list!

</code></pre>
<p>Copy into section 2 (Below Duration):</p>
<pre><code>### Add a Link
Let&#39;s add a link!
Adding a link!
[Example of a Link](https://www.google.com)

### Add an Image
Let&#39;s add an image!
Adding an image!
![image_caption](https://googlecloud.tips/img/031/codelabs.png)

### Embed an iframe
![https://codepen.io/tzoght/embed/yRNZaP](https://en.wikipedia.org/wiki/File:Example.jpg &#34;Try Me Publisher&#34;)
</code></pre>
<p>See the &#34;Markdown Syntax Backup&#34; section for more examples of what can be done.<br>More Markdown Parser examples can be found <a href="https://github.com/googlecodelabs/tools/tree/master/claat/parser/md" target="_blank">here</a>.</p>
<p>More Markdown Parser examples can be found <a href="https://github.com/googlecodelabs/tools/tree/master/claat/parser/md" target="_blank">here</a>.</p>


</google-codelab-step>

<google-codelab-step label="Export &amp; Serve" duration="2">
<p>Now that you have an initial codelab defined in your markdown file let&#39;s go ahead and generate the static site content.<br>We can export &amp; serve the content locally using the <code>claat</code> command that we installed earlier.</p>
<google-codelab-step label="Export and Serve" duration="2">
<p>Now that you have an initial codelab defined in your markdown file let&#39;s go ahead and generate the static site content.<br>We can export and serve the content locally using the <code>claat</code> command that we installed earlier.</p>
<pre><code>$ claat export codelab.md
$ claat serve
</code></pre>
Expand All @@ -170,36 +189,6 @@ <h3 is-upgraded>Add Section Content</h3>

</google-codelab-step>

<google-codelab-step label="Markdown Syntax Backup" duration="0">
<pre><code>public static void main(String args[]){
System.out.println(&#34;Hello World!&#34;);
}
</code></pre>
<p>Adding an <code>inline code</code> snippet</p>
<aside class="special"><p>This will appear in a green info box.</p>
</aside>
<aside class="warning"><p>This will appear in a yellow info box.</p>
</aside>
<p><a href="https://www.google.com" target="_blank">Example of a Link</a></p>
<p>Adding an image<br><img alt="image_caption" src="img/3c1a18672fbd28c8.png"></p>
<ul>
<li>List</li>
<li>using</li>
<li>bullets</li>
</ul>
<ol type="1">
<li>List</li>
<li>Using</li>
<li>Numbers</li>
</ol>
<h3 is-upgraded>Embed an iframe</h3>
<aside class="warning"><p>Note that the content you embed must be whitelisted in the &#34;IframeWhitelist&#34; var <a href="https://github.com/googlecodelabs/tools/blob/master/claat/types/node.go" target="_blank">here</a><br>Currently whitelisted include content starting with google.com, google.dev, dartlang.org, web.dev, observablehq.com, repl.it &amp; codepen.io</p>
</aside>
<iframe class="youtube-video" src="https://codepen.io/tzoght/embed/yRNZaP"></iframe>


</google-codelab-step>

</google-codelab>

<script src="https://storage.googleapis.com/codelab-elements/native-shim.js"></script>
Expand Down
102 changes: 41 additions & 61 deletions codelab.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,10 @@
author: Marc DiPasquale
summary: Create a CodeLab Using Markdown
id: codelab-4-codelab-markdown
categories: codelab,markdown
environments: Web
categories: web
environments: web
status: Published
feedback link: https://github.com/Mrc0113/codelab-4-codelab
analytics account: UA-139902608-1

# CodeLab to Create a CodeLab

Expand All @@ -24,7 +23,8 @@ Here is an example image of another CodeLab that I created:


**Resources:**
* The markdown for this codelab is located here: [codelab.md](https://github.com/Mrc0113/codelab-4-codelab/blob/master/codelab.md)
* This codelab's original home is located here: [Link to Codelab](https://www.marcd.dev/codelab-4-codelab)
* The markdown for the original codelab is located here: [codelab.md](https://github.com/Mrc0113/codelab-4-codelab/blob/master/codelab.md)
* [Google CodeLabs Tools Github](https://github.com/googlecodelabs/tools) - The repo that contains the claat tool we'll be using today
* [Google Group for CodeLab Authors](https://groups.google.com/forum/#!forum/codelab-authors) - great forum for asking questions about codelabs and discussing future functionality
* [A blog that I used when getting started with Google Codelabs](https://medium.com/@mariopce/tutorial-how-to-make-tutorials-using-google-code-labs-gangdam-style-d62b35476816)
Expand All @@ -36,20 +36,30 @@ In order to create a CodeLab you need *Go* and *claat* (the codelabs command lin

The instructions below are what worked for me on Mac, but you can also find instructions [here](https://github.com/googlecodelabs/tools/tree/master/claat)

#### Install Go & claat
#### Install Go

Install [Go](https://golang.org/dl/) if you don't have it.
You can use Homebrew if you have it on mac
``` bash
$ brew install go
$ go get -u -v -x github.com/googlecodelabs/tools/claat
```

#### Setup Environment Variables
#### Setup Go Environment Variables
Below is what I set on mac, but instructions are [here](https://golang.org/doc/install) for other OS options

``` bash
$ export GOPATH=$HOME/Go
$ export GOROOT=/usr/local/opt/go/libexec
$ export PATH=$PATH:$GOPATH/bin
$ export PATH=$PATH:$GOROOT/bin
```

#### Install claat
Install claat
``` bash
$ go get -u -v -x github.com/googlecodelabs/tools/claat
```

You should now have the *claat* command available to you.
``` bash
$ claat
Expand All @@ -60,11 +70,14 @@ Duration: 0:05:00

Now that we have the environment setup let's go ahead and create a markdown file where we'll create the actual codelab.

Negative
: If you're using Windows make sure to set your text editor to use UNIX line endings!

####
``` bash
$ vim codelab.md
```


#### Fill-in the header metadata
Copy and paste the headers below into your markdown file and change the values appropriately.
Guidelines are available below the sample headers.
Expand Down Expand Up @@ -110,9 +123,9 @@ Next add your title using a single '#' character
# Title of codelab
```

#### Add Sections & Durations
Then for each section use Header 2 or '##' & specify an optional duration beneath for time remaining calculations
Optional section times will be used to automatically total & remaining tutorial times
#### Add Sections and Durations
Then for each section use Header 2 or '##' and specify an optional duration beneath for time remaining calculations
Optional section times will be used to automatically total and remaining tutorial times
In markdown I've found that the time is formatted hh:mm:ss

Example
Expand All @@ -126,12 +139,12 @@ Duration: 0:05:00

#### Add Section Content
Now that we have 2 sections to our titled codelab let's go ahead and add some content to each section.
Make up your own or copy & paste the example below:
Make up your own or copy and paste the example below:

Copy into section 1 (Below Duration and above Section 2):
```
### Info Boxes
Plain Text followed by green & yellow info boxes
Plain Text followed by green and yellow info boxes

Negative
: This will appear in a yellow info box.
Expand All @@ -148,27 +161,37 @@ Plain Text followed by bullets
* World

You created bullets!

### Numbered List
1. List
1. Using
1. Numbers

You created a numbered list!

```

Copy into section 2 (Below Duration):
```
### Add a Link
Let's add a link!
Adding a link!
[Example of a Link](https://www.google.com)

### Add an Image
Let's add an image!
Adding an image!
![image_caption](https://googlecloud.tips/img/031/codelabs.png)

### Embed an iframe
![https://codepen.io/tzoght/embed/yRNZaP](https://en.wikipedia.org/wiki/File:Example.jpg "Try Me Publisher")
```

See the "Markdown Syntax Backup" section for more examples of what can be done.
More Markdown Parser examples can be found [here](https://github.com/googlecodelabs/tools/tree/master/claat/parser/md).

## Export & Serve
## Export and Serve
Duration: 0:02:00

Now that you have an initial codelab defined in your markdown file let's go ahead and generate the static site content.
We can export & serve the content locally using the `claat` command that we installed earlier.
We can export and serve the content locally using the `claat` command that we installed earlier.

``` bash
$ claat export codelab.md
Expand All @@ -194,46 +217,3 @@ One option is pushing it to github and serving it up from Netlify.

If you'd like to create your own landing page for codelabs, [like this one](https://codelabs.developers.google.com), there is a tool to do that as well!
Check it out here: [CodeLabs Site](https://github.com/googlecodelabs/tools/blob/master/site/README.md)


## Markdown Syntax Backup
Duration: 0:00:00

``` Java
public static void main(String args[]){
System.out.println("Hello World!");
}
```

Adding an `inline code` snippet

Positive
: This will appear in a green info box.

Negative
: This will appear in a yellow info box.

[Example of a Link](https://www.google.com)

Adding an image
![image_caption](https://s3-eu-west-1.amazonaws.com/released-artifacts-3.x/assets/tutorial_images/creating-styles/step1.png)

* List
* using
* bullets

###

1. List
1. Using
1. Numbers

###

#### Embed an iframe
Negative
: Note that the content you embed must be whitelisted in the "IframeWhitelist" var [here](https://github.com/googlecodelabs/tools/blob/master/claat/types/node.go)
Currently whitelisted include content starting with google.com, google.dev, dartlang.org, web.dev, observablehq.com, repl.it & codepen.io

###
![https://codepen.io/tzoght/embed/yRNZaP](https://en.wikipedia.org/wiki/File:Example.jpg "Try Me Publisher")