Rebuild css-props page for Docusaurus V3

.github/workflows/docusaurus-build.yml

@@ -17,18 +17,11 @@ jobs:
           sudo apt-get install -y xsltproc
       - name: Make the properties
         run: |
-          cd ./website/properties
-          mkdir ./output
-          xsltproc table.xsl properties.xml > output/css-props.xml
+          cd ./src/properties
           chmod +x ./docs-process.py
           chmod +x ./docs_selflink.py
-          ./docs-process.py output/css-props-out.xml output/css-props.xml
-          ./docs_selflink.py output/css-props-out.xml
-          xsltproc noroot.xsl output/css-props-out.xml > output/css-props.md
-          sed -i '1s;^;---\ntitle: CSS Properties\n---\n\n<style>\n.navigationSlider .slidingNav ul li:nth-child(3), .navigationSlider .slidingNav ul li:nth-child(3) > a:hover, .navigationSlider .slidingNav ul li.siteNavGroupActive > a { background-color: #fff }\n .nav-site li:nth-child(3) a { color: #333 !important }\n .nav-site li:nth-child(3) a:hover { color: #22b573 !important }\n </style>;' output/css-props.md
-          cat script >> output/css-props.md
-          cp output/css-props.md ../../docs/
-          rm -rf ./output
+          make
+          make clean
           cd ./../..
         shell: bash
       - name: Install Prince
@@ -40,7 +33,7 @@ jobs:
           sudo apt install imagemagick
       - name: Make the page region image
         run: |
-          cd ./website/samples
+          cd ./src/samples
           prince marginboxes.html --raster-output marginboxes-1.full.png --raster-dpi=150 --raster-pages=1 --raster-format=png
           convert marginboxes-1.full.png -resize 421x marginboxes-1.colour.png
           cp marginboxes-1.colour.png ../../docs/assets/samples/

.github/workflows/docusaurus-next-release-build.yml

@@ -15,18 +15,11 @@ jobs:
           sudo apt-get install -y xsltproc
       - name: Make the properties
         run: |
-          cd ./website/properties
-          mkdir ./output
-          xsltproc table.xsl properties.xml > output/css-props.xml
+          cd ./src/properties
           chmod +x ./docs-process.py
           chmod +x ./docs_selflink.py
-          ./docs-process.py output/css-props-out.xml output/css-props.xml
-          ./docs_selflink.py output/css-props-out.xml
-          xsltproc noroot.xsl output/css-props-out.xml > output/css-props.md
-          sed -i '1s;^;---\ntitle: CSS Properties\n---\n\n<style>\n.navigationSlider .slidingNav ul li:nth-child(3), .navigationSlider .slidingNav ul li:nth-child(3) > a:hover, .navigationSlider .slidingNav ul li.siteNavGroupActive > a { background-color: #fff }\n .nav-site li:nth-child(3) a { color: #333 !important }\n .nav-site li:nth-child(3) a:hover { color: #22b573 !important }\n </style>;' output/css-props.md
-          cat script >> output/css-props.md
-          cp output/css-props.md ../../docs/
-          rm -rf ./output
+          make
+          make clean
           cd ./../..
         shell: bash
       - name: Install Prince
@@ -38,7 +31,7 @@ jobs:
           sudo apt install imagemagick
       - name: Make the page region image
         run: |
-          cd ./website/samples
+          cd ./src/samples
           prince marginboxes.html --raster-output marginboxes-1.full.png --raster-dpi=150 --raster-pages=1 --raster-format=png
           convert marginboxes-1.full.png -resize 421x marginboxes-1.colour.png
           cp marginboxes-1.colour.png ../../docs/assets/samples/

.github/workflows/prince-archive.yml

@@ -23,18 +23,11 @@ jobs:
           sudo apt-get install -y xsltproc
       - name: Make the properties
         run: |
-          cd ./website/properties
-          mkdir ./output
-          xsltproc table.xsl properties.xml > output/css-props.xml
+          cd ./src/properties
           chmod +x ./docs-process.py
           chmod +x ./docs_selflink.py
-          ./docs-process.py output/css-props-out.xml output/css-props.xml
-          ./docs_selflink.py output/css-props-out.xml
-          xsltproc noroot.xsl output/css-props-out.xml > output/css-props.md
-          sed -i '1s;^;---\ntitle: CSS Properties\n---\n\n<style>\n.navigationSlider .slidingNav ul li:nth-child(3), .navigationSlider .slidingNav ul li:nth-child(3) > a:hover, .navigationSlider .slidingNav ul li.siteNavGroupActive > a { background-color: #fff }\n .nav-site li:nth-child(3) a { color: #333 !important }\n .nav-site li:nth-child(3) a:hover { color: #22b573 !important }\n </style>;' output/css-props.md
-          cat script >> output/css-props.md
-          cp output/css-props.md ../../docs/
-          rm -rf ./output
+          make
+          make clean
           cd ./../..
         shell: bash
       - name: Install Prince
@@ -46,7 +39,7 @@ jobs:
           sudo apt install imagemagick
       - name: Make the page region image
         run: |
-          cd ./website/samples
+          cd ./src/samples
           prince marginboxes.html --raster-output marginboxes-1.full.png --raster-dpi=150 --raster-pages=1 --raster-format=png
           convert marginboxes-1.full.png -resize 421x marginboxes-1.colour.png
           cp marginboxes-1.colour.png ../../docs/assets/samples/

.gitignore

@@ -15,12 +15,9 @@
 .env.test.local
 .env.production.local
 
-yarn.lock
-
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
 src/samples/*.png
 docs/assets/samples/marginboxes*
-docs/css-props.md

README.md

@@ -3,6 +3,8 @@
 This is the repository of the [Prince documentation](https://www.princexml.com/doc/),
 built with the [Docusaurus v3](https://docusaurus.io/) framework.
 
+## CSS Properties
+
 The CSS properties are however stored *outside* of the Docusaurus framework,
 in order to preserve the XML format for the properties' documentation, which is
 located in `./src/properties`.
@@ -16,16 +18,26 @@ There are some little requirements for this:
 * Python
 * the xsltproc XSLT processor
 
-(Hint: If *really* need be, you could do without Jing, just fix your Makefile.)
+(Hint: If *really* need be, you could do without Jing, just comment it out in your Makefile.)
+
+## Page Region samples
 
 Also the rasterized Page Region image is generated outside of the Docusaurus
 framework - you first need to run `make` in the `./src/samples` folder.
 Having Prince installed is a requirement.
 
+## Root makefile and dev server
+
 Both makefiles are called from the Makefile in the root folder. To start
 the fully set up documentation, instead of just `yarn run start`, you run
 the following command from the root folder:
 
 ```
     $ make && yarn run start
 ```
+
+Because of how [Docusaurus's dev server](https://docusaurus.io/docs/cli#docusaurus-start-sitedir) works, some functionality (for example, anchor links) will not work in development. Be sure to regularly test the production Docusaurus build locally:
+
+```
+make && yarn run build && yarn run serve
+```

docs/css-props.md

@@ -0,0 +1,9 @@
+---
+id: css-props
+title: CSS Properties
+sidebar_label: CSS Properties
+---
+
+import CSSProps from '../src/pages/css-props'
+
+<CSSProps />

package.json

@@ -21,7 +21,6 @@
     "babel-runtime": "^6.26.0",
     "clsx": "^2.1.1",
     "prism-react-renderer": "^2.4.1",
-    "htmltojsx": "^0.3.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-script-tag": "^1.1.2"

src/css/custom.css

@@ -294,6 +294,7 @@ table.property-table td {
 #prop-list details[open] summary.ext + div, #prop-list details[open] summary.ext + div + div, #js-support-table details[open] summary.ext + div, #js-support-table details[open] summary.ext + div + div {
   border-radius: 0px 0px 10px 10px;
 }
+#ext-props span.ext,
 #prop-list span.ext {
   background-color: #eee;
 }
@@ -315,7 +316,7 @@ table.property-table td {
 #prop-list summary.dep, span.dep {
     text-decoration: line-through;
 }
-#prop-list summary.dep, #prop-list summary.dep + div, #prop-list summary.dep + div + div, #prop-list span.dep {
+#prop-list summary.dep, #prop-list summary.dep + div, #prop-list summary.dep + div + div, #prop-list span.dep, #dep-props .dep {
     opacity: 0.4;
 }
 #prop-list summary#prop---custom-property-name, #prop-list summary#prop---custom-property-name + div .example .syntax-block > code {