Banner full-screen

Change working to newer/older
fug update npm modules

src/content/content.ts

@@ -3,10 +3,10 @@ import { z, defineCollection } from "astro:content";
 const postsCollection = defineCollection({
     type: "content",
     schema: z.object({
-        draft: z.boolean().optional(),
+        draft: z.boolean().optional().default(false),
         title: z.string(),
         description: z.string(),
-        pubDate: z.date(),
+        date: z.string().transform((str) => new Date(str)),
         tags: z.array(z.string()),
     }),
 });
@@ -14,7 +14,7 @@ const postsCollection = defineCollection({
 const projectsCollection = defineCollection({
     type: "content",
     schema: z.object({
-        draft: z.boolean().optional(),
+        draft: z.boolean().optional().default(false),
         title: z.string(),
         description: z.string(),
         tags: z.array(z.string()),

src/layouts/Layout.astro

@@ -42,11 +42,14 @@ const { title} = Astro.props;
         </main>
     </body>
     <script>
+        function update(element: HTMLElement) {
+            element.style.top = `${window.scrollY * 0.75 }px`;
+            // element.style.transform = `scale(${(window.scrollY * 0.0001) + 1})`;
+            // element.style.filter = `blur(${window.scrollY * 0.005}px)`;
+        }
+
         const img = document.querySelector(".banner > img") as HTMLImageElement;
-        document.addEventListener("scroll", () => {
-            img.style.top = `${window.scrollY}px`;
-            img.style.transform = `scale(${(window.scrollY / 10000) + 1})`;
-            img.style.filter = `blur(${window.scrollY / 100}px)`;
-        })
+        document.addEventListener("scroll", () => update(img))
+        document.addEventListener("DOMContentLoaded", () => update(img))
     </script>
 </html>

src/layouts/Markdown.astro

@@ -40,14 +40,14 @@ const { post, prev, next, base } = Astro.props;
                 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256">
                     <path d="M224,128a8,8,0,0,1-8,8H59.31l58.35,58.34a8,8,0,0,1-11.32,11.32l-72-72a8,8,0,0,1,0-11.32l72-72a8,8,0,0,1,11.32,11.32L59.31,120H216A8,8,0,0,1,224,128Z"></path>
                 </svg>
-                Last
+                Newer
             </a>
         )}
     </li>
     <li>
         {next && (
             <a class="button" href=`${base}/${next.slug}` id="next">
-                Next
+                Older
                 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256">
                     <path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path>
                 </svg>

src/styles/_banner.scss

@@ -1,9 +1,12 @@
 .banner {
-    margin: 0 -16px;
+    margin: 0;
 
-    position: relative;
+    width: 100%;
+    height: 100vh;
 
-    height: 700px;
+    position: absolute;
+    top: 0;
+    left: 0;
 
     box-shadow: 0 8px 8px rgba(#000, 0.3);
 

src/styles/_main.scss

@@ -1,5 +1,5 @@
 main {
-    margin: -500px auto 0;
+    margin: 200px auto 0;
     padding: 32px;
 
     width: 100%;