Merge pull request #97 from brklntmhwk/96-tweak

.github/PULL_REQUEST_TEMPLATE/01_basic.md → .github/PULL_REQUEST_TEMPLATE.md

@@ -1,3 +1,8 @@
+<!-- Title Formats of Pull Request:
+  docs(content): 📖 xxx
+  refactor(some): ✨ tweak xxx
+-->
+
 ## Changes
 <!-- List up changes you've made below. -->
 
@@ -9,6 +14,6 @@
 - xxxxx
 
 ## Notes
-<!-- Add whatever you want to let team members know about the changes. Write "Nothing" if you have nothing special. -->
+<!-- Add whatever you want to let team members know about the changes. Leave it blank if you have nothing special. -->
 
 - xxxxx

astro.config.ts

@@ -73,6 +73,7 @@ export default defineConfig({
     defaultStrategy: 'viewport',
     prefetchAll: true,
   },
+  trailingSlash: "always",
   i18n: {
     defaultLocale: 'en',
     locales: ['en', 'ja'],

changelog.config.cjs

@@ -27,13 +27,13 @@ module.exports = {
     'api',
     'cms',
     'config',
-    'contents',
+    'content',
     'db',
+    'dev',
     'deps',
-    'docker',
-    'i18n',
-    'none',
-    'overall',
+    'lang',
+    'others',
+    'some',
     'ui',
     'utils',
   ],

dangerfile.ts

@@ -20,13 +20,13 @@ const checkPRTitle = () => {
     'api',
     'cms',
     'config',
-    'contents',
+    'content',
     'db',
+    'dev',
     'deps',
-    'docker',
-    'i18n',
-    'none',
-    'overall',
+    'lang',
+    'others',
+    'some',
     'ui',
     'utils',
   ];

src/components/common/Footer/Footer.astro

@@ -20,14 +20,14 @@ const year = new Date().getFullYear();
   <div class="flex justify-center gap-7 text-primary hover:text-primary-dark">
     {
       privacyPolicyPage && (
-        <a href={translatePath(`/${privacyPolicyPage.slug.split('/').pop()}`)}>
+        <a href={translatePath(`/${privacyPolicyPage.slug.split('/').pop()}/`)}>
           {privacyPolicyPage.data.title}
         </a>
       )
     }
     {
       sitePolicyPage && (
-        <a href={translatePath(`/${sitePolicyPage.slug.split('/').pop()}`)}>
+        <a href={translatePath(`/${sitePolicyPage.slug.split('/').pop()}/`)}>
           {sitePolicyPage.data.title}
         </a>
       )

src/components/common/Navigation/Navigation.astro

@@ -38,23 +38,23 @@ const t = await getEntry('i18n', `${locale}/translation`);
       <NavLink class="relative text-lg active:font-bold hover:before:content-['▶'] hover:before:absolute hover:before:top-0 hover:before:-left-7 lg:hover:before:-left-6 hover:before:text-xl hover:before:self-center"
       href={translatePath('/')}>{t.data.nav.nav_links.home}</NavLink>
       <NavLink class="relative text-lg active:font-bold hover:before:content-['▶'] hover:before:absolute hover:before:top-0 hover:before:-left-7 lg:hover:before:-left-6 hover:before:text-xl hover:before:self-center"
-      href={translatePath('/blog')}
+      href={translatePath('/blog/')}
         >{t.data.nav.nav_links.blog}</NavLink
       >
       <NavLink class="relative text-lg active:font-bold hover:before:content-['▶'] hover:before:absolute hover:before:top-0 hover:before:-left-7 lg:hover:before:-left-6 hover:before:text-xl hover:before:self-center"
-      href={translatePath('/news')}
+      href={translatePath('/news/')}
         >{t.data.nav.nav_links.news}</NavLink
       >
       <NavLink class="relative text-lg active:font-bold hover:before:content-['▶'] hover:before:absolute hover:before:top-0 hover:before:-left-7 lg:hover:before:-left-6 hover:before:text-xl hover:before:self-center"
-      href={translatePath('/about')}
+      href={translatePath('/about/')}
         >{t.data.nav.nav_links.about}</NavLink
       >
       <NavLink class="relative text-lg active:font-bold hover:before:content-['▶'] hover:before:absolute hover:before:top-0 hover:before:-left-7 lg:hover:before:-left-6 hover:before:text-xl hover:before:self-center"
-      href={translatePath('/work')}
+      href={translatePath('/work/')}
         >{t.data.nav.nav_links.work}</NavLink
       >
       <NavLink class="relative text-lg active:font-bold hover:before:content-['▶'] hover:before:absolute hover:before:top-0 hover:before:-left-7 lg:hover:before:-left-6 hover:before:text-xl hover:before:self-center"
-      href={translatePath('/tools')}
+      href={translatePath('/tools/')}
         >{t.data.nav.nav_links.tools}</NavLink
       >
     </div>

src/components/models/Article/Article.astro

@@ -9,7 +9,7 @@ type Props = {
 const locale = getLocaleFromUrl(Astro.url);
 const translatePath = useTranslatedPath(locale);
 const { kind } = Astro.props;
-const backToPath = kind === 'blog' || kind === 'news' ? `/${kind}` : '/';
+const backToPath = kind === 'blog' || kind === 'news' ? `/${kind}/` : '/';
 const t = await getEntry('i18n', `${locale}/translation`);
 ---
 

src/components/models/BlogList/BlogList.astro

@@ -39,7 +39,7 @@ const { entries, taxonomies } = Astro.props;
             <a
               class="font-bold text-xl xs:text-2xl xl:text-3xl hover:bg-default-mixed"
               href={translatePath(
-                `/${entry.collection}/${entry.slug.split('/').pop()}`
+                `/${entry.collection}/${entry.slug.split('/').pop()}/`
               )}
             >
               {title}

src/components/models/Pager/Pager.astro

@@ -60,7 +60,7 @@ const { page } = Astro.props;
               return (
                 <li>
                   <a
-                    href={`/${currentPath.split('/').slice(1, -1).join('/')}/`}
+                    href={`/${currentPath.split('/').slice(1, -2).join('/')}/`}
                     class="text-primary hover:text-primary-dark"
                   >
                     {pg}
@@ -72,14 +72,14 @@ const { page } = Astro.props;
                 <li>
                   {page.currentPage === 1 ? (
                     <a
-                      href={`/${currentPath.split('/').slice(1).join('/')}/${pg}/`}
+                      href={`/${currentPath.split('/').slice(1, -1).join('/')}/${pg}/`}
                       class="text-primary hover:text-primary-dark"
                     >
                       {pg}
                     </a>
                   ) : (
                     <a
-                      href={`/${currentPath.split('/').slice(1, -1).join('/')}/${pg}/`}
+                      href={`/${currentPath.split('/').slice(1, -2).join('/')}/${pg}/`}
                       class="text-primary hover:text-primary-dark"
                     >
                       {currentPath}

src/components/models/Taxonomy/Taxonomy.astro

@@ -16,7 +16,7 @@ const { kind, taxonomy } = Astro.props;
 
 <a
   class="align-top select-none whitespace-nowrap"
-  href={translatePath(`/blog/${kind}/${slugify(taxonomy.slug)}`)}
+  href={translatePath(`/blog/${kind}/${slugify(taxonomy.slug)}/`)}
 >
   <span class={taxonomyStyle({ color: taxonomy.color, taxonomy: kind })}>
     {kind === 'tags' ? `# ${taxonomy.title}` : taxonomy.title}

src/components/ui/BulletinBoard/BulletinBoard.astro

@@ -23,10 +23,10 @@ const t = await getEntry('i18n', `${locale}/translation`);
     {
       newsList.length > 0 ? (
         newsList.map((news) => (
-          <li class="font-pixelMPlus text-[1.65rem] lg:text-3xl text-bulletin-fg inline mr-20 tracking-[0.125rem] [text-shadow:_0_0_4px]">
+          <li class="font-pixelMPlus text-[1.75rem] lg:text-3xl text-bulletin-fg inline mr-20 tracking-[0.125rem] [text-shadow:_0_0_4px]">
             <a
               href={translatePath(
-                `/${news.collection}/${news.slug.split('/').pop()}`
+                `/${news.collection}/${news.slug.split('/').pop()}/`
               )}
             >
               {news.data.title}

src/components/ui/ContactForm/ContactForm.tsx

@@ -95,7 +95,7 @@ export const ContactForm: Component<Props> = ({ t }) => {
   const handleSubmit: SubmitHandler<FormFields> = async (values) => {
     try {
       await wretch()
-        .url(translatePath('/api/form'))
+        .url(translatePath('/api/form/'))
         .post(values)
         .error(422, (err) => handleError(err))
         .badRequest((err) => handleError(err))

src/components/ui/Likes/Likes.tsx

@@ -13,7 +13,7 @@ type FetcherProps = Omit<Props, 't'> & { locale: Language };
 const fetchLikes = async ({ slug, collection, locale }: FetcherProps) => {
   const translatePath = useTranslatedPath(locale);
   const data = (await wretch()
-    .url(translatePath(`/api/likes?slug=${slug}&collection=${collection}`))
+    .url(translatePath(`/api/likes/?slug=${slug}&collection=${collection}`))
     .get()
     .json()) as { likes: number; liked: boolean };
 
@@ -40,7 +40,7 @@ export const Likes: Component<Props> = (props) => {
 
   const handleClick = async () => {
     await wretch()
-      .url(translatePath('/api/likes'))
+      .url(translatePath('/api/likes/'))
       .post({
         slug: props.slug,
         collection: props.collection,

src/content/blog/en/astro-and-front-matter-cms-combi.mdx

@@ -13,25 +13,28 @@ tags:
     - astro
     - vscode
 level: 1
-description: Detailed explanations of how Front Matter CMS could be the best partner for Astro among all headless CMS, and the configurations I made with some demos.
-modifiedAt: 2024-11-12T04:47:06.742Z
+description: In the CMS community, a commet appeared all of a sudden as if putting an end to the chaos. It's Front Matter CMS. It might be the best match for websites built using Astro.
+modifiedAt: 2024-11-21T06:42:35.096Z
 ---
 
 ## Intro
 
-> [!quote] One Phrase
-> — My favorite words: "All-in-One".
+This website is built using [Astro](https://astro.build/), a JS (meta)framework. Along the way of building, I suffered a great deal from a certain thing irrelevant to the implementation of features: Choice of CMS.
 
-Unlike other headless CMS, articles of this website are edited in and posted from local, in the VSCode editor. I believe this is especially beneficial to developers who build and run their own tech blog or the likes.
+As of 2024, the headless CMS community, in particular, is so chaotic that CMS services are sprouting like mashrooms.
+While having a lot of options is grateful, it's nothing but hell for newbies.
+"I just wanted to build my blog but a large amount of time melted away while working on tutorials for CMS before I noticed..." I'm one of them.
 
-Here, I'm walking you through the beautiful harmony between [Astro](https://astro.build/) and [Front Matter CMS](https://frontmatter.codes/) taking my website's example. For more information about it, see this article.
+Then, I bumped into [Front Matter CMS](https://frontmatter.codes/).
+"It's obvious this star is shining differently than others...!" I was certain about that so decided to leave my content's fate up to it.
+
+Hereafter you'll see how Front Matter CMS works together with [Astro](https://astro.build/) as an example, which is my website.
+For more details of it, see the article below.
 
 https://younagi.dev/blog/astro-website/
 
 ### Reader personas
 
-This article is written assuming readers are a front-end developer whether hobby or work.
-
 - Want to build and run one's own website or blog but overwhelmed by countless options for headless CMS
 - Struggling to find a headless CMS for a website built with Astro
 - Want to see examples of Front Matter CMS in collaboration with Astro
@@ -56,12 +59,15 @@ There are three reasons:
 
 Especially the first one is what makes it different from other headless CMS and makes me decide using it.
 
-Plus, it also offers [an AI assistance feature](https://frontmatter.codes/docs/sponsor-features#front-matter-ai) where you can ask them whatever via the VSCode command. So you don't even have to have an internet connection to look up something, which is pretty cool coupled with the capability of editing articles offline.
+And surprisingly, it offers an [AI assistance feature](https://frontmatter.codes/docs/sponsor-features#front-matter-ai) where you can ask them whatever via the VSCode command.
+So you don't even have to access the internet to look up something, which is pretty cool coupled with the capability of editing articles offline.
 
 ![ Demo: Front Matter AI ](../../../assets/images/front-matter-cms-ai-assitance.png)
 
 ### Downsides of Front Matter CMS
 
+Having said that, there are still some downsides:
+
 - Exclusive to VSCode users
 - Available languages are limited
   - As of Jul 2024, `en`, `de`, and `ja` are supported
@@ -71,7 +77,7 @@ Plus, it also offers [an AI assistance feature](https://frontmatter.codes/docs/s
 
 ### My Astro project's overview
 
-Thanks to [the Astro Content Collections API](https://docs.astro.build/en/guides/content-collections/), content management is very easy. You can manage contents and data collections under the `src/content` directory.
+Thanks to [the Astro Content Collections API](https://docs.astro.build/en/guides/content-collections/), you can easily manage content and data collections under the `src/content` directory.
 
 Below is my project's structural overview. For brevity, most irrelevant parts are omitted from the directory tree.
 
@@ -104,7 +110,7 @@ younagi.dev/
 └── astro.config.ts
 ```
 
-As you can see, the Content Collections work with the `config.ts` file, in which all the contents' types & fields are defined.
+Off-topic, the Content Collections work with the `config.ts` file, in which all the contents' types & fields are defined.
 
 ```typescript title="src/content/config.ts"
 import { defineCollection, reference, z } from "astro:content";
@@ -160,7 +166,9 @@ const tags = defineCollection({
 export const collections = { blog, categories, tags /* ... */ };
 ```
 
-In the `astro.config.ts`, within the scope of this article, I topped up the i18n feature. You're going to have to make Front Matter CMS settings consistent with this later.
+The `astro.config.ts` is a config file for the Astro project overall. As far as it's concerned with this article, I added the i18n feature here.
+
+You're going to have to make Front Matter CMS settings consistent with this later.
 
 ```typescript title="astro.config.ts"
 import { defineConfig /* ... */ } from "astro/config";
@@ -178,12 +186,12 @@ export default defineConfig({
 
 ### Configurations
 
-When it comes to the setup, consult [the Front Matter official doc](https://frontmatter.codes/docs/getting-started). You cannot get lost with the doc and support of the AI assistance.
+When it comes to the setup, consult [the Front Matter official doc](https://frontmatter.codes/docs/getting-started). I suppose you cannot get lost with the doc and support of the AI assistance.
 
 After the setup, you're supposed to tweak the `frontmatter.json` to make it consistent with your contents and data configurations.
 
-In my case, the framework is Astro, but you can do this with other frameworks too as long as you have Markdown/MDX contents in it.
-The thing is how correctly and accurately you can specify your contents' locations in the config file. Here is mine.
+The framework is Astro this time, but you'll probably be able to do this with other frameworks too as long as you have Markdown/MDX contents in it.
+The thing is how correctly you specify your content's locations in the config file.
 
 ````json title="frontmatter.json"
 {
@@ -575,7 +583,7 @@ The thing is how correctly and accurately you can specify your contents' locatio
 }
 ````
 
-Some are automatically added during the setup process and some are not. Here are some important items that I manually added:
+In the above options, some are automatically added during the setup process and some are not. Here are some important items that I manually added:
 
 - `frontMatter.content.publicFolder`: Specify your assets directory if needed
   - In my case, I wanted to modify it for leveraging [the Astro's assets optimization](https://docs.astro.build/en/guides/images/#where-to-store-images). It's set to the `public` directory by default
@@ -649,11 +657,12 @@ You can view and manage all assets from your dashboard. Advantages are:
 
 ## Outro
 
-Front Matter CMS is a VSCode extension. Even if it stops developing, migrating to other CMS is easy, which I think would be one of the most important factors considering the pace as which modern technology is advancing.
+Front Matter CMS is a VSCode extension. Even if it stops developing, migrating to other CMS is easy.
+That would be one of the most important factors considering the pace as which modern technology is advancing.
 
 For the same reason, I've been using [Obsidian](https://obsidian.md/) as my knowledge base and [Astro](https://astro.build/) as a meta framework of this website. The common ground is "**portability**".
 
 - **Obsidian**: All contents are written in Markdown and managed in local unlike Notion
   - All you need to do for migration is move all the `.md` files
-- **Astro**: In `.astro` files, HTML, CSS, and vanilla JS can be used and all contents are written in Markdown/MDX.
+- **Astro**: In `.astro` files, HTML, CSS, and vanilla JS can be used. Content is written in Markdown/MDX.
   - Even if Astro reaches its end of life, still you'll be able to reuse them(HTML, CSS, etc..) since those basic technologies aren't supposed to be deprecated that rapidly

src/content/blog/en/astro-website.mdx

@@ -2,7 +2,7 @@
 title: Build a Personal Website with Astro, Cloudflare Pages, D1, and Front Matter CMS
 description: A dev story behind building my website for geeks wanting to have their own in the era of video. It's built using Astro, Cloudflare Pages, D1, Front Matter CMS, etc.
 publishedAt: 2024-07-13T00:34:54.000Z
-modifiedAt: 2024-11-20T08:46:57.823Z
+modifiedAt: 2024-11-21T08:47:49.562Z
 draft: published
 type: blog
 category:
@@ -20,7 +20,7 @@ level: 4
 
 ## Intro
 
-While I thought to myself "I gotta learn Rust...", I built my personal website using Astro against my will on the pretext of investigation into frontend and ended up spending about 4 months. I'd be lying if I said I never regret.
+While I thought to myself "I gotta learn Rust real quick...", I built my personal website using Astro against my will on the pretext of investigation into frontend and ended up spending about 4 months. I'd be lying if I said I never regret.
 
 You can see the source code published below. Code is worth a thousand words.
 
@@ -44,7 +44,7 @@ As of the day when I'm writing this article, my proficiency level in this field
 
 ### Astro
 
-What's Astro in the first place? In a nutshell, it's "a JavaScript(Hereafter JS) based metaframework that makes it easier to built a lightning fast website".
+What's Astro in the first place? In a nutshell, it's "a JavaScript(Hereafter JS) based metaframework" that makes it easier to built a lightning fast website.
 
 It's called a "metaframework" in that you can leverage other JS frameworks as you like in your project. (e.g. React, Vue, SolidJS, etc.)