LAYOUTS! Yes! now most the dashboard and page routes have proper layo…

…uts! (#12)
withstudiocms · May 1, 2024 · 833115c · 833115c
1 parent 9997b37
commit 833115c
Show file tree

Hide file tree

Showing 24 changed files with 694 additions and 617 deletions.
diff --git a/packages/studioCMS/src/components/BaseHead.astro b/packages/studioCMS/src/components/BaseHead.astro
@@ -6,7 +6,7 @@ import '../styles/global.css';
 interface Props {
 	title: string;
 	description: string;
-	image?: string;
+	image?: string | undefined;
 }
 
 const canonicalURL = new URL(Astro.url.pathname, Astro.site);

diff --git a/packages/studioCMS/src/layouts/BlogIndex.astro b/packages/studioCMS/src/layouts/BlogIndex.astro
@@ -0,0 +1,105 @@
+---
+// @ts-expect-error - This is a missing type definition for the `astro:db` import since its a virtual module during Astro Runtime
+import { SiteConfig, Blog, asc, db } from 'astro:db';
+import BaseHead from '../components/BaseHead.astro';
+import Footer from '../components/Footer.astro';
+import Header from '../components/Header.astro';
+
+const ConfigArray = await db.select().from(SiteConfig);
+const contextConfig = ConfigArray.pop();
+
+type Props = {
+	title: string;
+	description: string;
+	heroImage?: string;
+};
+
+const { title, description, heroImage } = Astro.props;
+
+const pageDescription = `${description} - ${contextConfig.description}`;
+const pageTitle = `${title} | ${contextConfig.title}`;
+
+---
+
+<!doctype html>
+<html lang="en">
+	<head>
+		<BaseHead title={pageTitle} description={pageDescription} image={heroImage}/>
+		<style>
+			main {
+				width: 960px;
+			}
+			ul {
+				display: flex;
+				flex-wrap: wrap;
+				gap: 2rem;
+				list-style-type: none;
+				margin: 0;
+				padding: 0;
+			}
+			ul li {
+				width: calc(50% - 1rem);
+			}
+			ul li * {
+				text-decoration: none;
+				transition: 0.2s ease;
+			}
+			ul li:first-child {
+				width: 100%;
+				margin-bottom: 1rem;
+				text-align: center;
+			}
+			ul li:first-child img {
+				width: 100%;
+			}
+			ul li:first-child .title {
+				font-size: 2.369rem;
+			}
+			ul li img {
+				margin-bottom: 0.5rem;
+				border-radius: 12px;
+			}
+			ul li a {
+				display: block;
+			}
+			.title {
+				margin: 0;
+				color: rgb(var(--black));
+				line-height: 1;
+			}
+			.date {
+				margin: 0;
+				color: rgb(var(--gray));
+			}
+			ul li a:hover h4,
+			ul li a:hover .date {
+				color: rgb(var(--accent));
+			}
+			ul a:hover img {
+				box-shadow: var(--box-shadow);
+			}
+			@media (max-width: 720px) {
+				ul {
+					gap: 0.5em;
+				}
+				ul li {
+					width: 100%;
+					text-align: center;
+				}
+				ul li:first-child {
+					margin-bottom: 0;
+				}
+				ul li:first-child .title {
+					font-size: 1.563em;
+				}
+			}
+		</style>
+	</head>
+	<body>
+		<Header />
+
+        <slot />
+
+		<Footer />
+	</body>
+</html>
diff --git a/packages/studioCMS/src/layouts/Dashboard.astro b/packages/studioCMS/src/layouts/Dashboard.astro
@@ -0,0 +1,141 @@
+---
+// @ts-expect-error - This is a missing type definition for the `astro:db` import since its a virtual module during Astro Runtime
+import { SiteConfig, db } from 'astro:db';
+import BaseHead from '../components/BaseHead.astro';
+import Footer from '../components/Footer.astro';
+import Header from '../components/Header.astro';
+
+const ConfigArray = await db.select().from(SiteConfig);
+const contextConfig = ConfigArray.pop();
+
+type Props = {
+	title: string;
+	heroImage?: string;
+	hideDashboardButton?: boolean;
+};
+
+const { title, heroImage, hideDashboardButton } = Astro.props;
+
+const pageTitle = `${title} | ${contextConfig.title}`;
+
+---
+
+<!doctype html>
+<html lang="en">
+	<head>
+		<BaseHead title={pageTitle} description={contextConfig.description} image={heroImage}/>
+		<style>
+			.dash {
+				padding: 2rem;
+				border: 2px solid #ccc;
+				border-radius: 5rem;
+				background-color: #fff;
+				margin: 2rem;
+
+			}
+			bold {
+				font-weight: bold;
+			}
+			.font-small {
+				font-size: 1rem;
+			}
+			.dash-header {
+				display: flex;
+				justify-content: space-between;
+			}
+			.right {
+				display: flex;
+				justify-content: flex-end;
+				padding-right: 4rem;
+			}
+			.left {
+				display: flex;
+				justify-content: flex-start;
+				padding-left: 4rem;
+			}
+			button {
+				padding: 1rem;
+				background-color: rgb(202, 0, 0);
+				font-weight: bold;
+				color: #fff;
+				border: none;
+				border-radius: 99rem;
+				cursor: pointer;
+			}
+			.btn {
+				padding: 1rem;
+				background-color: rgb(0, 37, 202);
+				font-weight: bold;
+				color: #fff;
+				border: none;
+				border-radius: 99rem;
+				cursor: pointer;
+			}
+			input {
+				background-color: #f4f4f4;
+				border-radius: 10px;
+				padding: 0.25rem;
+				border: rgb(124, 124, 124) 1px solid;
+				width: 35vmax;
+			}
+			textarea {
+				background-color: #f4f4f4;
+				border-radius: 10px;
+				padding: 0.25rem;
+				border: rgb(124, 124, 124) 1px solid;
+				width: 100%;
+			}
+			label {
+				font-size: large;
+				font-weight: bold;
+			}
+			.info-text {
+				font-size: small;
+				display: inline;
+				font-style: italic;
+			}
+			info {
+				font-size: small;
+				display: inline;
+				font-style: italic;
+			}
+			.btn-edit {
+				padding: 1rem;
+				background-color: rgb(169, 0, 211);
+				font-weight: bold;
+				color: #fff;
+				border: none;
+				border-radius: 99rem;
+				cursor: pointer;
+			}
+			form {
+				display: flex;
+				justify-content: flex-end;
+				padding-right: 4rem;
+			}
+		</style>
+	</head>
+	<body>
+		<Header title={contextConfig.title} />
+
+        <div class="dash">
+            <div class="dash-header">
+				{hideDashboardButton ? <div></div> : (
+					<form class="left" method="post" action={import.meta.env.BASE_URL+"dashboard"}>
+						<button class="btn">Dashboard</button>
+					</form>
+				)}
+                <form class="right" method="post" action={import.meta.env.BASE_URL+"dashboard/logout"}>
+                    <button>Logout</button>
+                </form>
+            </div>
+            <center>
+                <h1>{title}</h1>
+            </center>
+
+			<slot />
+
+		</div>
+		<Footer />
+	</body>
+</html>
diff --git a/packages/studioCMS/src/layouts/Default.astro b/packages/studioCMS/src/layouts/Default.astro
@@ -7,12 +7,24 @@ import Header from '../components/Header.astro';
 
 const ConfigArray = await db.select().from(SiteConfig);
 const contextConfig = ConfigArray.pop();
+
+type Props = {
+	title: string;
+	description: string;
+	heroImage?: string;
+};
+
+const { title, description, heroImage } = Astro.props;
+
+const pageDescription = `${description} - ${contextConfig.description}`;
+const pageTitle = `${title} | ${contextConfig.title}`;
+
 ---
 
 <!doctype html>
 <html lang="en">
 	<head>
-		<BaseHead title={contextConfig.title} description={contextConfig.description} />
+		<BaseHead title={pageTitle} description={pageDescription} image={heroImage}/>
 	</head>
 	<body>
 		<Header title={contextConfig.title} />

diff --git a/packages/studioCMS/src/layouts/Starter.astro → packages/studioCMS/src/layouts/Setup.astro b/packages/studioCMS/src/layouts/Starter.astro → packages/studioCMS/src/layouts/Setup.astro
diff --git a/packages/studioCMS/src/pages/404.astro b/packages/studioCMS/src/pages/404.astro
@@ -1,9 +1,9 @@
 ---
-import Starter from '../layouts/Starter.astro';
+import Default from '../layouts/Default.astro';
 import sitemap from 'sitemap-ext:config';
 sitemap(false); // opt-out
 ---
-<Starter>
+<Default title='Error 404' description='Error 404 - Page Not Found'>
 	<center>
 		<h1>Error 404</h1>
 		<h2>Page not found</h2>
@@ -20,7 +20,7 @@ sitemap(false); // opt-out
 
 	</center>
 
-</Starter>
+</Default>
 
 <style>
 

diff --git a/packages/studioCMS/src/pages/about.astro b/packages/studioCMS/src/pages/about.astro
@@ -3,7 +3,7 @@
 import { Pages, db, eq } from 'astro:db';
 import sitemap from 'sitemap-ext:config';
 import Config from 'virtual:astro-studio-cms:config';
-import Layout from '../layouts/BlogPost.astro';
+import Layout from '../layouts/Default.astro';
 import { renderMarkDoc } from '../utils/markdoc';
 import { markdown } from '../utils/marked';
 
@@ -25,14 +25,10 @@ function contentRenderer() {
 }
 ---
 
-<Layout
-	title={post.title}
-	description={post.description}
-	publishedAt={post.publishedAt}
-	heroImage={post.heroImage}
->
-	<Fragment 
-		set:html={contentRenderer()} />
+<Layout title={post.title} description={post.description} heroImage={post.heroImage}>
+	<main>
+		<Fragment set:html={contentRenderer()} />
+	</main>
 </Layout>
 <style>
     .btn {

diff --git a/packages/studioCMS/src/pages/blog/[...slug].astro b/packages/studioCMS/src/pages/blog/[...slug].astro
@@ -40,17 +40,4 @@ function contentRenderer() {
 	updatedAt={post.updatedAt} >
 	<Fragment 
 		set:html={contentRenderer()} />
-</BlogPost>
-
-<style>
-    .btn {
-        padding: 0.5rem;
-        background-color: rgb(184, 184, 184);
-        font-weight: bold;
-        color: #202020;
-        border: 1px solid #202020;
-        border-radius: 99rem;
-        cursor: pointer;
-		float: right;
-    }
-</style>
+</BlogPost>