move to github notes

common-docs/content/common-theme/render-hooks/note.md

@@ -0,0 +1,52 @@
++++
+title="Note"
+description="Github style notes"
+emoji="📝"
+menu=["hooks"]
++++
+
+This is a [blockquote render hook](https://gohugo.io/render-hooks/blockquotes/#alerts) to render [Github style notes](https://github.blog/changelog/2023-12-14-new-markdown-extension-alerts-provide-distinctive-styling-for-significant-content/). If you mark up a note on GitHub, it will also render in Common.
+
+It actually doesn't produce a blockquote when you invoke it because that is shonky semantics. It produces a section.
+
+The markdown operation of normal blockquotes is unhindered and unchanged.
+
+{{<columns>}}
+
+### Invoke
+
+```
+> [!NOTE]
+> Highlights information that users should take into account, even when skimming.
+
+> [!TIP]
+> Optional information to help a user be more successful.
+
+> [!IMPORTANT]
+> Crucial information necessary for users to succeed.
+
+> [!WARNING]
+> Critical content demanding immediate user attention due to potential risks.
+
+> [!CAUTION]
+> Negative potential consequences of an action.
+```
+
+<--->
+
+> [!NOTE]  
+> Highlights information that users should take into account, even when skimming.
+
+> [!TIP]
+> Optional information to help a user be more successful.
+
+> [!IMPORTANT]  
+> Crucial information necessary for users to succeed.
+
+> [!WARNING]  
+> Critical content demanding immediate user attention due to potential risks.
+
+> [!CAUTION]
+> Negative potential consequences of an action.
+
+{{</columns>}}

common-docs/content/common-theme/shortcodes/note.md

@@ -5,6 +5,46 @@ emoji="📝"
 menu=["shortcodes"]
 +++
 
+{{<columns>}}
+
+### Invoke
+
+```
+> [!NOTE]
+> Highlights information that users should take into account, even when skimming.
+
+> [!TIP]
+> Optional information to help a user be more successful.
+
+> [!IMPORTANT]
+> Crucial information necessary for users to succeed.
+
+> [!WARNING]
+> Critical content demanding immediate user attention due to potential risks.
+
+> [!CAUTION]
+> Negative potential consequences of an action.
+```
+
+<--->
+
+> [!NOTE]  
+> Highlights information that users should take into account, even when skimming.
+
+> [!TIP]
+> Optional information to help a user be more successful.
+
+> [!IMPORTANT]  
+> Crucial information necessary for users to succeed.
+
+> [!WARNING]  
+> Critical content demanding immediate user attention due to potential risks.
+
+> [!CAUTION]
+> Negative potential consequences of an action.
+
+{{</columns>}}
+
 ### Invoke
 
 ```go
@@ -14,5 +54,5 @@ This is the body of the note.
 ```
 
 {{< note title="This is a note" type="tip">}}
-This is the body of the note. This is probably the most used and oldest shortcode on the site. It was brought over from the old Docusaurus syllabus.
+This is the body of the note. This is probably the most used and oldest shortcode on the site. It was brought over from the old Docusaurus syllabus. Since 20 August 2024, we moved to use GitHub notes in a render hook as Hugo began supporting them. So this shortcode will probably be deprecated soon.
 {{< /note >}}

common-theme/assets/styles/02-variables/colors.scss

@@ -5,6 +5,7 @@
   --theme-color--accent: hsl(146, 100%, 46%);
   --theme-color--accent-shade: hsla(146, 100%, 46%, 0.5);
   --theme-color--pop: hsla(262, 100%, 62%, 1);
+  --theme-color--pop-shade: hsla(262, 100%, 62%, 0.375);
   // key
   --hue: 260;
   --sat: 35%;

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

@@ -23,53 +23,18 @@
 
   &__title {
     color: var(--theme-color--ink);
-
-    &::before {
-      display: inline-block;
-      content: "📝 ";
-
-      //override the content based on c-note--modifier parent for warning, exercise, activity, remember, and narrative
-      @at-root .c-note--tip & {
-        content: "💡 ";
-      }
-      @at-root .c-note--warning & {
-        content: "⚠️ ";
-      }
-      @at-root .c-note--exercise & {
-        content: "🏋️ ";
-      }
-      @at-root .c-note--activity & {
-        content: "🎮 ";
-      }
-      @at-root .c-note--remember & {
-        content: "📝 ";
-      }
-      @at-root .c-note--narrative & {
-        content: "📖 ";
-      }
-      @at-root .c-note--discussion & {
-        content: "💬 ";
-      }
-      @at-root .c-note--piece & {
-        content: "🧩 ";
-      }
-      @at-root .c-note--question & {
-        content: "🧐 ";
-      }
-      @at-root .c-note--next & {
-        content: "👉🏿  ";
-      }
-      @at-root .c-note--glossary & {
-        content: "🧑🏻‍🎓  ";
-      }
-    }
   }
 
   &--tip {
-    background: var(--theme-color--accent-shade);
+    background: var(--theme-color--good);
+  }
+  &--important {
+    background: var(--theme-color--pop-shade);
+  }
+  &--warning {
+    background: var(--theme-color--bad);
   }
-  &--glossary {
-    background: none;
-    box-shadow: none;
+  &--caution {
+    background: var(--theme-color--bad);
   }
 }

common-theme/layouts/_default/_markup/render-blockquote.html

@@ -0,0 +1,30 @@
+{{/* These are here so that if you use Github notes
+  They will be parsed and show up on here too
+  Following our rules of always using the most common syntax where possible
+  So content renders correctly on Github and here
+  Use this instead of the note shortcode from now on
+  https://github.blog/changelog/2023-12-14-new-markdown-extension-alerts-provide-distinctive-styling-for-significant-content/
+  https://gohugo.io/render-hooks/blockquotes/#alerts
+*/}}
+
+{{ $emojis := dict
+  "caution" ":exclamation:"
+  "important" ":loudspeaker:"
+  "note" ":memo:"
+  "tip" ":bulb:"
+  "warning" ":warning:"
+}}
+
+{{ if eq .Type "alert" }}
+  <section class="c-note c-note--{{ .AlertType }}">
+    <h4 class="c-note__title">
+      {{ transform.Emojify (index $emojis .AlertType) }}
+      {{ or (i18n .AlertType) (title .AlertType) }}
+    </h4>
+    <div class="c-note__text">{{ .Text | safeHTML }}</div>
+  </section>
+{{ else }}
+  <blockquote>
+    {{ .Text | safeHTML }}
+  </blockquote>
+{{ end }}

common-theme/layouts/shortcodes/note.html

@@ -2,13 +2,25 @@
 
   {{<note title="Yo" type="tip"
 >}}
-This is a note.
-{{< /note >}}
+This is a note. 
+But we probably want to use github notes now, 
+so look in render-blockquote.html for the new syntax.
+
 */}}
+{{ $emojis := dict
+  "caution" ":exclamation:"
+  "important" ":loudspeaker:"
+  "note" ":memo:"
+  "tip" ":bulb:"
+  "warning" ":warning:"
+}}
+{{$title := .Get "title" | default "Note"}}
+{{$noteType := .Get "type" | default "note"}}
 
-<section class="c-note c-note--{{ .Get "type" | default "exercise" }}">
+<section class="c-note c-note--{{$noteType}}">
   <h4 class="c-note__title e-heading__4">
-    <span class="c-note__title-text">{{ .Get "title" | default "Note" }}</span>
+    {{ transform.Emojify (index $emojis $noteType) }}
+      {{ or (i18n $noteType) ($noteType) }}</span>
   </h4>
   <div class="c-note__text ">{{ printf "%s" .Inner | markdownify }}</div>
 </section>