logseq icon indicating copy to clipboard operation
logseq copied to clipboard

feat: make published html scripts configurable

Open CNLHC opened this issue 1 year ago • 5 comments

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 avatar Mar 21 '24 11:03 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?

CNLHC avatar Apr 18 '24 00:04 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

logseq-cldwalker avatar Apr 19 '24 17:04 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

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 https://github.com/logseq/publish-spa/pull/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 avatar Apr 20 '24 05:04 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');"}]}
  1. user use publish-spa to generate html
logseq-publish-spa <OUTPUT>  -s <STATIC>   -d <INPUT> --theme-mode dark --accent-color indigo

  1. 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>

CNLHC avatar Apr 23 '24 08:04 CNLHC

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

CNLHC avatar May 10 '24 02:05 CNLHC