Skip to content

Commit

Permalink
misc: add examples
Browse files Browse the repository at this point in the history
  • Loading branch information
@mirkobrombin
mirkobrombin committed Feb 12, 2024
1 parent a56f80f commit 86043f4
Show file tree
Hide file tree
Showing 2 changed files with 231 additions and 2 deletions.
229 changes: 229 additions & 0 deletions docs/examples.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,229 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Recipe Examples - Vib</title>
<link rel="icon" type="image/png" href="favicon.png">
<meta name="description" content="Explore container image recipes examples with Vib.">
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@latest/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
<style>
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap');

.glass-effect {
background-color: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.18);
}

body {
font-family: 'Outfit', sans-serif;
}

pre code.hljs[data-highlighted] {
background-color: transparent;
padding: 0;
}
</style>
</head>

<body class="bg-gray-900 text-gray-100">

<nav class="border-b border-gray-800">
<div class="container mx-auto flex items-center justify-between py-4 px-6 flex-wrap">
<a href="/" class="font-bold text-2xl">
<img src="logo.svg" alt="Vib" class="h-8">
</a>
<button
class="text-gray-300 inline-flex p-3 hover:bg-gray-700 rounded lg:hidden ml-auto hover:text-white outline-none"
id="menu-button">
<span class="material-symbols-outlined">menu</span>
</button>
<div class="hidden w-full lg:inline-flex lg:flex-grow lg:w-auto" id="menu">
<div
class="lg:inline-flex lg:flex-row lg:ml-auto lg:w-auto w-full lg:items-center items-start flex flex-col lg:h-auto">
<a href="https://images.vanillaos.org"
class="text-gray-300 hover:text-white px-3 py-2 rounded">Examples</a>
<a href="https://docs.vanillaos.org/collections/vib"
class="text-gray-300 hover:text-white px-3 py-2 rounded">Documentation</a>
<a href="https://vanillaos.org/community"
class="text-gray-300 hover:text-white px-3 py-2 rounded">Support</a>
<a href="https://fabricators.ltd/en/contact.html"
class="text-gray-300 hover:text-white px-3 py-2 rounded">Enterprise</a>
<a href="https://github.com/vanilla-os/vib"
class="text-gray-300 hover:text-white px-3 py-2 rounded">Source Code</a>
<a href="https://docs.vanillaos.org/collections/vib"
class="bg-blue-900 hover:bg-blue-700 text-white px-3 py-2 ml-3 rounded transition duration-300">
Get Started
</a>
</div>
</div>
</div>
</nav>

<header class="text-center py-40">
<h1 class="text-3xl md:text-5xl font-bold mb-4">Examples of Vib Recipes</h1>
<p class="mb-10 text-xl">Learn to use Vib through these simple recipe examples.</p>
</header>

<div class="container mx-auto">

<section class="mb-10">
<h2 class="text-3xl text-white font-bold mb-4">Node.js App</h2>
<p class="text-xl text-white mb-6">
Showcasing a simple Node.js application containerized with Vib.
</p>
<div class="bg-gray-800 px-6 rounded-lg shadow-lg glass-effect overflow-x-auto">
<pre class="text-xl text-gray-300"><code class="language-yaml">
base: node:current-slim
labels:
maintainer: My Awesome Team
args:
DEBIAN_FRONTEND: noninteractive
expose: 3000
entrypoint: ["node", "/app/app.js"]
runs:
- echo 'APT::Install-Recommends "0";' > /etc/apt/apt.conf.d/01norecommends
modules:
- name: build-app
type: shell
source:
type: git
url: https://github.com/mirkobrombin/node-sample
branch: main
commit: latest
commands:
- mv /sources/build-app /app
- cd /app
- npm i
- npm run build</code>
</pre>
</div>
<p class="text-xl text-white mt-6">
This image uses a single module to build a Node.js application from a Git repository. The application is
then installed and built using <code class="bg-gray-800 p-1 rounded-lg shadow-lg glass-effect">npm</code>.</p>
<p>Then it exposes the port <code class="bg-gray-800 p-1 rounded-lg shadow-lg glass-effect">3000</code> and sets the entrypoint to <code class="bg-gray-800 p-1 rounded-lg shadow-lg glass-effect">node /app/app.js</code>.</p>
</section>

<section class="mb-10">
<h2 class="text-3xl text-white font-bold mb-4">Compile Vib from Source</h2>
<p class="text-xl text-white mb-6">
This recipe demonstrates how to compile Vib from source using a Vib recipe. While this looks like a
dumb idea, it's a great way to learn how to use Vib.</p>
<div class="bg-gray-800 px-6 rounded-lg shadow-lg glass-effect overflow-x-auto">
<pre class="text-xl text-gray-300"><code class="language-yaml">
base: debian:sid-slim
labels:
maintainer: My Awesome Team
args:
DEBIAN_FRONTEND: noninteractive
runs:
- echo 'APT::Install-Recommends "0";' > /etc/apt/apt.conf.d/01norecommends
modules:
- name: update
type: shell
commands:
- apt update

- name: vib
type: go
source:
type: git
url: https://github.com/vanilla-os/vib
branch: main
commit: latest
buildVars:
GO_OUTPUT_BIN: /usr/bin/vib
modules:
- name: golang
type: apt
source:
packages:
- golang
- ca-certificates</code>
</pre>
</div>
</section>
<p class="text-xl text-white mt-6">
This recipe goes a step further by using three different modules, where two of them are nested. Basically
we have the following modules:
</p>
<ul class="text-xl text-white mt-6 list-disc">
<li class="mb-4">
<p class="text-xl text-white mt-6">
<b>update</b> is a simple <code class="bg-gray-800 p-1 rounded-lg shadow-lg glass-effect">shell</code> module that updates the package list of the system.
</p>
</li>
<li>
<p class="text-xl text-white">
<b>vib</b> is a <code class="bg-gray-800 p-1 rounded-lg shadow-lg glass-effect">go</code> module that compiles Vib from source. There are some important details here:
</p>
<ul class="text-xl text-white my-4 list-disc list-inside pl-4">
<li class="mb-4"><code class="bg-gray-800 p-1 rounded-lg shadow-lg glass-effect">source</code> is a <code class="bg-gray-800 p-1 rounded-lg shadow-lg glass-effect">git</code> source that points to the Vib repository, Vib will automatically
clone the repository and place it in the <code class="bg-gray-800 p-1 rounded-lg shadow-lg glass-effect">project/sources</code> directory. We are explicitly
specifying the <code class="bg-gray-800 p-1 rounded-lg shadow-lg glass-effect">branch</code> and <code class="bg-gray-800 p-1 rounded-lg shadow-lg glass-effect">commit</code> to obtain the latest version of Vib.</li>
<li class="mb-4"><code class="bg-gray-800 p-1 rounded-lg shadow-lg glass-effect">buildVars</code> is a map of environment variables that will be used during the build process. In
this case, we are setting the <code class="bg-gray-800 p-1 rounded-lg shadow-lg glass-effect">GO_OUTPUT_BIN</code> variable to <code class="bg-gray-800 p-1 rounded-lg shadow-lg glass-effect">/usr/bin/vib</code>, which
means that the Vib binary will be placed in the <code class="bg-gray-800 p-1 rounded-lg shadow-lg glass-effect">/usr/bin</code> directory of the image. Vib will
pass these variables to the build process.</li>
<li><code class="mb-4 bg-gray-800 p-1 rounded-lg shadow-lg glass-effect">modules</code> is a list of modules that will be executed in the context of the <code class="bg-gray-800 p-1 rounded-lg shadow-lg glass-effect">go</code>
module. These takes precedence over the top-level modules.</li>
</ul>
</li>
<li class="mb-4">
<p class="text-xl text-white">
<b>golang</b> is an <code class="bg-gray-800 p-1 rounded-lg shadow-lg glass-effect">apt</code> module that installs the <code class="bg-gray-800 p-1 rounded-lg shadow-lg glass-effect">golang</code> and <code class="bg-gray-800 p-1 rounded-lg shadow-lg glass-effect">ca-certificates</code>
packages. Vib converts these instructions into apt commands, also it will ask for a cleanup as the final
step, to ensure apt removes any unnecessary packages no longer required.
</p>
</li>
</ul>
</div>

<section class="bg-gray-800 text-white mt-20 py-20 text-center">
<h2 class="text-3xl font-bold mb-4">Ready to Go Deeper?</h2>
<p class="text-xl mb-8">Vanilla OS uses Vib to build system images. Discover more recipes and examples on Atlas.</p>
<a href="https://images.vanillaos.org/#/"
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-full transition duration-300">
Discover More
</a>
</section>

<footer class="bg-gray-800 py-12">
<div class="container mx-auto text-center">
<ul class="flex flex-col md:flex-row md:justify-center md:space-x-8 space-y-4 md:space-y-0">
<li><a href="https://images.vanillaos.org" class="hover:text-gray-300">Examples</a></li>
<li><a href="https://docs.vanillaos.org/collections/vib" class="hover:text-gray-300">Documentation</a>
</li>
<li><a href="https://vanillaos.org/community" class="hover:text-gray-300">Support</a></li>
<li><a href="https://github.com/vanilla-os/vib" class="hover:text-gray-300">Source Code</a></li>
<li><a href="https://fabricators.ltd/en/contact.html" class="hover:text-gray-300">Enterprise</a></li>
</ul>
<div class="mt-8">
<p>&copy; 2024 <a href="https://vanillaos.org/" class="hover:text-gray-300">Vanilla OS</a>. All rights
reserved. Sponsored by <a href="https://fabricators.ltd"
class="hover:text-gray-300">fabricators.ltd</a></p>
</div>
</div>
</footer>


<script>
document.getElementById('menu-button').addEventListener('click', function () {
var menu = document.getElementById('menu');
if (menu.classList.contains('hidden')) {
menu.classList.remove('hidden');
} else {
menu.classList.add('hidden');
}
});
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/a11y-dark.min.css" />
<script>hljs.highlightAll();</script>
</body>

</html>
4 changes: 2 additions & 2 deletions docs/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@
<div class="hidden w-full lg:inline-flex lg:flex-grow lg:w-auto" id="menu">
<div
class="lg:inline-flex lg:flex-row lg:ml-auto lg:w-auto w-full lg:items-center items-start flex flex-col lg:h-auto">
<a href="https://images.vanillaos.org"
<a href="/examples"
class="text-gray-300 hover:text-white px-3 py-2 rounded">Examples</a>
<a href="https://docs.vanillaos.org/collections/vib"
class="text-gray-300 hover:text-white px-3 py-2 rounded">Documentation</a>
Expand Down Expand Up @@ -180,7 +180,7 @@ <h2 class="text-3xl font-bold mb-4">Get Started with Vib</h2>
<footer class="bg-gray-800 py-12">
<div class="container mx-auto text-center">
<ul class="flex flex-col md:flex-row md:justify-center md:space-x-8 space-y-4 md:space-y-0">
<li><a href="https://images.vanillaos.org" class="hover:text-gray-300">Examples</a></li>
<li><a href="/examples" class="hover:text-gray-300">Examples</a></li>
<li><a href="https://docs.vanillaos.org/collections/vib" class="hover:text-gray-300">Documentation</a>
</li>
<li><a href="https://vanillaos.org/community" class="hover:text-gray-300">Support</a></li>
Expand Down

0 comments on commit 86043f4

Please sign in to comment.