feat: make published html scripts configurable

[CNLHC]

Currently generated html has fixed scripts list, sometimes the user may want to insert extra scripts to their generated html (e.g. google analytics script). It is a good idea to make the scripts list configurable.

[CNLHC]

@andelf @logseq-cldwalker Hi guys, just notice that this PR exists for some time. I think it is a good feature for those who are using logseq to publish their blog. Could you please review it or leave some comments when you are free?

[logseq-cldwalker]

@CNLHC Hi. Sure. Could you provide a specific example of how you're using the new option(s)? I'll take a look at this next week

[CNLHC]

@CNLHC Hi. Sure. Could you provide a specific example of how you're using the new option(s)? I'll take a look at this next week

Ok. I think two common use cases are:

1. Add the Google Analyticals to the published sites
2. Add comments feature to the published sites

With this PR and logseq/publish-spa#27 merged, a user can define a html-options in his config.edn, and then the scripts tag will be injected into the generated(or "published") html file.

I will post an real example later.

[CNLHC]

@logseq-cldwalker

Use case 1 : integrate with Google Analytics

1. user add some custom scripts in their config-edn

;; config.edn
:html-options {:scripts [{:src "https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXX"},
                         {:content "  
                                window.dataLayer = window.dataLayer || [];
                                function gtag(){dataLayer.push(arguments);}
                                gtag('js', new Date()); 
                                gtag('config', 'G-XXXXXXXX');"}]}

2. user use publish-spa to generate html

logseq-publish-spa <OUTPUT>  -s <STATIC>   -d <INPUT> --theme-mode dark --accent-color indigo

3. generated html will contain the user-defined scripts

  <!-- these two scripts were generated from config.edn -->
  <script src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXX"></script>
  <script>  window.dataLayer = window.dataLayer || [];
    function gtag() { dataLayer.push(arguments); }
    gtag('js', new Date());

    gtag('config', 'G-XXXXXXXX');</script>
  <!-- end -->
  <script src="static/js/react.production.min.js"></script>
  <script src="static/js/react-dom.production.min.js"></script>
  <script src="static/js/ui.js"></script>
  <script src="static/js/main.js"></script>
  <script src="static/js/interact.min.js"></script>
  <script src="static/js/highlight.min.js"></script>
  <script src="static/js/katex.min.js"></script>
  <script src="static/js/html2canvas.min.js"></script>
  <script src="static/js/code-editor.js"></script>
  <script src="static/js/custom.js"></script>

[logseq-cldwalker]

@CNLHC Interesting idea on letting users configure this from their config.edn. Currently :html-options is just an unused, lower level option. I'm open to exposing it to config.edn but there is more work to do:

• A config option needs to be read from repo-config in this fn and passed to publishing-html. Let's call the config option :publishing/html-options
• Since a new config option is added, a new entry needs to be added to https://github.com/logseq/logseq/blob/master/src/resources/templates/config.edn. No need to set a default value but some documentation describing :before-scripts would be helpful
• Since a new config option is added, a new entry needs to be added to this var to validate the new config value

With these updates, a user can configure html-options in their config.edn and it will work with publish-spa or the built-in export. There won't be a need for logseq/publish-spa#27

[logseq-cldwalker]

I'm surprised hiccup supports this. Regardless, we shouldn't be injecting a seq in a vector. Would prefer that the scripts in :body are built dynamically e.g. (into [:body [:div {:id "root"}]] scripts) where scripts is the user configured ones and all the default ones below

[CNLHC]

I'm surprised hiccup supports this. Regardless, we shouldn't be injecting a seq in a vector. Would prefer that the scripts in :body are built dynamically e.g. (into [:body [:div {:id "root"}]] scripts) where scripts is the user configured ones and all the default ones below

Sorry I do not get you. What do you mean by "injecting a seq in a vector"? I guess the seq is the user defined scripts (or scripts-before) ?

[logseq-cldwalker]

The current map is returning a seq which results in:

[:body
   [:div {:id "root"}]
   ...
   ;; from scripts-before
   '([:script {:src ""} ""])
   [:script {:src "static/js/react.production.min.js"}]
   ...

All the scripts-before scripts should look like the existing :script vectors

[CNLHC]

Ah I got you this time. I have added a new function to fullfill this.

[CNLHC]

@logseq-cldwalker I fixed all the lint error, may be you can review this PR again when you are free