Merge pull request #296 from mearashadowfax/astro-update

Astro update

astro.config.mjs

@@ -4,6 +4,8 @@ import sitemap from "@astrojs/sitemap";
 import compressor from "astro-compressor";
 import starlight from "@astrojs/starlight";
 
+import mdx from "@astrojs/mdx";
+
 // https://astro.build/config
 export default defineConfig({
   // https://docs.astro.build/en/guides/images/#authorizing-remote-images
@@ -22,9 +24,7 @@ export default defineConfig({
   //   },
   // },
   prefetch: true,
-  integrations: [
-    tailwind(),
-    sitemap({
+  integrations: [tailwind(), sitemap({
     i18n: {
       defaultLocale: "en", // All urls that don't contain `fr` after `https://screwfast.uk/` will be treated as default locale, i.e. `en`
       locales: {
@@ -32,8 +32,7 @@ export default defineConfig({
         fr: "fr",
       },
     },
-    }),
-    starlight({
+  }), starlight({
     title: "ScrewFast Docs",
     defaultLocale: "root",
     // https://github.com/withastro/starlight/blob/main/packages/starlight/CHANGELOG.md
@@ -111,12 +110,10 @@ export default defineConfig({
         },
       },
     ],
-    }),
-    compressor({
+  }), compressor({
     gzip: false,
     brotli: true,
-    }),
-  ],
+  }), mdx()],
   experimental: {
     clientPrerender: true,
   },

package.json

@@ -11,16 +11,17 @@
   },
   "dependencies": {
     "@astrojs/check": "^0.9.4",
+    "@astrojs/mdx": "^4.0.3",
     "@astrojs/sitemap": "^3.2.1",
-    "@astrojs/starlight": "^0.29.3",
-    "@astrojs/starlight-tailwind": "^2.0.3",
+    "@astrojs/starlight": "^0.30.3",
+    "@astrojs/starlight-tailwind": "^3.0.0",
     "@astrojs/tailwind": "^5.1.4",
-    "@preline/accordion": "^2.6.0",
+    "@preline/accordion": "^2.5.0",
     "@preline/collapse": "^2.6.0",
     "@preline/dropdown": "^2.6.0",
     "@preline/overlay": "^2.6.0",
     "@preline/tabs": "^2.6.0",
-    "astro": "^4.16.18",
+    "astro": "^5.1.2",
     "astro-compressor": "^1.0.0",
     "clipboard": "^2.0.11",
     "globby": "^14.0.2",

src/components/ui/cards/CardBlog.astro

@@ -20,8 +20,8 @@ interface Props {
 <a
   class="group relative block rounded-xl outline-none ring-zinc-500 transition duration-500 focus-visible:ring dark:ring-zinc-200 dark:focus:outline-none"
   href={blogLocale && blogLocale !== "en"
-    ? `/${blogLocale}/blog/${blogEntry.slug.replace(/^fr\//, "")}/`
-    : `/blog/${blogEntry.slug.replace(/^en\//, "")}/`}
+    ? `/${blogLocale}/blog/${blogEntry.id.replace(/^fr\//, "")}/`
+    : `/blog/${blogEntry.id.replace(/^en\//, "")}/`}
   data-astro-prefetch
 >
   <!-- The container for the blog post's cover image. Uses astro:assets' Image for image source -->

src/components/ui/cards/CardBlogRecent.astro

@@ -36,7 +36,7 @@ interface Props {
     >
       <a
         class="outline-none ring-zinc-500 transition duration-300 hover:text-orange-400 focus-visible:ring dark:text-neutral-300 dark:ring-zinc-200 dark:hover:text-neutral-50 dark:focus:outline-none"
-        href={recentBlogLocale && recentBlogLocale !== "en" ? `/${recentBlogLocale}/blog/${blogEntry.slug.replace(/^fr\//, '')}/` : `/blog/${blogEntry.slug.replace(/^en\//, '')}/`}
+        href={recentBlogLocale && recentBlogLocale !== "en" ? `/${recentBlogLocale}/blog/${blogEntry.id.replace(/^fr\//, '')}/` : `/blog/${blogEntry.id.replace(/^en\//, '')}/`}
       >
         {blogEntry.data.description}
       </a>
@@ -57,7 +57,7 @@ interface Props {
     <!-- Read More button which is a link to the blog post detailed page -->
     <div class="mt-5">
       <PrimaryCTA
-        url={recentBlogLocale && recentBlogLocale !== "en" ? `/${recentBlogLocale}/blog/${blogEntry.slug.replace(/^fr\//, '')}/` : `/blog/${blogEntry.slug.replace(/^en\//, '')}/`}
+        url={recentBlogLocale && recentBlogLocale !== "en" ? `/${recentBlogLocale}/blog/${blogEntry.id.replace(/^fr\//, '')}/` : `/blog/${blogEntry.id.replace(/^en\//, '')}/`}
         title="Read More"
         data-astro-prefetch
       />

src/components/ui/cards/CardInsight.astro

@@ -21,8 +21,8 @@ interface Props {
 <a
   class="group rounded-xl outline-none ring-zinc-500 transition duration-300 focus-visible:ring dark:ring-zinc-200 dark:focus:outline-none"
   href={insightLocale && insightLocale !== "en"
-    ? `/${insightLocale}/insights/${insightEntry.slug.replace(/^fr\//, "")}/`
-    : `/insights/${insightEntry.slug.replace(/^en\//, "")}/`}
+    ? `/${insightLocale}/insights/${insightEntry.id.replace(/^fr\//, "")}/`
+    : `/insights/${insightEntry.id.replace(/^en\//, "")}/`}
 >
   <!-- This is the container for the insight's cover image. -->
   <div class="relative overflow-hidden rounded-xl pt-[50%] sm:pt-[70%]">

src/components/ui/cards/CardRelated.astro

@@ -15,8 +15,8 @@ interface Props {
 <a
   class="group block rounded-xl outline-none ring-zinc-500 transition duration-300 focus-visible:ring dark:ring-zinc-200 dark:focus:outline-none"
   href={recentBlogLocale && recentBlogLocale !== "en"
-    ? `/${recentBlogLocale}/blog/${blogEntry.slug.replace(/^fr\//, "")}/`
-    : `/blog/${blogEntry.slug.replace(/^en\//, "")}/`}
+    ? `/${recentBlogLocale}/blog/${blogEntry.id.replace(/^fr\//, "")}/`
+    : `/blog/${blogEntry.id.replace(/^en\//, "")}/`}
   data-astro-prefetch
 >
   <div>

src/components/ui/cards/CardSmall.astro

@@ -19,8 +19,8 @@ const imageClass =
 <!-- A clickable card that leads to the details of the product-->
 <a
   href={productLocale && productLocale !== "en"
-    ? `/${productLocale}/products/${product.slug.replace(/^fr\//, "")}/`
-    : `/products/${product.slug.replace(/^en\//, "")}/`}
+    ? `/${productLocale}/products/${product.id.replace(/^fr\//, "")}/`
+    : `/products/${product.id.replace(/^en\//, "")}/`}
   data-astro-prefetch
   class="group relative flex h-48 items-end overflow-hidden rounded-xl shadow-lg outline-none ring-zinc-500 focus-visible:ring dark:ring-zinc-200 dark:focus:outline-none md:h-80"
 >

src/components/ui/cards/CardWide.astro

@@ -19,8 +19,8 @@ const imageClass =
 <!-- The anchor tag is the main container for the product card. When clicked, this leads to the details of the product. -->
 <a
   href={productLocale && productLocale !== "en"
-    ? `/${productLocale}/products/${product.slug.replace(/^fr\//, "")}/`
-    : `/products/${product.slug.replace(/^en\//, "")}/`}
+    ? `/${productLocale}/products/${product.id.replace(/^fr\//, "")}/`
+    : `/products/${product.id.replace(/^en\//, "")}/`}
   data-astro-prefetch
   class="group relative flex h-48 items-end overflow-hidden rounded-lg shadow-xl outline-none ring-zinc-500 focus-visible:ring dark:ring-zinc-200 dark:focus:outline-none md:col-span-2 md:h-80"
 >

src/content.config.ts

@@ -0,0 +1,97 @@
+// https://docs.astro.build/en/guides/content-collections/#defining-collections
+
+import { z, defineCollection } from 'astro:content';
+import { docsSchema } from '@astrojs/starlight/schema';
+import { glob } from 'astro/loaders';
+
+const productsCollection = defineCollection({
+  loader: glob({ pattern: '**/[^_]*.{md,mdx}', base: "./src/content/products" }),
+    schema: ({ image }) => z.object({
+    title: z.string(),
+    description: z.string(),
+    main: z.object({
+      id: z.number(),
+      content: z.string(),
+      imgCard: image(),
+      imgMain: image(),
+      imgAlt: z.string(),
+    }),
+    tabs: z.array(
+      z.object({
+        id: z.string(),
+        dataTab: z.string(),
+        title: z.string(),
+      })
+    ),
+    longDescription: z.object({
+      title: z.string(),
+      subTitle: z.string(),
+      btnTitle: z.string(),
+      btnURL: z.string(),
+    }),
+    descriptionList: z.array(
+      z.object({
+        title: z.string(),
+        subTitle: z.string(),
+      })
+    ),
+    specificationsLeft: z.array(
+      z.object({
+        title: z.string(),
+        subTitle: z.string(),
+      })
+    ),
+    specificationsRight: z.array(
+      z.object({
+        title: z.string(),
+        subTitle: z.string(),
+      })
+    ).optional(),
+    tableData: z.array(
+      z.object({
+        feature: z.array(z.string()),
+        description: z.array(z.array(z.string())),
+      })
+    ).optional(),
+    blueprints: z.object({
+      first: image().optional(),
+      second: image().optional(),
+    }),
+  }),
+});
+
+const blogCollection = defineCollection({
+  loader: glob({ pattern: '**/[^_]*.{md,mdx}', base: "./src/content/blog" }),
+  schema: ({ image }) => z.object ({
+  title: z.string(),
+  description: z.string(),
+  contents: z.array(z.string()),
+  author: z.string(),
+  role: z.string().optional(),
+  authorImage: image(),
+  authorImageAlt: z.string(),
+  pubDate: z.date(),
+  cardImage: image(),
+  cardImageAlt: z.string(),
+  readTime: z.number(),
+  tags: z.array(z.string()).optional(),
+  }),
+});
+
+const insightsCollection = defineCollection({
+  loader: glob({ pattern: '**/[^_]*.{md,mdx}', base: "./src/content/insights" }),
+  schema: ({ image }) => z.object ({
+  title: z.string(),
+  description: z.string(),
+  // contents: z.array(z.string()),
+  cardImage: image(),
+  cardImageAlt: z.string(),
+  }),
+});
+
+export const collections = {
+  docs: defineCollection({ schema: docsSchema() }),
+  'products': productsCollection,
+  'blog': blogCollection,
+  'insights': insightsCollection,
+};

src/content/config.ts

@@ -1,96 +1,96 @@
-// https://docs.astro.build/en/guides/content-collections/#defining-collections
+// // https://docs.astro.build/en/guides/content-collections/#defining-collections
 
-import { z, defineCollection } from 'astro:content';
-import { docsSchema } from '@astrojs/starlight/schema';
+// import { z, defineCollection } from 'astro:content';
+// import { docsSchema } from '@astrojs/starlight/schema';
 
-const productsCollection = defineCollection({
-  type: 'content',
-    schema: ({ image }) => z.object({
-    title: z.string(),
-    description: z.string(),
-    main: z.object({
-      id: z.number(),
-      content: z.string(),
-      imgCard: image(),
-      imgMain: image(),
-      imgAlt: z.string(),
-    }),
-    tabs: z.array(
-      z.object({
-        id: z.string(),
-        dataTab: z.string(),
-        title: z.string(),
-      })
-    ),
-    longDescription: z.object({
-      title: z.string(),
-      subTitle: z.string(),
-      btnTitle: z.string(),
-      btnURL: z.string(),
-    }),
-    descriptionList: z.array(
-      z.object({
-        title: z.string(),
-        subTitle: z.string(),
-      })
-    ),
-    specificationsLeft: z.array(
-      z.object({
-        title: z.string(),
-        subTitle: z.string(),
-      })
-    ),
-    specificationsRight: z.array(
-      z.object({
-        title: z.string(),
-        subTitle: z.string(),
-      })
-    ).optional(),
-    tableData: z.array(
-      z.object({
-        feature: z.array(z.string()),
-        description: z.array(z.array(z.string())),
-      })
-    ).optional(),
-    blueprints: z.object({
-      first: image().optional(),
-      second: image().optional(),
-    }),
-  }),
-});
+// const productsCollection = defineCollection({
+//   type: 'content',
+//     schema: ({ image }) => z.object({
+//     title: z.string(),
+//     description: z.string(),
+//     main: z.object({
+//       id: z.number(),
+//       content: z.string(),
+//       imgCard: image(),
+//       imgMain: image(),
+//       imgAlt: z.string(),
+//     }),
+//     tabs: z.array(
+//       z.object({
+//         id: z.string(),
+//         dataTab: z.string(),
+//         title: z.string(),
+//       })
+//     ),
+//     longDescription: z.object({
+//       title: z.string(),
+//       subTitle: z.string(),
+//       btnTitle: z.string(),
+//       btnURL: z.string(),
+//     }),
+//     descriptionList: z.array(
+//       z.object({
+//         title: z.string(),
+//         subTitle: z.string(),
+//       })
+//     ),
+//     specificationsLeft: z.array(
+//       z.object({
+//         title: z.string(),
+//         subTitle: z.string(),
+//       })
+//     ),
+//     specificationsRight: z.array(
+//       z.object({
+//         title: z.string(),
+//         subTitle: z.string(),
+//       })
+//     ).optional(),
+//     tableData: z.array(
+//       z.object({
+//         feature: z.array(z.string()),
+//         description: z.array(z.array(z.string())),
+//       })
+//     ).optional(),
+//     blueprints: z.object({
+//       first: image().optional(),
+//       second: image().optional(),
+//     }),
+//   }),
+// });
 
-const blogCollection = defineCollection({
-  type: "content",
-  schema: ({ image }) => z.object ({
-  title: z.string(),
-  description: z.string(),
-  contents: z.array(z.string()),
-  author: z.string(),
-  role: z.string().optional(),
-  authorImage: image(),
-  authorImageAlt: z.string(),
-  pubDate: z.date(),
-  cardImage: image(),
-  cardImageAlt: z.string(),
-  readTime: z.number(),
-  tags: z.array(z.string()).optional(),
-  }),
-});
+// const blogCollection = defineCollection({
+//   type: "content",
+//   schema: ({ image }) => z.object ({
+//   title: z.string(),
+//   description: z.string(),
+//   contents: z.array(z.string()),
+//   author: z.string(),
+//   role: z.string().optional(),
+//   authorImage: image(),
+//   authorImageAlt: z.string(),
+//   pubDate: z.date(),
+//   cardImage: image(),
+//   cardImageAlt: z.string(),
+//   readTime: z.number(),
+//   tags: z.array(z.string()).optional(),
+//   }),
+// });
 
-const insightsCollection = defineCollection({
-  type: "content",
-  schema: ({ image }) => z.object ({
-  title: z.string(),
-  description: z.string(),
-  // contents: z.array(z.string()),
-  cardImage: image(),
-  cardImageAlt: z.string(),
-  }),
-});
+// const insightsCollection = defineCollection({
+//   type: "content",
+//   schema: ({ image }) => z.object ({
+//   title: z.string(),
+//   description: z.string(),
+//   // contents: z.array(z.string()),
+//   cardImage: image(),
+//   cardImageAlt: z.string(),
+//   }),
+// });
 
-export const collections = {
-  docs: defineCollection({ schema: docsSchema() }),
-  'products': productsCollection,
-  'blog': blogCollection,
-  'insights': insightsCollection,
-};
+// export const collections = {
+//   docs: defineCollection({ schema: docsSchema() }),
+//   'products': productsCollection,
+//   'blog': blogCollection,
+//   'insights': insightsCollection,
+// };

src/pages/blog/[id].astro

@@ -18,9 +18,9 @@ export async function getStaticPaths() {
     id.startsWith("en/")
   );
   return blogPosts.map((post) => {
-    const slugWithoutLang = post.slug.replace(/^en\//, ""); // Remove the "en/" prefix
+    const idWithoutLang = post.id.replace(/^en\//, ""); // Remove the "en/" prefix
     return {
-      params: { slug: slugWithoutLang },
+      params: { id: idWithoutLang },
       props: { post },
     };
   });
@@ -39,7 +39,7 @@ const blogPosts: CollectionEntry<"blog">[] = await getCollection(
 // In a production site, you might want to implement a more robust algorithm, choosing related posts based on tags, categories, dates, authors, or keywords.
 // See example: https://blog.codybrunner.com/2024/adding-related-articles-with-astro-content-collections/
 const relatedPosts: CollectionEntry<"blog">[] = blogPosts.filter(
-  (blogEntry) => blogEntry.slug !== post.slug
+  (blogEntry) => blogEntry.id !== post.id
 );
 
 const pageTitle: string = `${post.data.title} | ${SITE.title}`;

src/pages/fr/blog/[...slug].astro

@@ -18,9 +18,9 @@ export async function getStaticPaths() {
     id.startsWith("fr/")
   );
   return blogPosts.map((post) => {
-    const slugWithoutLang = post.slug.replace(/^fr\//, ""); // Remove the "fr/" prefix
+    const idWithoutLang = post.id.replace(/^fr\//, ""); // Remove the "fr/" prefix
     return {
-      params: { lang: "fr", slug: slugWithoutLang },
+      params: { lang: "fr", id: idWithoutLang },
       props: { post },
     };
   });
@@ -34,7 +34,7 @@ const blogPosts: CollectionEntry<"blog">[] = await getCollection(
   ({ id }) => id.startsWith("fr/")
 );
 const relatedPosts: CollectionEntry<"blog">[] = blogPosts.filter(
-  (blogEntry) => blogEntry.slug !== post.slug
+  (blogEntry) => blogEntry.id !== post.id
 );
 
 const pageTitle: string = `${post.data.title} | ${SITE.title}`;

src/pages/fr/insights/[...slug].astro

@@ -3,15 +3,15 @@
 import { SITE } from "@data/constants";
 import MainLayout from "@/layouts/MainLayout.astro";
 import { Image } from "astro:assets";
-import { getCollection } from "astro:content";
+import { getCollection, render } from "astro:content";
 
 // Use `getStaticPaths` to generate static routes for generated pages on build
 export async function getStaticPaths() {
   const insightPosts = await getCollection("insights", ({ id }) => id.startsWith("fr/"));
   return insightPosts.map((post) => {
-    const slugWithoutLang = post.slug.replace(/^fr\//, ''); // Remove the "fr/" prefix
+    const idWithoutLang = post.id.replace(/^fr\//, ''); // Remove the "fr/" prefix
     return {
-      params: { lang: 'fr', slug: slugWithoutLang },
+      params: { lang: 'fr', id: idWithoutLang },
       props: { post },
     };
   });
@@ -20,7 +20,7 @@ export async function getStaticPaths() {
 // Get the props for this page that define a specific insight post
 const { post } = Astro.props;
 
-const { Content } = await post.render();
+const { Content } = await render(post);
 
 const pageTitle: string = `${post.data.title} | ${SITE.title}`;
 ---
@@ -54,7 +54,7 @@ const pageTitle: string = `${post.data.title} | ${SITE.title}`;
               >
               </div>
             </div>
-            <p class="text-pretty text-sm font-light text-neutral-500">
+            <p class="text-pretty text-sm text-neutral-500">
               Table of Contents:
             </p>
             <div id="toc" class="">

src/pages/fr/products/[...slug].astro

@@ -20,9 +20,9 @@ export async function getStaticPaths() {
     id.startsWith("fr/")
   );
   return productEntries.map((product) => {
-    const slugWithoutLang = product.slug.replace(/^fr\//, ""); // Remove the "fr/" prefix
+    const idWithoutLang = product.id.replace(/^fr\//, ""); // Remove the "fr/" prefix
     return {
-      params: { lang: "fr", slug: slugWithoutLang },
+      params: { lang: "fr", id: idWithoutLang },
       props: { product },
     };
   });

src/pages/insights/[id].astro

@@ -3,7 +3,7 @@
 import { SITE } from "@data/constants";
 import MainLayout from "@/layouts/MainLayout.astro";
 import { Image } from "astro:assets";
-import { getCollection } from "astro:content";
+import { getCollection, render } from "astro:content";
 
 // Use `getStaticPaths` to generate static routes for generated pages on build
 export async function getStaticPaths() {
@@ -11,9 +11,9 @@ export async function getStaticPaths() {
     id.startsWith("en/")
   );
   return insightPosts.map((post) => {
-    const slugWithoutLang = post.slug.replace(/^en\//, ""); // Remove the "fr/" prefix
+    const idWithoutLang = post.id.replace(/^en\//, ""); // Remove the "fr/" prefix
     return {
-      params: { slug: slugWithoutLang },
+      params: { id: idWithoutLang },
       props: { post },
     };
   });
@@ -22,7 +22,7 @@ export async function getStaticPaths() {
 // Get the props for this page that define a specific insight post
 const { post } = Astro.props;
 
-const { Content } = await post.render();
+const { Content } = await render(post);
 
 const pageTitle: string = `${post.data.title} | ${SITE.title}`;
 ---
@@ -56,7 +56,7 @@ const pageTitle: string = `${post.data.title} | ${SITE.title}`;
               >
               </div>
             </div>
-            <p class="text-pretty text-sm font-light text-neutral-500">
+            <p class="text-pretty text-sm text-neutral-500">
               Table of Contents:
             </p>
             <div id="toc" class="">

src/pages/products/[id].astro

@@ -21,9 +21,9 @@ export async function getStaticPaths() {
     id.startsWith("en/")
   );
   return productEntries.map((product) => {
-    const slugWithoutLang = product.slug.replace(/^en\//, ""); // Remove the "en/" prefix
+    const idWithoutLang = product.id.replace(/^en\//, ""); // Remove the "en/" prefix
     return {
-      params: { slug: slugWithoutLang },
+      params: { id: idWithoutLang },
       props: { product },
     };
   });

tsconfig.json

@@ -12,5 +12,7 @@
       "@styles/*": ["src/assets/styles/*"],
       "@utils/*": ["src/utils/*"]
     },
-  }
+  },
+  "include": [".astro/types.d.ts", "**/*"],
+  "exclude": ["dist"]
 }