add share section in article

Author: adrienZ

.gitignore

@@ -116,3 +116,7 @@ logs
 /playwright-report/
 /blob-report/
 /playwright/.cache/
+
+
+.agents/skills
+.playwright-cli

.playwright/cli.config.json

@@ -0,0 +1,8 @@
+{
+	"browser": {
+		"browserName": "chromium",
+		"launchOptions": {
+			"channel": "chromium"
+		}
+	}
+}

app/components/c-share-post.vue

@@ -2,14 +2,16 @@
 	<section class="sm:flex items-center">
 		<h4 class="landing-title title">Sharing is caring :</h4>
 		<div class="sm:flex">
-			<a
-				v-if="osShareEnabled"
-				href="#"
-				class="text-center sm:text-left block sm:inline-block sm:ml-4 mt-2 sm:mt-0 border-pimper border-2 text-pimper font-bold py-2 px-4 rounded"
-				@click="nativeShare"
-			>
-				<span class="inline-block align-middle">Share this post</span>
-			</a>
+			<ClientOnly>
+				<a
+					v-if="osShareEnabled"
+					href="#"
+					class="text-center sm:text-left block sm:inline-block sm:ml-4 mt-2 sm:mt-0 border-pimper border-2 text-pimper font-bold py-2 px-4 rounded"
+					@click="nativeShare"
+				>
+					<span class="inline-block align-middle">Share this post</span>
+				</a>
+			</ClientOnly>
 			<a
 				class="facebook text-center sm:text-left block sm:inline-block bg-gray-500 text-white font-bold py-2 px-4 rounded"
 				:class="{ 'sm:ml-4 mt-2 sm:mt-0': true }"
@@ -49,6 +51,7 @@
 </template>
 
 <script lang="ts" setup>
+import { ClientOnly } from "#components";
 import { computed } from "vue";
 
 const props = defineProps<{

app/components/content/RichLink.server.vue

@@ -35,10 +35,6 @@
 						</div>
 					</div>
 					<div class="w-1/2 border-l border-light p-4">
-						<!-- <div class="flex items-center">
-              <img v-if="data.favicon" class="w-4 h-4 object-cover block !mx-0 !mr-1" :src="data.favicon" />
-              <div class="text-xs">{{ data.siteName }}</div>
-            </div> -->
 						<div class="line-clamp-2 text-sm font-bold">{{ data.title }}</div>
 						<div class="text-xs line-clamp-3 mt-2">{{ data.description }}</div>
 					</div>

app/pages/blog/index.vue

@@ -44,6 +44,7 @@ const { data: posts } = await fetchContent(`content-blog`, () => {
 		.where({
 			$not: techGemsQuery,
 		})
+		.where({ draft: false })
 		.only(["title", "_path", "date", "image", "excerpt"])
 		.sort({ date: -1 })
 		.find();

content/blog/a-developers-guide-to-building-and-testing-ai-skills.md

@@ -114,20 +114,35 @@ In practice, each behavior becomes a small eval case:
 - some context, like the Vue version
 - a few rules that tell me whether the result is acceptable
 
-In order to keep this article short, you can find a concrete example on my Github, have a look ! <RichLink href="https://github.com/adrienZ/skill-development-demo" title="adrienZ/skill-development-demo"></RichLink>
+In order to keep this article short, you can find a concrete example on my Github, have a look !
+
+<RichLink aria-hidden="true" href="https://github.com/adrienZ/skill-development-demo" title="adrienZ/skill-development-demo"></RichLink>
+
+To be honest, my knowledge on evals is quite new, there is things to improve, A/B testing and model temperature could be good way to make a skill more reliable. Current evals systems are also not as structured as traditional unit tests are, this may change in the future !
+
+If you want to learn more about evals, here some references from people who knows what they are doing 😝
+- https://platform.claude.com/docs/en/test-and-evaluate/eval-tool
+- https://agentskills.io/skill-creation/evaluating-skills
+- https://developers.openai.com/blog/eval-skills
+
+## Share it with the world
+
+Your skill is now well written, validated and tested, how can you easily share it with your colleagues ?
+
+Vercel created a skill registry called [skills.sh](https://www.skills.sh/). As per npm, it allows you to publish, audit, browse and install skills. It uses a `skills-lock.json` to easily setup your projects.
+
+<RichLink href="https://www.skills.sh" title=""></RichLink>
+
+If you work in private codebase, you can use any github url or filesystem path.
 
 ## Conclusion
 
 Creating a skill can make a big difference in your everyday life, but they are "just" text and the ouput of you LLM can vary.
 
-As developer we have tools to make this better
+As developer we have tools to make this better:
 - standard: Open agent skill
 - "linters": skill-ref, skill-validator
 - unit-test: evals
+- registry: similarly than npm, we have skills.sh
 
-To be honest, my knowledge on evals is quite new, there is things to improve, A/B testing and model temperature could be good way to make a skill more reliable. Current evals systems are also not as structured as traditional unit tests are, this may change in the future !
-
-If you want to learn more about evals, here some references from people who knows what they are doing 😝
-- https://platform.claude.com/docs/en/test-and-evaluate/eval-tool
-- https://agentskills.io/skill-creation/evaluating-skills
-- https://developers.openai.com/blog/eval-skills
+In other words: **treat your skills like code.**

skills-lock.json

@@ -0,0 +1,11 @@
+{
+	"version": 1,
+	"skills": {
+		"playwright-cli": {
+			"source": "microsoft/playwright-cli",
+			"sourceType": "github",
+			"skillPath": "skills/playwright-cli/SKILL.md",
+			"computedHash": "84495cfda62b6c012afc4cc34a0c35bfc7923ba35983b8c04ce4cace0f35a5d8"
+		}
+	}
+}