feat(docs): home page redesign

.changeset/metal-carrots-speak.md

@@ -0,0 +1,5 @@
+---
+"pinorama-docs": minor
+---
+
+Home page redesign

packages/pinorama-client/package.json

@@ -21,9 +21,7 @@
     }
   },
   "types": "./dist/types/pinorama-client.d.ts",
-  "files": [
-    "dist"
-  ],
+  "files": ["dist"],
   "scripts": {
     "clean": "rimraf dist node_modules",
     "build": "rollup --config"

packages/pinorama-docs/.vitepress/config/en.ts

@@ -0,0 +1,55 @@
+import { defineConfig } from "vitepress"
+import { version } from "../../../pinorama-studio/package.json"
+
+export const en = defineConfig({
+  lang: "en-US",
+
+  themeConfig: {
+    nav: [
+      {
+        text: "Guide",
+        link: "/guide/getting-started/",
+        activeMatch: "/guide/getting-started/"
+      },
+      {
+        text: "Studio",
+        link: "/guide/pinorama-studio/",
+        activeMatch: "/guide/pinorama-studio/"
+      },
+      {
+        text: "Client",
+        link: "/guide/pinorama-client/",
+        activeMatch: "/guide/pinorama-client/"
+      },
+      {
+        text: "Server",
+        link: "/guide/pinorama-server/",
+        activeMatch: "/guide/pinorama-server/"
+      },
+      {
+        text: "Transport",
+        link: "/guide/pinorama-transport/",
+        activeMatch: "/guide/pinorama-transport/"
+      },
+      {
+        text: `v${version}`,
+        items: [
+          {
+            text: "Release Notes",
+            link: "https://github.com/pinoramajs/pinorama/releases"
+          }
+        ]
+      }
+    ],
+
+    footer: {
+      message: "Open Source ❤ MIT Licensed",
+      copyright: "© 2024 Francesco Pasqua & Contributors"
+    },
+
+    docFooter: {
+      prev: "Next",
+      next: "Previous"
+    }
+  }
+})

packages/pinorama-docs/.vitepress/config/index.ts

@@ -0,0 +1,28 @@
+import { defineConfig } from "vitepress"
+import { en } from "./en"
+
+export default defineConfig({
+  title: "Pinorama",
+
+  lastUpdated: true,
+  cleanUrls: true,
+  metaChunk: true,
+
+  head: [["link", { rel: "icon", href: "/pinorama-logo.webp" }]],
+
+  themeConfig: {
+    logo: "/pinorama-logo.webp",
+
+    socialLinks: [
+      { icon: "github", link: "https://github.com/pinoramajs/pinorama" }
+    ],
+
+    search: {
+      provider: "local"
+    }
+  },
+
+  locales: {
+    root: { label: "English", ...en }
+  }
+})

packages/pinorama-docs/.vitepress/style/vars.css

@@ -0,0 +1,55 @@
+/**
+ * Colors
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-c-brand-1: #59b9ff;
+  --vp-c-brand-2: #0a7aff;
+  --vp-c-brand-3: #0085ff;
+}
+
+.dark {
+  --vp-c-brand-1: #59b9ff;
+  --vp-c-brand-2: #0a7aff;
+  --vp-c-brand-3: #0085ff;
+}
+
+/**
+ * Component: Button
+ * -------------------------------------------------------------------------- */
+.dark {
+  --vp-button-brand-text: #ffffff;
+  --vp-button-brand-active-text: #ffffff;
+  --vp-button-brand-hover-text: #ffffff;
+}
+
+/**
+ * Component: Home
+ * -------------------------------------------------------------------------- */
+
+ :root {
+  --vp-home-hero-name-color: transparent;
+  --vp-home-hero-name-background: -webkit-linear-gradient(
+    120deg,
+    #0085ff 30%,
+    #59b9ff
+  );
+  --vp-home-hero-image-background-image: linear-gradient(
+    -45deg,
+    #0085ff60 50%,
+    #59b9ff60 50%
+  );
+  --vp-home-hero-image-filter: blur(30px);
+}
+
+@media (min-width: 640px) {
+  :root {
+    --vp-home-hero-image-filter: blur(56px);
+  }
+}
+
+@media (min-width: 960px) {
+  :root {
+    --vp-home-hero-image-filter: blur(72px);
+  }
+}

packages/pinorama-docs/.vitepress/theme/index.ts

@@ -0,0 +1,7 @@
+import type { Theme } from "vitepress"
+import DefaultTheme from "vitepress/theme"
+import "../style/vars.css"
+
+export default {
+  extends: DefaultTheme
+} satisfies Theme

packages/pinorama-docs/index.md

@@ -1,25 +1,62 @@
 ---
-# https://vitepress.dev/reference/default-theme-home-page
 layout: home
 
+title: Pinorama
+titleTemplate: Explore your logs smarter and faster
+
 hero:
-  name: "Pinorama"
-  text: "Explore your pino logs with a flexible suite."
-  tagline: Supercharged by Pino, Orama, and Fastify. 
+  name: Pinorama
+  text: Explore your logs smarter and faster
+  tagline: A beautiful yet powerful Node.js log viewer
   actions:
     - theme: brand
-      text: Markdown Examples
-      link: /markdown-examples
+      text: Get Started
+      link: /guide/
+    - theme: alt
+      text: Pinorama Studio
+      link: /guide/install/
     - theme: alt
-      text: API Examples
-      link: /api-examples
+      text: View on GitHub
+      link: https://github.com/pinoramajs/pinorama
+  image:
+    src: "/pinorama-logo.webp"
+    alt: Pinorama
 
 features:
-  - title: Feature A
-    details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
-  - title: Feature B
-    details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
-  - title: Feature C
-    details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
+  - title: Orama Powered
+    icon: 🚀
+    details: Easily filter logs by facets and perform searches with the Orama super powers.
+  - title: Fastify Integration
+    icon: 🔋
+    details: Connect your Fastify app to a Pinorama and send logs with the transport plugin.
+  - title: Piped Output
+    icon: 📡
+    details: Pipe Node.js logs from any process to Pinorama and view them in real-time.
+  - title: NDJSON Support
+    icon: 🍋
+    details: Configure Pinorama to handle NDJSON files and display them in a structured way.
+  - title: Custom Styles
+    icon: 🎨
+    details: Customize log lines with your own colors and styles to make them stand out.
+  - title: ESM Support
+    icon: 📦
+    details: Built with ESM in mind, ensuring it works with modern JS standards.
 ---
 
+<style>
+.pinorama-screenshot {
+  margin-top: 4rem;
+}
+
+@media (min-width: 960px) {
+  .pinorama-screenshot {
+    width: 80%;
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+</style>
+
+<img class="pinorama-screenshot" src="/pinorama-screenshot.webp" alt="Pinorama" />
+
+