add clickable on-hover anchor things, thanks Kim

fix cosmicpython/book#295

Author: hjwp

book/appendix_csvs.html

@@ -13,6 +13,14 @@
 
 /* customisations by harry */
 
+h1, h2, h3, h4, h5, h6 {
+    position: relative;
+}
+
+a.anchor {
+    top: 0;
+}
+
 /* hide inline ditaa/plantuml source listings for images */
 .image-source {
     display: none
@@ -70,7 +78,9 @@
 
 /* Text styles */
 h1{color:var(--primarycolor) !important;}
+
 h2,h3,h4,h5,h6{color:var(--secondarycolor) !important;}
+
 .title{color:var(--tertiarycolor) !important; font-family:"Noto Sans",sans-serif !important;font-style: normal !important; font-weight: normal !important;}
 p{font-family: "Noto Sans",sans-serif !important}
 
@@ -128,7 +138,7 @@
 </div>
 <div id="content">
 <div class="sect1">
-<h2 id="appendix_csvs">Appendix C: Swapping Out the Infrastructure: Do Everything with CSVs</h2>
+<h2 id="appendix_csvs">Appendix C: Swapping Out the Infrastructure: Do Everything with CSVs<a class="anchor" href="#appendix_csvs"></a>Appendix A: Swapping Out the Infrastructure: </h2>
 <div class="sectionbody">
 <div class="paragraph">
 <p>
@@ -309,7 +319,7 @@ <h2 id="appendix_csvs">Appendix C: Swapping Out the Infrastructure: Do Everythin
 with CSVs underlying them instead of a database. And as you&#8217;ll see, it really is relatively straightforward.</p>
 </div>
 <div class="sect2">
-<h3 id="_implementing_a_repository_and_unit_of_work_for_csvs">Implementing a Repository and Unit of Work for CSVs</h3>
+<h3 id="_implementing_a_repository_and_unit_of_work_for_csvs"><a class="anchor" href="#_implementing_a_repository_and_unit_of_work_for_csvs"></a>Implementing a Repository and Unit of Work for CSVs</h3>
 <div class="paragraph">
 <p>
 Here&#8217;s what a CSV-based repository could look like.  It abstracts away all the

book/appendix_django.html

@@ -13,6 +13,14 @@
 
 /* customisations by harry */
 
+h1, h2, h3, h4, h5, h6 {
+    position: relative;
+}
+
+a.anchor {
+    top: 0;
+}
+
 /* hide inline ditaa/plantuml source listings for images */
 .image-source {
     display: none
@@ -70,7 +78,9 @@
 
 /* Text styles */
 h1{color:var(--primarycolor) !important;}
+
 h2,h3,h4,h5,h6{color:var(--secondarycolor) !important;}
+
 .title{color:var(--tertiarycolor) !important; font-family:"Noto Sans",sans-serif !important;font-style: normal !important; font-weight: normal !important;}
 p{font-family: "Noto Sans",sans-serif !important}
 
@@ -128,7 +138,7 @@
 </div>
 <div id="content">
 <div class="sect1">
-<h2 id="appendix_django">Appendix D: Repository and Unit of Work Patterns with Django</h2>
+<h2 id="appendix_django">Appendix D: Repository and Unit of Work Patterns with Django<a class="anchor" href="#appendix_django"></a>Appendix A: Repository and Unit of Work </h2>
 <div class="sectionbody">
 <div class="paragraph">
 <p>
@@ -197,7 +207,7 @@ <h2 id="appendix_django">Appendix D: Repository and Unit of Work Patterns with D
 </table>
 </div>
 <div class="sect2">
-<h3 id="_repository_pattern_with_django">Repository Pattern with Django</h3>
+<h3 id="_repository_pattern_with_django"><a class="anchor" href="#_repository_pattern_with_django"></a>Repository Pattern with Django</h3>
 <div class="paragraph">
 <p>
 
@@ -302,7 +312,7 @@ <h3 id="_repository_pattern_with_django">Repository Pattern with Django</h3>
 some custom methods for translating to and from our domain model.<sup class="footnote">[<a id="_footnoteref_1" class="footnote" href="#_footnotedef_1" title="View footnote.">1</a>]</sup></p>
 </div>
 <div class="sect3">
-<h4 id="_custom_methods_on_django_orm_classes_to_translate_tofrom_our_domain_model">Custom Methods on Django ORM Classes to Translate to/from Our Domain Model</h4>
+<h4 id="_custom_methods_on_django_orm_classes_to_translate_tofrom_our_domain_model"><a class="anchor" href="#_custom_methods_on_django_orm_classes_to_translate_tofrom_our_domain_model"></a>Custom Methods on Django ORM Classes to Translate to/from Our Domain Model</h4>
 <div class="paragraph">
 <p>
 
@@ -388,7 +398,7 @@ <h4 id="_custom_methods_on_django_orm_classes_to_translate_tofrom_our_domain_mod
 </div>
 </div>
 <div class="sect2">
-<h3 id="_unit_of_work_pattern_with_django">Unit of Work Pattern with Django</h3>
+<h3 id="_unit_of_work_pattern_with_django"><a class="anchor" href="#_unit_of_work_pattern_with_django"></a>Unit of Work Pattern with Django</h3>
 <div class="paragraph">
 <p>
 
@@ -502,7 +512,7 @@ <h3 id="_unit_of_work_pattern_with_django">Unit of Work Pattern with Django</h3>
 </div>
 </div>
 <div class="sect2">
-<h3 id="_api_django_views_are_adapters">API: Django Views Are Adapters</h3>
+<h3 id="_api_django_views_are_adapters"><a class="anchor" href="#_api_django_views_are_adapters"></a>API: Django Views Are Adapters</h3>
 <div class="paragraph">
 <p>
 
@@ -552,7 +562,7 @@ <h3 id="_api_django_views_are_adapters">API: Django Views Are Adapters</h3>
 </div>
 </div>
 <div class="sect2">
-<h3 id="_why_was_this_all_so_hard">Why Was This All So Hard?</h3>
+<h3 id="_why_was_this_all_so_hard"><a class="anchor" href="#_why_was_this_all_so_hard"></a>Why Was This All So Hard?</h3>
 <div class="paragraph">
 <p>
 OK, it works, but it does feel like more effort than Flask/SQLAlchemy. Why is
@@ -587,7 +597,7 @@ <h3 id="_why_was_this_all_so_hard">Why Was This All So Hard?</h3>
 </div>
 </div>
 <div class="sect2">
-<h3 id="_what_to_do_if_you_already_have_django">What to Do If You Already Have Django</h3>
+<h3 id="_what_to_do_if_you_already_have_django"><a class="anchor" href="#_what_to_do_if_you_already_have_django"></a>What to Do If You Already Have Django</h3>
 <div class="paragraph">
 <p>
 So what should you do if you want to apply some of the patterns in this book
@@ -628,7 +638,7 @@ <h3 id="_what_to_do_if_you_already_have_django">What to Do If You Already Have D
 </div>
 </div>
 <div class="sect2">
-<h3 id="_steps_along_the_way">Steps Along the Way</h3>
+<h3 id="_steps_along_the_way"><a class="anchor" href="#_steps_along_the_way"></a>Steps Along the Way</h3>
 <div class="paragraph">
 <p>
 Suppose you&#8217;re working on a Django project that you&#8217;re not sure is going

book/appendix_ds1_table.html

@@ -13,6 +13,14 @@
 
 /* customisations by harry */
 
+h1, h2, h3, h4, h5, h6 {
+    position: relative;
+}
+
+a.anchor {
+    top: 0;
+}
+
 /* hide inline ditaa/plantuml source listings for images */
 .image-source {
     display: none
@@ -70,7 +78,9 @@
 
 /* Text styles */
 h1{color:var(--primarycolor) !important;}
+
 h2,h3,h4,h5,h6{color:var(--secondarycolor) !important;}
+
 .title{color:var(--tertiarycolor) !important; font-family:"Noto Sans",sans-serif !important;font-style: normal !important; font-weight: normal !important;}
 p{font-family: "Noto Sans",sans-serif !important}
 
@@ -128,7 +138,7 @@
 </div>
 <div id="content">
 <div class="sect1">
-<h2 id="appendix_ds1_table">Appendix A: Summary Diagram and Table</h2>
+<h2 id="appendix_ds1_table">Appendix A: Summary Diagram and Table<a class="anchor" href="#appendix_ds1_table"></a>Appendix A: Summary Diagram and Table</h2>
 <div class="sectionbody">
 <div class="paragraph">
 <p>

book/appendix_project_structure.html

@@ -13,6 +13,14 @@
 
 /* customisations by harry */
 
+h1, h2, h3, h4, h5, h6 {
+    position: relative;
+}
+
+a.anchor {
+    top: 0;
+}
+
 /* hide inline ditaa/plantuml source listings for images */
 .image-source {
     display: none
@@ -70,7 +78,9 @@
 
 /* Text styles */
 h1{color:var(--primarycolor) !important;}
+
 h2,h3,h4,h5,h6{color:var(--secondarycolor) !important;}
+
 .title{color:var(--tertiarycolor) !important; font-family:"Noto Sans",sans-serif !important;font-style: normal !important; font-weight: normal !important;}
 p{font-family: "Noto Sans",sans-serif !important}
 
@@ -128,7 +138,7 @@
 </div>
 <div id="content">
 <div class="sect1">
-<h2 id="appendix_project_structure">Appendix B: A Template Project Structure</h2>
+<h2 id="appendix_project_structure">Appendix B: A Template Project Structure<a class="anchor" href="#appendix_project_structure"></a>Appendix A: A Template Project Structure</h2>
 <div class="sectionbody">
 <div class="paragraph">
 <p>
@@ -257,7 +267,7 @@ <h2 id="appendix_project_structure">Appendix B: A Template Project Structure</h2
 <p>Let&#8217;s look at a few of these files and concepts in more detail.</p>
 </div>
 <div class="sect2">
-<h3 id="_env_vars_12_factor_and_config_inside_and_outside_containers">Env Vars, 12-Factor, and Config, Inside and Outside Containers</h3>
+<h3 id="_env_vars_12_factor_and_config_inside_and_outside_containers"><a class="anchor" href="#_env_vars_12_factor_and_config_inside_and_outside_containers"></a>Env Vars, 12-Factor, and Config, Inside and Outside Containers</h3>
 <div class="paragraph">
 <p>The basic problem we&#8217;re trying to solve here is that we need different
 config settings for the following:</p>
@@ -283,7 +293,7 @@ <h3 id="_env_vars_12_factor_and_config_inside_and_outside_containers">Env Vars,
 </div>
 </div>
 <div class="sect2">
-<h3 id="_config_py">Config.py</h3>
+<h3 id="_config_py"><a class="anchor" href="#_config_py"></a>Config.py</h3>
 <div class="paragraph">
 <p>Whenever our application code needs access to some config, it&#8217;s going to
 get it from a file called <em>config.py</em>. Here are a couple of examples from our
@@ -347,7 +357,7 @@ <h3 id="_config_py">Config.py</h3>
 </div>
 </div>
 <div class="sect2">
-<h3 id="_docker_compose_and_containers_config">Docker-Compose and Containers Config</h3>
+<h3 id="_docker_compose_and_containers_config"><a class="anchor" href="#_docker_compose_and_containers_config"></a>Docker-Compose and Containers Config</h3>
 <div class="paragraph">
 <p>We use a lightweight Docker container orchestration tool called <em>docker-compose</em>.
 It&#8217;s main configuration is via a YAML file (sigh):<sup class="footnote">[<a id="_footnoteref_5" class="footnote" href="#_footnotedef_5" title="View footnote.">5</a>]</sup></p>
@@ -448,7 +458,7 @@ <h3 id="_docker_compose_and_containers_config">Docker-Compose and Containers Con
 </div>
 </div>
 <div class="sect2">
-<h3 id="_installing_your_source_as_a_package">Installing Your Source as a Package</h3>
+<h3 id="_installing_your_source_as_a_package"><a class="anchor" href="#_installing_your_source_as_a_package"></a>Installing Your Source as a Package</h3>
 <div class="paragraph">
 <p>All our application code (everything except tests, really) lives inside an
 <em>src</em> folder:</p>
@@ -501,7 +511,7 @@ <h3 id="_installing_your_source_as_a_package">Installing Your Source as a Packag
 </div>
 </div>
 <div class="sect2">
-<h3 id="_dockerfile">Dockerfile</h3>
+<h3 id="_dockerfile"><a class="anchor" href="#_dockerfile"></a>Dockerfile</h3>
 <div class="paragraph">
 <p>Dockerfiles are going to be very project-specific, but here are a few key stages
 you&#8217;ll expect to see:</p>
@@ -573,7 +583,7 @@ <h3 id="_dockerfile">Dockerfile</h3>
 </div>
 </div>
 <div class="sect2">
-<h3 id="_tests">Tests</h3>
+<h3 id="_tests"><a class="anchor" href="#_tests"></a>Tests</h3>
 <div class="paragraph">
 <p>
 Our tests are kept alongside everything else, as shown here:</p>
@@ -611,7 +621,7 @@ <h3 id="_tests">Tests</h3>
 </div>
 </div>
 <div class="sect2">
-<h3 id="_wrap_up">Wrap-Up</h3>
+<h3 id="_wrap_up"><a class="anchor" href="#_wrap_up"></a>Wrap-Up</h3>
 <div class="paragraph">
 <p>These are our basic building blocks:</p>
 </div>