[Fixed] Theme doesn't render in certain browser/platform combos

[salmanhk]

We ported over our documentation site docs.pnumerics.com to Doks and it looks quite slick. However it doesn't really render properly on some browser/platform configs. It was mostly trial and error as we were figuring it out so might have tweaked something incorrectly.

For my colleague, Mac+Edge rendered ok, but on refresh theme was stripped
Windows+Edge localhost ok, but theme stripped when deployed
Android+Firefox, theme stripped

Any ideas? We are not really familiar with web technologies too well so might need some hand holding 🙃

[epogrebnyak]

What about the bahavior on localhost? Can you do hugo serve and try same browsers on local machive? Have you changed baseurl in config.toml to your new website? It looks you are loosing a link to css file.

[epogrebnyak]

As of now https://docs.pnumerics.com/ loads for me in Opera, Firefox and Edge. Maybe some of the files did not upload or propagate to your hosting, but it looks it works now.

[salmanhk]

It still seems like a hit and miss. localhost seems fine and the baseurl has been changed from default. I am going to do the classic "start over" and deploy through netlify.

[h-enk]

@salmanhk, when I look in Chrome DevTools (F12), I notice a number of (security related) issues, e.g.:

Failed to find a valid digest in the 'integrity' attribute for resource 'https://docs.pnumerics.com/main.91fa58ea9637ccea2542cc2a8e08f746adbc6cf7f3b2808915a27731bd5a39a0a424b5b436236f730a19f01b6328db3e25ac1b45386a26d2be26f2824088ad29.css' with computed SHA-256 integrity 'jXyzDGfjLIRwZ94ko3F35X0dVTE8q9Jl2bbdplPQ2ZM='. The resource has been blocked.

Would you mind sharing your repo? Then I can help you better.

[salmanhk]

First of all, Thank you for an amazing theme. Looks like you put a lot of time and energy into it and it really is fantastic.

What we are going to do is start over from a clean theme image, deploy through netlify and see if that is better. I should be able to do that in the next couple of hours or so and see if that is better. I should have mentioned earlier that we currently push out the public folder over ftp to our hosting provider (not netlify). If netlify works better I'll just fiddle around with cname settings and get the docs subdomain hosted there.

The one "real" change I made was adding Katex support in layouts\partials\head\head.html
It would be a big plus if latex support were built in.

   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.css" integrity="sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X" crossorigin="anonymous">

    <!-- The loading of KaTeX is deferred to speed up page rendering -->
    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.js" integrity="sha384-g7c+Jr9ZivxKLnZTDUhnkOnsh30B4H0rpLUpJ4jAIKs4fnJI+sEnkvrMWph2EDg4" crossorigin="anonymous"></script>

    <!-- To automatically render math in text elements, include the auto-render extension: -->
    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/contrib/auto-render.min.js" integrity="sha384-mll67QQFJfxn0IYznZYonOWZ644AWYC+Pt2cHqMaRhXVrursRwvLnLaebdGIlYNa" crossorigin="anonymous"
        onload="renderMathInElement(document.body);"></script>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            renderMathInElement(document.body, {
                delimiters: [
                    {left: "$$", right: "$$", display: true},
                    {left: "$", right: "$", display: false}
                ]
            });
        });
    </script>

[epogrebnyak]

+1 and +1 for latex formulas and code formatting - let us put that on a roadmap? In Huod worl I like the implementation of both in CodeIT/LoveIt theme:

Here is a link to code highlighting demo:

https://codeit.suntprogramator.dev/basic-markdown-syntax/#9-code

Here is a link to latex:

https://codeit.suntprogramator.dev/theme-documentation-content/#mathematical-formula

[h-enk]

It would be a big plus if latex support were built in.

On the map, but will then make it a npm implementation of KaTeX (dependency management reasons...).

[epogrebnyak]

Also - why not add https://docs.pnumerics.com/ to showcase? It is a very good use of the theme! attn @h-enk

[h-enk]

I'm working on it right now

[h-enk]

@salmanhk, I've create a pull request that fixed the security issues.

No more console errors in Chrome DevTools (F12).

See:

• https://jovial-bohr-fe7ee0.netlify.app/
• https://observatory.mozilla.org/analyze/jovial-bohr-fe7ee0.netlify.app

B+ max because of unsafe-inline directive for both style-src and script-src. npm implementation of KaTeX could possibly bump it up to A(+).

Tested in:

• FireFox Developer Edition 86.0b4 (64-bit)
• Chrome Version 88.0.4324.104 (Official Build) (64-bit)
• Iridium Version 2020.11 (Official Build) (64-bit)
• Sidekick Version 87.7.42.7011 (Official Build) (64-bit)

[h-enk]

https://github.com/salmanhk/pn_docs_temp/pull/1

[salmanhk]

I was having issues on a fresh experimental website as well. https://trusting-poincare-3777bc.netlify.app/ But that pull request is what fixed it on that website so I think its good to go.

I'll finish tweaking that and redirect the subdomain to netlify.

Extremely slick theme. Thank you guys so much!

[epogrebnyak]

All kudos to @h-enk - he is the one making and fixing things! As for me - it is great to see the new theme tested on real projects, so thanks for using it, hope it serves well your case.

[epogrebnyak]

Sure, everything npm-based in Doks! ) вт, 2 февр. 2021 г., 18:46 Henk Verlinde <notifications@github.com>:

…

I'm working on it right now — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#102 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACGWBLVLDADFPARBY4F2773S5AM5FANCNFSM4W5TT7ZA> .

[epogrebnyak]

With this new Discussions forum you can not really have the satisfaction of closing the issue once one fixed, it will hang here forever )

[salmanhk]

At some point thinking of a complete web rewrite. Just emailed you and we can start that discussion on the email chain.

[salmanhk]

Btw, looks like everything is working on the docs front now.

[h-enk]

Result in my case e.g. (will remove this when you're all set up) : https://pnumerics.getdoks.org/

Removed

[h-enk]

Btw, looks like everything is working on the docs front now.

Added to showcase: https://getdoks.org/showcase/parietal-numerics-documentation/

[salmanhk]

Thank you!