Improve organizations display

src/components/blog/Author.astro

@@ -1,6 +1,4 @@
 ---
-import { getPermalink } from '~/utils/permalinks';
-
 import dataProvider from '~/config/dataProvider';
 
 export interface Props {
@@ -12,8 +10,6 @@ const { personUri } = Astro.props;
 const { data: person } = await dataProvider.getOne('Person', {
   id: personUri,
 });
-
-console.log('person', person);
 ---
 
 {

src/components/common/Members.astro

@@ -0,0 +1,25 @@
+---
+import dataProvider from '~/config/dataProvider';
+
+export interface Props {
+  associationsUris: string | [string];
+}
+
+const { associationsUris } = Astro.props;
+
+const { data: associations } = await dataProvider.getMany('MembershipAssociation', {
+  ids: Array.isArray(associationsUris) ? associationsUris : [associationsUris],
+});
+
+const { data: members } = await dataProvider.getMany('Person', {
+  ids: associations.map((a) => a['pair:membershipActor']),
+});
+---
+
+{
+  members?.map((member) => (
+    <div class="grid gap-4 grid-cols-3">
+      <img class="w-36 h-36 rounded-full" src={member.image} alt={member['pair:label']} />
+    </div>
+  ))
+}

src/components/common/Organization.astro

@@ -0,0 +1,53 @@
+---
+import Image from '~/components/common/Image.astro';
+import dataProvider from '~/config/dataProvider';
+import { arrayOf } from '~/utils/utils';
+
+export interface Props {
+  involves: string;
+}
+
+const { involves } = Astro.props;
+
+let { data } = await dataProvider.getMany('Organization', {
+  ids: arrayOf(involves),
+});
+
+const organization = data.find((r) => r.type === 'pair:Organization');
+---
+
+{
+  organization && (
+    <div>
+      <div class="flex">
+        <div class="flex-none w-36">
+          {organization.image && (
+            <a href={`/organisations/${encodeURIComponent(organization.id)}`}>
+              <Image
+                src={organization.image}
+                class="object-cover w-36 h-36 rounded shadow-lg shadow-slate-500 bg-white dark:bg-slate-700"
+                widths={[400, 900]}
+                width={900}
+                sizes="(max-width: 900px) 400px, 900px"
+                alt={organization['pair:label']}
+                aspectRatio="16:9"
+                loading="lazy"
+                decoding="async"
+              />
+            </a>
+          )}
+        </div>
+        <div class="grow pl-6">
+          <header class="flex flex-col h-full">
+            <a href={`/organisations/${encodeURIComponent(organization.id)}`}>
+              <h4 class="grow text-3xl md:text-4xl mt-1 font-bold leading-tighter tracking-tighter font-heading align-text-bottom">
+                {organization['pair:label']}
+              </h4>
+            </a>
+            <p class="flex-none line-clamp-4">{organization['pair:description']}</p>
+          </header>
+        </div>
+      </div>
+    </div>
+  )
+}

src/components/common/Projects.astro

@@ -0,0 +1,61 @@
+---
+import dataProvider from '~/config/dataProvider';
+import Image from '~/components/common/Image.astro';
+import { projectTypes } from '~/config/typesMapping';
+import { arrayOf } from '~/utils/utils';
+
+export interface Props {
+  projectsUris: string | [string];
+}
+
+const { projectsUris } = Astro.props;
+
+let { data: projects } = await dataProvider.getMany('Project', {
+  ids: arrayOf(projectsUris),
+});
+
+const getCategoryFromType = (type: string | [string]) =>
+  Object.keys(projectTypes).find((key) => arrayOf(type).includes(projectTypes[key]));
+
+projects = projects.filter((project) => project?.type === 'pair:Project');
+---
+
+{
+  (
+    <div class="grid gap-8 grid-cols-3 -mb-6">
+      {projects.map((project) => (
+        <div class="">
+          <article class="mb-6 transition">
+            <div class="relative md:h-64 bg-gray-400 dark:bg-slate-700 rounded shadow-lg mb-6">
+              {project.image && (
+                <a href={`/projets/${getCategoryFromType(project['pair:hasType'])}/${encodeURIComponent(project.id)}`}>
+                  <Image
+                    src={project.image}
+                    class="w-full md:h-full rounded shadow-lg bg-gray-400 dark:bg-slate-700"
+                    widths={[400, 900]}
+                    width={400}
+                    sizes="(max-width: 900px) 400px, 900px"
+                    alt={project['pair:label']}
+                    aspectRatio="16:9"
+                    layout="cover"
+                    loading="lazy"
+                    decoding="async"
+                  />
+                </a>
+              )}
+            </div>
+            <h3 class="mb-2 text-xl font-bold leading-tight sm:text-2xl font-heading">
+              <a
+                href={`/projets/${getCategoryFromType(project['pair:hasType'])}/${encodeURIComponent(project.id)}`}
+                class="hover:text-primary dark:hover:text-blue-700  transition ease-in duration-200"
+              >
+                {project['pair:label']}
+              </a>
+            </h3>
+            <p class="text-muted dark:text-slate-400 text-lg">{project['pair:comment']}</p>
+          </article>
+        </div>
+      ))}
+    </div>
+  )
+}

src/components/common/Websites.astro

@@ -0,0 +1,87 @@
+---
+import { Icon } from 'astro-icon/components';
+
+const domainMapping = {
+  'github.com': {
+    label: 'GitHub',
+    icon: 'tabler:brand-github',
+    color: 'bg-white',
+    contrastText: 'text-black',
+  },
+  'gitlab.com': {
+    label: 'GitLab',
+    icon: 'tabler:brand-gitlab',
+    color: 'bg-[#FF4500]',
+    contrastText: 'text-black',
+  },
+  'facebook.com': {
+    label: 'Facebook',
+    icon: 'tabler:brand-facebook',
+    color: 'bg-[#4267B2]',
+    contrastText: 'text-white',
+  },
+  'twitter.com': {
+    label: 'X (Twitter)',
+    icon: 'tabler:brand-x',
+    color: 'bg-[#00ACEE]',
+    contrastText: 'text-white',
+  },
+  'instagram.com': {
+    label: 'Instagram',
+    icon: 'tabler:brand-instagram',
+    color: 'bg-[#8a3ab9]',
+    contrastText: 'text-white',
+  },
+  'youtube.com': {
+    label: 'YouTube',
+    icon: 'tabler:brand-youtube',
+    color: 'bg-[#FF0000]',
+    contrastText: 'text-white',
+  },
+  'linkedin.com': {
+    label: 'LinkedIn',
+    icon: 'tabler:brand-linkedin',
+    color: 'bg-[#0e76a8]',
+    contrastText: 'text-white',
+  },
+};
+
+export interface Props {
+  urls: string | [string];
+}
+
+let { urls } = Astro.props;
+
+urls = Array.isArray(urls) ? urls : [urls];
+
+const badges = urls
+  ?.filter((url) => url)
+  .map((url) => {
+    if (!url.startsWith('http')) url = `https://${url}`;
+    let parsedUrl = new URL(url);
+    if (!parsedUrl) return null;
+    const domain = parsedUrl.hostname.replace('www.', '');
+    return {
+      url,
+      ...(domainMapping[domain] || {
+        label: 'Site web',
+        icon: 'tabler:world',
+        color: 'bg-slate-300',
+        contrastText: 'text-black',
+      }),
+    };
+  });
+---
+
+{
+  badges?.map((badge) => (
+    <a
+      href={badge.url}
+      target="_blank"
+      class={`${badge.color} ${badge.contrastText} text-xs font-medium inline-flex items-center px-2.5 py-0.5 rounded me-2 border border-gray-500`}
+    >
+      <Icon name={badge.icon} class="mr-1" />
+      {badge.label}
+    </a>
+  ))
+}

src/components/widgets/BlogLatestPosts.astro

@@ -34,8 +34,6 @@ const { data: posts } = await dataProvider.getList('BlogPost', {
   sort: { field: 'dc:created', order: 'DESC' },
   pagination: { page: 1, perPage: count },
 });
-
-console.log('posts', posts);
 ---
 
 <WidgetWrapper id={id} isDark={isDark} containerClass={classes?.container} bg={bg}>

src/config/dataProvider.js

@@ -15,10 +15,18 @@ export default dataProvider({
     },
     Organization: {
       types: ['pair:Organization'],
+      list: {
+        filter: {
+          'pair:partnerOf': 'https://data.virtual-assembly.org/organizations/assemblee_virtuelle',
+        },
+      },
     },
     Person: {
       types: ['pair:Person'],
     },
+    MembershipAssociation: {
+      types: ['pair:MembershipAssociation'],
+    },
     BlogPost: {
       types: ['pair:Document'],
       list: {

src/navigation.js

@@ -11,11 +11,11 @@ export const headerData = {
         },
         {
           text: 'Organisations membres',
-          href: getPermalink('/homes/startup'),
+          href: getPermalink('/organisations'),
         },
         {
           text: "L'équipe",
-          href: getPermalink('/homes/mobile-app'),
+          href: getPermalink('/equipe'),
         },
         {
           text: 'Histoire',

src/pages/organisations/[...slug].astro

@@ -0,0 +1,78 @@
+---
+import dataProvider from '~/config/dataProvider';
+import Layout from '~/layouts/PageLayout.astro';
+import Image from '~/components/common/Image.astro';
+import Members from '~/components/common/Members.astro';
+import Projects from '~/components/common/Projects.astro';
+import Websites from '~/components/common/Websites.astro';
+
+export const prerender = true;
+
+export async function getStaticPaths() {
+  const { data: organizations } = await dataProvider.getList('Organization');
+  return organizations.map((organization) => ({
+    params: {
+      slug: organization.id,
+    },
+    props: organization,
+  }));
+}
+
+const organization = Astro.props;
+
+const metadata = {
+  title: organization['pair:label'],
+  description: organization['pair:comment'],
+};
+---
+
+<Layout metadata={metadata}>
+  <section class="py-8 sm:py-16 mx-auto max-w-4xl">
+    <article>
+      <header class="flex mb-4">
+        <div class="flex-none w-36">
+          {
+            organization.image && (
+              <Image
+                src={organization.image}
+                class="object-cover w-36 h-36 rounded shadow-lg shadow-slate-500 bg-white dark:bg-slate-700"
+                widths={[400, 900]}
+                width={900}
+                sizes="(max-width: 900px) 400px, 900px"
+                alt={organization['pair:label']}
+                aspectRatio="16:9"
+                loading="lazy"
+                decoding="async"
+              />
+            )
+          }
+        </div>
+        <div class="grow pl-6">
+          <header class="flex flex-col h-full">
+            <h1
+              class="grow text-4xl md:text-5xl mt-12 font-bold leading-tighter tracking-tighter font-heading align-text-bottom"
+            >
+              {organization['pair:label']}
+            </h1>
+            <p class="flex-none">
+              <span
+                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 font-medium rounded-md"
+              >
+                Organisation membre de l'AV
+              </span>
+            </p>
+          </header>
+        </div>
+      </header>
+      <p class="flex-grow text-muted dark:text-slate-400 text-lg">
+        {organization['pair:description']}
+      </p>
+      <h3 class="text-2xl font-bold leading-tighter tracking-tighter font-heading mt-3">Canaux de communication</h3>
+      <Websites urls={organization['pair:homePage']} />
+      <h3 class="text-2xl font-bold leading-tighter tracking-tighter font-heading mt-3">Membres</h3>
+      <Members associationsUris={organization['pair:organizationOfMembership']} />
+      <h3 class="text-2xl font-bold leading-tighter tracking-tighter font-heading mt-3">Projets</h3>
+      <Projects projectsUris={organization['pair:involvedIn']} />
+    </article>
+  </section>
+</Layout>