Transfer blog tags + icons to yaml for a CMP

[dominikgeissler]

Maybe we can add the current representation of icons <-> tags in a .yaml-file in order to integrate it into a cmp. Would mean less coding / github interaction and a better experience for writers.

[dominikgeissler]

what do you think about this @janosh ?

[janosh]

@dominikgeissler Sure sounds good. What help do you need? I think @kleinicke might know how to do this?

Also cmp = content management program?

[dominikgeissler]

@janosh yeah exactly (program =~ plattform).

[dominikgeissler]

we often use the same icons in different places (i.e. calendar / graduation cap). do you think we should define certain icons globally (e.g. graduationcap: <icon-here>) and use graduationcap in different contexts or should i simply copy the icons for each page such that we can individually change each icon on the fly? i personally prefer the first option since we can globally choose some standards, but we lose some flexibility of changing each individual icon (i don't think this is a huge loss). what do you think?

[janosh]

I'm fine with changing stuff on the fly. It's usually hard to anticipate future needs so flexibility is king. 😄

[dominikgeissler]

i've extracted all icons¹ we're currently using (by page and an informal description chosen by me):

basePage:
  updated: "ic:update"
chapterList:
  place: "ic:place"
  construction: "ic:round-construction"
footer:
  imprint: "octicon:law"
  dataprivacy: "ic:round-privacy-tip"
  donate: "ic:round-euro"
  statues: "ion:document-text"
  openSource: "ri:open-source-fill"
  cookie: "bxs:cookie"
nav:
  hamburger: "heroicons-solid:menu"
  aboutus: "ri:plant-fill"
  chapters: "ic:place"
  participate: "ion:people-circle"
  blog: "fa-solid:rss-square"
  contact: "ic:round-alternate-email"
  internal: "fa-solid:hands-helping"
  signup: "ic:round-assignment-ind"
  expand: "bi:chevron-expand"
placeSelect:
  delete: "ic:delete"
postPreview:
  link: "bx:link"
  email: "ic:email"
  graduationcap: "fa-solid:graduation-cap"
  calendar: "octicon:calendar"
  tags: "fa-solid:tags"
social:
  facebook: "fa-brands:facebook"
  twitter: "fa-brands:twitter"
  instagram: "fa-brands:instagram"
  youtube: "fa-brands:youtube"
  linkedin: "fa-brands:linkedin"
taglist:
  tag: "fa-solid:tags"
  close: "ic:round-close"
  expand: "bi:chevron-expand"
  blogtag:
    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"
themeswitcher:
  light: "ic:round-wb-sunny"
  dark: "octicon:moon-16"
  system: "bi:laptop"
routes:
  child: "fa-solid:child"
  graduate: "fa-solid:user-graduate"
  place: "ic:place"
  scholarship: "fa-solid:user-graduate"
award:
  calendar: "octicon:calendar"
  prize: "fa-solid:award"
slug:
  person: "bi:person-circle"
  bio: "ic:round-history-edu"
  study: "fa-solid:graduation-cap"
  calendar: "octicon:calendar"
faq:
  'Rund ums Engagement': "fa-solid:hands-helping"
  Nachhilfe: "fa-solid:chalkboard-teacher"
  Vermittlung: "ic:round-support-agent"
  Alle: "ic:select-all"
  Rahmenbedingungen: "ic:filter-frames"
  Vereinsaustritt: "ic:exit-to-app"
  Sonstiges: "ic:round-miscellaneous-services"
  Datenschutz: "ic:round-privacy-tip"
  'Tipps für Standorte': "ic:round-storefront"
  Versicherung: "map:insurance-agency"
  Mitgliederversammlung: "ic:round-group"
  Führungszeugnis: "ic:round-assignment-ind"
  tags: "fa-solid:tags"
learningmaterial:
  Alle: "ic:select-all"
  Mathe: "ic:functions"
  Wissenschaft: "ic:round-science"
  'Lernen mit Karteikarten': "bi:card-text"
  'Viele Fächer': "ic:group-work"
  'Deutsche Sprache': "ic:language"
  Englisch: "fa-brands:erlang"
  Deutschunterricht: "simple-icons:disqus"
  Physik: "simple-icons:atom"
press:
  source: "ion:newspaper"
  calendar: "octicon:calendar"
  chapter: "ic:place"
signup_pupil:
  header: "ri:plant-fill"
signup_student:
  header: "ri:plant-fill"
chapter:
  joinstudent: "fa-solid:graduation-cap"
  studentinfo: "bi:info-circle-fill"
  joinpupil: "fa-solid:child"
  pupilinfo: "bi:info-circle-fill"
  email: "ic:email"

the number of occurrences is given here²:

Icon name	Number of occurrences
ic:place	4
octicon:calendar	4
fa-solid:graduation-cap	4
ri:plant-fill	3
fa-solid:tags	3
fa-solid:chalkboard-teacher	3
ic:select-all	3
bi:chevron-expand	2
ic:email	2
fa-solid:hands-helping	2
bi:info-circle-fill	2
ic:round-assignment-ind	2
fa-solid:award	2
fa-solid:child	2
fa-solid:user-graduate	2
ic:round-privacy-tip	2
ic:round-euro	2
ic:delete	1
ic:round-storefront	1
bx:git-branch	1
simple-icons:atom	1
ic:round-group	1
fa-brands:instagram	1
ic:group-work	1
ic:language	1
bi:card-text	1
ic:rate-review	1
ic:exit-to-app	1
ic:round-history-edu	1
heroicons-solid:menu	1
fa-brands:erlang	1
ic:round-science	1
fa-brands:facebook	1
ic:round-wb-sunny	1
ion:document-text	1
bi:person-circle	1
ic:question-answer	1
ic:update	1
fa6-solid:earth-europe	1
ic:event-available	1
ri:open-source-fill	1
fa-solid:handshake	1
ion:newspaper	1
fa-brands:twitter	1
ic:round-close	1
ic:public	1
map:insurance-agency	1
simple-icons:disqus	1
fa-solid:rss-square	1
bx:link	1
bxs:cookie	1
ion:people-circle	1
ic:round-construction	1
ic:round-alternate-email	1
fa6-solid:map-location-dot	1
octicon:law	1
fa-brands:youtube	1
fa-brands:linkedin	1
ic:round-support-agent	1
octicon:moon-16	1
bi:laptop	1
fa-solid:donate	1
ic:functions	1
ic:filter-frames	1
ic:round-miscellaneous-services	1
ic:beach-access	1
ion:stats-chart	1

i'ld add some icons (e.g. the calendar icon or commonly used ones) to a kind of global set (to maintain a certain consistency) whereas more specific icons (esp. the icon tags ^^) will be encoded similar to the yaml i provided. should i put these in the smallTexts.yaml or create an own *.yaml in contentful? which one do you prefer

---

Footnotes

1. Also as a dict if you want to play around with this as well icon_dict = {'basePage-updated': 'ic:update', 'chapterList-place': 'ic:place', 'chapterList-construction': 'ic:round-construction', 'footer-imprint': 'octicon:law', 'footer-dataprivacy': 'ic:round-privacy-tip', 'footer-donate': 'ic:round-euro', 'footer-statues': 'ion:document-text', 'footer-openSource': 'ri:open-source-fill', 'footer-cookie': 'bxs:cookie', 'nav-hamburger': 'heroicons-solid:menu', 'nav-aboutus': 'ri:plant-fill', 'nav-chapters': 'ic:place', 'nav-participate': 'ion:people-circle', 'nav-blog': 'fa-solid:rss-square', 'nav-contact': 'ic:round-alternate-email', 'nav-internal': 'fa-solid:hands-helping', 'nav-signup': 'ic:round-assignment-ind', 'nav-expand': 'bi:chevron-expand', 'placeSelect-delete': 'ic:delete', 'postPreview-link': 'bx:link', 'postPreview-email': 'ic:email', 'postPreview-graduationcap': 'fa-solid:graduation-cap', 'postPreview-calendar': 'octicon:calendar', 'postPreview-tags': 'fa-solid:tags', 'social-facebook': 'fa-brands:facebook', 'social-twitter': 'fa-brands:twitter', 'social-instagram': 'fa-brands:instagram', 'social-youtube': 'fa-brands:youtube', 'social-linkedin': 'fa-brands:linkedin', 'taglist-tag': 'fa-solid:tags', 'taglist-close': 'ic:round-close', 'taglist-expand': 'bi:chevron-expand', 'taglist-blogtag-Alle': 'ic:select-all', 'taglist-Spenden': 'ic:round-euro', 'taglist-Werbung': 'ic:public', 'taglist-Standortleiter': 'fa-solid:graduation-cap', 'taglist-Erfahrungsberichte': 'ic:rate-review', 'taglist-Nachhilfelehrer': 'fa-solid:chalkboard-teacher', 'taglist-Interview': 'ic:question-answer', 'taglist-Soziale Partner': 'fa-solid:handshake', 'taglist-Events': 'ic:event-available', 'taglist-Freizeit': 'ic:beach-access', 'taglist-IT': 'bx:git-branch', 'taglist-Bundesvorstand': 'ion:stats-chart', 'taglist-Stipendium': 'fa-solid:donate', 'taglist-Mentoring': 'fa-solid:chalkboard-teacher', 'taglist-Auszeichnung': 'fa-solid:award', 'taglist-Sonstiges': 'fa6-solid:earth-europe', 'taglist-Standorte': 'fa6-solid:map-location-dot', 'themeswitcher-light': 'ic:round-wb-sunny', 'themeswitcher-dark': 'octicon:moon-16', 'themeswitcher-system': 'bi:laptop', 'routes-child': 'fa-solid:child', 'routes-graduate': 'fa-solid:user-graduate', 'routes-place': 'ic:place', 'routes-scholarship': 'fa-solid:user-graduate', 'award-calendar': 'octicon:calendar', 'award-prize': 'fa-solid:award', 'slug-person': 'bi:person-circle', 'slug-bio': 'ic:round-history-edu', 'slug-study': 'fa-solid:graduation-cap', 'slug-calendar': 'octicon:calendar', 'faq-Rund ums Engagement': 'fa-solid:hands-helping', 'faq-Nachhilfe': 'fa-solid:chalkboard-teacher', 'faq-Vermittlung': 'ic:round-support-agent', 'faq-Alle': 'ic:select-all', 'faq-Rahmenbedingungen': 'ic:filter-frames', 'faq-Vereinsaustritt': 'ic:exit-to-app', 'faq-Sonstiges': 'ic:round-miscellaneous-services', 'faq-Datenschutz': 'ic:round-privacy-tip', 'faq-Tipps für Standorte': 'ic:round-storefront', 'faq-Versicherung': 'map:insurance-agency', 'faq-Mitgliederversammlung': 'ic:round-group', 'faq-Führungszeugnis': 'ic:round-assignment-ind', 'faq-tags': 'fa-solid:tags', 'learningmaterial-Alle': 'ic:select-all', 'learningmaterial-Mathe': 'ic:functions', 'learningmaterial-Wissenschaft': 'ic:round-science', 'learningmaterial-Lernen mit Karteikarten': 'bi:card-text', 'learningmaterial-Viele Fächer': 'ic:group-work', 'learningmaterial-Deutsche Sprache': 'ic:language', 'learningmaterial-Englisch': 'fa-brands:erlang', 'learningmaterial-Deutschunterricht': 'simple-icons:disqus', 'learningmaterial-Physik': 'simple-icons:atom', 'press-source': 'ion:newspaper', 'press-calendar': 'octicon:calendar', 'press-chapter': 'ic:place', 'signup_pupil-header': 'ri:plant-fill', 'signup_student-header': 'ri:plant-fill', 'chapter-joinstudent': 'fa-solid:graduation-cap', 'chapter-studentinfo': 'bi:info-circle-fill', 'chapter-joinpupil': 'fa-solid:child', 'chapter-pupilinfo': 'bi:info-circle-fill', 'chapter-email': 'ic:email'} ↩

2. With the dictionary {'ic:place': 4, 'fa-solid:graduation-cap': 4, 'octicon:calendar': 4, 'ri:plant-fill': 3, 'fa-solid:tags': 3, 'ic:select-all': 3, 'fa-solid:chalkboard-teacher': 3, 'ic:round-privacy-tip': 2, 'ic:round-euro': 2, 'fa-solid:hands-helping': 2, 'ic:round-assignment-ind': 2, 'bi:chevron-expand': 2, 'ic:email': 2, 'fa-solid:award': 2, 'fa-solid:child': 2, 'fa-solid:user-graduate': 2, 'bi:info-circle-fill': 2, 'ic:update': 1, 'ic:round-construction': 1, 'octicon:law': 1, 'ion:document-text': 1, 'ri:open-source-fill': 1, 'bxs:cookie': 1, 'heroicons-solid:menu': 1, 'ion:people-circle': 1, 'fa-solid:rss-square': 1, 'ic:round-alternate-email': 1, 'ic:delete': 1, 'bx:link': 1, 'fa-brands:facebook': 1, 'fa-brands:twitter': 1, 'fa-brands:instagram': 1, 'fa-brands:youtube': 1, 'fa-brands:linkedin': 1, 'ic:round-close': 1, 'ic:public': 1, 'ic:rate-review': 1, 'ic:question-answer': 1, 'fa-solid:handshake': 1, 'ic:event-available': 1, 'ic:beach-access': 1, 'bx:git-branch': 1, 'ion:stats-chart': 1, 'fa-solid:donate': 1, 'fa6-solid:earth-europe': 1, 'fa6-solid:map-location-dot': 1, 'ic:round-wb-sunny': 1, 'octicon:moon-16': 1, 'bi:laptop': 1, 'bi:person-circle': 1, 'ic:round-history-edu': 1, 'ic:round-support-agent': 1, 'ic:filter-frames': 1, 'ic:exit-to-app': 1, 'ic:round-miscellaneous-services': 1, 'ic:round-storefront': 1, 'map:insurance-agency': 1, 'ic:round-group': 1, 'ic:functions': 1, 'ic:round-science': 1, 'bi:card-text': 1, 'ic:group-work': 1, 'ic:language': 1, 'fa-brands:erlang': 1, 'simple-icons:disqus': 1, 'simple-icons:atom': 1, 'ion:newspaper': 1} ↩

[janosh]

Any action required on my part?

[dominikgeissler]

not atm ^^

[dominikgeissler]

My idea would be to either

• add the icons to the smallTexts.yml
• add a own yaml config file

Since the implementation would be pretty straight forward this is just a design choice. I'm not sure which option is better, however I think a thematic grouping could be an advantage even though this leads to more configuration overhead. Nonetheless I would propose the following structure

icons:
  # globally used icons e.g. mail
  global:
    # e.g.
    # mail: <some-icon>
  pages:
    # convention
    # slug:
    #   textual-description: <icon_name>
    # could also be translated to be more general
    # e.g.
    # standorte:
    #  place: <some-icon>
  blog:
    # some more 'specific' icons e.g. for blog posts
    # e.g.
    # IT: <some-icon>