Update blog files and details

src/assets/styles/base.css

@@ -7,3 +7,11 @@
     @apply inline-flex items-center justify-center rounded border border-transparent font-medium text-center text-base leading-snug transition py-3 px-6 shadow-lg ease-in duration-200 focus:ring-blue-500 focus:ring-offset-blue-200 focus:ring-2 focus:ring-offset-2;
   }
 }
+
+.menu-opened .line1 {
+  transform: rotate(-45deg) translate(-12px, 8px);
+}
+
+.menu-opened .line2 {
+  transform: rotate(45deg) translate(4px, -16px);
+}

src/components/core/BasicScripts.astro

@@ -3,23 +3,40 @@ const {} = Astro.props;
 ---
 
 <script is:inline>
-  function toggleDarkMode() {
-    document.documentElement.classList.toggle("dark");
-    localStorage.theme = document.documentElement.classList.contains("dark") ? "dark" : "light";
-  }
-  window.toggleDarkMode = toggleDarkMode;
-
   if (
     localStorage.theme === "dark" ||
-    (!("theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches)
+    (!("theme" in localStorage) &&
+      window.matchMedia("(prefers-color-scheme: dark)").matches)
   ) {
     document.documentElement.classList.add("dark");
   } else {
     document.documentElement.classList.remove("dark");
   }
 
-  function toggleMenu() {
+  function attachEvent(selector, event, fn) {
-    document.getElementById("menu").classList.toggle("hidden");
+    const elem = document.querySelector(selector);
+    if (elem) {
+      elem.addEventListener(
+        event,
+        function () {
+          fn(elem);
+        },
+        false
+      );
+    }
   }
-  window.toggleMenu = toggleMenu;
+
+  window.onload = function () {
+    attachEvent("[data-aw-toggle-menu]", "click", function (elem) {
+      elem.classList.toggle("menu-opened");
+      document.getElementById("menu").classList.toggle("hidden");
+    });
+
+    attachEvent("[data-aw-toggle-color-scheme]", "click", function (elem) {
+      document.documentElement.classList.toggle("dark");
+      localStorage.theme = document.documentElement.classList.contains("dark")
+        ? "dark"
+        : "light";
+    });
+  };
 </script>

src/components/core/Picture.astro

@@ -6,7 +6,7 @@ const {
   alt,
   sizes,
   widths,
-  aspectRatio,
+  aspectRatio = 1,
   formats = ["avif", "webp"],
   loading = "lazy",
   decoding = "async",
@@ -14,22 +14,32 @@ const {
   ...attrs
 } = Astro.props;
 
-const { image, sources = [] } =
+// const { image, sources = [] } =
-  !src ? { image: {}}
+//   !src ? { image: {}}
-    : (typeof src === "string"
+//     : (typeof src === "string"
-      ? { image: { src } }
+//       ? { image: { src } }
-      :
+//       :
-      await getPicture({
+
-        src,
+let picture = null;
-        widths,
+try {
-        formats,
+  picture = await getPicture({
-        aspectRatio,
+    src,
-      }))
+    widths,
+    formats,
+    aspectRatio,
+  })
+}
+catch (e) {
+  console.log(e);
+}
+
+const { image = {}, sources = [] } = picture || {}
 ---
 
-{ (src || !image) &&
+{ (src && image?.src) &&
 <picture {...attrs}>
-  {sources.map((attrs) => <source {...attrs} {sizes} />)}
+  {sources.map((attrs) =>
+  <source {...attrs} {sizes} />)}
   <img {...image} {loading} {decoding} {alt} class={className} />
 </picture>
 }

src/components/icons/IconMenu.astro

@@ -15,6 +15,6 @@ const { class: className = "w-5 h-5" } = Astro.props;
   stroke-linejoin="round"
 >
   <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-  <line x1="4" y1="8" x2="20" y2="8"></line>
+  <line class="line1 transition" x1="4" y1="8" x2="20" y2="8"></line>
-  <line x1="4" y1="16" x2="20" y2="16"></line>
+  <line class="line2 transition" x1="4" y1="16" x2="20" y2="16"></line>
 </svg>

src/components/widgets/BasicFAQs.astro

@@ -50,7 +50,7 @@ const {} = Astro.props;
         <div>
           <p class="mb-4 text-xl font-bold">
             <IconArrowDownRight class="w-7 h-7 text-blue-500 inline-block" />
-            Is the Space Pope reptilian!?
+            What's something that you completely don't understand?
           </p>
           <p class="text-gray-700 dark:text-gray-400 mb-2">
             A flower in my garden, a mystery in my panties. Heart attack never
@@ -63,7 +63,7 @@ const {} = Astro.props;
         <div>
           <p class="mb-4 text-xl font-bold">
             <IconArrowDownRight class="w-7 h-7 text-blue-500 inline-block" />
-            How much money you got on you?
+            What's an example of when you changed your mind?
           </p>
           <p class="text-gray-700 dark:text-gray-400 mb-2">
             Michael Knight a young loner on a crusade to champion the cause of
@@ -75,7 +75,7 @@ const {} = Astro.props;
         <div>
           <p class="mb-4 text-xl font-bold">
             <IconArrowDownRight class="w-7 h-7 text-blue-500 inline-block" />
-            Galaxies Orion's sword globular star cluster?
+            What is something that you would really like to try again?
           </p>
           <p class="text-gray-700 dark:text-gray-400 mb-2">
             A business big enough that it could be listed on the NASDAQ goes
@@ -89,7 +89,8 @@ const {} = Astro.props;
         <div>
           <p class="mb-4 text-xl font-bold">
             <IconArrowDownRight class="w-7 h-7 text-blue-500 inline-block" />
-            When has justice ever been as simple as a rule book?
+            If you could only ask one question to each person you meet, what would
+            that question be?
           </p>
           <p class="text-gray-700 dark:text-gray-400 mb-2">
             This is not about revenge. This is about justice. A lot of things

src/components/widgets/BlogList.astro

@@ -0,0 +1,37 @@
+---
+import BlogListItem from "~/components/widgets/BlogListItem.astro";
+import Pagination from "~/components/widgets/Pagination.astro";
+
+const { page } = Astro.props;
+---
+
+<section class="px-4 sm:px-6 py-8 sm:py-16 lg:py-20 mx-auto max-w-3xl">
+  <header>
+    <h1
+      class="text-center text-5xl md:text-[3.50rem] font-bold leading-tighter tracking-tighter mb-8 md:mb-16"
+      style="
+"
+    >
+      News and step-by-step guides about
+      <span
+        class="bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-pink-500"
+        >AstroWind
+      </span>
+    </h1>
+  </header>
+  <ul>
+    {
+      page.data.map((post) => (
+        <li class="mb-10 md:mb-16">
+          <BlogListItem post={post} />
+        </li>
+      ))
+    }
+  </ul>
+
+  {
+    (page.url.prev || page.url.next) && (
+      <Pagination prevUrl={page.url.prev} nextUrl={page.url.next} />
+    )
+  }
+</section>

src/components/widgets/BlogListItem.astro

@@ -1,15 +1,10 @@
 ---
 import Picture from "~/components/core/Picture.astro";
+import { findImage } from "~/utils/findImage";
 
 const { post } = Astro.props;
 
-const images = import.meta.glob("../../assets/images/*");
+const image = await findImage(post.image);
-const imageSrc =
-  typeof images[post.image] === "function"
-    ? (await images[post.image]())["default"]
-    : typeof post.image === "string"
-    ? post.image
-    : null;
 ---
 
 <article
@@ -20,18 +15,18 @@ const imageSrc =
       class="relative h-0 pb-[56.25%] md:pb-[75%] md:h-80 lg:pb-[56.25%] overflow-hidden bg-gray-400 dark:bg-slate-700 rounded shadow-lg"
     >
       <Picture
-        src={imageSrc}
+        src={image}
         class="absolute inset-0 w-full h-full object-cover mb-6 rounded shadow-lg"
         widths={[400, 768]}
         sizes="(max-width: 767px) 400px, 768px"
         alt={post.description}
-        aspectRatio="1"
+        aspectRatio={1}
       />
     </div>
   </a>
   <div>
     <header>
-      <h2 class="text-xl sm:text-2xl font-bold leading-tight mb-2">
+      <h2 class="text-xl sm:text-2xl font-bold leading-snug mb-2">
         <a
           class="hover:text-blue-600 underline underline-offset-4 decoration-1 decoration-dotted transition ease-in duration-200"
           href={`/blog/${post.slug}`}

src/components/widgets/BlogPost.astro

@@ -0,0 +1,42 @@
+---
+import Picture from "~/components/core/Picture.astro";
+
+const { post } = Astro.props;
+---
+
+<section class="py-8 sm:py-16 lg:py-20 mx-auto">
+  <article>
+    <header>
+      <p class="max-w-3xl mx-auto text-center">
+        <time datetime={post.pubDate}>
+          {
+            new Date(post.pubDate).toLocaleDateString("en-us", {
+              year: "numeric",
+              month: "short",
+              day: "numeric",
+            })
+          }
+        </time> ~ {Math.ceil(post.readingTime)} min
+      </p>
+      <h1
+        class="px-4 sm:px-6 max-w-3xl mx-auto text-center text-5xl md:text-[3.50rem] font-bold leading-tighter tracking-tighter mb-6 md:mb-8"
+      >
+        {post.title}
+      </h1>
+
+      <Picture
+        src={post.image}
+        class="max-w-full lg:max-w-6xl mx-auto mt-4 mb-6 sm:rounded-md bg-gray-400 dark:bg-slate-700"
+        widths={[400, 768, 900]}
+        sizes="(max-width: 767px) 400px, (max-width: 900px) 768px, 900px"
+        alt={post.description}
+        aspectRatio="16:9"
+      />
+    </header>
+    <div
+      class="container mx-auto px-4 sm:px-6 max-w-3xl prose prose-lg lg:prose-xl dark:prose-invert dark:prose-headings:text-slate-300 prose-md prose-headings:leading-tighter prose-headings:tracking-tighter prose-headings:font-bold prose-a:text-blue-600 dark:prose-a:text-blue-400 prose-img:rounded-md prose-img:shadow-lg mt-8"
+    >
+      <Fragment set:html={post.body} />
+    </div>
+  </article>
+</section>

src/components/widgets/Header.astro

@@ -4,7 +4,7 @@ const {} = Astro.props;
 ---
 
 <header
-  class="fixed top-0 z-40 flex-none mx-auto w-full bg-white/90 dark:bg-slate-900/90 backdrop-blur-sm border-b dark:border-b-0"
+  class="sticky top-0 z-40 flex-none mx-auto w-full bg-white/90 dark:bg-slate-900/90 backdrop-blur-sm border-b dark:border-b-0"
 >
   <div
     class="py-3 px-3 mx-auto w-full md:flex md:justify-between max-w-6xl md:px-4"
@@ -21,14 +21,14 @@ const {} = Astro.props;
           type="button"
           class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center"
           aria-label="Toggle between Dark and Light mode"
-          onclick="window.toggleDarkMode()"
+          data-aw-toggle-color-scheme
         >
           <IconSun class="w-6 h-6" />
         </button>
         <button
-          class="ml-1.5 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center"
+          class="ml-1.5 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center transition"
           aria-label="Toggle Menu"
-          onclick="toggleMenu()"
+          data-aw-toggle-menu
         >
           <IconMenu class="w-6 h-6" />
         </button>
@@ -98,9 +98,6 @@ const {} = Astro.props;
           >
             <IconGithub />
           </a>
-
-          <!-- <a class="inline-flex items-center text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium  text-center ml-3 btn-sm" href="/login/">Get started
-          </a> -->
         </div>
       </div>
     </nav>

src/components/widgets/HighlightedPosts.astro

@@ -30,16 +30,18 @@ const {} = Astro.props;
         alt="Post 2 Image"
         aspectRatio="16:9"
       />
-      <h3 class="mb-2 text-xl font-bold leading-none sm:text-2xl">
+      <h3 class="mb-2 text-xl font-bold leading-snug sm:text-2xl">
         <a
-          href="/blog/get-started-with-astrowind"
+          href="/blog/get-started-website-with-astro-tailwind-css"
           class="hover:text-blue-600 underline underline-offset-4 decoration-1 decoration-dotted transition ease-in duration-200"
-          >Get started with AstroWind
+          >Get started with AstroWind to create a website using Astro and
+          Tailwind CSS
         </a>
       </h3>
       <p class="text-gray-700 dark:text-gray-400">
-        I'll be sure to note that in my log. Smooth as an android's bottom, eh,
+        Sint sit cillum pariatur eiusmod nulla pariatur ipsum. Sit laborum anim
-        Data? When has justice ever been as simple as a rule book?
+        qui mollit tempor pariatur nisi minim dolor. Aliquip et adipisicing sit
+        sit fugiat
       </p>
     </div>
 
@@ -52,16 +54,17 @@ const {} = Astro.props;
         alt="Post 1 Image"
         aspectRatio="16:9"
       />
-      <h3 class="mb-2 text-xl font-bold leading-none sm:text-2xl">
+      <h3 class="mb-2 text-xl font-bold leading-snug sm:text-2xl">
         <a
-          href="/blog/how-to-customize-the-template"
+          href="/blog/how-to-customize-astrowind-to-your-branding"
           class="hover:text-blue-600 underline underline-offset-4 decoration-1 decoration-dotted transition ease-in duration-200"
-          >How to customize the template
+          >How to customize AstroWind template to suit your branding
         </a>
       </h3>
       <p class="text-gray-700 dark:text-gray-400">
-        O for awesome, this chocka full cuzzie is as rip-off as a cracker.
+        Sint sit cillum pariatur eiusmod nulla pariatur ipsum. Sit laborum anim
-        Meanwhile, in behind the bicycle shed, Hercules Morse.
+        qui mollit tempor pariatur nisi minim dolor. Aliquip et adipisicing sit
+        sit fugiat
       </p>
     </div>
 
@@ -74,16 +77,17 @@ const {} = Astro.props;
         alt="Post 3 Image"
         aspectRatio="16:9"
       />
-      <h3 class="mb-2 text-xl font-bold leading-none sm:text-2xl">
+      <h3 class="mb-2 text-xl font-bold leading-snug sm:text-2xl">
         <a
-          href="/blog/helpful-tools-and-resources-to-design"
+          href="/blog/useful-resources-to-create-websites"
           class="hover:text-blue-600 underline underline-offset-4 decoration-1 decoration-dotted transition ease-in duration-200"
-          >Helpful tools and resources to design
+          >Useful tools and resources to create a professional website
         </a>
       </h3>
       <p class="text-gray-700 dark:text-gray-400">
-        Yolo ipsum dolor sit amet, consectetur adipiscing elit. Ut ac suscipit
+        Nibh senectus lacinia volutpat nostra taciti ac posuere, dictum
-        leo. Carpe diem vulputate est nec commodo rutrum.
+        ultricies dictumst luctus in vehicula, mus molestie venenatis penatibus
+        ridiculus elementum. Phasellus sollicitudin dignissim parturient.
       </p>
     </div>
 
@@ -96,7 +100,7 @@ const {} = Astro.props;
         alt="Post 2 Image"
         aspectRatio="16:9"
       />
-      <h3 class="mb-2 text-xl font-bold leading-none sm:text-2xl">
+      <h3 class="mb-2 text-xl font-bold leading-snug sm:text-2xl">
         <a
           href="/blog/astrowind-template-in-depth"
           class="hover:text-blue-600 underline underline-offset-4 decoration-1 decoration-dotted transition ease-in duration-200"
@@ -104,8 +108,9 @@ const {} = Astro.props;
         </a>
       </h3>
       <p class="text-gray-700 dark:text-gray-400">
-        I'll be sure to note that in my log. Smooth as an android's bottom, eh,
+        Ornare cum cursus laoreet sagittis nunc fusce posuere per euismod dis
-        Data? When has justice ever been as simple as a rule book?
+        vehicula a, semper fames lacus maecenas dictumst pulvinar neque enim non
+        potenti. Torquent hac sociosqu eleifend potenti.
       </p>
     </div>
   </div>

src/components/widgets/StepsLeft.astro

@@ -10,7 +10,7 @@ const {} = Astro.props;
         <div class="flex flex-col items-center mr-4">
           <div>
             <div
-              class="flex items-center justify-center w-10 h-10 border rounded-full border-pink-500 border-2"
+              class="flex items-center justify-center w-10 h-10 rounded-full border-pink-500 border-2"
             >
               <svg
                 xmlns="http://www.w3.org/2000/svg"
@@ -50,7 +50,7 @@ const {} = Astro.props;
         <div class="flex flex-col items-center mr-4">
           <div>
             <div
-              class="flex items-center justify-center w-10 h-10 border rounded-full border-pink-500 border-2"
+              class="flex items-center justify-center w-10 h-10 rounded-full border-pink-500 border-2"
             >
               <svg
                 xmlns="http://www.w3.org/2000/svg"
@@ -89,7 +89,7 @@ const {} = Astro.props;
         <div class="flex flex-col items-center mr-4">
           <div>
             <div
-              class="flex items-center justify-center w-10 h-10 border rounded-full border-pink-500 border-2"
+              class="flex items-center justify-center w-10 h-10 rounded-full border-pink-500 border-2"
             >
               <svg
                 xmlns="http://www.w3.org/2000/svg"
@@ -128,7 +128,7 @@ const {} = Astro.props;
         <div class="flex flex-col items-center mr-4">
           <div>
             <div
-              class="flex items-center justify-center w-10 h-10 border rounded-full border-blue-600 border-2"
+              class="flex items-center justify-center w-10 h-10 rounded-full border-blue-600 border-2"
             >
               <svg
                 xmlns="http://www.w3.org/2000/svg"

src/pages/blog/[...page].astro

@@ -2,12 +2,12 @@
 import Layout from "~/layouts/PageLayout.astro";
 
 import { SITE } from "~/config.mjs";
-import { getAllPosts } from "~/utils/getAllPosts";
+import { getPosts } from "~/utils/getPosts";
-import BlogPostCard from "~/components/widgets/BlogPostCard.astro";
+
-import Pagination from "~/components/widgets/Pagination.astro";
+import BlogList from "~/components/widgets/BlogList.astro";
 
 export async function getStaticPaths({ paginate }) {
-  const posts = await getAllPosts();
+  const posts = await getPosts();
 
   return paginate(posts, {
     pageSize: SITE.postsPerPage,
@@ -26,36 +26,7 @@ const canonical = new URL(page.url.current, Astro.site);
 ---
 
 <Layout meta={{ title, description, canonical }}>
-  <main class="mt-20">
+  <main>
-    <section class="px-4 sm:px-6 py-8 sm:py-16 lg:py-20 mx-auto max-w-3xl">
+    <BlogList page={page} />
-      <header>
-        <h1
-          class="text-center text-5xl md:text-[3.50rem] font-bold leading-tighter tracking-tighter mb-8 md:mb-16"
-          style="
-"
-        >
-          News and step-by-step guides about
-          <span
-            class="bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-pink-500"
-            >AstroWind
-          </span>
-        </h1>
-      </header>
-      <ul>
-        {
-          page.data.map((post) => (
-            <li class="mb-10 md:mb-16">
-              <BlogPostCard post={post} />
-            </li>
-          ))
-        }
-      </ul>
-
-      {
-        (page.url.prev || page.url.next) && (
-          <Pagination prevUrl={page.url.prev} nextUrl={page.url.next} />
-        )
-      }
-    </section>
   </main>
 </Layout>

src/pages/blog/[slug].astro

@@ -1,12 +1,13 @@
 ---
-import Layout from "~/layouts/PageLayout.astro";
-import Picture from "~/components/core/Picture.astro";
-
 import { SITE } from "~/config.mjs";
-import { getAllPosts } from "~/utils/getAllPosts";
+import { getPosts } from "~/utils/getPosts";
+import { findImage } from "~/utils/findImage";
+
+import Layout from "~/layouts/PageLayout.astro";
+import BlogPost from "~/components/widgets/BlogPost.astro";
 
 export async function getStaticPaths() {
-  const posts = await getAllPosts();
+  const posts = await getPosts();
 
   return posts.map((post) => ({
     params: { slug: post.slug },
@@ -20,14 +21,7 @@ const title = `${post.title} — ${SITE.name}`;
 const description = post.description;
 const canonical = new URL(`blog/${post.slug}`, Astro.site);
 
-const images = import.meta.glob("../../assets/images/*");
+const image = await findImage(post.image);
-
-const imageSrc =
-  typeof images[post.image] === "function"
-    ? (await images[post.image]())["default"]
-    : typeof post.image === "string"
-    ? post.image
-    : null;
 ---
 
 <Layout
@@ -35,45 +29,10 @@ const imageSrc =
     title,
     description,
     canonical,
-    image: imageSrc,
+    image,
   }}
 >
-  <main class="mt-20">
+  <main>
-    <section class="py-8 sm:py-16 lg:py-20 mx-auto">
+    <BlogPost post={{ ...post, image }} />
-      <article>
-        <header>
-          <p class="max-w-3xl mx-auto text-center">
-            <time datetime={post.pubDate}>
-              {
-                new Date(post.pubDate).toLocaleDateString("en-us", {
-                  year: "numeric",
-                  month: "short",
-                  day: "numeric",
-                })
-              }
-            </time> ~ {Math.ceil(post.readingTime)} min
-          </p>
-          <h1
-            class="px-4 sm:px-6 max-w-3xl mx-auto text-center text-5xl md:text-[3.50rem] font-bold leading-tighter tracking-tighter mb-6 md:mb-8"
-          >
-            {post.title}
-          </h1>
-
-          <Picture
-            src={imageSrc}
-            class="max-w-full lg:max-w-6xl mx-auto mt-4 mb-6 sm:rounded-md bg-gray-400 dark:bg-slate-700"
-            widths={[400, 768, 900]}
-            sizes="(max-width: 767px) 400px, (max-width: 900px) 768px, 900px"
-            alt={post.description}
-            aspectRatio="16:9"
-          />
-        </header>
-        <div
-          class="container mx-auto px-4 sm:px-6 max-w-3xl prose prose-lg lg:prose-xl dark:prose-invert dark:prose-headings:text-slate-300 prose-md prose-headings:leading-tighter prose-headings:tracking-tighter prose-headings:font-bold prose-a:text-blue-600 dark:prose-a:text-blue-400 prose-img:rounded-md prose-img:shadow-lg mt-8"
-        >
-          <Fragment set:html={post.body} />
-        </div>
-      </article>
-    </section>
   </main>
 </Layout>

src/pages/index.astro

@@ -10,7 +10,7 @@ import StepsFeatures from "~/components/widgets/StepsFeatures.astro";
 import BasicFAQs from "~/components/widgets/BasicFAQs.astro";
 import TwoColsFeatures from "~/components/widgets/TwoColsFeatures.astro";
 import StepsLeft from "~/components/widgets/StepsLeft.astro";
-import BlogFeaturesPosts from "~/components/widgets/BlogFeaturesPosts.astro";
+import HighlightedPosts from "~/components/widgets/HighlightedPosts.astro";
 import Stats from "~/components/widgets/Stats.astro";
 
 const title = `${SITE.name} — Your website with Astro + Tailwind CSS`;
@@ -20,13 +20,13 @@ const canonical = new URL("", Astro.site);
 ---
 
 <Layout meta={{ title, description, canonical }}>
-  <main class="mt-20">
+  <main>
     <Hero />
     <BasicFeatures />
     <StepsLeft />
     <TwoColsFeatures />
     <StepsFeatures />
-    <BlogFeaturesPosts />
+    <HighlightedPosts />
     <BasicFAQs />
     <Stats />
     <BasicCTA />

src/pages/rss.xml.js

@@ -1,9 +1,9 @@
 import rss from "@astrojs/rss";
 
 import { SITE } from "~/config";
-import { getAllPosts } from "~/utils/getAllPosts";
+import { getPosts } from "~/utils/getPosts";
 
-const posts = await getAllPosts();
+const posts = await getPosts();
 
 export const get = () =>
   rss({