Construis un nouveau site pour mon restaurant, de zéro, sur mon serveur d'hébergement
[nom du serveur]. Informations :
1. Nom :
[nom de l'établissement], type :
[restaurant / café / lieu de petit-déjeuner], cuisine :
[cuisine]
2. Menu avec rubriques, descriptions et prix :
[menu et prix]
3. Informations végétariennes, véganes, sans gluten et allergènes :
[informations alimentaires]
4. Horaires d'ouverture (séparément pour le petit-déjeuner et le diner s'ils diffèrent) :
[horaires]
5. Mode de prise de réservation :
[téléphone / WhatsApp / les deux], téléphone :
[téléphone], WhatsApp :
[WhatsApp]
6. Adresse et indications d'accès :
[adresse],
[parking et transports]
7. Provenance des produits et notre histoire :
[producteurs et histoire]
8. Domaine :
[domaine], vraies photos : [où se trouvent les photos, ou "utiliser des photos libres"]
Confirme d'abord le serveur avec list_servers et lance scaffold_site avec style="restaurant", d'abord avec confirm=false, puis avec confirm=true après mon accord. Lis site_design_guide et site_seo_guide. Rédige une décision de design naturelle et organique dans _kaynak/ART.md et montre-la-moi : une police d'affichage serif chaleureuse de Fontshare (par exemple Gambarino) avec une police de texte douce (par exemple Supreme), un fond sable, un texte aux tons terre, deux tons chauds, vert olive et terre cuite, et le même arrondi sur toutes les cartes. L'élément signature est un encadré "l'ardoise du jour" sur la page du menu. Si la police choisie n'a pas le glyphe ₺, écris les prix avec "TL".
Pages et schema :
1. Accueil : le premier écran dit ce que vous servez et où, avec les boutons "Réserver une table" et "Voir le menu" et une grande photo. Puis trois plats de la carte, la provenance des produits, un résumé des horaires et de l'adresse, et 4 FAQ. Schema : WebPage, FAQPage, et ajoute servesCuisine, acceptsReservations (l'URL de la page de réservation) et hasMenu au nœud #business.
2. Menu : en HTML, pas en PDF. Chaque rubrique a un titre et un lien d'ancrage, chaque plat a son nom, sa description, son prix et ses étiquettes de régime, et le haut de la page indique la date de dernière mise à jour et une note sur les allergènes. Prends les prix uniquement dans la liste que je t'ai donnée ; n'invente jamais un prix manquant. Schema : Menu avec MenuSection sous hasMenuSection, MenuItem sous hasMenuItem, Offer sous offers (price, priceCurrency TRY) et suitableForDiet quand c'est pertinent.
3. Réservation : comment fonctionnent les réservations, téléphone et WhatsApp, un formulaire WhatsApp avec message prérempli (date, heure, nombre de personnes, jardin ou intérieur), et 3 FAQ (retard, grands groupes, annulation). Schema : WebPage, FAQPage.
4. Notre histoire et nos producteurs : qui dirige l'établissement, qui fournit les produits, et un tableau saisonnier indiquant quel ingrédient est à la carte et à quels mois. Schema : AboutPage.
5. Localisation et horaires : adresse, tableau des horaires, lien "Obtenir l'itinéraire", comment venir en voiture, depuis le centre-ville et en transports en commun, et une note d'accessibilité. Schema : ContactPage.
6. Une page 404.
Pour rester rapide malgré les photos : une seule grande image sur le premier écran et toutes les autres en lazy ; WebP à une qualité de 60 à 65 et pas plus de huit images par page ; ne charge pas de bibliothèque de slider pour la galerie.
Aucune invention : n'écris ni avis, ni notes, ni récompenses, ni certificats, ni nombre de clients, ni affirmations du type "le meilleur" qui ne soient pas réelles. N'ajoute au schema ou au texte ni horaires, ni coordonnées, ni prix, ni e-mail que je ne t'ai pas donnés ; omets le champ et signale-le comme manquant dans le rapport. N'utilise ni tirets longs ni slogans tout faits, et fais en sorte que le premier paragraphe de chaque page réponde directement à la question de cette page.
Travail SEO commun : chaque page reçoit un title unique de 48 à 60 caractères, une description de 145 à 158 caractères, un seul H1 et une canonical se terminant par une barre oblique. Ajoute le nœud WebPage propre à chaque page et un BreadcrumbList, reliés au graphe de base par @id. Dans robots.txt, écris Allow: / pour Googlebot, Bingbot, OAI-SearchBot, ChatGPT-User, GPTBot, Claude-SearchBot, Claude-User, ClaudeBot, PerplexityBot, Perplexity-User, Google-Extended, Applebot-Extended et CCBot, explique la décision dans un commentaire et indique quoi modifier si je veux bloquer les crawlers d'entrainement. sitemap.xml contient de vraies dates lastmod. llms.txt décrit fidèlement l'établissement en deux phrases et liste le NAP et les pages importantes avec leurs liens.
Mise en place technique (le chemin par défaut du kit n'est pas utilisé sur ce site, pour ces raisons) :
1. Compile Tailwind et supprime le CDN. Le kit charge Tailwind via le Play CDN, qui compile dans le navigateur, affiche un avertissement dans la console et dégrade les performances mobiles. Écris _kaynak/package.json avec site_write_file, installe avec site_run_command("cd _kaynak && npm i -D tailwindcss@3 html-validate", background=true) et attends avec site_command_status. Dans _kaynak/tailwind.config.js, règle content sur "./*.html", "./**/*.html", "!./_kaynak/**" et "./_kaynak/chrome.mjs". Déplace les règles @font-face, les lignes @tailwind, ainsi que l'anneau de focus, le lien d'évitement et la protection contre le débordement de l'app.css du kit vers _kaynak/site.css. Génère la sortie dans assets/app.css, car design-check.mjs cherche les polices dans ce fichier, et ajoute ?v=<hash du contenu> au lien sur chaque page afin que le cache en périphérie ne serve jamais l'ancien fichier.
2. Héberge les polices toi-même. Lis l'URL CSS des familles Fontshare choisies (api.fontshare.com/v2/css?f[]=...) avec site_read_url, télécharge ses fichiers woff2 avec site_fetch dans assets/fonts/, et déclare-les avec @font-face et font-display: swap. Précharge chaque graisse utilisée au-dessus de la ligne de flottaison avec <link rel="preload" as="font" type="font/woff2" crossorigin>, trois fichiers au maximum. Sans cela, l'échange de police décale la mise en page ; dans la démo, le CLS sur ordinateur était de 0,078 pour cette raison et est tombé à 0 avec le préchargement.
3. Rends le menu de navigation et le pied de page en HTML statique. Les composants <site-nav> et <site-footer> du kit fonctionnent avec JavaScript, et la plupart des crawlers d'IA ne voient jamais la carte, l'adresse ni le numéro de téléphone. Supprime les scripts chrome.js et motion.js de chaque page. Dans _kaynak/chrome.mjs, écris deux fonctions qui construisent le HTML de l'en-tête et du pied de page à partir de assets/site.config.js ; construis le menu mobile sans JavaScript avec <details> et <summary>, et marque la page courante avec aria-current="page". Écris à la racine du site un build.mjs qui, dans l'ordre, exécute node seo-stamp.mjs, retamponne tout ce qui se trouve entre <!-- chrome:header:start --> et <!-- chrome:header:end --> (et de même pour le pied de page) sur chaque page, compile Tailwind et met à jour le hash du lien CSS. Après chaque modification, exécute uniquement site_run_command("node build.mjs").
4. Mouvement uniquement en CSS, et tout en douceur. Mets data-reveal sur les cartes d'images et construis l'apparition avec une animation CSS pilotée par le défilement (animation-timeline: view()) en utilisant uniquement transform ; n'anime pas l'opacity, car un texte qui démarre à opacité zéro disparait dans les navigateurs sans JavaScript et échoue au contrôle de contraste des audits d'accessibilité. Enveloppe la règle dans @media (prefers-reduced-motion: no-preference) et @supports (animation-timeline: view()). Ne charge ni GSAP, ni Lenis, ni Swiper.
5. Réduis les images. Télécharge chaque photo avec site_fetch dans des fichiers séparés en utilisant resize="480x", "800x", "1200x", "1600x", image_format="webp" et une qualité entre 60 et 68. Donne à chaque <img> srcset, sizes, ainsi que width et height correspondant au vrai ratio ; si tu recadres, ajoute une classe de ratio comme aspect-
[4/3] avec object-cover, sinon la mise en page bouge au chargement de l'image. L'image du premier écran reçoit fetchpriority="high" et n'est pas lazy ; toutes les autres reçoivent loading="lazy". Télécharge l'image de partage en JPG 1200x630 avec site_fetch.
6. Petits détails qui coutent des points : ajoute un favicon SVG avec <link rel="icon"> (sinon le navigateur demande /favicon.ico, le 404 apparait comme une erreur dans la console et Best Practices baisse). Écris DOCTYPE en majuscules, n'utilise aucun attribut style et ne laisse aucun espace en fin de ligne. Utilise au lieu d'espaces dans le texte visible des liens téléphoniques (règle tel-non-breaking de html-validate). Les liens du menu, du pied de page, du fil d'Ariane et des titres doivent mesurer au moins 44 pixels de haut et de large. N'intègre pas d'iframe Google Maps ; le site ne doit faire aucune requête externe, affiche donc l'adresse et un lien "Obtenir l'itinéraire" à la place.
7. Aucune requête ne doit quitter le site : polices, scripts, styles et images sont tous sur ton propre serveur. Il n'y a pas de gestionnaire de formulaire, donc le formulaire de contact est un formulaire method="get" pointant vers https://wa.me/
[numéro WhatsApp] avec un textarea prérempli nommé "text" ; aucun JavaScript n'est nécessaire.
Contrôles (dans cet ordre ; ne dis pas que c'est terminé tant qu'ils ne sont pas tous validés) :
1. Exécute node build.mjs avec site_run_command, puis node seo-check.mjs : 0 erreur, 0 avertissement. Un avertissement de contenu dupliqué signifie que deux pages ne sont pas assez différentes ; réécris-les.
2. node design-check.mjs : 0 erreur. Si tu as choisi un style sans mouvement, signale l'avertissement "pas de mouvement" comme une décision délibérée, avec la raison.
3. _kaynak/node_modules/.bin/html-validate sur chaque fichier HTML : 0 erreur. Mets une ligne _kaynak/ dans un fichier .htmlvalidateignore à la racine du site pour que les dépendances ne soient pas analysées.
4. Regarde chaque page avec site_preview en view="mobile", view="desktop", ainsi qu'en largeur 360 et 768. Corrige le défilement horizontal, les titres qui débordent, les boutons trop serrés ou le texte illisible, puis regarde à nouveau.
5. Mesure chaque page avec core_web_vitals en strategy="mobile" et strategy="desktop", et obtiens les scores d'accessibilité, de bonnes pratiques et de SEO avec seo_audit. L'objectif sur mobile est de 100 en accessibilité, bonnes pratiques et SEO et d'au moins 95 en performance ; sur ordinateur, au moins 95 pour les quatre. Sur une page qui n'atteint pas l'objectif, exécute core_web_vitals avec resources=true, trouve l'élément LCP et toute image surdimensionnée, corrige et relance seo_audit avec runs=2, car une seule mesure en laboratoire peut fluctuer.
6. Les requêtes réseau ne doivent contenir aucune adresse extérieure au domaine propre du site.
Après la publication : soumets sitemap.xml avec gsc_submit_sitemap et vérifie la page d'accueil et les trois pages les plus importantes avec gsc_inspect_urls. Aucun outil ne peut cliquer sur "Demander une indexation" ; liste ce que je dois demander à la main dans Search Console.
Termine par ce rapport : la liste des pages avec les scores mobile et ordinateur de chaque page dans un tableau (performance, accessibilité, bonnes pratiques, SEO, LCP, CLS), le résultat de chaque contrôle, les corrections effectuées et les informations dont tu as encore besoin de ma part. Si un objectif n'est pas atteint, dis-le clairement au lieu de déclarer que c'est terminé.
