2024.10.29 Update to astro-paper v2.7

Author: emeraldjava

astro.config.ts

@@ -4,6 +4,7 @@ import react from "@astrojs/react";
 import remarkToc from "remark-toc";
 import remarkCollapse from "remark-collapse";
 import sitemap from "@astrojs/sitemap";
+import { SITE } from "./src/config";
 
 // https://astro.build/config
 export default defineConfig({

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "emeraldjava.github.io",
-  "version": "2024.9.28",
+  "version": "2024.10.29",
   "scripts": {
     "dev": "astro dev",
     "start": "astro dev",
@@ -17,21 +17,21 @@
     "@astrojs/check": "^0.9.3",
     "@astrojs/rss": "^4.0.7",
     "@resvg/resvg-js": "^2.6.2",
-    "astro": "^4.15.9",
-    "cross-env": "^7.0.3",
+    "astro": "^4.16.3",
     "fuse.js": "^7.0.0",
     "lodash.kebabcase": "^4.1.1",
     "remark-collapse": "^0.1.2",
     "remark-toc": "^9.0.0",
     "satori": "^0.11.0",
     "tailwindcss": "^3.4.11",
-    "typescript": "^5.6.2"
+    "typescript": "^5.5.3"
   },
   "devDependencies": {
     "@astrojs/react": "^3.6.2",
     "@astrojs/sitemap": "^3.1.6",
     "@astrojs/tailwind": "^5.1.0",
     "@tailwindcss/typography": "^0.5.15",
+    "@types/github-slugger": "^1.3.0",
     "@types/lodash.kebabcase": "^4.1.9",
     "@types/react": "^18.3.6",
     "@typescript-eslint/parser": "^8.5.0",

package.json

@@ -1,11 +1,17 @@
-import { LOCALE } from "@config";
+import { LOCALE, SITE } from "@config";
+import type { CollectionEntry } from "astro:content";
 
 interface DatetimesProps {
   pubDatetime: string | Date;
   modDatetime: string | Date | undefined | null;
 }
 
-interface Props extends DatetimesProps {
+interface EditPostProps {
+  editPost?: CollectionEntry<"blog">["data"]["editPost"];
+  postId?: CollectionEntry<"blog">["id"];
+}
+
+interface Props extends DatetimesProps, EditPostProps {
   size?: "sm" | "lg";
   className?: string;
 }
@@ -15,6 +21,8 @@ export default function Datetime({
   modDatetime,
   size = "sm",
   className = "",
+  editPost,
+  postId,
 }: Props) {
   return (
     <div
@@ -42,6 +50,7 @@ export default function Datetime({
           pubDatetime={pubDatetime}
           modDatetime={modDatetime}
         />
+        {size === "lg" && <EditPost editPost={editPost} postId={postId} />}
       </span>
     </div>
   );
@@ -72,3 +81,40 @@ const FormattedDatetime = ({ pubDatetime, modDatetime }: DatetimesProps) => {
     </>
   );
 };
+
+const EditPost = ({ editPost, postId }: EditPostProps) => {
+  let editPostUrl = editPost?.url ?? SITE?.editPost?.url ?? "";
+  const showEditPost = !editPost?.disabled && editPostUrl.length > 0;
+  const appendFilePath =
+    editPost?.appendFilePath ?? SITE?.editPost?.appendFilePath ?? false;
+  if (appendFilePath && postId) {
+    editPostUrl += `/${postId}`;
+  }
+  const editPostText = editPost?.text ?? SITE?.editPost?.text ?? "Edit";
+
+  return (
+    showEditPost && (
+      <>
+        <span aria-hidden="true"> | </span>
+        <a
+          className="space-x-1.5 hover:opacity-75"
+          href={editPostUrl}
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            className="icon icon-tabler icons-tabler-outline icon-tabler-edit inline-block !scale-90 fill-skin-base"
+            aria-hidden="true"
+          >
+            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+            <path d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1" />
+            <path d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z" />
+            <path d="M16 5l3 3" />
+          </svg>
+          <span className="text-base italic">{editPostText}</span>
+        </a>
+      </>
+    )
+  );
+};

src/components/Datetime.tsx

@@ -4,7 +4,7 @@ import Hr from "./Hr.astro";
 import LinkButton from "./LinkButton.astro";
 
 export interface Props {
-  activeNav?: "posts" | "tags" | "about" | "search";
+  activeNav?: "posts" | "archives" | "tags" | "about" | "search";
 }
 
 const { activeNav } = Astro.props;
@@ -70,6 +70,41 @@ const { activeNav } = Astro.props;
               About
             </a>
           </li>
+          {
+            SITE.showArchives && (
+              <li>
+                <LinkButton
+                  href="/archives/"
+                  className={`focus-outline flex justify-center p-3 sm:p-1`}
+                  ariaLabel="archives"
+                  title="Archives"
+                >
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    class:list={[
+                      "icon icon-tabler icons-tabler-outline !hidden sm:!inline-block",
+                      activeNav === "archives" && "!stroke-skin-accent",
+                    ]}
+                  >
+                    <>
+                      <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                      <path d="M3 4m0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z" />
+                      <path d="M5 8v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-10" />
+                      <path d="M10 12l4 0" />
+                    </>
+                  </svg>
+                  <span
+                    class:list={[
+                      "sm:sr-only",
+                      activeNav === "archives" && "active",
+                    ]}
+                  >
+                    Archives
+                  </span>
+                </LinkButton>
+              </li>
+            )
+          }
           <li>
             <LinkButton
               href="/search/"
@@ -155,7 +190,7 @@ const { activeNav } = Astro.props;
   nav ul li:nth-last-child(2) {
     @apply col-span-1;
   }
-  nav a.active {
+  nav .active {
     @apply underline decoration-wavy decoration-2 underline-offset-4;
   }
   nav a.active svg {

src/components/Header.astro

@@ -58,7 +58,7 @@ export default function SearchBar({ searchList }: Props) {
   useEffect(() => {
     // Add search result only if
     // input value is more than one character
-    let inputResult = inputVal.length > 1 ? fuse.search(inputVal) : [];
+    const inputResult = inputVal.length > 1 ? fuse.search(inputVal) : [];
     setSearchResults(inputResult);
 
     // Update search string in URL

src/components/Search.tsx

@@ -11,6 +11,12 @@ export const SITE: Site = {
   postPerIndex: 4,
   postPerPage: 3,
   scheduledPostMargin: 15 * 60 * 1000, // 15 minutes
+  showArchives: true,
+  editPost: {
+    url: "https://github.com/satnaing/astro-paper/edit/main/src/content/blog",
+    text: "Suggest Changes",
+    appendFilePath: true,
+  },
 };
 
 export const LOCALE = {

src/config.ts

@@ -2,10 +2,10 @@ import { SITE } from "@config";
 import { glob } from "astro/loaders";
 import { defineCollection, z } from "astro:content";
 
-// see https://docs.astro.build/en/guides/content-c
-// ollections/#defining-a-collection-schema
+// see https://docs.astro.build/en/guides/content-collections/#defining-a-collection-schema
 const blog = defineCollection({
-  loader: glob({ pattern: "**/*.md", base: "./content/blog" }),
+  type: "content_layer",
+  loader: glob({ pattern: "**/*.md", base: "./src/content/blog" }),
   schema: ({ image }) =>
     z.object({
       author: z.string().default(SITE.author),
@@ -23,6 +23,14 @@ const blog = defineCollection({
         .optional(),
       description: z.string(),
       canonicalURL: z.string().optional(),
+      editPost: z
+        .object({
+          disabled: z.boolean().optional(),
+          url: z.string().optional(),
+          text: z.string().optional(),
+          appendFilePath: z.boolean().optional(),
+        })
+        .optional(),
     }),
 });
 

src/content/config.ts

@@ -25,6 +25,7 @@ const {
   pubDatetime,
   modDatetime,
   tags,
+  editPost,
 } = post.data;
 
 const { Content } = await post.render();
@@ -82,6 +83,8 @@ const nextPost =
       modDatetime={modDatetime}
       size="lg"
       className="my-2"
+      editPost={editPost}
+      postId={post.id}
     />
     <article id="article" class="prose mx-auto mt-8 max-w-3xl">
       <Content />

src/layouts/PostDetails.astro

@@ -3,10 +3,11 @@ import { SITE } from "@config";
 import Posts from "@layouts/Posts.astro";
 import type { GetStaticPaths } from "astro";
 import { getCollection } from "astro:content";
+import getSortedPosts from "@utils/getSortedPosts";
 
 export const getStaticPaths = (async ({ paginate }) => {
   const posts = await getCollection("blog", ({ data }) => !data.draft);
-  return paginate(posts, { pageSize: SITE.postPerPage });
+  return paginate(getSortedPosts(posts), { pageSize: SITE.postPerPage });
 }) satisfies GetStaticPaths;
 
 const { page } = Astro.props;