Introduce metadata about track-types

common-theme/assets/styles/04-components/chip.scss

@@ -14,7 +14,9 @@
   }
   &__icon {
     font-size: var(--theme-type-size--2);
-    clip-path: circle();
+    &--circle {
+      clip: circle();
+    }
   }
   @include on-event() {
     .c-chip__title {

common-theme/assets/styles/04-components/map.scss

@@ -26,20 +26,31 @@
     left: 0;
   }
 
-  &__stop {
+  &__stop,
+  &__header {
     position: relative;
     z-index: var(--layer);
     @media (min-width: $c-max) {
       max-width: calc(
         calc(var(--theme-spacing--container) / 3) - var(--theme-spacing--gutter)
       );
     }
+
+    // when this header has details
+    > summary {
+      list-style: "🙋🏾";
+      list-style-position: inside;
+      padding-left: var(--theme-spacing--3);
+    }
+    &[open] > summary {
+      list-style: "💁🏾";
+      list-style-position: inside;
+    }
   }
 
   &__title {
     color: var(--theme-color--brand);
-    position: absolute;
-    z-index: 2;
+    margin-bottom: calc(-1 * var(--theme-spacing--4));
     transform: translate3d(
         calc(-1 * var(--theme-spacing--3)),
         calc(-1 * var(--theme-spacing--5)),

common-theme/assets/styles/04-components/terms.scss

@@ -0,0 +1,7 @@
+.c-terms {
+  max-width: var(--theme-spacing--linelength);
+  dt {
+    font-weight: 600;
+    color: var(--theme-color--brand);
+  }
+}

common-theme/layouts/_default/term.html

@@ -3,20 +3,30 @@
 
   {{ partial "page-header.html" . }}
     <article class="c-copy">
-      <h3>📛 This is a term definition page</h3>
+    {{ with .Page.Params.details }}
+      <dl class="c-terms">
+        {{ range $metadatum := index . }}
+          <dt>{{ index $metadatum "name" }}</dt> <dd>{{ index $metadatum "value" }}</dd>
+        {{ end }}
+      </dl>
+    {{ end }}
+
       {{ .Content }}
       {{ with .Pages }}
       <footer class="c-page__footer">
-        <h4>Citations</h4>
+        <h3>🏷️ Tagged</h3>
         <ul class="c-label__list">
         {{ range sort . "Title"}}
           <li class="c-label" style="--color:var(--theme-color--block)">
         {{ with .Permalink }}<a href="{{ .}}">{{end}}
             <span class="c-label__name">{{ .Params.emoji |default "🧩"}} {{ .Title }}</span>
         {{ with .Permalink }}</a>{{end}}
       </li>    
+
         {{ end }}
         </ul>
+      <hr>
+       <h5 class="e-heading__6">📛 This is a term definition page</h5>
       </footer>
       {{ end }}
     </article>

common-theme/layouts/partials/block/link.html

@@ -13,7 +13,7 @@
       <img
         src="{{ $chip.RelPermalink }}"
         alt="{{ $blockData.name }}"
-        class="c-chip__icon" />
+        class="c-chip__icon c-chip__icon--circle" />
     {{ end }}
     <h4 class="c-chip__title e-heading__2">{{ $blockData.name }}</h4>
     {{ with $blockData.caption }}

common-theme/layouts/partials/map-common.html

@@ -1,34 +1,52 @@
-{{/*
-Expects a slice[dict] param containing an ordered list of dicts with the following keys, one per section in the map to render:
-* title (string) - The heading to display for the section.
-* values (slice[Page]) - A slice of Pages, one per page in the section which should be listed.
+{{/* Expects a slice[dict] param containing an ordered list of dicts with the following keys, one per section in the map to render:
+  * title (string) - The heading to display for the section.
+  * values (slice[Page]) - A slice of Pages, one per page in the section which should be listed.
+  * metadata (slice[dict[string, string]]) - Ordered key-value pairs of extra metadata to display about the section. Each dict should contain a key named "name" and a key named "value".
 */}}
 
+
 <div class="c-map">
-<h1 class="e-heading c-map__start is-none--lt-container">👉🏾</h1>
-{{ range $i, $section := index . "sections" }}
-  {{ $sectionTitle := index $section "title" }}
-  {{ $sectionValues := index $section "values" }}
-  <section class="c-map__block">
-    <h2 class="e-heading c-map__title">
-      📍{{ $i }}:
-      {{ $sectionTitle }}
-    </h2>
-    <ol class="c-map__timeline">
-      {{/* Check if a menu for the current map section exists */}}
-      {{ if $sectionValues }}
-        {{/* Range over the items in the menu */}}
-        {{ range $iterator, $module := $sectionValues }}
-          <li
-            class="c-map__stop"
-            style="--layer:{{ sub (len $sectionValues) (add $iterator 1) }}">
-              {{ partial "card.html" $module }}
-          </li>
-        {{ end }}
+  <h1 class="e-heading c-map__start is-none--lt-container">👉🏾</h1>
+  {{ range $i, $section := index . "sections" }}
+    {{ $sectionTitle := index $section "title" }}
+    {{ $sectionTermPageLink := index $section "termPageLink" }}
+    {{ $sectionValues := index $section "values" }}
+    <section class="c-map__block">
+      {{ if $sectionTermPageLink }}
+        <details class="c-map__header">
+          <summary class="c-map__title">
+            <h2 class="e-heading">
+              <a href="{{ $sectionTermPageLink }}">{{ $sectionTitle }}</a>
+            </h2>
+          </summary>
+          <dl class="c-map__terms c-terms">
+            {{ range $metadatum := index $section "metadata" }}
+              <dt>{{ index $metadatum "name" }}</dt>
+              <dd>{{ index $metadatum "value" }}</dd>
+            {{ end }}
+          </dl>
+        </details>
       {{ else }}
-        <li>No items found for {{ $sectionTitle }}</li>
+        <h2 class="e-heading c-map__title">
+          📍{{ $i }}:
+          {{ $sectionTitle }}
+        </h2>
       {{ end }}
-    </ol>
-  </section>
-{{ end }}
+      <ol class="c-map__timeline">
+        {{/* Check if a menu for the current map section exists */}}
+        {{ if $sectionValues }}
+          {{/* Range over the items in the menu */}}
+          {{ range $iterator, $module := $sectionValues }}
+            <li
+              class="c-map__stop"
+              style="--layer:{{ sub (len $sectionValues) (add $iterator 1) }}">
+              {{ partial "card.html" $module }}
+            </li>
+          {{ end }}
+        {{ else }}
+          <li>No items found for {{ $sectionTitle }}</li>
+        {{ end }}
+      </ol>
+    </section>
+  {{ end }}
 </div>

common-theme/layouts/partials/map-taxonomy.html

@@ -11,7 +11,7 @@
   {{ $termTitle := $termPage.Title }}
   {{ $values := index (index site.Taxonomies $taxonomy_to_map) $termID }}
 
-  {{ $section := dict "title" $termTitle "values" $values }}
+  {{ $section := dict "title" $termTitle "termPageLink" $termPage.RelPermalink "values" $values "metadata" $termPage.Params.details }}
   {{ $sections = append $section $sections }}
 {{ end }}
 

org-cyf-tracks/content/track_kinds/jobs-after-itp/_index.md

@@ -1,4 +1,11 @@
 +++
 title = "Jobs after ITP"
 weight = 2
+description = "These are course materials targeting specific jobs."
+[[details]]
+name = "When"
+value = "When a job requiring one of these tracks is available, CYF will announce when the track will run."
+[[details]]
+name = "Who"
+value = "You must have completed the Introduction to Programming course, be enrolled as a trainee, and want the job it's targeting. If you are planning to do the Software Development Course, you probably want to prepare for the Piscine and SDC rather than taking one of these tracks."
 +++

org-cyf-tracks/content/track_kinds/jobs-after-sdc/_index.md

@@ -1,4 +1,11 @@
 +++
 title = "Jobs after SDC"
 weight = 3
+description = "These are course materials targeting specific jobs."
+[[details]]
+name = "When"
+value = "When a job requiring one of these tracks is available, CYF will announce when the track will run."
+[[details]]
+name = "Who"
+value = "You must have completed the Software Development Course, be enrolled as a trainee, and want the job it's targeting."
 +++

org-cyf-tracks/content/track_kinds/self-study/_index.md

@@ -1,4 +1,8 @@
 +++
 title = "Self-study"
 weight = 1
+description = "These are are course materials introducing topics which you can study on your own or in a group. They are not targeted at specific jobs, but can help broaden your knowledge."
+[[details]]
+name = "When"
+value = "You can study these tracks any time. They list what you need to know before starting."
 +++