Merge pull request #5 from hellotham/content

Migrated to Astro collections!

.gitignore

@@ -18,3 +18,5 @@ pnpm-debug.log*
 
 # macOS-specific files
 .DS_Store
+
+.astro

README.md

@@ -1,13 +1,20 @@
 # hello-astro
 
-Hello Astro is a full featured [Astro](https://astro.build) corporate/marketing/blog starter theme written in Typescript and TailwindCSS. It supports Markdown and MDX based pages and blog posts.
+Hello Astro is a full featured [Astro](https://astro.build) multi-purpose starter theme written in Typescript and TailwindCSS. It supports Markdown and MDX based pages and blog posts.
 
 ![Light](https://github.com/hellotham/hello-astro/raw/main/screenshot-light.png)
 
 ![Dark](https://github.com/hellotham/hello-astro/raw/main/screenshot-dark.png)
 
 ![Lighthouse](https://github.com/hellotham/hello-astro/raw/main/lighthouse.png)
 
+Hello Astro can used for any/all of the following:
+
+- corporate/marketing site
+- blog
+- documentation site
+- portfolio site supporting photo galleries
+
 Uses the following integrations:
 
 - @astrojs/mdx
@@ -125,3 +132,5 @@ All commands are run from the root of the project, from a terminal:
 - 1.0.1: Moved social images to src, improved coverImage processing
 - 1.0.2: Upgrade packages to latest
 - 1.1.0: Update to astro v2.x, now works with node 18 and 19
+- 2.0.0: New version supporting Astro collections! Also clarified that this is a
+  multipurpose theme. Search can now include both Markdown and MDX pages!

package.json

@@ -15,7 +15,7 @@
     "@akebifiky/remark-simple-plantuml": "^1.0.2",
     "@astrojs/alpinejs": "^0.1.2",
     "@astrojs/image": "^0.13.0",
-    "@astrojs/mdx": "^0.15.0",
+    "@astrojs/mdx": "^0.15.1",
     "@astrojs/sitemap": "^1.0.0",
     "@astrojs/tailwind": "^3.0.0",
     "@tailwindcss/aspect-ratio": "^0.4.2",
@@ -25,11 +25,11 @@
     "@types/alpinejs": "^3.7.1",
     "@types/leaflet": "^1.9.0",
     "alpinejs": "^3.11.1",
-    "astro": "2.0.1",
+    "astro": "2.0.2",
     "astro-robots-txt": "^0.3.11",
     "exifr": "^7.1.3",
     "mdast-util-to-string": "^3.1.1",
-    "prettier-plugin-astro": "^0.7.2",
+    "prettier-plugin-astro": "^0.8.0",
     "reading-time": "^1.5.0",
     "rehype-katex": "^6.0.2",
     "remark-math": "^5.1.1",

src/components/blogcard.astro

@@ -1,68 +1,67 @@
 ---
+import type { CollectionEntry } from 'astro:content'
 import { Icon } from 'astro-icon'
-import type { MarkdownInstance } from 'astro'
-import type { Frontmatter } from '../config'
 import { categoryDetail } from '../config'
 import SVGImg from '../components/svgimg.astro'
 import Img from '../components/img.astro'
 import Categories from '../components/categories.astro'
 import Tags from '../components/tags.astro'
 
 export interface Props {
-  post: MarkdownInstance<Frontmatter>
+  post: CollectionEntry<'blog'>
 }
 
 const { post } = Astro.props
 
-const image = post.frontmatter.coverImage || post.frontmatter.socialImage || categoryDetail(post.frontmatter.categories && post.frontmatter.categories[0]).socialImage
-const svgimg = post.frontmatter.coverSVG || (post.frontmatter.coverImage ? null : categoryDetail(post.frontmatter.categories && post.frontmatter.categories[0]).coverSVG)
+const image = post.data.coverImage || post.data.socialImage || categoryDetail(post.data.categories && post.data.categories[0]).socialImage
+const svgimg = post.data.coverSVG || (post.data.coverImage ? null : categoryDetail(post.data.categories && post.data.categories[0]).coverSVG)
 ---
 
 <section class="p-4 md:w-1/2 lg:w-1/3">
   <div
     class="h-full border-1 border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden p-2"
   >
-    <a href={post.url}>
+    <a href={new URL(import.meta.env.BASE_URL + '/blog/' + post.slug, Astro.url)}>
       {
         svgimg ? (
           <SVGImg
             src={svgimg}
-            alt={post.frontmatter.title + ' featured image'}
+            alt={post.data.title + ' featured image'}
             class="relative w-full h-64 bg-purple-100 dark:bg-purple-800 rounded-lg overflow-hidden group-hover:opacity-75 object-center object-cover"
           />
         ) : (
           <Img
             src={image}
-            alt={post.frontmatter.title + ' featured image'}
+            alt={post.data.title + ' featured image'}
             class="relative w-full h-64 bg-purple-100 dark:bg-purple-800 rounded-lg overflow-hidden group-hover:opacity-75 object-center object-cover"
           />
         )
       }
-      <p class="sr-only">{post.frontmatter.title}</p>
+      <p class="sr-only">{post.data.title}</p>
     </a>
     <div class="p-6">
-      <Categories categories={post.frontmatter.categories} />
-      <a href={post.url}>
+      <Categories categories={post.data.categories} />
+      <a href={import.meta.env.BASE_URL + '/blog/' + post.slug}>
         <h1
           class="title-font text-xl font-bold text-purple-600 hover:text-pink-600 dark:text-purple-300 dark:hover:text-pink-300 mt-2"
         >
-          {post.frontmatter.title}
+          {post.data.title}
         </h1>
       </a>
       <div class="flex items-center flex-wrap">
         <span
           class="text-gray-500 dark:text-gray-400 mr-3 inline-flex items-center leading-none text-xs pr-3 py-1 border-r-2 border-purple-200 dark:border-purple-600"
         >
           <Icon class="w-4 h-4 mr-1" pack="heroicons-outline" name="calendar" />
-          {post.frontmatter.publishDate?.slice(0, 10)}
+          {post.data.publishDate?.toString().slice(0, 10)}
         </span>
         <span
           class="text-gray-500 dark:text-gray-400 mr-3 inline-flex items-center leading-none text-xs pr-3 py-1 border-r-2 border-purple-200 dark:border-purple-600"
         >
           <Icon class="w-4 h-4 mr-1" pack="heroicons-outline" name="clock" />
-          {post.frontmatter.minutesRead}
+          {post.data.minutesRead}
         </span>
-        {post.frontmatter.author && (
+        {post.data.author && (
           <span
           class="text-gray-500 dark:text-gray-400 inline-flex items-center leading-none text-xs"
           >
@@ -71,15 +70,15 @@ const svgimg = post.frontmatter.coverSVG || (post.frontmatter.coverImage ? null
           pack="heroicons-outline"
           name="user-circle"
           />
-          {post.frontmatter.author}
+          {post.data.author}
           </span>
         )}
       </div>
 
       <p class="mt-3 italic text-sm text-gray-600 dark:text-gray-300">
-        {post.frontmatter.description}
+        {post.data.description}
       </p>
-      <Tags tags={post.frontmatter.tags} />
+      <Tags tags={post.data.tags} />
     </div>
   </div>
 </section>

src/components/bloghero.astro

@@ -61,7 +61,7 @@ const svgimg = frontmatter.coverSVG || (frontmatter.coverImage ? null : category
       <span class="flex items-center mr-6">
         <Icon class="w-6 h-6 mr-1 text-purple-200" pack="heroicons-outline" name="calendar" />
         <span class="font-semibold text-purple-200 ml-1">
-          {frontmatter.publishDate?.slice(0, 10)}
+          {frontmatter.publishDate?.toString().slice(0, 10)}
         </span>
       </span>
       <span class="flex items-center">

src/components/blogroll.astro

@@ -1,10 +1,9 @@
 ---
-import type { MarkdownInstance } from 'astro'
-import type { Frontmatter } from '../config'
+import type { CollectionEntry } from 'astro:content'
 import BlogCard from '../components/blogcard.astro'
 
 export interface Props {
-  posts: MarkdownInstance<Frontmatter>[]
+  posts: CollectionEntry<'blog'>[]
 }
 
 const { posts } = Astro.props

src/components/hero.astro

@@ -32,9 +32,15 @@ import { FeaturedSVG } from '../config'
           <p
             class="mt-3 text-base text-gray-600 dark:text-gray-300 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0"
           >
-            Hello Astro is a full featured corporate/marketing/blog starter
-            theme written in Typescript, TailwindCSS and Astro. It supports
-            Markdown and MDX based pages and blog posts (including math and diagrams), plus full text search on blog pages.
+            Hello Astro is a multi-purpose starter
+            theme written in Typescript, TailwindCSS, AlpineJS and Astro. It supports
+            Markdown and MDX based pages, documentation pages and blog posts (including math and diagrams), plus full text search.
+          </p>
+          <p
+            class="mt-3 text-base text-gray-600 dark:text-gray-300 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0"
+          >
+            Hello Astro can be used for creating corporate/marketing sites, blogs, documentation sites, portfolio sites (supporting photo
+            galleries) or any combination of the above!
           </p>
           <p
             class="mt-3 text-base text-gray-600 dark:text-gray-300 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0"

src/components/latestarticles.astro

@@ -1,12 +1,11 @@
 ---
-import type { MarkdownInstance } from 'astro'
-import type { Frontmatter } from '../config'
+import type { CollectionEntry } from 'astro:content'
 import Categories from '../components/categories.astro'
 import SVGImg from '../components/svgimg.astro'
 import Img from '../components/img.astro'
 
 export interface Props {
-  posts: MarkdownInstance<Frontmatter>[]
+  posts: CollectionEntry<'blog'>[]
 }
 
 const { posts } = Astro.props
@@ -49,91 +48,91 @@ const otherPosts = posts.slice(1, 5)
         <div
           class="mb-4 lg:mb-0 p-4 lg:p-0 relative rounded block xl:col-span-2"
         >
-          <a href={newestPost.url}>
-            <span class="sr-only">{newestPost.frontmatter.title}</span>
+          <a href={new URL(import.meta.env.BASE_URL + '/blog/' + newestPost.slug, Astro.url)}>
+            <span class="sr-only">{newestPost.data.title}</span>
             {
-              newestPost.frontmatter.coverSVG ? (
+              newestPost.data.coverSVG ? (
                 <SVGImg
-                  src={newestPost.frontmatter.coverSVG}
-                  alt={newestPost.frontmatter.title + ' featured image'}
+                  src={newestPost.data.coverSVG}
+                  alt={newestPost.data.title + ' featured image'}
                   class="rounded-md w-full h-64 md:h-80 object-cover bg-purple-100 dark:bg-purple-800"
                 />
               ) : (
                 <Img
                   src={
-                    newestPost.frontmatter.coverImage ||
-                    newestPost.frontmatter.socialImage
+                    newestPost.data.coverImage ||
+                    newestPost.data.socialImage
                   }
-                  alt={newestPost.frontmatter.title + ' featured image'}
+                  alt={newestPost.data.title + ' featured image'}
                   class="rounded-md w-full h-64 md:h-80 object-cover bg-purple-100 dark:bg-purple-800"
                 />
               )
             }
           </a>
           <div class="mt-4">
             {
-              newestPost.frontmatter.categories && (
-                <Categories categories={newestPost.frontmatter.categories} />
+              newestPost.data.categories && (
+                <Categories categories={newestPost.data.categories} />
               )
             }
           </div>
-          <a href={newestPost.url}>
+          <a href={new URL(import.meta.env.BASE_URL + '/blog/' + newestPost.slug, Astro.url)}>
             <h1
               class="text-purple-600 hover:text-pink-600 dark:text-purple-300 dark:hover:text-pink-300 text-4xl font-bold mt-2 leading-tight"
             >
-              {newestPost.frontmatter.title}
+              {newestPost.data.title}
             </h1>
           </a>
           <p class="text-gray-600 dark:text-gray-400 mb-4">
-            {newestPost.frontmatter.publishDate?.slice(0, 10)}
+            {newestPost.data.publishDate?.toISOString().slice(0, 10)}
           </p>
           <p class="text-gray-600 dark:text-gray-400 mb-4">
-            {newestPost.frontmatter.description}
+            {newestPost.data.description}
           </p>
           <a
-            href={newestPost.url}
+            href={new URL(import.meta.env.BASE_URL + '/blog/' + newestPost.slug, Astro.url)}
             class="inline-block px-6 py-3 mt-2 rounded-md bg-purple-600 hover:bg-pink-600 text-white dark:bg-purple-300 dark:hover:bg-pink-300 dark:text-black"
           >
             Read more
-            <span class="sr-only">{newestPost.frontmatter.title}</span>
+            <span class="sr-only">{newestPost.data.title}</span>
           </a>
         </div>
         <div class="w-full">
           {
             otherPosts.map(post => (
               <div class="rounded w-full md:grid md:grid-cols-3 mb-10">
-                <a href={post.url}>
-                  {post.frontmatter.coverSVG ? (
+                <a href={new URL(import.meta.env.BASE_URL + '/blog/' + post.slug, Astro.url)}>
+                  {post.data.coverSVG ? (
                     <SVGImg
-                      src={post.frontmatter.coverSVG}
-                      alt={post.frontmatter.title + ' featured image'}
+                      src={post.data.coverSVG}
+                      alt={post.data.title + ' featured image'}
                       class="block lg:block rounded-md w-full h-64 md:h-32 m-4 md:m-0 object-cover bg-purple-100 dark:bg-purple-800"
                     />
                   ) : (
                     <Img
                       src={
-                        post.frontmatter.socialImage ||
-                        post.frontmatter.socialImage
+                        post.data.socialImage ||
+                        post.data.socialImage
                       }
-                      alt={post.frontmatter.title + ' featured image'}
+                      alt={post.data.title + ' featured image'}
                       class="block lg:block rounded-md w-full h-64 md:h-32 m-4 md:m-0 object-cover bg-purple-100 dark:bg-purple-800"
                     />
                   )}
                 </a>
                 <div class="bg-white dark:bg-gray-800 rounded px-4 md:col-span-2">
-                  {post.frontmatter.categories && (
-                    <Categories categories={post.frontmatter.categories} />
+                  {post.data.categories && (
+                    <Categories categories={post.data.categories} />
                   )}
-                  <a href={post.url}>
+                  <a href={new URL(import.meta.env.BASE_URL + '/blog/' + post.slug, Astro.url)}>
                     <div class="md:mt-1 text-gray-800 dark:text-gray-100 font-semibold text-xl">
-                      {post.frontmatter.title}
+                      {post.data.title}
                     </div>
                     </a>
                     <p class="block text-sm text-gray-600 dark:text-gray-300">
-                      {post.frontmatter.publishDate?.slice(0, 10)}
+                      {post.data.publishDate?.toISOString().slice(0, 10)}
                     </p>
                     <p class="block md:hidden text-sm text-gray-600 dark:text-gray-300">
-                      {post.frontmatter.description}
+                      {post.data.description}
                     </p>
                 </div>
               </div>

src/components/paginatecontrol.astro

@@ -1,10 +1,10 @@
 ---
 import { Icon } from 'astro-icon'
-import type { MarkdownInstance, Page } from 'astro'
-import type { Frontmatter } from '../config'
+import type { CollectionEntry } from 'astro:content'
+import type { Page } from 'astro'
 
 export interface Props {
-  page: Page<MarkdownInstance<Frontmatter>>
+  page: Page<CollectionEntry<'blog'>>
 }
 
 // const { id } = Astro.params

src/components/seo.astro

@@ -19,7 +19,7 @@ const { frontmatter } = Astro.props
 
 const siteurl = new URL(import.meta.env.BASE_URL, Astro.url)
 const type = Astro.url.toString().includes('blog') ? 'post' : 'page'
-const year = parseInt(SiteMetadata.buildTime.slice(0, 4))
+const year = parseInt(SiteMetadata.buildTime.toString().slice(0, 4))
 const images = import.meta.glob<ImageMetadata>('../images/**/*', { import: 'default' })
 const image = await images[frontmatter.socialImage || frontmatter.coverImage || DefaultImage]()
 const logo = await images[LogoImage]()