fix: footer issue with news posts & issues on the sides

TeaClientMC · Aug 25, 2024 · cc93ece · cc93ece
1 parent e616713
commit cc93ece
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 36 deletions.
diff --git a/src/content/config.ts b/src/content/config.ts
@@ -8,6 +8,7 @@ const news = defineCollection({
 		pubDate: z.coerce.date(),
 		banner: z.string(),
 		bannerSize: z.number(),
+		extraFooterClass: z.string(),
 		author: reference("authors"),
 	}),
 });

diff --git a/src/content/news/_template.mdx b/src/content/news/_template.mdx
@@ -3,6 +3,7 @@ title: example
 desc: example desc
 banner: path/to/banner
 author: eveeifyeve
+extraFooterClass: mb-[90%]
 bannerSize: 100
 link: 'https://teaclient.net/news'
 pubDate: 2024-03-19

diff --git a/src/content/news/updates/annoucing-our-wiki-25-8-24.mdx b/src/content/news/updates/annoucing-our-wiki-25-8-24.mdx
@@ -2,6 +2,7 @@
 title: Introducing our wiki
 desc: Introducing our wiki a wiki for both the developer and the user community.
 banner: /content/wiki-release1.png
+extraFooterClass: mt-[45%]
 author: eveeifyeve
 bannerSize: 100
 link: 'https://teaclient.net/news'

diff --git a/src/content/news/updates/new-staffaplications-19-3-24.mdx b/src/content/news/updates/new-staffaplications-19-3-24.mdx
@@ -2,6 +2,7 @@
 title: New Staff Applications!
 desc: Our New Staff Applications are now avalible for all to use.
 banner: /content/staff-app1.png
+extraFooterClass: mt-[45%]
 author: eveeifyeve
 bannerSize: 100
 link: 'https://teaclient.net/news'

diff --git a/src/layouts/newspost.astro b/src/layouts/newspost.astro
@@ -11,8 +11,8 @@ import { Image } from "astro:assets";
 import "../styles/style.css";
 
 interface Props {
-	post: CollectionEntry<"news">;
-	className?: string;
+  post: CollectionEntry<"news">;
+  className?: string;
 }
 
 const { post, className } = Astro.props;
@@ -29,14 +29,15 @@ const Sociallogosizes = 24;
 <Header />
 <div
   class={twMerge(
-  	`h-screen text-[var(--text)] my-[5%] mx-[5%] bg-[var(--nav-color)] rounded-lg  ${className}`,
+    `h-screen text-[var(--text)] my-[5%] mx-[5%] bg-[var(--nav-color)] h-full rounded-lg  ${className}`,
   )}
 >
   <div
     class="flex justify-between w-full bg-neutral-900 text-neutral-400 rounded-t-lg mr-5 left-0 space-x-2 p-4"
   >
     <a class="hover:text-white transition ease-in-out delay-75" href="/news"
-    >&lt;- Back to News Articles</a>
+      >&lt;- Back to News Articles</a
+    >
     Published on: {post.data.pubDate.toLocaleDateString() ?? ""}
   </div>
 
@@ -53,7 +54,9 @@ const Sociallogosizes = 24;
     </div>
 
     <h1 class="text-2xl">{post.data.title ?? ""}</h1>
-    <slot />
+    <div class="mx-5">
+      <slot />
+    </div>
   </div>
   <div class="flex justify-between bg-neutral-900 rounded-b-lg mt-3">
     <div class="flex flex-col ml-10 mb-5">
@@ -70,39 +73,35 @@ const Sociallogosizes = 24;
     {
       authorData.socials && (
         <div class="flex gap-x-2 mr-4 mt-10">
-          {
-            authorData.socials.github && (
-              <a
-                href={authorData.socials.github}
-                class="text-gray-500 hover:text-gray-700"
-              >
-                <Image
-                  src={GithubSVG}
-                  alt="Github Logo"
-                  width={Sociallogosizes}
-                  height={Sociallogosizes}
-                />
-              </a>
-            )
-          }
-          {
-            authorData.socials.discordServer && (
-              <a
-                href={authorData.socials.discordServer}
-                class="text-blue-500 hover:text-blue-700"
-              >
-                <Image
-                  src={DiscordSVG}
-                  alt="Github Logo"
-                  width={Sociallogosizes}
-                  height={Sociallogosizes}
-                />
-              </a>
-            )
-          }
+          {authorData.socials.github && (
+            <a
+              href={authorData.socials.github}
+              class="text-gray-500 hover:text-gray-700"
+            >
+              <Image
+                src={GithubSVG}
+                alt="Github Logo"
+                width={Sociallogosizes}
+                height={Sociallogosizes}
+              />
+            </a>
+          )}
+          {authorData.socials.discordServer && (
+            <a
+              href={authorData.socials.discordServer}
+              class="text-blue-500 hover:text-blue-700"
+            >
+              <Image
+                src={DiscordSVG}
+                alt="Github Logo"
+                width={Sociallogosizes}
+                height={Sociallogosizes}
+              />
+            </a>
+          )}
         </div>
       )
     }
   </div>
 </div>
-<Footer />
+<Footer extraClass={post.data.extraFooterClass} />