feat test astro as feedback_widget

apps/app/src/routes/index.lazy.tsx

@@ -17,6 +17,10 @@ const Component = () => {
       ]}
     >
       <h1 className="text-3xl">Welcome back, {user.user?.fullName}</h1>
+      <iframe
+        src="http://localhost:4030"
+        title="W3Schools Free Online Web Tutorials"
+      />
       <div className="grid w-full max-w-screen-md gap-10 grid-cols-2">
         <Card>
           <CardHeader>

apps/feedback_widget/.gitignore

@@ -0,0 +1,24 @@
+# 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
+
+# jetbrains setting folder
+.idea/

apps/feedback_widget/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/feedback_widget/astro.config.mjs

@@ -0,0 +1,24 @@
+// @ts-check
+import { defineConfig } from 'astro/config'
+
+import react from '@astrojs/react'
+
+import tailwind from '@astrojs/tailwind'
+
+import node from '@astrojs/node'
+
+// https://astro.build/config
+export default defineConfig({
+  output: 'server',
+  outDir: '../../build/page',
+  integrations: [react(), tailwind({ nesting: true })],
+  server: {
+    port: 4030,
+  },
+  adapter: node({
+    mode: 'standalone',
+  }),
+  devToolbar: {
+    enabled: false,
+  },
+})

apps/feedback_widget/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@boring.tools/feedback_widget",
+  "type": "module",
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "astro dev",
+    "start": "astro dev",
+    "build": "astro check && astro build",
+    "preview": "astro preview",
+    "astro": "astro"
+  },
+  "dependencies": {
+    "@astrojs/check": "^0.9.4",
+    "@astrojs/node": "^8.3.4",
+    "@astrojs/react": "^3.6.2",
+    "@astrojs/tailwind": "^5.1.2",
+    "@boring.tools/schema": "workspace:*",
+    "@boring.tools/ui": "workspace:*",
+    "@fingerprintjs/fingerprintjs": "^4.5.1",
+    "@tailwindcss/typography": "^0.5.15",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "astro": "^4.16.7",
+    "date-fns": "^4.1.0",
+    "marked": "^14.1.3",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "tailwindcss": "^3.4.14",
+    "tailwindcss-animate": "^1.0.7",
+    "typescript": "^5.6.3",
+    "webcoreui": "^0.7.0"
+  },
+  "devDependencies": {
+    "sass-embedded": "^1.80.6"
+  }
+}

apps/feedback_widget/public/favicon.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
+    <path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
+    <style>
+        path { fill: #000; }
+        @media (prefers-color-scheme: dark) {
+            path { fill: #FFF; }
+        }
+    </style>
+</svg>

apps/feedback_widget/src/env.d.ts

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

apps/feedback_widget/src/pages/[id].astro

@@ -0,0 +1,104 @@
+---
+import type { PageByIdOutput } from '@boring.tools/schema'
+import { Separator } from '@boring.tools/ui'
+import type { z } from 'astro/zod'
+import { format } from 'date-fns'
+import { marked } from 'marked'
+
+type PageById = z.infer<typeof PageByIdOutput>
+const url = import.meta.env.DEV
+  ? 'http://localhost:3000'
+  : 'https://api.boring.tools'
+const { id } = Astro.params
+const response = await fetch(`${url}/v1/page/${id}/public`)
+const data: PageById = await response.json()
+---
+
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+		<meta name="viewport" content="width=device-width" />
+		<meta name="generator" content={Astro.generator} />
+		<title>{data.title} | boring.tools</title>
+	</head>
+	<body class="bg-neutral-100">
+		<div class="w-full flex items-center justify-center">
+			<div class="w-full max-w-screen-sm flex my-6 flex-col gap-8">
+				<div class="flex flex-col">
+					<h1 class="prose prose-2xl">{data.title}</h1>
+					<p class="prose text-sm">{data.description}</p>
+				</div>
+
+				{data.changelogs?.length >= 2 && <div class="flex flex-col">
+					<h2 class="prose prose-xl">Changelogs</h2>
+					{data.changelogs?.map((changelog) => {
+						if (changelog.versions && changelog.versions?.length < 1) {
+							return null
+						}
+						return <div>
+							<h3 class="font-bold">{changelog.title}</h3>
+							<Separator />
+							<div class="flex flex-col gap-5 my-6">
+
+							{changelog.versions?.map((version) => {
+								return (
+									<div class="flex gap-10 bg-white rounded p-3 border border-neutral-300">
+										<div>
+											<h2 class="prose text-3xl font-bold">
+												{version.version}
+											</h2>
+											{version.releasedAt &&
+											
+											<p class="prose text-xs text-center">
+												{format(new Date(String(version.releasedAt)), "dd-MM-yy")}
+											</p>
+											}
+										</div>
+
+											<div set:html={marked.parse(version.markdown ?? "")} />
+									</div>
+								)
+							})}
+
+							</div>
+						</div>
+					})}
+					</div>}
+				{data.changelogs?.length === 1 && <div>
+<h2 class="uppercase text-sm prose tracking-widest">Changelog</h2>
+{data.changelogs.map((changelog) => {
+						if (changelog.versions && changelog.versions?.length < 1) {
+							return null
+						}
+						return <div>
+							<div class="flex flex-col gap-5 my-3">
+
+							{changelog.versions?.map((version) => {
+								return (
+									<div class="flex gap-10 bg-white rounded p-3 border border-neutral-300">
+										<div>
+											<h2 class="prose text-3xl font-bold">
+												{version.version}
+											</h2>
+											{version.releasedAt &&
+											
+											<p class="prose text-xs text-center">
+												{format(new Date(String(version.releasedAt)), "dd-MM-yy")}
+											</p>
+											}
+										</div>
+										<div class="page" set:html={marked.parse(version.markdown ?? "")} />
+									</div>
+								)
+							})}
+
+							</div>
+						</div>
+					})}
+					</div>}
+
+			</div>
+		</div>
+	</body>
+</html>

apps/feedback_widget/src/pages/index.astro

@@ -0,0 +1,127 @@
+---
+import '../style.css'
+
+const payload = {
+  visitorId: '',
+  feedback: '',
+  feedbackId: '',
+}
+
+if (Astro.request.method === 'POST') {
+  try {
+    const data = await Astro.request.formData()
+    const feedback = data.get('feedback')
+    const visitorId = data.get('visitor-id')
+
+    console.log(feedback, visitorId, data)
+    // const validation = AccessTokenCreateInput.safeParse({ name })
+    // if (!validation.success) {
+    //   return
+    // }
+
+    // const response = await apiFetch({
+    //   path: 'accessToken',
+    //   method: 'post',
+    //   body: { name },
+    //   token: session.jwt,
+    // })
+
+    // if (response.status === 201) {
+    //   isCreating = true
+    //   token = response.json.token
+    // }
+  } catch (error) {
+    if (error instanceof Error) {
+      console.error(error.message)
+    }
+  }
+}
+---
+
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+		<meta name="viewport" content="width=device-width" />
+		<meta name="generator" content={Astro.generator} />
+		<title>Astro</title>
+	</head>
+	<body>
+
+		<!-- <div class="flex items-center justify-center w-full h-screen flex-col">
+			<h1 class="prose prose-2xl">boring.tools</h1>
+			<p class="prose prose-sm">CHANGELOG</p>
+			<div class="">
+<button popovertarget="my-popover" class="p-2 hover:bg-neutral-900 rounded hover:text-neutral-100 transition">
+	<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-vote"><path d="m9 12 2 2 4-4"/><path d="M5 7c0-1.1.9-2 2-2h10a2 2 0 0 1 2 2v12H5V7Z"/><path d="M22 19H2"/></svg>
+</button>
+
+			<div popover id="my-popover" class="bg-transparent" >
+				<div class="border rounded-md shadow-md p-1 flex flex-col gap-2 bg-white">
+
+					<div class="flex flex-col gap-2 p-3">
+				<h2 class=" font-bold text-neutral-800">Your feedback matters!</h2>
+				<form method="POST" class="flex flex-col gap-5">
+
+				<textarea class="border rounded p-2" name="feedback" placeholder="Tell us your feedback ..." />
+				<input type="hidden" id="visitor-id" name="visitor-id" />
+				<button class="bg-neutral-900 hover:bg-neutral-800 text-white px-3 py-1 rounded">Submit</button>
+				</form>
+</div>
+				<div class="text-[10px] text-right">
+					powered by <a href="https://boring.tools" class="text-blue-500">boring.tools</a>
+				</div>
+				</div>
+			</div>
+	
+			</div >
+		
+
+		</div> -->
+	</body>
+</html>
+<script>
+// 1. get body element
+// 2. inject custom element absolute positioning
+// 3. add event listener to close on click outside
+const body = document.querySelector('body')
+console.log(body)
+	import print from "@fingerprintjs/fingerprintjs"
+    const visitorIdInput = document.querySelector("#visitor-id");
+
+if (body instanceof HTMLBodyElement) {
+
+	const btn = body.appendChild(document.createElement('div'))
+	const popover = body.appendChild(document.createElement('div'))
+	btn.innerHTML = `
+		<button popovertarget="my-popover" class="p-2 hover:bg-neutral-900 rounded hover:text-neutral-100 transition">
+			<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-vote"><path d="m9 12 2 2 4-4"/><path d="M5 7c0-1.1.9-2 2-2h10a2 2 0 0 1 2 2v12H5V7Z"/><path "M22 19H2"/></svg>
+		</button>`
+
+	popover.innerHTML = `<div popover id="my-popover" class="bg-transparent" >
+				<div class="border rounded-md shadow-md p-1 flex flex-col gap-2 bg-white">
+
+					<div class="flex flex-col gap-2 p-3">
+				<h2 class=" font-bold text-neutral-800">Your feedback matters!</h2>
+				<form method="POST" class="flex flex-col gap-5">
+
+				<textarea class="border rounded p-2" name="feedback" placeholder="Tell us your feedback ..." />
+				<input type="hidden" id="visitor-id" name="visitor-id" />
+				<button class="bg-neutral-900 hover:bg-neutral-800 text-white px-3 py-1 rounded">Submit</button>
+				</form>
+</div>`
+}
+	if (visitorIdInput instanceof HTMLInputElement) {
+	print.load()
+	  .then(fp => fp.get())
+	  .then(result => {
+		const visitorId = result.visitorId
+		visitorIdInput.setAttribute("value", visitorId)
+	  })
+
+	
+	}
+
+    
+  		
+  </script>

apps/feedback_widget/src/style.css

@@ -0,0 +1,3 @@
+::backdrop {
+    @apply bg-neutral-600 opacity-50;
+  }

apps/feedback_widget/tailwind.config.mjs

@@ -0,0 +1,86 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    './src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}',
+    '../../packages/ui/**/*.{js,ts,jsx,tsx}',
+  ],
+  theme: {
+    container: {
+      center: true,
+      padding: '2rem',
+      screens: {
+        '2xl': '1400px',
+      },
+    },
+    extend: {
+      colors: {
+        border: 'hsl(var(--border))',
+        input: 'hsl(var(--input))',
+        ring: 'hsl(var(--ring))',
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
+        primary: {
+          DEFAULT: 'hsl(var(--primary))',
+          foreground: 'hsl(var(--primary-foreground))',
+        },
+        secondary: {
+          DEFAULT: 'hsl(var(--secondary))',
+          foreground: 'hsl(var(--secondary-foreground))',
+        },
+        destructive: {
+          DEFAULT: 'hsl(var(--destructive))',
+          foreground: 'hsl(var(--destructive-foreground))',
+        },
+        muted: {
+          DEFAULT: 'hsl(var(--muted))',
+          foreground: 'hsl(var(--muted-foreground))',
+        },
+        accent: {
+          DEFAULT: 'hsl(var(--accent))',
+          foreground: 'hsl(var(--accent-foreground))',
+        },
+        popover: {
+          DEFAULT: 'hsl(var(--popover))',
+          foreground: 'hsl(var(--popover-foreground))',
+        },
+        card: {
+          DEFAULT: 'hsl(var(--card))',
+          foreground: 'hsl(var(--card-foreground))',
+        },
+        sidebar: {
+          DEFAULT: 'hsl(var(--sidebar-background))',
+          foreground: 'hsl(var(--sidebar-foreground))',
+          primary: 'hsl(var(--sidebar-primary))',
+          'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
+          accent: 'hsl(var(--sidebar-accent))',
+          'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
+          border: 'hsl(var(--sidebar-border))',
+          ring: 'hsl(var(--sidebar-ring))',
+        },
+      },
+      // borderRadius: {
+      //   lg: 'var(--radius)',
+      //   md: 'calc(var(--radius) - 2px)',
+      //   sm: 'calc(var(--radius) - 4px)',
+      // },
+      /* fontFamily: {
+        sans: ['var(--font-sans)', ...fontFamily.sans],
+      }, */
+      keyframes: {
+        'accordion-down': {
+          from: { height: '0' },
+          to: { height: 'var(--radix-accordion-content-height)' },
+        },
+        'accordion-up': {
+          from: { height: 'var(--radix-accordion-content-height)' },
+          to: { height: '0' },
+        },
+      },
+      animation: {
+        'accordion-down': 'accordion-down 0.2s ease-out',
+        'accordion-up': 'accordion-up 0.2s ease-out',
+      },
+    },
+  },
+  plugins: [require('tailwindcss-animate'), require('@tailwindcss/typography')],
+}

apps/feedback_widget/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "astro/tsconfigs/strict",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "react"
+  }
+}