update socials #146

nfdi4plants · Oct 11, 2024 · a3579e1 · a3579e1
1 parent 76ea601
commit a3579e1
Show file tree

Hide file tree

Showing 11 changed files with 62 additions and 43 deletions.
diff --git a/astro.config.mjs b/astro.config.mjs
@@ -21,6 +21,9 @@ export default defineConfig({
   integrations: [tailwind(), icon({
     include: {
       tabler: ['*'],
+      'academicons' : [
+        'zenodo-square'
+      ],
       'flat-color-icons': [
         'template',
         'gallery',

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -14,6 +14,7 @@
     "@astrojs/react": "^3.6.2",
     "@astrojs/sitemap": "^3.1.6",
     "@astrojs/tailwind": "^5.1.1",
+    "@iconify-json/academicons": "^1.2.1",
     "@iconify-json/flat-color-icons": "^1.2.0",
     "@iconify-json/tabler": "^1.2.3",
     "@types/react": "^18.3.11",

diff --git a/src/components/Footer.astro b/src/components/Footer.astro
@@ -5,6 +5,16 @@ import {URLS} from '~/statics';
 import {Image} from 'astro:assets'
 import logo from '~/assets/images/DataPLANT_logo_bg_transparent.svg';
 import dfgLogo from '~/assets/images/branding/dfg_logo_englisch_blau_en.jpg';
+import { Icon } from 'astro-icon/components';
+
+const socials = [
+  { title: 'GitHub', slug: URLS.SOCIAL_GITHUB, icon: "tabler:brand-github"},
+  { title: 'YouTube', slug: URLS.SOCIAL_YOUTUBE, icon: "tabler:brand-youtube" },
+  { title: 'Twitter-X', slug: URLS.SOCIAL_TWITTER, icon: "tabler:brand-x" },
+  { title: "Bluesky", slug: URLS.SOCIAL_BLUESKY, icon: "tabler:brand-bluesky" },
+  { title: 'Mastodon', slug: URLS.SOCIAL_MASTODOON, icon: "tabler:brand-mastodon"},
+  { title: 'Zenodo', slug: URLS.SOCIAL_ZENODO, icon: "academicons:zenodo-square"},
+]
 ---
 
 <footer class="footer bg-base-300 text-base-content p-10">
@@ -51,26 +61,12 @@ import dfgLogo from '~/assets/images/branding/dfg_logo_englisch_blau_en.jpg';
     </nav>
     <nav>
       <h6 class="footer-title">Social</h6>
-      <div class="grid grid-flow-col gap-4">
-          <a class="navbar-item" href={URLS.SOCIAL_TWITTER} title="Twitter">
-            <!-- https://fontawesome.com/v6.0/docs/web/add-icons/svg-bare -->
-            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" aria-hidden="true" focusable="false" viewBox="0 0 512 512">
-              <path fill="currentColor" d="M459.4 151.7c.325 4.548 .325 9.097 .325 13.65 0 138.7-105.6 298.6-298.6 298.6-59.45 0-114.7-17.22-161.1-47.11 8.447 .974 16.57 1.299 25.34 1.299 49.06 0 94.21-16.57 130.3-44.83-46.13-.975-84.79-31.19-98.11-72.77 6.498 .974 12.99 1.624 19.82 1.624 9.421 0 18.84-1.3 27.61-3.573-48.08-9.747-84.14-51.98-84.14-102.1v-1.299c13.97 7.797 30.21 12.67 47.43 13.32-28.26-18.84-46.78-51.01-46.78-87.39 0-19.49 5.197-37.36 14.29-52.95 51.65 63.67 129.3 105.3 216.4 109.8-1.624-7.797-2.599-15.92-2.599-24.04 0-57.83 46.78-104.9 104.9-104.9 30.21 0 57.5 12.67 76.67 33.14 23.72-4.548 46.46-13.32 66.6-25.34-7.798 24.37-24.37 44.83-46.13 57.83 21.12-2.273 41.58-8.122 60.43-16.24-14.29 20.79-32.16 39.31-52.63 54.25z"/>
-            </svg>
-          </a>
-          <a class="navbar-item" href={URLS.SOCIAL_GITHUB} title="GitHub">
-            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" aria-hidden="true" focusable="false" viewBox="0 0 496 512">
-              <path fill="currentColor" d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/>
-            </svg>
-          </a>
-          <a class="navbar-item" href={URLS.SOCIAL_YOUTUBE} title="YouTube">
-            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" aria-hidden="true" focusable="false" viewBox="0 0 576 512">
-              <path fill="currentColor" d="M549.7 124.1c-6.281-23.65-24.79-42.28-48.28-48.6C458.8 64 288 64 288 64S117.2 64 74.63 75.49c-23.5 6.322-42 24.95-48.28 48.6-11.41 42.87-11.41 132.3-11.41 132.3s0 89.44 11.41 132.3c6.281 23.65 24.79 41.5 48.28 47.82C117.2 448 288 448 288 448s170.8 0 213.4-11.49c23.5-6.321 42-24.17 48.28-47.82 11.41-42.87 11.41-132.3 11.41-132.3s0-89.44-11.41-132.3zm-317.5 213.5V175.2l142.7 81.21-142.7 81.2z"/>
-            </svg>
-          </a>
-          <a class="navbar-item" href={URLS.SOCIAL_ZENODO} style="font-weight: bold;" title="Zenodo">
-            Z
+      <div class="grid grid-flow-col auto-cols-auto gap-4">
+        {socials.map((social) => 
+          <a href={social.slug} title={social.title}>
+            <Icon name={social.icon} class="w-6 h-6"></Icon>
           </a>
+        )}
       </div>
     </nav>
   </div>

diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro
@@ -105,28 +105,27 @@ export const MainNav: RecursiveMenu[] = [
       </span  >
     </NavButton>
     <div class="min-h-[1rem] m-1 border border-solid border-lightblue"></div>
-    <NavButton href={URLS.SOCIAL_TWITTER} props={{title: "Twitter"}}>
-      <span>
-        <!-- https://fontawesome.com/v6.0/docs/web/add-icons/svg-bare -->
-        <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" aria-hidden="true" focusable="false" viewBox="0 0 512 512">
-          <path fill="currentColor" d="M459.4 151.7c.325 4.548 .325 9.097 .325 13.65 0 138.7-105.6 298.6-298.6 298.6-59.45 0-114.7-17.22-161.1-47.11 8.447 .974 16.57 1.299 25.34 1.299 49.06 0 94.21-16.57 130.3-44.83-46.13-.975-84.79-31.19-98.11-72.77 6.498 .974 12.99 1.624 19.82 1.624 9.421 0 18.84-1.3 27.61-3.573-48.08-9.747-84.14-51.98-84.14-102.1v-1.299c13.97 7.797 30.21 12.67 47.43 13.32-28.26-18.84-46.78-51.01-46.78-87.39 0-19.49 5.197-37.36 14.29-52.95 51.65 63.67 129.3 105.3 216.4 109.8-1.624-7.797-2.599-15.92-2.599-24.04 0-57.83 46.78-104.9 104.9-104.9 30.21 0 57.5 12.67 76.67 33.14 23.72-4.548 46.46-13.32 66.6-25.34-7.798 24.37-24.37 44.83-46.13 57.83 21.12-2.273 41.58-8.122 60.43-16.24-14.29 20.79-32.16 39.31-52.63 54.25z"/>
-        </svg>
-      </span>
-    </NavButton>
+    <div class="dropdown dropdown-hover dropdown-end">
+      <NavButton props={{title: "Socials"}}>
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="w-4 h-4"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="currentColor" d="M160 368c26.5 0 48 21.5 48 48l0 16 72.5-54.4c8.3-6.2 18.4-9.6 28.8-9.6L448 368c8.8 0 16-7.2 16-16l0-288c0-8.8-7.2-16-16-16L64 48c-8.8 0-16 7.2-16 16l0 288c0 8.8 7.2 16 16 16l96 0zm48 124l-.2 .2-5.1 3.8-17.1 12.8c-4.8 3.6-11.3 4.2-16.8 1.5s-8.8-8.2-8.8-14.3l0-21.3 0-6.4 0-.3 0-4 0-48-48 0-48 0c-35.3 0-64-28.7-64-64L0 64C0 28.7 28.7 0 64 0L448 0c35.3 0 64 28.7 64 64l0 288c0 35.3-28.7 64-64 64l-138.7 0L208 492z"/></svg>
+      </NavButton>
+      <Menu 
+        isOpen={true} 
+        menu={[
+          { title: 'YouTube', slug: URLS.SOCIAL_YOUTUBE, icon: "tabler:brand-youtube" },
+          { title: 'Twitter-X', slug: URLS.SOCIAL_TWITTER, icon: "tabler:brand-x" },
+          { title: "Bluesky", slug: URLS.SOCIAL_BLUESKY, icon: "tabler:brand-bluesky" },
+          { title: 'Mastodon', slug: URLS.SOCIAL_MASTODOON, icon: "tabler:brand-mastodon"}
+        ]} 
+        className="dropdown-content menu bg-base-100 text-base-content lg:border-r-2 min-h-full w-80 p-4 menu-sm"></Menu>
+    </div>
     <NavButton href={URLS.SOCIAL_GITHUB} props={{title: "GitHub"}}>
       <span>
         <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" aria-hidden="true" focusable="false" viewBox="0 0 496 512">
           <path fill="currentColor" d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/>
         </svg>
       </span>
     </NavButton>
-    <NavButton href={URLS.SOCIAL_YOUTUBE} props={{title: "YouTube"}}>
-      <span>
-        <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" aria-hidden="true" focusable="false" viewBox="0 0 576 512">
-          <path fill="currentColor" d="M549.7 124.1c-6.281-23.65-24.79-42.28-48.28-48.6C458.8 64 288 64 288 64S117.2 64 74.63 75.49c-23.5 6.322-42 24.95-48.28 48.6-11.41 42.87-11.41 132.3-11.41 132.3s0 89.44 11.41 132.3c6.281 23.65 24.79 41.5 48.28 47.82C117.2 448 288 448 288 448s170.8 0 213.4-11.49c23.5-6.321 42-24.17 48.28-47.82 11.41-42.87 11.41-132.3 11.41-132.3s0-89.44-11.41-132.3zm-317.5 213.5V175.2l142.7 81.21-142.7 81.2z"/>
-        </svg>
-      </span>
-    </NavButton>
     <NavButton href={URLS.SOCIAL_ZENODO} props={{title: "Zenodo", style: "font-weight: bold;"}}>
       <span>
         Z

diff --git a/src/components/events/EventInfoList.tsx b/src/components/events/EventInfoList.tsx
@@ -24,15 +24,15 @@ export default function EventInfoList({event, additional}: Props) {
         <InlineIcon icon="tabler:calendar-time" className="text-xl"/>
         <span>
           {formatterDate.format(event.data.start) + " " + formatterTime.format(event.data.start)}
-          -
+          <span> – </span>
           {formatterDate.format(event.data.end) + " " + formatterTime.format(event.data.end)}
         </span>
       </li>
       {/* tutors optional */}
       {event.data.tutors && <li className="flex items-center gap-2">
         <InlineIcon icon="tabler:user" className="text-xl" aria-label="Tutors" />
         <span>
-          <b>With </b> {event.data.tutors.join(', ')}
+          <b>With </b> {event.data.tutors.map((tutor, index) => <span dangerouslySetInnerHTML={{__html: index > 0 ? ", " + tutor : tutor}}></span>)}
         </span>
       </li>}
       {/* location */}
@@ -47,7 +47,7 @@ export default function EventInfoList({event, additional}: Props) {
       <li className="flex items-center gap-2">
         <InlineIcon icon="tabler:info-square-rounded" className="text-xl" aria-label="Info" />
         <span>
-          {event.data.category} - {event.data.mode}
+          {event.data.category} | {event.data.mode}
         </span>
       </li>
       {/* audience */}

diff --git a/src/components/navbar/Menu.astro b/src/components/navbar/Menu.astro
@@ -1,5 +1,6 @@
 ---
 import {type RecursiveMenu} from '~/types';
+import { Icon } from 'astro-icon/components';
 
 interface Props {
   menu: RecursiveMenu | RecursiveMenu[];
@@ -17,12 +18,15 @@ const menuArray = Array.isArray(menu) ? menu : [menu];
 
 <ul class:list={[className]} class="lg:min-w-max" tabindex="0">
   {menuArray.map((entry: RecursiveMenu) => (
-    <li>
-      {entry.children ? (
+    <li class="flex-row">
+      <span class="w-full">
+        { entry.icon && <Icon name={entry.icon} class="w-4 h-4 !text-secondary inline"></Icon>} 
         <a href={entry.slug} class:list={[{"underline": (currentPathWithoutTrailingBackslash === entry.slug)}, "decoration-primary"]}>{entry.title}</a>
+      </span>
+      {entry.children ? (
         <Astro.self menu={entry.children} isOpen={isOpen} class:list={[className]}/>
       ) : (
-        <a href={entry.slug} class:list={[{"underline": (currentPathWithoutTrailingBackslash === entry.slug)}, "decoration-primary"]}>{entry.title}</a>
+        null
       )}
     </li>
   ))}

diff --git a/src/content/events/2024-10-24_ceplas-arc-workshop.md b/src/content/events/2024-10-24_ceplas-arc-workshop.md
@@ -13,8 +13,10 @@ location:
   url: https://www.ceplas.eu/en/contact/how-to-get-there
 image: ~/assets/images/events/ceplas-ARCs.drawio.png
 tutors:
-  - Dominik Brilhaus (CEPLAS)
-  - Sabrina Zander (MibiNet)
+  # - <a href="github.com/brilator">Dominik Brilhaus</a> (<a href="https://www.google.de">CEPLAS</a>)
+  # - Sabrina Zander (MibiNet)
+  - <a href="http://localhost:4321/events/2024-10-24_ceplas-arc-workshop#tech-check">authors</a>
+  - <a href="http://localhost:4321/events/2024-10-24_ceplas-arc-workshop#tech-check">affiliations</a>
 organizer:
   name: Dominik Brilhaus
   affiliation: CEPLAS Data

diff --git a/src/pages/events/[...slug].astro b/src/pages/events/[...slug].astro
@@ -90,8 +90,9 @@ const additionalMetadata: ({
             <span set:html={event.data.registration.description}></span>
           </p>
           {event.data.registration.seats && (
+            <h4 class="text-primary mb-0">Maximum number of participants</h4>
             <p class="text-lg">
-              <Icon name="tabler:armchair" class="inline" title="Seats"/> {event.data.registration.seats}
+               <Icon name="tabler:armchair" class="inline" title="Maximum number of participants"/> {event.data.registration.seats}
             </p>
           )}
           {event.data.registration.url && (

diff --git a/src/statics.ts b/src/statics.ts
@@ -14,6 +14,8 @@ export enum URLS {
   ARCHIVE = "https://archive.nfdi4plants.org/communities/dataplant",
   ARCSEARCH = "https://arcregistry.nfdi4plants.org/isasearch",
 
+  SOCIAL_MASTODOON = "[email protected]",
+  SOCIAL_BLUESKY = "https://bsky.app/profile/nfdi4plants.bsky.social",
   SOCIAL_TWITTER = "https://twitter.com/nfdi4plants",
   SOCIAL_GITHUB = "https://github.com/nfdi4plants",
   SOCIAL_YOUTUBE = "https://www.youtube.com/channel/UCrTBwQWOa0-aWYkwoY104Wg",

diff --git a/src/types.d.ts b/src/types.d.ts
@@ -3,6 +3,7 @@ import type { HTMLAttributes, ImageMetadata } from 'astro/types';
 
 export interface RecursiveMenu {
   title: string;
+  icon?: string;
   slug?: string;
   children?: RecursiveMenu[];
 }