website: set up https://lima-vm.io/

Signed-off-by: Akihiro Suda <[email protected]>
lima-vm · Dec 13, 2022 · 99e8250 · 99e8250
1 parent 08854be
commit 99e8250
Show file tree

Hide file tree

Showing 2 changed files with 287 additions and 0 deletions.
diff --git a/website/README.md b/website/README.md
@@ -0,0 +1,12 @@
+# The source of the Lima website (https://lima-vm.io)
+
+This directory is the [Netlify base directory](https://docs.netlify.com/configure-builds/overview/) of [https://lima-vm.io](https://lima-vm.io/) .
+
+The actual contents are generated from the markdown files on the browser side:
+- [`../README.md`](../README.md)
+- [`../docs/*.md`](../docs/)
+- [`../examples/README.md`](../examples/README.md)
+
+The site is previewable and deployable with just the single [`index.html`](./index.html).
+
+No dependency on any templating engine currently, but eventually we may adopt docsy or something else similar.
diff --git a/website/index.html b/website/index.html
@@ -0,0 +1,275 @@
+<!DOCTYPE html>
+<!--
+	Copyright The Lima Authors
+
+	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
+
+	http://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.
+-->
+<html>
+<script>
+	const ghRepo = "lima-vm/lima"
+	const ghRef = "master"
+	const ghRepoUrl = `https://github.com/${ghRepo}`
+	const baseUrl = `${ghRepoUrl}/blob/${ghRef}/`;
+	const contentBaseUrl = `https://raw.githubusercontent.com/${ghRepo}/${ghRef}/`;
+	const files = [
+		"README.md",
+		// Advanced topic: "docs/deprecated.md",
+		// Advanced topic: "docs/experimental.md",
+		// Advanced topic: "docs/internal.md",
+		"docs/mount.md",
+		"docs/multi-arch.md",
+		"docs/network.md",
+		"docs/talks.md",
+		"docs/vmtype.md",
+		"examples/README.md",
+	];
+</script>
+
+<head>
+	<title>Lima: Linux virtual machines</title>
+	<meta charset="utf-8" />
+	<style>
+		code,
+		pre {
+			background-color: #eee;
+			font: monospace;
+		}
+
+		pre {
+			border: solid;
+			padding: 10px;
+		}
+
+		table,
+		th,
+		td {
+			border: solid;
+			border-collapse: collapse;
+			padding: 5px;
+		}
+
+		blockquote {
+			border: dashed;
+			padding: 5px;
+		}
+
+		header {
+			display: flex;
+		}
+
+		header h1 {
+			display: none;
+		}
+
+		#md-main-left {
+			width: 20vw;
+		}
+
+		#md-header-right {
+			width: 80vw;
+			text-align: right;
+		}
+
+		body>hr {
+			border-top: solid green 5px;
+		}
+
+		.md-2col {
+			display: flex;
+		}
+
+		#md-main-left {
+			width: 15vw;
+			overflow-x: scroll;
+			margin-right: 20px;
+		}
+
+		#md-main-left hr {
+			border-top: dotted green 3px;
+		}
+
+		#md-main-right {
+			width: 85vw;
+		}
+
+		#md-filename {
+			font-size: 150%;
+			margin-bottom: 20px;
+		}
+
+		#md-content {
+			border: solid green;
+			padding: 30px;
+			overflow-y: scroll;
+			height: 100vh;
+		}
+
+		.md-error {
+			color: red;
+		}
+	</style>
+</head>
+
+<body>
+	<header>
+		<h1>Lima: Linux virtual machines</a></h1>
+		<div id="md-header-left">
+			<a href="?">
+				<img src="https://raw.githubusercontent.com/lima-vm/lima/master/docs/images/lima-logo-01.svg" />
+			</a>
+		</div> <!-- /md-header-left -->
+		<div id="md-header-right">
+			<p>
+				[<a href="https://github.com/lima-vm/lima">GitHub]
+					[<a href="https://slack.cncf.io/">Slack</a>
+					(<code>#lima</code>)]
+			</p>
+			<iframe src="https://ghbtns.com/github-btn.html?user=lima-vm&repo=lima&type=star&count=true&size=large"
+				frameborder="0" scrolling="0" width="170" height="30" title="GitHub stars of lima-vm/lima"></iframe>
+
+		</div> <!-- /md-header-right -->
+	</header>
+	<hr />
+	<div class="md-2col">
+		<nav id="md-main-left">
+			<h4>Documents</h4>
+			<div id="md-files">Loading...<noscript class="md-error">ERROR: JavaScript is disabled</noscript></div>
+			<hr />
+			<h4>Contents</h4>
+			<div id="md-toc"><noscript class="md-error">ERROR: JavaScript is disabled</noscript></div>
+		</nav> <!-- /md-main-left -->
+		<article id="md-main-right">
+			<div id="md-filename"></div>
+			<div id="md-content">
+				<h1>Lima: Linux virtual machines, made for running containerd on Mac</h1>
+				<p>Lima launches Linux virtual machines with automatic file sharing and port forwarding (similar to
+					WSL2), and containerd.</p>
+				<p>Lima can be considered as a some sort of unofficial "containerd for Mac".</p>
+				<p>Lima is expected to be used on macOS hosts, but can be used on Linux hosts as well.</p>
+				<p><noscript class="md-error">ERROR: JavaScript is disabled</noscript></p>
+			</div> <!-- /md-content -->
+			<p>
+				If the content is not shown, visit: <a
+					href="https://github.com/lima-vm/lima">https://github.com/lima-vm/lima</a>
+			</p>
+		</article> <!-- /md-main-right -->
+	</div> <!-- /md-main-2col-->
+	<hr />
+	<footer>
+		<p><strong>We are a <a href="https://cncf.io/">Cloud Native Computing Foundation</a> sandbox project.</strong>
+		</p>
+		<img src="https://www.cncf.io/wp-content/uploads/2022/07/cncf-color-bg.svg" width=300 />
+		<p>The Linux Foundation® (TLF) has registered trademarks and uses trademarks.For a list of TLF trademarks,
+			see <a href="https://www.linuxfoundation.org/trademark-usage/">Trademark Usage</a>.</p>
+		<hr />
+		<p>Help wanted to improve this website.
+			Please send pull requests to <a
+				href="https://github.com/lima-vm/lima/tree/master/website">https://github.com/lima-vm/lima/tree/master/website</a>
+			🙏.
+		</p>
+	</footer>
+</body>
+
+<!-- marked: MIT License: https://github.com/markedjs/marked/blob/v4.2.3/LICENSE.md -->
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/marked.min.js"
+	integrity="sha384-IMygIQafcYXMtRhq7WReNw5YkMe3eTKl420LY/Xz4yi6nfihtVdatoddRcEsO4KQ"
+	crossorigin="anonymous"></script>
+<!-- DOMPurify: Apache License 2.0: https://github.com/cure53/DOMPurify/blob/2.4.1/LICENSE -->
+<script src="https://cdn.jsdelivr.net/gh/cure53/[email protected]/dist/purify.min.js"
+	integrity="sha384-arqXKBMaxueqlbHTzDnjId9y+DYmnmjBWr2t2wXFAUwg00iJKZe5ItR/bQQAaaHp"
+	crossorigin="anonymous"></script>
+<script>
+	const walkTokens = async (token) => {
+		if (token.type === "image" && !token.href.includes("://")) {
+			token.href = new URL(token.href, contentBaseUrl).href;
+		}
+	};
+	const dirname = function (file) {
+		const arr = file.split("/");
+		arr.pop();
+		return arr.join("/");
+	};
+	const render = function (file) {
+		let fileInAllowList = false;
+		// Render the side bar
+		let ul = "<ul>";
+		for (let i = 0; i < files.length; i++) {
+			const f = files[i];
+			let li = "<li>";
+			if (file && file == f) {
+				fileInAllowList = true;
+				li += `<strong><code>${f}</code></strong>`;
+			} else {
+				li += `<code><a href="?file=${f}">${f}</a></code>`;
+			}
+			li += "</li>";
+			ul += li;
+		}
+		ul += "</ul>";
+		const filesE = document.getElementById("md-files");
+		filesE.innerHTML = ul;
+		if (!file) return;
+		// Render the markdown content
+		if (!fileInAllowList) throw new Error(`invalid file "${file}"`);
+		const fileAbs = new URL(file, baseUrl).href;
+		const contentAbs = new URL(file, contentBaseUrl).href;
+		const filenameE = document.getElementById("md-filename");
+		filenameE.innerHTML = `<code>${file}</code> (<a href="${fileAbs}"><code>${fileAbs}</code></a>)`;
+		const contentE = document.getElementById("md-content");
+		contentE.innerHTML = `Loading <code><a href="${fileAbs}">${fileAbs}</a></code> ...`
+			+ ` (from <code><a href="${contentAbs}">${contentAbs}</a></code>)`;
+		const req = new Request(contentAbs);
+		fetch(req)
+			.then((resp) => {
+				if (!resp.ok) {
+					console.log(resp);
+					const error = `${resp.status} (${resp.type}) for ${resp.url}`;
+					throw new Error(error);
+				}
+				return resp.blob()
+			})
+			.then(async (blob) => {
+				const text = await blob.text();
+				const baseUrlFull = baseUrl + dirname(file) + "/";
+				let mdHTMLStr = DOMPurify.sanitize(marked.parse(text, { baseUrl: baseUrlFull, walkTokens: walkTokens }));
+				contentE.innerHTML = mdHTMLStr;
+				const mdHTML = (new DOMParser).parseFromString(mdHTMLStr, "text/html");
+				const selected = mdHTML.querySelectorAll("h2");
+				const tocE = document.getElementById("md-toc");
+				let ul = "<ul>";
+				for (let i = 0; i < selected.length; i++) {
+					const f = selected[i];
+					let li = `<li><a href="#${f.id}">${f.innerText}</a></li>`;
+					ul += li;
+				}
+				ul += "</ul>";
+				tocE.innerHTML = ul;
+				return blob;
+			})
+			.catch((error) => {
+				contentE.innerHTML += `<div class="md-error">${error}</div>` +
+					`<p>Please visit <code><a href="${fileAbs}">${fileAbs}</a></code> directly.</p>`;
+			});
+	};
+	window.onload = function () {
+		let file = (new URL(document.location)).searchParams.get("file");
+		if (!file) file = files[0];
+		try {
+			render(file);
+		} catch (error) {
+			document.getElementById("md-content").innerHTML += `<div class="md-error">${error}</div>`;
+		}
+	}
+</script>
+
+</html>