Merge branch 'main' into deployment

package-lock.json

@@ -8,6 +8,7 @@
       "name": "@example/basics",
       "version": "0.0.1",
       "dependencies": {
+        "@astrojs/rss": "^1.0.1",
         "astro": "^1.1.7"
       },
       "devDependencies": {
@@ -109,6 +110,14 @@
         "node": "^14.18.0 || >=16.12.0"
       }
     },
+    "node_modules/@astrojs/rss": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@astrojs/rss/-/rss-1.0.1.tgz",
+      "integrity": "sha512-CgfL1vSnHKZDUoSWVuRd6Z/s/2Hrazt9J3f4lKxTF/SwN28zJ+81e2obnOoxGhw5SfLNOqN/VEyHrGSJofaIRQ==",
+      "dependencies": {
+        "fast-xml-parser": "^4.0.8"
+      }
+    },
     "node_modules/@astrojs/tailwind": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@astrojs/tailwind/-/tailwind-1.0.0.tgz",
@@ -2047,6 +2056,21 @@
         "node": ">=8.6.0"
       }
     },
+    "node_modules/fast-xml-parser": {
+      "version": "4.0.9",
+      "resolved": "https://registry.npmjs.org/fast-xml-parser/-/fast-xml-parser-4.0.9.tgz",
+      "integrity": "sha512-4G8EzDg2Nb1Qurs3f7BpFV4+jpMVsdgLVuG1Uv8O2OHJfVCg7gcA53obuKbmVqzd4Y7YXVBK05oJG7hzGIdyzg==",
+      "dependencies": {
+        "strnum": "^1.0.5"
+      },
+      "bin": {
+        "fxparser": "src/cli/cli.js"
+      },
+      "funding": {
+        "type": "paypal",
+        "url": "https://paypal.me/naturalintelligence"
+      }
+    },
     "node_modules/fastq": {
       "version": "1.13.0",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.13.0.tgz",
@@ -5031,6 +5055,11 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/strnum": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/strnum/-/strnum-1.0.5.tgz",
+      "integrity": "sha512-J8bbNyKKXl5qYcR36TIO8W3mVGVHrmmxsd5PAItGkmyzwJvybiw2IVq5nqd0i4LSNSkB/sx9VHllbfFdr9k1JA=="
+    },
     "node_modules/style-to-object": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-0.3.0.tgz",
@@ -5892,6 +5921,14 @@
         "prismjs": "^1.28.0"
       }
     },
+    "@astrojs/rss": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@astrojs/rss/-/rss-1.0.1.tgz",
+      "integrity": "sha512-CgfL1vSnHKZDUoSWVuRd6Z/s/2Hrazt9J3f4lKxTF/SwN28zJ+81e2obnOoxGhw5SfLNOqN/VEyHrGSJofaIRQ==",
+      "requires": {
+        "fast-xml-parser": "^4.0.8"
+      }
+    },
     "@astrojs/tailwind": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@astrojs/tailwind/-/tailwind-1.0.0.tgz",
@@ -7207,6 +7244,14 @@
         "micromatch": "^4.0.4"
       }
     },
+    "fast-xml-parser": {
+      "version": "4.0.9",
+      "resolved": "https://registry.npmjs.org/fast-xml-parser/-/fast-xml-parser-4.0.9.tgz",
+      "integrity": "sha512-4G8EzDg2Nb1Qurs3f7BpFV4+jpMVsdgLVuG1Uv8O2OHJfVCg7gcA53obuKbmVqzd4Y7YXVBK05oJG7hzGIdyzg==",
+      "requires": {
+        "strnum": "^1.0.5"
+      }
+    },
     "fastq": {
       "version": "1.13.0",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.13.0.tgz",
@@ -9142,6 +9187,11 @@
       "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-3.0.0.tgz",
       "integrity": "sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw=="
     },
+    "strnum": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/strnum/-/strnum-1.0.5.tgz",
+      "integrity": "sha512-J8bbNyKKXl5qYcR36TIO8W3mVGVHrmmxsd5PAItGkmyzwJvybiw2IVq5nqd0i4LSNSkB/sx9VHllbfFdr9k1JA=="
+    },
     "style-to-object": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-0.3.0.tgz",

package.json

@@ -10,6 +10,7 @@
     "astro": "astro"
   },
   "dependencies": {
+    "@astrojs/rss": "^1.0.1",
     "astro": "^1.1.7"
   },
   "devDependencies": {

src/components/Header.astro

@@ -12,7 +12,7 @@ const { activeNav } = Astro.props;
   <a id="skip-to-content" href="#main-content">Skip to content</a>
   <div class="nav-container">
     <div class="top-nav-wrap">
-      <a href="/" class="logo">AstroPaper</a>
+      <a href="/" class="logo">{import.meta.env.PUBLIC_SITE_TITLE}</a>
       <button class="hamburger-menu">
         <div class="icon-container flex">
           <div id="first-line"></div>

src/contents/rec-1.md

@@ -1,7 +1,7 @@
 ---
 title: My recent article 1
 author: Sat Naing
-datetime: 2022-7-25T16:55:12.000+00:00
+datetime: 2022-07-05T02:05:51Z
 slug: my-recent-1
 featured: false
 tags:

src/contents/rec-2.md

@@ -1,7 +1,7 @@
 ---
 title: My recent article 2
 author: Sat Naing
-datetime: 2022-8-30T10:12:12.000+00:00
+datetime: 2022-06-06T04:06:31Z
 slug: my-recent-2
 featured: false
 tags:

src/contents/rec-3.md

@@ -1,7 +1,7 @@
 ---
 title: My recent article 3
 author: Sat Naing
-datetime: 2022-8-1T12:45:12.000+00:00
+datetime: 2022-06-02T02:02:01Z
 slug: my-recent-3
 featured: false
 tags:

src/contents/rec-4.md

@@ -1,7 +1,7 @@
 ---
 title: My recent article 4
 author: Sat Naing
-datetime: 2022-9-10T16:55:12.000+00:00
+datetime: 2022-05-05T05:05:55Z
 slug: my-recent-4
 featured: false
 tags:

src/layouts/AboutLayout.astro

@@ -13,7 +13,7 @@ export interface Props {
 const { frontmatter } = Astro.props;
 ---
 
-<Layout title={frontmatter.title}>
+<Layout title={`${frontmatter.title} | ${import.meta.env.PUBLIC_SITE_TITLE}`}>
   <Header activeNav="about" />
   <main id="main-content">
     <section class="mt-8 mb-28 prose prose-slate max-w-3xl">

src/layouts/Layout.astro

@@ -16,7 +16,7 @@ const {
 } = Astro.props;
 
 const canonicalURL = new URL(Astro.url.pathname, Astro.site);
-const socialImageURL = new URL(ogImage, Astro.url);
+const socialImageURL = new URL(ogImage, Astro.url.origin);
 ---
 
 <!DOCTYPE html>

src/pages/index.astro

@@ -17,7 +17,17 @@ const sortedPosts = getSortedPosts(posts);
   <Header />
   <main id="main-content">
     <section id="hero">
-      <h1>Mingalaba<span>.</span></h1>
+      <h1>Mingalaba</h1>
+      <a target="_blank" href="/rss.xml" class="rss-link">
+        <svg xmlns="http://www.w3.org/2000/svg" class="rss-icon"
+          ><path
+            d="M19 20.001C19 11.729 12.271 5 4 5v2c7.168 0 13 5.832 13 13.001h2z"
+          ></path><path
+            d="M12 20.001h2C14 14.486 9.514 10 4 10v2c4.411 0 8 3.589 8 8.001z"
+          ></path><circle cx="6" cy="18" r="2"></circle>
+        </svg>
+      </a>
+
       <p>
         Astro-Paper is a minimal, responsive and SEO-friendly Astro blog theme.
         This theme is aimed to be responsive, SEO-friendly and accessible out of
@@ -134,10 +144,13 @@ const sortedPosts = getSortedPosts(posts);
     @apply pt-12;
   }
   #hero h1 {
-    @apply font-bold my-4 sm:my-8 text-3xl sm:text-5xl;
+    @apply inline-block font-bold my-4 sm:my-8 text-3xl sm:text-5xl;
   }
-  h1 span {
-    @apply text-skin-accent;
+  #hero .rss-link {
+    @apply mb-6;
+  }
+  #hero .rss-icon {
+    @apply h-6 w-6 scale-110 sm:scale-125 mb-2 sm:mb-3 fill-skin-accent;
   }
   #hero p {
     @apply my-2;

src/pages/posts/index.astro

@@ -12,7 +12,7 @@ const posts = await Astro.glob<Frontmatter>("../../contents/*.md");
 const sortedPosts = getSortedPosts(posts);
 ---
 
-<Layout title="Posts | AstroPaper">
+<Layout title={`Posts | ${import.meta.env.PUBLIC_SITE_TITLE}`}>
   <Header activeNav="posts" />
   <Main pageTitle="Posts" pageDesc="All the tags used in posts.">
     <ul>

src/pages/rss.xml.ts

@@ -0,0 +1,24 @@
+import rss from "@astrojs/rss";
+import type { Frontmatter } from "@utils/types";
+import type { MarkdownInstance } from "astro";
+
+const postImportResult = import.meta.glob<MarkdownInstance<Frontmatter>>(
+  "../contents/*.md",
+  {
+    eager: true,
+  }
+);
+const posts = Object.values(postImportResult);
+
+export const get = () =>
+  rss({
+    title: import.meta.env.PUBLIC_SITE_TITLE,
+    description: import.meta.env.PUBLIC_SITE_DESC,
+    site: import.meta.env.SITE,
+    items: posts.map(({ frontmatter }) => ({
+      link: frontmatter.slug,
+      title: frontmatter.title,
+      description: frontmatter.description,
+      pubDate: new Date(frontmatter.datetime),
+    })),
+  });

src/pages/tags/[tag].astro

@@ -42,7 +42,7 @@ const posts: MarkdownInstance<Frontmatter>[] = await Astro.glob(
 const tagPosts = getPostsByTag(posts, tag);
 ---
 
-<Layout title={`Tag:${tag} | AstroPaper`}>
+<Layout title={`Tag:${tag} | ${import.meta.env.PUBLIC_SITE_TITLE}`}>
   <Header activeNav="tags" />
   <Main
     pageTitle={`Tag:${tag}`}

src/pages/tags/index.astro

@@ -12,7 +12,7 @@ const posts = await Astro.glob<Frontmatter>("../../contents/*.md");
 let tags = getUniqueTags(posts);
 ---
 
-<Layout title="Tags | AstroPaper">
+<Layout title={`Tags | ${import.meta.env.PUBLIC_SITE_TITLE}`}>
   <Header activeNav="tags" />
   <Main pageTitle="Tags" pageDesc="All the tags used in posts.">
     <ul>

src/styles/base.css

@@ -30,7 +30,8 @@
     display: block;
   }
   body {
-    @apply font-mono bg-skin-fill text-skin-base min-h-screen flex flex-col;
+    @apply font-mono bg-skin-fill text-skin-base min-h-screen flex flex-col 
+    selection:bg-skin-accent selection:text-skin-inverted selection:bg-opacity-70;
   }
   section,
   footer {

tailwind.config.cjs

@@ -17,11 +17,13 @@ module.exports = {
         skin: {
           base: withOpacity("--color-text-base"),
           accent: withOpacity("--color-text-accent"),
+          inverted: withOpacity("--color-fill"),
         },
       },
       backgroundColor: {
         skin: {
           fill: withOpacity("--color-fill"),
+          accent: withOpacity("--color-accent"),
           inverted: withOpacity("--color-text-base"),
           card: withOpacity("--color-card"),
           "card-muted": withOpacity("--color-card-muted"),