Fix todos and update to V5

astro.config.mjs

@@ -22,14 +22,14 @@ export default defineConfig({
     icon({
       // TODO: Streamline to only include needed
       include: {
-        tabler: ['*'],
-        'simple-line-icons': ['*'],
-        fa: ['*'],
-        carbon: ['*'],
-        fluent: ['*'],
-        ri: ['*'],
-        ph: ['*'],
-        'simple-icons': ['*']
+        tabler: ['brand-youtube', 'brand-medium', 'brand-patreon', 'brand-github', 'brand-linkedin', 'mail', 'brand-bluesky', 'brand-tiktok', 'brand-twitter', 'brand-threads', 'brand-mastodon','menu','chevron-down','rss','brand-discord','download','brand-facebook'],
+        'simple-line-icons': ['social-spotify'],
+        fa: ['podcast'],
+        carbon: ['calendar-heat-map'],
+        fluent: ['people-audience-20-filled'],
+        ri: ['money-euro-circle-fill'],
+        ph: ['pencil-circle-bold'],
+        'simple-icons': ['applepodcasts', 'amazonmusic','pocketcasts']
       }
     }),
     tailwind({

src/content/config.ts → content.config.ts

@@ -1,12 +1,14 @@
 import { z, defineCollection } from 'astro:content';
+import { glob } from 'astro/loaders';
+import defaultBlogImage from '~/src/assets/images/defaults/blog-chinchilla.jpg'
 
 const posts = defineCollection({
-  type: 'content', // v2.5.0 and later
+  // type: 'content', // v2.5.0 and later
+  loader: glob({ pattern: '**/[^_]*.md', base: "./src/content/posts" }),
   schema: ({ image }) => z.object({
     title: z.string(),
     // description: z.string().optional(),
-    // TODO: Rollout
-    image: image().optional().default('../../../assets/images/defaults/blog-chinchilla.jpg'),
+    image: image().optional().default(defaultBlogImage),
     publication_url: z.string().url().optional(),
 
     // canonical: z.string().url().optional(),
@@ -22,7 +24,8 @@ const posts = defineCollection({
 });
 
 const games = defineCollection({
-  type: 'content', // v2.5.0 and later
+  // type: 'content', // v2.5.0 and later
+  loader: glob({ pattern: '**/[^_]*.md', base: "./src/content/games" }),
   schema: ({ image }) => z.object({
     title: z.string(),
     image: z.union([z.string().url(), image()]),
@@ -34,7 +37,8 @@ const games = defineCollection({
 });
 
 const events = defineCollection({
-  type: 'content', // v2.5.0 and later
+  // type: 'content', // v2.5.0 and later
+  loader: glob({ pattern: '**/[^_]*.md', base: "./src/content/events" }),
   schema: ({ image }) => z.object({
     title: z.string().optional(),
     action: z.string().optional(),
@@ -48,7 +52,8 @@ const events = defineCollection({
 });
 
 const clients = defineCollection({
-  type: 'content', // v2.5.0 and later
+  // type: 'content', // v2.5.0 and later
+  loader: glob({ pattern: '**/[^_]*.md', base: "./src/content/clients" }),
   schema: ({ image }) => z.object({
     type: z.string(),
     title: z.string(),
@@ -70,7 +75,8 @@ const clients = defineCollection({
 });
 
 const books = defineCollection({
-  type: 'content', // v2.5.0 and later
+  // type: 'content', // v2.5.0 and later
+  loader: glob({ pattern: '**/[^_]*.md', base: "./src/content/books" }),
   schema: ({ image }) => z.object({
     title: z.string(),
     // description: z.string(),
@@ -84,7 +90,8 @@ const books = defineCollection({
 });
 
 const av = defineCollection({
-  type: 'content', // v2.5.0 and later
+  // type: 'content', // v2.5.0 and later
+  loader: glob({ pattern: '**/[^_]*.md', base: "./src/content/av" }),
   schema: ({ image }) => z.object({
     title: z.string(),
     // description: z.string(),
@@ -97,7 +104,8 @@ const av = defineCollection({
 });
 
 const podcasts = defineCollection({
-  type: 'content', // v2.5.0 and later
+  // type: 'content', // v2.5.0 and later
+  loader: glob({ pattern: '**/[^_]*.md', base: "./src/content/podcasts" }),
   schema: z.object({
     title: z.string().optional( ),
     description: z.string().optional(),

package.json

@@ -28,10 +28,10 @@
   },
   "devDependencies": {
     "@astro-community/astro-embed-youtube": "^0.5.6",
+    "@astrojs/markdown-component": "1.0.5",
     "@astrojs/mdx": "^4.0.1",
     "@astrojs/partytown": "^2.1.2",
     "@astrojs/rss": "^4.0.10",
-    "@astrojs/markdown-component": "1.0.5",
     "@astrojs/sitemap": "^3.2.1",
     "@astrojs/tailwind": "^5.1.3",
     "@astrolib/analytics": "^0.6.1",
@@ -41,16 +41,16 @@
     "@iconify-json/carbon": "^1.2.4",
     "@iconify-json/fa": "^1.2.0",
     "@iconify-json/fluent": "^1.2.8",
-    "@iconify-json/simple-line-icons": "^1.2.0",
     "@iconify-json/ph": "^1.2.1",
     "@iconify-json/ri": "^1.2.3",
     "@iconify-json/simple-icons": "^1.2.14",
+    "@iconify-json/simple-line-icons": "^1.2.0",
     "@iconify-json/tabler": "^1.2.10",
     "@tailwindcss/typography": "^0.5.15",
-    "@typescript-eslint/eslint-plugin": "^8.14.0",
-    "@typescript-eslint/parser": "^8.14.0",
+    "@typescript-eslint/eslint-plugin": "^8.17.0",
+    "@typescript-eslint/parser": "^8.17.0",
     "accessible-astro-components": "^2.4.0",
-    "astro": "^4.16.13",
+    "astro": "^5.0.3",
     "astro-icon": "^1.1.4",
     "eslint": "^9.16.0",
     "eslint-plugin-astro": "^1.3.1",
@@ -60,8 +60,8 @@
     "prettier-plugin-astro": "^0.14.1",
     "reading-time": "^1.5.0",
     "svgo": "^3.3.2",
-    "tailwindcss": "^3.4.15",
+    "tailwindcss": "^3.4.16",
     "truncate-html": "^1.1.2",
-    "typescript": "^5.6.3"
+    "typescript": "^5.7.2"
   }
 }

src/components/Book.astro

@@ -64,17 +64,6 @@ var idOfTitle = slugify(book.data.title);
   <div
     class="relative h-0 pb-[56.25%] md:pb-[75%] lg:pb-[56.25%] overflow-hiddenrounded drop-shadow-lg"
   >
-    <!-- <Picture
-      src={featured_image ? featured_image : '~/assets/images/default.png'}
-      class="absolute inset-0 object-cover w-full h-full mb-6 rounded drop-shadow-lg"
-      widths={[450, 900]}
-      sizes="(max-width: 900px) 450px, 900px"
-      alt={book.data.title}
-      aspectRatio="16:9"
-      loading="lazy"
-      decoding="async"
-      fetchpriority="auto"
-    /> -->
     <Image
       src={book.data.image}
       alt={book.data.title}

src/components/Course.astro

@@ -1,6 +1,5 @@
 ---
 import { Image } from 'astro:assets';
-// import { findImage } from '~/utils/images';
 import { type CollectionEntry } from 'astro:content';
 import Markdown from '@astrojs/markdown-component';
 
@@ -9,8 +8,6 @@ export interface Props {
 }
 
 const { course } = Astro.props;
-// const { Content } = await client.render();
-// const featured_image = await findImage(course.data.image);
 // Format date
 // TODO: Method
 var rawDate = new Date(course.data.publish_date);

src/components/Event.astro

@@ -30,7 +30,6 @@ var eventFormat = '';
 // Truncate text
 // TODO: Better way?
 // TODO: Make to helper or plugin
-// var truncatedText = body.split("</p>");
 ---
 
 <!-- TODO: Fix mobile layout -->

src/components/Game.astro

@@ -51,25 +51,10 @@ function slugify(str)
 }
 
 var idOfTitle = slugify(game.data.title);
-
-// What sort of URL
-var url = 'games/' + game.slug;
-// TODO: Why is slug broken again?
 ---
 
 <article class={`max-w-md mx-auto md:max-w-none grid gap-6 md:gap-8 ${game.data.image ? 'md:grid-cols-2' : ''}`}>
   <div class="relative h-0 pb-[56.25%] md:pb-[75%] lg:pb-[56.25%] overflow-hiddenrounded drop-shadow-lg">
-    <!-- <Picture
-      src={featured_image ? featured_image : '~/assets/images/default.png'}
-      class="absolute inset-0 object-cover w-full h-full mb-6 rounded drop-shadow-lg"
-      widths={[450, 900]}
-      sizes="(max-width: 900px) 450px, 900px"
-      alt={game.data.title}
-      aspectRatio="16:9"
-      loading="lazy"
-      decoding="async"
-      fetchpriority="auto"
-    /> -->
     <Image
       src={game.data.image}
       alt={game.data.title}

src/components/Post.astro

@@ -26,13 +26,11 @@ var url = '';
 if (post.data.publication_url != null) {
   url = post.data.publication_url;
 } else {
-  url = '/blog/' + post.slug;
+  url = '/blog/' + post.id;
 }
-// TODO: Why is slug broken again?
 // Truncate text
 // TODO: Better way?
 // TODO: Make to helper or plugin
-// var truncatedText = body.split("</p>");
 
 const truncatedBody = truncateMarkdown(post.body, {
   limit: 500,

src/components/blog/GridItem.astro

@@ -13,33 +13,25 @@ export interface Props {
 const { post } = Astro.props;
 
 // What sort of URL
-var url = "";
+var url = '';
 if (post.publication_url != null) {
   url = post.publication_url;
 } else {
   // TODO: Better way? Why is the slug wrong?
-  url = `blog${getPermalink(post.id, 'post')}`.replace(".md","");
+  url = `blog${getPermalink(post.id, 'post')}`.replace('.md', '');
 }
 
-// const image = await findImage(post.image);
 ---
-
-<article class="mb-6 transition">
-  <div class="relative md:h-64 bg-gray-400 dark:bg-slate-700 rounded drop-shadow-lg mb-6">
+<!-- TODO: Polish -->
+<article class="mb-6 transition px-4">
+  <div class="relative md:h-72 max-w-6xl mx-auto bg-gray-400 dark:bg-slate-700 rounded drop-shadow-lg mb-6">
     {
       post.image && (
-        // <Picture
-        //   src={image}
-        //   class="md:object-cover w-full md:w-auto md:h-full rounded drop-shadow-lg bg-gray-400 dark:bg-slate-700"
-        //   widths={[400, 900]}
-        //   sizes="(max-width: 900px) 400px, 900px"
-        //   alt={post.title}
-        //   aspectRatio="16:9"
-        //   loading="lazy"
-        //   decoding="async"
-        //   fetchpriority="auto"
-        // />
-        <Image src={post.image} alt={post.title}            class="md:object-cover w-full md:w-auto md:h-full rounded drop-shadow-lg bg-gray-400 dark:bg-slate-700" />
+        <Image
+          src={post.image}
+          alt={post.title}
+          class="md:object-cover w-full md:w-auto md:h-full rounded drop-shadow-lg bg-gray-400 dark:bg-slate-700"
+        />
       )
     }
   </div>
@@ -49,7 +41,8 @@ if (post.publication_url != null) {
         post.title
       ) : (
         <a
-        href={url} rel="canonical"
+          href={url}
+          rel="canonical"
           class="hover:text-primary-800 dark:hover:text-primary-700  transition ease-in duration-200"
         >
           {post.title}

src/components/blog/LatestPosts.astro

@@ -4,26 +4,18 @@ import Grid from '~/components/blog/Grid.astro';
 import { getBlogPermalink } from '~/utils/permalinks';
 import { findLatestPosts } from '~/utils/blog';
 
-const count = 4;
+const count = 3;
+// TODO: Change to all content
 const posts = await findLatestPosts({ count });
 ---
 
 <section class="px-4 py-16 mx-auto max-w-6xl lg:py-20">
   <div class="flex flex-col mb-6 lg:justify-between lg:flex-row md:mb-8">
     <h2 class="max-w-lg mb-2 text-3xl tracking-tight sm:text-4xl sm:leading-none lg:mb-5 group font-heading font-semibold">
       <span class="inline-block mb-1 sm:mb-4"
-        >Latest articles<br class="hidden md:block" /> in our <a
-          class="hover:text-primary-800 underline underline-offset-4 decoration-1 decoration-dotted transition ease-in duration-200"
-          href={getBlogPermalink()}>Blog</a
-        >
+        >Latest content<br class="hidden md:block" />
       </span>
     </h2>
-
-    <p class="text-gray-700 dark:text-slate-400 lg:text-sm lg:max-w-md">
-      The blog will be used to display AstroWind documentation. Each new article will be an important step that you will
-      need to know to be an expert in creating a website using Astro + Tailwind CSS The blog does not exist yet, but
-      very soon. Astro is a very interesting technology. Thanks.
-    </p>
   </div>
 
   <Grid posts={posts} />

src/components/widgets/Announcement.astro

@@ -5,12 +5,11 @@ import { getPermalink } from '~/utils/permalinks';
 <div
   class="hidden md:block bg-brandGrey dark:bg-slate-800 dark:border-slate-800 dark:text-slate-400 border-b border-brandGrey text-sm px-3 py-2 text-gray-200 overflow-hidden whitespace-nowrap text-ellipsis"
 >
-  <span class="text-xs py-0.5 px-1 bg-brandBlue dark:bg-slate-700 dark:text-slate-300 font-semibold">BETA</span>
-  <!-- TODO: Update link -->
+  <span class="text-xs py-0.5 px-1 bg-brandBlue dark:bg-slate-700 dark:text-slate-300 font-semibold">Like what I do?</span>
   <a
-    href={getPermalink('/blog/2022/2022-07-29-cristian-heilmann-principal-program-manager-devel', 'post')}
+    href={getPermalink('/support', 'page')}
     class="hover:underline text-gray-200 dark:text-slate-400"
-    >My new website is here! And still rough around the edges and missing some features which are coming soon…</a
+    >Your contributions help me continue :)</a
   >
   <a
     target="_blank"

src/components/widgets/Footer.astro

@@ -64,9 +64,8 @@ const links = [
   { text: 'Events', href: getPermalink('/events') },
 ];
 
+// TODO: What else here?
 const social = [
-  { label: 'Twitter', icon: 'tabler:brand-twitter', href: 'http://twitter.com/chrischinch' },
-  { label: 'Facebook', icon: 'tabler:brand-facebook', href: 'http://facebook.com/chrischinchilla' },
   { label: 'RSS', icon: 'tabler:rss', href: getAsset('/rss.xml') },
   { label: 'Github', icon: 'tabler:brand-github', href: 'https://github.com/chrischinchilla' },
   { label: 'YouTube', icon: 'tabler:brand-youtube', href: 'https://www.youtube.com/channel/UCgnrx8qi4qhmN6sBebdDrmg' },