feat: make published html scripts configurable
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.
@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 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 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:
- Add the Google Analyticals to the published sites
- 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.
@logseq-cldwalker
Use case 1 : integrate with Google Analytics
- 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');"}]}
- user use
publish-spato generate html
logseq-publish-spa <OUTPUT> -s <STATIC> -d <INPUT> --theme-mode dark --accent-color indigo
- 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 I fixed all the lint error, may be you can review this PR again when you are free