Full Alert css loading in localhost, not to production site

[raqueeb]

As per @h-enk instruction, I did the following,

In ./config/_default/config.toml set baseurl = "/"
In ./config/production/config.toml set baseurl = "https://aiwithr.github.io/newsite/"

If I use the relative path assets\scss\common_fonts.scss for the font,

@font-face {
  font-family: "SiyamRupali";
  src: 
    local("Jost"),  
    url('fonts/vendor/jost/SiyamRupali.woff') format('woff');
  font-weight: normal;
  font-style: 400;
  font-display: block;
}

Then, it works in the localhost setting, but not in the https://aiwithr.github.io/newsite/. The workaround was to put the font elsewhere and replace url('fonts/vendor/jost/SiyamRupali.woff') format('woff');

with 'https://aiwithr.github.io/css/SiyamRupali.woff', which is constant. But it seems it loads twice as it has local src: local("Jost") too.

It should change the relative path with the ./config/production/config.toml set baseurl = "https://aiwithr.github.io/newsite/" but does not work for gh-pages. The link is here ... https://aiwithr.github.io/newsite/

The alert works fine in the localhost setting, like this ---

but for https://aiwithr.github.io/newsite/, it looks like

I believe there is some issue with path and,

I tired commenting it out, this part,

.alert-light {
  color: #215888;
  background: linear-gradient(-45deg, rgb(212, 245, 255), rgb(234, 250, 255), rgb(234, 250, 255), #d3f6ef);
}

.alert-light .alert-link {
  color: #215888;
}

It stays the same.

My generated css file is here -- https://aiwithr.github.io/newsite/main.598ad9e7f0237ae187f65828cc2720fe740790edb400d34b5ff93faab11d6267dafc8d9b1b150dc876a79dd1d44b9deda042a87ab9dfcbc6c5e00ce8a1e76af6.css

Thank you in advance for the assistance.

[h-enk]

Re. alert message link:

If it works OK on localhost, but not in production, it probably has something to do with PurgeCSS.

Add to ./config/postcss.config.js in the whitelister section './assets/scss/components/_alerts.scss',, like so:

const autoprefixer = require('autoprefixer');
const purgecss = require('@fullhuman/postcss-purgecss');
const whitelister = require('purgecss-whitelister');

module.exports = {
  plugins: [
    autoprefixer(),
    purgecss({
      content: [
        './layouts/**/*.html',
        './content/**/*.md',
      ],
      safelist: [
        'lazyloaded',
        ...whitelister([
          './assets/scss/components/_code.scss',
          './assets/scss/components/_search.scss',
          './assets/scss/components/_alerts.scss',
          './assets/scss/common/_dark.scss',
        ]),
      ],
    }),
  ],
}

Then, try again.

[raqueeb]

Thank you so much! it worked!

[h-enk]

@raqueeb, please post 1 issue /question per Doks Discussions item, and please once. That way we keep Doks Discussions clear and better usable. Thanks!

[raqueeb]

I'll do that. Thank you.

[h-enk]

Re. extra font /double font loading:

Would you mind sharing the original repo (not the result /website repo)?

[raqueeb]

You have rightly figured out the problem. Do I need to still upload that?

[h-enk]

No, not if your issue(s) are solved 😉