Move common styles to bottom of example for clarity.

azriel91 · Aug 4, 2024 · 6f52d38 · 6f52d38
1 parent 8f83ee1
commit 6f52d38
Showing 1 changed file with 36 additions and 35 deletions.
diff --git a/playground/src/app/info_graph_example.yaml b/playground/src/app/info_graph_example.yaml
@@ -128,41 +128,6 @@ theme:
       padding: '3'
       shape_color: amber
 
-selected_outline: &selected_outline
-  outline_color: red
-  outline_style: dashed
-  outline_width: '1'
-  outline_shade: '600'
-
-node_blue_progress: &node_blue_progress
-  <<: *selected_outline
-  shape_color: blue
-  stroke_shade: '600'
-  stroke_style: "dasharray:0.5,3,0.5,3,0.5,3,0.5,3,6,3,12,30"
-  stroke_width: '[2px]'
-  fill_shade: '200'
-  extra: |-
-    [&>ellipse]:[stroke-linecap:round]
-    [&>ellipse]:animate-[ellipse-spin_1.5s_linear_infinite]
-
-node_completed: &node_completed
-  shape_color: green
-  stroke_shade: '600'
-  stroke_style: 'solid'
-  stroke_width: '[2px]'
-  fill_shade: '200'
-
-edge_blue_animated: &edge_blue_animated
-  shape_color: blue
-  stroke_style: dashed  # shorthand for [&>path]:[stroke-dasharray:3]
-  stroke_width: '[2px]'
-  stroke_shade_normal: '600'
-  fill_shade_normal: '500'
-  extra: >-
-    [&>path]:animate-[stroke-dashoffset-move_2s_linear_infinite]
-    [&>path]:visible
-    [&>polygon]:visible
-
 tags:
   tag_step_1: "Step 1"
   tag_step_2: "Step 2"
@@ -260,3 +225,39 @@ css: >-
     0%   { stroke-dashoffset: 0; }
     100% { stroke-dashoffset: -248; }
   }
+
+common_styles: # not part of `info_graph`, but it ignores unknown keys
+  selected_outline: &selected_outline
+    outline_color: red
+    outline_style: dashed
+    outline_width: '1'
+    outline_shade: '600'
+
+  node_blue_progress: &node_blue_progress
+    <<: *selected_outline
+    shape_color: blue
+    stroke_shade: '600'
+    stroke_style: "dasharray:0.5,3,0.5,3,0.5,3,0.5,3,6,3,12,30"
+    stroke_width: '[2px]'
+    fill_shade: '200'
+    extra: |-
+      [&>ellipse]:[stroke-linecap:round]
+      [&>ellipse]:animate-[ellipse-spin_1.5s_linear_infinite]
+
+  node_completed: &node_completed
+    shape_color: green
+    stroke_shade: '600'
+    stroke_style: 'solid'
+    stroke_width: '[2px]'
+    fill_shade: '200'
+
+  edge_blue_animated: &edge_blue_animated
+    shape_color: blue
+    stroke_style: dashed  # shorthand for [&>path]:[stroke-dasharray:3]
+    stroke_width: '[2px]'
+    stroke_shade_normal: '600'
+    fill_shade_normal: '500'
+    extra: >-
+      [&>path]:animate-[stroke-dashoffset-move_2s_linear_infinite]
+      [&>path]:visible
+      [&>polygon]:visible