Source files to generate the diagram images in SVG using Dia.
Table of Contents
build.sh— Create SVG images from Dia sourcefiles.deploy.sh— Copy built SVG images to../../docs_src/.
Object Tree diagrams (Book I: §3.2):
hugo-book1_03_object-tree1.diahugo-book1_03_object-tree1.svghugo-book1_03_object-tree2.diahugo-book1_03_object-tree2.svghugo-book1_03_object-tree3.diahugo-book1_03_object-tree3.svg
Hugo Compiler flowchart (Book II: §25):
hugo-book2_13_flowchart-compiler.diahugo-book2_13_flowchart-compiler.svg
Hugo Engine flowchart (Book II: §26):
hugo-book2_14_flowchart-engine.diahugo-book2_14_flowchart-engine.svg
Hugo Debugger flowchart (Book II: §27):
hugo-book2_15_flowchart-debugger.diahugo-book2_15_flowchart-debugger.svg
Used in §3.2. The Object Tree.
hugo-book1_03_object-tree1.diahugo-book1_03_object-tree1.svg
hugo-book1_03_object-tree2.diahugo-book1_03_object-tree2.svg
hugo-book1_03_object-tree3.diahugo-book1_03_object-tree3.svg
hugo-book2_13_flowchart-compiler.diahugo-book2_13_flowchart-compiler.svg
Used in §25. The Hugo Compiler and How It Works.
hugo-book2_14_flowchart-engine.diahugo-book2_14_flowchart-engine.svg
Used in §26. The Hugo Engine and How It Works.
hugo-book2_15_flowchart-debugger.diahugo-book2_15_flowchart-debugger.svg
Used in §27. Dark Secrets of the Hugo Debugger.
In order to edit the diagram's sourcefile, or to run the scripts in this folder, you'll need to install Dia Diagram Editor, a free and open source cross platform tool for editing diagrams.
Some annotations on Dia assets and settings used in the creation of the SVG diagrams sources.
NOTE — The Courier New font was chosen because it's a universally safe font that should be available on all OSs, including smart phones and tablets.
Attempts to use "monospace" instead of a specific font name didn't turn out to provide reliable cross-browser behaviour, and was deemed as potentially unsafe to use with other backends.
Courier New is expected to be supported by all conversion backends as well as being properly previewed in all formats on all OSs.
For the Object Trees diagrams, I've used Dia's built-in Flowchart Shapes.
And the following fonts:
- Courier New (bold), 28 pt.
For the flowchart diagrams, I've used Dia's built-in Flowchart Shapes.
And the following fonts:
- Courier New (normal, bold), 28 pt.
Text colour variations:
| element | text colour | description |
|---|---|---|
| Element Title | #2660BF |
Medium Blue |
| Ref. Number | #BA3925 |
Dark Red |
For the diagrams shapes background colours, I've used the same colour scheme adopted by VisualParadigm Online Diagrams:
| symbol | bg-colour |
|---|---|
| Terminator | #F8CECC |
| Process | #FFE599 |
| Decision | #FFCE9F |
| Data | #D4E1F5 |
In order to achieve special alignments in the same diagram box, an extra text overlay was used in some places, positioned on top of the main box to ensure that right aligned texts (usually, file names) will be preserved.
This was necessary due to multiple spaces being treated as one, and the impossibility of using special spaces with the Courier New font (e.g. non-breaking spaces or numeric spaces).
When editing the diagrams, be mindful of the presence of these text boxes.
- Dia Diagram Editor — official website and dowloads.
- Flowchart Shapes — details of the flowchart shapes used in this project.
- CSS Tricks » Using Custom Fonts With SVG in an Image Tag — by Thomas Yip.
- Vecta.io » Using Fonts in SVG — by Neel Singh.
Resources and articles on which fonts are safe to use based on common OSs' availability (this affects fonts used in SVG images too):
- CSS Font Stack — A complete collection of web safe CSS font stacks.
- MIT.edu » Safe web fonts — Article by Jacob Morzinski.
- Lifewire » Make Sure You're Using Web Safe Fonts — Article by Jennifer Kyrnin.