Pvot website

The website for Pvot: an open-source, AOSP-based Android ecosystem. Built with Jekyll.

Run it locally

bundle install
bundle exec jekyll serve      # http://127.0.0.1:4000

Build the static site into _site/:

JEKYLL_ENV=production bundle exec jekyll build

How it is organised

Path	What it is
_apps/*.md	One file per app. Front matter (title, tagline, category, icon, status, repo, summary, features) is the single source of truth.
_data/categories.yml	Categories, each with its glyph color and the blobs that tint its app pages.
_config.yml	Site metadata, social links, the nav.
_layouts/	base.html (shell) and app.html (per-app page).
_includes/	head, header (glass nav), footer, logo, app-icon, controls.
assets/js/glass.js	PvotLib's liquid glass (PvotGlass.kt) ported from AGSL to WebGL, plus PvotLiveBackground.
assets/js/main.js	Nav, reveals, filters, switches, sliders, the glass lab.
assets/css/main.css	All styles. PvotLib's dark palette.
index.html, apps.html, pvotlib.html, about.html, contribute.html, privacy.html	The pages.

The glass

Any section can be a stage the glass sees through:

<section class="stage" data-stage data-live>        <!-- data-live: the drifting PvotLiveBackground -->
  <span data-paint>Headline</span>                   <!-- drawn into the backdrop, so glass bends it -->
  <i data-paint="box" style="--fill:#8577FF"></i>    <!-- a shape drawn into the backdrop -->
  <div data-glass="clear"></div>                     <!-- clear | regular | thick -->
</section>

Options: data-blobs, data-seed, data-dim on the stage; data-glass-ref (reference size, default 46), data-glass-blur, data-glass-strength, data-glass-lift (turns to a lens while held), data-glass-rest="#fff" (opaque at rest, like a switch knob), data-glass-press, data-drag on glass. data-paint text must be a single line. Without WebGL everything falls back to CSS frost. In Chromium the nav bar also bends the page under it through an SVG displacement filter.

Depth

The site is built in layers. Mark them in markup and main.js does the motion:

• data-plane (optionally a number, the depth multiplier) on a section's content: it slides against the silk with the pointer, phone tilt and scroll. In a glass section, put painted things inside it; the shader moves the painted layer with it, so nothing repaints.
• data-recede on a section: it sinks back (scale, fade, rounded corners) as it scrolls away.
• data-tilt on a card, .icon-link or .row: it leans toward the pointer and catches a sheen.
• Text and cards outside glass sections arrive from depth automatically (.rv); elevation comes from the --rim and --e1..--e3 tokens in main.css.

Adding or updating an app

Create _apps/<slug>.md:

---
order: 29
title: Camera
tagline: Point and shoot.
category: media          # media | communication | everyday | life | tools | design
icon: photo_camera       # a Material Symbols Rounded name
status: stable           # stable (Available) | beta | soon (In development)
repo: Aperture           # repo under github.com/PVOT-OSS, optional
summary: One sentence describing the app.
features:
  - A feature
---

Shipping apps (stable or beta) light up in full color and sit in the home page's dock; the rest are dark, themed icons. When an app has a real launcher icon, render it with python3 scripts/app-icon.py <app>/src/main/res assets/icons/<slug>.svg and set app_icon: /assets/icons/<slug>.svg; pages and link previews then use it instead of the glyph. If you use a new icon, run ./scripts/fonts.sh so the glyph is in the font subset, and ruby scripts/og.rb for the app's link preview.

SEO, previews and fonts

• Titles and descriptions come from front matter: seo_title and description win; app pages build "Pvot <title> · Open-source for Android" from each app's kind, and use its summary.
• JSON-LD is in _includes/schema.html (Organization, WebSite, WebPage; MobileApplication and a breadcrumb on app pages; SoftwareSourceCode on /pvotlib/).
• Link previews (Open Graph, 1200x630) live in assets/og/. After adding or renaming an app run ruby scripts/og.rb (uses your local Chrome, headless) and commit the images.
• Fonts are self-hosted in assets/fonts/; nothing loads from Google. After using a new icon name anywhere, run ./scripts/fonts.sh to rebuild the icon subset.
• 404.html is served by GitHub Pages for any missing URL, and llms.txt is generated from the app data.

Deploy

Pushing to main builds and deploys automatically via GitHub Actions (.github/workflows/jekyll.yml). In the repo's Settings → Pages, set the source to GitHub Actions.