Implements the course schedule feature requested in issue
#[2258](https://github.com/alshedivat/al-folio/issues/2258).
This PR adds a new course schedule feature to the al-folio theme,
allowing academics to easily create and display structured course
information.
**Changes:**
- Added a `courses` collection to organize and display academic courses
- Created course layout and display templates with responsive design
- Implemented organization by year and term with automatic sorting
- Added support for weekly schedule with topics and course materials
- Simplified documentation with a README for course creation
This feature makes it easier for academics to showcase their teaching
materials with a consistent, organized display of course schedules,
helping users create professional teaching pages without custom
implementation.
---------
Signed-off-by: George Araújo <george.gcac@gmail.com>
Co-authored-by: George Araújo <george.gcac@gmail.com>
## Fix ToC Scroll-Spy Highlighting Issue
### Problem
When clicking on a ToC link in the sidebar, the page scrolls to the
correct section, but the ToC highlights the *previous* section instead
of the current one. The correct section only gets highlighted after
scrolling down a few pixels.
### Root Cause
The `scrollspy` in `assets/js/common.js` was initialized without an
offset parameter, so it didn't account for the fixed navigation header
height (~56px).
### Solution
Added `offset: 100` parameter to the scrollspy initialization to
properly detect when a section becomes visible, accounting for the
header and some buffer space.
### Changes
- Modified `assets/js/common.js`: Added offset parameter to scrollspy
configuration
### Testing
- [x] ToC correctly highlights the current section immediately after
clicking
- [x] Headings remain visible (not hidden under header)
- [x] Smooth scrolling works as expected
---------
Co-authored-by: Maruan <alshedivat@users.noreply.github.com>
This PR adds a few stylistic improvements to the distill-style blog
posts:
- Update distill blog post example to showcase sidenotes as an
alternative to styles in PR #3077
- Showcase equations in sidenotes (closes#1242)
- Add `overrides.js` to match footnotes and citation styles with global
theme styling
- Add "related posts" sections if enabled to distill style posts
- Add "giscus" section if enabled to distill style posts
https://github.com/user-attachments/assets/b19a9cd9-779d-4d89-a4fb-eb14fb384480
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
