Moving the documentation to Hugo (#1177)

* Moving to Hugo based documentation

Adding semi static documentation based on Hugo

Signed-off-by: Gergely Csatari <[email protected]>

* Adding versions and examples to the function pages

Every function page has now a drop down for the versions of that function and a
drop down for the examples.

Note: The same examples are shown for all the versions even if the given version of the
function does not fully supports the example.

Examples are copied from the examples folder of the repo.

Signed-off-by: Gergely Csatari <[email protected]>

---------

Signed-off-by: Gergely Csatari <[email protected]>

Author: CsatariGergely

documentation/Makefile

@@ -0,0 +1,36 @@
+serve: copy-examples
+	hugo server \
+		--disableFastRender \
+		--buildDrafts \
+		--buildFuture \
+		--ignoreCache
+		--printI18nWarnings \
+		--printMemoryUsage \
+		--printPathWarnings \
+		--printUnusedTemplates \
+		--templateMetrics \
+		--templateMetricsHints \
+		--gc
+
+production-build: copy-examples
+	git submodule update --init --recursive
+	hugo version
+	hugo \
+		--minify
+	npx -y pagefind --site public
+
+preview-build: copy-examples
+	git submodule update --init --recursive
+	hugo \
+		--baseURL $(DEPLOY_PRIME_URL) \
+		--buildDrafts \
+		--buildFuture \
+		--minify
+	npx -y pagefind --site public
+
+copy-examples:
+#	mkdir -p public/examples
+#	cp -R ../examples public/examples
+
+	mkdir -p content/en/
+	cp -R ../examples content/en/examples

documentation/README.md

@@ -0,0 +1,31 @@
+# kpt Documentation Site
+
+[![UPDATE ME](https://api.netlify.com/api/v1/badges/61012e8d-a38d-457e-b1e4-6dc9dbb87934/deploy-status)](https://app.netlify.com/sites/cloud-native-finland/deploys)
+
+This directory contains a [Hugo](https://gohugo.io) web site published via [Netlify](https://www.netlify.com/) to
+<https://update-me/>.
+
+When the `main` branch of this repo is updated a fresh build and deploy of the website is executed. Recent Netlify
+builds and deployments are listed at <https://app.netlify.com/sites/update-me>.
+
+Add content by adding Markdown files to directories in [./content](./content).
+
+Update layouts for each content type in [./layouts](./layouts/).
+
+Configuration is set in [config.toml](./config.toml).
+
+## Setting up a local dev instance
+
+To set up a local dev environment make sure you have [npm](https://www.npmjs.com/) installed, then run the following
+from this folder:
+
+```sh
+npm install
+```
+
+Then run the site using `npm run serve`. To have the site run locally with a functioning local search, run
+`npm run serve:with-pagefind`.
+
+## License
+
+Licensed under the [Creative Commons Attribution 4.0 International license](LICENSE-documentation)

documentation/assets/icons/logo.svg

@@ -0,0 +1,43 @@
+/*
+Copyright 2018 Google LLC
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    https://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+(function($) {
+
+    'use strict';
+
+    var Search = {
+        init: function() {
+            $(document).ready(function() {
+               $(document).on('keypress', '.td-search-input', function(e) {
+                    if (e.keyCode !== 13) {
+                        return
+                    }
+
+                    var query = $(this).val();
+                    var searchPage = $(this).data('search-page') + "?q=" + query;
+                    document.location = searchPage;
+
+                    return false;
+                });
+
+            });
+        },
+    };
+
+    Search.init();
+
+
+}(jQuery));

documentation/assets/js/search.js

@@ -0,0 +1,58 @@
+.td-box--primary .td-arrow-down::before {
+	border: none;
+}
+
+.section-group {
+	@media (max-width: 767px) {
+	}
+	@media (min-width: 768px) {
+		margin-right: 25px;
+		section {
+			padding-left: 25px;
+			padding-right: 25px;
+		}
+	}
+}
+
+.td-box--primary p > a,
+.td-box--secondary p > a,
+.td-box--light p > a {
+	color: $link-color;
+}
+
+.td-box--secondary {
+	background-color: #ffb24c;
+	color: #464646;
+}
+
+.td-box--primary,
+.td-box--white {
+	background-color: #fdfdfd;
+	color: $body-color;
+
+	span.lead p {
+		font-weight: 300;
+	}
+}
+
+@media (min-width: 768px) {
+	.td-box--primary h2[id]:before {
+		margin-top: 0;
+		height: 0;
+	}
+}
+
+.td-content > table {
+	margin-bottom: 2rem;
+	th {
+		text-transform: uppercase;
+		border-top: none;
+	}
+	tbody tr:nth-of-type(odd) {
+		background-color: unset;
+	}
+	td {
+		padding: 1rem;
+		border-bottom: 1px solid #dee2e6;
+	}
+}

documentation/assets/scss/_about.scss

@@ -0,0 +1,16 @@
+.article-teaser {
+	h3 {
+		margin-top: 34px;
+		a {
+			color: $black;
+		}
+	}
+}
+
+.articles-of-tag hr {
+	background: linear-gradient(180deg, #c4c4c4, hsla(0, 0%, 77%, 0));
+	border-bottom: 0;
+	height: 10px;
+	opacity: 0.15;
+	width: 100%;
+}

documentation/assets/scss/_archive.scss

@@ -0,0 +1,37 @@
+// buttons.
+.button-reset {
+	background: none;
+	border: none;
+	box-sizing: border-box;
+	cursor: pointer;
+	display: block;
+	margin-left: 0;
+	margin-right: 0;
+	padding: 0;
+	width: unset;
+}
+
+.cncf-button {
+	color: $white;
+	background-color: $black;
+	border: 0;
+	border-radius: 3px;
+	box-shadow: none;
+	box-sizing: border-box;
+	cursor: pointer;
+	font-size: 16px;
+	font-weight: 700;
+	letter-spacing: 0.02em;
+	line-height: 105%;
+	margin: 0;
+	max-width: 100%;
+	padding: 12px 40px;
+	text-align: center;
+	text-decoration: none;
+	text-transform: uppercase;
+	transition: all 0.25s ease-out;
+	word-break: break-word;
+	&:hover {
+		background-color: $gray-700;
+	}
+}