alt-orchestra/talos
1
0
Fork 0
Code Issues Pull Requests Actions 27 Packages Projects Releases Wiki Activity

feat: add a basic architectural diagram and a call to action

Browse Source 
- add an architecture diagram
- add a call-to-action button on the front page
- clean up some lint issues
- adjust the way the "chips" image is displayed
- move the K8s certified logo to the "Features" section

Signed-off-by: Tim Gerla <tim@gerla.net>
This commit is contained in:
Tim Gerla 2020-01-09 10:23:34 -05:00 committed by Andrew Rynhard
parent d0476dbc93
commit d6f5ff3414
9 changed files with 98 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
docs/website/assets/css/main.css
View File

@ -87,4 +87,12 @@ p a:hover {
.section-docs .page-heading {
@apply mb-1;
}
.teal-cta-button {
@apply bg-logo-teal text-white font-bold py-2 px-4 rounded;
}
.teal-cta-button:hover {
@apply bg-logo-teal-darker;
}
/* purgecss end ignore */

1
docs/website/assets/images/talos-arch.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 91 KiB

2
docs/website/components/Content.vue
View File

@ -19,7 +19,7 @@
Edit this page
</a>
</div>
<div class="border-t pt-4" v-html="doc.content"></div>
<div v-html="doc.content" class="border-t pt-4"></div>
</article>
</template>

2
docs/website/components/DocumentationDropdown.vue
View File

@ -17,8 +17,8 @@
<li v-for="option in options" :key="option.version" class="">
<a
:href="option.url"
class="rounded-t py-2 px-4 block whitespace-no-wrap"
@click="handleClick(option)"
class="rounded-t py-2 px-4 block whitespace-no-wrap"
>{{ version(option) }}</a
>
</li>

46
docs/website/components/Footer.vue
View File

@ -1,26 +1,36 @@
<template>
<footer>
<div class="flex flex-col items-center my-3">
<img class="cncf" src="/images/cncf-color.png" alt="" />
<p>
We are a
<a href="https://cncf.io" target="_blank"
>Cloud Native Computing Foundation</a
>
member.
</p>
</div>
<div>
<a class="inline-block no-underline color-inherit" href="/">
© 2019 Talos Systems, Inc.
</a>
</div>
</footer>
<div>
<footer>
<div class="pb-32 lg:pb-64">
<div class="flex flex-col items-center my-3">
<img class="cncf" src="/images/cncf-color.png" alt="" />
<p class="pt-2">
We are a
<a href="https://cncf.io" target="_blank"
>Cloud Native Computing Foundation</a
>
member.
</p>
</div>
<div class="text-center">
<a class="inline-block no-underline color-inherit" href="/">
© 2019 Talos Systems, Inc.
</a>
</div>
</div>
</footer>
</div>
</template>
<style>
body {
background-image: url(~assets/images/chips_bg_v1.svg);
background-position: center bottom;
background-repeat: no-repeat;
}
footer {
@apply bg-white flex flex-col items-center font-sans justify-between py-5;
@apply flex flex-col items-center font-sans justify-between py-5;
}
footer a {

8
docs/website/components/Sidebar.vue
View File

@ -4,31 +4,31 @@
<li
v-for="entry in $store.state.sidebar.menu"
:key="entry.title"
class="py-2"
@click="selected = entry.title"
class="py-2"
>
<a
class="sidebar-category"
:href="'#' + entry.path"
@click="handleClick(entry)"
class="sidebar-category"
>
<span class="relative">{{ entry.title }}</span>
</a>
<ul class="py-0 pl-4">
<li v-for="item in entry.items" :key="item.path" class="ml-0">
<a
class="sidebar-item"
:href="'#' + item.path"
@click="handleClick(item)"
class="sidebar-item"
>
<span class="relative">{{ item.title }}</span>
</a>
<ul class="py-0 pl-4">
<li v-for="child in item.children" :key="child.path" class="ml-0">
<a
class="sidebar-child"
:href="'#' + child.path"
@click="handleClick(child)"
class="sidebar-child"
>
<span class="relative">{{ child.title }}</span>
</a>

2
docs/website/components/Terminal.vue
View File

@ -8,9 +8,9 @@
<button
v-for="cast in casts"
:key="cast.src"
@click="handleClick(cast.src, cast.cols, cast.rows)"
class="bg-primary-color-500 text-white font-semibold m-1 p-1 rounded"
style="width: 100px"
@click="handleClick(cast.src, cast.cols, cast.rows)"
>
<span class="mr-1">{{ cast.title }}</span>
</button>

89
docs/website/pages/index.vue
View File

@ -1,32 +1,46 @@
<template>
<div id="landing-page" class="c-rich-text">
<div class="w-auto lg:w-1/2 h-auto mx-auto md:mt-10 mb-16 px-4">
<div class="text-center py-8 m-0">
<h1>What is Talos?</h1>
</div>
<div class="w-auto lg:w-3/4 h-auto mx-auto md:mt-10 mb-16 px-4 bg-white">
<div class="flex flex-wrap justify-center items-center">
<div class="px-4 md:px-2 md:w-3/4 text-xl text-gray-700">
<div class="text-xl text-gray-700 lg:w-1/2">
<div class="text-center py-8 m-0">
<h1>What is Talos?</h1>
</div>
<p>
Talos is a modern OS designed to be secure, immutable, and minimal.
Its purpose is to host Kubernetes clusters, so it is tightly
integrated with Kubernetes.
</p>
<p>
Talos is based on the Linux kernel, and supports most cloud
platforms, bare metal, and most virtualization platforms. All system
management is done via an API, and there is no shell or interactive
console.
</p>
<div class="py-4 flex">
<p class="flex-1 text-sm text-gray-600 mr-2">
It takes about 3 minutes to launch a small Talos cluster on your
laptop inside Docker.
</p>
<div class="flex-1 text-center pb-4 m-0">
<a
href="https://www.talos.dev/docs/v0.3/#v0.3/en/guides/getting-started"
>
<button class="teal-cta-button">
Try it now
</button></a
>
</div>
</div>
</div>
<div class="w-1/3 md:w-1/6 md:ml-8 pt-4 md:pt-0">
<a
href="https://landscape.cncf.io/category=certified-kubernetes-installer&format=card-mode&grouping=category"
target="_blank"
>
<img
src="/images/certified-kubernetes-color.png"
alt="Certified Kubernetes Logo"
/></a>
<div class="w-full lg:w-1/2 p-16 pr-0">
<img
src="~/assets/images/talos-arch.svg"
alt="A description of the basic Talos architecture."
/>
</div>
</div>
</div>
@ -72,7 +86,7 @@
</div>
</div>
<div class="w-1/2 h-auto mx-auto mb-20">
<div class="w-1/2 h-auto mx-auto">
<div class="text-center pt-6">
<h1>Built with Modern Technology</h1>
</div>
@ -100,7 +114,7 @@
</div>
</div>
<div class="w-3/4 h-auto mx-auto pb-12 mb-20">
<div class="w-3/4 h-auto mx-auto pb-8">
<div class="text-center">
<h1>Features</h1>
</div>
@ -153,38 +167,45 @@
</div>
<div>
<h2 class="text-center">Immutable</h2>
<div>
<p>
Talos improves its security posture further by mounting the root
filesystem as read-only and removing any host-level access by
traditional means such as a shell and SSH.
</div>
</p>
</div>
</div>
<div
class="md:grid grid-columns-2 grid-gap-12 justify-center md:w-2/3 md:mx-auto"
class="md:grid grid-columns-2 grid-gap-12 justify-center w-2/3 mx-auto"
>
<div>
<h2 class="text-center">Ephemeral</h2>
<div>
<p>
Talos runs in memory from a SquashFS, and persists nothing, leaving
the primary disk entirely to Kubernetes.
</div>
</p>
</div>
<div>
<h2 class="text-center">Current</h2>
<div>
<p>
We are committed to staying current with the latest stable versions
of Kubernetes, and Linux.
</div>
</div>
<div>
<img
class="hidden"
src="https://placeholder.pics/svg/300/DEDEDE/555555/some%20nifty%20image%20here"
/>
</p>
</div>
</div>
</div>
<div class="pb-8">
<a
href="https://landscape.cncf.io/category=certified-kubernetes-installer&format=card-mode&grouping=category"
target="_blank"
>
<img
class="h-48 mx-auto"
src="/images/certified-kubernetes-color.png"
alt="Certified Kubernetes Logo"
/></a>
</div>
</div>
</template>
@ -200,16 +221,6 @@ export default {
</script>
<style>
#landing-page {
height: 100%;
background: url(~assets/images/chips_bg_v1.svg) no-repeat center center fixed;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
background-position: center bottom;
}
.logo {
display: block;
width: 189px;

4
docs/website/tailwind.config.js
View File

@ -22,6 +22,10 @@ module.exports = {
800: '#174F59',
900: '#0F353B'
},
'logo-teal': {
default: '#32AFC5',
darker: '#2c95a8'
},
'logo-colors': {
1: '#32AFC5',
2: '#6D9CBC',