feat: [TASK-162] create a web component for an email subscription (#125)

* feat: create new embeds web component app

* chore(deps): update all dependencies #124

* perf: 404 page

* fix: merge vite config

.github/workflows/cleanup-cache.yml

@@ -0,0 +1,29 @@
+name: cleanup caches by a branch
+on:
+  pull_request:
+    types:
+      - closed
+
+jobs:
+  cleanup:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Cleanup
+        run: |
+          gh extension install actions/gh-actions-cache
+
+          echo "Fetching list of cache key"
+          cacheKeysForPR=$(gh actions-cache list -R $REPO -B $BRANCH -L 100 | cut -f 1 )
+
+          ## Setting this to not fail the workflow while deleting cache keys.
+          set +e
+          echo "Deleting caches..."
+          for cacheKey in $cacheKeysForPR
+          do
+              gh actions-cache delete $cacheKey -R $REPO -B $BRANCH --confirm
+          done
+          echo "Done"
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          REPO: ${{ github.repository }}
+          BRANCH: refs/pull/${{ github.event.pull_request.number }}/merge

apps/frontend/apps/docs-dashboard/package.json

@@ -32,7 +32,7 @@
   },
   "dependencies": {
     "@lyra/ui": "0.0.1",
-    "@unocss/reset": "^0.58.7",
+    "@unocss/reset": "^0.58.8",
     "@vueuse/components": "^10.9.0",
     "@vueuse/core": "^10.9.0",
     "date-fns": "^3.6.0",

apps/frontend/apps/docs-dashboard/vite.config.ts

@@ -5,9 +5,8 @@ import { defineConfig, mergeConfig } from 'vite';
 import vueRoutes from 'vite-plugin-vue-routes';
 import { sharedViteConfig } from '@lyra/config/vite.config.shared';
 
-export default mergeConfig(
-	sharedViteConfig(__dirname),
-	defineConfig({
+export default defineConfig(
+	mergeConfig(sharedViteConfig(__dirname), {
 		define: envify({
 			API_URL: process.env.API_URL || '',
 		}),

apps/frontend/apps/embeds-web-components/.gitignore

@@ -0,0 +1,21 @@
+# build output
+dist/
+# generated types
+.astro/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store

apps/frontend/apps/embeds-web-components/README.md

@@ -0,0 +1,47 @@
+# Astro Starter Kit: Minimal
+
+```sh
+npm create astro@latest -- --template minimal
+```
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/minimal)
+[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/minimal)
+[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/minimal/devcontainer.json)
+
+> 🧑‍🚀 **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).

apps/frontend/apps/embeds-web-components/astro.config.mjs

@@ -0,0 +1,24 @@
+import { defineConfig } from 'astro/config';
+import UnoCSS from 'unocss/astro';
+import node from '@astrojs/node';
+const DEV_PORT = 9876;
+
+// https://astro.build/config
+export default defineConfig({
+	site: import.meta.env.DEV
+		? `http://localhost:${DEV_PORT}`
+		: 'https://embeds-web-components-lyra-landing-page.onrender.com',
+	server: {
+		/* Dev. server only */
+		port: DEV_PORT,
+	},
+	integrations: [
+		UnoCSS({
+			injectReset: true,
+		}),
+	],
+	output: 'server',
+	adapter: node({
+		mode: 'standalone',
+	}),
+});

apps/frontend/apps/embeds-web-components/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "embeds-web-components",
+  "description": "Library of embeddable web components",
+  "type": "module",
+  "license": "MIT",
+  "version": "0.0.1",
+  "author": {
+    "name": "Yuniel Acosta Pérez",
+    "email": "yunielacosta738@gmail.com",
+    "url": "www.yunielacosta.com"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/yacosta738/lyra.git",
+    "directory": "apps/embeds-web-components",
+    "branch": "main"
+  },
+  "bugs": {
+    "url": "https://github.com/yacosta738/lyra/issues"
+  },
+  "scripts": {
+    "dev": "astro dev",
+    "start": "astro dev",
+    "build": "astro check && astro build",
+    "preview": "astro preview",
+    "astro": "astro",
+    "check": "astro check",
+    "devToolbar:enable": "astro preferences enable devToolbar",
+    "devToolbar:disable": "astro preferences disable devToolbar"
+  },
+  "dependencies": {
+    "@fontsource-variable/onest": "^5.0.3",
+    "@astrojs/check": "^0.5.10",
+    "@astrojs/node": "^8.2.5",
+    "@iconify/json": "^2.2.196",
+    "@lyra/config": "0.0.1",
+    "@lyra/utilities": "0.0.1",
+    "@lyra/tsconfig": "0.0.1",
+    "@types/canvas-confetti": "^1.6.4",
+    "@unocss/postcss": "^0.58.8",
+    "@unocss/reset": "^0.58.8",
+    "astro": "^4.5.12",
+    "canvas-confetti": "^1.9.2",
+    "typescript": "^5.4.3"
+  }
+}

apps/frontend/apps/embeds-web-components/postcss.config.cjs

@@ -0,0 +1 @@
+module.exports = require('@lyra/config/postcss.config.cjs');

apps/frontend/apps/embeds-web-components/src/components/atoms/ConfettiLauncher.astro

@@ -0,0 +1,51 @@
+<confetti-launcher>
+	<slot />
+</confetti-launcher>
+
+<script>
+	import confetti from 'canvas-confetti';
+	class ConfettiLauncher extends HTMLElement {
+		private count: number = 200;
+		private defaults = {
+			origin: { y: 0.7 },
+		};
+		constructor() {
+			super();
+			this.addEventListener('click', this.popIt);
+		}
+		private fire(particleRatio: number, opts: confetti.Options | undefined) {
+			confetti({
+				...this.defaults,
+				...opts,
+				particleCount: Math.floor(this.count * particleRatio),
+			});
+		}
+		private popIt() {
+			console.log('pop 🎉');
+			this.fire(0.25, {
+				spread: 26,
+				startVelocity: 55,
+			});
+			this.fire(0.2, {
+				spread: 60,
+			});
+			this.fire(0.35, {
+				spread: 100,
+				decay: 0.91,
+				scalar: 0.8,
+			});
+			this.fire(0.1, {
+				spread: 120,
+				startVelocity: 25,
+				decay: 0.92,
+				scalar: 1.2,
+			});
+			this.fire(0.1, {
+				spread: 120,
+				startVelocity: 45,
+			});
+		}
+	}
+
+	customElements.define('confetti-launcher', ConfettiLauncher);
+</script>

apps/frontend/apps/embeds-web-components/src/components/atoms/EmailCTA.astro

@@ -0,0 +1,33 @@
+---
+import SubmitButton from '../atoms/SubmitButton.astro';
+import ConfettiLauncher from '../atoms/ConfettiLauncher.astro';
+const { id, ...attributes } = Astro.props;
+const { class: className = 'w-full max-w-md space-y-2 flex flex-col items-center justify-center' } =
+	attributes;
+const identifier = id || crypto.randomUUID();
+---
+
+<div class:list=`${className}`>
+	<form class="relative flex w-full space-x-2" id={`subscriber-form-${identifier}`}>
+		<div class="relative w-full">
+			<label for="subscriber-email" class="hidden">Email:</label><input
+				id="subscriber-email"
+				class="subscriber-email bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium"
+				type="email"
+				placeholder="Enter your email"
+				required
+			/>
+			<ConfettiLauncher>
+				<SubmitButton class="absolute bottom-0 end-0 top-0 rounded-r" type="submit">
+					Subscribe
+				</SubmitButton>
+			</ConfettiLauncher>
+		</div>
+	</form>
+</div>
+<style>
+	.subscriber-email {
+		@apply flex h-12 w-full items-center justify-center rounded-md border-gray-900 px-3
+    focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-100;
+	}
+</style>

apps/frontend/apps/embeds-web-components/src/components/atoms/SubmitButton.astro

@@ -0,0 +1,17 @@
+---
+const { ...attributes } = Astro.props;
+const { class: className, ...attrs } = attributes;
+---
+
+<button class:list=`submit-button ${className}` {...attrs}>
+	<slot />
+</button>
+
+<style>
+	.submit-button {
+		@apply text-tertiary-50 bg-tertiary-800 dark:bg-tertiary-800 border-tertiary-300
+    dark:border-tertiary-700 hover:bg-tertiary-700 dark:hover:bg-tertiary-700 hover:border-tertiary-700
+    dark:hover:border-tertiary-700 px-5 py-2.5
+    text-center font-sans font-semibold uppercase;
+	}
+</style>

apps/frontend/apps/embeds-web-components/src/components/molecules/EmailCTASection.astro

@@ -0,0 +1,22 @@
+---
+import EmailCTA from 'atoms:EmailCTA';
+const { id } = Astro.props;
+const identifier = id || crypto.randomUUID();
+---
+
+<section class="m-1 flex flex-col items-center justify-center p-2">
+	<div
+		class="bg-tertiary-50 border-tertiary-100 dark:bg-tertiary-900 dark:border-tertiary-800 relative w-full rounded-lg border p-4 text-center shadow"
+	>
+		<h5 class="text-tertiary-900 dark:text-tertiary-100 mb-2 text-3xl font-bold">
+			Subscribe to the newsletter
+		</h5>
+		<p class="text-tertiary-500 dark:text-tertiary-400 mb-5 text-base sm:text-lg">
+			Get the latest posts delivered right to your inbox every week. I would love to include you in
+			my journey.
+		</p>
+		<div class="flex items-center justify-center space-y-4 sm:space-x-4 sm:space-y-0">
+			<EmailCTA id={identifier} />
+		</div>
+	</div>
+</section>

apps/frontend/apps/embeds-web-components/src/env.d.ts

@@ -0,0 +1,2 @@
+/// <reference path="../.astro/types.d.ts" />
+/// <reference types="astro/client" />

apps/frontend/apps/embeds-web-components/src/layouts/Layout.astro

@@ -0,0 +1,38 @@
+---
+import '@fontsource-variable/onest';
+import pkg from '../../package.json' assert { type: 'json' };
+interface Props {
+	title: string;
+	description?: string;
+}
+
+const { title, description = pkg.description } = Astro.props;
+---
+
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width" />
+		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+		<meta name="generator" content={Astro.generator} />
+		<meta name="author" content={pkg.author.name} />
+		<meta name="description" content={description ?? pkg.description} />
+		<meta name="copyright" content={pkg.license} />
+		<title>{title}</title>
+		<script>
+			import { loadTheme } from '@lyra/utilities';
+			loadTheme();
+		</script>
+	</head>
+	<body
+		class:list={[
+			'bg-tertiary-100 dark:bg-tertiary-950',
+			'scrollbar scrollbar-w-1 scrollbar-thumb-rounded-[0.25rem]',
+			'scrollbar-track-slate-200  scrollbar-thumb-gray-400',
+			'dark:scrollbar-track-gray-900 dark:scrollbar-thumb-gray-700',
+		]}
+	>
+		<slot />
+	</body>
+</html>