chore: update comments for consistency, improve code readability and structure

README.md

@@ -1,4 +1,4 @@
-<img alt="Cover Image" src="https://placehold.co/1920x1080?text=Comming+Soon"/>
+<img alt="Cover Image" src="https://placehold.co/1920x1080?text=Work+In+Progress"/>
 
 <div align="center">
   <picture>

README.zh.md

@@ -1,4 +1,4 @@
-<img alt="Cover Image" src="https://placehold.co/1920x1080?text=Comming+Soon"/>
+<img alt="Cover Image" src="https://placehold.co/1920x1080?text=Work+In+Progress"/>
 
 <div align="center">
   <a title="en" href="README.md">

src/components/Button.astro

@@ -16,10 +16,8 @@ const isTag = isTagPage(currentPath)
 
 // Check if there are other languages to switch
 const showLanguageSwitcher = moreLocales.length > 0
-
 // Check if only the supported language switch list is used
 const useSupportedLangs = isPost || (isTag && supportedLangs.length > 0)
-
 // Choose a language switch list according to the page type
 const nextUrl = useSupportedLangs
   ? getNextSupportedLangPath(currentPath, supportedLangs) // Switch between supported languages
@@ -33,7 +31,7 @@ const nextUrl = useSupportedLangs
   'lg:(fixed w-14rem top-auto bottom-47 right-[max(5.625rem,calc(50vw-34.375rem))])',
 ]}
 >
-  <!-- Language switcher -->
+  <!-- Language Switcher -->
   {showLanguageSwitcher && (
     <a
       href={nextUrl}
@@ -52,7 +50,7 @@ const nextUrl = useSupportedLangs
     </a>
   )}
 
-  <!-- Theme toggle -->
+  <!-- Theme Toggle -->
   <button
     aria-label="Switch light/dark theme"
     class="button-theme-toggle aspect-square w-4.2 c-secondary active:scale-90 hover:c-primary"
@@ -68,7 +66,7 @@ const nextUrl = useSupportedLangs
   </button>
 </div>
 
-<!-- Theme toggle >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> -->
+<!-- Theme Toggle Script >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> -->
 <script is:inline define:vars={{ lightMode, darkMode }}>
 // Update theme
 function updateTheme() {

src/components/Comments/Waline.astro

@@ -2,13 +2,11 @@
 import { defaultLocale, themeConfig } from '@/config'
 import { walineLocaleMap } from '@/i18n/config'
 
-// Theme color configuration
 const {
   light: { primary: lightPrimary, secondary: lightSecondary, background: lightBackground },
   dark: { primary: darkPrimary, secondary: darkSecondary, background: darkBackground },
 } = themeConfig.color
 
-// Waline configuration
 const {
   serverURL = '',
   emoji = [],
@@ -27,7 +25,7 @@ function getWalineLang(currentPath: string, defaultLocale: string): string {
   return walineLocaleMap[lang as keyof typeof walineLocaleMap]
 }
 
-// Get Waline language and generate configuration
+// Get Waline language and generate configuration json
 const walineLang = getWalineLang(Astro.url.pathname, defaultLocale)
 const walineConfigJson = JSON.stringify({
   serverURL,
@@ -71,7 +69,7 @@ initWaline()
 document.addEventListener('astro:after-swap', initWaline)
 </script>
 
-<!-- Custom css styles >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> -->
+<!-- Custom CSS Styles >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> -->
 <style is:global>
 #waline .wl-login-info {
   --at-apply: 'mt-0 mr-3'
@@ -177,8 +175,8 @@ document.addEventListener('astro:after-swap', initWaline)
 }
 </style>
 
-<!-- Official css variables >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> -->
-<!-- Docs: https://waline.js.org/reference/client/style.html -->
+<!-- Official CSS Variables >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> -->
+<!-- https://waline.js.org/reference/client/style.html -->
 <style
   define:vars={{
   lightPrimary,

src/components/Comments/index.astro

@@ -23,6 +23,7 @@ const enableComments = themeConfig.comment?.enabled ?? false
 const walineURL = themeConfig.comment?.waline?.serverURL || ''
 const showWaline = enableComments && walineURL.trim() !== ''
 ---
+
 <!-- {showDisqus && <Disqus />} -->
 <!-- {showGiscus && <Giscus />} -->
 <!-- {showTwikoo && <Twikoo />} -->

src/components/Footer.astro

@@ -10,7 +10,7 @@ const year = Number(startYear) === currentYear
   ? startYear
   : `${startYear}-${currentYear}`
 
-// i18n rss path
+// i18n RSS Path
 const currentLang = getLangFromPath(Astro.url.pathname)
 const links = socialLinks.map((link) => {
   if (link.name === 'RSS') {

src/components/Header.astro

@@ -41,7 +41,7 @@ const SubtitleTag = isPost ? 'div' : 'h2'
       'font-bold font-title',
     ]}
   >
-    <!-- Fix text cropping issues during view transition on ios by adding a div tag -->
+    <!-- Fix text cropping issues during view transition on iOS by adding a div tag -->
     <div
       class="box-content inline-block pr-1"
       transition:name={`site-title-${currentLang}`}

src/components/PostList.astro

@@ -26,6 +26,7 @@ function getPostPath(post: Post) {
   return lang && lang !== defaultLocale ? `/${lang}/posts/${postPath}/` : `/posts/${postPath}/`
 }
 ---
+
 <ul>
   {posts.map(post => (
     <li

src/components/Widgets/GoBack.astro

@@ -14,6 +14,7 @@
   </svg>
 </button>
 
+<!-- Go Back Script >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> -->
 <script>
 function setupBackButton() {
   document.getElementById('back-button')?.addEventListener('click', () => {
@@ -21,6 +22,7 @@ function setupBackButton() {
       window.history.back()
     }
     else {
+      // Click site title link to trigger view transition when no history
       const titleLink = document.getElementById('site-title-link') as HTMLAnchorElement
       if (titleLink) {
         titleLink.click()

src/config.ts

@@ -16,7 +16,7 @@ export const themeConfig: ThemeConfig = {
     // site url
     url: 'https://retypeset.radishzz.cc',
     // favicon url
-    // recommended formats: SVG, PNG and ICO
+    // recommended formats: svg, png or ico
     favicon: '/icon/favicon.svg', // or https://example.com/favicon.svg
   },
   // SITE INFORMATION >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> END

src/content/config.ts

@@ -1,7 +1,7 @@
 import { allLocales } from '@/config'
 import { defineCollection, z } from 'astro:content'
 
-// Posts collection
+// Posts Collection
 const postsCollection = defineCollection({
   schema: z.object({
     // required
@@ -23,7 +23,7 @@ const postsCollection = defineCollection({
   }),
 })
 
-// About page
+// About Page
 const aboutCollection = defineCollection({
   schema: z.object({
     lang: z.enum(['', ...allLocales]).optional().default(''),

src/content/posts/Markdown Style Guide-en.md

@@ -118,32 +118,16 @@ we can use 3 backticks ``` in new line and write snippet and close with 3 backti
 ### Output
 
 ```html
----
-// Your component script here!
-import Banner from '../components/Banner.astro';
-import ReactPokemonComponent from '../components/ReactPokemonComponent.jsx';
-const myFavoritePokemon = [/* ... */];
-const { title } = Astro.props;
----
-<!-- HTML comments supported! -->
-{/* JS comment syntax is also valid! */}
-
-<Banner />
-<h1>Hello, world!</h1>
-
-<!-- Use props and other variables from the component script: -->
-<p>{title}</p>
-
-<!-- Include other UI framework components with a `client:` directive to hydrate: -->
-<ReactPokemonComponent client:visible />
-
-<!-- Mix HTML with JavaScript expressions, similar to JSX: -->
-<ul>
-  {myFavoritePokemon.map((data) => <li>{data.name}</li>)}
-</ul>
-
-<!-- Use a template directive to build class names from multiple strings or even objects! -->
-<p class:list={["add", "dynamic", {classNames: true}]} />
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Example HTML5 Document</title>
+  </head>
+  <body>
+    <p>Test</p>
+  </body>
+</html>
 ```
 
 ## List Types

src/i18n/config.ts

@@ -9,7 +9,7 @@ export const langMap: Record<string, string[]> = {
 }
 
 // Waline Language Map
-// docs: https://waline.js.org/guide/i18n.html
+// https://waline.js.org/guide/i18n.html
 export const walineLocaleMap: Record<string, string> = {
   'zh': 'zh-CN',
   'zh-tw': 'zh-TW',

src/pages/404.astro

@@ -3,7 +3,7 @@ import Layout from '@/layouts/Layout.astro'
 ---
 
 <Layout>
-  <!-- Decorative line -->
+  <!-- Decorative Line -->
   <div class="uno-decorative-line"></div>
   <!-- 404  -->
   <h1 class="mt-10 text-8 font-title">404</h1>

src/pages/[...about].astro

@@ -38,9 +38,9 @@ const { Content } = aboutEntry ? await aboutEntry.render() : { Content: null }
 ---
 
 <Layout>
-  <!-- Decorative line -->
+  <!-- Decorative Line -->
   <div class="uno-decorative-line"></div>
-  <!-- About page content -->
+  <!-- About Page Content -->
   <div class="heti">
     {Content && <Content />}
   </div>

src/pages/[...index].astro

@@ -42,6 +42,7 @@ const postsByYear = await getPostsByYear(lang)
       <PostList posts={pinnedPosts} lang={lang} />
     </section>
   )}
+
   <!-- Regular Posts -->
   {[...postsByYear.entries()].map(([_year, posts]) => (
     <section class="mb-7.5">

src/pages/[...posts_slug].astro

@@ -2,7 +2,7 @@
 import type { CollectionEntry } from 'astro:content'
 import Comments from '@/components/Comments/index.astro'
 import PostDate from '@/components/PostDate.astro'
-import BackHome from '@/components/Widgets/BackHome.astro'
+import GoBack from '@/components/Widgets/GoBack.astro'
 import { allLocales, defaultLocale, moreLocales } from '@/config'
 import { getTagPath } from '@/i18n/path'
 import Layout from '@/layouts/Layout.astro'
@@ -107,8 +107,8 @@ const { Content, remarkPluginFrontmatter } = await post.render()
 >
   <article class="heti mb-12.6">
     <div class="relative">
-      <!-- Desktop back home button -->
-      <BackHome />
+      <!-- Go Back Button On Desktop -->
+      <GoBack />
       <!-- Title -->
       <h1 class="post-title">
         <span

src/pages/[...tags].astro

@@ -34,9 +34,9 @@ const allTags = await getAllTags(lang)
 ---
 
 <Layout>
-  <!-- Decorative line -->
+  <!-- Decorative Line -->
   <div class="uno-decorative-line"></div>
-  <!-- Tags list -->
+  <!-- Tags List -->
   <div class="uno-tags-wrapper">
     {allTags.map(tag => (
       <a

src/pages/[...tags_tag].astro

@@ -53,9 +53,9 @@ const supportedLangs = tagSupportedLangs.filter(Boolean) as string[]
 ---
 
 <Layout supportedLangs={supportedLangs}>
-  <!-- Decorative line -->
+  <!-- Decorative Line -->
   <div class="uno-decorative-line"></div>
-  <!-- Tags list -->
+  <!-- Tags List -->
   <div class="uno-tags-wrapper">
     {allTags.map(tagName => (
       <a
@@ -71,7 +71,7 @@ const supportedLangs = tagSupportedLangs.filter(Boolean) as string[]
     ))}
   </div>
 
-  <!-- Posts list -->
+  <!-- Posts List -->
   <div class="mt-10.5">
     <PostList posts={posts} lang={lang} />
   </div>

src/styles/global.css

@@ -26,7 +26,7 @@ html.dark .astro-code span {
   background-color: var(--shiki-dark-bg) !important;
 }
 
-/* Horizontal reveal animation during theme switching */
+/* View Transition with Theme Toggle >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */
 ::view-transition-new(theme-transition) {
   animation: reveal 1s cubic-bezier(0.4, 0, 0.2, 1);
   clip-path: inset(0 0 0 0);
@@ -64,7 +64,8 @@ html[data-theme-transition] [data-disable-transition-on-theme] {
   }
 }
 
-/* Snell Roundhand static font */
+/* Import Custom Fonts >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */
+/* Snell Roundhand Static Font */
 @font-face {
   font-family: "Snell-Bold";
   src: url("/font/Snell-Bold.woff2") format("woff2");
@@ -79,7 +80,7 @@ html[data-theme-transition] [data-disable-transition-on-theme] {
   unicode-range: U+0030-0039,U+0041-005A,U+0061-007A,U+00C1,U+00C9,U+00CD,U+00D3,U+00DA,U+00DC,U+00D1,U+00E1,U+00E9,U+00ED,U+00F3,U+00FA,U+00FC,U+00F1,U+0410-044F,U+0401,U+0451,U+0021-002F,U+003A-0040,U+00A9;
 }
 
-/* STIXTwoText variable font */
+/* STIXTwoText Variable Font */
 @font-face {
   font-family: "STIX";
   src: url("/font/STIX.woff2") format("woff2-variations");
@@ -96,7 +97,7 @@ html[data-theme-transition] [data-disable-transition-on-theme] {
   unicode-range: U+0030-0039,U+0041-005A,U+0061-007A,U+00C1,U+00C9,U+00CD,U+00D3,U+00DA,U+00DC,U+00D1,U+00E1,U+00E9,U+00ED,U+00F3,U+00FA,U+00FC,U+00F1,U+0410-044F,U+0401,U+0451,U+0021-002F,U+003A-0040,U+00A9;
 }
 
-/* Minimal subset of EarlySummerSerif variable font for ui */
+/* Minimal Subset of EarlySummerSerif Variable Font */
 @font-face {
   font-family: "EarlySummer-Subset";
   src: url("/font/EarlySummer-Subset.woff2") format("woff2-variations");