From 4d6ed3ae17d1acb00f4d82a4809964ddfbf8e57b Mon Sep 17 00:00:00 2001 From: dvelardez Date: Wed, 21 Aug 2019 11:58:27 -0300 Subject: [PATCH 1/2] The metadata is modified for deployment. --- codelab.md | 50 +++++++++++++++++++++++++------------------------- 1 file changed, 25 insertions(+), 25 deletions(-) diff --git a/codelab.md b/codelab.md index 55e611d..a623483 100644 --- a/codelab.md +++ b/codelab.md @@ -1,8 +1,8 @@ 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 @@ -12,18 +12,18 @@ analytics account: UA-139902608-1 ## CodeLab Overview Duration: 0:02:00 -Are you trying to create easy to use, visually appealing content for the tech community? This CodeLab will show you how to quickly create your own Google CodeLab just like the one you're using right now. -When creating a Codelab you have two authoring options: +Are you trying to create easy to use, visually appealing content for the tech community? This CodeLab will show you how to quickly create your own Google CodeLab just like the one you're using right now. +When creating a Codelab you have two authoring options: 1. Using a Google Doc 1. Using a markdown file -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. +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. Here is an example image of another CodeLab that I created: ![image_caption](img/codelabexample.png) -**Resources:** +**Resources:** * The markdown for this 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 @@ -34,7 +34,7 @@ Duration: 0:04:00 In order to create a CodeLab you need *Go* and *claat* (the codelabs command line tool) installed. -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) +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 ``` bash @@ -50,7 +50,7 @@ $ export PATH=$PATH:$GOPATH/bin $ export PATH=$PATH:$GOROOT/bin ``` -You should now have the *claat* command available to you. +You should now have the *claat* command available to you. ``` bash $ claat ``` @@ -58,7 +58,7 @@ $ claat ## Create your initial CodeLab 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. +Now that we have the environment setup let's go ahead and create a markdown file where we'll create the actual codelab. ``` bash $ vim codelab.md @@ -66,8 +66,8 @@ $ 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. +Copy and paste the headers below into your markdown file and change the values appropriately. +Guidelines are available below the sample headers. ``` bash author: Author Name @@ -125,13 +125,13 @@ 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: +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: 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 & yellow info boxes Negative : This will appear in a yellow info box. @@ -150,7 +150,7 @@ Plain Text followed by bullets You created bullets! ``` -Copy into section 2 (Below Duration): +Copy into section 2 (Below Duration): ``` ### Add a Link Let's add a link! @@ -161,38 +161,38 @@ Let's add an image! ![image_caption](https://googlecloud.tips/img/031/codelabs.png) ``` -See the "Markdown Syntax Backup" section for more examples of what can be done. +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 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. +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. ``` bash $ claat export codelab.md $ claat serve ``` -* Your browser should have opened (if it doesn't then try going to localhost:9090 in your browser). -* Choose the directory that matches your "id" that you put in the headers. +* Your browser should have opened (if it doesn't then try going to localhost:9090 in your browser). +* Choose the directory that matches your "id" that you put in the headers. * Viola! You should have your first codelab! ## Host Your CodeLab Duration: 0:01:00 -When you ran the `claat export` command you created the static web content needed to host your codelab. -It placed static web content in a directory specified by your unique "id" and you can view it locally by opening the index.html page. +When you ran the `claat export` command you created the static web content needed to host your codelab. +It placed static web content in a directory specified by your unique "id" and you can view it locally by opening the index.html page. Negative -: Note that when you view it locally by opening index.html some of the graphics may not show up (such as access_time, Next, Back), but they work once online. +: Note that when you view it locally by opening index.html some of the graphics may not show up (such as access_time, Next, Back), but they work once online. Now that you have the static content you can host it however you want. 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! +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) @@ -219,7 +219,7 @@ 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 +* using * bullets ### From 1c13ea8e58d3ea897dd1013f74b2458a3729c837 Mon Sep 17 00:00:00 2001 From: dvelardez Date: Wed, 4 Sep 2019 12:10:55 -0300 Subject: [PATCH 2/2] Remove extra section; make minor updates (https://github.com/Mrc0113/codelab-4-codelab/commit/e9f31f5adef5f660d57d30125a3f7c8fc4b1a8bd) Make a few updates from windows feedback (https://github.com/Mrc0113/codelab-4-codelab/commit/255ae6bd28609d57e146956badd2316923d84bb5) --- codelab-4-codelab-markdown/codelab.json | 6 +- codelab-4-codelab-markdown/index.html | 79 ++++++-------- codelab.md | 134 ++++++++++-------------- 3 files changed, 93 insertions(+), 126 deletions(-) diff --git a/codelab-4-codelab-markdown/codelab.json b/codelab-4-codelab-markdown/codelab.json index 2db6324..d3adb87 100644 --- a/codelab-4-codelab-markdown/codelab.json +++ b/codelab-4-codelab-markdown/codelab.json @@ -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", @@ -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" } diff --git a/codelab-4-codelab-markdown/index.html b/codelab-4-codelab-markdown/index.html index 574802a..1fc7021 100644 --- a/codelab-4-codelab-markdown/index.html +++ b/codelab-4-codelab-markdown/index.html @@ -21,7 +21,7 @@ - Using a markdown file

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.

-

Here is an example image of another CodeLab that I created:
image_caption

+

Here is an example image of another CodeLab that I created:
image_caption

Resources:

    -
  • The markdown for this codelab is located here: codelab.md
    • +
  • This codelab's original home is located here: Link to Codelab
    • +
  • The markdown for the original codelab is located here: codelab.md
  • Google CodeLabs Tools Github - The repo that contains the claat tool we'll be using today
  • Google Group for CodeLab Authors - great forum for asking questions about codelabs and discussing future functionality
  • A blog that I used when getting started with Google Codelabs
    • @@ -49,16 +50,21 @@

    In order to create a CodeLab you need Go and claat (the codelabs command line tool) installed.

    The instructions below are what worked for me on Mac, but you can also find instructions here

    -

    Install Go & claat

    +

    Install Go

    +

    Install Go if you don't have it.
    You can use Homebrew if you have it on mac

    $ 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 for other OS options

    $ 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

    +
    $ go get -u -v -x github.com/googlecodelabs/tools/claat
+

    You should now have the claat command available to you.

    $ claat
    @@ -68,6 +74,8 @@

    Setup Environment Variables

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

    + 
    $ vim codelab.md

    Fill-in the header metadata

    @@ -101,8 +109,8 @@

    Add the Title

    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
    In markdown I've found that the time is formatted hh:mm:ss

    +

    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

    ## Section 1
 Duration: 0:10:00
@@ -111,10 +119,10 @@ 
    Add Sections & Durations
    
 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:

    +

    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 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.
@@ -131,23 +139,34 @@ 
    Add Section Content
    
 * 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.

    +

    More Markdown Parser examples can be found here.

     - -

    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.

    + +

    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 and serve the content locally using the claat command that we installed earlier.

    $ claat export codelab.md
 $ claat serve
    @@ -170,36 +189,6 @@

    Add Section Content

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

    Adding an inline code snippet

    - - -

    Example of a Link

    -

    Adding an image
    image_caption

    -
      -
    • List
      • -
    • using
      • -
    • bullets
      • -
    -
      -
    1. List
      2. -
    2. Using
      3. -
    3. Numbers
      4. -
    -

    Embed an iframe

    - - - - -     - diff --git a/codelab.md b/codelab.md index a623483..0abc683 100644 --- a/codelab.md +++ b/codelab.md @@ -5,26 +5,26 @@ 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 ## CodeLab Overview Duration: 0:02:00 -Are you trying to create easy to use, visually appealing content for the tech community? This CodeLab will show you how to quickly create your own Google CodeLab just like the one you're using right now. -When creating a Codelab you have two authoring options: +Are you trying to create easy to use, visually appealing content for the tech community? This CodeLab will show you how to quickly create your own Google CodeLab just like the one you're using right now. +When creating a Codelab you have two authoring options: 1. Using a Google Doc 1. Using a markdown file -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. +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. Here is an example image of another CodeLab that I created: ![image_caption](img/codelabexample.png) -**Resources:** -* The markdown for this codelab is located here: [codelab.md](https://github.com/Mrc0113/codelab-4-codelab/blob/master/codelab.md) +**Resources:** +* 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) @@ -34,15 +34,19 @@ Duration: 0:04:00 In order to create a CodeLab you need *Go* and *claat* (the codelabs command line tool) installed. -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) +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 @@ -50,7 +54,13 @@ $ export PATH=$PATH:$GOPATH/bin $ export PATH=$PATH:$GOROOT/bin ``` -You should now have the *claat* command available to you. +#### 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 ``` @@ -58,16 +68,19 @@ $ claat ## Create your initial CodeLab 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. +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. +Copy and paste the headers below into your markdown file and change the values appropriately. +Guidelines are available below the sample headers. ``` bash author: Author Name @@ -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 @@ -125,13 +138,13 @@ 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: +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 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. @@ -148,92 +161,59 @@ 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): +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. +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 and serve the content locally using the `claat` command that we installed earlier. ``` bash $ claat export codelab.md $ claat serve ``` -* Your browser should have opened (if it doesn't then try going to localhost:9090 in your browser). -* Choose the directory that matches your "id" that you put in the headers. +* Your browser should have opened (if it doesn't then try going to localhost:9090 in your browser). +* Choose the directory that matches your "id" that you put in the headers. * Viola! You should have your first codelab! ## Host Your CodeLab Duration: 0:01:00 -When you ran the `claat export` command you created the static web content needed to host your codelab. -It placed static web content in a directory specified by your unique "id" and you can view it locally by opening the index.html page. +When you ran the `claat export` command you created the static web content needed to host your codelab. +It placed static web content in a directory specified by your unique "id" and you can view it locally by opening the index.html page. Negative -: Note that when you view it locally by opening index.html some of the graphics may not show up (such as access_time, Next, Back), but they work once online. +: Note that when you view it locally by opening index.html some of the graphics may not show up (such as access_time, Next, Back), but they work once online. Now that you have the static content you can host it however you want. 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! +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")