versia-pub/docs
2
0
Fork 0
mirror of https://github.com/versia-pub/docs.git synced 2025-12-06 14:28:20 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge pull request #5 from lysand-org/refactor/nextjs

Browse source 
Complete site rewrite for Working Draft 4.0
This commit is contained in:
Gaspard Wierzbinski 2024-08-26 13:58:45 +02:00 committed by GitHub
parent 47ce9bd9f8 2e7d588902
commit a921facdd5
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
174 changed files with 8623 additions and 4029 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
.github/dependabot.yml vendored Normal file
View file

@ -0,0 +1,11 @@
# To get started with Dependabot version updates, you'll need to specify which
# package ecosystems to update and where the package manifests are located.
# Please see the documentation for all configuration options:
# https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
version: 2
updates:
- package-ecosystem: "npm" # See documentation for possible values
directory: "/" # Location of package manifests
schedule:
interval: "weekly"

31
.github/workflows/check.yml vendored Normal file
View file

@ -0,0 +1,31 @@
name: Check Types
on:
push:
branches: ['*']
pull_request:
# The branches below must be a subset of the branches above
branches: ['main']
jobs:
tests:
runs-on: ubuntu-latest
permissions:
contents: read
steps:
- name: Checkout code
uses: actions/checkout@v4
with:
submodules: recursive
- name: Setup Bun
uses: oven-sh/setup-bun@v2
- name: Install NPM packages
run: |
bun install
- name: Run typechecks
run: |
bun run typecheck

79
.github/workflows/codeql.yml vendored Normal file
View file

@ -0,0 +1,79 @@
# For most projects, this workflow file will not need changing; you simply need
# to commit it to your repository.
#
# You may wish to alter this file to override the set of languages analyzed,
# or to provide custom queries or build logic.
#
# ******** NOTE ********
# We have attempted to detect the languages in your repository. Please check
# the `language` matrix defined below to confirm you have the correct set of
# supported CodeQL languages.
#
name: "CodeQL"
on:
push:
branches: ["main"]
pull_request:
# The branches below must be a subset of the branches above
branches: ["main"]
jobs:
analyze:
name: Analyze
# Runner size impacts CodeQL analysis time. To learn more, please see:
# - https://gh.io/recommended-hardware-resources-for-running-codeql
# - https://gh.io/supported-runners-and-hardware-resources
# - https://gh.io/using-larger-runners
# Consider using larger runners for possible analysis time improvements.
runs-on: ${{ (matrix.language == 'swift' && 'macos-latest') || 'ubuntu-latest' }}
timeout-minutes: ${{ (matrix.language == 'swift' && 120) || 360 }}
permissions:
actions: read
contents: read
security-events: write
strategy:
fail-fast: false
matrix:
language: ["javascript"]
# CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby', 'swift' ]
# Use only 'java' to analyze code written in Java, Kotlin or both
# Use only 'javascript' to analyze code written in JavaScript, TypeScript or both
# Learn more about CodeQL language support at https://aka.ms/codeql-docs/language-support
steps:
- name: Checkout repository
uses: actions/checkout@v4
# Initializes the CodeQL tools for scanning.
- name: Initialize CodeQL
uses: github/codeql-action/init@v2
with:
languages: ${{ matrix.language }}
# If you wish to specify custom queries, you can do so here or in a config file.
# By default, queries listed here will override any specified in a config file.
# Prefix the list here with "+" to use these queries and those in the config file.
# For more details on CodeQL's query packs, refer to: https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
# queries: security-extended,security-and-quality
# Autobuild attempts to build any compiled languages (C/C++, C#, Go, Java, or Swift).
# If this step fails, then you should remove it and run the build manually (see below)
- name: Autobuild
uses: github/codeql-action/autobuild@v2
# ℹ️ Command-line programs to run using the OS shell.
# 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
# If the Autobuild fails above, remove it and uncomment the following three lines.
# modify them (or add more) to build your code if your project, please refer to the EXAMPLE below for guidance.
# - run: |
# echo "Run, Build Application using script"
# ./location_of_script_within_repo/buildscript.sh
- name: Perform CodeQL Analysis
uses: github/codeql-action/analyze@v2
with:
category: "/language:${{matrix.language}}"

61
.github/workflows/deploy.yml vendored
View file

@ -1,61 +0,0 @@
# Sample workflow for building and deploying a VitePress site to GitHub Pages
#
name: Deploy VitePress site to Pages
on:
# Runs on pushes targeting the `main` branch. Change this to `master` if you're
# using the `master` branch as the default branch.
push:
branches: [main]
# Allows you to run this workflow manually from the Actions tab
workflow_dispatch:
# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:
contents: read
pages: write
id-token: write
# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
concurrency:
group: pages
cancel-in-progress: false
jobs:
# Build job
build:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v4
with:
fetch-depth: 0 # Not needed if lastUpdated is not enabled
# - uses: pnpm/action-setup@v2 # Uncomment this if you're using pnpm
- uses: oven-sh/setup-bun@v1 # Uncomment this if you're using Bun
- name: Setup Pages
uses: actions/configure-pages@v4
- name: Install dependencies
run: bun install
- name: Build with VitePress
run: |
bun run docs:build
touch .vitepress/dist/.nojekyll
- name: Upload artifact
uses: actions/upload-pages-artifact@v3
with:
path: .vitepress/dist
# Deployment job
deploy:
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
needs: build
runs-on: ubuntu-latest
name: Deploy
steps:
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v4

33
.github/workflows/lint.yml vendored Normal file
View file

@ -0,0 +1,33 @@
name: Lint & Format
on:
push:
branches: ["*"]
pull_request:
# The branches below must be a subset of the branches above
branches: ["main"]
jobs:
tests:
runs-on: ubuntu-latest
permissions:
contents: read
security-events: write
actions: read # only required for a private repository by github/codeql-action/upload-sarif to get the Action run status
steps:
- name: Checkout code
uses: actions/checkout@v4
with:
submodules: recursive
- name: Setup Bun
uses: oven-sh/setup-bun@v2
- name: Install NPM packages
run: |
bun install
- name: Run linting
run: |
bunx @biomejs/biome ci .

38
.gitignore vendored
View file

@ -1,3 +1,35 @@
node_modules # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
.vitepress/cache
.vitepress/dist # dependencies
/node_modules
/.pnp
.pnp.js
# testing
/coverage
# next.js
/.next/
/out/
# production
/build
# misc
.DS_Store
*.pem
# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# local env files
.env*.local
# vercel
.vercel
# typescript
*.tsbuildinfo
next-env.d.ts

165
.vitepress/config.mts
View file

@ -1,165 +0,0 @@
import tailwindcss from "@tailwindcss/vite";
import { defineConfig } from "vitepress";
// https://vitepress.dev/reference/site-config
export default defineConfig({
title: "Lysand Documentation",
description: "Documentation for Lysand, a new federated protocol",
vite: {
plugins: [tailwindcss()],
},
vue: {
template: {
compilerOptions: {
isCustomElement: (tag) => tag === "iconify-icon",
},
},
},
srcDir: "docs",
themeConfig: {
// https://vitepress.dev/reference/default-theme-config
nav: [
{ text: "Home", link: "/" },
{ text: "Specification", link: "/spec" },
{ text: "Objects", link: "/objects" },
{ text: "Security", link: "/security/api" },
{ text: "Extensions", link: "/extensions" },
],
sidebar: [
{
text: "Specification",
items: [
{ text: "Spec", link: "/spec" },
{ text: "Objects", link: "/objects" },
],
},
{
text: "Structures",
items: [
{
text: "Content Format",
link: "/structures/content-format",
},
{ text: "Custom Emoji", link: "/structures/custom-emoji" },
{ text: "Collection", link: "/structures/collection" },
],
},
{
text: "Groups",
items: [{ text: "Groups", link: "/groups" }],
},
{
text: "Security",
items: [
{ text: "API", link: "/security/api" },
{ text: "Keys", link: "/security/keys" },
{ text: "Signing", link: "/security/signing" },
],
},
{
text: "Objects",
items: [
{
text: "Publications",
link: "/objects/publications",
items: [
{ text: "Note", link: "/objects/note" },
{ text: "Patch", link: "/objects/patch" },
],
},
{
text: "Actors",
link: "/objects/actors",
items: [{ text: "User", link: "/objects/user" }],
},
{
text: "Actions",
link: "/objects/actions",
items: [
{ text: "Like", link: "/objects/like" },
{ text: "Dislike", link: "/objects/dislike" },
{ text: "Follow", link: "/objects/follow" },
{
text: "FollowAccept",
link: "/objects/follow-accept",
},
{
text: "FollowReject",
link: "/objects/follow-reject",
},
{ text: "Announce", link: "/objects/announce" },
{ text: "Undo", link: "/objects/undo" },
],
},
{
text: "Server Metadata",
link: "/objects/server-metadata",
},
],
},
{
text: "Federation",
items: [
{ text: "Endpoints", link: "/federation/endpoints" },
{
text: "User Discovery",
link: "/federation/user-discovery",
},
{ text: "Server Actors", link: "/federation/server-actor" },
],
},
{
text: "Extensions",
link: "/extensions",
items: [
{
text: "Custom Emojis",
link: "/extensions/custom-emojis",
},
{
text: "Microblogging",
link: "/extensions/microblogging",
},
{ text: "Reactions", link: "/extensions/reactions" },
{ text: "Polls", link: "/extensions/polls" },
{ text: "Is Cat", link: "/extensions/is-cat" },
{
text: "Server Endorsements",
link: "/extensions/server-endorsement",
},
{ text: "Events", link: "/extensions/events" },
{ text: "Reports", link: "/extensions/reports" },
{ text: "Migration", link: "/extensions/migration" },
{ text: "Vanity", link: "/extensions/vanity" },
{
text: "Interactivity",
link: "/extensions/interactivity",
},
],
},
],
footer: {
message: "Released under the MIT License.",
copyright: "Copyright © 2023-present Gaspard Wierzbinski",
},
socialLinks: [
{ icon: "github", link: "https://github.com/lysand-org/" },
],
search: {
provider: "local",
},
editLink: {
pattern: "https://github.com/lysand-org/docs/edit/main/docs/:path",
},
externalLinkIcon: true,
logo: "https://cdn.lysand.org/logo.webp",
},
lastUpdated: true,
cleanUrls: true,
titleTemplate: ":title · Lysand Docs",
head: [["link", { rel: "icon", href: "/favicon.png", type: "image/png" }]],
lang: "en-US",
});

13
.vitepress/theme/Layout.vue
View file

@ -1,13 +0,0 @@
<script setup>
import DefaultTheme from 'vitepress/theme'
import Banner from '../../components/Banner.vue';
import "iconify-icon";
const { Layout } = DefaultTheme
</script>
<template>
<Banner />
<Layout>
</Layout>
</template>

62
.vitepress/theme/custom.css
View file

@ -1,62 +0,0 @@
@import "tailwindcss";
@theme {
}
:root {
/* --vp-home-hero-image-background-image: linear-gradient(
to top right,
rgb(249, 168, 212),
rgb(216, 180, 254),
rgb(129, 140, 248)
);
--vp-home-hero-image-filter: brightness(0.8) saturate(1.2); */
--vp-home-hero-name-color: rgb(249, 168, 212);
--vp-c-brand-1: rgb(249, 168, 212);
--vp-layout-top-height: var(--spacing-10);
--lysand-gradient: linear-gradient(
to right,
rgb(249, 168, 212),
rgb(216, 180, 254),
rgb(129, 140, 248)
);
--vp-color-primary: rgb(249, 168, 212);
--vp-color-secondary: rgb(216, 180, 254);
--vp-button-brand-bg: transparent;
--vp-c-bg-soft: rgb(250, 250, 250);
}
.dark {
--vp-c-bg: rgb(24, 24, 24);
--vp-c-bg-soft: rgb(32, 32, 32);
}
.VPFeature {
border-radius: 0.3rem !important;
transition: all 0.2s ease-in-out !important;
}
.VPFeature:hover {
transform: scale(1.02);
border-color: var(--vp-color-primary);
}
.VPButton.medium {
border-radius: 0.3rem !important;
transition: all 0.2s ease-in-out !important;
}
.VPButton.medium:hover {
transform: scale(1.02);
}
.VPButton.brand {
background: var(--lysand-gradient);
border: none !important;
}
@media (min-width: 960px) {
.image-container {
width: 50% !important;
margin-right: 0.5rem !important;
}
}

8
.vitepress/theme/index.ts
View file

@ -1,8 +0,0 @@
import DefaultTheme from "vitepress/theme";
import Layout from "./Layout.vue";
import "./custom.css";
export default {
extends: DefaultTheme,
Layout,
};

33
Dockerfile
View file

@ -1,33 +0,0 @@
FROM oven/bun:alpine as base
# Install dependencies into temp directory
# This will cache them and speed up future builds
FROM base AS install
RUN mkdir -p /temp/dev
COPY package.json bun.lockb /temp/dev/
RUN cd /temp/dev && bun install --frozen-lockfile
# Install with --production (exclude devDependencies)
RUN mkdir -p /temp/prod
COPY package.json bun.lockb /temp/prod/
RUN cd /temp/prod && bun install --frozen-lockfile --production
FROM base AS builder
COPY . /app
RUN cd /app && bun install
RUN cd /app && bun docs:build
FROM base AS final
COPY --from=builder /app/.vitepress/dist/ /app
LABEL org.opencontainers.image.authors "Gaspard Wierzbinski (https://cpluspatch.com)"
LABEL org.opencontainers.image.source "https://github.com/lysand-org/docs"
LABEL org.opencontainers.image.vendor "Lysand.org"
LABEL org.opencontainers.image.licenses "MIT"
LABEL org.opencontainers.image.title "Lysand Docs"
LABEL org.opencontainers.image.description "Documentation for Lysand"
WORKDIR /app
CMD ["bun", "docs:serve"]

687
LICENSE
View file

@ -1,21 +1,674 @@
MIT License GNU GENERAL PUBLIC LICENSE
Version 3, 29 June 2007
Copyright (c) 2019 Gaspard Wierzbinski 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.
Permission is hereby granted, free of charge, to any person obtaining a copy Preamble
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all The GNU General Public License is a free, copyleft license for
copies or substantial portions of the Software. software and other kinds of works.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR The licenses for most software and other practical works are designed
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, to take away your freedom to share and change the works. By contrast,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE the GNU General Public License is intended to guarantee your freedom to
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER share and change all versions of a program--to make sure it remains free
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, software for all its users. We, the Free Software Foundation, use the
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE GNU General Public License for most of our software; it applies also to
SOFTWARE. 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>.

65
README.md
View file

@ -1,12 +1,63 @@
# Lysand Docs
<p align="center">
<a href="https://versia.pub"><img src="https://cdn.versia.pub/branding/versia-dark.webp" alt="Versia Logo" height="110"></a>
</p>
<h2 align="center">
<strong><code>Versia Documentation</code></strong>
</h2>
<div align="center">
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/typescript/typescript-original.svg" height="42" width="52" alt="TypeScript logo">
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg" height="42" width="52" alt="React logo">
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nextjs/nextjs-original.svg" height="42" width="52" alt="NextJS logo">
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/docker/docker-original.svg" height="42" width="52" alt="Docker logo">
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/bun/bun-original.svg" height="42" width="52" alt="Bun logo">
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/css3/css3-original.svg" height="42" width="52" alt="CSS3 logo">
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/html5/html5-original.svg" height="42" width="52" alt="HTML5 logo">
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/linux/linux-original.svg" height="42" width="52" alt="Linux logo">
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/tailwindcss/tailwindcss-original.svg" height="42" width="52" alt="TailwindCSS logo">
</div>
<br/>
<p align="center">
<img src="public/screenshots/framed/ipad-home.webp" alt="Versia on an iPad" height="400">
</p>
## Technologies
- [**`TypeScript`**](https://www.typescriptlang.org/): A typed superset of JavaScript that compiles to plain JavaScript.
- [**`React`**](https://reactjs.org/): A JavaScript library for building user interfaces.
- [**`Next.js`**](https://nextjs.org/): A React framework for building static and dynamic websites.
- [**`MDX`**](https://mdxjs.com/): Markdown for the component era.
- [**`Zustand`**](https://zustand.surge.sh/): A small, fast, and scalable state management library.
- [**`Framer Motion`**](https://www.framer.com/motion/): A production-ready motion library for React.
- [**`FlexSearch`**](https://flexsearch.net/): A full-text search library for JavaScript.
## Installation
This project uses [Bun](https://bun.sh) as a package manager. To install the dependencies, run:
```bash
bun install
```
To start the development server, run:
```bash
bun dev
```
## Contributing ## Contributing
This site is built with [VitePress](https://github.com/vuejs/vitepress), and its content is written in Markdown format located in `docs`. For simple edits, you can directly edit the file on GitHub and generate a Pull Request. Contributions are welcome! Feel free to open an issue or submit a pull request.
For local development, [bun](https://bun.sh/) is preferred as package manager and runtime: ### Licenses
```bash The code in this repository is licensed under the [MIT License](
bun i https://opensource.org/licenses/MIT).
bun docs:dev
``` However, the *documentation text* (including the Markdown files in the `app` directory) is licensed under the [Creative Commons Attribution 4.0 International License](https://creativecommons.org/licenses/by/4.0/). You are free to share and adapt the text as long as you provide proper attribution.

41
app/changelog/page.mdx Normal file
View file

@ -0,0 +1,41 @@
export const metadata = {
title: 'Changelog',
description:
'Changes since the last version of the Versia protocol.',
}
# Changelog
This page lists changes since Working Draft 03. {{ className: 'lead' }}
## Since WD 03
- Rewrote the signature system from scratch to be simpler and not depend on dates.
- Moved Likes and Dislikes to an extension.
- Added [Delegation](/federation/delegation).
- Renamed fields on several common entities like [Users](/entities/user) and [Notes](/entities/note).
- Removed the `Patch` entity.
- Useless since edits can just be sent to inboxes directly.
- Allowed `uri`s to not contain the entity's `id`.
- Loosened restrictions on the `id` field in entities.
- Can now be any string, not just a UUID.
- Made `uri` optional in some entities not useful enough to keep track of.
- Added shared inboxes.
- Added `remote` field to [ContentFormat](/structures/content-format).
- Switched to [ThumbHash](https://evanw.github.io/thumbhash/) from [BlurHash](https://blurha.sh/).
- Added identification characters to [Custom Emojis](/structures/emoji).
- Added `manually_approves_followers` to [Users](/entities/user).
- Removed `visibility` from [Notes](/entities/note).
- Made `subject` optional in [Notes](/entities/note).
- Clarified the way [Follows](/entities/follow) work.
- Removed the use of `Undo` entities for anything except than deleting entities.
- Renamed `Undo` to [Delete](/entities/delete).
- Added [Unfollow](/entities/unfollow) entity.
- Completely rework `ServerMetadata`, and rename to [InstanceMetadata](/entities/instance-metadata).
- Remove Server Actors, and move instance public keys to [InstanceMetadata](/entities/instance-metadata).
- Add `algorithm` to [Users](/entities/user) and [InstanceMetadata](/entities/instance-metadata)'s public keys for future use (only `ed25519` is allowed for now).
- Renamed the second `public_key` to `key`.
- Renamed `Announce` to [Share](/extensions/share).
- Renamed `prev` to `previous` in [Collections](/structures/collection).
- Removed `extension_type` from entities, and instead use the `type` field.
- Removed `VoteResult` from the [Polls Extension](/extensions/polls).

52
app/entities/delete/page.mdx Normal file
View file

@ -0,0 +1,52 @@
export const metadata = {
title: 'Delete',
description: 'Deletes are used to remove entities from the system',
}
# Delete
Signals the deletion of an entity. {{ className: 'lead' }}
## Authorization
Implementations **must** ensure that the author of the `Delete` entity has the authorization to delete the target entity.
Having the authorization is defined as:
- The author is the creator of the target entity (including [delegation](/federation/delegation)).
- The author is the instance.
## Entity Definition
<Row>
<Col>
<Properties>
<Property name="uri" type="null" required={false}>
This entity does not have a URI.
</Property>
<Property name="author" type="URI | null" required={true} typeLink="/types#uri">
URI of the `User` who is deleting the entity. [Can be set to `null` to represent the instance](/entities/instance-metadata#the-null-author).
</Property>
<Property name="deleted_type" type="string" required={true}>
Type of the entity being deleted.
</Property>
<Property name="target" type="URI" required={true} typeLink="/types#uri">
URI of the entity being deleted.
</Property>
</Properties>
</Col>
<Col sticky>
```jsonc {{ title: 'Example Delete' }}
{
"type": "Delete",
"id": "9b3212b8-529c-435a-8798-09ebbc17ca74",
"created_at": "2021-01-01T00:00:00.000Z",
"author": "https://example.com/users/6e0204a2-746c-4972-8602-c4f37fc63bbe",
"deleted_type": "Note",
"deleted": "https://example.com/notes/02e1e3b2-cb1f-4e4a-b82e-98866bee5de7"
}
```
</Col>
</Row>

42
app/entities/follow-accept/page.mdx Normal file
View file

@ -0,0 +1,42 @@
export const metadata = {
title: 'FollowAccept',
description: 'FollowAccept lets users accept follow requests',
}
# FollowAccept
<Note>
Refer to the [Follow](/entities/follow) entity for information on how follow relationships work.
</Note>
## Entity Definition
<Row>
<Col>
<Properties>
<Property name="uri" type="null" required={false}>
This entity does not have a URI.
</Property>
<Property name="author" type="URI" required={true} typeLink="/types#uri">
URI of the `User` considered the 'followee', i.e. the user who is being followed.
</Property>
<Property name="follower" type="URI" required={true} typeLink="/types#uri">
URI of the `User` considered the 'follower', i.e. the user who is trying to follow the author.
</Property>
</Properties>
</Col>
<Col sticky>
```jsonc {{ title: 'Example FollowAccept' }}
{
"type": "FollowAccept",
"id": "3e7e4750-afd4-4d99-a256-02f0710a0520",
"author": "https://example.com/users/6e0204a2-746c-4972-8602-c4f37fc63bbe",
"created_at": "2021-01-01T00:00:00.000Z",
"follower": "https://example.com/users/02e1e3b2-cb1f-4e4a-b82e-98866bee5de7"
}
```
</Col>
</Row>

52
app/entities/follow-reject/page.mdx Normal file
View file

@ -0,0 +1,52 @@
export const metadata = {
title: 'FollowReject',
description: 'FollowReject lets users reject follow requests',
}
# FollowReject
<Note>
Refer to the [Follow](/entities/follow) entity for information on how follow relationships work.
</Note>
## Removing followers
`FollowReject` can also be used *after* a follow relationship has been established to remove a follower.
For example, if Bob requests to follow Alice, this entity is used when:
- Alice wants to reject Bob's follow request.
But it can also be used when Bob is already following Alice, in the case that:
- Alice wants to remove Bob as a follower.
## Entity Definition
<Row>
<Col>
<Properties>
<Property name="uri" type="null" required={false}>
This entity does not have a URI.
</Property>
<Property name="author" type="URI" required={true} typeLink="/types#uri">
URI of the `User` considered the 'followee', i.e. the user who is being followed.
</Property>
<Property name="follower" type="URI" required={true} typeLink="/types#uri">
URI of the `User` considered the 'follower', i.e. the user who is trying to follow the author.
</Property>
</Properties>
</Col>
<Col sticky>
```jsonc {{ title: 'Example FollowReject' }}
{
"type": "FollowReject",
"id": "3e7e4750-afd4-4d99-a256-02f0710a0520",
"author": "https://example.com/users/6e0204a2-746c-4972-8602-c4f37fc63bbe",
"created_at": "2021-01-01T00:00:00.000Z",
"follower": "https://example.com/users/02e1e3b2-cb1f-4e4a-b82e-98866bee5de7"
}
```
</Col>
</Row>

94
app/entities/follow/page.mdx Normal file
View file

@ -0,0 +1,94 @@
export const metadata = {
title: 'Follow',
description: 'The Follow entity allows users to subscribe to each other',
}
# Follow
Sometimes, [Users](/entities/user) want to subscribe to each other to see each other's content. The `Follow` entity facilitates this, by defining a subscription relationship between two users. {{ className: 'lead' }}
## Vocabulary
- **Follower**: The user who is subscribing to another user. If `Joe` is following `Alice`, `Joe` is the follower.
- **Followee**: The user who is being subscribed to. If `Joe` is following `Alice`, `Alice` is the followee.
- **Subscribing**: Identical to **Following**. The act of subscribing to another user's content.
## Usage
Consider the following example:
`Joe`, a user on `social.joe.org`, wants to follow `Alice`, a user on `alice.dev`.
### Sending a Follow Request
To establish a follow relationship, `social.joe.org` can do the following:
1. Create a `Follow` entity with `Joe` as the author and `Alice` as the followee.
2. Send the `Follow` entity to `Alice`'s inbox.
3. Mark the relationship as "processing" in its database until `Alice` accepts the follow request.
### Accepting the Follow Request
To accept the follow request, `Alice` can do the following:
1. Create a [FollowAccept](/entities/follow-accept) entity with `Alice` as the author and `Joe` as the follower.
2. Send the `FollowAccept` entity to `Joe`'s inbox.
3. Update the relationship status in its database to "accepted".
### Rejecting the Follow Request
To reject the follow request, `Alice` can do the following:
1. Create a [FollowReject](/entities/follow-reject) entity with `Alice` as the author and `Joe` as the follower.
2. Send the `FollowReject` entity to `Joe`'s inbox.
3. Optionally, log the rejection in its database.
### Final Steps
Depending on whether the follow request is accepted or rejected, `social.joe.org` can then update the relationship status accordingly in its database.
## Behaviour
Once a follow relationship is established, the **followee**'s instance should send all new notes from the **followee** to the **follower**'s inbox.
## Entity Definition
<Row>
<Col>
<Properties>
<Property name="uri" type="null" required={false}>
This entity does not have a URI.
</Property>
<Property name="author" type="URI" required={true} typeLink="/types#uri">
URI of the `User` considered the 'follower'.
</Property>
<Property name="followee" type="URI" required={true} typeLink="/types#uri">
URI of the `User` that is being followed.
</Property>
</Properties>
</Col>
<Col sticky>
```jsonc {{ title: 'Example Follow' }}
{
"type": "Follow",
"id": "3e7e4750-afd4-4d99-a256-02f0710a0520",
"author": "https://example.com/users/6e0204a2-746c-4972-8602-c4f37fc63bbe",
"created_at": "2021-01-01T00:00:00.000Z",
"followee": "https://example.com/users/02e1e3b2-cb1f-4e4a-b82e-98866bee5de7"
}
```
</Col>
</Row>
## Graph
<p>
<a href="/graphs/how-follows-work.svg" target="_blank">View the full-size graph</a>
</p>
<div className="bg-zinc-800 rounded border border-zinc-900/5 dark:border-white/5 p-4">
<img src="/graphs/how-follows-work.svg" alt="How Follows Work" className="w-full" />
</div>

58
app/entities/group/page.mdx Normal file
View file

@ -0,0 +1,58 @@
export const metadata = {
title: 'Groups',
description: 'Groups are a way to organize users and notes into communities.'
}
# Groups
Groups are a way to organize users and notes into communities. They can be used for any purpose, such as forums, blogs, image galleries, video sharing, audio sharing, and messaging. They are similar to Discord's channels or Matrix's rooms. {{ className: 'lead' }}
Refer to [Note](/entities/note#entity-definition)'s `group` property for how notes can be associated with groups.
## Entity Definition
<Row>
<Col>
<Properties>
<Property name="name" type="ContentFormat" required={false} typeLink="/structures/content-format">
Group name/title.
Text only (`text/plain`, `text/html`, etc).
</Property>
<Property name="description" type="ContentFormat" required={false} typeLink="/structures/content-format">
Short description of the group's contents and purpose.
Text only (`text/plain`, `text/html`, etc).
</Property>
<Property name="members" type="URI" required={true} typeLink="/types#uri">
URI of the group's members list. [Collection](/structures/collection) of [Users](/entities/user).
</Property>
<Property name="notes" type="URI" required={false} typeLink="/types#uri">
URI of the group's associated notes. [Collection](/structures/collection) of [Notes](/entities/note).
</Property>
</Properties>
</Col>
<Col sticky>
```jsonc {{ title: "Example Group" }}
{
"type": "Group",
"id": "ed480922-b095-4f09-9da5-c995be8f5960",
"uri": "https://example.com/groups/ed480922-b095-4f09-9da5-c995be8f5960",
"name": {
"text/html": {
"content": "The <strong>Woozy</strong> fan club"
}
},
"description": {
"text/plain": {
"content": "A group for fans of the Woozy emoji."
}
},
"members": "https://example.com/groups/ed480922-b095-4f09-9da5-c995be8f5960/members",
}
```
</Col>
</Row>

146
app/entities/instance-metadata/page.mdx Normal file
View file

@ -0,0 +1,146 @@
export const metadata = {
title: 'Instance Metadata',
description: 'Metadata about a Versia instance, such as capabilities and endpoints.',
}
# Instance Metadata
Contains metadata about a Versia instance, such as capabilities and endpoints. {{ className: 'lead' }}
## The `null` Author
On all entities that have an `author` field, the `author` can be `null` to represent the instance itself as the author (like ActivityPub's Server Actors). In this case, the instance's public key should be used to verify the entity.
## Entity Definition
<Row>
<Col>
<Properties>
<Property name="id" type="null">
This entity does not have an ID.
</Property>
<Property name="uri" type="null">
This entity does not have a URI.
</Property>
<Property name="name" type="string" required={true}>
Friendly name of the instance, for humans.
</Property>
<Property name="software" type="Software" required={true}>
Information about the software running the instance.
```typescript
type Software = {
name: string;
version: string;
}
```
- `name`: Name of the software.
- `version`: Version of the software. Should use [SemVer](https://semver.org/).
</Property>
<Property name="compatibility" type="Compatibility" required={true}>
Information about the compatibility of the instance.
```typescript
type Compatibility = {
versions: string[];
extensions: string[];
}
```
- `versions`: Supported Versia Protocol versions.
- Versions marked as "Working Draft X" are represented as `0.X`.
- `extensions`: Supported extensions.
</Property>
<Property name="description" type="string" required={false}>
Long description of the instance, for humans. Should be around 100-200 words.
</Property>
<Property name="host" type="string" required={true}>
Hostname of the instance. Includes the port if it is not the default (i.e. `443` for HTTPS).
</Property>
<Property name="shared_inbox" type="URI" required={false}>
URI to the instance's shared inbox, if supported.
</Property>
<Property name="public_key" type="PublicKey" required={true}>
Public key of the instance.
```typescript
type PublicKey = {
algorithm: string;
key: string;
}
```
- `algorithm`: Algorithm used for the public key. Can only be `ed25519` for now.
- `key`: Instance public key, in SPKI-encoded base64 (from raw bytes, not a PEM format).
</Property>
<Property name="moderators" type="URI" required={false}>
URI to [Collection](/structures/collection) of instance moderators.
<Note>
This is for human consumption (such as moderator contact), not for any kind of protocol authorization.
</Note>
</Property>
<Property name="admins" type="URI" required={false}>
URI to [Collection](/structures/collection) of instance administrators.
<Note>
This is for human consumption (such as admin contact), not for any kind of protocol authorization.
</Note>
</Property>
<Property name="logo" type="ContentFormat" required={false} typeLink="/structures/content-format">
Logo of the instance. Must be an image format (`image/*`).
</Property>
<Property name="banner" type="ContentFormat" required={false} typeLink="/structures/content-format">
Banner of the instance. Must be an image format (`image/*`).
</Property>
</Properties>
</Col>
<Col sticky>
```jsonc {{ 'title': 'InstanceMetadata' }}
{
"type": "InstanceMetadata",
"name": "Jim's Jolly Jimjams",
"software": {
"name": "Versia Server",
"version": "1.2.0-beta.3"
},
"compatibility": {
"versions": [
"0.3.0",
"0.4.0"
],
"extensions": [
"pub.versia:reactions",
"pub.versia:polls",
"pub.versia:reports"
]
},
"description": "Server for Jim's Jolly Jimjams, a social network for fans of Jimjams.",
"host": "social.jimjams.com",
"shared_inbox": "https://social.jimjams.com/inbox",
"moderators": "https://social.jimjams.com/moderators",
"admins": "https://social.jimjams.com/admins",
"logo": {
"image/png": {
"content": "https://social.jimjams.com/files/logo.png"
},
"image/webp": {
"content": "https://social.jimjams.com/files/logo.webp"
}
},
"public_key": {
"algorithm": "ed25519",
"key": "MCowBQYDK2VwAyEA9zhEMtQZetRl4QrLcz99i7jOa6ZVjX7aLfRUsMuKByI="
},
"banner": null,
"extensions": {
"example.extension:monthly_active_users": 1000
}
}
```
</Col>
</Row>

160
app/entities/note/page.mdx Normal file
View file

@ -0,0 +1,160 @@
export const metadata = {
title: 'Notes',
description: 'Definition of the Note entity',
}
# Notes
Notes represent a piece of content on a Versia instance. They can be posted by [Users](/entities/user) and are displayed in a user's feed. Notes can contain text, images, and other media. {{ className: 'lead' }}
<Note>
Notes are not just limited to microblogging. They can be used for any kind of content, such as forum posts, blog posts, image posts, video posts, audio posts, and even messaging.
</Note>
## Entity Definition
<Row>
<Col>
<Properties>
<Property name="attachments" type="ContentFormat[]" required={false} typeLink="/structures/content-format">
Media attachments to the note. May be any format.
</Property>
<Property name="author" type="URI" required={true} typeLink="/types#uri">
URI of the `User` considered the author of the note.
</Property>
<Property name="category" type="Category" required={false}>
Category of the note. Useful for clients to render notes differently depending on their intended purpose.
```typescript
type Category =
| "microblog" // Like Twitter, Mastodon
| "forum" // Like Reddit
| "blog" // Like WordPress, Medium
| "image" // Like Instagram
| "video" // Like YouTube, PeerTube
| "audio" // Like SoundCloud, Spotify
| "messaging"; // Like Discord, Element (Matrix), Signal
```
</Property>
<Property name="content" type="ContentFormat" required={false} typeLink="/structures/content-format">
The content of the note. Must be text format (`text/html`, `text/markdown`, etc). Must not be remote.
</Property>
<Property name="device" type="Device" required={false}>
Device used to post the note. Useful for functionality such as Twitter's "posted via" feature.
```typescript
type Device = {
name: string;
version?: string;
url?: string;
}
```
</Property>
<Property name="group" type="URI | &quot;public&quot; | &quot;followers&quot;" required={false} typeLink="/types#uri">
URI of a [Group](/entities/group) that the note is only visible in, or one of the following strings:
- `public`: The note is visible to anyone.
- `followers`: The note is visible only to the author's followers.
If not provided, the note is only visible to the author and those mentioned in the note.
</Property>
<Property name="is_sensitive" type="boolean" required={false}>
Whether the note contains "sensitive content". This can be used with `subject` as a "content warning" feature.
</Property>
<Property name="mentions" type="URI[]" required={false} typeLink="/types#uri">
URIs of [Users](/entities/user) that should be notified of the note. Similar to Twitter's `@` mentions. The note may also contain mentions in the content, however only the mentions in this field should trigger notifications.
</Property>
<Property name="previews" type="LinkPreview" required={false}>
Previews for any links in the publication. This is to avoid the [stampeding mastodon problem](https://github.com/mastodon/mastodon/issues/23662) where a link preview is fetched by every instance that sees the publication, creating an accidental DDOS attack.
```typescript
type LinkPreview = {
link: string;
title: string;
description?: string;
image?: string;
icon?: string;
}
```
<Note>
Implementations should make sure not to trust the previews, as they could be faked by malicious remote instances. This is not a very good attack vector, but it is still possible to redirect users to malicious links.
</Note>
</Property>
<Property name="quotes" type="URI" required={false} typeLink="/types#uri">
URI of the note that this note is quoting, if any. Quoting is similar to replying, but does not notify the author of the quoted note. Inspired by Twitter's "quote tweet" feature.
</Property>
<Property name="replies_to" type="URI" required={false} typeLink="/types#uri">
URI of the note that this note is a reply to, if any.
</Property>
<Property name="subject" type="string" required={false}>
A subject for the note. Useful for clients to display a "content warning" or "spoiler" feature, such as on Mastodon. Must be a plaintext string (`text/plain`).
</Property>
</Properties>
</Col>
<Col sticky>
```jsonc {{ 'title': 'Example Note' }}
{
"id": "01902e09-0f8b-72de-8ee3-9afc0cf5eae1",
"type": "Note",
"uri": "https://versia.social/objects/01902e09-0f8b-72de-8ee3-9afc0cf5eae1",
"created_at": "2024-06-19T01:07:44.139Z",
"attachments": [ // [!code focus:100]
{
"image/png": {
"content": "https://cdn.versia.social/29e810bf4707fef373d886af322089d5db300fce66e4e073efc26827f10825f6/image.webp",
"remote": true,
"thumbhash": "1QcSHQRnh493V4dIh4eXh1h4kJUI",
"description": "",
"height": 960,
"size": 221275,
"hash": {
"sha256": "967b8e86d8708c6283814f450efcbd3be94d3d24ca9a7ab435b2ff8b51dcbc21"
},
"width": 639
}
},
{
"image/png": {
"content": "https://cdn.versia.social/4f87598d377441e78f3c8cfa7bd7d19d61a7470bfe0abcbee6eb1de87279fb3b/image.webp",
"remote": true,
"thumbhash": "3PcNNYSFeXh/d3eld0iHZoZgVwh2",
"description": "",
"height": 1051,
"size": 122577,
"hash": {
"sha256": "fe4ef842e04495dac7c148b440d83f366b948c4a18557457109ac951d5c46eaf"
},
"width": 926
}
}
],
"author": "https://versia.social/users/018eb863-753f-76ff-83d6-fd590de7740a",
"category": "microblog",
"content": {
"text/html": {
"content": "<p>In the next versia-fe update: account settings, finally!</p>"
},
"text/plain": {
"content": "In the next versia-fe update: account settings, finally!"
}
},
"device": {
"name": "Megalodon for Android",
"version": "1.3.89",
"url": "https://sk22.github.io/megalodon"
},
"extensions": {
"pub.versia:custom_emojis": {
"emojis": []
}
},
"group": "public",
"is_sensitive": false,
"mentions": [],
"subject": "Versia development"
}
```
</Col>
</Row>

85
app/entities/page.mdx Normal file
View file

@ -0,0 +1,85 @@
export const metadata = {
title: 'Entities',
description:
'Entities are simple JSON objects that represent the core data structures in Versia.',
}
# Entities
Entities are the foundation of the Versia protocol. A similar concept to entities are the [ActivityStreams](https://www.w3.org/TR/activitystreams-core/) objects, which are used to represent activities in the [ActivityPub](https://www.w3.org/TR/activitypub/) protocol. {{ className: 'lead' }}
## Entity Definition
An entity is a simple JSON object that represents a core data structure in Versia. Entities are used to represent various types of data, such as users, notes, and more. Each entity has a unique `id` property that is used to identify it within the instance.
Any field in an entity not marked as `required` may be omitted or set to `null`.
<Row>
<Col>
<Properties>
<Property name="id" type="string" required={true}>
Unique identifier for the entity. Must be unique within the instance. Can be any string. Max of 512 UTF-8 characters.
</Property>
<Property name="type" type="string" required={true}>
Type of the entity. Custom types must follow [Extension Naming](/extensions#naming).
</Property>
<Property name="created_at" type="ISO8601" required={true} typeLink="/types#iso-8601">
Date and time when the entity was created. Must be an [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601) formatted string.
<Note>
Handling of dates that are valid but obviously incorrect (e.g. in the future) is left to the Implementation's discretion.
</Note>
</Property>
<Property name="uri" type="URI" required={true} typeLink="/types#uri">
URI of the entity. Should be unique and resolve to the entity. Must be an absolute URI.
**Some entity types may not need a URI. This will be specified in the entity's documentation.**
</Property>
<Property name="extensions" type="Extensions" required={false} typeLink="/types#extensions">
Extensions to the entity. Use this to add custom properties to the entity.
Each custom property must be namespaced with the organization's reversed domain name, followed by the property name. Extensions should be used sparingly and only when necessary.
</Property>
</Properties>
</Col>
<Col sticky>
```jsonc {{ 'title': 'Example Entity' }}
{
"id": "9a8928b6-2526-4979-aab1-ef2f88cd5700",
"type": "Delete",
"created_at": "2022-01-01T12:00:00Z",
"author": "https://bongo.social/users/63a00ab3-39b1-49eb-b88e-ed65d2361f3e",
"deleted_type": "Note",
"deleted": "https://bongo.social/notes/54059ce2-9332-46fa-bf6a-598b5493b81b",
}
```
```jsonc {{ 'title': 'With Extensions' }}
{
"id": "f0aacf0b-df7a-4ee5-a2ba-6c4acafd8642",
"type": "org.space:Zlorbs/Zlorb",
"created_at": "2023-04-13T08:00:00Z",
"uri": "https://space.org/zlorbs/f0aacf0b-df7a-4ee5-a2ba-6c4acafd8642",
"extensions": { // [!code focus:100]
"org.space:zlorbs": {
"zlorb_type": "giant",
"zlorb_size": "huge"
},
"pub.versia:location": {
"latitude": 37.7749,
"longitude": -122.4194
}
}
}
```
</Col>
</Row>
## Serialization
When serialized to a string, the JSON representation of an entity should follow the following rules:
- Keys must be sorted lexicographically.
- Should use UTF-8 encoding.
- Must be **signed** using the relevant [User](/entities/user)'s private key, or the [instance's private key](/entities/instance-metadata) if the entity is not associated with a particular user.

57
app/entities/unfollow/page.mdx Normal file
View file

@ -0,0 +1,57 @@
export const metadata = {
title: 'Unfollow',
description: 'The Unfollow entity allows users to unsubscribe from each other',
}
# Unfollow
Sometimes, [Users](/entities/user) want to unsubscribe from each other to stop seeing each other's content. The `Unfollow` defines such a change. {{ className: 'lead' }}
<Note>
Refer to the [Follow](/entities/follow) entity for information on how follow relationships work.
</Note>
<Note>
This is **not** used to remove a follower from a followee.
For example, if Bob follows Alice, this entity is used when:
- Bob wants to stop following Alice.
**NOT** when:
- Alice wants to remove Bob as a follower.
For the latter, use [FollowReject](/entities/follow-reject).
</Note>
## Entity Definition
<Row>
<Col>
<Properties>
<Property name="uri" type="null" required={false}>
This entity does not have a URI.
</Property>
<Property name="author" type="URI" required={true} typeLink="/types#uri">
URI of the `User` considered the 'follower', i.e. the user who is unsubscribing from the followee.
</Property>
<Property name="followee" type="URI" required={true} typeLink="/types#uri">
URI of the `User` considered the 'followee', i.e. the user who is being unsubscribed from.
</Property>
</Properties>
</Col>
<Col sticky>
```jsonc {{ title: 'Example Unfollow' }}
{
"type": "Unfollow",
"id": "3e7e4750-afd4-4d99-a256-02f0710a0520",
"author": "https://example.com/users/6e0204a2-746c-4972-8602-c4f37fc63bbe",
"created_at": "2021-01-01T00:00:00.000Z",
"followee": "https://example.com/users/02e1e3b2-cb1f-4e4a-b82e-98866bee5de7"
}
```
</Col>
</Row>

197
app/entities/user/page.mdx Normal file
View file

@ -0,0 +1,197 @@
export const metadata = {
title: 'Users',
description: 'Definition of the User entity',
}
# Users
The `User` entity represents an account on a Versia instance. Users can post [Notes](/entities/note), follow other users, and interact with content. Users are identified by their `id` property, which is unique within the instance. {{ className: 'lead' }}
## Addresses
Users may be represented by a shorthand address, in the following formats:
```
@username@instance
@id@instance
```
For example:
```
@jessew@versia.social
@018ec082-0ae1-761c-b2c5-22275a611771@versia.social
```
This is similar to an email address or an ActivityPub address.
### Identifier
Identifier **must** be either a valid `username` or a valid `id`. It should have the same username/id as the user's profile.
<Note>
Usernames can be changed by the user, so it is recommended to use `id` for long-term references.
</Note>
### Instance
Instance **must** be the host of the instance the user is on (hostname with optional port).
## Entity Definition
<Row>
<Col>
<Properties>
<Property name="avatar" type="ContentFormat" required={false} typeLink="/structures/content-format">
The user's avatar. Must be an image format (`image/*`).
</Property>
<Property name="bio" type="ContentFormat" required={false} typeLink="/structures/content-format">
Short description of the user. Must be text format (`text/*`).
</Property>
<Property name="display_name" type="string" required={false}>
Display name, as shown to other users. May contain emojis and any Unicode character.
</Property>
<Property name="fields" type="Field[]" required={false}>
Custom key/value pairs. For example, metadata like socials or pronouns. Must be text format (`text/*`).
```typescript
type Field = {
key: ContentFormat;
value: ContentFormat;
}
```
</Property>
<Property name="username" type="string" required={true}>
Alpha-numeric username. Must be unique within the instance. **Must** be treated as changeable by the user.
Can only contain the following characters: `a-z` (lowercase), `0-9`, `_` and `-`. Should be limited to reasonable lengths.
</Property>
<Property name="header" type="ContentFormat" required={false} typeLink="/structures/content-format">
A header image for the user's profile. Also known as a cover photo or a banner. Must be an image format (`image/*`).
</Property>
<Property name="public_key" type="PublicKey" required={true}>
The user's public key. Must follow the [Versia Public Key](/signatures) format. `actor` may be a URI to another user's profile, in which case this key may allow the other user act on behalf of this user (see [delegation](/federation/delegation)).
- `algorithm`: Must be `ed25519` for now.
- `key`: The public key in SPKI-encoded base64 (from raw bytes, not a PEM format). Must be the key associated with the `actor` URI.
- `actor`: URI to a user's profile, most often the user's own profile.
```typescript
type URI = string;
type PublicKey = {
actor: URI;
algorithm: string;
key: string;
}
```
</Property>
<Property name="manually_approves_followers" type="boolean" required={false}>
If `true`, the user must approve any new followers manually. If `false`, followers are automatically approved. This does not affect federation, and is meant to be used for clients to display correct UI. Defaults to `false`.
</Property>
<Property name="indexable" type="boolean" required={false}>
User consent to be indexed by search engines. If `false`, the user's profile should not be indexed. Defaults to `true`.
</Property>
<Property name="inbox" type="URI" required={true} typeLink="/types#uri">
The user's federation inbox. Refer to the [federation documentation](/federation).
Some instances may also have a shared inbox. Refer to [Instance Metadata](/entities/instance-metadata) for more information.
</Property>
<Property name="collections" type="UserCollections" required={true}>
Collections related to the user. Must contain at least `outbox`, `followers`, `following`, and `featured`.
```typescript
type URI = string;
type UserCollections = {
outbox: URI;
followers: URI;
following: URI;
featured: URI;
// Same format as type on Extensions
[key: ExtensionsKey]: URI;
}
```
All URIs must resolve to a [Collection](/structures/collection) of the appropriate entities. Extensions may add additional collections.
### Outbox
The user's federation outbox. Refer to the [federation documentation](/federation).
### Followers
User's followers. [Collection](/structures/collection) of [User](/entities/user) entities.
### Following
Users that the user follows. [Collection](/structures/collection) of [User](/entities/user) entities.
### Featured
[Notes](/entities/note) that the user wants to feature (also known as "pin") on their profile. [Collection](/structures/collection) of [Note](/entities/note) entities.
</Property>
</Properties>
</Col>
<Col sticky>
```jsonc {{ 'title': 'Example User' }}
{
"id": "018ec082-0ae1-761c-b2c5-22275a611771",
"type": "User",
"uri": "https://versia.social/users/018ec082-0ae1-761c-b2c5-22275a611771",
"created_at": "2024-04-09T01:38:51.743Z",
"avatar": { // [!code focus:100]
"image/png": {
"content": "https://avatars.githubusercontent.com/u/30842467?v=4"
}
},
"bio": {
"text/html": {
"content": "<p>🌸🌸🌸</p>"
},
"text/plain": {
"content": "🌸🌸🌸"
}
},
"collections": {
"featured": "https://versia.social/users/018ec082-0ae1-761c-b2c5-22275a611771/featured",
"followers": "https://versia.social/users/018ec082-0ae1-761c-b2c5-22275a611771/followers",
"following": "https://versia.social/users/018ec082-0ae1-761c-b2c5-22275a611771/following",
"pub.versia:likes/Dislikes": "https://versia.social/users/018ec082-0ae1-761c-b2c5-22275a611771/dislikes",
"pub.versia:likes/Likes": "https://versia.social/users/018ec082-0ae1-761c-b2c5-22275a611771/likes",
"outbox": "https://versia.social/users/018ec082-0ae1-761c-b2c5-22275a611771/outbox",
},
"display_name": "April The Pink (limited Sand Edition)",
"extensions": {
"pub.versia:custom_emojis": {
"emojis": []
}
},
"fields": [
{
"key": {
"text/html": {
"content": "<p>Pronouns</p>"
}
},
"value": {
"text/html": {
"content": "<p>It/its</p>"
}
}
}
],
"header": null,
"inbox": "https://versia.social/users/018ec082-0ae1-761c-b2c5-22275a611771/inbox",
"indexable": false,
"manually_approves_followers": false,
"public_key": {
"actor": "https://versia.social/users/018ec082-0ae1-761c-b2c5-22275a611771",
"algorithm": "ed25519",
"key": "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
},
"username": "aprl"
}
```
</Col>
</Row>

79
app/extensions/custom-emojis/page.mdx Normal file
View file

@ -0,0 +1,79 @@
export const metadata = {
title: "Custom Emojis Extension",
description: "The Custom Emojis extension adds support for custom emojis in notes.",
}
# Custom Emojis Extension
The Custom Emojis extension adds support for adding personalized emojis to federated data. {{ className: 'lead' }}
## Rendering
To render custom emojis, clients **should** perform the following steps:
1. Find all instances of custom emoji names in the text content.
2. Replace the custom emoji names with the corresponding emoji images in text.
If custom emojis are not supported, clients **should** leave the custom emoji names as-is. Images **should** have any associated `alt` text for accessibility.
```html {{ 'title': 'Example HTML/CSS' }}
<style>
img.emoji {
display: inline;
height: 1em;
}
</style>
<p>
Hello, world! <img src="https://cdn.example.com/emojis/happy_face.webp" alt="A happy emoji smiling." class="emoji" />!
</p>
```
Emojis **should** be displayed at a fixed height (such as `1em`), but their width **should** be allowed to be flexible.
## Extension Definition
Custom Emojis can be added to any entity with text content. The extension ID is `pub.versia:custom_emojis`.
<Row>
<Col>
<Properties>
<Property name="emojis" type="CustomEmoji[]" required={true} typeLink="/structures/emoji">
[Custom emojis](/structures/emoji) to be added to the note.
</Property>
</Properties>
</Col>
<Col sticky>
```jsonc {{ 'title': 'Example Usage' }}
{
"id": "456df8ed-daf1-4062-abab-491071c7b8dd",
"type": "Note",
"uri": "https://versia.social/notes/456df8ed-daf1-4062-abab-491071c7b8dd",
"created_at": "2024-04-09T01:38:51.743Z",
"content": {
"text/plain": {
"content": "Hello, world :happy_face:!"
}
},
"extensions": { // [!code focus:16]
"pub.versia:custom_emojis": {
"emojis": [
{
"name": ":happy_face:",
"content": {
"image/webp": {
"content": "https://cdn.example.com/emojis/happy_face.webp",
"remote": true,
"description": "A happy emoji smiling.",
}
}
}
]
}
}
}
```
</Col>
</Row>

107
app/extensions/likes/page.mdx Normal file
View file

@ -0,0 +1,107 @@
export const metadata = {
title: 'Likes Extension',
description:
'The Likes extension adds support for users to like and dislike notes.',
}
# Likes Extension
The Likes extension adds support for users to like and dislike notes. {{ className: 'lead' }}
Implementations should make sure that users cannot like and dislike the same note at the same time. If a user dislikes a note they have already liked, the like should be removed, and vice versa.
## Likes
Likes are a way for users to show appreciation for a note, like Twitter's "heart" button or Reddit's "upvote".
### Entity Definition
<Row>
<Col>
<Properties>
<Property name="type" type="string" required={true}>
Must be `pub.versia:likes/Like`.
</Property>
<Property name="author" type="URI" required={true} typeLink="/types#uri">
Creator of the Like.
</Property>
<Property name="liked" type="URI" required={true} typeLink="/types#uri">
URI of the note being liked. Must link to a [Note](/entities/note).
</Property>
</Properties>
</Col>
<Col sticky>
```jsonc {{ 'title': 'Example Like' }}
{
"id": "3e7e4750-afd4-4d99-a256-02f0710a0520",
"type": "pub.versia:likes/Like",
"created_at": "2021-01-01T00:00:00.000Z",
"author": "https://example.com/users/6e0204a2-746c-4972-8602-c4f37fc63bbe",
"uri": "https://example.com/likes/3e7e4750-afd4-4d99-a256-02f0710a0520",
"liked": "https://otherexample.org/notes/fmKZ763jzIU8"
}
```
</Col>
</Row>
## Dislikes
Dislikes are a way for users to show disapproval for a note, like YouTube's "dislikes" or Reddit's "downvotes".
### Entity Definition
<Row>
<Col>
<Properties>
<Property name="type" type="string" required={true}>
Must be `pub.versia:likes/Dislike`.
</Property>
<Property name="author" type="URI" required={true} typeLink="/types#uri">
Creator of the Dislike.
</Property>
<Property name="disliked" type="URI" required={true} typeLink="/types#uri">
URI of the note being disliked. Must link to a [Note](/entities/note).
</Property>
</Properties>
</Col>
<Col sticky>
```jsonc {{ 'title': 'Example Dislike' }}
{
"id": "3e7e4750-afd4-4d99-a256-02f0710a0520",
"type": "pub.versia:likes/Dislike",
"created_at": "2021-01-01T00:00:00.000Z",
"author": "https://example.com/users/6e0204a2-746c-4972-8602-c4f37fc63bbe",
"uri": "https://example.com/dislikes/3e7e4750-afd4-4d99-a256-02f0710a0520",
"disliked": "https://otherexample.org/notes/fmKZ763jzIU8"
}
```
</Col>
</Row>
## Undoing Likes and Dislikes
To undo a like or dislike, a [Delete](/entities/delete) entity should be used. The `deleted` property of the Delete entity should link to the Like or Dislike entity to be removed.
## User Collections
The Likes extension adds the following collections to the [User](/entities/user) entity:
- `likes`: A [Collection](/structures/collection) of all the notes the user has liked.
- `dislikes`: A [Collection](/structures/collection) of all the notes the user has disliked.
```jsonc
{
"type": "User",
...
"collections": {
...
"pub.versia:likes/Likes": "https://example.com/users/6e0204a2-746c-4972-8602-c4f37fc63bbe/likes",
"pub.versia:likes/Dislikes": "https://example.com/users/6e0204a2-746c-4972-8602-c4f37fc63bbe/dislikes"
}
}

99
app/extensions/migration/page.mdx Normal file
View file

@ -0,0 +1,99 @@
export const metadata = {
"title": "Migration Extension",
"description": "Migration can be used when users want to move their data from one instance to another."
}
# Migration Extension
Sometimes, users may want to move their data from one instance to another. This could be due to a change in administration, a desire to be closer to friends, or any other reason. Migration can be done using the migration extension. {{ className: 'lead' }}
## Behaviour
Migration happens in three steps:
### Prepare the New Account
- The user creates an account on the new instance, and puts the URI of the old account in the `previous` field of the new account.
### Request Migration
- The user requests migration from the old instance. The old instance checks that the `previous` field is set, and creates a migration entity.
- The migration entity is then distributed to every instance that interacts with the old instance, including the new instance.
- All instances that receive a verified migration entity (i.e. one where the `previous` field is correctly set on the new account) and support migration **must** then move all relationships (followers, followings, etc) from the old account to the new account in *their* internal database.
### Complete Migration
- The old instance sets the `new` field of the user to the URI of the new account, and marks it as "disabled" in its internal database.
## Entity Definition
<Row>
<Col>
<Properties>
<Property name="uri" type="null" required={false}>
This entity does not have a URI.
</Property>
<Property name="type" type="string" required={true}>
Must be `pub.versia:migration/Migration`.
</Property>
<Property name="author" type="URI" typeLink="/types#uri" required={true}>
URI of the [User](/entities/user) who is migrating.
</Property>
<Property name="destination" type="URI" required={true} typeLink="/types#uri">
URI of the destination [User](/entities/user) on the new instance.
</Property>
</Properties>
</Col>
<Col sticky>
```json {{ title: "Example Entity" }}
{
"id": "016f3de2-ad63-4e06-999e-1e6b41c981c5",
"type": "pub.versia:migration/Migration",
"author": "https://example.com/users/44df6e02-ef43-47e0-aff2-47041f3d09ed",
"created_at": "2021-01-01T00:00:00.000Z",
"destination": "https://otherinstance.social/users/73e999a0-53d0-40a3-a5cc-be0408004726",
}
```
</Col>
</Row>
## User Extensions
The following extensions to [User](/entities/user) are used by the migration extension:
<Row>
<Col>
<Properties>
<Property name="previous" type="URI" required={true} typeLink="/types#uri">
If this user has migrated from another instance, this property **MUST** be set to the URI of the user on the previous instance.
</Property>
<Property name="new" type="URI" required={false} typeLink="/types#uri">
If this user has migrated to another instance, this property **MUST** be set to the URI of the user on the new instance.
</Property>
</Properties>
</Col>
<Col sticky>
```jsonc {{ 'title': 'Example' }}
{
// ...
"type": "User",
// ...
"extensions": { // [!code focus:100]
"pub.versia:migration": {
"previous": "https://oldinstance.social/users/44df6e02-ef43-47e0-aff2-47041f3d09ed",
// "new": "https://newinstance.social/users/73e999a0-53d0-40a3-a5cc-be0408004726",
}
}
}
```
</Col>
</Row>

118
app/extensions/page.mdx Normal file
View file

@ -0,0 +1,118 @@
export const metadata = {
title: "Extensions",
description: "Extensions are a way to add custom functionality to Versia."
}
# Extensions
Versia provides a set of core entities and structures to build a barebones social network. However, it is not possible nor desirable to cover every use case. This is where extensions come in, allowing parts of the system to be extended or replaced with custom functionality. {{ className: 'lead' }}
By design, extensions can be mitchmatched in any combination, without requiring any changes to the core system. This allows for a high degree of customization and flexibility. Implementations that do not support a particular extension can simply ignore it without any issues.
Extensions **should** be standardized and publicly documented.
## Handling Unsupported Extensions
When an extension is not supported by an Implementation, it **can** be ignored. This means that the extension is not processed, and its data is not used. Implementations **must not** throw an error when encountering an unsupported extension, as long as the rest of the entity is valid.
Extensions **must not** be designed in a way that makes them required to understand or process other non-extension entities.
## Naming
Versia extension names are composed of two parts:
- The domain name of the extension author, in reverse order. Example: `pub.versia`
- The extension name, separated by a colon. `snake_case`. Example: `likes`
``` {{ title: "Example Extension Name" }}
pub.versia:likes
```
### Custom entities
Custom entities are named in the same way, but with an additional part:
- The entity name, separated by a slash. `PascalCase`. Example: `Like`
``` {{ title: "Example Custom Entity Type" }}
pub.versia:likes/Like
```
## Extension Definition
Extensions can be found in two places: an [Entity](/entities#entity-definition)'s `extensions` property, or as custom entities themselves. The former is used to add custom functionality to an existing entity, while the latter is used to define a new entity type.
### Entity Extension
<Row>
<Col>
<Properties>
<Property name="extensions" type="Record<string, JSONData>" required={false}>
Custom extensions to the entity.
- `key`: The extension name.
- `value`: Extension data. Can be any JSON-serializable data.
Extension data can be any JSON-serializable data.
</Property>
</Properties>
</Col>
<Col sticky>
```jsonc {{ title: "Example Entity Extension" }}
{
"type": "Group",
"id": "ed480922-b095-4f09-9da5-c995be8f5960",
"uri": "https://example.com/groups/ed480922-b095-4f09-9da5-c995be8f5960",
"name": null,
"description": null,
"members": "https://example.com/groups/ed480922-b095-4f09-9da5-c995be8f5960/members",
"extensions": { // [!code focus:100]
"com.example:gps": {
"location": {
"latitude": 37.7749,
"longitude": -122.4194
},
"accuracy": 10,
"name": "San Francisco"
}
}
}
```
</Col>
</Row>
### Custom Entity
<Row>
<Col>
<Properties>
<Property name="type" type="string" required={true}>
The extension type. [Must follow naming conventions](#naming).
</Property>
<Property name="other">
Other properties of the custom entity. These are specific to the extension, and should be documented by the extension author.
Note that `id`, `uri` and `created_at` are still required for custom entities, unless the extension author specifies otherwise.
</Property>
</Properties>
</Col>
<Col sticky>
```jsonc {{ title: "Example Custom Entity" }}
{
"type": "com.example:poll/Poll",
"id": "6f27bc77-58ee-4c9b-b804-8cc1c1182fa9",
"uri": "https://example.com/actions/6f27bc77-58ee-4c9b-b804-8cc1c1182fa9",
"author": "https://example.com/users/6e0204a2-746c-4972-8602-c4f37fc63bbe",
"created_at": "2021-01-01T00:00:00.000Z",
"question": "What is your favourite colour?",
"options": [
"Red",
"Blue",
"Green"
]
}
```
</Col>
</Row>

128
app/extensions/polls/page.mdx Normal file
View file

@ -0,0 +1,128 @@
export const metadata = {
title: "Polls Extension",
description: "The Polls Extension allows users to create and vote on polls",
}
# Polls Extension
Polls (also known as surveys) are a useful tool for gathering feedback from followers and friends. The Polls Extension allows users to create and vote on polls. {{ className: 'lead' }}
## Privacy
Individual user votes on polls should **not** be visible in clients. Instead, clients should display the total number of votes for each option, and the total number of votes cast.
This is reflected in the presence of total votes as numbers and not as an array of URIs in polls.
## Extensions to Note
Note that there is no `question` field: the question should be included in the `content` of the Note itself.
<Row>
<Col>
<Properties>
<Property name="options" type="ContentFormat[]" required="true">
Array of options for the poll. Each option is a [ContentFormat](/structures/content-format) that can contain the same properties as a Note's `content` (e.g. [Custom Emojis](/extensions/custom-emojis) or HTML hyperlinks).
</Property>
<Property name="votes" type="number[]" required="true" numberType="u64">
Array of the number of votes for each option. The length of this array should match the length of the `options` array.
</Property>
<Property name="multiple_choice" type="boolean" required="true">
Whether the poll allows multiple votes to be cast for different options.
</Property>
<Property name="expires_at" type="ISO 8601" typeLink="/types#iso8601" required="false">
ISO 8601 timestamp of when the poll ends and no more votes can be cast. If not present, the poll does not expire.
</Property>
</Properties>
</Col>
<Col sticky>
```jsonc {{ title: "Example Note" }}
{
"id": "01902e09-0f8b-72de-8ee3-9afc0cf5eae1",
"type": "Note", // [!code focus]
"uri": "https://versia.social/notes/01902e09-0f8b-72de-8ee3-9afc0cf5eae1",
"created_at": "2024-06-19T01:07:44.139Z",
"author": "https://versia.social/users/018eb863-753f-76ff-83d6-fd590de7740a",
"category": "microblog",
"content": {
"text/plain": {
"content": "What is your favourite color?"
}
},
"extensions": { // [!code focus:28]
"pub.versia:polls": {
"options": [
{
"text/plain": {
"content": "Red"
}
},
{
"text/plain": {
"content": "Blue"
}
},
{
"text/plain": {
"content": "Green"
}
}
],
"votes": [
9,
5,
0
],
"multiple_choice": false,
"expires_at": "2021-01-04T00:00:00.000Z"
}
},
"group": "public",
"is_sensitive": false,
"mentions": [],
}
```
</Col>
</Row>
## Vote Entity Definition
If a vote is cast to a poll that is closed, the vote should be rejected with a `422 Unprocessable Entity` error.
<Row>
<Col>
<Properties>
<Property name="type" type="string" required="true">
Must be `pub.versia:polls/Vote`.
</Property>
<Property name="author" type="URI" required="true" typeLink="/types#uri">
URI to the user who cast the vote.
</Property>
<Property name="poll" type="URI" required="true" typeLink="/types#uri">
URI to the poll that the user voted on. Must link to a [Note](/entities/note) with a valid poll.
</Property>
<Property name="option" type="number" required="true" numberType="u64">
Index of the option that the user voted for. This should be a valid index into the `options` array of the poll.
</Property>
</Properties>
</Col>
<Col sticky>
```jsonc {{ title: "Example Vote" }}
{
"id": "6f27bc77-58ee-4c9b-b804-8cc1c1182fa9",
"type": "pub.versia:polls/Vote", // [!code focus]
"uri": "https://example.com/actions/6f27bc77-58ee-4c9b-b804-8cc1c1182fa9",
"created_at": "2021-01-01T00:00:00.000Z",
"author": "https://example.com/users/6e0204a2-746c-4972-8602-c4f37fc63bbe", // [!code focus:3]
"poll": "https://example.com/notes/f08a124e-fe90-439e-8be4-15a428a72a19",
"option": 1
}
```
</Col>
</Row>

94
app/extensions/reactions/page.mdx Normal file
View file

@ -0,0 +1,94 @@
export const metadata = {
title: "Reactions Extension",
description: "The Reactions Extension allows users to react to posts with emojis",
}
# Reactions Extension
The Reactions Extension allows users to express their reactions ("react") to posts with emojis. {{ className: 'lead' }}
## Federation
User reactions are (like every other entity) federated to all followers, and can be displayed to clients depending on the privacy settings of the associated [Note](/entities/note).
## Entity Definition
<Row>
<Col>
<Properties>
<Property name="type" type="string" required>
Must be `pub.versia:reactions/Reaction`.
</Property>
<Property name="author" type="URI" required typeLink="/types#uri">
URI of the [User](/entities/user) that is reacting.
</Property>
<Property name="object" type="URI" required typeLink="/types#uri">
URI of the [Note](/entities/note) attached to the reaction.
</Property>
<Property name="content" type="string" required>
Emoji content of reaction. May also be arbitrary text, or [Custom Emoji](/extensions/custom-emojis) if supported.
Clients are encouraged to disfavour text in favour of emoji where possible.
</Property>
</Properties>
</Col>
<Col sticky>
```jsonc {{ title: "Example Entity" }}
{
"id": "6f27bc77-58ee-4c9b-b804-8cc1c1182fa9",
"type": "pub.versia:reactions/Reaction", // [!code focus]
"uri": "https://example.com/actions/6f27bc77-58ee-4c9b-b804-8cc1c1182fa9",
"created_at": "2021-01-01T00:00:00.000Z",
"author": "https://example.com/users/6e0204a2-746c-4972-8602-c4f37fc63bbe", // [!code focus:3]
"object": "https://example.com/publications/f08a124e-fe90-439e-8be4-15a428a72a19",
"content": "😀",
}
```
</Col>
</Row>
## Extensions to Note
The Reactions Extension extends the [Note](/entities/note) entity with the following fields:
<Row>
<Col>
<Properties>
<Property name="reactions" type="array" required>
URI to a [Collection](/structures/collection) of the [Reactions](#entity-definition) attached to the note.
</Property>
</Properties>
</Col>
<Col sticky>
```jsonc {{ title: "Example Note" }}
{
"id": "01902e09-0f8b-72de-8ee3-9afc0cf5eae1",
"type": "Note", // [!code focus]
"uri": "https://versia.social/notes/01902e09-0f8b-72de-8ee3-9afc0cf5eae1",
"created_at": "2024-06-19T01:07:44.139Z",
"author": "https://versia.social/users/018eb863-753f-76ff-83d6-fd590de7740a",
"category": "microblog",
"content": {
"text/plain": {
"content": "Bababooey."
}
},
"extensions": { // [!code focus:5]
"pub.versia:reactions": {
"reactions": "https://versia.social/notes/01902e09-0f8b-72de-8ee3-9afc0cf5eae1/reactions"
}
},
"group": "public",
"is_sensitive": false,
"mentions": [],
}
```
</Col>
</Row>

53
app/extensions/reports/page.mdx Normal file
View file

@ -0,0 +1,53 @@
export const metadata = {
"title": "Reports Extension",
"description": "Reporting can be used to report content to moderators or administrators of a remote instance for review."
}
# Reports Extension
Reporting can be used to report content to moderators or administrators of a remote instance for review. {{ className: 'lead' }}
When an instance receives a report, it *should* be reviewed by a moderator or administrator.
## Entity Definition
<Row>
<Col>
<Properties>
<Property name="type" type="string" required={true}>
Must be `pub.versia:reports/Report`.
</Property>
<Property name="author" type="URI" required={false} typeLink="/types#uri">
URI of the reporting [User](/entities/user). Optional if the report is anonymous.
</Property>
<Property name="reported" type="URI[]" required={true} typeLink="/types#uri">
URIs of the content being reported.
</Property>
<Property name="reason" type="string" required={true}>
Reason for the report. Should be concise and clear, such as `spam`, `harassment`, `misinformation`, etc.
</Property>
<Property name="comment" type="string" required={false}>
Additional comments about the report. Can be used to provide more context or details.
</Property>
</Properties>
</Col>
<Col sticky>
```jsonc {{ title: "Example Report" }}
{
"id": "6f3001a1-641b-4763-a9c4-a089852eec84",
"type": "pub.versia:reports/Report",
"author": "https://example.com/users/6f3001a1-641b-4763-a9c4-a089852eec84",
"uri": "https://example.com/reports/f7bbf7fc-88d2-47dd-b241-5d1f770a10f0",
"reported": [
"https://test.com/publications/46f936a3-9a1e-4b02-8cde-0902a89769fa",
"https://test.com/publications/213d7c56-fb9b-4646-a4d2-7d70aa7d106a"
],
"reason": "spam",
"comment": "This is spam."
}
```
</Col>
</Row>

47
app/extensions/share/page.mdx Normal file
View file

@ -0,0 +1,47 @@
export const metadata = {
title: "Share Extension",
description: "Share Extension lets users share notes they like with others.",
}
# Share Extension
The Share Extension lets users share notes they like with others. This is the same as Twitter's "retweet" and Mastodon's "boost". {{ className: 'lead' }}
## Behaviour
When a user shares a note, the note's original author **must** receive the entity alongside the user's followers. In clients, `Shares` should be rendered in a way that makes it clear that the shared note was originally authored by someone else than the user who shared it.
`Shares` can be undone ("unboosting") with a [Delete](/entities/delete) entity.
## Entity Definition
<Row>
<Col>
<Properties>
<Property name="type" type="string" required={true}>
Must be `pub.versia:share/Share`.
</Property>
<Property name="author" type="URI" required={true} typeLink="/types#uri">
Creator of the Share.
</Property>
<Property name="shared" type="URI" required={true} typeLink="/types#uri">
URI of the note being shared. Must link to a [Note](/entities/note).
</Property>
</Properties>
</Col>
<Col sticky>
```jsonc {{ 'title': 'Example Share' }}
{
"id": "3e7e4750-afd4-4d99-a256-02f0710a0520",
"type": "pub.versia:share/Share",
"created_at": "2021-01-01T00:00:00.000Z",
"author": "https://example.com/users/6e0204a2-746c-4972-8602-c4f37fc63bbe",
"uri": "https://example.com/shares/3e7e4750-afd4-4d99-a256-02f0710a0520",
"shared": "https://otherexample.org/notes/fmKZ763jzIU8"
}
```
</Col>
</Row>

137
app/extensions/vanity/page.mdx Normal file
View file

@ -0,0 +1,137 @@
export const metadata = {
title: 'Vanity Extension',
description:
'The Vanity adds more optional metadata to the user profile.',
}
# Vanity Extension
The Vanity extension adds more optional metadata to the user profile. {{ className: 'lead' }}
## Entity Definition
All properties are optional.
<Row>
<Col>
<Properties>
<Property name="avatar_overlays" type="ContentFormat[]" typeLink="/structures/content-format" required={false}>
Overlay images to be placed on top of the user's avatar, like this: [example overlay from Discord](https://cdn.discordapp.com/avatar-decoration-presets/a_949a575b693c81ced8f56a7579d0969f.png).
The first overlay in the array is the topmost overlay. The inner 80% of the overlay should cover the avatar, with the outer 20% extending beyond the avatar's bounds.
Image format (e.g. `image/png`), can be animated (e.g. APNG, gif, WebP).
</Property>
<Property name="avatar_mask" type="ContentFormat" required={false}>
Mask image to be used to clip the user's avatar. The avatar should be clipped to the mask's alpha channel. For example, a black square with rounded corners would clip the avatar to a rounded square.
Image format (e.g. `image/png`), non-animated.
</Property>
<Property name="background" type="ContentFormat" required={false}>
Background image to be displayed behind the user's profile. Should be full-width and high-resolution, preferably at least 1080p.
Image format (e.g. `image/png`), can be animated (e.g. APNG, gif, WebP).
</Property>
<Property name="audio" type="ContentFormat" required={false}>
Audio file to be played when viewing the user's profile. Should be a short clip, like a ringtone.
<Note>
Audio files can be used as a vector for abuse. Implementations **SHOULD** provide a way to disable audio playback.
</Note>
Audio format (e.g. `audio/mpeg`).
</Property>
<Property name="pronouns" type="{ [key: LanguageCode]: Pronoun[] }" required={false}>
An array of internationalized pronouns the user uses. Can be represented as a string or an object.
```typescript
/* e.g. "he/him" */
type ShortPronoun = string;
interface LongPronoun {
subject: string;
object: string;
dependent_possessive: string;
independent_possessive: string;
reflexive: string;
}
type Pronoun = ShortPronoun | LongPronoun;
/* Example: en-US or fr */
type LanguageCode = string;
```
</Property>
<Property name="birthday" type="ISO8601" required={false} typeLink="/types#iso8601">
User's birthday. If year is left out or set to `0000`, implementations **SHOULD** not display the year.
</Property>
<Property name="location" type="string" required={false}>
User's location. Can be an [ISO 6709 Annex H](https://en.wikipedia.org/wiki/ISO_6709#String_expression_(Annex_H)) string or a human-readale string (e.g. "New York, NY").
Location does not need to be precise, and can be as simple as `+46+002/` (France) or `+48.52+002.20/` (Paris, France).
</Property>
<Property name="aliases" type="URI[]" required={false} typeLink="/types#uri">
Versia profiles that should be considered aliases of this profile.
</Property>
</Properties>
</Col>
<Col sticky>
```jsonc {{ 'title': 'Example Content' }}
{
// ...
"type": "User",
// ...
"extensions": { // [!code focus:100]
"pub.versia:vanity": {
"avatar_overlays": [
{
"image/png": {
"content": "https://cdn.example.com/ab5081cf-b11f-408f-92c2-7c246f290593/cat_ears.png",
"remote": true,
}
}
],
"avatar_mask": {
"image/png": {
"content": "https://cdn.example.com/d8c42be1-d0f7-43ef-b4ab-5f614e1beba4/rounded_square.jpeg",
"remote": true,
}
},
"background": {
"image/png": {
"content": "https://cdn.example.com/6492ddcd-311e-4921-9567-41b497762b09/untitled-file-0019822.png",
"remote": true,
}
},
"audio": {
"audio/mpeg": {
"content": "https://cdn.example.com/4da2f0d4-4728-4819-83e4-d614e4c5bebc/michael-jackson-thriller.mp3",
"remote": true,
}
},
"pronouns": {
"en-us": [
"he/him",
{
"subject": "they",
"object": "them",
"dependent_possessive": "their",
"independent_possessive": "theirs",
"reflexive": "themself"
},
]
},
"birthday": "1998-04-12",
"location": "+40.6894-074.0447/",
"aliases": [
"https://burger.social/accounts/349ee237-c672-41c1-aadc-677e185f795a",
"https://versia.social/users/f565ef02-035d-4974-ba5e-f62a8558331d"
]
}
}
}
```
</Col>
</Row>

57
app/extensions/websockets/page.mdx Normal file
View file

@ -0,0 +1,57 @@
export const metadata = {
title: 'WebSocket Extension',
description:
'The WebSocket extension adds support for real-time communication between instances.',
}
# WebSockets Extension
<Note>
This extension is a **draft** and should not be considered final. It is subject to change.
If testing proves unsuccessful, this draft may be abandoned.
</Note>
Typically, communication between Versia instances is done via HTTP. However, HTTP suffers from some limitations, such as high latency and heavy overhead for small messages, making it less suitable for exchanging large amounts of entities at acceptable speeds. {{ className: 'lead' }}
This extension aims to address these limitations by adding support for the exchange of entities using WebSockets.
## Message Format
Messages sent over the WebSocket connection are JSON objects.
<Row>
<Col>
<Properties>
<Property name="signature" type="string" required={true}>
Same as the `X-Signature` header in HTTP requests.
</Property>
<Property name="nonce" type="string" required={true}>
Same as the `X-Nonce` header in HTTP requests.
</Property>
<Property name="signed_by" type="URI" required={true}>
Same as the `X-Signed-By` header in HTTP requests.
</Property>
<Property name="entity" type="Entity" required={true} typeLink="/entities">
Same as the request body in HTTP requests. Must be a string (stringified JSON), not JSON.
</Property>
</Properties>
</Col>
<Col sticky>
```jsonc {{ 'title': 'Example Message' }}
{
"signature": "post /users/1/inbox a2ebc29eb6762a9164fbcffc9271e8a53562a5e725e7187ea7d88d03cbe59341 n4bQgYhMfWWaL+qgxVrQFaO/TxsrC4Is0V1sFbDwCgg=",
"nonce": "a2ebc29eb6762a9164fbcffc9271e8a53562a5e725e7187ea7d88d03cbe59341",
"signed_by": "https://bongo.social/users/63a00ab3-39b1-49eb-b88e-ed65d2361f3e",
"entity": "{\"id\":\"9a8928b6-2526-4979-aab1-ef2f88cd5700\",\"type\":\"Delete\",\"created_at\":\"2022-01-01T12:00:00Z\",\"author\":\"https://bongo.social/users/63a00ab3-39b1-49eb-b88e-ed65d2361f3e\",\"deleted\":\"https://bongo.social/notes/54059ce2-9332-46fa-bf6a-598b5493b81b\"}"
}
```
</Col>
</Row>
## Connection Establishment
...

25
app/federation/delegation/page.mdx Normal file
View file

@ -0,0 +1,25 @@
export const metadata = {
title: 'Delegation',
description: 'Delegation is used to authorize actions on behalf of another user',
}
# Delegation
Delegation is used to authorize actions on behalf of another user. {{ className: 'lead' }}
## Vocabulary
- **Delegator**: The user that is delegating actions to another user. (The user that owns the key)
- **Delegate**: The user that is being delegated actions. (The user that the key is pointing to)
## The `actor` Field on Public Keys
[Users](/entities/user)'s `public_key` property contains a field called `actor`. This field contains the URI to the **delegator** user, which is used to authorize actions on behalf of the **delegate** user.
This means that the **delegator** user can sign requests with their private key, and any implementations should consider the **delegate** user as equivalent to the **delegator** user.
## Implementation Details
Any actions or entities created by the **delegate** should be attributed to the **delegator** user in clients transparently to end-users (e.g. showing the **delegator** user's name and avatar). This allows for a form of "consensual impersonation" that is authorized by the **delegators** and **delegates**.
This is useful as a way to centralize all of a user's many "alt accounts" into a single, unified feed.

85
app/federation/discovery/page.mdx Normal file
View file

@ -0,0 +1,85 @@
export const metadata = {
title: 'Discovery',
description: "How Versia instances can discover users, capabilities, and endpoints.",
}
# Discovery
A lot of the time, Versia instances may need to lookup information about other instances, such as their users, capabilities, and endpoints. This is done through a process called **discovery**.
## User Discovery
To discover a user, an instance must know [the user's address](/entities/user#addresses). Knowing this, the [WebFinger](https://tools.ietf.org/html/rfc7033) protocol can be used to find the user's profile.
### Example
To discover the profile of the user `@george@versia.social`, an instance would make a `GET` request to `https://versia.social/.well-known/webfinger?resource=acct:george@versia.social`.
```http {{ 'title': 'Example Request' }}
GET /.well-known/webfinger?resource=acct:george@versia.social HTTP/1.1
Accept: application/jrd+json
```
```jsonc {{ 'title': 'Example Response' }}
{
"subject": "acct:george@versia.social", // [!code focus:6]
"aliases": [
"https://versia.social/users/018ec082-0ae1-761c-b2c5-22275a611771",
"https://versia.social/@george"
],
"links": [
{
"rel": "http://webfinger.net/rel/profile-page",
"type": "text/html",
"href": "https://versia.social/@george"
},
{ // [!code focus:5]
"rel": "self",
"type": "application/json",
"href": "https://versia.social/users/018ec082-0ae1-761c-b2c5-22275a611771"
},
{
"rel": "http://webfinger.net/rel/avatar",
"type": "image/png",
"href": "https://cdn.versia.social/uploads/banana.png"
}
] // [!code focus]
}
```
## Instance Discovery
Instaance metadata can be accessed by making a `GET` request to the instance's Versia metadata endpoint, which is located at `/.well-known/versia`.
### Example
To discover the metadata of the instance `versia.social`, an instance would make a `GET` request to `https://versia.social/.well-known/versia`.
This endpoint will return an [InstanceMetadata](/entities/instance-metadata) entity.
```http {{ 'title': 'Example Request' }}
GET /.well-known/versia HTTP/1.1
Accept: application/json
```
```jsonc {{ 'title': 'Example Response' }}
{
"type": "InstanceMetadata",
"name": "Versia Social",
"software": {
"name": "Versia Server",
"version": "0.7.0"
},
"compatibility": {
"versions": [
"0.4.0"
],
"extensions": [
"pub.versia:reactions",
"pub.versia:polls",
"pub.versia:reports"
]
},
"host": "versia.social",
}
```

78
app/federation/http/page.mdx Normal file
View file

@ -0,0 +1,78 @@
export const metadata = {
title: 'HTTP',
description:
'How Versia uses the HTTP protocol for all communications between instances.',
}
# HTTP
Versia uses the HTTP protocol for all communications between instances. HTTP requests must conform to certain standards to ensure compatibility between different implementations, as well as to ensure the security and integrity of the data being exchanged.
ALL kinds of HTTP requests/responses between instances **MUST** include a [Signature](/signatures), signed with either the relevant [User](/entities/user)'s private key or the [instance's private key](/entities/instance-metadata).
## Requests
<Row>
<Col>
<Properties>
<Property name="Accept" type="string" required={true}>
Must include `application/json`.
</Property>
<Property name="Content-Type" type="string" required={true}>
Must include `application/json; charset=utf-8`, if the request has a body.
</Property>
<Property name="X-Signature" type="string" required={false}>
See [Signatures](/signatures) for more information.
</Property>
<Property name="X-Signed-By" type="URI" required={false} typeLink="/types#uri">
See [Signatures](/signatures).
</Property>
<Property name="X-Nonce" type="string" required={false}>
See [Signatures](/signatures).
</Property>
<Property name="User-Agent" type="string" required={false}>
A string identifying the software making the request.
</Property>
</Properties>
</Col>
<Col sticky>
```http {{ 'title': 'Example Request' }}
POST https://bob.com/users/1/inbox HTTP/1.1
Accept: application/json
User-Agent: CoolServer/1.0 (https://coolserver.com)
X-Signature: post /users/1/inbox a2ebc29eb6762a9164fbcffc9271e8a53562a5e725e7187ea7d88d03cbe59341 n4bQgYhMfWWaL+qgxVrQFaO/TxsrC4Is0V1sFbDwCgg=
X-Signed-By: https://example.com/users/1
X-Nonce: a2ebc29eb6762a9164fbcffc9271e8a53562a5e725e7187ea7d88d03cbe59341
```
</Col>
</Row>
## Responses
<Row>
<Col>
<Properties>
<Property name="Content-Type" type="string" required={true}>
Must include `application/json; charset=utf-8`.
</Property>
<Property name="X-Signature" type="string" required={false}>
See [Signatures](/signatures) for more information.
</Property>
<Property name="X-Signed-By" type="URI" required={false} typeLink="/types#uri">
See [Signatures](/signatures).
</Property>
<Property name="X-Nonce" type="string" required={false}>
See [Signatures](/signatures).
</Property>
</Properties>
</Col>
<Col sticky>
```http {{ 'title': 'Example Response' }}
HTTP/1.1 200 OK
Content-Type: application/json; charset=utf-8
X-Signature: get /users/1/followers 8f872d4609d26819d03a7d60ce3db68f5b0dd5a80d5930260294f237e670ab76 YDA64iuZiGG847KPM+7BvnWKITyGyTwHbb6fVYwRx1I
X-Signed-By: https://example.com/users/1
X-Nonce: 8f872d4609d26819d03a7d60ce3db68f5b0dd5a80d5930260294f237e670ab76
```
</Col>
</Row>

20
app/federation/page.mdx Normal file
View file

@ -0,0 +1,20 @@
import { Guides, Guide } from '@/components/Guides';
export const metadata = {
title: 'Federation',
description:
'Description of federation behavior in Versia.',
}
# Federation
Being a federation protocol, Versia defines a set of rules for exchanging data between instances. This document outlines the behavior of instances in a Versia federated network. {{ className: 'lead' }}
Federation is built on the [HyperText Transfer Protocol (HTTP)](https://tools.ietf.org/html/rfc7230) and the [JavaScript Object Notation (JSON)](https://tools.ietf.org/html/rfc7159) data format. Instances communicate with each other by sending and receiving JSON payloads over HTTP.
<Guides>
<Guide name="HTTP Guidelines" href="/federation/http" description="Guidelines for HTTP communication in Versia." />
<Guide name="Validation" href="/federation/validation" description="Validation rules for Versia implementations." />
<Guide name="Discovery" href="/federation/discovery" description="How Versia instances can discover users, capabilities, and endpoints." />
<Guide name="Delegation" href="/federation/delegation" description="Authorizing actions on behalf of another user." />
</Guides>

36
app/federation/validation/page.mdx Normal file
View file

@ -0,0 +1,36 @@
export const metadata = {
title: 'Validation',
description:
'Validation rules for Versia implementations.',
}
# Validation
Implementations **MUST** strictly validate all incoming data to ensure that it is well-formed and adheres to the Versia Protocol. If a request is invalid, the instance **MUST** return a `400 Bad Request` HTTP status code.
<Note>
Remember that while *your* implementation may disallow or restrict some user input, other implementations may not. You **should not** apply those restrictions to data coming from other instances.
For example, if your implementation disallows using HTML in posts, you should not strip HTML from posts coming from other instances. You *may* choose to display them differently, but you should not modify the data itself.
</Note>
Things that should be validated include, but are not limited to:
- The presence of **all required fields**.
- The **format** of all fields (integers should not be strings, dates should be in ISO 8601 format, etc.).
- The presence of **all required headers**.
- The presence of a **valid signature**.
- The **length** of all fields (for example, the `username` field on a `User` entity) should be at least 1 character long.
- Do not set arbitrary limits on the length of fields that other instances may send you. For example, a `bio` field should not be limited to 160 characters, even if your own implementation has such a limit.
- If you do set limits, they should be reasonable, well-documented and should allow Users to easily view the remote original, by, for example, linking to it.
- The **type**, **precision** and **scale** of all numeric fields.
- For example, a `size` field on a `ContentFormat` structure should be a positive integer, not a negative number or a floating-point number.
<Note>
All numeric fields in these docs have the appropriate precision (`u64`, `i64`, `f32`, etc.) specified. As a rule of thumb, do not use a different type in memory than the one specified in the docs.
Using the same type with a higher bit count, for example using a u128 instead of a u64, is acceptable. Beware of performance impacts this may cause.
</Note>
- The **validity** of all URLs and URIs (run them through your favorite URL parser, optionally fetch the linked URL).
- The **time** of all dates and times (people should not be born in the future, or in the year 0).
It is your implementation's duty to reject data from other instances that does not adhere to the strict spec. **This is crucial to ensure the integrity of your instance and the network as a whole**. Allowing data that is technically valid but semantically incorrect can lead to the degradation of the entire Versia ecosystem.

52
app/introduction/page.mdx Normal file
View file

@ -0,0 +1,52 @@
import { Resources } from '@/components/Resources'
import { HeroPattern } from '@/components/HeroPattern'
export const metadata = {
title: 'Versia Documentation',
description: 'Introduction to the Versia Protocol, a communication medium for federated applications, leveraging the HTTP stack.',
}
export const sections = [
{ title: 'Vocabulary', id: 'vocabulary' },
{ title: 'Basic Concepts', id: 'basic-concepts' },
{ title: 'Resources', id: 'resources' },
]
<HeroPattern />
# Versia Federation Protocol
The Versia Protocol is designed as a communication medium for federated applications, leveraging the HTTP stack. Its simplicity ensures ease of implementation and comprehension. {{ className: 'lead' }}
<div className="not-prose mb-16 mt-6 flex gap-3">
<Button href="/entities" arrow="right">
<>Entities</>
</Button>
<Button href="/sdks" variant="outline">
<>Explore SDKs</>
</Button>
</div>
## Vocabulary
<Note>
The words **MUST**, **MUST NOT**, **SHOULD**, **SHOULD NOT**, and **MAY** are used in this document as defined in [RFC 2119](https://tools.ietf.org/html/rfc2119).
</Note>
The Versia Protocol uses the following terms:
- **Entity**: A generic term for any JSON object in the protocol, such as a [User](./entities/user), a [Note](./entities/note), or a [Like](./extensions/likes). Entities are uniquely identified by their `id` property.
- **Implementation**: A software application that implements the Versia Protocol.
- **Instance**: An application deploying an **Implementation**.
- Using the same nomenclature, an ActivityPub Implementation would be `Mastodon`, and an Instance would be `mastodon.social`.
- **Federation**: The process of exchanging data between two or more **Instances**.
## Philosophy
The Versia Protocol is heavily inspired by the [ActivityPub](https://www.w3.org/TR/activitypub/) specification. It is designed to be simple and easy to implement, with a focus on the following concepts:
- **Simple Structures**: Entities are represented as JSON objects. No JSON-LD, no complex data structures, just plain JSON.
- **Modularity**: The protocol is divided into a **core protocol** and **extensions**. Implementations can choose to support only the core protocol or add extensions as needed.
- **Namespacing**: To avoid extension conflicts, all extensions are namespaced.
- **Signatures**: Most types of interactions **must** be signed with a private key. Unlike other protocols, signatures are **mandatory**, not optional.
- **Developer-Friendliness**: Understanding and implementing your own Versia server should be easy. Documentation is aimed at developers first.
<Resources />

59
app/layout.tsx Normal file
View file

@ -0,0 +1,59 @@
import glob from "fast-glob";
import type { Metadata } from "next";
import { Layout } from "../components/Layout";
import type { Section } from "../components/SectionProvider";
import { Providers } from "./providers";
import "@/styles/tailwind.css";
import logo from "@/images/branding/logo.webp";
import type { ReactNode } from "react";
export const metadata: Metadata = {
title: {
template: "%s • Versia API Reference",
default: "Versia API Reference",
},
keywords: ["federation", "api", "reference", "documentation", "versia"],
metadataBase: new URL("https://versia.pub"),
openGraph: {
type: "article",
images: {
url: logo.src,
alt: "Versia logo",
height: logo.height,
width: logo.width,
type: "image/webp",
},
},
};
export default async function RootLayout({
children,
}: {
children: ReactNode;
}) {
const pages = await glob("**/*.mdx", { cwd: "app" });
const allSectionsEntries = (await Promise.all(
pages.map(async (filename) => [
`/${filename.replace(/(^|\/)page\.mdx$/, "")}`,
(await import(`./${filename}`)).sections,
]),
)) as [string, Section[]][];
const allSections = Object.fromEntries(allSectionsEntries);
return (
<html lang="en" className="h-full" suppressHydrationWarning={true}>
<head>
<link rel="icon" href="/favicon.png" type="image/png" />
</head>
<body className="flex min-h-full bg-white antialiased dark:bg-zinc-900">
<Providers>
<div className="w-full">
<Layout allSections={allSections}>{children}</Layout>
</div>
</Providers>
</body>
</html>
);
}

24
app/not-found.tsx Normal file
View file

@ -0,0 +1,24 @@
import { Button } from "../components/Button";
import { HeroPattern } from "../components/HeroPattern";
export default function NotFound() {
return (
<>
<HeroPattern />
<div className="mx-auto flex h-full max-w-xl flex-col items-center justify-center py-16 text-center">
<p className="text-sm font-semibold text-zinc-900 dark:text-white">
404
</p>
<h1 className="mt-2 text-2xl font-bold text-zinc-900 dark:text-white">
Page not found
</h1>
<p className="mt-2 text-base text-zinc-600 dark:text-zinc-400">
Sorry, we couldn’t find the page you’re looking for.
</p>
<Button href="/" arrow="right" className="mt-8">
Back to docs
</Button>
</div>
</>
);
}

209
app/page.tsx Normal file
View file

@ -0,0 +1,209 @@
import { Resource, type ResourceType } from "@/components/Resources";
import { TeamMember } from "@/components/Team";
import { wrapper } from "@/components/mdx";
import type { Metadata } from "next";
import type { FC } from "react";
export const metadata: Metadata = {
title: "Versia Documentation",
description:
"Introduction to the Versia Protocol, a communication medium for federated applications, leveraging the HTTP stack.",
};
const Page: FC = () => {
const resources: ResourceType[] = [
{
name: "JSON-based APIs",
description: "Simple JSON objects are used to represent all data.",
icon: "tabler:code-dots",
},
{
name: "MIT licensed",
description:
"Versia is licensed under the MIT License, which allows you to use it for any purpose.",
icon: "tabler:license",
},
{
name: "Built-in namespaced extensions",
description:
"Extensions for common use cases are built-in, such as custom emojis and reactions",
icon: "tabler:puzzle",
},
{
name: "Easy to implement",
description:
"Versia is designed to be easy to implement in any language.",
icon: "tabler:code",
},
{
name: "Signed by default",
description:
"All requests are signed using advanced cryptographic algorithms.",
icon: "tabler:shield-check",
},
{
name: "No vendor lock-in",
description:
"Standardization is heavy and designed to break vendor lock-in.",
icon: "tabler:database",
},
{
name: "In-depth security docs",
description:
"Docs provide lots of information on how to program a secure instance.",
icon: "tabler:shield",
},
{
name: "Official SDKs",
description: "Official SDKs are available for TypeScript",
icon: "tabler:plug",
},
];
return wrapper({
children: (
<>
<div className="relative z-10 max-w-2xl lg:pt-6">
<h1 className="text-5xl font-semibold tracking-tight leading-3 text-brand-600 dark:text-brand-400">
Versia
</h1>
<h1 className="text-4xl sm:text-5xl font-semibold tracking-tight">
Federation, simpler
</h1>
<p className="mt-6 text-lg">
A simple, extensible federated protocol for building
useful applications. Formerly known as Lysand.
</p>
</div>
<h2>Made by developers</h2>
<p className="lead">
Versia is designed and maintained by the developers of the
Versia Server, which uses Versia for federation. This
community could include you! Check out our{" "}
<a
href="https://github.com/lysand-org/server"
target="_blank"
rel="noopener noreferrer"
>
Git repository
</a>{" "}
to see how you can contribute.
</p>
<div className="not-prose mt-4 grid grid-cols-1 max-w-full gap-8 border-t border-zinc-900/5 pt-10 sm:grid-cols-2 xl:grid-cols-4 dark:border-white/5">
{resources.map((resource) => (
<Resource key={resource.name} resource={resource} />
))}
</div>
<h2>Team</h2>
<div className="not-prose mt-4 grid grid-cols-1 max-w-full gap-8 border-t border-zinc-900/5 pt-10 sm:grid-cols-2 xl:grid-cols-3 dark:border-white/5">
<TeamMember
name="Jesse"
bio="Lead developer, spec design, UI design."
username="CPlusPatch"
avatarUrl="https://avatars.githubusercontent.com/u/42910258?v=4"
socials={[
{
name: "Website",
icon: "bx:link",
url: "https://cpluspatch.com",
},
{
name: "GitHub",
icon: "bxl:github",
url: "https://github.com/cpluspatch",
},
{
name: "Fediverse",
icon: "bxl:mastodon",
url: "https://mk.cpluspatch.com/@jessew",
},
{
name: "Versia",
icon: "bx:server",
url: "https://social.lysand.org/@jessew",
},
{
name: "Matrix",
icon: "simple-icons:matrix",
url: "https://matrix.to/#/@jesse:cpluspatch.dev",
},
{
name: "Signal",
icon: "simple-icons:signal",
url: "https://signal.me/#eu/mdX6iV0ayndNmJst43sNtlw3eFXgHSm7if4Y/mwYT1+qFDzl1PFAeroW+RpHGaRu",
},
{
name: "Email",
icon: "bx:bxs-envelope",
url: "mailto:contact@cpluspatch.com",
},
]}
/>
<TeamMember
name="April"
bio="Spec design, ActivityPub bridge, emotional support cat."
username="aprl"
avatarUrl="https://avatars.githubusercontent.com/u/30842467?v=4"
socials={[
{
name: "GitHub",
icon: "bxl:github",
url: "https://github.com/cutestnekoaqua",
},
{
name: "Fediverse",
icon: "bxl:mastodon",
url: "https://donotsta.re/april",
},
{
name: "Versia",
icon: "bx:server",
url: "https://social.lysand.org/@aprl",
},
{
name: "Matrix",
icon: "simple-icons:matrix",
url: "https://matrix.to/#/@aprl:uwu.is",
},
{
name: "Email",
icon: "bx:bxs-envelope",
url: "mailto:aprl@acab.dev",
},
]}
/>
<TeamMember
name="Anna"
username="devminer"
avatarUrl="https://i.imgur.com/grHNY7G.png"
bio="Golang SDK, spec design."
socials={[
{
name: "Website",
icon: "bx:link",
url: "https://devminer.xyz/",
},
{
name: "GitHub",
icon: "bxl:github",
url: "https://github.com/TheDevMinerTV",
},
{
name: "Matrix",
icon: "simple-icons:matrix",
url: "https://matrix.to/#/@devminer:devminer.xyz",
},
]}
/>
</div>
</>
),
});
};
export default Page;

37
app/providers.tsx Normal file
View file

@ -0,0 +1,37 @@
"use client";
import { ThemeProvider, useTheme } from "next-themes";
import { type ReactNode, useEffect } from "react";
function ThemeWatcher() {
const { resolvedTheme, setTheme } = useTheme();
useEffect(() => {
const media = window.matchMedia("(prefers-color-scheme: dark)");
function onMediaChange() {
const systemTheme = media.matches ? "dark" : "light";
if (resolvedTheme === systemTheme) {
setTheme("system");
}
}
onMediaChange();
media.addEventListener("change", onMediaChange);
return () => {
media.removeEventListener("change", onMediaChange);
};
}, [resolvedTheme, setTheme]);
return null;
}
export function Providers({ children }: { children: ReactNode }) {
return (
<ThemeProvider attribute="class" disableTransitionOnChange={true}>
<ThemeWatcher />
{children}
</ThemeProvider>
);
}

17
app/sdks/page.mdx Normal file
View file

@ -0,0 +1,17 @@
import { Libraries } from '@/components/Libraries'
export const metadata = {
title: 'Versia SDKs',
description:
'Versia offers well-written SDKs in various languages to help you create Versia applications with ease.',
}
export const sections = [
{ title: 'Official libraries', id: 'official-libraries' },
]
# Protocol SDKs
The Versia development team offers a well-written SDK in TypeScript to help you create Versia applications with ease. {{ className: 'lead' }}
<Libraries />

152
app/signatures/page.mdx Normal file
View file

@ -0,0 +1,152 @@
export const metadata = {
title: 'Signatures',
description:
'Learn how signatures work, and how to implement them in your Versia instance.',
}
# Signatures
Versia uses cryptographic signatures to ensure the integrity and authenticity of data. Signatures are used to verify that the data has not been tampered with and that it was created by the expected user. {{ className: 'lead' }}
<Note>
This part is very important! If signatures are implemented incorrectly in your instance, **you will not be able to federate**.
Mistakes made in this section can lead to **security vulnerabilities** and **impersonation attacks**.
</Note>
## Signature Definition
A signature consists of a series of headers in an HTTP request. The following headers are used:
- **`X-Signature`**: The signature itself, encoded in base64.
- **`X-Signed-By`**: URI of the user who signed the request, [or the string `instance` to represent the instance](/entities/instance-metadata#the-null-author).
- **`X-Nonce`**: A random string generated by the client. This is used to prevent replay attacks.
Signatures are **required on ALL federation traffic**. If a request does not have a signature, it **MUST** be rejected. Specifically, signatures must be put on:
- **All POST requests**.
- **All responses to GET requests** (for example, when fetching a user's profile). In this case, the HTTP method used in the signature string must be `GET`.
If a signature fails, is missing or is invalid, the instance **MUST** return a `401 Unauthorized` HTTP status code.
### Calculating the Signature
Create a string containing the following (including newlines):
```
$0 $1 $2 $3
```
Where:
- `$0` is the HTTP method (e.g. `GET`, `POST`) in lowercase.
- `$1` is the path of the request, in standard URI format (don't forget to URL-encode it).
- `$2` is the nonce, a random string generated by the client.
- `$3` is the SHA-256 hash of the request body, encoded in base64.
Sign this string using the user's private key. The resulting signature should be encoded in base64.
Example:
```
post /notes a2ebc29eb6762a9164fbcffc9271e8a53562a5e725e7187ea7d88d03cbe59341 n4bQgYhMfWWaL+qgxVrQFaO/TxsrC4Is0V1sFbDwCgg=
```
### Verifying the Signature
To verify a signature, the instance must:
- Recreate the string as described above.
- Extract the signature provided in the `X-Signature` header.
- Decode the signature from base64.
- Perform a signature verification using the user's public key.
### Example
The following example is written in TypeScript using the WebCrypto API.
`@bob`, from `bob.com`, wants to sign a request to `alice.com`. The request is a `POST` to `/notes`, with the following body:
```json
{
"content": "Hello, world!"
}
```
Bob can be found at `https://bob.com/users/bf44e6ad-7c0a-4560-9938-cf3fd4066511`. His ed25519 private key, encoded in Base64 PKCS8, is `MC4CAQAwBQYDK2VwBCIEILrNXhbWxC/MhKQDsJOAAF1FH/R+Am5G/eZKnqNum5ro`.
Here's how Bob would sign the request:
```typescript
/**
* Using Node.js's Buffer API for brevity
* If using another runtime, you may need to use a different method to convert to/from Base64
*/
const content = JSON.stringify({
content: "Hello, world!",
});
const base64PrivateKey = "MC4CAQAwBQYDK2VwBCIEILrNXhbWxC/MhKQDsJOAAF1FH/R+Am5G/eZKnqNum5ro";
const privateKey = await crypto.subtle.importKey(
"pkcs8",
Buffer.from(base64PrivateKey, "base64"),
"Ed25519",
false,
["sign"],
);
const nonce = crypto.getRandomValues(new Uint8Array(32))
const digest = await crypto.subtle.digest(
"SHA-256",
new TextEncoder().encode(content)
);
const stringToSign =
`post /notes ${Buffer.from(nonce).toString("hex")} ${Buffer.from(digest).toString("base64")}`;
const signature = await crypto.subtle.sign(
"Ed25519",
privateKey,
new TextEncoder().encode(stringToSign)
);
const base64Signature = Buffer.from(signature).toString("base64");
```
To send the request, Bob would use the following code:
```typescript
const headers = new Headers();
headers.set("X-Signed-By", "https://bob.com/users/bf44e6ad-7c0a-4560-9938-cf3fd4066511");
headers.set("X-Nonce", Buffer.from(nonce).toString("hex"));
headers.set("X-Signature", base64Signature);
headers.set("Content-Type", "application/json");
const response = await fetch("https://alice.com/notes", {
method: "POST",
headers,
body: content,
});
```
On Alice's side, she would verify the signature using Bob's public key. Here, we assume that Alice has Bob's public key stored in a variable called `publicKey` (during real federation, this would be fetched from Bob's profile).
```typescript
const method = request.method.toLowerCase();
const path = new URL(request.url).pathname;
const signature = request.headers.get("X-Signature");
const nonce = request.headers.get("X-Nonce");
const digest = await crypto.subtle.digest(
"SHA-256",
new TextEncoder().encode(await request.text())
);
const stringToVerify =
`${method} ${path} ${nonce} ${Buffer.from(digest).toString("base64")}`;
const isVerified = await crypto.subtle.verify(
"Ed25519",
publicKey,
Buffer.from(signature, "base64"),
new TextEncoder().encode(stringToVerify)
);
if (!isVerified) {
return new Response("Signature verification failed", { status: 401 });
}
```

79
app/structures/collection/page.mdx Normal file
View file

@ -0,0 +1,79 @@
export const metadata = {
title: 'Collection',
description: 'Definition of the Collection structure',
}
# Collection
Collections are a way to represent paginated groups of entities. They are used everywhere lists of entities can be found, such as a user's outbox. {{ className: 'lead' }}
Pages should be limited to a reasonable number of entities, such as 20 or 80.
<Note>
As Collections are independent and not part of a larger entity (like [ContentFormat](/structures/content-format)), they should have a valid [Signature](/signatures).
</Note>
## Entity Definition
<Row>
<Col>
<Properties>
<Property name="author" type="URI | null" required={true} typeLink="/types#uri">
Author of the collection. Usually the user who owns the collection. [Can be set to `null` to represent the instance](/entities/instance-metadata#the-null-author).
</Property>
<Property name="first" type="URI" required={true} typeLink="/types#uri">
URI to the first page of the collection. Query parameters are allowed.
</Property>
<Property name="last" type="URI" required={true} typeLink="/types#uri">
URI to the last page of the collection. Query parameters are allowed.
If the collection only has one page, this should be the same as `first`.
</Property>
<Property name="total" type="number" required={true} numberType="u64">
Total number of entities in the collection, across all pages.
</Property>
<Property name="next" type="URI" required={false} typeLink="/types#uri">
URI to the next page of the collection. Query parameters are allowed.
If there is no next page, this should be `null`.
</Property>
<Property name="previous" type="URI" required={false} typeLink="/types#uri">
URI to the previous page of the collection. Query parameters are allowed.
If there is no previous page, this should be `null`.
</Property>
<Property name="items" type="Entity[]" required={true}>
Collection contents. Must be an array of entities.
</Property>
</Properties>
</Col>
<Col sticky>
```jsonc {{ 'title': 'Example Collection' }}
{
"author": "https://versia.social/users/018ec082-0ae1-761c-b2c5-22275a611771",
"first": "https://versia.social/users/018ec082-0ae1-761c-b2c5-22275a611771/outbox?page=1",
"last": "https://versia.social/users/018ec082-0ae1-761c-b2c5-22275a611771/outbox?page=3",
"total": 46,
"next": "https://versia.social/users/018ec082-0ae1-761c-b2c5-22275a611771/outbox?page=2",
"previous": null,
"items": [
{
"id": "456df8ed-daf1-4062-abab-491071c7b8dd",
"type": "Note",
"uri": "https://versia.social/notes/456df8ed-daf1-4062-abab-491071c7b8dd",
"created_at": "2024-04-09T01:38:51.743Z",
"content": {
"text/plain": {
"content": "Hello, world!"
}
}
}
]
}
```
</Col>
</Row>

153
app/structures/content-format/page.mdx Normal file
View file

@ -0,0 +1,153 @@
export const metadata = {
title: 'ContentFormat',
description: 'Definition of the ContentFormat structure',
}
# ContentFormat
The `ContentFormat` structure is used to represent content with metadata. It supports multiple content types for the same file, such as a PNG image and a WebP image. {{ className: 'lead' }}
A `ContentFormat` structure is defined as follows:
```typescript
type ContentType = `${string}/${string}`;
type ContentFormat = {
[key: ContentType]: {
...
};
}
```
<Note>
Each piece of data in the `ContentFormat` structure is meant to be a different representation of the same content. For example, a PNG image and its WebP version are different representations of the same image. Do not mix unrelated files or data in the same `ContentFormat` structure.
**Good:**
```json
{
"image/png": {
...
},
"image/webp": {
...
}
}
```
**Bad:**
```json
{
"image/png": {
...
},
"application/json": {
...
}
}
```
</Note>
## Implementation Guidelines
### Text
Implementations should always process text content with the richest format available, such as HTML. However, they should also provide other formats like plain text and Markdown for compatibility with other systems.
HTML is the recommended content type for text content, and as such every text content should have an HTML representation. If the content is not HTML, it should be converted to HTML using appropriate conversion rules.
Rich formats include:
- `text/html`
- `text/markdown`
- `text/x.misskeymarkdown` (Misskey Flavoured Markdown, common on ActivityPub)
Clients should display the richest possible format available. If the client does not support the richest format, it should fall back to the next richest format.
### Images
It is a good idea to provide at least two versions of an image (if possible): one in the original format and another in a more efficient format like WebP/AVIF. This allows clients to choose the most suitable format based on their capabilities.
## Entity Definition
<Row>
<Col>
<Properties>
<Property name="content" type="string | URI" required={true}>
Structure data. If `Content-Type` is a binary format, this field should be a URI to the binary data. Otherwise, it should be the content itself. Refer to the `remote` property for more information.
</Property>
<Property name="remote" type="boolean" required={true}>
If `true`, the content is hosted remotely and should be fetched by the client. If `false`, the content is embedded in the entity.
</Property>
<Property name="description" type="string" required={false}>
A human-readable description of the content. Also known as `alt` text.
</Property>
<Property name="size" type="number" required={false} numberType="u64">
Size of the content in bytes.
</Property>
<Property name="hash" type="Hash" required={false}>
Hash of the content.
```typescript
type HashNames = "sha256" | "sha512" | "sha3-256" | "sha3-512" | "blake2b-256" | "blake2b-512" | "blake3-256" | "blake3-512" | "md5" | "sha1" | "sha224" | "sha384" | "sha3-224" | "sha3-384" | "blake2s-256" | "blake2s-512" | "blake3-224" | "blake3-384";
type Hash = {
[key in HashNames]: string;
}
```
</Property>
<Property name="thumbhash" type="string" required={false}>
Image in [ThumbHash](https://evanw.github.io/thumbhash/) format.
</Property>
<Property name="width" type="number" required={false} numberType="u64">
Width of the content in pixels. Only applicable to content types that have a width.
</Property>
<Property name="height" type="number" required={false} numberType="u64">
Height of the content in pixels. Only applicable to content types that have a height.
</Property>
<Property name="fps" type="number" required={false} numberType="u64">
Frames per second. Only applicable to video content.
</Property>
<Property name="duration" type="number" required={false} numberType="f64">
Duration of the content in seconds. Only applicable to content types that have a duration.
</Property>
</Properties>
</Col>
<Col sticky>
```jsonc {{ 'title': 'Images' }}
{
"image/png": {
"content": "https://cdn.example.com/attachments/ece2f9d9-27d7-457d-b657-4ce9172bdcf8.png",
"remote": true,
"description": "A jolly horse running through mountains",
"size": 453933,
"hash": {
"sha256": "91714fc336210d459d4f9d9233de663be2b87ffe923f1cfd76ece9d06f7c965d"
},
"thumbhash": "3OcRJYB4d3h/iIeHeEh3eIhw+j2w",
"width": 1920,
"height": 1080
}
}
```
```jsonc {{ 'title': 'Text Formats' }}
{
"text/plain": {
"content": "The consequences of today are determined by the actions of the past. To change your future, alter your decisions today.",
"remote": false
},
"text/markdown": {
"content": "> The consequences of today are determined by the actions of the past.\n> To change your future, alter your decisions today.",
"remote": false
},
"text/html": {
"content": "<blockquote><p>The consequences of today are determined by the actions of the past.</p><p>To change your future, alter your decisions today.</p></blockquote>",
"remote": false
}
}
```
</Col>
</Row>

48
app/structures/emoji/page.mdx Normal file
View file

@ -0,0 +1,48 @@
export const metadata = {
title: 'Emoji',
description: 'Definition of the Emoji structure',
}
# Custom Emoji
<Note>
This structure is part of the [Custom Emojis](/extensions/custom-emojis) extension. As such, it is not part of the core Versia specification.
If you are not implementing the Custom Emojis extension, you can ignore this structure.
</Note>
## Entity Definition
<Row>
<Col>
<Properties>
<Property name="name" type="string" required={true}>
Emoji name, surrounded by identification characters (for example, colons: `:happy_face:`).
Name must match the regex `^[a-zA-Z0-9_-]+$`.
Identification characters must not match the name regex (must not be alphanumeric/underscore/hyphen). There may only be two identification characters, one at the beginning and one at the end.
</Property>
<Property name="content" type="ContentFormat" required={true} typeLink="/structures/content-format">
Emoji content. Must be an image format (`image/*`).
</Property>
</Properties>
</Col>
<Col sticky>
```jsonc {{ 'title': 'Example Emoji' }}
{
"name": ":happy_face:",
"content": {
"image/webp": {
"content": "https://cdn.example.com/emojis/happy_face.webp",
"remote": true,
"description": "A happy emoji smiling.",
}
}
}
```
</Col>
</Row>

45
app/types/page.mdx Normal file
View file

@ -0,0 +1,45 @@
## ISO8601
```typescript
type Year = `${number}${number}${number}${number}`;
type Month = `${"0" | "1"}${number}`;
type Day = `${"0" | "1" | "2" | "3"}${number}`;
type DateString = `${Year}-${Month}-${Day}`;
type Hour = `${"0" | "1" | "2"}${number}`;
type Minute = `${"0" | "1" | "2" | "3" | "4" | "5"}${number}`;
type Second = `${"0" | "1" | "2" | "3" | "4" | "5"}${number}`;
type TimeString = `${Hour}:${Minute}:${Second}`;
type Offset = `${"Z" | "+" | "-"}${Hour}:${Minute}`;
type ISO8601 = `${DateString}T${TimeString}${Offset}`;
```
## UUID
```typescript
type UUID = `${number}-${number}-${number}-${number}-${number}`;
```
## URI
```typescript
type URI = string;
```
## Extensions
```typescript
type OrgNamespace = string;
type ExtensionName = string;
type ExtensionsKey = `${OrgNamespace}:${ExtensionName}`;
type Extensions = {
[key in ExtensionsKey]: any;
}
```

85
biome.json
View file

@ -1,20 +1,91 @@
{ {
"$schema": "https://biomejs.dev/schemas/1.6.4/schema.json", "$schema": "https://biomejs.dev/schemas/1.8.3/schema.json",
"organizeImports": { "organizeImports": {
"enabled": true, "enabled": true
"ignore": ["node_modules", "dist", "cache"]
}, },
"linter": { "linter": {
"enabled": true, "enabled": true,
"rules": { "rules": {
"recommended": true "all": true,
"correctness": {
"noNodejsModules": "off"
}, },
"ignore": ["node_modules", "dist", "cache"] "complexity": {
"noExcessiveCognitiveComplexity": "off"
},
"style": {
"noDefaultExport": "off",
"noParameterProperties": "off",
"noNamespaceImport": "off",
"useFilenamingConvention": "off",
"useNamingConvention": {
"level": "warn",
"options": {
"requireAscii": false,
"strictCase": false,
"conventions": [
{
"selector": {
"kind": "typeProperty"
},
"formats": [
"camelCase",
"CONSTANT_CASE",
"PascalCase",
"snake_case"
]
},
{
"selector": {
"kind": "objectLiteralProperty",
"scope": "any"
},
"formats": [
"camelCase",
"CONSTANT_CASE",
"PascalCase",
"snake_case"
]
},
{
"selector": {
"kind": "classMethod",
"scope": "any"
},
"formats": ["camelCase", "PascalCase"]
},
{
"selector": {
"kind": "functionParameter",
"scope": "any"
},
"formats": ["snake_case", "camelCase"]
}
]
}
}
},
"nursery": {
"noDuplicateElseIf": "warn",
"noDuplicateJsonKeys": "warn",
"noEvolvingTypes": "warn",
"noYodaExpression": "warn",
"useConsistentBuiltinInstantiation": "warn",
"useErrorMessage": "warn",
"useImportExtensions": "off",
"useThrowNewError": "warn"
}
}
}, },
"formatter": { "formatter": {
"enabled": true, "enabled": true,
"indentStyle": "space", "indentStyle": "space",
"indentWidth": 4, "indentWidth": 4
"ignore": ["node_modules", "dist", "cache"] },
"javascript": {
"globals": ["Bun"]
},
"files": {
"ignore": ["node_modules", ".next", ".output", "out"]
} }
} }

BIN
bun.lockb
View file

Binary file not shown.

19
components/Banner.vue
View file

@ -1,19 +0,0 @@
<script setup lang="ts">
const currentNews = {
id: "lysand3",
title: "Lysand 3.0",
description: "Lysand 3.0 is now available!",
};
</script>
<template>
<div
class="fixed inset-x-0 top-0 flex items-center h-10 gap-x-6 overflow-hidden bg-black px-4 py-2.5 sm:px-3.5 sm:before:flex-1 z-50">
<div class="flex flex-wrap justify-center gap-x-4 gap-y-2 w-full">
<p class="text-sm text-gray-50">
<strong class="font-semibold">{{
currentNews.title
}}</strong>&nbsp;•&nbsp;{{ currentNews.description }}
</p>
</div>
</div>
</template>

82
components/Button.tsx Normal file
View file

@ -0,0 +1,82 @@
import clsx from "clsx";
import Link from "next/link";
import type { ComponentPropsWithoutRef } from "react";
function ArrowIcon(props: ComponentPropsWithoutRef<"svg">) {
return (
<svg viewBox="0 0 20 20" fill="none" aria-hidden="true" {...props}>
<path
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
d="m11.5 6.5 3 3.5m0 0-3 3.5m3-3.5h-9"
/>
</svg>
);
}
const variantStyles = {
primary:
"rounded-md bg-zinc-900 py-1 px-3 text-white hover:bg-zinc-700 dark:bg-brand-400/10 dark:text-brand-400 dark:ring-1 dark:ring-inset dark:ring-brand-400/20 dark:hover:bg-brand-400/10 dark:hover:text-brand-300 dark:hover:ring-brand-300",
secondary:
"rounded-md bg-zinc-100 py-1 px-3 text-zinc-900 hover:bg-zinc-200 dark:bg-zinc-800/40 dark:text-zinc-400 dark:ring-1 dark:ring-inset dark:ring-zinc-800 dark:hover:bg-zinc-800 dark:hover:text-zinc-300",
filled: "rounded-md bg-zinc-900 py-1 px-3 text-white hover:bg-zinc-700 dark:bg-brand-500 dark:text-white dark:hover:bg-brand-400",
outline:
"rounded-md py-1 px-3 text-zinc-700 ring-1 ring-inset ring-zinc-900/10 hover:bg-zinc-900/2.5 hover:text-zinc-900 dark:text-zinc-400 dark:ring-white/10 dark:hover:bg-white/5 dark:hover:text-white",
text: "text-brand-500 hover:text-brand-600 dark:text-brand-400 dark:hover:text-brand-500",
};
type ButtonProps = {
variant?: keyof typeof variantStyles;
arrow?: "left" | "right";
} & (
| ComponentPropsWithoutRef<typeof Link>
| (ComponentPropsWithoutRef<"button"> & { href?: undefined })
);
export function Button({
variant = "primary",
className,
children,
arrow,
...props
}: ButtonProps) {
className = clsx(
"inline-flex gap-0.5 justify-center overflow-hidden text-sm font-medium transition",
variantStyles[variant],
className,
);
const arrowIcon = (
<ArrowIcon
className={clsx(
"mt-0.5 h-5 w-5",
variant === "text" && "relative top-px",
arrow === "left" && "-ml-1 rotate-180",
arrow === "right" && "-mr-1",
)}
/>
);
const inner = (
<>
{arrow === "left" && arrowIcon}
{children}
{arrow === "right" && arrowIcon}
</>
);
if (typeof props.href === "undefined") {
return (
<button className={className} {...props}>
{inner}
</button>
);
}
return (
<Link className={className} {...props}>
{inner}
</Link>
);
}

393
components/Code.tsx Normal file
View file

@ -0,0 +1,393 @@
"use client";
import { Tab, TabGroup, TabList, TabPanel, TabPanels } from "@headlessui/react";
import clsx from "clsx";
import {
Children,
type ComponentPropsWithoutRef,
type ReactNode,
createContext,
isValidElement,
useContext,
useEffect,
useRef,
useState,
} from "react";
import { create } from "zustand";
import { Tag } from "./Tag";
const languageNames: Record<string, string> = {
js: "JavaScript",
ts: "TypeScript",
javascript: "JavaScript",
typescript: "TypeScript",
php: "PHP",
python: "Python",
ruby: "Ruby",
go: "Go",
};
function getPanelTitle({
title,
language,
}: {
title?: string;
language?: string;
}) {
if (title) {
return title;
}
if (language && language in languageNames) {
return languageNames[language];
}
return "Code";
}
function ClipboardIcon(props: ComponentPropsWithoutRef<"svg">) {
return (
<svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
<path
strokeWidth="0"
d="M5.5 13.5v-5a2 2 0 0 1 2-2l.447-.894A2 2 0 0 1 9.737 4.5h.527a2 2 0 0 1 1.789 1.106l.447.894a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-5a2 2 0 0 1-2-2Z"
/>
<path
fill="none"
strokeLinejoin="round"
d="M12.5 6.5a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-5a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2m5 0-.447-.894a2 2 0 0 0-1.79-1.106h-.527a2 2 0 0 0-1.789 1.106L7.5 6.5m5 0-1 1h-3l-1-1"
/>
</svg>
);
}
function CopyButton({ code }: { code: string }) {
const [copyCount, setCopyCount] = useState(0);
const copied = copyCount > 0;
useEffect(() => {
if (copyCount > 0) {
const timeout = setTimeout(() => setCopyCount(0), 1000);
return () => {
clearTimeout(timeout);
};
}
}, [copyCount]);
return (
<button
type="button"
className={clsx(
"group/button absolute right-4 top-3.5 overflow-hidden rounded-md py-1 pl-2 pr-3 text-2xs font-medium opacity-0 backdrop-blur transition focus:opacity-100 group-hover:opacity-100",
copied
? "bg-brand-400/10 ring-1 ring-inset ring-brand-400/20"
: "bg-white/5 hover:bg-white/7.5 dark:bg-white/2.5 dark:hover:bg-white/5",
)}
onClick={() => {
window.navigator.clipboard.writeText(code).then(() => {
setCopyCount((count) => count + 1);
});
}}
>
<span
aria-hidden={copied}
className={clsx(
"pointer-events-none flex items-center gap-0.5 text-zinc-400 transition duration-300",
copied && "-translate-y-1.5 opacity-0",
)}
>
<ClipboardIcon className="h-5 w-5 fill-zinc-500/20 stroke-zinc-500 transition-colors group-hover/button:stroke-zinc-400" />
Copy
</span>
<span
aria-hidden={!copied}
className={clsx(
"pointer-events-none absolute inset-0 flex items-center justify-center text-brand-400 transition duration-300",
!copied && "translate-y-1.5 opacity-0",
)}
>
Copied!
</span>
</button>
);
}
function CodePanelHeader({ tag, label }: { tag?: string; label?: string }) {
if (!(tag || label)) {
return null;
}
return (
<div className="flex h-9 items-center gap-2 border-y border-b-white/7.5 border-t-transparent bg-white/2.5 bg-zinc-900 px-4 dark:border-b-white/5 dark:bg-white/1">
{tag && (
<div className="dark flex">
<Tag variant="small">{tag}</Tag>
</div>
)}
{tag && label && (
<span className="h-0.5 w-0.5 rounded-md bg-zinc-500" />
)}
{label && (
<span className="font-mono text-xs text-zinc-400">{label}</span>
)}
</div>
);
}
function CodePanel({
children,
tag,
label,
code,
}: {
children: ReactNode;
tag?: string;
label?: string;
code?: string;
}) {
const child = Children.only(children);
if (isValidElement(child)) {
tag = child.props.tag ?? tag;
label = child.props.label ?? label;
code = child.props.code ?? code;
}
if (!code) {
throw new Error(
"`CodePanel` requires a `code` prop, or a child with a `code` prop.",
);
}
return (
<div className="group dark:bg-white/2.5">
<CodePanelHeader tag={tag} label={label} />
<div className="relative">
<pre className="overflow-x-auto p-4 text-sm text-white [&>code>pre]:!bg-transparent">
{children}
</pre>
<CopyButton code={code} />
</div>
</div>
);
}
function CodeGroupHeader({
title,
children,
selectedIndex,
}: {
title: string;
children: ReactNode;
selectedIndex: number;
}) {
const hasTabs = Children.count(children) > 1;
if (!(title || hasTabs)) {
return null;
}
return (
<div className="flex min-h-[calc(theme(spacing.12)+1px)] flex-wrap items-start gap-x-4 border-b border-zinc-700 bg-zinc-800 px-4 dark:border-zinc-800 dark:bg-transparent">
{title && (
<h3 className="mr-auto pt-3 text-xs font-semibold text-white">
{title}
</h3>
)}
{hasTabs && (
<TabList className="-mb-px flex gap-4 text-xs font-medium">
{Children.map(children, (child, childIndex) => (
<Tab
className={clsx(
"border-b py-3 transition ui-not-focus-visible:outline-none",
childIndex === selectedIndex
? "border-brand-500 text-brand-400"
: "border-transparent text-zinc-400 hover:text-zinc-300",
)}
>
{getPanelTitle(
isValidElement(child) ? child.props : {},
)}
</Tab>
))}
</TabList>
)}
</div>
);
}
function CodeGroupPanels({
children,
...props
}: ComponentPropsWithoutRef<typeof CodePanel>) {
const hasTabs = Children.count(children) > 1;
if (hasTabs) {
return (
<TabPanels>
{Children.map(children, (child) => (
<TabPanel>
<CodePanel {...props}>{child}</CodePanel>
</TabPanel>
))}
</TabPanels>
);
}
return <CodePanel {...props}>{children}</CodePanel>;
}
function usePreventLayoutShift() {
const positionRef = useRef<HTMLElement>(null);
const rafRef = useRef<number>();
useEffect(() => {
return () => {
if (typeof rafRef.current !== "undefined") {
window.cancelAnimationFrame(rafRef.current);
}
};
}, []);
return {
positionRef,
preventLayoutShift(callback: () => void) {
if (!positionRef.current) {
return;
}
const initialTop = positionRef.current.getBoundingClientRect().top;
callback();
rafRef.current = window.requestAnimationFrame(() => {
const newTop =
positionRef.current?.getBoundingClientRect().top ??
initialTop;
window.scrollBy(0, newTop - initialTop);
});
},
};
}
const usePreferredLanguageStore = create<{
preferredLanguages: string[];
addPreferredLanguage: (language: string) => void;
}>()((set) => ({
preferredLanguages: [],
addPreferredLanguage: (language) =>
set((state) => ({
preferredLanguages: [
...state.preferredLanguages.filter(
(preferredLanguage) => preferredLanguage !== language,
),
language,
],
})),
}));
function useTabGroupProps(availableLanguages: string[]) {
const { preferredLanguages, addPreferredLanguage } =
usePreferredLanguageStore();
const [selectedIndex, setSelectedIndex] = useState(0);
const activeLanguage = [...availableLanguages].sort(
(a, z) => preferredLanguages.indexOf(z) - preferredLanguages.indexOf(a),
)[0];
const languageIndex = availableLanguages.indexOf(activeLanguage);
const newSelectedIndex =
languageIndex === -1 ? selectedIndex : languageIndex;
if (newSelectedIndex !== selectedIndex) {
setSelectedIndex(newSelectedIndex);
}
const { positionRef, preventLayoutShift } = usePreventLayoutShift();
return {
as: "div" as const,
ref: positionRef,
selectedIndex,
onChange: (newSelectedIndex: number) => {
preventLayoutShift(() =>
addPreferredLanguage(availableLanguages[newSelectedIndex]),
);
},
};
}
const CodeGroupContext = createContext(false);
export function CodeGroup({
children,
title,
...props
}: ComponentPropsWithoutRef<typeof CodeGroupPanels> & { title: string }) {
const languages =
Children.map(children, (child) =>
getPanelTitle(isValidElement(child) ? child.props : {}),
) ?? [];
const tabGroupProps = useTabGroupProps(languages);
const hasTabs = Children.count(children) > 1;
const containerClassName =
"my-6 overflow-hidden rounded-md bg-zinc-900 shadow-md dark:ring-1 ring-inset dark:ring-white/10";
const header = (
<CodeGroupHeader
title={title}
selectedIndex={tabGroupProps.selectedIndex}
>
{children}
</CodeGroupHeader>
);
const panels = <CodeGroupPanels {...props}>{children}</CodeGroupPanels>;
return (
<CodeGroupContext.Provider value={true}>
{hasTabs ? (
<TabGroup {...tabGroupProps} className={containerClassName}>
<div className="not-prose">
{header}
{panels}
</div>
</TabGroup>
) : (
<div className={containerClassName}>
<div className="not-prose">
{header}
{panels}
</div>
</div>
)}
</CodeGroupContext.Provider>
);
}
export function Code({ children, ...props }: ComponentPropsWithoutRef<"code">) {
const isGrouped = useContext(CodeGroupContext);
if (isGrouped) {
if (typeof children !== "string") {
throw new Error(
"`Code` children must be a string when nested inside a `CodeGroup`.",
);
}
return (
// biome-ignore lint/security/noDangerouslySetInnerHtml: <explanation>
// biome-ignore lint/style/useNamingConvention: <explanation>
<code {...props} dangerouslySetInnerHTML={{ __html: children }} />
);
}
return <code {...props}>{children}</code>;
}
export function Pre({
children,
...props
}: ComponentPropsWithoutRef<typeof CodeGroup>) {
const isGrouped = useContext(CodeGroupContext);
if (isGrouped) {
return children;
}
return <CodeGroup {...props}>{children}</CodeGroup>;
}

21
components/ExperimentalWarning.tsx Normal file
View file

@ -0,0 +1,21 @@
import type { FC } from "react";
export const ExperimentalWarning: FC = () => (
<>
<aside className="pointer-events-none z-50 fixed inset-x-0 bottom-0 sm:flex sm:justify-start sm:px-6 sm:pb-5 lg:px-8">
<div className="pointer-events-auto flex items-center justify-between gap-x-6 bg-zinc-900 sm:dark:shadow-brand-600 shadow-glow px-6 py-2.5 sm:rounded-md ring-1 ring-white/10 sm:py-3 sm:pl-4 sm:pr-3.5">
<p className="text-sm leading-6 text-white">
<strong className="font-semibold">Warning!</strong>
<svg
viewBox="0 0 2 2"
className="mx-2 inline h-0.5 w-0.5 fill-current"
aria-hidden="true"
>
<circle cx={1} cy={1} r={1} />
</svg>
This site is experimental and under active development.
</p>
</div>
</aside>
</>
);

77
components/Features.vue
View file

@ -1,77 +0,0 @@
<template>
<div class="mt-12">
<div class="max-w-3xl">
<h1>Made by developers</h1>
<p>
Lysand is designed and maintained by the developers of the Lysand Server, which uses Lysand for
federation. This community could include you! Check out our <a
href="https://github.com/lysand-org/lysand">Git repository</a> to see how you can contribute.
</p>
</div>
<div
class="!mt-8 grid items-start gap-x-6 gap-y-6 sm:mt-16 grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 lg:gap-x-8">
<div v-for="feature in features" :key="feature.name"
class="flex flex-row h-32 p-5 items-center gap-x-4 bg-[var(--vp-c-bg-soft)] shadow rounded duration-200 hover:ring-2 hover:scale-[101%] ring-[var(--vp-color-primary)]">
<div class="aspect-square flex items-center justify-center overflow-hidden rounded shrink-0 h-full">
<iconify-icon :icon="feature.icon" class="text-[var(--vp-color-primary)] text-5xl" />
</div>
<div class="text-pretty">
<h3 class="!text-base font-medium !mt-0">{{ feature.name }}</h3>
<p class="!mt-1 !mb-0 !text-sm">{{ feature.description }}</p>
</div>
</div>
</div>
</div>
</template>
<script setup>
const features = [
{
name: "JSON-based APIs",
description: "Simple JSON objects are used to represent all data.",
icon: "bx:bx-code-alt",
},
{
name: "MIT Licensed",
description:
"Lysand is licensed under the MIT License, which allows you to use it for any purpose.",
icon: "bx:bx-shield",
},
{
name: "Built-in namespaced extensions",
description:
"Extensions for common use cases are built-in, such as custom emojis and reactions",
icon: "bx:bx-extension",
},
{
name: "Easy to implement",
description:
"Lysand is designed to be easy to implement in any language.",
icon: "bx:bx-code-block",
},
{
name: "Secure by default",
description:
"All requests are signed using advanced cryptographic algorithms.",
icon: "bx:bx-shield-alt",
},
{
name: "No Mastodon Situation",
description:
"Standardization is heavy and designed to break vendor lock-in.",
icon: "bx:bx-code-curly",
},
{
name: "In-Depth Security Docs",
description:
"Docs provide lots of information on how to program a secure server.",
icon: "bx:bx-shield-x",
},
{
name: "TypeScript Types",
description: "TypeScript types are provided for all objects.",
icon: "bx:bx-code",
},
];
</script>

110
components/Feedback.tsx Normal file
View file

@ -0,0 +1,110 @@
"use client";
import { Transition } from "@headlessui/react";
import {
type ComponentPropsWithoutRef,
type ElementRef,
type FormEvent,
forwardRef,
useState,
} from "react";
function CheckIcon(props: ComponentPropsWithoutRef<"svg">) {
return (
<svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
<circle cx="10" cy="10" r="10" strokeWidth="0" />
<path
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
d="m6.75 10.813 2.438 2.437c1.218-4.469 4.062-6.5 4.062-6.5"
/>
</svg>
);
}
function FeedbackButton(
props: Omit<ComponentPropsWithoutRef<"button">, "type" | "className">,
) {
return (
<button
type="submit"
className="px-3 text-sm font-medium text-zinc-600 transition hover:bg-zinc-900/2.5 hover:text-zinc-900 dark:text-zinc-400 dark:hover:bg-white/5 dark:hover:text-white"
{...props}
/>
);
}
const FeedbackForm = forwardRef<
ElementRef<"form">,
Pick<ComponentPropsWithoutRef<"form">, "onSubmit">
>(function FeedbackForm({ onSubmit }, ref) {
return (
<form
ref={ref}
onSubmit={onSubmit}
className="absolute inset-0 flex items-center justify-center gap-6 md:justify-start"
>
<p className="text-sm text-zinc-600 dark:text-zinc-400">
Was this page helpful?
</p>
<div className="group grid h-8 grid-cols-[1fr,1px,1fr] overflow-hidden rounded-md border border-zinc-900/10 dark:border-white/10">
<FeedbackButton data-response="yes">Yes</FeedbackButton>
<div className="bg-zinc-900/10 dark:bg-white/10" />
<FeedbackButton data-response="no">No</FeedbackButton>
</div>
</form>
);
});
const FeedbackThanks = forwardRef<ElementRef<"div">>(
// biome-ignore lint/style/useNamingConvention: <explanation>
function FeedbackThanks(_props, ref) {
return (
<div
ref={ref}
className="absolute inset-0 flex justify-center md:justify-start"
>
<div className="flex items-center gap-3 rounded-md bg-brand-50/50 py-1 pl-1.5 pr-3 text-sm text-brand-900 ring-1 ring-inset ring-brand-500/20 dark:bg-brand-500/5 dark:text-brand-200 dark:ring-brand-500/30">
<CheckIcon className="h-5 w-5 flex-none fill-brand-500 stroke-white dark:fill-brand-200/20 dark:stroke-brand-200" />
Thanks for your feedback!
</div>
</div>
);
},
);
export function Feedback() {
const [submitted, setSubmitted] = useState(false);
function onSubmit(event: FormEvent<HTMLFormElement>) {
event.preventDefault();
// event.nativeEvent.submitter.dataset.response
// => "yes" or "no"
setSubmitted(true);
}
return (
<div className="relative h-8">
<Transition
show={!submitted}
leaveFrom="opacity-100"
leaveTo="opacity-0"
leave="pointer-events-none duration-300"
>
<FeedbackForm onSubmit={onSubmit} />
</Transition>
<Transition
show={submitted}
enterFrom="opacity-0"
enterTo="opacity-100"
enter="delay-150 duration-300"
>
<FeedbackThanks />
</Transition>
</div>
);
}

138
components/Footer.tsx Normal file
View file

@ -0,0 +1,138 @@
"use client";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { Icon } from "@iconify-icon/react";
import type { ReactNode } from "react";
import { Button } from "./Button";
import { navigation } from "./Navigation";
function PageLink({
label,
page,
previous = false,
}: {
label: string;
page: { href: string; title: string };
previous?: boolean;
}) {
return (
<>
<Button
href={page.href}
aria-label={`${label}: ${page.title}`}
variant="secondary"
arrow={previous ? "left" : "right"}
>
{label}
</Button>
<Link
href={page.href}
tabIndex={-1}
aria-hidden="true"
className="text-base font-semibold text-zinc-900 transition hover:text-zinc-600 dark:text-white dark:hover:text-zinc-300"
>
{page.title}
</Link>
</>
);
}
function PageNavigation() {
const pathname = usePathname();
const allPages = navigation.flatMap((group) => group.links);
const currentPageIndex = allPages.findIndex(
(page) => page.href === pathname,
);
if (currentPageIndex === -1) {
return null;
}
const previousPage = allPages[currentPageIndex - 1];
const nextPage = allPages[currentPageIndex + 1];
if (!(previousPage || nextPage)) {
return null;
}
return (
<div className="flex">
{previousPage && (
<div className="flex flex-col items-start gap-3">
<PageLink
label="Previous"
page={previousPage}
previous={true}
/>
</div>
)}
{nextPage && (
<div className="ml-auto flex flex-col items-end gap-3">
<PageLink label="Next" page={nextPage} />
</div>
)}
</div>
);
}
function SocialLink({
href,
icon,
children,
}: {
href: string;
icon: string;
children: ReactNode;
}) {
return (
<Link
href={href}
className="group"
target="_blank"
rel="noopener noreferrer"
>
<span className="sr-only">{children}</span>
<Icon
icon={icon}
className="h-5 w-5 fill-zinc-700 transition group-hover:fill-zinc-900 dark:group-hover:fill-zinc-500"
/>
</Link>
);
}
function SmallPrint() {
return (
<div className="flex flex-col items-center justify-between gap-5 border-t border-zinc-900/5 pt-8 sm:flex-row dark:border-white/5">
<p className="text-xs text-zinc-600 dark:text-zinc-400 prose dark:prose-invert">
&copy; Copyright {new Date().getFullYear()}. Licensed under{" "}
<a
href="https://creativecommons.org/licenses/by-sa/4.0/deed.en"
rel="noopener noreferrer"
target="_blank"
>
CC BY-SA 4.0
</a>
.
</p>
<div className="flex gap-4">
<SocialLink
href="https://github.com/lysand-org"
icon="mdi:github"
>
Find us on GitHub
</SocialLink>
</div>
</div>
);
}
export function Footer() {
return (
<footer className="mx-auto w-full max-w-2xl space-y-10 pb-16 lg:max-w-5xl">
<PageNavigation />
<SmallPrint />
</footer>
);
}

61
components/GridPattern.tsx Normal file
View file

@ -0,0 +1,61 @@
import { type ComponentPropsWithoutRef, useId } from "react";
export function GridPattern({
width,
height,
x,
y,
squares,
...props
}: ComponentPropsWithoutRef<"svg"> & {
width: number;
height: number;
x: string | number;
y: string | number;
squares: [x: number, y: number][];
}) {
const patternId = useId();
return (
<svg aria-hidden="true" {...props}>
<defs>
<pattern
id={patternId}
width={width}
height={height}
patternUnits="userSpaceOnUse"
x={x}
y={y}
>
<path d={`M.5 ${height}V.5H${width}`} fill="none" />
</pattern>
</defs>
<rect
width="100%"
height="100%"
strokeWidth={0}
fill={`url(#${patternId})`}
/>
{squares && (
// biome-ignore lint/a11y/noSvgWithoutTitle: <explanation>
<svg
x={x}
y={y}
className="overflow-visible"
aria-label="Grid of squares"
>
{squares.map(([x, y]) => (
<rect
strokeWidth="0"
key={`${x}-${y}`}
width={width + 1}
height={height + 1}
x={x * width}
y={y * height}
/>
))}
</svg>
)}
</svg>
);
}

38
components/Guides.tsx Normal file
View file

@ -0,0 +1,38 @@
import type { ReactNode } from "react";
import { Button } from "./Button";
import { Heading } from "./Heading";
export function Guides({ children }: { children: ReactNode }) {
return (
<div className="my-16 xl:max-w-none">
<Heading level={2} id="guides">
Guides
</Heading>
<div className="not-prose mt-4 grid grid-cols-1 gap-8 border-t border-zinc-900/5 pt-10 sm:grid-cols-2 xl:grid-cols-4 dark:border-white/5">
{children}
</div>
</div>
);
}
export function Guide({
href,
name,
description,
}: { href: string; name: string; description: string }) {
return (
<div>
<h3 className="text-sm font-semibold text-zinc-900 dark:text-white">
{name}
</h3>
<p className="mt-1 text-sm text-zinc-600 dark:text-zinc-400">
{description}
</p>
<p className="mt-4">
<Button href={href} variant="text" arrow="right">
Read more
</Button>
</p>
</div>
);
}

103
components/Header.tsx Normal file
View file

@ -0,0 +1,103 @@
import clsx from "clsx";
import { motion, useScroll, useTransform } from "framer-motion";
import Link from "next/link";
import {
type CSSProperties,
type ElementRef,
type ReactNode,
forwardRef,
} from "react";
import { Button } from "./Button";
import { Logo } from "./Logo";
import {
MobileNavigation,
useIsInsideMobileNavigation,
} from "./MobileNavigation";
import { useMobileNavigationStore } from "./MobileNavigation";
import { MobileSearch, Search } from "./Search";
import { ThemeToggle } from "./ThemeToggle";
function TopLevelNavItem({
href,
children,
}: {
href: string;
children: ReactNode;
}) {
return (
<li>
<Link
href={href}
className="text-sm leading-5 text-zinc-600 transition hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white"
>
{children}
</Link>
</li>
);
}
export const Header = forwardRef<ElementRef<"div">, { className?: string }>(
function Header({ className }, ref) {
const { isOpen: mobileNavIsOpen } = useMobileNavigationStore();
const isInsideMobileNavigation = useIsInsideMobileNavigation();
const { scrollY } = useScroll();
const bgOpacityLight = useTransform(scrollY, [0, 72], [0.5, 0.9]);
const bgOpacityDark = useTransform(scrollY, [0, 72], [0.2, 0.8]);
return (
<motion.div
ref={ref}
className={clsx(
className,
"fixed inset-x-0 top-0 z-50 flex h-14 items-center justify-between gap-2 px-4 transition sm:px-6 lg:left-72 lg:z-30 lg:px-8 xl:left-80",
!isInsideMobileNavigation &&
"backdrop-blur-sm lg:left-72 xl:left-80 dark:backdrop-blur",
isInsideMobileNavigation
? "bg-white dark:bg-zinc-900"
: "bg-white/[var(--bg-opacity-light)] dark:bg-zinc-900/[var(--bg-opacity-dark)]",
)}
style={
{
"--bg-opacity-light": bgOpacityLight,
"--bg-opacity-dark": bgOpacityDark,
} as CSSProperties
}
>
<div
className={clsx(
"absolute inset-x-0 top-full h-px transition",
(isInsideMobileNavigation || !mobileNavIsOpen) &&
"bg-zinc-900/7.5 dark:bg-white/7.5",
)}
/>
<Search />
<div className="flex items-center gap-5 lg:hidden">
<MobileNavigation />
<Link href="/" aria-label="Home">
<Logo className="h-6" />
</Link>
</div>
<div className="flex items-center gap-5">
<nav
className="hidden md:block"
aria-label="Main navigation"
>
<ul className="flex items-center gap-8">
<TopLevelNavItem href="/">API</TopLevelNavItem>
</ul>
</nav>
<div className="hidden md:block md:h-5 md:w-px md:bg-zinc-900/10 md:dark:bg-white/15" />
<div className="flex gap-4">
<MobileSearch />
<ThemeToggle />
</div>
<div className="hidden min-[500px]:contents">
<Button href="/changelog">Working Draft 4</Button>
</div>
</div>
</motion.div>
);
},
);

126
components/Heading.tsx Normal file
View file

@ -0,0 +1,126 @@
"use client";
import { useInView } from "framer-motion";
import Link from "next/link";
import {
type ComponentPropsWithoutRef,
type ReactNode,
useEffect,
useRef,
} from "react";
import { remToPx } from "../lib/remToPx";
import { useSectionStore } from "./SectionProvider";
import { Tag } from "./Tag";
function AnchorIcon(props: ComponentPropsWithoutRef<"svg">) {
return (
<svg
viewBox="0 0 20 20"
fill="none"
strokeLinecap="round"
aria-hidden="true"
{...props}
>
<path d="m6.5 11.5-.964-.964a3.535 3.535 0 1 1 5-5l.964.964m2 2 .964.964a3.536 3.536 0 0 1-5 5L8.5 13.5m0-5 3 3" />
</svg>
);
}
function Eyebrow({ tag, label }: { tag?: string; label?: string }) {
if (!(tag || label)) {
return null;
}
return (
<div className="flex items-center gap-x-3">
{tag && <Tag>{tag}</Tag>}
{tag && label && (
<span className="h-0.5 w-0.5 rounded-md bg-zinc-300 dark:bg-zinc-600" />
)}
{label && (
<span className="font-mono text-xs text-zinc-400">{label}</span>
)}
</div>
);
}
function Anchor({
id,
inView,
children,
}: {
id: string;
inView: boolean;
children: ReactNode;
}) {
return (
<Link
href={`#${id}`}
className="group text-inherit no-underline hover:text-inherit"
>
{inView && (
<div className="absolute ml-[calc(-1*var(--width))] mt-1 hidden w-[var(--width)] opacity-0 transition [--width:calc(2.625rem+0.5px+50%-min(50%,calc(theme(maxWidth.lg)+theme(spacing.8))))] group-hover:opacity-100 group-focus:opacity-100 md:block lg:z-50 2xl:[--width:theme(spacing.10)]">
<div className="group/anchor block h-5 w-5 rounded bg-zinc-50 ring-1 ring-inset ring-zinc-300 transition hover:ring-zinc-500 dark:bg-zinc-800 dark:ring-zinc-700 dark:hover:bg-zinc-700 dark:hover:ring-zinc-600">
<AnchorIcon className="h-5 w-5 stroke-zinc-500 transition dark:stroke-zinc-400 dark:group-hover/anchor:stroke-white" />
</div>
</div>
)}
{children}
</Link>
);
}
export function Heading<Level extends 2 | 3>({
children,
tag,
label,
level,
anchor = true,
...props
}: ComponentPropsWithoutRef<`h${Level}`> & {
id: string;
tag?: string;
label?: string;
level?: Level;
anchor?: boolean;
}) {
level = level ?? (2 as Level);
const Component = `h${level}` as "h2" | "h3";
const ref = useRef<HTMLHeadingElement>(null);
const registerHeading = useSectionStore((s) => s.registerHeading);
const inView = useInView(ref, {
margin: `${remToPx(-3.5)}px 0px 0px 0px`,
amount: "all",
});
useEffect(() => {
if (level === 2) {
registerHeading({
id: props.id,
ref,
offsetRem: tag || label ? 8 : 6,
});
}
});
return (
<>
<Eyebrow tag={tag} label={label} />
<Component
ref={ref}
className={tag || label ? "mt-2 scroll-mt-32" : "scroll-mt-24"}
{...props}
>
{anchor ? (
<Anchor id={props.id} inView={inView}>
{children}
</Anchor>
) : (
children
)}
</Component>
</>
);
}

32
components/HeroPattern.tsx Normal file
View file

@ -0,0 +1,32 @@
import { GridPattern } from "./GridPattern";
export function HeroPattern() {
return (
<div className="absolute inset-0 -z-10 mx-0 max-w-none overflow-hidden">
<div className="absolute left-1/2 top-0 ml-[-38rem] h-[25rem] w-[81.25rem] dark:[mask-image:linear-gradient(white,transparent)]">
<div className="absolute inset-0 bg-gradient-to-r from-brand-400 to-secondary-600 opacity-40 [mask-image:radial-gradient(farthest-side_at_top,white,transparent)] dark:from-brand-400/30 dark:to-secondary-600/30 dark:opacity-100">
<GridPattern
width={72}
height={56}
x={-12}
y={4}
squares={[
[4, 3],
[2, 1],
[7, 3],
[10, 6],
]}
className="absolute inset-x-0 inset-y-[-50%] h-[200%] w-full skew-y-[-18deg] fill-black/40 stroke-black/50 mix-blend-overlay dark:fill-white/2.5 dark:stroke-white/5"
/>
</div>
<svg
viewBox="0 0 1113 440"
aria-hidden="true"
className="absolute left-1/2 top-0 ml-[-19rem] w-[69.5625rem] fill-white blur-[26px] dark:hidden"
>
<path d="M.016 439.5s-9.5-300 434-300S882.516 20 882.516 20V0h230.004v439.5H.016Z" />
</svg>
</div>
</div>
);
}

49
components/Layout.tsx Normal file
View file

@ -0,0 +1,49 @@
"use client";
import { motion } from "framer-motion";
import Link from "next/link";
import { usePathname } from "next/navigation";
import type { ReactNode } from "react";
import { ExperimentalWarning } from "./ExperimentalWarning";
import { Footer } from "./Footer";
import { Header } from "./Header";
import { Logo } from "./Logo";
import { Navigation } from "./Navigation";
import { type Section, SectionProvider } from "./SectionProvider";
export function Layout({
children,
allSections,
}: {
children: ReactNode;
allSections: Record<string, Section[]>;
}) {
const pathname = usePathname();
return (
<SectionProvider sections={allSections[pathname] ?? []}>
<div className="h-full lg:ml-72 xl:ml-80">
<motion.header
layoutScroll={true}
className="contents lg:pointer-events-none lg:fixed lg:inset-0 lg:z-40 lg:flex"
>
<div className="contents lg:pointer-events-auto lg:block lg:w-72 lg:overflow-y-auto lg:border-r lg:border-zinc-900/10 lg:px-6 lg:pb-8 lg:pt-4 xl:w-80 lg:dark:border-white/10">
<div className="hidden lg:flex">
<Link href="/" aria-label="Home">
<Logo className="h-6" />
</Link>
</div>
<Header />
<Navigation className="hidden lg:mt-10 lg:block" />
</div>
</motion.header>
<div className="relative flex h-full flex-col px-4 pt-14 sm:px-6 lg:px-8">
<main className="flex-auto">{children}</main>
<Footer />
</div>
</div>
<ExperimentalWarning />
</SectionProvider>
);
}

59
components/Libraries.tsx Normal file
View file

@ -0,0 +1,59 @@
import Image from "next/image";
import logoTypescript from "@/images/logos/typescript.svg";
import { Button } from "./Button";
import { Heading } from "./Heading";
const libraries = [
{
href: "https://github.com/lysand-org/api/tree/main/federation",
name: "@lysand-org/federation",
description:
"Fully-featured federation toolkit with validation, signatures, parsing, and more.",
logo: logoTypescript,
},
];
export function Libraries() {
return (
<div className="my-16 xl:max-w-none">
<Heading level={2} id="official-libraries">
Official libraries
</Heading>
<div className="mt-4 grid grid-cols-1 gap-x-6 gap-y-10 border-t border-zinc-900/5 pt-10 sm:grid-cols-2 xl:max-w-none xl:grid-cols-3 dark:border-white/5">
{libraries.map((library) => (
<div
key={library.name}
className="flex flex-row-reverse gap-6"
>
<div className="flex-auto">
<h3 className="mt-0 text-sm font-semibold text-zinc-900 dark:text-white">
<code>{library.name}</code>
</h3>
<p className="mt-1 text-sm text-zinc-600 dark:text-zinc-400">
{library.description}
</p>
<p className="mt-4">
<Button
href={library.href}
target="_blank"
rel="noopener noreferrer"
variant="text"
arrow="right"
>
Read more
</Button>
</p>
</div>
<Image
src={library.logo}
alt=""
className="h-12 w-12 rounded m-0"
unoptimized={true}
/>
</div>
))}
</div>
</div>
);
}

20
components/Logo.tsx Normal file
View file

@ -0,0 +1,20 @@
import logo from "@/images/branding/logo.webp";
import clsx from "clsx";
import type { ComponentPropsWithoutRef } from "react";
export function Logo(props: ComponentPropsWithoutRef<"div">) {
return (
<div
{...props}
className={clsx(
"flex flex-row gap-x-2 items-center",
props.className,
)}
>
<img src={logo.src} alt="Logo" className="h-full rounded-sm" />
<span className="fill-zinc-900 dark:fill-white font-semibold text-lg">
Versia Protocol
</span>
</div>
);
}

84
components/Metadata.tsx Normal file
View file

@ -0,0 +1,84 @@
"use client";
import { Icon } from "@iconify-icon/react/dist/iconify.mjs";
import { motion } from "framer-motion";
import { type HTMLAttributes, type ReactNode, useState } from "react";
export function Badge({
children,
className,
...props
}: HTMLAttributes<HTMLSpanElement>) {
return (
<span
className={`inline-flex items-center justify-center rounded-md bg-brand-50 px-2 py-0 text-xs font-medium text-brand-700 ring-1 ring-inset ring-brand-500/10 dark:bg-brand-500/10 dark:text-brand-100 dark:ring-brand-200/20 h-8${className ? ` ${className}` : ""}`}
{...props}
>
{children}
</span>
);
}
// Collapsible, animate height
export function Changelog({ children }: { children: ReactNode }) {
const [isOpen, setIsOpen] = useState(false);
return (
<dl className="rounded border border-zinc-200 dark:border-zinc-800 py-2 px-4 dark:bg-white/2.5">
<dt>
<motion.button
className="grid grid-cols-[1fr_auto] items-center space-x-4 w-full"
type="button"
onClick={() => setIsOpen((prev) => !prev)}
>
<h3 className="m-0 text-left">Changelog</h3>
<span className="ml-6 flex items-center">
{isOpen ? (
<Icon
icon="akar-icons:minus"
className="size-6"
aria-hidden="true"
width="unset"
/>
) : (
<Icon
icon="akar-icons:plus"
className="size-5"
aria-hidden="true"
width="unset"
/>
)}
</span>
</motion.button>
</dt>
<motion.dd
initial="collapsed"
animate={isOpen ? "open" : "collapsed"}
variants={{
collapsed: { height: 0 },
open: { height: "auto" },
}}
className="overflow-hidden"
>
<ol className="grid gap-y-2 mt-4 list-disc mb-0">{children}</ol>
</motion.dd>
</dl>
);
}
export function ChangelogItem({
version,
children,
}: {
version: string;
children: ReactNode;
}) {
return (
<li>
<div className="grid grid-cols-[auto_1fr] items-center space-x-4 not-prose">
<Badge>{version}</Badge>
<span>{children}</span>
</div>
</li>
);
}

186
components/MobileNavigation.tsx Normal file
View file

@ -0,0 +1,186 @@
"use client";
import {
Dialog,
DialogPanel,
DialogTitle,
Transition,
TransitionChild,
} from "@headlessui/react";
import { motion } from "framer-motion";
import { usePathname, useSearchParams } from "next/navigation";
import {
type ComponentPropsWithoutRef,
type MouseEvent,
Suspense,
createContext,
useContext,
useEffect,
useRef,
} from "react";
import { create } from "zustand";
import { Header } from "./Header";
import { Navigation } from "./Navigation";
function MenuIcon(props: ComponentPropsWithoutRef<"svg">) {
return (
<svg
viewBox="0 0 10 9"
fill="none"
strokeLinecap="round"
aria-hidden="true"
{...props}
>
<path d="M.5 1h9M.5 8h9M.5 4.5h9" />
</svg>
);
}
function XIcon(props: ComponentPropsWithoutRef<"svg">) {
return (
<svg
viewBox="0 0 10 9"
fill="none"
strokeLinecap="round"
aria-hidden="true"
{...props}
>
<path d="m1.5 1 7 7M8.5 1l-7 7" />
</svg>
);
}
const IsInsideMobileNavigationContext = createContext(false);
function MobileNavigationDialog({
isOpen,
close,
}: {
isOpen: boolean;
close: () => void;
}) {
const pathname = usePathname();
const searchParams = useSearchParams();
const initialPathname = useRef(pathname).current;
const initialSearchParams = useRef(searchParams).current;
useEffect(() => {
if (
pathname !== initialPathname ||
searchParams !== initialSearchParams
) {
close();
}
}, [pathname, searchParams, close, initialPathname, initialSearchParams]);
function onClickDialog(event: MouseEvent<HTMLDivElement>) {
if (!(event.target instanceof HTMLElement)) {
return;
}
const link = event.target.closest("a");
if (
link &&
link.pathname + link.search + link.hash ===
window.location.pathname +
window.location.search +
window.location.hash
) {
close();
}
}
return (
<Transition show={isOpen}>
<Dialog
onClickCapture={onClickDialog}
onClose={close}
className="fixed inset-0 z-50 lg:hidden"
>
<TransitionChild
enter="duration-300 ease-out"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="duration-200 ease-in"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="fixed inset-0 top-14 bg-zinc-400/20 backdrop-blur-sm dark:bg-black/40" />
</TransitionChild>
<DialogPanel>
<DialogTitle className="sr-only">
Mobile navigation
</DialogTitle>
<TransitionChild
enter="duration-300 ease-out"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="duration-200 ease-in"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<Header />
</TransitionChild>
<TransitionChild
enter="duration-500 ease-in-out"
enterFrom="-translate-x-full"
enterTo="translate-x-0"
leave="duration-500 ease-in-out"
leaveFrom="translate-x-0"
leaveTo="-translate-x-full"
>
<motion.div
layoutScroll={true}
className="fixed bottom-0 left-0 max-w-[100vw] top-14 w-full overflow-y-auto bg-white px-4 pb-4 pt-6 shadow-lg shadow-zinc-900/10 ring-1 ring-zinc-900/7.5 min-[416px]:max-w-sm sm:px-6 sm:pb-10 dark:bg-zinc-900 dark:ring-zinc-800"
>
<Navigation />
</motion.div>
</TransitionChild>
</DialogPanel>
</Dialog>
</Transition>
);
}
export function useIsInsideMobileNavigation() {
return useContext(IsInsideMobileNavigationContext);
}
export const useMobileNavigationStore = create<{
isOpen: boolean;
open: () => void;
close: () => void;
toggle: () => void;
}>()((set) => ({
isOpen: false,
open: () => set({ isOpen: true }),
close: () => set({ isOpen: false }),
toggle: () => set((state) => ({ isOpen: !state.isOpen })),
}));
export function MobileNavigation() {
const isInsideMobileNavigation = useIsInsideMobileNavigation();
const { isOpen, toggle, close } = useMobileNavigationStore();
const ToggleIcon = isOpen ? XIcon : MenuIcon;
return (
<IsInsideMobileNavigationContext.Provider value={true}>
<button
type="button"
className="flex h-6 w-6 items-center justify-center rounded-md transition hover:bg-zinc-900/5 dark:hover:bg-white/5"
aria-label="Toggle navigation"
onClick={toggle}
>
<ToggleIcon className="w-2.5 stroke-zinc-900 dark:stroke-white" />
</button>
{!isInsideMobileNavigation && (
<Suspense fallback={null}>
<MobileNavigationDialog isOpen={isOpen} close={close} />
</Suspense>
)}
</IsInsideMobileNavigationContext.Provider>
);
}

328
components/Navigation.tsx Normal file
View file

@ -0,0 +1,328 @@
"use client";
import clsx from "clsx";
import { AnimatePresence, motion, useIsPresent } from "framer-motion";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { type ComponentPropsWithoutRef, type ReactNode, useRef } from "react";
import { remToPx } from "../lib/remToPx";
import { Button } from "./Button";
import { useIsInsideMobileNavigation } from "./MobileNavigation";
import { useSectionStore } from "./SectionProvider";
import { Tag } from "./Tag";
interface NavGroup {
title: string;
links: Array<{
title: string;
href: string;
}>;
}
function useInitialValue<T>(value: T, condition = true) {
const initialValue = useRef(value).current;
return condition ? initialValue : value;
}
function TopLevelNavItem({
href,
children,
}: {
href: string;
children: ReactNode;
}) {
return (
<li className="md:hidden">
<Link
href={href}
className="block py-1 text-sm text-zinc-600 transition hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white"
>
{children}
</Link>
</li>
);
}
function NavLink({
href,
children,
tag,
active = false,
isAnchorLink = false,
}: {
href: string;
children: ReactNode;
tag?: string;
active?: boolean;
isAnchorLink?: boolean;
}) {
return (
<Link
href={href}
aria-current={active ? "page" : undefined}
className={clsx(
"flex justify-between gap-2 py-1 pr-3 text-sm transition",
isAnchorLink ? "pl-7" : "pl-4",
active
? "text-zinc-900 dark:text-white"
: "text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white",
)}
>
<span className="truncate">{children}</span>
{tag && (
<Tag variant="small" color="zinc">
{tag}
</Tag>
)}
</Link>
);
}
function VisibleSectionHighlight({
group,
pathname,
}: {
group: NavGroup;
pathname: string;
}) {
const [sections, visibleSections] = useInitialValue(
[
useSectionStore((s) => s.sections),
useSectionStore((s) => s.visibleSections),
],
useIsInsideMobileNavigation(),
);
const isPresent = useIsPresent();
const firstVisibleSectionIndex = Math.max(
0,
[{ id: "_top" }, ...sections].findIndex(
(section) => section.id === visibleSections[0],
),
);
const itemHeight = remToPx(2);
const height = isPresent
? Math.max(1, visibleSections.length) * itemHeight
: itemHeight;
const top =
group.links.findIndex((link) => link.href === pathname) * itemHeight +
firstVisibleSectionIndex * itemHeight;
return (
<motion.div
layout={true}
initial={{ opacity: 0 }}
animate={{ opacity: 1, transition: { delay: 0.2 } }}
exit={{ opacity: 0 }}
className="absolute inset-x-0 top-0 bg-zinc-800/2.5 will-change-transform dark:bg-white/2.5"
style={{ borderRadius: 8, height, top }}
/>
);
}
function ActivePageMarker({
group,
pathname,
}: {
group: NavGroup;
pathname: string;
}) {
const itemHeight = remToPx(2);
const offset = remToPx(0.25);
const activePageIndex = group.links.findIndex(
(link) => link.href === pathname,
);
const top = offset + activePageIndex * itemHeight;
return (
<motion.div
layout={true}
className="absolute left-2 h-6 w-px bg-brand-500"
initial={{ opacity: 0 }}
animate={{ opacity: 1, transition: { delay: 0.2 } }}
exit={{ opacity: 0 }}
style={{ top }}
/>
);
}
function NavigationGroup({
group,
className,
}: {
group: NavGroup;
className?: string;
}) {
// If this is the mobile navigation then we always render the initial
// state, so that the state does not change during the close animation.
// The state will still update when we re-open (re-render) the navigation.
const isInsideMobileNavigation = useIsInsideMobileNavigation();
const [pathname, sections] = useInitialValue(
[usePathname(), useSectionStore((s) => s.sections)],
isInsideMobileNavigation,
);
const isActiveGroup =
group.links.findIndex((link) => link.href === pathname) !== -1;
return (
<li className={clsx("relative mt-6", className)}>
<motion.h2
layout="position"
className="text-sm font-semibold text-zinc-900 dark:text-white"
>
{group.title}
</motion.h2>
<div className="relative mt-3 pl-2">
<AnimatePresence initial={!isInsideMobileNavigation}>
{isActiveGroup && (
<VisibleSectionHighlight
group={group}
pathname={pathname}
/>
)}
</AnimatePresence>
<motion.div
layout={true}
className="absolute inset-y-0 left-2 w-px bg-zinc-900/10 dark:bg-white/5"
/>
<AnimatePresence initial={false}>
{isActiveGroup && (
<ActivePageMarker group={group} pathname={pathname} />
)}
</AnimatePresence>
<ul className="border-l border-transparent">
{group.links.map((link) => (
<motion.li
key={link.href}
layout="position"
className="relative"
>
<NavLink
href={link.href}
active={link.href === pathname}
>
{link.title}
</NavLink>
<AnimatePresence mode="popLayout" initial={false}>
{link.href === pathname &&
sections.length > 0 && (
<motion.ul
role="list"
initial={{ opacity: 0 }}
animate={{
opacity: 1,
transition: { delay: 0.1 },
}}
exit={{
opacity: 0,
transition: { duration: 0.15 },
}}
>
{sections.map((section) => (
<li key={section.id}>
<NavLink
href={`${link.href}#${section.id}`}
tag={section.tag}
isAnchorLink={true}
>
{section.title}
</NavLink>
</li>
))}
</motion.ul>
)}
</AnimatePresence>
</motion.li>
))}
</ul>
</div>
</li>
);
}
export const navigation: NavGroup[] = [
{
title: "Guides",
links: [
{ title: "Introduction", href: "/introduction" },
{ title: "SDKs", href: "/sdks" },
{ title: "Entities", href: "/entities" },
{ title: "Signatures", href: "/signatures" },
{ title: "Federation", href: "/federation" },
{ title: "Extensions", href: "/extensions" },
],
},
{
title: "Federation",
links: [
{ title: "HTTP", href: "/federation/http" },
{ title: "Validation", href: "/federation/validation" },
{ title: "Discovery", href: "/federation/discovery" },
{ title: "Delegation", href: "/federation/delegation" },
],
},
{
title: "Structures",
links: [
{ title: "ContentFormat", href: "/structures/content-format" },
{ title: "Collection", href: "/structures/collection" },
{ title: "Custom Emoji", href: "/structures/emoji" },
],
},
{
title: "Entities",
links: [
{ title: "Delete", href: "/entities/delete" },
{ title: "Follow", href: "/entities/follow" },
{ title: "FollowAccept", href: "/entities/follow-accept" },
{ title: "FollowReject", href: "/entities/follow-reject" },
{ title: "Group", href: "/entities/group" },
{ title: "Notes", href: "/entities/note" },
{ title: "InstanceMetadata", href: "/entities/instance-metadata" },
{ title: "Unfollow", href: "/entities/unfollow" },
{ title: "Users", href: "/entities/user" },
],
},
{
title: "Extensions",
links: [
{ title: "Custom Emojis", href: "/extensions/custom-emojis" },
{ title: "Likes", href: "/extensions/likes" },
{ title: "Migration", href: "/extensions/migration" },
{ title: "Polls", href: "/extensions/polls" },
{ title: "Reactions", href: "/extensions/reactions" },
{ title: "Reports", href: "/extensions/reports" },
{ title: "Share", href: "/extensions/share" },
{ title: "Vanity", href: "/extensions/vanity" },
{ title: "WebSockets", href: "/extensions/websockets" },
],
},
];
export function Navigation(props: ComponentPropsWithoutRef<"nav">) {
return (
<nav {...props} aria-label="Side navigation">
<ul>
<TopLevelNavItem href="/">API</TopLevelNavItem>
{navigation.map((group, groupIndex) => (
<NavigationGroup
key={group.title}
group={group}
className={groupIndex === 0 ? "md:mt-0" : ""}
/>
))}
<li className="sticky bottom-0 z-10 mt-6 min-[416px]:hidden">
<Button
href="/changelog"
variant="filled"
className="w-full"
>
Working Draft 4
</Button>
</li>
</ul>
</nav>
);
}

25
components/Prose.tsx Normal file
View file

@ -0,0 +1,25 @@
import clsx from "clsx";
import type { ComponentPropsWithoutRef, ElementType } from "react";
export function Prose<T extends ElementType = "div">({
as,
className,
...props
}: Omit<ComponentPropsWithoutRef<T>, "as" | "className"> & {
as?: T;
className?: string;
}) {
const Component = as ?? "div";
return (
<Component
className={clsx(
className,
"prose dark:prose-invert",
// `html :where(& > *)` is used to select all direct children without an increase in specificity like you'd get from just `& > *`
"[html_:where(&>*)]:mx-auto [html_:where(&>*)]:max-w-2xl [html_:where(&>*)]:lg:mx-[calc(50%-min(50%,theme(maxWidth.lg)))] [html_:where(&>*)]:lg:max-w-3xl",
)}
{...props}
/>
);
}

177
components/Resources.tsx Normal file
View file

@ -0,0 +1,177 @@
"use client";
import {
type MotionValue,
motion,
useMotionTemplate,
useMotionValue,
} from "framer-motion";
import Link from "next/link";
import { Icon } from "@iconify-icon/react";
import type { ComponentPropsWithoutRef, MouseEvent } from "react";
import { GridPattern } from "./GridPattern";
import { Heading } from "./Heading";
export interface ResourceType {
href?: string;
name: string;
description: string;
icon: string;
pattern?: Omit<
ComponentPropsWithoutRef<typeof GridPattern>,
"width" | "height" | "x"
>;
}
const resources: ResourceType[] = [
{
href: "/entities",
name: "Entities",
description:
"Learn how Entities work and how to use them to transmit federated data.",
icon: "tabler:code-asterisk",
pattern: {
y: 16,
squares: [
[0, 1],
[1, 3],
],
},
},
{
href: "/federation",
name: "Federation",
description:
"Learn how to federate data across the Versia federation network.",
icon: "tabler:building-bank",
pattern: {
y: -6,
squares: [
[-1, 2],
[1, 3],
],
},
},
];
function ResourceIcon({ icon }: { icon: string }) {
return (
<div className="flex h-7 w-7 items-center justify-center rounded-md bg-zinc-900/5 ring-1 ring-zinc-900/25 backdrop-blur-[2px] transition duration-300 group-hover:bg-white/50 group-hover:ring-zinc-900/25 dark:bg-white/7.5 dark:ring-white/15 dark:group-hover:bg-brand-300/10 dark:group-hover:ring-brand-400">
<Icon
icon={icon}
width="unset"
className="h-5 w-5 fill-zinc-700/10 stroke-zinc-700 transition-colors duration-300 group-hover:stroke-zinc-900 dark:fill-white/10 dark:stroke-zinc-400 dark:group-hover:fill-brand-300/10 dark:group-hover:stroke-brand-400"
/>
</div>
);
}
function ResourcePattern({
mouseX,
mouseY,
...gridProps
}: ResourceType["pattern"] & {
mouseX: MotionValue<number>;
mouseY: MotionValue<number>;
}) {
const maskImage = useMotionTemplate`radial-gradient(180px at ${mouseX}px ${mouseY}px, white, transparent)`;
const style = { maskImage, WebkitMaskImage: maskImage };
return (
<div className="pointer-events-none">
<div className="absolute inset-0 rounded-md transition duration-300 [mask-image:linear-gradient(white,transparent)] group-hover:opacity-50">
<GridPattern
width={72}
height={56}
x="50%"
className="absolute inset-x-0 inset-y-[-30%] h-[160%] w-full skew-y-[-18deg] fill-black/[0.02] stroke-black/5 dark:fill-white/1 dark:stroke-white/2.5"
{...gridProps}
/>
</div>
<motion.div
className="absolute inset-0 rounded-md bg-gradient-to-r from-brand-100 to-brand-50 opacity-0 transition duration-300 group-hover:opacity-100 dark:from-brand-900/30 dark:to-brand-950/30"
style={style}
/>
<motion.div
className="absolute inset-0 rounded-md opacity-0 mix-blend-overlay transition duration-300 group-hover:opacity-100"
style={style}
>
<GridPattern
width={72}
height={56}
x="50%"
className="absolute inset-x-0 inset-y-[-30%] h-[160%] w-full skew-y-[-18deg] fill-black/50 stroke-black/70 dark:fill-white/2.5 dark:stroke-white/10"
{...gridProps}
/>
</motion.div>
</div>
);
}
export function Resource({ resource }: { resource: ResourceType }) {
const mouseX = useMotionValue(0);
const mouseY = useMotionValue(0);
function onMouseMove({
currentTarget,
clientX,
clientY,
}: MouseEvent<HTMLDivElement>) {
const { left, top } = currentTarget.getBoundingClientRect();
mouseX.set(clientX - left);
mouseY.set(clientY - top);
}
return (
<div
key={resource.href}
onMouseMove={onMouseMove}
className="group relative flex rounded-md bg-zinc-50 transition-shadow hover:shadow-md hover:shadow-zinc-900/5 dark:bg-white/2.5 dark:hover:shadow-black/5"
>
<ResourcePattern
{...(resource.pattern ?? {
y: 0,
squares: [
[0, 1],
[1, 2],
],
})}
mouseX={mouseX}
mouseY={mouseY}
/>
<div className="absolute inset-0 rounded-md ring-1 ring-inset ring-zinc-900/7.5 group-hover:ring-zinc-900/10 dark:ring-white/10 dark:group-hover:ring-white/20" />
<div className="relative rounded-md px-4 pb-4 pt-16">
<ResourceIcon icon={resource.icon} />
<h3 className="mt-4 text-sm font-semibold leading-7 text-zinc-900 dark:text-white">
{resource.href ? (
<Link href={resource.href}>
<span className="absolute inset-0 rounded-md" />
{resource.name}
</Link>
) : (
resource.name
)}
</h3>
<p className="mt-1 text-sm text-zinc-600 dark:text-zinc-400">
{resource.description}
</p>
</div>
</div>
);
}
export function Resources() {
return (
<div className="my-16 xl:max-w-none">
<Heading level={2} id="resources">
Resources
</Heading>
<div className="not-prose mt-4 grid grid-cols-1 gap-8 border-t border-zinc-900/5 pt-10 sm:grid-cols-2 xl:grid-cols-4 dark:border-white/5">
{resources.map((resource) => (
<Resource key={resource.href} resource={resource} />
))}
</div>
</div>
);
}

530
components/Search.tsx Normal file
View file

@ -0,0 +1,530 @@
"use client";
import {
type AutocompleteApi,
type AutocompleteCollection,
type AutocompleteState,
createAutocomplete,
} from "@algolia/autocomplete-core";
import {
Dialog,
DialogPanel,
DialogTitle,
Transition,
TransitionChild,
} from "@headlessui/react";
import clsx from "clsx";
import { useRouter } from "next/navigation";
import {
type ComponentPropsWithoutRef,
type ElementRef,
Fragment,
type MouseEvent,
type KeyboardEvent as ReactKeyboardEvent,
Suspense,
type SyntheticEvent,
forwardRef,
useCallback,
useEffect,
useId,
useRef,
useState,
} from "react";
import Highlighter from "react-highlight-words";
import type { Result } from "@/mdx/search.mjs";
import { navigation } from "./Navigation";
type EmptyObject = Record<string, never>;
type Autocomplete = AutocompleteApi<
Result,
SyntheticEvent,
MouseEvent,
ReactKeyboardEvent
>;
function useAutocomplete({ close }: { close: () => void }) {
const id = useId();
const router = useRouter();
const [autocompleteState, setAutocompleteState] = useState<
AutocompleteState<Result> | EmptyObject
>({});
function navigate({ itemUrl }: { itemUrl?: string }) {
if (!itemUrl) {
return;
}
router.push(itemUrl);
if (
itemUrl ===
window.location.pathname +
window.location.search +
window.location.hash
) {
close();
}
}
const [autocomplete] = useState<Autocomplete>(() =>
createAutocomplete<
Result,
SyntheticEvent,
MouseEvent,
ReactKeyboardEvent
>({
id,
placeholder: "Find something...",
defaultActiveItemId: 0,
onStateChange({ state }) {
setAutocompleteState(state);
},
shouldPanelOpen({ state }) {
return state.query !== "";
},
navigator: {
navigate,
},
getSources({ query }) {
return import("@/mdx/search.mjs").then(({ search }) => {
return [
{
sourceId: "documentation",
getItems() {
return search(query, { limit: 5 });
},
getItemUrl({ item }) {
return item.url;
},
onSelect: navigate,
},
];
});
},
}),
);
return { autocomplete, autocompleteState };
}
function SearchIcon(props: ComponentPropsWithoutRef<"svg">) {
return (
<svg viewBox="0 0 20 20" fill="none" aria-hidden="true" {...props}>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M12.01 12a4.25 4.25 0 1 0-6.02-6 4.25 4.25 0 0 0 6.02 6Zm0 0 3.24 3.25"
/>
</svg>
);
}
function NoResultsIcon(props: ComponentPropsWithoutRef<"svg">) {
return (
<svg viewBox="0 0 20 20" fill="none" aria-hidden="true" {...props}>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M12.01 12a4.237 4.237 0 0 0 1.24-3c0-.62-.132-1.207-.37-1.738M12.01 12A4.237 4.237 0 0 1 9 13.25c-.635 0-1.237-.14-1.777-.388M12.01 12l3.24 3.25m-3.715-9.661a4.25 4.25 0 0 0-5.975 5.908M4.5 15.5l11-11"
/>
</svg>
);
}
function LoadingIcon(props: ComponentPropsWithoutRef<"svg">) {
const id = useId();
return (
<svg viewBox="0 0 20 20" fill="none" aria-hidden="true" {...props}>
<circle cx="10" cy="10" r="5.5" strokeLinejoin="round" />
<path
stroke={`url(#${id})`}
strokeLinecap="round"
strokeLinejoin="round"
d="M15.5 10a5.5 5.5 0 1 0-5.5 5.5"
/>
<defs>
<linearGradient
id={id}
x1="13"
x2="9.5"
y1="9"
y2="15"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="currentColor" />
<stop offset="1" stopColor="currentColor" stopOpacity="0" />
</linearGradient>
</defs>
</svg>
);
}
function HighlightQuery({ text, query }: { text: string; query: string }) {
return (
<Highlighter
highlightClassName="underline bg-transparent text-brand-500"
searchWords={[query]}
autoEscape={true}
textToHighlight={text}
/>
);
}
function SearchResult({
result,
resultIndex,
autocomplete,
collection,
query,
}: {
result: Result;
resultIndex: number;
autocomplete: Autocomplete;
collection: AutocompleteCollection<Result>;
query: string;
}) {
const id = useId();
const sectionTitle = navigation.find((section) =>
section.links.find((link) => link.href === result.url.split("#")[0]),
)?.title;
const hierarchy = [sectionTitle, result.pageTitle].filter(
(x): x is string => typeof x === "string",
);
return (
<li
className={clsx(
"group block cursor-default px-4 py-3 aria-selected:bg-zinc-50 dark:aria-selected:bg-zinc-800/50",
resultIndex > 0 &&
"border-t border-zinc-100 dark:border-zinc-800",
)}
aria-labelledby={`${id}-hierarchy ${id}-title`}
{...autocomplete.getItemProps({
item: result,
source: collection.source,
})}
>
<div
id={`${id}-title`}
aria-hidden="true"
className="text-sm font-medium text-zinc-900 group-aria-selected:text-brand-500 dark:text-white"
>
<HighlightQuery text={result.title} query={query} />
</div>
{hierarchy.length > 0 && (
<div
id={`${id}-hierarchy`}
aria-hidden="true"
className="mt-1 truncate whitespace-nowrap text-2xs text-zinc-500"
>
{hierarchy.map((item, itemIndex, items) => (
<Fragment key={item}>
<HighlightQuery text={item} query={query} />
<span
className={
itemIndex === items.length - 1
? "sr-only"
: "mx-2 text-zinc-300 dark:text-zinc-700"
}
>
/
</span>
</Fragment>
))}
</div>
)}
</li>
);
}
function SearchResults({
autocomplete,
query,
collection,
}: {
autocomplete: Autocomplete;
query: string;
collection: AutocompleteCollection<Result>;
}) {
if (collection.items.length === 0) {
return (
<div className="p-6 text-center">
<NoResultsIcon className="mx-auto h-5 w-5 stroke-zinc-900 dark:stroke-zinc-600" />
<p className="mt-2 text-xs text-zinc-700 dark:text-zinc-400">
Nothing found for{" "}
<strong className="break-words font-semibold text-zinc-900 dark:text-white">
&lsquo;{query}&rsquo;
</strong>
. Please try again.
</p>
</div>
);
}
return (
<ul {...autocomplete.getListProps()}>
{collection.items.map((result, resultIndex) => (
<SearchResult
key={result.url}
result={result}
resultIndex={resultIndex}
autocomplete={autocomplete}
collection={collection}
query={query}
/>
))}
</ul>
);
}
const SearchInput = forwardRef<
ElementRef<"input">,
{
autocomplete: Autocomplete;
autocompleteState: AutocompleteState<Result> | EmptyObject;
onClose: () => void;
}
>(function SearchInput({ autocomplete, autocompleteState, onClose }, inputRef) {
const inputProps = autocomplete.getInputProps({ inputElement: null });
return (
<div className="group relative flex h-12">
<SearchIcon className="pointer-events-none absolute left-3 top-0 h-full w-5 stroke-zinc-500" />
<input
ref={inputRef}
data-autofocus={true}
className={clsx(
"flex-auto appearance-none bg-transparent pl-10 text-zinc-900 outline-none placeholder:text-zinc-500 focus:w-full focus:flex-none sm:text-sm dark:text-white [&::-webkit-search-cancel-button]:hidden [&::-webkit-search-decoration]:hidden [&::-webkit-search-results-button]:hidden [&::-webkit-search-results-decoration]:hidden",
autocompleteState.status === "stalled" ? "pr-11" : "pr-4",
)}
{...inputProps}
onInput={(event) => {
if (
event.currentTarget.value
.toLowerCase()
.includes("barrel roll")
) {
event.currentTarget.value = "";
document.body.classList.add("animate-roll");
setTimeout(
() =>
document.body.classList.remove("animate-roll"),
2000,
);
}
}}
onKeyDown={(event) => {
if (
event.key === "Escape" &&
!autocompleteState.isOpen &&
autocompleteState.query === ""
) {
// In Safari, closing the dialog with the escape key can sometimes cause the scroll position to jump to the
// bottom of the page. This is a workaround for that until we can figure out a proper fix in Headless UI.
if (document.activeElement instanceof HTMLElement) {
document.activeElement.blur();
}
onClose();
} else {
inputProps.onKeyDown(event);
}
}}
/>
{autocompleteState.status === "stalled" && (
<div className="absolute inset-y-0 right-3 flex items-center">
<LoadingIcon className="h-5 w-5 animate-spin stroke-zinc-200 text-zinc-900 dark:stroke-zinc-800 dark:text-brand-400" />
</div>
)}
</div>
);
});
function SearchDialog({
open,
setOpen,
className,
}: {
open: boolean;
setOpen: (open: boolean) => void;
className?: string;
}) {
const formRef = useRef<ElementRef<"form">>(null);
const panelRef = useRef<ElementRef<"div">>(null);
const inputRef = useRef<ElementRef<typeof SearchInput>>(null);
const { autocomplete, autocompleteState } = useAutocomplete({
close() {
setOpen(false);
},
});
useEffect(() => {
setOpen(false);
}, [setOpen]);
useEffect(() => {
if (open) {
return;
}
function onKeyDown(event: KeyboardEvent) {
if (event.key === "k" && (event.metaKey || event.ctrlKey)) {
event.preventDefault();
setOpen(true);
}
}
window.addEventListener("keydown", onKeyDown);
return () => {
window.removeEventListener("keydown", onKeyDown);
};
}, [open, setOpen]);
return (
<Transition show={open} afterLeave={() => autocomplete.setQuery("")}>
<Dialog
onClose={setOpen}
className={clsx("fixed inset-0 z-50", className)}
>
<TransitionChild
enter="ease-out duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="fixed inset-0 bg-zinc-400/25 backdrop-blur-sm dark:bg-black/40" />
</TransitionChild>
<div className="fixed inset-0 overflow-y-auto px-4 py-4 sm:px-6 sm:py-20 md:py-32 lg:px-8 lg:py-[15vh]">
<TransitionChild
enter="ease-out duration-300"
enterFrom="opacity-0 scale-95"
enterTo="opacity-100 scale-100"
leave="ease-in duration-200"
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95"
>
<DialogPanel className="mx-auto transform-gpu overflow-hidden rounded-lg bg-zinc-50 shadow-xl ring-1 ring-zinc-900/7.5 sm:max-w-xl dark:bg-zinc-900 dark:ring-zinc-800">
<div {...autocomplete.getRootProps({})}>
<DialogTitle className="sr-only">
Search
</DialogTitle>
<form
ref={formRef}
{...autocomplete.getFormProps({
inputElement: inputRef.current,
})}
>
<SearchInput
ref={inputRef}
autocomplete={autocomplete}
autocompleteState={autocompleteState}
onClose={() => setOpen(false)}
/>
<div
ref={panelRef}
className="border-t border-zinc-200 bg-white empty:hidden dark:border-zinc-100/5 dark:bg-white/2.5"
{...autocomplete.getPanelProps({})}
>
{autocompleteState.isOpen && (
<SearchResults
autocomplete={autocomplete}
query={autocompleteState.query}
collection={
autocompleteState
.collections[0]
}
/>
)}
</div>
</form>
</div>
</DialogPanel>
</TransitionChild>
</div>
</Dialog>
</Transition>
);
}
function useSearchProps() {
const buttonRef = useRef<ElementRef<"button">>(null);
const [open, setOpen] = useState(false);
return {
buttonProps: {
ref: buttonRef,
onClick() {
setOpen(true);
},
},
dialogProps: {
open,
setOpen: useCallback((open: boolean) => {
const { width = 0, height = 0 } =
buttonRef.current?.getBoundingClientRect() ?? {};
if (!open || (width !== 0 && height !== 0)) {
setOpen(open);
}
}, []),
},
};
}
export function Search() {
const [modifierKey, setModifierKey] = useState<string>();
const { buttonProps, dialogProps } = useSearchProps();
useEffect(() => {
setModifierKey(
/(Mac|iPhone|iPod|iPad)/i.test(navigator.platform) ? "⌘" : "Ctrl ",
);
}, []);
return (
<div className="hidden lg:block lg:max-w-md lg:flex-auto">
<button
type="button"
className="hidden h-8 w-full items-center gap-2 rounded-md bg-white pl-2 pr-3 text-sm text-zinc-500 ring-1 ring-zinc-900/10 transition hover:ring-zinc-900/20 ui-not-focus-visible:outline-none lg:flex dark:bg-white/5 dark:text-zinc-400 dark:ring-inset dark:ring-white/10 dark:hover:ring-white/20"
{...buttonProps}
>
<SearchIcon className="h-5 w-5 stroke-current" />
Find something...
<kbd className="ml-auto text-2xs text-zinc-400 dark:text-zinc-500">
<kbd className="font-sans">{modifierKey}</kbd>
<kbd className="font-sans">K</kbd>
</kbd>
</button>
<Suspense fallback={null}>
<SearchDialog className="hidden lg:block" {...dialogProps} />
</Suspense>
</div>
);
}
export function MobileSearch() {
const { buttonProps, dialogProps } = useSearchProps();
return (
<div className="contents lg:hidden">
<button
type="button"
className="flex h-6 w-6 items-center justify-center rounded-md transition hover:bg-zinc-900/5 ui-not-focus-visible:outline-none lg:hidden dark:hover:bg-white/5"
aria-label="Find something..."
{...buttonProps}
>
<SearchIcon className="h-5 w-5 stroke-zinc-900 dark:stroke-white" />
</button>
<Suspense fallback={null}>
<SearchDialog className="lg:hidden" {...dialogProps} />
</Suspense>
</div>
);
}

165
components/SectionProvider.tsx Normal file
View file

@ -0,0 +1,165 @@
"use client";
import {
type ReactNode,
type RefObject,
createContext,
useContext,
useEffect,
useLayoutEffect,
useState,
} from "react";
import { type StoreApi, createStore, useStore } from "zustand";
import { remToPx } from "../lib/remToPx";
export interface Section {
id: string;
title: string;
offsetRem?: number;
tag?: string;
headingRef?: RefObject<HTMLHeadingElement>;
}
interface SectionState {
sections: Section[];
visibleSections: string[];
setVisibleSections: (visibleSections: string[]) => void;
registerHeading: ({
id,
ref,
offsetRem,
}: {
id: string;
ref: RefObject<HTMLHeadingElement>;
offsetRem: number;
}) => void;
}
function createSectionStore(sections: Section[]) {
return createStore<SectionState>()((set) => ({
sections,
visibleSections: [],
setVisibleSections: (visibleSections) =>
set((state) =>
state.visibleSections.join() === visibleSections.join()
? {}
: { visibleSections },
),
registerHeading: ({ id, ref, offsetRem }) =>
set((state) => {
return {
sections: state.sections.map((section) => {
if (section.id === id) {
return {
...section,
headingRef: ref,
offsetRem,
};
}
return section;
}),
};
}),
}));
}
function useVisibleSections(sectionStore: StoreApi<SectionState>) {
const setVisibleSections = useStore(
sectionStore,
(s) => s.setVisibleSections,
);
const sections = useStore(sectionStore, (s) => s.sections);
useEffect(() => {
function checkVisibleSections() {
const { innerHeight, scrollY } = window;
const newVisibleSections: string[] = [];
for (
let sectionIndex = 0;
sectionIndex < sections.length;
sectionIndex++
) {
const {
id,
headingRef,
offsetRem = 0,
} = sections[sectionIndex];
if (!headingRef?.current) {
continue;
}
const offset = remToPx(offsetRem);
const top =
headingRef.current.getBoundingClientRect().top + scrollY;
if (sectionIndex === 0 && top - offset > scrollY) {
newVisibleSections.push("_top");
}
const nextSection = sections[sectionIndex + 1];
const bottom =
(nextSection?.headingRef?.current?.getBoundingClientRect()
.top ?? Number.POSITIVE_INFINITY) +
scrollY -
remToPx(nextSection?.offsetRem ?? 0);
if (
(top > scrollY && top < scrollY + innerHeight) ||
(bottom > scrollY && bottom < scrollY + innerHeight) ||
(top <= scrollY && bottom >= scrollY + innerHeight)
) {
newVisibleSections.push(id);
}
}
setVisibleSections(newVisibleSections);
}
const raf = window.requestAnimationFrame(() => checkVisibleSections());
window.addEventListener("scroll", checkVisibleSections, {
passive: true,
});
window.addEventListener("resize", checkVisibleSections);
return () => {
window.cancelAnimationFrame(raf);
window.removeEventListener("scroll", checkVisibleSections);
window.removeEventListener("resize", checkVisibleSections);
};
}, [setVisibleSections, sections]);
}
const SectionStoreContext = createContext<StoreApi<SectionState> | null>(null);
const useIsomorphicLayoutEffect =
typeof window === "undefined" ? useEffect : useLayoutEffect;
export function SectionProvider({
sections,
children,
}: {
sections: Section[];
children: ReactNode;
}) {
const [sectionStore] = useState(() => createSectionStore(sections));
useVisibleSections(sectionStore);
useIsomorphicLayoutEffect(() => {
sectionStore.setState({ sections });
}, [sectionStore, sections]);
return (
<SectionStoreContext.Provider value={sectionStore}>
{children}
</SectionStoreContext.Provider>
);
}
export function useSectionStore<T>(selector: (state: SectionState) => T) {
const store = useContext(SectionStoreContext);
return useStore(store as NonNullable<typeof store>, selector);
}

58
components/Tag.tsx Normal file
View file

@ -0,0 +1,58 @@
import clsx from "clsx";
const variantStyles = {
small: "",
medium: "rounded-lg px-1.5 ring-1 ring-inset",
};
const colorStyles = {
brand: {
small: "text-brand-500 dark:text-brand-400",
medium: "ring-brand-300 dark:ring-brand-400/30 bg-brand-400/10 text-brand-500 dark:text-brand-400",
},
sky: {
small: "text-sky-500",
medium: "ring-sky-300 bg-sky-400/10 text-sky-500 dark:ring-sky-400/30 dark:bg-sky-400/10 dark:text-sky-400",
},
amber: {
small: "text-amber-500",
medium: "ring-amber-300 bg-amber-400/10 text-amber-500 dark:ring-amber-400/30 dark:bg-amber-400/10 dark:text-amber-400",
},
rose: {
small: "text-red-500 dark:text-rose-500",
medium: "ring-rose-200 bg-rose-50 text-red-500 dark:ring-rose-500/20 dark:bg-rose-400/10 dark:text-rose-400",
},
zinc: {
small: "text-zinc-400 dark:text-zinc-500",
medium: "ring-zinc-200 bg-zinc-50 text-zinc-500 dark:ring-zinc-500/20 dark:bg-zinc-400/10 dark:text-zinc-400",
},
};
const valueColorMap = {
GET: "brand",
POST: "sky",
PUT: "amber",
DELETE: "rose",
} as Record<string, keyof typeof colorStyles>;
export function Tag({
children,
variant = "medium",
color = valueColorMap[children] ?? "brand",
}: {
children: keyof typeof valueColorMap;
variant?: keyof typeof variantStyles;
color?: keyof typeof colorStyles;
}) {
return (
<span
className={clsx(
"font-mono text-[0.625rem] font-semibold leading-6",
variantStyles[variant],
colorStyles[color][variant],
)}
>
{children}
</span>
);
}

56
components/Team.tsx Normal file
View file

@ -0,0 +1,56 @@
import { Icon } from "@iconify-icon/react/dist/iconify.mjs";
import type { FC } from "react";
export const TeamMember: FC<{
name: string;
bio?: string;
username?: string;
avatarUrl: string;
socials?: {
name: string;
url: string;
icon: string;
}[];
}> = ({ name, bio, socials, avatarUrl, username }) => {
return (
<div className="bg-stone-950 rounded-lg overflow-hidden pb-4 h-full ring-1 ring-black/10 dark:ring-white/10 flex flex-col">
<div className="bg-pink-100 py-8" />
<div className="px-4 -mt-6 flex items-center gap-2">
<div className="border-8 border-stone-950 relative bg-white rounded-full ">
<img
className="rounded-full size-20"
src={avatarUrl}
alt={`${name}'s avatar`}
/>
<div className="absolute bg-green-600 bottom-0 right-0 p-2 rounded-full border-[6px] border-gray-900" />
</div>
<div className="font-bold text-xl flex flex-col mt-4">
<h1 className="text-white">{name}</h1>
<span className="text-gray-400">@{username}</span>
</div>
</div>
<div className="px-6 mt-4 text-gray-300">{bio}</div>
<ul className="pt-6 mt-auto flex gap-5 list-none px-6 flex-wrap">
{socials?.map((social) => (
<li className="!m-0" key={social.name}>
<a
href={social.url}
target="_blank"
rel="noreferrer noopener"
>
<Icon
icon={social.icon}
className="size-5 text-gray-300"
width="unset"
/>
</a>
</li>
))}
</ul>
</div>
);
};

112
components/Team.vue
View file

@ -1,112 +0,0 @@
<template>
<div class="mt-20">
<div class="max-w-3xl">
<h1>Thank you!</h1>
<p>
The Lysand project is made possible by the hard work of our contributors. Here are some of the people
who
have helped make Lysand what it is today.
</p>
</div>
<ul role="list"
class="!mt-10 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 sm:grid-cols-2 lg:max-w-none lg:grid-cols-3 !list-none !pl-0">
<li v-for="person in people" :key="person.name"
class="bg-[var(--vp-c-bg-soft)] shadow rounded duration-200 !m-0 hover:ring-2 hover:scale-[101%] ring-[var(--vp-color-primary)] p-4">
<img class="aspect-[3/2] w-full rounded object-cover ring-1 ring-white/5" :src="person.imageUrl"
:alt="`${person.name}'s avatar'`" />
<h3 class="mt-6">{{ person.name }}</h3>
<p class="!mt-3">
<span v-for="role in person.roles"
class="text-sm mr-2 last:mr-0 rounded bg-pink-700 text-pink-100 px-2 py-1">{{
role }}</span>
</p>
<ul role="list" class="!mt-6 !flex !gap-6 !list-none !pl-0 flex-wrap">
<li v-for="social in person.socials" :key="social.name" class="!m-0">
<a :href="social.url" class="text-[var(--vp-color-primary)]" target="_blank" rel="noreferrer">
<iconify-icon :icon="social.icon" class="text-2xl" />
</a>
</li>
</ul>
</li>
</ul>
</div>
</template>
<script setup>
const people = [
{
name: "CPlusPatch",
roles: ["Lead Developer", "UI Designer"],
imageUrl: "https://avatars.githubusercontent.com/u/42910258?v=4",
socials: [
{
name: "Website",
icon: "bx:link",
url: "https://cpluspatch.com",
},
{
name: "GitHub",
icon: "bxl:github",
url: "https://github.com/cpluspatch",
},
{
name: "Fediverse",
icon: "bxl:mastodon",
url: "https://mk.cpluspatch.com/@jessew",
},
{
name: "Lysand",
icon: "bx:server",
url: "https://social.lysand.org/@jessew",
},
{
name: "Matrix",
icon: "simple-icons:matrix",
url: "https://matrix.to/#/@jesse:cpluspatch.dev",
},
{
name: "Signal",
icon: "simple-icons:signal",
url: "https://signal.me/#eu/mdX6iV0ayndNmJst43sNtlw3eFXgHSm7if4Y/mwYT1+qFDzl1PFAeroW+RpHGaRu",
},
{
name: "Email",
icon: "bx:bxs-envelope",
url: "mailto:contact@cpluspatch.com",
},
],
},
{
name: "April",
roles: ["ActivityPub Bridge Developer"],
imageUrl: "https://avatars.githubusercontent.com/u/30842467?v=4",
socials: [
{
name: "GitHub",
icon: "bxl:github",
url: "https://github.com/cutestnekoaqua",
},
{
name: "Fediverse",
icon: "bxl:mastodon",
url: "https://donotsta.re/april",
},
{
name: "Lysand",
icon: "bx:server",
url: "https://social.lysand.org/@aprl",
},
{
name: "Matrix",
icon: "simple-icons:matrix",
url: "https://matrix.to/#/@aprl:uwu.is",
},
{
name: "Email",
icon: "bx:bxs-envelope",
url: "mailto:aprl@acab.dev",
},
],
},
];
</script>

46
components/ThemeToggle.tsx Normal file
View file

@ -0,0 +1,46 @@
import { useTheme } from "next-themes";
import { type ComponentPropsWithoutRef, useEffect, useState } from "react";
function SunIcon(props: ComponentPropsWithoutRef<"svg">) {
return (
<svg viewBox="0 0 20 20" fill="none" aria-hidden="true" {...props}>
<path d="M12.5 10a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0Z" />
<path
strokeLinecap="round"
d="M10 5.5v-1M13.182 6.818l.707-.707M14.5 10h1M13.182 13.182l.707.707M10 15.5v-1M6.11 13.889l.708-.707M4.5 10h1M6.11 6.111l.708.707"
/>
</svg>
);
}
function MoonIcon(props: ComponentPropsWithoutRef<"svg">) {
return (
<svg viewBox="0 0 20 20" fill="none" aria-hidden="true" {...props}>
<path d="M15.224 11.724a5.5 5.5 0 0 1-6.949-6.949 5.5 5.5 0 1 0 6.949 6.949Z" />
</svg>
);
}
export function ThemeToggle() {
const { resolvedTheme, setTheme } = useTheme();
const otherTheme = resolvedTheme === "dark" ? "light" : "dark";
const [mounted, setMounted] = useState(false);
useEffect(() => {
setMounted(true);
}, []);
return (
<button
type="button"
className="flex h-6 w-6 items-center justify-center rounded-md transition hover:bg-zinc-900/5 dark:hover:bg-white/5"
aria-label={
mounted ? `Switch to ${otherTheme} theme` : "Toggle theme"
}
onClick={() => setTheme(otherTheme)}
>
<SunIcon className="h-5 w-5 stroke-zinc-900 dark:hidden" />
<MoonIcon className="hidden h-5 w-5 stroke-white dark:block" />
</button>
);
}

19
components/icons/BellIcon.tsx Normal file
View file

@ -0,0 +1,19 @@
import type { ComponentPropsWithoutRef } from "react";
export function BellIcon(props: ComponentPropsWithoutRef<"svg">) {
return (
<svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M4.438 8.063a5.563 5.563 0 0 1 11.125 0v2.626c0 1.182.34 2.34.982 3.332L17.5 15.5h-15l.955-1.479c.641-.993.982-2.15.982-3.332V8.062Z"
/>
<path
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
d="M7.5 15.5v0a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v0"
/>
</svg>
);
}

13
components/icons/BoltIcon.tsx Normal file
View file

@ -0,0 +1,13 @@
import type { ComponentPropsWithoutRef } from "react";
export function BoltIcon(props: ComponentPropsWithoutRef<"svg">) {
return (
<svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M4.5 11.5 10 2v5.5a1 1 0 0 0 1 1h4.5L10 18v-5.5a1 1 0 0 0-1-1H4.5Z"
/>
</svg>
);
}

19
components/icons/BookIcon.tsx Normal file
View file

@ -0,0 +1,19 @@
import type { ComponentPropsWithoutRef } from "react";
export function BookIcon(props: ComponentPropsWithoutRef<"svg">) {
return (
<svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
<path
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
d="m10 5.5-7.5-3v12l7.5 3m0-12 7.5-3v12l-7.5 3m0-12v12"
/>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="m17.5 2.5-7.5 3v12l7.5-3v-12Z"
/>
</svg>
);
}

25
components/icons/CalendarIcon.tsx Normal file
View file

@ -0,0 +1,25 @@
import type { ComponentPropsWithoutRef } from "react";
export function CalendarIcon(props: ComponentPropsWithoutRef<"svg">) {
return (
<svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
<path
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
d="M2.5 6.5a2 2 0 0 1 2-2h11a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-11a2 2 0 0 1-2-2v-9Z"
/>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M2.5 6.5a2 2 0 0 1 2-2h11a2 2 0 0 1 2 2v2h-15v-2Z"
/>
<path
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
d="M5.5 5.5v-3M14.5 5.5v-3"
/>
</svg>
);
}

17
components/icons/CartIcon.tsx Normal file
View file

@ -0,0 +1,17 @@
import type { ComponentPropsWithoutRef } from "react";
export function CartIcon(props: ComponentPropsWithoutRef<"svg">) {
return (
<svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
<path
strokeWidth="0"
d="M5.98 11.288 3.5 5.5h14l-2.48 5.788A2 2 0 0 1 13.18 12.5H7.82a2 2 0 0 1-1.838-1.212Z"
/>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="m3.5 5.5 2.48 5.788A2 2 0 0 0 7.82 12.5h5.362a2 2 0 0 0 1.839-1.212L17.5 5.5h-14Zm0 0-1-2M6.5 14.5a1 1 0 1 1 0 2 1 1 0 0 1 0-2ZM14.5 14.5a1 1 0 1 1 0 2 1 1 0 0 1 0-2Z"
/>
</svg>
);
}

19
components/icons/ChatBubbleIcon.tsx Normal file
View file

@ -0,0 +1,19 @@
import type { ComponentPropsWithoutRef } from "react";
export function ChatBubbleIcon(props: ComponentPropsWithoutRef<"svg">) {
return (
<svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M10 16.5c4.142 0 7.5-3.134 7.5-7s-3.358-7-7.5-7c-4.142 0-7.5 3.134-7.5 7 0 1.941.846 3.698 2.214 4.966L3.5 17.5c2.231 0 3.633-.553 4.513-1.248A8.014 8.014 0 0 0 10 16.5Z"
/>
<path
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
d="M7.5 8.5h5M8.5 11.5h3"
/>
</svg>
);
}

19
components/icons/CheckIcon.tsx Normal file
View file

@ -0,0 +1,19 @@
import type { ComponentPropsWithoutRef } from "react";
export function CheckIcon(props: ComponentPropsWithoutRef<"svg">) {
return (
<svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M10 1.5a8.5 8.5 0 1 1 0 17 8.5 8.5 0 0 1 0-17Z"
/>
<path
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
d="m7.5 10.5 2 2c1-3.5 3-5 3-5"
/>
</svg>
);
}

19
components/icons/ChevronRightLeftIcon.tsx Normal file
View file

@ -0,0 +1,19 @@
import type { ComponentPropsWithoutRef } from "react";
export function ChevronRightLeftIcon(props: ComponentPropsWithoutRef<"svg">) {
return (
<svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M1.5 10A6.5 6.5 0 0 1 8 3.5h4a6.5 6.5 0 1 1 0 13H8A6.5 6.5 0 0 1 1.5 10Z"
/>
<path
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
d="m7.5 7.5-3 2.5 3 2.5M12.5 7.5l3 2.5-3 2.5"
/>
</svg>
);
}

19
components/icons/ClipboardIcon.tsx Normal file
View file

@ -0,0 +1,19 @@
import type { ComponentPropsWithoutRef } from "react";
export function ClipboardIcon(props: ComponentPropsWithoutRef<"svg">) {
return (
<svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
<path
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
d="M3.5 6v10a2 2 0 0 0 2 2h9a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-1l-.447.894A2 2 0 0 1 11.263 6H8.737a2 2 0 0 1-1.789-1.106L6.5 4h-1a2 2 0 0 0-2 2Z"
/>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="m13.5 4-.447.894A2 2 0 0 1 11.263 6H8.737a2 2 0 0 1-1.789-1.106L6.5 4l.724-1.447A1 1 0 0 1 8.118 2h3.764a1 1 0 0 1 .894.553L13.5 4Z"
/>
</svg>
);
}

21
components/icons/CogIcon.tsx Normal file
View file

@ -0,0 +1,21 @@
import type { ComponentPropsWithoutRef } from "react";
export function CogIcon(props: ComponentPropsWithoutRef<"svg">) {
return (
<svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
<path
strokeWidth="0"
fillRule="evenodd"
d="M11.063 1.5H8.937l-.14 1.128c-.086.682-.61 1.22-1.246 1.484-.634.264-1.37.247-1.912-.175l-.898-.699-1.503 1.503.699.898c.422.543.44 1.278.175 1.912-.264.635-.802 1.16-1.484 1.245L1.5 8.938v2.124l1.128.142c.682.085 1.22.61 1.484 1.244.264.635.247 1.37-.175 1.913l-.699.898 1.503 1.503.898-.699c.543-.422 1.278-.44 1.912-.175.635.264 1.16.801 1.245 1.484l.142 1.128h2.124l.142-1.128c.085-.683.61-1.22 1.244-1.484.635-.264 1.37-.247 1.913.175l.898.699 1.503-1.503-.699-.898c-.422-.543-.44-1.278-.175-1.913.264-.634.801-1.16 1.484-1.245l1.128-.14V8.937l-1.128-.14c-.683-.086-1.22-.611-1.484-1.246-.264-.634-.247-1.37.175-1.912l.699-.898-1.503-1.503-.898.699c-.543.422-1.278.44-1.913.175-.634-.264-1.16-.802-1.244-1.484L11.062 1.5ZM10 12.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z"
clipRule="evenodd"
/>
<path
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
d="M8.938 1.5h2.124l.142 1.128c.085.682.61 1.22 1.244 1.484v0c.635.264 1.37.247 1.913-.175l.898-.699 1.503 1.503-.699.898c-.422.543-.44 1.278-.175 1.912v0c.264.635.801 1.16 1.484 1.245l1.128.142v2.124l-1.128.142c-.683.085-1.22.61-1.484 1.244v0c-.264.635-.247 1.37.175 1.913l.699.898-1.503 1.503-.898-.699c-.543-.422-1.278-.44-1.913-.175v0c-.634.264-1.16.801-1.245 1.484l-.14 1.128H8.937l-.14-1.128c-.086-.683-.611-1.22-1.246-1.484v0c-.634-.264-1.37-.247-1.912.175l-.898.699-1.503-1.503.699-.898c.422-.543.44-1.278.175-1.913v0c-.264-.634-.802-1.16-1.484-1.245l-1.128-.14V8.937l1.128-.14c.682-.086 1.22-.61 1.484-1.246v0c.264-.634.247-1.37-.175-1.912l-.699-.898 1.503-1.503.898.699c.543.422 1.278.44 1.912.175v0c.635-.264 1.16-.802 1.245-1.484L8.938 1.5Z"
/>
<circle cx="10" cy="10" r="2.5" fill="none" />
</svg>
);
}

19
components/icons/CopyIcon.tsx Normal file
View file

@ -0,0 +1,19 @@
import type { ComponentPropsWithoutRef } from "react";
export function CopyIcon(props: ComponentPropsWithoutRef<"svg">) {
return (
<svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
<path
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
d="M14.5 5.5v-1a2 2 0 0 0-2-2h-8a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h1"
/>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M5.5 7.5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8Z"
/>
</svg>
);
}

19
components/icons/DocumentIcon.tsx Normal file
View file

@ -0,0 +1,19 @@
import type { ComponentPropsWithoutRef } from "react";
export function DocumentIcon(props: ComponentPropsWithoutRef<"svg">) {
return (
<svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M3.5 4.5v11a2 2 0 0 0 2 2h9a2 2 0 0 0 2-2v-8h-5v-5h-6a2 2 0 0 0-2 2Z"
/>
<path
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
d="m11.5 2.5 5 5"
/>
</svg>
);
}

19
components/icons/EnvelopeIcon.tsx Normal file
View file

@ -0,0 +1,19 @@
import type { ComponentPropsWithoutRef } from "react";
export function EnvelopeIcon(props: ComponentPropsWithoutRef<"svg">) {
return (
<svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
<path
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
d="M2.5 5.5a2 2 0 0 1 2-2h11a2 2 0 0 1 2 2v8a3 3 0 0 1-3 3h-9a3 3 0 0 1-3-3v-8Z"
/>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M10 10 4.526 5.256c-.7-.607-.271-1.756.655-1.756h9.638c.926 0 1.355 1.15.655 1.756L10 10Z"
/>
</svg>
);
}

19
components/icons/FaceSmileIcon.tsx Normal file
View file

@ -0,0 +1,19 @@
import type { ComponentPropsWithoutRef } from "react";
export function FaceSmileIcon(props: ComponentPropsWithoutRef<"svg">) {
return (
<svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M10 1.5a8.5 8.5 0 1 1 0 17 8.5 8.5 0 0 1 0-17Z"
/>
<path
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
d="M7.5 6.5v2M12.5 6.5v2M5.5 11.5s1 3 4.5 3 4.5-3 4.5-3"
/>
</svg>
);
}

24
components/icons/FolderIcon.tsx Normal file
View file

@ -0,0 +1,24 @@
import type { ComponentPropsWithoutRef } from "react";
export function FolderIcon(props: ComponentPropsWithoutRef<"svg">) {
return (
<svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
<path
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
d="M17.5 15.5v-8a2 2 0 0 0-2-2h-2.93a2 2 0 0 1-1.664-.89l-.812-1.22A2 2 0 0 0 8.43 2.5H4.5a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2Z"
/>
<path
strokeWidth="0"
d="M8.43 2.5H4.5a2 2 0 0 0-2 2v1h9l-1.406-2.11A2 2 0 0 0 8.43 2.5Z"
/>
<path
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
d="m11.5 5.5-1.406-2.11A2 2 0 0 0 8.43 2.5H4.5a2 2 0 0 0-2 2v1h9Zm0 0h2"
/>
</svg>
);
}

14
components/icons/LinkIcon.tsx Normal file
View file

@ -0,0 +1,14 @@
import type { ComponentPropsWithoutRef } from "react";
export function LinkIcon(props: ComponentPropsWithoutRef<"svg">) {
return (
<svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
<path
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
d="m5.056 11.5-1.221-1.222a4.556 4.556 0 0 1 6.443-6.443L11.5 5.056M7.5 7.5l5 5m2.444-4 1.222 1.222a4.556 4.556 0 0 1-6.444 6.444L8.5 14.944"
/>
</svg>
);
}

19
components/icons/ListIcon.tsx Normal file
View file

@ -0,0 +1,19 @@
import type { ComponentPropsWithoutRef } from "react";
export function ListIcon(props: ComponentPropsWithoutRef<"svg">) {
return (
<svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M2.5 4.5a2 2 0 0 1 2-2h11a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2h-11a2 2 0 0 1-2-2v-11Z"
/>
<path
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
d="M6.5 6.5h7M6.5 13.5h7M6.5 10h7"
/>
</svg>
);
}

15
components/icons/MagnifyingGlassIcon.tsx Normal file
View file

@ -0,0 +1,15 @@
import type { ComponentPropsWithoutRef } from "react";
export function MagnifyingGlassIcon(props: ComponentPropsWithoutRef<"svg">) {
return (
<svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
<path strokeWidth="0" d="M2.5 8.5a6 6 0 1 1 12 0 6 6 0 0 1-12 0Z" />
<path
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
d="m13 13 4.5 4.5m-9-3a6 6 0 1 1 0-12 6 6 0 0 1 0 12Z"
/>
</svg>
);
}

21
components/icons/MapPinIcon.tsx Normal file
View file

@ -0,0 +1,21 @@
import type { ComponentPropsWithoutRef } from "react";
export function MapPinIcon(props: ComponentPropsWithoutRef<"svg">) {
return (
<svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
<path
strokeWidth="0"
fillRule="evenodd"
clipRule="evenodd"
d="M10 2.5A5.5 5.5 0 0 0 4.5 8c0 3.038 5.5 9.5 5.5 9.5s5.5-6.462 5.5-9.5A5.5 5.5 0 0 0 10 2.5Zm0 7a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
/>
<path
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
d="M4.5 8a5.5 5.5 0 1 1 11 0c0 3.038-5.5 9.5-5.5 9.5S4.5 11.038 4.5 8Z"
/>
<circle cx="10" cy="8" r="1.5" fill="none" />
</svg>
);
}

18
components/icons/PackageIcon.tsx Normal file
View file

@ -0,0 +1,18 @@
import type { ComponentPropsWithoutRef } from "react";
export function PackageIcon(props: ComponentPropsWithoutRef<"svg">) {
return (
<svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
<path
strokeWidth="0"
d="m10 9.5-7.5-4v9l7.5 4v-9ZM10 9.5l7.5-4v9l-7.5 4v-9Z"
/>
<path
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
d="m2.5 5.5 7.5 4m-7.5-4v9l7.5 4m-7.5-13 7.5-4 7.5 4m-7.5 4v9m0-9 7.5-4m-7.5 13 7.5-4v-9m-11 6 .028-3.852L13.5 3.5"
/>
</svg>
);
}

19
components/icons/PaperAirplaneIcon.tsx Normal file
View file

@ -0,0 +1,19 @@
import type { ComponentPropsWithoutRef } from "react";
export function PaperAirplaneIcon(props: ComponentPropsWithoutRef<"svg">) {
return (
<svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
<path
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
d="M17 3L1 9L8 12M17 3L11 19L8 12M17 3L8 12"
/>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M11 19L8 12L17 3L11 19Z"
/>
</svg>
);
}

14
components/icons/PaperClipIcon.tsx Normal file
View file

@ -0,0 +1,14 @@
import type { ComponentPropsWithoutRef } from "react";
export function PaperClipIcon(props: ComponentPropsWithoutRef<"svg">) {
return (
<svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
<path
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
d="m15.56 7.375-3.678-3.447c-2.032-1.904-5.326-1.904-7.358 0s-2.032 4.99 0 6.895l6.017 5.639c1.477 1.384 3.873 1.384 5.35 0 1.478-1.385 1.478-3.63 0-5.015L10.21 6.122a1.983 1.983 0 0 0-2.676 0 1.695 1.695 0 0 0 0 2.507l4.013 3.76"
/>
</svg>
);
}

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