update

astro.config.mjs

@@ -1,64 +1,96 @@
-import { defineConfig } from 'astro/config'
-import react from '@astrojs/react'
-import markdoc from '@astrojs/markdoc'
-import AutoImport from 'astro-auto-import'
-import keystatic from '@keystatic/astro'
-import node from '@astrojs/node'
-import robotsTxt from 'astro-robots-txt'
-import mdx from '@astrojs/mdx'
-import matomo from 'astro-matomo'
+import { defineConfig } from 'astro/config';
+import markdoc from '@astrojs/markdoc';
+import AutoImport from 'astro-auto-import';
+import keystatic from '@keystatic/astro';
+import node from '@astrojs/node';
+import robotsTxt from 'astro-robots-txt';
+import mdx from '@astrojs/mdx';
+import matomo from 'astro-matomo';
+import vue from "@astrojs/vue";
 
 // https://astro.build/config
 export default defineConfig({
   site: 'https://sudovanilla.org',
-  trailingSlash: 'always', // Slug issue if not enabled
+  trailingSlash: 'always',
+  // Slug issue if not enabled
   redirects: {
     '/docs/': '/docs/minpluto/introduction/',
     '/docs/minpluto': '/docs/minpluto/introduction/' // ?
   },
-  integrations: [react(), markdoc(), ...(process.env.SKIP_KEYSTATIC ? [] : [keystatic()]),
-    AutoImport({
-      imports: [
-        './src/components/keystatic/Image.astro',
-        './src/components/init/SoftwareItem.astro',
-      ],
-    }),
-    mdx(), // This must initalzied after AutoImport, not before
-    matomo({
-      enabled: import.meta.env.PROD, // Only load in production
-      host: "https://stats.sudovanilla.org/",
-      setCookieDomain: "*.sudovanilla.org",
-      trackerUrl: "js/", // defaults to matomo.php
-      srcUrl: "js/", // defaults to matomo.js
-      siteId: 1,
-      heartBeatTimer: 5,
-      disableCookies: true,
-      debug: false,
-    }),
-    robotsTxt({
-    policy: [
-      { userAgent: 'Googlebot', disallow: '/' },
-      { userAgent: 'Bingbot', disallow: '/' },
-      { userAgent: '404checker', disallow: '/' },
-      { userAgent: 'MJ12Bot', disallow: '/' },
-      { userAgent: 'AspiegelBot', disallow: '/' },
-      { userAgent: 'PetalBot', disallow: '/' },
-      { userAgent: 'AhrefsBot', disallow: '/' },
-      { userAgent: 'SEMrushBot', disallow: '/' },
-      { userAgent: 'DotBot', disallow: '/' },
-      { userAgent: 'Slurp', disallow: '/' },
-      { userAgent: 'DuckDuckBot', disallow: '/' },
-      { userAgent: 'YandexBot', disallow: '/' },
-      { userAgent: 'MauiBot', disallow: '/' },
-      { userAgent: 'baiduspider', disallow: '/' },
-      { userAgent: 'adidxbot', disallow: '/' },
-      { userAgent: 'microsoftbot', disallow: '/' },
-      { userAgent: 'OtherBot', disallow: '/' },
-    ]
-  })],
+  integrations: [markdoc(), ...(process.env.SKIP_KEYSTATIC ? [] : [keystatic()]), AutoImport({
+    imports: ['./src/components/keystatic/Image.astro', './src/components/init/SoftwareItem.astro']
+  }), mdx(),
+  // This must initalzied after AutoImport, not before
+  matomo({
+    enabled: import.meta.env.PROD,
+    // Only load in production
+    host: "https://stats.sudovanilla.org/",
+    setCookieDomain: "*.sudovanilla.org",
+    trackerUrl: "js/",
+    // defaults to matomo.php
+    srcUrl: "js/",
+    // defaults to matomo.js
+    siteId: 1,
+    heartBeatTimer: 5,
+    disableCookies: true,
+    debug: false
+  }), robotsTxt({
+    policy: [{
+      userAgent: 'Googlebot',
+      disallow: '/'
+    }, {
+      userAgent: 'Bingbot',
+      disallow: '/'
+    }, {
+      userAgent: '404checker',
+      disallow: '/'
+    }, {
+      userAgent: 'MJ12Bot',
+      disallow: '/'
+    }, {
+      userAgent: 'AspiegelBot',
+      disallow: '/'
+    }, {
+      userAgent: 'PetalBot',
+      disallow: '/'
+    }, {
+      userAgent: 'AhrefsBot',
+      disallow: '/'
+    }, {
+      userAgent: 'SEMrushBot',
+      disallow: '/'
+    }, {
+      userAgent: 'DotBot',
+      disallow: '/'
+    }, {
+      userAgent: 'Slurp',
+      disallow: '/'
+    }, {
+      userAgent: 'DuckDuckBot',
+      disallow: '/'
+    }, {
+      userAgent: 'YandexBot',
+      disallow: '/'
+    }, {
+      userAgent: 'MauiBot',
+      disallow: '/'
+    }, {
+      userAgent: 'baiduspider',
+      disallow: '/'
+    }, {
+      userAgent: 'adidxbot',
+      disallow: '/'
+    }, {
+      userAgent: 'microsoftbot',
+      disallow: '/'
+    }, {
+      userAgent: 'OtherBot',
+      disallow: '/'
+    }]
+  }), vue()],
   output: 'server',
   adapter: node({
-    mode: 'standalone',
+    mode: 'standalone'
   }),
   server: {
     port: 2014,
@@ -67,4 +99,4 @@ export default defineConfig({
   devToolbar: {
     enabled: false
   }
-})
+});

package.json

@@ -17,10 +17,12 @@
     "@astrojs/node": "^8.1.0",
     "@astrojs/partytown": "^2.0.4",
     "@astrojs/react": "^3.0.7",
-    "@astrojs/vue": "^4.1.0",
+    "@astrojs/vue": "^4.5.0",
+    "@iconoir/vue": "^7.8.0",
     "@keystatic/astro": "^5.0.0",
     "@keystatic/core": "^0.5.11",
     "@meilisearch/instant-meilisearch": "^0.17.0",
+    "@minpluto/zorn": "^0.4.5",
     "@types/react": "^18.2.8",
     "@types/react-dom": "^18.0.11",
     "astro": "^4.6.3",
@@ -28,10 +30,10 @@
     "astro-json-element": "^1.1.4",
     "astro-matomo": "^1.6.0",
     "astro-robots-txt": "^1.0.0",
+    "astro-tooltips": "^0.6.2",
     "astro-useragent": "^4.0.1",
     "axios": "^1.6.8",
     "docs-searchbar.js": "^2.5.0",
-    "iconoir-react": "^7.6.0",
     "json-truncate": "^3.0.0",
     "meilisearch": "^0.38.0",
     "node-fetch": "^3.3.2",
@@ -42,7 +44,8 @@
     "react-dom": "^18.2.0",
     "react-instantsearch": "^7.7.2",
     "reshaped": "^2.11.6",
-    "untruncate-json": "^0.0.1"
+    "untruncate-json": "^0.0.1",
+    "vue": "^3.4.38"
   },
   "devDependencies": {
     "sass": "^1.75.0"

src/components/Feature.astro

@@ -10,7 +10,8 @@ const {
   CTA_Secondary,
   CTA_Secondary_Link,
   Label,
-  LabelVarient
+  LabelVarient,
+  Custom
 } = Astro.props;
 ---
 
@@ -41,7 +42,7 @@ const {
     </div>
   </div>
   <div class="lc-end">
-    <img loading="lazy" src={Image} alt={ImageAlt} style={ImageProperties} />
+    {Custom ? <slot/> : <img loading="lazy" src={Image} alt={ImageAlt} style={ImageProperties} />}
   </div>
 </div>
 

src/components/Hero.astro

@@ -1,25 +1,26 @@
 ---
 // Properties
-const { Title, Description, VideoSrc, VideoCredit, VideoPoster } = Astro.props;
+const { Title, Description, VideoSrc, UseImage, UseVideo, Credit, VideoPoster, Image } = Astro.props;
 
 // Components
 import SudoVanillaLogo from "@components/global/SudoVanillaLogo.astro";
 import SudoVanilla from "@components/global/SudoVanillaLogo.astro";
 
 // Icons
-import { InfoCircle } from "iconoir-react";
+import { InfoCircle } from "@iconoir/vue";
 ---
 
 <div class="landing-hero">
-  <video autoplay muted loop src={VideoSrc} poster={VideoPoster}></video>
+  {UseImage ? <img src={Image}/> : null}
+  {UseVideo ? <video autoplay muted loop src={VideoSrc} poster={VideoPoster}></video> : null}
   <!-- Shoelace needs JS, this is a fallback solution -->
   <noscript>
-    <p id="video-credit">{VideoCredit}</p>
+    <p id="video-credit">{Credit}</p>
   </noscript>
   <sl-tooltip
     id="video-credit-js"
     class="with-js"
-    content={VideoCredit}
+    content={Credit}
     placement="top-end"
     style="--sl-tooltip-arrow-size: 0; --max-width: 600px;"
   >
@@ -46,6 +47,14 @@ import { InfoCircle } from "iconoir-react";
       object-fit: cover;
       pointer-events: none;
     }
+    img {
+      width: 100%;
+      height: 500px;
+      border-radius: 10px;
+      opacity: 0.32;
+      object-fit: cover;
+      pointer-events: none;
+    }
     #video-credit,
     #video-credit-js {
       position: absolute;
@@ -53,7 +62,7 @@ import { InfoCircle } from "iconoir-react";
       bottom: 0px;
       right: 0px;
       font-size: 10px;
-      opacity: 0.4;
+      opacity: 0.8;
       margin: 32px;
       a {
         color: white;

src/components/Service.astro

@@ -10,7 +10,7 @@ const {
 } = Astro.props
 
 // Icons
-import {CheckCircleSolid, XmarkCircleSolid} from 'iconoir-react'
+import {CheckCircleSolid, XmarkCircleSolid} from '@iconoir/vue'
 ---
 
 <div class="service">

src/components/docs/sidebar.astro

@@ -1,6 +1,6 @@
 ---
 const { Selected, Project, Search } = Astro.props
-import {ArrowDownCircle} from "iconoir-react"
+import {ArrowDownCircle} from "@iconoir/vue"
 ---
 
 <div class="mobile-docs-dropdown">

src/components/global/Footer.astro

@@ -1,5 +1,5 @@
 ---
-import { Copyright } from "iconoir-react";
+import { Copyright } from "@iconoir/vue";
 ---
 
 <div class="footer">

src/components/global/Head.astro

@@ -1,5 +1,7 @@
 ---
 const { Title, Description } = Astro.props;
+import { ViewTransitions } from 'astro:transitions';
+import { Tooltips } from 'astro-tooltips';
 ---
 
 <head>
@@ -28,4 +30,10 @@ const { Title, Description } = Astro.props;
   />
   <script type="module" src="/@shoelace-style/shoelace/cdn/shoelace.js"
   ></script>
+
+  <!-- ViewTransition API -->
+  <ViewTransitions />
+
+  <!-- Tooltip -->
+  <Tooltips interactive={false} delay={[15, 14000]} />
 </head>

src/components/global/Header.astro

@@ -23,7 +23,7 @@ import SudoVanilla from "@components/global/SudoVanillaLogo.astro";
 // Icons
 import {
   MenuScale
-} from 'iconoir-react'
+} from '@iconoir/vue'
 
 ---
 <mobilebar>
@@ -57,9 +57,7 @@ import {
           <a class="header-link-item" href="#" title={StatusText}>Status</a>
         </noscript>
 
-        <sl-tooltip class="with-js" content={StatusText} placement="bottom-end" style="--sl-tooltip-arrow-size: 0; --max-width: 500px;">
-          <a class="header-link-item" href="https://status.sudovanilla.org/">Status</a>
-        </sl-tooltip>
+        <a title={StatusText} class="header-link-item" href="https://status.sudovanilla.org/">Status</a>
       </div>
     </div>
     {

src/layouts/Default.astro

@@ -10,10 +10,11 @@ import Footer from '@components/global/Footer.astro'
 
 // Styles
 import "@styles/index.scss";
+import { fade } from "astro:transitions";
 ---
 
 <Head />
-<Header MobileTitle={MobileTitle} NoSubHeader={NoSubHeader}>
+<Header transition:persist MobileTitle={MobileTitle} NoSubHeader={NoSubHeader}>
   <slot name="sub-header" />
 </Header>
 <div class="page-content">

src/layouts/Document.astro

@@ -29,7 +29,7 @@ export async function getStaticPaths() {
 export const prerender = true;
 
 // Icons
-import { BookmarkBook, InputSearch, KeyCommand, ReportColumns, Search } from "iconoir-react";
+import { BookmarkBook, InputSearch, KeyCommand, ReportColumns, Search } from "@iconoir/vue";
 
 // Hightlight Active Project
 if (ProjectCollection === 'minpluto') {

src/layouts/Init.astro

@@ -7,11 +7,11 @@ import Sidebar from "@components/docs/sidebar.astro";
 import SearchModal from '@components/docs/SearchBox.astro'
 
 // Icons
-import { AppWindow, ChatBubbleEmpty, EyeClosed, InfoCircle, InputSearch, Linux, Mail, MailOpen, MediaVideoFolder, SendMail, ServerConnection, Terminal, WebWindowEnergyConsumption, Windows } from "iconoir-react";
+import { AppWindow, ChatBubbleEmpty, EyeClosed, InfoCircle, InputSearch, Linux, Mail, MailOpen, MediaVideoFolder, SendMail, ServerConnection, Terminal, WebWindowEnergyConsumption, Windows } from "@iconoir/vue";
 
 // Get Content
 import { getCollection, getEntry } from "astro:content";
-import { OpenInBrowser } from "iconoir-react";
+import { OpenInBrowser } from "@iconoir/vue";
 
 const { slug } = Astro.params;
 if (!slug) throw new Error("Slug not found");

src/pages/blog/[slug].astro

@@ -1,6 +1,6 @@
 ---
 // Icons
-import { Calendar } from "iconoir-react";
+import { Calendar } from "@iconoir/vue";
 
 // Get Colletion and Slug
 import { getCollection, getEntry } from "astro:content";

src/pages/docs/minpluto/[slug].astro

@@ -3,7 +3,7 @@
 import Document from '@layouts/Document.astro'
 
 // Icons
-import {ServerConnection,PeaceHand} from "iconoir-react";
+import {ServerConnection,PeaceHand} from "@iconoir/vue";
 ---
 
 <Document ProjectCollection="minpluto">

src/pages/docs/penpot-desktop/[slug].astro

@@ -3,7 +3,7 @@
 import Document from '@layouts/Document.astro'
 
 // Icons
-import {ServerConnection,PeaceHand, QuestionMark, WifiOff, DownloadCircle, ShieldAlert, ChatBubble} from "iconoir-react";
+import {ServerConnection,PeaceHand, QuestionMark, WifiOff, DownloadCircle, ShieldAlert, ChatBubble} from "@iconoir/vue";
 ---
 
 <Document ProjectCollection="penpot-desktop">

src/pages/docs/zorn/[slug].astro

@@ -3,7 +3,7 @@
 import Document from '@layouts/Document.astro'
 
 // Icons
-import {ServerConnection,PeaceHand} from "iconoir-react";
+import {ServerConnection,PeaceHand} from "@iconoir/vue";
 ---
 
 <Document ProjectCollection="zorn">

src/pages/index.astro

@@ -7,14 +7,14 @@ import Hero from "@components/Hero.astro";
 import Heading from "@components/Heading.astro";
 import Posts from "@components/blog/posts.astro";
 import LargeCard from "@components/Feature.astro";
+import {Zorn} from "@minpluto/zorn"
 
 // List Posts
 import { getCollection } from "astro:content";
 const posts = await getCollection("posts");
 
-
 // Icons
-import { BookmarkBook, ReportColumns } from "iconoir-react";
+import { BookmarkBook, ReportColumns } from "@iconoir/vue";
 ---
 
 <Default MobileTitle="SudoVanilla" NoSubHeader>
@@ -22,9 +22,9 @@ import { BookmarkBook, ReportColumns } from "iconoir-react";
     <Hero
       Title="SudoVanilla"
       Description="Counting on the Open Web"
-      VideoSrc="https://md.sudovanilla.org/videos/mp4/hero.mp4"
-      VideoPoster="https://md.sudovanilla.org/images/hero-poster.png"
-      VideoCredit="Drone Footage of Limmernsee in Switzerland by SwissHumanity Stories on Pexels"
+      UseImage
+      Image="https://images.pexels.com/photos/2026454/pexels-photo-2026454.jpeg"
+      Credit="Spiez, BE, Switzerland. Shot by Tanathip Rattanatum on Pexels."
     />
     <Heading Title="Blog" Description="Tips, Tricks, and Updates">
       <slot slot="icon">
@@ -46,11 +46,21 @@ import { BookmarkBook, ReportColumns } from "iconoir-react";
     />
     <LargeCard
       Title="Zorn Player"
-      Description="HTML5 Web Player"
-      Image="https://md.sudovanilla.org/images/pl.png"
+      Description="Video Player for Astro"
+      Image="https://md.sudovanilla.org/images/Screenshot%20from%202024-08-27%2001-41-34.png"
       CTA_Primary="Documentation"
       CTA_Primary_Link="/docs/zorn/introduction/"
-    />
+      Custom
+    >
+    <Zorn
+      Title="Ennie and Yoyki: Non-Girly Games"
+      Poster="https://md.sudovanilla.org/images/eay-p-v.jpg"
+      Video="https://md.sudovanilla.org/videos/webm/Ennie-and-Yoyki.webm"
+      CustomControlsWithMenu
+      Milieu
+      SettingsMenu
+    ></Zorn>
+    </LargeCard>
     <LargeCard
       Title="Init Privacy"
       Description="Taking Back Control"

src/pages/init/index.astro

@@ -9,7 +9,7 @@ import Posts from "@components/blog/posts.astro";
 import LargeCard from "@components/Feature.astro";
 
 // Icons
-import { BookmarkBook, ReportColumns } from "iconoir-react";
+import { BookmarkBook, ReportColumns } from "@iconoir/vue";
 ---
 
 <Default MobileTitle="Init Privacy">
@@ -17,17 +17,17 @@ import { BookmarkBook, ReportColumns } from "iconoir-react";
     <p class="header-sub-service">Init Privacy</p>
     <div>
       <a href="/init/software/browsers/">Softwares</a>
-      <a href="/init/websites/">Websites</a>
-      <a href="/init/disclaimer/">Disclaimers</a>
+      <a href="/init/software/websites/">Websites</a>
+      <a href="/init/software/disclaimer/">Disclaimers</a>
     </div>
   </Fragment>
   <Fragment slot="body">
     <Hero
       Title="Init Privacy"
       Description="Your data is your business"
-      VideoSrc="https://md.sudovanilla.org/videos/mp4/init-hero.mp4"
-      VideoPoster="https://md.sudovanilla.org/images/init-poster.png"
-      VideoCredit="Video By George Morina on Pexels"
+      UseImage
+      Image="https://images.pexels.com/photos/179993/pexels-photo-179993.jpeg"
+      Credit="Black and White CCTV Cameras. Shot by Thomas Windisch on Pexels."
     />
     <LargeCard
       Title="User Freedom"