Split quickstart into smaller steps

kptdev · Jul 10, 2020 · 4a2b181 · 4a2b181
1 parent 28c3a7d
commit 4a2b181
Show file tree

Hide file tree

Showing 5 changed files with 93 additions and 34 deletions.
diff --git a/docs/guides/producer/functions/ts/index.html b/docs/guides/producer/functions/ts/index.html
@@ -1053,7 +1053,7 @@ <h2 id="next-steps">Next Steps</h2>
                     <h5>
                         <a href="/kpt/guides/producer/functions/ts/quickstart/">TypeScript Quickstart</a>
                     </h5>
-                    <p>Quickstart for developing Typescript functions.</p>
+                    <p>Quickstart for Developing Config Functions</p>
                 </div>
 
 

diff --git a/docs/guides/producer/functions/ts/index.xml b/docs/guides/producer/functions/ts/index.xml
@@ -24,23 +24,24 @@
 
         &lt;h2 id=&#34;developer-quickstart&#34;&gt;Developer Quickstart&lt;/h2&gt;
 &lt;p&gt;This quickstart will get you started developing a config function with the TypeScript SDK,
-using an existing Hello World package.&lt;/p&gt;
+using an existing kpt-functions package. Config functions are any functions which implement
+the &lt;code&gt;KptFunc&lt;/code&gt; interface &lt;a href=&#34;https://googlecontainertools.github.io/kpt-functions-sdk/api/&#34;&gt;documented here&lt;/a&gt;.&lt;/p&gt;
 &lt;h3 id=&#34;prerequisites&#34;&gt;Prerequisites&lt;/h3&gt;
 &lt;h4 id=&#34;system-requirements&#34;&gt;System Requirements&lt;/h4&gt;
 &lt;p&gt;Currently supported platforms: amd64 Linux/Mac&lt;/p&gt;
 &lt;h4 id=&#34;setting-up-your-local-environment&#34;&gt;Setting Up Your Local Environment&lt;/h4&gt;
 &lt;ul&gt;
 &lt;li&gt;Install &lt;a href=&#34;https://nodejs.org/en/download/&#34;&gt;node&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;Install &lt;a href=&#34;https://docs.docker.com/v17.09/engine/installation/&#34;&gt;docker&lt;/a&gt;&lt;/li&gt;
-&lt;li&gt;Install &lt;a href=&#34;../../../../../installation/&#34;&gt;kpt&lt;/a&gt; and add it to $PATH&lt;/li&gt;
+&lt;li&gt;Install &lt;a href=&#34;../../../../../installation/&#34;&gt;kpt&lt;/a&gt; and add it to your $PATH&lt;/li&gt;
 &lt;/ul&gt;
-&lt;h3 id=&#34;hello-world-package&#34;&gt;Hello World Package&lt;/h3&gt;
+&lt;h3 id=&#34;explore-the-demo-functions-package&#34;&gt;Explore the Demo Functions Package&lt;/h3&gt;
 &lt;ol&gt;
 &lt;li&gt;
-&lt;p&gt;Get the &lt;code&gt;hello-world&lt;/code&gt; package:&lt;/p&gt;
+&lt;p&gt;Get the &lt;code&gt;demo-functions&lt;/code&gt; package:&lt;/p&gt;
 &lt;div class=&#34;highlight&#34;&gt;&lt;pre style=&#34;background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4&#34;&gt;&lt;code class=&#34;language-sh&#34; data-lang=&#34;sh&#34;&gt;git clone --depth &lt;span style=&#34;color:#0000cf;font-weight:bold&#34;&gt;1&lt;/span&gt; https://github.com/GoogleContainerTools/kpt-functions-sdk.git
-&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;All subsequent commands are run from the &lt;code&gt;hello-world&lt;/code&gt; directory:&lt;/p&gt;
-&lt;div class=&#34;highlight&#34;&gt;&lt;pre style=&#34;background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4&#34;&gt;&lt;code class=&#34;language-sh&#34; data-lang=&#34;sh&#34;&gt;&lt;span style=&#34;color:#204a87&#34;&gt;cd&lt;/span&gt; kpt-functions-sdk/ts/hello-world
+&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;All subsequent commands are run from the &lt;code&gt;demo-functions&lt;/code&gt; directory:&lt;/p&gt;
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre style=&#34;background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4&#34;&gt;&lt;code class=&#34;language-sh&#34; data-lang=&#34;sh&#34;&gt;&lt;span style=&#34;color:#204a87&#34;&gt;cd&lt;/span&gt; kpt-functions-sdk/ts/demo-functions
 &lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/li&gt;
 &lt;li&gt;
 &lt;p&gt;Install all dependencies:&lt;/p&gt;
@@ -51,7 +52,9 @@ using an existing Hello World package.&lt;/p&gt;
 &lt;div class=&#34;highlight&#34;&gt;&lt;pre style=&#34;background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4&#34;&gt;&lt;code class=&#34;language-sh&#34; data-lang=&#34;sh&#34;&gt;npm run watch
 &lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/li&gt;
 &lt;li&gt;
-&lt;p&gt;Run the &lt;a href=&#34;https://github.com/GoogleContainerTools/kpt-functions-sdk/blob/master/ts/demo-functions/src/label_namespace.ts&#34;&gt;&lt;code&gt;label_namespace&lt;/code&gt;&lt;/a&gt; transformer function:&lt;/p&gt;
+&lt;p&gt;Explore the &lt;a href=&#34;https://github.com/GoogleContainerTools/kpt-functions-sdk/blob/master/ts/demo-functions/src/label_namespace.ts&#34;&gt;&lt;code&gt;label_namespace&lt;/code&gt;&lt;/a&gt; transformer function. This function takes a
+given &lt;code&gt;label_name&lt;/code&gt; and &lt;code&gt;label_value&lt;/code&gt; to add the appropriate label to &lt;code&gt;Namespace&lt;/code&gt; objects using
+the SDK&amp;rsquo;s &lt;code&gt;addLabel&lt;/code&gt; function.&lt;/p&gt;
 
 
 &lt;pre class=&#34;language-markup&#34;&gt;
@@ -108,6 +111,9 @@ metadata:
 
   &lt;/code&gt;
 &lt;/pre&gt;
+&lt;/li&gt;
+&lt;li&gt;
+&lt;p&gt;Run the &lt;code&gt;label_namespace&lt;/code&gt; function on the &lt;code&gt;example-configs&lt;/code&gt; directory:&lt;/p&gt;
 &lt;div class=&#34;highlight&#34;&gt;&lt;pre style=&#34;background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4&#34;&gt;&lt;code class=&#34;language-sh&#34; data-lang=&#34;sh&#34;&gt;&lt;span style=&#34;color:#204a87&#34;&gt;export&lt;/span&gt; &lt;span style=&#34;color:#000&#34;&gt;CONFIGS&lt;/span&gt;&lt;span style=&#34;color:#ce5c00;font-weight:bold&#34;&gt;=&lt;/span&gt;../../example-configs
 
 kpt fn &lt;span style=&#34;color:#204a87&#34;&gt;source&lt;/span&gt; &lt;span style=&#34;color:#000&#34;&gt;$CONFIGS&lt;/span&gt; &lt;span style=&#34;color:#000;font-weight:bold&#34;&gt;|&lt;/span&gt;
@@ -192,6 +198,13 @@ metadata:
 &lt;/pre&gt;
 &lt;/li&gt;
 &lt;li&gt;
+&lt;p&gt;Run &lt;code&gt;validate-rolebinding&lt;/code&gt; on &lt;code&gt;example-configs&lt;/code&gt;.&lt;/p&gt;
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre style=&#34;background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4&#34;&gt;&lt;code class=&#34;language-sh&#34; data-lang=&#34;sh&#34;&gt;kpt fn &lt;span style=&#34;color:#204a87&#34;&gt;source&lt;/span&gt; &lt;span style=&#34;color:#000&#34;&gt;$CONFIGS&lt;/span&gt; &lt;span style=&#34;color:#000;font-weight:bold&#34;&gt;|&lt;/span&gt;
+node dist/validate_rolebinding_run.js -d &lt;span style=&#34;color:#000&#34;&gt;subject_name&lt;/span&gt;&lt;span style=&#34;color:#ce5c00;font-weight:bold&#34;&gt;=&lt;/span&gt;alice@foo-corp.com &lt;span style=&#34;color:#000;font-weight:bold&#34;&gt;|&lt;/span&gt;
+kpt fn sink &lt;span style=&#34;color:#000&#34;&gt;$CONFIGS&lt;/span&gt;
+git diff &lt;span style=&#34;color:#000&#34;&gt;$CONFIGS&lt;/span&gt;
+&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/li&gt;
+&lt;li&gt;
 &lt;p&gt;Explore generator functions like &lt;a href=&#34;https://github.com/GoogleContainerTools/kpt-functions-sdk/blob/master/ts/demo-functions/src/expand_team_cr.ts&#34;&gt;expand-team-cr&lt;/a&gt;. This function generates a per-environment
 Namespace and RoleBinding object for each custom resource (CR) of type Team.&lt;/p&gt;
 
@@ -300,8 +313,14 @@ and corresponding Rolebinding objects in each of these Namespaces.
   &lt;/code&gt;
 &lt;/pre&gt;
 &lt;/li&gt;
+&lt;li&gt;
+&lt;p&gt;Run &lt;code&gt;expand-team-cr&lt;/code&gt; on &lt;code&gt;example-configs&lt;/code&gt;.&lt;/p&gt;
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre style=&#34;background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4&#34;&gt;&lt;code class=&#34;language-sh&#34; data-lang=&#34;sh&#34;&gt;kpt fn &lt;span style=&#34;color:#204a87&#34;&gt;source&lt;/span&gt; &lt;span style=&#34;color:#000&#34;&gt;$CONFIGS&lt;/span&gt; &lt;span style=&#34;color:#000;font-weight:bold&#34;&gt;|&lt;/span&gt;
+node dist/expand_team_cr_run.js &lt;span style=&#34;color:#000;font-weight:bold&#34;&gt;|&lt;/span&gt;
+kpt fn sink &lt;span style=&#34;color:#000&#34;&gt;$CONFIGS&lt;/span&gt;
+git diff &lt;span style=&#34;color:#000&#34;&gt;$CONFIGS&lt;/span&gt;
+&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/li&gt;
 &lt;/ol&gt;
-&lt;p&gt;Config functions should implement the &lt;code&gt;KptFunc&lt;/code&gt; interface &lt;a href=&#34;https://googlecontainertools.github.io/kpt-functions-sdk/api/interfaces/_types_.kptfunc.html&#34;&gt;documented here&lt;/a&gt;.&lt;/p&gt;
 &lt;h2 id=&#34;next-steps&#34;&gt;Next Steps&lt;/h2&gt;
 &lt;ul&gt;
 &lt;li&gt;Take a look at &lt;a href=&#34;https://github.com/GoogleContainerTools/kpt-functions-sdk/tree/master/ts/demo-functions/src&#34;&gt;these example functions&lt;/a&gt; to better understand how to use the typescript SDK.&lt;/li&gt;

diff --git a/docs/guides/producer/functions/ts/quickstart/index.html b/docs/guides/producer/functions/ts/quickstart/index.html
@@ -33,16 +33,16 @@
 <link rel="icon" type="image/png" href="/kpt/favicons/android-192x192.png" sizes="192x192">
 
 <title>TypeScript Quickstart | Kpt</title><meta property="og:title" content="TypeScript Quickstart" />
-<meta property="og:description" content="Quickstart for developing Typescript functions.
+<meta property="og:description" content="Quickstart for Developing Config Functions
 " />
 <meta property="og:type" content="website" />
 <meta property="og:url" content="https://googlecontainertools.github.io/kpt/guides/producer/functions/ts/quickstart/" />
 <meta property="og:site_name" content="Kpt" />
 <meta itemprop="name" content="TypeScript Quickstart">
-<meta itemprop="description" content="Quickstart for developing Typescript functions.
+<meta itemprop="description" content="Quickstart for Developing Config Functions
 "><meta name="twitter:card" content="summary"/>
 <meta name="twitter:title" content="TypeScript Quickstart"/>
-<meta name="twitter:description" content="Quickstart for developing Typescript functions.
+<meta name="twitter:description" content="Quickstart for Developing Config Functions
 "/>
 
 
@@ -919,7 +919,7 @@
     <li><a href="#developer-quickstart">Developer Quickstart</a>
       <ul>
         <li><a href="#prerequisites">Prerequisites</a></li>
-        <li><a href="#hello-world-package">Hello World Package</a></li>
+        <li><a href="#explore-the-demo-functions-package">Explore the Demo Functions Package</a></li>
       </ul>
     </li>
     <li><a href="#next-steps">Next Steps</a></li>
@@ -990,26 +990,27 @@
 
 <div class="td-content">
 	<h1>TypeScript Quickstart</h1>
-	<div class="lead">Quickstart for developing Typescript functions.</div>
+	<div class="lead">Quickstart for Developing Config Functions</div>
 	<h2 id="developer-quickstart">Developer Quickstart</h2>
 <p>This quickstart will get you started developing a config function with the TypeScript SDK,
-using an existing Hello World package.</p>
+using an existing kpt-functions package. Config functions are any functions which implement
+the <code>KptFunc</code> interface <a href="https://googlecontainertools.github.io/kpt-functions-sdk/api/">documented here</a>.</p>
 <h3 id="prerequisites">Prerequisites</h3>
 <h4 id="system-requirements">System Requirements</h4>
 <p>Currently supported platforms: amd64 Linux/Mac</p>
 <h4 id="setting-up-your-local-environment">Setting Up Your Local Environment</h4>
 <ul>
 <li>Install <a href="https://nodejs.org/en/download/">node</a></li>
 <li>Install <a href="https://docs.docker.com/v17.09/engine/installation/">docker</a></li>
-<li>Install <a href="../../../../../installation/">kpt</a> and add it to $PATH</li>
+<li>Install <a href="../../../../../installation/">kpt</a> and add it to your $PATH</li>
 </ul>
-<h3 id="hello-world-package">Hello World Package</h3>
+<h3 id="explore-the-demo-functions-package">Explore the Demo Functions Package</h3>
 <ol>
 <li>
-<p>Get the <code>hello-world</code> package:</p>
+<p>Get the <code>demo-functions</code> package:</p>
 <div class="highlight"><pre style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-sh" data-lang="sh">git clone --depth <span style="color:#0000cf;font-weight:bold">1</span> https://github.com/GoogleContainerTools/kpt-functions-sdk.git
-</code></pre></div><p>All subsequent commands are run from the <code>hello-world</code> directory:</p>
-<div class="highlight"><pre style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-sh" data-lang="sh"><span style="color:#204a87">cd</span> kpt-functions-sdk/ts/hello-world
+</code></pre></div><p>All subsequent commands are run from the <code>demo-functions</code> directory:</p>
+<div class="highlight"><pre style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-sh" data-lang="sh"><span style="color:#204a87">cd</span> kpt-functions-sdk/ts/demo-functions
 </code></pre></div></li>
 <li>
 <p>Install all dependencies:</p>
@@ -1020,7 +1021,9 @@ <h3 id="hello-world-package">Hello World Package</h3>
 <div class="highlight"><pre style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-sh" data-lang="sh">npm run watch
 </code></pre></div></li>
 <li>
-<p>Run the <a href="https://github.com/GoogleContainerTools/kpt-functions-sdk/blob/master/ts/demo-functions/src/label_namespace.ts"><code>label_namespace</code></a> transformer function:</p>
+<p>Explore the <a href="https://github.com/GoogleContainerTools/kpt-functions-sdk/blob/master/ts/demo-functions/src/label_namespace.ts"><code>label_namespace</code></a> transformer function. This function takes a
+given <code>label_name</code> and <code>label_value</code> to add the appropriate label to <code>Namespace</code> objects using
+the SDK&rsquo;s <code>addLabel</code> function.</p>
 
 
 <pre class="language-markup">
@@ -1077,6 +1080,9 @@ <h3 id="hello-world-package">Hello World Package</h3>
 
   </code>
 </pre>
+</li>
+<li>
+<p>Run the <code>label_namespace</code> function on the <code>example-configs</code> directory:</p>
 <div class="highlight"><pre style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-sh" data-lang="sh"><span style="color:#204a87">export</span> <span style="color:#000">CONFIGS</span><span style="color:#ce5c00;font-weight:bold">=</span>../../example-configs
 
 kpt fn <span style="color:#204a87">source</span> <span style="color:#000">$CONFIGS</span> <span style="color:#000;font-weight:bold">|</span>
@@ -1161,6 +1167,13 @@ <h3 id="hello-world-package">Hello World Package</h3>
 </pre>
 </li>
 <li>
+<p>Run <code>validate-rolebinding</code> on <code>example-configs</code>.</p>
+<div class="highlight"><pre style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-sh" data-lang="sh">kpt fn <span style="color:#204a87">source</span> <span style="color:#000">$CONFIGS</span> <span style="color:#000;font-weight:bold">|</span>
+node dist/validate_rolebinding_run.js -d <span style="color:#000">subject_name</span><span style="color:#ce5c00;font-weight:bold">=</span>alice@foo-corp.com <span style="color:#000;font-weight:bold">|</span>
+kpt fn sink <span style="color:#000">$CONFIGS</span>
+git diff <span style="color:#000">$CONFIGS</span>
+</code></pre></div></li>
+<li>
 <p>Explore generator functions like <a href="https://github.com/GoogleContainerTools/kpt-functions-sdk/blob/master/ts/demo-functions/src/expand_team_cr.ts">expand-team-cr</a>. This function generates a per-environment
 Namespace and RoleBinding object for each custom resource (CR) of type Team.</p>
 
@@ -1269,8 +1282,14 @@ <h3 id="hello-world-package">Hello World Package</h3>
   </code>
 </pre>
 </li>
+<li>
+<p>Run <code>expand-team-cr</code> on <code>example-configs</code>.</p>
+<div class="highlight"><pre style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-sh" data-lang="sh">kpt fn <span style="color:#204a87">source</span> <span style="color:#000">$CONFIGS</span> <span style="color:#000;font-weight:bold">|</span>
+node dist/expand_team_cr_run.js <span style="color:#000;font-weight:bold">|</span>
+kpt fn sink <span style="color:#000">$CONFIGS</span>
+git diff <span style="color:#000">$CONFIGS</span>
+</code></pre></div></li>
 </ol>
-<p>Config functions should implement the <code>KptFunc</code> interface <a href="https://googlecontainertools.github.io/kpt-functions-sdk/api/interfaces/_types_.kptfunc.html">documented here</a>.</p>
 <h2 id="next-steps">Next Steps</h2>
 <ul>
 <li>Take a look at <a href="https://github.com/GoogleContainerTools/kpt-functions-sdk/tree/master/ts/demo-functions/src">these example functions</a> to better understand how to use the typescript SDK.</li>
@@ -1354,7 +1373,7 @@ <h2 id="next-steps">Next Steps</h2>
 
 
 
-	<div class="text-muted mt-5 pt-3 border-top">Last modified July 8, 2020: <a  href="https://github.com/GoogleContainerTools/kpt/commit/c25d76e8b1975dd7d3c348f35744879f469a8c7f">Address review comments (c25d76e8)</a>
+	<div class="text-muted mt-5 pt-3 border-top">Last modified July 9, 2020: <a  href="https://github.com/GoogleContainerTools/kpt/commit/28c3a7d06e946ec5c888b8de44601f923cc599a4">Inline multiple kpt functions in quickstart (28c3a7d0)</a>
 </div>
 </div>
 

diff --git a/docs/sitemap.xml b/docs/sitemap.xml
@@ -234,7 +234,7 @@
 
   <url>
     <loc>https://googlecontainertools.github.io/kpt/guides/producer/functions/ts/quickstart/</loc>
-    <lastmod>2020-07-08T17:01:24-04:00</lastmod>
+    <lastmod>2020-07-09T15:16:06-04:00</lastmod>
   </url>
 
   <url>