From d2862ec43ab3dd6b81ecfc35f8ad3251caac28d3 Mon Sep 17 00:00:00 2001
From: Korbs <korbs@sudovanilla.com>
Date: Fri, 7 Jun 2024 03:16:38 -0400
Subject: [PATCH] Add layouts

---
 src/layouts/Document.astro | 180 +++++++++++++++++++++++++++++++++++++
 src/layouts/Splash.astro   | 136 ++++++++++++++++++++++++++++
 2 files changed, 316 insertions(+)
 create mode 100644 src/layouts/Document.astro
 create mode 100644 src/layouts/Splash.astro

diff --git a/src/layouts/Document.astro b/src/layouts/Document.astro
new file mode 100644
index 0000000..c7ee218
--- /dev/null
+++ b/src/layouts/Document.astro
@@ -0,0 +1,180 @@
+---
+// Environment Variables
+import {
+    ORG_NAME,
+    FEEDBACK_ENABLED,
+    FEELBACK_ENABLED,
+    REVERT_LAYOUT,
+    WHITELABEL
+} from '@utils/GetConfig'
+
+// Properties
+const { Title, Feedback, Feelback } = Astro.props
+
+// Components
+import Head from '@components/global/Head.astro'
+import Header from '@components/global/Header.astro'
+import FeelbackYesNo from "astro-feelback/components/FeelbackYesNo.astro";
+
+// Styles
+import "@styles/feelback.css";
+---
+
+<Head/>
+<Header/>
+<div class="page">
+    <div class="content">
+        <div class="sidebar">
+            <h2>Sidebar Header</h2>
+            <a href="#">Document Title</a>
+            <a href="#">Document Title</a>
+            <a href="#">Document Title</a>
+            <a href="#">Document Title</a>
+            <h2>Sidebar Header</h2>
+            <a href="#">Document Title</a>
+            <a href="#">Document Title</a>
+            <a href="#">Document Title</a>
+            <h2>Sidebar Header</h2>
+            <a href="#">Document Title</a>
+            <a href="#">Document Title</a>
+            <a href="#">Document Title</a>
+            <a href="#">Document Title</a>
+            <a href="#">Document Title</a>
+        </div>
+        <div class="document">
+            <h1>{Title}</h1>
+            <slot/>
+            <!-- <hr/>
+            <p>Last Updated: null</p> -->
+            {
+                FEEDBACK_ENABLED ?
+                    // Feelback
+                    FEELBACK_ENABLED ?
+                        <FeelbackYesNo
+                            contentSetId="2308b02b-8f9f-437e-9780-5ad4c0db016e"
+                            preset="like-dislike"
+                            textQuestion="Did this article help?"
+                            textAnswer="Thank you for your feedback."
+                        />
+                        :
+                        null
+                    :
+                    null
+           }
+        </div>
+    </div>
+    <div class="footer">
+        <div class="footer-start">
+            <p>© {ORG_NAME}. All right reserved.</p>
+        </div>
+        <div class="footer-end">
+            {WHITELABEL ?
+                <p>Built with <a href="#">Pandora Butterfly</a></p>
+                :
+                null
+            }
+        </div>
+    </div>
+</div>
+
+<!-- Style is temporary here -->
+<style is:global lang="scss">
+body {
+    max-width: 1200px;
+    margin: auto;
+    font-family: Arial, Helvetica, sans-serif;
+    background: #0f0f0f;
+    color: white;
+}
+
+a {
+    color: white;
+    text-decoration: underline;
+}
+
+blockquote {
+    margin: 0px;
+    background: #323232;
+    border-radius: 4px;
+    padding: 12px 24px;
+    border-left: 4px white solid;
+    p {
+        margin: 0px;
+    }
+}
+
+header {
+    background: #232323;
+    width: 100%;
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    z-index: 1;
+    .header-content {
+        max-width: 1200px;
+        margin: auto;
+    }
+}
+
+.page {
+    position: relative;
+    min-height: 100vh;
+    .content {
+        padding-top: 90px;
+        display: grid;
+        display: flex;
+        flex-direction: row;
+        gap: 24px;
+        .sidebar {
+            min-width: 250px;
+            display: flex;
+            flex-direction: column;
+            gap: 12px;
+            a {
+                text-decoration: none;
+                font-size: 14px;
+                color: #898989;
+            }
+        }
+        .document {
+            background: #232323;
+            border-radius: 4px;
+            padding: 12px 24px;
+            height: max-content;
+            .feelback-q {
+                justify-content: center;
+                padding: 24px 0px;
+                svg {
+                    color: white;
+                }
+                .feelback-btn.active {
+                    background: white;
+                    border-radius: 3rem;
+                    svg {
+                        color: black;
+                    }
+                }
+            }
+        }
+    }
+    .footer {
+        position: absolute;
+        padding-bottom: 24px;
+        bottom: 0;
+        width: 100%;
+        height: 2.5rem;
+        display: flex;
+        justify-content: space-between;
+    }
+}
+</style>
+
+{REVERT_LAYOUT ?
+    <style>
+        .content {
+            flex-direction: row-reverse;
+        }
+    </style>
+    :
+    null
+}
\ No newline at end of file
diff --git a/src/layouts/Splash.astro b/src/layouts/Splash.astro
new file mode 100644
index 0000000..f827103
--- /dev/null
+++ b/src/layouts/Splash.astro
@@ -0,0 +1,136 @@
+---
+// Environment Variables
+import {
+    ORG_NAME,
+    FEEDBACK_ENABLED,
+    FEELBACK_ENABLED,
+    REVERT_LAYOUT,
+    WHITELABEL
+} from '@utils/GetConfig'
+
+// Properties
+const { Title, Feedback, Feelback } = Astro.props
+
+// Components
+import Head from '@components/global/Head.astro'
+import Header from '@components/global/Header.astro'
+import FeelbackYesNo from "astro-feelback/components/FeelbackYesNo.astro";
+
+// Styles
+import "@styles/feelback.css";
+---
+
+<Head/>
+<Header/>
+<div class="page">
+    <div class="content">
+        <div class="document">
+            <h1>{Title}</h1>
+            <slot/>
+        </div>
+    </div>
+    <div class="footer">
+        <div class="footer-start">
+            <p>© {ORG_NAME}. All right reserved.</p>
+        </div>
+        <div class="footer-end">
+            {WHITELABEL ?
+                <p>Built with <a href="#">Pandora Butterfly</a></p>
+                :
+                null
+            }
+        </div>
+    </div>
+</div>
+
+<!-- Style is temporary here -->
+<style is:global lang="scss">
+body {
+    max-width: 1200px;
+    margin: auto;
+    font-family: Arial, Helvetica, sans-serif;
+    background: #0f0f0f;
+    color: white;
+}
+
+a {
+    color: white;
+    text-decoration: underline;
+}
+
+blockquote {
+    margin: 0px;
+    background: #323232;
+    border-radius: 4px;
+    padding: 12px 24px;
+    border-left: 4px white solid;
+    p {
+        margin: 0px;
+    }
+}
+
+header {
+    background: #232323;
+    width: 100%;
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    z-index: 1;
+    .header-content {
+        max-width: 1200px;
+        margin: auto;
+    }
+}
+
+.page {
+    position: relative;
+    min-height: 100vh;
+    .content {
+        padding-top: 90px;
+        display: grid;
+        display: flex;
+        flex-direction: row;
+        gap: 24px;
+        .sidebar {
+            min-width: 250px;
+            display: flex;
+            flex-direction: column;
+            gap: 12px;
+            a {
+                text-decoration: none;
+                font-size: 14px;
+                color: #898989;
+            }
+        }
+        .document {
+            background: #232323;
+            border-radius: 4px;
+            padding: 12px 24px;
+            height: max-content;
+            .feelback-q {
+                justify-content: center;
+                padding: 24px 0px;
+                svg {
+                    color: white;
+                }
+                .feelback-btn.active {
+                    background: white;
+                    border-radius: 3rem;
+                    svg {
+                        color: black;
+                    }
+                }
+            }
+        }
+    }
+    .footer {
+        position: absolute;
+        padding-bottom: 24px;
+        bottom: 0;
+        width: 100%;
+        height: 2.5rem;
+        display: flex;
+        justify-content: space-between;
+    }
+}
+</style>
\ No newline at end of file