oops merge

book/CH00_Introduction.adoc

@@ -154,10 +154,10 @@ Remember the message? “The future is not set. There is no fate but what we mak
 ____
 
 
+:sectnums!:
 
 [.html-note]
-.HTML Notes: Hypermedia In Practice
-****
+== HTML Notes: Hypermedia In Practice
 
 Clearly, HTML plays a central role in the story we tell here. At the end of each chapter we will share what we have learned about writing HTML for hypermedia-driven web applications. 
 
@@ -169,6 +169,3 @@ It conveys the state of an application to people viewing our sites with a browse
 No, we can't fix every problem with good HTML. The mantra that HTML is "accessible by default" is misleading. We would miss out on important opportunities if we shunned other technologies like JavaScript. And we still need to test, a lot, everywhere, to ensure things work as expected. 
 
 But good HTML lets browsers do a _lot_ of work for us. 
-
-
-****

book/CH01_HypermediaAReintroduction.adoc

@@ -751,9 +751,10 @@ In the coming chapters you will develop a firm understanding of all the benefits
 We hope that, in addition, you will also become as passionate about it as we are.
 
 
+:sectnums!:
+
 [.html-note]
-.HTML Notes: <div> Soup
-****
+== HTML Notes: <div> Soup
 The best-known kind of messy HTML is `<div>` soup.
 
 When developers fall back on the generic `<div>` and `<span>` elements instead of more meaningful tags,
@@ -791,5 +792,4 @@ To avoid div soup, become friendly with the HTML spec of available tags, and con
 
 Of course, not every UI pattern has a designated HTML element.
 We often need to compose elements and augment them with attributes.
-Before you do, though, rummage through the html tool chest. Sometimes you might be surprised by how much is available.
-****
+Before you do, though, rummage through the html tool chest. Sometimes you might be surprised by how much is available.

book/CH02_ComponentsOfAHypermediaSystem.adoc

@@ -828,9 +828,11 @@ working in web development, and building a hypermedia-oriented library to boot,
 special nature of HTML, hypermedia and the web!
 
 
-[.design-note]
-.HTML Note: HTML5 Soup
-****
+:sectnums!:
+
+[.html-note]
+== HTML Note: HTML5 Soup
+
 [quote,Confucius]
 The beginning of wisdom is to call things by their right names.
 
@@ -852,4 +854,3 @@ There's no need to rely on hearsay to keep up with developments in HTML.
 Section 4 of the spec features a list of all available elements,
 including what they represent, where they can occur, and what they are allowed to contain.
 It even tells you when you're allowed to leave out closing tags!
-****

book/CH03_BuildingASimpleWebApplication.adoc

@@ -885,9 +885,11 @@ that will let us improve our contact application while retaining the hypermedia-
 
 
 // TODO dz4k rewrite
-[.design-note]
-.HTML Notes: Framework Soup
-****
+:sectnums!:
+
+[.html-note]
+== HTML Notes: Framework Soup
+
 (((components)))
 Components encapsulate a section of a page along with its dynamic behavior.
 While encapsulating behavior is a good way to organize code,
@@ -911,4 +913,3 @@ Some SPA frameworks, and some web components, make this more difficult by puttin
 While these abstractions can allow developers to create richer UI or work faster,
 their pervasiveness means that developers can lose sight of the actual HTML (and JavaScript) being sent to clients.
 Without diligent testing, this leads to inaccessibility, poor SEO, and bloat.
-****

book/CH04_ExtendingHTMLAsHypermedia.adoc

@@ -951,9 +951,11 @@ them.
 
 
 
-[.design-note]
-.HTML Notes: Budgeting For HTML
-****
+:sectnums!:
+
+[.html-note]
+== HTML Notes: Budgeting For HTML
+
 The close relationship between content and markup means that
 good HTML is labor-intensive.
 Most sites have a separation between the authors,
@@ -969,4 +971,3 @@ Thus, we don't expect every site to contain perfectly conformant HTML.
 What's most important is to avoid _wrong_ HTML -- it can be better to fall back on a more generic element than to be precisely incorrect.
 
 If you have the resources, however, putting more care in your HTML will produce a more polished site.
-****

book/CH05_htmxPatterns.adoc

@@ -1079,9 +1079,11 @@ behavior, we are still exchanging hypermedia with the server, with no JSON API r
 As the web was designed.
 
 
-[.design-note]
-.HTML Notes: Caution With Modals and "'Display: none'"
-****
+:sectnums!:
+
+[.html-note]
+== HTML Notes: Caution With Modals and "'Display: none'"
+
 (((modals)))
 ((("display: none")))
 _Think twice about modals._ Modal windows have become popular, almost standard, in many web applications today.
@@ -1111,4 +1113,3 @@ _Use `display: none;` with care_. The issue is that it is not purely cosmetic --
 ----
 
 `vh` is short for "`visually hidden.`" This class uses multiple methods and workarounds to make sure no browser removes the element's function.
-****

book/CH06_MorehtmxPatterns.adoc

@@ -1165,9 +1165,11 @@ are implementing these features entirely by exchanging hypermedia with a server
 the web.
 
 
-[.design-note]
-.HTML Notes: Accessible by Default?
-****
+:sectnums!:
+
+[.html-note]
+== HTML Notes: Accessible by Default?
+
 (((ARIA)))
 (((accessibility)))
 Accessibility problems can arise when we try to implement controls that aren't built into HTML.
@@ -1224,4 +1226,3 @@ Sometimes the answer is yes, but if not, a sequence of details and disclosures f
 
 Compromising UX just to avoid JavaScript is bad development.
 But sometimes it's possible to achieve an equal (or better!) quality of UX while allowing for a simpler and more robust implementation.
-****

book/CH07_ADynamicArchiveUIWithhtmx.adoc

@@ -707,9 +707,11 @@ pure hypermedia. It took about 16 lines of front end code and 16 lines of backen
 
 HTML, with a bit of help from a hypermedia-oriented JavaScript library such as htmx, can in fact be extremely powerful and expressive.
 
-[.design-note]
-.HTML Notes: Markdown soup
-****
+:sectnums!:
+
+[.html-note]
+== HTML Notes: Markdown soup
+
 [.dfn]_Markdown soup_ is the lesser known sibling of `<div>` soup.
 This is the result of web developers limiting themselves to the set of elements that the Markdown language provides shorthand for,
 even when these elements are incorrect.
@@ -765,6 +767,3 @@ Available: <https://hypermedia.systems/>
 ----
 <1> `reference_list` is a macro that will transform the plain text to highly-detailed HTML.
 <2> A processor can also resolve identifiers, so we don't have to manually keep the reference list in order and the in-text citations in sync.
-****
-
-

book/CH08_TricksOfThehtmxMasters.adoc

@@ -863,9 +863,11 @@ swap value throughout your application.
 
 
 
-[.design-note]
-.HTML Notes: Semantic HTML
-****
+:sectnums!:
+
+[.html-note]
+== HTML Notes: Semantic HTML
+
 Telling people to "use semantic HTML" instead of "read the spec" has led to a lot of people guessing at the meaning of tags -- "`looks pretty semantic to me!" -- instead of engaging with the spec.
 
 [quote,https://t-ravis.com/post/doc/semantic_the_8_letter_s-word/]
@@ -875,4 +877,3 @@ We recommend talking about, and writing, _conformant_ HTML.
 (We can always bikeshed further).
 Use the elements to the full extent provided by the HTML specification,
 and let the software take from it whatever meaning they can.
-****

book/CH09_ScriptingInAHypermediaApplication.adoc

@@ -1378,9 +1378,11 @@ Just don't make it a habit.
 
 
 
-[.design-note]
-.HTML Notes: HTML is for Applications
-****
+:sectnums!:
+
+[.html-note]
+== HTML Notes: HTML is for Applications
+
 A prevalent meme among developers suggests that HTML was designed for "`documents`" and is unsuitable for "`applications.`"
 In reality, hypermedia is not only a sophisticated, modern architecture for applications, but it can allow us to do away with this artificial app/document split for good.
 
@@ -1401,4 +1403,3 @@ ____
 * Wanted a window anyway for a laugh? We had a tool for that: It was called "ELECTRON"
 * "yes I would love to write 4 DIFFERENT copies of the same UI" -  Statements dreamed up by the Utterly Deranged
 ____
-****

book/CH10_JSONDataAPIs.adoc

@@ -512,9 +512,11 @@ another.
 With properly built "`thin`" controllers and "`fat`" models, keeping two separate APIs both in sync and yet
 still evolving separately is not as difficult or as crazy as it might sound.
 
-[.design-note]
-.HTML Notes: Microformats
-****
+:sectnums!:
+
+[.html-note]
+== HTML Notes: Microformats
+
 https://microformats.org/[Microformats] is a standard for embedding machine-readable structured data in HTML.
 (((Microformats)))
 It uses classes to mark certain elements as containing information to be extracted,
@@ -554,5 +556,3 @@ A protocol or standard that requires websites to implement a JSON API has a high
 In comparison, any website can be augmented with microformats simply by adding a few classes.
 Other HTML-embedded data formats like microdata, Open Graph are similarly easy to adopt.
 This makes microformats useful for cross-website (dare we say _web-scale_) systems like the https://indieweb.org[IndieWeb], which uses it pervasively.
-
-****

book/CH11_HyperviewAMobileHypermedia.adoc

@@ -1330,10 +1330,11 @@ Yes, hypermedia can work for mobile apps, too.
 In the next two chapters we'll show how by turning the Contact.app web application into a native mobile app using Hyperview. 
 
 
+:sectnums!:
+
+[.html-note]
+== HTML Notes: Maximize Your Server-Side Strengths
 
-[.design-note]
-.HTML Notes: Maximize Your Server-Side Strengths
-****
 A big advantage of the hypermedia-driven approach is that it makes the server-side environment far more important when building your web application. Rather than simply producing JSON, your back end is an integral component in the user experience of your web application.
 
 Because of this, it makes sense to look deeply into the functionality available there. Many older web frameworks have incredibly deep functionality available around producing HTML. Features like server-side caching can make the difference between an incredibly snappy web application and a sluggish user experience.
@@ -1355,4 +1356,3 @@ When you produce your HTML on the server side, on the other hand, the developer
 This puts far more expressive power directly in the hands of the developer producing the HTML. Because your hypermedia API can be structured around your UI needs, you can tune each endpoint to issue as few data store requests as possible.
 
 A good rule of thumb is that every request should shoot to have three or fewer data-store accesses.
-****

book/CH12_BuildingAContactsAppWithHyperview.adoc

@@ -1333,9 +1333,11 @@ In the next chapter we'll implement custom behaviors and UI elements to finish o
 
 
 
-[.design-note]
-.HTML Notes: API Endpoints
-****
+:sectnums!:
+
+[.html-note]
+== HTML Notes: API Endpoints
+
 Unlike a JSON API, the hypermedia API you produce for your hypermedia-driven application should feature endpoints specialized for your particular application’s UI needs.
 
 Because hypermedia APIs are not designed to be consumed by general-purpose clients you can set aside the pressure to keep them generalized and produce the content specifically needed for your application.
@@ -1344,4 +1346,3 @@ Your endpoints should be optimized to support your particular applications UI/UX
 A related tip is that, when you have a hypermedia-based API, you can aggressively refactor your API in a way that is heavily discouraged when writing JSON API-based SPAs. Because hypermedia-based applications use Hypermedia As The Engine Of Application State, you are able and, in fact, encouraged, to change the shape of them as your application developers and as use cases change.
 
 A great strength of the hypermedia approach is that you can completely rework your API to adapt to new needs over time without needing to version the API or even document it.
-****

book/CH13_ExtendingTheHyperviewClient.adoc

@@ -734,9 +734,11 @@ Ongoing app updates and maintenance for both web and mobile can be done at the s
 Yes, there is a story for Hypermedia-Driven Applications on mobile.
 
 
-[.design-note]
-.HTML Notes: Good-Enough UX and Islands of Interactivity
-****
+:sectnums!:
+
+[.html-note]
+== HTML Notes: Good-Enough UX and Islands of Interactivity
+
  A problem many SPA developers face when coming to the HDA approach is that they look at their current SPA application and imagine implementing it exactly using hypermedia. While htmx and other hypermedia-oriented libraries significantly close the interactivity gap between hypermedia-based applications and SPAs, that gap still exists.
 
 As we saw in Chapter Two, Roy Fielding noted this tradeoff with respect to the web’s RESTful network architecture, where "information is transferred in a
@@ -755,4 +757,3 @@ But this experience stinks compared to what people are used to: drag-and-drop.
 In cases like this, it is perfectly fine to use a front-end heavy approach, such as SortableJS, as an “`Island of Interactivity.`”
 
 This is an excellent way to encapsulate richer UX within an HDA.
-****

book/COPYRIGHT-ACKNOWLEDGMENTS.adoc

@@ -0,0 +1,42 @@
+= Copyright & Acknowledgments
+:tags: frontmatter
+:!toc:
+:chapter: -a
+:layout: frontmatter.njk
+:url: /book/copyright-acknowledgments/
+
+[.allcaps.massivetext.display-font.italic,role="text-align:center"]
+Hypermedia Systems
+
+[.cite.block.italic.bold]#Hypermedia Systems#
+(C) 2023 Carson Gross, Adam Stepinski, Deniz Akşimşek
+
+*Editor:* Wm Talcott
+
+*CC BY-NC-SA:* This work is licensed under the Creative Commons
+Attribution-NonCommercial-ShareAlike 4.0 International License.
+To view a copy of this license, visit
+http://creativecommons.org/licenses/by-nc-sa/4.0/
+or send a letter to Creative Commons, PO Box 1866, Mountain View,
+CA 94042, USA.
+
+
+[discrete,role="<h6> bold"]
+== Acknowledgements
+
+Thanks to:
+
+* Berkeley Graphics for their permission to use [.cite]_Berkeley Mono_ and the design of the book cover.
+* All contributors to the book: https://github.com/bigskysoftware/hypermedia-systems/graphs/contributors,
+* Manning Publications for their support in the initial stages of writing this book.
+* India Hackle for her valuable feedback and editing.
+
+[discrete,role="<h6> bold"]
+== Colophon
+
+Typefaces: [.cite]#ChicagoFLF# (by Robin Casady, headings), [.cite]#Literata# (by TypeTogether, body text), [.cite]#Berkeley Mono# (Berkeley Graphics, code).
+
+Tools: HTML, CSS, Asciidoc (https://asciidoc.org/, markup language), Paged.js (https://pagedjs.org/).
+
+[.secondary-font.f-row,role="justify-content:end"]
+*Next:* link:/book/dedication[Dedication]

book/DEDICATION.adoc

@@ -0,0 +1,18 @@
+= Dedication
+:url: /book/dedication/
+:layout: frontmatter.njk
+:chapter: -b
+
+[.airy.padding-block]
+--
+
+[.big]_To my family and the htmx discord._ -- Carson Gross
+
+[.big]_To my wife Tarunya, for her support through the ups and downs of this project._ -- Adam Stepinski
+
+[.big]_+++<span lang="tr">Kendilerine layık olmasa da annem Lamia Akşimşek ve babam Özgür Akşimşek&#8217;e.</span>+++_ -- Deniz Akşimşek
+
+--
+
+[.secondary-font.f-row,role="justify-content:end"]
+*Next:* link:/book/contents[Table of Contents]

book/Foreword.adoc

@@ -1,5 +1,5 @@
-= Foreword
-:chapter: -1
+= Foreword [.sub-title]#by Mike Amundsen#
+:chapter: -c
 
 // from @mamund:
 // * not sure how to format this unit (metadata, etc.)

www/CONTENTS.njk

@@ -9,6 +9,10 @@ renderOrder: 1
         font-family: var(--display-font);
         min-width: max-content;
     }
+
+    .sub-title {
+        display: inline;
+    }
 </style>
 
 <header>

www/_includes/frontmatter.njk

@@ -1,7 +1,8 @@
 ---
 layout: layout.njk
 ---
-
+{# {% if title %}
 <header><h1>{{ title | safe }}</h1></header>
+{% endif %} #}
 <main>{{ content | safe }}</main>
 <footer>{% include "global-footer.njk" %}</footer>

www/_plugins/postprocess-asciidoc.ts

@@ -107,6 +107,11 @@ export default () => {
                     tn.data = tn.data.slice(2); // remove dot
                 });
             })
+
+            $$(document, ".html-note").forEach(htmlNote => {
+                htmlNote.classList.add("info");
+                htmlNote.tagName = "aside";
+            })
         })
     }
 }