Separate NexT inline scripts and styles #226

PaperStrike · 2021-03-10T11:30:35Z

PR Checklist

The commit message follows guidelines for NexT.
Tests for the changes was maked (for bug fixes / features).
- Muse | Mist have been tested.
- Pisces | Gemini have been tested.
Docs in NexT website have been added / updated (for features).

PR Type

What is the current behavior?

NexT is using several inline scripts and inline styles.

Issue resolved: #220

What is the new behavior?

Scripts (except third party and schedule modules) will be load in separate files. (Demo site now runs without setting unsafe-inline in script-src of CSP.)
Inline styles remains where they are for now, since they are a little bit scattered.
But all of them will be separated in future commits.

Tests is not enough yet.

Link to demo site with this changes: sliphua.work
Screenshots with this changes:

How to use?

In NexT _config.yml:

- TODO: Compatibility with Pjax.

- Use <meta name="hexo-config[-page]"> to store configurations - Combine js scripts in `head.njk` and `head-unique.njk` into `load-config.js` - Remove unused class `hexo-configurations`

- Background image of `.link-grid-image` are defined by passing parameters to and then generated by `link-grid.js`, which means it can't be moved into single CSS file directly. A more proper way would be changing the type of it, from `<div>` to `<img>`, and use `src` instead of `style="background-image: "` - which needs a discussion

PaperStrike · 2021-03-10T12:35:20Z

I separated most of the inline styles in the last commit. There are one inline style I left untouched in scripts/tags/link-grid.js.

Background image of .link-grid-image are defined by passing parameters to and then generated by link-grid.js, which means it can't be moved into a single CSS file directly. A more proper way would be changing the type of it, from <div> to <img>, and use src instead of style="background-image: ".

By changing the type, not only the related CSS code in NexT needs changes, styles defined by users may also be affected. So, should I leave the way it is or change its type and related CSS anyway?

- Refactor `load-config.js` and `pjax.js` to load and update all configurations at once.

PaperStrike · 2021-03-11T06:32:07Z

Scripts have (almost) all been separated into .js files, except the third-party ones.
Styles have (almost) all been separated into .styl files, except the link-grid one.

@stevenjoezhang What's our next move? ("Except" the "except"s, or leave the way they are?)

layout/_layout.njk

source/css/_common/outline/footer/index.styl

Co-authored-by: Mimi <[email protected]>

PaperStrike · 2021-03-14T02:55:09Z

Edit: see my next comment and ignore this.

@next-theme/core I am trying to separate the scripts in layout/_third-party/*[/*]/*.njk, and noticed that a lot of them creates a <script> and injects to <head>. Like:

layout/_third-party/analytics/baidu-analytics.njk:

{%- if theme.baidu_analytics %}
  <script{{ pjax }}>
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?{{ theme.baidu_analytics }}";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    })();
  </script>
{%- endif %}

I don't understand. What's the difference it made from:

{%- if theme.baidu_analytics %}
  <script{{ pjax }}>var _hmt = _hmt || [];</script>
  <script{{ pjax }} src="https://hm.baidu.com/hm.js?{{ theme.baidu_analytics }}"></script>
{%- endif %}

?
When browser parser reach these lines, the parsed has been parsed, injects new script to <head> will not change the execute order. it will turn to run the just-injected after the current script is finished, which is the same as the second code block.

If there is something I missed out, appeciate you informing me. or I may refactor some parts of the scripts like this.

jiangtj · 2021-03-15T01:31:24Z

baidu-analytics, this part of the code may be copied directly from Baidu

PaperStrike · 2021-03-15T07:36:10Z

@next-theme/core Ignore my last commit and take a look at this one 😅, I figured out a new way to implement the third party scripts, which is to edit and move the .njk files to .js files (layout/_third-party[/*]/*.njk -> source/js/third-party[/*]/*.js, except every index.njk). I believe it's better for performance and future coding.

There is a possible sample, it

calls CONFIG.getCurrent() to get parameters.

// CONFIG.getCurrent() returns the parsed `data-config` of
// `document.currentScript`.
const disqusConfig = CONFIG.getCurrent();

listens topage:ready event
```
// `page:ready` is fired when new configurations have been set
// after `DOMContentLoaded` and each `pjax:success`.
document.addEventListener('page:ready', () => {
```
instead of executed by

hexo-theme-next/source/js/pjax.js

Line 19 in d20cfdf

pjax.executeScripts(document.querySelectorAll('script[data-pjax], .pjax script'));

uses NexT.utils.getScript to conditionally inject scripts.

// `NexT.utils.getScript` now recieves a fourth
// parameter as the script's attributes.
// Use `NexT.utils.getScript` instead of creating a
// `<script>` here, so that we can easily refactor
// when there is a better way.
NexT.utils.getScript(
  `https://${disqusConfig.shortname}.disqus.com/count.js`,
  () => {},
  false,
  { id: 'dsq-count-scr' }
);

Most of the third party scripts are injected once it is enabled, while the ones about comments (layout/_third-party/comments/*) (or more) are injected when it is enabled and page.comments evaluates to true(, there may be more conditions to fit but they're similar here). As page.comments differs in different pages, you may complain that the scripts may be loaded but unneeded.

But it's easy to write some conditions for the pages that don't use Pjax, to not implement these .js when corresponding additional conditions evaluates to false, the same way we do in current .njk. So, the only case where these scripts are "loaded but unneeded" will be when the site uses Pjax and the user did not open any page that fits the condition. Acturally, it boosts the speed of the sites with Pjax enabled as these scripts will not be reinjected by pjax.executeScripts, does no harm to sites with Pjax disabled.

Feel free to share your opinions.

PaperStrike · 2021-03-15T13:53:10Z

If we are lucky, changing the type of .link-grid-image (0cc96fc) won't cause any problems. I have tested it in my browsers, comparing the original <div> one and <object> one in a same page, and noticed nothing visible is changed after changing the type and editing related CSS properties. But the compatibility remainds to be seen, especially that someone would have written some custom CSS code about it.

I decided to use <object> instead of <img> to prevent the broken image being shown when the image fails to load. Besides, with <object>, we will be able to customize the HTML content when it fails, as the standard describes: (fallback here is like onerror, click the link for details.)

Fallback: The object element represents the element's children, ignoring any leading param element children. This is the element's fallback content. If the element has an instantiated plugin, then unload it. If the element's nested browsing context is non-null, then it must be discarded and then set to null.

If you are fine with these changes, this pull request will be merged very soon, and future discussions about the third-party implements will continue in a new pull request.

* Fix head inject point * Switch `.link-grid-image` to `<img>` * Switch `.link-grid-image` back to `<object>` - Set `type` to `image/jpeg` for image without file extension

PaperStrike added 3 commits March 10, 2021 15:07

Separate inline scripts from HTML

3b61501

- TODO: Compatibility with Pjax.

Adapt Pjax

3c0af40

- Use <meta name="hexo-config[-page]"> to store configurations - Combine js scripts in `head.njk` and `head-unique.njk` into `load-config.js` - Remove unused class `hexo-configurations`

Separate inline scripts from comments.njk

ecb3565

github-actions bot added the Layout label Mar 10, 2021

github-actions bot added the CSS label Mar 10, 2021

PaperStrike marked this pull request as ready for review March 10, 2021 12:51

Separate inline scripts from schedule.njk

3de6050

- Refactor `load-config.js` and `pjax.js` to load and update all configurations at once.

njzjz reviewed Mar 11, 2021

View reviewed changes

layout/_layout.njk Outdated Show resolved Hide resolved

Make use of next_js

0e18826

PaperStrike force-pushed the csp-no-unsafe-inline branch from 08f5e7a to 0e18826 Compare March 11, 2021 08:13

Adapt Pjax on schedule module

37a9a61

PaperStrike added this to the 8.3.0 milestone Mar 11, 2021

stevenjoezhang reviewed Mar 12, 2021

View reviewed changes

source/css/_common/outline/footer/index.styl Outdated Show resolved Hide resolved

PaperStrike and others added 2 commits March 12, 2021 13:01

Compress style in .beian

0fe1879

Co-authored-by: Mimi <[email protected]>

Escape config in nunjucks constantly

d20cfdf

Switch .link-grid-image to <object>

0cc96fc

PaperStrike requested review from stevenjoezhang and njzjz March 15, 2021 13:30

njzjz approved these changes Mar 23, 2021

View reviewed changes

stevenjoezhang mentioned this pull request Mar 30, 2021

New reversed reading progress bar option #221

Merged

12 tasks

stevenjoezhang modified the milestones: 8.3.0, 8.4.0 Mar 31, 2021

stevenjoezhang merged commit 6b23d42 into next-theme:master Apr 1, 2021

PaperStrike deleted the csp-no-unsafe-inline branch April 1, 2021 11:54

PaperStrike restored the csp-no-unsafe-inline branch April 4, 2021 09:25

PaperStrike mentioned this pull request Apr 5, 2021

Minor fixes on #226 #240

Merged

12 tasks

ljcbaby pushed a commit that referenced this pull request Apr 5, 2021

Minor fixes on #226 (#240)

662dd80

* Fix head inject point * Switch `.link-grid-image` to `<img>` * Switch `.link-grid-image` back to `<object>` - Set `type` to `image/jpeg` for image without file extension

PaperStrike mentioned this pull request Apr 5, 2021

Separate third party inline scripts #241

Merged

29 tasks

PaperStrike changed the title ~~Separate inline scripts and styles into single files~~ Separate NexT inline scripts and styles Apr 20, 2021

PaperStrike added the 🛠 Improvement label Apr 20, 2021

stevenjoezhang added the PJAX label Aug 30, 2021

stevenjoezhang mentioned this pull request Sep 15, 2021

传Google Calendar API Key时，传的值为undefined #374

Closed

3 tasks

lingyf pushed a commit to lingyf/hexo-theme-next that referenced this pull request Jan 27, 2022

Separate inline scripts and styles into single files (next-theme#226)

2b64ae8

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Separate NexT inline scripts and styles #226

Separate NexT inline scripts and styles #226

PaperStrike commented Mar 10, 2021 •

edited

Loading

PaperStrike commented Mar 10, 2021

PaperStrike commented Mar 11, 2021

PaperStrike commented Mar 14, 2021 •

edited

Loading

jiangtj commented Mar 15, 2021

PaperStrike commented Mar 15, 2021 •

edited

Loading

PaperStrike commented Mar 15, 2021 •

edited

Loading

Separate NexT inline scripts and styles #226

Separate NexT inline scripts and styles #226

Conversation

PaperStrike commented Mar 10, 2021 • edited Loading

PR Checklist

PR Type

What is the current behavior?

What is the new behavior?

How to use?

PaperStrike commented Mar 10, 2021

PaperStrike commented Mar 11, 2021

PaperStrike commented Mar 14, 2021 • edited Loading

jiangtj commented Mar 15, 2021

PaperStrike commented Mar 15, 2021 • edited Loading

PaperStrike commented Mar 15, 2021 • edited Loading

PaperStrike commented Mar 10, 2021 •

edited

Loading

PaperStrike commented Mar 14, 2021 •

edited

Loading

PaperStrike commented Mar 15, 2021 •

edited

Loading

PaperStrike commented Mar 15, 2021 •

edited

Loading