add digital timing diagram

michaelliao · Jan 10, 2024 · 8888b9c · 8888b9c
1 parent cd403fd
commit 8888b9c
Show file tree

Hide file tree

Showing 2 changed files with 303 additions and 0 deletions.
diff --git a/...tsite-guide/40-write-content/60-advanced-formatting/70-digital-timing/README.md b/...tsite-guide/40-write-content/60-advanced-formatting/70-digital-timing/README.md
@@ -0,0 +1,31 @@
+# Digital Timing
+
+To create a digital timing diagram (wave form), add text inside a fenced code block with the `wavedrom` identifier.
+
+GitSite uses [wavedrom](https://github.com/wavedrom/wavedrom) to render digital timing diagrams. Wavedrom is an open source, JavaScript-based library that makes it easy to render digital timing diagrams into SVG vector graphics.
+
+    ```wavedrom
+    { signal: [
+      { name: "clk",  wave: "p.....|..." },
+      { name: "data", wave: "x.345x|=.x", data: ["head", "body", "tail", "data"] },
+      { name: "req",  wave: "0.1..0|1.0" },
+      {},
+      { name: "ack",  wave: "1.....|01." }
+    ]}
+    ```
+
+```wavedrom
+{ signal: [
+  { name: "clk",  wave: "p.....|..." },
+  { name: "data", wave: "x.345x|=.x", data: ["head", "body", "tail", "data"] },
+  { name: "req",  wave: "0.1..0|1.0" },
+  {},
+  { name: "ack",  wave: "1.....|01." }
+]}
+```
+
+You can specify the alignment by `align=center`.
+
+```alert type=tip
+Use the [wavedrom online editor](https://wavedrom.com/editor.html) to edit your digital timing digram.
+```
diff --git a/themes/default/default-tailwind.tcss b/themes/default/default-tailwind.tcss
@@ -357,6 +357,7 @@ button[type=submit] {
 
 #gsi-content div.alert {
     @apply border-l-4 border-t border-r border-b rounded px-4 py-2 my-4;
+    @apply bg-gray-100 dark:bg-gray-800;
 }
 
 #gsi-content div.alert > p {
@@ -1878,3 +1879,274 @@ svg.mermaid-gitgraph .gitTitleText {
 }
 
 /* end git graph */
+
+/* begin wavedrom */
+
+.svg-wavedrom-text-dark {
+    @apply text-gray-800 dark:text-gray-200;
+}
+.svg-wavedrom-stroke-dark {
+    @apply stroke-gray-800 dark:stroke-gray-200;
+}
+.svg-wavedrom-fill-dark {
+    @apply fill-gray-800 dark:fill-gray-200;
+}
+.svg-wavedrom-fill-light {
+    @apply fill-gray-200 dark:fill-gray-800;
+}
+
+.svg-wavedrom text {
+    font-size: 11pt;
+    font-style: normal;
+    font-variant: normal;
+    font-weight: normal;
+    font-stretch: normal;
+    text-align: center;
+    fill-opacity: 1;
+    font-family: Helvetica
+}
+
+.svg-wavedrom .h1 {
+    font-size: 33pt;
+    font-weight: bold
+}
+
+.svg-wavedrom .h2 {
+    font-size: 27pt;
+    font-weight: bold
+}
+
+.svg-wavedrom .h3 {
+    font-size: 20pt;
+    font-weight: bold
+}
+
+.svg-wavedrom .h4 {
+    font-size: 14pt;
+    font-weight: bold
+}
+
+.svg-wavedrom .h5 {
+    font-size: 11pt;
+    font-weight: bold
+}
+
+.svg-wavedrom .h6 {
+    font-size: 8pt;
+    font-weight: bold
+}
+
+.svg-wavedrom .muted {
+    @apply fill-gray-500;
+}
+
+.svg-wavedrom .warning {
+    @apply fill-yellow-700 dark:fill-yellow-400;
+}
+
+.svg-wavedrom .error {
+    @apply fill-red-700 dark:fill-red-400;
+}
+
+.svg-wavedrom .info {
+    @apply fill-blue-700 dark:fill-blue-400;
+}
+
+.svg-wavedrom .success {
+    @apply fill-green-700 dark:fill-green-400;
+}
+
+.svg-wavedrom .s1 {
+    @apply svg-wavedrom-stroke-dark;
+    fill: none;
+    stroke-width: 1;
+    stroke-linecap: round;
+    stroke-linejoin: miter;
+    stroke-miterlimit: 4;
+    stroke-opacity: 1;
+    stroke-dasharray: none
+}
+
+.svg-wavedrom .s2 {
+    @apply svg-wavedrom-stroke-dark;
+    fill: none;
+    stroke-width: 0.5;
+    stroke-linecap: round;
+    stroke-linejoin: miter;
+    stroke-miterlimit: 4;
+    stroke-opacity: 1;
+    stroke-dasharray: none
+}
+
+.svg-wavedrom .s3 {
+    @apply svg-wavedrom-stroke-dark svg-wavedrom-text-dark;
+    fill: none;
+    stroke-width: 1;
+    stroke-linecap: round;
+    stroke-linejoin: miter;
+    stroke-miterlimit: 4;
+    stroke-opacity: 1;
+    stroke-dasharray: 1, 3;
+    stroke-dashoffset: 0;
+    marker: none;
+    visibility: visible;
+    display: inline;
+    overflow: visible
+}
+
+.svg-wavedrom .s4 {
+    @apply svg-wavedrom-stroke-dark svg-wavedrom-text-dark;
+    fill: none;
+    stroke-width: 1;
+    stroke-linecap: round;
+    stroke-linejoin: miter;
+    stroke-miterlimit: 4;
+    stroke-opacity: 1;
+    stroke-dasharray: none;
+    stroke-dashoffset: 0;
+    marker: none;
+    visibility: visible;
+    display: inline;
+    overflow: visible
+}
+
+.svg-wavedrom .s5 {
+    @apply fill-gray-50 dark:fill-gray-900;
+    /* @apply bg-gray-50 dark:bg-gray-900; */
+    stroke: none
+}
+
+.svg-wavedrom .s6 {
+    @apply svg-wavedrom-fill-dark;
+    fill-opacity: 1;
+    stroke: none
+}
+
+.svg-wavedrom .s7 {
+    /* @apply svg-wavedrom-text-dark svg-wavedrom-fill-light; */
+    color: #000;
+    fill: #fff;
+    fill-opacity: 1;
+    fill-rule: nonzero;
+    stroke: none;
+    stroke-width: 1px;
+    marker: none;
+    visibility: visible;
+    display: inline;
+    overflow: visible
+}
+
+.svg-wavedrom .s8 {
+    @apply svg-wavedrom-text-dark fill-yellow-200;
+    /* color: #000;
+    fill: #ffffb4; */
+    fill-opacity: 1;
+    fill-rule: nonzero;
+    stroke: none;
+    stroke-width: 1px;
+    marker: none;
+    visibility: visible;
+    display: inline;
+    overflow: visible
+}
+
+.svg-wavedrom .s9 {
+    color: #000;
+    fill: #ffe0b9;
+    fill-opacity: 1;
+    fill-rule: nonzero;
+    stroke: none;
+    stroke-width: 1px;
+    marker: none;
+    visibility: visible;
+    display: inline;
+    overflow: visible
+}
+
+.svg-wavedrom .s10 {
+    color: #000;
+    fill: #b9e0ff;
+    fill-opacity: 1;
+    fill-rule: nonzero;
+    stroke: none;
+    stroke-width: 1px;
+    marker: none;
+    visibility: visible;
+    display: inline;
+    overflow: visible
+}
+
+.svg-wavedrom .s11 {
+    color: #000;
+    fill: #ccfdfe;
+    fill-opacity: 1;
+    fill-rule: nonzero;
+    stroke: none;
+    stroke-width: 1px;
+    marker: none;
+    visibility: visible;
+    display: inline;
+    overflow: visible
+}
+
+.svg-wavedrom .s12 {
+    color: #000;
+    fill: #cdfdc5;
+    fill-opacity: 1;
+    fill-rule: nonzero;
+    stroke: none;
+    stroke-width: 1px;
+    marker: none;
+    visibility: visible;
+    display: inline;
+    overflow: visible
+}
+
+.svg-wavedrom .s13 {
+    color: #000;
+    fill: #f0c1fb;
+    fill-opacity: 1;
+    fill-rule: nonzero;
+    stroke: none;
+    stroke-width: 1px;
+    marker: none;
+    visibility: visible;
+    display: inline;
+    overflow: visible
+}
+
+.svg-wavedrom .s14 {
+    color: #000;
+    fill: #f5c2c0;
+    fill-opacity: 1;
+    fill-rule: nonzero;
+    stroke: none;
+    stroke-width: 1px;
+    marker: none;
+    visibility: visible;
+    display: inline;
+    overflow: visible
+}
+
+.svg-wavedrom .s15 {
+    fill: #0041c4;
+    fill-opacity: 1;
+    stroke: none
+}
+
+.svg-wavedrom .s16 {
+    fill: none;
+    stroke: #0041c4;
+    stroke-width: 1;
+    stroke-linecap: round;
+    stroke-linejoin: miter;
+    stroke-miterlimit: 4;
+    stroke-opacity: 1;
+    stroke-dasharray: none
+}
+
+.svg-wavedrom .dot {
+    @apply stroke-gray-700 dark:stroke-gray-300;
+}
+
+/* end wavedrom */