🎉 Book Website (#145)

* Basic script to modify html output

* Modify HTML of website

* Add makefile

* Compile website in CI

* Improve readme

.github/workflows/release-website.yml

@@ -31,7 +31,7 @@ jobs:
           image: ghcr.io/hendricius/the-sourdough-framework:latest
           options: -v ${{ github.workspace }}:/app
           run: |
-            cd /app/book
+            cd /app/website
             make website
       - name: Release baked website to S3
         uses: shallwefootball/s3-upload-action@master
@@ -39,7 +39,7 @@ jobs:
           aws_key_id: ${{ secrets.AWS_KEY_ID }}
           aws_secret_access_key: ${{ secrets.AWS_SECRET_ACCESS_KEY}}
           aws_bucket: ${{ secrets.AWS_BUCKET_WEBSITE }}
-          source_dir: book/static_website_html
+          source_dir: website/static_website_html
           destination_dir: static_html_root
       - name: Invalidate Cloudfront website cache
         uses: chetan/invalidate-cloudfront-action@v2

.gitignore

@@ -60,3 +60,4 @@ book/book_sans_serif-epub/
 book/static_website_html/*
 epub/
 *.opf
+website/static_website_html/*

Dockerfile

@@ -17,11 +17,21 @@ RUN apt-get update && \
     pandoc \
     zip \
     git \
-    wget
+    wget \
+    ruby3.1 \
+    ruby-dev \
+    build-essential
 
 WORKDIR /root
 
-# Support to build amazon kindle books
+# Install ruby for the website build process
+RUN gem install bundler
+COPY website/Gemfile.lock /root
+COPY website/Gemfile /root
+COPY website/.ruby-version /root
+RUN bundle install
+
+# Install support to build amazon kindle books
 RUN wget https://archive.org/download/kindlegen_linux_2_6_i386_v2_9/kindlegen_linux_2.6_i386_v2_9.tar.gz && \
     tar xzf kindlegen_linux_2.6_i386_v2_9.tar.gz && \
     mv kindlegen /usr/bin

README.md

@@ -85,6 +85,20 @@ There's an additional enhanced accessibility version using a sans serif font:
 
 Head over to [https://www.the-sourdough-framework.com](https://www.the-sourdough-framework.com)
 
+To build the website make sure to have the ruby version installed specified in
+`website/.ruby-version`.
+
+```console
+cd website/
+make website
+```
+
+Alternatively you can build the website directly with Docker:
+
+```console
+make website
+```
+
 ## Hardcover version
 
 There is a hardcover version of the book available for purchase. [You can

book/style.css

@@ -78,55 +78,43 @@ nav.TOC{
  .chapterToc ~ .likesectionToc ~ .likesubsectionToc, .chapterToc ~ .likesectionToc ~ .subsectionToc, .chapterToc ~ .sectionToc ~ .likesubsectionToc, .chapterToc ~ .sectionToc ~ .subsectionToc, .likechapterToc ~ .likesectionToc ~ .likesubsectionToc, .likechapterToc ~ .likesectionToc ~ .subsectionToc, .likechapterToc ~ .sectionToc ~ .likesubsectionToc, .likechapterToc ~ .sectionToc ~ .subsectionToc {padding-left:4em;margin-left:0;}
 
 nav.TOC span{
-  display:block;
   margin-top:0;
   font-size:0.8rem;
-  padding:0.5rem;
-  display: flex;
-  justify-content: flex-start;
-}
-
-/* HACKZS since table of contents number is not in HTML Tag */
-/* nav.TOC span {
-  letter-spacing: 10px;
-}
-
-nav.TOC span a {
-  letter-spacing: normal;
-  flex-grow: 1;
-}
-
-nav.TOC span.sectionToc {
-  letter-spacing: normal;
-}
-
-nav.TOC span.sectionToc a {
-  margin-left: 10px;
-}
-
-nav.TOC span.subsectionToc {
-  letter-spacing: normal;
-}
-
-nav.TOC span.subsectionToc a {
-  margin-left: 10px;
-}
-
-
-/* END HACKZS */
-
-nav.TOC span a {
-  flex-grow: 1;
-}
-
-nav.TOC span a:only-child {
-  margin-left: 10px;
 }
 
 nav.TOC a, nav.TOC a:visited{
   text-decoration:none;
 }
 
+.chapterToc,
+.sectionToc,
+.subsectionToc,
+.likechapterToc {
+  display: block;
+}
+
+.chapterToc a,
+.sectionToc a,
+.subsectionToc a,
+.likechapterToc a {
+  display: flex;
+  flex-grow: 1;
+  padding: 7px 10px 7px 15px;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.chapterToc span,
+.sectionToc span,
+.subsectionToc span {
+  display: block;
+}
+
+.chapterToc .chapter_number, .sectionToc .chapter_number, .subsectionToc .chapter_number {
+  margin-right: 7px;
+  white-space: nowrap;
+}
+
 /* ************** */
 /* *** Colors *** */
 /* ************** */

makefile

@@ -18,6 +18,10 @@ push_docker_image:
 
 .PHONY: website
 website: mrproper
+	docker run -it -v $(PWD):/opt/repo $(DOCKER_IMAGE) /bin/bash -c "cd /opt/repo/website && make website"
+
+.PHONY: latex_website
+latex_website: mrproper
 	docker run -it -v $(PWD):/opt/repo $(DOCKER_IMAGE) /bin/bash -c "cd /opt/repo/book && make website"
 
 .PHONY: validate

website/.ruby-version

@@ -0,0 +1 @@
+3.1.2

website/Gemfile

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+source 'https://rubygems.org'
+
+ruby File.read('.ruby-version').strip
+
+gem 'nokogiri'
+gem 'pry'

website/Gemfile.lock

@@ -0,0 +1,27 @@
+GEM
+  remote: https://rubygems.org/
+  specs:
+    coderay (1.1.3)
+    method_source (1.0.0)
+    nokogiri (1.15.3-arm64-darwin)
+      racc (~> 1.4)
+    nokogiri (1.15.3-x86_64-linux)
+      racc (~> 1.4)
+    pry (0.14.2)
+      coderay (~> 1.1)
+      method_source (~> 1.0)
+    racc (1.7.1)
+
+PLATFORMS
+  arm64-darwin-22
+  x86_64-linux
+
+DEPENDENCIES
+  nokogiri
+  pry
+
+RUBY VERSION
+   ruby 3.1.2p20
+
+BUNDLED WITH
+   2.4.12

website/makefile

@@ -0,0 +1,5 @@
+.PHONY: website
+website:
+	cd ../book && make mrproper && make website
+	bundle install
+	ruby modify_build.rb

website/modify_build.rb

@@ -0,0 +1,82 @@
+require 'pry'
+require 'nokogiri'
+
+# This class goes through the generated default LaTeX HTML and performs
+# several optimisations on the HTML. Nokogiri is used to facilitate the
+# modifications.
+
+class ModifyBuild
+  def self.build
+    new.build
+  end
+
+  def build
+    build_latex_html
+  end
+
+  def build_latex_html
+    system("rm -rf #{build_dir}/")
+    system("mkdir #{build_dir}/")
+    copy_source_to_local_dir_for_modification
+    list_of_files_to_modify.each do |filename|
+      modify_file(filename)
+    end
+  end
+
+  private
+
+  def modify_file(filename)
+    orig_text = File.read(filename)
+    text = fix_double_slashes(orig_text)
+    text = fix_navigation_bar(text)
+    File.open(filename, "w") {|file| file.puts text }
+  end
+
+  def list_of_files_to_modify
+    Dir.glob("#{build_dir}/*.html")
+  end
+
+  def copy_source_to_local_dir_for_modification
+    system("cd ../book/ && make website") unless source_website_output_exists?
+    system("cp -R ../book/#{build_dir}/* #{build_dir}")
+  end
+
+  def source_website_output_exists?
+    File.directory?("../book/#{build_dir}/")
+  end
+
+  def build_dir
+    'static_website_html'
+  end
+
+  def fix_double_slashes(text)
+    text.gsub(/\/\//, "/")
+  end
+
+  def fix_navigation_bar(text)
+    doc = Nokogiri::HTML(text)
+    elements = [doc.search('.chapterToc'), doc.search('.sectionToc'), doc.search('.subsectionToc')].flatten
+    elements.each do |n|
+      chapter_number_or_nothing = n.children[0].text.strip
+      hyperlink_node = n.children[1]
+      # remove unneeded text and merge into single a tag
+      n.children[0].remove
+      link_text = hyperlink_node.content
+      # no chapter number
+      if chapter_number_or_nothing.length == 0
+        content = hyperlink_node.to_s
+      else
+        link_node_content = %Q{
+        <span class="chapter_number">#{chapter_number_or_nothing}</span>
+        <span class="link_text">#{link_text}</span>
+        }
+        hyperlink_node.inner_html = link_node_content
+        content = hyperlink_node.to_s
+      end
+      n.inner_html = content
+    end
+    doc.to_html
+  end
+end
+
+ModifyBuild.build