Add copy to clipboard component

Author: webstackdev

.vscode/settings.json

@@ -84,6 +84,7 @@
     "Postg",
     "postgrest",
     "psql",
+    "pylint",
     "qpart",
     "qparts",
     "Qualys",

_TODO.md

@@ -69,60 +69,9 @@ If we want to make it feel less inconsistent, we could either (a) rename `_logge
 - CallToAction/Newsletter
 - ContactForm
 
-## Mobile Social Shares UI
-
-See the example image in Social Shares. The social shares UI on mobile should be a modal that slides in from the bottom.
-
-## Performance
-
-Implement mitigations in test/e2e/specs/07-performance/PERFORMANCE.md
-
-## Analytics
-
-Vercel Analytics
-
-- Highlighter component
-- Social Shares component
-- Social Embeds: Track embed interactions
-- Cookie Consent
-- Download Form component
-
-npm i @vercel/analytics
-import Analytics from '@vercel/analytics/astro'
-https://vercel.com/docs/analytics/quickstart#add-the-analytics-component-to-your-app
-
-## Themepicker tooltips, extra themes
-
-- Add additional themes
-- Add tooltip that makes use of the description field for the theme, explaining what the intent of the theme is
-
-## Sentry feedback, chat bot tying into my phone and email
-
-See note in src/components/scripts/sentry/client.ts - "User Feedback - allow users to report issues"
-
-https://vercel.com/kevin-browns-projects-dd474f73/astro-webstackbuilders-com/ai-gateway
-
-## Uppy file uploads from contact form
-
-docs/CONTACT_FORM.md
+## Refactor Theme Colors
 
-Where to upload to?
-
-## Search
-
-Add Upstash Search as a Vercel Marketplace Integration.
-
-Lunr is a JS search library using an inverted index. Client-side search for statically hosted pages.
-
-### [`@jackcarey/astro-lunr`](https://www.npmjs.com/package/@jackcarey/astro-lunr)
-
-### [`@siverv/astro-lunr`](https://www.npmjs.com/package/@siverv/astro-lunr)
-
-## Email Templates
-
-Right now we're using string literals to define HTML email templates for site mails. We should use Nunjucks with the rule-checking for valid CSS in HTML emails like we have in the corporate email footer repo.
-
-## Color vars
+### Color vars
 
 brand primary:    #001733
 brand secondary:  #0062B6
@@ -132,7 +81,9 @@ accent
 
 text-white, other default Tailwind colors
 
-## Files with Skipped Tests
+## Refactor E2E Test Suite
+
+### Files with Skipped Tests
 
 Blocked Categories (44 tests):
 
@@ -141,7 +92,7 @@ Lighthouse audits (6) - Integration pending
 Newsletter double opt-in (6) - Email testing infrastructure
 Axe accessibility (2) - axe-core integration
 
-## Axe tags
+### Axe tags
 
 cat.aria: Rules related to Accessible Rich Internet Applications (ARIA) attributes and roles.
 cat.color: Rules related to color contrast and meaning conveyed by color.
@@ -165,20 +116,6 @@ Needs to add real API key and test
 - (Optional) Set up Bridgy for social media
 - Test with sample webmentions
 
-## Custom Directives
-
-[`astro-directives`](https://github.com/QuentinDutot/astro-directives)
-
-```react
-<Component client:hover />
-```
-
-| Attribute     | Load the javascript and hydrate on ... |
-| ------------- | -------------------------------------- |
-| client:click  | element click event                    |
-| client:hover  | element mouseover event                |
-| client:scroll | window scroll event                    |
-
 ## Prefetch Links
 
 The default prefetch strategy when adding the data-astro-prefetch attribute is hover. To change it, you can configure prefetch.defaultStrategy in your astro.config.mjs file.
@@ -212,6 +149,59 @@ You can then opt-out of prefetching for individual links by setting data-astro-p
 <a href="/about" data-astro-prefetch="false">About</a>
 ```
 
+## Mobile Social Shares UI
+
+See the example image in Social Shares. The social shares UI on mobile should be a modal that slides in from the bottom.
+
+## Performance
+
+Implement mitigations in test/e2e/specs/07-performance/PERFORMANCE.md
+
+## Analytics
+
+Vercel Analytics
+
+- Highlighter component
+- Social Shares component
+- Social Embeds: Track embed interactions
+- Cookie Consent
+- Download Form component
+
+npm i @vercel/analytics
+import Analytics from '@vercel/analytics/astro'
+https://vercel.com/docs/analytics/quickstart#add-the-analytics-component-to-your-app
+
+## Themepicker tooltips, extra themes
+
+- Add additional themes
+- Add tooltip that makes use of the description field for the theme, explaining what the intent of the theme is
+
+## Sentry feedback, chat bot tying into my phone and email
+
+See note in src/components/scripts/sentry/client.ts - "User Feedback - allow users to report issues"
+
+https://vercel.com/kevin-browns-projects-dd474f73/astro-webstackbuilders-com/ai-gateway
+
+## Uppy file uploads from contact form
+
+docs/CONTACT_FORM.md
+
+Where to upload to?
+
+## Search
+
+Add Upstash Search as a Vercel Marketplace Integration.
+
+Lunr is a JS search library using an inverted index. Client-side search for statically hosted pages.
+
+### [`@jackcarey/astro-lunr`](https://www.npmjs.com/package/@jackcarey/astro-lunr)
+
+### [`@siverv/astro-lunr`](https://www.npmjs.com/package/@siverv/astro-lunr)
+
+## Email Templates
+
+Right now we're using string literals to define HTML email templates for site mails. We should use Nunjucks with the rule-checking for valid CSS in HTML emails like we have in the corporate email footer repo.
+
 ## Astro Components to Add
 
 ### "Add to Calendar" button
@@ -221,14 +211,6 @@ Google Calendar, Apple Calendar,  Yahoo Calender,  Microsoft 365, Outlook, and T
 `https://github.com/add2cal/add-to-calendar-button`
 `https://add-to-calendar-button.com/`
 
-### Astro wrapper for the `@github/clipboard-copy-element` web component. Copies element text content or input values to the clipboard
-
-[`clipboard-copy`](https://github.com/BryceRussell/astro-github-elements/tree/main/packages/clipboard-copy#astro-github-elementsclipboard-copy)
-
-### Astro wrapper for GitHub's relative time web component. Translates dates to past or future time phrases, like "*4 hours from now*" or "*20 days ago*"
-
-[Relative Time](https://github.com/BryceRussell/astro-github-elements/tree/main/packages/time#readme)
-
 ## Markdown
 
 ## Code Block and Highlighting

astro.config.ts

@@ -1,5 +1,6 @@
 import AstroPWA from '@vite-pwa/astro'
 import db from '@astrojs/db'
+import directives from 'astro-directives'
 import icon from 'astro-icon'
 import linkValidator from 'astro-link-validator'
 import lit from '@semantic-ui/astro-lit'
@@ -51,6 +52,9 @@ const standardIntegrations = [
   /** Astro DB - uses Tursa for backing store in production */
   db(),
   ...sharedTestIntegrations,
+  /**
+   * Adds client:click, client:hover, and client:scroll custom client directives for components */
+  directives(),
   mdx(markdownConfig),
   /** Generate favicons and PWA icons from source SVG */
   faviconGenerator(),

package-lock.json

@@ -44,7 +44,7 @@
     "lint:actions": "FORCE_COLOR=1 npx node-actionlint && FORCE_COLOR=1 python3 -m pylint $(find .github/actions -type f -path '*/src/*.py')",
     "lint:code": "npx eslint \"@types/**/*.{js,ts}\" \"src/**/*.{js,ts,tsx,astro}\" \"test/**/*.{js,ts,tsx,astro}\"",
     "lint:inclusive-language": "npx alex src/content",
-    "lint:json": "FORCE_COLOR=1 npx prettier '**/*.json' --cache --ignore-path .gitignore",
+    "lint:json": "FORCE_COLOR=1 npx prettier \"**/*.json\" --cache --check --ignore-path .gitignore --ignore-path .prettierignore",
     "lint:md": "FORCE_COLOR=1 npx markdownlint-cli2 \"**/*.{md,mdx}\" \"!**/node_modules/**\" \"!**/dist/**\" \"!**/.astro/**\" \"!**/dev-dist/**\" \"!**/__blobstorage__/**\"",
     "lint:style": "FORCE_COLOR=1 npx stylelint \"src/**/*.{css,astro}\"",
     "lint:tsc:check": "npm run sync && tsc --noEmit -p tsconfig.json --pretty false",
@@ -102,6 +102,7 @@
     "@vite-pwa/astro": "^1.2.0",
     "@webcomponents/template-shadowroot": "^0.2.1",
     "astro": "5.16.6",
+    "astro-directives": "^1.0.7",
     "astro-icon": "^1.1.5",
     "astro-link-validator": "github:rodgtr1/astro-link-validator",
     "astro-og-canvas": "^0.7.2",