Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update Sample #869

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Update Sample #869

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
2 changes: 1 addition & 1 deletion sample/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-08-27T16:09:11-04:00",
"updated": "2023-10-28T15:36:53+02:00",
"id": "codelab-4-codelab-markdown",
"duration": 14,
"title": "CodeLab to Create a CodeLab",
Expand Down
66 changes: 33 additions & 33 deletions sample/codelab-4-codelab-markdown/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
<title>CodeLab to Create 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">
<link rel="stylesheet" href="https://storage.googleapis.com/claat-public/codelab-elements.css">
<style>
.success {
color: #1e8e3e;
Expand All @@ -20,21 +20,22 @@
</style>
</head>
<body>
<google-codelab-analytics gaid="UA-49880327-14"></google-codelab-analytics>
<google-codelab-analytics gaid="UA-49880327-14" ga4id=""></google-codelab-analytics>
<google-codelab codelab-gaid=""
codelab-ga4id=""
id="codelab-4-codelab-markdown"
title="CodeLab to Create a CodeLab"
environment="web"
feedback-link="https://github.com/Mrc0113/codelab-4-codelab">

<google-codelab-step label="CodeLab Overview" duration="2">
<p>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&#39;re using right now.<br>When creating a Codelab you have two authoring options:</p>
<p>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&#39;re using right now. When creating a Codelab you have two authoring options:</p>
<ol type="1">
<li>Using a Google Doc</li>
<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: <img alt="image_caption" src="img/e2500cc24e07c73f.png"></p>
<p><strong>Resources:</strong></p>
<ul>
<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>
Expand All @@ -51,36 +52,35 @@
<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</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
<p>Install <a href="https://golang.org/dl/" target="_blank">Go</a> if you don&#39;t have it. You can use Homebrew if you have it on mac</p>
<pre><code language="language-bash" class="language-bash">$ brew install go
</code></pre>
<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
<pre><code language="language-bash" class="language-bash">$ 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
<pre><code language="language-bash" class="language-bash">$ 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
<pre><code language="language-bash" class="language-bash">$ claat
</code></pre>


</google-codelab-step>

<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
<p>Negative : If you&#39;re using Windows make sure to set your text editor to use UNIX line endings!</p>
<pre><code language="language-bash" class="language-bash">$ vim codelab.md
</code></pre>
<h3 is-upgraded>Fill-in the header metadata</h3>
<p>Copy and paste the headers below into your markdown file and change the values appropriately.<br>Guidelines are available below the sample headers.</p>
<pre><code>author: Author Name
<p>Copy and paste the headers below into your markdown file and change the values appropriately. Guidelines are available below the sample headers.</p>
<pre><code language="language-bash" class="language-bash">author: Author Name
summary: Summary of your codelab that is human readable
id: unique-codelab-identifier
categories: codelab,markdown
Expand All @@ -89,37 +89,37 @@
feedback link: A link where users can go to provide feedback (Maybe the git repo)
analytics account: Google Analytics ID
</code></pre>
<p>Metadata consists of key-value pairs of the form &#34;key: value&#34;. Keys cannot<br>contain colons, and separate metadata fields must be separated by blank lines.<br>At present, values must all be on one line. All metadata must come before the<br>title. Any arbitrary keys and values may be used; however, only the following<br>will be understood by the renderer:</p>
<p>Metadata consists of key-value pairs of the form &#34;key: value&#34;. Keys cannot contain colons, and separate metadata fields must be separated by blank lines. At present, values must all be on one line. All metadata must come before the title. Any arbitrary keys and values may be used; however, only the following will be understood by the renderer:</p>
<ul>
<li>Summary: A human-readable summary of the codelab. Defaults to blank.</li>
<li>Id: An identifier composed of lowercase letters ideally describing the<br>content of the codelab. This field should be unique among<br>codelabs.</li>
<li>Id: An identifier composed of lowercase letters ideally describing the content of the codelab. This field should be unique among codelabs.</li>
<li>Categories: A comma-separated list of the topics the codelab covers.</li>
<li>Environments: A list of environments the codelab should be discoverable in.<br>Codelabs marked &#34;Web&#34; will be visible at the codelabs index. Codelabs marked<br>&#34;Kiosk&#34; will only be available at codelabs kiosks, which have special<br>equipment attached.</li>
<li>Status: The publication status of the codelab. Valid values are:<br><br><ul>
<li>Environments: A list of environments the codelab should be discoverable in. Codelabs marked &#34;Web&#34; will be visible at the codelabs index. Codelabs marked &#34;Kiosk&#34; will only be available at codelabs kiosks, which have special equipment attached.</li>
<li>Status: The publication status of the codelab. Valid values are: <ul>
<li>Draft: Codelab is not finished.</li>
<li>Published: Codelab is finished and visible.</li>
<li>Deprecated: Codelab is considered stale and should not be widely advertised.</li>
<li>Hidden: Codelab is not shown in index.</li>
</ul>
</li>
<li>Feedback Link: A link to send users to if they wish to leave feedback on the<br>codelab.</li>
<li>Feedback Link: A link to send users to if they wish to leave feedback on the codelab.</li>
<li>Analytics Account: A Google Analytics ID to include with all codelab pages.</li>
</ul>
<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 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>Then for each section use Header 2 or ‘##&#39; 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&#39;ve found that the time is formatted hh:mm:ss</p>
<p>Example</p>
<pre><code>## Section 1
<pre><code language="language-bash" class="language-bash">## Section 1
Duration: 0:10:00

## Section 2
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 and 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. 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 and yellow info boxes
Expand Down Expand Up @@ -166,8 +166,8 @@
</google-codelab-step>

<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
<p>Now that you have an initial codelab defined in your markdown file let&#39;s go ahead and generate the static site content. We can export and serve the content locally using the <code>claat</code> command that we installed earlier.</p>
<pre><code language="language-bash" class="language-bash">$ claat export codelab.md
$ claat serve
</code></pre>
<ul>
Expand All @@ -180,21 +180,21 @@
</google-codelab-step>

<google-codelab-step label="Host Your CodeLab" duration="1">
<p>When you ran the <code>claat export</code> command you created the static web content needed to host your codelab.<br>It placed static web content in a directory specified by your unique &#34;id&#34; and you can view it locally by opening the index.html page.</p>
<aside class="warning"><p>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.</p>
</aside>
<p>Now that you have the static content you can host it however you want.<br>One option is pushing it to github and serving it up from Netlify.</p>
<p>If you&#39;d like to create your own landing page for codelabs, <a href="https://codelabs.developers.google.com" target="_blank">like this one</a>, there is a tool to do that as well!<br>Check it out here: <a href="https://github.com/googlecodelabs/tools/blob/master/site/README.md" target="_blank">CodeLabs Site</a></p>
<p>When you ran the <code>claat export</code> command you created the static web content needed to host your codelab. It placed static web content in a directory specified by your unique &#34;id&#34; and you can view it locally by opening the index.html page.</p>
<p>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.</p>
<p>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.</p>
<p>If you&#39;d like to create your own landing page for codelabs, <a href="https://codelabs.developers.google.com" target="_blank">like this one</a>, there is a tool to do that as well! Check it out here: <a href="https://github.com/googlecodelabs/tools/blob/master/site/README.md" target="_blank">CodeLabs Site</a></p>

Check warning on line 186 in sample/codelab-4-codelab-markdown/index.html

View check run for this annotation

In Solidarity / Inclusive Language

Match Found 


Please consider an alternative to `master`. 
Possibilities include: `primary`, `main`, `leader`, `active`, `writer`
Raw output 
/master/gi


</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="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>