Closed JuliDi closed 1 year ago
JuliDi
commented
1 year ago By going through my commit history, I've found what caused the problem:
It broke after I set build_search_index from true to false. However, I have no clue why this breaks Katex. Looks like a bug to me.
JuliDi
commented
1 year ago Just saw the discussion here https://github.com/Keats/tera/issues/743 and this seems to be causing the issue. Maybe the precedence has changed in tera?
Jieiku
commented
1 year ago Abridge by default is enabled on a per page basis: https://abridge.netlify.app/overview-math/
The config.toml for the above site is here: https://raw.githubusercontent.com/Jieiku/abridge/master/config.toml
Abridge Bundles javascript files, this is done to reduce the number of resources loaded which improves page load time.
My guess is your config.toml options do not coincide with your javascript bundle, so it is loading the default bundle, which if you disabled some features may actually cause javascript errors that prevent your js bundle from loading correctly. (do you see any errors in your developer console?)
Building the bundle is outlined in the readme:
and here: https://github.com/Jieiku/abridge#javascript-files-js_bundle-and-options
Unfortunately Zola has ZERO facilities for bundling javascript files, this means you either have to serve every single javascript related feature as a separate file, or bundle them together yourself. Abridge by default takes the route of bundling them together, which results in faster page load times with fewer server requests. As outlined in the ReadMe we use uglifyjs for this, multiple build options are outlined in package.json(a script file usable by npm) but you can include whatever features you feel you need and make a custom bundle if you wanted.
If you still need help, do you have a site or test site in a repository someplace that I can reproduce what is happening? Otherwise can you post your config.toml? (redact whatever you need to)
Jieiku
commented
1 year ago Just saw the discussion here Keats/tera#743 and this seems to be causing the issue. Maybe the precedence has changed in tera?
If that is the cause and its unrelated to the bundle then we need to make a reproducible simple test case for it and file a bug, if you can fork abridge and configure the config.toml in a way that reproduces the bug I would be happy to take a look.
Also your website link is still visible in your comment history, unfortunately with github if you edit out something you did not mean to post you also have to delete the history :( ran into this myself a couple times. ( I deleted it for you, apparently I can do that since this is my repository )
JuliDi
commented
1 year ago Thanks for the input. I am not planning on putting too much javascript on the site (don't need search, but katex would be nice to have). The less the better. So maybe lack of bundling does not do a lot of harm in my case.
My developer console does not show any errors.
But I got it to work by setting js_bundle = false. So maybe this is already the solution?
The config I am now using (working since js_bundle is disabled) is the following:
# do NOT include a trailing slash on the base URL for web urls
base_url = "https://www.myweb.de"
#base_url = "/home/jieiku/.dev/abridge/public/" # for locally usable build directly from disk, also set in [extra] section uglyurls = true
title = "myweb"
description = "text"
default_language = "en"
output_dir = "public"
compile_sass = true
minify_html = false
generate_feed = true
feed_filename = "atom.xml"
#ignored_content = ["*.{graphml,xlsx}", "temp.*"]
#hard_link_static = false # set to true to hard link instead of copying, useful for very large files.
taxonomies = [
{ name = "categories", feed = true },
{ name = "tags", feed = true },
]
#theme = "abridge"
build_search_index = false
[search] # Options specific to elasticlunr search.
include_title = true # include title of page/section in index
include_description = false # include description of page/section in index
include_content = true # include rendered content of page/section in index
# Truncate content at nth character. Useful if index size significantly slows down the site.
# truncate_content_length = 100
[markdown]
highlight_code = true
highlight_theme = "css"
render_emoji = false
external_links_target_blank = true # rel="noopener"
external_links_no_follow = false # rel="nofollow"
external_links_no_referrer = false # rel="noreferrer"
smart_punctuation = false # `...` to `…`, `"quote"` to `“curly”` etc
[extra]
uglyurls = false # if set to true then links are generated with the full path. eg https://abridge.netlify.app/index.html
language_code = "en-US"
title_separator = "|" # Separator between title and title_addition, set as |, -, _, etc
# To disable title_addition but keep built in page additions eg, Posts page: "Posts | Abridge" set title_addition to an empty string
# To always set the page title exactly eg "Abridge" then comment out the below line (not recommend, bad for SEO)
title_addition = "Stuff" # a default value for title addition
recent = true # TOC / index
recent_items = 9
author = "Jake G" # Put Your Name here
title_size_index = "s85" # size: s95, s90, s85, s80, s75, s70, false(full size)
meta_index = { position = "bottom", size = "s90", author = false, readtime = false, readstring = "min", date = true, categories_tags = true, divider = " " }
meta_post = { position = "top", size = "s95", author = true, readtime = false, readstring = "min read", date = true, categories_tags = true, divider = " " }
## position: top, bottom, both, false(hidden) ## size: s95, s90, s85, s80, s75, s70, false(full size)
## divider: "·" "•" " "
footer_size = "s90" # size: s95, s90, s85, s80, s75, s70, false(full size)
footer_credit = true
#footer_credit_override = '<p class="s90">Powered by <a href="https://www.getzola.org/" target="_blank">Zola</a> & <a href="https://github.com/Jieiku/abridge/" target="_blank">Abridge</a></p>'
#uncomment one of the two lines, or neither, depending on which type of logo you want to use:
logo = { file = "logo.svg", width = "256", height = "32", alt = "logo", text = "text." }
#textlogo = '<font color="#f90">A</font>bridge'
#textlogo = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#f90" viewBox="0 0 96 96" width="32" height="32"><path stroke-width="14" d="M14 99 46 7h4l32 92"/><path stroke-width="9" d="M-3 82c43-26 59-26 102 0"/><path stroke-linecap="round" stroke-width="1.5" d="M94 72v7m-5-9.8v7m-5-9.8v7.1M79 64v7M63 57.7v7m-5-8.2v7m-5-7.8v7m-5-7.2v7m-5-6.7v7m-5-6.3v7m-5-5.8v7M17 64v7m-5-4.6v7m-5-4.2v7M2 72v7"/></svg>bridge'
sitedesc = false # enables or disables the display of the site description below the logo.
#copyright_start_year = 2019 # optional
#copyright_end_year = 2020 # optional, recommend leaving unset, zola build will set this to current year by default
headhr = true # show or hide horizontal rule below header
foothr = true # show or hide horizontal rule above footer
menu = [
{ url = "/about/", name = "About", slash = true, blank = false },
{ url = "/services/", name = "Services", slash = true, blank = false },
{ url = "/contact/", name = "Contact", slash = true, blank = false },
#{url = "/categories/", name = "Categories", slash = true, blank = false},
#{url = "/tags/", name = "Tags", slash = true, blank = false},
]
menu_footer = [
{ url = "/about/", name = "About", slash = true, blank = false },
{ url = "/contact/", name = "Contact", slash = true, blank = false },
{ url = "/privacy/", name = "Privacy", slash = true, blank = false },
{ url = "/sitemap.xml", name = "Sitemap", slash = false, blank = true },
]
# Security Headers should preferably be set by your webserver (Nginx, Apache) https://observatory.mozilla.org https://csp-evaluator.withgoogle.com/
# If you are unable to load your security headers with your webserver, this will load a couple of them as meta tags.
# There are many other security related headers most of which can only be set by the webserver method.
# Comment out either of these meta headers and they wont be used.
#security_header_referrer = "strict-origin-when-cross-origin"
#security_header_csp = "default-src 'none'; frame-ancestors 'none'; object-src 'none'; base-uri 'self'; manifest-src 'self'; connect-src 'self'; form-action 'self'; script-src 'self'; img-src 'self' data: cdn.cloudflare.com; frame-src 'self' www.youtube-nocookie.com player.vimeo.com; media-src 'self' data: cdn.cloudflare.com www.youtube-nocookie.com player.vimeo.com; font-src 'self' cdn.cloudflare.com cdn.jsdelivr.net fonts.gstatic.com; style-src 'self' 'unsafe-inline' cdn.cloudflare.com cdn.jsdelivr.net fonts.googleapis.com;"
#################
# Resource Files
#################
integrity = true # setting this to false is useful for developing, should normally be true.
js_bundle = false # multiple javascript files combined into a single file
#js_switcher = true
js_search_facade = true # Do not load search until user interaction with search.
# search library to use, valid values are: false, "elasticlunr", "tinysearch", "stork"
search_library = false
js_search_index = "search_index.en.js" # Separate Always, generated each build
js_prestyle = "prestyle.js" # Bundleable - used to preload: FontAwesome, Katex, external Google Fonts
js_codecopy = "codecopy.js" # Bundleable
js_email = "email.js" # Bundleable
#js_theme = "theme.min.js" # Separate Always, comment out if using -auto/-light/-dark stylesheet. (required for switcher)
#js_themeButton = "theme_button.js"# Bundleable
########## Switcher ########## (comment this block out if NOT using switcher):
#stylesheets = [ "abridge-switcher.css" ] # Orange Automatic Dark/Light Theme based on browser/system preference with switcher
#stylesheets = [ "abridge-blue-switcher.css" ] # Blue Automatic Night/Light Theme based on browser/system preference with switcher
#stylesheets = [ "abridge-blueshade-switcher.css" ] # BlueShade Automatic Night/Light Theme based on browser/system preference with switcher
#stylesheets = [ "abridge-switcher.css", "font.css" ] # include your own font!
#stylesheets = [ "abridge-switcher.css", "iconfont.css" ] # include your own font icons!
#stylesheets = [ "abridge-switcher.css", "font.css", "iconfont.css" ] # include your own font, and font icons!
########## No Switcher ##########
#stylesheets = [ "abridge.css" ] # Orange Automatic Dark/Light Theme based on browser/system preference
#stylesheets = [ "abridge-blue.css" ] # Blue Automatic Night/Light Theme based on browser/system preference
#stylesheets = [ "abridge-blueshade.css" ] # BlueShade Automatic Night/Light Theme based on browser/system preference
#stylesheets = [ "abridge-dark.css" ] # Orange Dark Theme
#stylesheets = [ "abridge-light.css" ] # Orange Light Theme
#stylesheets = [ "abridge-blue-dark.css" ] # Blue Dark Theme
#stylesheets = [ "abridge-blue-light.css" ] # Blue Light Theme
#stylesheets = [ "abridge-blueshade-dark.css" ] # BlueShade Dark Theme
#stylesheets = [ "abridge-blueshade-light.css" ] # BlueShade Light Theme
#stylesheets = [ "abridge.css", "extra.css" ] # example loading extra css
#stylesheets = [ "abridge.css", "syntax/syntax-abridge.css" ]
stylesheets = ["mycustom-blue-light.css"] # Blue Light Theme
banner = "banner.png" # Used as default image for OpenGraph/Twitter if page specific image is undefined.
# favicons, comment out a line to disable loading some or all of these.
favicon_theme_color = "#333333"
favicon_ms_color = "#333333"
favicon_webmanifest = "site.webmanifest" # Used for android-chrome-512x512.png and android-chrome-192x192.png
favicon_mask = "safari-pinned-tab.svg" # safari-pinned-tab.svg
favicon_mask_color = "#ff9900"
favicon180 = "apple-touch-icon.png" # apple-touch-icon.png
favicon32 = "favicon-32x32.png" # favicon-32x32.png
favicon16 = "favicon-16x16.png" # favicon-16x16.png
icon_search = "svgs search" # Search button in search box.
#icon_adjust = "svgs adjust" # Theme Switcher button in top menu. (add class svgh to change colors on hover)
icon_first = "svgs svgh angll" # Pagination First Page.
icon_prev = "svgs svgh angl" # Pagination Previous Page.
icon_next = "svgs svgh angr" # Pagination Next Page.
icon_last = "svgs svgh angrr" # Pagination Last Page.
icon_top = "svgs svgh angu" # Back to Top Button.
# Uncomment below line to load fontawesome, eg: <i class="fa-solid fa-heart"></i>
#fontawesome = "https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.1/css/all.min.css"
# Icons, by default fontawesome classes, but you can specify any icon you want here.
#icon_read = "svgs fa-solid fa-glasses" # displayed in metadata on index and below title on page.
#icon_date = "svgs fa-solid fa-calendar" # displayed in metadata on index and below title on page.
#icon_info = "svgs fa-solid fa-circle-info" # displayed in metadata on index and below title on page for categories/tags
#icon_author = "svgs fa-solid fa-pen-fancy" # displayed in metadata on index and below title on page.
# For externally loaded Fonts, make sure to include the FULL url including the http/https prefix
#fonts = [ {url = "https://fonts.googleapis.com/css?family=Montserrat:400,700,italic|Fira+Code:400,italic"} ]
# Local fonts are defined in the css, defining them here only adds the preload tag to the head.
# preload will eliminate Content Layout Shift, but will hurt with page load time. (not recommended)
#fonts = [
# {url = "font/FiraCode.woff2"},
# {url = "font/Roboto.woff2"},
# {url = "font/Roboto-Italic.woff2"},
# {url = "font/Roboto-Bold.woff2"},
#]
math = false # katex math js library, used to to render mathematical notations, requires javascript
math_auto_render = false
#katex_css = "https://cdn.jsdelivr.net/npm/katex@0.15.6/dist/katex.min.css" # Fonts - use remote fonts
#katex_js = "https://cdn.jsdelivr.net/npm/katex@0.15.6/dist/katex.min.js"
#katex_autorender_js = "https://cdn.jsdelivr.net/npm/katex@0.15.6/dist/contrib/auto-render.min.js"
#mathtex_js = "https://cdn.jsdelivr.net/npm/katex@0.15.6/dist/contrib/mathtex-script-type.min.js"
katex_css = "katex.min.css" # Fonts - to load the css locally, you also need to have all the fonts.
katex_js = "katex.min.js" # use local js, so that we dont have to whitelist cdn.jsdelivr.net for script src in CSP
mathtex_js = "mathtex-script-type.min.js" # use local js, so that we dont have to whitelist cdn.jsdelivr.net for script src in CSP
katex_autorender_js = "auto-render.min.js"
katex_options = "katexoptions.js"
katex_bundle = "katexbundle.min.js"
##########################
# meta/seo/analytic tags
##########################
keywords = "Key, Word" # used for the primary site index
#twitter = "your-user-name" # used for twitter related
#google = "Your Google Site verification code."
#bing = "Your Bing Site verification code."
seo = true # enable or disable seo-related meta tags: opengraph, facebook, twitter
# Footer social links; full options listed in macros/social.html
[extra.social]
feed = false
mail_encode = true # This obfuscates your email address, javascript is used to decode it at page load.
mail = "mail@example.com"
#element = "matrix.example.com"
github = "example"
I was able to reproduce this with the following changes from Abridge defaults:
build_search_index = false
js_bundle = true
js_switcher = false
#js_theme = "theme.min.js"
#js_themeButton = "theme_button.js"
#stylesheets = [ "abridge-switcher.css" ] # Orange Automatic Dark/Light Theme based on browser/system preference with switcher
stylesheets = [ "abridge-blue-light.css" ] # Blue Light ThemeThis happened because a feature combination of both noswitcher and nosearch was not accounted for. This is why I wish zola had built in bundle support, where you simply give it a list of javascript files you wish to include. using NPM scripts to handle js bundling is clumsy at best, particularly in a public theme, where everyone may have different requirements.
I added a couple more entries to the package.json one of which should handle your use case, I then added this to the head macro, it now works as expected with js_bundle = true
commit: https://github.com/Jieiku/abridge/commit/7e39d936aee880141fded9a7e5b1714efbe160e7
Jieiku
commented
1 year ago The plan is for this to be much simpler when the refactor branch gets merged, right now the config is a bit convoluted.
Hi, I am having some trouble getting the math rendering to work after enabling it on a per-page basis:
Chrome shows me this in the console, which might be related:
There rendered math looks like this:
originating from this html
Unfortunately, I have no experience with katex and therefore I am pretty lost in terms of locating the error. Any help getting me to the right direction would be appreciated!