#91 moved icons to content management plattform

src/lib/BasePage.svelte

@@ -51,7 +51,7 @@
 {#if sys?.publishedAt && !slug.includes(`blog`)}
   <time>
     <Icon
-      icon="ic:update"
+      icon={$microcopy?.icons?.pages?.index?.update}
       width="1.3em"
       style="padding: 0 4pt; vertical-align: middle;"
     />

src/lib/ChapterList.svelte

@@ -11,7 +11,7 @@
 </script>
 
 <h1>
-  <Icon icon="ic:place" inline />
+  <Icon icon={$microcopy?.icons?.global?.place} inline />
   {$microcopy?.chapterList?.locations}
 </h1>
 <ol>
@@ -21,7 +21,7 @@
 </ol>
 {#if startingChapters.length > 2}
   <h1>
-    <Icon icon="ic:round-construction" inline />
+    <Icon icon={$microcopy?.icons?.pages?.chapterList?.construction} inline />
     {$microcopy?.chapterList?.inSetup}
   </h1>
   <ol>
@@ -32,7 +32,7 @@
 {/if}
 {#if partnerChapters.length > 2}
   <h1>
-    <Icon icon="ic:place" inline />
+    <Icon icon={$microcopy?.icons?.global?.place} inline />
     {$microcopy?.chapterList?.partner}
   </h1>
   <ol>

src/lib/Footer.svelte

@@ -5,12 +5,7 @@
   import { microcopy } from './stores'
   import type { Link } from './types'
 
-  const icon_map: Record<string, string> = {
-    Impressum: `octicon:law`,
-    Datenschutz: `ic:round-privacy-tip`,
-    Spenden: `ic:round-euro`,
-    Satzung: `ion:document-text`,
-  }
+  const icon_map: Record<string, string> = $microcopy?.icons?.pages?.footer ?? []
 
   export let links: Link[]
   export let social: Record<keyof typeof icon_map, string>
@@ -30,10 +25,10 @@
   <span>
     {@html $microcopy?.footer?.site}
     <a href={repository}>
-      <Icon inline icon="ri:open-source-fill" style="padding-right: 3pt;" />open source
+      <Icon inline icon={icon_map[`opensource`]} style="padding-right: 3pt;" />open source
     </a>
     {@html $microcopy?.footer?.uses}
-    <Icon inline icon="bxs:cookie" />
+    <Icon inline icon={icon_map[`cookie`]} />
     Cookies.
   </span>
   {#if $microcopy?.country == `de`}

src/lib/Map.svelte

@@ -8,6 +8,7 @@
 
   export let map: mapboxgl.Map | null = null
   export let markers: MapMarker[] = []
+  // Default values are the german options
   export const { lng, lat, zoom, minZoom, maxZoom } = $microcopy?.map?.location ?? [
     10, 51.3, 5.05, 4, 10,
   ]

src/lib/Nav.svelte

@@ -4,19 +4,12 @@
   import Icon from '@iconify/svelte'
   import { slide } from 'svelte/transition'
   import type { NavLink } from './types'
+  import { microcopy } from './stores'
 
   export let nav: NavLink[]
   export let mobile: boolean
 
-  const icon_map: Record<string, string> = {
-    'Über Uns': `ri:plant-fill`,
-    Standorte: `ic:place`,
-    Mitmachen: `ion:people-circle`,
-    Blog: `fa-solid:rss-square`,
-    Kontakt: `ic:round-alternate-email`,
-    Internes: `fa-solid:hands-helping`,
-    Anmeldung: `ic:round-assignment-ind`,
-  }
+  const icon_map: Record<string, string> = $microcopy?.icons?.pages?.nav ?? {}
 
   let isOpen = false
   let activeSubNav = -1
@@ -64,7 +57,7 @@
     aria-label="Navigationsmenü öffnen"
     style="grid-area: nav;"
   >
-    <Icon icon="heroicons-solid:menu" />
+    <Icon icon={icon_map[`menu`]} />
   </button>
 {/if}
 
@@ -94,7 +87,7 @@
               on:click={setActiveSubNav(idx, false)}
               aria-label="Untermenü {title} öffnen"
             >
-              <Icon icon="bi:chevron-expand" />
+              <Icon icon={icon_map[`expand`]} />
             </button>
           {/if}
         </span>

src/lib/PlaceSelect.svelte

@@ -5,6 +5,7 @@
   import mapbox from 'mapbox-gl'
   import { Geocoder, Map } from '.'
   import type { Place } from './types'
+  import { microcopy } from './stores'
 
   export let value: Place[] = [] // currently selected places
   export let placeholder = ``
@@ -63,7 +64,11 @@
         disabled
       />
       <button on:click={deletePlace(idx)} type="button">
-        <Icon icon="ic:delete" style="width: 3ex;" inline />
+        <Icon
+          icon={$microcopy?.icons?.pages?.placeSelect?.delete}
+          style="width: 3ex;"
+          inline
+        />
       </button>
     </li>
   {/each}

src/lib/PostPreview.svelte

@@ -2,6 +2,7 @@
   import Icon from '@iconify/svelte'
   import { Img, ToolTip } from '.'
   import type { Post } from './types'
+  import { microcopy } from './stores'
 
   export let post: Post
 
@@ -31,28 +32,32 @@
       <address slot="tip">
         {#if author.url}
           <a href={author.url}>
-            <Icon inline icon="bx:link" {style} />{author.url}
+            <Icon inline icon={$microcopy?.icons?.global?.link} {style} />{author.url}
           </a>
           <br />
         {/if}
         {#if author.email}
           <a href="mailto:{author.email}">
-            <Icon inline icon="ic:email" {style} />
+            <Icon inline icon={$microcopy?.icons?.global?.email} {style} />
             {author.email}
           </a>
           <br />
         {/if}
         {#if author.fieldOfStudy}
-          <Icon inline icon="fa-solid:graduation-cap" {style} />{author.fieldOfStudy}
+          <Icon
+            inline
+            icon={$microcopy?.icons?.global?.graduationCap}
+            {style}
+          />{author.fieldOfStudy}
         {/if}
       </address>
     </ToolTip>
     <span>
-      <Icon inline icon="octicon:calendar" {style} />
+      <Icon inline icon={$microcopy?.icons?.global?.calendar} {style} />
       {new Date(date).toLocaleDateString(`de`)}
     </span>
     <span>
-      <Icon inline icon="fa-solid:tags" {style} />{tags.join(`, `)}
+      <Icon inline icon={$microcopy?.icons?.global?.tags} {style} />{tags.join(`, `)}
     </span>
   </div>
   <p>

src/lib/Social.svelte

@@ -1,17 +1,19 @@
 <script lang="ts">
   import Icon from '@iconify/svelte'
+  import { microcopy } from './stores'
 
   export let social: Record<string, string>
   export let style = ``
   export let vertical = false
   export let fixed = false
-  export let include = [`Facebook`, `Twitter`, `Instagram`, `Youtube`, `Linkedin`]
+  export let social_icons: Record<string, string> =
+    $microcopy?.icons?.global?.socials ?? {}
 </script>
 
 <div {style} class:vertical class:fixed>
-  {#each include as key}
+  {#each Object.entries(social_icons) as [key, value]}
     <a href={social[key]} aria-label={key}>
-      <Icon icon="fa-brands:{key.toLowerCase()}" />
+      <Icon icon={value} />
     </a>
   {/each}
 </div>

src/lib/TagList.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import Icon from '@iconify/svelte'
   import { fade, slide } from 'svelte/transition'
-  import type { BlogTag, Post } from './types'
+  import { microcopy } from './stores'
 
   export let posts: Post[]
   export let active_tag = `Alle`
@@ -15,28 +15,9 @@
     }
   }
 
-  const tagOccurrences = Object.entries(tagCounter) as [BlogTag, number][]
-
-  const icons: Record<BlogTag, string> = {
-    Alle: `ic:select-all`,
-    Spenden: `ic:round-euro`,
-    Werbung: `ic:public`,
-    Standortleiter: `fa-solid:graduation-cap`,
-    Erfahrungsberichte: `ic:rate-review`,
-    Nachhilfelehrer: `fa-solid:chalkboard-teacher`,
-    Interview: `ic:question-answer`,
-    'Soziale Partner': `fa-solid:handshake`,
-    Events: `ic:event-available`,
-    Freizeit: `ic:beach-access`,
-    IT: `bx:git-branch`,
-    Bundesvorstand: `ion:stats-chart`,
-    Stipendium: `fa-solid:donate`,
-    Mentoring: `fa-solid:chalkboard-teacher`,
-    Auszeichnung: `fa-solid:award`,
-    Sonstiges: `fa6-solid:earth-europe`,
-    Standorte: `fa6-solid:map-location-dot`,
-  }
+  const tagOccurrences = Object.entries(tagCounter) as [string, number][]
 
+  const icons: Record<string, string> = $microcopy?.icons?.tags?.blog ?? {}
   let open = false
   let viewWidth: number
   const style = `height: 18pt; margin-right: 5pt;`
@@ -45,13 +26,13 @@
 <svelte:window bind:innerWidth={viewWidth} />
 
 <h2>
-  <Icon icon="fa-solid:tags" style="height: 18pt;" />Tags
+  <Icon icon={$microcopy?.icons?.global?.tags} style="height: 18pt;" />Tags
   {#if viewWidth < 750}
     <button on:click={() => (open = !open)} aria-label="Blog Tags öffnen">
       {#if open}
-        <Icon inline icon="ic:round-close" {style} />
+        <Icon inline icon={$microcopy?.icons?.global?.close} {style} />
       {:else}
-        <Icon inline icon="bi:chevron-expand" {style} />
+        <Icon inline icon={$microcopy?.icons?.global?.expand} {style} />
       {/if}
     </button>
   {/if}

src/lib/ThemeSwitcher.svelte

@@ -1,16 +1,18 @@
 <script lang="ts">
   import Icon from '@iconify/svelte'
-  import { colorMode } from './stores'
+  import { colorMode, microcopy } from './stores'
 
   // TODO: i18n the color mode titles
-  const color_mode_icons = {
-    light: [`ic:round-wb-sunny`, `system`],
-    dark: [`octicon:moon-16`, `light`],
-    system: [`bi:laptop`, `dark`],
+  const next_color_mode = {
+    light: `system`,
+    dark: `light`,
+    system: `dark`,
   } as const
 
+  const color_mode_icons = $microcopy?.icons?.global?.theme ?? {}
+
   function set_color_mode() {
-    const next = color_mode_icons[$colorMode][1]
+    const next = next_color_mode[$colorMode]
     $colorMode = next
   }
 </script>
@@ -20,5 +22,5 @@
   on:click={set_color_mode}
   style="display: flex; color: white;"
 >
-  <Icon icon={color_mode_icons[$colorMode][0]} title={$colorMode} />
+  <Icon icon={color_mode_icons[$colorMode]} title={$colorMode} />
 </button>

src/lib/types.ts

@@ -43,32 +43,10 @@ export type Author = {
   fieldOfStudy: string
 }
 
-export const BlogTags = [
-  `Alle`,
-  `Bundesvorstand`,
-  `Erfahrungsberichte`,
-  `Events`,
-  `Freizeit`,
-  `Interview`,
-  `IT`,
-  `Nachhilfelehrer`,
-  `Sonstiges`,
-  `Soziale Partner`,
-  `Spenden`,
-  `Standorte`,
-  `Standortleiter`,
-  `Stipendium`,
-  `Werbung`,
-  `Mentoring`,
-  `Auszeichnung`,
-] as const // use const assertion to turn BlogTags into readonly tuple
-
-export type BlogTag = (typeof BlogTags)[number]
-
 export type Post = Page & {
   author: Author
   date: Date
-  tags: BlogTag[]
+  tags: string[]
   plainBody: string
 }
 

src/routes/+page.svelte

@@ -36,35 +36,35 @@
   <div style="background: var(--light-blue);">
     <span>{data.chapters.filter((ch) => ch.acceptsSignups).length}</span>
     <strong>
-      <Icon inline icon="ic:place" {style} />
+      <Icon inline icon={$microcopy?.icons?.global?.place} {style} />
       {$microcopy?.indexPage?.boxes?.locationsName}</strong
     >
   </div>
   <div style="background: var(--green);">
     <span>{$microcopy?.indexPage?.boxes?.studentsNumber}</span>
     <strong>
-      <Icon inline icon="fa-solid:user-graduate" {style} />
+      <Icon inline icon={$microcopy?.icons?.global?.graduate} {style} />
       {$microcopy?.indexPage?.boxes?.studentsName}</strong
     >
   </div>
   <div style="background: var(--orange);">
     <span>{$microcopy?.indexPage?.boxes.pupilsNumber}</span>
     <strong>
-      <Icon inline icon="fa-solid:child" {style} />
+      <Icon inline icon={$microcopy?.icons?.global?.child} {style} />
       {$microcopy?.indexPage?.boxes?.pupilsName}</strong
     >
   </div>
   <div style="background: var(--green);">
     <span>{$microcopy?.indexPage?.boxes?.scholarshipNumber}</span>
     <strong>
-      <Icon inline icon="fa-solid:user-graduate" {style} />
+      <Icon inline icon={$microcopy?.icons?.global?.graduate} {style} />
       {@html $microcopy?.indexPage?.boxes?.scholarshipName}
     </strong>
   </div>
   <div style="background: var(--light-blue);">
     <span>{$microcopy?.indexPage?.boxes?.organizationMemberNumber}</span>
     <strong>
-      <Icon inline icon="fa6-solid:user-group" {style} />
+      <Icon inline icon={$microcopy?.icons?.global?.group} {style} />
       {@html $microcopy?.indexPage?.boxes?.organizationMemberName}
     </strong>
   </div>

src/routes/auszeichnungen/+page.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { BasePage, Img } from '$lib'
   import Icon from '@iconify/svelte'
+  import { microcopy } from '$root/src/lib/stores.js'
 
   export let data
 
@@ -22,11 +23,11 @@
         <h3 {id}><a href={url}>{title}</a></h3>
         <div>
           <span>
-            <Icon inline icon="octicon:calendar" {style} />
+            <Icon inline icon={$microcopy?.icons?.global?.calendar} {style} />
             {date}
           </span>
           <span>
-            <Icon inline icon="fa-solid:award" {style} />
+            <Icon inline icon={$microcopy?.icons?.global?.award} {style} />
             {prize}
           </span>
         </div>