prod setup
This commit is contained in:
Johan LEROY
4
.gitignore
vendored
4
.gitignore
vendored
@@ -26,3 +26,7 @@ pnpm-debug.log*
|
||||
|
||||
# temp
|
||||
*.log
|
||||
|
||||
# runtime data (uploads + JSON content edited via /admin)
|
||||
# kept on the server, not deployed via FTP
|
||||
data/
|
||||
|
||||
40
package-lock.json
generated
40
package-lock.json
generated
@@ -1,15 +1,16 @@
|
||||
{
|
||||
"name": "portfolio",
|
||||
"version": "0.0.1",
|
||||
"version": "1.0.0",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "portfolio",
|
||||
"version": "0.0.1",
|
||||
"version": "1.0.0",
|
||||
"dependencies": {
|
||||
"@astrojs/node": "^10.0.5",
|
||||
"@astrojs/react": "^5.0.3",
|
||||
"@hookform/resolvers": "^5.2.2",
|
||||
"@iconify-icon/react": "^3.0.3",
|
||||
"@react-three/drei": "^10.7.7",
|
||||
"@react-three/fiber": "^9.6.0",
|
||||
@@ -25,6 +26,7 @@
|
||||
"lucide-react": "^1.8.0",
|
||||
"react": "^19.2.5",
|
||||
"react-dom": "^19.2.5",
|
||||
"react-hook-form": "^7.75.0",
|
||||
"tailwindcss": "^4.2.2",
|
||||
"three": "^0.184.0",
|
||||
"zod": "^4.3.6"
|
||||
@@ -1084,6 +1086,18 @@
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/@hookform/resolvers": {
|
||||
"version": "5.2.2",
|
||||
"resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-5.2.2.tgz",
|
||||
"integrity": "sha512-A/IxlMLShx3KjV/HeTcTfaMxdwy690+L/ZADoeaTltLx+CVuzkeVIPuybK3jrRfw7YZnmdKsVVHAlEPIAEUNlA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@standard-schema/utils": "^0.3.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react-hook-form": "^7.55.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@iconify-icon/react": {
|
||||
"version": "3.0.3",
|
||||
"resolved": "https://registry.npmjs.org/@iconify-icon/react/-/react-3.0.3.tgz",
|
||||
@@ -2181,6 +2195,12 @@
|
||||
"integrity": "sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@standard-schema/utils": {
|
||||
"version": "0.3.0",
|
||||
"resolved": "https://registry.npmjs.org/@standard-schema/utils/-/utils-0.3.0.tgz",
|
||||
"integrity": "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@tailwindcss/node": {
|
||||
"version": "4.2.2",
|
||||
"resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.2.2.tgz",
|
||||
@@ -6045,6 +6065,22 @@
|
||||
"react": "^19.2.5"
|
||||
}
|
||||
},
|
||||
"node_modules/react-hook-form": {
|
||||
"version": "7.75.0",
|
||||
"resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.75.0.tgz",
|
||||
"integrity": "sha512-Ovv94H+0p3sJ7B9B5QxPuCP1u8V/cHuVGyH55cSwodYDtoJwK+fqk3vjfIgSX59I2U/bU4z0nRJ9HMLpNiWEmw==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=18.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/react-hook-form"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.0 || ^17 || ^18 || ^19"
|
||||
}
|
||||
},
|
||||
"node_modules/react-refresh": {
|
||||
"version": "0.18.0",
|
||||
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.18.0.tgz",
|
||||
|
||||
@@ -17,6 +17,7 @@
|
||||
"dependencies": {
|
||||
"@astrojs/node": "^10.0.5",
|
||||
"@astrojs/react": "^5.0.3",
|
||||
"@hookform/resolvers": "^5.2.2",
|
||||
"@iconify-icon/react": "^3.0.3",
|
||||
"@react-three/drei": "^10.7.7",
|
||||
"@react-three/fiber": "^9.6.0",
|
||||
@@ -32,6 +33,7 @@
|
||||
"lucide-react": "^1.8.0",
|
||||
"react": "^19.2.5",
|
||||
"react-dom": "^19.2.5",
|
||||
"react-hook-form": "^7.75.0",
|
||||
"tailwindcss": "^4.2.2",
|
||||
"three": "^0.184.0",
|
||||
"zod": "^4.3.6"
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
{
|
||||
"id": "almeria",
|
||||
"company": "Almeria",
|
||||
"logo": "/img/company/almeria.png",
|
||||
"logo": "/api/files/img/company/almeria.png",
|
||||
"role": "Développeur",
|
||||
"period": "Depuis 2023",
|
||||
"duration": "3 ans",
|
||||
@@ -20,7 +20,7 @@
|
||||
{
|
||||
"id": "cerema",
|
||||
"company": "CEREMA",
|
||||
"logo": "/img/company/cerema.png",
|
||||
"logo": "/api/files/img/company/cerema.png",
|
||||
"role": "Technicien évaluation mesure trafic & mobilité",
|
||||
"period": "2021 - 2023",
|
||||
"duration": "2 ans",
|
||||
@@ -37,7 +37,7 @@
|
||||
{
|
||||
"id": "sncf",
|
||||
"company": "Réseau SNCF",
|
||||
"logo": "/img/company/sncf.png",
|
||||
"logo": "/api/files/img/company/sncf.png",
|
||||
"role": "Agent télécom",
|
||||
"period": "2019 - 2021",
|
||||
"duration": "2 ans",
|
||||
@@ -54,7 +54,7 @@
|
||||
{
|
||||
"id": "novoferm",
|
||||
"company": "Novoferm",
|
||||
"logo": "/img/company/novoferm.png",
|
||||
"logo": "/api/files/img/company/novoferm.png",
|
||||
"role": "Stage développeur",
|
||||
"period": "2019",
|
||||
"duration": "7 semaines",
|
||||
@@ -67,7 +67,7 @@
|
||||
{
|
||||
"id": "pivotpoint",
|
||||
"company": "Pivot Point",
|
||||
"logo": "/img/company/pivotpoint.png",
|
||||
"logo": "/api/files/img/company/pivotpoint.png",
|
||||
"role": "Stage développeur",
|
||||
"period": "2018",
|
||||
"duration": "1 semaine",
|
||||
@@ -80,7 +80,7 @@
|
||||
{
|
||||
"id": "actemium",
|
||||
"company": "Actemium",
|
||||
"logo": "/img/company/actemium.png",
|
||||
"logo": "/api/files/img/company/actemium.png",
|
||||
"role": "Stage développeur",
|
||||
"period": "2018",
|
||||
"duration": "1 semaine",
|
||||
|
||||
@@ -1,18 +1,26 @@
|
||||
{
|
||||
"name": "Johan Leroy",
|
||||
"title": "Développeur Fullstack",
|
||||
"title": "Développeur",
|
||||
"tagline": "Dev le jour, DJ la nuit",
|
||||
"bio": "Développeur fullstack passionné par les technos modernes. J'aime créer des expériences web performantes, propres et scalables — et accessoirement mixer de la tekno quand l'écran s'éteint.",
|
||||
"available": true,
|
||||
"availableLabel": "Ouvert aux opportunités",
|
||||
"hero": {
|
||||
"photo": "/img/pp/pp3.png",
|
||||
"photos": ["/img/pp/pp1.png", "/img/pp/pp2.png", "/img/pp/pp3.png"],
|
||||
"roles": ["Dev", "DJ", "Dev"],
|
||||
"photo": "/api/files/img/pp/pp3.png",
|
||||
"photos": [
|
||||
"/api/files/img/pp/pp1.png",
|
||||
"/api/files/img/pp/pp2.png",
|
||||
"/api/files/img/pp/pp3.png"
|
||||
],
|
||||
"roles": [
|
||||
"Dev",
|
||||
"DJ",
|
||||
"Dev"
|
||||
],
|
||||
"cta": [
|
||||
{
|
||||
"label": "Télécharger mon CV",
|
||||
"href": "/assets/cv.pdf",
|
||||
"href": "/api/files/assets/cv.pdf",
|
||||
"variant": "primary",
|
||||
"external": true
|
||||
},
|
||||
@@ -28,7 +36,8 @@
|
||||
"email": "contact@johanleroy.fr",
|
||||
"github": "https://github.com/JohanLeroy",
|
||||
"gitea": "https://git.lidge.fr/johanleroy",
|
||||
"linkedin": "https://www.linkedin.com/in/johan-leroy-472409180/",
|
||||
"website": "https://johanleroy.fr"
|
||||
},
|
||||
"cv": "/assets/cv.pdf"
|
||||
"cv": "/api/files/assets/cv.pdf"
|
||||
}
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
"title": "Techos",
|
||||
"subtitle": "Plateforme hébergement & domaines",
|
||||
"description": "Plateforme client + admin de gestion d'hébergement web et de domaines pour une association, construite par-dessus WHMCS. Design system Liquid Glass dark + light mode.",
|
||||
"image": "/img/projet/techos.png",
|
||||
"image": "/api/files/img/projet/techos.png",
|
||||
"category": "web",
|
||||
"status": "live",
|
||||
"url": "https://techos-asso.fr",
|
||||
@@ -50,7 +50,7 @@
|
||||
"title": "Liberty Pour La Vie",
|
||||
"subtitle": "Site associatif (archivé)",
|
||||
"description": "Développement d'un site web complet pour l'association Liberty Pour La Vie. Projet fermé, plus en ligne.",
|
||||
"image": "/img/projet/lplv.png",
|
||||
"image": "/api/files/img/projet/lplv.png",
|
||||
"category": "web",
|
||||
"status": "archived",
|
||||
"stack": ["Java Spring Boot", "Thymeleaf", "Bootstrap", "MariaDB"],
|
||||
@@ -61,7 +61,7 @@
|
||||
"title": "Mon Voisin Geek",
|
||||
"subtitle": "Site vitrine (archivé)",
|
||||
"description": "Développement d'un site web vitrine simple pour Mon Voisin Geek. Projet fermé, plus en ligne.",
|
||||
"image": "/img/projet/monvoisingeek.png",
|
||||
"image": "/api/files/img/projet/monvoisingeek.png",
|
||||
"category": "web",
|
||||
"status": "archived",
|
||||
"stack": ["Angular", "Tailwind CSS", "Express.js", "MariaDB"],
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
"freelance",
|
||||
"nantes"
|
||||
],
|
||||
"ogImage": "/img/logo/android-chrome-512x512.png",
|
||||
"ogImage": "/api/files/img/logo/android-chrome-512x512.png",
|
||||
"features": {
|
||||
"hero3D": false,
|
||||
"smoothScroll": true,
|
||||
|
||||
@@ -116,6 +116,20 @@ const year = new Date().getFullYear();
|
||||
</li>
|
||||
)
|
||||
}
|
||||
{
|
||||
profile.socials.linkedin && (
|
||||
<li>
|
||||
<a
|
||||
href={profile.socials.linkedin}
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
class="text-[color:var(--color-text-muted)] hover:text-[color:var(--color-acid)] transition"
|
||||
>
|
||||
> linkedin ↗
|
||||
</a>
|
||||
</li>
|
||||
)
|
||||
}
|
||||
{
|
||||
profile.socials.website && (
|
||||
<li>
|
||||
|
||||
@@ -18,7 +18,7 @@ const current = Astro.url.pathname;
|
||||
|
||||
<header
|
||||
class="fixed top-0 inset-x-0 z-50 backdrop-blur-xl bg-[rgba(10,10,15,0.75)] border-b border-[color:var(--color-border)]"
|
||||
transition:persist
|
||||
transition:animate="none"
|
||||
>
|
||||
<!-- Scroll progress bar -->
|
||||
<div
|
||||
@@ -198,7 +198,7 @@ const current = Astro.url.pathname;
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<script>
|
||||
<script data-astro-rerun>
|
||||
// Mobile menu
|
||||
const btn = document.getElementById('mobile-menu-btn');
|
||||
const menu = document.getElementById('mobile-menu');
|
||||
@@ -221,16 +221,16 @@ const current = Astro.url.pathname;
|
||||
updateProgress();
|
||||
|
||||
// Sound toggle (state in localStorage, off by default)
|
||||
const soundBtn = document.getElementById('sound-toggle') as HTMLButtonElement | null;
|
||||
const onIcon = soundBtn?.querySelector('.sound-on') as SVGElement | null;
|
||||
const offIcon = soundBtn?.querySelector('.sound-off') as SVGElement | null;
|
||||
const soundBtn = document.getElementById('sound-toggle');
|
||||
const onIcon = soundBtn?.querySelector('.sound-on');
|
||||
const offIcon = soundBtn?.querySelector('.sound-off');
|
||||
|
||||
function applySoundState(on: boolean) {
|
||||
function applySoundState(on) {
|
||||
if (!soundBtn || !onIcon || !offIcon) return;
|
||||
soundBtn.setAttribute('aria-pressed', on ? 'true' : 'false');
|
||||
onIcon.classList.toggle('hidden', !on);
|
||||
offIcon.classList.toggle('hidden', on);
|
||||
(window as unknown as { __soundOn?: boolean }).__soundOn = on;
|
||||
window.__soundOn = on;
|
||||
}
|
||||
|
||||
const stored = localStorage.getItem('portfolio:sound');
|
||||
|
||||
46
src/components/admin/EditPanel.tsx
Normal file
46
src/components/admin/EditPanel.tsx
Normal file
@@ -0,0 +1,46 @@
|
||||
import type { ContentKey } from '../../content/schemas';
|
||||
import { EditTabs } from './EditTabs';
|
||||
import { RawJsonEditor } from './RawJsonEditor';
|
||||
import { ProfileForm } from './forms/ProfileForm';
|
||||
import { SkillsForm } from './forms/SkillsForm';
|
||||
import { ExperiencesForm } from './forms/ExperiencesForm';
|
||||
import { FormationsForm } from './forms/FormationsForm';
|
||||
import { ProjectsForm } from './forms/ProjectsForm';
|
||||
import { InterestsForm } from './forms/InterestsForm';
|
||||
import { SiteForm } from './forms/SiteForm';
|
||||
|
||||
type Props = {
|
||||
section: ContentKey;
|
||||
data: unknown;
|
||||
};
|
||||
|
||||
export function EditPanel({ section, data }: Props) {
|
||||
return (
|
||||
<EditTabs
|
||||
section={section}
|
||||
formNode={renderForm(section, data)}
|
||||
rawNode={<RawJsonEditor section={section} initial={data} />}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function renderForm(section: ContentKey, data: unknown) {
|
||||
switch (section) {
|
||||
case 'profile':
|
||||
return <ProfileForm defaultValues={data as never} />;
|
||||
case 'skills':
|
||||
return <SkillsForm defaultValues={data as never} />;
|
||||
case 'experiences':
|
||||
return <ExperiencesForm defaultValues={data as never} />;
|
||||
case 'formations':
|
||||
return <FormationsForm defaultValues={data as never} />;
|
||||
case 'projects':
|
||||
return <ProjectsForm defaultValues={data as never} />;
|
||||
case 'interests':
|
||||
return <InterestsForm defaultValues={data as never} />;
|
||||
case 'site':
|
||||
return <SiteForm defaultValues={data as never} />;
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
}
|
||||
83
src/components/admin/EditTabs.tsx
Normal file
83
src/components/admin/EditTabs.tsx
Normal file
@@ -0,0 +1,83 @@
|
||||
import { useEffect, useState, type ReactNode } from 'react';
|
||||
|
||||
type Tab = 'form' | 'raw';
|
||||
|
||||
type Props = {
|
||||
section: string;
|
||||
formNode: ReactNode;
|
||||
rawNode: ReactNode;
|
||||
};
|
||||
|
||||
export function EditTabs({ section, formNode, rawNode }: Props) {
|
||||
const storageKey = `admin:tab:${section}`;
|
||||
const [tab, setTab] = useState<Tab>('form');
|
||||
|
||||
useEffect(() => {
|
||||
const saved = sessionStorage.getItem(storageKey) as Tab | null;
|
||||
if (saved === 'form' || saved === 'raw') setTab(saved);
|
||||
}, [storageKey]);
|
||||
|
||||
const switchTo = (t: Tab) => {
|
||||
setTab(t);
|
||||
sessionStorage.setItem(storageKey, t);
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<nav
|
||||
role="tablist"
|
||||
aria-label="Mode d'édition"
|
||||
className="flex gap-1 border-b border-[color:var(--color-border)] mb-6"
|
||||
>
|
||||
<TabButton
|
||||
active={tab === 'form'}
|
||||
onClick={() => switchTo('form')}
|
||||
label="Formulaire"
|
||||
tag="// guidé"
|
||||
/>
|
||||
<TabButton
|
||||
active={tab === 'raw'}
|
||||
onClick={() => switchTo('raw')}
|
||||
label="JSON brut"
|
||||
tag="// avancé"
|
||||
/>
|
||||
</nav>
|
||||
|
||||
<div role="tabpanel" hidden={tab !== 'form'}>
|
||||
{tab === 'form' && formNode}
|
||||
</div>
|
||||
<div role="tabpanel" hidden={tab !== 'raw'}>
|
||||
{tab === 'raw' && rawNode}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function TabButton({
|
||||
active,
|
||||
onClick,
|
||||
label,
|
||||
tag,
|
||||
}: {
|
||||
active: boolean;
|
||||
onClick: () => void;
|
||||
label: string;
|
||||
tag: string;
|
||||
}) {
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
role="tab"
|
||||
aria-selected={active}
|
||||
onClick={onClick}
|
||||
className={`px-4 py-2 font-display uppercase tracking-widest text-sm transition-colors border-b-2 ${
|
||||
active
|
||||
? 'text-[color:var(--color-acid)] border-[color:var(--color-acid)] glow-text-acid'
|
||||
: 'text-[color:var(--color-text-muted)] border-transparent hover:text-[color:var(--color-cyan)]'
|
||||
}`}
|
||||
>
|
||||
<span className="block leading-none">{label}</span>
|
||||
<span className="block font-mono text-[9px] opacity-70 mt-0.5">{tag}</span>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
146
src/components/admin/FormShell.tsx
Normal file
146
src/components/admin/FormShell.tsx
Normal file
@@ -0,0 +1,146 @@
|
||||
import { useEffect, useState, type ReactNode } from 'react';
|
||||
import {
|
||||
FormProvider,
|
||||
useForm,
|
||||
type DefaultValues,
|
||||
type FieldValues,
|
||||
type Resolver,
|
||||
} from 'react-hook-form';
|
||||
|
||||
type Props<T extends FieldValues> = {
|
||||
section: string;
|
||||
defaultValues: DefaultValues<T>;
|
||||
resolver: Resolver<T>;
|
||||
children: ReactNode;
|
||||
};
|
||||
|
||||
type Status =
|
||||
| { kind: 'idle' }
|
||||
| { kind: 'saving' }
|
||||
| { kind: 'saved' }
|
||||
| { kind: 'error'; message: string };
|
||||
|
||||
export function FormShell<T extends FieldValues>({
|
||||
section,
|
||||
defaultValues,
|
||||
resolver,
|
||||
children,
|
||||
}: Props<T>) {
|
||||
const methods = useForm<T>({ defaultValues, resolver, mode: 'onBlur' });
|
||||
const [status, setStatus] = useState<Status>({ kind: 'idle' });
|
||||
|
||||
const onSubmit = methods.handleSubmit(async (values) => {
|
||||
setStatus({ kind: 'saving' });
|
||||
try {
|
||||
const res = await fetch(`/api/content/${section}`, {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(values),
|
||||
});
|
||||
const data = await res.json();
|
||||
if (!res.ok) {
|
||||
setStatus({ kind: 'error', message: data.message || data.error || 'erreur' });
|
||||
return;
|
||||
}
|
||||
setStatus({ kind: 'saved' });
|
||||
methods.reset(values as DefaultValues<T>);
|
||||
setTimeout(() => setStatus({ kind: 'idle' }), 2500);
|
||||
} catch (e) {
|
||||
setStatus({ kind: 'error', message: (e as Error).message });
|
||||
}
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
const onKey = (e: KeyboardEvent) => {
|
||||
if ((e.metaKey || e.ctrlKey) && e.key === 's') {
|
||||
e.preventDefault();
|
||||
onSubmit();
|
||||
}
|
||||
};
|
||||
window.addEventListener('keydown', onKey);
|
||||
return () => window.removeEventListener('keydown', onKey);
|
||||
}, [onSubmit]);
|
||||
|
||||
const dirty = methods.formState.isDirty;
|
||||
|
||||
return (
|
||||
<FormProvider {...methods}>
|
||||
<form onSubmit={onSubmit} className="space-y-6">
|
||||
<div className="sticky top-16 z-30 -mx-4 px-4 py-3 bg-[rgba(10,10,15,0.85)] backdrop-blur-xl border-b border-[color:var(--color-border)] flex flex-wrap items-center justify-between gap-2">
|
||||
<div className="flex items-center gap-3 min-w-0">
|
||||
<Pill status={status} dirty={dirty} />
|
||||
</div>
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
{dirty && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => methods.reset()}
|
||||
className="font-mono text-xs uppercase tracking-widest text-[color:var(--color-text-muted)] hover:text-[color:var(--color-magenta)] px-3 py-1.5 transition-colors"
|
||||
>
|
||||
annuler
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
type="submit"
|
||||
disabled={status.kind === 'saving'}
|
||||
className="btn-primary text-xs py-1.5 disabled:opacity-50"
|
||||
>
|
||||
{status.kind === 'saving' ? 'enregistrement…' : 'enregistrer'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-8">{children}</div>
|
||||
|
||||
<div className="pt-6 border-t border-[color:var(--color-border)] flex justify-end">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={status.kind === 'saving'}
|
||||
className="btn-primary disabled:opacity-50"
|
||||
>
|
||||
{status.kind === 'saving' ? 'enregistrement…' : 'enregistrer'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</FormProvider>
|
||||
);
|
||||
}
|
||||
|
||||
function Pill({ status, dirty }: { status: Status; dirty: boolean }) {
|
||||
if (status.kind === 'saving')
|
||||
return (
|
||||
<span className="flex items-center gap-2 font-mono text-xs uppercase tracking-widest text-[color:var(--color-acid)]">
|
||||
<span className="led led-acid animate-led-red" />
|
||||
enregistrement…
|
||||
</span>
|
||||
);
|
||||
if (status.kind === 'saved')
|
||||
return (
|
||||
<span className="sticker text-[color:var(--color-cyan)] glow-text-cyan animate-pulse-neon">
|
||||
✓ saved
|
||||
</span>
|
||||
);
|
||||
if (status.kind === 'error')
|
||||
return (
|
||||
<span
|
||||
className="flex items-center gap-2 font-mono text-xs uppercase tracking-widest text-[color:var(--color-magenta)]"
|
||||
title={status.message}
|
||||
>
|
||||
<span className="led led-red animate-led-red" />
|
||||
✗ {status.message.slice(0, 80)}
|
||||
</span>
|
||||
);
|
||||
if (dirty)
|
||||
return (
|
||||
<span className="flex items-center gap-2 font-mono text-xs uppercase tracking-widest text-[color:var(--color-text-muted)]">
|
||||
<span className="led" style={{ background: 'var(--color-text-muted)', boxShadow: 'none' }} />
|
||||
modifications non sauvées
|
||||
</span>
|
||||
);
|
||||
return (
|
||||
<span className="flex items-center gap-2 font-mono text-xs uppercase tracking-widest text-[color:var(--color-text-dim)]">
|
||||
<span className="led led-cyan" />
|
||||
synced
|
||||
</span>
|
||||
);
|
||||
}
|
||||
122
src/components/admin/RawJsonEditor.tsx
Normal file
122
src/components/admin/RawJsonEditor.tsx
Normal file
@@ -0,0 +1,122 @@
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
|
||||
type Props = {
|
||||
section: string;
|
||||
initial: unknown;
|
||||
};
|
||||
|
||||
type Status =
|
||||
| { kind: 'idle' }
|
||||
| { kind: 'saving' }
|
||||
| { kind: 'saved' }
|
||||
| { kind: 'error'; message: string }
|
||||
| { kind: 'invalid' };
|
||||
|
||||
export function RawJsonEditor({ section, initial }: Props) {
|
||||
const [value, setValue] = useState(() => JSON.stringify(initial, null, 2));
|
||||
const [status, setStatus] = useState<Status>({ kind: 'idle' });
|
||||
const taRef = useRef<HTMLTextAreaElement>(null);
|
||||
|
||||
const format = () => {
|
||||
try {
|
||||
const parsed = JSON.parse(value);
|
||||
setValue(JSON.stringify(parsed, null, 2));
|
||||
setStatus({ kind: 'idle' });
|
||||
} catch {
|
||||
setStatus({ kind: 'invalid' });
|
||||
}
|
||||
};
|
||||
|
||||
const save = async () => {
|
||||
let body: unknown;
|
||||
try {
|
||||
body = JSON.parse(value);
|
||||
} catch {
|
||||
setStatus({ kind: 'invalid' });
|
||||
return;
|
||||
}
|
||||
setStatus({ kind: 'saving' });
|
||||
try {
|
||||
const res = await fetch(`/api/content/${section}`, {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(body),
|
||||
});
|
||||
const data = await res.json();
|
||||
if (!res.ok) {
|
||||
setStatus({ kind: 'error', message: data.message || data.error || 'erreur' });
|
||||
return;
|
||||
}
|
||||
setStatus({ kind: 'saved' });
|
||||
setTimeout(() => setStatus({ kind: 'idle' }), 2500);
|
||||
} catch (e) {
|
||||
setStatus({ kind: 'error', message: (e as Error).message });
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const onKey = (e: KeyboardEvent) => {
|
||||
if ((e.metaKey || e.ctrlKey) && e.key === 's') {
|
||||
e.preventDefault();
|
||||
save();
|
||||
}
|
||||
};
|
||||
const ta = taRef.current;
|
||||
ta?.addEventListener('keydown', onKey as EventListener);
|
||||
return () => ta?.removeEventListener('keydown', onKey as EventListener);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [value]);
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
|
||||
<p className="font-mono text-xs text-[color:var(--color-text-dim)]">
|
||||
Mode avancé — JSON brut, validé Zod côté serveur.
|
||||
</p>
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<StatusPill status={status} />
|
||||
<button type="button" onClick={format} className="btn-ghost text-xs py-1.5">
|
||||
Formater
|
||||
</button>
|
||||
<button type="button" onClick={save} className="btn-primary text-xs py-1.5">
|
||||
Enregistrer
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<textarea
|
||||
ref={taRef}
|
||||
value={value}
|
||||
onChange={(e) => setValue(e.target.value)}
|
||||
spellCheck={false}
|
||||
className="w-full min-h-[400px] h-[calc(100vh-300px)] max-h-[80vh] bg-[color:var(--color-surface)] border border-[color:var(--color-border)] focus:border-[color:var(--color-cyan)] focus:outline-none p-4 rounded text-sm font-mono text-[color:var(--color-text)] resize-none"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function StatusPill({ status }: { status: Status }) {
|
||||
if (status.kind === 'idle') return null;
|
||||
if (status.kind === 'saving')
|
||||
return (
|
||||
<span className="font-mono text-xs text-[color:var(--color-text-muted)]">
|
||||
enregistrement…
|
||||
</span>
|
||||
);
|
||||
if (status.kind === 'saved')
|
||||
return (
|
||||
<span className="font-mono text-xs text-[color:var(--color-cyan)] glow-text-cyan">
|
||||
✓ enregistré
|
||||
</span>
|
||||
);
|
||||
if (status.kind === 'invalid')
|
||||
return (
|
||||
<span className="font-mono text-xs text-[color:var(--color-magenta)]">
|
||||
JSON invalide
|
||||
</span>
|
||||
);
|
||||
return (
|
||||
<span className="font-mono text-xs text-[color:var(--color-magenta)]" title={status.message}>
|
||||
✗ {status.message.slice(0, 60)}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
23
src/components/admin/Section.tsx
Normal file
23
src/components/admin/Section.tsx
Normal file
@@ -0,0 +1,23 @@
|
||||
import type { ReactNode } from 'react';
|
||||
|
||||
type Props = {
|
||||
title: string;
|
||||
subtitle?: string;
|
||||
children: ReactNode;
|
||||
};
|
||||
|
||||
export function Section({ title, subtitle, children }: Props) {
|
||||
return (
|
||||
<section className="card-neon space-y-4">
|
||||
<header className="flex items-baseline gap-3 pb-2 border-b border-[color:var(--color-border)]">
|
||||
<h2 className="font-display uppercase tracking-widest text-lg text-[color:var(--color-cyan)] glow-text-cyan">
|
||||
{title}
|
||||
</h2>
|
||||
{subtitle && (
|
||||
<span className="font-mono text-xs text-[color:var(--color-text-dim)]">{subtitle}</span>
|
||||
)}
|
||||
</header>
|
||||
<div className="space-y-4">{children}</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
99
src/components/admin/fields/ArrayEditor.tsx
Normal file
99
src/components/admin/fields/ArrayEditor.tsx
Normal file
@@ -0,0 +1,99 @@
|
||||
import type { ReactNode } from 'react';
|
||||
import { useFieldArray, useFormContext } from 'react-hook-form';
|
||||
|
||||
type Props<T> = {
|
||||
name: string;
|
||||
label: string;
|
||||
hint?: string;
|
||||
newItem: () => T;
|
||||
itemLabel?: (index: number) => string;
|
||||
children: (params: { index: number; namePrefix: string }) => ReactNode;
|
||||
};
|
||||
|
||||
export function ArrayEditor<T>({
|
||||
name,
|
||||
label,
|
||||
hint,
|
||||
newItem,
|
||||
itemLabel,
|
||||
children,
|
||||
}: Props<T>) {
|
||||
const { control } = useFormContext();
|
||||
const { fields, append, remove, move } = useFieldArray({ control, name });
|
||||
|
||||
return (
|
||||
<section className="space-y-3">
|
||||
<header className="flex items-center justify-between">
|
||||
<div>
|
||||
<h3 className="font-display uppercase tracking-widest text-base text-[color:var(--color-acid)] glow-text-acid">
|
||||
{label}
|
||||
</h3>
|
||||
{hint && (
|
||||
<p className="font-mono text-[10px] text-[color:var(--color-text-dim)] mt-0.5">
|
||||
{hint}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => append(newItem() as never)}
|
||||
className="px-3 py-1.5 font-mono text-xs uppercase tracking-widest text-[color:var(--color-bg)] bg-[color:var(--color-acid)] rounded hover:opacity-90 transition-opacity"
|
||||
>
|
||||
+ ajouter
|
||||
</button>
|
||||
</header>
|
||||
|
||||
{fields.length === 0 && (
|
||||
<div className="font-mono text-xs text-[color:var(--color-text-dim)] italic border border-dashed border-[color:var(--color-border)] rounded p-4 text-center">
|
||||
(aucun élément — clique « ajouter » pour commencer)
|
||||
</div>
|
||||
)}
|
||||
|
||||
<ol className="space-y-3">
|
||||
{fields.map((field, idx) => (
|
||||
<li
|
||||
key={field.id}
|
||||
className="border border-[color:var(--color-border)] rounded bg-[color:var(--color-surface)] p-4 relative"
|
||||
>
|
||||
<div className="flex items-center justify-between mb-3 pb-2 border-b border-[color:var(--color-border)]">
|
||||
<span className="font-mono text-[10px] uppercase tracking-widest text-[color:var(--color-cyan)]">
|
||||
{itemLabel ? itemLabel(idx) : `# ${String(idx + 1).padStart(2, '0')}`}
|
||||
</span>
|
||||
<div className="flex items-center gap-1">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => idx > 0 && move(idx, idx - 1)}
|
||||
disabled={idx === 0}
|
||||
className="px-2 py-1 font-mono text-xs text-[color:var(--color-text-muted)] hover:text-[color:var(--color-cyan)] disabled:opacity-30"
|
||||
aria-label="monter"
|
||||
>
|
||||
↑
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => idx < fields.length - 1 && move(idx, idx + 1)}
|
||||
disabled={idx === fields.length - 1}
|
||||
className="px-2 py-1 font-mono text-xs text-[color:var(--color-text-muted)] hover:text-[color:var(--color-cyan)] disabled:opacity-30"
|
||||
aria-label="descendre"
|
||||
>
|
||||
↓
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => remove(idx)}
|
||||
className="px-2 py-1 font-mono text-xs text-[color:var(--color-magenta)] hover:text-[color:var(--color-bg)] hover:bg-[color:var(--color-magenta)] rounded transition-colors"
|
||||
aria-label="supprimer"
|
||||
>
|
||||
supprimer
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
{children({ index: idx, namePrefix: `${name}.${idx}` })}
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
95
src/components/admin/fields/ChipsField.tsx
Normal file
95
src/components/admin/fields/ChipsField.tsx
Normal file
@@ -0,0 +1,95 @@
|
||||
import { useState, type KeyboardEvent } from 'react';
|
||||
import { Controller, useFormContext } from 'react-hook-form';
|
||||
import { FieldError } from './FieldError';
|
||||
|
||||
type Props = {
|
||||
name: string;
|
||||
label: string;
|
||||
hint?: string;
|
||||
placeholder?: string;
|
||||
};
|
||||
|
||||
export function ChipsField({ name, label, hint, placeholder = 'Ajouter puis Entrée…' }: Props) {
|
||||
const { control } = useFormContext();
|
||||
const [draft, setDraft] = useState('');
|
||||
|
||||
return (
|
||||
<Controller
|
||||
name={name}
|
||||
control={control}
|
||||
render={({ field }) => {
|
||||
const items: string[] = Array.isArray(field.value) ? field.value : [];
|
||||
|
||||
const add = () => {
|
||||
const value = draft.trim();
|
||||
if (!value) return;
|
||||
if (items.includes(value)) {
|
||||
setDraft('');
|
||||
return;
|
||||
}
|
||||
field.onChange([...items, value]);
|
||||
setDraft('');
|
||||
};
|
||||
|
||||
const remove = (idx: number) => {
|
||||
field.onChange(items.filter((_, i) => i !== idx));
|
||||
};
|
||||
|
||||
const onKey = (e: KeyboardEvent<HTMLInputElement>) => {
|
||||
if (e.key === 'Enter' || e.key === ',') {
|
||||
e.preventDefault();
|
||||
add();
|
||||
} else if (e.key === 'Backspace' && draft === '' && items.length > 0) {
|
||||
field.onChange(items.slice(0, -1));
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<span className="block font-mono text-xs uppercase tracking-widest text-[color:var(--color-cyan)] mb-1.5">
|
||||
{label}
|
||||
</span>
|
||||
{hint && (
|
||||
<span className="block font-mono text-[10px] text-[color:var(--color-text-dim)] mb-1.5">
|
||||
{hint}
|
||||
</span>
|
||||
)}
|
||||
<div className="flex flex-wrap gap-2 mb-2">
|
||||
{items.map((item, idx) => (
|
||||
<span
|
||||
key={`${item}-${idx}`}
|
||||
className="chip group cursor-pointer"
|
||||
onClick={() => remove(idx)}
|
||||
title="Cliquer pour retirer"
|
||||
>
|
||||
{item}
|
||||
<span className="ml-1 opacity-50 group-hover:opacity-100 group-hover:text-[color:var(--color-magenta)]">
|
||||
×
|
||||
</span>
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
type="text"
|
||||
value={draft}
|
||||
onChange={(e) => setDraft(e.target.value)}
|
||||
onKeyDown={onKey}
|
||||
placeholder={placeholder}
|
||||
className="flex-1 bg-[color:var(--color-surface-2)] border border-[color:var(--color-border)] focus:border-[color:var(--color-cyan)] focus:outline-none p-2 rounded text-sm font-mono text-[color:var(--color-text)] transition-colors"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={add}
|
||||
className="px-3 py-1.5 font-mono text-xs uppercase tracking-widest border border-[color:var(--color-cyan)] text-[color:var(--color-cyan)] rounded hover:bg-[color:var(--color-cyan)] hover:text-[color:var(--color-bg)] transition-colors"
|
||||
>
|
||||
+ add
|
||||
</button>
|
||||
</div>
|
||||
<FieldError name={name} />
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
55
src/components/admin/fields/EmojiField.tsx
Normal file
55
src/components/admin/fields/EmojiField.tsx
Normal file
@@ -0,0 +1,55 @@
|
||||
import { useFormContext } from 'react-hook-form';
|
||||
import { FieldError } from './FieldError';
|
||||
|
||||
type Props = {
|
||||
name: string;
|
||||
label: string;
|
||||
hint?: string;
|
||||
};
|
||||
|
||||
const SUGGESTIONS = ['⚡', '🚀', '💼', '🎓', '🎧', '🛠️', '🎵', '💻', '📱', '🤖', '☁️', '🔥', '✨', '🎯', '🎨', '🌐'];
|
||||
|
||||
export function EmojiField({ name, label, hint }: Props) {
|
||||
const { register, setValue, watch } = useFormContext();
|
||||
const value = watch(name);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<label className="block">
|
||||
<span className="block font-mono text-xs uppercase tracking-widest text-[color:var(--color-cyan)] mb-1.5">
|
||||
{label}
|
||||
</span>
|
||||
{hint && (
|
||||
<span className="block font-mono text-[10px] text-[color:var(--color-text-dim)] mb-1.5">
|
||||
{hint}
|
||||
</span>
|
||||
)}
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-2xl w-12 h-12 flex items-center justify-center bg-[color:var(--color-surface-2)] border border-[color:var(--color-border)] rounded">
|
||||
{value || '·'}
|
||||
</span>
|
||||
<input
|
||||
type="text"
|
||||
maxLength={4}
|
||||
{...register(name)}
|
||||
className="flex-1 bg-[color:var(--color-surface-2)] border border-[color:var(--color-border)] focus:border-[color:var(--color-cyan)] focus:outline-none p-2.5 rounded text-sm font-mono text-[color:var(--color-text)] transition-colors"
|
||||
placeholder="emoji ou caractère"
|
||||
/>
|
||||
</div>
|
||||
</label>
|
||||
<div className="flex flex-wrap gap-1 mt-2">
|
||||
{SUGGESTIONS.map((s) => (
|
||||
<button
|
||||
key={s}
|
||||
type="button"
|
||||
onClick={() => setValue(name, s, { shouldDirty: true, shouldValidate: true })}
|
||||
className="w-8 h-8 flex items-center justify-center text-base hover:bg-[color:var(--color-surface-2)] rounded transition-colors"
|
||||
>
|
||||
{s}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<FieldError name={name} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
17
src/components/admin/fields/FieldError.tsx
Normal file
17
src/components/admin/fields/FieldError.tsx
Normal file
@@ -0,0 +1,17 @@
|
||||
import { useFormContext, get } from 'react-hook-form';
|
||||
|
||||
type Props = { name: string };
|
||||
|
||||
export function FieldError({ name }: Props) {
|
||||
const {
|
||||
formState: { errors },
|
||||
} = useFormContext();
|
||||
const error = get(errors, name);
|
||||
if (!error?.message) return null;
|
||||
return (
|
||||
<p className="mt-1 flex items-center gap-2 font-mono text-xs text-[color:var(--color-magenta)]">
|
||||
<span className="led led-red animate-led-red" />
|
||||
<span>{String(error.message)}</span>
|
||||
</p>
|
||||
);
|
||||
}
|
||||
223
src/components/admin/fields/FileUploadField.tsx
Normal file
223
src/components/admin/fields/FileUploadField.tsx
Normal file
@@ -0,0 +1,223 @@
|
||||
import { useRef, useState, type DragEvent } from 'react';
|
||||
import { Controller, useFormContext } from 'react-hook-form';
|
||||
import { FieldError } from './FieldError';
|
||||
|
||||
type Kind = 'image' | 'document';
|
||||
|
||||
type Props = {
|
||||
name: string;
|
||||
label: string;
|
||||
folder?: string;
|
||||
hint?: string;
|
||||
accept?: string;
|
||||
maxSizeMb?: number;
|
||||
kind?: Kind;
|
||||
};
|
||||
|
||||
const ACCEPT: Record<Kind, string> = {
|
||||
image: 'image/png,image/jpeg,image/webp,image/svg+xml,image/gif',
|
||||
document: 'application/pdf,.pdf',
|
||||
};
|
||||
|
||||
const HELP_TEXT: Record<Kind, string> = {
|
||||
image: 'png, jpg, webp, svg, gif',
|
||||
document: 'pdf uniquement',
|
||||
};
|
||||
|
||||
function fileNameFromUrl(url: string): string {
|
||||
try {
|
||||
const clean = url.split('?')[0];
|
||||
const segments = clean.split('/');
|
||||
return segments[segments.length - 1] || url;
|
||||
} catch {
|
||||
return url;
|
||||
}
|
||||
}
|
||||
|
||||
export function FileUploadField({
|
||||
name,
|
||||
label,
|
||||
folder = '',
|
||||
hint,
|
||||
accept,
|
||||
maxSizeMb,
|
||||
kind = 'image',
|
||||
}: Props) {
|
||||
const { control } = useFormContext();
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
const [hover, setHover] = useState(false);
|
||||
const [busy, setBusy] = useState(false);
|
||||
const [localError, setLocalError] = useState<string | null>(null);
|
||||
|
||||
const effectiveAccept = accept ?? ACCEPT[kind];
|
||||
const effectiveMax = maxSizeMb ?? (kind === 'document' ? 8 : 5);
|
||||
|
||||
return (
|
||||
<Controller
|
||||
name={name}
|
||||
control={control}
|
||||
render={({ field }) => {
|
||||
const url: string = field.value || '';
|
||||
|
||||
const upload = async (file: File) => {
|
||||
setLocalError(null);
|
||||
if (file.size > effectiveMax * 1024 * 1024) {
|
||||
setLocalError(`Fichier trop lourd (max ${effectiveMax} Mo).`);
|
||||
return;
|
||||
}
|
||||
setBusy(true);
|
||||
try {
|
||||
const fd = new FormData();
|
||||
fd.append('file', file);
|
||||
fd.append('kind', kind);
|
||||
if (folder) fd.append('folder', folder);
|
||||
const res = await fetch('/api/upload', { method: 'POST', body: fd });
|
||||
const data = await res.json();
|
||||
if (!res.ok || !data.url) {
|
||||
setLocalError(data?.error || 'upload échoué');
|
||||
return;
|
||||
}
|
||||
field.onChange(data.url);
|
||||
} catch (e) {
|
||||
setLocalError((e as Error).message || 'upload échoué');
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
};
|
||||
|
||||
const onDrop = (e: DragEvent<HTMLDivElement>) => {
|
||||
e.preventDefault();
|
||||
setHover(false);
|
||||
const file = e.dataTransfer.files?.[0];
|
||||
if (file) upload(file);
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<span className="block font-mono text-xs uppercase tracking-widest text-[color:var(--color-cyan)] mb-1.5">
|
||||
{label}
|
||||
</span>
|
||||
{hint && (
|
||||
<span className="block font-mono text-[10px] text-[color:var(--color-text-dim)] mb-1.5">
|
||||
{hint}
|
||||
</span>
|
||||
)}
|
||||
<div className="flex flex-col sm:flex-row sm:items-start gap-3">
|
||||
{url && kind === 'image' ? (
|
||||
<div className="relative shrink-0">
|
||||
<img
|
||||
src={url}
|
||||
alt=""
|
||||
className="w-28 h-28 object-cover border border-[color:var(--color-cyan)] rounded"
|
||||
/>
|
||||
<span className="sticker absolute -top-2 -left-2 text-[color:var(--color-cyan)]">
|
||||
ok
|
||||
</span>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{url && kind === 'document' ? (
|
||||
<div className="relative shrink-0 w-full sm:w-44 p-3 border border-[color:var(--color-cyan)] rounded bg-[color:var(--color-surface-2)] flex flex-col gap-1">
|
||||
<span className="font-mono text-[10px] uppercase tracking-widest text-[color:var(--color-cyan)]">
|
||||
pdf actuel
|
||||
</span>
|
||||
<span className="font-mono text-[11px] text-[color:var(--color-text)] truncate">
|
||||
{fileNameFromUrl(url)}
|
||||
</span>
|
||||
<a
|
||||
href={url}
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
className="font-mono text-[10px] uppercase tracking-widest text-[color:var(--color-acid)] hover:underline"
|
||||
>
|
||||
voir le fichier ↗
|
||||
</a>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<div
|
||||
onDragEnter={(e) => {
|
||||
e.preventDefault();
|
||||
setHover(true);
|
||||
}}
|
||||
onDragOver={(e) => {
|
||||
e.preventDefault();
|
||||
setHover(true);
|
||||
}}
|
||||
onDragLeave={() => setHover(false)}
|
||||
onDrop={onDrop}
|
||||
onClick={() => inputRef.current?.click()}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
e.preventDefault();
|
||||
inputRef.current?.click();
|
||||
}
|
||||
}}
|
||||
className={`flex-1 cursor-pointer p-4 rounded text-center transition-all ${
|
||||
hover
|
||||
? 'neon-border-cyan glow-cyan'
|
||||
: 'border border-dashed border-[color:var(--color-border)] hover:border-[color:var(--color-cyan)]'
|
||||
}`}
|
||||
>
|
||||
{busy ? (
|
||||
<div className="flex items-center justify-center gap-2 font-mono text-xs uppercase tracking-widest text-[color:var(--color-acid)]">
|
||||
<span className="led led-acid animate-led-red" />
|
||||
upload en cours…
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col items-center gap-1 font-mono text-xs uppercase tracking-widest text-[color:var(--color-text-muted)]">
|
||||
<span className="text-[color:var(--color-cyan)]">
|
||||
{url ? '↻ remplacer' : '↑ glisser-déposer'}
|
||||
</span>
|
||||
<span className="text-[10px] text-[color:var(--color-text-dim)] normal-case tracking-normal">
|
||||
ou cliquer · {HELP_TEXT[kind]} (max {effectiveMax} Mo)
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{url && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => field.onChange('')}
|
||||
className="self-start sm:self-auto shrink-0 px-2 py-1 font-mono text-xs uppercase tracking-widest text-[color:var(--color-magenta)] border border-[color:var(--color-magenta)] rounded hover:bg-[color:var(--color-magenta)] hover:text-[color:var(--color-bg)] transition-colors"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<input
|
||||
ref={inputRef}
|
||||
type="file"
|
||||
accept={effectiveAccept}
|
||||
className="hidden"
|
||||
onChange={(e) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (file) upload(file);
|
||||
e.target.value = '';
|
||||
}}
|
||||
/>
|
||||
|
||||
{url && (
|
||||
<p className="mt-1 font-mono text-[10px] text-[color:var(--color-text-dim)] truncate">
|
||||
{url}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{localError && (
|
||||
<p className="mt-1 flex items-center gap-2 font-mono text-xs text-[color:var(--color-magenta)]">
|
||||
<span className="led led-red animate-led-red" />
|
||||
{localError}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<FieldError name={name} />
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
14
src/components/admin/fields/ImageUploadField.tsx
Normal file
14
src/components/admin/fields/ImageUploadField.tsx
Normal file
@@ -0,0 +1,14 @@
|
||||
import { FileUploadField } from './FileUploadField';
|
||||
|
||||
type Props = {
|
||||
name: string;
|
||||
label: string;
|
||||
folder?: string;
|
||||
hint?: string;
|
||||
accept?: string;
|
||||
maxSizeMb?: number;
|
||||
};
|
||||
|
||||
export function ImageUploadField(props: Props) {
|
||||
return <FileUploadField {...props} kind="image" />;
|
||||
}
|
||||
38
src/components/admin/fields/SelectField.tsx
Normal file
38
src/components/admin/fields/SelectField.tsx
Normal file
@@ -0,0 +1,38 @@
|
||||
import { useFormContext } from 'react-hook-form';
|
||||
import { FieldError } from './FieldError';
|
||||
|
||||
type Option = { value: string; label: string };
|
||||
|
||||
type Props = {
|
||||
name: string;
|
||||
label: string;
|
||||
options: Option[];
|
||||
hint?: string;
|
||||
};
|
||||
|
||||
export function SelectField({ name, label, options, hint }: Props) {
|
||||
const { register } = useFormContext();
|
||||
return (
|
||||
<label className="block">
|
||||
<span className="block font-mono text-xs uppercase tracking-widest text-[color:var(--color-cyan)] mb-1.5">
|
||||
{label}
|
||||
</span>
|
||||
{hint && (
|
||||
<span className="block font-mono text-[10px] text-[color:var(--color-text-dim)] mb-1.5">
|
||||
{hint}
|
||||
</span>
|
||||
)}
|
||||
<select
|
||||
{...register(name)}
|
||||
className="w-full bg-[color:var(--color-surface-2)] border border-[color:var(--color-border)] focus:border-[color:var(--color-cyan)] focus:outline-none p-2.5 rounded text-sm text-[color:var(--color-text)] transition-colors"
|
||||
>
|
||||
{options.map((opt) => (
|
||||
<option key={opt.value} value={opt.value}>
|
||||
{opt.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<FieldError name={name} />
|
||||
</label>
|
||||
);
|
||||
}
|
||||
34
src/components/admin/fields/TextAreaField.tsx
Normal file
34
src/components/admin/fields/TextAreaField.tsx
Normal file
@@ -0,0 +1,34 @@
|
||||
import { useFormContext } from 'react-hook-form';
|
||||
import { FieldError } from './FieldError';
|
||||
|
||||
type Props = {
|
||||
name: string;
|
||||
label: string;
|
||||
hint?: string;
|
||||
placeholder?: string;
|
||||
rows?: number;
|
||||
mono?: boolean;
|
||||
};
|
||||
|
||||
export function TextAreaField({ name, label, hint, placeholder, rows = 4, mono = false }: Props) {
|
||||
const { register } = useFormContext();
|
||||
return (
|
||||
<label className="block">
|
||||
<span className="block font-mono text-xs uppercase tracking-widest text-[color:var(--color-cyan)] mb-1.5">
|
||||
{label}
|
||||
</span>
|
||||
{hint && (
|
||||
<span className="block font-mono text-[10px] text-[color:var(--color-text-dim)] mb-1.5">
|
||||
{hint}
|
||||
</span>
|
||||
)}
|
||||
<textarea
|
||||
rows={rows}
|
||||
placeholder={placeholder}
|
||||
{...register(name)}
|
||||
className={`w-full bg-[color:var(--color-surface-2)] border border-[color:var(--color-border)] focus:border-[color:var(--color-cyan)] focus:outline-none p-2.5 rounded text-sm text-[color:var(--color-text)] transition-colors resize-y ${mono ? 'font-mono' : ''}`}
|
||||
/>
|
||||
<FieldError name={name} />
|
||||
</label>
|
||||
);
|
||||
}
|
||||
33
src/components/admin/fields/TextField.tsx
Normal file
33
src/components/admin/fields/TextField.tsx
Normal file
@@ -0,0 +1,33 @@
|
||||
import { useFormContext } from 'react-hook-form';
|
||||
import { FieldError } from './FieldError';
|
||||
|
||||
type Props = {
|
||||
name: string;
|
||||
label: string;
|
||||
hint?: string;
|
||||
placeholder?: string;
|
||||
type?: 'text' | 'email' | 'url';
|
||||
};
|
||||
|
||||
export function TextField({ name, label, hint, placeholder, type = 'text' }: Props) {
|
||||
const { register } = useFormContext();
|
||||
return (
|
||||
<label className="block">
|
||||
<span className="block font-mono text-xs uppercase tracking-widest text-[color:var(--color-cyan)] mb-1.5">
|
||||
{label}
|
||||
</span>
|
||||
{hint && (
|
||||
<span className="block font-mono text-[10px] text-[color:var(--color-text-dim)] mb-1.5">
|
||||
{hint}
|
||||
</span>
|
||||
)}
|
||||
<input
|
||||
type={type}
|
||||
placeholder={placeholder}
|
||||
{...register(name)}
|
||||
className="w-full bg-[color:var(--color-surface-2)] border border-[color:var(--color-border)] focus:border-[color:var(--color-cyan)] focus:outline-none p-2.5 rounded text-sm text-[color:var(--color-text)] transition-colors"
|
||||
/>
|
||||
<FieldError name={name} />
|
||||
</label>
|
||||
);
|
||||
}
|
||||
53
src/components/admin/fields/ToggleField.tsx
Normal file
53
src/components/admin/fields/ToggleField.tsx
Normal file
@@ -0,0 +1,53 @@
|
||||
import { Controller, useFormContext } from 'react-hook-form';
|
||||
import { FieldError } from './FieldError';
|
||||
|
||||
type Props = {
|
||||
name: string;
|
||||
label: string;
|
||||
hint?: string;
|
||||
};
|
||||
|
||||
export function ToggleField({ name, label, hint }: Props) {
|
||||
const { control } = useFormContext();
|
||||
return (
|
||||
<Controller
|
||||
name={name}
|
||||
control={control}
|
||||
render={({ field }) => {
|
||||
const on = !!field.value;
|
||||
return (
|
||||
<div>
|
||||
<button
|
||||
type="button"
|
||||
role="switch"
|
||||
aria-checked={on}
|
||||
onClick={() => field.onChange(!on)}
|
||||
className={`flex items-center gap-3 px-3 py-2 rounded border bg-[color:var(--color-surface-2)] transition-colors ${
|
||||
on
|
||||
? 'border-[color:var(--color-acid)] text-[color:var(--color-acid)]'
|
||||
: 'border-[color:var(--color-border)] text-[color:var(--color-text-muted)]'
|
||||
}`}
|
||||
>
|
||||
<span
|
||||
className={`led ${on ? 'led-acid animate-led-green' : ''}`}
|
||||
style={!on ? { background: 'var(--color-text-dim)', boxShadow: 'none' } : undefined}
|
||||
/>
|
||||
<span className="font-mono text-xs uppercase tracking-widest">
|
||||
{label}
|
||||
</span>
|
||||
<span className="ml-auto font-mono text-[10px] opacity-70">
|
||||
{on ? 'ON' : 'OFF'}
|
||||
</span>
|
||||
</button>
|
||||
{hint && (
|
||||
<span className="block font-mono text-[10px] text-[color:var(--color-text-dim)] mt-1">
|
||||
{hint}
|
||||
</span>
|
||||
)}
|
||||
<FieldError name={name} />
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
78
src/components/admin/forms/ExperiencesForm.tsx
Normal file
78
src/components/admin/forms/ExperiencesForm.tsx
Normal file
@@ -0,0 +1,78 @@
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { ExperiencesSchema, type Experiences } from '../../../content/schemas/experiences';
|
||||
import { FormShell } from '../FormShell';
|
||||
import { Section } from '../Section';
|
||||
import { TextField } from '../fields/TextField';
|
||||
import { TextAreaField } from '../fields/TextAreaField';
|
||||
import { SelectField } from '../fields/SelectField';
|
||||
import { ToggleField } from '../fields/ToggleField';
|
||||
import { ChipsField } from '../fields/ChipsField';
|
||||
import { ImageUploadField } from '../fields/ImageUploadField';
|
||||
import { ArrayEditor } from '../fields/ArrayEditor';
|
||||
|
||||
type Props = { defaultValues: Experiences };
|
||||
|
||||
const TYPE_OPTIONS = [
|
||||
{ value: 'cdi', label: 'CDI' },
|
||||
{ value: 'cdd', label: 'CDD' },
|
||||
{ value: 'stage', label: 'Stage' },
|
||||
{ value: 'alternance', label: 'Alternance' },
|
||||
{ value: 'freelance', label: 'Freelance' },
|
||||
];
|
||||
|
||||
export function ExperiencesForm({ defaultValues }: Props) {
|
||||
return (
|
||||
<FormShell<Experiences>
|
||||
section="experiences"
|
||||
defaultValues={defaultValues as never}
|
||||
resolver={zodResolver(ExperiencesSchema) as never}
|
||||
>
|
||||
<Section title="Expériences" subtitle="// setlist">
|
||||
<ArrayEditor
|
||||
name="items"
|
||||
label="Postes"
|
||||
newItem={() =>
|
||||
({
|
||||
id: '',
|
||||
company: '',
|
||||
role: '',
|
||||
period: '',
|
||||
duration: '',
|
||||
description: '',
|
||||
missions: [],
|
||||
stack: [],
|
||||
type: 'cdi' as const,
|
||||
current: false,
|
||||
}) as never
|
||||
}
|
||||
itemLabel={(i) => `track #${String(i + 1).padStart(2, '0')}`}
|
||||
>
|
||||
{({ namePrefix }) => (
|
||||
<>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
|
||||
<TextField name={`${namePrefix}.id`} label="ID" hint="Slug unique" />
|
||||
<TextField name={`${namePrefix}.company`} label="Entreprise" />
|
||||
<TextField name={`${namePrefix}.role`} label="Rôle" />
|
||||
</div>
|
||||
<ImageUploadField name={`${namePrefix}.logo`} label="Logo" folder="company" />
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 items-end">
|
||||
<TextField name={`${namePrefix}.period`} label="Période" placeholder="Janv 2020 — Now" />
|
||||
<TextField name={`${namePrefix}.duration`} label="Durée" placeholder="4 ans" />
|
||||
<SelectField name={`${namePrefix}.type`} label="Type" options={TYPE_OPTIONS} />
|
||||
</div>
|
||||
<TextAreaField name={`${namePrefix}.description`} label="Description" rows={3} />
|
||||
<ChipsField name={`${namePrefix}.missions`} label="Missions" hint="Une par chip" />
|
||||
<ChipsField name={`${namePrefix}.stack`} label="Stack" hint="Technos utilisées" />
|
||||
<ToggleField name={`${namePrefix}.current`} label="Poste en cours (NOW PLAYING)" />
|
||||
</>
|
||||
)}
|
||||
</ArrayEditor>
|
||||
</Section>
|
||||
|
||||
<Section title="Compétences globales" subtitle="// patch bay">
|
||||
<ChipsField name="skills.technical" label="Techniques" />
|
||||
<ChipsField name="skills.soft" label="Transverses / soft" />
|
||||
</Section>
|
||||
</FormShell>
|
||||
);
|
||||
}
|
||||
55
src/components/admin/forms/FormationsForm.tsx
Normal file
55
src/components/admin/forms/FormationsForm.tsx
Normal file
@@ -0,0 +1,55 @@
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { FormationsSchema, type Formations } from '../../../content/schemas/formations';
|
||||
import { FormShell } from '../FormShell';
|
||||
import { Section } from '../Section';
|
||||
import { TextField } from '../fields/TextField';
|
||||
import { TextAreaField } from '../fields/TextAreaField';
|
||||
import { ArrayEditor } from '../fields/ArrayEditor';
|
||||
|
||||
type Props = { defaultValues: Formations };
|
||||
|
||||
export function FormationsForm({ defaultValues }: Props) {
|
||||
return (
|
||||
<FormShell<Formations>
|
||||
section="formations"
|
||||
defaultValues={defaultValues as never}
|
||||
resolver={zodResolver(FormationsSchema) as never}
|
||||
>
|
||||
<Section title="Formations" subtitle="// edu system">
|
||||
<ArrayEditor
|
||||
name="items"
|
||||
label="Cursus"
|
||||
newItem={() =>
|
||||
({
|
||||
id: '',
|
||||
title: '',
|
||||
school: '',
|
||||
period: '',
|
||||
}) as never
|
||||
}
|
||||
itemLabel={(i) => `ticket #${String(i + 1).padStart(3, '0')}`}
|
||||
>
|
||||
{({ namePrefix }) => (
|
||||
<>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<TextField name={`${namePrefix}.id`} label="ID" hint="Slug unique" />
|
||||
<TextField name={`${namePrefix}.period`} label="Période" placeholder="2018 — 2020" />
|
||||
</div>
|
||||
<TextField name={`${namePrefix}.title`} label="Titre / diplôme" />
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<TextField name={`${namePrefix}.school`} label="École" />
|
||||
<TextField
|
||||
name={`${namePrefix}.schoolUrl`}
|
||||
label="Site école"
|
||||
type="url"
|
||||
placeholder="https://…"
|
||||
/>
|
||||
</div>
|
||||
<TextAreaField name={`${namePrefix}.description`} label="Description" rows={3} />
|
||||
</>
|
||||
)}
|
||||
</ArrayEditor>
|
||||
</Section>
|
||||
</FormShell>
|
||||
);
|
||||
}
|
||||
51
src/components/admin/forms/InterestsForm.tsx
Normal file
51
src/components/admin/forms/InterestsForm.tsx
Normal file
@@ -0,0 +1,51 @@
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { InterestsSchema, type Interests } from '../../../content/schemas/interests';
|
||||
import { FormShell } from '../FormShell';
|
||||
import { Section } from '../Section';
|
||||
import { TextField } from '../fields/TextField';
|
||||
import { SelectField } from '../fields/SelectField';
|
||||
import { EmojiField } from '../fields/EmojiField';
|
||||
import { ArrayEditor } from '../fields/ArrayEditor';
|
||||
|
||||
type Props = { defaultValues: Interests };
|
||||
|
||||
const COLOR_OPTIONS = [
|
||||
{ value: 'cyan', label: '◉ cyan' },
|
||||
{ value: 'magenta', label: '◉ magenta' },
|
||||
{ value: 'violet', label: '◉ violet' },
|
||||
{ value: 'ice', label: '◉ ice' },
|
||||
];
|
||||
|
||||
export function InterestsForm({ defaultValues }: Props) {
|
||||
return (
|
||||
<FormShell<Interests>
|
||||
section="interests"
|
||||
defaultValues={defaultValues as never}
|
||||
resolver={zodResolver(InterestsSchema) as never}
|
||||
>
|
||||
<Section title="Centres d'intérêt" subtitle="// off decks">
|
||||
<ArrayEditor
|
||||
name="items"
|
||||
label="Items"
|
||||
newItem={() =>
|
||||
({ id: '', label: '', icon: '🎧', color: 'cyan' as const }) as never
|
||||
}
|
||||
itemLabel={(i) => `pad #${String(i + 1).padStart(2, '0')}`}
|
||||
>
|
||||
{({ namePrefix }) => (
|
||||
<>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<TextField name={`${namePrefix}.id`} label="ID" hint="Slug unique" />
|
||||
<TextField name={`${namePrefix}.label`} label="Label" />
|
||||
</div>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<EmojiField name={`${namePrefix}.icon`} label="Icône" />
|
||||
<SelectField name={`${namePrefix}.color`} label="Couleur" options={COLOR_OPTIONS} />
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</ArrayEditor>
|
||||
</Section>
|
||||
</FormShell>
|
||||
);
|
||||
}
|
||||
107
src/components/admin/forms/ProfileForm.tsx
Normal file
107
src/components/admin/forms/ProfileForm.tsx
Normal file
@@ -0,0 +1,107 @@
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { ProfileSchema, type Profile } from '../../../content/schemas/profile';
|
||||
import { FormShell } from '../FormShell';
|
||||
import { Section } from '../Section';
|
||||
import { TextField } from '../fields/TextField';
|
||||
import { TextAreaField } from '../fields/TextAreaField';
|
||||
import { SelectField } from '../fields/SelectField';
|
||||
import { ToggleField } from '../fields/ToggleField';
|
||||
import { ChipsField } from '../fields/ChipsField';
|
||||
import { ImageUploadField } from '../fields/ImageUploadField';
|
||||
import { FileUploadField } from '../fields/FileUploadField';
|
||||
import { ArrayEditor } from '../fields/ArrayEditor';
|
||||
|
||||
type Props = { defaultValues: Profile };
|
||||
|
||||
export function ProfileForm({ defaultValues }: Props) {
|
||||
return (
|
||||
<FormShell<Profile>
|
||||
section="profile"
|
||||
defaultValues={defaultValues as never}
|
||||
resolver={zodResolver(ProfileSchema) as never}
|
||||
>
|
||||
<Section title="Identité" subtitle="// owner">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<TextField name="name" label="Nom" />
|
||||
<TextField name="title" label="Titre" />
|
||||
</div>
|
||||
<TextField name="tagline" label="Tagline" hint="Phrase courte affichée sous le nom" />
|
||||
<TextAreaField name="bio" label="Bio" rows={5} />
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 items-end">
|
||||
<ToggleField name="available" label="Disponible" hint="Affiche le badge ON AIR" />
|
||||
<TextField name="availableLabel" label="Texte du badge" hint="ex : Disponible — Nantes" />
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
<Section title="Hero" subtitle="// stage">
|
||||
<ImageUploadField name="hero.photo" label="Photo principale" folder="pp" />
|
||||
<ChipsField
|
||||
name="hero.roles"
|
||||
label="Rôles affichés"
|
||||
hint="Mots-clés morphés dans le hero (ex : dev, DJ, dev)"
|
||||
/>
|
||||
<ArrayEditor
|
||||
name="hero.photos"
|
||||
label="Galerie hero"
|
||||
hint="Photos additionnelles (slideshow / mosaïque)"
|
||||
newItem={() => ''}
|
||||
itemLabel={(i) => `photo #${String(i + 1).padStart(2, '0')}`}
|
||||
>
|
||||
{({ namePrefix }) => (
|
||||
<ImageUploadField name={namePrefix} label="URL" folder="pp" />
|
||||
)}
|
||||
</ArrayEditor>
|
||||
<ArrayEditor
|
||||
name="hero.cta"
|
||||
label="Boutons CTA"
|
||||
hint="Actions principales sous le hero"
|
||||
newItem={() => ({ label: '', href: '', variant: 'primary' as const, external: false })}
|
||||
itemLabel={(i) => `cta #${String(i + 1).padStart(2, '0')}`}
|
||||
>
|
||||
{({ namePrefix }) => (
|
||||
<>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<TextField name={`${namePrefix}.label`} label="Label" />
|
||||
<TextField name={`${namePrefix}.href`} label="Lien" placeholder="/projets ou https://…" />
|
||||
</div>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 items-end">
|
||||
<SelectField
|
||||
name={`${namePrefix}.variant`}
|
||||
label="Style"
|
||||
options={[
|
||||
{ value: 'primary', label: 'Primary (acid)' },
|
||||
{ value: 'ghost', label: 'Ghost (cyan)' },
|
||||
]}
|
||||
/>
|
||||
<ToggleField
|
||||
name={`${namePrefix}.external`}
|
||||
label="Externe (target=_blank)"
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</ArrayEditor>
|
||||
</Section>
|
||||
|
||||
<Section title="Réseaux" subtitle="// patch bay">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<TextField name="socials.email" label="Email" type="email" placeholder="hello@example.com" />
|
||||
<TextField name="socials.github" label="GitHub" type="url" placeholder="https://github.com/…" />
|
||||
<TextField name="socials.gitea" label="Gitea" type="url" />
|
||||
<TextField name="socials.linkedin" label="LinkedIn" type="url" />
|
||||
<TextField name="socials.website" label="Site personnel" type="url" />
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
<Section title="CV" subtitle="// dossier">
|
||||
<FileUploadField
|
||||
name="cv"
|
||||
label="Fichier PDF du CV"
|
||||
folder="cv"
|
||||
kind="document"
|
||||
hint="Glisser-déposer un PDF (max 8 Mo)"
|
||||
/>
|
||||
</Section>
|
||||
</FormShell>
|
||||
);
|
||||
}
|
||||
79
src/components/admin/forms/ProjectsForm.tsx
Normal file
79
src/components/admin/forms/ProjectsForm.tsx
Normal file
@@ -0,0 +1,79 @@
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { ProjectsSchema, type Projects } from '../../../content/schemas/projects';
|
||||
import { FormShell } from '../FormShell';
|
||||
import { Section } from '../Section';
|
||||
import { TextField } from '../fields/TextField';
|
||||
import { TextAreaField } from '../fields/TextAreaField';
|
||||
import { SelectField } from '../fields/SelectField';
|
||||
import { ToggleField } from '../fields/ToggleField';
|
||||
import { ChipsField } from '../fields/ChipsField';
|
||||
import { ImageUploadField } from '../fields/ImageUploadField';
|
||||
import { ArrayEditor } from '../fields/ArrayEditor';
|
||||
|
||||
type Props = { defaultValues: Projects };
|
||||
|
||||
const CATEGORY_OPTIONS = [
|
||||
{ value: 'web', label: 'Web' },
|
||||
{ value: 'mobile', label: 'Mobile' },
|
||||
{ value: 'bot', label: 'Bot' },
|
||||
{ value: 'infra', label: 'Infra' },
|
||||
{ value: 'other', label: 'Autre' },
|
||||
];
|
||||
|
||||
const STATUS_OPTIONS = [
|
||||
{ value: 'live', label: 'Live' },
|
||||
{ value: 'archived', label: 'Archived' },
|
||||
{ value: 'private', label: 'Private' },
|
||||
{ value: 'wip', label: 'WIP' },
|
||||
];
|
||||
|
||||
export function ProjectsForm({ defaultValues }: Props) {
|
||||
return (
|
||||
<FormShell<Projects>
|
||||
section="projects"
|
||||
defaultValues={defaultValues as never}
|
||||
resolver={zodResolver(ProjectsSchema) as never}
|
||||
>
|
||||
<Section title="Projets" subtitle="// crate">
|
||||
<ArrayEditor
|
||||
name="items"
|
||||
label="Projets"
|
||||
newItem={() =>
|
||||
({
|
||||
id: '',
|
||||
title: '',
|
||||
description: '',
|
||||
category: 'web' as const,
|
||||
status: 'live' as const,
|
||||
stack: [],
|
||||
featured: false,
|
||||
}) as never
|
||||
}
|
||||
itemLabel={(i) => `skeud #${String(i + 1).padStart(2, '0')}`}
|
||||
>
|
||||
{({ namePrefix }) => (
|
||||
<>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<TextField name={`${namePrefix}.id`} label="ID" hint="Slug unique" />
|
||||
<TextField name={`${namePrefix}.title`} label="Titre" />
|
||||
</div>
|
||||
<TextField name={`${namePrefix}.subtitle`} label="Sous-titre" />
|
||||
<TextAreaField name={`${namePrefix}.description`} label="Description" rows={3} />
|
||||
<ImageUploadField name={`${namePrefix}.image`} label="Pochette" folder="projet" />
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
|
||||
<SelectField name={`${namePrefix}.category`} label="Catégorie" options={CATEGORY_OPTIONS} />
|
||||
<SelectField name={`${namePrefix}.status`} label="Statut" options={STATUS_OPTIONS} />
|
||||
<ToggleField name={`${namePrefix}.featured`} label="Mis en avant" />
|
||||
</div>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<TextField name={`${namePrefix}.url`} label="URL live" type="url" />
|
||||
<TextField name={`${namePrefix}.repoUrl`} label="URL repo" type="url" />
|
||||
</div>
|
||||
<ChipsField name={`${namePrefix}.stack`} label="Stack" />
|
||||
</>
|
||||
)}
|
||||
</ArrayEditor>
|
||||
</Section>
|
||||
</FormShell>
|
||||
);
|
||||
}
|
||||
39
src/components/admin/forms/SiteForm.tsx
Normal file
39
src/components/admin/forms/SiteForm.tsx
Normal file
@@ -0,0 +1,39 @@
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { SiteSchema, type Site } from '../../../content/schemas/site';
|
||||
import { FormShell } from '../FormShell';
|
||||
import { Section } from '../Section';
|
||||
import { TextField } from '../fields/TextField';
|
||||
import { TextAreaField } from '../fields/TextAreaField';
|
||||
import { ToggleField } from '../fields/ToggleField';
|
||||
import { ChipsField } from '../fields/ChipsField';
|
||||
import { ImageUploadField } from '../fields/ImageUploadField';
|
||||
|
||||
type Props = { defaultValues: Site };
|
||||
|
||||
export function SiteForm({ defaultValues }: Props) {
|
||||
return (
|
||||
<FormShell<Site>
|
||||
section="site"
|
||||
defaultValues={defaultValues as never}
|
||||
resolver={zodResolver(SiteSchema) as never}
|
||||
>
|
||||
<Section title="Méta" subtitle="// SEO">
|
||||
<TextField name="title" label="Titre du site" />
|
||||
<TextAreaField name="description" label="Description" rows={3} />
|
||||
<TextField name="url" label="URL canonique" type="url" />
|
||||
<ChipsField name="keywords" label="Keywords" hint="Mots-clés SEO" />
|
||||
<ImageUploadField name="ogImage" label="OG image" folder="" hint="Affichée lors d'un partage social" />
|
||||
<TextField name="twitter" label="Handle Twitter / X" placeholder="@johanleroy" />
|
||||
</Section>
|
||||
|
||||
<Section title="Features" subtitle="// flags">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
||||
<ToggleField name="features.hero3D" label="Hero 3D" />
|
||||
<ToggleField name="features.smoothScroll" label="Smooth scroll (Lenis)" />
|
||||
<ToggleField name="features.customCursor" label="Curseur custom" />
|
||||
<ToggleField name="features.partyMode" label="Party mode (Konami)" />
|
||||
</div>
|
||||
</Section>
|
||||
</FormShell>
|
||||
);
|
||||
}
|
||||
74
src/components/admin/forms/SkillsForm.tsx
Normal file
74
src/components/admin/forms/SkillsForm.tsx
Normal file
@@ -0,0 +1,74 @@
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { SkillsSchema, type Skills } from '../../../content/schemas/skills';
|
||||
import { FormShell } from '../FormShell';
|
||||
import { Section } from '../Section';
|
||||
import { TextField } from '../fields/TextField';
|
||||
import { SelectField } from '../fields/SelectField';
|
||||
import { EmojiField } from '../fields/EmojiField';
|
||||
import { ArrayEditor } from '../fields/ArrayEditor';
|
||||
|
||||
type Props = { defaultValues: Skills };
|
||||
|
||||
const LEVEL_OPTIONS = [
|
||||
{ value: 'primary', label: 'Primary' },
|
||||
{ value: 'secondary', label: 'Secondary' },
|
||||
];
|
||||
|
||||
function CategoryArray({ root, label, subtitle }: { root: 'primary' | 'secondary'; label: string; subtitle?: string }) {
|
||||
return (
|
||||
<Section title={label} subtitle={subtitle}>
|
||||
<ArrayEditor
|
||||
name={root}
|
||||
label="Catégories"
|
||||
newItem={() => ({ id: '', label: '', items: [] as { name: string; icon: string; level: 'primary' | 'secondary' }[] })}
|
||||
itemLabel={(i) => `catégorie #${String(i + 1).padStart(2, '0')}`}
|
||||
>
|
||||
{({ namePrefix }) => (
|
||||
<>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<TextField name={`${namePrefix}.id`} label="ID" hint="Slug interne, ex : front, devops" />
|
||||
<TextField name={`${namePrefix}.label`} label="Label affiché" />
|
||||
</div>
|
||||
<ArrayEditor
|
||||
name={`${namePrefix}.items`}
|
||||
label="Skills"
|
||||
newItem={() => ({ name: '', icon: '⚡', level: 'primary' as const })}
|
||||
itemLabel={(i) => `skill #${String(i + 1).padStart(2, '0')}`}
|
||||
>
|
||||
{({ namePrefix: skillName }) => (
|
||||
<>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<TextField name={`${skillName}.name`} label="Nom" />
|
||||
<SelectField
|
||||
name={`${skillName}.level`}
|
||||
label="Niveau"
|
||||
options={LEVEL_OPTIONS}
|
||||
/>
|
||||
</div>
|
||||
<EmojiField
|
||||
name={`${skillName}.icon`}
|
||||
label="Icône"
|
||||
hint="Emoji ou caractère court (slug iconify supporté)"
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</ArrayEditor>
|
||||
</>
|
||||
)}
|
||||
</ArrayEditor>
|
||||
</Section>
|
||||
);
|
||||
}
|
||||
|
||||
export function SkillsForm({ defaultValues }: Props) {
|
||||
return (
|
||||
<FormShell<Skills>
|
||||
section="skills"
|
||||
defaultValues={defaultValues as never}
|
||||
resolver={zodResolver(SkillsSchema) as never}
|
||||
>
|
||||
<CategoryArray root="primary" label="Stack primaire" subtitle="// rack 1" />
|
||||
<CategoryArray root="secondary" label="Stack secondaire" subtitle="// rack 2" />
|
||||
</FormShell>
|
||||
);
|
||||
}
|
||||
@@ -86,7 +86,7 @@ export default function PatchBay({ technical, soft }: Props) {
|
||||
return (
|
||||
<div
|
||||
ref={containerRef}
|
||||
className="relative grid grid-cols-1 md:grid-cols-[1fr_auto_1fr] gap-10 md:gap-20 bg-[color:var(--color-surface)] border border-[color:var(--color-border)] rounded-sm p-6 md:p-10"
|
||||
className="relative grid grid-cols-1 sm:grid-cols-2 md:grid-cols-[1fr_auto_1fr] gap-6 sm:gap-10 md:gap-20 bg-[color:var(--color-surface)] border border-[color:var(--color-border)] rounded-sm p-5 sm:p-6 md:p-10"
|
||||
>
|
||||
{/* Left panel : technical */}
|
||||
<div>
|
||||
|
||||
@@ -105,7 +105,7 @@ export default function RackModule({
|
||||
</div>
|
||||
|
||||
{/* Pads grid */}
|
||||
<div className="grid grid-cols-4 gap-2 flex-1 content-start">
|
||||
<div className="grid grid-cols-3 sm:grid-cols-4 gap-2 flex-1 content-start">
|
||||
{items.map((item) => (
|
||||
<button
|
||||
key={item.name}
|
||||
|
||||
@@ -118,7 +118,7 @@ export default function Setlist({ items }: Props) {
|
||||
transition={{ duration: 0.35, ease: [0.22, 1, 0.36, 1] }}
|
||||
className="overflow-hidden"
|
||||
>
|
||||
<div className="px-3 md:px-5 pb-6 pt-2 grid grid-cols-1 md:grid-cols-[200px_1fr] gap-6">
|
||||
<div className="px-3 md:px-5 pb-6 pt-2 grid grid-cols-1 sm:grid-cols-[180px_1fr] md:grid-cols-[200px_1fr] gap-4 sm:gap-6">
|
||||
<div className="flex items-start gap-3">
|
||||
{exp.logo && (
|
||||
<div className="w-16 h-16 shrink-0 flex items-center justify-center bg-[color:var(--color-bg)] border border-[color:var(--color-border)] rounded-sm p-2">
|
||||
|
||||
@@ -52,14 +52,14 @@ export default function SkeudCard({ project, index, bpm }: Props) {
|
||||
return (
|
||||
<Wrap
|
||||
{...wrapProps}
|
||||
className="group relative block w-[280px] sm:w-[340px] flex-shrink-0"
|
||||
className="group relative block w-[260px] sm:w-[300px] md:w-[340px] flex-shrink-0"
|
||||
onMouseEnter={() => setHover(true)}
|
||||
onMouseLeave={() => setHover(false)}
|
||||
style={{ perspective: 1200 } as CSSProperties}
|
||||
>
|
||||
{/* Order number en filigrane derrière */}
|
||||
<span
|
||||
className="absolute -top-10 -left-2 stencil text-7xl leading-none text-[color:var(--color-border)] select-none pointer-events-none"
|
||||
className="absolute -top-8 sm:-top-10 -left-2 stencil text-5xl sm:text-7xl leading-none text-[color:var(--color-border)] select-none pointer-events-none"
|
||||
aria-hidden="true"
|
||||
>
|
||||
{orderLabel}
|
||||
|
||||
@@ -16,7 +16,13 @@ export default function SmoothScroll() {
|
||||
}
|
||||
rafId = requestAnimationFrame(raf);
|
||||
|
||||
const resetScroll = () => {
|
||||
lenis.scrollTo(0, { immediate: true, force: true });
|
||||
};
|
||||
document.addEventListener('astro:after-swap', resetScroll);
|
||||
|
||||
return () => {
|
||||
document.removeEventListener('astro:after-swap', resetScroll);
|
||||
cancelAnimationFrame(rafId);
|
||||
lenis.destroy();
|
||||
};
|
||||
|
||||
@@ -1,14 +1,28 @@
|
||||
import { readFile, writeFile } from 'node:fs/promises';
|
||||
import { readFile, writeFile, mkdir, copyFile, access } from 'node:fs/promises';
|
||||
import { join } from 'node:path';
|
||||
import { CONTENT_SCHEMAS, type ContentKey } from '../content/schemas';
|
||||
import type { z } from 'zod';
|
||||
|
||||
const CONTENT_DIR = join(process.cwd(), 'public', 'content');
|
||||
const DATA_CONTENT_DIR = join(process.cwd(), 'data', 'content');
|
||||
const SEED_CONTENT_DIR = join(process.cwd(), 'public', 'content');
|
||||
|
||||
type ContentData<K extends ContentKey> = z.infer<(typeof CONTENT_SCHEMAS)[K]>;
|
||||
|
||||
async function ensureContentFile(key: ContentKey): Promise<string> {
|
||||
const target = join(DATA_CONTENT_DIR, `${key}.json`);
|
||||
try {
|
||||
await access(target);
|
||||
return target;
|
||||
} catch {
|
||||
await mkdir(DATA_CONTENT_DIR, { recursive: true });
|
||||
const seed = join(SEED_CONTENT_DIR, `${key}.json`);
|
||||
await copyFile(seed, target);
|
||||
return target;
|
||||
}
|
||||
}
|
||||
|
||||
export async function loadContent<K extends ContentKey>(key: K): Promise<ContentData<K>> {
|
||||
const filePath = join(CONTENT_DIR, `${key}.json`);
|
||||
const filePath = await ensureContentFile(key);
|
||||
const raw = await readFile(filePath, 'utf-8');
|
||||
const parsed = JSON.parse(raw);
|
||||
const schema = CONTENT_SCHEMAS[key];
|
||||
@@ -21,7 +35,7 @@ export async function saveContent<K extends ContentKey>(
|
||||
): Promise<ContentData<K>> {
|
||||
const schema = CONTENT_SCHEMAS[key];
|
||||
const validated = schema.parse(data) as ContentData<K>;
|
||||
const filePath = join(CONTENT_DIR, `${key}.json`);
|
||||
const filePath = await ensureContentFile(key);
|
||||
await writeFile(filePath, JSON.stringify(validated, null, 2) + '\n', 'utf-8');
|
||||
return validated;
|
||||
}
|
||||
|
||||
@@ -3,6 +3,7 @@ export const prerender = false;
|
||||
import '../../../styles/global.css';
|
||||
import { loadContent } from '../../../lib/content';
|
||||
import { CONTENT_SCHEMAS, type ContentKey } from '../../../content/schemas';
|
||||
import { EditPanel } from '../../../components/admin/EditPanel';
|
||||
|
||||
const { section } = Astro.params;
|
||||
|
||||
@@ -12,7 +13,6 @@ if (!section || !(section in CONTENT_SCHEMAS)) {
|
||||
|
||||
const key = section as ContentKey;
|
||||
const data = await loadContent(key);
|
||||
const jsonString = JSON.stringify(data, null, 2);
|
||||
---
|
||||
|
||||
<!doctype html>
|
||||
@@ -22,7 +22,7 @@ const jsonString = JSON.stringify(data, null, 2);
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Admin — Édition {section}</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@500;700&family=JetBrains+Mono:wght@400;500&display=swap"
|
||||
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@500;700&family=JetBrains+Mono:wght@400;500&family=Bebas+Neue&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
</head>
|
||||
@@ -38,77 +38,19 @@ const jsonString = JSON.stringify(data, null, 2);
|
||||
{section}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-3">
|
||||
<span id="save-status" class="text-xs font-mono text-[color:var(--color-text-dim)]"></span>
|
||||
<button id="format-btn" class="btn-ghost text-xs py-1.5">Formater</button>
|
||||
<button id="save-btn" class="btn-primary text-xs py-1.5">Enregistrer</button>
|
||||
</div>
|
||||
<a
|
||||
href={`/api/content/${section}`}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
class="font-mono text-xs text-[color:var(--color-text-dim)] hover:text-[color:var(--color-cyan)]"
|
||||
>
|
||||
↗ JSON courant
|
||||
</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="container mx-auto px-4 py-6">
|
||||
<p class="text-xs font-mono text-[color:var(--color-text-dim)] mb-2">
|
||||
Édition libre en JSON. Le contenu est validé contre le schéma Zod avant sauvegarde.
|
||||
</p>
|
||||
<textarea
|
||||
id="editor"
|
||||
class="w-full h-[calc(100vh-200px)] bg-[color:var(--color-surface)] border border-[color:var(--color-border)] focus:border-[color:var(--color-cyan)] focus:outline-none p-4 rounded text-sm font-mono text-[color:var(--color-text)] resize-none"
|
||||
spellcheck="false"
|
||||
>{jsonString}</textarea>
|
||||
<main class="container mx-auto px-4 py-6 pb-24">
|
||||
<EditPanel section={key} data={data} client:load />
|
||||
</main>
|
||||
|
||||
<script define:vars={{ section }}>
|
||||
const editor = document.getElementById('editor');
|
||||
const saveBtn = document.getElementById('save-btn');
|
||||
const formatBtn = document.getElementById('format-btn');
|
||||
const status = document.getElementById('save-status');
|
||||
|
||||
formatBtn.addEventListener('click', () => {
|
||||
try {
|
||||
const parsed = JSON.parse(editor.value);
|
||||
editor.value = JSON.stringify(parsed, null, 2);
|
||||
status.textContent = 'formaté';
|
||||
status.style.color = 'var(--color-cyan)';
|
||||
} catch (e) {
|
||||
status.textContent = 'JSON invalide';
|
||||
status.style.color = 'var(--color-magenta)';
|
||||
}
|
||||
});
|
||||
|
||||
saveBtn.addEventListener('click', async () => {
|
||||
status.textContent = 'enregistrement…';
|
||||
status.style.color = 'var(--color-text-muted)';
|
||||
let body;
|
||||
try {
|
||||
body = JSON.parse(editor.value);
|
||||
} catch (e) {
|
||||
status.textContent = 'JSON invalide';
|
||||
status.style.color = 'var(--color-magenta)';
|
||||
return;
|
||||
}
|
||||
const res = await fetch(`/api/content/${section}`, {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(body),
|
||||
});
|
||||
const result = await res.json();
|
||||
if (res.ok) {
|
||||
status.textContent = '✓ enregistré';
|
||||
status.style.color = 'var(--color-cyan)';
|
||||
setTimeout(() => { status.textContent = ''; }, 3000);
|
||||
} else {
|
||||
status.textContent = `✗ ${result.message || result.error}`;
|
||||
status.style.color = 'var(--color-magenta)';
|
||||
}
|
||||
});
|
||||
|
||||
editor.addEventListener('keydown', (e) => {
|
||||
if ((e.metaKey || e.ctrlKey) && e.key === 's') {
|
||||
e.preventDefault();
|
||||
saveBtn.click();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -64,7 +64,7 @@ const sectionLabels: Record<string, { label: string; icon: string; description:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{
|
||||
sections.map((s) => {
|
||||
const meta = sectionLabels[s] ?? { label: s, icon: '📄', description: '' };
|
||||
|
||||
50
src/pages/api/files/[...path].ts
Normal file
50
src/pages/api/files/[...path].ts
Normal file
@@ -0,0 +1,50 @@
|
||||
export const prerender = false;
|
||||
|
||||
import type { APIRoute } from 'astro';
|
||||
import { readFile, stat } from 'node:fs/promises';
|
||||
import { join, resolve, extname } from 'node:path';
|
||||
|
||||
const UPLOADS_ROOT = resolve(process.cwd(), 'data', 'uploads');
|
||||
|
||||
const MIME: Record<string, string> = {
|
||||
'.png': 'image/png',
|
||||
'.jpg': 'image/jpeg',
|
||||
'.jpeg': 'image/jpeg',
|
||||
'.webp': 'image/webp',
|
||||
'.svg': 'image/svg+xml',
|
||||
'.gif': 'image/gif',
|
||||
'.pdf': 'application/pdf',
|
||||
};
|
||||
|
||||
export const GET: APIRoute = async ({ params }) => {
|
||||
const rawPath = (params.path as string | undefined) ?? '';
|
||||
if (!rawPath) {
|
||||
return new Response('not found', { status: 404 });
|
||||
}
|
||||
|
||||
const target = resolve(join(UPLOADS_ROOT, rawPath));
|
||||
if (!target.startsWith(UPLOADS_ROOT + '/') && target !== UPLOADS_ROOT) {
|
||||
return new Response('forbidden', { status: 403 });
|
||||
}
|
||||
|
||||
try {
|
||||
const stats = await stat(target);
|
||||
if (!stats.isFile()) {
|
||||
return new Response('not found', { status: 404 });
|
||||
}
|
||||
} catch {
|
||||
return new Response('not found', { status: 404 });
|
||||
}
|
||||
|
||||
const ext = extname(target).toLowerCase();
|
||||
const type = MIME[ext] ?? 'application/octet-stream';
|
||||
const buffer = await readFile(target);
|
||||
|
||||
return new Response(buffer, {
|
||||
headers: {
|
||||
'Content-Type': type,
|
||||
'Content-Length': String(buffer.length),
|
||||
'Cache-Control': 'public, max-age=300, must-revalidate',
|
||||
},
|
||||
});
|
||||
};
|
||||
@@ -4,8 +4,15 @@ import type { APIRoute } from 'astro';
|
||||
import { writeFile, mkdir } from 'node:fs/promises';
|
||||
import { join, extname, basename } from 'node:path';
|
||||
|
||||
const UPLOAD_DIR = join(process.cwd(), 'public', 'img');
|
||||
const ALLOWED_EXT = new Set(['.png', '.jpg', '.jpeg', '.webp', '.svg', '.gif']);
|
||||
const UPLOAD_ROOT = join(process.cwd(), 'data', 'uploads');
|
||||
|
||||
const IMAGE_EXT = new Set(['.png', '.jpg', '.jpeg', '.webp', '.svg', '.gif']);
|
||||
const DOCUMENT_EXT = new Set(['.pdf']);
|
||||
|
||||
const MAX_SIZE: Record<'image' | 'document', number> = {
|
||||
image: 5 * 1024 * 1024,
|
||||
document: 8 * 1024 * 1024,
|
||||
};
|
||||
|
||||
function sanitize(filename: string): string {
|
||||
const name = basename(filename).replace(/[^a-zA-Z0-9._-]/g, '_');
|
||||
@@ -16,25 +23,33 @@ export const POST: APIRoute = async ({ request }) => {
|
||||
const form = await request.formData();
|
||||
const file = form.get('file');
|
||||
const folder = (form.get('folder') as string | null) ?? '';
|
||||
const kindRaw = (form.get('kind') as string | null) ?? 'image';
|
||||
const kind: 'image' | 'document' = kindRaw === 'document' ? 'document' : 'image';
|
||||
|
||||
if (!(file instanceof File)) {
|
||||
return new Response(JSON.stringify({ error: 'no_file' }), { status: 400 });
|
||||
}
|
||||
|
||||
const ext = extname(file.name).toLowerCase();
|
||||
if (!ALLOWED_EXT.has(ext)) {
|
||||
const allowed = kind === 'document' ? DOCUMENT_EXT : IMAGE_EXT;
|
||||
if (!allowed.has(ext)) {
|
||||
return new Response(JSON.stringify({ error: 'invalid_extension' }), { status: 400 });
|
||||
}
|
||||
|
||||
if (file.size > MAX_SIZE[kind]) {
|
||||
return new Response(JSON.stringify({ error: 'file_too_large' }), { status: 400 });
|
||||
}
|
||||
|
||||
const safeFolder = folder.replace(/[^a-zA-Z0-9_-]/g, '');
|
||||
const targetDir = safeFolder ? join(UPLOAD_DIR, safeFolder) : UPLOAD_DIR;
|
||||
const bucket = kind === 'document' ? 'assets' : 'img';
|
||||
const targetDir = safeFolder ? join(UPLOAD_ROOT, bucket, safeFolder) : join(UPLOAD_ROOT, bucket);
|
||||
await mkdir(targetDir, { recursive: true });
|
||||
|
||||
const filename = sanitize(file.name);
|
||||
const buffer = Buffer.from(await file.arrayBuffer());
|
||||
await writeFile(join(targetDir, filename), buffer);
|
||||
|
||||
const url = `/img/${safeFolder ? safeFolder + '/' : ''}${filename}`;
|
||||
const url = `/api/files/${bucket}/${safeFolder ? safeFolder + '/' : ''}${filename}`;
|
||||
return new Response(JSON.stringify({ ok: true, url }), {
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
});
|
||||
|
||||
@@ -25,7 +25,7 @@ const yearsTotal = currentYear - firstYear;
|
||||
<span class="led led-red animate-led-red"></span>
|
||||
// setlist.current
|
||||
</p>
|
||||
<h1 class="stencil text-5xl md:text-7xl uppercase leading-none">
|
||||
<h1 class="stencil text-4xl sm:text-5xl md:text-7xl uppercase leading-none">
|
||||
Mon <span class="text-[color:var(--color-magenta)] glow-text-magenta">expérience</span>
|
||||
</h1>
|
||||
</div>
|
||||
@@ -51,7 +51,7 @@ const yearsTotal = currentYear - firstYear;
|
||||
<p class="font-mono text-xs uppercase tracking-[0.3em] text-[color:var(--color-cyan)] mb-2">
|
||||
// patch bay
|
||||
</p>
|
||||
<h2 class="stencil text-3xl md:text-4xl uppercase leading-none">
|
||||
<h2 class="stencil text-2xl sm:text-3xl md:text-4xl uppercase leading-none">
|
||||
Compétences <span class="text-[color:var(--color-cyan)] glow-text-cyan">pros</span>
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
@@ -24,7 +24,7 @@ function extractLocation(school: string): string {
|
||||
<span class="led led-cyan"></span>
|
||||
// bpm log · crate digging
|
||||
</p>
|
||||
<h1 class="stencil text-5xl md:text-7xl uppercase leading-none">
|
||||
<h1 class="stencil text-4xl sm:text-5xl md:text-7xl uppercase leading-none">
|
||||
Mes <span class="text-[color:var(--color-cyan)] glow-text-cyan">formations</span>
|
||||
</h1>
|
||||
</div>
|
||||
@@ -53,8 +53,8 @@ function extractLocation(school: string): string {
|
||||
client:visible
|
||||
>
|
||||
<div
|
||||
class="relative group transition-transform duration-500 hover:rotate-0"
|
||||
style={`transform: rotate(${tilt}deg); max-width: 640px; margin-${isEven ? 'right' : 'left'}: auto;`}
|
||||
class="formation-ticket relative group transition-transform duration-500"
|
||||
style={`--tilt: ${tilt}deg; max-width: 640px; margin-${isEven ? 'right' : 'left'}: auto;`}
|
||||
>
|
||||
<article
|
||||
class="relative bg-[#F5EDE0] text-[#14130E] rounded-sm overflow-hidden shadow-[0_20px_50px_-20px_rgba(0,0,0,0.8)]"
|
||||
@@ -71,8 +71,8 @@ function extractLocation(school: string): string {
|
||||
</div>
|
||||
|
||||
<!-- Body -->
|
||||
<div class="p-5 md:p-8 grid grid-cols-1 md:grid-cols-[auto_1fr] gap-6">
|
||||
<div class="font-mono text-[10px] uppercase tracking-widest space-y-2 md:border-r-2 md:border-dashed md:border-[#14130E]/30 md:pr-6">
|
||||
<div class="p-5 md:p-8 grid grid-cols-1 sm:grid-cols-[auto_1fr] gap-5 sm:gap-6">
|
||||
<div class="font-mono text-[10px] uppercase tracking-widest space-y-2 sm:border-r-2 sm:border-dashed sm:border-[#14130E]/30 sm:pr-6">
|
||||
<div>
|
||||
<div class="text-[#14130E]/50">DATE</div>
|
||||
<div class="stencil text-base tracking-wider">{f.period}</div>
|
||||
@@ -141,3 +141,24 @@ function extractLocation(school: string): string {
|
||||
</div>
|
||||
</section>
|
||||
</BaseLayout>
|
||||
|
||||
<style>
|
||||
.formation-ticket {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
@media (min-width: 640px) {
|
||||
.formation-ticket {
|
||||
transform: rotate(var(--tilt, 0deg));
|
||||
}
|
||||
.formation-ticket:hover {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.formation-ticket,
|
||||
.formation-ticket:hover {
|
||||
transform: none;
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -32,7 +32,8 @@ const { profile, skills, interests, site } = await loadAll();
|
||||
</div>
|
||||
|
||||
<div class="container mx-auto px-4 relative z-10">
|
||||
<div class="max-w-3xl">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-[minmax(0,1fr)_auto] gap-10 lg:gap-16 items-center">
|
||||
<div class="max-w-3xl order-2 lg:order-1">
|
||||
<p
|
||||
class="font-mono text-xs uppercase tracking-[0.3em] text-[color:var(--color-cyan)] mb-4 flex items-center gap-2"
|
||||
>
|
||||
@@ -40,7 +41,7 @@ const { profile, skills, interests, site } = await loadAll();
|
||||
> frequency: 174 bpm · hardtek
|
||||
</p>
|
||||
|
||||
<h1 class="stencil text-6xl md:text-8xl lg:text-9xl leading-[0.9] mb-6 uppercase">
|
||||
<h1 class="stencil text-5xl sm:text-6xl md:text-8xl lg:text-9xl leading-[0.9] mb-6 uppercase">
|
||||
<SplitReveal
|
||||
text="Johan"
|
||||
as="span"
|
||||
@@ -58,7 +59,7 @@ const { profile, skills, interests, site } = await loadAll();
|
||||
</h1>
|
||||
|
||||
<div
|
||||
class="font-display text-2xl md:text-4xl mb-8 min-h-[2.5rem] flex items-center gap-2"
|
||||
class="font-display text-xl sm:text-2xl md:text-4xl mb-8 min-h-[2.5rem] flex items-center gap-2"
|
||||
>
|
||||
<span class="text-[color:var(--color-text-dim)]">[</span>
|
||||
<RolesMorph roles={profile.hero.roles} client:load />
|
||||
@@ -71,15 +72,19 @@ const { profile, skills, interests, site } = await loadAll();
|
||||
// code propre, sono sale
|
||||
</p>
|
||||
|
||||
<p class="text-lg text-[color:var(--color-text-muted)] mb-10 max-w-2xl">
|
||||
<p class="text-base sm:text-lg text-[color:var(--color-text-muted)] mb-10 max-w-2xl">
|
||||
{profile.bio}
|
||||
</p>
|
||||
|
||||
<div class="flex flex-wrap gap-4">
|
||||
{
|
||||
profile.hero.cta.map((btn) => (
|
||||
profile.hero.cta.map((btn) => {
|
||||
const href = btn.label.toLowerCase().includes('cv')
|
||||
? (profile.cv ?? btn.href)
|
||||
: btn.href;
|
||||
return (
|
||||
<a
|
||||
href={btn.href}
|
||||
href={href}
|
||||
target={btn.external ? '_blank' : undefined}
|
||||
rel={btn.external ? 'noopener noreferrer' : undefined}
|
||||
class:list={[btn.variant === 'primary' ? 'btn-primary' : 'btn-ghost']}
|
||||
@@ -100,10 +105,39 @@ const { profile, skills, interests, site } = await loadAll();
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
))
|
||||
);
|
||||
})
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{profile.hero.photo && (
|
||||
<div class="order-1 lg:order-2 flex justify-center lg:justify-end">
|
||||
<div class="hero-photo relative w-56 sm:w-64 lg:w-[360px] aspect-square">
|
||||
<span class="hero-photo__bracket hero-photo__bracket--tl"></span>
|
||||
<span class="hero-photo__bracket hero-photo__bracket--tr"></span>
|
||||
<span class="hero-photo__bracket hero-photo__bracket--bl"></span>
|
||||
<span class="hero-photo__bracket hero-photo__bracket--br"></span>
|
||||
<div class="hero-photo__frame">
|
||||
<img
|
||||
src={profile.hero.photo}
|
||||
alt={profile.name}
|
||||
width="360"
|
||||
height="360"
|
||||
loading="eager"
|
||||
decoding="async"
|
||||
class="w-full h-full object-cover"
|
||||
/>
|
||||
<span class="hero-photo__scanlines" aria-hidden="true"></span>
|
||||
<span class="hero-photo__led" aria-hidden="true">
|
||||
<span class="led led-acid animate-pulse"></span>
|
||||
REC · 174 BPM
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Waveform en bas du hero -->
|
||||
@@ -140,7 +174,7 @@ const { profile, skills, interests, site } = await loadAll();
|
||||
</div>
|
||||
</Reveal>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 auto-rows-fr">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 auto-rows-fr">
|
||||
{
|
||||
skills.primary.map((cat, i) => (
|
||||
<Reveal delay={i * 0.06} className="h-full" client:visible>
|
||||
@@ -174,7 +208,7 @@ const { profile, skills, interests, site } = await loadAll();
|
||||
</div>
|
||||
</Reveal>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 auto-rows-fr">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 auto-rows-fr">
|
||||
{
|
||||
skills.secondary.map((cat, i) => (
|
||||
<Reveal delay={i * 0.06} className="h-full" client:visible>
|
||||
@@ -209,7 +243,7 @@ const { profile, skills, interests, site } = await loadAll();
|
||||
</div>
|
||||
</Reveal>
|
||||
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-6 auto-rows-fr">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4 sm:gap-6 auto-rows-fr">
|
||||
{
|
||||
interests.items.map((interest, i) => {
|
||||
const color =
|
||||
@@ -242,3 +276,102 @@ const { profile, skills, interests, site } = await loadAll();
|
||||
</div>
|
||||
</section>
|
||||
</BaseLayout>
|
||||
|
||||
<style>
|
||||
.hero-photo {
|
||||
--bracket: 18px;
|
||||
--bracket-color: var(--color-cyan);
|
||||
transform: rotate(0deg);
|
||||
transition: transform 0.4s ease;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.hero-photo {
|
||||
transform: rotate(-2deg);
|
||||
}
|
||||
.hero-photo:hover {
|
||||
transform: rotate(0deg) scale(1.02);
|
||||
}
|
||||
}
|
||||
|
||||
.hero-photo__frame {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px solid color-mix(in oklab, var(--color-cyan) 70%, transparent);
|
||||
box-shadow:
|
||||
0 0 0 1px color-mix(in oklab, var(--color-cyan) 25%, transparent),
|
||||
0 0 28px color-mix(in oklab, var(--color-cyan) 35%, transparent),
|
||||
inset 0 0 60px color-mix(in oklab, var(--color-magenta) 18%, transparent);
|
||||
overflow: hidden;
|
||||
background: var(--color-surface);
|
||||
}
|
||||
|
||||
.hero-photo__scanlines {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
background-image: repeating-linear-gradient(
|
||||
0deg,
|
||||
rgba(0, 240, 255, 0.06) 0px,
|
||||
rgba(0, 240, 255, 0.06) 1px,
|
||||
transparent 1px,
|
||||
transparent 3px
|
||||
);
|
||||
mix-blend-mode: screen;
|
||||
}
|
||||
|
||||
.hero-photo__led {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 3px 8px;
|
||||
background: rgba(10, 10, 15, 0.7);
|
||||
border: 1px solid color-mix(in oklab, var(--color-acid) 60%, transparent);
|
||||
color: var(--color-acid);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 9px;
|
||||
letter-spacing: 0.2em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.hero-photo__bracket {
|
||||
position: absolute;
|
||||
width: var(--bracket);
|
||||
height: var(--bracket);
|
||||
border-color: var(--bracket-color);
|
||||
border-style: solid;
|
||||
z-index: 2;
|
||||
}
|
||||
.hero-photo__bracket--tl {
|
||||
top: -4px;
|
||||
left: -4px;
|
||||
border-width: 2px 0 0 2px;
|
||||
}
|
||||
.hero-photo__bracket--tr {
|
||||
top: -4px;
|
||||
right: -4px;
|
||||
border-width: 2px 2px 0 0;
|
||||
}
|
||||
.hero-photo__bracket--bl {
|
||||
bottom: -4px;
|
||||
left: -4px;
|
||||
border-width: 0 0 2px 2px;
|
||||
}
|
||||
.hero-photo__bracket--br {
|
||||
bottom: -4px;
|
||||
right: -4px;
|
||||
border-width: 0 2px 2px 0;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.hero-photo,
|
||||
.hero-photo:hover {
|
||||
transform: none;
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -21,7 +21,7 @@ const others = projects.items.filter((p) => !p.featured);
|
||||
<span class="led led-cyan"></span>
|
||||
// crate v1.0 · digging
|
||||
</p>
|
||||
<h1 class="stencil text-5xl md:text-7xl uppercase leading-none">
|
||||
<h1 class="stencil text-4xl sm:text-5xl md:text-7xl uppercase leading-none">
|
||||
Mes <span class="text-[color:var(--color-cyan)] glow-text-cyan">projets</span>
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user