feat test astro as feedback_widget
This commit is contained in:
parent
714da23d04
commit
091cfe9eee
@ -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>
|
||||
|
||||
24
apps/feedback_widget/.gitignore
vendored
Normal file
24
apps/feedback_widget/.gitignore
vendored
Normal file
@ -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/
|
||||
47
apps/feedback_widget/README.md
Normal file
47
apps/feedback_widget/README.md
Normal file
@ -0,0 +1,47 @@
|
||||
# Astro Starter Kit: Minimal
|
||||
|
||||
```sh
|
||||
npm create astro@latest -- --template minimal
|
||||
```
|
||||
|
||||
[](https://stackblitz.com/github/withastro/astro/tree/latest/examples/minimal)
|
||||
[](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/minimal)
|
||||
[](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).
|
||||
24
apps/feedback_widget/astro.config.mjs
Normal file
24
apps/feedback_widget/astro.config.mjs
Normal file
@ -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,
|
||||
},
|
||||
})
|
||||
36
apps/feedback_widget/package.json
Normal file
36
apps/feedback_widget/package.json
Normal file
@ -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"
|
||||
}
|
||||
}
|
||||
9
apps/feedback_widget/public/favicon.svg
Normal file
9
apps/feedback_widget/public/favicon.svg
Normal file
@ -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>
|
||||
|
After Width: | Height: | Size: 749 B |
1
apps/feedback_widget/src/env.d.ts
vendored
Normal file
1
apps/feedback_widget/src/env.d.ts
vendored
Normal file
@ -0,0 +1 @@
|
||||
/// <reference path="../.astro/types.d.ts" />
|
||||
104
apps/feedback_widget/src/pages/[id].astro
Normal file
104
apps/feedback_widget/src/pages/[id].astro
Normal file
@ -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>
|
||||
127
apps/feedback_widget/src/pages/index.astro
Normal file
127
apps/feedback_widget/src/pages/index.astro
Normal file
@ -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>
|
||||
3
apps/feedback_widget/src/style.css
Normal file
3
apps/feedback_widget/src/style.css
Normal file
@ -0,0 +1,3 @@
|
||||
::backdrop {
|
||||
@apply bg-neutral-600 opacity-50;
|
||||
}
|
||||
86
apps/feedback_widget/tailwind.config.mjs
Normal file
86
apps/feedback_widget/tailwind.config.mjs
Normal file
@ -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')],
|
||||
}
|
||||
7
apps/feedback_widget/tsconfig.json
Normal file
7
apps/feedback_widget/tsconfig.json
Normal file
@ -0,0 +1,7 @@
|
||||
{
|
||||
"extends": "astro/tsconfigs/strict",
|
||||
"compilerOptions": {
|
||||
"jsx": "react-jsx",
|
||||
"jsxImportSource": "react"
|
||||
}
|
||||
}
|
||||
0
apps/feedback_widget/webcore.config.scss
Normal file
0
apps/feedback_widget/webcore.config.scss
Normal file
Loading…
Reference in New Issue
Block a user