astro.config.mjs

@@ -5,9 +5,7 @@ import preact from "@astrojs/preact";
 
 // https://astro.build/config
 export default defineConfig({
-    integrations: [tailwind({
+  integrations: [tailwind(), preact({
-        applyBaseStyles: false,
+    compat: true
-    }), preact({
+  })],
-        compat: true
-    })],
 });

package.json

@@ -20,8 +20,5 @@
     "react-icons": "^4.11.0",
     "sharp": "^0.32.5",
     "tailwindcss": "^3.3.3"
-  },
-  "devDependencies": {
-    "daisyui": "^4.12.10"
   }
 }

pnpm-lock.yaml

@@ -33,11 +33,6 @@ dependencies:
     specifier: ^3.3.3
     version: 3.3.3
 
-devDependencies:
-  daisyui:
-    specifier: ^4.12.10
-    version: 4.12.10(postcss@8.4.40)
-
 packages:
 
   /@alloc/quick-lru@5.2.0:
@@ -1608,6 +1603,7 @@ packages:
   /camelcase-css@2.0.1:
     resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==}
     engines: {node: '>= 6'}
+    dev: false
 
   /camelcase@7.0.1:
     resolution: {integrity: sha512-xlx1yCK2Oc1APsPXDL2LdlNP6+uu8OCDdhOBSVT279M/S+y75O30C2VuD8T2ogdePBBl7PfPF4504tnLgX3zfw==}
@@ -1819,34 +1815,11 @@ packages:
       which: 2.0.2
     dev: false
 
-  /css-selector-tokenizer@0.8.0:
-    resolution: {integrity: sha512-Jd6Ig3/pe62/qe5SBPTN8h8LeUg/pT4lLgtavPf7updwwHpvFzxvOQBHYj2LZDMjUnBzgvIUSjRcf6oT5HzHFg==}
-    dependencies:
-      cssesc: 3.0.0
-      fastparse: 1.1.2
-    dev: true
-
   /cssesc@3.0.0:
     resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
     engines: {node: '>=4'}
     hasBin: true
-
+    dev: false
-  /culori@3.3.0:
-    resolution: {integrity: sha512-pHJg+jbuFsCjz9iclQBqyL3B2HLCBF71BwVNujUYEvCeQMvV97R59MNK3R2+jgJ3a1fcZgI9B3vYgz8lzr/BFQ==}
-    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
-    dev: true
-
-  /daisyui@4.12.10(postcss@8.4.40):
-    resolution: {integrity: sha512-jp1RAuzbHhGdXmn957Z2XsTZStXGHzFfF0FgIOZj3Wv9sH7OZgLfXTRZNfKVYxltGUOBsG1kbWAdF5SrqjebvA==}
-    engines: {node: '>=16.9.0'}
-    dependencies:
-      css-selector-tokenizer: 0.8.0
-      culori: 3.3.0
-      picocolors: 1.0.1
-      postcss-js: 4.0.1(postcss@8.4.40)
-    transitivePeerDependencies:
-      - postcss
-    dev: true
 
   /debug@4.3.4:
     resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==}
@@ -2142,10 +2115,6 @@ packages:
       micromatch: 4.0.5
     dev: false
 
-  /fastparse@1.1.2:
-    resolution: {integrity: sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==}
-    dev: true
-
   /fastq@1.15.0:
     resolution: {integrity: sha512-wBrocU2LCXXa+lWBt8RoIRD89Fi8OdABODa/kEnyeyjS5aZO5/GNvI5sEINADqP/h8M29UHTHUb53sUu5Ihqdw==}
     dependencies:
@@ -3312,6 +3281,7 @@ packages:
     resolution: {integrity: sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
+    dev: false
 
   /napi-build-utils@1.0.2:
     resolution: {integrity: sha512-ONmRUqK7zj7DWX0D9ADe03wbwOBZxNAfF20PlGfCWQcD3+/MakShIHrMqx9YwPTfxDdF1zLeL+RGZiR9kGMLdg==}
@@ -3569,6 +3539,7 @@ packages:
 
   /picocolors@1.0.1:
     resolution: {integrity: sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==}
+    dev: false
 
   /picomatch@2.3.1:
     resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
@@ -3639,16 +3610,6 @@ packages:
       postcss: 8.4.29
     dev: false
 
-  /postcss-js@4.0.1(postcss@8.4.40):
-    resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==}
-    engines: {node: ^12 || ^14 || >= 16}
-    peerDependencies:
-      postcss: ^8.4.21
-    dependencies:
-      camelcase-css: 2.0.1
-      postcss: 8.4.40
-    dev: true
-
   /postcss-load-config@4.0.1(postcss@8.4.29):
     resolution: {integrity: sha512-vEJIc8RdiBRu3oRAI0ymerOn+7rPuMvRXslTvZUKZonDHFIczxztIyJ1urxM1x9JXEikvpWWTUUqal5j/8QgvA==}
     engines: {node: '>= 14'}
@@ -3704,6 +3665,7 @@ packages:
       nanoid: 3.3.7
       picocolors: 1.0.1
       source-map-js: 1.2.0
+    dev: false
 
   /preact-render-to-string@6.2.1(preact@10.17.1):
     resolution: {integrity: sha512-5t7nFeMUextd53igL3GAakAAMaUD+dVWDHaRYaeh1tbPIjQIBtgJnMw6vf8VS/lviV0ggFtkgebatPxvtJsXyQ==}
@@ -4179,6 +4141,7 @@ packages:
   /source-map-js@1.2.0:
     resolution: {integrity: sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==}
     engines: {node: '>=0.10.0'}
+    dev: false
 
   /space-separated-tokens@2.0.2:
     resolution: {integrity: sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==}

src/components/EspaceMembres.tsx

@@ -3,7 +3,6 @@ import Login from "./Login";
 import PocketBase from 'pocketbase';
 import { useContext, useEffect, useState } from "preact/hooks";
 import Home from "./Members/Home";
-import SimpleHome from "./Members/SimpleHome";
 
 export const pbUrl = import.meta.env.PUBLIC_PB_API;
 
@@ -67,8 +66,7 @@ export default function EspaceMembres() {
         navigate,
       }}>
         {{
-          // '/': <Home />,
+          '/': <Home />,
-          '/': <SimpleHome />,
           '/login': <Login />,
         }[route]}
       </Router.Provider>

src/components/Members/SimpleHome.tsx

@@ -1,138 +0,0 @@
-import { useContext, useEffect, useState } from "preact/hooks";
-import { FaEdit, FaPlus, FaTrash } from "react-icons/fa";
-import { Pb } from "../EspaceMembres";
-import type { UsersRecord } from "../../types/pb_types";
-import { createContext } from "preact";
-
-const FormContext = createContext((key: string, value: string) => { });
-
-function SimpleHome() {
-    const pb = useContext(Pb);
-    const { firstname, lastname }: UsersRecord = pb.authStore.model || {};
-    const email = pb.authStore.model?.email || "";
-
-    const [form, setForm] = useState([]);
-
-    const setFormValue = (key: string, value: string) => {
-        setForm((prev) => ({ ...prev, [key]: value }));
-    };
-
-    const onSubmit = (e: Event) => {
-        e.preventDefault();
-        saveForm(form);
-    };
-
-    const saveForm = (data: { [key: string]: string }[]) => {
-        const record = pb.collection("users").update(pb.authStore.model?.id, data);
-        record.then((res) => {
-            console.log(res);
-        }).catch((error) => {
-            console.error(error);
-        });
-    }
-
-    return (
-        <div className="flex gap-8 p-8 flex-col md:flex-row">
-            <section className="w-full md:w-1/2 card bg-base-100 shadow-xl">
-                <div className="card-body">
-                    <div className="flex justify-between items-center mb-4">
-                        <h1 className="text-2xl font-bold">Gallery</h1>
-                        <button className="btn btn-outline">
-                            <FaPlus />
-                        </button>
-                    </div>
-                    <div className="grid grid-cols-3 gap-4">
-                        {[...Array(6)].map((_, i) => (
-                            <Picture key={i} />
-                        ))}
-                    </div>
-                </div>
-            </section>
-            <section className="w-full md:w-1/2 card bg-base-100 shadow-xl">
-                <div className="card-body">
-                    <h2 className="text-2xl font-bold">Informations personnelles</h2>
-                    <FormContext.Provider value={setFormValue}>
-                        <form className="mt-4 flex flex-col gap-2" onSubmit={onSubmit}>
-                            <FormInput label="Nom" id="lastname" value={lastname} />
-                            <FormInput label="Prénom" id="firstname" value={firstname} />
-                            <FormInput label="Email" id="email" type="email" value={email} disabled />
-                            <div className="mt-2">
-                                <button className="btn btn-neutral">Enregistrer</button>
-                            </div>
-                        </form>
-                    </FormContext.Provider>
-                </div>
-            </section>
-        </div>
-    );
-}
-
-function FormInput({
-    label,
-    id,
-    type = "text",
-    value,
-    className,
-    disabled,
-}: {
-    label: string;
-    id: string;
-    type?: string;
-    value?: string;
-    className?: string;
-    disabled?: boolean;
-}) {
-    const setFormValue = useContext(FormContext);
-    const [val, setVal] = useState(value);
-
-    const onChange = (e: Event) => {
-        const target = e.target as HTMLInputElement;
-        setVal(target.value);
-        setFormValue(target.id, target.value);
-    }
-
-    useEffect(() => {
-        setFormValue(id, value || "");
-    }, [value]);
-
-    return (
-        <label htmlFor={id} class="form-control w-full max-w-xs">
-            <div class="label">
-                <span class="label-text">{label}</span>
-            </div>
-            <input
-                type={type}
-                placeholder={label}
-                class="input input-bordered w-full max-w-xs"
-                id={id}
-                value={val}
-                onInput={onChange}
-                disabled={disabled}
-            />
-        </label>
-    );
-}
-
-function Picture() {
-    return (
-        <div className="relative overflow-hidden rounded-lg transition-all after:opacity-0 after:absolute after:inset-0 after:bg-black hover:after:opacity-20 focus:after:opacity-20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring group cursor-pointer">
-            <img
-                src="https://picsum.photos/600/600"
-                width={600}
-                height={600}
-                alt="Gallery Image"
-                className="object-cover aspect-square"
-            />
-            <div className="absolute top-2 right-2 gap-2 flex opacity-0 group-hover:opacity-100 transition-all">
-                <button className="btn btn-sm btn-circle btn-primary">
-                    <FaEdit />
-                </button>
-                <button className="btn btn-sm btn-circle btn-error">
-                    <FaTrash />
-                </button>
-            </div>
-        </div>
-    );
-}
-
-export default SimpleHome;

src/layouts/Layout.astro

@@ -1,7 +1,6 @@
 ---
 import Header from '../components/Header.astro';
 import Footer from '../components/Footer.astro';
-import '../styles/base.css';
 
 interface Props {
 	title: string;
@@ -13,7 +12,7 @@ const { title, footer = true, className } = Astro.props;
 ---
 
 <!doctype html>
-<html lang="fr" data-theme="light">
+<html lang="fr">
 	<head>
 		<meta charset="UTF-8" />
 		<meta name="description" content="Astro description" />

src/pages/espace-membres.astro

@@ -2,6 +2,6 @@
 import Layout from '../layouts/Layout.astro';
 import EspaceMembres from '../components/EspaceMembres.tsx';
 ---
-<Layout title="Espace membres" footer={false} className='min-h-full max-h-full'>
+<Layout title="Espace membres" footer={false} className='min-h-full max-h-full overflow-y-hidden'>
   <EspaceMembres client:only="preact"/>
 </Layout>

src/styles/base.css

@@ -1,161 +0,0 @@
-@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
-
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-    body {
-        @apply font-Lato;
-    }
-}
-
-@keyframes fade-in {
-    from {
-        opacity: 0;
-    }
-}
-
-@keyframes fade-out {
-    to {
-        opacity: 0;
-    }
-}
-
-@keyframes slide-from-right {
-    from {
-        transform: translateX(90px);
-    }
-}
-
-@keyframes slide-to-left {
-    to {
-        transform: translateX(-90px);
-    }
-}
-
-/* define animations for the old and new content */
-::view-transition-old(slide-it) {
-    animation: 180ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
-        600ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
-}
-
-::view-transition-new(slide-it) {
-    animation: 420ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
-        600ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
-}
-
-/* tie the view transition to a given CSS class */
-.sample-transition {
-    view-transition-name: slide-it;
-}
-
-/***** MODAL DIALOG ****/
-#modal {
-    /* Underlay covers entire screen. */
-    position: fixed;
-    top: 0px;
-    bottom: 0px;
-    left: 0px;
-    right: 0px;
-    background-color: rgba(0, 0, 0, 0.5);
-    z-index: 1000;
-
-    /* Flexbox centers the .modal-content vertically and horizontally */
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-
-    /* Animate when opening */
-    animation-name: fadeIn;
-    animation-duration: 300ms;
-    animation-timing-function: ease;
-}
-
-#modal>.modal-underlay {
-    /* underlay takes up the entire viewport. This is only
-	required if you want to click to dismiss the popup */
-    position: absolute;
-    z-index: -1;
-    top: 0px;
-    bottom: 0px;
-    left: 0px;
-    right: 0px;
-}
-
-#modal>.modal-content {
-    /* color: black; */
-    /* Position visible dialog near the top of the window */
-    margin-top: 10vh;
-
-    /* Sizing for visible dialog */
-    width: 80%;
-    max-width: 400px;
-
-    /* Display properties for visible dialog*/
-    /* border: solid 1px #999;
-    border-radius: 8px;
-    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.3);
-    background-color: white;
-    padding: 20px; */
-
-    /* Animate when opening */
-    animation-name: zoomIn;
-    animation-duration: 300ms;
-    animation-timing-function: ease;
-}
-
-#modal.closing {
-    /* Animate when closing */
-    animation-name: fadeOut;
-    animation-duration: 300ms;
-    animation-timing-function: ease;
-}
-
-#modal.closing>.modal-content {
-    /* Animate when closing */
-    animation-name: zoomOut;
-    animation-duration: 300ms;
-    animation-timing-function: ease;
-}
-
-@keyframes fadeIn {
-    0% {
-        opacity: 0;
-    }
-
-    100% {
-        opacity: 1;
-    }
-}
-
-@keyframes fadeOut {
-    0% {
-        opacity: 1;
-    }
-
-    100% {
-        opacity: 0;
-    }
-}
-
-@keyframes zoomIn {
-    0% {
-        transform: scale(0.8);
-    }
-
-    100% {
-        transform: scale(1);
-    }
-}
-
-@keyframes zoomOut {
-    0% {
-        transform: scale(1);
-    }
-
-    100% {
-        transform: scale(0.8);
-    }
-}
-

tailwind.config.cjs

@@ -1,15 +1,8 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
 	content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
-  theme: {
+	theme: {
-    extend: {
+		extend: {},
-      fontFamily: {
+	},
-        Lato: ["Lato, sans-serif"],
+	plugins: [],
-      },
-    },
-  },
-  plugins: [require("daisyui")],
-  daisyui: {
-    themes: ["light", "dark"],
-  },
 }