update

test/src/components/HeaderInfo.astro

@@ -0,0 +1,69 @@
+---
+const {
+    Title,
+    OriginalSource,
+    DirectSource,
+    OSI,
+    DSI,
+    CreatedBy
+} = Astro.props
+---
+
+<div class="header-info">
+    <div class="hi-start">
+        <h2>{Title}</h2>
+        <p>{CreatedBy}</p>
+    </div>
+    <div class="hi-end">
+        <a href={OriginalSource}><img src={OSI}/> Original Source</a>
+        <a href={DirectSource}><img src={DSI}/> Direct Source</a>
+    </div>
+</div>
+
+<style>
+.header-info {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 12px 0px;
+}
+.hi-start * {
+    color: white;
+    margin: 0px;
+}
+.hi-start {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+.hi-start p {
+    color: gray;
+}
+.hi-end {
+    display: flex;
+    gap: 12px;
+    align-items: center;
+}
+.hi-end a {
+    color: white;
+    background: #232323;
+    border-radius: 3rem;
+    text-align: left;
+    display: flex;
+    align-items: center;
+    font-size: 16px;
+    text-decoration: none;
+    gap: 12px;
+    padding: 6px 12px;
+    transition: 0.3s filter;
+}
+.hi-end a:hover {
+    filter: brightness(2);
+    transition: 0.3s filter;
+}
+.hi-end a img {
+    width: 32px;
+    height: 32px;
+    object-fit: contain;
+}
+</style>

test/src/components/Info.astro

@@ -1,13 +1,4 @@
----
-const { Title, Description } = Astro.props
----
-
 <div class="info">
-    <h2>{Title}</h2>
-    <p>{Description}</p>
-    <hr />
-    <slot />
-    <hr/>
     <center>
         <p style="display: flex; gap: 12px; justify-content: center; color: black;">
             <a href="https://ark.sudovanilla.org/MinPluto/Zorn#installation">Documentation</a>

test/src/layouts/Default.astro

@@ -1,11 +1,4 @@
 ---
-// Properites
-const {
-    Title,
-    Description,
-    Page
-} = Astro.props
-
 // Components
 import Header from '@components/Header.astro'
 import Info from '@components/Info.astro'
@@ -23,7 +16,7 @@ import Switcher from '@components/Switcher.astro'
         <br/>
         <br/>
         <slot/>
-        <Info Title={Title} Description={Description}>
+        <Info>
             <div class="info-section"><slot name="info"></slot></div>
             <div class="code-section"><slot name="code"></slot></div>
         </Info>

test/src/pages/multi.astro

@@ -18,7 +18,7 @@ import Info from '@components/Info.astro'
                 SeekColor="#f28438"
             />
             
-            <Info Title="Ennie and Yoyki: Non-Girly Games" Description="Created by Daniyar Yambushev">
+            <Info Title="Ennie and Yoyki: Non-Girly Games" CreatedBy="Created by Daniyar Yambushev">
                 <p>Source: <a href="https://www.youtube.com/watch?v=MuyJtxzyU3o">YouTube</a></p>
                 <p>This demo pulls from <a href="https://ocean.sudovanilla.org/media/videos/Ennie%20and%20Yoyki/Ennie%20and%20Yoyki%3A%20Non-Girly%20Games.mp4">SudoVanilla Ocean</a>.</p>
             </Info>
@@ -33,7 +33,7 @@ import Info from '@components/Info.astro'
                 AudioAttributes=""
                 PlayerName="TMOTW"
             />
-            <Info Title="The Mark On The Wall" Description="Created by Anderson Wright">
+            <Info Title="The Mark On The Wall" CreatedBy="Created by Anderson Wright">
                 <p>Source: <a href="https://vimeo.com/989082177">https://vimeo.com/989082177</a></p>
                 <p>This demo pulls from: <a href="https://ocean.sudovanilla.org/media/videos/The%20Mark%20On%20The%20Wall/1080.mp4">https://ocean.sudovanilla.org/media/videos/The%20Mark%20On%20The%20Wall/1080.mp4</a></p>
                 <p>This demo also pulls from: <a href="https://ocean.sudovanilla.org/media/videos/The%20Mark%20On%20The%20Wall/audio.mp4">https://ocean.sudovanilla.org/media/videos/The%20Mark%20On%20The%20Wall/audio.mp4</a></p>

test/src/pages/present.astro

@@ -6,7 +6,7 @@ import Default from 'src/layouts/Default.astro'
 import {Presentation} from '@minpluto/zorn'
 ---
 
-<Default Page="/" Title="Presentation" Description="">
+<Default Page="/" Title="Presentation" CreatedBy="">
     <!-- <Zorn
         PlayerName="Apple_imac_colors"
         Title=""