Updates docs

docs/src/App.vue

@@ -0,0 +1,12 @@
+<template>
+  <main text="gray-700 dark:gray-200" mb-22>
+    <RouterView />
+  </main>
+  <footer class="mx-auto mt-32 w-full px-4 sm:px-6 lg:px-8">
+    <div class="py-10">
+      <p class="mt-5 text-center text-sm leading-6 text-gray-400">
+        Made with ❤️ by <a href="https://amirraminfar.me">Amir Raminfar</a>.
+      </p>
+    </div>
+  </footer>
+</template>

docs/src/components/BrowserWindow.vue

@@ -0,0 +1,14 @@
+<script setup></script>
+
+<template>
+  <div border="~ solid rounded dark-50" bg="[#121212]">
+    <div flex gap="2" p-2>
+      <div circle-red />
+      <div circle-yellow />
+      <div circle-green />
+    </div>
+    <div class="content">
+      <slot />
+    </div>
+  </div>
+</template>

docs/src/components/CodeBlock.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+const source = ref("");
+const body = $ref<HTMLElement>();
+onMounted(() => {
+  source.value = body?.textContent?.trim() || "";
+});
+
+const { copy, copied, isSupported } = useClipboard({ source });
+</script>
+
+<template>
+  <div flex mx-1 gap-1>
+    <code ref="body" class="not-prose" overflow="y-auto" whitespace-nowrap font-mono text="sm lg:base" @click="copy()">
+      <slot />
+    </code>
+    <a
+      v-if="isSupported"
+      icon-btn
+      ml-auto
+      :class="copied ? 'i-carbon-checkmark' : 'i-carbon-copy'"
+      text-2xl
+      @click="copy()"
+    />
+  </div>
+</template>

docs/src/components/Features.vue

@@ -0,0 +1,46 @@
+<template>
+  <sub-section>
+    <template #title> What's Dozzle </template>
+    <p>
+      Dozzle is a small Docker container which provides a web-based interface for viewing logs of other Docker
+      containers running on the same system.
+    </p>
+    <p>Dozzle is open sourced and officially sponsored by Docker OSS.</p>
+
+    <p>
+      <strong>Real-time log streaming</strong> — allows you to view logs of other Docker containers in real-time. As new
+      log entries are generated, they are streamed to the web interface without needing to refresh the page.
+    </p>
+
+    <p><strong>Live CPU and memory usage</strong> — see historical memory and cpu usage to easily see memory trend.</p>
+
+    <p>
+      <strong>Search across many containers</strong> — quickly search containers using <key-shortcut label="k" /> to
+      find logs for a specifc container.
+    </p>
+
+    <p>
+      <strong>Color-coded logs</strong> — log entries are color-coded and grouped based on their level (error, warning,
+      info, etc.) to help you quickly identify issues.
+    </p>
+
+    <p>
+      <strong>Search</strong> — you can search logs for specific keywords or <code>/regex/</code> making it easy to find
+      relevant log entries.
+    </p>
+
+    <p>
+      <strong>Split screen</strong> — able to view muliple logs at the same by spliting the screen between multiple
+      containers.
+    </p>
+
+    <p>
+      <strong>Simple Authentication</strong> — simple username and password authentication supported out of the box.
+    </p>
+
+    <p>
+      <strong>Lightweight</strong> — a lightweight application written in Go which doesn't consume a lot of memory or
+      cpu. It can be run alongside other containers without causing performance issues.
+    </p>
+  </sub-section>
+</template>

docs/src/components/Hero.vue

@@ -0,0 +1,26 @@
+<script setup></script>
+
+<template>
+  <div p="x-4 lg:y-20" m="b-4" text="gray-700 dark:gray-200">
+    <div grid="~ lg:cols-3 lg:gap-8" h-full mx-auto>
+      <div flex="~ col" text="center" p="x-4">
+        <h1 text-4xl font-light m="t-8 lg:y-auto">
+          <span font-playfair>Dozzle</span> is a modern log viewer for Docker providing efficient and intuitive ways to
+          view and search logs from containers
+        </h1>
+      </div>
+      <div grid="lg:col-span-2" flex m="t-8 lg:t-0">
+        <div my-auto>
+          <browser-window>
+            <video muted loop autoplay playsinline>
+              <source src="../media/dozzle.webm" type="video/webm" />
+              <source src="../media/dozzle.mp4" type="video/mp4" />
+            </video>
+          </browser-window>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>

docs/src/components/Installation.vue

@@ -0,0 +1,14 @@
+<template>
+  <sub-section>
+    <template #title> Installation </template>
+    <p>
+      Dozzle can be install using the Docker command line. Dozzle needs access to <code>docker.sock</code> file to
+      access the logs of other containers. This file is usually located at <code>/var/run/docker.sock</code>. You can
+      mount this file using the <code>-v</code> flag.
+    </p>
+
+    <code-block>
+      docker run --detach --volume=/var/run/docker.sock:/var/run/docker.sock -p 8080:8080 amir20/dozzle
+    </code-block>
+  </sub-section>
+</template>

docs/src/components/KeyShortcut.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+const { label } = $defineProps<{
+  label: string;
+}>();
+</script>
+
+<template>
+  <span border="rounded-lg light-50" bg="light-200" text="dark-200" p-1> ⌘ {{ label }} </span>
+</template>

docs/src/components/SubSection.vue

@@ -0,0 +1,14 @@
+<script setup></script>
+
+<template>
+  <div space-y-20 p="x-4 t-10">
+    <section grid="~ lg:cols-3" gap="y-1 x-6">
+      <h2 text="2xl" tracking-tight>
+        <slot name="title" />
+      </h2>
+      <div grid="lg:col-span-2" prose text-lg max-w-7xl>
+        <slot />
+      </div>
+    </section>
+  </div>
+</template>

docs/src/components/TheFooter.vue

@@ -0,0 +1,16 @@
+<template>
+  <nav text-xl mt-6 inline-flex gap-2>
+    <button icon-btn @click="toggleDark()">
+      <div dark:i-carbon-moon i-carbon-sun />
+    </button>
+
+    <a
+      icon-btn
+      i-carbon-logo-github
+      rel="noreferrer"
+      href="https://github.com/antfu/vitesse-lite"
+      target="_blank"
+      title="GitHub"
+    />
+  </nav>
+</template>

docs/src/components/TheInput.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+const { modelValue } = defineModel<{
+  modelValue: string;
+}>();
+</script>
+
+<template>
+  <input
+    id="input"
+    v-model="modelValue"
+    type="text"
+    v-bind="$attrs"
+    p="x-4 y-2"
+    w="250px"
+    text="center"
+    bg="transparent"
+    border="~ rounded gray-200 dark:gray-700"
+    outline="none active:none"
+  />
+</template>

docs/src/composables/dark.ts

@@ -0,0 +1,2 @@
+export const isDark = useDark()
+export const toggleDark = useToggle(isDark)

docs/src/composables/index.ts

@@ -0,0 +1 @@
+export * from './dark'

docs/src/layouts/default.vue

@@ -0,0 +1,3 @@
+<template>
+  <RouterView />
+</template>

docs/src/layouts/docs.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+const menu = [
+  {
+    name: "What is Dozzle?",
+    path: "/guide/what-is-dozzle",
+  },
+  {
+    name: "Getting Started",
+    path: "/guide/getting-started",
+  },
+];
+</script>
+
+<template>
+  <div>
+    <ul>
+      <li v-for="item in menu" :key="item.path">
+        <router-link :to="item.path">
+          {{ item.name }}
+        </router-link>
+      </li>
+    </ul>
+  </div>
+  <RouterView />
+</template>

docs/src/main.ts

@@ -0,0 +1,15 @@
+import { ViteSSG } from 'vite-ssg'
+import { setupLayouts } from 'virtual:generated-layouts'
+import App from './App.vue'
+import generatedRoutes from '~pages'
+
+import '@unocss/reset/tailwind.css'
+import './styles/main.css'
+import 'uno.css'
+
+const routes = setupLayouts(generatedRoutes)
+
+export const createApp = ViteSSG(
+  App,
+  { routes, base: import.meta.env.BASE_URL },
+)

docs/src/pages/[...all].vue

@@ -0,0 +1,3 @@
+<template>
+  <div>Not Found</div>
+</template>

docs/src/pages/guide/getting-started.md

@@ -0,0 +1,9 @@
+---
+title: Getting started
+---
+
+Getting started 
+<route lang="yaml">
+meta:
+  layout: docs
+</route>

docs/src/pages/guide/what-is-dozzle.md

@@ -0,0 +1,10 @@
+---
+title: What is Dozzle?
+---
+
+What is dozzle?
+
+<route lang="yaml">
+meta:
+  layout: docs
+</route>

docs/src/pages/index.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+defineOptions({
+  name: "IndexPage",
+});
+</script>
+
+<template>
+  <hero />
+  <div mx-auto container space-y-14 divide-y divide="gray-200 dark:gray-800">
+    <features />
+    <installation />
+  </div>
+</template>

docs/src/styles/main.css

@@ -0,0 +1,7 @@
+tml.dark .shiki-light {
+  display: none;
+}
+
+html:not(.dark) .shiki-dark {
+  display: none;
+}