Merge pull request #82 from microsoft/feature/revamp-skills-site

feat: Skills Explorer Website

Author: thegovind

docs-site/.gitignore

@@ -0,0 +1,32 @@
+# build output
+dist/
+
+# generated types
+.astro/
+
+# generated data (built from source)
+src/data/skills.json
+
+# dependencies
+node_modules/
+
+# playwright test artifacts
+playwright-report/
+test-results/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store
+
+# jetbrains setting folder
+.idea/

docs-site/.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+  "recommendations": ["astro-build.astro-vscode"],
+  "unwantedRecommendations": []
+}

docs-site/.vscode/launch.json

@@ -0,0 +1,11 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "command": "./node_modules/.bin/astro dev",
+      "name": "Development server",
+      "request": "launch",
+      "type": "node-terminal"
+    }
+  ]
+}

docs-site/README.md

@@ -0,0 +1,43 @@
+# Astro Starter Kit: Minimal
+
+```sh
+npm create astro@latest -- --template minimal
+```
+
+> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
+
+## 🚀 Project Structure
+
+Inside of your Astro project, you'll see the following folders and files:
+
+```text
+/
+├── public/
+├── src/
+│   └── pages/
+│       └── index.astro
+└── package.json
+```
+
+Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
+
+There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
+
+Any static assets, like images, can be placed in the `public/` directory.
+
+## 🧞 Commands
+
+All commands are run from the root of the project, from a terminal:
+
+| Command                   | Action                                           |
+| :------------------------ | :----------------------------------------------- |
+| `npm install`             | Installs dependencies                            |
+| `npm run dev`             | Starts local dev server at `localhost:4321`      |
+| `npm run build`           | Build your production site to `./dist/`          |
+| `npm run preview`         | Preview your build locally, before deploying     |
+| `npm run astro ...`       | Run CLI commands like `astro add`, `astro check` |
+| `npm run astro -- --help` | Get help using the Astro CLI                     |
+
+## 👀 Want to learn more?
+
+Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).

docs-site/astro.config.mjs

@@ -0,0 +1,13 @@
+// @ts-check
+import { defineConfig } from 'astro/config';
+import react from '@astrojs/react';
+
+// https://astro.build/config
+export default defineConfig({
+  integrations: [react()],
+  outDir: '../docs',
+  base: '/skills/',
+  build: {
+    assets: '_astro'
+  }
+});

docs-site/e2e/accessibility.spec.ts

@@ -0,0 +1,140 @@
+import { test, expect } from '@playwright/test';
+import AxeBuilder from '@axe-core/playwright';
+
+test.describe('Accessibility', () => {
+  test('homepage should have no WCAG AA violations', async ({ page }) => {
+    await page.goto('./');
+
+    await page.waitForSelector('.skills-grid a');
+
+    const accessibilityScanResults = await new AxeBuilder({ page })
+      .withTags(['wcag2a', 'wcag2aa'])
+      .analyze();
+
+    if (accessibilityScanResults.violations.length > 0) {
+      console.log('Accessibility violations:', JSON.stringify(accessibilityScanResults.violations, null, 2));
+    }
+
+    expect(accessibilityScanResults.violations).toEqual([]);
+  });
+
+  test('skip-to-content link works', async ({ page }) => {
+    await page.goto('./');
+
+    await page.keyboard.press('Tab');
+
+    const skipLink = page.locator('a[href="#main-content"], .skip-link');
+    
+    if (await skipLink.isVisible()) {
+      await skipLink.click();
+
+      const mainContent = page.locator('#main-content, main');
+      await expect(mainContent).toBeVisible();
+    }
+  });
+
+  test('all images have alt text', async ({ page }) => {
+    await page.goto('./');
+
+    const images = page.locator('img');
+    const imageCount = await images.count();
+
+    for (let i = 0; i < imageCount; i++) {
+      const img = images.nth(i);
+      const alt = await img.getAttribute('alt');
+      const role = await img.getAttribute('role');
+      
+      const hasAccessibleLabel = alt !== null || role === 'presentation' || role === 'none';
+      expect(hasAccessibleLabel).toBeTruthy();
+    }
+  });
+
+  test('interactive elements are keyboard accessible', async ({ page }) => {
+    await page.goto('./');
+
+    for (let i = 0; i < 10; i++) {
+      await page.keyboard.press('Tab');
+      
+      const focusedElement = page.locator(':focus');
+      const isVisible = await focusedElement.isVisible().catch(() => false);
+      
+      if (isVisible) {
+        const tagName = await focusedElement.evaluate(el => el.tagName.toLowerCase());
+        const role = await focusedElement.getAttribute('role');
+        const tabIndex = await focusedElement.getAttribute('tabindex');
+        
+        const isInteractive = ['a', 'button', 'input', 'select', 'textarea'].includes(tagName) ||
+                             ['button', 'link', 'tab', 'menuitem'].includes(role || '') ||
+                             tabIndex === '0';
+        
+        expect(isInteractive).toBeTruthy();
+      }
+    }
+  });
+
+  test('color contrast meets WCAG AA standards', async ({ page }) => {
+    await page.goto('./');
+
+    const accessibilityScanResults = await new AxeBuilder({ page })
+      .withTags(['wcag2aa'])
+      .options({ rules: { 'color-contrast': { enabled: true } } })
+      .analyze();
+
+    const contrastViolations = accessibilityScanResults.violations.filter(
+      v => v.id === 'color-contrast'
+    );
+
+    expect(contrastViolations).toEqual([]);
+  });
+
+  test('focus indicators are visible', async ({ page }) => {
+    await page.goto('./');
+
+    await page.keyboard.press('Tab');
+
+    const focusedElement = page.locator(':focus');
+    
+    if (await focusedElement.isVisible()) {
+      const outline = await focusedElement.evaluate(el => {
+        const styles = window.getComputedStyle(el);
+        return {
+          outlineStyle: styles.outlineStyle,
+          outlineWidth: styles.outlineWidth,
+          boxShadow: styles.boxShadow,
+        };
+      });
+
+      const hasFocusIndicator = 
+        (outline.outlineStyle !== 'none' && outline.outlineWidth !== '0px') ||
+        outline.boxShadow !== 'none';
+
+      expect(hasFocusIndicator).toBeTruthy();
+    }
+  });
+
+  test('command palette is keyboard navigable', async ({ page }) => {
+    await page.goto('./');
+    await page.waitForLoadState('networkidle');
+
+    await page.keyboard.press('Control+k');
+
+    const searchInput = page.locator('[cmdk-input]');
+    await searchInput.waitFor({ state: 'visible', timeout: 10000 });
+    await expect(searchInput).toBeVisible();
+
+    await page.keyboard.type('azure');
+    await page.waitForTimeout(200);
+
+    await page.keyboard.press('ArrowDown');
+
+    const results = page.locator('[cmdk-item]');
+    if (await results.count() > 0) {
+      const selectedItem = page.locator('[cmdk-item][aria-selected="true"]');
+      const count = await selectedItem.count();
+      expect(count).toBeGreaterThanOrEqual(0);
+    }
+
+    await page.keyboard.press('Escape');
+    await expect(searchInput).not.toBeVisible();
+  });
+});

docs-site/e2e/copy.spec.ts

@@ -0,0 +1,46 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Copy to Clipboard', () => {
+  test.beforeEach(async ({ page, context }) => {
+    await context.grantPermissions(['clipboard-read', 'clipboard-write']);
+    await page.goto('./');
+    await page.waitForLoadState('networkidle');
+  });
+
+  test('copy button is visible on skill cards', async ({ page }) => {
+    const skillCard = page.locator('.skills-grid a').first();
+    await skillCard.waitFor({ state: 'visible', timeout: 10000 });
+
+    await skillCard.hover();
+
+    const copyButton = skillCard.locator('button:has-text("Copy")');
+    await expect(copyButton).toBeVisible();
+  });
+
+  test('clicking copy button shows success feedback', async ({ page }) => {
+    const skillCard = page.locator('.skills-grid a').first();
+    await skillCard.waitFor({ state: 'visible', timeout: 10000 });
+    await skillCard.hover();
+
+    const copyButton = skillCard.locator('button:has-text("Copy")');
+    await expect(copyButton).toBeVisible();
+    await copyButton.click();
+
+    const copiedButton = skillCard.locator('button:has-text("Copied!")');
+    await expect(copiedButton).toBeVisible({ timeout: 3000 });
+  });
+
+  test('copy button copies correct install command', async ({ page }) => {
+    const skillCard = page.locator('.skills-grid a').first();
+    await skillCard.waitFor({ state: 'visible', timeout: 10000 });
+    await skillCard.hover();
+
+    const copyButton = skillCard.locator('button:has-text("Copy")');
+    await expect(copyButton).toBeVisible();
+    await copyButton.click();
+
+    const clipboardText = await page.evaluate(() => navigator.clipboard.readText());
+    
+    expect(clipboardText).toMatch(/npx skills add microsoft\/skills --skill/);
+  });
+});