Fixes#3168. (Implemented by [jules.google](https://jules.google).)
This commit resolves issues with footnote and citation styling in
Distill posts, particularly ensuring that pop-up contents and the
numbers themselves respect the site's light/dark theme via shadow DOM
style definitions.
Key changes:
1. **`d-hover-box` Internal Styling (template.v2.js):**
The `<style>` tag within the `d-hover-box` component's template
in `assets/js/distillpub/template.v2.js` has been updated.
Styles for `.panel` (the main pop-up container) now define:
- `background-color: var(--global-card-bg-color);`
- `border: 1px solid var(--global-divider-color);`
- `color: var(--global-text-color);` (for default text)
- Links within the panel are styled with
`color: var(--global-theme-color);` and
`color: var(--global-hover-color);` on hover.
This ensures pop-up content is correctly themed from within its
shadow DOM.
2. **Footnote/Citation Number Color (template.v2.js):**
The hardcoded `hsla(206, 90%, 20%, 0.7)` color previously used for
footnote numbers (in `d-footnote` template) and citation numbers
(in `d-cite` template) in `assets/js/distillpub/template.v2.js`
has been replaced with `color: var(--global-theme-color);`.
3. **Cleaned `_sass/_distill.scss`:**
Removed the (now redundant) global CSS overrides for `d-hover-box`
from `_sass/_distill.scss`, as these styles are now correctly
encapsulated within the `d-hover-box` component itself.
These changes ensure that all aspects of Distill footnotes and
citations (numbers, pop-up background, pop-up text, and links within
pop-ups) are styled using theme-aware CSS variables, providing
correct visual appearance and readability in both light and dark modes.
---------
Co-authored-by: google-labs-jules[bot] <161369871+google-labs-jules[bot]@users.noreply.github.com>
As described in https://github.com/alshedivat/al-folio/issues/300,
standard Markdown code highlighting doesn't work in the Distill template
because it is clobbered by the Distill "Prism" syntax highlighting. This
PR will allow d-code tags (distill-specific code tags) to function with
the Distill syntax highlighter, but will default `highlight` and
Markdown code blocks to use the Jekyll/Rouge highlighter.
This PR also removes overrides.js, which is currently broken because
jquery isn't loaded.
## Problem Description
When dark mode is enabled, inline math expressions rendered using
`$...$` in distill-style blog posts are displayed in black text. This
makes them difficult to read against the dark background. The issue
occurs because the default styles for MathJax-rendered content do not
account for dark mode and set the text color to black.
## Proposed Solution
This PR updates the MathJax setup to dynamically apply inline styles to
ensure the text color of MathJax-rendered content inherits the parent
container’s color. Specifically:
- Added a custom action in the _MathJax.options.renderActions_ section
to inject a CSS rule that sets _.mjx-container_ to inherit its color
from its parent element.
- Ensures that inline math expressions render correctly in both light
and dark modes without explicitly setting a fixed color.
## Changes Made
Modified the _mathjax-setup.js_ file to include:
- Custom inline styles injected via JavaScript for _.mjx-container_
elements.
- Explicit handling of _inlineMath_ delimiters to ensure consistency in
rendering.
## Testing and Validation
- Tested the fix in both light and dark modes to confirm that inline
math expressions render in the correct color.
- Verified that the changes do not introduce regressions in light mode
or affect block math expressions rendered using `$$...$$`.
## Impact
- Improves readability of inline math expressions in dark mode.
- Provides a consistent user experience for distill-style blog posts
across light and dark themes.
- Resolves#2915
Co-authored-by: Suraj Khamkar <surajk@atlanticpkg.com>
This PR adds a simple filter/search functionality to the bibliography.
It can be used in two ways:
1. Simply enter a search term in the input box.
2. Send a search term via the `location.hash`, e.g.,
https://alshedivat.github.io/al-folio/publications/#mechanics
**Notes:**
- The search box is optional. It can be simply removed if anyone does
not like it.
- Searching via `hash` works without the search box. My idea is to use
this functionality to index all BibTeX entries via the `ctrl-k` search
and link them via their BibTeX key.
- Searching via `hash` could also be used to set static links on the
current page, e.g., to filter specific co-authors, venues, etc.
- I don't know much about the design of the input field. I simply reused
the newsletter box style.
- Entering a search term in the box does exact matching. No fuzzy
search, no AND/OR logic. I kept it very simple. Maybe anyone else wants
to improve it in the future.
- The search looks in all data in the BibTeX entry that is parsed via
`bib.liquid`. E.g., it is possible to search for BibTeX keys, titles,
authors, years, venues, abstracts, or whatever `bib.liquid` prints.
- I used a 300ms delay before starting to search on the input box.
- Entering search terms in the box does not update the location hash
(things could get complex otherwise due to automatically updating each
other...)
- If the filter does not find any match in a specific year, the year is
also made invisible.
**Screenshot**
<img width="935" alt="screenshot"
src="https://github.com/alshedivat/al-folio/assets/1998723/447003e2-c623-4de9-b2c5-2357117a7743">
Looking for feedback.
For some unknown reason, all the `document.onreadystatechange = () => {`
checks stopped working. Thankfully, replacing them with
`document.addEventListener("readystatechange", () => {` fixed the
issues.
---------
Signed-off-by: George Araujo <george.gcac@gmail.com>
Created a plugin to tackle #1181. Currently have an issue with tikzjax
since it imports some wasm file from its javascript. The rest should
work as expected.
---------
Signed-off-by: George Araujo <george.gcac@gmail.com>
This PR adds an "award" button to publications.
It takes the `award` value from the bibtex entry and displays(incl.
Markdown rendering) the text in a box similarly to abstract and bibtex.
User can set the entry `award_name` to configure the value. See example
config with `award_name: Nobel Prize`.
The color of the award box can be configured in `_base.scss`.
Note, there is a similar PR #2175, it I saw to issues with:
1. There was no progress
2. The award button just prints the text directly in the button,
similarly to `award_name`. Long award names could clutter the webpage.
3. IMHO, it brokes the current al-folio design, since butons do have a
fixed size/text. However, variable prize names are also possible with
this PR.
***
Pictures:
Default. Text are hidden:
<img width="708" alt="grafik"
src="https://github.com/alshedivat/al-folio/assets/1998723/1221c82c-c384-4297-807e-39385e2ce4fd">
Additional info is shown when the button is clicked. Markdown supported.
<img width="684" alt="grafik"
src="https://github.com/alshedivat/al-folio/assets/1998723/2354aeee-12b0-4d32-b194-5d2ea80d8363">
Only one text box shown at the same time, like it is with "ABS" and
"BIB":
<img width="691" alt="grafik"
src="https://github.com/alshedivat/al-folio/assets/1998723/d3937bb9-d9c2-47ac-b819-b92aec3d916a">
***
Feedback welcome.
You can also check [my
website](https://christianmainka.de/publications/awarded), which was the
base for this PR.
The blog archive page tables have `table-borderless`, but
bootstrap-table JS adds `table-bordered` by default and this forces an
`!important` border.
Since these tables are also supposed to be borderless, this PR excludes
them from bootstrap-table, just like the news and CV table are.
Now that Bluesky is [finally
available](https://fontawesome.com/changelog) at Font Awesome, we can
add it to the template.
---------
Signed-off-by: George Araujo <george.gcac@gmail.com>
The theme toggle button now has a third option, which follows the user's
system preferences.
- In the code there's now a distinction between the theme setting (which
can be "dark", "light" or "system") and the computed theme.
- The theme setting is now stored as the "theme-setting" local storage
variable. Since this is different from the old variable ("theme"), this
will effectively reset all current user themes to the default "system".
Maybe this is not what you want.
- The "system" theme icon is currently a half circle symbol.
- The toggle button now displays the current theme setting, rather than
the next theme setting (as far as I know this is consistent with other
sites which have three theme options).
- `theme.js` is now loaded regardless of `site.enable_darkmode`. This is
because other scripts which were always loaded relied on being able to
determine the theme. `theme.js` no longer initialises the theme itself
though; this only happens when `site.enable_darkmode`.
- When the theme setting is "system", the theme will change immediately
whenever the user changes their system theme.
#2261
---------
Signed-off-by: George Araujo <george.gcac@gmail.com>
Co-authored-by: George Araujo <george.gcac@gmail.com>
summary:
- adds prettier formatter configuration
- formats the entire repo using prettier, ignoring minified files
(`*.min.css`) and heavy generated html
- changes extensions of all `.html` files to `.liquid`, which is more
correct and necessary for prettier to work correctly
- replaces "%-" and "-%" with just "%" — manual liquid formatting using
minus signs is superfluous since we are compressing and minifying the
code anyway
- adds CI action for running prettier check on PR and pushes to master
I decided to break the README file into different ones to declutter it
from the main page. Also adding some more explanation on the structure
of the template. Tackling #2032 and #2033
---------
Signed-off-by: George Araujo <george.gcac@gmail.com>
Fixes#1952 by updating font awesome version. Also updated icons names
to newest font awesome style.
---------
Signed-off-by: George Araujo <george.gcac@gmail.com>
