Skip to content

Commit

Permalink
Add more informations about actors
Browse files Browse the repository at this point in the history
  • Loading branch information
srosset81 committed May 22, 2024
1 parent 562f1cd commit c463592
Show file tree
Hide file tree
Showing 14 changed files with 234 additions and 44 deletions.
28 changes: 28 additions & 0 deletions src/assets/styles/tailwind.css
Original file line number Diff line number Diff line change
Expand Up @@ -88,3 +88,31 @@
.dd *:first-child {
margin-top: 0;
}

.prose p {
margin-top: 0.8rem;
margin-bottom: 0.8rem;
line-height: 1.8rem;
}

.prose li {
margin-top: 0.4rem;
margin-bottom: 0.4rem;
line-height: 1.8rem;
}

.prose ul {
margin-top: 0.8rem;
margin-bottom: 0.8rem;
}

.prose h2 {
margin-top: 1.2em;
margin-bottom: 0.5em;
}

.prose pre {
margin-top: 1rem;
margin-bottom: 1rem;
background-color: #e2e8f0 !important;
}
27 changes: 7 additions & 20 deletions src/components/Modal.astro
Original file line number Diff line number Diff line change
Expand Up @@ -8,16 +8,14 @@ const { id, title } = Astro.props;
aria-hidden="true"
class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full"
>
<div class="relative p-4 w-full max-w-2xl max-h-full">
<!-- Modal content -->
<div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
<!-- Modal header -->
<div class="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600">
<h3 class="text-xl font-semibold text-gray-900 dark:text-white">{title}</h3>
<div class="relative p-4 w-full max-w-xl max-h-full">
<div class="relative bg-white rounded-lg shadow">
<div class="p-4 pt-0 md:p-5 space-y-4">
<h3 class="text-xl font-semibold text-gray-900">{title}</h3>
<button
type="button"
class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white"
data-modal-hide="default-modal"
class="absolute top-0 mr-3 right-0 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center"
data-modal-hide={id}
>
<svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
<path
Expand All @@ -29,18 +27,7 @@ const { id, title } = Astro.props;
</svg>
<span class="sr-only">Close modal</span>
</button>
</div>
<!-- Modal body -->
<div class="p-4 pt-0 md:p-5 space-y-4">
<p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
With less than a month to go before the European Union enacts new consumer privacy laws for its citizens,
companies around the world are updating their terms of service agreements to comply.
</p>
<p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May 25 and is meant to
ensure a common set of data rights in the European Union. It requires organizations to notify users as soon as
possible of high-risk data breaches that could personally affect them.
</p>
<slot />
</div>
</div>
</div>
Expand Down
22 changes: 22 additions & 0 deletions src/components/common/ActorModal.astro
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
---
import Modal from '../Modal.astro';
import Themes from './Themes.astro';
import Roles from './Roles.astro';
export interface Props {
actor: object;
}
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={Array.isArray(actor['pair:actorOfMembership']) ? actor['pair:actorOfMembership'] : [actor['pair:actorOfMembership']]} />
}
</Modal>
28 changes: 28 additions & 0 deletions src/components/common/Actors.astro
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
---
import dataProvider from '~/config/dataProvider';
import ActorModal from './ActorModal.astro';
export interface Props {
actorsUris: string | [string];
}
const { actorsUris } = Astro.props;
const { data: actors } = await dataProvider.getMany('Person', {
ids: Array.isArray(actorsUris) ? actorsUris : [actorsUris],
});
---

<div class="grid gap-4 grid-cols-6">
{
actors?.map((actor) => (
<div>
<a data-modal-target={actor.id} data-modal-toggle={actor.id} class="cursor-pointer">
<img class="w-full h-[160px] 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}>
</div>
))
}
</div>
26 changes: 26 additions & 0 deletions src/components/common/Document.astro
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
---
import { marked } from 'marked';
import type { Post } from '~/types';
export interface Props {
post: Post;
}
const { post } = Astro.props;
---

<section class="py-8 sm:py-16 lg:py-20 mx-auto">
<article>
<h1
class="px-4 sm:px-6 max-w-4xl mx-auto text-4xl md:text-5xl font-bold leading-tighter tracking-tighter font-heading"
>
{post['pair:label']}
</h1>
<div
class="mx-auto px-6 sm:px-6 max-w-4xl prose prose-md prose-headings:font-heading prose-headings:leading-tighter prose-headings:tracking-tighter prose-headings:font-bold prose-a:text-primary prose-img:rounded-md prose-img:shadow-lg mt-8 prose-headings:scroll-mt-[80px]"
>
<Fragment set:html={marked.parse(post['pair:description'])} />
</div>
</article>
</section>
7 changes: 4 additions & 3 deletions src/components/common/Members.astro
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
---
import dataProvider from '~/config/dataProvider';
import Modal from '../Modal.astro';
import ActorModal from './ActorModal.astro';
export interface Props {
associationsUris: string | [string];
Expand Down Expand Up @@ -30,12 +31,12 @@ const { data: roles } = await dataProvider.getMany('Person', {
const role = roles.find((r) => r.id === association['pair:membershipRole']);
return (
<div>
<a data-modal-target={member.id} data-modal-toggle={member.id}>
<img class="w-36 h-36 rounded-full" src={member.image} alt={member['pair:label']} />
<a data-modal-target={member.id} data-modal-toggle={member.id} class="cursor-pointer">
<img class="w-36 h-[170px] rounded-full" src={member.image} alt={member['pair:label']} />
<div class="text-center truncate font-bold">{member['pair:label']}</div>
<div class="text-center truncate">{role['pair:label']}</div>
</a>
<Modal id={member.id} title={member['pair:label']} />
<ActorModal actor={member} />
</div>
);
})}
Expand Down
37 changes: 37 additions & 0 deletions src/components/common/Roles.astro
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
---
import dataProvider from '~/config/dataProvider';
export interface Props {
associations: object | [object];
}
const { associations } = Astro.props;
// const { data: associations } = await dataProvider.getMany('MembershipAssociation', {
// ids: Array.isArray(associationsUris) ? associationsUris : [associationsUris],
// });
const { data: organizations } = await dataProvider.getMany('Organization', {
ids: associations.filter((a) => a?.['pair:membershipOrganization']).map((a) => a['pair:membershipOrganization']),
});
const { data: roles } = await dataProvider.getMany('Person', {
ids: [...new Set(associations.filter((a) => a?.['pair:membershipRole']).map((a) => a['pair:membershipRole']))],
});
---

<div class="grid gap-4 grid-cols-4">
{
associations?.map((association) => {
const organization = organizations.find((m) => m.id === association['pair:membershipOrganization']);
const role = roles.find((r) => r.id === association['pair:membershipRole']);
return (
<a href={`/organisations/${encodeURIComponent(organization?.id)}`}>
<img class="w-full h-[142.5px] rounded-full" src={organization?.image} alt={organization?.['pair:label']} />
<div class="text-center truncate font-bold">{organization?.['pair:label']}</div>
<div class="text-center truncate">{role?.['pair:label']}</div>
</a>
);
})
}
</div>
17 changes: 17 additions & 0 deletions src/components/common/Themes.astro
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
---
import dataProvider from '~/config/dataProvider';
export interface Props {
themesUris: string | [string];
}
const { themesUris } = Astro.props;
const { data: themes } = await dataProvider.getMany('Theme', {
ids: Array.isArray(themesUris) ? themesUris : [themesUris],
});
---

<span>
{themes.map((theme) => theme['pair:label']).join(', ')}
</span>
6 changes: 3 additions & 3 deletions src/components/widgets/Header.astro
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ const currentPath = `/${trimSlash(new URL(Astro.url).pathname)}`;
</div>
</div>
<nav
class="items-center w-full md:w-auto hidden md:flex text-default overflow-y-auto overflow-x-hidden md:overflow-y-visible md:overflow-x-auto md:mx-5"
class="items-center w-full md:w-auto hidden md:flex text-default overflow-y-auto overflow-x-hidden md:overflow-y-visible md:overflow-x-auto"
aria-label="Main navigation"
>
<ul
Expand Down Expand Up @@ -122,7 +122,7 @@ const currentPath = `/${trimSlash(new URL(Astro.url).pathname)}`;
}
</ul>
</nav>
<div
<!-- <div
class:list={[
{ 'ml-auto rtl:ml-0 rtl:mr-auto': position === 'left' },
'hidden md:self-center flex md:flex items-center md:mb-0 fixed w-full md:w-auto md:static justify-end left-0 rtl:left-auto rtl:right-0 bottom-0 p-3 md:p-0',
Expand Down Expand Up @@ -155,6 +155,6 @@ const currentPath = `/${trimSlash(new URL(Astro.url).pathname)}`;
)
}
</div>
</div>
</div> -->
</div>
</header>
6 changes: 6 additions & 0 deletions src/config/dataProvider.js
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,12 @@ export default dataProvider({
},
},
},
Document: {
types: ['pair:Document'],
},
Theme: {
types: ['pair:Theme'],
},
},
ontologies,
jsonContext: [
Expand Down
38 changes: 25 additions & 13 deletions src/navigation.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,10 @@ export const headerData = {
text: "L'association",
links: [
{
text: "Statuts, raison d'être, code social",
href: getPermalink('/homes/saas'),
text: "Raison d'être et code social",
href: getPermalink(
'/documents/https%3A%2F%2Fdata.virtual-assembly.org%2Fdocuments%2F7bc5eb12-3772-4cad-b14f-ca90966e4810'
),
},
{
text: 'Organisations membres',
Expand All @@ -19,7 +21,9 @@ export const headerData = {
},
{
text: 'Histoire',
href: getPermalink('/homes/personal'),
href: getPermalink(
'/documents/https%3A%2F%2Fdata.virtual-assembly.org%2Fdocuments%2F6d255935-1515-495a-95c1-d458d6aaee22'
),
},
],
},
Expand All @@ -45,8 +49,17 @@ export const headerData = {
],
},
{
text: 'Blog',
href: '/blog',
text: 'Actualités',
links: [
{
text: 'Blog',
href: '/blog',
},
{
text: 'Agenda',
href: '/agenda',
},
],
},
{
text: 'Communauté',
Expand All @@ -70,17 +83,16 @@ export const headerData = {
],
},
],
actions: [{ text: 'Download', href: 'https://github.com/onwidget/astrowind', target: '_blank' }],
};

export const footerData = {
links: [
{
title: "L'association",
links: [
{ text: 'Statuts', href: '#' },
{ text: "Raison d'être et code social", href: '#' },
{ text: 'Organisations membres', href: '#' },
{ text: 'Equipe', href: '#' },
{ text: "L'équipe", href: '#' },
{ text: 'Histoire', href: '#' },
],
},
Expand All @@ -96,8 +108,8 @@ export const footerData = {
{
title: 'Actualités',
links: [
{ text: 'Blog', href: '#' },
{ text: 'Evénements', href: '#' },
{ text: 'Blog', href: '/blog' },
{ text: 'Agenda', href: '#' },
],
},
{
Expand All @@ -111,14 +123,14 @@ export const footerData = {
},
],
secondaryLinks: [
{ text: 'Terms', href: getPermalink('/terms') },
{ text: 'Privacy Policy', href: getPermalink('/privacy') },
// { text: 'Terms', href: getPermalink('/terms') },
// { text: 'Privacy Policy', href: getPermalink('/privacy') },
],
socialLinks: [
{ ariaLabel: 'Mastodon', icon: 'tabler:brand-mastodon', href: '#' },
{ ariaLabel: 'X', icon: 'tabler:brand-x', href: '#' },
{ ariaLabel: 'RSS', icon: 'tabler:rss', href: getAsset('/rss.xml') },
{ ariaLabel: 'Github', icon: 'tabler:brand-github', href: 'https://github.com/assemblee-virtuelle.org' },
{ ariaLabel: 'Github', icon: 'tabler:brand-github', href: 'https://github.com/assemblee-virtuelle' },
],
footNote: `
Crée avec <a class="text-blue-600 hover:underline dark:text-gray-200" href="https://astro.build/">Astro</a> et <a class="text-blue-600 hover:underline dark:text-gray-200" href="https://archipel.assemblee-virtuelle.org">des données sémantiques</a>.
Expand Down
26 changes: 26 additions & 0 deletions src/pages/documents/[...slug].astro
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
---
import Layout from '~/layouts/PageLayout.astro';
import dataProvider from '~/config/dataProvider';
import Document from '~/components/common/Document.astro';
export const prerender = true;
export async function getStaticPaths() {
const { data: posts } = await dataProvider.getList('Document');
return posts.map((post) => ({
params: { slug: post.id },
props: post,
}));
}
const post = Astro.props;
const metadata = {
title: post['pair:label'],
description: post['pair:comment'],
};
---

<Layout metadata={metadata}>
<Document post={post} />
</Layout>
Loading

0 comments on commit c463592

Please sign in to comment.