#13 - From 'space' to 'community'

src/components/OcCardSpace/OcCardSpace.stories.ts → src/components/OcCardCommunity/OcCardCommunity.stories.ts

 import type { Meta, StoryObj } from '@storybook/vue3';
 
-import OcCardSpace from './OcCardSpace.vue';
+import OcCardCommunity from './OcCardCommunity.vue';
 
-const meta: Meta<typeof OcCardSpace> = {
-  component: OcCardSpace,
+const meta: Meta<typeof OcCardCommunity> = {
+  component: OcCardCommunity,
 };
 
 export default meta;
-type Story = StoryObj<typeof OcCardSpace>;
+type Story = StoryObj<typeof OcCardCommunity>;
 
 export const Primary: Story = {
   render: (args) => ({
-    components: { OcCardSpace },
+    components: { OcCardCommunity },
     setup() {
       return { args };
     },
-    template: '<OcCardSpace v-bind="args" />',
+    template: '<OcCardCommunity v-bind="args" />',
   }),
   args: {
-    space: {
+    community: {
       description: {
         fr: "Lauréat de la deuxième vague de l'appel à projet Laboratoire d'Excellence (LabEx) dans le cadre du programme « Investissements d'avenir », le LabEx DRIIHM, Dispositif de Recherche Interdisciplinaire sur les Interactions Hommes-Milieux, regroupe à ce jour 13 Observatoires Hommes-Milieux, outils d'observation de socio-écosystèmes impactés par un événement d'origine anthropique. Créés par le CNRS-INEE en 2007, ils sont répartis en France métropolitaine, en outre-mer et à l’étranger.",
         en: "Laureate of the Laboratory for Excellence project (LabEx) in the program « Investment in the future », the DRIIHM LabEx, Device for Interdisciplinary Research on human-environments Interactions, aggregate 13 human-environments observatories (OHM in french), tools for observing socio-ecosystems impacted by anthropic events. Created by CNRS-INEE in 2007, they are located in metropolitan France, overseas France and abroad."

src/components/OcCardSpace/OcCardSpace.vue → src/components/OcCardCommunity/OcCardCommunity.vue

@@ -5,28 +5,28 @@
     <p class="m-0 font-bold line-clamp-5">
       {{ description }}
     </p>
-    <OcLink :title="$t('home.goToSpace', { label: title })" :to="'/space/' + space.name"
+    <OcLink :title="$t('home.goToCommunity', { label: title })" :to="'/community/' + community.name"
       class="absolute top-0 left-0 h-full w-full" />
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed, type PropType } from 'vue';
-import { type OcSpace } from '../../declarations';
+import { type OcCommunity } from '../../declarations';
 import { useI18n } from 'vue-i18n';
 import OcLink from '@/components/OcLink.vue';
 
 const props = defineProps({
-  space: {
-    type: Object as PropType<OcSpace>,
+  community: {
+    type: Object as PropType<OcCommunity>,
     required: true,
   }
 })
 
 const { locale, fallbackLocale } = useI18n()
 
-const title = computed(() => props.space.title?.[locale.value] ?? props.space.title?.[fallbackLocale.value as string] ?? props.space.name ?? '')
-const description = computed(() => props.space.description?.[locale.value] ?? props.space.description?.[fallbackLocale.value as string] ?? '')
-const logoUrl = computed(() => props.space.logo ?? null)
-const color = computed(() => props.space.color ?? 'olivine')
+const title = computed(() => props.community.title?.[locale.value] ?? props.community.title?.[fallbackLocale.value as string] ?? props.community.name ?? '')
+const description = computed(() => props.community.description?.[locale.value] ?? props.community.description?.[fallbackLocale.value as string] ?? '')
+const logoUrl = computed(() => props.community.logo ?? null)
+const color = computed(() => props.community.color ?? 'olivine')
 </script>
\ No newline at end of file

src/declarations.ts

 import type { ContextDefinition } from "jsonld"
 
-export type OcSpace = {
+export type OcCommunity = {
   identifier: string
   title: undefined | { [locale: string]: string }
   description: undefined | { [locale: string]: string }

src/layout/OcLayoutBiColumn/OcLayoutBiColumn.stories.ts

@@ -21,7 +21,7 @@ export const Default: Story = {
   },
 };
 
-export const WithSpace: Story = {
+export const WithCommunity: Story = {
   render: (args) => ({
     components: { OcLayoutBiColumn },
     setup() {
@@ -30,7 +30,7 @@ export const WithSpace: Story = {
     template: '<OcLayoutBiColumn v-bind="args"><h1>content</h1></OcLayoutBiColumn>',
   }),
   args: {
-    space: {
+    community: {
       description: {
         fr: "Lauréat de la deuxième vague de l'appel à projet Laboratoire d'Excellence (LabEx) dans le cadre du programme « Investissements d'avenir », le LabEx DRIIHM, Dispositif de Recherche Interdisciplinaire sur les Interactions Hommes-Milieux, regroupe à ce jour 13 Observatoires Hommes-Milieux, outils d'observation de socio-écosystèmes impactés par un événement d'origine anthropique. Créés par le CNRS-INEE en 2007, ils sont répartis en France métropolitaine, en outre-mer et à l’étranger.",
         en: "Laureate of the Laboratory for Excellence project (LabEx) in the program « Investment in the future », the DRIIHM LabEx, Device for Interdisciplinary Research on human-environments Interactions, aggregate 13 human-environments observatories (OHM in french), tools for observing socio-ecosystems impacted by anthropic events. Created by CNRS-INEE in 2007, they are located in metropolitan France, overseas France and abroad."

src/layout/OcLayoutBiColumn/OcLayoutBiColumn.vue

@@ -22,7 +22,7 @@
 
 <script setup lang="ts">
 import OcTopBar from '@/components/OcTopBar/OcTopBar.vue';
-import type { OcSpace } from '@/declarations';
+import type { OcCommunity } from '@/declarations';
 import { type PropType } from 'vue';
 import { useI18n } from 'vue-i18n';
 
@@ -31,21 +31,21 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-  space: {
-    type: Object as PropType<OcSpace>,
+  community: {
+    type: Object as PropType<OcCommunity>,
   }
 })
 
 const { locale, fallbackLocale, t } = useI18n()
 
-const spaceTitle = props.space ? props.space.title?.[locale.value] ?? props.space.title?.[fallbackLocale.value as string] : undefined
-const firstColTitle = spaceTitle ?? 'Open Common'
+const communityTitle = props.community ? props.community.title?.[locale.value] ?? props.community.title?.[fallbackLocale.value as string] : undefined
+const firstColTitle = communityTitle ?? 'Open Common'
 
 let firstColDescription = t('home.catchphrase.1') + ' ' + t('home.catchphrase.2')
-if (props.space) {
-  firstColDescription = props.space.description?.[locale.value] ?? props.space.description?.[fallbackLocale.value as string] ?? ''
+if (props.community) {
+  firstColDescription = props.community.description?.[locale.value] ?? props.community.description?.[fallbackLocale.value as string] ?? ''
 }
-const color = props.space ? props.space.color ?? 'olivine' : 'primary'
+const color = props.community ? props.community.color ?? 'olivine' : 'primary'
 </script>
 
 <style scoped>

src/locales/en.ts

@@ -3,7 +3,7 @@ export default {
     contact: {
       subject: "Contact from OpenCommon's welcome",
       body: `Please tell us what is your request:
-      Space creation request? Member account creation request?
+      Community creation request? Member account creation request?
       Incident reporting? Contribution proposition? A suggestion?
       Best regards, OpenCommon team`,
     },
@@ -14,9 +14,9 @@ export default {
       1: 'Research Data Portal:',
       2: 'Submit, Search and Share',
     },
-    goToSpace: 'Go to space {label}',
+    goToCommunity: 'Go to community {label}',
   },
-  spaces: 'Spaces',
+  communities: 'Communities',
   backHome: 'Go back to home page',
   error: {
     title: 'Error',

src/locales/fr.ts

@@ -15,9 +15,9 @@ export default {
       1: 'Portail pour les données de la recherche :',
       2: 'Déposer, Rechercher et Partager',
     },
-    goToSpace: 'Voir la communauté {label}',
+    goToCommunity: 'Voir la communauté {label}',
   },
-  spaces: 'Communautés',
+  communities: 'Communautés',
   backHome: 'Retourner à la page d\'accueil',
   error: {
     title: 'Erreur',

src/pages/space/[space]/index.vue → src/pages/community/[community]/index.vue

 <template>
-  <h1>{{ spaceLabel }}</h1>
+  <h1>{{ communityLabel }}</h1>
   <p>WIP</p>
 </template>
 
@@ -8,5 +8,5 @@ import { useRoute } from 'vue-router';
 
 const route = useRoute();
 
-const spaceLabel = route.params.space
+const communityLabel = route.params.community
 </script>
\ No newline at end of file

src/pages/index.vue

@@ -22,33 +22,33 @@
     </header>
 
     <div class="w-11/12 md:w-10/12 lg:w-9/12 xl:w-7/12 mx-auto mb-10">
-      <p class="font-bold mb-4 text-center text-xl">{{ $t('spaces') }}</p>
+      <p class="font-bold mb-4 text-center text-xl">{{ $t('communities') }}</p>
       <div class="flex justify-center flex-wrap gap-4">
-        <OcCardSpace v-for="space in spaceList" :space='space' />
+        <OcCardCommunity v-for="community in communityList" :community='community' />
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { getSpaceList } from '@/sparql/spaces';
+import { getCommunityList } from '@/sparql/communities';
 import { onMounted, ref } from 'vue';
-import type { OcSpace } from '@/declarations';
+import type { OcCommunity } from '@/declarations';
 
 import InputText from 'primevue/inputtext';
 import IconField from 'primevue/iconfield';
 import InputIcon from 'primevue/inputicon';
-import OcCardSpace from '@/components/OcCardSpace/OcCardSpace.vue';
+import OcCardCommunity from '@/components/OcCardCommunity/OcCardCommunity.vue';
 import OcTopMenu from '@/components/OcTopMenu.vue';
 import { useAccountStore } from '@/stores/account';
 
 const accountStore = useAccountStore()
 
-const spaceList = ref<OcSpace[]>([]);
+const communityList = ref<OcCommunity[]>([]);
 
 onMounted(async () => {
-  const result = await getSpaceList();
-  spaceList.value = result.graph
+  const result = await getCommunityList();
+  communityList.value = result.graph
 });
 
 </script>

src/sparql/spaces.ts → src/sparql/communities.ts

-import type { OcJsonLdDocument, OcSpace } from "@/declarations";
+import type { OcJsonLdDocument, OcCommunity } from "@/declarations";
 import { executeSparqlConstruct } from "./sparql";
 
-export const getSpaceList = async (isAuthenticated: boolean = false): Promise<OcJsonLdDocument<OcSpace>> => {
-  return executeSparqlConstruct<OcSpace>(
+export const getCommunityList = async (isAuthenticated: boolean = false): Promise<OcJsonLdDocument<OcCommunity>> => {
+  return executeSparqlConstruct<OcCommunity>(
     `
       CONSTRUCT { ?space ?p ?o. }
       where {

typed-router.d.ts

@@ -20,8 +20,8 @@ declare module 'vue-router/auto-routes' {
   export interface RouteNamedMap {
     '/:lang/': RouteRecordInfo<'/:lang/', '/:lang', Record<never, never>, Record<never, never>>,
     '/:lang/[...path]': RouteRecordInfo<'/:lang/[...path]', '/:lang/:path(.*)', { path: ParamValue<true> }, { path: ParamValue<false> }>,
+    '/:lang/community/[community]/': RouteRecordInfo<'/:lang/community/[community]/', '/:lang/community/:community', { community: ParamValue<true> }, { community: ParamValue<false> }>,
     '/:lang/connexion': RouteRecordInfo<'/:lang/connexion', '/:lang/connexion', Record<never, never>, Record<never, never>>,
     '/:lang/profile': RouteRecordInfo<'/:lang/profile', '/:lang/profile', Record<never, never>, Record<never, never>>,
-    '/:lang/space/[space]/': RouteRecordInfo<'/:lang/space/[space]/', '/:lang/space/:space', { space: ParamValue<true> }, { space: ParamValue<false> }>,
   }
 }