New styles organization

fadado · Apr 2, 2017 · 0e58fa9 · 0e58fa9
1 parent 72fecaf
commit 0e58fa9
Show file tree

Hide file tree

Showing 35 changed files with 122 additions and 170 deletions.
diff --git a/README.md b/README.md
@@ -9,8 +9,8 @@ The tools used in the implementation of _jqt_ are:
 * [Pandoc](http://pandoc.org/), a universal document converter.
 * [Bash](https://www.gnu.org/software/bash/), [sed](https://www.gnu.org/software/sed/) and other shell tools.
 
-If you want to learn how to use _jqt_ consult the documentation at
-<https://fadado.github.io/jqt/>. The documentation is generated using _jqt_ in
+If you want to learn how to use _jqt_ visit the site 
+<https://fadado.github.io/jqt/>. The site pages are generated using _jqt_ in
 the [`docs`](./docs/) folder of this repository.
 If you are interested in _jq_ you can see also [JBOL](https://fadado.github.io/jbol/),
 a related project with a collection of modules for the _jq_ language.
@@ -43,7 +43,7 @@ are:
 
 ### Installation
 
-In systems with the GNU software installed tools as [Bash](https://www.gnu.org/software/bash/),
+In systems with the GNU software installed tools such as [Bash](https://www.gnu.org/software/bash/),
 [sed](https://www.gnu.org/software/sed/) and other shell tools are installed by default.
 To use _jqt_ you must install additional tools like [GPP](https://logological.org/gpp)
 or [Pandoc](http://pandoc.org/); for example, in recent _Fedora Linux_ distributions
@@ -84,7 +84,7 @@ another `jqt` uses.
 
 ### Documentation
 
-The directory [`docs`](./docs/) contains the documentation for _jqt_, and is in itself a subproject with his
+The directory [`docs`](./docs/) contains the source files for _jqt_ documentation, and is in itself a subproject with his
 own makefile. Please see the directory [`docs`](./docs/) for all information on
 this subproject.
 

diff --git a/docs/Makefile b/docs/Makefile
@@ -56,6 +56,7 @@ Destination := /tmp/jqt
 # Input files directories 
 Assets  := ./assets
 Blocks  := ./blocks
+Layouts := ./blocks
 Content := ./content
 Data    := ./data
 Styles  := ./styles
@@ -65,7 +66,7 @@ Common := \
 	$(Metadata)/config.json		\
 	$(Metadata)/snippets.json	\
 	$(Blocks)/*/markup.html		\
-	$(Blocks)/main.html		\
+	$(Layouts)/page.html		\
 	$(Blocks)/filters.jq		\
 	$(Content)/LINKS.txt		\
 	$(Content)/macros.m		\
@@ -130,21 +131,22 @@ DETAILS := sed					\
 $(Destination)/index.html: $(Content)/home.md $(Common) \
 | $(Destination)
 	$(info ==> $@)
-	$(JQT) -d $< $(Blocks)/main.html > $@
+	$(JQT) -d $< $(Layouts)/page.html > $@
 
 $(foreach p,$(Pages),$(Destination)/$(p).html): $(Content)/FLOW.txt $(Content)/opt/*.txt
 $(Destination)/index.html $(Destination)/structure.html: $(Content)/EXAMPLE.txt
 
 define Target
-$(Destination)/$(1).html: $(Content)/$(1).md $(Blocks)/$(2).html $(Common) \
+$(Destination)/$(1).html: $(Content)/$(1).md $(Layouts)/$(2).html $(Common) \
 | $(Destination)
 	$$(info ==> $$@)
-	$(JQT) -d $$< $(Blocks)/$(2).html | $(DETAILS) > $$@
+	$(JQT) -d $$< $(Layouts)/$(2).html | $(DETAILS) > $$@
 endef
 
-$(foreach p,$(Pages),$(eval $(call Target,$(p),page)))
+$(foreach p,$(Pages),$(eval $(call Target,$(p),page-toc)))
 
-$(Destination)/styles.css: $(Styles)/*.css $(Styles)/new/*.css $(Blocks)/*/*style.css $(Styles)/macros.m
+TOPCSS=$(Styles)/page.css 
+$(Destination)/styles.css: $(TOPCSS) $(Styles)/*.css $(Styles)/milligram/*.css $(Blocks)/*/*style.css $(Styles)/bem.m 
 	$(info ==> $@)
 	jqt -P CSS-min -I$(Styles) <$< >$@
 

diff --git a/docs/blocks/body/_toc/markup.html b/docs/blocks/body/_toc/markup.html
@@ -0,0 +1,10 @@
+<#######################################################################
+ # Body with TOC
+ ######################################################################>&
+<main class="#body">
+  <%include blocks/toc/markup.html>
+  <%include blocks/content/markup.html>
+</main>
+<#
+vim:ts=2:sw=2:ai:et:fileencoding=utf8:syntax=html
+#>&
diff --git a/docs/blocks/body/markup.html b/docs/blocks/body/markup.html
@@ -1,12 +1,8 @@
 <#######################################################################
- # Body
+ # Body simple
  ######################################################################>&
 <main class="#body">
-  <%ifndef BODY_BLOCK>&
     <%include blocks/content/markup.html>&
-  <%else>&
-    <%call BODY_BLOCK>
-  <%endif>&
 </main>
 <#
 vim:ts=2:sw=2:ai:et:fileencoding=utf8:syntax=html

diff --git a/docs/blocks/container/markup.html b/docs/blocks/container/markup.html
diff --git a/docs/blocks/content/style.css b/docs/blocks/content/style.css
@@ -3,7 +3,7 @@
 ////////////////////////////////////////////////////////////////////////
 
 &SEL{$content} h2:target::after,
-&SEL{$content} h2:target::after,
+&SEL{$content} h3:target::after,
 &SEL{$content} h4:target::after {
   content: " §";
   color: &ColorQuaternary;

diff --git a/docs/blocks/main.html b/docs/blocks/main.html
diff --git a/docs/blocks/page-toc.html b/docs/blocks/page-toc.html
@@ -0,0 +1,14 @@
+<# Page with toc markup #>&
+<#
+ #  Main page block for content
+ #>&
+<%define BODY_BLOCK
+  <%include blocks/body/_toc/markup.html>
+>&
+<#
+ #  Inherit default layout
+ #>&
+<%include blocks/page.html>&
+<#
+vim:ts=2:sw=2:ai:et:fileencoding=utf8:syntax=perl
+#>&
diff --git a/docs/blocks/page.html b/docs/blocks/page.html
@@ -1,15 +1,39 @@
-<# Layout for documentation pages #>&
+<# Top-level page markup #>&
+<!DOCTYPE html>
+<!-- this document uses polyglot markup (well formed XHTML5)  -->
+<html id="{{.page._id}}" xmlns="http://www.w3.org/1999/xhtml" lang="{{.page.lang//.site.lang}}" xml:lang="{{.page.lang//.site.lang}}">
+  <head>
 <#
- #  Main page block for content
- #>&
-<%define BODY_BLOCK
-  <%include blocks/toc/markup.html>
-  <%include blocks/content/markup.html>
->&
+ #  Meta elements
+ #>
+    <meta charset="utf-8" />
+<# Document title and related metadata #>
+    <title>jqt · {{.page.title}}</title>
+    <meta name='description' content='{{.page.description//empty}}' />
+    <meta name='keywords' content='{{.page.keywords//empty}}' />
+    <meta name='author' content='{{[(.page.author//.site.author)[].name] | sort[]}}' />
+<# More metadata #>
+    <meta name="generator" content="jqt v<%include ../VERSION>" />
+    <meta name='dcterms.date' content='{{.page.updated//empty}}' />
+<# Presentation #>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
+    <link rel="stylesheet" type="text/css" href="styles.css"/>
+    {{.page._highlight}}
+  </head>
 <#
- #  Inherit default layout
- #>&
-<%include blocks/main.html>&
+ #  Document body
+ #>
+  <body class="#container">
+    <%include blocks/header/markup.html>&
+<%ifndef BODY_BLOCK>&
+    <%include blocks/body/markup.html>&
+<%else>&
+    <%call BODY_BLOCK>
+<%endif>&
+    <%include blocks/footer/markup.html>&
+    <%partial analytics 'UA-82432866-1'>&
+  </body>
+</html>
 <#
 vim:ts=2:sw=2:ai:et:fileencoding=utf8:syntax=html
-#>&
+#>
diff --git a/docs/content/content.md b/docs/content/content.md
@@ -1,5 +1,5 @@
 ---
-layout: page
+layout: page-toc
 title: Authoring content in jqt using MarkDown
 description: jqt transforms MarkDown documents to HTML using Pandoc.
 keywords:  jqt, markdown, pandoc, gpp, preprocessing, authoring content

diff --git a/docs/content/data.md b/docs/content/data.md
@@ -1,5 +1,5 @@
 ---
-layout: page
+layout: page-toc
 title: Managing the data model with jqt
 description: jqt combines one template with one MarkDown document and a data model.
 keywords:  jqt, JSON, YAML, gpp, preprocessing, data model

diff --git a/docs/content/engine.md b/docs/content/engine.md
@@ -1,5 +1,5 @@
 ---
-layout: page
+layout: page-toc
 title: The jqt template engine
 description: jqt orchestrates several shell utilities to transform MarkDown text and YAML or JSON data into a final HTML page.
 keywords:  jqt, jq, YAML, gpp, preprocessing, template engine

diff --git a/docs/content/home.md b/docs/content/home.md
@@ -1,5 +1,5 @@
 ---
-layout: default
+layout: page
 title: Welcome to jqt
 description: Could be jq the basis for a web template engine?
 keywords:  jqt, jq, template engine

diff --git a/docs/content/structure.md b/docs/content/structure.md
@@ -1,5 +1,5 @@
 ---
-layout: page
+layout: page-toc
 title: Defining the page structure with jqt
 description: Web pages structure is defined by the HTML macros.
 keywords:  jqt, jq, gpp, preprocessing, template engine

diff --git a/docs/styles/macros.m → docs/styles/bem.m b/docs/styles/macros.m → docs/styles/bem.m
diff --git a/docs/styles/new/colornames.css → docs/styles/colornames.m b/docs/styles/new/colornames.css → docs/styles/colornames.m
@@ -1,3 +1,4 @@
+// CSS named colors
 &define{Black}{	#000000}
 &define{Navy}{	#000080}
 &define{DarkBlue}{	#00008B}

diff --git a/docs/styles/milligram.css b/docs/styles/milligram.css
@@ -13,21 +13,27 @@
 &define{SpacingScale}{0.7}
 &define{TypographyScale}{0.8}
 
+@media screen {
+  html {
+    background-color: &ColorInitial;
+  }
+}
+
 // Modules
-&include{new/color.css}
-&include{new/base.css}
-&include{new/spacing.css}
-&include{new/typography.css}
-&include{new/blockquote.css}
-&include{new/code.css}
-&include{new/link.css}
-&include{new/list.css}
-&include{new/table.css}
-&include{new/divider.css}
-&include{new/grid.css}
-&include{new/utility.css}
-//&include{new/image.css}
-//&include{new/form.css}
-//&include{new/button.css}
+&include{milligram/color.css}
+&include{milligram/base.css}
+&include{milligram/spacing.css}
+&include{milligram/typography.css}
+&include{milligram/blockquote.css}
+&include{milligram/code.css}
+&include{milligram/link.css}
+&include{milligram/list.css}
+&include{milligram/table.css}
+&include{milligram/divider.css}
+&include{milligram/grid.css}
+&include{milligram/utility.css}
+//&include{milligram/image.css}
+//&include{milligram/form.css}
+//&include{milligram/button.css}
 
 // vim:ts=2:sw=2:ai:et:fileencoding=utf-8:syntax=css
diff --git a/docs/styles/new/base.css → docs/styles/milligram/base.css b/docs/styles/new/base.css → docs/styles/milligram/base.css
diff --git a/docs/styles/new/blockquote.css → docs/styles/milligram/blockquote.css b/docs/styles/new/blockquote.css → docs/styles/milligram/blockquote.css
diff --git a/docs/styles/new/button.css → docs/styles/milligram/button.css b/docs/styles/new/button.css → docs/styles/milligram/button.css
diff --git a/docs/styles/new/code.css → docs/styles/milligram/code.css b/docs/styles/new/code.css → docs/styles/milligram/code.css
diff --git a/docs/styles/new/color.css → docs/styles/milligram/color.css b/docs/styles/new/color.css → docs/styles/milligram/color.css
diff --git a/docs/styles/new/divider.css → docs/styles/milligram/divider.css b/docs/styles/new/divider.css → docs/styles/milligram/divider.css
diff --git a/docs/styles/new/form.css → docs/styles/milligram/form.css b/docs/styles/new/form.css → docs/styles/milligram/form.css
diff --git a/docs/styles/new/grid.css → docs/styles/milligram/grid.css b/docs/styles/new/grid.css → docs/styles/milligram/grid.css
diff --git a/docs/styles/new/image.css → docs/styles/milligram/image.css b/docs/styles/new/image.css → docs/styles/milligram/image.css
diff --git a/docs/styles/new/link.css → docs/styles/milligram/link.css b/docs/styles/new/link.css → docs/styles/milligram/link.css
diff --git a/docs/styles/new/list.css → docs/styles/milligram/list.css b/docs/styles/new/list.css → docs/styles/milligram/list.css
diff --git a/docs/styles/new/spacing.css → docs/styles/milligram/spacing.css b/docs/styles/new/spacing.css → docs/styles/milligram/spacing.css
diff --git a/docs/styles/new/table.css → docs/styles/milligram/table.css b/docs/styles/new/table.css → docs/styles/milligram/table.css
diff --git a/docs/styles/new/typography.css → docs/styles/milligram/typography.css b/docs/styles/new/typography.css → docs/styles/milligram/typography.css
diff --git a/docs/styles/new/utility.css → docs/styles/milligram/utility.css b/docs/styles/new/utility.css → docs/styles/milligram/utility.css
diff --git a/docs/styles/new/default.css b/docs/styles/new/default.css