docs: update docs for new version release

src/contents/adding-new-post.md

@@ -85,7 +85,7 @@ Here are some recommendations, tips & ticks for creating new posts in AstroPaper
 
 There's one thing to note about headings. The AstroPaper blog posts use title (title in the frontmatter) as the main heading of the post. Therefore, the rest of the heading in the post should be using h2 \~ h6.
 
-This rule is not mandatory, but highly recommended for visual and SEO purposes.
+This rule is not mandatory, but highly recommended for visual, accessibility and SEO purposes.
 
 ## Bonus
 

src/contents/customizing-astropaper-theme-color-schemes.md

@@ -29,7 +29,7 @@ export const SITE = {
   author: "Sat Naing",
   desc: "A minimal, responsive and SEO-friendly Astro blog theme.",
   title: "AstroPaper",
-  ogImage: "og-default.png",
+  ogImage: "default-og.png",
   lightAndDarkMode: true, // true by default
   postPerPage: 3,
 };
@@ -41,35 +41,29 @@ To disable `light & dark mode` set `SITE.lightAndDarkMode` to `false`.
 
 By default, if we disable `SITE.lightAndDarkMode`, we will only get system's prefers-color-scheme.
 
-Thus, to choose primary color scheme instead of prefers-color-scheme, we have to set color scheme in the primaryColorScheme variable inside `src/layouts/Layout.astro`.
+Thus, to choose primary color scheme instead of prefers-color-scheme, we have to set color scheme in the primaryColorScheme variable inside `public/toggle-theme.js`.
 
-```html
+```js
-<!-- src/layouts/Layout.astro -->
+/* file: public/toggle-theme.js */
-<script is:inline>
+const primaryColorScheme = ""; // "light" | "dark"
-  const primaryColorScheme = "none"; // "light" | "dark" | "none"
-
-  const darkModeMediaQuery = window.matchMedia(
-    "(prefers-color-scheme: dark)"
-  ).matches;
 
 // Get theme data from local storage
 const currentTheme = localStorage.getItem("theme");
 
-  // some more script codes ...
+// other codes etc...
-</script>
 ```
 
-The **primaryColorScheme** variable can hold three values\_ `"light"`, `"dark"`, `"none"`.
+The **primaryColorScheme** variable can hold two values\_ `"light"`, `"dark"`. You can leave the empty string (default) if you don't want to specify the primary color scheme.
 
-- `"none"` - system's prefers-color-scheme. (default)
+- `""` - system's prefers-color-scheme. (default)
 - `"light"` - use light mode as primary color scheme.
 - `"dark"` - use dark mode as primary color scheme.
 
 <details><summary>Why 'primaryColorScheme' is not inside config.ts?</summary>
 
-> To avoid color flickering on page reload, we have to place some JavaScript codes in the inline script tag. It solves the problem of flickering, but as a trade-off, we cannot use ESM imports anymore.
+> To avoid color flickering on page reload, we have to place the toggle-switch JavaScript codes as early as possible when the page loads. It solves the problem of flickering, but as a trade-off, we cannot use ESM imports anymore.
 
-[Click here](https://docs.astro.build/en/core-concepts/astro-components/#client-side-scripts) to know more about Astro's inline script.
+[Click here](https://docs.astro.build/en/reference/directives-reference/#isinline) to know more about Astro's `is:inline` script.
 
 </details>
 
@@ -84,7 +78,8 @@ Both light & dark color schemes of AstroPaper theme can be customized. You can d
 @tailwind utilities;
 
 @layer base {
-  :root {
+  :root,
+  html[data-theme="light"] {
     --color-fill: 251, 254, 251;
     --color-text-base: 40, 39, 40;
     --color-accent: 0, 108, 172;
@@ -92,7 +87,7 @@ Both light & dark color schemes of AstroPaper theme can be customized. You can d
     --color-card-muted: 205, 205, 205;
     --color-border: 236, 233, 233;
   }
-  .theme-dark {
+  html[data-theme="dark"] {
     --color-fill: 47, 55, 65;
     --color-text-base: 230, 230, 230;
     --color-accent: 26, 217, 217;
@@ -104,9 +99,9 @@ Both light & dark color schemes of AstroPaper theme can be customized. You can d
 }
 ```
 
-In AstroPaper theme, `:root` is the light color scheme and `.theme-dark` is the dark color scheme. If you want to customize your custom color scheme, it is **_recommended_** that you set light color scheme inside `:root` and dark color scheme inside `.theme-dark`.
+In AstroPaper theme, `:root` and `html[data-theme="light"]` selectors are used as the light color scheme and `html[data-theme="dark"]` is used the dark color scheme. If you want to customize your custom color scheme, you have to specify your light color scheme inside `:root`,`html[data-theme="light"]` and dark color scheme inside `html[data-theme="dark"]`.
 
-Colors are declared in CSS custom property (CSS Variable) notation. Color property values are written in rgb values. (Note: instead of rgb(40, 39, 40), only specify `40, 39, 40`)
+Colors are declared in CSS custom property (CSS Variable) notation. Color property values are written in rgb values. (Note: instead of `rgb(40, 39, 40)`, only specify `40, 39, 40`)
 
 Here is the detail explaination of color properties.
 
@@ -115,7 +110,7 @@ Here is the detail explaination of color properties.
 | `--color-fill`       | Primary color of the website. Usually the main background. |
 | `--color-text-base`  | Secondary color of the website. Usually the text color.    |
 | `--color-accent`     | Accent color of the website. Link color, hover color etc.  |
-| `--color-card`       | Card, scrollbar and code background color.                 |
+| `--color-card`       | Card, scrollbar and code background color (like `this`).   |
 | `--color-card-muted` | Card and scrollbar background color for hover state etc.   |
 | `--color-border`     | Border color. Especially used in horizontal row (hr)       |
 
@@ -124,7 +119,8 @@ Here is an example of changing the light color scheme.
 ```css
 @layer base {
   /* lobster color scheme */
-  :root {
+  :root,
+  html[data-theme="light"] {
     --color-fill: 246, 238, 225;
     --color-text-base: 1, 44, 86;
     --color-accent: 225, 74, 57;
@@ -132,4 +128,5 @@ Here is an example of changing the light color scheme.
     --color-card-muted: 233, 119, 106;
     --color-border: 220, 152, 145;
   }
+}
 ```

src/contents/how-to-configure-astropaper-theme.md

@@ -81,24 +81,27 @@ You can configure your own social links along with its icons.
 
 Currently 19 social icons are supported. (Github, LinkedIn, Facebook etc.)
 
-You can specify and enable certain social links in hero section and footer. To do this, go to `/src/config.ts` and then you'll find `SOCIALS` object.
+You can specify and enable certain social links in hero section and footer. To do this, go to `/src/config.ts` and then you'll find `SOCIALS` array of object.
 
 ```js
 // file: src/config.ts
-export const SOCIALS: SocialsObject = [
+export const SOCIALS: SocialObjects = [
   {
     name: "Github",
     href: "https://github.com/satnaing/astro-paper",
+    linkTitle: ` ${SITE.title} on Github`,
     active: true,
   },
   {
     name: "Facebook",
     href: "https://github.com/satnaing/astro-paper",
+    linkTitle: `${SITE.title} on Facebook`,
     active: true,
   },
   {
     name: "Instagram",
     href: "https://github.com/satnaing/astro-paper",
+    linkTitle: `${SITE.title} on Instagram`,
     active: true,
   },
   ...
@@ -110,16 +113,31 @@ You have to set specific social link to `active: true` in order to appear your s
 For instance, if I want to make my Github appear, I'll make it like this.
 
 ```js
-export const SOCIALS: SocialsObject = [
+export const SOCIALS: SocialObjects = [
   {
     name: "Github",
     href: "https://github.com/satnaing", // update account link
+    linkTitle: `${SITE.title} on Github`, // this text will appear on hover and VoiceOver
     active: true, // makre sure to set active to true
   }
   ...
 ]
 ```
 
+Another thing to note is that you can specify the `linkTitle` in the object. This text will display when hovering on the social icon link. Besides, this will improve accessibility and SEO. AstroPaper provides default link title values; but you can replace them with your own texts.
+
+For example,
+
+```js
+linkTitle: `${SITE.title} on Twitter`,
+```
+
+to
+
+```js
+linkTitle: `Follow ${SITE.title} on Twitter`;
+```
+
 ## Conclusion
 
-This is the brief specification of how you can customize this theme. You can customize more if you know some coding. For customizing styles, please read [this article](/posts/customizing-astropaper-theme-color-schemes). Thanks for reading.✌🏻
+This is the brief specification of how you can customize this theme. You can customize more if you know some coding. For customizing styles, please read [this article](https://astro-paper.pages.dev/posts/customizing-astropaper-theme-color-schemes/). Thanks for reading.✌🏻

src/contents/predefined-color-schemes.md

@@ -15,20 +15,21 @@ description:
 
 I've crafted some predefined color schemes for this AstroPaper blog theme. You can replace these color schemes with the original ones.
 
-If you don't know how you can configure color schemes, check [this blog post](/posts/customizing-astropaper-theme-color-schemes).
+If you don't know how you can configure color schemes, check [this blog post](https://astro-paper.pages.dev/posts/customizing-astropaper-theme-color-schemes/).
 
 ## Table of contents
 
 ## Light color schemes
 
-Light color scheme has to be defined as `:root`.
+Light color scheme has to be defined using the css selector `:root` and `html[data-theme="light"]`.
 
 ### Lobster
 
 ![lobster-color-scheme](https://user-images.githubusercontent.com/53733092/192282447-1d222faf-a3ce-44a9-9cfe-ac873155e5a9.png)
 
 ```css
-:root {
+:root,
+html[data-theme="light"] {
   --color-fill: 246, 238, 225;
   --color-text-base: 1, 44, 86;
   --color-accent: 225, 74, 57;
@@ -43,7 +44,8 @@ Light color scheme has to be defined as `:root`.
 ![leaf-blue-color-scheme](https://user-images.githubusercontent.com/53733092/192318782-e80e3c39-54b5-423e-8f4b-9ae60402fc8d.png)
 
 ```css
-:root {
+:root,
+html[data-theme="light"] {
   --color-fill: 242, 245, 236;
   --color-text-base: 53, 53, 56;
   --color-accent: 17, 88, 209;
@@ -58,7 +60,8 @@ Light color scheme has to be defined as `:root`.
 ![pinky-color-scheme](https://user-images.githubusercontent.com/53733092/192286510-892d0042-2d6d-471e-bb72-954221ae2d17.png)
 
 ```css
-:root {
+:root,
+html[data-theme="light"] {
   --color-fill: 250, 252, 252;
   --color-text-base: 34, 46, 54;
   --color-accent: 211, 0, 106;
@@ -70,14 +73,14 @@ Light color scheme has to be defined as `:root`.
 
 ## Dark color schemes
 
-Light color scheme has to be defined as `.theme-dark`.
+Light color scheme has to be defined as `html[data-theme="dark"]`.
 
 ### Deep Oyster
 
 ![deep-oyster-color-scheme](https://user-images.githubusercontent.com/53733092/192314524-45ec5904-3d8f-450a-9edf-1e32c5e11d6c.png)
 
 ```css
-.theme-dark {
+html[data-theme="dark"] {
   --color-fill: 33, 35, 61;
   --color-text-base: 244, 247, 245;
   --color-accent: 255, 82, 86;
@@ -92,7 +95,7 @@ Light color scheme has to be defined as `.theme-dark`.
 ![pinky-dark-color-scheme](https://user-images.githubusercontent.com/53733092/192307050-fbd55326-911c-4001-87c6-a8ad9378ac2e.png)
 
 ```css
-.theme-dark {
+html[data-theme="dark"] {
   --color-fill: 53, 54, 64;
   --color-text-base: 233, 237, 241;
   --color-accent: 255, 120, 200;