wintermeyer / elixir-phoenix-ash

An Elixir, Phoenix and Ash Beginner's Guide
https://elixir-phoenix-ash.com
Other
10 stars 7 forks source link

In my computer and phone, website's `\00a7` becomes `\<?>a7`. #36

Open vagreargnatry opened 1 year ago

vagreargnatry commented 1 year ago

Hello, thank you for providing the learning content. Currently in my computer and phone, \00a7 becomes \<?>a7. My computer is a Window 11 Laptop and my phone is an Android phone.

image

image

Then I use this e0d0ca42a72a7698beb7e71b867a0369a9ab56fb commit and npx antora antora-playbook.yml and VS Code's Five Server(Live Server) extension, \00a7 can display normally.

image

wintermeyer commented 1 year ago

Hello, thank you for providing the learning content.

Thank you for your positive feedback. 😀

Currently in my computer and phone, \00a7 becomes \<?>a7. My computer is a Window 11 Laptop and my phone is an Android phone.

Hah! That is a CSS optimisation problem. During the build I do the following:

        # Create the purgecss.config.js file on-the-fly
        echo "module.exports = {" > purgecss.config.js
        echo "  content: []," >> purgecss.config.js
        echo "  css: []," >> purgecss.config.js
        echo "  safelist: {" >> purgecss.config.js
        echo "    standard: ['embedded', /toc.*/, /copy.*/, /source.*/, /hljs.*/, 'language-elixir', 'language-bash', /highlight.*/, /arabic.*/, 'colist', /.*conum.*/, 'table', 'tr', 'td', 'th', 'theader', 'tbody', 'anchor', 'h1', 'h2', 'h3', 'h4', 'h5']," >> purgecss.config.js
        echo "    deep: [/blue_example$/]," >> purgecss.config.js
        echo "    greedy: [/yellow_example$/]" >> purgecss.config.js
        echo "  }," >> purgecss.config.js
        echo "  output: './build/site/antora-assets/css/'" >> purgecss.config.js
        echo "};" >> purgecss.config.js

        find ./build/site/ -name "*.html" | while read -r file; do
          # Optimize CSS for the current HTML file using the configuration file
          purgecss --config purgecss.config.js --content "$file" --css ./build/site/antora-assets/css/site.css --output ./build/site/antora-assets/css/site_temp.css
          purgecss --config purgecss.config.js --content "$file" --css ./build/site/antora-assets/css/site-extra.css --output ./build/site/antora-assets/css/site-extra_temp.css

And during that process that specific CSS gets lost. There is a white list functionality, but I have very limited CSS knowledge and therefor don't know which element I have to whitelist to fix this.

Anybody who reads this and now the answer: Please post the element here and I'll add it to the white list.