Install links in readme (#33)

* Adding badges

* Adding links to easy-install into vscode/insiders

This does mean that the layout of the readme needs a change, moving to a table layout so that we keep better alighnment

* handing different types

* Using the vscode.dev redirect

* wrong link - bad copilot

* handler should be instructions not instruction

update-readme.js

@@ -253,7 +253,28 @@ function extractDescription(filePath) {
 }
 
 /**
- * Generate the instructions section with an alphabetical list of all instructions
+ * Generate badges for installation links in VS Code and VS Code Insiders.
+ * @param {string} link - The relative link to the instructions or prompts file.
+ * @returns {string} - Markdown formatted badges for installation.
+ */
+const vscodeInstallImage =
+  "https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white";
+const vscodeInsidersInstallImage =
+  "https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white";
+const repoBaseUrl =
+  "https://raw.githubusercontent.com/github/awesome-copilot/main";
+const vscodeBaseUrl = "https://vscode.dev/redirect?url=";
+const vscodeInsidersBaseUrl = "https://insiders.vscode.dev/redirect?url=";
+function makeBadges(link, type) {
+  return `[![Install in VS Code](${vscodeInstallImage})](${vscodeBaseUrl}${encodeURIComponent(
+    `vscode:chat-${type}/install?url=${repoBaseUrl}/${link})`
+  )} [![Install in VS Code](${vscodeInsidersInstallImage})](${vscodeInsidersBaseUrl}${encodeURIComponent(
+    `vscode-insiders:chat-${type}/install?url=${repoBaseUrl}/${link})`
+  )}`;
+}
+
+/**
+ * Generate the instructions section with a table of all instructions
  */
 function generateInstructionsSection(instructionsDir) {
   // Get all instruction files
@@ -264,9 +285,11 @@ function generateInstructionsSection(instructionsDir) {
 
   console.log(`Found ${instructionFiles.length} instruction files`);
 
-  let instructionsContent = "";
+  // Create table header
+  let instructionsContent =
+    "| Title | Description | Install |\n| ----- | ----------- | ------- |\n";
 
-  // Generate list items for each instruction file
+  // Generate table rows for each instruction file
   for (const file of instructionFiles) {
     const filePath = path.join(instructionsDir, file);
     const title = extractTitle(filePath);
@@ -275,13 +298,16 @@ function generateInstructionsSection(instructionsDir) {
     // Check if there's a description in the frontmatter
     const customDescription = extractDescription(filePath);
 
+    // Create badges for installation links
+    const badges = makeBadges(link, "instructions");
+
     if (customDescription && customDescription !== "null") {
       // Use the description from frontmatter
-      instructionsContent += `- [${title}](${link}) - ${customDescription}\n`;
+      instructionsContent += `| [${title}](${link}) | ${customDescription} | ${badges} |\n`;
     } else {
       // Fallback to the default approach - use last word of title for description, removing trailing 's' if present
       const topic = title.split(" ").pop().replace(/s$/, "");
-      instructionsContent += `- [${title}](${link}) - ${topic} specific coding standards and best practices\n`;
+      instructionsContent += `| [${title}](${link}) | ${topic} specific coding standards and best practices | ${badges} |\n`;
     }
   }
 
@@ -289,7 +315,7 @@ function generateInstructionsSection(instructionsDir) {
 }
 
 /**
- * Generate the prompts section with an alphabetical list of all prompts
+ * Generate the prompts section with a table of all prompts
  */
 function generatePromptsSection(promptsDir) {
   // Get all prompt files
@@ -300,9 +326,11 @@ function generatePromptsSection(promptsDir) {
 
   console.log(`Found ${promptFiles.length} prompt files`);
 
-  let promptsContent = "";
+  // Create table header
+  let promptsContent =
+    "| Title | Description | Install |\n| ----- | ----------- | ------- |\n";
 
-  // Generate list items for each prompt file
+  // Generate table rows for each prompt file
   for (const file of promptFiles) {
     const filePath = path.join(promptsDir, file);
     const title = extractTitle(filePath);
@@ -311,10 +339,13 @@ function generatePromptsSection(promptsDir) {
     // Check if there's a description in the frontmatter
     const customDescription = extractDescription(filePath);
 
+    // Create badges for installation links
+    const badges = makeBadges(link, "prompt");
+
     if (customDescription && customDescription !== "null") {
-      promptsContent += `- [${title}](${link}) - ${customDescription}\n`;
+      promptsContent += `| [${title}](${link}) | ${customDescription} | ${badges} |\n`;
     } else {
-      promptsContent += `- [${title}](${link})\n`;
+      promptsContent += `| [${title}](${link}) | | ${badges} |\n`;
     }
   }
 
@@ -322,7 +353,7 @@ function generatePromptsSection(promptsDir) {
 }
 
 /**
- * Generate the chat modes section with an alphabetical list of all chat modes
+ * Generate the chat modes section with a table of all chat modes
  */
 function generateChatModesSection(chatmodesDir) {
   // Check if chatmodes directory exists
@@ -344,9 +375,11 @@ function generateChatModesSection(chatmodesDir) {
     return "";
   }
 
-  let chatmodesContent = "";
+  // Create table header
+  let chatmodesContent =
+    "| Title | Description | Install |\n| ----- | ----------- | ------- |\n";
 
-  // Generate list items for each chat mode file
+  // Generate table rows for each chat mode file
   for (const file of chatmodeFiles) {
     const filePath = path.join(chatmodesDir, file);
     const title = extractTitle(filePath);
@@ -355,10 +388,13 @@ function generateChatModesSection(chatmodesDir) {
     // Check if there's a description in the frontmatter
     const customDescription = extractDescription(filePath);
 
+    // Create badges for installation links
+    const badges = makeBadges(link, "chatmode");
+
     if (customDescription && customDescription !== "null") {
-      chatmodesContent += `- [${title}](${link}) - ${customDescription}\n`;
+      chatmodesContent += `| [${title}](${link}) | ${customDescription} | ${badges} |\n`;
     } else {
-      chatmodesContent += `- [${title}](${link})\n`;
+      chatmodesContent += `| [${title}](${link}) | | ${badges} |\n`;
     }
   }