agnes/sillyspace
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

initial

Browse source
This commit is contained in:
aggie 2026-06-03 22:59:03 -04:00
commit 5d34b387e8
352 changed files with 31387 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
.editorconfig Normal file
View file

@ -0,0 +1,12 @@
root = true
[*]
charset = utf-8
end_of_line = lf
indent_style = space
indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true
[*.md]
trim_trailing_whitespace = false

18
.env.example Normal file
View file

@ -0,0 +1,18 @@
# Local development only. For Hetzner production, copy and edit
# deploy/hetzner/production.env.example instead.
BLIISH_BASE_URL=http://localhost:3000
BLIISH_DATABASE_PATH=./data/bliish.sqlite
BLIISH_UPLOAD_DIR=./data/uploads
BLIISH_ADMIN_USER_ID=1
BLIISH_MEDIA_CONCURRENCY=1
HOST=0.0.0.0
PORT=3000
# Optional SMTP delivery. Messages are always stored in the local admin outbox.
BLIISH_SMTP_HOST=
BLIISH_SMTP_PORT=587
BLIISH_SMTP_USER=
BLIISH_SMTP_PASSWORD=
BLIISH_SMTP_FROM=
BLIISH_SMTP_SECURE=0
BLIISH_SMTP_STARTTLS=1

92
.github/workflows/ci.yml vendored Normal file
View file

@ -0,0 +1,92 @@
name: CI
on:
pull_request:
push:
branches:
- main
permissions:
contents: read
jobs:
app:
name: App checks
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v6
- name: Setup pnpm
uses: pnpm/action-setup@v6
with:
version: 11.1.3
run_install: false
- name: Setup Node
uses: actions/setup-node@v6
with:
node-version: 24
cache: pnpm
cache-dependency-path: pnpm-lock.yaml
- name: Install dependencies
run: pnpm install --frozen-lockfile
- name: Typecheck
run: pnpm typecheck
- name: Test
run: pnpm test
- name: Build
run: pnpm build
deploy:
name: Deploy production
needs: app
if: github.event_name == 'push' && github.ref == 'refs/heads/main'
runs-on: ubuntu-latest
permissions:
contents: read
deployments: write
environment:
name: production
url: ${{ vars.BLIISH_BASE_URL }}
concurrency:
group: production
cancel-in-progress: false
steps:
- name: Checkout
uses: actions/checkout@v6
- name: Install SSH key
env:
BLIISH_DEPLOY_SSH_PRIVATE_KEY: ${{ secrets.BLIISH_DEPLOY_SSH_PRIVATE_KEY }}
BLIISH_DEPLOY_KNOWN_HOSTS: ${{ secrets.BLIISH_DEPLOY_KNOWN_HOSTS }}
run: |
if [ -z "$BLIISH_DEPLOY_SSH_PRIVATE_KEY" ]; then
echo "Missing BLIISH_DEPLOY_SSH_PRIVATE_KEY" >&2
exit 1
fi
if [ -z "$BLIISH_DEPLOY_KNOWN_HOSTS" ]; then
echo "Missing BLIISH_DEPLOY_KNOWN_HOSTS" >&2
exit 1
fi
install -d -m 0700 ~/.ssh
printf '%s\n' "$BLIISH_DEPLOY_SSH_PRIVATE_KEY" > ~/.ssh/id_ed25519
chmod 0600 ~/.ssh/id_ed25519
printf '%s\n' "$BLIISH_DEPLOY_KNOWN_HOSTS" > ~/.ssh/known_hosts
- name: Deploy over SSH
env:
BLIISH_SSH_USER: ${{ vars.BLIISH_SSH_USER || 'root' }}
BLIISH_SSH_HOST: ${{ vars.BLIISH_SSH_HOST }}
BLIISH_REPOSITORY_REF: ${{ vars.BLIISH_REPOSITORY_REF || 'main' }}
run: |
if [ -z "$BLIISH_SSH_HOST" ]; then
echo "Missing BLIISH_SSH_HOST production variable" >&2
exit 1
fi
export BLIISH_DEPLOY_SSH_KEY="$HOME/.ssh/id_ed25519"
deploy/hetzner/update.sh

21
.gitignore vendored Normal file
View file

@ -0,0 +1,21 @@
.DS_Store
*.log
*.tsbuildinfo
.env
.env.*
!.env.example
deploy/hetzner/production.env
coverage/
node_modules/
dist/
data/
# Local runtime state. Keep generated databases and uploads out of source.
data/
nohup.out
# Local SQLite databases, including WAL/SHM sidecar files.
*.db
*.db-*
*.sqlite
*.sqlite-*
*.sqlite3
*.sqlite3-*

121
ARCHITECTURE.md Normal file
View file

@ -0,0 +1,121 @@
# Architecture
Bliish.space is a server-rendered, form-first social app.
## Goals
- Run on a small VPS or local machine.
- Keep runtime dependencies minimal.
- Avoid required external services.
- Keep HTML readable and auditable.
- Keep data in SQLite and uploaded files on disk.
- Support custom profiles while containing XSS and upload risk.
## Runtime Shape
```text
browser
-> Hono route
-> session + CSRF middleware
-> SQLite query/mutation module
-> server-rendered JSX
-> HTML response
```
There is no client app shell. Public pages render without required JavaScript.
## Main Modules
- `src/index.tsx` owns Hono setup, middleware, static file serving, error handling, database initialization, and route registration.
- `src/routes/<feature>/index.tsx` owns feature route registrars. Route-specific helpers live beside the registrar, `src/routes/people/` owns browse/search/friend/block routes, `src/routes/account/` owns signed-in account pages such as settings, favorites, props, export, and deletion, `src/routes/staff/` owns shared admin/moderation route helpers, and `src/routes/system/` owns operational endpoints such as `/robots.txt`, `/theme.css`, and `/branding.css`.
- `src/views/<feature>/` owns page markup for each product area. The folder `index.ts` or `index.tsx` is the public view export for that feature.
- `src/shell/index.ts` owns the app chrome public API. The shell is app-bound, so its layout, nav, footer, page frame, and split layout primitives can read or compose around site settings, roles, and rate-limit state.
- `src/automodPolicy.ts` owns automod scopes, pattern types, actions, and pattern/scan limits shared by DB code, routes, and staff UI.
- `src/currentUser.ts` owns the shared authenticated-user shape passed between auth, routes, views, and UI components.
- `src/messages.ts` owns private-message form contracts shared by message routes and views.
- `src/models.ts` owns shared product read models returned by DB modules and rendered by routes, views, and UI components.
- `src/notifications.ts` owns notification kind, subject, context, and display-label contracts shared by schema, DB creation logic, and notification views.
- `src/paths.ts` owns shared app route and media URL builders used by routes, views, and UI components.
- `src/project.ts` owns source-project metadata shown on site information pages and the footer.
- `src/policy.ts` owns shared limits, default media names, report subject policy, rate-limit defaults, and validation helpers.
- `src/roles.ts` owns named user roles and staff capability checks.
- `src/settings/` owns shared site and branding settings shapes, defaults, and settings-derived rendering helpers such as favicon SVG generation.
- `src/socialLinks.ts` owns supported profile social-link platforms plus validation and normalization.
- `src/text.ts` owns generic text-only helpers used across server code and server-rendered markup.
- `src/ui/actors.tsx`, `src/ui/avatars.tsx`, `src/ui/people.tsx`, `src/ui/comments.tsx`, `src/ui/discussion.tsx`, `src/ui/engagement.tsx`, `src/ui/forms.tsx`, `src/ui/html.ts`, and `src/ui/links.tsx` own reusable actor summaries, profile images, people cards, comments, discussion entries, props controls, CSRF inputs, trusted HTML rendering, and inline links.
- `src/ui/pagination.tsx` owns shared server-rendered pagination links.
- `src/ui/icons.tsx` owns the Lucide Static server-rendered icon wrapper.
- `src/theme/` owns color palette derivation and generated CSS for admin-controlled theme tokens.
- `src/skins/` owns the profile skin hook contract, sanitized skin rendering helpers, color-palette-to-skin helpers, and skin color-palette editor shared by profile editing, shared skin submission, profile rendering, and skin previews.
- `src/server/pagination.ts` owns opaque cursor encoding, cursor URL helpers, and shared page result shaping.
- `src/server/comments/actions.ts` owns shared comment form, automod, report, delete, and audit orchestration across posts, blogs, and skins.
- `src/server/db/settings.ts` owns the small `app_settings` key/value boundary used by branding, site settings, and rate-limit snapshots.
- `src/server/db/schema.ts` owns the SQLite schema.
- `src/server/db/*.ts` owns small single-file data modules. `src/server/db/relationships.ts` owns friendships, blocks, and favorite edges; `src/server/db/staffDashboard.ts` owns cross-table staff dashboard reads. Larger areas expose a public `index.ts`, such as `src/server/db/posts/index.ts`, `src/server/db/blogs/index.ts`, `src/server/db/messages/index.ts`, or `src/server/db/notifications/index.ts`, and keep SQL pieces beside it in the same feature folder.
- `src/server/auth/session.ts` owns cookie sessions and CSRF validation.
- `src/server/context.ts` owns Hono app bindings and request context types.
- `src/server/security/html.ts` owns the public sanitizer API; CSS, URL, embed, and HTTP header policy helpers live beside it in focused modules.
- `src/server/media/upload.ts` owns the public upload/delete API. `src/server/media/policy.ts`, `validation.ts`, and `processing.ts` keep accepted media types, signature checks, and image normalization behind that boundary.
## Product Areas
- Profiles, profile walls, the signed-in feed, and group posts use the post system in `src/server/db/posts/index.ts`. The feed, profile wall, and group post lists use read-time comment activity ordering in `src/server/db/posts/commentActivity.ts`; comment writes do not mutate post timestamps.
- Blogs and skins keep their own content tables and use shared comment rendering where they expose comments.
- Favorites are user-to-user relationship edges. Props are post/blog engagement records; `/props` is a viewer-filtered account page over existing post and blog prop tables, not a separate saved-item table.
- Notifications are first-party SQLite rows created by existing social form routes for wall posts, group posts, comments, props, favorites, accepted friend requests, and group additions. Notification reads and writes live under `src/server/db/notifications/`, with comment fan-out isolated in `src/server/db/notifications/comments.ts`. Private-message reads and writes live under `src/server/db/messages/`. Pending friend requests stay in their dedicated requests pages.
- Reports use `src/policy.ts` for allowed subject types and `src/server/db/moderation/subjects.ts` for subject lookup and deletion.
- Automod rules live in `src/server/db/automod.ts`: routes use `scanAutomodSubmission()` to scan sanitized UGC before persistence, reject content for `reject` matches, and carry checked text forward so normal system reports can be created for `review` matches after the subject row exists. Default critical rule packs live in `src/server/moderation/automodDefaults.ts` as readable newline-separated keyword lists and are installed once per database so admins can disable or delete them without startup restoring them. Matching uses `src/server/moderation/automodNormalize.ts` to fold common leetspeak, full-width text, homoglyphs, repeated characters, and separator bypasses before keyword or regex checks.
- Admin and moderator permissions use named roles only: `user`, `moderator`, and `admin`. Automod management is admin-only; moderators act through the report queue and role hierarchy checks.
## Database
SQLite runs in WAL mode. The app uses explicit `better-sqlite3` prepared statements instead of an ORM, keeping schema and query behavior in source.
The schema source of truth is `src/server/db/schema.ts`. Startup creates tables and indexes for a fresh database, and `pnpm db:init` can be used for explicit setup. Schema changes should update the schema source, account export, moderation subjects, automod policy, and docs together.
Chronological list pages use keyset pagination through opaque `before` cursors. Keep SQL ownership in the feature DB module, fetch `limit + 1` rows, and use `src/server/pagination.ts` to shape the page and produce the next cursor. Prefer this pattern over offset pagination for mutable feeds, walls, groups, messages, notifications, and moderation queues.
## Auth
Passwords are hashed with Argon2id. Sessions use random opaque tokens. Only token hashes are stored in SQLite.
Staff privileges are capability-based. Route and visibility decisions use named roles (`user`, `moderator`, `admin`) through `src/roles.ts`.
## HTML Safety
Profile customization is the highest-risk product feature. User text and skin HTML must pass through sanitizer functions before storage. Raw untrusted input must not be the render source. Skins allow sanitized passive CSS and local or HTTPS resource URLs. Active code, unscoped global selectors, unsafe URL schemes, arbitrary attribute selectors, and CSS patterns that can read DOM attributes are stripped. Profile pages expose stable `data-skin-page`, `data-skin-root`, and `data-skin-part` hooks; the page hook accepts only `--skin-*` variables, while styling selectors must be rooted at the profile root or a skin part.
Remote HTTPS images, CSS backgrounds, and Google Fonts imports are allowed in skin HTML by `src/server/security/html.ts` and by the CSP in `src/server/security/headers.ts`. Those browser-side requests are part of custom profile rendering, not required app infrastructure.
## Request Safety
Form-based mutating routes use CSRF tokens and server-side validation. Email verification and password resets use one-time token hashes stored in SQLite; the local email outbox records the messages that carry those links. The app rejects oversized request bodies before parsing form data. Security headers are applied at the Hono layer.
Mutating form routes can opt into named action rate limits through the shared form helper. Source-controlled defaults live in policy, and admins can override them from the local admin panel. Rate-limit counters are kept in SQLite as short-lived action names and hashed account or submitted form-subject keys, preserving the app's local-only deployment shape.
## Uploads
Uploads are stored on disk under `BLIISH_UPLOAD_DIR`, which defaults to `data/uploads` in local development. Validation checks size, allowed extension/MIME, and file signature. Filenames are random UUIDs.
Profile images, post images, and theme songs live in separate upload buckets. Deletion paths that remove posts, groups, or accounts are responsible for removing referenced post-image files as well as the database rows.
## Static Assets
Static app assets, including the default theme song file and dark theme CSS, are served from `public/static`. Uploaded profile images, post images, and theme songs are served from the configured upload directory through `/media/pfp/*`, `/media/post-images/*`, and `/media/theme-songs/*`; the upload root itself is not mounted.
The default layout loads `style.css`, a small cookie-scoped `/theme.css` response for the optional dark theme, and `/branding.css` for saved admin theme colors. `style.css` is the CSS manifest: `core/`, `shell/`, `components/`, `features/`, `pages/`, and `responsive/` CSS are imported in explicit cascade order. Add only selectors and static scripts the app actually renders.
## Indexing and Crawlers
Search indexing is default-deny and server-side. `src/server/indexing/` owns route indexability, crawler blocking, robots.txt text, and sitemap generation, using row-level public predicates from `src/server/db/indexing.ts` for mixed routes such as profiles, blogs, and skins. Public pages receive a canonical `Link` header. Everything else receives an `X-Robots-Tag` noindex header, and crawler-like user agents are blocked from non-indexable pages.
`/robots.txt` and `/sitemap.xml` are generated by `src/routes/system/crawlers.ts` from the same policy. The sitemap lists only public canonical URLs and is capped to the sitemap protocol's 50,000 URL limit. New public content surfaces should add one DB predicate and one resolver branch in `src/server/indexing/routes.ts` instead of duplicating visibility logic in views.
## Non-Goals
- No mandatory OAuth.
- No mandatory object storage.
- No mandatory hosted database.
- No mandatory queue.
- No mandatory CDN.
- No analytics by default.

65
CONTRIBUTING.md Normal file
View file

@ -0,0 +1,65 @@
# Contributing
Bliish.space stays small, readable, self-hosted, and explicit about its tradeoffs.
## Principles
- Keep core workflows server-rendered and form-first.
- Do not add a framework, service, queue, worker, cache, or ORM unless it removes more code and risk than it adds.
- Prefer prepared SQL, plain HTML, and plain CSS over hidden abstractions.
- Check `docs/dependency-policy.md` before adding a dependency.
- Keep submitted code cohesive enough to review in one pass.
## Development
```bash
pnpm install
pnpm db:init
pnpm dev
```
Useful checks:
```bash
pnpm typecheck
pnpm test
pnpm build
```
## Code Standards
- Keep files cohesive and small enough to review.
- Use TypeScript types for auth, permissions, database rows, and sanitizer boundaries.
- Use `better-sqlite3` prepared statements for database access.
- Keep the database schema source of truth in `src/server/db/schema.ts`; schema work starts from a fresh local data directory.
- Sanitize user HTML before storage and only render sanitized HTML.
- Keep mutations protected by CSRF.
- Validate IDs and ownership before mutating data.
- Keep route handlers thin: routes validate and authorize; database modules own SQL; views own markup.
- Reuse shared UI such as `CommentList`, `CommentPanel`, `Panel`, `ProfileImage`, and `trustedHtml` instead of duplicating page-local variants.
- When deleting rows that reference uploaded files, delete the filesystem objects in the same route or orchestration path.
- New reportable content must update `reportSubjectTypes`, `src/server/db/moderation/subjects.ts`, and the report links that expose it.
- Do not expose raw server errors to users.
- Do not commit generated build output, local SQLite files, uploaded media, dependency directories, or private notes.
- Keep documentation tied to code paths. If a doc describes behavior, verify the route, database helper, sanitizer, deployment script, or policy constant that implements it.
## AI-Assisted Contributions
AI coding tools may be used to assist with contributions. Contributors remain responsible for reviewing, editing, testing, licensing, and security of all submitted code.
Disclose substantial AI assistance in the pull request description or commit message without making it prominent project branding. A concise note is enough:
```text
AI assistance: AI tools were used to help draft or refactor parts of this change. I reviewed, edited, and tested the final code.
```
## Pull Request Checklist
- Describe the behavior change and the affected routes or modules.
- Disclose substantial AI assistance, if used.
- Run `pnpm typecheck`, `pnpm test`, and `pnpm build`.
- Include tests for auth, permissions, sanitization, uploads, or destructive actions when touched.
- Include screenshots for visible UI changes.
- Update docs when setup, schema, deployment, security behavior, or project policy changes.
- Confirm no new external network dependency was introduced.
- Confirm attribution is captured in `NOTICE` for any third-party material.

674
LICENSE Normal file
View file

@ -0,0 +1,674 @@
GNU GENERAL PUBLIC LICENSE
Version 3, 29 June 2007
Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
Everyone is permitted to copy and distribute verbatim copies
of this license document, but changing it is not allowed.
Preamble
The GNU General Public License is a free, copyleft license for
software and other kinds of works.
The licenses for most software and other practical works are designed
to take away your freedom to share and change the works. By contrast,
the GNU General Public License is intended to guarantee your freedom to
share and change all versions of a program--to make sure it remains free
software for all its users. We, the Free Software Foundation, use the
GNU General Public License for most of our software; it applies also to
any other work released this way by its authors. You can apply it to
your programs, too.
When we speak of free software, we are referring to freedom, not
price. Our General Public Licenses are designed to make sure that you
have the freedom to distribute copies of free software (and charge for
them if you wish), that you receive source code or can get it if you
want it, that you can change the software or use pieces of it in new
free programs, and that you know you can do these things.
To protect your rights, we need to prevent others from denying you
these rights or asking you to surrender the rights. Therefore, you have
certain responsibilities if you distribute copies of the software, or if
you modify it: responsibilities to respect the freedom of others.
For example, if you distribute copies of such a program, whether
gratis or for a fee, you must pass on to the recipients the same
freedoms that you received. You must make sure that they, too, receive
or can get the source code. And you must show them these terms so they
know their rights.
Developers that use the GNU GPL protect your rights with two steps:
(1) assert copyright on the software, and (2) offer you this License
giving you legal permission to copy, distribute and/or modify it.
For the developers' and authors' protection, the GPL clearly explains
that there is no warranty for this free software. For both users' and
authors' sake, the GPL requires that modified versions be marked as
changed, so that their problems will not be attributed erroneously to
authors of previous versions.
Some devices are designed to deny users access to install or run
modified versions of the software inside them, although the manufacturer
can do so. This is fundamentally incompatible with the aim of
protecting users' freedom to change the software. The systematic
pattern of such abuse occurs in the area of products for individuals to
use, which is precisely where it is most unacceptable. Therefore, we
have designed this version of the GPL to prohibit the practice for those
products. If such problems arise substantially in other domains, we
stand ready to extend this provision to those domains in future versions
of the GPL, as needed to protect the freedom of users.
Finally, every program is threatened constantly by software patents.
States should not allow patents to restrict development and use of
software on general-purpose computers, but in those that do, we wish to
avoid the special danger that patents applied to a free program could
make it effectively proprietary. To prevent this, the GPL assures that
patents cannot be used to render the program non-free.
The precise terms and conditions for copying, distribution and
modification follow.
TERMS AND CONDITIONS
0. Definitions.
"This License" refers to version 3 of the GNU General Public License.
"Copyright" also means copyright-like laws that apply to other kinds of
works, such as semiconductor masks.
"The Program" refers to any copyrightable work licensed under this
License. Each licensee is addressed as "you". "Licensees" and
"recipients" may be individuals or organizations.
To "modify" a work means to copy from or adapt all or part of the work
in a fashion requiring copyright permission, other than the making of an
exact copy. The resulting work is called a "modified version" of the
earlier work or a work "based on" the earlier work.
A "covered work" means either the unmodified Program or a work based
on the Program.
To "propagate" a work means to do anything with it that, without
permission, would make you directly or secondarily liable for
infringement under applicable copyright law, except executing it on a
computer or modifying a private copy. Propagation includes copying,
distribution (with or without modification), making available to the
public, and in some countries other activities as well.
To "convey" a work means any kind of propagation that enables other
parties to make or receive copies. Mere interaction with a user through
a computer network, with no transfer of a copy, is not conveying.
An interactive user interface displays "Appropriate Legal Notices"
to the extent that it includes a convenient and prominently visible
feature that (1) displays an appropriate copyright notice, and (2)
tells the user that there is no warranty for the work (except to the
extent that warranties are provided), that licensees may convey the
work under this License, and how to view a copy of this License. If
the interface presents a list of user commands or options, such as a
menu, a prominent item in the list meets this criterion.
1. Source Code.
The "source code" for a work means the preferred form of the work
for making modifications to it. "Object code" means any non-source
form of a work.
A "Standard Interface" means an interface that either is an official
standard defined by a recognized standards body, or, in the case of
interfaces specified for a particular programming language, one that
is widely used among developers working in that language.
The "System Libraries" of an executable work include anything, other
than the work as a whole, that (a) is included in the normal form of
packaging a Major Component, but which is not part of that Major
Component, and (b) serves only to enable use of the work with that
Major Component, or to implement a Standard Interface for which an
implementation is available to the public in source code form. A
"Major Component", in this context, means a major essential component
(kernel, window system, and so on) of the specific operating system
(if any) on which the executable work runs, or a compiler used to
produce the work, or an object code interpreter used to run it.
The "Corresponding Source" for a work in object code form means all
the source code needed to generate, install, and (for an executable
work) run the object code and to modify the work, including scripts to
control those activities. However, it does not include the work's
System Libraries, or general-purpose tools or generally available free
programs which are used unmodified in performing those activities but
which are not part of the work. For example, Corresponding Source
includes interface definition files associated with source files for
the work, and the source code for shared libraries and dynamically
linked subprograms that the work is specifically designed to require,
such as by intimate data communication or control flow between those
subprograms and other parts of the work.
The Corresponding Source need not include anything that users
can regenerate automatically from other parts of the Corresponding
Source.
The Corresponding Source for a work in source code form is that
same work.
2. Basic Permissions.
All rights granted under this License are granted for the term of
copyright on the Program, and are irrevocable provided the stated
conditions are met. This License explicitly affirms your unlimited
permission to run the unmodified Program. The output from running a
covered work is covered by this License only if the output, given its
content, constitutes a covered work. This License acknowledges your
rights of fair use or other equivalent, as provided by copyright law.
You may make, run and propagate covered works that you do not
convey, without conditions so long as your license otherwise remains
in force. You may convey covered works to others for the sole purpose
of having them make modifications exclusively for you, or provide you
with facilities for running those works, provided that you comply with
the terms of this License in conveying all material for which you do
not control copyright. Those thus making or running the covered works
for you must do so exclusively on your behalf, under your direction
and control, on terms that prohibit them from making any copies of
your copyrighted material outside their relationship with you.
Conveying under any other circumstances is permitted solely under
the conditions stated below. Sublicensing is not allowed; section 10
makes it unnecessary.
3. Protecting Users' Legal Rights From Anti-Circumvention Law.
No covered work shall be deemed part of an effective technological
measure under any applicable law fulfilling obligations under article
11 of the WIPO copyright treaty adopted on 20 December 1996, or
similar laws prohibiting or restricting circumvention of such
measures.
When you convey a covered work, you waive any legal power to forbid
circumvention of technological measures to the extent such circumvention
is effected by exercising rights under this License with respect to
the covered work, and you disclaim any intention to limit operation or
modification of the work as a means of enforcing, against the work's
users, your or third parties' legal rights to forbid circumvention of
technological measures.
4. Conveying Verbatim Copies.
You may convey verbatim copies of the Program's source code as you
receive it, in any medium, provided that you conspicuously and
appropriately publish on each copy an appropriate copyright notice;
keep intact all notices stating that this License and any
non-permissive terms added in accord with section 7 apply to the code;
keep intact all notices of the absence of any warranty; and give all
recipients a copy of this License along with the Program.
You may charge any price or no price for each copy that you convey,
and you may offer support or warranty protection for a fee.
5. Conveying Modified Source Versions.
You may convey a work based on the Program, or the modifications to
produce it from the Program, in the form of source code under the
terms of section 4, provided that you also meet all of these conditions:
a) The work must carry prominent notices stating that you modified
it, and giving a relevant date.
b) The work must carry prominent notices stating that it is
released under this License and any conditions added under section
7. This requirement modifies the requirement in section 4 to
"keep intact all notices".
c) You must license the entire work, as a whole, under this
License to anyone who comes into possession of a copy. This
License will therefore apply, along with any applicable section 7
additional terms, to the whole of the work, and all its parts,
regardless of how they are packaged. This License gives no
permission to license the work in any other way, but it does not
invalidate such permission if you have separately received it.
d) If the work has interactive user interfaces, each must display
Appropriate Legal Notices; however, if the Program has interactive
interfaces that do not display Appropriate Legal Notices, your
work need not make them do so.
A compilation of a covered work with other separate and independent
works, which are not by their nature extensions of the covered work,
and which are not combined with it such as to form a larger program,
in or on a volume of a storage or distribution medium, is called an
"aggregate" if the compilation and its resulting copyright are not
used to limit the access or legal rights of the compilation's users
beyond what the individual works permit. Inclusion of a covered work
in an aggregate does not cause this License to apply to the other
parts of the aggregate.
6. Conveying Non-Source Forms.
You may convey a covered work in object code form under the terms
of sections 4 and 5, provided that you also convey the
machine-readable Corresponding Source under the terms of this License,
in one of these ways:
a) Convey the object code in, or embodied in, a physical product
(including a physical distribution medium), accompanied by the
Corresponding Source fixed on a durable physical medium
customarily used for software interchange.
b) Convey the object code in, or embodied in, a physical product
(including a physical distribution medium), accompanied by a
written offer, valid for at least three years and valid for as
long as you offer spare parts or customer support for that product
model, to give anyone who possesses the object code either (1) a
copy of the Corresponding Source for all the software in the
product that is covered by this License, on a durable physical
medium customarily used for software interchange, for a price no
more than your reasonable cost of physically performing this
conveying of source, or (2) access to copy the
Corresponding Source from a network server at no charge.
c) Convey individual copies of the object code with a copy of the
written offer to provide the Corresponding Source. This
alternative is allowed only occasionally and noncommercially, and
only if you received the object code with such an offer, in accord
with subsection 6b.
d) Convey the object code by offering access from a designated
place (gratis or for a charge), and offer equivalent access to the
Corresponding Source in the same way through the same place at no
further charge. You need not require recipients to copy the
Corresponding Source along with the object code. If the place to
copy the object code is a network server, the Corresponding Source
may be on a different server (operated by you or a third party)
that supports equivalent copying facilities, provided you maintain
clear directions next to the object code saying where to find the
Corresponding Source. Regardless of what server hosts the
Corresponding Source, you remain obligated to ensure that it is
available for as long as needed to satisfy these requirements.
e) Convey the object code using peer-to-peer transmission, provided
you inform other peers where the object code and Corresponding
Source of the work are being offered to the general public at no
charge under subsection 6d.
A separable portion of the object code, whose source code is excluded
from the Corresponding Source as a System Library, need not be
included in conveying the object code work.
A "User Product" is either (1) a "consumer product", which means any
tangible personal property which is normally used for personal, family,
or household purposes, or (2) anything designed or sold for incorporation
into a dwelling. In determining whether a product is a consumer product,
doubtful cases shall be resolved in favor of coverage. For a particular
product received by a particular user, "normally used" refers to a
typical or common use of that class of product, regardless of the status
of the particular user or of the way in which the particular user
actually uses, or expects or is expected to use, the product. A product
is a consumer product regardless of whether the product has substantial
commercial, industrial or non-consumer uses, unless such uses represent
the only significant mode of use of the product.
"Installation Information" for a User Product means any methods,
procedures, authorization keys, or other information required to install
and execute modified versions of a covered work in that User Product from
a modified version of its Corresponding Source. The information must
suffice to ensure that the continued functioning of the modified object
code is in no case prevented or interfered with solely because
modification has been made.
If you convey an object code work under this section in, or with, or
specifically for use in, a User Product, and the conveying occurs as
part of a transaction in which the right of possession and use of the
User Product is transferred to the recipient in perpetuity or for a
fixed term (regardless of how the transaction is characterized), the
Corresponding Source conveyed under this section must be accompanied
by the Installation Information. But this requirement does not apply
if neither you nor any third party retains the ability to install
modified object code on the User Product (for example, the work has
been installed in ROM).
The requirement to provide Installation Information does not include a
requirement to continue to provide support service, warranty, or updates
for a work that has been modified or installed by the recipient, or for
the User Product in which it has been modified or installed. Access to a
network may be denied when the modification itself materially and
adversely affects the operation of the network or violates the rules and
protocols for communication across the network.
Corresponding Source conveyed, and Installation Information provided,
in accord with this section must be in a format that is publicly
documented (and with an implementation available to the public in
source code form), and must require no special password or key for
unpacking, reading or copying.
7. Additional Terms.
"Additional permissions" are terms that supplement the terms of this
License by making exceptions from one or more of its conditions.
Additional permissions that are applicable to the entire Program shall
be treated as though they were included in this License, to the extent
that they are valid under applicable law. If additional permissions
apply only to part of the Program, that part may be used separately
under those permissions, but the entire Program remains governed by
this License without regard to the additional permissions.
When you convey a copy of a covered work, you may at your option
remove any additional permissions from that copy, or from any part of
it. (Additional permissions may be written to require their own
removal in certain cases when you modify the work.) You may place
additional permissions on material, added by you to a covered work,
for which you have or can give appropriate copyright permission.
Notwithstanding any other provision of this License, for material you
add to a covered work, you may (if authorized by the copyright holders of
that material) supplement the terms of this License with terms:
a) Disclaiming warranty or limiting liability differently from the
terms of sections 15 and 16 of this License; or
b) Requiring preservation of specified reasonable legal notices or
author attributions in that material or in the Appropriate Legal
Notices displayed by works containing it; or
c) Prohibiting misrepresentation of the origin of that material, or
requiring that modified versions of such material be marked in
reasonable ways as different from the original version; or
d) Limiting the use for publicity purposes of names of licensors or
authors of the material; or
e) Declining to grant rights under trademark law for use of some
trade names, trademarks, or service marks; or
f) Requiring indemnification of licensors and authors of that
material by anyone who conveys the material (or modified versions of
it) with contractual assumptions of liability to the recipient, for
any liability that these contractual assumptions directly impose on
those licensors and authors.
All other non-permissive additional terms are considered "further
restrictions" within the meaning of section 10. If the Program as you
received it, or any part of it, contains a notice stating that it is
governed by this License along with a term that is a further
restriction, you may remove that term. If a license document contains
a further restriction but permits relicensing or conveying under this
License, you may add to a covered work material governed by the terms
of that license document, provided that the further restriction does
not survive such relicensing or conveying.
If you add terms to a covered work in accord with this section, you
must place, in the relevant source files, a statement of the
additional terms that apply to those files, or a notice indicating
where to find the applicable terms.
Additional terms, permissive or non-permissive, may be stated in the
form of a separately written license, or stated as exceptions;
the above requirements apply either way.
8. Termination.
You may not propagate or modify a covered work except as expressly
provided under this License. Any attempt otherwise to propagate or
modify it is void, and will automatically terminate your rights under
this License (including any patent licenses granted under the third
paragraph of section 11).
However, if you cease all violation of this License, then your
license from a particular copyright holder is reinstated (a)
provisionally, unless and until the copyright holder explicitly and
finally terminates your license, and (b) permanently, if the copyright
holder fails to notify you of the violation by some reasonable means
prior to 60 days after the cessation.
Moreover, your license from a particular copyright holder is
reinstated permanently if the copyright holder notifies you of the
violation by some reasonable means, this is the first time you have
received notice of violation of this License (for any work) from that
copyright holder, and you cure the violation prior to 30 days after
your receipt of the notice.
Termination of your rights under this section does not terminate the
licenses of parties who have received copies or rights from you under
this License. If your rights have been terminated and not permanently
reinstated, you do not qualify to receive new licenses for the same
material under section 10.
9. Acceptance Not Required for Having Copies.
You are not required to accept this License in order to receive or
run a copy of the Program. Ancillary propagation of a covered work
occurring solely as a consequence of using peer-to-peer transmission
to receive a copy likewise does not require acceptance. However,
nothing other than this License grants you permission to propagate or
modify any covered work. These actions infringe copyright if you do
not accept this License. Therefore, by modifying or propagating a
covered work, you indicate your acceptance of this License to do so.
10. Automatic Licensing of Downstream Recipients.
Each time you convey a covered work, the recipient automatically
receives a license from the original licensors, to run, modify and
propagate that work, subject to this License. You are not responsible
for enforcing compliance by third parties with this License.
An "entity transaction" is a transaction transferring control of an
organization, or substantially all assets of one, or subdividing an
organization, or merging organizations. If propagation of a covered
work results from an entity transaction, each party to that
transaction who receives a copy of the work also receives whatever
licenses to the work the party's predecessor in interest had or could
give under the previous paragraph, plus a right to possession of the
Corresponding Source of the work from the predecessor in interest, if
the predecessor has it or can get it with reasonable efforts.
You may not impose any further restrictions on the exercise of the
rights granted or affirmed under this License. For example, you may
not impose a license fee, royalty, or other charge for exercise of
rights granted under this License, and you may not initiate litigation
(including a cross-claim or counterclaim in a lawsuit) alleging that
any patent claim is infringed by making, using, selling, offering for
sale, or importing the Program or any portion of it.
11. Patents.
A "contributor" is a copyright holder who authorizes use under this
License of the Program or a work on which the Program is based. The
work thus licensed is called the contributor's "contributor version".
A contributor's "essential patent claims" are all patent claims
owned or controlled by the contributor, whether already acquired or
hereafter acquired, that would be infringed by some manner, permitted
by this License, of making, using, or selling its contributor version,
but do not include claims that would be infringed only as a
consequence of further modification of the contributor version. For
purposes of this definition, "control" includes the right to grant
patent sublicenses in a manner consistent with the requirements of
this License.
Each contributor grants you a non-exclusive, worldwide, royalty-free
patent license under the contributor's essential patent claims, to
make, use, sell, offer for sale, import and otherwise run, modify and
propagate the contents of its contributor version.
In the following three paragraphs, a "patent license" is any express
agreement or commitment, however denominated, not to enforce a patent
(such as an express permission to practice a patent or covenant not to
sue for patent infringement). To "grant" such a patent license to a
party means to make such an agreement or commitment not to enforce a
patent against the party.
If you convey a covered work, knowingly relying on a patent license,
and the Corresponding Source of the work is not available for anyone
to copy, free of charge and under the terms of this License, through a
publicly available network server or other readily accessible means,
then you must either (1) cause the Corresponding Source to be so
available, or (2) arrange to deprive yourself of the benefit of the
patent license for this particular work, or (3) arrange, in a manner
consistent with the requirements of this License, to extend the patent
license to downstream recipients. "Knowingly relying" means you have
actual knowledge that, but for the patent license, your conveying the
covered work in a country, or your recipient's use of the covered work
in a country, would infringe one or more identifiable patents in that
country that you have reason to believe are valid.
If, pursuant to or in connection with a single transaction or
arrangement, you convey, or propagate by procuring conveyance of, a
covered work, and grant a patent license to some of the parties
receiving the covered work authorizing them to use, propagate, modify
or convey a specific copy of the covered work, then the patent license
you grant is automatically extended to all recipients of the covered
work and works based on it.
A patent license is "discriminatory" if it does not include within
the scope of its coverage, prohibits the exercise of, or is
conditioned on the non-exercise of one or more of the rights that are
specifically granted under this License. You may not convey a covered
work if you are a party to an arrangement with a third party that is
in the business of distributing software, under which you make payment
to the third party based on the extent of your activity of conveying
the work, and under which the third party grants, to any of the
parties who would receive the covered work from you, a discriminatory
patent license (a) in connection with copies of the covered work
conveyed by you (or copies made from those copies), or (b) primarily
for and in connection with specific products or compilations that
contain the covered work, unless you entered into that arrangement,
or that patent license was granted, prior to 28 March 2007.
Nothing in this License shall be construed as excluding or limiting
any implied license or other defenses to infringement that may
otherwise be available to you under applicable patent law.
12. No Surrender of Others' Freedom.
If conditions are imposed on you (whether by court order, agreement or
otherwise) that contradict the conditions of this License, they do not
excuse you from the conditions of this License. If you cannot convey a
covered work so as to satisfy simultaneously your obligations under this
License and any other pertinent obligations, then as a consequence you may
not convey it at all. For example, if you agree to terms that obligate you
to collect a royalty for further conveying from those to whom you convey
the Program, the only way you could satisfy both those terms and this
License would be to refrain entirely from conveying the Program.
13. Use with the GNU Affero General Public License.
Notwithstanding any other provision of this License, you have
permission to link or combine any covered work with a work licensed
under version 3 of the GNU Affero General Public License into a single
combined work, and to convey the resulting work. The terms of this
License will continue to apply to the part which is the covered work,
but the special requirements of the GNU Affero General Public License,
section 13, concerning interaction through a network will apply to the
combination as such.
14. Revised Versions of this License.
The Free Software Foundation may publish revised and/or new versions of
the GNU General Public License from time to time. Such new versions will
be similar in spirit to the present version, but may differ in detail to
address new problems or concerns.
Each version is given a distinguishing version number. If the
Program specifies that a certain numbered version of the GNU General
Public License "or any later version" applies to it, you have the
option of following the terms and conditions either of that numbered
version or of any later version published by the Free Software
Foundation. If the Program does not specify a version number of the
GNU General Public License, you may choose any version ever published
by the Free Software Foundation.
If the Program specifies that a proxy can decide which future
versions of the GNU General Public License can be used, that proxy's
public statement of acceptance of a version permanently authorizes you
to choose that version for the Program.
Later license versions may give you additional or different
permissions. However, no additional obligations are imposed on any
author or copyright holder as a result of your choosing to follow a
later version.
15. Disclaimer of Warranty.
THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
APPLICABLE LAW. EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY
OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,
THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
PURPOSE. THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM
IS WITH YOU. SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF
ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
16. Limitation of Liability.
IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS
THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY
GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE
USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF
DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD
PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),
EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF
SUCH DAMAGES.
17. Interpretation of Sections 15 and 16.
If the disclaimer of warranty and limitation of liability provided
above cannot be given local legal effect according to their terms,
reviewing courts shall apply local law that most closely approximates
an absolute waiver of all civil liability in connection with the
Program, unless a warranty or assumption of liability accompanies a
copy of the Program in return for a fee.
END OF TERMS AND CONDITIONS
How to Apply These Terms to Your New Programs
If you develop a new program, and you want it to be of the greatest
possible use to the public, the best way to achieve this is to make it
free software which everyone can redistribute and change under these terms.
To do so, attach the following notices to the program. It is safest
to attach them to the start of each source file to most effectively
state the exclusion of warranty; and each file should have at least
the "copyright" line and a pointer to where the full notice is found.
<one line to give the program's name and a brief idea of what it does.>
Copyright (C) <year> <name of author>
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see <https://www.gnu.org/licenses/>.
Also add information on how to contact you by electronic and paper mail.
If the program does terminal interaction, make it output a short
notice like this when it starts in an interactive mode:
<program> Copyright (C) <year> <name of author>
This program comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
This is free software, and you are welcome to redistribute it
under certain conditions; type `show c' for details.
The hypothetical commands `show w' and `show c' should show the appropriate
parts of the General Public License. Of course, your program's commands
might be different; for a GUI interface, you would use an "about box".
You should also get your employer (if you work as a programmer) or school,
if any, to sign a "copyright disclaimer" for the program, if necessary.
For more information on this, and how to apply and follow the GNU GPL, see
<https://www.gnu.org/licenses/>.
The GNU General Public License does not permit incorporating your program
into proprietary programs. If your program is a subroutine library, you
may consider it more useful to permit linking proprietary applications with
the library. If this is what you want to do, use the GNU Lesser General
Public License instead of this License. But first, please read
<https://www.gnu.org/licenses/why-not-lgpl.html>.

29
NOTICE Normal file
View file

@ -0,0 +1,29 @@
Bliish.space Notice
===================
Bliish.space is an independent open-source project for self-hosted, profile-first social networking.
Bliish.space is made by Bliish and Bliish.space contributors.
License
-------
Bliish.space source code is licensed under GPL-3.0-only. See LICENSE.
Project Credits
---------------
- Bliish, for Bliish.space. https://bliish.com
- Bliish.space contributors.
Bundled Third-Party Material
----------------------------
- Lucide Static is used through the `lucide-static` package for interface icons and admin-selected site icons.
License: ISC.
Source: https://github.com/lucide-icons/lucide
Bundled Project Assets
----------------------
- `public/static/media/default.mp3` is a silent fallback theme-song file created for this project.

72
PRIVACY.md Normal file
View file

@ -0,0 +1,72 @@
# Privacy
Bliish.space is self-hosted. The default app does not require external APIs, external analytics, ad networks, or tracking pixels.
## Data Stored By The App
The local SQLite database stores:
- account email;
- username;
- account role;
- password hash;
- session hashes and CSRF tokens;
- short-lived rate-limit counters with action names and hashed account, email, or reset-token keys;
- verification and password reset token hashes;
- profile fields;
- friend relationships;
- favorites;
- user blocks;
- wall posts, group posts, post props, and post comments;
- blogs, blog props, and blog comments;
- groups and group memberships;
- private messages;
- notification records;
- shared skins and skin comments;
- reports, including system-created automod reports;
- automod rule names, patterns, scopes, and actions;
- queued local email outbox messages;
- moderation audit log entries;
- timestamps for account and session activity.
Uploaded profile pictures, post images, and theme songs are stored on the local filesystem under the configured upload directory.
Favorites and props are user action records. The app uses them to render the signed-in user's Favs and Props pages; the Props page is a filtered view of posts and blog entries the user has propped.
## Cookies
Bliish.space uses:
- an HTTP-only session cookie for logged-in users;
- a CSRF token cookie for form protection;
- an HTTP-only color theme cookie.
The default app does not use third-party cookies.
## Locale And Time Display
Signed-in users can save a timezone so the app can display timestamps correctly for their account. The default app does not store locale or date-format preferences.
## Network Requests
The server does not require third-party services during normal user workflows. Password reset and verification messages are written to the local SQLite email outbox. If SMTP is configured, the app also attempts to deliver those messages through the operator's SMTP server.
Skin HTML can include sanitized HTTPS image URLs, CSS background URLs, Google Fonts imports, and sandboxed embeds from whitelisted player hosts such as YouTube, SoundCloud, Vimeo, Spotify, Bandcamp, TikTok, and Dailymotion. Visiting a customized profile can therefore make the visitor's browser request third-party resources chosen by that profile author. Ordinary user text fields do not allow image tags or embeds.
## Export And Delete
Users can export account data from `/account/export.json`.
Users can delete their account from account settings. Deletion removes database rows linked by cascading foreign keys and removes uploaded profile, post image, and theme song files referenced by deleted records. Moderation reports and audit entries may remain with deleted user references cleared where the schema uses `ON DELETE SET NULL`. Operators remain responsible for backups, web server logs, and retained system logs outside the app.
## Operator Responsibilities
Instance operators should publish their own privacy notice covering:
- legal jurisdiction;
- log retention;
- backup retention;
- moderation policy;
- administrator access;
- SMTP provider, if configured;
- reverse proxy and CDN behavior, if any.

141
README.md Normal file
View file

@ -0,0 +1,141 @@
<div align="center">
<img src="./public/static/brand/favicon.svg" alt="bliish.space icon" width="96" height="96">
<h1>bliish.space</h1>
<p><em>a space for anyone</em></p>
<p>
<a href="LICENSE"><img alt="License: GPL-3.0-only" src="https://img.shields.io/badge/license-GPL--3.0--only-6f2dbd?style=flat-square"></a>
<img alt="Node.js 24+" src="https://img.shields.io/badge/node.js-24%2B-339933?style=flat-square&logo=nodedotjs&logoColor=white">
<img alt="TypeScript" src="https://img.shields.io/badge/typescript-6.0-3178c6?style=flat-square">
<img alt="Hono" src="https://img.shields.io/badge/hono-4.12-e36002?style=flat-square">
</p>
</div>
![Bliish.space screenshot](./public/static/brand/screenshot.webp)
[Bliish.space](https://bliish.space) is an **ultra-fast**, **lightweight**, **open-source social platform** with **customizable profiles**, **no ads**, **no tracking**, and **simple, affordable self-hosting**. It includes profiles, wall posts, friends, favorites, props, blogs, comments, groups, notifications, **private messages**, **automoderation**, and **user-friendly admin tools**.
> **Early release:** This project is under **active development**. Expect changes to **setup**, **deployment**, and **documentation**.
## Highlights
🔓 **Open source:** **GPL-3.0-only** code that people can inspect, change, run, and share.
🚫 **No tracking or ads:** No built-in analytics pixels, ad networks, or **personalized feed algorithm**.
🎨 **Custom profiles:** Profiles can include a wall, friends, groups, blogs, messages, **theme songs**, and **playful skins**.
⚡ **Small and lightning fast:** **One Node process**, **SQLite**, local uploads, server-rendered pages, and **no required third-party runtime services**.
🛠️ **Easy to manage:** Admins can change **branding**, home copy, moderation, automod, rate limits, users, and email **without touching code**.
💸 **Tiny hosting bill:** A **Hetzner CX23 VPS** costs about **$4.99/month** for a **50k-member community**, or run it on a server you already own with no new hosting bill.
🌐 **Light by default:** **Server-rendered pages** stay quick on low-powered devices and low-data connections, with **no required client-side JavaScript**.
🛡️ **Safer communities:** **Automod**, reports, user blocks, bans, rate limits, and moderator accounts give communities practical moderation tools.
## Quick Start
```bash
corepack enable
pnpm install
pnpm db:init
pnpm dev
```
Open `http://localhost:3000`.
With the default environment, the first signed-up account becomes the admin. Sign in with that account and open `/admin` to configure the instance.
`pnpm db:init` initializes a fresh empty database. The app also initializes the schema on startup.
## Checks
```bash
pnpm typecheck
pnpm test
pnpm build
```
## Default Brand Assets
Default Bliish.space favicon, social preview, app icon, and manifest files are generated from the same settings-derived asset helpers used by the runtime branding routes.
```bash
pnpm assets:brand
pnpm assets:brand:clean
```
## Self-Hosting
The recommended production path is one small Hetzner Cloud VPS in Europe, managed with the [CLI deployment guide](docs/deployment/hetzner-cloud-cli.md). The default `cx23` target is intentionally modest: with controlled uploads and normal social activity, it is a practical starting point for roughly 10k-50k registered accounts and 1k-5k daily active users before operators should profile, tune, or resize. Official maintainers deploy `bliish.space` from this repository. Independent operators should use a public fork or copy if they want GitHub auto-deploys for their own instance; manual VPS updates can also pull directly from upstream.
## Project Layout
```text
src/
routes/ HTTP routes and form handlers; nested helpers live beside their feature
views/ server-rendered page markup grouped by product area
shell/ app chrome: default layout, navigation, footer, global banners, and page layout primitives
ui/ shared forms, icons, panels, avatars, actor summaries, links, people, comments, discussion, and engagement components
server/ auth, database, relationship data, indexing, uploads, rendering, moderation, and security
scripts/ asset-generation scripts
automodPolicy.ts shared automod scope, action, pattern, and limit policy
brand.ts shared default brand icon SVG source
currentUser.ts shared authenticated-user shape
messages.ts shared private-message form contracts
models.ts shared product read models
notifications.ts shared notification type and label contracts
paths.ts shared app route and media URL builders
policy.ts shared limits, defaults, validation, and rate-limit policy
roles.ts shared roles and staff permission checks
socialLinks.ts shared profile social-link validation and platform metadata
text.ts shared text formatting helpers
values.ts shared unknown-value parsing helpers
theme/ color palette derivation and generated theme CSS helpers
skins/ profile skin contracts, color palette helpers, and skin color-palette editor
public/ static CSS, icons, and bundled media assets; CSS is grouped by cascade layer
data/ local SQLite database and uploads, created at runtime and ignored by git
docs/ operator and security notes
deploy/ provider-specific deployment scripts
```
## Contributor Orientation
- Routes stay in `src/routes`; they handle auth, form parsing, validation, and redirects.
- Views stay in feature folders under `src/views`; they render page markup and reuse focused UI modules from `src/ui`.
- SQLite access stays in `src/server/db`; public feature modules can delegate to nested implementation files.
- `src/server/db/schema.ts` is the schema source of truth. Keep account export, moderation, and automod code in sync with schema changes.
- User HTML must be sanitized before storage and rendered through the shared `trustedHtml` boundary.
- Runtime output stays out of source: `data`, `dist`, and `node_modules` are ignored local state.
## Runtime Choices
- Hono for the HTTP server.
- TypeScript with server-rendered JSX.
- SQLite through `better-sqlite3`.
- Argon2id password hashing.
- Plain CSS.
- Local filesystem uploads.
- Vitest for server-side tests.
## License
Bliish.space is licensed under [GPL-3.0-only](LICENSE). Official license text: [gnu.org/licenses/gpl-3.0.html](https://www.gnu.org/licenses/gpl-3.0.html).
## Documentation
- [Architecture](ARCHITECTURE.md)
- [Contributing](CONTRIBUTING.md)
- [Security Policy](SECURITY.md)
- [Privacy](PRIVACY.md)
- [Local Development](docs/local-development.md)
- [Profile Skins](docs/skins.md)
- [Theme Tokens](docs/theme-tokens.md)
- [Self-hosting](docs/self-hosting.md)
- [Hetzner Cloud CLI Deployment](docs/deployment/hetzner-cloud-cli.md)
- [Hetzner Cloud Manual Deployment](docs/deployment/hetzner-cloud.md)
- [Threat Model](docs/threat-model.md)
- [Dependency Policy](docs/dependency-policy.md)
- [License](LICENSE)
- [Notice and Attribution](NOTICE)

51
SECURITY.md Normal file
View file

@ -0,0 +1,51 @@
# Security Policy
Bliish.space deployments are operator-managed instances.
## Reporting Vulnerabilities
Report sensitive issues through the repository's private vulnerability reporting channel if one is configured. If not, contact the maintainer privately before publishing details.
For non-sensitive issues, open a public issue with:
- affected version or commit;
- affected route or feature;
- expected behavior;
- actual behavior;
- reproduction steps;
- impact assessment.
## Supported Versions
Security fixes target the current main branch unless a release branch states otherwise.
## Security Boundaries
Bliish.space currently treats these areas as security-critical:
- password hashing;
- cookie sessions;
- CSRF checks;
- profile HTML and skin sanitization;
- upload validation and normalization;
- oversized request rejection;
- form action rate limiting;
- security headers;
- account export and deletion;
- role-based admin and moderator actions;
- report moderation;
- post, comment, and upload deletion paths;
- private profile visibility.
## Non-Goals
Bliish.space does not provide:
- hosted abuse monitoring;
- centralized moderation;
- managed backups;
- managed email reputation;
- DDoS protection;
- security guarantees for modified custom skins or reverse proxy configs.
Instance operators are responsible for host hardening, TLS, backups, logs, and abuse response.

128
deploy/hetzner/cloud-init.yml Normal file
View file

@ -0,0 +1,128 @@
#cloud-config
package_update: true
package_upgrade: false
write_files:
- path: /usr/local/sbin/install-bliishspace
owner: root:root
permissions: "0755"
content: |
#!/usr/bin/env bash
set -euo pipefail
export DEBIAN_FRONTEND=noninteractive
apt-get update
apt-get install -y ca-certificates curl git sqlite3 build-essential python3 caddy gnupg
if ! command -v node >/dev/null 2>&1 || ! node --version | grep -q '^v__BLIISH_NODE_MAJOR__\.'; then
install -d -m 0755 /etc/apt/keyrings
curl -fsSL https://deb.nodesource.com/gpgkey/nodesource-repo.gpg.key | gpg --dearmor --yes -o /etc/apt/keyrings/nodesource.gpg
chmod 0644 /etc/apt/keyrings/nodesource.gpg
echo "deb [signed-by=/etc/apt/keyrings/nodesource.gpg] https://deb.nodesource.com/node___BLIISH_NODE_MAJOR__.x nodistro main" >/etc/apt/sources.list.d/nodesource.list
apt-get update
apt-get install -y nodejs
fi
if ! command -v corepack >/dev/null 2>&1; then
npm install -g corepack
fi
corepack enable
if ! id -u bliish >/dev/null 2>&1; then
useradd --system --create-home --home-dir /var/lib/bliishspace --shell /usr/sbin/nologin bliish
fi
install -d -o bliish -g bliish /var/lib/bliishspace
install -d -o bliish -g bliish /var/lib/bliishspace/uploads
install -d -o root -g root /opt
if [ ! -d /opt/bliishspace/.git ]; then
rm -rf /opt/bliishspace
git clone "__BLIISH_REPOSITORY_URL__" /opt/bliishspace
fi
git -C /opt/bliishspace fetch --all --tags
git -C /opt/bliishspace checkout "__BLIISH_REPOSITORY_REF__"
chown -R root:root /opt/bliishspace
cat >/etc/bliishspace.env <<'ENV'
BLIISH_BASE_URL=__BLIISH_BASE_URL__
BLIISH_DATABASE_PATH=/var/lib/bliishspace/bliish.sqlite
BLIISH_UPLOAD_DIR=/var/lib/bliishspace/uploads
BLIISH_ADMIN_USER_ID=__BLIISH_ADMIN_USER_ID__
BLIISH_MEDIA_CONCURRENCY=__BLIISH_MEDIA_CONCURRENCY__
HOST=127.0.0.1
PORT=3000
ENV
chown root:bliish /etc/bliishspace.env
chmod 0640 /etc/bliishspace.env
cd /opt/bliishspace
PNPM_PACKAGE_MANAGER="$(node -p "require('./package.json').packageManager || 'pnpm@11.1.3'")"
corepack prepare "$PNPM_PACKAGE_MANAGER" --activate
pnpm install --frozen-lockfile
pnpm build
runuser -u bliish -- bash -lc 'set -a; . /etc/bliishspace.env; set +a; cd /opt/bliishspace; pnpm db:init'
cat >/etc/systemd/system/bliishspace.service <<'SERVICE'
[Unit]
Description=Bliish.space
After=network-online.target
Wants=network-online.target
[Service]
Type=simple
User=bliish
Group=bliish
WorkingDirectory=/opt/bliishspace
EnvironmentFile=/etc/bliishspace.env
ExecStart=/usr/bin/node /opt/bliishspace/dist/index.js
Restart=on-failure
RestartSec=5
NoNewPrivileges=true
PrivateTmp=true
PrivateDevices=true
ProtectHome=true
ProtectSystem=strict
ProtectKernelTunables=true
ProtectKernelModules=true
ProtectControlGroups=true
RestrictSUIDSGID=true
LockPersonality=true
SystemCallArchitectures=native
ReadWritePaths=/var/lib/bliishspace
[Install]
WantedBy=multi-user.target
SERVICE
systemctl daemon-reload
systemctl enable --now bliishspace
cat >/etc/caddy/Caddyfile <<'CADDY'
{
email hi@bliish.com
}
__BLIISH_DOMAIN__ {
encode zstd gzip
reverse_proxy 127.0.0.1:3000
}
www.__BLIISH_DOMAIN__ {
redir https://__BLIISH_DOMAIN__{uri} permanent
}
CADDY
caddy validate --config /etc/caddy/Caddyfile
systemctl enable --now caddy
systemctl reload caddy
runcmd:
- [bash, /usr/local/sbin/install-bliishspace]
final_message: "Bliish.space cloud-init finished. Check systemctl status bliishspace and journalctl -u bliishspace."

23
deploy/hetzner/firewall-rules.json Normal file
View file

@ -0,0 +1,23 @@
[
{
"direction": "in",
"protocol": "tcp",
"port": "22",
"source_ips": ["0.0.0.0/0", "::/0"],
"description": "SSH"
},
{
"direction": "in",
"protocol": "tcp",
"port": "80",
"source_ips": ["0.0.0.0/0", "::/0"],
"description": "HTTP"
},
{
"direction": "in",
"protocol": "tcp",
"port": "443",
"source_ips": ["0.0.0.0/0", "::/0"],
"description": "HTTPS"
}
]

74
deploy/hetzner/lib.sh Normal file
View file

@ -0,0 +1,74 @@
#!/usr/bin/env bash
DEPLOY_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
ROOT_DIR="$(cd "$DEPLOY_DIR/../.." && pwd)"
ENV_FILE="${BLIISH_PRODUCTION_ENV_FILE:-$DEPLOY_DIR/production.env}"
load_optional_production_env() {
if [ -r "$ENV_FILE" ]; then
# shellcheck disable=SC1090
. "$ENV_FILE"
fi
}
load_required_production_env() {
if [ -r "$ENV_FILE" ]; then
# shellcheck disable=SC1090
. "$ENV_FILE"
return
fi
echo "Production env file not found: $ENV_FILE" >&2
echo "Copy deploy/hetzner/production.env.example to deploy/hetzner/production.env first." >&2
exit 1
}
require_command() {
if ! command -v "$1" >/dev/null 2>&1; then
echo "Missing required command: $1" >&2
exit 1
fi
}
escape_sed_replacement() {
printf "%s" "$1" | sed -e 's/[\/&|\\]/\\&/g'
}
require_no_control_chars() {
case "$2" in
*$'\n'*|*$'\r'*|*$'\t'*)
echo "$1 must not contain control characters" >&2
exit 1
;;
esac
}
require_simple_token() {
local name="$1"
local value="$2"
local pattern="$3"
if [[ ! "$value" =~ $pattern ]]; then
echo "$name has an unsupported value: $value" >&2
exit 1
fi
}
require_repository_ref() {
require_no_control_chars "$1" "$2"
case "$2" in
*[[:space:]\\]*)
echo "$1 must not contain whitespace or backslashes" >&2
exit 1
;;
esac
require_simple_token "$1" "$2" '^[A-Za-z0-9][A-Za-z0-9._/-]*$'
}
normalize_domain() {
local domain="$1"
domain="${domain#http://}"
domain="${domain#https://}"
domain="${domain%%/*}"
printf "%s" "$domain"
}

43
deploy/hetzner/production.env.example Normal file
View file

@ -0,0 +1,43 @@
# Copy this file to deploy/hetzner/production.env and edit it.
# production.env is ignored by git.
#
# Bliish project maintainers can keep the defaults to deploy bliish.space from
# bliish-com/bliishspace.
#
# Independent self-hosters who want GitHub auto-deploys should fork or copy the
# repository publicly, then change at least:
# - BLIISH_DOMAIN
# - BLIISH_BASE_URL
# - BLIISH_REPOSITORY_URL
# - BLIISH_GITHUB_REPOSITORY
# Public site identity.
BLIISH_DOMAIN=bliish.space
BLIISH_BASE_URL=https://bliish.space
BLIISH_SERVER_NAME=bliishspace-1
# Hetzner Cloud target. nbg1 is Nuremberg, Germany.
BLIISH_HCLOUD_LOCATION=nbg1
BLIISH_HCLOUD_SERVER_TYPE=cx23
BLIISH_HCLOUD_IMAGE=ubuntu-24.04
BLIISH_HCLOUD_ENABLE_IPV4=true
BLIISH_HCLOUD_ENABLE_BACKUPS=false
BLIISH_HCLOUD_ENABLE_DELETE_PROTECTION=true
# SSH key used for provisioning and GitHub deploys. provision.sh creates it if
# neither the private nor public key exists.
BLIISH_DEPLOY_SSH_KEY=$HOME/.ssh/bliishspace-deploy
BLIISH_HCLOUD_SSH_KEY_NAME=bliishspace-admin
BLIISH_HCLOUD_SSH_PUBLIC_KEY=$HOME/.ssh/bliishspace-deploy.pub
BLIISH_SSH_USER=root
# Application source.
BLIISH_REPOSITORY_URL=https://github.com/bliish-com/bliishspace.git
BLIISH_REPOSITORY_REF=main
BLIISH_ADMIN_USER_ID=1
BLIISH_MEDIA_CONCURRENCY=1
BLIISH_NODE_MAJOR=24
# GitHub repository that receives the production deploy secrets and variables.
BLIISH_GITHUB_REPOSITORY=bliish-com/bliishspace
BLIISH_GITHUB_ENVIRONMENT=production

202
deploy/hetzner/provision.sh Executable file
View file

@ -0,0 +1,202 @@
#!/usr/bin/env bash
set -euo pipefail
DEPLOY_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
# shellcheck source=deploy/hetzner/lib.sh
. "$DEPLOY_DIR/lib.sh"
load_optional_production_env
render_cloud_init() {
sed \
-e "s|__BLIISH_DOMAIN__|$(escape_sed_replacement "$BLIISH_DOMAIN")|g" \
-e "s|__BLIISH_BASE_URL__|$(escape_sed_replacement "$BLIISH_BASE_URL")|g" \
-e "s|__BLIISH_REPOSITORY_URL__|$(escape_sed_replacement "$BLIISH_REPOSITORY_URL")|g" \
-e "s|__BLIISH_REPOSITORY_REF__|$(escape_sed_replacement "$BLIISH_REPOSITORY_REF")|g" \
-e "s|__BLIISH_ADMIN_USER_ID__|$(escape_sed_replacement "$BLIISH_ADMIN_USER_ID")|g" \
-e "s|__BLIISH_MEDIA_CONCURRENCY__|$(escape_sed_replacement "$BLIISH_MEDIA_CONCURRENCY")|g" \
-e "s|__BLIISH_NODE_MAJOR__|$(escape_sed_replacement "$BLIISH_NODE_MAJOR")|g" \
"$DEPLOY_DIR/cloud-init.yml" > "$USER_DATA_FILE"
}
# Check local tooling before touching Hetzner resources.
require_command hcloud
require_command sed
require_command mktemp
# Operator-overridable defaults. The deployment guide documents each one.
BLIISH_SERVER_NAME="${BLIISH_SERVER_NAME:-bliishspace-1}"
BLIISH_HCLOUD_SERVER_TYPE="${BLIISH_HCLOUD_SERVER_TYPE:-cx23}"
BLIISH_HCLOUD_IMAGE="${BLIISH_HCLOUD_IMAGE:-ubuntu-24.04}"
BLIISH_HCLOUD_LOCATION="${BLIISH_HCLOUD_LOCATION:-nbg1}"
BLIISH_HCLOUD_ENABLE_IPV4="${BLIISH_HCLOUD_ENABLE_IPV4:-true}"
BLIISH_DEPLOY_SSH_KEY="${BLIISH_DEPLOY_SSH_KEY:-$HOME/.ssh/bliishspace-deploy}"
BLIISH_HCLOUD_SSH_KEY_NAME="${BLIISH_HCLOUD_SSH_KEY_NAME:-bliishspace-admin}"
BLIISH_HCLOUD_SSH_PUBLIC_KEY="${BLIISH_HCLOUD_SSH_PUBLIC_KEY:-$BLIISH_DEPLOY_SSH_KEY.pub}"
BLIISH_HCLOUD_FIREWALL_NAME="${BLIISH_HCLOUD_FIREWALL_NAME:-bliishspace-web}"
BLIISH_HCLOUD_FIREWALL_RULES="${BLIISH_HCLOUD_FIREWALL_RULES:-$DEPLOY_DIR/firewall-rules.json}"
BLIISH_REPOSITORY_URL="${BLIISH_REPOSITORY_URL:-https://github.com/bliish-com/bliishspace.git}"
BLIISH_REPOSITORY_REF="${BLIISH_REPOSITORY_REF:-main}"
BLIISH_ADMIN_USER_ID="${BLIISH_ADMIN_USER_ID:-1}"
BLIISH_MEDIA_CONCURRENCY="${BLIISH_MEDIA_CONCURRENCY:-1}"
BLIISH_NODE_MAJOR="${BLIISH_NODE_MAJOR:-24}"
BLIISH_HCLOUD_ENABLE_BACKUPS="${BLIISH_HCLOUD_ENABLE_BACKUPS:-false}"
BLIISH_HCLOUD_ENABLE_DELETE_PROTECTION="${BLIISH_HCLOUD_ENABLE_DELETE_PROTECTION:-true}"
# Accept either BLIISH_DOMAIN or a full BLIISH_BASE_URL, then normalize them for
# cloud-init and Caddy.
if [ -z "${BLIISH_DOMAIN:-}" ] && [ -n "${BLIISH_BASE_URL:-}" ]; then
BLIISH_DOMAIN="$(normalize_domain "$BLIISH_BASE_URL")"
fi
if [ -z "${BLIISH_DOMAIN:-}" ]; then
echo "Set BLIISH_DOMAIN, for example: BLIISH_DOMAIN=bliish.space deploy/hetzner/provision.sh" >&2
exit 1
fi
BLIISH_DOMAIN="$(normalize_domain "$BLIISH_DOMAIN")"
BLIISH_BASE_URL="${BLIISH_BASE_URL:-https://$BLIISH_DOMAIN}"
USER_DATA_FILE="${BLIISH_HCLOUD_USER_DATA_FILE:-$(mktemp "${TMPDIR:-/tmp}/bliishspace-cloud-init.XXXXXX")}"
EXPECTED_BLIISH_BASE_URL="https://$BLIISH_DOMAIN"
# These values are interpolated into cloud-init, so reject control characters
# and shell-sensitive tokens before rendering the template.
require_no_control_chars BLIISH_DOMAIN "$BLIISH_DOMAIN"
require_no_control_chars BLIISH_BASE_URL "$BLIISH_BASE_URL"
require_no_control_chars BLIISH_HCLOUD_LOCATION "$BLIISH_HCLOUD_LOCATION"
require_no_control_chars BLIISH_HCLOUD_SERVER_TYPE "$BLIISH_HCLOUD_SERVER_TYPE"
require_no_control_chars BLIISH_HCLOUD_IMAGE "$BLIISH_HCLOUD_IMAGE"
require_no_control_chars BLIISH_REPOSITORY_URL "$BLIISH_REPOSITORY_URL"
require_no_control_chars BLIISH_REPOSITORY_REF "$BLIISH_REPOSITORY_REF"
require_no_control_chars BLIISH_ADMIN_USER_ID "$BLIISH_ADMIN_USER_ID"
require_no_control_chars BLIISH_MEDIA_CONCURRENCY "$BLIISH_MEDIA_CONCURRENCY"
require_no_control_chars BLIISH_NODE_MAJOR "$BLIISH_NODE_MAJOR"
require_simple_token BLIISH_DOMAIN "$BLIISH_DOMAIN" '^[A-Za-z0-9][A-Za-z0-9.-]*[A-Za-z0-9]$'
require_simple_token BLIISH_HCLOUD_LOCATION "$BLIISH_HCLOUD_LOCATION" '^[a-z0-9][a-z0-9-]*$'
require_simple_token BLIISH_HCLOUD_SERVER_TYPE "$BLIISH_HCLOUD_SERVER_TYPE" '^[A-Za-z0-9][A-Za-z0-9._-]*$'
require_simple_token BLIISH_HCLOUD_IMAGE "$BLIISH_HCLOUD_IMAGE" '^[A-Za-z0-9][A-Za-z0-9._-]*$'
require_simple_token BLIISH_ADMIN_USER_ID "$BLIISH_ADMIN_USER_ID" '^[0-9]+$'
require_simple_token BLIISH_MEDIA_CONCURRENCY "$BLIISH_MEDIA_CONCURRENCY" '^[1-8]$'
require_simple_token BLIISH_NODE_MAJOR "$BLIISH_NODE_MAJOR" '^[0-9]+$'
case "$BLIISH_BASE_URL" in
https://*) ;;
*)
echo "BLIISH_BASE_URL must use https:// for this production deployment path" >&2
exit 1
;;
esac
if [ "$BLIISH_BASE_URL" != "$EXPECTED_BLIISH_BASE_URL" ]; then
echo "BLIISH_BASE_URL must exactly match $EXPECTED_BLIISH_BASE_URL" >&2
exit 1
fi
case "$BLIISH_REPOSITORY_URL" in
-*)
echo "BLIISH_REPOSITORY_URL must not start with '-'" >&2
exit 1
;;
*[[:space:]\\]*)
echo "BLIISH_REPOSITORY_URL must not contain whitespace or backslashes" >&2
exit 1
;;
esac
require_simple_token BLIISH_REPOSITORY_URL "$BLIISH_REPOSITORY_URL" '^[A-Za-z0-9][A-Za-z0-9.+:/_@~=-]*$'
require_repository_ref BLIISH_REPOSITORY_REF "$BLIISH_REPOSITORY_REF"
# Reuse the shared SSH key and firewall, but never provision over an existing
# server.
if [ ! -r "$BLIISH_DEPLOY_SSH_KEY" ] && [ ! -r "$BLIISH_HCLOUD_SSH_PUBLIC_KEY" ]; then
require_command ssh-keygen
install -d -m 0700 "$(dirname "$BLIISH_DEPLOY_SSH_KEY")"
ssh-keygen -t ed25519 -f "$BLIISH_DEPLOY_SSH_KEY" -N "" -C "bliishspace-deploy"
fi
if [ ! -r "$BLIISH_HCLOUD_SSH_PUBLIC_KEY" ] && [ -r "$BLIISH_DEPLOY_SSH_KEY" ]; then
require_command ssh-keygen
ssh-keygen -y -f "$BLIISH_DEPLOY_SSH_KEY" > "$BLIISH_HCLOUD_SSH_PUBLIC_KEY"
fi
if [ ! -r "$BLIISH_HCLOUD_SSH_PUBLIC_KEY" ]; then
echo "SSH public key not found: $BLIISH_HCLOUD_SSH_PUBLIC_KEY" >&2
exit 1
fi
if [ ! -r "$BLIISH_HCLOUD_FIREWALL_RULES" ]; then
echo "Firewall rules file not found: $BLIISH_HCLOUD_FIREWALL_RULES" >&2
exit 1
fi
if hcloud server describe "$BLIISH_SERVER_NAME" >/dev/null 2>&1; then
echo "Server already exists: $BLIISH_SERVER_NAME" >&2
echo "Use deploy/hetzner/update.sh for application updates." >&2
exit 1
fi
if ! hcloud ssh-key describe "$BLIISH_HCLOUD_SSH_KEY_NAME" >/dev/null 2>&1; then
hcloud ssh-key create \
--name "$BLIISH_HCLOUD_SSH_KEY_NAME" \
--label "app=bliishspace" \
--public-key-from-file "$BLIISH_HCLOUD_SSH_PUBLIC_KEY"
fi
if ! hcloud firewall describe "$BLIISH_HCLOUD_FIREWALL_NAME" >/dev/null 2>&1; then
hcloud firewall create \
--name "$BLIISH_HCLOUD_FIREWALL_NAME" \
--label "app=bliishspace" \
--rules-file "$BLIISH_HCLOUD_FIREWALL_RULES"
fi
render_cloud_init
# Keep optional hcloud flags in an array to avoid word splitting.
create_args=(
server create
--name "$BLIISH_SERVER_NAME"
--type "$BLIISH_HCLOUD_SERVER_TYPE"
--image "$BLIISH_HCLOUD_IMAGE"
--location "$BLIISH_HCLOUD_LOCATION"
--ssh-key "$BLIISH_HCLOUD_SSH_KEY_NAME"
--firewall "$BLIISH_HCLOUD_FIREWALL_NAME"
--label "app=bliishspace"
--user-data-from-file "$USER_DATA_FILE"
)
case "$BLIISH_HCLOUD_ENABLE_IPV4" in
0|false|FALSE|no|NO)
create_args+=(--without-ipv4)
;;
esac
case "$BLIISH_HCLOUD_ENABLE_BACKUPS" in
1|true|TRUE|yes|YES)
create_args+=(--enable-backup)
;;
esac
case "$BLIISH_HCLOUD_ENABLE_DELETE_PROTECTION" in
1|true|TRUE|yes|YES)
create_args+=(--enable-protection delete --enable-protection rebuild)
;;
esac
hcloud "${create_args[@]}"
server_ip="$(hcloud server ip "$BLIISH_SERVER_NAME")"
# Print the DNS and first-boot checks operators usually need next.
cat <<EOF
Created $BLIISH_SERVER_NAME at $server_ip.
Next:
1. Point DNS A/AAAA records for $BLIISH_DOMAIN at the server IP.
2. Wait for first boot setup:
ssh root@$server_ip 'cloud-init status --wait'
3. Check the app:
ssh root@$server_ip 'systemctl status bliishspace --no-pager'
ssh root@$server_ip 'journalctl -u bliishspace -n 100 --no-pager'
Rendered cloud-init: $USER_DATA_FILE
EOF

89
deploy/hetzner/setup-github.sh Executable file
View file

@ -0,0 +1,89 @@
#!/usr/bin/env bash
set -euo pipefail
DEPLOY_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
# shellcheck source=deploy/hetzner/lib.sh
. "$DEPLOY_DIR/lib.sh"
load_required_production_env
require_command gh
require_command ssh-keyscan
BLIISH_DOMAIN="$(normalize_domain "${BLIISH_DOMAIN:-bliish.space}")"
BLIISH_BASE_URL="${BLIISH_BASE_URL:-https://$BLIISH_DOMAIN}"
BLIISH_SERVER_NAME="${BLIISH_SERVER_NAME:-bliishspace-1}"
BLIISH_DEPLOY_SSH_KEY="${BLIISH_DEPLOY_SSH_KEY:-$HOME/.ssh/bliishspace-deploy}"
BLIISH_SSH_USER="${BLIISH_SSH_USER:-root}"
BLIISH_REPOSITORY_REF="${BLIISH_REPOSITORY_REF:-main}"
BLIISH_GITHUB_REPOSITORY="${BLIISH_GITHUB_REPOSITORY:-bliish-com/bliishspace}"
BLIISH_GITHUB_ENVIRONMENT="${BLIISH_GITHUB_ENVIRONMENT:-production}"
require_repository_ref BLIISH_REPOSITORY_REF "$BLIISH_REPOSITORY_REF"
if [ ! -r "$BLIISH_DEPLOY_SSH_KEY" ]; then
echo "Deploy SSH private key not found: $BLIISH_DEPLOY_SSH_KEY" >&2
echo "Run deploy/hetzner/provision.sh first, or set BLIISH_DEPLOY_SSH_KEY." >&2
exit 1
fi
if [ -z "${BLIISH_SSH_HOST:-}" ]; then
require_command hcloud
BLIISH_SSH_HOST="$(hcloud server ip "$BLIISH_SERVER_NAME")"
fi
known_hosts="$(ssh-keyscan -T 10 "$BLIISH_SSH_HOST" 2>/dev/null || true)"
if [ -z "$known_hosts" ] && [ -n "$BLIISH_DOMAIN" ] && [ "$BLIISH_DOMAIN" != "$BLIISH_SSH_HOST" ]; then
known_hosts="$(ssh-keyscan -T 10 "$BLIISH_DOMAIN" 2>/dev/null || true)"
fi
if [ -z "$known_hosts" ]; then
echo "Could not collect SSH host keys for $BLIISH_SSH_HOST." >&2
echo "Check that the server is reachable on port 22, then rerun this script." >&2
exit 1
fi
if ! gh api --method PUT "repos/$BLIISH_GITHUB_REPOSITORY/environments/$BLIISH_GITHUB_ENVIRONMENT" --silent; then
echo "Could not create or update GitHub environment $BLIISH_GITHUB_ENVIRONMENT in $BLIISH_GITHUB_REPOSITORY." >&2
echo "Check that BLIISH_GITHUB_REPOSITORY points to a repository you control and that gh is authenticated with admin access." >&2
exit 1
fi
gh secret set BLIISH_DEPLOY_SSH_PRIVATE_KEY \
--repo "$BLIISH_GITHUB_REPOSITORY" \
--env "$BLIISH_GITHUB_ENVIRONMENT" \
< "$BLIISH_DEPLOY_SSH_KEY"
printf "%s\n" "$known_hosts" | gh secret set BLIISH_DEPLOY_KNOWN_HOSTS \
--repo "$BLIISH_GITHUB_REPOSITORY" \
--env "$BLIISH_GITHUB_ENVIRONMENT"
gh variable set BLIISH_BASE_URL \
--repo "$BLIISH_GITHUB_REPOSITORY" \
--env "$BLIISH_GITHUB_ENVIRONMENT" \
--body "$BLIISH_BASE_URL"
gh variable set BLIISH_SSH_HOST \
--repo "$BLIISH_GITHUB_REPOSITORY" \
--env "$BLIISH_GITHUB_ENVIRONMENT" \
--body "$BLIISH_SSH_HOST"
gh variable set BLIISH_SSH_USER \
--repo "$BLIISH_GITHUB_REPOSITORY" \
--env "$BLIISH_GITHUB_ENVIRONMENT" \
--body "$BLIISH_SSH_USER"
gh variable set BLIISH_REPOSITORY_REF \
--repo "$BLIISH_GITHUB_REPOSITORY" \
--env "$BLIISH_GITHUB_ENVIRONMENT" \
--body "$BLIISH_REPOSITORY_REF"
cat <<EOF
Configured GitHub production deploys for $BLIISH_GITHUB_REPOSITORY.
Environment: $BLIISH_GITHUB_ENVIRONMENT
URL: $BLIISH_BASE_URL
SSH target: $BLIISH_SSH_USER@$BLIISH_SSH_HOST
Ref: $BLIISH_REPOSITORY_REF
Push to main after DNS and first boot are healthy.
EOF

68
deploy/hetzner/update.sh Executable file
View file

@ -0,0 +1,68 @@
#!/usr/bin/env bash
set -euo pipefail
DEPLOY_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
# shellcheck source=deploy/hetzner/lib.sh
. "$DEPLOY_DIR/lib.sh"
load_optional_production_env
BLIISH_SERVER_NAME="${BLIISH_SERVER_NAME:-bliishspace-1}"
BLIISH_SSH_USER="${BLIISH_SSH_USER:-root}"
BLIISH_DEPLOY_SSH_KEY="${BLIISH_DEPLOY_SSH_KEY:-$HOME/.ssh/bliishspace-deploy}"
BLIISH_REPOSITORY_REF="${BLIISH_REPOSITORY_REF:-main}"
require_repository_ref BLIISH_REPOSITORY_REF "$BLIISH_REPOSITORY_REF"
# Resolve the host through hcloud unless the operator provided BLIISH_SSH_HOST.
if [ -z "${BLIISH_SSH_HOST:-}" ]; then
require_command hcloud
BLIISH_SSH_HOST="$(hcloud server ip "$BLIISH_SERVER_NAME")"
fi
require_command ssh
ssh_args=()
if [ -r "$BLIISH_DEPLOY_SSH_KEY" ]; then
ssh_args+=(-i "$BLIISH_DEPLOY_SSH_KEY")
fi
# Run deploy steps in one SSH session so failures are easier to diagnose.
ssh "${ssh_args[@]}" "$BLIISH_SSH_USER@$BLIISH_SSH_HOST" 'bash -s' -- "$BLIISH_REPOSITORY_REF" <<'REMOTE'
set -euo pipefail
repository_ref="$1"
run_as_root() {
if [ "$(id -u)" -eq 0 ]; then
"$@"
else
sudo "$@"
fi
}
run_as_bliish() {
if [ "$(id -u)" -eq 0 ]; then
runuser -u bliish -- "$@"
else
sudo -u bliish -H "$@"
fi
}
# Update the configured ref, rebuild, ensure schema objects exist, and restart systemd.
run_as_root git -C /opt/bliishspace fetch --prune --tags origin
if run_as_root git -C /opt/bliishspace rev-parse --verify --quiet "refs/remotes/origin/$repository_ref" >/dev/null; then
run_as_root git -C /opt/bliishspace checkout -B "$repository_ref" "origin/$repository_ref"
else
run_as_root git -C /opt/bliishspace checkout "$repository_ref"
fi
cd /opt/bliishspace
PNPM_PACKAGE_MANAGER="$(node -p "require('./package.json').packageManager || 'pnpm@11.1.3'")"
run_as_root corepack enable
run_as_root corepack prepare "$PNPM_PACKAGE_MANAGER" --activate
run_as_root pnpm install --frozen-lockfile
run_as_root pnpm build
run_as_bliish bash -lc 'set -a; . /etc/bliishspace.env; set +a; cd /opt/bliishspace; pnpm db:init'
run_as_root systemctl restart bliishspace
run_as_root systemctl status bliishspace --no-pager
REMOTE

22
docs/dependency-policy.md Normal file
View file

@ -0,0 +1,22 @@
# Dependency Policy
Bliish.space keeps runtime dependencies intentionally small so self-hosted instances remain easy to audit and operate.
## Defaults
- Prefer the TypeScript standard library, Hono APIs, prepared SQLite statements, and local helpers before adding a package.
- Add a dependency only when it removes meaningful security risk, maintenance burden, or large duplicated code.
- Keep optional infrastructure optional. Do not add a required hosted service, queue, cache, analytics tool, or object store for a core workflow.
- Pin package versions through `pnpm-lock.yaml`.
## Review Checklist
Before adding a dependency, confirm:
- the package is actively maintained;
- the license can be used in a GPL-3.0-only project;
- the package is needed at runtime or can stay in `devDependencies`;
- the same behavior is not already available in the app's shared modules, `src/server`, `src/ui`, or the platform;
- attribution is added to `NOTICE` when required.
Run `pnpm install`, `pnpm typecheck`, `pnpm test`, and `pnpm build` after dependency changes.

240
docs/deployment/hetzner-cloud-cli.md Normal file
View file

@ -0,0 +1,240 @@
# Hetzner Cloud CLI Deployment
This is the recommended production path for the official Bliish.space instance and for people running an independent Bliish instance. It creates one small Hetzner Cloud VPS, installs the app with cloud-init, then optionally configures GitHub Actions so future pushes to `main` deploy over SSH.
We recommend Hetzner Cloud for this project because the small cost-optimized VPS plans fit the app's shape: one Node process, SQLite, local uploads, Caddy, and systemd. The default target is Nuremberg, Germany, which keeps primary app data on infrastructure in Europe under the instance operator's control. That does not replace legal/privacy work, but it is a practical default for a privacy-conscious self-hosted social site.
The default `cx23` target is deliberately small. It was listed by Hetzner at $4.99/month before VAT as of May 2026, before optional IPv4 and backups. With controlled uploads and normal social activity, treat it as a practical starting point for roughly 10k-50k registered accounts and 1k-5k daily active users; resize when disk, memory, CPU, or response times say the instance has outgrown it.
## Which Path
There are two audiences, but the server process is the same:
| Operator | What You Deploy | GitHub Repo To Configure |
| --- | --- | --- |
| Bliish maintainers | `https://bliish.space` from `bliish-com/bliishspace` | `bliish-com/bliishspace` |
| Self-hosters | your own domain from your own fork or copy | your GitHub repo, for example `yourname/bliishspace` |
The only difference is what you put in `deploy/hetzner/production.env`.
If you want automatic deploys from GitHub, use a repository you control. For the Bliish maintainers, that is the upstream repo. For everyone else, that usually means a public fork. GitHub Actions secrets and variables are written to `BLIISH_GITHUB_REPOSITORY`, and GitHub only lets you write environment secrets for repositories where you have enough access.
If you do not want GitHub auto-deploys, you can clone the upstream repository locally, provision the server, skip `setup-github.sh`, and run `deploy/hetzner/update.sh` manually when you want to update.
Keep `BLIISH_REPOSITORY_URL` public unless you intentionally extend the deployment with Git credentials. The default VPS bootstrap does a plain `git clone` over HTTPS.
## Deployment Model
This is the whole loop:
1. Your local machine creates the VPS with the Hetzner CLI.
2. cloud-init clones `BLIISH_REPOSITORY_URL` onto the VPS and starts the app with systemd.
3. systemd restarts the app if it crashes.
4. Optional: `setup-github.sh` writes SSH deploy values into `BLIISH_GITHUB_REPOSITORY`.
5. Optional: future pushes to that repository's `main` branch run checks, SSH into the VPS, update the configured ref, rebuild, run `pnpm db:init`, and restart.
The VPS does not need a GitHub token. GitHub does not need a Hetzner token after provisioning. That keeps the open-source setup simple: Hetzner is used once to create the server, then updates happen over SSH.
## One-Time Setup
Install the CLIs:
```bash
brew install hcloud gh
gh auth login
hcloud context create bliishspace
```
Create the production config:
```bash
cp deploy/hetzner/production.env.example deploy/hetzner/production.env
$EDITOR deploy/hetzner/production.env
```
For the official Bliish instance, the branded defaults are already close:
```bash
BLIISH_DOMAIN=bliish.space
BLIISH_BASE_URL=https://bliish.space
BLIISH_REPOSITORY_URL=https://github.com/bliish-com/bliishspace.git
BLIISH_GITHUB_REPOSITORY=bliish-com/bliishspace
```
For a self-hosted instance with GitHub auto-deploys, fork or copy the repo first, keep that fork public unless you add private Git auth, then change at least these values:
```bash
BLIISH_DOMAIN=social.your-domain.tld
BLIISH_BASE_URL=https://social.your-domain.tld
BLIISH_REPOSITORY_URL=https://github.com/YOUR_GITHUB_NAME/bliishspace.git
BLIISH_GITHUB_REPOSITORY=YOUR_GITHUB_NAME/bliishspace
```
`BLIISH_REPOSITORY_URL` is what the VPS pulls from. `BLIISH_GITHUB_REPOSITORY` is where `setup-github.sh` writes deploy secrets and variables. They are usually the same repository, but they are separate so advanced operators can deploy from one repo while configuring another.
Provision the server:
```bash
deploy/hetzner/provision.sh
```
After the script prints the server IP, point DNS at it. For the default IPv4-enabled deployment, create an A record for your domain. If you also use IPv6, add the AAAA record from:
```bash
hcloud server ip --ipv6 bliishspace-1
```
Wait for first boot:
```bash
ssh -i ~/.ssh/bliishspace-deploy root@SERVER_IP 'cloud-init status --wait'
ssh -i ~/.ssh/bliishspace-deploy root@SERVER_IP 'systemctl status bliishspace --no-pager'
```
HTTPS is handled by Caddy in this flow. Once DNS points at the server and ports 80/443 are reachable, Caddy provisions and renews the TLS certificate automatically; keep `BLIISH_BASE_URL` set to `https://...`.
Configure GitHub production deploys:
```bash
deploy/hetzner/setup-github.sh
```
After that, normal deploys are:
```bash
git push origin main
```
GitHub runs typecheck, tests, and build first. If they pass, GitHub SSHes to the VPS and runs [update.sh](../../deploy/hetzner/update.sh).
## If You Are Self-Hosting
Use this model:
1. Fork `bliish-com/bliishspace` on GitHub, or create your own public repository from the source.
2. Clone your fork locally.
3. Edit `deploy/hetzner/production.env`.
4. Run `deploy/hetzner/provision.sh`.
5. Point DNS to the server.
6. Run `deploy/hetzner/setup-github.sh`.
7. Push future changes to your fork's `main` branch.
When upstream Bliish releases changes you want, merge or rebase upstream into your fork, then push your fork's `main` branch. That push is what deploys your instance.
If you only want to run the unmodified upstream app and do not care about GitHub auto-deploys, you can skip the fork. Clone `bliish-com/bliishspace` locally, keep `BLIISH_REPOSITORY_URL=https://github.com/bliish-com/bliishspace.git`, skip `setup-github.sh`, and run `deploy/hetzner/update.sh` manually after upstream updates.
You do not have to modify the app name or branding to test deployment, but a public instance should publish its own privacy, moderation, contact, and backup policies.
## Production Config
The local file `deploy/hetzner/production.env` is ignored by git and read by all Hetzner helper scripts.
Important defaults:
| Variable | Default | Who Usually Changes It |
| --- | --- | --- |
| `BLIISH_DOMAIN` | `bliish.space` | self-hosters |
| `BLIISH_BASE_URL` | `https://bliish.space` | self-hosters |
| `BLIISH_SERVER_NAME` | `bliishspace-1` | optional |
| `BLIISH_HCLOUD_LOCATION` | `nbg1` | optional |
| `BLIISH_HCLOUD_SERVER_TYPE` | `cx23` | optional |
| `BLIISH_HCLOUD_IMAGE` | `ubuntu-24.04` | rarely |
| `BLIISH_HCLOUD_ENABLE_IPV4` | `true` | optional |
| `BLIISH_HCLOUD_ENABLE_BACKUPS` | `false` | recommended for production |
| `BLIISH_HCLOUD_ENABLE_DELETE_PROTECTION` | `true` | rarely |
| `BLIISH_DEPLOY_SSH_KEY` | `$HOME/.ssh/bliishspace-deploy` | optional |
| `BLIISH_REPOSITORY_URL` | `https://github.com/bliish-com/bliishspace.git` | self-hosters |
| `BLIISH_REPOSITORY_REF` | `main` | optional |
| `BLIISH_ADMIN_USER_ID` | `1` | rarely |
| `BLIISH_MEDIA_CONCURRENCY` | `1` | optional |
| `BLIISH_GITHUB_REPOSITORY` | `bliish-com/bliishspace` | self-hosters |
| `BLIISH_GITHUB_ENVIRONMENT` | `production` | optional |
`nbg1` is Nuremberg, Germany. `cx23` is the smallest current cost-optimized x86 VPS shape we target. `BLIISH_HCLOUD_ENABLE_IPV4=true` costs a little more than IPv6-only but avoids breaking visitors and deploy machines that do not have reliable IPv6. Upload volume is the main variable for this app, so keep file limits conservative and watch `/var/lib/bliishspace` before treating the estimate above as capacity planning.
For absolute cheapest networking, set:
```bash
BLIISH_HCLOUD_ENABLE_IPV4=false
```
Only do that if you are comfortable operating an IPv6-only public site.
## GitHub Values
`setup-github.sh` creates or updates the GitHub environment named by `BLIISH_GITHUB_ENVIRONMENT` and writes the needed deploy values with the GitHub CLI:
- secret `BLIISH_DEPLOY_SSH_PRIVATE_KEY`
- secret `BLIISH_DEPLOY_KNOWN_HOSTS`
- variable `BLIISH_BASE_URL`
- variable `BLIISH_SSH_HOST`
- variable `BLIISH_SSH_USER`
- variable `BLIISH_REPOSITORY_REF`
No Hetzner API token is stored in GitHub. GitHub only needs SSH access to the already-provisioned server.
## What Gets Installed
The VPS stores app state on local disk:
- SQLite: `/var/lib/bliishspace/bliish.sqlite`
- Uploads: `/var/lib/bliishspace/uploads`
- Environment: `/etc/bliishspace.env`
- Code: `/opt/bliishspace`
cloud-init installs Node.js, pnpm, SQLite, Caddy, the systemd service, and the app. systemd restarts the app if it crashes.
The account whose id matches `BLIISH_ADMIN_USER_ID` receives the `admin` role. With the default value, create the first account before opening signups widely. All users are kept as accepted friends with that protected admin account and cannot unfriend or block it.
When group id `1` exists, it is the default group: existing and new users are added automatically, users cannot leave it, and the group cannot be deleted.
After signing in as the admin account, open `/admin` to manage branding, home page copy, contact details, announcements, moderation, automod, rate limits, users, email outbox, audit logs, and database table counts without editing source files.
Admin branding and instance settings are stored in SQLite. Updating the code does not reset them. The defaults in the repository are only used when the database has no saved value or when an admin intentionally resets a setting.
## Manual Updates
GitHub deploys use the same script you can run locally:
```bash
deploy/hetzner/update.sh
```
The script loads `deploy/hetzner/production.env`, SSHes to the VPS, updates code in `/opt/bliishspace`, installs dependencies, builds, runs `pnpm db:init`, and restarts `bliishspace`.
It does not replace `/var/lib/bliishspace/bliish.sqlite`, `/var/lib/bliishspace/uploads`, or `/etc/bliishspace.env`. Those hold the instance's users, posts, uploads, admin branding, and production environment. Back them up before maintenance changes; normal deploys preserve them.
## Backups
This deployment keeps the app simple, so backups matter. Back up both:
- `/var/lib/bliishspace/bliish.sqlite`
- `/var/lib/bliishspace/uploads`
Hetzner server backups are the easiest extra safety net and cost 20% of the server price when enabled:
```bash
BLIISH_HCLOUD_ENABLE_BACKUPS=true
```
Still keep an application archive you can move off the server. The manual [backup commands](hetzner-cloud.md#backups) apply to this CLI flow too.
## Troubleshooting
Cloud-init output:
```bash
ssh -i ~/.ssh/bliishspace-deploy root@SERVER_IP 'tail -n 200 /var/log/cloud-init-output.log'
```
App logs:
```bash
ssh -i ~/.ssh/bliishspace-deploy root@SERVER_IP 'journalctl -u bliishspace -f'
```
Caddy logs:
```bash
ssh -i ~/.ssh/bliishspace-deploy root@SERVER_IP 'journalctl -u caddy -n 100 --no-pager'
```

232
docs/deployment/hetzner-cloud.md Normal file
View file

@ -0,0 +1,232 @@
# Hetzner Cloud Deployment
This guide deploys Bliish.space on a single Hetzner Cloud VPS with systemd, Caddy, one SQLite database, and one local upload directory.
For a shorter `hcloud` and cloud-init flow, see [Hetzner Cloud CLI Deployment](hetzner-cloud-cli.md).
## Server Shape
Recommended starting point:
- Ubuntu or Debian LTS.
- Hetzner `cx23` in `nbg1` for the recommended small German VPS target. With controlled uploads and normal social activity, this is a practical starting point for roughly 10k-50k registered accounts and 1k-5k daily active users.
- A persistent disk large enough for the SQLite database, uploads, logs, and backups.
- A domain name pointed at the server.
## Firewall
Allow only:
- SSH: `22/tcp`, ideally restricted to trusted IPs.
- HTTP: `80/tcp`.
- HTTPS: `443/tcp`.
Use Hetzner Cloud Firewall, the server firewall, or both.
## System Packages
```bash
sudo apt update
sudo apt install -y ca-certificates curl git sqlite3 build-essential python3 caddy
```
Install Node.js 24 LTS using your preferred Node distribution method. Then enable pnpm through Corepack:
```bash
corepack enable
node --version
pnpm --version
```
## Service User And Directories
```bash
sudo useradd --system --create-home --home-dir /var/lib/bliishspace --shell /usr/sbin/nologin bliish
sudo install -d -o bliish -g bliish /var/lib/bliishspace
sudo install -d -o bliish -g bliish /var/lib/bliishspace/uploads
sudo install -d -o root -g root /opt/bliishspace
```
## Application Code
Clone or copy the repository to `/opt/bliishspace`. Official maintainers use the upstream repository. Self-hosters can use their own public fork if they want the server to track their GitHub copy.
```bash
sudo git clone https://github.com/bliish-com/bliishspace.git /opt/bliishspace
sudo chown -R root:root /opt/bliishspace
```
For a fork, replace the clone URL with your repository URL. Private repositories need additional Git credentials and are outside the simple deployment path.
Install dependencies and build:
```bash
cd /opt/bliishspace
pnpm install --frozen-lockfile
pnpm build
```
## Environment File
Create `/etc/bliishspace.env`. Replace `bliish.space` with your own domain when running an independent instance:
```env
BLIISH_BASE_URL=https://bliish.space
BLIISH_DATABASE_PATH=/var/lib/bliishspace/bliish.sqlite
BLIISH_UPLOAD_DIR=/var/lib/bliishspace/uploads
BLIISH_ADMIN_USER_ID=1
BLIISH_MEDIA_CONCURRENCY=1
HOST=127.0.0.1
PORT=3000
```
Lock down the file:
```bash
sudo chown root:bliish /etc/bliishspace.env
sudo chmod 0640 /etc/bliishspace.env
```
Initialize the database:
```bash
sudo -u bliish -H bash -lc 'set -a; . /etc/bliishspace.env; set +a; cd /opt/bliishspace; pnpm db:init'
```
The account that signs up with `BLIISH_ADMIN_USER_ID` receives the `admin` role. With the default value, sign up the first account before opening the instance to others. All users are kept as accepted friends with that protected admin account and cannot unfriend or block it.
When group id `1` exists, it is the default group: existing and new users are added automatically, users cannot leave it, and the group cannot be deleted.
After signing in as the admin account, open `/admin` to manage branding, home page copy, contact details, announcements, moderation, automod, rate limits, users, email outbox, audit logs, and database table counts without editing source files.
Admin branding and instance settings are stored in the SQLite database. The defaults in the repository are only used for a fresh database or an intentional reset.
## systemd
Create `/etc/systemd/system/bliishspace.service`:
```ini
[Unit]
Description=Bliish.space
After=network-online.target
Wants=network-online.target
[Service]
Type=simple
User=bliish
Group=bliish
WorkingDirectory=/opt/bliishspace
EnvironmentFile=/etc/bliishspace.env
ExecStart=/usr/bin/node /opt/bliishspace/dist/index.js
Restart=on-failure
RestartSec=5
NoNewPrivileges=true
PrivateTmp=true
PrivateDevices=true
ProtectHome=true
ProtectSystem=strict
ProtectKernelTunables=true
ProtectKernelModules=true
ProtectControlGroups=true
RestrictSUIDSGID=true
LockPersonality=true
SystemCallArchitectures=native
ReadWritePaths=/var/lib/bliishspace
[Install]
WantedBy=multi-user.target
```
Start the app:
```bash
sudo systemctl daemon-reload
sudo systemctl enable --now bliishspace
sudo systemctl status bliishspace
```
Logs:
```bash
sudo journalctl -u bliishspace -f
```
## Caddy
Create a Caddy site for the app:
```caddyfile
bliish.space {
reverse_proxy 127.0.0.1:3000
}
```
If using Debian/Ubuntu's packaged Caddy, this usually belongs in `/etc/caddy/Caddyfile`.
Caddy handles HTTPS automatically once DNS points at the server and ports 80/443 are reachable. No manual certificate command is needed for the normal flow.
Reload Caddy:
```bash
sudo caddy validate --config /etc/caddy/Caddyfile
sudo systemctl reload caddy
```
## Updates
```bash
cd /opt/bliishspace
sudo git pull --ff-only
pnpm install --frozen-lockfile
pnpm build
sudo -u bliish -H bash -lc 'set -a; . /etc/bliishspace.env; set +a; cd /opt/bliishspace; pnpm db:init'
sudo systemctl restart bliishspace
```
The GitHub Actions workflow runs this same update path automatically after checks pass on `main`, if GitHub deploys are configured with [setup-github.sh](hetzner-cloud-cli.md#github-values). For self-hosted GitHub deploys, configure a fork or repository you control; GitHub needs permission to store the instance's deploy secrets there.
Updates replace code in `/opt/bliishspace`; they do not replace `/var/lib/bliishspace/bliish.sqlite`, `/var/lib/bliishspace/uploads`, or `/etc/bliishspace.env`. Back those paths up before maintenance changes; normal deploys preserve users, content, uploads, and admin branding.
## Backups
Back up the SQLite database and uploads directory. Hetzner server backups are useful for cheap whole-disk recovery, but still keep an application archive you can move off the server.
```bash
sudo install -d -o bliish -g bliish /var/lib/bliishspace/backups
sudo -u bliish sqlite3 /var/lib/bliishspace/bliish.sqlite ".backup '/var/lib/bliishspace/backups/bliish.sqlite'"
sudo tar -C /var/lib/bliishspace -czf "/var/lib/bliishspace/backups/bliishspace-$(date +%Y%m%d-%H%M%S).tar.gz" backups/bliish.sqlite uploads
```
Move backup archives off the server regularly.
## Restore
Stop the app:
```bash
sudo systemctl stop bliishspace
```
Restore the database and uploads from a backup archive:
```bash
sudo tar -C /var/lib/bliishspace -xzf /path/to/bliishspace-backup.tar.gz
sudo install -o bliish -g bliish -m 0640 /var/lib/bliishspace/backups/bliish.sqlite /var/lib/bliishspace/bliish.sqlite
sudo rm -f /var/lib/bliishspace/bliish.sqlite-wal /var/lib/bliishspace/bliish.sqlite-shm
sudo chown -R bliish:bliish /var/lib/bliishspace/uploads
```
Start the app:
```bash
sudo systemctl start bliishspace
```
Smoke test:
- open `/`;
- create or log into an account;
- open `/admin` when signed in as the admin account;
- upload a small profile image;
- open an existing profile page;
- check `sudo journalctl -u bliishspace -n 100`.

61
docs/local-development.md Normal file
View file

@ -0,0 +1,61 @@
# Local Development
Bliish.space is a Hono application at the repository root.
The app is server-rendered, form-first, SQLite-backed, and self-hosted. It does not require browser JavaScript or external APIs for auth, media, search, analytics, moderation, or storage.
## Local Setup
```bash
corepack enable
pnpm install
pnpm db:init
pnpm dev
```
Open `http://localhost:3000`. If another app is already using port 3000:
```bash
PORT=3123 pnpm dev
```
The account whose id matches `BLIISH_ADMIN_USER_ID` receives the `admin` role when it signs up. With the default environment, that is the first signed-up account. All users are kept as accepted friends with that protected admin account and cannot unfriend or block it.
When group id `1` exists, it is the default group: existing and new users are added automatically, users cannot leave it, and the group cannot be deleted.
After signing in as that account, open `/admin` to manage local branding, site copy, moderation, automod, rate limits, users, email outbox, audit logs, and database table counts without editing source files.
The app reads environment variables from the shell. If you copy `.env.example` for local overrides, source it before running commands:
```bash
set -a
. ./.env
set +a
pnpm dev
```
Useful checks:
```bash
pnpm typecheck
pnpm test
pnpm build
```
Runtime data lives under `data/` by default. SQLite files and user uploads are local state, not source files.
For a clean local reset, stop the dev server, delete `data/`, then run `pnpm db:init` again.
## Email
Verification, reset, and admin emails are always recorded in the local admin outbox. To also send them through SMTP, configure:
```bash
BLIISH_SMTP_HOST=smtp.example.com
BLIISH_SMTP_PORT=587
BLIISH_SMTP_USER=...
BLIISH_SMTP_PASSWORD=...
BLIISH_SMTP_FROM=noreply@example.com
```
Set `BLIISH_SMTP_SECURE=1` for implicit TLS, usually port 465. Set `BLIISH_SMTP_STARTTLS=0` only for servers that do not support STARTTLS.

145
docs/self-hosting.md Normal file
View file

@ -0,0 +1,145 @@
# Self-Hosting
Bliish.space runs as one Node process with one SQLite database and one upload directory.
## Who This Is For
These notes are for both the Bliish maintainers and independent operators. The production process is the same; only the domain name and source repository change.
- Official maintainers deploy `bliish.space` from `bliish-com/bliishspace`.
- Independent operators deploy their own domain from their own public fork or copy if they want GitHub auto-deploys.
- Operators who do not want GitHub auto-deploys can deploy the upstream repository directly and run updates manually.
For GitHub auto-deploys, use a repository you control. The deployment helper writes environment secrets and variables to that repository, so a self-hoster normally needs a fork. Keep the fork public unless you intentionally extend the VPS bootstrap with private Git credentials.
## Requirements
- Node.js 24 LTS or newer.
- pnpm through Corepack.
- A writable data directory.
- A reverse proxy with TLS for public deployments.
## Local Setup
```bash
corepack enable
pnpm install
pnpm db:init
pnpm dev
```
Open `http://localhost:3000`.
## Configuration
Copy `.env.example` if you want a local starting point, then adjust values for the instance:
```env
BLIISH_BASE_URL=https://bliish.space
BLIISH_DATABASE_PATH=./data/bliish.sqlite
BLIISH_UPLOAD_DIR=./data/uploads
BLIISH_ADMIN_USER_ID=1
BLIISH_MEDIA_CONCURRENCY=1
PORT=3000
HOST=127.0.0.1
```
The app does not auto-load `.env` files. Source that file in your shell or process manager before running app commands.
If these variables are unset, the app defaults to `http://localhost:3000`, `./data/bliish.sqlite`, `./data/uploads`, admin user id `1`, media concurrency `1`, port `3000`, and host `0.0.0.0`. The account that signs up with `BLIISH_ADMIN_USER_ID` receives the `admin` role, and all users are kept as accepted friends with that protected admin account.
When group id `1` exists, it is the default group. Existing and new users are added automatically, users cannot leave it, and the group cannot be deleted.
The default app does not require cloud credentials or an email provider. Password reset and verification messages are written to the local email outbox visible to admins.
`BLIISH_UPLOAD_DIR` controls where uploads are written. Public user media is served only from the profile-image, post-image, and theme-song buckets at `/media/pfp/*`, `/media/post-images/*`, and `/media/theme-songs/*`. Keep the upload directory on persistent storage and include it in backups.
Uploaded user images are normalized locally before storage. `BLIISH_MEDIA_CONCURRENCY` controls sharp/libvips worker concurrency and defaults to `1`, which keeps memory and CPU predictable on small VPS instances.
## Admin Console
After the admin account signs in, open `/admin` to manage the instance without editing source code.
Admins can manage users, reports, automod rules, rate limits, site identity, home page text, contact and legal details, announcements, color theme, blog cleanup, favorites cleanup, the local email outbox, database table counts, and the audit log. Moderators can use `/moderation/reports` for report handling.
Admin-managed instance settings are runtime data, not source files. They are stored in the SQLite database, so updating application code should not overwrite them. The defaults in the repository are fallbacks for a fresh database or an intentional reset.
## Production Process
Build and run:
```bash
pnpm install --frozen-lockfile
pnpm db:init
pnpm build
pnpm start
```
Use a process manager such as systemd, OpenRC, runit, s6, or Docker if that fits the operator environment. Docker should remain optional.
## Provider Recipes
- [Hetzner Cloud CLI](deployment/hetzner-cloud-cli.md)
- [Hetzner Cloud manual VPS](deployment/hetzner-cloud.md)
For GitHub-based auto-deploys, self-hosters should fork or copy the repository first. The VPS pulls code from `BLIISH_REPOSITORY_URL`, and `setup-github.sh` writes deploy secrets to `BLIISH_GITHUB_REPOSITORY`, so those values should point at a repository the operator controls.
For manual updates without GitHub deploys, a self-hoster may keep `BLIISH_REPOSITORY_URL=https://github.com/bliish-com/bliishspace.git`, skip `setup-github.sh`, and run the update command from the deployment guide when they want to pull upstream.
## Reverse Proxy
Terminate TLS at the reverse proxy and forward to the local app port.
Example nginx shape:
```nginx
server {
server_name bliish.space;
location / {
proxy_pass http://127.0.0.1:3000;
proxy_set_header Host $host;
proxy_set_header X-Forwarded-Proto https;
}
}
```
## Backups
Back up both:
- the SQLite database;
- the upload directory.
The SQLite database includes users, posts, moderation records, and admin branding/settings. The upload directory includes profile images, post images, and theme songs.
For a small instance, the simplest backup is:
1. Stop the app.
2. Copy `data/bliish.sqlite`.
3. Copy `data/uploads/`.
4. Start the app.
For live backups, use SQLite's backup tooling or a filesystem snapshot that handles WAL files correctly.
```bash
sqlite3 data/bliish.sqlite ".backup 'backup/bliish.sqlite'"
```
## Restore
1. Stop the app.
2. Restore the SQLite database file.
3. Restore `data/uploads/`.
4. Check ownership and permissions.
5. Start the app.
6. Open `/home`, `/u/<handle>`, and `/account/export.json` for a smoke test.
## Operational Notes
- Keep the database and uploads out of the public repository.
- Keep `BLIISH_BASE_URL` accurate so secure cookies work behind TLS.
- Do not put uploads on a filesystem that silently drops writes.
- Monitor disk usage.
- Keep OS packages patched.
- Publish instance-specific privacy, moderation, and backup policies.

146
docs/skin-examples/black-and-grey.html Normal file
View file

@ -0,0 +1,146 @@
<!--
Original SpaceHey layout credit:
Bela
https://layouts.spacehey.com/layout?id=2719
-->
<style>
[data-skin-page] {
--skin-palette-accent: #737373;
--skin-palette-accent-text: whitesmoke;
--skin-palette-backdrop: dimgray;
--skin-palette-chrome: #000000;
--skin-palette-chrome-text: whitesmoke;
--skin-palette-link: #9ca3af;
--skin-palette-link-hover: #ffffff;
--skin-palette-muted: #b8b8b8;
--skin-palette-page: #000000;
--skin-palette-page-text: whitesmoke;
--skin-palette-surface: #000000;
--skin-palette-surface-text: whitesmoke;
--skin-frame-border: 2px solid gray;
--skin-radius-panel: 0;
background-color: dimgray;
background-image: url("https://wallpapercave.com/wp/wp2686927.jpg");
background-position: center;
background-size: contain;
cursor: url("https://cur.cursors-4u.net/cursors/cur-11/cur1054.cur"), auto;
}
[data-skin-part="shell"],
[data-skin-root],
[data-skin-root] * {
font-family: "Courier New", Courier, monospace;
}
[data-skin-root] {
color: whitesmoke;
text-shadow: none;
}
[data-skin-root] a {
color: #9ca3af;
}
[data-skin-root] a:hover {
color: white;
cursor: url("https://cur.cursors-4u.net/cursors/cur-11/cur1049.cur"), auto;
}
[data-skin-part="navigation"],
[data-skin-part="footer"],
[data-skin-part="name"],
[data-skin-part="about"],
[data-skin-part="notice"],
[data-skin-part="vibe"],
[data-skin-part="actions"],
[data-skin-part="url"],
[data-skin-part="links"],
[data-skin-part="interests"],
[data-skin-part="bio"],
[data-skin-part="blog-preview"],
[data-skin-part="wall"],
[data-skin-part="friends"] {
background: #000 !important;
border: var(--skin-frame-border) !important;
border-radius: 0 !important;
box-shadow: none !important;
}
[data-skin-part="navigation-top"],
[data-skin-part="navigation-links"] {
background: transparent !important;
text-align: center;
}
[data-skin-part="navigation"] img,
[data-skin-part="actions"] img {
filter: brightness(0) saturate(100%) invert(50%) sepia(5%) saturate(326%) hue-rotate(174deg) brightness(92%) contrast(82%);
}
[data-skin-part="navigation-links"] li:not(:last-child)::after,
[data-skin-part="footer"] li:not(:last-child)::after {
color: white;
content: "|";
}
[data-skin-part="name"] {
color: white;
font-size: 30px !important;
font-weight: 400;
padding: 5px;
text-align: center;
}
[data-skin-part="photo"] {
padding: 10px;
}
[data-skin-part="photo"] img,
[data-skin-part="photo"] .profile-placeholder,
[data-skin-part="friends"] .person-card__image,
[data-skin-part="friends"] .profile-placeholder {
border: var(--skin-frame-border);
border-radius: 0;
box-shadow: none;
}
[data-skin-part="details"],
[data-skin-part="bio-content"],
[data-skin-part="interests"] td,
[data-skin-part="wall"] .post-card,
[data-skin-part="wall"] .composer {
background: transparent !important;
color: whitesmoke;
}
[data-skin-root] .panel__heading {
background: none !important;
color: whitesmoke;
text-align: center;
}
[data-skin-part="bio"] .panel__heading,
[data-skin-part="url"] {
display: none;
}
[data-skin-root] .panel__body {
background: #000 !important;
color: whitesmoke;
}
[data-skin-part="actions"] .profile-actions__cell {
background: #000;
border-color: gray;
}
[data-skin-part="actions"] .profile-action {
color: #9ca3af;
}
[data-skin-part="wall"] .post-list {
max-height: 500px;
overflow-y: auto;
}
</style>

72
docs/skin-examples/cd-case-profile-photo.html Normal file
View file

@ -0,0 +1,72 @@
<!--
Original SpaceHey layout credit:
Valentine
https://layouts.spacehey.com/layout?id=29048
-->
<style>
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
[data-skin-part="photo"] {
--cd-case-ratio: 183 / 163;
--cd-case-width: min(calc(var(--profile-photo-size, 235px) * 1.123), 100%);
display: grid;
filter: drop-shadow(0 0 0.35rem gray);
grid-template-columns: 10.93% minmax(0, 89.07%);
margin-inline: auto;
overflow: visible;
width: var(--cd-case-width);
aspect-ratio: var(--cd-case-ratio);
}
[data-skin-part="photo"]::before {
align-self: center;
animation: spin 5s infinite linear;
aspect-ratio: 1;
background: url("https://fluorescent-lights.neocities.org/Digital-CD-Disk-Vector-Transparent-PNG.png") center / contain no-repeat;
content: "";
grid-column: 1 / 3;
grid-row: 1;
justify-self: start;
transition: translate 0.5s ease;
translate: -10.5% 0;
width: 82%;
z-index: 0;
}
[data-skin-part="photo"]:hover::before {
translate: -38% 0;
}
[data-skin-part="photo"] img,
[data-skin-part="photo"] .profile-placeholder {
border: 0;
border-radius: 0;
box-shadow: 0 0 0 2px #8a8a8a, 0 8px 18px rgba(0, 0, 0, 0.4);
grid-column: 2;
grid-row: 1;
height: 100%;
justify-self: stretch;
max-width: none;
object-fit: cover;
width: 100%;
z-index: 1;
}
[data-skin-part="photo"]::after {
background:
url("https://fluorescent-lights.neocities.org/f0rzNHe.png") center / 100% 100% no-repeat,
linear-gradient(150deg, rgba(255,255,255,0.38), rgba(255,255,255,0.12) 42%, rgba(255,255,255,0.55));
content: "";
grid-column: 1 / 3;
grid-row: 1;
height: 100%;
justify-self: stretch;
pointer-events: none;
width: 100%;
z-index: 2;
}
</style>

182
docs/skin-examples/fly-away.html Normal file
View file

@ -0,0 +1,182 @@
<!--
Original SpaceHey layout credit:
leo
https://layouts.spacehey.com/layout?id=3840
-->
<style>
@import url("https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@700&family=Roboto:wght@700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Patrick+Hand&family=Paytone+One&display=swap");
@keyframes floating {
0% { transform: translate(0, 0); }
50% { transform: translate(0, 5px); }
100% { transform: translate(0, 0); }
}
[data-skin-page] {
--skin-palette-accent: #ab76cf;
--skin-palette-accent-text: #ffffff;
--skin-palette-backdrop: #bd7ccf;
--skin-palette-chrome: rgba(171, 118, 207, 0.58);
--skin-palette-chrome-text: #ffffff;
--skin-palette-link: #ff9ce0;
--skin-palette-link-hover: #ffffff;
--skin-palette-muted: #ffd6f1;
--skin-palette-page: rgba(189, 124, 207, 0.4);
--skin-palette-page-text: #ffedf9;
--skin-palette-surface: rgba(171, 118, 207, 0.4);
--skin-palette-surface-text: #ffedf9;
background: url("https://i.gifer.com/76YS.gif") center / cover fixed;
cursor: url("https://cur.cursors-4u.net/symbols/sym-2/sym189.png"), auto;
}
[data-skin-part="shell"],
[data-skin-root],
[data-skin-root] * {
font-family: "Josefin Sans", Arial, sans-serif;
}
[data-skin-root] {
background: rgba(189, 124, 207, 0.4);
border: 2px dotted rgba(241, 190, 255, 1);
border-radius: 15px;
color: #ffedf9;
}
[data-skin-part="navigation"],
[data-skin-part="navigation-top"],
[data-skin-part="navigation-links"] {
background: transparent !important;
color: white;
font-family: "Paytone One", sans-serif;
font-size: 13px;
text-align: center;
text-shadow: 1px 1px #000;
}
[data-skin-root] a {
color: #ff9ce0;
}
[data-skin-root] a:hover {
color: white;
cursor: url("https://cur.cursors-4u.net/games/images4/gam308.png"), auto;
}
[data-skin-part="name"] {
animation: floating 3s infinite ease-in-out;
background: linear-gradient(#8870ff, #ff70de);
background-clip: text;
color: #ff70de;
font-family: "Paytone One", sans-serif;
font-size: 30px !important;
text-transform: uppercase;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
[data-skin-root] .panel,
[data-skin-part="notice"],
[data-skin-part="about"],
[data-skin-part="vibe"],
[data-skin-part="url"],
[data-skin-part="links"],
[data-skin-part="interests"] {
background-color: rgba(171, 118, 207, 0.4) !important;
border: 3px dotted rgba(218, 165, 255, 0.65) !important;
border-radius: 15px !important;
color: white;
}
[data-skin-root] .panel__heading {
background: rgba(171, 118, 207, 0.4) !important;
border: 3px dotted rgba(218, 165, 255, 0.65);
border-radius: 15px;
color: white;
text-align: center;
text-transform: lowercase;
}
[data-skin-root] .panel__body,
[data-skin-part="interests"] td,
[data-skin-part="wall"] .post-card,
[data-skin-part="wall"] .composer {
background: rgba(223, 162, 210, 0.58) !important;
color: #ffedf9;
font-weight: bold;
}
[data-skin-part="photo"] {
animation: floating 3s infinite ease-in-out;
background-image: url("https://i.pinimg.com/originals/61/ee/e5/61eee57480a9223ef1c5f40e47cd2b03.gif");
background-position: center;
background-size: cover;
border: 2px dashed rgba(255, 161, 207, 1);
box-shadow: 1px 0 10px 2px rgba(254, 120, 180, 0.46);
height: 150px;
width: 160px;
}
[data-skin-part="photo"] img,
[data-skin-part="photo"] .profile-placeholder {
opacity: 0;
}
[data-skin-part="friends"] .person-card__image,
[data-skin-part="friends"] .profile-placeholder {
animation: floating 3s infinite ease-in-out;
border: 3px dotted rgba(255, 221, 241, 1);
border-radius: 15px;
box-shadow: 1px 0 7px 2px rgba(254, 120, 180, 0.71);
}
[data-skin-part="friends"] .person-card__name {
animation: floating 3s infinite ease-in-out;
color: #ff75d1;
}
[data-skin-part="actions"] .profile-actions__cell {
background: rgba(171, 118, 207, 0.4);
border-color: rgba(255, 161, 207, 0.5);
}
[data-skin-part="actions"] .profile-action {
color: #ffedf9;
}
[data-skin-part="actions"] .profile-action .icon {
display: none;
}
[data-skin-part="actions"] .profile-actions__cell:nth-child(1) .profile-action::before {
content: "⭐";
}
[data-skin-part="actions"] .profile-actions__cell:nth-child(2) .profile-action::before {
content: "🌟";
}
[data-skin-part="actions"] .profile-actions__cell:nth-child(3) .profile-action::before {
content: "🌠";
}
[data-skin-part="actions"] .profile-actions__cell:nth-child(4) .profile-action::before {
content: "💫";
}
[data-skin-part="actions"] .profile-actions__cell:nth-child(5) .profile-action::before {
content: "✨";
}
[data-skin-part="actions"] .profile-actions__cell:nth-child(6) .profile-action::before {
content: "👾";
}
[data-skin-part="footer"] {
background-color: rgba(0, 0, 0, 0.82);
color: white;
text-decoration: underline;
text-decoration-style: dotted;
}
</style>

99
docs/skin-examples/glossy-dark.html Normal file
View file

@ -0,0 +1,99 @@
<!--
Original SpaceHey layout credit:
mori
https://layouts.spacehey.com/layout?id=24806
-->
<style>
[data-skin-page] {
--skin-palette-accent: #d10000;
--skin-palette-accent-text: #ffffff;
--skin-palette-backdrop: #000000;
--skin-palette-chrome: #111111;
--skin-palette-chrome-text: #ffffff;
--skin-palette-link: #ff2a2a;
--skin-palette-link-hover: #ffffff;
--skin-palette-muted: #bcbcbc;
--skin-palette-page: #000000;
--skin-palette-page-text: #ffffff;
--skin-palette-surface: #050505;
--skin-palette-surface-text: #ffffff;
--skin-gloss: linear-gradient(#535353 0%, #000 60%);
background: #000;
}
[data-skin-root],
[data-skin-root] * {
font-family: Arial, Verdana, sans-serif;
text-shadow: 2px 1px 0 #000;
}
[data-skin-root] {
color: #fff;
}
[data-skin-root] a {
color: #f00;
}
[data-skin-root] a:hover {
color: #fff;
text-decoration: none;
}
[data-skin-part="navigation-top"],
[data-skin-part="navigation-links"],
[data-skin-root] .panel,
[data-skin-part="notice"],
[data-skin-part="url"],
[data-skin-part="about"],
[data-skin-part="vibe"],
[data-skin-part="links"],
[data-skin-part="interests"],
[data-skin-part="footer"] {
background: var(--skin-gloss) !important;
border: 1px solid #808080 !important;
border-radius: 5px 5px 0 0 !important;
box-shadow: inset 0 0 0 1px #808080, inset 0 0 10px 2px #535353, #000 1px 1px 10px 2px !important;
}
[data-skin-root] .panel__heading {
background: var(--skin-gloss) !important;
border: 0;
border-bottom: 1px solid #808080;
border-radius: 50px 0;
color: #fff;
padding-left: 10px !important;
}
[data-skin-root] .panel__body,
[data-skin-part="interests"] td,
[data-skin-part="wall"] .post-card,
[data-skin-part="wall"] .composer {
background: linear-gradient(#535353 0%, #000 20%) !important;
color: #fff;
}
[data-skin-part="photo"] img,
[data-skin-part="photo"] .profile-placeholder,
[data-skin-part="friends"] .person-card__image,
[data-skin-part="friends"] .profile-placeholder {
border: 2px ridge #555;
border-radius: 0;
box-shadow: none;
}
[data-skin-part="actions"] .profile-actions__cell {
background: linear-gradient(#535353 0%, #000 20%);
border-color: #555;
}
[data-skin-part="actions"] .profile-action {
color: #fff;
}
[data-skin-part="url"] {
color: #fff;
padding: 5px;
}
</style>

148
docs/skin-examples/hello-kitty.html Normal file
View file

@ -0,0 +1,148 @@
<!--
Original SpaceHey layout credit:
madnes
https://layouts.spacehey.com/layout?id=19476
-->
<style>
[data-skin-page] {
--skin-palette-accent: #ff0095;
--skin-palette-accent-text: #ffffff;
--skin-palette-backdrop: #520030;
--skin-palette-chrome: #8e0d3e;
--skin-palette-chrome-text: #ffffff;
--skin-palette-link: #ff8ac7;
--skin-palette-link-hover: #ffffff;
--skin-palette-muted: #ffb6df;
--skin-palette-page: #520030;
--skin-palette-page-text: #ff0095;
--skin-palette-surface: #520030;
--skin-palette-surface-text: #ff0095;
background-color: #000;
background-image: url("https://i.pinimg.com/originals/98/f5/eb/98f5eb6f350c44aef0ac124359482557.gif");
background-position: center;
background-repeat: repeat;
cursor: url("https://cur.cursors-4u.net/anime/ani-1/ani195.ani"), url("https://cur.cursors-4u.net/anime/ani-1/ani195.png"), auto;
}
[data-skin-root] {
background-color: #520030;
background-image: url("https://i.pinimg.com/originals/49/6a/88/496a887f7a12a774b7f5ca4a2bfe6913.gif");
background-position: center;
background-repeat: repeat;
color: #ff0095;
cursor: url("https://cur.cursors-4u.net/anime/ani-1/ani195.ani"), url("https://cur.cursors-4u.net/anime/ani-1/ani195.png"), auto;
text-shadow: 0 0 9px #000;
}
[data-skin-part="navigation-top"],
[data-skin-part="footer"] {
background-color: #8e0d3e !important;
background-image: url("https://i.pinimg.com/originals/49/6a/88/496a887f7a12a774b7f5ca4a2bfe6913.gif") !important;
background-position: center !important;
background-repeat: repeat !important;
}
[data-skin-root] .panel,
[data-skin-part="notice"],
[data-skin-part="about"],
[data-skin-part="vibe"],
[data-skin-part="url"],
[data-skin-part="links"],
[data-skin-part="interests"] {
background: #520030 !important;
border: 6px double #ff0095 !important;
border-radius: 0 !important;
color: #ff0095;
text-shadow: 0 0 9px #000;
}
[data-skin-root] .panel__heading {
background: #8e0d3e !important;
color: white;
font-size: 0;
text-align: center;
}
[data-skin-part="actions"] .panel__heading::before {
content: "say hi! ☆";
font-size: 0.8rem;
font-weight: bold;
}
[data-skin-part="bio"] .panel__heading::before {
content: "about me! ☆";
font-size: 0.8rem;
font-weight: bold;
}
[data-skin-part="interests"] .panel__heading::before,
[data-skin-part="links"] .panel__heading::before {
content: "my interests & my socials! ☆";
font-size: 0.8rem;
font-weight: bold;
}
[data-skin-part="friends"] .panel__heading::before {
content: "my friends! ☆";
font-size: 0.8rem;
font-weight: bold;
}
[data-skin-root] .panel__body,
[data-skin-part="interests"] td,
[data-skin-part="wall"] .post-card,
[data-skin-part="wall"] .composer {
background: #520030 !important;
color: #ff0095;
}
[data-skin-root] a {
color: white;
}
[data-skin-part="name"]::after {
background: url("https://www.myspacegens.com/images/online_now/128.gif") center / contain no-repeat;
content: "";
display: inline-block;
height: 24px;
margin-left: 8px;
vertical-align: middle;
width: 60px;
}
[data-skin-part="friends"] .person-card__image,
[data-skin-part="friends"] .profile-placeholder {
border: 4px double #ff0095;
border-radius: 15px;
}
[data-skin-part="photo"] img,
[data-skin-part="photo"] .profile-placeholder {
border: 0;
border-radius: 0;
box-shadow: none;
}
[data-skin-part="actions"] .profile-actions__cell {
background: #520030;
border-color: #ff0095;
}
[data-skin-part="actions"] .profile-action {
color: white;
}
[data-skin-part="actions"] .profile-action .icon {
display: none;
}
[data-skin-part="actions"] .profile-action::before {
content: "☆";
}
[data-skin-part="footer"] {
border-radius: 15px;
color: white;
}
</style>

108
docs/skin-examples/matrix.html Normal file
View file

@ -0,0 +1,108 @@
<!--
Original SpaceHey layout credit:
p0libius
https://layouts.spacehey.com/layout?id=1430
-->
<style>
[data-skin-page] {
--skin-palette-accent: #00ff00;
--skin-palette-accent-text: #000000;
--skin-palette-backdrop: #000000;
--skin-palette-chrome: #000000;
--skin-palette-chrome-text: #00ff00;
--skin-palette-link: #00ff00;
--skin-palette-link-hover: #ffffff;
--skin-palette-muted: #00aa00;
--skin-palette-page: #000000;
--skin-palette-page-text: #00ff00;
--skin-palette-surface: #000000;
--skin-palette-surface-text: #00ff00;
background-color: #000;
background-image:
linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.28) 50%),
radial-gradient(circle at center, rgba(0,255,0,0.08), transparent 62%);
background-size: 100% 2px, cover;
}
[data-skin-part="shell"],
[data-skin-root],
[data-skin-root] * {
font-family: "Courier New", Courier, monospace;
}
[data-skin-part="shell"],
[data-skin-root] {
color: #00ff00;
}
[data-skin-root] img,
[data-skin-root] .profile-placeholder {
filter: sepia(100%) hue-rotate(45deg) saturate(5);
}
[data-skin-part="navigation"],
[data-skin-part="navigation-top"],
[data-skin-part="navigation-links"],
[data-skin-part="footer"],
[data-skin-root] .panel,
[data-skin-part="notice"],
[data-skin-part="url"],
[data-skin-part="actions"],
[data-skin-part="about"],
[data-skin-part="vibe"],
[data-skin-part="links"],
[data-skin-part="interests"] {
background: #000 !important;
border: 2px dotted #00ff00 !important;
border-radius: 0 !important;
box-shadow: none !important;
color: #00ff00 !important;
}
[data-skin-part="navigation-links"],
[data-skin-root] .panel__heading,
[data-skin-part="url"],
[data-skin-part="notice"] {
border-style: solid !important;
}
[data-skin-root] .panel__heading,
[data-skin-root] .panel__body,
[data-skin-part="interests"] td,
[data-skin-part="wall"] .post-card,
[data-skin-part="wall"] .composer {
background: #000 !important;
color: #00ff00 !important;
}
[data-skin-root] a {
color: #00ff00 !important;
text-decoration: underline !important;
}
[data-skin-root] a:hover {
background: #00ff00;
color: #000 !important;
}
[data-skin-part="name"] {
color: #00ff00;
font-size: 2em;
}
[data-skin-part="photo"] img,
[data-skin-part="photo"] .profile-placeholder {
border: 1px solid #00ff00;
border-radius: 0;
}
[data-skin-part="actions"] .profile-actions__cell {
background: #000;
border-color: #00ff00;
}
[data-skin-part="actions"] .profile-action {
color: #00ff00;
}
</style>

131
docs/skin-examples/old-school-computer-bezel.html Normal file
View file

@ -0,0 +1,131 @@
<!--
Original SpaceHey layout credit:
Cory
https://layouts.spacehey.com/layout?id=133
-->
<style>
@import url("https://fonts.googleapis.com/css2?family=VT323&display=swap");
@keyframes flicker {
0% { opacity: 0.96; }
50% { opacity: 0.88; }
100% { opacity: 0.98; }
}
@keyframes textShadow {
0% { text-shadow: 0.4px 0 1px rgba(0,30,255,0.5), -0.4px 0 1px rgba(255,0,80,0.3), 0 0 3px #caffd8; }
50% { text-shadow: 2px 0 1px rgba(0,30,255,0.5), -2px 0 1px rgba(255,0,80,0.3), 0 0 6px #caffd8; }
100% { text-shadow: 0.8px 0 1px rgba(0,30,255,0.5), -0.8px 0 1px rgba(255,0,80,0.3), 0 0 3px #caffd8; }
}
[data-skin-page] {
--skin-palette-accent: #b7ffd0;
--skin-palette-accent-text: #06130a;
--skin-palette-backdrop: #050505;
--skin-palette-chrome: #102016;
--skin-palette-chrome-text: #d8ffe3;
--skin-palette-link: #d8ffe3;
--skin-palette-link-hover: #ffffff;
--skin-palette-muted: #9ad7ad;
--skin-palette-page: #07120b;
--skin-palette-page-text: #d8ffe3;
--skin-palette-surface: #07120b;
--skin-palette-surface-text: #d8ffe3;
background:
radial-gradient(circle at center, rgba(255,255,255,0.08), transparent 46%),
linear-gradient(#050505, #111);
}
[data-skin-part="shell"],
[data-skin-root],
[data-skin-root] * {
font-family: "VT323", monospace !important;
}
[data-skin-root] {
animation: flicker 0.18s infinite, textShadow 1.6s infinite;
background:
linear-gradient(rgba(18,16,16,0) 50%, rgba(0,0,0,0.25) 50%),
linear-gradient(90deg, rgba(255,0,0,0.05), rgba(0,255,0,0.02), rgba(0,0,255,0.05)),
radial-gradient(circle at center, #102015 0%, #07120b 62%, #020503 100%);
background-size: 100% 2px, 3px 100%, cover;
border: 3px solid #b7ffd0;
border-radius: 22px;
box-shadow: 0 0 0 12px #111, 0 0 0 26px #2b2b2b, inset 0 0 55px #000;
color: #d8ffe3;
filter: grayscale(100%) sepia(100%) hue-rotate(75deg);
margin-block: 36px;
padding: clamp(18px, 4vw, 48px);
}
[data-skin-part="navigation"],
[data-skin-part="navigation-top"],
[data-skin-part="navigation-links"],
[data-skin-part="footer"] {
background: none !important;
color: #fff !important;
}
[data-skin-root] a {
background: rgba(255,255,255,0.22);
color: #fff !important;
text-decoration: none;
}
[data-skin-root] a:hover {
background: #ccc;
color: #000 !important;
}
[data-skin-root] .panel,
[data-skin-part="notice"],
[data-skin-part="vibe"],
[data-skin-part="url"],
[data-skin-part="links"],
[data-skin-part="interests"] {
background: transparent !important;
border: 1px solid #b7ffd0 !important;
border-radius: 0 !important;
box-shadow: none !important;
color: #d8ffe3 !important;
}
[data-skin-root] .panel__heading,
[data-skin-root] .panel__body,
[data-skin-part="wall"] .post-card,
[data-skin-part="wall"] .composer,
[data-skin-part="interests"] td {
background: transparent !important;
color: #d8ffe3 !important;
}
[data-skin-part="about"] {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
[data-skin-part="photo"] {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 0;
}
[data-skin-part="photo"] img,
[data-skin-part="photo"] .profile-placeholder {
border: 1px solid #b7ffd0;
border-radius: 0;
box-shadow: 0 0 18px rgba(183,255,208,0.55);
}
[data-skin-part="actions"] .profile-actions__cell {
background: transparent;
border-color: #6aa578;
}
[data-skin-part="actions"] .profile-action {
color: #d8ffe3;
}
</style>

236
docs/skin-examples/pink-internetcore-anime.html Normal file
View file

@ -0,0 +1,236 @@
<!--
Original SpaceHey layout credit:
sybilz layouts
https://layouts.spacehey.com/layout?id=24152
-->
<div class="skin-decoration skin-decoration--pink">
<img src="https://64.media.tumblr.com/5019b04d38d5c58b8d826eb8b9f22f39/34275822159c4776-88/s400x600/0f21dc869dad6bd910791ee4a685be5756e5af62.pnj" alt="" loading="lazy">
<img src="https://64.media.tumblr.com/21c6ec64ae5698813eec48776041a0d6/0a4801df6aa0db54-79/s400x600/55580dda2885b1bf53aa7bb10a279ee6f7dee8fe.gifv" alt="" loading="lazy">
<img src="https://64.media.tumblr.com/ce6d953f955627b6683991ad455f49b0/26d81e5c31b80d32-36/s400x600/ae349716fd562d1e946265ed716f2f9ccc71398b.gifv" alt="" loading="lazy">
<img src="https://64.media.tumblr.com/7e9eddf21a9a0699087ca295d3d67621/4467b007948c8ded-6c/s540x810/25bd4d3faca51ca948aa88b2ad68027f78de0eb4.gifv" alt="" loading="lazy">
<img src="https://i.imgur.com/hyrao2u.png" alt="" loading="lazy">
<img src="https://i.imgur.com/hyrao2u.png" alt="" loading="lazy">
<img src="https://i.imgur.com/hyrao2u.png" alt="" loading="lazy">
<img src="https://i.imgur.com/hyrao2u.png" alt="" loading="lazy">
<img src="https://i.imgur.com/hyrao2u.png" alt="" loading="lazy">
<img src="https://i.imgur.com/hyrao2u.png" alt="" loading="lazy">
<img src="https://64.media.tumblr.com/6cbf50d286f93d4b96856ba92dd77981/0029a9e9ab07cc70-9f/s250x400/4a0860b62ec1b04ad05b0992b722741a90636385.gifv" alt="" loading="lazy">
<img src="https://64.media.tumblr.com/9e115c51c30ed1e8b665580227028149/cc1839e6baf4e1c1-97/s75x75_c1/0b35f44eda9d308092e4293f251a8a4e34ac2f6d.gifv" alt="" loading="lazy">
<img src="https://64.media.tumblr.com/f173b196e3889b1d9ad6a21746e205d8/29429a2fed66c7ab-c7/s75x75_c1/2ca07f7d05d9b4dafe9b6aa678ec53e8f9e51f5d.gifv" alt="" loading="lazy">
</div>
<style>
@keyframes float {
0% { transform: translate(0, 0); }
50% { transform: translate(0, 8px); }
100% { transform: translate(0, 0); }
}
[data-skin-page] {
--skin-palette-accent: #ed7dac;
--skin-palette-accent-text: #ffffff;
--skin-palette-backdrop: #f9d5e4;
--skin-palette-chrome: #ed7dac;
--skin-palette-chrome-text: #ffffff;
--skin-palette-link: #d065a0;
--skin-palette-link-hover: #ffffff;
--skin-palette-muted: #8b8590;
--skin-palette-page: rgba(252,238,244,0.83);
--skin-palette-page-text: #cf3878;
--skin-palette-surface: #fff9fb;
--skin-palette-surface-text: #cf3878;
background:
linear-gradient(rgba(82,15,15,0.2) 50%, rgba(0,0,0,0) 50%),
url("https://i.pinimg.com/564x/d3/87/38/d38738baf9d7ded484afe11d9ff871b8.jpg");
background-size: 100% 2px, 1000px;
cursor: url("https://64.media.tumblr.com/944a0abc7ef096acd29ddf29e1894969/25c2207280490ab6-da/s75x75_c1/e4bda17eefb34dcb8cf7f8a485ab6ab37b8dc869.gifv"), url("https://64.media.tumblr.com/d4a50c1b4d90a1eccf75ccca47199961/b261dfe74ba3f797-4e/s250x250_c1/b8ad33e140c516f3c0960a2572806ef066ef50d0.gifv") 31 31, auto;
}
[data-skin-root],
[data-skin-root] * {
cursor: url("https://64.media.tumblr.com/944a0abc7ef096acd29ddf29e1894969/25c2207280490ab6-da/s75x75_c1/e4bda17eefb34dcb8cf7f8a485ab6ab37b8dc869.gifv"), url("https://64.media.tumblr.com/d4a50c1b4d90a1eccf75ccca47199961/b261dfe74ba3f797-4e/s250x250_c1/b8ad33e140c516f3c0960a2572806ef066ef50d0.gifv") 31 31, auto;
font-family: monospace;
}
[data-skin-root] {
animation: float 3s infinite ease-in-out;
background: rgba(252,238,244,0.83);
border: 2px solid #ff9fc9;
box-shadow: 0 0 6px #a14b74;
color: #cf3878;
}
[data-skin-part="navigation-links"] {
background: #ed7dac !important;
border: 3px solid #d76785;
box-shadow: 0 0 10px #e24cb0;
}
[data-skin-part="navigation-links"]::after {
background: url("https://64.media.tumblr.com/062574a6ce949afe2599ae7d9855957f/29429a2fed66c7ab-92/s75x75_c1/5434fc96e2df57ec30b76eb21a77afc2748f28a0.gifv") center / contain no-repeat;
content: "";
display: inline-block;
height: 32px;
margin-left: 8px;
vertical-align: middle;
width: 32px;
}
[data-skin-part="name"] {
color: #ff9cc1;
font-family: fangsong, serif;
font-size: 2.5em !important;
text-shadow: 2px 2px 0.5px #ff57a2;
}
[data-skin-part="name"]::after {
background: url("https://64.media.tumblr.com/40747ec8e4574a2a4b1f9f062c30b056/088c2c2e065a2eb7-68/s75x75_c1/c882d1d2964d9f8457ddaab5274e1e7321308e4c.gifv") center / contain no-repeat;
content: "";
display: inline-block;
height: 28px;
margin-left: 8px;
vertical-align: middle;
width: 28px;
}
[data-skin-root] a {
color: #d065a0;
text-decoration: none;
}
[data-skin-root] strong,
[data-skin-root] b {
color: #d35884;
}
[data-skin-root] .panel,
[data-skin-part="notice"],
[data-skin-part="about"],
[data-skin-part="vibe"],
[data-skin-part="url"],
[data-skin-part="links"],
[data-skin-part="interests"] {
background: #ffe3f2 !important;
border: 2px solid #e878a7 !important;
border-radius: 0 !important;
box-shadow: #ffc0db 5px 5px !important;
}
[data-skin-root] .panel__heading {
background: #ffabce !important;
border: inset #ff8ad5;
box-shadow: 0 0 6px #e388bd;
color: #fff;
text-align: center;
}
[data-skin-part="bio"] .panel__heading::before {
background: url("https://64.media.tumblr.com/2a71dcdaf04250820581bc8c3bc90cac/d538a4a8786aa9cb-6a/s75x75_c1/2d7ea5dd881917805257b97bc4333b4def4a2828.gifv") center / contain no-repeat;
content: "";
display: inline-block;
height: 28px;
margin-right: 6px;
vertical-align: middle;
width: 28px;
}
[data-skin-root] .panel__body {
background: #fff9fb !important;
border: 3px inset #ffaad7;
box-shadow: 5px 8px #ffd1e3 !important;
color: #cf3878;
}
[data-skin-part="interests"] td {
background: rgba(255,165,188,0.55) !important;
border-bottom: 1px dashed #fff;
box-shadow: 2px 5px #f38bba;
color: #cf3878;
}
[data-skin-part="photo"] img,
[data-skin-part="photo"] .profile-placeholder {
border: 5px double #ffd6df;
box-shadow: 0 0 15px #ecb7d5;
}
[data-skin-part="friends"] .person-card__image,
[data-skin-part="friends"] .profile-placeholder {
filter: grayscale(100%);
}
[data-skin-part="actions"] .profile-actions__cell {
background: rgba(255,222,238,0.45);
border-color: #ffb3c0;
}
[data-skin-part="actions"] .profile-action {
color: #cf3878;
}
[data-skin-part="actions"] .profile-action .icon {
display: none;
}
[data-skin-part="actions"] .profile-action::before {
background: var(--skin-action-icon) center / contain no-repeat;
content: "";
display: inline-block;
flex: 0 0 24px;
height: 24px;
width: 24px;
}
[data-skin-part="actions"] .profile-actions__cell:nth-child(1) .profile-action {
--skin-action-icon: url("https://64.media.tumblr.com/7708f868dc26be83f356994b059574dc/947f5e53c6e30b8e-c6/s75x75_c1/54a1d19d41346daa38f7022072bf893393e1d48f.gifv");
}
[data-skin-part="actions"] .profile-actions__cell:nth-child(2) .profile-action {
--skin-action-icon: url("https://64.media.tumblr.com/8f2873c1bf4abe15f130cb90aab5b880/de16010b85cc64d8-dd/s75x75_c1/58952615f0cb65279bd5f1aeb20a44f41141db94.gifv");
}
[data-skin-part="actions"] .profile-actions__cell:nth-child(3) .profile-action {
--skin-action-icon: url("https://64.media.tumblr.com/2ddf249c6a28d23959c782e7056da23b/e386af749187d014-61/s75x75_c1/37b07bfef349d68ff5a76ca29f651e50082a63eb.gifv");
}
[data-skin-part="actions"] .profile-actions__cell:nth-child(4) .profile-action {
--skin-action-icon: url("https://64.media.tumblr.com/4df60e412e2774d70f3badefc5ee0475/50a86d7dbc813001-5f/s75x75_c1/b12f370a4052ba27029bd51144e2fb899775cdf0.gifv");
}
[data-skin-part="actions"] .profile-actions__cell:nth-child(5) .profile-action {
--skin-action-icon: url("https://64.media.tumblr.com/02c88dcb6a4fbe7e9be7dd856003bcbf/50a86d7dbc813001-90/s75x75_c1/2de77306f1d926519f2eb9cf93fe8b5108a59f41.gifv");
}
[data-skin-part="actions"] .profile-actions__cell:nth-child(6) .profile-action {
--skin-action-icon: url("https://64.media.tumblr.com/11c565ec5a80aed4229fd85cad87ce24/457ad034c51ea48d-40/s75x75_c1/537e7763ce40d3db686a7f0ba373728a660b516d.gifv");
}
[data-skin-part="actions"]::after {
background: url("https://64.media.tumblr.com/b3e9135ccd4a7a4fc27a7499ab34e113/9a6747dfe0b3d955-1e/s540x810/30eb23c5970efedc37679e7a1336a70f92f391b5.gifv") center / contain no-repeat;
content: "";
display: block;
height: 30px;
margin-top: 6px;
}
[data-skin-part="custom-html"] .skin-decoration {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
}
[data-skin-part="custom-html"] .skin-decoration img {
image-rendering: auto;
max-height: 130px;
max-width: min(100%, 180px);
object-fit: contain;
}
[data-skin-part="footer"] {
background: url("https://64.media.tumblr.com/4ef363843eadaf4d22e813f4377586d0/5bbc5cd08fbcae95-9b/s500x750/4392091c5c59bb20616932eb6156d499f9037cca.gifv") center / 800px #ffc4d3;
background-blend-mode: soft-light;
}
</style>

235
docs/skin-examples/red-web-glitchcore.html Normal file
View file

@ -0,0 +1,235 @@
<!--
Original SpaceHey layout credit:
sybilz layouts
https://layouts.spacehey.com/layout?id=23505
-->
<div class="skin-decoration skin-decoration--red-web">
<img src="https://64.media.tumblr.com/4b224a9a145ed362e5dd61c27c5d243d/9767703b546d4cc3-26/s500x750/1a207d3b16765d65e423734ff14bdc519964dc96.gifv" alt="" loading="lazy">
<img src="https://64.media.tumblr.com/6c47f64528ef7d64ca593b7623009328/3d23c3979b767a92-48/s500x750/43bb4f0d29eba76f085fc5ac77181e46c78f99af.gifv" alt="" loading="lazy">
<img src="https://64.media.tumblr.com/6f7c4e869b8d39b73a2200a33506630d/8c6c9c67e7bd719d-e9/s400x600/dfb892f65b4f100408eb8cbe76a74d428d3e5631.gifv" alt="" loading="lazy">
<img src="https://i.imgur.com/3bkohfc.png" alt="" loading="lazy">
<img src="https://i.imgur.com/4R6N5o9.png" alt="" loading="lazy">
<img src="https://64.media.tumblr.com/6cbf50d286f93d4b96856ba92dd77981/0029a9e9ab07cc70-9f/s250x400/4a0860b62ec1b04ad05b0992b722741a90636385.gifv" alt="" loading="lazy">
<img src="https://64.media.tumblr.com/9514fdd886461875fe2f87dee8fa3adf/7c737a4fb030b56b-8d/s75x75_c1/c81eaeebef1cb9b98afdb09bcacfc67d4d98ac37.gifv" alt="" loading="lazy">
<img src="https://64.media.tumblr.com/897c81c7be197898e44332b786946c0d/4d9ab15404ddfee1-cd/s75x75_c1/3f17315502213543bc2f847738eb65c5960973cb.gifv" alt="" loading="lazy">
</div>
<style>
@keyframes float {
0% { transform: translate(0, 0); }
50% { transform: translate(0, 8px); }
100% { transform: translate(0, 0); }
}
[data-skin-page] {
--skin-palette-accent: #bc1419;
--skin-palette-accent-text: #000000;
--skin-palette-backdrop: #1a0000;
--skin-palette-chrome: #000000;
--skin-palette-chrome-text: #af3838;
--skin-palette-link: #648998;
--skin-palette-link-hover: #ff7777;
--skin-palette-muted: #72878c;
--skin-palette-page: rgba(0,0,0,0.49);
--skin-palette-page-text: #ff6868;
--skin-palette-surface: rgba(0,0,0,0.22);
--skin-palette-surface-text: #72878c;
background:
linear-gradient(rgba(82,15,15,0.48) 50%, rgba(0,0,0,0) 50%),
url("https://i.pinimg.com/originals/b7/9a/f5/b79af5850ce890e052487cc88ab91251.gif");
background-size: 100% 2px, auto;
cursor: url("https://64.media.tumblr.com/d4a50c1b4d90a1eccf75ccca47199961/b261dfe74ba3f797-4e/s250x250_c1/b8ad33e140c516f3c0960a2572806ef066ef50d0.gifv") 31 31, auto;
}
[data-skin-root],
[data-skin-root] * {
cursor: url("https://64.media.tumblr.com/d4a50c1b4d90a1eccf75ccca47199961/b261dfe74ba3f797-4e/s250x250_c1/b8ad33e140c516f3c0960a2572806ef066ef50d0.gifv") 31 31, auto;
font-family: monospace;
}
[data-skin-root] {
animation: float 3s infinite ease-in-out;
background: rgba(0,0,0,0.18);
border: 3px solid #bc1419;
color: #ff6868;
}
[data-skin-part="shell"] {
background:
linear-gradient(rgba(0,0,0,0.24), rgba(0,0,0,0.24)),
url("https://i.pinimg.com/originals/b7/9a/f5/b79af5850ce890e052487cc88ab91251.gif") center / auto repeat !important;
}
[data-skin-part="content"] {
background: rgba(0,0,0,0.16) !important;
}
[data-skin-part="navigation-top"] {
background: url("https://i.pinimg.com/originals/82/cb/ec/82cbecb96f2cc2330b20867cbda1b4f5.gif") center / cover !important;
}
[data-skin-part="navigation-links"] {
background: #000 !important;
}
[data-skin-part="navigation-links"] a {
color: #af3838;
}
[data-skin-part="name"] {
color: #ff7777;
font-family: fangsong, serif;
font-size: 2.5em !important;
text-shadow: 2px 2px 0.5px #ff0000;
}
[data-skin-part="name"]::after {
background: url("https://64.media.tumblr.com/bf47d42e5ae52f4c49497e3782ca9c12/005dbf061fabc0c8-6d/s250x250_c1/8807bd70d376c90b1309c6464833e9eb0fa6d238.gifv") center / contain no-repeat;
content: "";
display: inline-block;
height: 28px;
margin-left: 8px;
vertical-align: middle;
width: 28px;
}
[data-skin-root] a {
color: #648998;
text-decoration: none;
}
[data-skin-root] b,
[data-skin-root] strong {
color: #940000;
}
[data-skin-root] .panel,
[data-skin-part="notice"],
[data-skin-part="about"],
[data-skin-part="vibe"],
[data-skin-part="url"],
[data-skin-part="links"],
[data-skin-part="interests"] {
background:
linear-gradient(
180deg,
rgba(18,0,0,0.22) 0%,
rgba(18,0,0,0.14) 58%,
rgba(18,0,0,0.08) 100%
) !important;
border: 9px double #000 !important;
border-radius: 0 !important;
}
[data-skin-root] .panel__heading {
background: rgba(0,0,0,0.7) !important;
border: inset #921d1d;
box-shadow: 4px 5px #7b0505;
color: #72878c;
text-align: center;
}
[data-skin-root] .panel__body {
background:
linear-gradient(
180deg,
rgba(0,0,0,0.18) 0%,
rgba(0,0,0,0.1) 52%,
rgba(0,0,0,0.04) 100%
) !important;
border: 6px double #000;
box-shadow: 5px 8px rgba(186,0,0,0.24) !important;
color: #72878c;
}
[data-skin-part="interests"] td {
background: rgba(118,0,8,0.55) !important;
border-bottom: 1px dashed #b71414;
box-shadow: 2px 5px #9a1010;
}
[data-skin-part="photo"] img,
[data-skin-part="photo"] .profile-placeholder {
border: 5px double #831919;
box-shadow: 0 0 15px #ff0707;
}
[data-skin-part="friends"] .person-card__image,
[data-skin-part="friends"] .profile-placeholder {
filter: grayscale(100%);
}
[data-skin-part="actions"] .profile-actions__cell {
background: rgba(255,8,8,0.24);
border-color: #122945;
}
[data-skin-part="actions"] .profile-action {
color: #72878c;
}
[data-skin-part="actions"] .profile-action .icon {
display: none;
}
[data-skin-part="actions"] .profile-action::before {
background: var(--skin-action-icon) center / contain no-repeat;
content: "";
display: inline-block;
flex: 0 0 24px;
height: 24px;
width: 24px;
}
[data-skin-part="actions"] .profile-actions__cell:nth-child(1) .profile-action {
--skin-action-icon: url("https://64.media.tumblr.com/39d12f494b1d12c0418c3376a47621fe/3fe4c2706e5d6a04-4e/s75x75_c1/db3dee7f8bdc11d1493dbd719b115b8eb0e71af4.gifv");
}
[data-skin-part="actions"] .profile-actions__cell:nth-child(2) .profile-action {
--skin-action-icon: url("https://64.media.tumblr.com/ec41db978bff21c52c34f9fa50fbea75/a8a378b393f2415c-b4/s75x75_c1/034c261eeb9e5939039abd7cd6f2808721654930.gifv");
}
[data-skin-part="actions"] .profile-actions__cell:nth-child(3) .profile-action {
--skin-action-icon: url("https://64.media.tumblr.com/cdb1a062c5b241ff54bda869be6b8fda/072f93d78594d9a6-ce/s75x75_c1/cd1f762c89a975fe5d6c1379a4812f15d8e03da8.gifv");
}
[data-skin-part="actions"] .profile-actions__cell:nth-child(4) .profile-action {
--skin-action-icon: url("https://64.media.tumblr.com/39d12f494b1d12c0418c3376a47621fe/3fe4c2706e5d6a04-4e/s75x75_c1/db3dee7f8bdc11d1493dbd719b115b8eb0e71af4.gifv");
}
[data-skin-part="actions"] .profile-actions__cell:nth-child(5) .profile-action {
--skin-action-icon: url("https://64.media.tumblr.com/4ebc06a9d6e50fffe3262071f5bf18b5/3fe4c2706e5d6a04-18/s75x75_c1/1c66b430dd5c44ebb37e1856f6910b93a7ce8948.gifv");
}
[data-skin-part="actions"] .profile-actions__cell:nth-child(6) .profile-action {
--skin-action-icon: url("https://64.media.tumblr.com/cdb1a062c5b241ff54bda869be6b8fda/072f93d78594d9a6-ce/s75x75_c1/cd1f762c89a975fe5d6c1379a4812f15d8e03da8.gifv");
}
[data-skin-part="actions"]::after {
background: url("https://64.media.tumblr.com/231810d2b14bb8cbd0a3f717f3a3df3e/b2a4e94659fae40e-1d/s640x960/3e5e8d98a17f8328077e39ff55b23fd600ca8ae1.gifv") center / contain no-repeat;
content: "";
display: block;
height: 30px;
margin-top: 6px;
}
[data-skin-part="custom-html"] .skin-decoration {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
}
[data-skin-part="custom-html"] .skin-decoration img {
max-height: 150px;
max-width: min(100%, 180px);
object-fit: contain;
}
[data-skin-part="footer"] {
background: url("https://i.pinimg.com/originals/91/fb/57/91fb5704a5c98a82f84c184d80650154.gif") center / auto #59001e;
background-blend-mode: soft-light;
}
</style>

18
docs/skin-examples/round-profile-photo.html Normal file
View file

@ -0,0 +1,18 @@
<!--
Original SpaceHey layout credit:
fini hoover :3
https://layouts.spacehey.com/layout?id=31074
-->
<style>
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(0deg); }
}
[data-skin-part="photo"] img,
[data-skin-part="photo"] .profile-placeholder {
animation: spin 7s infinite linear;
border-radius: 50%;
}
</style>

147
docs/skin-examples/scenecore-emo-layout.html Normal file
View file

@ -0,0 +1,147 @@
<!--
Original SpaceHey layout credit:
TheJasmineSixx / LunaGloomyCore
https://layouts.spacehey.com/layout?id=611
-->
<style>
@import url("https://fonts.googleapis.com/css2?family=Potta+One&display=swap");
@keyframes nineties-bounce {
0% { transform: translateY(0); }
50% { transform: translateY(4px); }
100% { transform: translateY(0); }
}
[data-skin-page] {
--skin-palette-accent: #c50576;
--skin-palette-accent-text: #ffffff;
--skin-palette-backdrop: #000000;
--skin-palette-chrome: #000000;
--skin-palette-chrome-text: #00ffef;
--skin-palette-link: #ffffff;
--skin-palette-link-hover: turquoise;
--skin-palette-muted: #ffd1dc;
--skin-palette-page: #000000;
--skin-palette-page-text: #00ffef;
--skin-palette-surface: #000000;
--skin-palette-surface-text: #00ffef;
background: url("https://64.media.tumblr.com/fd9dea9bd9c3d403dff1ac61caca1091/tumblr_orpi2cL3QU1wpzpibo1_400.gifv") center / auto;
}
[data-skin-part="shell"],
[data-skin-root],
[data-skin-root] * {
font-family: "Potta One", system-ui, sans-serif;
}
[data-skin-root] {
background-image: url("https://wallpapercave.com/wp/wp7153946.jpg");
background-repeat: repeat;
border: 12px solid #000;
border-radius: 14px;
color: #00ffef;
text-shadow: 1px 1px 2px #000, 0 0 25px #000, 0 0 3px #000;
}
[data-skin-part="navigation"] {
background-image: url("https://64.media.tumblr.com/b305a18f19862af6acf46fdad8949649/b5987e3961527536-94/s2048x3072/a25f22fd8a7d5c893f8edb36aab4fdc807234922.gif") !important;
border-radius: 12px;
}
[data-skin-part="navigation-top"] {
background: transparent !important;
}
[data-skin-part="navigation-links"] {
background: rgba(0,0,0,0.3) !important;
}
[data-skin-part="name"] {
color: turquoise;
text-shadow: 2px 2px 3px #ffd1dc, 0 0 25px #ffd1dc, 0 0 5px #000;
}
[data-skin-root] a {
color: white;
}
[data-skin-root] .panel,
[data-skin-part="notice"],
[data-skin-part="vibe"],
[data-skin-part="url"],
[data-skin-part="links"],
[data-skin-part="interests"] {
background: #000 !important;
border: 4px outset #ffd1dc !important;
border-radius: 15px !important;
}
[data-skin-part="about"],
[data-skin-part="notice"] {
animation: nineties-bounce 2s infinite ease;
background-image: url("https://64.media.tumblr.com/1e2598616e90eb0f6b243be1b9642ae1/5583e57f872090cb-79/s2048x3072_c0,21726,100000,77976/ccaa0b27eaa3ea333eeb0df8a6838f4600d3117c.gif") !important;
border-radius: 10px;
box-shadow: 4px 4px 0 #2d1157;
padding: 20px;
}
[data-skin-part="notice"] {
animation-delay: 0.15s;
background-image: url("https://64.media.tumblr.com/d62f9c09497fe39ad002fb18c45bf61b/2c14b464e52d1596-fa/s400x600/db8362b0df0aae30ad31efa61ff058b9f1b91317.jpg") !important;
border: 0 !important;
color: #fff;
text-align: center;
}
[data-skin-part="notice"] h3 {
filter: drop-shadow(3px 3px 0 #000);
}
[data-skin-root] .panel__heading {
background: #000 !important;
border: 1px solid #c50576;
border-radius: 15px 15px 0 0;
color: #c50576;
text-align: center;
text-shadow: 1px 1px 2px #000;
}
[data-skin-root] .panel__body,
[data-skin-part="wall"] .post-card,
[data-skin-part="wall"] .composer {
background-image: url("https://i.pinimg.com/originals/70/ea/cb/70eacb83950c11dbaba19267eacc3496.gif");
color: #00ffef;
}
[data-skin-part="interests"] td {
background: rgba(0,0,0,0) !important;
border: 1px solid #ffd1dc;
}
[data-skin-part="photo"] img,
[data-skin-part="photo"] .profile-placeholder,
[data-skin-root] img {
border-radius: 12px;
}
[data-skin-part="actions"] {
background: rgba(0,0,0,0.78) !important;
}
[data-skin-part="actions"] .profile-actions__cell {
background: rgba(0,0,0,0.55);
border-color: #ffd1dc;
}
[data-skin-part="actions"] .profile-action {
color: gold;
text-shadow: 1px 1px 2px #39ff14, 0 0 25px #39ff14;
}
[data-skin-part="footer"] {
background: turquoise !important;
border-radius: 12px;
color: #000;
}
</style>

18
docs/skin-examples/spinning-round-profile-photo.html Normal file
View file

@ -0,0 +1,18 @@
<!--
Original SpaceHey layout credit:
fini hoover :3
https://layouts.spacehey.com/layout?id=31074
-->
<style>
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(-360deg); }
}
[data-skin-part="photo"] img,
[data-skin-part="photo"] .profile-placeholder {
animation: spin 7s infinite linear;
border-radius: 50%;
}
</style>

232
docs/skin-examples/windows-98.html Normal file
View file

@ -0,0 +1,232 @@
<!--
Original SpaceHey layout credit:
Angel Is Pretty. Odd.
https://layouts.spacehey.com/layout?id=4188
-->
<style>
@import url("https://fonts.googleapis.com/css2?family=Libre+Franklin:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
[data-skin-page] {
--skin-palette-accent: #0000ff;
--skin-palette-accent-text: #ffffff;
--skin-palette-backdrop: #007f7e;
--skin-palette-chrome: #0000ff;
--skin-palette-chrome-text: #ffffff;
--skin-palette-link: #000000;
--skin-palette-link-hover: #0000ff;
--skin-palette-muted: #111111;
--skin-palette-page: transparent;
--skin-palette-page-text: #000000;
--skin-palette-surface: #cfccc2;
--skin-palette-surface-text: #000000;
background: #007f7e !important;
background-image: none !important;
font-size: 17px;
min-height: 100vh;
}
[data-skin-part="shell"],
[data-skin-root],
[data-skin-root] * {
font-family: "Libre Franklin", Arial, sans-serif;
}
[data-skin-part="shell"],
[data-skin-part="content"] {
background: #007f7e !important;
}
[data-skin-part="shell"] {
border-color: #007f7e !important;
}
[data-skin-part="content"] .page-frame,
[data-skin-part="content"] .page-heading,
[data-skin-part="content"] .page-heading__title {
background: transparent !important;
color: #000;
}
[data-skin-root] p,
[data-skin-root] a {
color: #000;
font-weight: 500;
}
[data-skin-root]::-webkit-scrollbar {
width: 20px;
}
[data-skin-root]::-webkit-scrollbar-track {
background: #dcdedf;
}
[data-skin-root]::-webkit-scrollbar-thumb {
background: #bec7c9;
border: 2px outset;
}
[data-skin-root]::-webkit-scrollbar-thumb:hover {
background: #b5bdbf;
}
[data-skin-part="navigation"]::before {
background-image: url("https://i.imgur.com/CKX2NUO.png"), linear-gradient(to right, #0c1058, #adcbe1);
background-position: right center;
background-repeat: no-repeat;
color: white;
content: "bliish.space - Microsoft Internet Explorer";
display: block;
font-size: 12px;
font-weight: 600;
margin: 0;
padding: 2px 66px 3px 6px;
text-align: left;
}
[data-skin-part="navigation"],
[data-skin-part="footer"],
[data-skin-root] .panel,
[data-skin-part="notice"],
[data-skin-part="about"],
[data-skin-part="vibe"],
[data-skin-part="url"],
[data-skin-part="links"],
[data-skin-part="interests"] {
background: #cfccc2 !important;
border-color: #fff #000 #000 #fff !important;
border-radius: 0 !important;
border-style: outset !important;
border-width: 2px !important;
box-shadow: none !important;
}
[data-skin-part="navigation"] {
margin: 10px !important;
padding: 0 !important;
}
[data-skin-part="navigation-top"] {
background: transparent !important;
color: transparent !important;
height: 0 !important;
min-height: 0 !important;
overflow: hidden;
padding: 0 !important;
}
[data-skin-part="brand"],
[data-skin-part="search"],
[data-skin-part="account"] {
display: none !important;
}
[data-skin-part="navigation-links"] {
background: #cfccc2 !important;
border: 0 !important;
border-top: 2px groove #fff !important;
color: #000;
display: flex !important;
flex-wrap: wrap !important;
justify-content: flex-start !important;
padding: 0 0 3px !important;
}
[data-skin-part="navigation-links"] a {
color: #000 !important;
font-size: 10px;
font-weight: 500;
padding: 7px;
}
[data-skin-root] .panel__heading,
[data-skin-part="vibe"]::before {
background-image: url("https://i.imgur.com/CKX2NUO.png"), linear-gradient(to right, #0c1058, #adcbe1) !important;
background-position: right center;
background-repeat: no-repeat;
color: #fff !important;
font-size: 12px;
font-weight: 600;
}
[data-skin-part="identity"] {
align-items: stretch;
gap: 0;
justify-items: stretch;
}
[data-skin-part="name"] {
background-image: url("https://i.imgur.com/CKX2NUO.png"), linear-gradient(to right, #0c1058, #adcbe1) !important;
background-position: right center;
background-repeat: no-repeat;
border-color: #fff #000 #000 #fff;
border-style: outset outset none outset;
border-width: 2px;
color: #fff !important;
font-size: 12px !important;
font-weight: 600;
margin: 0;
padding: 2px 66px 3px 5px;
text-align: left;
width: 100%;
}
[data-skin-part="about"] {
border-style: groove outset outset outset !important;
font-family: "Times New Roman", Times, serif;
min-height: 178px;
}
[data-skin-part="details"] p {
background: #cfccc2;
color: #000;
font-family: "Times New Roman", Times, serif;
font-weight: 500;
margin: 0;
}
[data-skin-part="vibe"]::before {
content: "Mood";
display: block;
margin: 1px;
padding-left: 5px;
}
[data-skin-root] .panel__body,
[data-skin-part="wall"] .post-card,
[data-skin-part="wall"] .composer,
[data-skin-part="interests"] td {
background: #cfccc2 !important;
color: #000 !important;
font-family: "Times New Roman", Times, serif;
}
[data-skin-root] .panel__heading {
border-bottom-style: groove;
margin: 1px;
padding: 0 6px;
text-align: left;
}
[data-skin-part="notice"] {
font-family: "Times New Roman", Times, serif;
}
[data-skin-part="photo"] img,
[data-skin-part="photo"] .profile-placeholder {
border-color: #fff #000 #000 #fff;
border-style: groove outset outset outset;
border-width: 2px;
border-radius: 0;
}
[data-skin-part="actions"] .profile-actions__cell {
background: #cfccc2;
border-color: #fff #000 #000 #fff;
}
[data-skin-part="actions"] .profile-action {
color: #000;
}
</style>

107
docs/skin-examples/windows-vista.html Normal file
View file

@ -0,0 +1,107 @@
<!--
Original SpaceHey layout credit:
aoife☆
https://layouts.spacehey.com/layout?id=39825
-->
<style>
[data-skin-page] {
--skin-palette-accent: steelblue;
--skin-palette-accent-text: #ffffff;
--skin-palette-backdrop: #2a92b2;
--skin-palette-chrome: steelblue;
--skin-palette-chrome-text: #ffffff;
--skin-palette-link: darkcyan;
--skin-palette-link-hover: steelblue;
--skin-palette-muted: #32656c;
--skin-palette-page: transparent;
--skin-palette-page-text: #001313;
--skin-palette-surface: rgba(255,255,255,0.5);
--skin-palette-surface-text: #000000;
background-attachment: fixed;
background-image: url("https://i.pinimg.com/originals/a3/7c/2a/a37c2a6371602f3c162610a9f3c84428.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
cursor: url("https://cur.cursors-4u.net/games/gam-12/gam1113.cur"), auto;
min-height: 100vh;
}
[data-skin-part="shell"],
[data-skin-root],
[data-skin-root] * {
cursor: url("https://cur.cursors-4u.net/games/gam-12/gam1113.cur"), auto;
font-family: "Segoe UI", Arial, sans-serif;
}
[data-skin-part="navigation-top"],
[data-skin-part="navigation-links"],
[data-skin-part="footer"],
[data-skin-root] .panel__heading,
[data-skin-part="name"] {
background-image: linear-gradient(darkseagreen, steelblue) !important;
color: white !important;
}
[data-skin-part="navigation-top"],
[data-skin-part="navigation-links"],
[data-skin-part="footer"],
[data-skin-root] .panel,
[data-skin-part="notice"],
[data-skin-part="about"],
[data-skin-part="vibe"],
[data-skin-part="url"],
[data-skin-part="links"],
[data-skin-part="interests"] {
background-color: rgba(255,255,255,0.5) !important;
border: 2px solid rgba(70, 130, 180, 0.45) !important;
border-radius: 8px !important;
box-shadow: 0 0 14px rgba(0,0,0,0.75) !important;
}
[data-skin-root] .panel__heading {
border-radius: 5px 5px 0 0;
text-align: center;
}
[data-skin-root] .panel__body,
[data-skin-part="wall"] .post-card,
[data-skin-part="wall"] .composer {
background-color: rgba(255,255,255,0.58) !important;
color: #000;
}
[data-skin-part="interests"] td {
background-image: linear-gradient(lightsteelblue, #739cbf, #739cbf) !important;
color: white !important;
}
[data-skin-part="name"] {
border: 2px solid rgba(70, 130, 180, 0.9);
border-radius: 6px;
box-shadow: 0 0 14px black;
justify-self: center;
padding: 2px 10px;
}
[data-skin-part="photo"] img,
[data-skin-part="photo"] .profile-placeholder {
border: 2px solid rgba(70, 130, 180, 0.55);
border-radius: 5px;
box-shadow: 0 0 14px rgba(0,0,0,0.55);
}
[data-skin-part="actions"] .profile-actions__cell {
background: rgba(255,255,255,0.32);
border-color: rgba(70, 130, 180, 0.35);
}
[data-skin-part="actions"] .profile-action,
[data-skin-root] a {
color: darkcyan;
}
[data-skin-part="url"] {
display: none;
}
</style>

222
docs/skin-examples/windows-xp.html Normal file
View file

@ -0,0 +1,222 @@
<!--
Original SpaceHey layout credit:
Cory
https://layouts.spacehey.com/layout?id=1169
-->
<style>
[data-skin-page] {
--skin-blue-gradient: linear-gradient(to bottom, #245edb 0%, #3f8cf3 9%, #245edb 18%, #245edb 92%, #333 100%) center / cover no-repeat;
--skin-palette-accent: #115ee7;
--skin-palette-accent-text: #ffffff;
--skin-palette-backdrop: #70b6ed;
--skin-palette-chrome: #155be5;
--skin-palette-chrome-text: #ffffff;
--skin-palette-link: #0645c8;
--skin-palette-link-hover: #0b2e84;
--skin-palette-muted: #4a4a4a;
--skin-palette-page: transparent;
--skin-palette-page-text: #111111;
--skin-palette-surface: #ece9d8;
--skin-palette-surface-text: #111111;
background-attachment: fixed;
background-image: url("https://s3.amazonaws.com//depot.pacdudegames.com/spacehey/bliss.jpg");
background-position: center;
background-size: cover;
min-height: 100vh;
}
[data-skin-part="shell"],
[data-skin-root],
[data-skin-root] * {
font-family: Tahoma, Verdana, Arial, sans-serif;
}
[data-skin-part="navigation"] {
background: #ece9d8 !important;
border: 2px solid #0b46d7;
box-shadow: 7px 7px 14px rgba(0,0,0,0.45);
color: #111111 !important;
text-shadow: none !important;
}
[data-skin-part="navigation"]::before,
[data-skin-root] .panel__heading,
[data-skin-part="name"] {
background: var(--skin-blue-gradient) !important;
color: white !important;
text-shadow: 1px 1px #00337a;
}
[data-skin-part="navigation"]::before {
content: "Bliish Header";
display: block;
font-weight: bold;
padding: 8px 12px;
}
[data-skin-part="navigation-top"] {
background: #ece9d8 !important;
}
[data-skin-part="navigation-top"],
[data-skin-part="navigation-top"] a,
[data-skin-part="navigation-top"] button,
[data-skin-part="navigation-top"] input,
[data-skin-part="navigation-links"],
[data-skin-part="navigation-links"] a {
color: #111111 !important;
text-shadow: none !important;
}
[data-skin-part="navigation-links"] {
background: linear-gradient(#ffffff, #ece9d8) !important;
border-top: 1px solid #aca899;
text-align: center;
}
[data-skin-part="search"] button {
background: var(--skin-blue-gradient) !important;
border: 2px outset #ffffff;
color: #ffffff !important;
text-shadow: 1px 1px #00337a !important;
}
[data-skin-root] .panel,
[data-skin-part="notice"],
[data-skin-part="url"],
[data-skin-part="vibe"],
[data-skin-part="links"],
[data-skin-part="interests"] {
background: #ece9d8 !important;
border: 2px solid #0b46d7 !important;
border-radius: 8px 8px 0 0 !important;
box-shadow: 7px 7px 14px rgba(0,0,0,0.35) !important;
}
[data-skin-root] .panel__heading {
border-radius: 6px 6px 0 0;
padding: 6px 8px;
text-align: center;
}
[data-skin-root] .panel__body,
[data-skin-part="wall"] .post-card,
[data-skin-part="wall"] .composer,
[data-skin-part="interests"] td {
background: #fff !important;
color: #111;
}
[data-skin-root]::after {
background: url("https://media.giphy.com/media/w3AmrG1E1vr56/giphy.gif") center / contain no-repeat;
bottom: clamp(16px, 6vh, 72px);
content: "";
display: block;
height: 110px;
pointer-events: none;
position: fixed;
right: clamp(12px, 3vw, 42px);
width: 140px;
z-index: 1;
}
[data-skin-part="identity"] {
gap: 0;
}
[data-skin-part="name"] {
border: 2px solid #0b46d7;
border-radius: 6px 6px 0 0;
box-sizing: border-box;
display: block;
justify-self: stretch;
margin-bottom: 0;
padding: 8px 14px;
width: 100%;
}
[data-skin-part="about"] {
background: #fff;
border-color: #0b46d7 !important;
border-radius: 0 !important;
border-style: solid !important;
border-width: 0 2px 2px !important;
box-shadow: 7px 7px 14px rgba(0,0,0,0.35);
margin-top: 0;
padding: 20px;
}
[data-skin-part="photo"] {
background: transparent;
border: 0;
box-shadow: none;
padding: 0;
}
[data-skin-part="photo"] img,
[data-skin-part="photo"] .profile-placeholder {
border: 3px ridge #555;
border-radius: 0;
box-shadow: none;
}
[data-skin-part="actions"] .profile-actions__cell {
background: #0050ee;
border-color: #aca899;
min-width: 0;
padding: 6px;
}
[data-skin-part="actions"] .profile-action {
background: linear-gradient(#ffffff, #ece9d8);
border: 2px outset #ffffff;
color: #111;
gap: 0.45em;
justify-content: flex-start;
min-width: 0;
padding: 6px 7px;
white-space: normal;
}
[data-skin-part="actions"] .profile-action .icon {
flex: 0 0 auto;
}
[data-skin-part="actions"] .profile-action span {
min-width: 0;
overflow-wrap: anywhere;
}
[data-skin-part="actions"] .panel__heading {
background: radial-gradient(circle, #5eac56 0%, #3c873c 100%) center / cover no-repeat !important;
border-radius: 0 40px 50px 0;
box-shadow: -2px -2px 10px rgba(0,0,0,0.25) inset, 2px 2px 10px rgba(0,0,0,0.5) inset;
margin-right: 0.5em;
text-align: left;
}
[data-skin-part="actions"] .panel__heading h4 {
font-size: 0;
}
[data-skin-part="actions"] .panel__heading h4::after {
content: "💬 start";
font-size: 1.4rem;
font-style: italic;
font-weight: bold;
padding-right: 1.2rem;
text-shadow: 2px 2px 5px rgba(0,0,0,0.47);
white-space: nowrap;
}
[data-skin-part="blog-preview"] .panel__heading h4::before {
content: "📝 Notepad - ";
}
[data-skin-part="bio"] .panel__heading h4::before,
[data-skin-part="friends"] .panel__heading h4::before,
[data-skin-part="wall"] .panel__heading h4::before {
content: "💻 ";
}
</style>

484
docs/skins.md Normal file
View file

@ -0,0 +1,484 @@
# Profile Skins
Profile skins customize Bliish profile pages with sanitized HTML and passive CSS.
Skins are edited in the profile editor under **Skin HTML** and shared from **Skins -> Submit skin**.
The skin field is limited to 20,000 characters.
Profile skins may be empty.
Shared skins must save to non-empty sanitized skin HTML.
Profile and shared skin forms sanitize skin HTML before saving.
Profile rendering sanitizes profile skin HTML again before rendering.
## Quick Start
Use one or more `<style>` blocks for CSS.
Use `[data-skin-page]` for page-level color variables and page background styles.
Use `[data-skin-root]` for the rendered profile layout container.
Use `[data-skin-part="..."]` for stable profile and shell sections.
Example:
```html
<style>
[data-skin-page] {
--skin-palette-backdrop: #111111;
--skin-palette-page: #171717;
--skin-palette-page-text: #f8fafc;
--skin-palette-surface: #262626;
--skin-palette-surface-text: #f8fafc;
--skin-palette-chrome: #7c3aed;
--skin-palette-chrome-text: #ffffff;
--skin-palette-link: #a78bfa;
--skin-radius-panel: 8px;
background: #111111;
}
[data-skin-root] {
border: 2px solid #7c3aed;
}
[data-skin-part="name"] {
color: #ffffff;
text-shadow: 2px 2px 0 #7c3aed;
}
[data-skin-part="bio"] a:hover {
color: #fbbf24;
}
</style>
<p>Optional custom skin HTML appears on the profile.</p>
```
## Rendering Model
Skin CSS is collected from sanitized `<style>` blocks and rendered in the page head.
Skin HTML outside `<style>` blocks is rendered inside the profile as the `custom-html` skin part.
The `custom-html` block appears after the profile bio and before the blog preview.
If no sanitized CSS survives, the page does not receive `data-skin-page` and the shell skin hooks are not activated.
The profile layout root still receives `data-skin-root` and `data-skin-version`.
## Stable Hooks
These hooks are the public selector contract.
Do not depend on ordinary app class names as stable API.
Internal class names may work when scoped under a supported hook, but they may change without a skin contract update.
### Page And Shell Hooks
| Hook | Rendered target |
| --- | --- |
| `[data-skin-page]` | The `<body>` element when sanitized CSS exists. |
| `[data-skin-root]` | The profile layout container. |
| `[data-skin-version="2026"]` | The current skin-version marker on the body when sanitized CSS exists and on the profile layout root. |
| `[data-skin-part="page"]` | The `<body>` element when sanitized CSS exists. |
| `[data-skin-part="shell"]` | The site shell container around navigation, page content, and footer. |
| `[data-skin-part="header"]` | The header around the site navigation. |
| `[data-skin-part="navigation"]` | The navigation element. |
| `[data-skin-part="navigation-top"]` | The top navigation row. |
| `[data-skin-part="brand"]` | The site brand area in navigation. |
| `[data-skin-part="search"]` | The navigation search form area. |
| `[data-skin-part="account"]` | The navigation account/action links area. |
| `[data-skin-part="navigation-links"]` | The main navigation link list. |
| `[data-skin-part="content"]` | The page `<main>` element. |
| `[data-skin-part="footer"]` | The site footer. |
Shell hooks render only when the profile page has sanitized CSS.
### Profile Hooks
| Hook | Rendered target |
| --- | --- |
| `[data-skin-part="sidebar"]` | The profile sidebar column. |
| `[data-skin-part="identity"]` | The username plus profile photo/details group. |
| `[data-skin-part="name"]` | The profile display-name heading. |
| `[data-skin-part="about"]` | The profile photo and status area. |
| `[data-skin-part="photo"]` | The profile photo wrapper. |
| `[data-skin-part="details"]` | The status quote, when a status is set. |
| `[data-skin-part="theme-song"]` | The profile theme-song audio player. |
| `[data-skin-part="vibe"]` | The current-vibe box, when a current vibe is set. |
| `[data-skin-part="actions"]` | The profile actions panel. |
| `[data-skin-part="url"]` | The profile URL box. |
| `[data-skin-part="links"]` | The social-links panel, when social links exist. |
| `[data-skin-part="interests"]` | The interests panel, when interests exist. |
| `[data-skin-part="main"]` | The main profile column. |
| `[data-skin-part="notice"]` | Friend or owner notices, when those notices render. |
| `[data-skin-part="bio"]` | The bio panel, when the profile has bio content. |
| `[data-skin-part="bio-content"]` | The rendered bio content inside the bio panel. |
| `[data-skin-part="custom-html"]` | Sanitized non-style skin HTML. |
| `[data-skin-part="blog-preview"]` | The latest blog entries panel. |
| `[data-skin-part="wall"]` | The wall posts panel. |
| `[data-skin-part="post"]` | A single post card on profile walls and when a profile skin is reused outside that author's profile. |
| `[data-skin-part="comment"]` | A single author-scoped comment when a profile skin is reused outside that author's profile. |
| `[data-skin-part="friends"]` | The profile front-row friends panel. |
Conditional hooks only exist when their target content exists.
When posts or comments appear outside an author's own profile, the app may reuse the author's profile skin inside a scoped item boundary.
Scoped author skins render only sanitized CSS; custom skin HTML is not inserted into posts or comments.
Profile wall posts stay inside the profile owner's page skin. They are not re-skinned by each post author's profile skin.
Use `[data-skin-part="post"]` to target only the post card element.
Use `[data-skin-part="comment"]` to target only the comment card element.
Existing wall-post descendant rules such as `[data-skin-part="wall"] .post-card` can also style author-scoped posts.
Author-scoped comments also receive post-card skin rules as a low-specificity fallback, so comments match posts by default.
Add `[data-skin-part="comment"]` rules when comments should intentionally differ from posts.
Exact page background declarations fill the viewport-wide post-height backdrop band.
Exact shell, content, and root paint declarations, such as backgrounds, borders, radii, outlines, and shadows, fill matching author-scoped structure layers inside the app container.
Exact page, shell, navigation, footer, content, and wall rules are otherwise treated as profile-page context in author-scoped items. They can pass CSS variables and inherited text or cursor declarations through, but they do not paint page chrome, pseudo-elements, navigation, or footer decorations around feed posts or comments.
The actions panel exposes `.profile-actions`, `.profile-actions__cell`, and `.profile-action` classes inside `[data-skin-part="actions"]`.
Use `.profile-action` when styling action links, buttons, and disabled action labels.
State classes such as `.profile-action--secondary`, `.profile-action--danger`, and `.profile-action--disabled` only describe tone or availability; keep the main box treatment on `.profile-action` so links and form buttons stay visually consistent.
Do not style every descendant `span` inside `[data-skin-part="actions"]`; action icons and button labels also use spans.
## Color Variables
Put skin color variables on `[data-skin-page]`.
The app maps skin palette variables into the active page theme for profile pages.
Missing skin palette variables inherit the current app theme.
Supported skin palette variables are:
| Variable | Effect |
| --- | --- |
| `--skin-palette-backdrop` | Page backdrop source color. |
| `--skin-palette-page` | Main page/canvas source color. |
| `--skin-palette-page-text` | Text color used on the page background. |
| `--skin-palette-surface` | Panel and surface source color. |
| `--skin-palette-surface-text` | Text color used on panels and surfaces. |
| `--skin-palette-chrome` | Navigation and panel-heading source color. |
| `--skin-palette-chrome-text` | Text color used on chrome and panel headings. |
| `--skin-palette-accent` | Primary accent source color. |
| `--skin-palette-accent-text` | Text color used on accent-colored controls. |
| `--skin-palette-link` | Link color source. |
| `--skin-palette-link-hover` | Page link hover color source. |
| `--skin-palette-surface-link-hover` | Surface link hover color source. |
| `--skin-palette-muted` | Muted text source color. |
| `--skin-palette-focus` | Focus outline source color. |
The **Generate color skin** button writes a `<style>` block with editable `--skin-palette-*` variables.
The **Generate color skin** button fills the skin editor; it does not save until the profile or skin form is submitted.
The color editor reads existing `--skin-palette-*` values from the current skin code.
The color editor also reads these older aliases: `--skin-accent`, `--skin-accent-text`, `--skin-panel-heading-background`, `--skin-panel-heading-text`, `--skin-link`, `--skin-backdrop`, `--skin-background`, and `--skin-panel-background`.
Do not set app-owned variables such as `--theme-*`, `--app-theme-*`, or `--color-*` in skin CSS.
The CSS sanitizer removes custom properties whose names start with `--theme-`, `--app-theme-`, or `--color-`.
## Radius Variables
Put radius variables on `[data-skin-page]`.
| Variable | Effect |
| --- | --- |
| `--skin-radius` | Shared fallback radius for profile panels and media. |
| `--skin-radius-panel` | Panels, cards, composers, URL boxes, and notice boxes. |
| `--skin-radius-photo` | Profile photos, placeholders, friend images, and post media. |
| `--skin-radius-control` | Form controls and buttons. |
Examples:
```html
<style>[data-skin-page]{--skin-radius:8px;--skin-radius-control:6px;}</style>
```
```html
<style>[data-skin-page]{--skin-radius-panel:18px;--skin-radius-photo:50%;--skin-radius-control:999px;}</style>
```
## CSS Selector Rules
Every skin CSS selector must include at least one supported hook.
Supported hooks are `[data-skin-page]`, `[data-skin-root]`, `[data-skin-version="2026"]`, and supported `[data-skin-part="..."]` values.
Bare page selectors are limited to `[data-skin-page]` or `[data-skin-version="2026"]` by themselves.
Use `[data-skin-root]` or `[data-skin-part="..."]` before descendant selectors.
This is allowed:
```css
[data-skin-part="bio"] a:hover {
color: red;
}
```
This is dropped because it is a descendant of the body hook rather than a profile part:
```css
[data-skin-page] a {
color: red;
}
```
This is dropped because it has no skin hook:
```css
body {
color: red;
}
```
Selectors with unsupported attribute selectors are dropped.
Selectors using `:has()`, `:is()`, or `:where()` are dropped.
Simple `:not(...)` selectors can survive when the `:not(...)` contents only use simple class, id, tag, or spacing characters.
If any selector in a comma-separated selector list is unsafe, the whole rule is dropped.
Selectors longer than 500 characters are dropped.
The sanitizer removes `<` and `>` from CSS before parsing, so do not use child combinators.
Use descendant selectors instead of `>`.
## CSS Declaration Rules
Most ordinary CSS property names are accepted.
The properties `behavior` and `-moz-binding` are blocked.
`position:absolute`, `position:fixed`, and `position:sticky` are blocked.
`position:relative` is not blocked by the skin sanitizer.
CSS custom properties are accepted when the name starts with `--` and does not use a blocked app-owned prefix.
CSS values are dropped if they contain CSS escapes, `expression(...)`, `javascript:`, `vbscript:`, `behavior:`, `-moz-binding`, `attr(...)`, `<`, or `>`.
A declaration containing an unsafe `url(...)` is dropped.
Other safe declarations in the same rule can still survive.
CSS comments are removed.
Malformed CSS rule blocks may be dropped.
## CSS At-Rules
`@import` is only kept for `https://fonts.googleapis.com/...` stylesheets.
Other `@import` rules are removed.
`@media` rules can survive when the media prelude uses the sanitizer's supported simple characters.
`@keyframes` rules can survive when the animation name is alphanumeric, underscore, or hyphen.
Keyframe selectors can be `from`, `to`, or percentages.
Other CSS at-rules are removed.
## URLs And Media
Links and resources use different URL rules.
Link `href` values can be local paths, hash links, `http:`, `https:`, or `mailto:`.
Link `rel` is rewritten to `nofollow noopener noreferrer`.
Link `target` is kept only when it is `_blank`.
Image `src`, table `background`, and CSS `url(...)` resources can be local app paths or `https:` URLs.
Resource URLs using `http:`, `data:`, `file:`, `javascript:`, or `vbscript:` are removed.
Invalid image URLs are replaced with an empty `<span>`.
CSS declarations with invalid `url(...)` values are removed.
## Embeds
Skins can include sanitized `<iframe>` embeds from supported media providers.
Supported embed providers are YouTube, SoundCloud, Vimeo, Spotify, Bandcamp, TikTok, and Dailymotion.
YouTube watch, shorts, embed, youtube-nocookie, and youtu.be URLs are normalized to `https://www.youtube-nocookie.com/embed/...`.
Spotify URLs are normalized to `https://open.spotify.com/embed/...`.
Vimeo URLs are normalized to `https://player.vimeo.com/video/...`.
TikTok URLs are normalized to `https://www.tiktok.com/player/v1/...`.
Dailymotion URLs are normalized to `https://www.dailymotion.com/embed/video/...`.
Unsupported iframe sources are replaced with an empty `<span>`.
Iframe `loading` is rewritten to `lazy`.
Iframe `referrerpolicy` is rewritten to `strict-origin-when-cross-origin`.
Iframe `sandbox` is rewritten to `allow-scripts allow-same-origin allow-presentation allow-popups`.
Iframe `allow` is rewritten from the normalized provider URL.
Iframe `allowfullscreen` is added.
## Allowed HTML
Allowed skin tags are:
```text
a b big blockquote br caption center code div em font h1 h2 h3 h4 hr i iframe img li marquee ol p s small span strike strong style sub sup table tbody td tfoot th thead tr u ul
```
Allowed attributes by tag are:
| Tag | Attributes |
| --- | --- |
| `a` | `href`, `title`, `target`, `rel`, `class`, `id`, `style` |
| `font` | `face`, `color`, `size`, `class`, `id`, `style` |
| `iframe` | `src`, `title`, `width`, `height`, `class`, `id`, `style`, `loading`, `allow`, `allowfullscreen`, `frameborder`, `referrerpolicy`, `sandbox` |
| `img` | `src`, `alt`, `title`, `width`, `height`, `class`, `id`, `style`, `loading`, `align`, `border` |
| `marquee` | `behavior`, `direction`, `scrollamount`, `scrolldelay`, `loop`, `width`, `height`, `bgcolor`, `align`, `class`, `id`, `style` |
| `table` | `width`, `height`, `border`, `cellpadding`, `cellspacing`, `align`, `valign`, `bgcolor`, `background`, `class`, `id`, `style` |
| `td` | `width`, `height`, `colspan`, `rowspan`, `align`, `valign`, `bgcolor`, `background`, `class`, `id`, `style` |
| `th` | `width`, `height`, `colspan`, `rowspan`, `align`, `valign`, `bgcolor`, `background`, `class`, `id`, `style` |
| `tr` | `align`, `valign`, `bgcolor`, `background`, `class`, `id`, `style` |
| all allowed tags | `class`, `id`, `style`, `align`, `title` |
Event handler attributes are not allowed.
`<script>` is not allowed.
Inline `style` attributes are sanitized with the same declaration sanitizer used for CSS blocks.
Classes and ids on custom HTML can be useful for your own markup.
CSS selectors should still start from a supported skin hook.
## Shared Skins
Shared skins have a title, description, and skin HTML.
The shared skin description is ordinary user text, not skin HTML.
Shared skin HTML is sanitized before it is stored.
Users can preview a shared skin on their own profile before applying it.
Applying a shared skin copies that skin's saved HTML into the user's profile skin field.
User-authored shared skins can be edited by the owner or an admin.
Built-in shared skins can be edited by admins.
User-authored shared skins can be deleted by the owner, an admin, or a permitted moderator.
Built-in shared skins can be deleted by admins.
## Examples
### Background Image
```html
<style>
[data-skin-page] {
background: #000000 url("https://example.com/background.gif") repeat;
}
</style>
```
### Style A Profile Part
```html
<style>
[data-skin-part="friends"] {
border: 2px solid #ff99cc;
}
</style>
```
### Add Custom HTML
```html
<p>
<a href="https://example.com" target="_blank">My links</a>
</p>
<img src="https://example.com/banner.gif" alt="Decorative banner" loading="lazy">
```
### Add A YouTube Embed
```html
<iframe
src="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
title="YouTube video"
width="350"
height="215">
</iframe>
```
The saved iframe source is normalized to `https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ`.
## Common Reasons Code Disappears
The selector did not include a supported skin hook.
The selector used `body`, `.profile`, `nav`, `table`, or another global selector by itself.
The selector used an unsupported attribute selector.
The rule used a blocked at-rule.
The declaration used an unsafe URL.
The declaration used a blocked CSS value.
The HTML tag or attribute is not in the allowed lists.
The image or iframe URL did not match the sanitizer's URL rules.
## Developer Verification
The skin hook list comes from `src/skins/contract.ts`.
Skin rendering behavior comes from `src/skins/rendering.tsx`, `src/views/profile/page.tsx`, and `src/views/profile/main.tsx`.
Shell hook behavior comes from `src/shell/layout.tsx`, `src/shell/nav.tsx`, and the layout primitives in `src/shell/page.tsx`.
Profile part placement comes from `src/views/profile/layout.tsx`, `src/views/profile/sidebar.tsx`, `src/views/profile/main.tsx`, `src/views/profile/details.tsx`, `src/views/profile/actions.tsx`, `src/views/posts/panels.tsx`, and the split layout helpers in `src/shell/page.tsx`.
Color and radius variables come from `src/skins/colorPalette.ts`, `src/skins/colorPaletteEditor.tsx`, and `public/static/css/features/profile.css`.
HTML, CSS, URL, and iframe sanitizer behavior comes from `src/server/security/skinHtml.ts`, `src/server/security/css.ts`, `src/server/security/urls.ts`, and `src/server/security/embeds.ts`.
Skin create, edit, preview, and apply behavior comes from `src/routes/skins/index.tsx`.
Profile skin save and generated color-skin behavior comes from `src/routes/profile/index.tsx` and `src/routes/profile/edit/actions.ts`.
When changing skin behavior, update this document in the same change.

492
docs/theme-tokens.md Normal file
View file

@ -0,0 +1,492 @@
# Theme Tokens
Theme tokens are the internal CSS custom-property contract for the app shell and reusable UI components.
This document is for maintainers changing the app theme system.
Skin authors should use [Profile Skins](skins.md) instead.
Do not merge this document into `skins.md`.
`skins.md` describes the user-facing skin HTML contract and sanitizer boundary.
This document describes how app and admin themes feed the shared component palette.
## Source Files
- `public/static/css/core/tokens.css` defines default theme tokens, sizing tokens, and component-facing aliases.
- `public/static/css/themes/dark.css` defines the cookie-selected dark override layer.
- `src/theme/colorPalette.ts` defines the admin color-palette model and derived color calculations.
- `src/theme/themeCss.ts` writes `/branding.css` from a saved admin color palette.
- `src/routes/system/theme.ts` serves `/theme.css` and handles the light/dark toggle cookie.
- `src/routes/system/branding.ts` serves `/branding.css`.
- `src/server/db/branding.ts` stores and reads the admin color palette.
- `src/views/staff/siteSettings.tsx` renders the admin color-theme form.
- `public/static/css/features/profile.css` maps profile skin variables into the same component-facing aliases on skinned profile pages.
## Token Layers
The theme system has four layers.
### 1. Admin Palette Source
The admin color-theme form edits eight source colors.
These source colors are defined by `colorPaletteTokens` in `src/theme/colorPalette.ts`.
| Palette token | Admin label | Default |
| --- | --- | --- |
| `chrome` | Header | `#7c3aed` |
| `chromeText` | Header text | `#ffffff` |
| `accent` | Accent | `#7c3aed` |
| `accentText` | Accent text | `#ffffff` |
| `link` | Link | `#6b21a8` |
| `backdrop` | Backdrop | `#e6e3ea` |
| `page` | Page | `#ffffff` |
| `surface` | Panel | `#ffffff` |
The admin form field names are `color_chrome`, `color_chromeText`, `color_accent`, `color_accentText`, `color_link`, `color_backdrop`, `color_page`, and `color_surface`.
Only six-digit hex colors are accepted by the palette parser.
Invalid submitted palette values fall back to the current palette value or the default palette.
The saved admin palette is stored as JSON in the `branding.palette` setting.
Saving the default palette removes the saved `branding.palette` setting.
### 2. App Theme Variables
`public/static/css/core/tokens.css` defines default `--app-theme-*` fallback values.
`src/theme/themeCss.ts` writes these `--app-theme-*` variables into `/branding.css` when admin branding is customized:
```text
--app-theme-backdrop
--app-theme-page
--app-theme-surface
--app-theme-chrome
--app-theme-chrome-text
--app-theme-accent
--app-theme-accent-text
--app-theme-link
--app-theme-link-hover
--app-theme-surface-link
--app-theme-surface-link-hover
--app-theme-page-text
--app-theme-surface-text
--app-theme-muted
```
`--app-theme-focus` exists in the default CSS and is used as the fallback for `--theme-focus`.
The admin color-theme form does not currently edit `--app-theme-focus`.
### 3. Active Theme Variables
Components do not consume admin palette tokens directly.
They consume active `--theme-*` variables.
Default active theme variables are defined in `public/static/css/core/tokens.css`.
Customized admin branding writes these active variables into `/branding.css`:
```text
--theme-backdrop
--theme-page
--theme-surface
--theme-chrome
--theme-chrome-text
--theme-accent
--theme-accent-text
--theme-link
--theme-link-hover
--theme-surface-link
--theme-surface-link-hover
--theme-page-text
--theme-surface-text
--theme-muted
```
These active theme variables are CSS-only defaults and are not written by `src/theme/themeCss.ts`:
```text
--theme-danger
--theme-danger-text
--theme-success
--theme-success-ink
--theme-success-text
--theme-focus
--theme-page-grid-a
--theme-page-grid-b
--theme-toggle-dark-display
--theme-toggle-light-display
```
### 4. Component-Facing Aliases
Reusable component CSS consumes `--color-*`, `--surface-*`, `--page-background`, and `--shadow-*` aliases.
Those aliases are resolved for both `:root` and `[data-skin-page]` in `public/static/css/core/tokens.css`.
The shared resolver lets admin themes and profile skins use the same component formulas.
Component-facing color aliases are:
```text
--color-page
--color-canvas
--color-surface
--color-surface-raised
--color-surface-tint
--color-text
--color-text-muted
--color-text-on-bright
--color-link
--color-link-hover
--color-brand
--color-brand-accent
--color-brand-header
--color-brand-nav
--color-brand-soft
--color-brand-border
--color-panel-accent
--color-panel-accent-soft
--color-panel-rule
--color-container-border
--color-danger
--color-danger-text
--color-danger-soft
--color-danger-border
--color-success
--color-success-ink
--color-success-text
--color-success-soft
--color-success-border
--color-field
--color-field-disabled
--color-field-border-light
--color-field-border
--color-field-border-dark
--color-focus
--color-link-focus-bg
--color-row-alt
--color-shadow-panel
--color-shadow-soft
--color-shadow-pressed
--color-shadow-card
--color-button-primary-bg
--color-button-primary-text
--color-button-primary-border-light
--color-button-primary-border-dark
--color-button-primary-hover-bg
--color-button-primary-hover-text
--color-button-secondary-bg
--color-button-secondary-text
--color-button-secondary-border-light
--color-button-secondary-border-dark
--color-button-secondary-hover-bg
--color-button-secondary-hover-text
--color-button-danger-bg
--color-button-danger-text
--color-button-danger-border-light
--color-button-danger-border-dark
--color-button-danger-hover-bg
--color-button-danger-hover-text
```
Component-facing surface aliases are:
```text
--surface-background
--surface-background-raised
--surface-background-soft
--surface-background-tint
--surface-border
--surface-border-soft
--surface-rule
--surface-shadow
```
Page and shadow aliases are:
```text
--page-background
--shadow-panel
--shadow-button
--shadow-field
--shadow-pressed
--shadow-photo
--shadow-card
--column-divider-shadow
```
## Derived Colors
`src/theme/colorPalette.ts` derives readable and hover colors from the eight admin palette source colors.
`deriveColorPalette()` returns:
```text
accent
accentText
backdrop
chrome
chromeText
muted
page
pageLink
pageLinkHover
pageText
surface
surfaceLink
surfaceLinkHover
surfaceText
```
`pageText` and `surfaceText` are chosen as black or white based on contrast.
`muted` is mixed from `surfaceText` and `surface`.
`pageLinkHover` and `surfaceLinkHover` are adjusted toward readable contrast against their background.
The CSS layer derives borders, soft surfaces, fields, shadows, and button border colors with `color-mix(...)`.
## Surface Meanings
`--theme-backdrop` is the browser background behind the app container.
`--theme-page` is the page canvas inside the app container.
`--theme-surface` is used for panels, cards, composers, profile actions, and form surfaces.
`--theme-chrome` is used for navigation, header-like chrome, and panel headings.
`--theme-accent` is used for primary actions.
`--theme-link` is the normal content link source color.
`--theme-page-text` is used for text on the page canvas.
`--theme-surface-text` is used for text on panels and surfaces.
`--theme-muted` is used for secondary text.
`--theme-focus` is used for focus styling.
## Default Light Theme
The default light theme is defined in `public/static/css/core/tokens.css`.
The default theme color source variables such as `--theme-chrome`, `--theme-accent`, `--theme-link`, `--theme-backdrop`, `--theme-page`, and `--theme-surface` point at default `--app-theme-*` fallback values.
The default `--theme-page-grid-a` and `--theme-page-grid-b` variables derive a subtle page-grid background from `--theme-backdrop`.
## Dark Theme
The dark theme is a small override layer in `public/static/css/themes/dark.css`.
`/theme.css` imports `public/static/css/themes/dark.css` only when the `app_theme` cookie is `dark` and admin branding is not customized.
The dark override is scoped to `:root:not([data-theme-lock="light"])`.
Dark mode overrides:
```text
color-scheme
--theme-backdrop
--theme-page
--theme-surface
--theme-page-text
--theme-link
--theme-muted
--theme-danger
--theme-success-text
--theme-toggle-dark-display
--theme-toggle-light-display
```
The dark override does not write `--app-theme-*` values.
## Admin Branding
Customized admin branding is served from `/branding.css`.
`/branding.css` is empty when branding is not customized.
When branding is customized, `src/theme/themeCss.ts` writes both `--app-theme-*` fallback values and active `--theme-*` values to `:root`.
Customized admin branding disables the light/dark theme toggle in the shell.
Customized admin branding locks the document with `data-theme-lock="light"` so the dark override does not apply.
Resetting the color theme deletes the saved palette and returns the app to the default light/dark behavior.
## Profile Skins
Profile skins do not write this global contract directly.
Skin CSS should use `--skin-palette-*` variables scoped to `[data-skin-page]`.
`public/static/css/features/profile.css` maps skin palette variables into page-local `--skin-*` variables.
`public/static/css/features/profile.css` then republishes those values through local `--theme-*` variables on `[data-skin-page]`.
Because component-facing aliases are resolved for `[data-skin-page]`, skinned profile pages use the same component formulas as admin themes.
Missing skin palette variables inherit the current `--app-theme-*` values.
Profiles without sanitized skin CSS inherit the normal site theme.
The skin sanitizer drops custom properties whose names start with `--theme-`, `--app-theme-`, or `--color-`.
Skin authors should use the public skin variables and hooks documented in [Profile Skins](skins.md).
Profile skin radius variables map into shared radius tokens on `[data-skin-page]`:
| Skin variable | Shared token |
| --- | --- |
| `--skin-radius-panel` | `--radius-panel` |
| `--skin-radius-photo` | `--radius-media` |
| `--skin-radius-control` | `--radius-subtle` |
`--skin-radius` is a fallback used by the skin radius variables.
## Non-Color Tokens
`public/static/css/core/tokens.css` also defines non-color tokens.
These tokens are not controlled by the admin color-theme form.
Base color constants:
```text
--color-white
--color-ink
```
Typography tokens:
```text
--font-body
--line-height-body
--font-size-main
--font-size-footer
--font-size-note
--font-size-caption
--font-size-small
--font-size-nav
--font-size-nav-link
--font-size-utility-action
--font-size-card-heading
--font-size-panel-heading
--font-size-profile-heading
```
Layout and size tokens:
```text
--container-width
--container-min-height
--content-measure
--nav-side-min
--audio-width
--avatar-size
--avatar-compact-size
--profile-photo-size
--profile-edit-photo-size
--person-card-width
--person-card-min-height
--profile-person-card-width
--details-label-width
--discussion-author-width
--column-compact
--column-profile
--column-wide
--column-aside-min
--profile-sidebar-min
```
Spacing tokens:
```text
--space-1
--space-2
--space-3
--space-4
--space-5
--space-6
--space-7
--space-8
--space-9
--space-10
--space-11
--space-12
--layout-stack-gap
--panel-body-gap
--list-stack-gap
--space-main-y
--space-main-x
--space-nav-links-y
--space-nav-links-x
--link-separator-gap
--article-title-offset
--icon-label-gap
--icon-offset-y
```
Border, radius, control, and table tokens:
```text
--border-thin
--border-medium
--radius-panel-default
--radius-media-default
--radius-panel
--radius-media
--radius-control-default
--radius-subtle
--text-decoration-hairline
--text-underline-offset
--icon-size
--brand-icon-size
--avatar-glyph-size
--control-min-height
--control-pad-y
--control-pad-x
--button-active-shift
--disabled-opacity
--focus-outline-width
--focus-offset
--table-cell-y
--table-cell-x
--contact-cell-min-height
--nav-search-width
--nav-link-min-height
```
## Maintainer Rules
Add a new admin-controlled source color only if it belongs in the eight-token color palette model or if that model is intentionally expanded.
If the admin palette model changes, update `src/theme/colorPalette.ts`, `src/theme/themeCss.ts`, the admin color form, and this document.
If a component needs a reusable color, prefer adding a component-facing alias in `public/static/css/core/tokens.css` rather than reading `--app-theme-*` directly.
If a profile skin should control a new theme concept, add a `--skin-palette-*` or `--skin-*` token in `public/static/css/features/profile.css` and update [Profile Skins](skins.md).
Do not require skin authors to set `--theme-*`, `--app-theme-*`, or `--color-*`.
## Change Checklist
When changing theme tokens:
- update `public/static/css/core/tokens.css`;
- update `src/theme/colorPalette.ts` and `src/theme/themeCss.ts` if admin branding should control the token;
- update the admin color-theme form if admins need to edit the token;
- keep `public/static/css/themes/dark.css` as a small override layer;
- verify `/branding.css` output when branding is customized;
- verify `/theme.css` output with and without the dark cookie;
- check profile skins still use their separate skin contract;
- update [Profile Skins](skins.md) when skin-facing variables change.

150
docs/threat-model.md Normal file
View file

@ -0,0 +1,150 @@
# Threat Model
Bliish.space intentionally allows user-controlled profiles. That makes security boundaries explicit and non-optional.
## Assets
- Account credentials.
- Session tokens.
- CSRF tokens.
- Email addresses.
- Profile data.
- Uploaded profile images, post images, and audio.
- Private profile visibility.
- Admin actions, reports, and automod rules.
- SQLite database and uploads directory.
## Actors
- Anonymous visitor.
- Signed-up user.
- Profile owner.
- Friend.
- Moderator.
- Admin.
- Instance operator.
- Malicious user.
- Compromised reverse proxy or host.
## Trust Boundaries
- Browser to Hono request.
- Cookie/session middleware to route handlers.
- Form parser to validators.
- Sanitizer to HTML renderer.
- Upload parser to filesystem.
- Route handler to SQLite query module.
- Admin-only routes.
- Reverse proxy to app process.
## Primary Risks
### Cross-Site Scripting
Risk: profile bio, skin HTML, posts, comments, blogs, private messages, and reports render user content.
Controls:
- sanitize before storage;
- restrict tags, attributes, schemes, and inline styles;
- allow skin CSS only through the skin sanitizer, which strips active code, unsafe URL schemes, arbitrary CSS attribute selectors, high-risk selector functions, and absolute/fixed/sticky positioning, while keeping page-level skin selectors variable-only and preserving documented profile skin hooks;
- allow skin resource URLs only when they are local paths or HTTPS URLs;
- allow iframe embeds only for host/path-validated mainstream player URLs, with fixed sandbox and referrer policy attributes;
- avoid rendering raw input;
- keep sanitizer tests near sanitizer code;
- render stored sanitized HTML through the shared `trustedHtml` boundary, and treat any direct `dangerouslySetInnerHTML` use as security-sensitive.
### CSRF
Risk: form-first app has many mutating POST routes.
Controls:
- form-based mutations require CSRF tokens;
- mutating form actions use per-action rate limits backed by short-lived SQLite counters keyed to accounts or submitted form subjects;
- invalid tokens return 403;
- cookies use SameSite=Lax;
- destructive forms stay POST-only.
Email verification is the exception: `/verify/:token` consumes a one-time token stored as a hash in SQLite because the token itself authorizes that action.
### Session Theft
Risk: stolen session token gives account access.
Controls:
- random opaque tokens;
- store only token hashes;
- HTTP-only cookie;
- secure cookies when base URL is HTTPS;
- revocation on logout.
### Upload Abuse
Risk: executable files, oversized files, or disguised content.
Controls:
- size cap;
- request body size cap before form parsing;
- allowed MIME and extension;
- file signature validation;
- local image normalization before storage;
- random filenames;
- separate upload buckets for profile images, post images, and theme songs;
- uploads stored under the configured upload directory;
- production deployment docs place uploads under `/var/lib/bliishspace/uploads`;
- local development defaults use `data/uploads`, which is ignored by git.
### Authorization Bypass
Risk: user mutates or reads resources they should not access.
Controls:
- route-level auth checks;
- owner/admin checks before edit/delete;
- moderator checks for report queue actions, with role hierarchy checks before staff can delete content or ban an author;
- admin-only automod rule management, with rule length limits, regex compile validation, scan length caps, default critical rule packs, evasion-aware text normalization, and review matches routed through the same moderated report queue;
- private profile checks on direct profile, profile friends, profile blog, and wall routes;
- group post creation, props, and comments require group membership;
- protected admin friendship and default group membership checks prevent users from disconnecting from the instance admin account or leaving group id `1`;
- per-entry blog privacy checks for public, friends-only, and private diary entries;
- admin routes require the `admin` role; report moderation routes require a staff role with moderation capability.
### Open Redirect
Risk: attacker abuses redirect after delete actions.
Controls:
- redirects from request headers are restricted to local paths or same-origin URLs.
### Third-Party Profile Resources
Risk: customized skins can cause visitor browsers to fetch HTTPS images, CSS backgrounds, Google Fonts resources, or whitelisted embedded players chosen by profile authors.
Controls:
- remote resources are limited to HTTPS URLs by the skin sanitizer;
- iframe embeds are limited to mainstream player URLs such as YouTube, SoundCloud, Vimeo, Spotify, Bandcamp, TikTok, and Dailymotion, rewritten or validated by the skin sanitizer, sandboxed, and constrained by CSP `frame-src`;
- ordinary user text fields do not allow image tags;
- instance operators can tighten `sanitizeSkinHtml` and CSP if they want local-only skin assets.
### Data Loss
Risk: SQLite file or uploads are lost or corrupted.
Controls:
- WAL mode;
- documented backup and restore;
- uploads and database kept in predictable directories.
## Residual Risks
- Sanitizer policy may need tightening as skin support expands.
- Instance operators can weaken privacy with proxy logs or CDN configuration.
- New features may miss moderation edge cases.
- Deleted data can remain in backups outside the app.

50
package.json Normal file
View file

@ -0,0 +1,50 @@
{
"name": "bliishspace",
"version": "0.0.0",
"description": "Lightweight, lightning-fast, open-source private social media you can self-host and customize, with no tracking",
"license": "GPL-3.0-only",
"repository": {
"type": "git",
"url": "https://github.com/bliish-com/bliishspace.git"
},
"homepage": "https://github.com/bliish-com/bliishspace",
"author": {
"name": "Bliish",
"url": "https://bliish.com"
},
"private": true,
"type": "module",
"packageManager": "pnpm@11.1.3",
"engines": {
"node": ">=24.0.0",
"pnpm": ">=11.0.0"
},
"scripts": {
"dev": "tsx watch src/index.tsx",
"start": "node dist/index.js",
"clean": "node -e \"require('node:fs').rmSync('dist', { recursive: true, force: true })\"",
"assets:brand": "tsx src/scripts/generateBrandAssets.ts",
"assets:brand:clean": "tsx src/scripts/generateBrandAssets.ts --clean",
"build": "pnpm clean && tsc -p tsconfig.build.json",
"typecheck": "tsc --noEmit -p tsconfig.json",
"db:init": "tsx src/server/db/init.ts",
"test": "vitest run"
},
"dependencies": {
"@hono/node-server": "2.0.3",
"@node-rs/argon2": "2.0.2",
"better-sqlite3": "12.10.0",
"hono": "4.12.19",
"lucide-static": "1.16.0",
"sanitize-html": "2.17.4",
"sharp": "0.34.5"
},
"devDependencies": {
"@types/better-sqlite3": "7.6.13",
"@types/node": "24.12.4",
"@types/sanitize-html": "2.16.1",
"tsx": "4.22.2",
"typescript": "6.0.3",
"vitest": "4.1.6"
}
}

1939
pnpm-lock.yaml Normal file
View file

File diff suppressed because it is too large Load diff

4
pnpm-workspace.yaml Normal file
View file

@ -0,0 +1,4 @@
allowBuilds:
better-sqlite3: true
esbuild: true
sharp: true

BIN
public/static/brand/apple-touch-icon.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.8 KiB

1
public/static/brand/favicon.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="11" fill="#592aab" /><g fill="#ffffff"><circle cx="12" cy="9.1" r="3.1" /><path d="M6.3 19.9c.9-3.9 3-5.9 5.7-5.9s4.8 2 5.7 5.9c-1.6 1.1-3.5 1.7-5.7 1.7s-4.1-.6-5.7-1.7Z" /></g></svg>
Side by side

After

Width:  |  Height:  |  Size: 312 B

BIN
public/static/brand/icon-1024.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 34 KiB

BIN
public/static/brand/icon-192.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.1 KiB

BIN
public/static/brand/icon-512.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
public/static/brand/og-image.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 31 KiB

1
public/static/brand/og-image.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="630" viewBox="0 0 1200 630" role="img" aria-label="bliish.space social preview"><rect width="1200" height="630" fill="#592aab" /><g color="#ffffff" fill="#ffffff" stroke="#ffffff"><svg x="270" y="222" width="130" height="170" xmlns="http://www.w3.org/2000/svg" viewBox="4 4 16 18" fill="currentColor" stroke="none"><circle cx="12" cy="9.1" r="3.1" /><path d="M6.3 19.9c.9-3.9 3-5.9 5.7-5.9s4.8 2 5.7 5.9c-1.6 1.1-3.5 1.7-5.7 1.7s-4.1-.6-5.7-1.7Z" /></svg></g><text x="435" y="300" fill="#ffffff" font-family="Verdana, Arial, Helvetica, sans-serif" font-size="74" font-weight="700">bliish.space</text><text x="435" y="350" fill="#ffffff" fill-opacity="0.88" font-family="Verdana, Arial, Helvetica, sans-serif" font-size="42" font-weight="400">a space for anyone</text></svg>
Side by side

After

Width:  |  Height:  |  Size: 834 B

BIN
public/static/brand/og-screenshot.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 62 KiB

BIN
public/static/brand/screenshot.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 273 KiB

32
public/static/brand/site.webmanifest Normal file
View file

@ -0,0 +1,32 @@
{
"name": "bliish.space",
"short_name": "bliish.space",
"description": "Bliish.space is an ultra-fast, lightweight, open-source social platform with customizable profiles, no ads, no tracking, and simple, affordable self-hosting.",
"start_url": "/",
"scope": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#592aab",
"icons": [
{
"src": "/favicon.svg",
"sizes": "any",
"type": "image/svg+xml"
},
{
"src": "/icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icon-512.png",
"sizes": "512x512",
"type": "image/png"
},
{
"src": "/icon-1024.png",
"sizes": "1024x1024",
"type": "image/png"
}
]
}

72
public/static/css/components/actions.css Normal file
View file

@ -0,0 +1,72 @@
.action-bar {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: var(--space-4) var(--space-6);
width: 100%;
}
.inline-actions {
margin: 0;
padding: 0;
}
.action-bar__primary,
.action-bar__secondary {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
}
.action-bar__primary {
flex: 1 1 auto;
min-width: 0;
}
.action-bar__secondary {
color: var(--color-text-muted);
flex: 0 1 auto;
font-size: var(--font-size-utility-action);
justify-content: flex-end;
margin-left: auto;
}
.action-bar__secondary a {
color: var(--color-text-muted);
}
.action-bar__secondary a:hover,
.action-bar__secondary a:active {
color: var(--color-link-hover);
}
.action-bar form {
align-items: center;
display: inline-flex;
flex-wrap: wrap;
gap: var(--space-3);
margin: 0;
}
.action-bar__primary :where(button, .button) {
--button-hover-text: var(--color-link-hover);
}
.action-bar__secondary button,
.action-bar__secondary .button {
min-height: auto;
padding: var(--space-2) var(--space-3);
}
.prop-count {
cursor: default;
}
.prop-count:hover,
.prop-count:active {
background: var(--button-bg);
box-shadow: var(--shadow-button);
color: var(--button-text);
transform: none;
}

84
public/static/css/components/avatars.css Normal file
View file

@ -0,0 +1,84 @@
.profile-image--profile {
aspect-ratio: 1 / 1;
height: auto;
width: var(--profile-photo-size);
}
.profile-image--edit-preview {
aspect-ratio: 1 / 1;
height: auto;
width: var(--profile-edit-photo-size);
}
.profile-image--avatar-compact {
aspect-ratio: 1 / 1;
height: auto;
width: var(--avatar-compact-size);
}
.profile-image-link {
border-radius: var(--radius-media);
color: inherit;
display: inline-flex;
line-height: 0;
max-width: 100%;
text-decoration: none;
width: fit-content;
}
.profile-image-link:hover,
.profile-image-link:active,
.profile-image-link:focus-visible {
text-decoration: none;
}
img.profile-image--profile,
img.profile-image--edit-preview,
img.profile-image--avatar-compact {
background: var(--color-surface-raised);
border: var(--border-thin) solid var(--color-text-muted);
border-radius: var(--radius-media);
box-shadow: var(--shadow-photo);
object-fit: cover;
}
.profile-placeholder {
align-items: center;
aspect-ratio: 1 / 1;
background: var(--color-surface-raised);
border: var(--border-medium) solid var(--color-brand-border);
border-radius: var(--radius-media);
box-shadow: var(--shadow-photo);
color: var(--color-brand);
display: inline-flex;
justify-content: center;
max-width: 100%;
overflow: hidden;
width: var(--avatar-size);
}
.profile-placeholder.profile-image--profile {
width: var(--profile-photo-size);
}
.profile-placeholder.profile-image--edit-preview {
width: var(--profile-edit-photo-size);
}
.profile-placeholder.profile-image--avatar-compact {
width: var(--avatar-compact-size);
}
.profile-placeholder .icon {
align-items: center;
display: flex;
height: 100%;
justify-content: center;
margin: 0;
width: 100%;
}
.profile-placeholder .icon svg {
height: var(--avatar-glyph-size);
width: var(--avatar-glyph-size);
}

23
public/static/css/components/badges.css Normal file
View file

@ -0,0 +1,23 @@
.count-badge {
align-items: center;
background: var(--count-badge-background, var(--color-brand-accent));
border-radius: var(--count-badge-radius, 999px);
color: var(--count-badge-color, var(--color-text-on-bright));
display: inline-flex;
flex: 0 0 auto;
font-size: var(--count-badge-font-size, var(--font-size-caption));
font-variant-numeric: tabular-nums;
font-weight: bold;
justify-content: center;
line-height: 1;
min-block-size: var(--count-badge-min-size, 1.5em);
min-inline-size: var(--count-badge-min-size, 1.5em);
padding: var(--count-badge-padding-y, 0) var(--count-badge-padding-x, var(--space-2));
text-align: center;
white-space: nowrap;
}
.count-badge--attention {
--count-badge-background: var(--color-danger);
--count-badge-color: var(--color-white);
}

43
public/static/css/components/color-swatches.css Normal file
View file

@ -0,0 +1,43 @@
.color-swatch-stack {
display: grid;
gap: var(--space-4);
}
.color-swatches {
background: var(--surface-background-tint);
border: var(--border-thin) solid var(--surface-border);
border-radius: var(--radius-panel);
box-shadow: var(--surface-shadow);
color: var(--color-text);
padding: var(--space-5);
}
.color-swatches__controls {
align-items: center;
column-gap: var(--space-8);
display: flex;
flex-wrap: wrap;
row-gap: var(--space-5);
}
.color-swatches__field {
align-items: center;
display: flex;
gap: var(--space-3);
justify-content: flex-start;
min-width: 0;
}
.color-swatches__field span {
font-size: var(--font-size-small);
font-weight: bold;
overflow-wrap: anywhere;
}
.color-swatches__field input {
flex: 0 0 auto;
height: var(--control-min-height);
min-height: var(--control-min-height);
padding: 0;
width: 3rem;
}

107
public/static/css/components/content.css Normal file
View file

@ -0,0 +1,107 @@
.content-card,
.context-card {
overflow-wrap: break-word;
word-break: break-word;
}
.page-frame > .content-card {
background: var(--color-brand-soft);
border: var(--border-thin) solid var(--surface-border);
border-radius: var(--radius-panel);
box-shadow: var(--surface-shadow);
display: grid;
gap: var(--space-7);
margin: 0;
padding: var(--space-5) var(--space-6);
}
.content-card > :where(h1, h2, h3, h4, p, ul, ol) {
margin: 0;
}
.content-card > :where(div) > :first-child {
margin-top: 0;
}
.content-card > :where(div) > :last-child {
margin-bottom: 0;
}
.user-content {
color: inherit;
overflow-wrap: break-word;
word-break: break-word;
}
.user-content > :first-child {
margin-top: 0;
}
.user-content > :last-child {
margin-bottom: 0;
}
.user-content :where(p, ul, ol, blockquote) {
margin: 0 0 var(--space-6);
}
.user-content :where(ul, ol) {
padding-left: var(--space-10);
}
.user-content li + li {
margin-top: var(--space-2);
}
.user-content :where(h2, h3) {
color: var(--color-brand);
line-height: var(--line-height-body);
margin: var(--space-8) 0 var(--space-4);
}
.user-content h2 {
border-bottom: var(--border-thin) solid var(--color-panel-rule);
font-size: 1.15em;
padding-bottom: var(--space-2);
}
.user-content h3 {
font-size: 1.05em;
}
.user-content blockquote {
background: var(--surface-background-soft);
border-left: var(--border-medium) solid var(--surface-border);
margin-left: 0;
margin-right: 0;
padding: var(--space-4) var(--space-5);
}
.user-content code {
background: var(--color-field);
border: var(--border-thin) solid var(--color-field-border);
border-radius: var(--radius-subtle);
font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
font-size: 0.95em;
padding: 0 var(--space-1);
}
.card-attribution {
font-style: italic;
}
.card-note {
color: var(--color-text-muted);
}
.context-card {
background: var(--surface-background-raised);
border: var(--border-thin) solid var(--color-brand-accent);
border-radius: var(--radius-panel);
box-shadow: var(--surface-shadow);
padding: var(--space-3);
}
.content-actions {
margin: 0;
}

84
public/static/css/components/discussion.css Normal file
View file

@ -0,0 +1,84 @@
.comments-panel {
margin: 0;
}
.discussion-list {
display: grid;
gap: var(--space-5);
margin: 0;
}
.discussion-list > * {
margin-block: 0;
}
.discussion-entry {
background: var(--surface-background-soft);
border: var(--border-thin) solid var(--surface-border-soft);
border-radius: var(--radius-panel);
box-shadow: var(--shadow-card);
display: grid;
grid-template-columns: var(--discussion-author-width) minmax(0, 1fr);
}
.discussion-entry--reply {
margin-left: var(--space-8);
}
.discussion-entry__author {
align-items: center;
background: var(--color-panel-accent);
color: var(--color-brand);
display: flex;
flex-direction: column;
gap: var(--space-3);
font-weight: bold;
justify-content: flex-start;
min-width: 0;
overflow-wrap: anywhere;
padding: var(--space-4);
text-align: center;
}
.discussion-entry__body {
background: var(--surface-background-soft);
border-left: var(--border-thin) solid var(--surface-background);
min-width: 0;
padding: var(--space-5);
}
.discussion-entry__meta {
color: var(--color-text-muted);
font-size: var(--font-size-small);
margin-bottom: var(--space-2);
}
.discussion-entry__actions {
border-top: var(--border-thin) solid var(--surface-rule);
margin-top: var(--space-4);
padding-top: var(--space-3);
}
.reply-action {
max-width: 100%;
}
.reply-action > summary.button {
list-style: none;
}
.reply-action > summary.button::-webkit-details-marker {
display: none;
}
.reply-action[open] {
flex: 1 1 100%;
}
.reply-action .composer {
margin-top: var(--space-4);
}
.discussion-entry * {
max-width: 100%;
}

22
public/static/css/components/formatting-help.css Normal file
View file

@ -0,0 +1,22 @@
.formatting-help {
display: grid;
gap: var(--space-4);
}
.formatting-help > :where(h1, h2, h3, p) {
margin: 0;
}
.formatting-help__examples {
display: grid;
gap: var(--space-2);
}
.formatting-help code {
background: var(--color-field);
border: var(--border-thin) solid var(--color-field-border);
display: block;
font-size: var(--font-size-small);
overflow-wrap: anywhere;
padding: var(--space-2);
}

170
public/static/css/components/forms.css Normal file
View file

@ -0,0 +1,170 @@
.form-stack {
display: grid;
gap: var(--space-7);
max-width: 100%;
}
.form-stack.inline-actions {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: var(--space-4);
justify-content: center;
}
.form-stack.inline-actions :where(button, .button) {
width: auto;
}
.search-form {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
max-width: 100%;
}
.search-form input {
flex: 1 1 12rem;
min-width: 0;
}
.search-form button {
flex: 0 0 auto;
}
.form-message {
align-items: flex-start;
background: var(--surface-background-soft);
border: var(--border-thin) solid var(--surface-border-soft);
border-radius: var(--radius-panel);
color: var(--color-text);
display: flex;
gap: var(--space-4);
margin: 0;
max-width: 100%;
padding: var(--space-4) var(--space-5);
text-align: left;
}
.form-stack > .form-message,
.composer > .form-message {
margin: 0;
}
.form-error {
background: var(--color-danger-soft);
border-color: var(--color-danger-border);
color: var(--color-danger-text);
}
.form-success {
background: var(--color-success-soft);
border-color: var(--color-success-border);
color: var(--color-success-text);
}
.form-message--error::before,
.form-message--success::before {
flex: 0 0 auto;
font-weight: bold;
line-height: var(--line-height-body);
}
.form-message--error,
.form-message--success {
align-items: center;
justify-content: center;
text-align: center;
}
.form-message--error::before {
color: var(--color-danger);
content: "\00d7";
}
.form-message--success::before {
color: var(--color-success-text);
content: "\2713";
}
.raid-banner::before {
content: none;
}
.raid-banner {
display: block;
text-align: center;
}
.raid-banner .icon {
color: var(--color-danger);
display: inline-flex;
margin-inline-end: var(--icon-label-gap);
}
.raid-banner > span:not(.icon) {
display: inline;
}
.form-field {
display: grid;
gap: var(--space-3);
max-width: 100%;
}
.form-field__label {
font-weight: bold;
}
.form-field__label-link {
font-size: var(--font-size-small);
font-weight: normal;
margin-inline-start: var(--space-4);
}
.form-field__hint,
.form-actions__hint {
color: var(--color-text-muted);
font-size: var(--font-size-small);
}
.form-field > :where(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="button"]):not([type="reset"]):not([type="submit"]):not([type="image"]), textarea, select) {
width: 100%;
}
.form-actions {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: var(--space-4);
}
.form-actions__hint {
align-items: center;
display: inline-flex;
min-height: var(--control-min-height);
}
.form-options {
display: grid;
gap: var(--space-5);
}
.form-checks {
display: grid;
gap: var(--space-3);
}
.form-checks label {
align-items: center;
display: inline-flex;
gap: var(--space-3);
}
.character-limit-hint {
color: var(--color-text-muted);
font-size: var(--font-size-caption);
font-style: italic;
line-height: var(--line-height-body);
}

84
public/static/css/components/groups.css Normal file
View file

@ -0,0 +1,84 @@
.community-panel__body {
align-items: start;
display: grid;
gap: var(--space-6);
padding: var(--space-6) var(--space-7) var(--space-7);
}
.community-panel__summary {
min-width: 0;
}
.community-panel__list {
display: flex;
flex-wrap: wrap;
gap: var(--space-5);
min-width: 0;
}
.community-panel__list--single-line {
flex-wrap: nowrap;
overflow: hidden;
}
.community-panel p {
margin: 0;
padding: 0;
}
.community-panel__more {
flex: 0 0 auto;
font-size: var(--font-size-caption);
text-align: right;
}
.community-card {
background: var(--color-brand-soft);
border: var(--border-thin) solid var(--surface-border);
border-radius: var(--radius-panel);
box-shadow: var(--surface-shadow);
display: grid;
flex: 0 1 calc((100% - (var(--space-5) * 2)) / 3);
gap: var(--space-5);
min-width: 0;
padding: var(--space-6);
}
.community-card__name {
color: var(--color-brand);
font-size: var(--font-size-card-heading);
line-height: var(--line-height-body);
margin: 0;
overflow-wrap: anywhere;
}
.community-card__description {
color: var(--color-text);
display: -webkit-box;
line-height: var(--line-height-body);
min-width: 0;
overflow: hidden;
overflow-wrap: anywhere;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
@media (max-width: 48em) {
.community-card {
flex-basis: calc((100% - var(--space-5)) / 2);
}
.community-panel__list--single-line > .community-card:nth-child(n + 3) {
display: none;
}
}
@media (max-width: 30em) {
.community-card {
flex-basis: 100%;
}
.community-panel__list--single-line > .community-card {
flex-basis: calc((100% - var(--space-5)) / 2);
}
}

66
public/static/css/components/links.css Normal file
View file

@ -0,0 +1,66 @@
.link-list {
list-style: none;
margin: 0;
padding: 0;
}
.link-list li {
align-items: center;
display: inline-flex;
}
.link-list li + li::before {
color: var(--link-separator-color, var(--color-text));
content: "|";
margin: 0 var(--link-separator-gap);
}
.inline-links {
display: inline;
}
.inline-links__item {
white-space: nowrap;
}
.inline-links__item + .inline-links__item::before {
color: var(--link-separator-color, var(--color-text));
content: "|";
display: inline-block;
margin: 0 var(--link-separator-gap);
text-decoration: none;
}
.social-link-label {
align-items: center;
display: inline-flex;
gap: var(--space-2);
}
.social-link-icon {
display: block;
flex: 0 0 auto;
height: var(--icon-size);
width: var(--icon-size);
}
.page-back-link {
color: var(--color-text-muted);
font-size: var(--font-size-small);
line-height: 1.1;
}
.page-back-link a {
align-items: center;
display: inline-flex;
gap: var(--space-2);
}
.page-back-link__arrow {
line-height: 1;
}
.page-frame > .page-back-link:first-child {
margin-bottom: var(--space-2);
margin-top: var(--space-6);
}

12
public/static/css/components/metadata.css Normal file
View file

@ -0,0 +1,12 @@
.preview-title {
font-weight: bold;
}
.timestamp {
color: var(--color-text-muted);
font-style: italic;
}
.meta-subject {
font-weight: bold;
}

8
public/static/css/components/pagination.css Normal file
View file

@ -0,0 +1,8 @@
.pagination {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
justify-content: center;
margin: var(--space-7) 0 0;
}

74
public/static/css/components/panels.css Normal file
View file

@ -0,0 +1,74 @@
.panel {
--panel-body-background: var(--color-surface);
--panel-border-color: var(--color-brand-accent);
--panel-border-width: var(--border-medium);
--panel-heading-background: var(--color-brand-accent);
--panel-heading-border: var(--panel-border-color);
--panel-heading-color: var(--color-text-on-bright);
background: var(--panel-body-background);
border: var(--panel-border-width) solid var(--panel-border-color);
border-radius: var(--radius-panel);
box-shadow: var(--surface-shadow);
overflow: hidden;
width: 100%;
}
.panel--soft {
--panel-border-color: var(--color-panel-accent);
--panel-border-width: var(--border-thin);
--panel-heading-background: var(--color-panel-accent);
--panel-heading-border: var(--color-panel-rule);
--panel-heading-color: var(--color-brand);
}
.panel--strong {
--panel-body-background: var(--color-surface);
}
.panel__heading {
align-items: baseline;
background: var(--panel-heading-background);
border-bottom: var(--border-thin) solid var(--panel-heading-border);
color: var(--panel-heading-color);
display: grid;
gap: var(--space-6);
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
min-width: 0;
padding: var(--space-1) var(--space-4);
}
.panel__heading h1,
.panel__heading h2,
.panel__heading h3,
.panel__heading h4 {
display: inline-block;
font-size: var(--font-size-panel-heading);
grid-column: 2;
justify-self: center;
line-height: var(--line-height-body);
margin: 0;
min-width: 0;
overflow-wrap: anywhere;
text-align: center;
}
.panel__body {
align-content: start;
background: var(--panel-body-background);
display: grid;
gap: var(--panel-body-gap);
padding: var(--space-4);
}
.panel__body > * {
margin-block: 0;
}
.panel__action {
flex: 0 0 auto;
font-size: var(--font-size-caption);
grid-column: 3;
justify-self: end;
text-align: right;
}

177
public/static/css/components/people.css Normal file
View file

@ -0,0 +1,177 @@
.people-panel__body {
align-items: start;
display: grid;
gap: var(--space-6);
padding: var(--space-6) var(--space-7) var(--space-7);
}
.people-panel__summary {
min-width: 0;
}
.people-panel__list {
display: flex;
flex-wrap: wrap;
gap: var(--space-6);
min-width: 0;
}
.people-panel__list--single-line {
flex-wrap: nowrap;
gap: 0;
justify-content: space-evenly;
overflow: hidden;
}
.people-panel__list--single-line > .person-card {
flex: 0 0 var(--person-card-width);
}
@supports selector(:has(*)) {
.people-panel__list--single-line:has(> .person-card:only-child) {
justify-content: center;
}
}
@supports (container-type: inline-size) {
.people-panel__body {
container-type: inline-size;
}
.people-panel__list--single-line > .person-card {
display: none;
}
.people-panel__list--single-line > .person-card:nth-child(1) {
display: inline-block;
}
@container (min-width: 170px) {
.people-panel__list--single-line > .person-card:nth-child(-n + 2) {
display: inline-block;
}
}
@container (min-width: 260px) {
.people-panel__list--single-line > .person-card:nth-child(-n + 3) {
display: inline-block;
}
}
@container (min-width: 350px) {
.people-panel__list--single-line > .person-card:nth-child(-n + 4) {
display: inline-block;
}
}
@container (min-width: 440px) {
.people-panel__list--single-line > .person-card:nth-child(-n + 5) {
display: inline-block;
}
}
@container (min-width: 530px) {
.people-panel__list--single-line > .person-card:nth-child(-n + 6) {
display: inline-block;
}
}
}
.people-panel p {
margin: 0;
padding: 0;
}
.people-panel__more {
flex: 0 0 auto;
font-size: var(--font-size-caption);
text-align: right;
}
.person-card {
align-self: flex-start;
display: inline-block;
margin: 0;
min-height: var(--person-card-min-height);
text-align: center;
width: var(--person-card-width);
}
.person-card__identity {
display: block;
}
.person-card__identity--link {
color: var(--color-link);
cursor: pointer;
}
.person-card__identity--disabled {
color: var(--color-text);
cursor: default;
}
.person-card__name {
font-weight: bold;
overflow-wrap: break-word;
text-align: center;
}
.person-card__image {
background: var(--surface-background-raised);
border: var(--border-thin) solid var(--surface-border);
border-radius: var(--radius-media);
box-shadow: var(--shadow-photo);
display: block;
margin: 0 auto var(--space-3);
max-height: var(--avatar-size);
max-width: var(--person-card-width);
object-fit: cover;
}
.person-card .profile-placeholder {
display: flex;
margin: 0 auto var(--space-3);
max-height: var(--avatar-size);
max-width: var(--person-card-width);
}
.person-list-card {
align-items: center;
background: var(--surface-background-tint);
border: var(--border-thin) solid var(--surface-border);
border-radius: var(--radius-panel);
box-shadow: var(--surface-shadow);
display: flex;
flex-wrap: wrap;
gap: var(--space-6);
justify-content: space-between;
margin: 0;
padding: var(--space-5);
width: 100%;
}
.person-list-card__identity {
align-items: center;
display: inline-flex;
gap: var(--space-5);
min-width: 0;
}
.person-list-card__name {
font-weight: bold;
overflow-wrap: anywhere;
}
.person-list-card__actions,
.person-list-card__actions form {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: var(--space-4);
}
.person-list-card__actions {
justify-content: flex-end;
margin-left: auto;
}

136
public/static/css/components/posts.css Normal file
View file

@ -0,0 +1,136 @@
.post-panel {
margin: 0;
}
.post-panel--author-skin-bleed {
overflow: visible;
}
.composer {
background: var(--surface-background-raised);
border: var(--border-thin) solid var(--surface-border);
border-radius: var(--radius-panel);
margin: 0;
padding: var(--space-5);
}
.composer input[type="text"],
.composer textarea {
max-width: 100%;
width: 100%;
}
.composer__actions {
display: grid;
gap: var(--space-2);
margin-top: var(--space-4);
}
.composer__controls {
align-items: center;
display: grid;
gap: var(--space-4);
grid-template-columns: minmax(0, 1fr) auto;
}
.composer__controls input[type="file"] {
min-width: 0;
width: 100%;
}
.composer__controls button {
white-space: nowrap;
}
.composer__limit {
display: block;
justify-self: end;
text-align: right;
}
.composer--reply {
background: var(--surface-background);
border-color: var(--surface-rule);
margin: 0;
padding: var(--space-4);
}
.post-list {
display: grid;
gap: var(--list-stack-gap);
}
.post-list > * {
margin-block: 0;
}
.post-list:has(> [data-author-skin-backdrop="container"]) {
gap: 0;
}
.post-list:has(> [data-author-skin-backdrop="container"]) > .post-card + .post-card {
margin-top: var(--list-stack-gap);
}
.post-card {
background: var(--surface-background);
border: var(--border-thin) solid var(--surface-border);
border-radius: var(--radius-panel);
box-shadow: var(--surface-shadow);
overflow-wrap: break-word;
padding: var(--space-5);
word-break: break-word;
}
.post-card__bump {
border-left: var(--border-medium) solid var(--surface-rule);
color: var(--color-text-muted);
font-style: italic;
margin: 0 0 var(--space-4);
padding-left: var(--space-4);
}
.post-card__bump small {
font-style: normal;
white-space: nowrap;
}
.post-card__header {
align-items: start;
display: grid;
gap: var(--space-5);
grid-template-columns: auto minmax(0, 1fr);
margin-bottom: var(--space-4);
}
.post-card__meta p {
margin: 0;
}
.post-card__body {
margin: var(--space-5) 0;
}
.post-card__body > :first-child {
margin-top: 0;
}
.post-card__media {
background: var(--surface-background-raised);
border: var(--border-thin) solid var(--surface-border);
border-radius: var(--radius-media);
display: block;
height: auto;
margin: var(--space-5) 0;
max-width: 100%;
}
.post-card__actions {
border-top: var(--border-thin) solid var(--surface-rule);
margin-top: var(--space-5);
padding-top: var(--space-4);
}
.post-comments {
margin-top: 0;
}

50
public/static/css/components/tables.css Normal file
View file

@ -0,0 +1,50 @@
.details-table,
.listing-table {
overflow-wrap: break-word;
width: 100%;
word-break: break-word;
}
.details-table td:first-child {
background: var(--color-brand-soft);
border-right: var(--border-thin) solid var(--surface-border);
color: var(--color-brand);
font-weight: bold;
width: var(--details-label-width);
}
.details-table td {
background: var(--surface-background-raised);
padding: var(--table-cell-y) var(--table-cell-x);
vertical-align: top;
}
.details-table td p {
margin: 0;
}
.listing-table {
border-collapse: collapse;
border-spacing: 0;
}
.listing-table th,
.listing-table td {
border: var(--border-thin) solid var(--color-text);
padding: var(--table-cell-y) var(--table-cell-x);
text-align: center;
vertical-align: top;
}
.listing-table th {
background: var(--color-brand-soft);
color: var(--color-brand);
}
.listing-table tr:nth-child(even) td {
background: var(--color-row-alt);
}
.listing-table td * {
max-width: 100%;
}

253
public/static/css/core/base.css Normal file
View file

@ -0,0 +1,253 @@
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
}
body {
background: var(--color-page);
background-image: var(--page-background);
color: var(--color-text);
font-family: var(--font-body);
line-height: var(--line-height-body);
}
@supports (padding-top: env(safe-area-inset-top)) {
body {
background:
linear-gradient(to bottom, var(--color-brand-header) env(safe-area-inset-top, 0px), transparent 0),
var(--page-background),
var(--color-page);
}
}
a {
color: var(--color-link);
text-decoration: none;
text-decoration-thickness: var(--text-decoration-hairline);
text-underline-offset: var(--text-underline-offset);
}
a:hover,
a:active {
color: var(--color-link-hover);
text-decoration: underline;
}
p,
li {
font-size: var(--font-size-small);
}
img {
max-width: 100%;
}
button,
input,
textarea,
select {
font: inherit;
}
button,
:where(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="button"]):not([type="reset"]):not([type="submit"]):not([type="image"])),
:where(textarea),
:where(select) {
border-radius: var(--radius-subtle);
}
:where(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="button"]):not([type="reset"]):not([type="submit"]):not([type="image"])),
:where(textarea),
:where(select) {
background: var(--color-field);
border: var(--border-thin) solid var(--color-field-border);
border-color: var(--color-field-border-dark) var(--color-field-border-light) var(--color-field-border-light) var(--color-field-border-dark);
box-shadow: var(--shadow-field);
max-width: 100%;
min-height: var(--control-min-height);
padding: var(--control-pad-y) var(--control-pad-x);
}
input[type="file"] {
max-width: 100%;
}
input:disabled,
input[readonly],
textarea:disabled,
select:disabled {
background: var(--color-field-disabled);
color: var(--color-text-muted);
}
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.button {
--button-bg: var(--color-button-primary-bg);
--button-text: var(--color-button-primary-text);
--button-border-light: var(--color-button-primary-border-light);
--button-border-dark: var(--color-button-primary-border-dark);
--button-hover-bg: var(--color-button-primary-hover-bg);
--button-hover-text: var(--color-button-primary-hover-text);
align-items: center;
background: var(--button-bg);
border: var(--border-thin) solid var(--button-border-dark);
border-color: var(--button-border-light) var(--button-border-dark) var(--button-border-dark) var(--button-border-light);
border-radius: var(--radius-subtle);
box-shadow: var(--shadow-button);
color: var(--button-text);
cursor: pointer;
display: inline-flex;
justify-content: center;
min-height: var(--control-min-height);
padding: var(--control-pad-y) var(--control-pad-x);
text-align: center;
text-decoration: none;
}
button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
.button:hover {
background: var(--button-hover-bg);
color: var(--button-hover-text);
text-decoration: none;
}
button:active,
input[type="button"]:active,
input[type="reset"]:active,
input[type="submit"]:active,
.button:active {
box-shadow: var(--shadow-pressed);
transform: translate(var(--button-active-shift), var(--button-active-shift));
}
.button--secondary {
--button-bg: var(--color-button-secondary-bg);
--button-text: var(--color-button-secondary-text);
--button-border-light: var(--color-button-secondary-border-light);
--button-border-dark: var(--color-button-secondary-border-dark);
--button-hover-bg: var(--color-button-secondary-hover-bg);
--button-hover-text: var(--color-button-secondary-hover-text);
}
.button--danger {
--button-bg: var(--color-button-danger-bg);
--button-text: var(--color-button-danger-text);
--button-border-light: var(--color-button-danger-border-light);
--button-border-dark: var(--color-button-danger-border-dark);
--button-hover-bg: var(--color-button-danger-hover-bg);
--button-hover-text: var(--color-button-danger-hover-text);
}
.button--selected {
--button-bg: var(--color-button-primary-bg);
--button-text: var(--color-button-primary-text);
--button-border-light: var(--color-button-primary-border-light);
--button-border-dark: var(--color-button-primary-border-dark);
--button-hover-bg: var(--color-button-primary-hover-bg);
--button-hover-text: var(--color-button-primary-hover-text);
}
button:disabled,
input[type="button"]:disabled,
input[type="reset"]:disabled,
input[type="submit"]:disabled {
cursor: not-allowed;
opacity: var(--disabled-opacity);
transform: none;
}
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
a:focus-visible,
summary:focus-visible {
outline: var(--focus-outline-width) solid var(--color-focus);
outline-offset: var(--focus-offset);
}
a:focus-visible,
summary:focus-visible {
background: var(--color-link-focus-bg);
}
textarea {
min-width: 0;
width: 100%;
max-width: 100%;
resize: vertical;
}
.text-editor {
min-height: 18rem;
resize: vertical;
white-space: pre-wrap;
}
.text-editor--short {
min-height: 7rem;
}
.text-block {
max-width: 100%;
overflow: auto;
white-space: break-spaces;
}
table {
max-width: 100%;
}
audio {
max-width: 100%;
width: var(--audio-width);
}
.flush-heading {
margin: 0;
}
.inline-form {
display: inline;
}
.icon {
display: inline-flex;
flex: 0 0 auto;
margin: 0;
vertical-align: var(--icon-offset-y);
}
:where(a, button, span, summary):has(> .icon) {
align-items: center;
display: inline-flex;
gap: var(--icon-label-gap);
}
.icon svg {
display: block;
height: var(--icon-size);
stroke: currentColor;
width: var(--icon-size);
}
.count {
color: var(--count-color, var(--color-link));
}
a:hover .count,
a:active .count {
color: inherit;
}

10
public/static/css/core/flow.css Normal file
View file

@ -0,0 +1,10 @@
.page-frame > *,
.split-layout__pane > * {
margin-block: 0;
}
.page-frame > .page-heading:first-child,
.page-frame > h1:first-child,
.page-frame > .post-card:first-child {
margin-top: var(--space-6);
}

82
public/static/css/core/layout.css Normal file
View file

@ -0,0 +1,82 @@
.master-container {
background: var(--color-canvas);
border-left: var(--border-thin) solid var(--color-container-border);
border-right: var(--border-thin) solid var(--color-container-border);
display: flex;
flex-direction: column;
margin: auto;
max-width: 100%;
min-height: var(--container-min-height);
width: var(--container-width);
}
main {
background: var(--color-canvas);
flex: 1 0 auto;
font-size: var(--font-size-main);
overflow-wrap: break-word;
padding: var(--space-main-y) var(--space-main-x);
}
.split-layout {
align-items: start;
min-width: 0;
}
.split-layout--messages {
display: grid;
gap: var(--layout-stack-gap);
}
.split-layout__pane {
align-content: start;
display: grid;
gap: var(--layout-stack-gap);
min-width: 0;
padding: var(--space-6);
}
.split-layout--messages > .split-layout__pane {
padding: 0;
}
.page-frame {
align-content: start;
display: grid;
gap: var(--layout-stack-gap);
margin: 0 auto var(--space-11);
max-width: 100%;
overflow-wrap: break-word;
padding: 0 var(--space-5);
}
.page-frame--narrow {
width: var(--content-measure);
}
.page-frame--wide {
width: min(100%, calc(var(--container-width) - var(--space-10)));
}
.page-frame--full {
width: 100%;
}
.page-heading {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: var(--space-5);
justify-content: space-between;
min-width: 0;
}
.page-heading__title {
margin: 0;
min-width: 0;
overflow-wrap: anywhere;
}
.page-heading__actions {
flex: 0 0 auto;
}

220
public/static/css/core/tokens.css Normal file
View file

@ -0,0 +1,220 @@
:root {
color-scheme: light;
--color-white: #ffffff;
--color-ink: #1a1a1a;
/* App theme values written by admin branding. Profile skins use these as fallbacks. */
--app-theme-chrome: #7c3aed;
--app-theme-chrome-text: var(--color-white);
--app-theme-accent: #7c3aed;
--app-theme-accent-text: var(--color-white);
--app-theme-link: #6b21a8;
--app-theme-backdrop: #e6e3ea;
--app-theme-page: #ffffff;
--app-theme-surface: #ffffff;
--app-theme-page-text: var(--color-ink);
--app-theme-surface-text: var(--app-theme-page-text);
--app-theme-link-hover: color-mix(in srgb, var(--app-theme-link) 68%, var(--app-theme-page-text));
--app-theme-surface-link: var(--app-theme-link);
--app-theme-surface-link-hover: var(--app-theme-link-hover);
--app-theme-muted: #6b7280;
--app-theme-focus: #f59e0b;
/* Theme source tokens for the app shell and component palette. */
--theme-chrome: var(--app-theme-chrome);
--theme-chrome-text: var(--app-theme-chrome-text);
--theme-accent: var(--app-theme-accent);
--theme-accent-text: var(--app-theme-accent-text);
--theme-link: var(--app-theme-link);
--theme-backdrop: var(--app-theme-backdrop);
--theme-page: var(--app-theme-page);
--theme-surface: var(--app-theme-surface);
--theme-page-text: var(--app-theme-page-text);
--theme-surface-text: var(--theme-page-text);
--theme-link-hover: color-mix(in srgb, var(--theme-link) 68%, var(--theme-page-text));
--theme-surface-link: var(--theme-link);
--theme-surface-link-hover: var(--theme-link-hover);
--theme-muted: var(--app-theme-muted);
--theme-danger: #d32626;
--theme-danger-text: var(--theme-danger);
--theme-success: #34d399;
--theme-success-ink: var(--color-ink);
--theme-success-text: #047857;
--theme-focus: var(--app-theme-focus);
/* Background texture for the default app shell. */
--theme-page-grid-a: color-mix(in srgb, var(--theme-backdrop) 88%, white);
--theme-page-grid-b: color-mix(in srgb, var(--theme-backdrop) 94%, black);
--theme-toggle-dark-display: inline-flex;
--theme-toggle-light-display: none;
--font-body: Verdana, Arial, Helvetica, sans-serif;
--line-height-body: 1.225;
--font-size-main: 80%;
--font-size-footer: 70%;
--font-size-note: 90%;
--font-size-caption: 80%;
--font-size-small: max(0.875em, 12px);
--font-size-nav: 10pt;
--font-size-nav-link: max(0.98em, 12px);
--font-size-utility-action: max(var(--font-size-caption), 12px);
--font-size-card-heading: 1.17em;
--font-size-panel-heading: 1.06em;
--font-size-profile-heading: 1.5em;
--container-width: 960px;
--container-min-height: 100dvh;
--content-measure: 600px;
--nav-side-min: 130px;
--audio-width: 190px;
--avatar-size: 80px;
--avatar-compact-size: 48px;
--profile-photo-size: 235px;
--profile-edit-photo-size: 180px;
--person-card-width: var(--avatar-size);
--person-card-min-height: 100px;
--profile-person-card-width: 105px;
--details-label-width: 33%;
--discussion-author-width: calc(var(--avatar-compact-size) + var(--space-12));
--column-compact: 20%;
--column-profile: 40%;
--column-wide: 60%;
--column-aside-min: 9rem;
--profile-sidebar-min: calc(var(--profile-photo-size) + (var(--space-6) * 2));
--space-1: 2px;
--space-2: 4px;
--space-3: 5px;
--space-4: 7px;
--space-5: 8px;
--space-6: 10px;
--space-7: 12px;
--space-8: 14px;
--space-9: 15px;
--space-10: 20px;
--space-11: 30px;
--space-12: 40px;
--layout-stack-gap: var(--space-8);
--panel-body-gap: var(--space-7);
--list-stack-gap: var(--space-7);
--space-main-y: 0;
--space-main-x: 0;
--space-nav-links-y: 6px;
--space-nav-links-x: 16px;
--link-separator-gap: 0.45em;
--article-title-offset: 3px;
--icon-label-gap: 0.35em;
--icon-offset-y: -0.22em;
--border-thin: 1px;
--border-medium: 2px;
--radius-panel-default: 0;
--radius-media-default: 0;
--radius-panel: var(--radius-panel-default);
--radius-media: var(--radius-media-default);
--radius-control-default: 2px;
--radius-subtle: var(--radius-control-default);
--text-decoration-hairline: 0.5px;
--text-underline-offset: 2px;
--icon-size: 1.2em;
--brand-icon-size: 2em;
--avatar-glyph-size: 70%;
--control-min-height: 24px;
--control-pad-y: var(--space-1);
--control-pad-x: var(--space-3);
--button-active-shift: 1px;
--disabled-opacity: 0.68;
--focus-outline-width: 2px;
--focus-offset: 1px;
--table-cell-y: var(--space-3);
--table-cell-x: 6px;
--contact-cell-min-height: 32px;
--nav-search-width: 170px;
--nav-link-min-height: 24px;
}
:root,
[data-skin-page],
[data-author-skin-page] {
/* Shared resolver: admin themes and profile skins both feed --theme-* here. */
--color-page: var(--theme-backdrop);
--color-canvas: var(--theme-page);
--color-surface: var(--theme-surface);
--color-surface-raised: color-mix(in srgb, var(--color-surface) 94%, var(--color-brand-accent));
--color-surface-tint: color-mix(in srgb, var(--color-surface) 90%, var(--color-brand-accent));
--color-text: var(--theme-page-text);
--color-text-muted: var(--theme-muted);
--color-text-on-bright: var(--theme-chrome-text);
--color-link: var(--theme-link);
--color-link-hover: var(--theme-link-hover);
--color-brand: var(--theme-surface-link);
--color-brand-accent: var(--theme-chrome);
--color-brand-header: color-mix(in srgb, var(--color-brand-accent) 72%, black);
--color-brand-nav: color-mix(in srgb, var(--color-brand-accent) 88%, black);
--color-brand-soft: color-mix(in srgb, var(--color-surface) 84%, var(--color-brand-accent));
--color-brand-border: color-mix(in srgb, var(--color-white) 54%, var(--color-brand-accent));
--color-panel-accent: var(--color-brand-soft);
--color-panel-accent-soft: color-mix(in srgb, var(--color-surface) 94%, var(--color-brand-accent));
--color-panel-rule: color-mix(in srgb, var(--color-brand-border) 72%, var(--color-white));
--color-container-border: color-mix(in srgb, var(--color-page) 70%, var(--color-brand-accent));
--color-danger: var(--theme-danger);
--color-danger-text: var(--theme-danger-text);
--color-danger-soft: color-mix(in srgb, var(--color-surface) 88%, var(--color-danger));
--color-danger-border: color-mix(in srgb, var(--color-white) 52%, var(--color-danger));
--color-success: var(--theme-success);
--color-success-ink: var(--theme-success-ink);
--color-success-text: var(--theme-success-text);
--color-success-soft: color-mix(in srgb, var(--color-surface) 86%, var(--color-success));
--color-success-border: color-mix(in srgb, var(--color-white) 52%, var(--color-success));
--color-field: color-mix(in srgb, var(--color-surface) 98%, var(--color-canvas));
--color-field-disabled: color-mix(in srgb, var(--color-surface) 88%, var(--color-text));
--color-field-border-light: var(--color-white);
--color-field-border: color-mix(in srgb, var(--color-ink) 42%, var(--color-white));
--color-field-border-dark: color-mix(in srgb, var(--color-ink) 62%, var(--color-white));
--color-focus: var(--theme-focus);
--color-link-focus-bg: var(--color-surface-tint);
--color-row-alt: var(--color-surface-tint);
--color-shadow-panel: color-mix(in srgb, var(--color-surface) 70%, var(--color-page));
--color-shadow-soft: color-mix(in srgb, var(--color-white) 70%, var(--color-ink));
--color-shadow-pressed: color-mix(in srgb, var(--color-ink) 55%, black);
--color-shadow-card: color-mix(in srgb, var(--color-surface) 68%, var(--color-page));
--color-button-primary-bg: var(--theme-accent);
--color-button-primary-text: var(--theme-accent-text);
--color-button-primary-border-light: color-mix(in srgb, var(--color-white) 54%, var(--color-button-primary-bg));
--color-button-primary-border-dark: color-mix(in srgb, var(--color-button-primary-bg) 68%, black);
--color-button-primary-hover-bg: var(--color-button-primary-border-dark);
--color-button-primary-hover-text: var(--color-button-primary-text);
--color-button-secondary-bg: var(--color-surface);
--color-button-secondary-text: var(--color-brand);
--color-button-secondary-border-light: var(--color-surface-tint);
--color-button-secondary-border-dark: var(--color-brand-border);
--color-button-secondary-hover-bg: var(--color-surface-tint);
--color-button-secondary-hover-text: var(--theme-surface-link-hover);
--color-button-danger-bg: var(--color-surface);
--color-button-danger-text: var(--color-danger-text);
--color-button-danger-border-light: var(--color-danger-border);
--color-button-danger-border-dark: var(--color-danger);
--color-button-danger-hover-bg: var(--color-danger-soft);
--color-button-danger-hover-text: var(--color-danger);
--surface-background: var(--color-surface);
--surface-background-raised: var(--color-surface-raised);
--surface-background-soft: var(--color-panel-accent-soft);
--surface-background-tint: var(--color-surface-tint);
--surface-border: var(--color-brand-border);
--surface-border-soft: var(--color-panel-accent);
--surface-rule: var(--color-panel-rule);
--surface-shadow: var(--shadow-panel);
--page-background: repeating-linear-gradient(0deg, var(--theme-page-grid-a) 0, var(--theme-page-grid-a) var(--border-thin), var(--theme-page-grid-b) var(--border-thin), var(--theme-page-grid-b) var(--border-medium));
--shadow-panel: var(--border-thin) var(--border-thin) 0 var(--color-white), var(--border-medium) var(--border-medium) 0 var(--color-shadow-panel);
--shadow-button: inset var(--border-thin) var(--border-thin) 0 var(--button-border-light), var(--border-thin) var(--border-thin) 0 var(--button-border-dark);
--shadow-field: inset var(--border-thin) var(--border-thin) var(--border-thin) var(--color-shadow-soft);
--shadow-pressed: inset var(--border-thin) var(--border-thin) var(--border-thin) var(--color-shadow-pressed);
--shadow-photo: var(--border-medium) var(--border-medium) 0 var(--color-shadow-soft);
--shadow-card: var(--border-medium) var(--border-medium) 0 var(--color-shadow-card);
--column-divider-shadow: inset calc(var(--border-thin) * -1) 0 0 var(--color-surface), inset calc(var(--border-medium) * -1) 0 0 var(--color-panel-accent-soft);
accent-color: var(--color-brand);
}

517
public/static/css/features/profile.css Normal file
View file

@ -0,0 +1,517 @@
[data-author-skin-page] {
--skin-palette-accent: initial;
--skin-palette-accent-text: initial;
--skin-palette-backdrop: initial;
--skin-palette-chrome: initial;
--skin-palette-chrome-text: initial;
--skin-palette-focus: initial;
--skin-palette-link: initial;
--skin-palette-link-hover: initial;
--skin-palette-muted: initial;
--skin-palette-page: initial;
--skin-palette-page-text: initial;
--skin-palette-surface: initial;
--skin-palette-surface-link-hover: initial;
--skin-palette-surface-text: initial;
}
[data-skin-page],
[data-author-skin-page] {
--skin-accent: var(--skin-palette-accent, var(--app-theme-accent));
--skin-accent-text: var(--skin-palette-accent-text, var(--app-theme-accent-text));
--skin-backdrop: var(--skin-palette-backdrop, var(--app-theme-backdrop));
--skin-background: var(--skin-palette-page, var(--app-theme-page));
--skin-link: var(--skin-palette-link, var(--app-theme-surface-link));
--skin-panel-background: var(--skin-palette-surface, var(--app-theme-surface));
--skin-panel-heading-background: var(--skin-palette-chrome, var(--app-theme-chrome));
--skin-panel-heading-text: var(--skin-palette-chrome-text, var(--app-theme-chrome-text));
--skin-panel-text: var(--skin-palette-surface-text, var(--app-theme-surface-text));
--skin-radius: 0;
--skin-radius-control: var(--radius-control-default);
--skin-radius-panel: var(--skin-radius);
--skin-radius-photo: var(--skin-radius);
--skin-text: var(--skin-palette-page-text, var(--app-theme-page-text));
--skin-link-hover: var(--skin-palette-link-hover, var(--app-theme-link-hover));
--skin-surface-link-hover: var(--skin-palette-surface-link-hover, var(--app-theme-surface-link-hover));
--skin-muted: var(--skin-palette-muted, var(--app-theme-muted));
--skin-focus: var(--skin-palette-focus, var(--app-theme-focus));
--theme-backdrop: var(--skin-backdrop);
--theme-page: var(--skin-background);
--theme-surface: var(--skin-panel-background);
--theme-chrome: var(--skin-panel-heading-background);
--theme-chrome-text: var(--skin-panel-heading-text);
--theme-accent: var(--skin-accent);
--theme-accent-text: var(--skin-accent-text);
--theme-link: var(--skin-link);
--theme-link-hover: var(--skin-link-hover);
--theme-surface-link: var(--skin-link);
--theme-surface-link-hover: var(--skin-surface-link-hover);
--theme-page-text: var(--skin-text);
--theme-surface-text: var(--skin-panel-text);
--theme-muted: var(--skin-muted);
--theme-focus: var(--skin-focus);
--theme-page-grid-a: color-mix(in srgb, var(--theme-backdrop) 88%, white);
--theme-page-grid-b: color-mix(in srgb, var(--theme-backdrop) 94%, black);
--radius-panel: var(--skin-radius-panel);
--radius-media: var(--skin-radius-photo);
--radius-subtle: var(--skin-radius-control);
accent-color: var(--theme-accent);
}
:where([data-author-skin-layer="page"]) {
--author-skin-backdrop-inline-size: 100vw;
--author-skin-backdrop-padding: 0px;
--author-skin-shell-inline-size: min(100vw, var(--container-width));
--author-skin-container-inline-size: max(
0px,
calc(var(--author-skin-shell-inline-size) - var(--border-thin) - var(--border-thin))
);
--author-skin-item-inline-size: 100%;
border: 0;
border-radius: var(--radius-panel);
box-shadow: none;
background-color: var(--color-page);
background-image: var(--page-background);
color: var(--color-text);
display: grid;
inline-size: 100%;
isolation: isolate;
margin: 0;
max-inline-size: 100%;
min-block-size: 0;
min-inline-size: 0;
overflow: hidden;
padding: 0;
position: relative;
}
:where([data-author-skin-backdrop="item"]) {
--author-skin-backdrop-padding: var(--space-5);
}
:where([data-author-skin-backdrop="none"]) {
background: transparent;
border-radius: 0;
overflow: visible;
}
:where([data-author-skin-backdrop="container"]) {
inline-size: var(--author-skin-backdrop-inline-size);
margin-inline: calc((100% - var(--author-skin-backdrop-inline-size)) / 2);
max-inline-size: var(--author-skin-backdrop-inline-size);
}
:where(
[data-author-skin-layer="backdrop"],
[data-author-skin-layer="shell"],
[data-author-skin-layer="content"],
[data-author-skin-layer="root"]
) {
block-size: auto;
display: block;
inline-size: auto;
inset: 0 !important;
margin: 0;
max-block-size: none;
max-inline-size: none;
min-block-size: 0;
min-inline-size: 0;
overflow: hidden;
padding: 0;
pointer-events: none !important;
position: absolute !important;
}
:where([data-author-skin-layer="backdrop"]) {
background-color: var(--color-page);
background-image: var(--page-background);
z-index: 0;
}
:where([data-author-skin-layer="shell"]) {
border-left: var(--border-thin) solid var(--color-container-border);
border-right: var(--border-thin) solid var(--color-container-border);
background: var(--color-canvas);
z-index: 1;
}
:where([data-author-skin-layer="content"]) {
background: var(--color-canvas);
z-index: 2;
}
:where([data-author-skin-layer="root"]) {
z-index: 3;
}
:where(
[data-author-skin-backdrop="none"] > [data-author-skin-layer="backdrop"],
[data-author-skin-backdrop="none"] > [data-author-skin-layer="shell"],
[data-author-skin-backdrop="none"] > [data-author-skin-layer="content"],
[data-author-skin-backdrop="none"] > [data-author-skin-layer="root"]
) {
display: none;
}
:where([data-author-skin-backdrop="container"] > [data-author-skin-layer="shell"]) {
inline-size: var(--author-skin-shell-inline-size);
inset-inline: calc((100% - var(--author-skin-shell-inline-size)) / 2) !important;
}
:where(
[data-author-skin-backdrop="container"] > [data-author-skin-layer="content"],
[data-author-skin-backdrop="container"] > [data-author-skin-layer="root"]
) {
inline-size: var(--author-skin-container-inline-size);
inset-inline: calc((100% - var(--author-skin-container-inline-size)) / 2) !important;
}
:where([data-author-skin-layer="foreground"]) {
display: grid;
inline-size: 100%;
justify-items: stretch;
min-block-size: 0;
min-inline-size: 0;
pointer-events: none;
position: relative;
z-index: 4;
}
:where([data-author-skin-backdrop="item"], [data-author-skin-backdrop="container"]) :where([data-author-skin-layer="foreground"]) {
padding: var(--author-skin-backdrop-padding);
}
:where([data-author-skin-backdrop="container"]) :where([data-author-skin-layer="foreground"]) {
justify-items: center;
}
:where([data-author-skin-backdrop="none"] > [data-author-skin-layer="foreground"]) {
pointer-events: auto !important;
}
[data-author-skin-frame="profile-measure"] {
display: grid;
inline-size: var(--author-skin-container-inline-size);
justify-items: center;
max-inline-size: 100%;
width: var(--author-skin-container-inline-size);
}
[data-author-skin-frame="main"] {
inline-size: 100%;
max-inline-size: 100%;
width: 100%;
}
:where([data-author-skin-frame="wall-body"]) {
align-content: start;
display: grid;
gap: var(--panel-body-gap);
min-inline-size: 0;
padding: var(--space-4);
}
:where([data-author-skin-frame="wall-body"] > *) {
margin-block: 0;
}
:where([data-author-skin-backdrop="item"], [data-author-skin-backdrop="container"]) :where([data-author-skin-part="post"], [data-author-skin-part="comment"]) {
inline-size: var(--author-skin-item-inline-size);
max-inline-size: 100%;
}
:where([data-author-skin-part="post"], [data-author-skin-part="comment"]) {
pointer-events: auto !important;
}
:where([data-author-skin-part="post"], [data-author-skin-part="comment"]) :where(*) {
pointer-events: auto !important;
}
:where([data-author-skin-wrapper]) {
display: contents !important;
}
:where([data-author-skin-scope] [data-author-skin-part="comment"] .discussion-entry__author,
[data-author-skin-scope] [data-author-skin-part="comment"] .discussion-entry__body) {
background: transparent;
}
@media (min-width: 48em) {
[data-author-skin-frame="main"] {
inline-size: calc(100% - max(var(--profile-sidebar-min), var(--column-profile)));
width: calc(100% - max(var(--profile-sidebar-min), var(--column-profile)));
}
}
@media (max-width: 48em) {
:where([data-author-skin-layer="page"]) {
--author-skin-backdrop-inline-size: 100%;
--author-skin-shell-inline-size: 100%;
}
}
.profile h1 {
font-size: var(--font-size-profile-heading);
margin: 0;
}
/* Keep skinnable profile panels consistent even when their shared component uses a different tone elsewhere. */
.profile-card {
--panel-body-background: var(--skin-panel-background, var(--color-surface));
--panel-border-color: var(--skin-panel-heading-background, var(--color-brand-border));
--panel-border-width: var(--border-medium);
--panel-heading-background: var(--skin-panel-heading-background, var(--color-brand-accent));
--panel-heading-border: var(--panel-border-color);
--panel-heading-color: var(--skin-panel-heading-text, var(--color-text-on-bright));
}
.profile__sidebar {
justify-items: center;
text-align: center;
}
.profile__sidebar > :where(.profile__identity, .profile-card, .profile__url) {
justify-self: stretch;
}
.profile__sidebar > .profile-card {
text-align: left;
}
.profile__sidebar > :where([data-skin-part="theme-song"]) {
background: transparent;
border: 0;
box-shadow: none;
display: block;
justify-self: center;
margin-inline: auto;
outline: 0;
}
.profile__sidebar > :where([data-skin-part="theme-song"])::-webkit-media-controls-enclosure {
background: transparent;
border-radius: 0;
box-shadow: none;
}
.profile__sidebar > :where([data-skin-part="theme-song"])::-webkit-media-controls-panel {
background: transparent;
box-shadow: none;
}
.profile__vibe {
display: inline-block;
width: 100%;
}
.profile__vibe p {
margin: 0 0 var(--space-5);
}
.profile__url {
background: var(--surface-background);
border: var(--border-thin) solid var(--surface-border);
border-radius: var(--radius-panel);
box-shadow: var(--surface-shadow);
margin: 0;
padding: var(--space-2) var(--space-4);
}
.profile__url p {
font-size: 100%;
margin: 0;
overflow-wrap: anywhere;
}
.profile-social-links {
margin: 0;
padding-left: 0;
}
.profile-social-links li + li {
margin-top: var(--space-3);
}
.profile-social-links a {
align-items: center;
display: inline-flex;
gap: var(--space-2);
overflow-wrap: anywhere;
}
.profile__bio {
margin: 0;
}
.profile__identity {
align-content: start;
align-items: center;
display: grid;
gap: var(--profile-identity-gap, var(--space-3));
grid-template-columns: minmax(0, 1fr);
justify-items: center;
margin: 0;
min-width: 0;
text-align: center;
width: 100%;
}
.profile__identity > :where(.profile__name, .profile__about) {
margin-block: 0;
}
.profile__identity > .profile__about {
align-items: center;
display: grid;
gap: var(--space-6);
grid-template-columns: minmax(0, 1fr);
justify-items: center;
width: 100%;
}
.profile__identity > .profile__about .profile__details p {
margin-top: 0;
}
.profile .profile-section {
overflow-wrap: break-word;
word-break: break-word;
}
.profile__friends .person-card {
display: inline-block;
padding: 0;
width: var(--profile-person-card-width);
}
.profile__friends .person-card p {
color: var(--color-text-muted);
font-size: 100%;
font-weight: bold;
overflow-wrap: break-word;
text-align: center;
}
.profile__notice {
align-items: center;
background: var(--surface-background);
border: var(--border-medium) solid var(--surface-border);
border-radius: var(--radius-panel);
box-shadow: var(--surface-shadow);
color: var(--color-text);
display: flex;
justify-content: center;
margin-bottom: 0;
padding: var(--space-9) var(--space-3);
text-align: center;
}
.profile-photo-editor {
align-items: start;
background: var(--surface-background-tint);
border: var(--border-thin) solid var(--surface-border);
box-shadow: var(--surface-shadow);
display: grid;
gap: var(--space-7);
grid-template-columns: auto minmax(0, 1fr);
margin: 0;
padding: var(--space-6);
}
.profile-photo-editor__body {
display: grid;
gap: var(--space-6);
min-width: 0;
}
.profile-actions {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.profile-actions__cell {
align-items: center;
background: var(--surface-background-raised);
border-top: var(--border-thin) solid var(--surface-rule);
display: flex;
font-size: var(--font-size-small);
font-weight: bold;
min-height: var(--contact-cell-min-height);
padding: var(--space-4);
}
.profile-actions__cell:nth-child(-n + 2) {
border-top: 0;
}
.profile-actions__cell:nth-child(odd) {
border-right: var(--border-thin) solid var(--surface-rule);
}
.profile-actions__cell:last-child:nth-child(odd) {
border-right: 0;
grid-column: 1 / -1;
}
.profile-actions__cell form {
margin: 0;
width: 100%;
}
:where(.profile-actions__cell) .profile-action {
--profile-action-hover-text: var(--color-link-hover);
--profile-action-text: var(--color-link);
align-items: center;
background: transparent;
border: 0;
box-shadow: none;
color: var(--profile-action-text);
cursor: pointer;
display: inline-flex;
gap: var(--icon-label-gap);
justify-content: flex-start;
line-height: var(--line-height-body);
min-height: auto;
min-width: 0;
padding: 0;
text-align: left;
text-decoration: none;
width: 100%;
}
:where(.profile-actions__cell) .profile-action--secondary {
--profile-action-hover-text: var(--theme-surface-link-hover);
--profile-action-text: var(--color-brand);
}
:where(.profile-actions__cell) .profile-action--danger {
--profile-action-hover-text: var(--color-danger);
--profile-action-text: var(--color-danger-text);
}
:where(.profile-actions__cell) .profile-action--disabled {
--profile-action-hover-text: var(--color-text-muted);
--profile-action-text: var(--color-text-muted);
cursor: default;
opacity: var(--disabled-opacity);
}
:where(.profile-actions__cell) .profile-action:hover {
background: transparent;
color: var(--profile-action-hover-text);
text-decoration: underline;
}
:where(.profile-actions__cell) .profile-action--disabled:hover {
text-decoration: none;
}
:where(.profile-actions__cell) .profile-action:active {
box-shadow: none;
transform: none;
}

137
public/static/css/features/skin-guardrails.css Normal file
View file

@ -0,0 +1,137 @@
[data-skin-page] {
overflow-x: clip !important;
}
[data-skin-page] :where(
.master-container,
main,
.site-nav,
.site-nav__top,
.site-nav__brand,
.site-nav__search,
.site-nav__account,
.site-nav__links,
.split-layout,
.split-layout__pane,
.profile__identity,
.profile__about,
.profile__photo,
.profile-card,
.panel,
.page-frame
) {
max-inline-size: 100% !important;
min-inline-size: 0 !important;
}
[data-skin-page] :where(.site-nav, .site-nav__top, .site-nav__links) {
overflow-wrap: anywhere !important;
}
[data-skin-page] .site-nav__top {
display: grid !important;
}
[data-skin-page] .brand-link,
[data-skin-page] .brand-link__copy {
max-inline-size: 100% !important;
min-inline-size: 0 !important;
}
[data-skin-page] .brand-link__name,
[data-skin-page] .brand-link__tagline {
overflow-wrap: anywhere !important;
white-space: normal !important;
}
[data-skin-page] .site-nav__account .inline-links {
align-items: center !important;
display: flex !important;
flex-wrap: wrap !important;
justify-content: flex-end !important;
max-inline-size: 100% !important;
min-inline-size: 0 !important;
row-gap: var(--space-2) !important;
}
[data-skin-page] .site-nav__account .inline-links__item {
display: inline-flex !important;
max-inline-size: 100% !important;
min-inline-size: 0 !important;
white-space: normal !important;
}
[data-skin-page] :where(.site-nav__account, .site-nav__links) a {
max-inline-size: 100% !important;
min-inline-size: 0 !important;
overflow-wrap: anywhere !important;
white-space: normal !important;
}
[data-skin-page] .site-nav__search form {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto !important;
inline-size: min(100%, calc(var(--nav-search-width) + 8rem)) !important;
max-inline-size: 100% !important;
}
[data-skin-page] .site-nav__search input {
inline-size: 100% !important;
min-inline-size: 0 !important;
}
[data-skin-page] .site-nav__search button {
min-inline-size: 0 !important;
white-space: nowrap !important;
}
[data-skin-page] .site-nav__links {
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
min-inline-size: 0 !important;
}
[data-skin-page] .site-nav__links li {
max-inline-size: 100% !important;
min-inline-size: 0 !important;
}
@media (max-width: 48em) {
[data-skin-page] .site-nav__top {
grid-template-areas:
"brand"
"account"
"search" !important;
grid-template-columns: minmax(0, 1fr) !important;
justify-items: center !important;
text-align: center !important;
}
[data-skin-page] .site-nav__brand,
[data-skin-page] .site-nav__account {
justify-content: center !important;
justify-self: center !important;
text-align: center !important;
}
[data-skin-page] .site-nav__account .inline-links {
column-gap: var(--space-4) !important;
justify-content: center !important;
}
[data-skin-page] .site-nav__account .inline-links__item + .inline-links__item::before,
[data-skin-page] .site-nav__links li + li::before {
content: none !important;
}
[data-skin-page] .site-nav__links {
gap: var(--space-2) var(--space-4) !important;
overflow-x: clip !important;
padding-inline: calc(var(--space-5) + env(safe-area-inset-left, 0px)) calc(var(--space-5) + env(safe-area-inset-right, 0px)) !important;
}
[data-skin-page] .site-nav__links a {
min-block-size: var(--nav-link-min-height) !important;
}
}

12
public/static/css/pages/auth.css Normal file
View file

@ -0,0 +1,12 @@
.signup-page h1 {
text-align: center;
}
.benefits-panel .panel__body {
padding: var(--space-3);
}
.benefits-panel__list {
margin: 0;
padding-left: var(--space-10);
}

39
public/static/css/pages/blogs.css Normal file
View file

@ -0,0 +1,39 @@
.split-layout--article {
overflow-wrap: break-word;
word-break: break-word;
}
.blog-card__category {
font-weight: normal;
}
.blog-card__category::before {
content: "\2022";
margin: 0 var(--space-2);
}
.author-details {
display: grid;
gap: var(--space-7);
}
.author-details > :where(h1, h2, h3, h4, p) {
margin: 0;
}
.split-layout--article .article-content {
overflow: hidden;
padding: 0 var(--space-6) 0 0;
}
.split-layout--article .article-content p {
margin-top: 0;
}
.split-layout--article .article-content * {
max-width: 100%;
}
.split-layout--article .article-title {
margin: var(--article-title-offset) 0 var(--space-3);
}

16
public/static/css/pages/groups.css Normal file
View file

@ -0,0 +1,16 @@
.group-owner {
margin: calc(-1 * var(--space-3)) 0 0;
}
.group-actions {
align-items: center;
display: flex;
flex-wrap: wrap;
font-size: var(--font-size-small);
gap: var(--space-4) var(--space-5);
margin: 0;
}
.group-description {
margin: 0;
}

159
public/static/css/pages/home.css Normal file
View file

@ -0,0 +1,159 @@
.welcome {
align-items: center;
background: var(--color-success);
border: var(--border-thin) solid var(--color-success-text);
border-radius: var(--radius-panel);
box-shadow: var(--shadow-panel);
color: var(--color-success-ink);
display: flex;
justify-content: center;
margin: 0;
padding: var(--space-3);
text-align: center;
}
.welcome p {
margin: 0;
}
.auth-panel .panel__body,
.summary-panel .panel__body {
text-align: center;
}
.auth-panel :where(button, .button) {
padding: var(--space-2) var(--space-5);
}
.auth-panel .form-stack {
gap: var(--space-5);
}
.auth-panel .form-field {
align-items: center;
gap: var(--space-4);
grid-template-columns: max-content minmax(0, 24rem);
justify-content: center;
text-align: left;
}
.auth-panel .form-field__label {
color: var(--color-text);
font-size: var(--font-size-small);
font-weight: normal;
text-align: right;
}
.auth-panel .form-actions {
justify-content: center;
}
.auth-panel p:not(.form-message),
.summary-panel p:not(.form-message) {
margin: 0;
padding: 0;
}
.auth-panel .forgot {
display: block;
font-size: var(--font-size-utility-action);
font-weight: normal;
margin-top: var(--space-6);
text-align: right;
}
.source-card {
background: var(--surface-background-tint);
border: var(--border-thin) solid var(--surface-border);
border-radius: var(--radius-panel);
box-shadow: var(--surface-shadow);
display: grid;
gap: var(--space-5);
font-weight: bold;
padding: var(--space-5);
text-align: center;
}
.source-card p {
margin: 0;
}
.source-card .more-details {
font-size: var(--font-size-note);
font-weight: normal;
}
.info-grid {
display: grid;
gap: var(--space-5);
padding: var(--space-6);
}
.info-card {
background: var(--color-brand-soft);
border: var(--border-thin) solid var(--surface-border);
border-radius: var(--radius-panel);
box-shadow: inset 0 var(--border-thin) 0 var(--surface-background);
display: grid;
gap: var(--space-3);
grid-template-rows: auto 1fr auto;
padding: var(--space-3);
}
.info-card h3,
.info-card p {
margin: 0;
}
.info-card h3 {
color: var(--color-brand);
font-size: var(--font-size-card-heading);
margin-bottom: var(--space-3);
}
.info-card .link {
color: var(--color-link-hover);
justify-self: end;
}
.home-actions {
font-weight: bold;
}
.home-actions .panel__body {
text-align: center;
}
.home-actions .profile-pic {
margin-bottom: var(--space-5);
}
.home-actions .more-options {
display: inline-block;
padding: 0 var(--space-3);
width: 100%;
}
.home-stats .panel__body {
font-weight: bold;
text-align: center;
}
.home-stats p {
margin: 0;
}
.home-actions .profile-links .inline-links {
display: block;
margin-top: var(--space-1);
}
.home-actions .profile-links__heading,
.home-actions .profile-url > span {
justify-content: center;
max-width: 100%;
}
.home-actions .profile-url a {
overflow-wrap: anywhere;
}

135
public/static/css/pages/messages.css Normal file
View file

@ -0,0 +1,135 @@
.message-conversation-panel,
.message-thread-panel {
align-content: start;
}
.message-thread-panel-shell .panel__heading a,
.message-thread-panel-shell .panel__heading a:hover,
.message-thread-panel-shell .panel__heading a:active {
color: inherit;
}
.message-conversation-list,
.message-thread {
display: grid;
gap: var(--space-5);
min-width: 0;
}
.message-conversation {
align-items: start;
background: var(--surface-background);
border: var(--border-thin) solid var(--surface-border-soft);
border-radius: var(--radius-panel);
color: var(--color-text);
display: grid;
gap: var(--space-4);
grid-template-columns: auto minmax(0, 1fr);
min-width: 0;
padding: var(--space-4);
text-decoration: none;
}
.message-conversation:hover,
.message-conversation:active {
background: var(--surface-background-tint);
color: var(--color-text);
text-decoration: none;
}
.message-conversation--current {
background: var(--color-brand-soft);
border-color: var(--color-brand-accent);
}
.message-conversation--unread {
border-color: var(--color-brand-accent);
box-shadow: var(--shadow-card);
}
.message-conversation__summary {
display: grid;
gap: var(--space-1);
min-width: 0;
}
.message-conversation__summary small {
color: var(--color-text-muted);
overflow-wrap: anywhere;
}
.message-conversation__name {
align-items: center;
display: flex;
gap: var(--space-3);
justify-content: space-between;
min-width: 0;
}
.message-conversation__name > span {
font-weight: bold;
min-width: 0;
overflow-wrap: anywhere;
}
.message-entry {
background: var(--surface-background);
border: var(--border-thin) solid var(--surface-border);
border-radius: var(--radius-panel);
box-shadow: var(--surface-shadow);
display: grid;
gap: var(--space-4);
min-width: 0;
overflow-wrap: break-word;
padding: var(--space-5);
scroll-margin-top: var(--space-10);
word-break: break-word;
}
.message-entry--own {
background: var(--surface-background-raised);
}
.message-entry__header {
align-items: start;
display: grid;
gap: var(--space-4);
grid-template-columns: auto minmax(0, 1fr);
}
.message-entry__meta p {
margin: 0;
}
.message-entry__meta small {
color: var(--color-text-muted);
}
.message-entry__body > :first-child {
margin-top: 0;
}
.message-entry__body > :last-child {
margin-bottom: 0;
}
.message-entry__actions {
border-top: var(--border-thin) solid var(--surface-rule);
padding-top: var(--space-3);
}
.message-reply {
border-top: var(--border-thin) solid var(--surface-rule);
display: grid;
gap: var(--space-5);
padding-top: var(--space-5);
}
.message-reply h2 {
font-size: var(--font-size-panel-heading);
margin: 0;
}
.message-reply__form {
margin: 0;
}

27
public/static/css/pages/notifications.css Normal file
View file

@ -0,0 +1,27 @@
.notification-list {
display: grid;
gap: var(--space-7);
}
.notification-card {
background: var(--surface-background-raised);
border: var(--border-thin) solid var(--surface-border);
border-radius: var(--radius-panel);
box-shadow: var(--surface-shadow);
display: grid;
gap: var(--space-7);
margin: 0;
padding: var(--space-5) var(--space-6);
}
.notification-card--unread {
border-color: var(--color-brand-accent);
box-shadow: var(--surface-shadow), inset var(--border-medium) 0 0 var(--color-brand-accent);
}
.notification-card__meta {
align-items: baseline;
display: flex;
flex-wrap: wrap;
gap: var(--space-5);
}

270
public/static/css/pages/staff.css Normal file
View file

@ -0,0 +1,270 @@
.report {
background: var(--surface-background-raised);
border: var(--border-thin) solid var(--surface-border);
border-radius: var(--radius-panel);
box-shadow: var(--surface-shadow);
display: grid;
gap: var(--space-5);
margin: 0;
padding: var(--space-5);
}
.report > * {
margin-block: 0;
}
.staff-subnav {
--icon-size: 1em;
align-items: center;
display: flex;
flex-wrap: wrap;
gap: var(--space-2) var(--space-3);
line-height: 1.4;
}
.staff-subnav__item {
align-items: center;
display: inline-flex;
white-space: nowrap;
}
.staff-subnav__item::before {
content: "[";
}
.staff-subnav__item::after {
content: "]";
}
.icon-field {
align-items: center;
display: flex;
gap: var(--space-3);
}
.icon-field .icon {
color: var(--color-brand);
flex: 0 0 auto;
margin: 0;
}
.icon-field .icon svg {
height: 1.5em;
width: 1.5em;
}
.icon-field input {
min-width: 0;
}
.report__summary {
background: var(--color-row-alt);
border: var(--border-thin) solid var(--surface-border-soft);
border-radius: var(--radius-panel);
margin: 0;
padding: var(--space-3);
}
.report__resolution {
border-top: var(--border-thin) solid var(--surface-rule);
color: var(--color-text-muted);
padding-top: var(--space-4);
}
.audit-table-wrap {
max-width: 100%;
overflow-x: auto;
}
.audit-table {
min-width: 48rem;
table-layout: fixed;
}
.audit-table__time-column {
width: 18%;
}
.audit-table__actor-column {
width: 18%;
}
.audit-table__action-column {
width: 18%;
}
.audit-table__subject-column {
width: 46%;
}
.audit-table td {
text-align: left;
}
.audit-action-name,
.audit-subject-label {
display: block;
font-weight: bold;
}
.audit-action-cell small,
.audit-subject-cell small,
.audit-table td > small {
color: var(--color-text-muted);
display: block;
font-size: var(--font-size-small);
margin-top: var(--space-1);
overflow-wrap: anywhere;
}
.audit-subject-label small {
display: inline;
margin-left: var(--space-2);
}
.audit-subject-summary {
background: var(--color-row-alt);
border: var(--border-thin) solid var(--surface-border-soft);
border-radius: var(--radius-panel);
display: block;
margin-top: var(--space-2);
padding: var(--space-2);
}
.audit-note {
margin-top: var(--space-2);
}
.audit-note summary {
cursor: pointer;
}
.moderation-form {
border-top: var(--border-thin) solid var(--surface-rule);
margin-top: 0;
padding-top: var(--space-5);
}
.moderation-form button {
margin: var(--space-2) var(--space-2) 0 0;
}
.automod-section {
border-bottom: var(--border-thin) solid var(--surface-rule);
margin: 0;
padding: 0 0 var(--space-7);
scroll-margin-top: var(--space-10);
}
.automod-section h4 {
margin-top: 0;
}
.automod-rule-list {
display: grid;
gap: var(--list-stack-gap);
}
.automod-rule {
background: var(--surface-background-raised);
border: var(--border-thin) solid var(--surface-border);
border-radius: var(--radius-panel);
margin: 0;
padding: var(--space-4);
scroll-margin-top: var(--space-10);
}
.automod-rule__summary {
cursor: pointer;
overflow-wrap: anywhere;
}
.automod-rule__meta {
color: var(--color-text-muted);
margin-left: var(--space-4);
}
.automod-rule .form-stack {
margin-top: var(--space-5);
}
.rate-limit-panel > .panel__heading {
align-items: center;
}
.rate-limit-table-wrap {
max-width: 100%;
overflow-x: auto;
}
.rate-limit-table {
min-width: 32rem;
table-layout: fixed;
}
.rate-limit-table__action-column {
width: 54%;
}
.rate-limit-table__limit-column {
width: 20%;
}
.rate-limit-table__window-column {
width: 26%;
}
.rate-limit-table th,
.rate-limit-table td {
vertical-align: middle;
}
.rate-limit-action-cell {
text-align: left;
}
.rate-limit-action-name {
display: block;
font-weight: bold;
}
.rate-limit-action-cell small {
color: var(--color-text-muted);
overflow-wrap: anywhere;
}
.rate-limit-control {
align-items: center;
display: inline-flex;
gap: var(--space-2);
justify-content: center;
white-space: nowrap;
}
.rate-limit-control input {
box-sizing: border-box;
max-width: 5rem;
min-width: 0;
text-align: right;
width: 100%;
}
.rate-limit-note {
color: var(--color-text-muted);
font-size: var(--font-size-small);
text-align: center;
}
.rate-limit-actions,
.rate-limit-reset-form {
display: flex;
justify-content: center;
}
.rate-limit-reset-form {
margin-top: var(--space-4);
}
.rate-limit-reset-form button {
width: auto;
}

214
public/static/css/responsive/responsive.css Normal file
View file

@ -0,0 +1,214 @@
@media (min-width: 48em) {
.split-layout {
display: grid;
width: 100%;
}
.split-layout--landing {
grid-template-columns: minmax(0, var(--column-wide)) minmax(var(--column-aside-min), 1fr);
position: relative;
}
.split-layout--dashboard,
.split-layout--profile {
grid-template-columns: minmax(var(--profile-sidebar-min), var(--column-profile)) minmax(0, 1fr);
}
.split-layout--article,
.split-layout--editor {
grid-template-columns: minmax(var(--column-aside-min), var(--column-compact)) minmax(0, 1fr);
}
.split-layout--messages {
grid-template-columns: minmax(14rem, 32%) minmax(0, 1fr);
}
.info-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.split-layout--landing > .split-layout__main {
border-right: 0;
box-shadow: none;
}
.split-layout--landing::after {
background: linear-gradient(
to right,
var(--color-brand-soft) 0 var(--border-thin),
var(--color-surface) var(--border-thin) var(--border-medium),
var(--color-panel-accent-soft) var(--border-medium) calc(var(--border-medium) + var(--border-thin))
);
bottom: var(--space-6);
content: "";
left: var(--column-wide);
pointer-events: none;
position: absolute;
top: var(--space-6);
width: calc(var(--border-medium) + var(--border-thin));
}
.split-layout--article .content-meta-links a {
display: block;
margin-bottom: var(--space-3);
}
}
@media (max-width: 48em), (any-pointer: coarse) {
html,
body {
-ms-overflow-style: none;
height: 100%;
min-height: 100%;
overflow: hidden;
scrollbar-width: none;
touch-action: pan-x pan-y;
width: 100%;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar,
.master-container::-webkit-scrollbar {
display: none;
height: 0;
width: 0;
}
.master-container {
-ms-overflow-style: none;
-webkit-overflow-scrolling: touch;
height: 100vh;
height: 100dvh;
min-height: 100vh;
min-height: 100dvh;
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior-y: contain;
scrollbar-width: none;
touch-action: pan-x pan-y;
}
:where(
input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="button"]):not([type="reset"]):not([type="submit"]):not([type="image"]),
textarea,
select
) {
font-size: 16px;
font-size: max(16px, 1em);
}
}
@media (max-width: 48em) {
.site-nav__top {
align-items: center;
display: grid;
gap: var(--space-5);
grid-template-areas:
"brand"
"account"
"search";
grid-template-columns: minmax(0, 1fr);
justify-items: center;
text-align: center;
}
.site-nav__brand {
grid-area: brand;
justify-content: center;
justify-self: center;
min-width: 0;
}
.site-nav__account {
grid-area: account;
justify-self: center;
min-width: 0;
position: static;
text-align: center;
}
.site-nav__search {
grid-area: search;
grid-column: 1 / -1;
width: 100%;
}
.site-nav__search form {
display: inline-flex;
flex-wrap: nowrap;
gap: var(--space-2);
justify-content: center;
max-width: 100%;
min-width: 0;
}
.site-nav__search input {
flex: 1 1 var(--nav-search-width);
min-width: 0;
width: var(--nav-search-width);
}
.site-nav__search button {
flex: 0 0 auto;
}
.profile-photo-editor {
grid-template-columns: minmax(0, 1fr);
}
.site-nav__links {
overflow-wrap: anywhere;
padding-left: var(--space-5);
padding-right: var(--space-5);
}
.listing-table {
display: block;
overflow-x: auto;
}
.discussion-entry {
grid-template-columns: 1fr;
}
.discussion-entry--reply {
margin-left: 0;
}
.discussion-entry__author {
align-items: center;
flex-direction: row;
justify-content: flex-start;
text-align: left;
}
}
@media (max-width: 30em) {
.site-nav__top {
--site-nav-top-padding-inline: var(--space-5);
}
.profile__identity > .profile__about {
grid-template-columns: minmax(0, 1fr);
}
}
@media (max-width: 22em) {
.profile-actions {
grid-template-columns: minmax(0, 1fr);
}
.profile-actions__cell:nth-child(n) {
border-right: 0;
border-top: var(--border-thin) solid var(--surface-rule);
}
.profile-actions__cell:first-child {
border-top: 0;
}
.profile-actions__cell:last-child:nth-child(odd) {
grid-column: auto;
}
}

284
public/static/css/shell/shell.css Normal file
View file

@ -0,0 +1,284 @@
.site-nav {
color: var(--color-text-on-bright);
font-size: var(--font-size-nav);
}
.site-nav__top {
--site-nav-top-padding-inline: var(--space-6);
align-items: center;
background: var(--color-brand-header);
column-gap: var(--space-6);
display: grid;
grid-template-areas: "brand search account";
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
padding:
calc(var(--space-9) + env(safe-area-inset-top, 0px))
calc(var(--site-nav-top-padding-inline) + env(safe-area-inset-right, 0px))
var(--space-8)
calc(var(--site-nav-top-padding-inline) + env(safe-area-inset-left, 0px));
position: relative;
}
.site-nav__top a {
color: inherit;
}
.site-nav__brand,
.site-nav__account {
min-width: var(--nav-side-min);
}
.site-nav__brand {
align-items: center;
display: flex;
grid-area: brand;
justify-self: start;
}
.site-nav__search {
grid-area: search;
justify-self: center;
min-width: 0;
text-align: center;
}
.site-nav__search form {
align-items: center;
display: inline-flex;
gap: var(--space-2);
justify-content: center;
margin: 0;
}
.site-nav__search input {
width: var(--nav-search-width);
}
.site-nav__account {
grid-area: account;
justify-self: end;
text-align: right;
}
.site-nav__icon-link {
align-items: center;
display: inline-flex;
height: 1em;
justify-content: center;
line-height: 1;
vertical-align: -0.1em;
width: 1em;
}
.theme-toggle__icon {
align-items: center;
justify-content: center;
line-height: 1;
}
.theme-toggle__icon--dark {
display: var(--theme-toggle-dark-display);
}
.theme-toggle__icon--light {
display: var(--theme-toggle-light-display);
}
.site-nav__icon-link .icon {
align-items: center;
display: inline-flex;
height: 1em;
justify-content: center;
margin: 0;
vertical-align: 0;
width: 1em;
}
.site-nav__icon-link .icon svg {
height: 0.95em;
width: 0.95em;
}
.site-nav__notification-link {
flex: 0 0 auto;
gap: 0;
min-height: 1em;
min-width: 1em;
overflow: visible;
position: relative;
width: auto;
}
.site-nav__notification-badge {
--count-badge-font-size: 0.72em;
--count-badge-min-size: 1.22em;
--count-badge-padding-x: var(--space-1);
align-self: flex-start;
pointer-events: none;
position: relative;
transform: translate(-30%, -45%);
z-index: 1;
}
.site-nav__top .site-nav__notification-link:hover,
.site-nav__top .site-nav__notification-link:active {
background: transparent;
color: inherit;
}
.site-nav__notification-link:hover .icon,
.site-nav__notification-link:active .icon {
background: var(--color-brand-soft);
color: var(--color-brand);
}
.brand-link {
align-items: center;
display: inline-flex;
font-size: var(--font-size-profile-heading);
font-weight: bold;
gap: var(--space-5);
line-height: 1;
vertical-align: middle;
}
.brand-link__copy {
display: inline-flex;
flex-direction: column;
gap: var(--space-1);
}
.brand-link__name,
.brand-link__tagline {
display: block;
}
.brand-link__tagline {
font-size: max(0.52em, 12px);
font-weight: normal;
line-height: 1.15;
opacity: 0.88;
white-space: nowrap;
}
.brand-link .icon {
margin: 0;
vertical-align: middle;
}
.brand-link .icon svg {
height: var(--brand-icon-size);
width: var(--brand-icon-size);
}
.site-nav__account,
.site-nav__links {
--link-separator-color: var(--color-text-on-bright);
}
.site-nav__links {
background: var(--color-brand-nav);
border-block: var(--border-thin) solid var(--color-brand-header);
display: flex;
flex-wrap: wrap;
font-size: var(--font-size-nav-link);
justify-content: center;
padding: var(--space-nav-links-y) var(--space-nav-links-x);
}
.site-nav__links a {
color: var(--color-text-on-bright);
display: inline-block;
min-height: var(--nav-link-min-height);
padding: var(--space-2) var(--space-3);
}
.site-nav__link-label {
display: inline-block;
line-height: 1;
position: relative;
}
.site-nav__link-badge {
--count-badge-font-size: 0.7em;
--count-badge-min-size: 1.2em;
--count-badge-padding-x: var(--space-1);
inset-block-start: 0;
inset-inline-end: 0;
pointer-events: none;
position: absolute;
transform: translate(70%, -45%);
z-index: 1;
}
.site-nav__top a:hover,
.site-nav__links a:hover {
background: var(--color-brand-soft);
color: var(--color-brand);
text-decoration: none;
}
.site-footer {
background: var(--color-surface-tint);
border-top: var(--border-thin) solid var(--color-container-border);
box-shadow: inset 0 var(--border-thin) 0 var(--color-surface);
font-size: var(--font-size-footer);
margin: var(--space-6) 0 0;
padding: var(--space-6) var(--space-3);
text-align: center;
}
.site-footer p {
font-size: var(--font-size-note);
margin: var(--space-6) 0 var(--space-3);
}
.site-footer__links {
align-items: center;
display: flex;
flex-wrap: wrap;
font-size: var(--font-size-small);
justify-content: center;
row-gap: var(--space-2);
}
.site-footer__social {
--icon-size: 1.4em;
margin: var(--space-4) 0 var(--space-3);
}
.site-footer__social ul {
align-items: center;
display: flex;
gap: var(--space-6);
justify-content: center;
margin: 0;
padding: 0;
list-style: none;
}
.site-footer__social a {
align-items: center;
color: var(--color-text-muted);
display: inline-flex;
line-height: 1;
}
.site-footer__social a:hover,
.site-footer__social a:focus {
color: var(--color-link);
}
.site-footer__social .icon {
vertical-align: 0;
}
.site-footer .copyright {
color: var(--color-text-muted);
font-size: var(--font-size-caption);
margin-top: var(--space-3);
}

32
public/static/css/style.css Normal file
View file

@ -0,0 +1,32 @@
@layer tokens, base, layout, shell, components, features, pages, skin-guardrails, profile-skin, responsive;
@import url("./core/tokens.css") layer(tokens);
@import url("./core/base.css") layer(base);
@import url("./core/layout.css") layer(layout);
@import url("./core/flow.css") layer(layout);
@import url("./shell/shell.css") layer(shell);
@import url("./components/avatars.css") layer(components);
@import url("./components/panels.css") layer(components);
@import url("./components/content.css") layer(components);
@import url("./components/metadata.css") layer(components);
@import url("./components/links.css") layer(components);
@import url("./components/forms.css") layer(components);
@import url("./components/groups.css") layer(components);
@import url("./components/people.css") layer(components);
@import url("./components/tables.css") layer(components);
@import url("./components/actions.css") layer(components);
@import url("./components/badges.css") layer(components);
@import url("./components/pagination.css") layer(components);
@import url("./components/discussion.css") layer(components);
@import url("./components/posts.css") layer(components);
@import url("./components/formatting-help.css") layer(components);
@import url("./features/profile.css") layer(features);
@import url("./features/skin-guardrails.css") layer(skin-guardrails);
@import url("./pages/auth.css") layer(pages);
@import url("./pages/home.css") layer(pages);
@import url("./pages/groups.css") layer(pages);
@import url("./pages/blogs.css") layer(pages);
@import url("./pages/messages.css") layer(pages);
@import url("./pages/notifications.css") layer(pages);
@import url("./pages/staff.css") layer(pages);
@import url("./responsive/responsive.css") layer(responsive);

17
public/static/css/themes/dark.css Normal file
View file

@ -0,0 +1,17 @@
@layer tokens {
:root:not([data-theme-lock="light"]) {
color-scheme: dark;
--theme-backdrop: #17131d;
--theme-page: var(--theme-backdrop);
--theme-surface: #211b28;
--theme-page-text: #f3eef9;
--theme-link: #a78bfa;
--theme-muted: #8b8197;
--theme-danger: #f87171;
--theme-success-text: var(--theme-success);
--theme-toggle-dark-display: none;
--theme-toggle-light-display: inline-flex;
}
}

BIN
public/static/icons/bliish.ico Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 5.1 KiB

BIN
public/static/media/default.mp3 Normal file
View file

Binary file not shown.

BIN
public/static/media/tom.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 8.8 KiB

19
src/anchors.ts Normal file
View file

@ -0,0 +1,19 @@
type IdTarget = number | { id: number };
function idValue(target: IdTarget) {
return typeof target === "number" ? target : target.id;
}
function idAnchor(prefix: string, target: IdTarget) {
return `${prefix}-${idValue(target)}`;
}
export const anchors = {
blog: (target: IdTarget) => idAnchor("blog", target),
comment: (target: IdTarget) => idAnchor("comment", target),
comments: "comments",
groupPosts: "group-posts",
post: (target: IdTarget) => idAnchor("post", target),
profileActions: "profile-actions",
wall: "wall"
} as const;

62
src/auditLabels.ts Normal file
View file

@ -0,0 +1,62 @@
const auditActionLabels: Record<string, string> = {
ban: "Banned",
create: "Created",
delete: "Deleted",
disable: "Disabled",
disable_raid_mode: "Disabled raid mode",
enable: "Enabled",
enable_raid_mode: "Enabled raid mode",
password: "Changed password",
queue: "Queued",
reset: "Reset",
reset_color_theme: "Reset color theme",
resolve: "Resolved",
role: "Changed role",
unban: "Unbanned",
update: "Updated",
update_color_theme: "Updated color theme",
update_site_contact: "Updated contact settings",
update_site_home: "Updated home page",
update_site_identity: "Updated site identity",
verify: "Verified"
};
const auditSubjectTypeLabels = {
app_setting: "Site setting",
automod_rule: "Automod rule",
blog: "Blog entry",
blog_comment: "Blog comment",
email: "Email",
favorite: "Favorite",
group: "Group",
message: "Private message",
post: "Post",
post_comment: "Post comment",
rate_limit: "Rate limits",
report: "Report",
skin: "Skin",
skin_comment: "Skin comment",
user: "Profile"
} as const;
export type AuditSubjectType = keyof typeof auditSubjectTypeLabels;
export function auditActionLabel(action: string) {
return auditActionLabels[action] ?? readableToken(action);
}
export function subjectTypeLabel(type: string) {
return isAuditSubjectType(type) ? auditSubjectTypeLabels[type] : readableToken(type);
}
export function isAuditSubjectType(type: string): type is AuditSubjectType {
return Object.hasOwn(auditSubjectTypeLabels, type);
}
function readableToken(value: string) {
return value
.split(/[._-]+/)
.filter(Boolean)
.map((part) => part.charAt(0).toUpperCase() + part.slice(1))
.join(" ") || value;
}

26
src/automodPolicy.ts Normal file
View file

@ -0,0 +1,26 @@
export const automodScopes = ["all", "profile", "blog", "post", "comment", "group", "skin", "message"] as const;
export type AutomodScope = (typeof automodScopes)[number];
const automodScopeSet = new Set<string>(automodScopes);
export const automodPatternTypes = ["keyword", "regex"] as const;
export type AutomodPatternType = (typeof automodPatternTypes)[number];
const automodPatternTypeSet = new Set<string>(automodPatternTypes);
export const automodActions = ["review", "reject"] as const;
export type AutomodAction = (typeof automodActions)[number];
const automodActionSet = new Set<string>(automodActions);
export const automodPatternMax = 5_000;
export const automodScanMax = 10_000;
export function isAutomodScope(value: string): value is AutomodScope {
return automodScopeSet.has(value);
}
export function isAutomodPatternType(value: string): value is AutomodPatternType {
return automodPatternTypeSet.has(value);
}
export function isAutomodAction(value: string): value is AutomodAction {
return automodActionSet.has(value);
}

10
src/brand.ts Normal file
View file

@ -0,0 +1,10 @@
export const brandIconShapeSvg = [
'<circle cx="12" cy="9.1" r="3.1" />',
'<path d="M6.3 19.9c.9-3.9 3-5.9 5.7-5.9s4.8 2 5.7 5.9c-1.6 1.1-3.5 1.7-5.7 1.7s-4.1-.6-5.7-1.7Z" />'
].join("");
export const brandIconSvg = [
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="4 4 16 18" fill="currentColor" stroke="none">',
brandIconShapeSvg,
"</svg>"
].join("");

11
src/currentUser.ts Normal file
View file

@ -0,0 +1,11 @@
import type { UserRole } from "./roles.js";
export type CurrentUser = {
id: number;
username: string;
email: string;
role: UserRole;
timeZone: string;
verifiedAt?: string | null;
bannedAt?: string | null;
};

65
src/index.tsx Normal file
View file

@ -0,0 +1,65 @@
import { serve } from "@hono/node-server";
import { serveStatic } from "@hono/node-server/serve-static";
import { Hono } from "hono";
import { bodyLimit } from "hono/body-limit";
import { HTTPException } from "hono/http-exception";
import { routeRegistrars } from "./routes/index.js";
import { registerSystemRoutes } from "./routes/system/index.js";
import { registerMediaRoutes } from "./routes/system/media.js";
import { loadSession } from "./server/auth/session.js";
import { initializeDatabase } from "./server/db/schema.js";
import { siteSettings } from "./server/db/siteSettings.js";
import { env } from "./server/env.js";
import { statusTitle } from "./server/http.js";
import { blockedCrawlerMiddleware } from "./server/indexing/crawlers.js";
import { indexingMiddleware } from "./server/indexing/middleware.js";
import { limits } from "./policy.js";
import { plainPage } from "./server/render.js";
import { securityHeaders } from "./server/security/headers.js";
import type { AppBindings } from "./server/context.js";
initializeDatabase();
const app = new Hono<AppBindings>();
app.use(async (c, next) => {
try {
await next();
} finally {
for (const [name, value] of Object.entries(securityHeaders)) c.header(name, value);
}
});
app.use(
bodyLimit({
maxSize: limits.requestBytes,
onError: () => {
throw new HTTPException(413, { message: "Request body is too large." });
}
})
);
app.use(blockedCrawlerMiddleware());
app.use("/static/*", serveStatic({ root: "./public" }));
registerSystemRoutes(app);
app.use(loadSession);
app.use(indexingMiddleware());
registerMediaRoutes(app);
app.onError((error, c) => {
if (error instanceof HTTPException) {
const response = error.getResponse();
if (response.status >= 300 && response.status < 400) return response;
return plainPage(c, statusTitle(response.status), error.message || "The request could not be completed.", response.status);
}
console.error(error);
return plainPage(c, "Something went wrong", "The server could not complete the request.", 500);
});
app.notFound((c) => plainPage(c, "Not found", "The page does not exist.", 404));
for (const registerRoutes of routeRegistrars) {
registerRoutes(app);
}
serve({ fetch: app.fetch, port: env.port, hostname: env.host }, (info) => {
console.log(`${siteSettings().identity.name} listening on http://${info.address}:${info.port}`);
});

3
src/messages.ts Normal file
View file

@ -0,0 +1,3 @@
export const messageFormContexts = {
conversation: "conversation"
} as const;

304
src/models.ts Normal file
View file

@ -0,0 +1,304 @@
import type { AutomodAction, AutomodPatternType, AutomodScope } from "./automodPolicy.js";
import type { AuditSubjectType } from "./auditLabels.js";
import type { CurrentUser } from "./currentUser.js";
import type { NotificationContextType, NotificationKind, NotificationSubjectType } from "./notifications.js";
import type { BlogCategory, friendshipStatus, RateLimitAction, ReportSubjectType } from "./policy.js";
import type { SocialLinks } from "./socialLinks.js";
export type { AutomodAction, AutomodPatternType, AutomodScope } from "./automodPolicy.js";
export const defaultInterestNames = ["General", "Music", "Movies", "Television", "Books", "Heroes"] as const;
export const defaultInterests = {
General: "",
Music: "",
Movies: "",
Television: "",
Books: "",
Heroes: ""
} satisfies Record<(typeof defaultInterestNames)[number], string>;
export const defaultStatus = {
status: "",
currentVibe: ""
};
export type UserProfile = CurrentUser & {
createdAt: string;
handle: string;
bioHtml: string;
skinHtml: string;
interests: typeof defaultInterests;
socialLinks: SocialLinks;
status: typeof defaultStatus;
pfp: string;
themeSong: string;
currentGroupId: number | null;
private: boolean;
views: number;
};
export type PersonCard = {
id: number;
username: string;
handle: string;
pfp: string;
};
export type CommentItem = {
id: number;
textHtml: string;
createdAt: string;
authorId: number;
authorRole: string;
authorHandle: string;
authorSkinHtml: string;
username: string;
pfp: string;
parentId: number | null;
};
export type Friendship = {
id: number;
sender_id: number;
receiver_id: number;
status: (typeof friendshipStatus)[keyof typeof friendshipStatus];
};
export type BlogItem = {
id: number;
title: string;
bodyHtml: string;
createdAt: string;
updatedAt: string;
authorId: number;
authorRole: string;
authorHandle: string;
username: string;
category: BlogCategory;
privacyLevel: number;
pinned: number;
propsCount: number;
commentCount: number;
proppedByViewer: number;
commentsEnabled: number;
};
export type BlogPreview = Pick<BlogItem, "id" | "title" | "bodyHtml" | "createdAt" | "updatedAt" | "category" | "privacyLevel" | "pinned" | "propsCount" | "commentCount" | "proppedByViewer" | "commentsEnabled">;
export type BlogListItem = BlogPreview & Partial<Pick<BlogItem, "authorId" | "authorRole" | "authorHandle" | "username">>;
export type StaffUserRow = CurrentUser & {
createdAt: string;
handle: string;
pfp: string;
views: number;
verifiedAt: string | null;
bannedAt: string | null;
};
export type GroupItem = {
id: number;
name: string;
descriptionHtml: string;
createdAt: string;
ownerId: number;
ownerRole: string;
ownerHandle: string;
ownerName: string;
memberCount: number;
};
export type GroupMember = PersonCard & {
role: string;
joinedAt: string;
};
export type PostCommentBumpActor = {
id: number;
handle: string;
name: string;
};
export type PostCommentBump = {
commentedAt: string;
commenterCount: number;
actors: PostCommentBumpActor[];
};
export type PostItem = {
id: number;
bodyHtml: string;
mediaFilename: string | null;
createdAt: string;
updatedAt: string;
authorId: number;
authorRole: string;
authorHandle: string;
authorSkinHtml: string;
username: string;
pfp: string;
wallUserId: number | null;
wallUserHandle: string | null;
wallUsername: string | null;
groupId: number | null;
groupName: string | null;
groupOwnerId: number | null;
propCount: number;
commentCount: number;
proppedByViewer: number;
viewerCanInteract: number;
commentBump?: PostCommentBump | null;
};
export type ReportItem = {
id: number;
reporterId: number | null;
reporterName: string | null;
reporterHandle: string | null;
subjectAuthorId: number | null;
subjectAuthorName: string | null;
subjectAuthorHandle: string | null;
subjectType: ReportSubjectType;
subjectId: number;
subjectLabel: string;
subjectUrl: string | null;
subjectSummary: string;
subjectMissing: boolean;
subjectCanDelete: boolean;
reasonHtml: string;
createdAt: string;
resolvedAt: string | null;
resolvedByName: string | null;
};
export type MessageItem = {
id: number;
senderId: number;
senderName: string;
senderHandle: string;
senderPfp: string;
receiverId: number;
receiverName: string;
receiverHandle: string;
subject: string;
bodyHtml: string;
readAt: string | null;
createdAt: string;
};
export type MessageConversation = {
id: number;
otherUserId: number;
otherName: string;
otherHandle: string;
otherPfp: string;
latestSenderId: number;
latestSubject: string;
unreadCount: number;
createdAt: string;
};
export type NotificationItem = {
id: number;
recipientId: number;
actorId: number;
actorName: string;
actorHandle: string;
kind: NotificationKind;
subjectType: NotificationSubjectType;
subjectId: number;
contextType: NotificationContextType;
contextId: number;
contextPostAuthorId: number | null;
contextPostWallUserId: number | null;
contextTitle: string | null;
readAt: string | null;
createdAt: string;
};
export type SkinItem = {
id: number;
sourceKey: string | null;
title: string;
descriptionHtml: string;
codeHtml: string;
createdAt: string;
updatedAt: string;
authorId: number | null;
authorRole: string;
authorHandle: string;
username: string;
commentCount: number;
};
export type TableCount = {
name: string;
count: number;
};
export type FavoriteEdge = {
userId: number;
username: string;
userHandle: string;
favoriteId: number;
favoriteName: string;
favoriteHandle: string;
createdAt: string;
};
export type AuditItem = {
id: number;
actorId: number | null;
actorName: string | null;
actorHandle: string | null;
action: string;
subjectType: AuditSubjectType;
subjectId: number;
subjectLabel: string;
subjectUrl: string | null;
subjectSummary: string;
subjectMissing: boolean;
subjectAuthorId: number | null;
subjectAuthorName: string | null;
subjectAuthorHandle: string | null;
reasonHtml: string;
metadataJson: string;
createdAt: string;
};
export type AutomodRule = {
id: number;
name: string;
pattern: string;
patternType: AutomodPatternType;
scope: AutomodScope;
action: AutomodAction;
enabled: number;
createdBy: number | null;
createdByName: string | null;
createdAt: string;
updatedAt: string;
};
export type AutomodMatch = {
rule: AutomodRule;
};
export type EmailOutboxItem = {
id: number;
toEmail: string;
subject: string;
bodyText: string;
sentAt: string | null;
deliveryError: string | null;
createdAt: string;
};
export type RateLimitSetting = {
action: RateLimitAction;
limit: number;
windowSeconds: number;
defaultLimit: number;
defaultWindowSeconds: number;
overridden: boolean;
updatedAt: string | null;
};

33
src/navigation.ts Normal file
View file

@ -0,0 +1,33 @@
import { messagesPath } from "./paths.js";
export const pageLinks = {
about: { label: "About", href: "/about" },
adminUsers: { label: "User list", href: "/admin/users" },
blog: { label: "Blog", href: "/blog" },
browse: { label: "Browse", href: "/browse" },
favorites: { label: "Favs", href: "/favorites" },
feed: { label: "Feed", href: "/feed" },
groups: { label: "Groups", href: "/groups" },
home: { label: "Home", href: "/" },
messages: { label: "Messages", href: messagesPath },
props: { label: "Props", href: "/props" },
search: { label: "Search", href: "/search" },
settings: { label: "Account settings", href: "/settings" },
skins: { label: "Skins", href: "/skins" }
} as const;
export type PageLinkKey = keyof typeof pageLinks;
export const mainNavPageOrder = [
"home",
"feed",
"messages",
"groups",
"browse",
"search",
"blog",
"skins",
"favorites",
"props",
"about"
] as const satisfies readonly PageLinkKey[];

75
src/notifications.ts Normal file
View file

@ -0,0 +1,75 @@
export const notificationKinds = {
blogComment: "blog_comment",
blogCommentFollowed: "blog_comment_followed",
blogCommentReply: "blog_comment_reply",
blogProp: "blog_prop",
favorite: "favorite",
friendAccepted: "friend_accepted",
postComment: "post_comment",
postCommentFollowed: "post_comment_followed",
postCommentReply: "post_comment_reply",
postProp: "post_prop",
skinComment: "skin_comment",
skinCommentFollowed: "skin_comment_followed",
skinCommentReply: "skin_comment_reply",
wallPost: "wall_post"
} as const;
export const notificationKindNames = Object.values(notificationKinds);
export type NotificationKind = (typeof notificationKindNames)[number];
export const notificationPreferenceTypes = {
// Stored as wall_comments for compatibility with existing preference rows.
comments: "wall_comments",
favorites: "favorites",
friendAccepts: "friend_accepts",
props: "props",
wallPosts: "wall_posts"
} as const;
export const notificationPreferenceTypeNames = Object.values(notificationPreferenceTypes);
export type NotificationPreferenceType = (typeof notificationPreferenceTypeNames)[number];
export type NotificationPreferences = Record<NotificationPreferenceType, boolean>;
export const commentNotificationKinds: ReadonlySet<NotificationKind> = new Set([
notificationKinds.blogComment,
notificationKinds.blogCommentFollowed,
notificationKinds.blogCommentReply,
notificationKinds.postComment,
notificationKinds.postCommentFollowed,
notificationKinds.postCommentReply,
notificationKinds.skinComment,
notificationKinds.skinCommentFollowed,
notificationKinds.skinCommentReply
]);
export const notificationTextByKind = {
[notificationKinds.blogComment]: "commented on your blog entry.",
[notificationKinds.blogCommentFollowed]: "commented on a blog entry you commented on.",
[notificationKinds.blogCommentReply]: "replied to your blog comment.",
[notificationKinds.blogProp]: "gave props to your blog entry.",
[notificationKinds.favorite]: "added you to favorites.",
[notificationKinds.friendAccepted]: "accepted your friend request.",
[notificationKinds.postComment]: "commented on your post.",
[notificationKinds.postCommentFollowed]: "commented on a post you commented on.",
[notificationKinds.postCommentReply]: "replied to your comment.",
[notificationKinds.postProp]: "gave props to your post.",
[notificationKinds.skinComment]: "commented on your skin.",
[notificationKinds.skinCommentFollowed]: "commented on a skin you commented on.",
[notificationKinds.skinCommentReply]: "replied to your skin comment.",
[notificationKinds.wallPost]: "posted on your wall."
} satisfies Record<NotificationKind, string>;
export const notificationSubjectTypeNames = [
"blog",
"blog_comment",
"post",
"post_comment",
"skin",
"skin_comment",
"user"
] as const;
export type NotificationSubjectType = (typeof notificationSubjectTypeNames)[number];
export const notificationContextTypeNames = ["blog", "post", "skin", "user"] as const;
export type NotificationContextType = (typeof notificationContextTypeNames)[number];

Some files were not shown because too many files have changed in this diff Show more