Korbs/butterflyvu
1
Fork 0
Code Issues Pull requests Activity

Add layouts

Browse source
This commit is contained in:
Korbs 2024-06-07 03:16:38 -04:00
parent 713141279b
commit d2862ec43a
2 changed files with 316 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

180
src/layouts/Document.astro Normal file
View file

@ -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
}

136
src/layouts/Splash.astro Normal file
View file

@ -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>