Merge remote-tracking branch 'origin/dev'

assets/css/global.css

@@ -0,0 +1,7 @@
+body {
+  /* Font Smoothing */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+  -webkit-tap-highlight-color: transparent;
+}

components/AuthorPanel.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="bg-base-100 rounded-lg shadow-md my-4 px-8 py-12 hidden lg:block relative">
+    <div class="bg-base-100 rounded-3xl shadow-md my-4 px-8 py-12 hidden lg:block relative">
         <div class="avatar w-full">
             <div class="w-full rounded-full aspect-square">
                 <img src="/pien.png" alt="Author's Icon" title="Author's Icon" />
@@ -10,7 +10,7 @@
             <p>I write code and eat computer bugs.</p>
         </div>
         <div class="mt-4">
-            <a href="https://jacky.fan" target="_blank" class="btn btn-neutral btn-outline w-full">About Me</a>
+            <a href="https://jacky.fan" target="_blank" class="btn btn-neutral btn-outline w-full rounded-2xl hover:rounded-3xl focus:rounded-3xl transition-all">About Me</a>
         </div>
     </div>
 </template>

components/LatestPostPanel.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="bg-base-100 rounded-lg shadow-md my-4 px-8 py-8 hidden lg:block">
+    <div class="bg-base-100 rounded-2xl shadow-md my-4 px-8 py-8 hidden lg:block">
         <div class="prose">
             <h4 class="text-xl">
                 <IconsNewsPaperIcon className="h-[1.2em] mb-1 inline" /> Latest Articles

components/article/Document.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="bg-base-100 rounded-lg shadow-md my-4 px-4 md:px-8 py-12">
+    <div class="bg-base-100 rounded-3xl shadow-md my-4 px-4 md:px-8 py-12">
         <ContentDoc v-slot="{ doc }">
             <div className="breadcrumbs mb-2">
                 <ul class="text-sm">

components/content/ProseCode.vue

@@ -1,7 +1,7 @@
 <template>
-    <div class="mockup-code prose-mockup-code shadow relative">
+    <div class="mockup-code prose-mockup-code shadow relative rounded-2xl">
         <slot />
-        <button className="btn btn-square btn-sm absolute bottom-4 right-4 inline opacity-95" aria-label="Copy Code"
+        <button className="btn btn-square btn-sm absolute bottom-4 right-4 inline opacity-95 flex justify-center items-center" aria-label="Copy Code"
             @click="copyToClipboard(code)">
             <IconsCopyClipboard className="p-1" />
         </button>

content/articles/Force-use-npm-yarn-or-pnpm.md

@@ -0,0 +1,76 @@
+---
+title: Force Use npm, yarn or pnpm
+created_date: 2024-04-30 00:30:00
+Tags: Package Manager
+author: Jacky FAN
+description: Nowadays, there are many package manager on the Internet, such as `npm`, `pnpm` and `yarn`. Most of the time, we do not want to accidentally run other package managers when the project is already setup using a package manager for avoiding potential issues in the future.
+head:
+  meta:
+    - name: 'keywords'
+      content: 'package manager, npm, yarn, pnpm, package-lock.json'
+    - name: 'author'
+      content: 'Jacky FAN'
+    - name: 'copyright'
+      content: '© 2024 Jacky FAN'
+---
+
+![Force Use npm, yarn or pnpm](/assets/img/Force-use-npm-yarn-or-pnpm/banner.png)
+
+Nowadays, there are many package manager on the Internet, such as `npm`, `pnpm` and `yarn`. Most of the time, we do not want to accidentally run other package managers when the project is already setup using a package manager for avoiding potential issues in the future.
+
+![Yarn warning about mixing package managers](/assets/img/Force-use-npm-yarn-or-pnpm/Untitled.png)
+
+Therefore, this article shows how to force a project to use specific package manager.
+
+## The simple solution that does not work
+
+The first solution shows in the documents of pnpm, which applied `only-allow` npm package into `preinstall` script into `package.json`.
+
+```json
+"preinstall": "npx only-allow pnpm" // or yarn / npm
+```
+
+And it doesn’t work. 
+
+![Untitled](/assets/img/Force-use-npm-yarn-or-pnpm/Untitled%201.png)
+
+The `only-allow` package did stopped `npm i` from running and shown the warning messages. However, it stills generate `package-lock.json` file that we do not want. 
+
+It is because the `preinstall` script runs after dependencies installation, which generates the `package-lock.json` while installing dependencies.
+
+## Better Solution for Force Use npm / yarn / pnpm
+
+Here is a better solution for 
+
+```bash
+echo "engine-strict = true" > .npmrc
+```
+
+package.json
+
+```bash
+  "engines": {
+    "npm": "please-use-yarn", # or "please-use-npm" or "please-use-pnpm"
+    "pnpm": "please-use-yarn",
+    "yarn": ">= 1.19.1" # or remove the whole line
+  }
+```
+
+Here are the results:
+
+![Untitled](/assets/img/Force-use-npm-yarn-or-pnpm/Untitled%202.png)
+
+![Untitled](/assets/img/Force-use-npm-yarn-or-pnpm/Untitled%203.png)
+
+![Untitled](/assets/img/Force-use-npm-yarn-or-pnpm/Untitled%204.png)
+
+There is no `package-lock.json` after running `npm i`. Looks great~
+
+This works by checking package manager’s versions is matching the specific version in the package.json before running any installation. Since the version of package manager will never match `please-use-xxx`, it will fail to start installing.
+
+The only downside of this solution is that any package manager that are not specified in the package.json will be able to install package and generate lock file.
+
+
+## Reference
+- [https://www.freecodecamp.org/news/how-to-force-use-yarn-or-npm/](https://www.freecodecamp.org/news/how-to-force-use-yarn-or-npm/)
+- [https://github.com/pnpm/only-allow/issues/27](https://github.com/pnpm/only-allow/issues/27)

nuxt.config.ts

@@ -37,4 +37,5 @@ export default defineNuxtConfig({
             routes: ["/sitemap.xml", "/rss.xml"],
         },
     },
+    css: ['~/assets/css/global.css']
 });

pages/index.vue

@@ -58,7 +58,7 @@ export default {
 
             <div v-for="(article, index) in data?.articles">
               <div v-if="index < skipArticles + 5 && index >= skipArticles">
-                <div class="bg-base-100 rounded-lg shadow-md my-4 px-8 py-12">
+                <div class="bg-base-100 rounded-3xl shadow-md my-4 px-8 py-12">
                   <article class="prose prose-slate w-full inline">
                     <h2 class="mb-0 text-2xl">
                       <NuxtLink :to="`${article._path}`" class="no-underline hover:text-blue-500 transition-all">