| Age | Commit message (Collapse) | Author |
|---|
|
|
|
|
|
|
|
|
|
|
|
Add showListDate parameter, show readTime dot if date is present
|
|
|
|
|
|
Main article will now belong in an <article> tag and the title/header
info will be inside a <header> tag within the <article>. Shouldn't
introduce any style/functional changes besides improve the semantics.
Comments section is moved outside the <article> as it doesn't directly
relate to the article's contents.
Other changes:
- Used `{{-` to remove some of the whitespace while keeping source HTML
structure looking correct
|
|
|
|
|
|
Supported hooks:
- head_start
- head_end
- body_end
- footer_start
|
|
Uses `aspect-ratio` property to constrain height and width of render image's container to allow responsive resizing
while maintaining the original aspect ratio and avoiding layout shifts.
Previously, even though `width` and `height` attributes were passed to the `img` element, Chrome (and probably others)
weren't reserving space for the image as expected because CSS `width`/`height` were both `auto`. At least one of them
needed to be a fixed value in order to maintain aspect ratio. Even with this change, it doesn't seem possible to
constrain both width and height on the same element at the same time — only one or the other works.
The change introduced makes the `img` element constrain width using `max-width` while the parent element constrain
height using `max-height` and `aspect-ratio`. This way, we can get responsive sizing on both axes while obeying the
constraints.
|
|
As per the spec, width/height attrs should be non-negative integers but
currently, they are being rendered with a `px` suffix. This change removes
the suffix which hopefully fixes any outstanding layout shifts.
References:
- https://html.spec.whatwg.org/multipage/embedded-content-other.html#dimension-attributes
|
|
Configure mermaid theme
|
|
|
|
|
|
|
|
closes #69
|
|
fix(ui): corrections told by tomfran
fix(ui): add more contrast to button.
fix(ui): loading js as deferred
|
|
|
|
|
|
|
|
Add article heading anchors
|
|
Image render hook now computes width/height of local images and adds
them as attributes. This patch also adds relevant CSS changes to prevent
stretchy images.
The main reason for this change is to avoid content shifts when images
load. Without providing width/height, browser doesn't have info to know
the aspect ratio to reserve some space until the image loads. With this
change, browser knows the intrinsic size and aspect-ratio to reserve
space and avoid content shifts in the page.
I believe this also fixes an issue I face in Safari where sometimes, an
image below the fold wouldn't load and thus have zero height because it
has loading="lazy".
To avoid images getting stretched and images overflow/filling the entire
screen when their intrinsic size is larger than the container size, I've
added some CSS. A configurable `max-height` is present which is used for
`figure img` elements. This especially helps when you have tall images
like mobile screenshots.
|
|
Adds heading anchors (#) that appear when user hovers over headings in
articles. Clicking the anchor will scroll viewport until heading is
aligned to top and update the address bar with the hash. This makes it
easy to copy URLs that link to a specific heading in the article.
|
|
Adds code from Hugo's built-in render-image hook
and modifies it slightly to support relative image
paths in markdown files.
Previously, we'd have to spell the absolute path
from root of the hugo site or make directories for
each individual post which is what Hugo recommend.
But this was very inefficient. This change allows
us to use editors like Obsidian, VSCode and have
them render the images correctly. It also supports
Hugo's page bundles for rendering images as a
result. Based on the order, I believe page bundles
are given priority so that works out.
i.e, if you have the following tree:
```
content
└── posts
├── _index.md
├── hello.md
├── images
│ └── test.png
└── test.png
```
You can now include images in `hello.md` in the
following ways:
```
```
|
|
The summary is not markdownified, and thus we see the md content on the summary. This fixes that
|
|
|
|
|
|
|
|
Example:
```toml
[params]
singleDateFormat = '2 January 2006'
```
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
