Rename chapters to have dash for cleaner URLs

src/docs/asciidoc/antora.yml

@@ -10,6 +10,9 @@ asciidoc:
     sourcedir: 'example$'
     book-title: The JHipster Mini-Book
     author: Matt Raible
+    # These variables are used by the website version of the book
+    revnumber: 7.0.0-SNAPSHOT
+    revyear: 2023
     email: matt@raibledesigns.com
     subject: JHipster
     keywords: JHipster, Angular, Bootstrap, Spring Boot, Spring Cloud, Spring Security, Microservices, Docker, Heroku, Security, JWT, OAuth 2.0, OIDC

src/docs/asciidoc/modules/ROOT/index.adoc

@@ -38,13 +38,13 @@ include::pages/preface.adoc[]
 
 include::pages/introduction.adoc[]
 
-include::pages/chapter1.adoc[]
+include::pages/chapter-1.adoc[]
 
-include::pages/chapter2.adoc[]
+include::pages/chapter-2.adoc[]
 
-include::pages/chapter3.adoc[]
+include::pages/chapter-3.adoc[]
 
-include::pages/chapter4.adoc[]
+include::pages/chapter-4.adoc[]
 
 include::pages/action.adoc[]
 

src/docs/asciidoc/modules/ROOT/nav.adoc

@@ -3,9 +3,9 @@
 * xref:acknowledgments.adoc[]
 * xref:preface.adoc[]
 * xref:introduction.adoc[]
-* xref:chapter1.adoc[]
-* xref:chapter2.adoc[]
-* xref:chapter3.adoc[]
-* xref:chapter4.adoc[]
+* xref:chapter-1.adoc[]
+* xref:chapter-2.adoc[]
+* xref:chapter-3.adoc[]
+* xref:chapter-4.adoc[]
 * xref:action.adoc[]
 * xref:about.adoc[]

src/docs/asciidoc/modules/ROOT/pages/chapter1.adoc → src/docs/asciidoc/modules/ROOT/pages/chapter-1.adoc

@@ -52,7 +52,7 @@ After running this command, I was prompted to answer questions about how I wante
 
 [[img-generating-21points]]
 .Generating the application
-image::chapter1/generating-21points.png[Generating the application, 1365, scaledwidth=100%]
+image::chapter-1/generating-21points.png[Generating the application, 1365, scaledwidth=100%]
 endif::[]
 ifeval::["{media}" == "prepress"]
 After running this command, I was prompted to answer questions about how I wanted my application to be generated. You can see the choices I made from my answers below.
@@ -528,7 +528,7 @@ Below is a screenshot taken after these changes.
 
 [[img-bootstrap-angular-material]]
 .JHipster with Bootstrap Angular Material
-image::chapter1/angular-material-theme.png[UI mockup, 1333, scaledwidth=100%, align=center]
+image::chapter-1/angular-material-theme.png[UI mockup, 1333, scaledwidth=100%, align=center]
 --
 
 At this point, I deployed to Heroku for the first time. This is covered in the <<Deploying to Heroku>> section of this chapter.
@@ -557,13 +557,13 @@ At this point, I did some trial-and-error designs with the data model. I generat
 
 [[img-ui-mockup]]
 .UI mockup
-image::chapter1/ui-mockup.png[UI mockup, 846, scaledwidth=75%, align=center]
+image::chapter-1/ui-mockup.png[UI mockup, 846, scaledwidth=75%, align=center]
 
 After figuring out how I wanted the UI to look, I started to think about the data model. I quickly decided I didn't need to track high-level goals (e.g. lose ten pounds in Q1 2023). I was more concerned with tracking weekly goals and 21-Points Health is all about how many points you get in a week. I created the following diagram as my data model.
 
 [[img-entity-diagram]]
 .21-Points Health entity diagram
-image::chapter1/entity-diagram.png[21-Points Health entity diagram, 684, scaledwidth=60%, align=center]
+image::chapter-1/entity-diagram.png[21-Points Health entity diagram, 684, scaledwidth=60%, align=center]
 
 I ran `jhipster entity points`. I added the appropriate fields and their validation rules, and specified a many-to-one relationship with `user`. Below is the final output from my answers.
 
@@ -711,11 +711,11 @@ The biggest visual improvements are on the list screens. I made the buttons a bi
 
 [[img-points-list-before]]
 .Default Daily Points list
-image::chapter1/points-list-before.png[Default Daily Points list, 1337, scaledwidth=100%, align=center]
+image::chapter-1/points-list-before.png[Default Daily Points list, 1337, scaledwidth=100%, align=center]
 
 [[img-points-list-after]]
 .Default Daily Points list after UI improvements
-image::chapter1/points-list-after.png[Default Daily Points list after UI improvements, 1136, scaledwidth=100%, align=center]
+image::chapter-1/points-list-after.png[Default Daily Points list after UI improvements, 1136, scaledwidth=100%, align=center]
 
 I refactored the HTML at the top of `points.component.html` to put the title, search, and add buttons on the same row. I also removed the button text in favor of a using https://ng-bootstrap.github.io/#/components/tooltip/api[ng-bootstrap's tooltip directive]. The `jhiTranslate` directive you see in the button tooltips is provided by https://github.com/jhipster/ng-jhipster[JHipster's Angular library].
 
@@ -853,7 +853,7 @@ After making these changes, modifying a bit of HTML, and tweaking some i18n mess
 
 [[img-add-points-page]]
 .Add Points page
-image::chapter1/add-points-page.png[Add Points page, 1095, scaledwidth=100%, align=center]
+image::chapter-1/add-points-page.png[Add Points page, 1095, scaledwidth=100%, align=center]
 
 Improving the UI was the most fun, but also the most time-consuming as it involved lots of little tweaks to multiple screens. The next task was more straightforward: implementing business logic.
 
@@ -1266,7 +1266,7 @@ Below is a screenshot of what this progress bar looked like after restarting the
 
 [[img-homepage-progress-bar]]
 .Progress bar for points this week
-image::chapter1/homepage-points-this-week.png[Progress bar for points this week, 1188, scaledwidth=100%, align=center]
+image::chapter-1/homepage-points-this-week.png[Progress bar for points this week, 1188, scaledwidth=100%, align=center]
 
 // <img src="https://via.placeholder.com/800x200.png?text=Blood Pressure Graph" width="100%" />
 
@@ -1695,7 +1695,7 @@ After entering some test data, I was quite pleased with the results.
 
 [[img-homepage-bp-last-30-days]]
 .Chart of blood pressure during the last 30 days
-image::chapter1/homepage-bp-last-30-days.png[Chart of blood pressure during the last 30 days, 1190, scaledwidth=100%, align=center]
+image::chapter-1/homepage-bp-last-30-days.png[Chart of blood pressure during the last 30 days, 1190, scaledwidth=100%, align=center]
 
 I made similar changes to display weights for the last 30 days as a chart.
 
@@ -1707,13 +1707,13 @@ After finishing the MVP (minimum viable product) of 21-Points Health, I did some
 // from Dropbox > Get Hip with JHipster.key
 [[img-21-points-loc]]
 .Project lines of code
-image::chapter1/21-points-loc.png[Project lines of code, 600, scaledwidth=60%, align=center]
+image::chapter-1/21-points-loc.png[Project lines of code, 600, scaledwidth=60%, align=center]
 
 To drill down further, I made a graph of the top three languages in the project: TypeScript, Java, and HTML.
 
 [[img-21-points-loc-by-language]]
 .Project lines of code by language
-image::chapter1/21-points-loc-by-language.png[Project lines of code by language, 700, scaledwidth=70%, align=center]
+image::chapter-1/21-points-loc-by-language.png[Project lines of code by language, 700, scaledwidth=70%, align=center]
 
 // TypeScript: 12812 - 12581 = 231
 // Java: 9956 - 9388 = 568
@@ -1863,7 +1863,7 @@ I was pumped to see that this process worked and that my application was availab
 
 [[img-deployed-to-heroku]]
 .First deployment to Heroku
-image::chapter1/deployed-to-heroku.png[First deployment to Heroku, 1225, scaledwidth=100%, align=center]
+image::chapter-1/deployed-to-heroku.png[First deployment to Heroku, 1225, scaledwidth=100%, align=center]
 
 Next, I bought the 21-points.com domain from https://domains.google.com[Google Domains]. To configure this domain for Heroku, I ran `heroku domains:add`.
 
@@ -1939,7 +1939,7 @@ I https://github.com/jhipster/generator-jhipster/issues/20315[created an issue]
 
 [[img-elastic-cloud-settings]]
 .Elastic Cloud settings
-image::chapter1/elastic-cloud-settings.png[Elastic Cloud settings, 781, scaledwidth=75%, align=center]
+image::chapter-1/elastic-cloud-settings.png[Elastic Cloud settings, 781, scaledwidth=75%, align=center]
 
 NOTE: I tried the latest version, but it resulted in an "Unable to parse response body" error.
 
@@ -2042,7 +2042,7 @@ The `SENDGRID_USERNAME` and `SENDGRID_PASSWORD` variables will not work to send
 
 [[img-sendgrid-api-key]]
 .Create SendGrid API key
-image::chapter1/sendgrid-api-key.png[Create SendGrid API key, 854, scaledwidth=90%, align=center]
+image::chapter-1/sendgrid-api-key.png[Create SendGrid API key, 854, scaledwidth=90%, align=center]
 
 Once you have an API key, set the user and password for SendGrid on Heroku:
 
@@ -2161,19 +2161,19 @@ To log in to Jenkins, I navigated to http://localhost:9000. I copied the passwor
 
 [[unlock-jenkins]]
 .Unlock Jenkins
-image::chapter1/unlock-jenkins.png[Unlock Jenkins, 1124, scaledwidth=100%, align=center]
+image::chapter-1/unlock-jenkins.png[Unlock Jenkins, 1124, scaledwidth=100%, align=center]
 
 Next, I chose to install selected plugins and waited while everything installed.
 
 [[customize-jenkins]]
 .Customize Jenkins
-image::chapter1/customize-jenkins.png[Customize Jenkins, 1124, scaledwidth=100%, align=center]
+image::chapter-1/customize-jenkins.png[Customize Jenkins, 1124, scaledwidth=100%, align=center]
 
 I created a new job called "21-points" with a Pipeline script from SCM. I configured a "`Poll SCM`" build trigger with a schedule of `H/5 * * * *`. After saving the job, I confirmed it ran successfully.
 
 [[jenkins-job1]]
 .Jenkins build #1
-image::chapter1/jenkins-job-1.png[First run of 21-points pipeline, 1380, scaledwidth=100%, align=center]
+image::chapter-1/jenkins-job-1.png[First run of 21-points pipeline, 1380, scaledwidth=100%, align=center]
 
 TIP: It's possible the `deployment` stage will fail for you the first time (like it did for me above). If this happens, stop Jenkins, run `heroku login`, then restart Jenkins.
 
@@ -2258,7 +2258,7 @@ I was pumped to see all the stages in my pipeline pass.
 
 [[jenkins-job-success]]
 .Jenkins success!
-image::chapter1/jenkins-job-success.png[Jenkins success!, 1619, scaledwidth=100%, align=center]
+image::chapter-1/jenkins-job-success.png[Jenkins success!, 1619, scaledwidth=100%, align=center]
 
 When working on this project, I'd start Jenkins and have it running while I checked in code. I did not install it on a server and leave it running continuously. My reason was simple: I was only coding in bursts and didn't need to waste computing cycles or want to pay for a cloud instance to run it.
 
@@ -2296,7 +2296,7 @@ Once this process completed, an analysis of the project was available on the Son
 
 [[sonar-results]]
 .Sonar results
-image::chapter1/sonar.png[Sonar results, 691, scaledwidth=100%, align=center]
+image::chapter-1/sonar.png[Sonar results, 691, scaledwidth=100%, align=center]
 
 == Progressive web apps
 
@@ -2341,7 +2341,7 @@ After making these changes, I redeployed 21-Points Health to production and used
 
 [[lighthouse-analysis]]
 .Lighthouse analysis
-image::chapter1/lighthouse-desktop.png[Lighthouse analysis, 733, scaledwidth=90%, align=center]
+image::chapter-1/lighthouse-desktop.png[Lighthouse analysis, 733, scaledwidth=90%, align=center]
 
 // lighthouse-mobile.png has the mobile scores:
 // { performance: 76, accessibility: 95, best practices: 92, SEO: 89 }

src/docs/asciidoc/modules/ROOT/pages/chapter2.adoc → src/docs/asciidoc/modules/ROOT/pages/chapter-2.adoc

@@ -11,11 +11,11 @@ JHipster supports three UI frameworks: Angular, React, and Vue. In the first two
 
 [[img-angular-jobs-2022]]
 .Jobs on Indeed, December 2022
-image::chapter2/angular/indeed-jobs-202212.png[Jobs on Indeed, 450, scaledwidth=75%, align=center]
+image::chapter-2/angular/indeed-jobs-202212.png[Jobs on Indeed, 450, scaledwidth=75%, align=center]
 
 [[img-stackoverflow-tags-2022]]
 .Stack Overflow Tags, December 2022
-image::chapter2/angular/stackoverflow-tags-202212.png[Tags on Stack OverFlow, 450, scaledwidth=75%, align=center]
+image::chapter-2/angular/stackoverflow-tags-202212.png[Tags on Stack OverFlow, 450, scaledwidth=75%, align=center]
 
 Angular is the default UI framework used by JHipster. It's written in TypeScript, compiles to JavaScript, and just using it makes you a hipster! Like Struts in the early 2000s and Rails in the mid-2000s, Angular and other JavaScript frameworks have changed the way developers write web applications. Today, data is exposed via REST APIs and UIs are written in JavaScript (or TypeScript). As a Java developer, I was immediately attracted to Angular when I saw its separation of concerns. It recommended organizing your application into several components:
 
@@ -115,7 +115,7 @@ The MVC pattern is a common one for web frameworks to implement. With Angular, t
 
 [[img-angular-mvc]]
 .MVC in Angular
-image::chapter2/angular/angular-mvc.png[MVC in Angular, 500, scaledwidth=75%, align=center]
+image::chapter-2/angular/angular-mvc.png[MVC in Angular, 500, scaledwidth=75%, align=center]
 
 Below is a `SearchService` to fetch search results. It's expected that a JSON endpoint exists at `/api/search` on the same server.
 
@@ -300,7 +300,7 @@ Does your API return data like the following?
 
 [source,json]
 ----
-include::{sourcedir}/chapter2/angular/search-results.json[]
+include::{sourcedir}/chapter-2/angular/search-results.json[]
 ----
 
 If so, you could display it in the `search.component.html` template with Angular's `*ngFor` directive.
@@ -378,20 +378,20 @@ A basic example of the grid is shown below.
 
 [source,html]
 ----
-include::{sourcedir}/chapter2/bootstrap/grid-basic.html[]
+include::{sourcedir}/chapter-2/bootstrap/grid-basic.html[]
 ----
 
 When rendered with Bootstrap's CSS, the above HTML looks as follows on a desktop. The minimum width of the container element on the desktop is set to 1200 px.
 
 [[img-bootstrap-basic-grid-desktop]]
 .Basic grid on desktop
-image::chapter2/bootstrap/basic-grid-desktop.png[Basic grid on desktop, 732, scaledwidth=100%]
+image::chapter-2/bootstrap/basic-grid-desktop.png[Basic grid on desktop, 732, scaledwidth=100%]
 
 If you squish your browser to less than 1200 px wide or render this same document on a smaller screen, the columns will stack.
 
 [[img-bootstrap-basic-grid-mobile]]
 .Basic grid on a mobile device
-image::chapter2/bootstrap/basic-grid-mobile.png[Basic grid on a mobile device, 552, scaledwidth=75%]
+image::chapter-2/bootstrap/basic-grid-mobile.png[Basic grid on a mobile device, 552, scaledwidth=75%]
 
 Bootstrap's grid can be used to align and position your application's elements, widgets, and features. It's helpful to understand a few basics if want to use it effectively.
 
@@ -405,12 +405,12 @@ Each tier of classes scales up, meaning that if you plan to set the same widths
 
 [source,html]
 ----
-include::{sourcedir}/chapter2/bootstrap/grid-advanced.html[]
+include::{sourcedir}/chapter-2/bootstrap/grid-advanced.html[]
 ----
 
 [[img-bootstrap-advanced-grid-desktop]]
 .Advanced grid
-image::chapter2/bootstrap/advanced-grid-desktop.png[Advanced grid, 734, scaledwidth=100%]
+image::chapter-2/bootstrap/advanced-grid-desktop.png[Advanced grid, 734, scaledwidth=100%]
 
 You can use size indicators to specify breakpoints in the columns. Breakpoints indicate where a column wraps onto the next row. In the HTML above, "`xs`" and "`md`" are the size indicators (of course,  "`sm`", "`lg`", and "`xl`" are the other options). Bootstrap uses the following media query ranges.
 
@@ -487,23 +487,23 @@ When you add Bootstrap's CSS to your web application, chances are it'll quickly
 
 [source%autofit,html]
 ----
-include::{sourcedir}/chapter2/bootstrap/basicelement.html[]
+include::{sourcedir}/chapter-2/bootstrap/basicelement.html[]
 ----
 
 [[img-bootstrap-basic-element]]
 .Basic form element
-image::chapter2/bootstrap/basicelement.png[Basic form element, 534, scaledwidth=90%]
+image::chapter-2/bootstrap/basicelement.png[Basic form element, 534, scaledwidth=90%]
 
 If you'd like to indicate that this form element is not valid, you'll need to modify the above HTML to display validation warnings.
 
 [source%autofit,html]
 ----
-include::{sourcedir}/chapter2/bootstrap/basicelement-withvalidation.html[]
+include::{sourcedir}/chapter-2/bootstrap/basicelement-withvalidation.html[]
 ----
 
 [[img-bootstrap-basic-element-with-validation]]
 .Form element with validation
-image::chapter2/bootstrap/basicelement-validation.png[Form element with validation, 536, scaledwidth=90%]
+image::chapter-2/bootstrap/basicelement-validation.png[Form element with validation, 536, scaledwidth=90%]
 
 === CSS
 
@@ -513,12 +513,12 @@ To make your buttons look better, Bootstrap provides `btn` and a number of `btn-
 
 [source,html]
 ----
-include::{sourcedir}/chapter2/bootstrap/buttons.html[]
+include::{sourcedir}/chapter-2/bootstrap/buttons.html[]
 ----
 
 [[img-bootstrap-buttons]]
 .Buttons
-image::chapter2/bootstrap/buttons.png[Buttons, 706, scaledwidth=90%]
+image::chapter-2/bootstrap/buttons.png[Buttons, 706, scaledwidth=90%]
 
 === Components
 
@@ -528,33 +528,33 @@ Popular Bootstrap components include: dropdowns, button groups, button dropdowns
 
 [[img-bootstrap-navbar]]
 .Navbar with dropdown
-image::chapter2/bootstrap/navbar-with-dropdown.png[Navbar with dropdown, 991, scaledwidth=100%]
+image::chapter-2/bootstrap/navbar-with-dropdown.png[Navbar with dropdown, 991, scaledwidth=100%]
 
 When rendered on a mobile device, everything collapses into a hamburger menu that can expand downward.
 
 [[img-bootstrap-navbar-mobile]]
 .Navbar on mobile
-image::chapter2/bootstrap/navbar-on-mobile.png[Navbar on mobile, 527, scaledwidth=50%]
+image::chapter-2/bootstrap/navbar-on-mobile.png[Navbar on mobile, 527, scaledwidth=50%]
 
 This navbar requires quite a bit of HTML markup, not shown here for the sake of brevity. You can view this source online in link:https://getbootstrap.com/docs/5.2/components/navbar/[Bootstrap's documentation]. An example without ARIA attributes below shows the basic structure.
 
 [source%autofit,html]
 ----
-include::{sourcedir}/chapter2/bootstrap/navbar.html[]
+include::{sourcedir}/chapter-2/bootstrap/navbar.html[]
 ----
 
 Alerts are useful for displaying feedback to the user. You can invoke differently colored alerts with different classes. You'll need to add an `alert` class, plus `alert-[success|info|warning|danger]` to indicate the colors.
 
 [source,html]
 ----
-include::{sourcedir}/chapter2/bootstrap/alerts.html[]
+include::{sourcedir}/chapter-2/bootstrap/alerts.html[]
 ----
 
 This renders alerts like the following.
 
 [[img-bootstrap-alerts]]
 .Alerts
-image::chapter2/bootstrap/alerts.png[Alerts, 770, scaledwidth=100%]
+image::chapter-2/bootstrap/alerts.png[Alerts, 770, scaledwidth=100%]
 
 To make an alert closeable, you need to add an `.alert-dismissible` class and a close button.
 
@@ -568,7 +568,7 @@ To make an alert closeable, you need to add an `.alert-dismissible` class and a
 
 [[img-bootstrap-alert-dismissable]]
 .Closeable alert
-image::chapter2/bootstrap/alert-dismissable.png[Closeable alert, 768, scaledwidth=100%]
+image::chapter-2/bootstrap/alert-dismissable.png[Closeable alert, 768, scaledwidth=100%]
 
 TIP: To make the links in your alerts match the colors of the alerts, use `.alert-link`.
 
@@ -602,7 +602,7 @@ You can see how the icons change color based on the font color defined for the e
 
 [[img-bootstrap-buttons-icons]]
 .Buttons with icons
-image::chapter2/bootstrap/buttons-with-icons.png[Buttons with icons, 265, scaledwidth=25%]
+image::chapter-2/bootstrap/buttons-with-icons.png[Buttons with icons, 265, scaledwidth=25%]
 
 === Customizing CSS
 
@@ -824,15 +824,15 @@ To see how WebSockets work, take a look at the `JhiTrackerComponent` in a WebSoc
 [source%autofit,typescript]
 .src/main/webapp/app/admin/tracker/tracker.component.ts
 ----
-include::{sourcedir}/chapter2/websockets/tracker.component.ts[]
+include::{sourcedir}/chapter-2/websockets/tracker.component.ts[]
 ----
 
 The `Tracker` service allows you to send tracking information — for example, to track when someone has authenticated.
 
 [source%autofit,typescript]
 .src/main/webapp/app/core/tracker/tracker.service.ts
 ----
-include::{sourcedir}/chapter2/websockets/tracker.service.ts[]
+include::{sourcedir}/chapter-2/websockets/tracker.service.ts[]
 ----
 
 WebSockets on the server side of a JHipster project are implemented with http://docs.spring.io/spring/docs/current/spring-framework-reference/html/websocket.html[Spring's WebSocket support]. To learn more about WebSockets with Spring, see Baeldung's http://www.baeldung.com/websockets-spring[Intro to WebSockets with Spring]. The next section shows how a developer productivity tool that uses WebSockets implements something very cool.