Improve astro demo

playground/astro/astro.config.js

@@ -17,7 +17,7 @@ export default defineConfig({
     plugins: [
       inspect(),
       whyframe({
-        defaultSrc: '/frames/basic',
+        defaultSrc: '/frames/default',
         components: [{ name: 'Story', showSource: true }]
       }),
       whyframeAstro({

playground/astro/package.json

@@ -28,7 +28,6 @@
 		"@whyframe/svelte": "^0.1.5",
 		"@whyframe/vue": "^0.1.3",
 		"astro": "^1.6.3",
-		"preact-render-to-string": "^5.2.6",
 		"svelte": "^3.52.0",
 		"vite-plugin-inspect": "^0.7.7"
 	}

playground/astro/src/components/Popup.module.css

@@ -0,0 +1,44 @@
+.activator {
+  display: block;
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.5em 1em;
+  font-size: 0.9em;
+  font-weight: 500;
+  font-family: inherit;
+  color: #efefef;
+  background-color: #1e1e1e;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+
+.activator:hover {
+  border-color: #ffed24;
+}
+
+.activator:focus,
+.activator:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+.background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: 0;
+  background-color: #090909;
+  color: #efefef;
+  font-size: 1.5rem;
+  opacity: 0.8;
+  z-index: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.background:focus,
+.background:focus-visible {
+  border: 4px solid #ffed24;
+}

playground/astro/src/components/Popup.svelte

@@ -0,0 +1,67 @@
+<script>
+  /** @type {string} */
+  export let content
+
+  let open = false
+</script>
+
+<button
+  class="activator"
+  aria-haspopup="dialog"
+  on:click={() => (open = !open)}
+>
+  <slot />
+</button>
+
+{#if open}
+  <button class="background" on:click={() => (open = false)}>
+    <p>{content}</p>
+  </button>
+{/if}
+
+<style>
+  .activator {
+    display: block;
+    border-radius: 8px;
+    border: 1px solid transparent;
+    padding: 0.5em 1em;
+    font-size: 0.9em;
+    font-weight: 500;
+    font-family: inherit;
+    color: #efefef;
+    background-color: #1e1e1e;
+    cursor: pointer;
+    transition: border-color 0.25s;
+  }
+
+  .activator:hover {
+    border-color: #ffed24;
+  }
+
+  .activator:focus,
+  .activator:focus-visible {
+    outline: 4px auto -webkit-focus-ring-color;
+  }
+
+  .background {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border: 0;
+    background-color: #090909;
+    color: #efefef;
+    font-size: 1.5rem;
+    opacity: 0.8;
+    z-index: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .background:focus,
+  .background:focus-visible {
+    border: 4px solid #ffed24;
+  }
+</style>

playground/astro/src/components/Popup.vue

@@ -0,0 +1,69 @@
+<script setup>
+import { ref } from 'vue'
+
+defineProps({
+  content: {
+    type: String,
+    required: true
+  }
+})
+
+const open = ref(false)
+</script>
+
+<template>
+  <button class="activator" aria-haspopup="dialog" @click="open = !open">
+    <slot />
+  </button>
+
+  <button v-show="open" class="background" @click="open = false">
+    <p>{{ content }}</p>
+  </button>
+</template>
+
+<style scoped>
+.activator {
+  display: block;
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.5em 1em;
+  font-size: 0.9em;
+  font-weight: 500;
+  font-family: inherit;
+  color: #efefef;
+  background-color: #1e1e1e;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+
+.activator:hover {
+  border-color: #ffed24;
+}
+
+.activator:focus,
+.activator:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+.background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: 0;
+  background-color: #090909;
+  color: #efefef;
+  font-size: 1.5rem;
+  opacity: 0.8;
+  z-index: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.background:focus,
+.background:focus-visible {
+  border: 4px solid #ffed24;
+}
+</style>