Reorder components + improve homepage

.gitignore

@@ -22,4 +22,5 @@ pnpm-debug.log*
 package-lock.json
 pnpm-lock.yaml
 
-.astro
+.astro
+.vercel

README.md

@@ -13,7 +13,6 @@
 - ✅ **Image Optimization** (using new **Astro Assets** and **Unpic** for Universal image CDN).
 - ✅ Generation of **project sitemap** based on your routes.
 - ✅ **Open Graph tags** for social media sharing.
-- ✅ **Analytics** built-in Google Analytics, and Splitbee integration.
 
 <br>
 
@@ -32,17 +31,21 @@
 <details open>
 <summary>Table of Contents</summary>
 
-- [Demo](#demo)
-- [Getting started](#getting-started)
-  - [Project structure](#project-structure)
-  - [Commands](#commands)
-  - [Configuration](#configuration)
-  - [Deploy](#deploy)
-- [Frequently Asked Questions](#frequently-asked-questions)
-- [Related Projects](#related-projects)
-- [Contributing](#contributing)
-- [Acknowledgements](#acknowledgements)
-- [License](#license)
+- [🚀 AstroWind](#-astrowind)
+  - [Demo](#demo)
+  - [Getting started](#getting-started)
+    - [Project structure](#project-structure)
+    - [Commands](#commands)
+    - [Configuration](#configuration)
+    - [Deploy](#deploy)
+      - [Deploy to production (manual)](#deploy-to-production-manual)
+      - [Deploy to Netlify](#deploy-to-netlify)
+      - [Deploy to Vercel](#deploy-to-vercel)
+  - [Frequently Asked Questions](#frequently-asked-questions)
+  - [Related projects](#related-projects)
+  - [Contributing](#contributing)
+  - [Acknowledgements](#acknowledgements)
+  - [License](#license)
 
 </details>
 
@@ -119,8 +122,7 @@ There's nothing special about `src/components/`, but that's where we like to put
 
 Any static assets, like images, can be placed in the `public/` directory if they do not require any transformation or in the `assets/` directory if they are imported directly.
 
-
-[![Edit AstroWind on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/onwidget/astrowind/tree/main)  [![Open in Gitpod](https://svgshare.com/i/xdi.svg)](https://gitpod.io/?on=gitpod#https://github.com/onwidget/astrowind)  [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/onwidget/astrowind)   
+[![Edit AstroWind on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/onwidget/astrowind/tree/main) [![Open in Gitpod](https://svgshare.com/i/xdi.svg)](https://gitpod.io/?on=gitpod#https://github.com/onwidget/astrowind) [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/onwidget/astrowind)
 
 > 🧑‍🚀 **Seasoned astronaut?** Delete this file `README.md`. Update `src/config.yaml` and contents. Have fun!
 
@@ -209,11 +211,6 @@ apps:
       robots:
         index: false
 
-analytics:
-  vendors:
-    googleAnalytics:
-      id: null # or "G-XXXXXXXXXX"
-
 ui:
   theme: 'system' # Values: "system" | "light" | "dark" | "light:only" | "dark:only"
 ```

astro.config.mjs

@@ -1,35 +1,29 @@
 import path from 'path';
 import { fileURLToPath } from 'url';
-
 import { defineConfig, squooshImageService } from 'astro/config';
-
 import sitemap from '@astrojs/sitemap';
 import tailwind from '@astrojs/tailwind';
 import mdx from '@astrojs/mdx';
 import partytown from '@astrojs/partytown';
 import icon from 'astro-icon';
 import tasks from './src/utils/tasks';
-
 import { readingTimeRemarkPlugin, responsiveTablesRehypePlugin } from './src/utils/frontmatter.mjs';
-
 import { ANALYTICS, SITE } from './src/utils/config.ts';
-
+import vercel from '@astrojs/vercel/serverless';
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
-
 const whenExternalScripts = (items = []) =>
   ANALYTICS.vendors.googleAnalytics.id && ANALYTICS.vendors.googleAnalytics.partytown
     ? Array.isArray(items)
       ? items.map((item) => item())
       : [items()]
     : [];
 
+// https://astro.build/config
 export default defineConfig({
   site: SITE.site,
   base: SITE.base,
   trailingSlash: SITE.trailingSlash ? 'always' : 'never',
-
-  output: 'static',
-
+  output: 'hybrid',
   integrations: [
     tailwind({
       applyBaseStyles: false,
@@ -52,30 +46,28 @@ export default defineConfig({
         ],
       },
     }),
-
     ...whenExternalScripts(() =>
       partytown({
-        config: { forward: ['dataLayer.push'] },
+        config: {
+          forward: ['dataLayer.push'],
+        },
       })
     ),
-
     tasks(),
   ],
-
   image: {
     service: squooshImageService(),
   },
-
   markdown: {
     remarkPlugins: [readingTimeRemarkPlugin],
     rehypePlugins: [responsiveTablesRehypePlugin],
   },
-
   vite: {
     resolve: {
       alias: {
         '~': path.resolve(__dirname, './src'),
       },
     },
   },
+  adapter: vercel(),
 });

package.json

@@ -8,13 +8,15 @@
     "start": "astro dev",
     "build": "astro build",
     "preview": "astro preview",
+    "deploy": "vercel",
     "astro": "astro",
     "format": "prettier -w .",
     "lint:eslint": "eslint . --ext .js,.ts,.astro"
   },
   "dependencies": {
     "@astrojs/rss": "^4.0.1",
     "@astrojs/sitemap": "^3.0.3",
+    "@astrojs/vercel": "^7.6.0",
     "@astrolib/analytics": "^0.5.0",
     "@astrolib/seo": "^1.0.0-beta.5",
     "@fontsource-variable/inter": "^5.0.16",
@@ -54,7 +56,8 @@
     "reading-time": "^1.5.0",
     "tailwind-merge": "^2.1.0",
     "tailwindcss": "^3.4.0",
-    "typescript": "^5.3.3"
+    "typescript": "^5.3.3",
+    "vercel": "^34.2.0"
   },
   "engines": {
     "node": ">=18.14.1"

src/components/actors/ActorModal.astro

@@ -0,0 +1,39 @@
+---
+import Modal from '../Modal.astro';
+import Themes from './Themes.astro';
+import Roles from './Roles.astro';
+import type { Actor } from '~/types';
+import { arrayOf } from '~/utils/utils';
+
+export interface Props {
+  actor: Actor;
+}
+
+const { actor } = Astro.props;
+---
+
+<Modal id={actor.id} title={actor['pair:label']}>
+  <img class="w-40 h-40 object-cover rounded-full" src={actor.image} alt={actor['pair:label']} />
+  {
+    actor['pair:comment'] && (
+      <p class="text-base leading-relaxed">
+        <strong>En 2 mots</strong>: {actor['pair:comment']}
+      </p>
+    )
+  }
+  {
+    actor['pair:hasTopic'] && (
+      <p class="text-base leading-relaxed">
+        <strong>Intérêts</strong>: <Themes themesUris={actor['pair:hasTopic']} />
+      </p>
+    )
+  }
+  {
+    actor['pair:actorOfMembership'] && (
+      <>
+        <p class="text-base leading-relaxed font-bold">Rôles</p>
+        <Roles associations={arrayOf(actor['pair:actorOfMembership'])} />
+      </>
+    )
+  }
+</Modal>

src/components/common/Actors.astro → src/components/actors/Actors.astro

@@ -1,27 +1,28 @@
 ---
 import dataProvider from '~/config/dataProvider';
 import ActorModal from './ActorModal.astro';
+import { arrayOf } from '~/utils/utils';
 
 export interface Props {
   actorsUris: string | [string];
 }
 
 const { actorsUris } = Astro.props;
 
-const { data: actors } = await dataProvider.getMany('Person', {
-  ids: Array.isArray(actorsUris) ? actorsUris : [actorsUris],
+const { data } = await dataProvider.getMany('Person', {
+  ids: arrayOf(actorsUris),
 });
 ---
 
 <div class="grid gap-4 grid-cols-2 sm:grid-cols-4 md:grid-cols-6">
   {
-    actors?.map((actor) => (
+    data?.map((actor) => (
       <div>
         <a data-modal-target={actor.id} data-modal-toggle={actor.id} class="cursor-pointer">
           <img class="w-full aspect-square object-cover rounded-full" src={actor.image} alt={actor['pair:label']} />
           <div class="text-center truncate font-bold">{actor['pair:label']}</div>
         </a>
-        <ActorModal actor={actor}>
+        <ActorModal actor={actor} />
       </div>
     ))
   }

src/components/common/Roles.astro → src/components/actors/Roles.astro

@@ -2,7 +2,7 @@
 import dataProvider from '~/config/dataProvider';
 
 export interface Props {
-  associations: object | [object];
+  associations: [object];
 }
 
 const { associations } = Astro.props;

src/components/blog/Author.astro

@@ -2,25 +2,25 @@
 import dataProvider from '~/config/dataProvider';
 
 export interface Props {
-  personUri: string;
+  actorUri: string;
 }
 
-const { personUri } = Astro.props;
+const { actorUri } = Astro.props;
 
-const { data: person } = await dataProvider.getOne('Person', {
-  id: personUri,
+const { data: actor } = await dataProvider.getOne('Person', {
+  id: actorUri,
 });
 ---
 
 {
-  person && (
+  actor && (
     <div class="flex">
       <div class="flex-none">
-        <img src={person.image} class="w-24 h-24 rounded-md" />
+        <img src={actor.image} class="w-24 h-24 rounded-md" />
       </div>
       <div class="grow pl-3 prose">
-        <h3>Auteur: {person['pair:label']}</h3>
-        <p>{person['pair:comment']}</p>
+        <h3>Auteur: {actor['pair:label']}</h3>
+        <p>{actor['pair:comment']}</p>
       </div>
     </div>
   )

src/components/blog/Projects.astro

@@ -5,34 +5,40 @@ import dataProvider from '~/config/dataProvider';
 
 export interface Props {
   projectsUris: string | [string];
-  class?: string;  
+  class?: string;
   title?: string | undefined;
   isCategory?: boolean;
 }
 
 const { projectsUris, class: className = 'text-sm', title = undefined, isCategory = false } = Astro.props;
 
-const { data: projects } = await dataProvider.getMany('Project', { ids: Array.isArray(projectsUris) ? projectsUris : [projectsUris] });
+const { data: projects } = await dataProvider.getMany('Project', {
+  ids: Array.isArray(projectsUris) ? projectsUris : [projectsUris],
+});
 ---
 
 {
   projects && (
-    <>
+    <div>
       <>
-        {title !== undefined && <span class="align-super font-normal underline underline-offset-4 decoration-2 dark:text-slate-400">{title}</span>}
+        {title !== undefined && (
+          <span class="align-super font-normal underline underline-offset-4 decoration-2 dark:text-slate-400">
+            {title}
+          </span>
+        )}
       </>
       <ul class={className}>
         {projects.map((project) => (
           <li class="bg-gray-100 dark:bg-slate-700 inline-block mr-2 rtl:mr-0 rtl:ml-2 mb-2 py-0.5 px-2 lowercase font-medium">
             <a
-              href={getPermalink(project, (isCategory ? 'category' : 'tag'))}
+              href={getPermalink(project, isCategory ? 'category' : 'tag')}
               class="text-muted dark:text-slate-300 hover:text-primary dark:hover:text-gray-200"
             >
               {project['pair:label']}
             </a>
           </li>
         ))}
       </ul>
-    </>
+    </div>
   )
 }

src/components/blog/SinglePost.astro

@@ -80,8 +80,8 @@ const { post } = Astro.props;
       <Fragment set:html={marked.parse(post['pair:description'] || '')} />
     </div>
     <div class="mx-auto px-6 sm:px-6 max-w-4xl mt-8 flex justify-between flex-col sm:flex-row">
-      <!-- <Author personUri={post['dc:creator']} /> -->
-      <Projects projectsUris={post['pair:documents']} class="mr-5 rtl:mr-0 rtl:ml-5" />
+      <Author actorUri={post['dc:creator']} />
+      <!-- <Projects title="Projets liés" projectsUris={post['pair:documents']} /> -->
       <!-- <SocialShare url={url} text={post.title} class="mt-5 sm:mt-1 align-middle text-gray-500 dark:text-slate-600" /> -->
     </div>
   </article>

src/components/blog/ToBlogLink.astro

@@ -7,14 +7,14 @@ import Button from '~/components/ui/Button.astro';
 const { textDirection } = I18N;
 ---
 
-<div class="mx-auto px-6 sm:px-6 max-w-3xl pt-8 md:pt-4 pb-12 md:pb-20">
+<div class="mx-auto px-6 sm:px-6 max-w-4xl pt-8 md:pt-4 pb-12 md:pb-20">
   <Button variant="tertiary" class="px-3 md:px-3" href={getBlogPermalink()}>
     {
       textDirection === 'rtl' ? (
         <Icon name="tabler:chevron-right" class="w-5 h-5 mr-1 -ml-1.5 rtl:-mr-1.5 rtl:ml-1" />
       ) : (
         <Icon name="tabler:chevron-left" class="w-5 h-5 mr-1 -ml-1.5 rtl:-mr-1.5 rtl:ml-1" />
       )
-    } Back to Blog
+    } Revenir au blog de l'AV
   </Button>
 </div>