Add HTML output using make4ht

2 files changed, 131 insertions, 79 deletions

diff --git a/assets/manual2/filter.lua b/assets/manual2/filter.lua
new file mode 100644
index 0000000..865f0ec
--- /dev/null
+++ b/assets/manual2/filter.lua
@@ -0,0 +1,35 @@
+-- taken from https://tex.stackexchange.com/questions/605478
+
+local filter = require "make4ht-filter"
+
+-- this variable will hold contents of the CSS file
+local csscontent
+
+local function load_css(filename)
+	local f = io.open(filename, "r")
+	if f then
+		local content = f:read("*all")
+		f:close()
+		-- make sure that the inline CSS don't mess with make4ht DOM filters
+		content = "<style type='text/css'>\n" .. content .. "\n</style>"
+		return content
+	end
+end
+
+-- this filter chain will insert CSS
+local process = filter{
+	function(html, par)
+		local cssname = par.input .. ".css"
+		-- TeX4ht can produce multiple HTML files. We will load the CSS file contents 
+		-- only for the firts time, and cache it for the future use
+		csscontent = csscontent or load_css(cssname)
+		if csscontent then
+			-- we use just string substitution to replace <link ...href="\jobname.css">
+			-- the replacement function is used in order to prevent Lua errors caused by % characters in CSS
+			html = html:gsub("<link[^>]+" .. cssname .. ".->", function(s) return csscontent  end)
+		end
+		return html
+	end
+}
+
+Make:match("html$",  process)
diff --git a/assets/manual2/manual.tex b/assets/manual2/manual.tex
index 70007e5..331993d 100644
--- a/assets/manual2/manual.tex
+++ b/assets/manual2/manual.tex
@@ -1,7 +1,12 @@
 \documentclass[notitlepage]{article}
+\ifdefined\HCode
+  \def\pgfsysdriver{pgfsys-dvisvgm4ht.def} % for HTML output
+\fi
 \usepackage[a4paper,margin=2cm]{geometry}
+\ifx\HCode\undefined
 \usepackage{beton}
 \usepackage{eulervm}
+\fi
 \usepackage[T1]{fontenc}
 \setlength{\parindent}{0pt}
 \usepackage{listings}
@@ -15,12 +20,14 @@
 \makeindex[columns=1,title=Alphabetical Index,intoc]
 
 % Font substitution: taken from https://ctan.org/tex-archive/macros/latex/contrib/beton/beton.pdf
+\ifx\HCode\undefined
 \AtBeginDocument{
   \DeclareFontShape\encodingdefault{ccr}{bx}{n}{<->sub*cmss/sbc/n}{}
   \DeclareFontShape\encodingdefault{ccr}{bx}{it}{<->sub*cmss/sbc/it}{}
   \DeclareFontShape\encodingdefault{ccr}{bx}{sl}{<->sub*cmss/sbc/sl}{}
   \DeclareFontShape\encodingdefault{ccr}{bx}{sc}{<->sub*cmss/sbc/sc}{}
 }
+\fi
 
 \lstdefinestyle{luastyle}{
   language=[5.1]Lua,
@@ -29,20 +36,25 @@
   tabsize=2
 }
 
+\ifdefined\HCode
+\newcommand{\var}[1]{$\langle$\texttt{#1}$\rangle$}
+\newcommand{\ovar}[1]{$[\langle$\texttt{#1}$\rangle]$}
+\else
 \newcommand{\var}[1]{$\mathit{\langle}$\textrm{\textmd{\textit{#1}}}$\mathit{\rangle}$}
+\newcommand{\ovar}[1]{$\mathit{[\langle}$\textrm{\textmd{\textit{#1}}}$\mathit{\rangle]}$}
+\fi
+
 \newcommand{\vari}[1]{\var{#1$_1$}}
 \newcommand{\varii}[1]{\var{#1$_2$}}
 
-\newcommand{\ovar}[1]{$\mathit{[\langle}$\textrm{\textmd{\textit{#1}}}$\mathit{\rangle]}$}
-
 \def\luatrue{\texttt{true}}
 \def\luafalse{\texttt{false}}
 \def\luanil{\texttt{nil}}
 \def\advtrains{\textsc{advtrains}}
 
-\newenvironment{centeredtikzpicture}{
+\newenvironment{centeredtikzpicture}[1][]{
   \begin{center}
-    \begin{tikzpicture}
+    \begin{tikzpicture}[#1]
     }{
     \end{tikzpicture}
   \end{center}
@@ -56,7 +68,11 @@
   \setlength{\listparindent}{1em}
 }
 \index{#1}
+\ifdefined\HCode
+\providecommand{\apientp}[2]{The \textbf{##2} \texttt{##1}: }
+\else
 \providecommand{\apientp}[2]{##1\hfill {##2}\par}
+\fi
 \providecommand{\apient}[2]{\apientp{##1}{##2}\index{##1}}
 \providecommand{\apip}[2]{\apientp{\texttt{##1}}{##2}}
 \providecommand{\api}[2]{\apient{\texttt{##1}}{##2}}
@@ -90,6 +106,7 @@
 
 \begin{document}
 
+\ifx\HCode\undefined
 \thispagestyle{empty}
 \begin{tikzpicture}[remember picture,overlay]
   \newcommand{\HUGE}[1]{\scalebox{2}{\Huge #1}}
@@ -99,6 +116,7 @@
   +(0,0.5) node [above] {\HUGE{Advanced Trains}}
   +(0,-0.5) node [below] {\HUGE{for Minetest}};
 \end{tikzpicture}
+\fi
 
 \newpage
 \maketitle
@@ -326,82 +344,80 @@ The onboard computer allow setting certain properties of the train. Feel free to
 
 The HUD is a visual representation of certain information about the train. An overview of the HUD is as follows:
 
-\begin{center}
-  \begin{tikzpicture}[xscale=0.025,yscale=-0.025]
-    \footnotesize
-    \newcommand{\rect}[3]{
-      \draw[#1] #2 rectangle #3;
-    }
-    \newcommand{\frect}[3]{
-      \rect{#1,fill=#1}{#2}{#3}
-    }
-    \newcommand{\sevenseg}[5]{
-      \def\x{#2}
-      \def\y{#3}
-      \def\w{#4}
-      \def\h{#5}
-      \def\segs{
-        {(\h,0)}/\w/\h,
-        {(0,\h)}/\h/\w,
-        {($(\w,0)+(\h,\h)$)}/\h/\w,
-        {($(0,\w)+(\h,\h)$)}/\w/\h,
-        {($(0,\w)+2*(0,\h)$)}/\h/\w,
-        {($(\w,\w)+\h*(1,2)$)}/\h/\w,
-        {($2*(0,\w)+\h*(1,2)$)}/\w/\h
-      }
-      \foreach \off/\sx/\sy in \segs {
-        \frect{#1}{(\x,\y) ++\off}{++(\sx,\sy)};
-      }
-    }
-    \newcommand{\filledcirclelabel}[2]{
-      \node[circle,text=black,fill=white,draw=black] at #1 {#2};
+\begin{centeredtikzpicture}[xscale=0.025,yscale=-0.025]
+  \footnotesize
+  \newcommand{\rect}[3]{
+    \draw[#1] #2 rectangle #3;
+  }
+  \newcommand{\frect}[3]{
+    \rect{#1,fill=#1}{#2}{#3}
+  }
+  \newcommand{\sevenseg}[5]{
+    \def\x{#2}
+    \def\y{#3}
+    \def\w{#4}
+    \def\h{#5}
+    \def\segs{
+      {(\h,0)}/\w/\h,
+      {(0,\h)}/\h/\w,
+      {($(\w,0)+(\h,\h)$)}/\h/\w,
+      {($(0,\w)+(\h,\h)$)}/\w/\h,
+      {($(0,\w)+2*(0,\h)$)}/\h/\w,
+      {($(\w,\w)+\h*(1,2)$)}/\h/\w,
+      {($2*(0,\w)+\h*(1,2)$)}/\w/\h
     }
-    \newcommand{\plainlabel}[2]{
-      \node[text=black] at #1 {#2};
+    \foreach \off/\sx/\sy in \segs {
+      \frect{#1}{(\x,\y) ++\off}{++(\sx,\sy)};
     }
-    \frect{black}{(0,0)}{+(440,110)}
-    \frect{cyan}{(10,10)}{++(30,30)}
-    \plainlabel{(25,25)}{1}
-    \frect{red}{(50,10)}{++(30,30)}
-    \plainlabel{(65,25)}{2}
-    \frect{orange}{(90,10)}{++(30,30)}
-    \plainlabel{(105,25)}{3}
-    \frect{orange}{(130,10)}{++(30,5)}
-    \frect{orange}{(130,35)}{++(30,5)}
-    \foreach \i in {130,141,152}{\sevenseg{orange}{\i}{18}{4}{2}}
-    \filledcirclelabel{(145,25)}{4}
-    \frect{white}{(187,10)}{++(26,30)}
-    \frect{black}{(189,12)}{++(22,11)}
-    \frect{white}{(170,10)}{++(15,30)}
-    \frect{black}{(172,12)}{++(11,11)}
-    \frect{white}{(215,10)}{++(15,30)}
-    \frect{black}{(217,12)}{++(11,11)}
-    \filledcirclelabel{(200,25)}{5}
-    \draw[cyan,fill=cyan] (245,10)++(0,15) -- +(15,0) -- +(7.5,-15);
-    \draw[orange,fill=orange] (245,85) -- +(15,0) -- +(7.5,15);
-    \frect{DarkSlateGray}{(250,35)}{++(5,40)}
-    \filledcirclelabel{(252.5,55)}{6}
-    \frect{cyan}{(275,10)}{++(5,18)}
-    \frect{white}{(275,28)}{++(5,18)}
-    \frect{orange}{(275,46)}{++(5,36)}
-    \frect{red}{(275,82)}{++(5,18)}
-    \frect{DarkSlateGray}{(292,16)}{++(6,78)}
-    \filledcirclelabel{(295,55)}{7}
-    \foreach \x in {10,21,...,120}{\frect{white}{(\x,65)}{++(8,20)}}
-    \filledcirclelabel{(69,75)}{8}
-    \foreach \x in {197,208,219}{\frect{DarkSlateGray}{(\x,65)}{++(8,20)}}
-    \filledcirclelabel{(212,75)}{9}
-    \frect{red}{(183,60)}{++(3,30)}
-    \filledcirclelabel{(184.5,75)}{10}
-    \draw[red,fill=red] (133,50) -- +(15,0) -- +(7.5,15);
-    \plainlabel{(140.5,54)}{4}
-    \draw[cyan,fill=cyan] (89,100) -- +(15,0) -- +(7.5,-15);
-    \plainlabel{(96.5,96)}{11}
-    \sevenseg{red}{320}{10}{30}{10}
-    \sevenseg{red}{380}{10}{30}{10}
-    \filledcirclelabel{(375,55)}{8}
-  \end{tikzpicture}
-\end{center}
+  }
+  \newcommand{\filledcirclelabel}[2]{
+    \node[circle,text=black,fill=white,draw=black] at #1 {#2};
+  }
+  \newcommand{\plainlabel}[2]{
+    \node[text=black] at #1 {#2};
+  }
+  \frect{black}{(0,0)}{+(440,110)}
+  \frect{cyan}{(10,10)}{++(30,30)}
+  \plainlabel{(25,25)}{1}
+  \frect{red}{(50,10)}{++(30,30)}
+  \plainlabel{(65,25)}{2}
+  \frect{orange}{(90,10)}{++(30,30)}
+  \plainlabel{(105,25)}{3}
+  \frect{orange}{(130,10)}{++(30,5)}
+  \frect{orange}{(130,35)}{++(30,5)}
+  \foreach \i in {130,141,152}{\sevenseg{orange}{\i}{18}{4}{2}}
+  \filledcirclelabel{(145,25)}{4}
+  \frect{white}{(187,10)}{++(26,30)}
+  \frect{black}{(189,12)}{++(22,11)}
+  \frect{white}{(170,10)}{++(15,30)}
+  \frect{black}{(172,12)}{++(11,11)}
+  \frect{white}{(215,10)}{++(15,30)}
+  \frect{black}{(217,12)}{++(11,11)}
+  \filledcirclelabel{(200,25)}{5}
+  \draw[cyan,fill=cyan] (245,10)++(0,15) -- +(15,0) -- +(7.5,-15);
+  \draw[orange,fill=orange] (245,85) -- +(15,0) -- +(7.5,15);
+  \frect{DarkSlateGray}{(250,35)}{++(5,40)}
+  \filledcirclelabel{(252.5,55)}{6}
+  \frect{cyan}{(275,10)}{++(5,18)}
+  \frect{white}{(275,28)}{++(5,18)}
+  \frect{orange}{(275,46)}{++(5,36)}
+  \frect{red}{(275,82)}{++(5,18)}
+  \frect{DarkSlateGray}{(292,16)}{++(6,78)}
+  \filledcirclelabel{(295,55)}{7}
+  \foreach \x in {10,21,...,120}{\frect{white}{(\x,65)}{++(8,20)}}
+  \filledcirclelabel{(69,75)}{8}
+  \foreach \x in {197,208,219}{\frect{DarkSlateGray}{(\x,65)}{++(8,20)}}
+  \filledcirclelabel{(212,75)}{9}
+  \frect{red}{(183,60)}{++(3,30)}
+  \filledcirclelabel{(184.5,75)}{10}
+  \draw[red,fill=red] (133,50) -- +(15,0) -- +(7.5,15);
+  \plainlabel{(140.5,54)}{4}
+  \draw[cyan,fill=cyan] (89,100) -- +(15,0) -- +(7.5,-15);
+  \plainlabel{(96.5,96)}{11}
+  \sevenseg{red}{320}{10}{30}{10}
+  \sevenseg{red}{380}{10}{30}{10}
+  \filledcirclelabel{(375,55)}{8}
+\end{centeredtikzpicture}
 
 \begin{enumerate}
 \item ATC indicator
@@ -1212,12 +1228,13 @@ The time needed to accelerate from $v_0$ to $v_1$ can be calculated as follows:
 
 The distance needed to accelerate from $v_0$ to $v_1$ can be calculated as follows:
 \[ s = \frac{v_1^2 - v_0^2}{2a} \]
-
+\ifx\HCode\undefined
 \appendix
 \newpage
 \part*{Appendices}
 \addcontentsline{toc}{part}{Appendices}
 
 \printindex
+\fi
 
 \end{document}