re-organizing ui preview, tailwind improvements

.vscode/settings.json

@@ -9,4 +9,5 @@
     "emmet.syntaxProfiles": {
         "postcss": "css"
     },
+    "asciidoc.antora.enableAntoraSupport": true,
 }

gulp.d/tasks/build-preview-pages.js

@@ -43,7 +43,10 @@ module.exports = (src, previewSrc, previewDest, sink = () => map()) => (done) =>
           map((file, enc, next) => {
             const siteRootPath = path.relative(ospath.dirname(file.path), ospath.resolve(previewSrc))
             const uiModel = { ...baseUiModel }
-            uiModel.page = { ...uiModel.page }
+            uiModel.page = {
+              ...uiModel.page,
+              url: path.join('/', path.relative(previewSrc, file.path.replace('.adoc', '.html'))),
+            }
             uiModel.siteRootPath = siteRootPath
 
             // The following has been customized to enable pull request preview builds on Github Pages.

package.json

@@ -54,7 +54,9 @@
     "postcss-custom-properties": "~13.3",
     "postcss-import": "~15.1",
     "postcss-url": "~10.1",
+    "prettier": "^3.1.0",
     "prettier-eslint": "~15.0",
+    "prettier-plugin-tailwindcss": "^0.5.7",
     "require-directory": "~2.1",
     "require-from-string": "~2.0",
     "stylelint": "~13.3",

prettier.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  plugins: ['prettier-plugin-tailwindcss'],
+}

preview-src/asciidoc/admonitions.adoc

@@ -0,0 +1,70 @@
+= Admonitions
+:idprefix:
+:idseparator: -
+:table-caption!:
+
+== Basic admonitions
+
+.Optional title
+[NOTE]
+====
+An admonition draws the reader's attention to auxiliary information.
+====
+
+IMPORTANT: Sign off before stepping away from your computer.
+
+TIP: Look for the warp zone under the bridge.
+
+CAUTION: Slippery when wet.
+
+WARNING: The software you're about to use is untested.
+
+== Examples
+
+=== Complex admonition
+
+.The title of a complex admonition
+[NOTE]
+====
+An admonition block may contain complex content, like lists and tables.
+
+.A list
+* List item
+** Nested list item
+*** Deeper nested list item
+* List item
+ ** Another nested list item
+* List item
+
+.A table
+[cols="3*"]
+|===
+|Cell in column 1, row 1
+|Cell in column 2, row 1
+
+|Cell in column 1, row 2
+|Cell in column 2, row 2
+
+|Cell in column 1, row 3
+|Cell in column 2, row 3
+|===
+
+.A code block
+[source,javascript]
+----
+vfs
+  .src('js/vendor/*.js', { cwd: 'src', cwdbase: true, read: false })
+  .pipe(tap((file) => { // <.>
+    file.contents = browserify(file.relative, { basedir: 'src', detectGlobals: false }).bundle()
+  }))
+----
+<.> Maybe with a callout.
+
+.Another admonition
+[CAUTION]
+======
+Admonition styles are set on example blocks, which are delimited by four equal signs (`====`).
+When nesting a delimited block that uses the same structural container, it's necessary to vary the length of the delimiter lines (i.e., make the length of the delimiter lines for the child block different than the length of the delimiter lines for the parent block).
+Varying the delimiter line length allows the parser to distinguish one block from another.
+======
+====