note-me:0.4.0

packages/preview/note-me/0.4.0/.gitignore

@@ -0,0 +1,3 @@
+# Typst PDF Output
+**/*.pdf
+!example.pdf

packages/preview/note-me/0.4.0/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Flandia Yingman
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/preview/note-me/0.4.0/README.md

@@ -0,0 +1,116 @@
+# GitHub Admonition for Typst
+
+> [!NOTE]
+> Add GitHub style admonitions (also known as alerts) to Typst.
+
+## Usage
+
+Import this package, and do
+
+```typ
+// Import from @preview namespace is suggested
+// #import "@preview/note-me:0.3.0": *
+
+// Import from @local namespace is only for debugging purpose
+// #import "@local/note-me:0.3.0": *
+
+// Import relatively is for development purpose
+#import "lib.typ": *
+
+= Basic Examples
+
+#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.
+]
+
+#admonition(
+  icon-path: "icons/stop.svg",
+  color: color.fuchsia,
+  title: "Customize",
+  foreground-color: color.white,
+  background-color: color.black,
+)[
+  The icon, (theme) color, title, foreground and background color are customizable.
+]
+
+#admonition(
+  icon-string: read("icons/light-bulb.svg"),
+  color: color.fuchsia,
+  title: "Customize",
+)[
+  The icon can be specified as a string of SVG. This is useful if the user want to use an SVG icon that is not available in this package.
+]
+
+#admonition(
+  icon: [🙈],
+  color: color.fuchsia,
+  title: "Customize",
+)[
+  Or, pass a content directly as the icon...
+]
+
+= More Examples
+
+#todo[
+  Fix `note-me` package.
+]
+
+
+= Prevent Page Breaks from Breaking Admonitions
+
+#box(
+  width: 1fr,
+  height: 50pt,
+  fill: gray,
+)
+
+#note[
+  #lorem(100)
+]
+```
+
+![github-admonition](example.svg)
+
+Further Reading: 
+
+- https://github.com/orgs/community/discussions/16925
+- https://docs.asciidoctor.org/asciidoc/latest/blocks/admonitions/
+
+## Style
+
+It borrows the style of GitHub's admonition.
+
+> [!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.
+
+## Credits
+
+The admonition icons are from [Octicons](https://github.com/primer/octicons).

packages/preview/note-me/0.4.0/example.typ

@@ -0,0 +1,75 @@
+// Import from @preview namespace is suggested
+// #import "@preview/note-me:0.4.0": *
+
+// Import from @local namespace is only for debugging purpose
+// #import "@local/note-me:0.4.0": *
+
+// Import relatively is for development purpose
+#import "lib.typ": *
+
+= Basic Examples
+
+#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.
+]
+
+#admonition(
+  icon-path: "icons/stop.svg",
+  color: color.fuchsia,
+  title: "Customize",
+  foreground-color: color.white,
+  background-color: color.black,
+)[
+  The icon, (theme) color, title, foreground and background color are customizable.
+]
+
+#admonition(
+  icon-string: read("icons/light-bulb.svg"),
+  color: color.fuchsia,
+  title: "Customize",
+)[
+  The icon can be specified as a string of SVG. This is useful if the user want to use an SVG icon that is not available in this package.
+]
+
+#admonition(
+  icon: [🙈],
+  color: color.fuchsia,
+  title: "Customize",
+)[
+  Or, pass a content directly as the icon...
+]
+
+= More Examples
+
+#todo[
+  Fix `note-me` package.
+]
+
+
+= Prevent Page Breaks from Breaking Admonitions
+
+#box(
+  width: 1fr,
+  height: 50pt,
+  fill: gray,
+)
+
+#note[
+  #lorem(100)
+]

packages/preview/note-me/0.4.0/lib.typ

@@ -0,0 +1,2 @@
+#import "note-me.typ": admonition, note, tip, important, warning, caution
+#import "note-me-more.typ": todo

packages/preview/note-me/0.4.0/note-me-more.typ

@@ -0,0 +1,8 @@
+#import "note-me.typ": admonition
+
+#let todo(title: "TODO", children) = admonition(
+  icon-path: "icons/question.svg",
+  title: title,
+  color: rgb(209, 36, 47),
+  children
+)

packages/preview/note-me/0.4.0/note-me.typ

@@ -0,0 +1,112 @@
+#import "stick-together.typ": stick-together
+
+// From: https://github.com/typst/typst/issues/1939#issuecomment-1680154871
+#let colorize(svg, color) = {
+  let blk = black.to-hex();
+  if svg.contains(blk) { 
+    svg.replace(blk, color.to-hex())
+  } else {
+    svg.replace("<svg ", "<svg fill=\""+color.to-hex()+"\" ")
+  }
+}
+
+// Returns a new SVG image loaded from the specified path, filled with the specified color.
+#let color-svg-path(
+  path,
+  color, 
+  ..args,
+) = {
+  let data = colorize(read(path), color)
+  return image.decode(data, ..args)
+}
+
+// Returns a new SVG image loaded from the specified string (SVG content), filled with the specified color.
+#let color-svg-string(
+  svg,
+  color, 
+  ..args,
+) = {
+  let data = colorize(svg, color)
+  return image.decode(data, ..args)
+}
+
+#let admonition(
+  icon-path: none,
+  icon-string: none,
+  icon: none,
+  title: "Admonition",
+  color: color.black,
+  foreground-color: auto,
+  background-color: none,
+  children
+) = block(
+  width: 100%,
+  inset: (left: 1.25em, right: .5em, top: .5em, bottom: .5em),
+  stroke: (left: 1.75pt + color),
+  fill: background-color,
+  [
+    #stick-together(
+      context stack(
+        dir: if (text.dir == auto) { ltr } else { text.dir },
+        spacing: 1em,
+        align(horizon, {
+          assert(
+            icon-path != none or
+            icon-string != none or
+            icon != none,
+            message: "Either `icon-path`, `icon-string` or `icon` must be specified in the argument."
+          )
+          if (icon-path != none) {
+             color-svg-path(icon-path, color, width: 1em, height: 1em)
+          } 
+          if (icon-string != none) {
+            color-svg-string(icon-string, color, width: 1em, height: 1em)
+          }
+          if (icon != none) {
+            icon
+          }
+        }),
+        align(horizon, text(weight: "bold", fill: color, title))
+      ),
+      {
+        if (foreground-color == auto) {
+          text(children) 
+        } else {
+          text(fill: foreground-color, children) 
+        }
+      },
+      threshold: 3.175em,
+    )
+  ],
+)
+
+#let note(title: "Note", children) = admonition(
+  icon-path: "icons/info.svg",
+  title: title,
+  color: rgb(9, 105, 218),
+  children
+)
+#let tip(title: "Tip", children) = admonition(
+  icon-path: "icons/light-bulb.svg",
+  title: title,
+  color: rgb(31, 136, 61),
+  children
+)
+#let important(title: "Important", children) = admonition(
+  icon-path: "icons/report.svg",
+  title: title,
+  color: rgb(130, 80, 223),
+  children
+)
+#let warning(title: "Warning", children) = admonition(
+  icon-path: "icons/alert.svg",
+  title: title,
+  color: rgb(154, 103, 0),
+  children
+)
+#let caution(title: "Caution", children) = admonition(
+  icon-path: "icons/stop.svg",
+  title: title,
+  color: rgb(209, 36, 47),
+  children
+)