Implemented the new experience

asciinema/README.md

+This directory includes the configuration for rendering the asciinema
+panel in the tekton.dev homepage.
+
+A rendered panel (an asciinema cast) has been included at
+`../static/asciinema/demo.cast`. To rebuild the cast, run the commands below:
+
+```bash
+./run.sh
+rm -f ../static/asciinema/demo.cast
+mv ./demo.cast ../static/asciinema/demo.cast
+```

asciinema/pipeline.yaml

+apiVersion: tekton.dev/v1alpha1
+kind: Pipeline
+metadata:
+  name: build-go-app-pipeline
+spec:
+  ...
+  tasks:
+    - name: build-go-app-task
+      taskRef:
+        name: build-go-app-task
+      ...
\ No newline at end of file

asciinema/run.sh

+rm -f demo.cast
+asciinema rec demo.cast -c "./scenario.sh"
\ No newline at end of file

asciinema/scenario.sh

+echo "# See Tekton in action!" | pv -qL 12
+echo "# Tekton is available as Kubernetes Custom Resource Definitions " | pv -qL 12
+echo "# (CRD) that you can install in your Kubernetes cluster" | pv -qL 12
+echo '# And it uses container images to perform operations in your ' | pv -qL 12
+echo '# CI/CD pipeline' | pv -qL 12
+echo "# Let's say you would like to compile a Go program with Tekton" | pv -qL 12
+echo '# First, write a Tekton task:' | pv -qL 12
+echo 'cat task.yaml' | pv -qL 12
+cat task.yaml | lolcat
+echo ''
+echo '------------------------' | pv -qL 6
+echo '# And apply it to your Kubernetes cluster:' | pv -qL 12
+echo 'kubectl apply -f task.yaml' | pv -qL 12
+echo '# Next, organize your task into a Tekton pipeline:' | pv -qL 12
+echo 'cat pipeline.yaml' | pv -qL 12
+cat pipeline.yaml | lolcat
+echo ''
+echo '------------------------' | pv -qL 6
+echo '# And apply it to your Kubernetes cluster as well:' | pv -qL 12
+echo 'kubectl apply -f pipeline.yaml' | pv -qL 12
+echo '# And it is done :)' | pv -qL 12
+echo '# You can run your pipeline manually, or trigger it every time an ' | pv -qL 12
+echo '# event arrives, such as one from a GitHub wekbook' | pv -qL 12
+echo '# Tekton has a dashboard and a CLI as well' | pv -qL 12
+echo '# Learn more about Tekton at ' | pv -qL 12
+echo '# tekton.dev/docs' | cat | pv -qL 12 | lolcat
+echo '# or play with one of our interactive tutorials at ' | pv -qL 12
+echo '# tekton.dev/try' | cat | pv -qL 12 | lolcat
\ No newline at end of file

asciinema/task.yaml

+apiVersion: tekton.dev/v1alpha1
+kind: Task
+metadata:
+  name: build-go-app-task
+spec:
+  inputs:
+    # Some inputs, such as your GitHub repository
+    ...
+  steps:
+  - name: build
+    image: golang
+    command:
+    - go
+    - build
+    args:
+    - /workspace/myapp
\ No newline at end of file

assets/js/playground.js

+function getKatacodaLnk (katacodaSrc) {
+  const elems = katacodaSrc.split('/');
+  return `${elems[0]}/scenarios/${elems[1]}`;
+}
+
+function openModal () {
+  const modal = document.getElementById('tutorialModal');
+  const katacodaSrc = modal.getAttribute('data-katacoda-src');
+  const katacodaLnk = getKatacodaLnk(katacodaSrc);
+  const githubLnk = modal.getAttribute('data-github-src');
+  const qwiklabsLnk = modal.getAttribute('data-qwiklabs-src');
+
+  modal.classList.add('show');
+  modal.setAttribute('style', 'display: block;');
+  document.getElementsByClassName('td-section')[0].classList.add('modal-open');
+  const backdrop = document.createElement('div');
+  backdrop.classList.add('modal-backdrop', 'fade', 'show');
+  document.getElementsByTagName('body')[0].appendChild(backdrop);
+  document.getElementById('katacoda-button').setAttribute('href', `https://katacoda.com/${katacodaLnk}`);
+  document.getElementById('github-button').setAttribute('href', `https://github.com/${githubLnk}`);
+  document.getElementById('qwiklabs-button').setAttribute('href', `https://qwiklabs.com/${qwiklabsLnk}`);
+
+  const scenario = document.getElementById('embedded-katacoda-scenario');
+  const katacodaCanvasNode = document.createElement('div');
+  katacodaCanvasNode.setAttribute('id', 'katacoda-scenario');
+  katacodaCanvasNode.setAttribute('data-katacoda-id', katacodaSrc);
+  katacodaCanvasNode.setAttribute('data-katacoda-color', '004d7f');
+  katacodaCanvasNode.setAttribute('style', 'height: 900px; padding-top: 20px;');
+  const katacodaScriptNode = document.createElement('script');
+  katacodaScriptNode.setAttribute('id', 'katacoda-scenario-script');
+  katacodaScriptNode.setAttribute('src', '//katacoda.com/embed.js');
+  scenario.appendChild(katacodaCanvasNode);
+  scenario.appendChild(katacodaScriptNode);
+}
+
+function closeModal () {
+  const modal = document.getElementById('tutorialModal');
+
+  document.getElementById('embedded-katacoda-scenario').removeChild(
+    document.getElementById('katacoda-scenario')
+  );
+  document.getElementById('embedded-katacoda-scenario').removeChild(
+    document.getElementById('katacoda-scenario-script')
+  );
+  modal.classList.remove('show');
+  modal.setAttribute('style', 'display: none;');
+  document.getElementsByClassName('td-section')[0].classList.remove('modal-open');
+  const backdrop = document.getElementsByClassName('modal-backdrop')[0];
+  document.getElementsByTagName('body')[0].removeChild(backdrop);
+  document.getElementById('katacoda-button').removeAttribute('href');
+  document.getElementById('github-button').removeAttribute('href');
+  document.getElementById('qwiklabs-button').removeAttribute('href');
+}

assets/js/tabs.js

+$('.tab-content').find('.tab-pane').each(function (idx, item) {
+  var navTabs = $(this).closest('.code-tabs').find('.nav-tabs');
+  var title = $(this).attr('title');
+  navTabs.append('<li class="nav-tab"><a href="#" class="nav-tab">'+title+'</a></li');
+});
+
+$('.code-tabs ul.nav-tabs').each(function () {
+  $(this).find("li:first").addClass('active');
+})
+
+$('.code-tabs .tab-content').each(function () {
+  $(this).find("div:first").addClass('active');
+});
+
+$('.nav-tabs a').click(function (e) {
+  e.preventDefault();
+  var tab = $(this).parent();
+  var tabIndex = tab.index();
+  var tabPanel = $(this).closest('.code-tabs');
+  var tabPane = tabPanel.find('.tab-pane').eq(tabIndex);
+  tabPanel.find('.active').removeClass('active');
+  tab.addClass('active');
+  tabPane.addClass('active');
+});

assets/js/try.js

+function getKatacodaLnk (katacodaSrc) {
+  const elems = katacodaSrc.split('/');
+  return `${elems[0]}/scenarios/${elems[1]}`;
+}
+
+function openModal (article) {
+  const katacodaSrc = article.getAttribute('data-katacoda-src');
+  const katacodaLnk = getKatacodaLnk(katacodaSrc);
+  const githubLnk = article.getAttribute('data-github-src');
+  const qwiklabsLnk = article.getAttribute('data-qwiklabs-src');
+
+  document.getElementById('modal').classList.add('is-active');
+  document.getElementById('katacoda-button').setAttribute('href', `https://katacoda.com/${katacodaLnk}`);
+  document.getElementById('github-button').setAttribute('href', `https://github.com/${githubLnk}`);
+  document.getElementById('qwiklabs-button').setAttribute('href', `https://qwiklabs.com/${qwiklabsLnk}`);
+
+  const scenario = document.getElementById('embedded-katacoda-scenario');
+  const katacodaCanvasNode = document.createElement('div');
+  katacodaCanvasNode.setAttribute('id', 'katacoda-scenario');
+  katacodaCanvasNode.setAttribute('data-katacoda-id', katacodaSrc);
+  katacodaCanvasNode.setAttribute('data-katacoda-color', '004d7f');
+  katacodaCanvasNode.setAttribute('style', 'height: 900px; padding-top: 20px;');
+  const katacodaScriptNode = document.createElement('script');
+  katacodaScriptNode.setAttribute('id', 'katacoda-scenario-script');
+  katacodaScriptNode.setAttribute('src', '//katacoda.com/embed.js');
+  scenario.appendChild(katacodaCanvasNode);
+  scenario.appendChild(katacodaScriptNode);
+}
+
+function closeModal () {
+  document.getElementById('embedded-katacoda-scenario').removeChild(
+    document.getElementById('katacoda-scenario')
+  );
+  document.getElementById('embedded-katacoda-scenario').removeChild(
+    document.getElementById('katacoda-scenario-script')
+  );
+  document.getElementById('modal').classList.remove('is-active');
+  document.getElementById('katacoda-button').removeAttribute('href');
+  document.getElementById('github-button').removeAttribute('href');
+  document.getElementById('qwiklabs-button').removeAttribute('href');
+  document.getElementById('message').classList.remove('is-hidden');
+}
+
+function closeNote () {
+  document.getElementById('message').classList.add('is-hidden');
+}

assets/scss/_variables_project.scss

@@ -4,3 +4,7 @@ Add styles or override variables from the theme here.
 
 */
 
+$td-fonts-serif: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+$td-enable-google-fonts: false;
+$light: #ccc !default;
+$dark: #333 !default;

content/en/docs/CLI/_index.md

+---
+title: "CLI"
+linkTitle: "CLI"
+weight: 5
+description: >
+  Command-Line Interface
+---
+
+{{% pageinfo %}}
+This is a placeholder page for Tekton CLI documentation.
+
+Contents will be retrieved from the tektoncd/cli repository at
+the time of deployment.
+{{% /pageinfo %}}

content/en/docs/Catalog/_index.md

+---
+title: "Catalog"
+linkTitle: "Catalog"
+weight: 7
+description: >
+  Reusable Task and Pipeline Resources
+---
+
+{{% pageinfo %}}
+This is a placeholder page for Tekton Catalog documentation.
+
+Contents will be retrieved from the tektoncd/catalog repository at
+the time of deployment.
+{{% /pageinfo %}}

content/en/docs/Concepts/_index.md

+---
+title: "Concepts"
+linkTitle: "Concepts"
+weight: 2
+description: >
+  Technical Information and Architecture 
+---
+
+{{% pageinfo %}}
+This is a placeholder page for Tekton concepts.
+
+WIP.
+{{% /pageinfo %}}

content/en/docs/Dashboard/_index.md

+---
+title: "Dashboard"
+linkTitle: "Dashboard"
+weight: 6
+description: >
+  General-Purpose, Web-Based UI
+---
+
+{{% pageinfo %}}
+This is a placeholder page for Tekton Dashboard documentation.
+
+Contents will be retrieved from the tektoncd/dashboard repository at
+the time of deployment.
+{{% /pageinfo %}}

content/en/docs/Getting Started/_index.md

+---
+title: "Getting Started"
+linkTitle: "Getting Started"
+weight: 1
+description: >
+  Prerequisites, Installation, and Basic Usage
+---
+
+{{% pageinfo %}}
+WIP
+{{% /pageinfo %}}
+
+{{% tutorial name="Getting started with Tekton"
+             katacoda-src="ratrosyu/getting-started"
+             github-lnk="michaelawyu/tekton-examples/tree/master/getting-started"
+             qwiklabs-lnk="" %}}
+
+## Prerequisites
+
+{{% tabs %}}
+{{% tab "Kubernetes" %}}
+* A Kubernetes cluster with 1.11 or later releases installed.
+* Enable [Role-Based Access Control(RBAC)](https://kubernetes.io/docs/reference/access-authn-authz/rbac/)
+in the cluster.
+* Grant current user `cluster-admin` privileges.
+
+If you are using [Google Kubernetes Engine (GKE)](https://cloud.google.com/kubernetes-engine/),
+see [Kubernetes Engine Quickstart](https://cloud.google.com/kubernetes-engine/docs/quickstart)
+for instructions on setting up a Kubernetes cluster. **GKE clusters have RBAC
+enabled and persistent volumes available by default**; to grant current user 
+the required privilege, run the following command:
+
+```sh
+kubectl create clusterrolebinding cluster-admin-binding \
+                                  --clusterrole=cluster-admin \
+                                  --user=$(gcloud config get-value core/account)
+```
+
+For other cloud providers or Minikube installations, refer to their
+documentation for more information.
+{{% /tab %}}
+
+{{% tab "OpenShift" %}}
+* An OpenShift cluster with 3.11 or later releases installed.
+* Install the [OpenShift Container Platform CLI tool](https://docs.openshift.com/container-platform/3.11/cli_reference/get_started_cli.html#installing-the-cli).
+* Sign in as a user with `cluster-admin` privileges.
+
+    ```sh
+    # Example #1: sign in using the default `system:admin` user with an OpenShift cluster
+    oc login -u system:admin
+    # Example #2: sign in using the default `admin:admin` user with a MiniShift cluster
+    oc login -u admin:admin
+    ```
+
+{{% /tab %}}
+{{% /tabs %}}
+
+## Installation
+
+To install Tekton, run the command below:
+
+```sh
+kubectl apply --filename https://storage.googleapis.com/tekton-releases/pipeline/latest/release.yaml
+```
+
+{{% alert title="Note" color="success" %}}
+This command automatically installs the latest official release of Tekton. If
+you would like to install a previous version, use
+
+```
+kubectl apply --filename https://storage.googleapis.com/tekton-releases/pipeline/previous/YOUR-VERSION/release.yaml
+```
+
+Replace `YOUR-VERSION` with the release you prefer. [You can find the full list
+of official Tekton releases on GitHub](https://github.com/tektoncd/pipeline/releases). 
+
+Additionally, Tekton project pushes nightly releases every night to
+`gcr.io/tekton-nightly`. If you are feeling adventurous and would like to
+experiment with the most recent, unreleased code, see [Tekton Development Guide](https://github.com/tektoncd/pipeline/blob/master/DEVELOPMENT.md).
+{{% /alert %}}
+
+It may take a few moments before the installation completes. You can check
+the progress with the following command:
+
+```sh
+kubectl get pods --namespace tekton-pipelines
+```
+
+Confirm that every component listed has the status `Running`.
+
+### One last step
+
+To run a CI/CD workflow, you need to provide Tekton a [Persistent Volume](https://kubernetes.io/docs/concepts/storage/persistent-volumes/)
+for storage purposes. Tekton requests a volume of `5Gi` and
+the default storage class unless otherwise configured. **Your Kubernetes
+cluster, such as one from Google Kubernetes Engine, may have persistent volumes
+set up at the time of creation, thus no extra step is required**; if not, you
+may have to create them manually. Alternatively, you may ask Tekton
+to use a [Google Cloud Storage](https://cloud.google.com/storage) bucket
+or an [AWS Simple Storage Service (Amazon S3)](https://aws.amazon.com/s3/)
+bucket instead. Note that the performance of Tekton may vary depending on
+the storage option you choose.
+
+{{% alert title="Note" color="success" %}}
+You can check available persistent volumes and storage classes with the
+commands below:
+
+```
+kubectl get pv
+kubectl get storageclasses
+```
+{{% /alert %}}
+
+These storage options can be configured using [`ConfigMap`](https://kubernetes.io/docs/tasks/configure-pod-container/configure-pod-configmap/)s:
+
+{{% tabs %}}
+{{% tab "Persistent Volumes" %}}
+If you would like to configure the size and storage class of the Persistent
+Volume Tekton requests, update the default `config-artifact-pvc` `configMap`.
+This `configMap` includes two attributes:
+
+* `size`: the size of the volume
+* `storageClassName`: the name of the storage class of the volume
+
+The following example asks Tekton to request a Persistent Volume of `10Gi` and
+the `manual` storage class instead of the default one:
+
+```
+kubectl create configmap config-artifact-pvc \
+                         --from-literal=size=10Gi \
+                         --from-literal=storageClassName=manual \
+                         -o yaml -n tekton-pipelines | kubectl replace -f -
+```
+{{% /tab %}}
+
+{{% tab "Buckets" %}}
+If you would like to use Google Cloud Storage or AWS S3 buckets instead,
+remove the default `config-artifact-pvc` `configMap` and create another
+one of the name `config-artifact-bucket`. This `configMap` includes the
+following attributes:
+
+* `location`: the address of the bucket, such as `gs://my-gcs-bucket/`
+* (?)
+{{% /tab %}}
+{{% /tabs %}}
+
+Also, Tekton uses the default service account in your Kubernetes cluster
+unless otherwise configured; if you would like to override this option,
+update the `default-service-account` attribute of the `ConfigMap`
+`config-defaults`:
+
+```
+kubectl create configmap config-defaults \
+                         --from-literal=default-service-account=YOUR-SERVICE-ACCOUNT \
+                         -o yaml -n tekton-pipelines | kubectl replace -f -
+```
+
+## What's next
+
+Now you have the core component of Tekton, Tekton Pipelines, installed on
+your Kubernetes/OpenShift cluster. If you would like to install more
+components, see the list below:
+
+[WIP]
+
+Learn more about Tekton in [Concepts](/docs/concepts/).

content/en/docs/Pipelines/_index.md

+---
+title: "Tasks and Pipelines"
+linkTitle: "Tasks and Pipelines"
+weight: 3
+description: >
+  Building Blocks of Tekton CI/CD Workflow
+---
+
+{{% pageinfo %}}
+This is a placeholder page for Tekton Tasks and Pipelines documentation.
+
+Contents will be retrieved from the tektoncd/pipeline repository at
+the time of deployment.
+{{% /pageinfo %}}

content/en/docs/Triggers/_index.md

+---
+title: "Triggers"
+linkTitle: "Triggers"
+weight: 4
+description: >
+  Event Triggers
+---
+
+{{% pageinfo %}}
+This is a placeholder page for Tekton Triggers documentation.
+
+Contents will be retrieved from the tektoncd/triggers repository at
+the time of deployment.
+{{% /pageinfo %}}

content/en/docs/_index.md

 
 ---
-title: "Documentation"
+title: "Tekton Documentation"
 linkTitle: "Documentation"
 weight: 20
 menu:
@@ -8,6 +8,35 @@ menu:
     weight: 20
 ---
 
-{{% pageinfo %}}
-This is a placeholder page for future Tekton documentation.
-{{% /pageinfo %}}
+Tekton is a Kubernetes-native continuous integration and delivery (CI/CD)
+solution. It allows developers to build, test, and deploy across cloud
+providers and on-premise systems.
+
+### Features
+
+* **Standardized CI/CD tooling**: Tekton provides open-source components
+so that your CI/CD workflow functions across vendors, languages, and
+environments. Tekton artifacts, such as specifications for pipelines and
+triggers, work well with Jenkins/Jenkins X, Skaffold, Knative, and
+many other popular CI/CD tools.
+* **Built-in Best Practices**: With Tekton, you can create cloud-native
+CI/CD workflows as quickly as possible. Tekton makes it easy to manage
+versions, perform rollbacks, and leverage advanced deployment patterns like
+rolling, blue/green, canary, and GitOps.
+* **Maximum Flexibility**: You can use Tekton to build, test, and deploy
+across multiple environments, including VMs, serverless platforms,
+Kubernetes clusters, and Firebase projects. Hybrid environments are also
+supported. Since Tekton abstracts the underlying implementation away,
+you and your team can experiment with workflows and switch configurations
+as you see fit.
+
+### What's next
+
+To get started, read the contents below. 
+
+{{% alert title="Note" color="success" %}}
+
+Tekton provides a nunmber of interactive tutorials at [try.tekton.dev](/try)
+for developers to get hands-on experience with the project.
+
+{{% /alert %}}

content/en/try/_index.md

+---
+title: "Try Tekton"
+linkTitle: "Try"
+menu:
+  main:
+    weight: 30
+---
+
+
+

helper/README.md

+This directory includes a helper script for synchronizing contents
+from specified Tekton repositories to this repository.
+
+To run this script locally, set up a Python 3 environment with appropriate
+Google Cloud Platform credentials, and execute the following command:
+
+```bash
+cd ..
+pip install -r helper/requirements.txt
+python helper/helper.py
+```

helper/helper.py

+# This script helps synchronize contents from their respective sources of
+# truth (usually GitHub repositories of each Tekton
+# components, such as tektoncd/pipelines) to tektoncd/website.
+
+import json
+import os
+import shutil
+
+from google.cloud import storage
+from jinja2 import Environment, FileSystemLoader
+import wget
+from yaml import load, Loader
+
+
+CONTENT_DIR = './content/en/docs'
+JS_ASSET_DIR = './assets/js'
+SYNC_DIR = './sync'
+TEMPLATE_DIR = './templates'
+VAULT_DIR = './content/en/vault'
+BUCKET_NAME = 'tekton-website-assets'
+
+
+gcs_client = storage.Client()
+gcs_bucket = gcs_client.get_bucket(BUCKET_NAME)
+jinja_env = Environment(loader=FileSystemLoader(TEMPLATE_DIR))
+
+
+def retrieve_files(url_prefix, dest_prefix, files):
+    if os.path.isdir(dest_prefix):
+        shutil.rmtree(dest_prefix)
+    os.mkdir(dest_prefix)
+    for f in files:
+        for k in f:
+            src_url = f'{url_prefix}/{k}'
+            dest_path = f'{dest_prefix}/{f[k]}'
+            print(f'Downloading file (from {src_url} to {dest_path}).\n')
+            wget.download(src_url, out=dest_path)
+            print('\n')
+
+
+def verify_name_format(word):
+    pass
+
+
+def remove_ending_forward_slash(word):
+    return word[:-1] if word.endswith('/') else word
+
+
+def sync(sync_config):
+    component = sync_config['component']
+    repository = remove_ending_forward_slash(sync_config['repository'])
+    doc_directory = remove_ending_forward_slash(sync_config['docDirectory'])
+    tags = sync_config['tags']
+
+    # Get the latest version of contents
+    url_prefix = f'{repository}/raw/{tags[0]["name"]}/{doc_directory}'
+    dest_prefix = f'{CONTENT_DIR}/{component}'
+    files = tags[0]['files']
+    print(f'Retrieving the latest version ({tags[0]["displayName"]}) of Tekton {component} documentation (from {url_prefix} to {dest_prefix}).\n')
+    retrieve_files(url_prefix, dest_prefix, files)
+
+    # Get the previous versions of contents
+    for tag in tags[1:]:
+        url_prefix = f'{repository}/raw/{tag["name"]}/{doc_directory}'
+        dest_prefix = f'{VAULT_DIR}/{component}-{tag["displayName"]}'
+        files = tag['files']
+        print(f'Retrieving version {tag["displayName"]} of Tekton {component} documentation (from {url_prefix} to {dest_prefix}).\n')
+        retrieve_files(url_prefix, dest_prefix, files)
+
+
+def get_component_versions(sync_configs):
+    component_versions = []
+    for sync_config in sync_configs:
+        component_versions.append({
+            'name': sync_config['component'],
+            'tags': [ {'name': tag['name'], 'displayName': tag['displayName']} for tag in sync_config['tags'] ],
+            'archive': sync_config['archive']
+        })
+    return component_versions
+
+
+def prepare_version_switcher_script(component_versions):
+    script_template = jinja_env.get_template('version-switcher.js.template')
+    script = script_template.render(component_versions_json=json.dumps(component_versions))
+    with open(f'{JS_ASSET_DIR}/version-switcher.js', 'w') as f:
+        f.write(script)
+
+
+def prepare_vault_landing_page(component_versions):
+    md_template = jinja_env.get_template('_index.md.template')
+    md = md_template.render(component_versions=component_versions)
+    with open(f'{VAULT_DIR}/_index.md', 'w') as f:
+        f.write(md)
+
+
+def download_background_image():
+    blob = gcs_bucket.blob('featured-background.jpeg')
+    blob.download_to_filename('./content/en/featured-background.jpeg')
+
+
+def scan(dir_path):
+    entries = os.scandir(dir_path)
+    sync_config_paths = []
+    for entry in entries:
+        if entry.name.endswith('.yaml'):
+            sync_config_paths.append(entry.path)
+        elif entry.is_dir():
+            scan(entry.path)
+    
+    return sync_config_paths
+
+if __name__ == '__main__':
+    sync_config_paths = scan(f'./{SYNC_DIR}')
+    sync_configs = []
+    for sync_config_path in sync_config_paths:
+        with open(sync_config_path) as f:
+            sync_config = load(f, Loader=Loader)
+        sync_configs.append(sync_config)
+        sync(sync_config)
+    sync_configs.sort(key=lambda x: x['displayOrder'])
+    component_versions = get_component_versions(sync_configs)
+    prepare_version_switcher_script(component_versions)
+    prepare_vault_landing_page(component_versions)
+    download_background_image()

helper/requirements.txt

+wget==3.2
+PyYAML==5.1.2
+google-cloud-storage==1.23.0

k8s/README.md

+This directory includes the Kubernetes configuration for deploying this
+website, which uses Tekton to:
+
+- Clone the website from the tektoncd/website repository
+- Synchronizes contents from specified Tekton repositories
+- Build the website with Hugo
+- Deploys thew website via Firebase

k8s/git.yaml

+apiVersion: tekton.dev/v1alpha1
+kind: PipelineResource
+metadata:
+  name: tekton-website
+spec:
+  type: git
+  params:
+  - name: revision
+    value: master
+  - name: url
+    value: https://github.com/tektoncd/website
+

k8s/pipeline.yaml

+apiVersion: tekton.dev/v1alpha1
+kind: Pipeline
+metadata:
+  name: build-deploy-website-pipeline
+spec:
+  resources:
+    - name: tekton-website
+      type: git
+  tasks:
+    - name: build-deploy-website-task
+      taskRef:
+        name: build-deploy-website-task
+      resources:
+        inputs:
+          - name: tekton-website
+            resource: tekton-website

k8s/pipelineRun.yaml

+apiVersion: tekton.dev/v1alpha1
+kind: PipelineRun
+metadata:
+  name: build-deploy-website-run
+spec:
+  pipelineRef:
+    name: build-deploy-website-pipeline
+  resources:
+  - name: tekton-website
+    resourceRef:
+      name: tekton-website

k8s/task.yaml

+apiVersion: tekton.dev/v1alpha1
+kind: Task
+metadata:
+  name: build-deploy-website-task
+spec:
+  inputs:
+    resources:
+      - name: tekton-website
+        type: git
+  steps:
+    - name: run-helper-script
+      image: "python:3.7.5"
+      command:
+        - /bin/bash
+        - -c
+      args:
+        - cd /workspace/tekton-website && pip install -r helper/requirements.txt && python helper/helper.py
+    - name: build-static-site
+      image: "jguyomard/hugo-builder"
+      command:
+        - hugo
+      args:
+        - -s
+        - /workspace/tekton-website
+    - name: deploy-firebase
+      image: devillex/docker-firebase
+      command:
+        - /bin/bash
+        - -c
+      args:
+        - cd /workspace/tekton-website && firebase deploy --project $(cat /etc/secrets/project) --token $(cat /etc/secrets/token)
+      volumeMounts:
+        - name: secret
+          mountPath: "/etc/secrets"
+  volumes:
+    - name: secret
+      secret:
+        secretName: firebase-secrets
+

layouts/404.html

@@ -2,9 +2,7 @@
     <main id="main">
       <div>
        <h1 id="title">Not found</h1>
-       <p>Oops! This page doesn't exist. Try going back to our <a href="{{ "/" | relURL }}">home page</a>.</p>
-
-       <p>You can learn how to make a 404 page like this in <a href="https://gohugo.io/templates/404/">Custom 404 Pages</a>.</p>      
+        <p>Oops! This page doesn't exist. Try going back to our <a href="{{ "/" | relURL }}">home page</a>.</p>
       </div>
     </main>
 {{ end }}

layouts/_default/baseof.html

+<!doctype html>
+<html lang="{{ .Site.Language.Lang }}" class="no-js">
+  <head>
+    {{ partial "head.html" . }}
+    {{ if eq .Kind "home" }}
+    {{ $cssAsciinema := "css/asciinema-player.css" }}
+    {{ $cssAsciinema := resources.Get $cssAsciinema | toCSS (dict "enableSourceMap" false) | postCSS | minify | fingerprint }}
+    <link href="{{ $cssAsciinema.RelPermalink }}" rel="stylesheet" integrity="{{ $cssAsciinema.Data.integrity }}">
+    {{ end }}
+  </head>
+  <body class="td-{{ .Kind }}">
+    <header>
+      {{ partial "navbar.html" . }}
+    </header>
+    <div class="container-fluid td-default td-outer">
+      <main role="main" class="td-main">
+        {{ block "main" . }}{{ end }}
+      </main>
+      {{ partial "footer.html" . }}
+    </div>
+    {{ partialCached "scripts.html" . }}
+  </body>
+</html>

layouts/docs/baseof.html

+<!doctype html>
+<html lang="{{ .Site.Language.Lang }}" class="no-js">
+  <head>
+    {{ partial "head.html" . }}
+  </head>
+  <body class="td-{{ .Kind }}">
+    <header>
+      {{ partial "navbar-docs.html" . }}
+    </header>
+    <div class="container-fluid td-outer">
+      <div class="td-main">
+        <div class="row flex-xl-nowrap">
+          <div class="col-12 col-md-3 col-xl-2 td-sidebar d-print-none">
+            {{ partial "sidebar.html" . }}
+          </div>
+          <div class="d-none d-xl-block col-xl-2 td-toc d-print-none">
+            {{ partial "toc.html" . }}
+          </div>
+          <main class="col-12 col-md-9 col-xl-8 pl-md-5" role="main">
+            {{ if not .Site.Params.ui.breadcrumb_disable }}{{ partial "breadcrumb.html" . }}{{ end }}
+            {{ block "main" . }}{{ end }}
+          </main>
+        </div>
+      </div>
+      {{ partial "footer.html" . }}
+    </div>
+    {{ partial "scripts.html" . }}
+  </body>
+</html>

layouts/partials/head-css.html

+
+{{ $scssMain := "scss/main.scss" }}
+{{ if .Site.IsServer }}
+{{/* Note the missing postCSS. This makes it snappier to develop in Chrome, but makes it look sub-optimal in other browsers. */}}
+{{ $cssMain := resources.Get $scssMain | toCSS (dict "enableSourceMap" true) }}
+<link href="{{ $cssMain.RelPermalink }}" rel="stylesheet">
+{{ else }}
+{{ $cssMain := resources.Get $scssMain | toCSS (dict "enableSourceMap" false) | postCSS | minify | fingerprint }}
+<link rel="preload" href="{{ $cssMain.RelPermalink }}" as="style">
+<link href="{{ $cssMain.RelPermalink }}" rel="stylesheet" integrity="{{ $cssMain.Data.integrity }}">
+{{ end }}
+<link href="/stylesheets/tabs.css" rel="stylesheet">

layouts/partials/head.html

+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+{{ hugo.Generator }}
+{{ if eq (getenv "HUGO_ENV") "production" }}
+<META NAME="ROBOTS" CONTENT="INDEX, FOLLOW">
+{{ else }}
+<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
+{{ end }}
+{{ range .AlternativeOutputFormats -}}
+<link rel="{{ .Rel }}" type="{{ .MediaType.Type }}" href="{{ .Permalink | safeURL }}">
+{{ end -}}
+{{ partialCached "favicons.html" . }}
+<title>{{ if .IsHome }}{{ .Title }}{{ else }}{{ with .Title }}{{ . }} | {{ end }}Tekton{{ end }}</title>
+{{- template "_internal/opengraph.html" . -}}
+{{- template "_internal/google_news.html" . -}}
+{{- template "_internal/schema.html" . -}}
+{{- template "_internal/twitter_cards.html" . -}}
+{{ if eq (getenv "HUGO_ENV") "production" }}
+{{ template "_internal/google_analytics_async.html" . }}
+{{ end }}
+{{ partialCached "head-css.html" . "asdf" }}
+<script
+  src="https://code.jquery.com/jquery-3.3.1.min.js"
+  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
+  crossorigin="anonymous"></script>
+{{ partial "hooks/head-end.html" . }}

layouts/partials/navbar-docs.html

+{{ $cover := .HasShortcode "blocks/cover" }}
+<nav class="js-navbar-scroll navbar navbar-expand navbar-dark bg-dark {{ if $cover}} td-navbar-cover {{ end }}flex-column flex-md-row td-navbar">
+        <a class="navbar-brand" href="{{ .Site.Home.RelPermalink }}">
+		<span class="navbar-logo">{{ if .Site.Params.ui.navbar_logo }}{{ with resources.Get "icons/logo.svg" }}{{ ( . | minify).Content | safeHTML }}{{ end }}{{ end }}</span>
+	</a>
+	<div class="td-navbar-nav-scroll ml-md-auto" id="main_navbar">
+		<ul class="navbar-nav mt-2 mt-lg-0">
+            {{ $p := . }}
+            {{ partial "navbar-version-selector-docs.html" . }}
+            {{ range .Site.Menus.main }}
+			<li class="nav-item mr-4 mb-2 mb-lg-0">
+				{{ $active := or ($p.IsMenuCurrent "main" .) ($p.HasMenuCurrent "main" .) }}
+				{{ with .Page }}
+				{{ $active = or $active ( $.IsDescendant .)  }}
+				{{ end }}
+				{{ $url := urls.Parse .URL }}
+                {{ $baseurl := urls.Parse $.Site.Params.Baseurl }}
+                {{ if ne .Name "Documentation" }}
+                <a class="nav-link{{if $active }} active{{end}}" href="{{ with .Page }}{{ .RelPermalink }}{{ else }}{{ .URL | relLangURL }}{{ end }}" {{ if ne $url.Host $baseurl.Host }}target="_blank" {{ end }}><span{{if $active }} class="active"{{end}}>{{ .Name }}</span></a>
+                {{ end }}
+			</li>
+			{{ end }}
+			{{ if  (gt (len .Site.Home.Translations) 0) }}
+			<li class="nav-item dropdown d-none d-lg-block">
+				{{ partial "navbar-lang-selector.html" . }}
+			</li>
+			{{ end }}
+		</ul>
+	</div>
+</nav>

layouts/partials/navbar-vault.html

+{{ $cover := .HasShortcode "blocks/cover" }}
+<nav class="js-navbar-scroll navbar navbar-expand navbar-dark bg-dark {{ if $cover}} td-navbar-cover {{ end }}flex-column flex-md-row td-navbar">
+        <a class="navbar-brand" href="{{ .Site.Home.RelPermalink }}">
+		<span class="navbar-logo">{{ if .Site.Params.ui.navbar_logo }}{{ with resources.Get "icons/logo.svg" }}{{ ( . | minify).Content | safeHTML }}{{ end }}{{ end }}</span>
+	</a>
+	<div class="td-navbar-nav-scroll ml-md-auto" id="main_navbar">
+		<ul class="navbar-nav mt-2 mt-lg-0">
+			{{ $p := . }}
+			{{ if ne .LinkTitle "Vault" }}
+			{{ partial "navbar-version-selector-vault.html" . }}
+			{{ end }}
+            {{ range .Site.Menus.main }}
+			<li class="nav-item mr-4 mb-2 mb-lg-0">
+				{{ $active := or ($p.IsMenuCurrent "main" .) ($p.HasMenuCurrent "main" .) }}
+				{{ with .Page }}
+				{{ $active = or $active ( $.IsDescendant .)  }}
+				{{ end }}
+				{{ $url := urls.Parse .URL }}
+                {{ $baseurl := urls.Parse $.Site.Params.Baseurl }}
+                {{ if and (ne .Name "Documentation") (ne .Name "Try") }}
+                <a class="nav-link{{if $active }} active{{end}}" href="{{ with .Page }}{{ .RelPermalink }}{{ else }}{{ .URL | relLangURL }}{{ end }}" {{ if ne $url.Host $baseurl.Host }}target="_blank" {{ end }}><span{{if $active }} class="active"{{end}}>{{ .Name }}</span></a>
+                {{ end }}
+			</li>
+			{{ end }}
+			{{ if  (gt (len .Site.Home.Translations) 0) }}
+			<li class="nav-item dropdown d-none d-lg-block">
+				{{ partial "navbar-lang-selector.html" . }}
+			</li>
+			{{ end }}
+		</ul>
+	</div>
+</nav>

layouts/partials/navbar-version-selector-docs.html

+{{ $jsVerSwitcher := resources.Get "js/version-switcher.js" }}
+{{ $jsVerSwitcher := $jsVerSwitcher | fingerprint }}
+<script src="{{ $jsVerSwitcher.RelPermalink }}" integrity="{{ $jsVerSwitcher.Data.Integrity }}"></script>
+<li class="nav-item dropdown d-none d-lg-block">
+    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+        Latest Releases
+    </a>
+    <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
+        <div class="dropdown-item disabled">
+            <p class="mb-0">You are viewing the documentation of the</p>
+            <p class="mb-0">lastest releases of Tekton components.</p>
+        </div>
+        <form id="version-announcer"></form>
+        <div class="dropdown-divider"></div>
+        <h6 class="dropdown-header">Previous Releases</h6>
+        <form id="previous-releases-form"></form>
+    </div>
+</li>
+<script>setMainVersionSwitcher();</script>
\ No newline at end of file

layouts/partials/navbar-version-selector-vault.html

+{{ $jsVerSwitcher := resources.Get "js/version-switcher.js" }}
+{{ $jsVerSwitcher := $jsVerSwitcher | minify | fingerprint }}
+<script src="{{ $jsVerSwitcher.RelPermalink }}" integrity="{{ $jsVerSwitcher.Data.Integrity }}"></script>
+<li class="nav-item dropdown d-none d-lg-block">
+    <a id='current-location-announcer' class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+        Pipelines v0.7.x
+    </a>
+    <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
+        <div class="dropdown-item disabled">
+            <p class="mb-0">You are viewing the documentation of</p>
+            <p id='current-location-announcer-text' class="mb-0" style="color: rgb(55, 114, 255);">Placeholder.</p>
+        </div>
+        <div class="dropdown-divider"></div>
+        <h6 class="dropdown-header">Other Versions</h6>
+        <form id='other-versions-form'></form>
+        <div class="dropdown-divider"></div>
+        <h6 class="dropdown-header">Other Tekton Components</h6>
+        <form id="other-components-form"></form>
+    </div>
+</li>
+<script>setVaultVersionSwitcher();</script>
\ No newline at end of file

layouts/partials/navbar.html

+{{ $cover := .HasShortcode "blocks/cover" }}
+<nav class="js-navbar-scroll navbar navbar-expand navbar-dark bg-dark {{ if $cover}} td-navbar-cover {{ end }}flex-column flex-md-row td-navbar">
+        <a class="navbar-brand" href="{{ .Site.Home.RelPermalink }}">
+		<span class="navbar-logo">{{ if .Site.Params.ui.navbar_logo }}{{ with resources.Get "icons/logo.svg" }}{{ ( . | minify).Content | safeHTML }}{{ end }}{{ end }}</span>
+	</a>
+	<div class="td-navbar-nav-scroll ml-md-auto" id="main_navbar">
+		<ul class="navbar-nav mt-2 mt-lg-0">
+			{{ $p := . }}
+			{{ range .Site.Menus.main }}
+			<li class="nav-item mr-4 mb-2 mb-lg-0">
+				{{ $active := or ($p.IsMenuCurrent "main" .) ($p.HasMenuCurrent "main" .) }}
+				{{ with .Page }}
+				{{ $active = or $active ( $.IsDescendant .)  }}
+				{{ end }}
+				{{ $url := urls.Parse .URL }}
+				{{ $baseurl := urls.Parse $.Site.Params.Baseurl }}
+				<a class="nav-link{{if $active }} active{{end}}" href="{{ with .Page }}{{ .RelPermalink }}{{ else }}{{ .URL | relLangURL }}{{ end }}" {{ if ne $url.Host $baseurl.Host }}target="_blank" {{ end }}><span{{if $active }} class="active"{{end}}>{{ .Name }}</span></a>
+			</li>
+			{{ end }}
+			{{ if  .Site.Params.versions }}
+			<li class="nav-item dropdown d-none d-lg-block">
+				{{ partial "navbar-version-selector.html" . }}
+			</li>
+			{{ end }}
+			{{ if  (gt (len .Site.Home.Translations) 0) }}
+			<li class="nav-item dropdown d-none d-lg-block">
+				{{ partial "navbar-lang-selector.html" . }}
+			</li>
+			{{ end }}
+		</ul>
+	</div>
+	<div class="navbar-nav d-none d-lg-block">{{ partial "search-input.html" . }}</div>
+</nav>

layouts/partials/scripts.html

+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
+<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
+{{ $jsBase := resources.Get "js/base.js" }}
+{{ $jsSearch := resources.Get "js/search.js" | resources.ExecuteAsTemplate "js/search.js" .Site.Home }}
+{{ $js := (slice $jsBase $jsSearch) | resources.Concat "js/main.js" }}
+{{ if .Site.IsServer }}
+<script src="{{ $js.RelPermalink }}"></script>
+{{ else }}
+{{ $js := $js | minify | fingerprint }}
+<script src="{{ $js.RelPermalink }}" integrity="{{ $js.Data.Integrity }}"></script>
+{{ end }}
+{{ $jsPlayground := resources.Get "js/playground.js" }}
+{{ $jsPlayground := $jsPlayground | minify | fingerprint }}
+<script src="{{ $jsPlayground.RelPermalink }}"></script>
+{{ $jsTabs := resources.Get "js/tabs.js" }}
+{{ $jsTabs := $jsTabs | minify | fingerprint }}
+<script src="{{ $jsTabs.RelPermalink }}"></script>
+{{ partial "hooks/body-end.html" . }}

layouts/partials/sidebar-tree-vault.html

+{{/* We cache this partial for bigger sites and set the active class client side. */}}
+{{ $shouldDelayActive := ge (len .Site.Pages) 2000 }}
+<div id="td-sidebar-menu" class="td-sidebar__inner{{ if $shouldDelayActive }} d-none{{ end }}">
+  {{ if not .Site.Params.ui.sidebar_search_disable }}
+  <form class="td-sidebar__search d-flex align-items-center">
+    {{ partial "search-input.html" . }}
+    <button class="btn btn-link td-sidebar__toggle d-md-none p-0 ml-3 fas fa-bars" type="button" data-toggle="collapse" data-target="#td-section-nav" aria-controls="td-docs-nav" aria-expanded="false" aria-label="Toggle section navigation">
+    </button>
+  </form>
+  {{ end }}
+  <nav class="collapse td-sidebar-nav pt-2 pl-4" id="td-section-nav">
+    {{ if  (gt (len .Site.Home.Translations) 0) }}
+    <div class="nav-item dropdown d-block d-lg-none">
+      {{ partial "navbar-lang-selector.html" . }}
+    </div>
+    {{ end }}
+    {{ template "section-tree-nav-section-vault" (dict "page" . "section" .FirstSection "firstSection" .FirstSection "delayActive" $shouldDelayActive)  }}
+  </nav>
+</div>
+{{ define "section-tree-nav-section-vault" }}
+{{ $s := .section }}
+{{ $p := .page }}
+{{ $fs := .firstSection }}
+{{ $shouldDelayActive := .delayActive }}
+{{ $active := eq $p.CurrentSection $s }}
+{{ $show := or (and (not $p.Site.Params.ui.sidebar_menu_compact) ($p.IsAncestor $s)) ($p.IsDescendant $s) }}
+{{ $sid := $s.RelPermalink | anchorize }}
+{{ if eq $s $fs }}
+{{ range $s.Sections }}
+{{ template "section-tree-nav-section-vault" (dict "page" $p "section" . "firstSection" $fs) }}
+{{ end }}
+{{ else }}
+{{ if $p.IsDescendant $s }}
+<ul class="td-sidebar-nav__section pr-md-3">
+  <li class="td-sidebar-nav__section-title">
+    <a  href="{{ $s.RelPermalink }}" class="align-left pl-0 pr-2{{ if not $show }} collapsed{{ end }}{{ if $active}} active{{ end }} td-sidebar-link td-sidebar-link__section">{{ $s.LinkTitle }}</a>
+  </li>
+  <ul>
+    <li class="collapse {{ if $show }}show{{ end }}" id="{{ $sid }}">
+      {{ $pages := where (union $s.Pages $s.Sections).ByWeight ".Params.toc_hide" "!=" true }}
+      {{ $pages := $pages | first 50 }}
+      {{ range $pages }}
+      {{ if .IsPage }}
+      {{ $mid := printf "m-%s" (.RelPermalink | anchorize) }}
+      {{ $active := eq . $p }}
+      <a class="td-sidebar-link td-sidebar-link__page {{ if and (not $shouldDelayActive) $active }} active{{ end }}" id="{{ $mid }}" href="{{ .RelPermalink }}">{{ .LinkTitle }}</a>
+      {{ else }}
+      {{ template "section-tree-nav-section" (dict "page" $p "section" . "firstSection" $fs) }}
+      {{ end }}
+      {{ end }}
+    </li>
+  </ul>
+</ul>
+{{ else }}
+{{ end }}
+{{ end }}
+{{ end }}

layouts/partials/sidebar-vault.html

+{{/* The "active" toggle here may delay rendering, so we only cache this side bar menu for bigger sites. */}}
+{{ $shouldCache := ge (len .Site.Pages) 2000 }}
+{{ if $shouldCache }}
+{{ $mid := printf "m-%s" (.RelPermalink | anchorize) }}
+<script>
+ $(function() {
+ $("#td-sidebar-menu #{{ $mid }}").toggleClass("active"); 
+ $("#td-sidebar-menu").toggleClass("d-none"); 
+});
+</script>
+{{ partialCached "sidebar-tree-vault.html" . .CurrentSection.RelPermalink }}
+{{ else }}
+{{ partial "sidebar-tree-vault.html" . }}
+{{ end }}

layouts/shortcodes/blocks/cover.html

+{{ $_hugo_config := `{ "version": 1 }` }}
+{{ $blockID := printf "td-cover-block-%d" .Ordinal }}
+{{ $promo_image := (.Page.Resources.ByType "image").GetMatch "**background*" }}
+{{ $logo_image := (.Page.Resources.ByType "image").GetMatch "**logo*" }}
+{{ $col_id := .Get "color" | default "dark" }}
+{{ $image_anchor := .Get "image_anchor" | default "smart" }}
+{{ $logo_anchor := .Get "logo_anchor" | default "smart" }}
+{{/* Height can be one of: auto, min, med, max, full. */}}
+{{ $height := .Get "height" | default "max"  }}
+{{ with $promo_image }}
+{{ $promo_image_big := (.Fill (printf "1920x1080 %s" $image_anchor)) }}
+{{ $promo_image_small := (.Fill (printf "960x540 %s" $image_anchor)) }}
+<link rel="preload" as="image" href="{{ $promo_image_small.RelPermalink }}" media="(max-width: 1200px)">
+<link rel="preload" as="image" href="{{ $promo_image_big.RelPermalink }}" media="(min-width: 1200px)">
+<style>
+#{{ $blockID }} {
+    background-image: url({{ $promo_image_small.RelPermalink }}); 
+}
+@media only screen and (min-width: 1200px) {
+    #{{ $blockID }} {
+        background-image: url({{ $promo_image_big.RelPermalink }}); 
+    }
+}
+</style>
+{{ end }}
+<section id="{{ $blockID }}" class="row td-cover-block td-cover-block--height-{{ $height }} js-td-cover td-overlay td-overlay--dark -bg-{{ $col_id }}">
+  <div class="container td-overlay__inner">
+    <div class="row">
+      <div class="col-6">
+        <div class="text-left">
+          {{ with .Get "title" }}<h2 class="display-2 mt-0 mt-md-5 pb-4">{{ $title := . }}{{ with $logo_image }}{{ $logo_image_resized := (.Fit (printf "70x70 %s" $logo_anchor)) }}<img class="td-cover-logo" src="{{ $logo_image_resized.RelPermalink }}" alt="{{ $title | html }} Logo">{{ end }}{{ $title | html }}</h1>{{ end }}
+          {{ with .Get "subtitle" }}<p class="display-2 text-uppercase mb-0">{{ . | html }}</p>{{ end }}
+          <div class="pt-3 lead">
+            {{ .Inner | markdownify}}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>

layouts/shortcodes/blocks/manifesto.html

+{{ $_hugo_config := `{ "version": 1 }` }}
+{{ $col_id := .Get "color" | default .Ordinal }}
+{{ $height := .Get "height" | default "auto"  }}
+{{/* Height can be one of: auto, min, med, max, full. */}}
+<a id="td-block-{{ .Ordinal }}" class="td-offset-anchor"></a>
+<section class="row td-box td-box--{{ $col_id }} position-relative td-box--gradient td-box--height-{{ $height }}">
+	<div class="container" style="max-width: 600px;">
+		<div class="row">
+			<div class="col mb-5 text-center">
+				<a href="https://cd.foundation/"><img src="/partner-logos/cdf.png" class="img-fluid"></a>
+			</div>
+		</div>
+	</div>
+	<div class="container">
+		<div class="row">
+			<div class="col mb-5 text-center">
+				<h3>Tekton is a <a href="https://cd.foundation/">Continuous Delivery Foundation</a> project.</h3>
+			</div>
+		</div>
+  	</div>
+</section>

layouts/shortcodes/blocks/partners.html

+{{ $_hugo_config := `{ "version": 1 }` }}
+{{ $col_id := .Get "color" | default .Ordinal }}
+{{ $height := .Get "height" | default "auto"  }}
+{{ $type   := .Get "type" | default "" }} 
+<a id="td-block-{{ .Ordinal }}" class="td-offset-anchor"></a>
+<section class="row td-box td-box--{{ $col_id }} td-box--gradient td-box--height-{{ $height }}">
+	<div class="col">
+		<div class="row {{ $type }} pb-2">
+			<div class="col-lg-4 text-center"></div>
+			<div class="col-lg-4 text-center"><h3 style="color: rgba(255, 255, 255, 0.5);">created by</h3></div>
+			<div class="col-lg-4 text-center"></div>
+		</div>
+		<div class="row {{ $type }} pb-5">
+			<div class="col-lg-4 text-center"></div>
+			<div class="col-lg-4 text-center"><img src="/partner-logos/google.png" class="border img-fluid shadow rounded" style="opacity: 0.9;"></div>
+			<div class="col-lg-4 text-center"></div>
+		</div>
+		<div class="row {{ $type }} pb-2">
+			<div class="col-lg-4 text-center"></div>
+			<div class="col-lg-4 text-center"><h3 style="color: rgba(255, 255, 255, 0.5);">in partnership with</h3></div>
+			<div class="col-lg-4 text-center"></div>
+		</div>
+		<div class="row {{ $type }}">
+			<div class="col-lg-4 text-center">
+				<img src="/partner-logos/alibaba.png" class="border img-fluid shadow rounded" style="opacity: 0.9;">
+			</div>
+			<div class="col-lg-4 text-center">
+				<img src="/partner-logos/cloudbees.png" class="border img-fluid shadow rounded" style="opacity: 0.9;">
+			</div>
+			<div class="col-lg-4 text-center">
+				<img src="/partner-logos/ibm.png" class="border img-fluid shadow rounded" style="opacity: 0.9;">
+			</div>
+		</div>
+		<div class="row {{ $type }} pt-2">
+			<div class="col-lg-4 text-center">
+				<img src="/partner-logos/puppet.png" class="border img-fluid shadow rounded" style="opacity: 0.9;">
+			</div>
+			<div class="col-lg-4 text-center">
+				<img src="/partner-logos/redhat.png" class="border img-fluid shadow rounded" style="opacity: 0.9;">
+			</div>
+			<div class="col-lg-4 text-center">
+				<img src="/partner-logos/triggermesh.png" class="border img-fluid shadow rounded" style="opacity: 0.9;">
+			</div>
+		</div>
+	</div>
+</section>

layouts/shortcodes/blocks/showcase.html

+{{ $_hugo_config := `{ "version": 1 }` }}
+{{ $col_id := .Get "color" | default .Ordinal }}
+{{ $height := .Get "height" | default "auto"  }}
+{{/* Height can be one of: auto, min, med, max, full. */}}
+<a id="td-block-{{ .Ordinal }}" class="td-offset-anchor"></a>
+<section class="row td-box td-box--{{ $col_id }} position-relative td-box--gradient td-box--height-{{ $height }}">
+	<div class="container">
+		<div class="col">
+			<div class="row pl-0">
+				<div class="col-lg-6 mb-5 mb-lg-0">
+					<div class="text-left">
+						<p class="h3 text-light d-inline">Tekton is a powerful and flexible </p>
+						<p class="h3 text-dark d-inline">open-source framework for creating CI/CD systems,</p>
+						<p class="h3 text-light d-inline">allowing developers to </p>
+						<p class="h3 text-dark d-inline">build, test, and deploy </p>
+						<p class="h3 text-light d-inline">across cloud providers and on-premise systems.</p>
+						<a class="h3 text-danger d-inline" href="/try">Get started with interactive tutorials.</a>
+					</div>
+				</div>
+				<div class="col-lg-6 mb-5 mb-lg-0">
+					{{ $jsAsciinema := resources.Get "js/asciinema-player.js" }}
+					{{ $jsAsciinema := $jsAsciinema | minify | fingerprint }}
+					<script src="{{ $jsAsciinema.RelPermalink }}" integrity="{{ $jsAsciinema.Data.Integrity }}"></script>
+					<asciinema-player src="/asciinema/demo.cast" autoplay="true" rows="18" cols="76" theme="solarized-dark"></asciinema-player>
+				</div>
+			</div>
+		</div>
+  	</div>
+</section>

layouts/shortcodes/tab.html

+<div class="tab-pane" title="{{ .Get 0 }}">
+    {{ .Inner }}
+</div>
\ No newline at end of file

layouts/shortcodes/tabs.html

+<div class='code-tabs'>
+    <ul class="nav nav-tabs"></ul>
+    <div class="tab-content">{{ .Inner }}</div>
+</div>
\ No newline at end of file

layouts/shortcodes/tutorial.html

+{{ $_hugo_config := `{ "version": 1 }` }}
+<div class="alert alert-success" role="alert">
+    <h4 class="alert-heading">Note</h4>
+    <p>See also the <b>{{ .Get "name" | safeHTML }}</b> interactive tutorial.</p>
+    <button type="button" class="btn btn-success" onclick="openModal();">Launch Interactive Tutorial</button>
+    <div class="modal fade"
+         id="tutorialModal"
+         tabindex="-1"
+         style="display: none;"
+         data-katacoda-src='{{ .Get "katacoda-src" | safeHTML }}'
+         data-github-lnk='{{ .Get "github-lnk" | safeHTML }}'
+         data-qwiklabs-lnk='{{ .Get "qwiklabs-lnk" | safeHTML }}'>
+        <div class="modal-dialog modal-dialog-centered" style="max-width: 1000px;">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title">Getting started with Tekton</h5>
+                <button type="button" class="close" onclick="closeModal();"><span>&times;</span></button>
+            </div>
+            <div class="modal-body">
+                <p>You can run this interactive tutorial in a number of ways.
+                    If you are familiar with <a href="https://cloud.google.com">Google Cloud Platform</a>,
+                    consider running this tutorial with Qwiklabs. Alternatively,
+                    view the source code of this tutorial on GitHub, or start
+                    with the embedded Katacoda environment below.
+                </p>
+                <a id="qwiklabs-button" class="btn btn-success" href="">Open with Qwiklabs</a>
+                <a id="katacoda-button" class="btn btn-light" href="">Open with Katacoda</a>
+                <a id="github-button" class="btn btn-light" href="">Open in GitHub</a>
+                <div id="embedded-katacoda-scenario"></div>
+            </div>
+        </div>
+    </div>
+    </div>
+</div>
\ No newline at end of file

layouts/try/baseof.html

+<!doctype html>
+<html lang="{{ .Site.Language.Lang }}" class="no-js">
+  <head>
+      <meta charset="utf-8">
+      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+      {{ hugo.Generator }}
+      {{ if eq (getenv "HUGO_ENV") "production" }}
+      <META NAME="ROBOTS" CONTENT="INDEX, FOLLOW">
+      {{ else }}
+      <META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
+      {{ end }}
+      {{ range .AlternativeOutputFormats -}}
+      <link rel="{{ .Rel }}" type="{{ .MediaType.Type }}" href="{{ .Permalink | safeURL }}">
+      {{ end -}}
+      {{ partialCached "favicons.html" . }}
+      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css">
+      <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
+      {{ $js := resources.Get "js/try.js" }}
+      {{ $js := $js | minify | fingerprint }}
+      <script src="{{ $js.RelPermalink }}"></script>
+  </head>
+  <body class="td-{{ .Kind }}">
+    <div id="modal" class="modal">
+      <div class="modal-background"></div>
+      <div class="modal-content" style="width: 1000px;">
+        <article id="message" class="message is-link">
+          <div class="message-header">
+            <p>Before you begin</p>
+            <button class="delete" onclick="closeNote();"></button>
+          </div>
+          <div class="message-body">
+            You can run this interactive tutorial in a number of ways.
+            If you are familiar with <a href="https://cloud.google.com">Google Cloud Platform</a>
+            or would like to try tekton with Google Cloud Platform, consider running this tutorial
+            with Qwiklabs. Alternatively, view the source code of this tutorial on GitHub,
+            or start with the embedded Katacoda environment below.
+            <br>
+            <br>
+            <a id="qwiklabs-button" class="button is-link"><span class="icon"><i class="fas fa-vial"></i></span><span>Open with Qwiklabs</span></a>
+            <a id="katacoda-button" class="button is-light"><span class="icon"><i class="fas fa-paw"></i></span><span>Open with Katacoda</span></a>
+            <a id="github-button" class="button is-light"><span class="icon"><i class="fab fa-github"></i></span><span>Open in GitHub</span></a>
+          </div>
+        </article>
+        <div id="embedded-katacoda-scenario"></div>
+      </div>
+      <button class="modal-close is-large" onclick="closeModal();"></button>
+    </div>
+    <nav class="navbar" >
+      <div class="navbar-brand">
+        <a class="navbar-item" href="/">
+          <span class="icon"><i class="fas fa-arrow-left"></i></span>
+        </a>
+      </div>
+    </nav>
+    <section class="hero is-medium">
+      <div class="hero-body">
+        <div class="container">
+          <h1 class="title has-text-grey-darker">see Tekton in action</h1>
+            <h2 class="subtitle has-text-grey">Tekton provides a number of interactive tutorials
+              that helps you learn how to use Tekton step by step for free.</h2>
+        </div>
+      </div>
+    </section>
+    <section class="section">
+      <div class="container">
+        <div class="columns is-8 is-variable">
+          <div class="column is-3">
+            <p class="title is-inline">getting started</p>
+            <p class="title is-inline has-text-grey-light">on tekton and learn all the basics.</p>
+          </div>
+          <div class="column is-9">
+            <div class="columns is-2 is-variable">
+              <div class="column is-4">
+                <article class="card has-background-link"
+                         style="box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); border-radius: 0.5rem;"
+                         onclick="openModal(this);"
+                         data-katacoda-src="ratrosyu/getting-started"
+                         data-github-lnk="michaelawyu/tekton-examples/tree/master/getting-started"
+                         data-qwiklabs-lnk="">
+                  <div class="card-image">
+                    <figure class="image is-4by3"><img src="/try/icons/getting-started.png"></figure>
+                  </div>
+                  <div class="card-content" style="padding: 16px;">
+                    <p class="title has-text-white has-text-weight-semibold is-size-5">Your first CI/CD workflow with Tekton</p>
+                  </div>
+                </article>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+    <br>
+    <section class="section">
+      <div class="container">
+        <div class="columns is-8 is-variable">
+          <div class="column is-3">
+            <p class="title is-inline">build a great CI/CD workflow</p>
+            <p class="title is-inline has-text-grey-light">using tekton tasks and pipelines.</p>
+          </div>
+          <div class="column is-9">
+            <div class="columns is-2 is-variable">
+              <div class="column is-4">
+                <article class="card has-background-info"
+                         style="box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); border-radius: 0.5rem;"
+                         onclick="openModal(this);"
+                         data-katacoda-src="ratrosyu/tasks"
+                         data-github-lnk="michaelawyu/tekton-examples/tree/master/tasks"
+                         data-qwiklabs-lnk="">
+                  <div class="card-image">
+                    <figure class="image is-4by3"><img src="/try/icons/task.png"></figure>
+                  </div>
+                  <div class="card-content" style="padding: 16px;">
+                    <p class="title has-text-white has-text-weight-semibold is-size-5">Basic building block: Tekton tasks</p>
+                  </div>
+                </article>
+                <br>
+                <article class="card has-background-info" style="box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); border-radius: 0.5rem;">
+                  <div class="card-image">
+                    <figure class="image is-4by3"><img src="/try/icons/advanced.png"></figure>
+                  </div>
+                  <div class="card-content" style="padding: 16px;">
+                    <p class="title has-text-white has-text-weight-semibold is-size-5">Advanced CI/CD patterns with Tekton</p>
+                  </div>
+                </article>
+              </div>
+              <div class="column is-4">
+                <article class="card has-background-info"
+                         style="box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); border-radius: 0.5rem;"
+                         onclick="openModal(this);"
+                         data-katacoda-src="ratrosyu/pipelines"
+                         data-github-lnk="michaelawyu/tekton-examples/tree/master/pipelines"
+                         data-qwiklabs-lnk="">
+                  <div class="card-image">
+                    <figure class="image is-4by3"><img src="/try/icons/organize.png"></figure>
+                  </div>
+                  <div class="card-content" style="padding: 16px;">
+                    <p class="title has-text-white has-text-weight-semibold is-size-5">One block at a time: Tekton pipelines</p>
+                  </div>
+                </article>
+              </div>
+              <div class="column is-4">
+                <article class="card has-background-info" style="box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); border-radius: 0.5rem;">
+                  <div class="card-image">
+                    <figure class="image is-4by3"><img src="/try/icons/run.png"></figure>
+                  </div>
+                  <div class="card-content" style="padding: 16px;">
+                    <p class="title has-text-white has-text-weight-semibold is-size-5">Running Tekton Tasks and Pipelines</p>
+                  </div>
+                </article>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+     <section class="section">
+      <div class="container">
+        <div class="columns is-8 is-variable">
+          <div class="column is-3">
+            <p class="title is-inline">control and visualize</p>
+            <p class="title is-inline has-text-grey-light">every aspect of tekton.</p>
+          </div>
+          <div class="column is-9">
+            <div class="columns is-2 is-variable">
+              <div class="column is-4">
+                <article class="card has-background-primary" style="box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); border-radius: 0.5rem;">
+                  <div class="card-image">
+                    <figure class="image is-4by3"><img src="/try/icons/dashboard.png"></figure>
+                  </div>
+                  <div class="card-content" style="padding: 16px;">
+                    <p class="title has-text-white has-text-weight-semibold is-size-5">Monitor with Tekton dashboard</p>
+                  </div>
+                </article>
+              </div>
+              <div class="column is-4">
+                <article class="card has-background-primary" style="box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); border-radius: 0.5rem;">
+                  <div class="card-image">
+                    <figure class="image is-4by3"><img src="/try/icons/control.png"></figure>
+                  </div>
+                  <div class="card-content" style="padding: 16px;">
+                    <p class="title has-text-white has-text-weight-semibold is-size-5">Control with Tekton CLI tools</p>
+                  </div>
+                </article>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+    <section class="section">
+      <div class="container">
+        <div class="columns is-8 is-variable">
+          <div class="column is-3">
+            <p class="title is-inline">connect to services</p>
+            <p class="title is-inline has-text-grey-light">you love and use every day.</p>
+          </div>
+          <div class="column is-9">
+            <div class="columns is-2 is-variable">
+              <div class="column is-4">
+                <article class="card has-background-success" style="box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); border-radius: 0.5rem;">
+                  <div class="card-image">
+                    <figure class="image is-4by3"><img src="/try/icons/github.png"></figure>
+                  </div>
+                  <div class="card-content" style="padding: 16px;">
+                    <p class="title has-text-white has-text-weight-semibold is-size-5">Connect to GitHub repositories</p>
+                  </div>
+                </article>
+                <br>
+                <article class="card has-background-success" style="box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); border-radius: 0.5rem;">
+                  <div class="card-image">
+                    <figure class="image is-4by3"><img src="/try/icons/helm.png"></figure>
+                  </div>
+                  <div class="card-content" style="padding: 16px;">
+                    <p class="title has-text-white has-text-weight-semibold is-size-5">Connect to KNative platform</p>
+                  </div>
+                </article>
+              </div>
+              <div class="column is-4">
+                <article class="card has-background-success" style="box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); border-radius: 0.5rem;">
+                  <div class="card-image">
+                    <figure class="image is-4by3"><img src="/try/icons/jenkins.png"></figure>
+                  </div>
+                  <div class="card-content" style="padding: 16px;">
+                    <p class="title has-text-white has-text-weight-semibold is-size-5">Connect to Jenkins/Jenkins X</p>
+                  </div>
+                </article>
+                <br>
+                <article class="card has-background-success" style="box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); border-radius: 0.5rem;">
+                  <div class="card-image">
+                    <figure class="image is-4by3"><img src="/try/icons/custom.png"></figure>
+                  </div>
+                  <div class="card-content" style="padding: 16px;">
+                    <p class="title has-text-white has-text-weight-semibold is-size-5">Connect to any app with events</p>
+                  </div>
+                </article>
+              </div>
+              <div class="column is-4">
+                <article class="card has-background-success" style="box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); border-radius: 0.5rem;">
+                  <div class="card-image">
+                    <figure class="image is-4by3"><img src="/try/icons/helm.png"></figure>
+                  </div>
+                  <div class="card-content" style="padding: 16px;">
+                    <p class="title has-text-white has-text-weight-semibold is-size-5">Connect to Anthos platform</p>
+                  </div>
+                </article>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+    <section class="section">
+      <div class="container">
+        <div class="columns is-8 is-variable">
+          <div class="column is-3">
+            <p class="title is-inline">read about concepts and principles</p>
+            <p class="title is-inline has-text-grey-light">of CI/CD systems.</p>
+          </div>
+          <div class="column is-9">
+            <div class="columns is-2 is-variable">
+              <div class="column is-4">
+                <article class="card has-background-dark" style="box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); border-radius: 0.5rem;">
+                  <div class="card-image">
+                    <figure class="image is-4by3"><img src="/try/icons/concept.png"></figure>
+                  </div>
+                  <div class="card-content" style="padding: 16px;">
+                    <p class="title has-text-white has-text-weight-semibold is-size-5">CI/CD system best practices</p>
+                  </div>
+                </article>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  </body>
+</html>
\ No newline at end of file

layouts/try/list.html

+{{ define "main" }}
+<div class="td-content">
+	<h1>{{ .Title }}</h1>
+	{{ with .Params.description }}<div class="lead">{{ . | markdownify }}</div>{{ end }}
+	{{ .Content }}
+        {{ partial "section-index.html" . }}
+	{{ if (and (not .Params.hide_feedback) (.Site.Params.ui.feedback.enable) (.Site.GoogleAnalytics)) }}
+		{{ partial "feedback.html" .Site.Params.ui.feedback }}
+		<br />
+	{{ end }}
+	{{ if (.Site.DisqusShortname) }}
+		<br />
+		{{ partial "disqus-comment.html" . }}
+	{{ end }}
+	<div class="text-muted mt-5 pt-3 border-top">{{ partial "page-meta-lastmod.html" . }}</div>
+</div>
+{{ end }}

layouts/try/single.html

+{{ define "main" }}
+{{ .Render "content" }}
+{{ end }}
\ No newline at end of file

layouts/vault/baseof.html

+<!doctype html>
+<html lang="{{ .Site.Language.Lang }}" class="no-js">
+  <head>
+    {{ partial "head.html" . }}
+  </head>
+  <body class="td-{{ .Kind }}">
+    <header>
+      {{ partial "navbar-vault.html" . }}
+    </header>
+    <div class="container-fluid td-outer">
+      <div class="td-main">
+        <div class="row flex-xl-nowrap">
+          <div class="col-12 col-md-3 col-xl-2 td-sidebar d-print-none">
+            {{ partial "sidebar-vault.html" . }}
+          </div>
+          <div class="d-none d-xl-block col-xl-2 td-toc d-print-none">
+            {{ partial "toc.html" . }}
+          </div>
+          <main class="col-12 col-md-9 col-xl-8 pl-md-5" role="main">
+            {{ if not .Site.Params.ui.breadcrumb_disable }}{{ partial "breadcrumb.html" . }}{{ end }}
+            {{ block "main" . }}{{ end }}
+          </main>
+        </div>
+      </div>
+      {{ partial "footer.html" . }}
+    </div>
+    {{ partial "scripts.html" . }}
+  </body>
+</html>
\ No newline at end of file

layouts/vault/list.html

+{{ define "main" }}
+<div class="td-content">
+	<h1>{{ .Title }}</h1>
+	{{ with .Params.description }}<div class="lead">{{ . | markdownify }}</div>{{ end }}
+	{{ .Content }}
+		{{ if ne .LinkTitle "Vault"}}
+		{{ partial "section-index.html" . }}
+		{{ end }}
+	{{ if (and (not .Params.hide_feedback) (.Site.Params.ui.feedback.enable) (.Site.GoogleAnalytics)) }}
+		{{ partial "feedback.html" .Site.Params.ui.feedback }}
+		<br />
+	{{ end }}
+	{{ if (.Site.DisqusShortname) }}
+		<br />
+		{{ partial "disqus-comment.html" . }}
+	{{ end }}
+	<div class="text-muted mt-5 pt-3 border-top">{{ partial "page-meta-lastmod.html" . }}</div>
+</div>
+{{ end }}

layouts/vault/single.html

+{{ define "main" }}
+{{ .Render "content" }}
+{{ end }}
\ No newline at end of file

static/stylesheets/tabs.css

+ul.nav.nav-tabs {
+    padding: 0;
+    list-style-type: none;
+    overflow: hidden;
+    content: none;
+    border-bottom-color: lightgray;
+    border-bottom-width: 0.5px;
+    border-bottom-style: solid;
+}
+
+li.nav-tab {
+    padding: 10px 20px;
+    float: left;
+    text-align: center;
+    text-decoration: none;
+    text-transform: uppercase;
+    font-weight: bold;
+    color: darkgray;
+    font-size: 14px;
+}
+
+li.active {
+    color: rgb(87, 119, 249);
+    background: #f5f5f5;
+}
+
+a.nav-tab {
+    all: unset;
+    cursor: pointer;
+}
+
+div.tab-pane {
+    display: none;
+}
+
+div.tab-pane.active {
+    display: block;
+    padding-left: 20px;
+    padding-bottom: 20px;
+    padding-top: 10px;
+    background: #f5f5f5;
+}
+
+code {
+    word-break: keep-all;
+}

sync/README.md

+This directory includes the configuration for syncing/curating contents from
+specific Tekton repositories.
+
+See `pipelines.yaml` and `triggers.yaml` for more instructions. These two
+YAML files control the synchronization/curation from the `tektoncd/pipeline`
+and `tektoncd/triggers` repositories respectively.
+
+The YAML files here are used by the scripts in `../helper`.

sync/pipelines.yaml

+# Each YAML file under sync/ configures how helper/helper.py synchronizes
+# contents of various versions from its source of truth (usually a GitHub
+# repository of a Tekton component, such as tektoncd/pipelines) to
+# content/ (for the lastest version) and vault/ (for earlier versions).
+
+# The name of the component.
+# helper.py will use this value to build directories in content/ and vault/.
+component: Pipelines
+# The order of the component.
+displayOrder: 0
+# The GitHub repository where documentation resides.
+repository: https://github.com/tektoncd/pipeline
+# The directory in the GitHub repository where contents reside.
+docDirectory: docs
+# The tags (versions) of contents to sync.
+# Note that helper.py and related script reads tags in the order specified in
+# the following list; the first entry in tags will automatically become the
+# latest version of contents.
+tags:
+  # The name of the tag in the GitHub repository.
+- name: v0.9.1
+  # The name to display on tekton.dev.
+  # helper.py will use this value in the version switcher and other places.
+  displayName: v0.9.x
+  # Key-value pairs of files to sync, where the key is the original filename
+  # and the value is the new filename.
+  files:
+  - README.md: _index.md
+  - auth.md: auth.md
+  - conditions.md: conditions.md
+  - container-contract.md: container-contract.md
+  - labels.md: labels.md
+  - logs.md: logs.md
+  - pipelineruns.md: pipelineruns.md
+  - pipelines.md: pipelines.md
+  - resources.md: resources.md
+  - taskruns.md: taskruns.md
+  - tasks.md: tasks.md
+#- name: v0.9.1
+#  displayName: v0.8.x
+#  files:
+#  - README.md: _index.md
+#  - auth.md: auth.md
+#  - conditions.md: conditions.md
+#  - container-contract.md: container-contract.md
+#  - labels.md: labels.md
+#  - logs.md: logs.md
+#  - pipelineruns.md: pipelineruns.md
+#  - pipelines.md: pipelines.md
+#  - resources.md: resources.md
+#  - taskruns.md: taskruns.md
+#  - tasks.md: tasks.md
+#- name: v0.9.1
+#  displayName: v0.7.x
+#  files:
+#  - README.md: _index.md
+#  - auth.md: auth.md
+#  - conditions.md: conditions.md
+#  - container-contract.md: container-contract.md
+#  - labels.md: labels.md
+#  - logs.md: logs.md
+#  - pipelineruns.md: pipelineruns.md
+#  - pipelines.md: pipelines.md
+#  - resources.md: resources.md
+#  - taskruns.md: taskruns.md
+#  - tasks.md: tasks.md
+# The link to the GitHub tag page.
+archive: https://github.com/tektoncd/pipeline/tags

sync/triggers.yaml

+# Each YAML file under sync/ configures how helper/helper.py synchronizes
+# contents of various versions from its source of truth (usually a GitHub
+# repository of a Tekton component, such as tektoncd/pipelines) to
+# content/ (for the lastest version) and vault/ (for earlier versions).
+
+# The name of the component.
+# helper.py will use this value to build directories in content/ and vault/.
+component: Triggers
+# The order of the component.
+displayOrder: 1
+# The GitHub repository where documentation resides.
+repository: https://github.com/tektoncd/triggers
+# The directory in the GitHub repository where contents reside.
+docDirectory: docs
+# The tags (versions) of contents to sync.
+# Note that helper.py and related script reads tags in the order specified in
+# the following list; the first entry in tags will automatically become the
+# latest version of contents.
+tags:
+  # The name of the tag in the GitHub repository.
+- name: v0.1.1
+  # The name to display on tekton.dev.
+  # helper.py will use this value in the version switcher and other places.
+  displayName: v0.1.x
+  # Key-value pairs of files to sync, where the key is the original filename
+  # and the value is the new filename.
+  files:
+  - README.md: _index.md
+  - eventlisteners.md: eventlisteners.md
+  - exposing-eventlisteners.md: exposing-eventlisteners.md
+  - install.md: install.md
+  - triggerbindings.md: triggerbindings.md
+  - triggertemplates.md: triggertemplates.md
+# The link to the GitHub tag page.
+archive: https://github.com/tektoncd/triggers/tags

templates/README.md

+This directory includes the templates for dynamically generated pages,
+such as the documentation vault and the version switcher.
+
+At this moment the templates here are used to support the versioning of
+Tekton documentation, as the built-in system does not apply well to the
+structure of the Tekton project. The templates here are used by the scripts
+in `../helper`.

templates/_index.md.template

+---
+title: "Tekton Documentation Vault"
+linkTitle: "Vault"
+---
+
+This section keeps the documentation of past versions of Tekton components.
+To see the latest documentation, [visit tekton.dev/docs](/docs).
+
+{% for component_version in component_versions %}
+## {{ component_version['name'] }}
+
+{% for tag in component_version['tags'][1:] %}
+* [{{ component_version['name'] }} {{ tag['displayName'] }}](/vault/{{ component_version['name']|lower }}-{{ tag['displayName']|lower }})
+{% endfor %}
+{% endfor %}
\ No newline at end of file

templates/version-switcher.js.template

+const componentVersions = JSON.parse('{{ component_versions_json }}');
+
+function expandOrCollapseSubMenu (componentName) {
+  const childRef = `${componentName}-child`;
+  const childNodes = document.querySelectorAll(`[data-ref="${childRef}"]`);
+  childNodes.forEach(function (childNode) {
+    childNode.classList.toggle('d-none');
+  });
+}
+
+function createLatestVersionNode (anchorNode, componentName, version, disabled) {
+  const latestVersionNode = document.createElement('a');
+  latestVersionNode.style.paddingLeft = '2em';
+  latestVersionNode.style.color = 'rgb(55, 114, 255)';
+  if (disabled) {
+    latestVersionNode.className = 'dropdown-item disabled';
+    latestVersionNode.innerHTML = `${componentName}: ${version}`;
+  } else {
+    latestVersionNode.className = 'dropdown-item d-none';
+    latestVersionNode.setAttribute('href', `/docs/${componentName.toLowerCase()}`);
+    latestVersionNode.setAttribute('data-ref', `${componentName}-child`.toLowerCase());
+    latestVersionNode.innerHTML = `Latest (${version})`;
+  }
+  anchorNode.appendChild(latestVersionNode);
+}
+
+function createArchivedVersionsNode (anchorNode, componentName, href) {
+  const archiveNode = document.createElement('a');
+  archiveNode.className = 'dropdown-item d-none';
+  archiveNode.style.paddingLeft = '2em';
+  archiveNode.style.color = 'rgb(55, 114, 255)';
+  archiveNode.setAttribute('data-ref', `${componentName}-child`.toLowerCase());
+  archiveNode.innerHTML = 'Archived Versions';
+  archiveNode.setAttribute('href', href);
+  anchorNode.appendChild(archiveNode);
+}
+
+function createPreviousVersionsNodes (anchorNode, componentName, previousVersions, excludedVersion) {
+  previousVersions.slice().forEach(function (bundle) {
+    const previousVersion = bundle.displayName;
+    if (excludedVersion !== null && excludedVersion === previousVersion) {
+      return;
+    }
+
+    const previousVersionNode = document.createElement('a');
+    if (excludedVersion !== null) {
+      previousVersionNode.className = 'dropdown-item';
+    } else {
+      previousVersionNode.className = 'dropdown-item d-none';
+    }
+    previousVersionNode.style.paddingLeft = '2em';
+    previousVersionNode.style.color = 'rgb(55, 114, 255)';
+    previousVersionNode.setAttribute('href', `/vault/${componentName.toLowerCase()}-${previousVersion.toLowerCase()}`);
+    previousVersionNode.setAttribute('data-ref', `${componentName}-child`.toLowerCase());
+    previousVersionNode.innerHTML = `${previousVersion}`;
+    anchorNode.appendChild(previousVersionNode);
+  });
+}
+
+function createComponentNameNode (anchorNode, componentName) {
+  const componentNameNode = document.createElement('a');
+  componentNameNode.className = 'dropdown-item';
+  componentNameNode.innerHTML = componentName;
+  componentNameNode.addEventListener('click', function () { expandOrCollapseSubMenu(componentName.toLowerCase()); });
+  anchorNode.appendChild(componentNameNode);
+}
+
+function setMainVersionSwitcher () {
+  const versionAnnouncerNode = document.getElementById('version-announcer');
+  componentVersions.slice().forEach(function (componentVersion) {
+    const componentName = componentVersion.name;
+    const versions = componentVersion.tags;
+    const latestVersion = versions[0].displayName;
+    createLatestVersionNode(versionAnnouncerNode, componentName, latestVersion, true);
+  });
+  const previousReleasesFormNode = document.getElementById('previous-releases-form');
+  componentVersions.slice().forEach(function (componentVersion) {
+    const componentName = componentVersion.name;
+    createComponentNameNode(previousReleasesFormNode, componentName);
+
+    const versions = componentVersion.tags;
+    const previousVersions = versions.slice(1);
+    createPreviousVersionsNodes(previousReleasesFormNode, componentName, previousVersions, null);
+
+    const archiveHref = componentVersion.archive;
+    createArchivedVersionsNode(previousReleasesFormNode, componentName, archiveHref);
+  });
+}
+
+function setVaultVersionSwitcher () {
+  const pathName = window.location.pathname;
+  const componentVersionStr = pathName.split('/')[2];
+  const componentRawName = componentVersionStr.split('-')[0];
+  const versionRawName = componentVersionStr.split('-')[1];
+  let componentName;
+  let versionName;
+
+  componentVersions.forEach(function (componentVersion) {
+    if (componentVersion.name.toLowerCase() === componentRawName) {
+      componentName = componentVersion.name;
+      componentVersion.tags.forEach(function (bundle) {
+        if (bundle.displayName.toLowerCase() === versionRawName) {
+          versionName = bundle.displayName;
+        }
+      });
+    }
+  });
+
+  const currentLocationAnnouncerNode = document.getElementById('current-location-announcer');
+  currentLocationAnnouncerNode.innerHTML = `${componentName} ${versionName}`;
+
+  const currentLocationAnnouncerTextNode = document.getElementById('current-location-announcer-text');
+  currentLocationAnnouncerTextNode.innerHTML = `Tekton ${componentName} ${versionName}`;
+
+  const otherVersionsFormNode = document.getElementById('other-versions-form');
+  const otherComponentsFormNode = document.getElementById('other-components-form');
+  componentVersions.forEach(function (componentVersion) {
+    if (componentVersion.name === componentName) {
+      const latestVersion = componentVersion.tags[0].displayName;
+      createLatestVersionNode(otherVersionsFormNode, componentName, latestVersion);
+
+      const previousVersions = componentVersion.tags.slice(1);
+      createPreviousVersionsNodes(otherVersionsFormNode, componentName, previousVersions, versionName);
+
+      const archiveHref = componentVersion.archive;
+      createArchivedVersionsNode(otherVersionsFormNode, componentName, archiveHref);
+    } else {
+      createComponentNameNode(otherComponentsFormNode, componentVersion.name);
+
+      const latestVersion = componentVersion.tags[0].displayName;
+      createLatestVersionNode(otherComponentsFormNode, componentVersion.name, latestVersion, false);
+
+      const previousVersions = componentVersion.tags.slice(1);
+      createPreviousVersionsNodes(otherComponentsFormNode, componentVersion.name, previousVersions, null);
+
+      const archiveHref = componentVersion.archive;
+      createArchivedVersionsNode(otherComponentsFormNode, componentVersion.name, archiveHref);
+    }
+  });
+}

themes/docsy/assets/scss/_nav.scss

@@ -20,7 +20,7 @@
 }
 
 .navbar-bg-onscroll {
-    background: $primary !important;
+    background: $dark !important;
     opacity: inherit;
 }