webZine framework fixed

src/components/webzineCard.astro

@@ -1,9 +1,10 @@
 ---
-const { title, url, coverTheme = 'dark' } = Astro.props;
+const { customClasses, url, title, imageSrc, imageAlt } = Astro.props;
+import { Image } from "astro:assets";
 ---
-<li class={ `webzineCard ${coverTheme}` }>
+<li class={ `webzineCard ${customClasses}` }>
     <a href={ url } class="delayed">
         <h2>{ title }</h2>
-        <img src="" width="1024" height="1024" alt="" />
+        <Image src={ imageSrc } alt={ imageAlt } />
     </a>
 </li>

src/layouts/WebzineView.astro → src/components/webzineView.astro

@@ -1,34 +1,29 @@
 ---
-import Shell from '../layouts/Shell.astro';
-const { frontmatter } = Astro.props;
-const urlBlocks = frontmatter.url.split('/');
-urlBlocks.pop();
-const parentFolder = urlBlocks.join('/');
+const { parentFolder, author, pubDate } = Astro.props;
+
 function formatDate(isoDateString: string): string {
     const date = new Date(isoDateString);
     const options: Intl.DateTimeFormatOptions = { year: 'numeric', month: 'long', day: 'numeric' };
     return date.toLocaleDateString('en-US', options);
 }
-const formattedPubDate = formatDate(frontmatter.pubDate);
+const formattedPubDate = formatDate(pubDate);
 ---
-<Shell title={ frontmatter.title } description={ frontmatter.description } author={ frontmatter.author } customClass={ `wz-${frontmatter.id}` }></Shell>
-    <div id="webzineView">
-        <header>
-            <a href={ parentFolder } class="delayed">Back to list</a>
-        </header>
-        <main>
-            <button class="nav" id="prev" aria-label="Previous slide">←</button>
-            <button class="nav" id="next" aria-label="Next slide">→</button>
-            <div id="reel" lang="en" aria-live="assertive">
-                <slot />
-            </div>
-        </main>
-        <footer>
-            <button id="langToggle" class="delayed" aria-label="Change story language">Read in Portuguese</button>
-            <small>Created by { frontmatter.author } in { formattedPubDate }</small>
-        </footer>
-    </div>
-</Shell>
+<div id="webzineView">
+    <header>
+        <a href={ parentFolder } class="delayed">Back to list</a>
+    </header>
+    <main>
+        <button class="nav" id="prev" aria-label="Previous slide">←</button>
+        <button class="nav" id="next" aria-label="Next slide">→</button>
+        <div id="reel" lang="en" aria-live="assertive">
+            <slot />
+        </div>
+    </main>
+    <footer>
+        <button id="langToggle" class="delayed" aria-label="Change story language">Read in Portuguese</button>
+        <small>Created by { author } in { formattedPubDate }</small>
+    </footer>
+</div>
 <style is:global>
 /* Global Styles */
 @font-face {
@@ -270,31 +265,6 @@ blockquote > *:not(:last-child) {
 </style>
 <script>
 document.addEventListener('DOMContentLoaded', function() {
-    // Delayed buttons/links
-    const DELAY = 400;
-    const clickableElements = document.querySelectorAll<HTMLAnchorElement | HTMLButtonElement>('a.delayed, #langToggle');
-    clickableElements.forEach(element => {
-        element.addEventListener('click', function(e) {
-            e.preventDefault();
-            element.classList.add('visible');
-            setTimeout(() => {
-                element.classList.remove('visible');
-                if (element instanceof HTMLAnchorElement) {
-                    window.location.href = element.href;
-                } else if (element.id === 'langToggle') {
-                    const langAttribute = reel ? reel.getAttribute('lang') : null;
-                    if (langAttribute === 'en') {
-                        reel?.setAttribute('lang', 'pt');
-                        element.textContent = 'Read in English';
-                    } else {
-                        reel?.setAttribute('lang', 'en');
-                        element.textContent = 'Read in Portuguese';
-                    }
-                }
-            }, DELAY);
-        });
-    });
-
     // Next/prev buttons on slideshow
     const reel = document.getElementById('reel');
     const nextButton = document.getElementById('next');

src/content/config.ts

@@ -31,4 +31,18 @@ export const collections = {
       title: z.string(),
     }),
   }),
+  'dor-cronica': defineCollection ({
+    schema: ({ image }) => z.object({
+      layout: z.string().default("../../layouts/WebzineView.astro"),
+      title: z.string(),
+      description: z.string(),
+      author: z.string().default("Pedro MC Fernandes"),
+      pubDate: z.date(),
+      cover: image().refine((img) => img.width >= 1024, {
+        message: "Cover image must be at least 1024 pixels wide!",
+      }),
+      coverAlt: z.string(),
+      customClasses: z.string().default("dark"),
+    })
+  }),
 };

src/pages/dor-cronica/drive.md → src/content/dor-cronica/drive.md

@@ -1,12 +1,9 @@
 ---
-layout: ../../layouts/WebzineView.astro
-title: 'Drive'
-id: 'drive'
-description: 'This is my first story.'
-author: 'Pedro MC Fernandes'
+title: "Drive"
+description: "This is my first story"
 pubDate: 2023-07-09
-coverFormat: 'svg'
-coverTheme: 'light'
+cover: "../../assets/dor-cronica/drive/cover.svg"
+coverAlt: "This is the cover image"
 ---
 <div slide="cover">
 

src/content/dor-cronica/test copy.md

@@ -0,0 +1,9 @@
+---
+title: "Drive"
+description: "This is my first story"
+pubDate: 2023-07-09
+cover: "../../assets/dor-cronica/drive/cover.svg"
+coverAlt: "This is the cover image"
+customClasses: "light"
+---
+This is a test

src/content/dor-cronica/test.md

@@ -0,0 +1,9 @@
+---
+title: "Drive"
+description: "This is my first story"
+pubDate: 2023-07-09
+cover: "../../assets/dor-cronica/drive/cover.svg"
+coverAlt: "This is the cover image"
+customClasses: "light"
+---
+This is a test

src/content/extra/footer.md

@@ -1,8 +1,9 @@
 ---
 title: "Footer"
 ---
-Website designed, illustrated and assembled by me, with the help of GPT-4, using <a href="http://2ttf.com/2Y7a9kJ9U4e" title="Whiteboard Beta font page" target="_blank">my script font</a>, <a href="https://www.lexend.com/" title="Lexend's website" target="_blank">Lexend</a>, <a href="https://astro.build/" title="Astro's website" target="_blank">Astro</a>, <a href="https://github.com/anvaka/panzoom" title="panzoom library at GitHub" target="_blank">panzoom</a>, <a href="https://atomiks.github.io/tippyjs/" title="Tippy.js website" target="_blank">Tippy.js</a>, <a href="https://markjs.io/" title="mark.js website" target="_blank">mark.js</a>, and <a href="https://github.com/jsplumb/jsplumb" title="jsPlumb Community library at GitHub" target="_blank">jsPlumb Community</a>.
+Website designed, illustrated and assembled by me, with the help of GPT-4, using <a href="http://2ttf.com/2Y7a9kJ9U4e" title="Whiteboard Beta font page" target="_blank">my script font</a>, <a href="https://www.lexend.com/" title="Lexend's website" target="_blank">Lexend</a>, <a href="https://astro.build/" title="Astro's website" target="_blank">Astro</a>, <a href="https://github.com/anvaka/panzoom" title="panzoom library at GitHub" target="_blank">panzoom</a>, <a href="https://atomiks.github.io/tippyjs/" title="Tippy.js website" target="_blank">Tippy.js</a>, <a href="https://markjs.io/" title="mark.js website" target="_blank">mark.js</a>, <a href="https://apoorv.pro/lozad.js/" title="Lozad.js website" target="_blank">Lozad.js</a>, and <a href="https://github.com/jsplumb/jsplumb" title="jsPlumb Community library at GitHub" target="_blank">jsPlumb Community</a>.
 
 <br>
 
-Unless otherwise stated, copyright Pedro MC Fernandes.
+Unless otherwise stated,<br>
+Copyright, Pedro&nbsp;MC&nbsp;Fernandes

src/layouts/Shell.astro

@@ -588,7 +588,7 @@ import 'tippy.js/dist/tippy.css';
 import Mark from 'mark.js';
 import lozad from 'lozad';
 
-// Images w/ Intersection Observer
+// Images w/ Lozad and Intersection Observer
 const wildFigs = document.querySelectorAll('img, video');
 const observer = lozad(wildFigs);
 observer.observe();
@@ -731,11 +731,6 @@ function initPanzoom() {
 	}
 }
 
-
-
-
-
-
 function highlightText() {
 	const searchTerm = (document.getElementById('highlighter') as HTMLInputElement).value.trim();
 
@@ -755,14 +750,33 @@ function highlightText() {
 }
 document.getElementById('highlighter')?.addEventListener('input', highlightText);
 
-
-
-
-
-
-
 // Initialization
 window.addEventListener('load', function() {
+	// Delayed buttons/links
+	const reel = document.getElementById('reel');
+    const DELAY = 400;
+    const clickableElements = document.querySelectorAll<HTMLAnchorElement | HTMLButtonElement>('a.delayed, #langToggle');
+    clickableElements.forEach(element => {
+        element.addEventListener('click', function(e) {
+            e.preventDefault();
+            element.classList.add('visible');
+            setTimeout(() => {
+                element.classList.remove('visible');
+                if (element instanceof HTMLAnchorElement) {
+                    window.location.href = element.href;
+                } else if (element.id === 'langToggle') {
+                    const langAttribute = reel ? reel.getAttribute('lang') : null;
+                    if (langAttribute === 'en') {
+                        reel?.setAttribute('lang', 'pt');
+                        element.textContent = 'Read in English';
+                    } else {
+                        reel?.setAttribute('lang', 'en');
+                        element.textContent = 'Read in Portuguese';
+                    }
+                }
+            }, DELAY);
+        });
+    });
 
 	// Tippy
 	const titles = Array.from(document.querySelectorAll<HTMLElement>(':not(section):not(h2)[aria-label]'));

src/pages/dor-cronica.astro

@@ -5,16 +5,20 @@ const customClass = "dor-cronica";
 const metaImage = "/meta.png";
 import Shell from '../layouts/Shell.astro';
 import WebzineCard from '../components/webzineCard.astro';
-const allZines = await Astro.glob('../pages/dor-cronica/*.md');
+
+// Content
+import { getCollection } from 'astro:content';
+const allZines = await getCollection('dor-cronica');
 ---
 <Shell title={ title } description={ description } customClass={ customClass } metaImage={ metaImage }>
     <div id="webzineList">
         <h1>{ title }</h1>
         <ul>
             {
-                allZines.sort((a, b) => new Date(b.frontmatter.pubDate).getTime() - new Date(a.frontmatter.pubDate).getTime())
+
+                allZines.sort((a, b) => new Date(b.data.pubDate).getTime() - new Date(a.data.pubDate).getTime())
                     .map((post) => 
-                        <WebzineCard url={post.url} title={post.frontmatter.title} coverTheme={post.frontmatter.coverTheme} />
+                        <WebzineCard customClasses={post.data.customClasses} url={`/${post.collection}/${post.slug}`} title={post.data.title} imageSrc={post.data.cover} imageAlt={post.data.coverAlt} />
                     )
             }
         </ul>
@@ -73,7 +77,7 @@ const allZines = await Astro.glob('../pages/dor-cronica/*.md');
 .webzineCard h2 {
     font-size: 1.5em;
     cursor: inherit;
-    transition: font-size 500ms linear, opacity 500ms linear;
+    transition: font-size 1s linear, opacity 1s linear;
 }
 .webzineCard a.visible h2 {
     font-size: 8em;

src/pages/dor-cronica/[...slug].astro

@@ -0,0 +1,18 @@
+---
+import Shell from '../../layouts/Shell.astro';
+import WebzineView from '../../components/webzineView.astro';
+import { getCollection } from 'astro:content';
+export async function getStaticPaths() {
+    const allZines = await getCollection('dor-cronica');
+    return allZines.map(entry => ({
+        params: { slug: entry.slug }, props: { entry },
+    }));
+};
+const { entry } = Astro.props;
+const { Content } = await entry.render();
+---
+<Shell title={ entry.data.title } description={ entry.data.description } author={ entry.data.author } customClass={ `wz-${entry.slug}` }>
+    <WebzineView parentFolder={`/${entry.collection}`} author={entry.data.author} pubDate={entry.data.pubDate}>
+        <Content />
+    </WebzineView>
+</Shell>

src/pages/index.astro

@@ -322,6 +322,9 @@ section:nth-child(4) :global(article > *) {
 	flex: 0 1 16em;
 	width: 100%;
 	min-height: 2.25em;
+	/* background-color: var(--paper-fade); */
+	/* backdrop-filter: blur(0.25rem); */
+	transition: all 200ms ease-out;
 }
 #highlighter:hover {
 	background-color: var(--paper);