re-organizing ui preview, tailwind improvements (#56)

* re-organizng ui preview, tailwind improvements

* Update text formatting

* Update lists

* Update tabsets

* Update code

* Update admonitions

* Update tables

* Update images

* Update blocks

* Minor updates to elements pages

* Update nav and titles; merge symbols

* Update templates

* Update vscode config

* fix page icon attribute in preview, add icon docs

* don't try to load the svg without content catalog

---------

Co-authored-by: Eric Schneider <[email protected]>

Author: colegoldsmith

.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-lock.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",

package.json

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

prettier.config.js

@@ -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.
+======
+====