From a37e2295be60d4fdd32fff9272250df7fd2cf845 Mon Sep 17 00:00:00 2001 From: skanaar Date: Tue, 15 Sep 2020 09:06:59 +0200 Subject: [PATCH] graph previews in documentation, various tweaks --- index.html | 77 ++++++++++++++++++++++++++++++++++------------------- nomnoml.css | 13 +++++---- 2 files changed, 56 insertions(+), 34 deletions(-) diff --git a/index.html b/index.html index b235fa0..ff60b46 100644 --- a/index.html +++ b/index.html @@ -30,9 +30,7 @@

Association types

dependency -->
dependency <-->
generalization -:>
- generalization <:-
implementation --:>
- implementation <:--
composition +-
composition +->
aggregation o-
@@ -87,7 +85,7 @@

Directives

#ranker: network-simplex | tight-tree | longest-path

Custom classifier styles

-

A directive that starts with "." define a classifier style. The style is written as a space separated list of modifiers and key/value pairs.

+

A directive that starts with "." define a classifier style. The style is written as a space separated list of modifiers and key/value pairs.

#.box: fill=#8f8 dashed
#.blob: visual=ellipse
@@ -180,77 +178,81 @@

Examples

Usage

Car has an Engine

- 
[Car]->[Engine]
+ 
[Car]->[Engine]

Car owns an arbitrary number of blemished

- 
[Car] +-> 0..* [RustPatches]
+ 
[Car] +-> 0..* [RustPatches]

Car knows its Manufacturer

- 
[Car]o->[Manufacturer]
+ 
[Car]o->[Manufacturer]

Car depends on Fuel

- 
[Car]-->[Fuel]
+ 
[Car]-->[Fuel]

Pickup inherits from Car

- 
[Pickup]-:>[Car]
+ 
[Pickup]-:>[Car]

Car implements interface IVehicle

- 
[Car]--:>[IVehicle]
+ 
[Car]--:>[IVehicle]

Paul and Ron have a named association

- 
[Paul] friend - [Ron]
+ 
[Paul] friend - [Ron]

They both depend on each other

- 
[Chicken]<->[Egg]
+ 
[Chicken]<->[Egg]

Car has some attributes

- 
[Car|maxSpeed: Float;color: Color]
+ 
[Car|maxSpeed: Float;color: Color]

Car has several valves

- 
[Car| valves: Valve\[\] ]
+ 
[Car| valves: Valve\[\] ]

Engine has an operation

- 
[Engine||start()]
+ 
[Engine||start()]

Engine has internal parts

- 
[Engine|
+				
[Engine|
   [Cylinder]->1[Piston]
   [Cylinder]->2[Valve]
 ]

 
 				
Engine is an abstract class

-				
[<abstract>Engine||start()]

+				
[<abstract>Engine||start()]

 
 				
Car is in the package 'vehicles'

-				
[<package>vehicles|[Car]]

+				
[<package>vehicles|[Car]]

 
 				
Car has an attached note

-				
[Car]--[<note>only driven
+				
[Car]--[<note>only driven
   twice a month
 ]

 
 				
Set font

-				
#font: Times

+				
#font: Times
+Text with serifs
+				

 
 				
Layout the diagram really tight

-				
#fontSize: 8
+				
#fontSize: 8
 #spacing: 12
-#padding: 3

+#padding: 3
+Lorem ipsum
+dolor sit amet

 
 				
Tables

-				
[<table>Fruits|
+				
[<table>Fruits|
   Apples  | 17   ||
   Oranges | 4711
 ]

 
 				
Create your own styles

-				
#.box: fill=#8f8 dashed
+				
#.box: fill=#8f8 dashed
 [<box> GreenBox]

 
-				
Divide into mupltiple files

-				
#import: boxy_styles
-[<box> GreenBox]
-

+				
Divide into multiple files

+				
#.blob: fill=pink

+				
#import: blobby_styles
+[<blob> Blobby]

 			
 		
 
@@ -326,6 +328,27 @@ 
Divide into mupltiple files

 		
 		app.signals.on('source-changed', render)
 		app.filesystem.signals.on('updated', render)
+		
+		function renderPreviews() {
+			var files = {}
+			var includes = document.querySelectorAll('[publish-as-file]')
+			for(var i=0; i files[key])
+				var svg = nomnoml.renderSvg(src, document)
+				var div = document.createElement('div')
+				div.innerHTML = svg
+				srcEl.append(div)
+			}
+		}
+		
+		renderPreviews()
 	
 	
 	
diff --git a/nomnoml.css b/nomnoml.css
index f158a75..406b533 100644
--- a/nomnoml.css
+++ b/nomnoml.css
@@ -246,9 +246,9 @@ a:hover img {
 	font-family: Calibri, Helvetica, sans-serif
 }
 .content pre {
-  border-radius: 3px;
+  border-radius: 5px;
   background: #eee8d5;
-  padding: 5px;
+  padding: 8px;
   margin: 2px 0px;
   font-family: Consolas, Monaco, monospace;
   font-size: 14px;
@@ -256,16 +256,15 @@ a:hover img {
 .content h3{
 	display: block;
 	font-family: Calibri, Helvetica, sans-serif;
-	color: #93a1a1;
-	margin: 1em 0 0 0;
+	margin: 1.5em 0 0.5em 0;
 	font-size: inherit;
-	font-weight: normal;
+	color: #0008;
 }
 .content h2{
 	font-size: inherit;
 	display: block;
 	font-family: Calibri, Helvetica, sans-serif;
-	color: #93a1a1;
+	color: #0008;
 	margin: 1em -10px 10px -20px;
   border-bottom: 1px solid #0004;
   padding: 15px 0 7px 20px;
@@ -275,7 +274,7 @@ a:hover img {
 	font-weight: normal;
 	width: 40%;
 	font-family: Calibri, Helvetica, sans-serif;
-	color: #93a1a1;
+	color: #0008;
 }
 
 .content .btn .icon { margin-right: 6px; }