Interactive media and embeds
Encode Wiki provides focused components for encoding-oriented visual evidence. Their no-JavaScript states retain the underlying images or links, and their enhanced controls work with touch, mouse, and keyboard input.
Before-and-after image slider
Section titled “Before-and-after image slider”Drag the divider, tap a position, or focus the comparison and use the arrow keys. Both images must be local site assets with matching dimensions so the comparison remains stable and does not disclose reader data to another host.
import ImageComparison from '../../../components/ImageComparison.astro';
<ImageComparison beforeSrc="/media/comparisons/reference.png" beforeAlt="Describe the reference image." beforeLabel="Reference" afterSrc="/media/comparisons/encoded.avif" afterAlt="Describe the encoded result and visible differences." afterLabel="Encoded" caption="Frame 120: reference compared with the test encode" width={1920} height={1080}/>Expandable prose images
Section titled “Expandable prose images”Ordinary images inside page content are expandable automatically. Click or focus the example below and press Enter or Space. A native dialog shows the largest source the browser selected and retains an “Open original image” link.
Carousel, chart, and comparison images are excluded because those components already own their interactions. Add data-no-image-expand to an image or ancestor when expansion would be inappropriate.
X post embeds
Section titled “X post embeds”X posts are supported without loading a third-party script during ordinary page reading. The reader must choose Load post before the site requests X’s official widget. The integration requests X’s do-not-personalize mode and always preserves a direct post link if the widget is blocked or unavailable.
import XPostEmbed from '../../../components/XPostEmbed.astro';
<XPostEmbed url="https://x.com/account/status/1234567890123456789" label="Describe why this post is relevant" hideMedia={false} hideThread={true}/>Only HTTPS post URLs on x.com and twitter.com are accepted. Other providers should receive a provider-specific, consent-gated component and a Content Security Policy review instead of an unrestricted raw iframe.
Bluesky post embeds
Section titled “Bluesky post embeds”Bluesky posts use the provider’s oEmbed endpoint and widget only after the reader chooses Load post. The response is reduced to an allowlisted blockquote before Bluesky’s widget scans it. A direct link remains available if the post is private, deleted, blocked, or unavailable.
import BlueskyPostEmbed from '../../../components/BlueskyPostEmbed.astro';
<BlueskyPostEmbed url="https://bsky.app/profile/account.example/post/3example" label="Describe why this Bluesky post is relevant"/>Only https://bsky.app/profile/{account}/post/{id} URLs are accepted.
LinkedIn post embeds
Section titled “LinkedIn post embeds”LinkedIn posts are also consent gated. The component creates LinkedIn’s official post iframe only after the reader chooses Load post. LinkedIn only makes public posts available for embedding and does not support every post format.
import LinkedInPostEmbed from '../../../components/LinkedInPostEmbed.astro';
<LinkedInPostEmbed url="https://www.linkedin.com/feed/update/urn:li:activity:1234567890123456789" label="Describe why this LinkedIn post is relevant" height={480}/>The url may be a public post URL, a feed/update URL, LinkedIn’s copied iframe URL, or a post URN such as urn:li:activity:…. Heights from 240 to 900 pixels are accepted.
Repository and release cards
Section titled “Repository and release cards”Forge cards are compact, static HTML built from src/data/forge/snapshot.json, a committed snapshot of public forge metadata. Builds never contact a forge, and readers contact one only when they follow a link. If a repository or resource is missing from the snapshot, the card renders as a plain link.
Project cards
Section titled “Project cards”ProjectCard is the card at the top of each tool page. It shows the repository, its description, the latest release (or latest version tag) and its date, the date of the last commit and the license. On shared hosts such as GitHub, GitLab.com and Codeberg it also shows the star count. A badge appears only when the project is archived or had no commits in the year before the snapshot.
The fastest and safest AV1 encoder.
The Scalable Video Technology for AV1 (SVT-AV1 Encoder and Decoder) with perceptual enhancements for psychovisually optimal AV1 encoding
x264, the best and fastest H.264 encoder
import ProjectCard from '../../../components/ProjectCard.astro';
<ProjectCard repository="https://github.com/xiph/rav1e" /><ProjectCard repository="https://gitlab.com/AOMediaCodec/SVT-AV1" tag="v4.2.0" /><ProjectCard repository="https://code.videolan.org/videolan/x264" provider="gitlab" release={false}/>Set release={false} for projects that publish neither releases nor version tags, and tag to show a specific release instead of the latest. src/data/forge/tool-projects.json maps each tool page to its upstream repository and records whether the project publishes releases, only version tags, or neither. node scripts/insert-project-cards.mjs adds the import and card to every mapped page that lacks one; --check reports missing cards without writing.
Refresh the snapshot
Section titled “Refresh the snapshot”pnpm forge:refreshGITHUB_TOKEN=… pnpm forge:refresh --only rav1eThe refresh script reads the tool mapping and every ForgeCard, ReleaseCard and ProjectCard in the content (cards in code blocks and cards with example data are skipped), queries the GitHub, GitLab and Forgejo APIs, and records fetchedAt for each entry. Anonymous requests work, but GitHub allows only 60 an hour. GITHUB_TOKEN is sent only to api.github.com and GITLAB_TOKEN only to gitlab.com; other hosts are queried anonymously. Pass --wait to sleep through rate limits and --only <text> to refresh matching URLs. Entries that fail keep their previous data and the script exits non-zero.
Repository, issue and pull request cards
Section titled “Repository, issue and pull request cards”ForgeCard accepts a repository, issue, pull request or merge request URL. The examples below pass preview data from src/data/examples/forge-previews.ts instead of reading the snapshot.
The fastest and safest AV1 encoder. Built in Rust and designed for use anywhere.
The SVT-AV1 maintainers opened a discussion about retiring the project's decoder implementation to reduce maintenance and CI costs.
#1Demonstrate a Forgejo pull request preview
codeberg.orgCodeberg is detected automatically. Other public Forgejo instances use the same card with an explicit provider hint.
import ForgeCard from '../../../components/ForgeCard.astro';
<ForgeCard url="https://github.com/xiph/rav1e" /><ForgeCard url="https://github.com/owner/project/issues/123" /><ForgeCard url="https://gitlab.com/group/project/-/merge_requests/42" /><ForgeCard url="https://codeberg.org/owner/project/pulls/7" />Issue and pull or merge request cards show the reference, title, state, repository, author, update date, comment count and labels. GitHub, GitLab.com, GitGud, Codeberg and Forgejo’s own instance are detected automatically. Use a provider hint for other self-hosted instances:
<ForgeCard url="https://git.example.org/group/project/-/issues/12" provider="gitlab" /><ForgeCard url="https://code.example.org/owner/project/pulls/12" provider="forgejo" />The refresh script only queries HTTPS URLs on public DNS names and refuses hosts that resolve to private or local addresses.
Release cards
Section titled “Release cards”ReleaseCard accepts a repository base URL. Omit tag for the latest published release at the time of the snapshot, or set it for a specific release.
Example release card: a release name, its tag and a one-line excerpt of the notes.
import ReleaseCard from '../../../components/ReleaseCard.astro';
<ReleaseCard repository="https://github.com/xiph/rav1e" /><ReleaseCard repository="https://github.com/xiph/rav1e" tag="v0.7.1" /><ReleaseCard repository="https://gitgud.io/group/project" provider="gitlab" />Release cards show the release name and tag, the publication state (pre-releases and drafts are labelled), the author, date and asset count.