#91 removed hard-coded references from source code and replaced with …

…microcopy calls, added icons to smallTexts

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

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

src/lib/Footer.svelte

@@ -5,15 +5,8 @@
   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`,
-  }
-
   export let links: Link[]
-  export let social: Record<keyof typeof icon_map, string>
+  export let social: Record<string, string>
 </script>
 
 <footer>
@@ -22,18 +15,22 @@
   <div>
     {#each links as { title, url }}
       <a href={url}>
-        <Icon inline icon={icon_map[title]} />
+        <Icon inline icon={$microcopy?.icons?.footer[title]} />
         {title}
       </a>
     {/each}
   </div>
   <span>
     {@html $microcopy?.footer?.site}
     <a href={repository}>
-      <Icon inline icon="ri:open-source-fill" style="padding-right: 3pt;" />open source
+      <Icon
+        inline
+        icon={$microcopy?.pages?.footer?.opensource}
+        style="padding-right: 3pt;"
+      />open source
     </a>
     {@html $microcopy?.footer?.uses}
-    <Icon inline icon="bxs:cookie" />
+    <Icon inline icon={$microcopy?.pages?.footer?.cookie} />
     Cookies.
   </span>
   {#if $microcopy?.country == `de`}

src/lib/Nav.svelte

@@ -4,20 +4,11 @@
   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`,
-  }
-
   let isOpen = false
   let activeSubNav = -1
   let node: HTMLElement
@@ -64,7 +55,7 @@
     aria-label="Navigationsmenü öffnen"
     style="grid-area: nav;"
   >
-    <Icon icon="heroicons-solid:menu" />
+    <Icon icon={$microcopy?.icons?.pages?.nav?.menu} />
   </button>
 {/if}
 
@@ -86,15 +77,18 @@
             href={url}
             style="display: flex; align-items: center;"
           >
-            <Icon icon={icon_map[title]} style="margin: 0 5pt 0 0;" />
+            <Icon
+              icon={$microcopy?.icons?.pages?.nav[title]}
+              style="margin: 0 5pt 0 0;"
+            />
             {title}
           </a>
           {#if subNav}
             <button
               on:click={setActiveSubNav(idx, false)}
               aria-label="Untermenü {title} öffnen"
             >
-              <Icon icon="bi:chevron-expand" />
+              <Icon icon={$microcopy?.icons?.pages?.nav?.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,5 +1,6 @@
 <script lang="ts">
   import Icon from '@iconify/svelte'
+  import { microcopy } from './stores'
 
   export let social: Record<string, string>
   export let style = ``
@@ -11,7 +12,7 @@
 <div {style} class:vertical class:fixed>
   {#each include as key}
     <a href={social[key]} aria-label={key}>
-      <Icon icon="fa-brands:{key.toLowerCase()}" />
+      <Icon icon={$microcopy?.icons?.global?.socials[key.toLowerCase()]} />
     </a>
   {/each}
 </div>

src/lib/TagList.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
   import Icon from '@iconify/svelte'
   import { fade, slide } from 'svelte/transition'
-  import type { BlogTag, Post } from './types'
+  import type { Post } from './types'
+  import { microcopy } from './stores'
 
   export let posts: Post[]
   export let active_tag = `Alle`
@@ -17,26 +18,6 @@
 
   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`,
-  }
-
   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}
@@ -66,7 +47,11 @@
           class:active={active_tag === tag}
           on:click={() => (active_tag = tag)}
         >
-          <Icon inline icon={icons[tag]} style="margin-right: 6pt" />
+          <Icon
+            inline
+            icon={$microcopy?.icons?.tags?.blog[tag]}
+            style="margin-right: 6pt"
+          />
           {tag} ({count})
         </button>
       </li>

src/lib/ThemeSwitcher.svelte

@@ -1,12 +1,12 @@
 <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`],
+    light: [$microcopy?.icons?.global?.theme?.light, `system`],
+    dark: [$microcopy?.icons?.global?.theme?.dark, `light`],
+    system: [$microcopy?.icons?.global?.theme?.system, `dark`],
   } as const
 
   function set_color_mode() {

src/lib/types.ts

@@ -42,32 +42,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
 }
 
@@ -82,12 +60,12 @@ export type Image = {
 
 export type Yaml = {
   [key: string]:
-    | string
-    | number
-    | Date
-    | boolean
-    | (string | number | Date | boolean)[]
-    | Yaml
+  | string
+  | number
+  | Date
+  | boolean
+  | (string | number | Date | boolean)[]
+  | Yaml
 }
 
 export type PressItem = {

src/routes/+page.svelte

@@ -36,28 +36,28 @@
   <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(--light-blue);">
     <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>

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 '../../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>