From 2dfd6e6f144b68c3433266f0cda9795db2ed3f5b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Aur=C3=A9lien=20Noce?= Date: Tue, 19 Nov 2024 10:38:21 +0100 Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Ajoute=20des=20types=20TS?= =?UTF-8?q?=20aux=20diff=C3=A9rents=20composants?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit En particulier, ça permettre d'améliorer la complétion ! --- src/components/card.astro | 15 ++++++- src/components/container.astro | 3 ++ src/components/features.astro | 1 - src/components/item.astro | 34 ++++++++------ src/components/itn-list-item.astro | 5 ++- src/components/itn-topic.astro | 25 ++++++----- src/components/list-item.astro | 41 ++++++++++------- src/components/mareva-list-item.astro | 6 ++- src/components/mareva-topic-alt.astro | 13 +++--- src/components/mareva-topic.astro | 3 ++ src/components/movie-project.astro | 23 +++++----- src/components/named-tag.astro | 13 ++++-- src/components/navbar/dropdown.astro | 6 +-- src/components/navbar/navbar.astro | 10 +++-- src/components/new-movie-project.astro | 42 ++++++----------- src/components/open-source-card.astro | 15 ++++++- src/components/portrait.astro | 19 +++++++- src/components/pricing.astro | 45 ------------------- src/components/sectionhead.astro | 3 ++ src/components/social.astro | 3 ++ src/components/tag.astro | 37 +++++++++++++-- src/components/ui/button.astro | 27 ++++++----- src/components/ui/card-link.astro | 30 ++++++------- src/components/ui/icons/code.astro | 1 - .../ui/icons/square-rounded-check.astro | 3 ++ src/components/ui/icons/tick.astro | 3 ++ src/components/ui/link.astro | 30 ++++++------- src/components/video.astro | 8 ++++ src/components/video2.astro | 9 +++- src/layouts/Layout.astro | 4 +- src/layouts/NewBlogLayout.astro | 1 - src/layouts/NewLayout.astro | 5 +-- src/pages/actualites/[slug].astro | 1 - src/pages/contact.astro | 2 - src/pages/equipe.astro | 3 +- src/pages/organisation.astro | 4 +- 36 files changed, 280 insertions(+), 213 deletions(-) delete mode 100644 src/components/pricing.astro diff --git a/src/components/card.astro b/src/components/card.astro index c60acfa6..fc6aa852 100644 --- a/src/components/card.astro +++ b/src/components/card.astro @@ -1,10 +1,21 @@ --- -import { Tick } from "@components/ui/icons"; import SquareRoundedCheck from "@components/ui/icons/square-rounded-check.astro"; -import Link from "@components/ui/link.astro"; +export type CardInfo = { + name: string; + popular: boolean; + features: string[]; + button: { + text: string; + link: string; + }; +}; +type Props = { + card: CardInfo; +} const { card } = Astro.props; + ---
diff --git a/src/components/container.astro b/src/components/container.astro index b8ce53ac..c32890a6 100644 --- a/src/components/container.astro +++ b/src/components/container.astro @@ -1,4 +1,7 @@ --- +type Props = { + class?: string; +} const { class: className } = Astro.props; --- diff --git a/src/components/features.astro b/src/components/features.astro index bd37d6cb..45469099 100644 --- a/src/components/features.astro +++ b/src/components/features.astro @@ -42,7 +42,6 @@ const features = [ }, ]; --- -

Missions de l'institut diff --git a/src/components/item.astro b/src/components/item.astro index c68a871e..54d56bde 100644 --- a/src/components/item.astro +++ b/src/components/item.astro @@ -1,21 +1,29 @@ --- import { Icon } from "astro-icon"; -const { color = "white", icon = "circle-filled" } = Astro.props; - -let textColor; -let backgroundColor; -if (color == "white") { - textColor = "text-white"; - backgroundColor = "bg-black"; -} else { - textColor = `text-${color}-600`; - backgroundColor = `bg-${color}-100`; +const supportedStyles = { + white: { + textColor: "text-white", + backgroundColor: "bg-black", + }, + sky: { + textColor: "text-sky-600", + backgroundColor: "bg-sky-100", + }, + purple: { + textColor: "text-purple-600", + backgroundColor: "bg-purple-100", + }, } +type SupportedStyle = keyof typeof supportedStyles; + +type Props = { + color?: SupportedStyle; + icon: string; +}; +const { color = "white", icon = "circle-filled" } = Astro.props; -// Tailwind tree shaker -("bg-sky-100 bg-purple-100 bg-red-100 bg-black"); -("text-sky-600 text-purple-600 text-red-600 text-black"); +const {textColor, backgroundColor } = supportedStyles[color] --- diff --git a/src/components/itn-list-item.astro b/src/components/itn-list-item.astro index bd5bc62b..58e67a9b 100644 --- a/src/components/itn-list-item.astro +++ b/src/components/itn-list-item.astro @@ -1,6 +1,9 @@ --- -import Topic from "/src/components/itn-topic.astro"; +import Topic, { type ItnTopicType } from "./itn-topic.astro"; +type Props = { + name: ItnTopicType; +}; const { name } = Astro.props; --- diff --git a/src/components/itn-topic.astro b/src/components/itn-topic.astro index 8536dab8..b6dc45de 100644 --- a/src/components/itn-topic.astro +++ b/src/components/itn-topic.astro @@ -4,27 +4,28 @@ import { Icon } from "astro-icon"; const icons = { "Ingénierie Numérique": { name: "abacus", - iconColor: "sky-600", - backgroundColor: "sky-100", + iconColor: "text-sky-600", + backgroundColor: "bg-sky-100", }, "Industries Culturelles et Créatives": { name: "tabler:palette", - iconColor: "purple-600", - backgroundColor: "purple-100", + iconColor: "text-purple-600", + backgroundColor: "bg-purple-100", }, "Santé Numérique": { name: "tabler:vaccine", - iconColor: "red-600", - backgroundColor: "red-100", + iconColor: "text-red-600", + backgroundColor: "bg-red-100", }, }; +export type ItnTopicType = keyof typeof icons; +type Props = { + name: ItnTopicType; +}; const { name } = Astro.props; -const icon = icons[name]; -`bg-sky-100 text-sky-600 -bg-purple-100 text-purple-600 -bg-red-100 bg-red-600`; +const icon = icons[name]; --- + class={`${icon.backgroundColor} top-1 mt-0 w-5 h-5 rounded inline-flex items-center justify-center`}> diff --git a/src/components/list-item.astro b/src/components/list-item.astro index 7e428ba1..75fda1f1 100644 --- a/src/components/list-item.astro +++ b/src/components/list-item.astro @@ -1,24 +1,33 @@ --- import { Icon } from "astro-icon"; -const { color = "white", icon = "circle-filled" } = Astro.props; -let textColor; -let backgroundColor; +const supportedStyles = { + white: { + textColor: "text-white", + backgroundColor: "bg-bkack", + }, + black: { + textColor: "text-black", + backgroundColor: "bg-white", + }, + sky: { + textColor: "text-sky-600", + backgroundColor: "bg-sky-100", + }, + purple: { + textColor: "text-purple-600", + backgroundColor: "bg-purple-100", + }, +}; +type SupportedStyle = keyof typeof supportedStyles; -if (color == "white") { - textColor = "text-white"; - backgroundColor = "bg-black"; -} else if (color == "black") { - textColor = "text-black"; - backgroundColor = "bg-white"; -} else { - textColor = `text-${color}-600`; - backgroundColor = `bg-${color}-100`; -} +type Props = { + color?: SupportedStyle; + icon?: string; +}; +const { color = "white", icon = "circle-filled" } = Astro.props; -// Tailwind tree shaker -("bg-sky-100 bg-purple-100 bg-red-100 bg-black bg-white"); -("text-sky-600 text-purple-600 text-red-600 text-white text-black"); +const { textColor, backgroundColor} = supportedStyles[color]; ---
  • diff --git a/src/components/mareva-list-item.astro b/src/components/mareva-list-item.astro index 7c34b356..7bca6ced 100644 --- a/src/components/mareva-list-item.astro +++ b/src/components/mareva-list-item.astro @@ -1,5 +1,9 @@ --- -import Topic from "/src/components/mareva-topic-alt.astro"; +import Topic, { type MarevaTopicType } from "./mareva-topic-alt.astro"; + +type Props = { + name: MarevaTopicType +}; const { name } = Astro.props; --- diff --git a/src/components/mareva-topic-alt.astro b/src/components/mareva-topic-alt.astro index 5715be13..c23d9779 100644 --- a/src/components/mareva-topic-alt.astro +++ b/src/components/mareva-topic-alt.astro @@ -23,17 +23,14 @@ const icons = { background: "purple-200", }, }; +export type MarevaTopicType = keyof typeof icons; +type Props = { + name: MarevaTopicType +}; const { name } = Astro.props; -const icon = icons[name]; -`bg-slate-800 text-slate-200 -bg-orange-200 text-orange-500 -bg-slate-200 text-slate-800 -text-green-200 -bg-purple-200 text-purple-500 -bg-rose-200 text-rose-500 -bg-blue-200 text-blue-500`; +const icon = icons[name]; --- tag.trim()); const icons = { Photogrammétrie: "stereo-glasses", @@ -20,10 +15,18 @@ const icons = { Innovation: "bulb", }; -// import crossingTheLandscape from "assets/crossing-the-landscape.png"; +type Props = { + title: string; + author: string; + description: string; + image: ImageMetadata; + url: string; + tags: string | string[]; +}; +const { title, author, description, image, url, tags: tagListOrString } = Astro.props; -// const url = -// "https://projet-ingenierie.minesparis.psl.eu/portfolio/capture-volumetrique-et-danse-collaboration-avec-lartiste-celeste-rogosin/"; +const tagList = Array.isArray(tagListOrString) ? tagListOrString : tagListOrString.split(","); +const tags = tagList.map((tag) => tag.trim()); ---
  • - +

    • - + diff --git a/src/components/navbar/navbar.astro b/src/components/navbar/navbar.astro index 9da13409..016e1f17 100644 --- a/src/components/navbar/navbar.astro +++ b/src/components/navbar/navbar.astro @@ -1,13 +1,17 @@ --- import Container from "@components/container.astro"; -import Link from "@components/ui/link.astro"; import ITNLogo from "@components/itn-logo.astro"; import Dropdown from "./dropdown.astro"; import { Astronav, MenuItems, MenuIcon } from "astro-navbar"; -import { Icon } from "astro-icon"; import Social from "@components/social.astro"; -const menuitems = [ +type MenuItem = { + title: string; + path: string; + children?: MenuItem[]; +}; + +const menuitems: MenuItem[] = [ // { // title: "Features", // path: "#", diff --git a/src/components/new-movie-project.astro b/src/components/new-movie-project.astro index a6da3a57..76b4b5aa 100644 --- a/src/components/new-movie-project.astro +++ b/src/components/new-movie-project.astro @@ -1,33 +1,8 @@ --- import { Image } from "@astrojs/image/components"; -import { Picture } from "@astrojs/image/components"; -import Link from "@components/ui/card-link.astro"; import { Icon } from "astro-icon"; -type TagType = - | "Photogrammétrie" - | "Modélisation 3D" - | "Interactions" - | "Accessibilité" - | "Réalité Augmentée" - | "Réalité Virtuelle" - | "Collaboration" - | "Programmation" - | "Innovation"; - -interface Props { - title: string; - author: string; - description: string; - image: string; - url?: string; - tags?: TagType[]; -} - -let { title, author, description, image, url, tags } = Astro.props; - -tags = tags || []; - + // les icônes supportées const icons = { Photogrammétrie: "stereo-glasses", "Modélisation 3D": "frustum", @@ -39,6 +14,17 @@ const icons = { Programmation: "code", Innovation: "bulb", }; +type TagType = keyof typeof icons; + +type Props = { + title: string; + author: string; + description: string; + image: string; + url?: string; + tags?: TagType[]; +} +const { title, author, description, image, url, tags=[] } = Astro.props; // import crossingTheLandscape from "assets/crossing-the-landscape.png"; @@ -52,8 +38,8 @@ const icons = { src={image} class="hidden md:inline-block rounded-l-md m-0" alt="Crossing the Landscape" - width="196" - height="196" + width={196} + height={196} loading="eager" format="avif" /> diff --git a/src/components/open-source-card.astro b/src/components/open-source-card.astro index fa537295..4d67e769 100644 --- a/src/components/open-source-card.astro +++ b/src/components/open-source-card.astro @@ -2,7 +2,20 @@ import { Icon } from "astro-icon"; import { Picture } from "@astrojs/image/components"; -const { name, by, image, description, homepage, github, license } = Astro.props; +export type OpenSourceProject = { + name: string; + by: string; + image: ImageMetadata; + description: string; + homepage: string; + github: string; + license: string; +}; + +type Props = { + attrs: OpenSourceProject; +}; +const { name, by, image, description, homepage, github, license } = Astro.props.attrs; ---
    -
    -
    -

    {plan.name}

    - { - plan.price && typeof plan.price === "object" - ? plan.price.monthly - : plan.price - } -

    - -
      - { - plan.features.map((item) => ( -
    • - - {item} -
      • - )) - } -
    - - {plan.button.text || "Get Started"} - -
    -
    -
    diff --git a/src/components/sectionhead.astro b/src/components/sectionhead.astro index fb134ef7..64048c8d 100644 --- a/src/components/sectionhead.astro +++ b/src/components/sectionhead.astro @@ -1,4 +1,7 @@ --- +type Props = { + align?: "center" | "left"; +}; const { align = "center" } = Astro.props; --- diff --git a/src/components/social.astro b/src/components/social.astro index a96f1425..056299c5 100644 --- a/src/components/social.astro +++ b/src/components/social.astro @@ -1,6 +1,9 @@ --- import { Icon } from "astro-icon"; +type Props = { + extra?: string; +}; const { extra } = Astro.props; --- diff --git a/src/components/tag.astro b/src/components/tag.astro index 18f69175..3fbdc383 100644 --- a/src/components/tag.astro +++ b/src/components/tag.astro @@ -1,10 +1,41 @@ --- import { Icon } from "astro-icon"; +type Props = { + color?: "slate" | "sky" | "purple" | "red"; + icon?: string; + tag: string; +}; const { color = "slate", icon = "circle-filled", tag } = Astro.props; -const background = `bg-${color}-50`; -const spanClass = `relative top-[1px] h-6 w-6 rounded-full inline-flex items-center justify-center bg-${color}-50`; -const iconClass = `inline-block w-4 h-4 text-${color}-600`; + +// j'ai rajouté cette "map" pour que Tailwind puisse "tree shaker" les classes inutilisées +const classesByColor = { + slate: { + background: "bg-slate-50", + span: "bg-slate-50", + icon: "text-slate-600", + }, + sky: { + background: "bg-sky-50", + span: "bg-sky-50", + icon: "text-sky-600", + }, + purple: { + background: "bg-purple-50", + span: "bg-purple-50", + icon: "text-purple-600", + }, + red: { + background: "bg-red-50", + span: "bg-red-50", + icon: "text-red-600", + }, +} + +const colors = classesByColor[color]; +const background = colors.background; +const spanClass = `relative top-[1px] h-6 w-6 rounded-full inline-flex items-center justify-center ${colors.span}`; +const iconClass = `inline-block w-4 h-4 ${colors.icon}`; // Tailwind tree shaker ("bg-sky-200 bg-purple-200 bg-red-200"); diff --git a/src/components/ui/button.astro b/src/components/ui/button.astro index 53f93394..2863622c 100644 --- a/src/components/ui/button.astro +++ b/src/components/ui/button.astro @@ -1,12 +1,21 @@ --- -interface Props { - size?: "md" | "lg"; +const sizes = { + md: "px-5 py-2.5", + lg: "px-6 py-3", +}; +const styles = { + outline: "border-2 border-black hover:bg-black text-black hover:text-white", + primary: + "bg-black text-white hover:bg-slate-900 border-2 border-transparent", +}; + +type Props = object & { + size?: keyof typeof sizes; block?: boolean; - style?: "outline" | "primary" | "inverted"; + style?: keyof typeof styles; class?: string; [x: string]: any; } - const { size = "md", style = "primary", @@ -15,16 +24,6 @@ const { ...rest } = Astro.props; -const sizes = { - md: "px-5 py-2.5", - lg: "px-6 py-3", -}; - -const styles = { - outline: "border-2 border-black hover:bg-black text-black hover:text-white", - primary: - "bg-black text-white hover:bg-slate-900 border-2 border-transparent", -}; ---