Some messing around with design and docs with zola
This commit is contained in:
parent
86228773ee
commit
29d5df68de
GPG key ID:
649733FCD94AFBBA
14 changed files with 426 additions and 3 deletions
3
.gitmodules
vendored
Normal file
3
.gitmodules
vendored
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
[submodule "themes/abridge"]
|
||||
path = themes/abridge
|
||||
url = https://github.com/jieiku/abridge.git
|
||||
|
|
@ -5,12 +5,11 @@ base_url = "https://example.com"
|
|||
compile_sass = true
|
||||
|
||||
# Whether to build a search index to be used later on by a JavaScript library
|
||||
build_search_index = true
|
||||
build_search_index = false
|
||||
|
||||
[markdown]
|
||||
# Whether to do syntax highlighting
|
||||
# Theme can be customised by setting the `highlight_theme` variable to a theme supported by Zola
|
||||
highlight_code = true
|
||||
# highlight_theme = "css"
|
||||
|
||||
[extra]
|
||||
# Put all your custom variables here
|
||||
|
|
|
|||
3
content/docs/_index.md
Normal file
3
content/docs/_index.md
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
+++
|
||||
page_template = "docs-page.html"
|
||||
+++
|
||||
76
content/docs/api.md
Normal file
76
content/docs/api.md
Normal file
|
|
@ -0,0 +1,76 @@
|
|||
+++
|
||||
title = "api"
|
||||
+++
|
||||
|
||||
list of all api paths for client-server api
|
||||
|
||||
client base_url: /_matrix/client/
|
||||
media base_url: /_matrix/media/
|
||||
|
||||
each path is versioned on its own
|
||||
|
||||
### endpoint summary
|
||||
|
||||
WARNING: these endpoints don't necessarily behave the same or
|
||||
exist in vanilla matrix! Please read this documentation rather than
|
||||
[spec.matrix.org](https://spec.matrix.org) or else code may break!
|
||||
|
||||
NOTE: The api doesn't necessarily follow REST conventions. TODO:
|
||||
explanation here or in a "design" doc?
|
||||
|
||||
#### existing
|
||||
|
||||
|method|path|description|
|
||||
|-|-|-|
|
||||
| PUT | /v3/send/{eventType}/{txnid} | Send an event |
|
||||
| PUT | /v3/state/{eventType}/{stateKey} | Send a state event, mutating the state of a room |
|
||||
| POST | /unstable/org.matrix.msc3575/sync | Receive new events; see [syncing](#syncing) |
|
||||
| POST | /v1/threads | Query for threads |
|
||||
| POST | /v1/ack | Mark messages as read |
|
||||
| POST | /v1/inbox | Receive messages as read |
|
||||
| GET | /v3/rooms/{roomId}/event/{eventId} | Fetch a single event |
|
||||
| GET | /v3/rooms/{roomId}/context/{eventId} | Fetch a section of timeline around an event |
|
||||
| GET | /v3/rooms/{roomId}/messages | Fetch or paginate a section of timeline |
|
||||
| GET | /v3/rooms/{roomId}/relations/{eventId}/{relType?}/{eventType?} | Fetch relations for an event |
|
||||
|
||||
#### soon?
|
||||
|
||||
but query isn't widely supported :(
|
||||
|
||||
|method|path|description|
|
||||
|-|-|-|
|
||||
| PUT | /v3/send/{eventType}/{txnid} | Send an event |
|
||||
| PUT | /v3/state/{eventType}/{stateKey} | Send a state event, mutating the state of a room |
|
||||
| QUERY | /unstable/org.matrix.msc3575/sync | Receive new events; see [syncing](#syncing) |
|
||||
| QUERY | /v1/threads | Query for threads |
|
||||
| POST | /v1/ack | Mark messages as read |
|
||||
| QUERY | /v1/inbox | Receive messages as read |
|
||||
| QUERY | /v3/rooms/{roomId}/events | Fetch events |
|
||||
| QUERY | /v3/rooms/{roomId}/relations | Fetch relations |
|
||||
|
||||
### primitives
|
||||
|
||||
| name | format | description |
|
||||
|-|-|-|
|
||||
|room id|!opaque:domain.tld|A globally unique identifier for a room. The domain part is purely to ensure uniqueness, and is meaningless otherwise.|
|
||||
|user id|@name:domain.tld|A globally unique identifier for a user.|
|
||||
|event id|$opaque|A globally unique identifier for an event.|
|
||||
|
||||
### event struct
|
||||
|
||||
| field | type | description |
|
||||
|-|-|-|
|
||||
| event_id | event id | a unique identifier for this event |
|
||||
| room_id? | room id | the room this event originated from* |
|
||||
| content | any | arbitrary content; in practice, this probably matches the event type |
|
||||
| sender | user id | the sender of this event |
|
||||
| state_key? | string | if this is a state event |
|
||||
| type | string | the type of this event |
|
||||
| origin_server_ts | number | the timestamp at the server this event originated from |
|
||||
| unsigned | unsigned data | anything extra the server calculated |
|
||||
|
||||
*only present in some endpoints
|
||||
|
||||
### syncing
|
||||
|
||||
todo
|
||||
15
content/docs/data.md
Normal file
15
content/docs/data.md
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
+++
|
||||
title = "data"
|
||||
+++
|
||||
|
||||
list of data structures
|
||||
|
||||
## events
|
||||
|
||||
`m.message`
|
||||
|
||||
```js
|
||||
{
|
||||
"m.text": "bar"
|
||||
}
|
||||
```
|
||||
33
content/docs/design.md
Normal file
33
content/docs/design.md
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
+++
|
||||
title = "design"
|
||||
+++
|
||||
|
||||
there are some design choices
|
||||
|
||||
## faq
|
||||
|
||||
### no main instance
|
||||
|
||||
i'm a programmer not a moderator and don't want to deal with that
|
||||
|
||||
yeah it will hurt adoption, but the goal isn't to amass a ton of users
|
||||
|
||||
## ui
|
||||
|
||||
### why thread only
|
||||
|
||||
it strikes a nice balance between async and synchronous.
|
||||
|
||||
i *may* add fully async tree-style reply style rooms.
|
||||
|
||||
fully synchronous chat is not planned.
|
||||
|
||||
## technical
|
||||
|
||||
### the api is not restful
|
||||
|
||||
it uses batching
|
||||
|
||||
### why long polling
|
||||
|
||||
http/3
|
||||
5
content/docs/hello.md
Normal file
5
content/docs/hello.md
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
+++
|
||||
title = "hello"
|
||||
+++
|
||||
|
||||
welcome to the project, here's documentation
|
||||
39
sass/fonts.scss
Normal file
39
sass/fonts.scss
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
@font-face {
|
||||
font-family: "Atkinson Hyperlegible";
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-display: swap;
|
||||
src: url(./fonts/atkinson-hyperlegible/AtkinsonHyperlegible-Regular.ttf);
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Atkinson Hyperlegible";
|
||||
font-style: normal;
|
||||
font-weight: bold;
|
||||
font-display: swap;
|
||||
src: url(./fonts/atkinson-hyperlegible/AtkinsonHyperlegible-Bold.ttf);
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Atkinson Hyperlegible";
|
||||
font-style: italic;
|
||||
font-weight: normal;
|
||||
font-display: swap;
|
||||
src: url(./fonts/atkinson-hyperlegible/AtkinsonHyperlegible-Italic.ttf);
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Atkinson Hyperlegible";
|
||||
font-style: italic;
|
||||
font-weight: bold;
|
||||
font-display: swap;
|
||||
src: url(./fonts/atkinson-hyperlegible/AtkinsonHyperlegible-BoldItalic.ttf);
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Iosevka Zesty";
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-display: swap;
|
||||
src: url(./fonts/iosevka/iosevka-zesty.ttf);
|
||||
}
|
||||
155
sass/style.scss
Normal file
155
sass/style.scss
Normal file
|
|
@ -0,0 +1,155 @@
|
|||
@import "./fonts.scss";
|
||||
|
||||
:root {
|
||||
font: 16px/1.5 "Atkinson Hyperlegible", Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
||||
--background-1: #24262b;
|
||||
--background-2: #1e2024;
|
||||
--background-3: #191b1d;
|
||||
--background-4: #17181a;
|
||||
--foreground-1: #eae8efdd;
|
||||
--foreground-2: #eae8efb4;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--background-1);
|
||||
color: var(--foreground-1);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
section, main {
|
||||
padding: 2rem max(calc(50vw - 350px), 16px);
|
||||
}
|
||||
|
||||
#blurb {
|
||||
width: 50%;
|
||||
padding: 2rem;
|
||||
padding-left: max(calc(50vw - 350px), 16px);
|
||||
background: var(--background-2);
|
||||
}
|
||||
|
||||
#blurb > h1 {
|
||||
text-shadow:
|
||||
1px 1px #822ebaff,
|
||||
2px 2px #822ebacc,
|
||||
3px 3px #822eba99,
|
||||
4px 4px #822eba66,
|
||||
5px 5px #822eba33;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
#blurb a {
|
||||
padding: 8px 16px;
|
||||
background: #555;
|
||||
color: var(--foreground-1);
|
||||
text-decoration: none;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#video {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
overflow-x: auto;
|
||||
margin-left: 40%;
|
||||
width: 60%;
|
||||
height: 350px;
|
||||
padding: 2rem;
|
||||
background: var(--background-3);
|
||||
}
|
||||
|
||||
#video > video {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #bd7aea;
|
||||
}
|
||||
|
||||
#about {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
#about > div {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
ol, ul {
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
@media (max-width: 750px) {
|
||||
#blurb, #video {
|
||||
width: 100%;
|
||||
padding: 2rem;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
#about {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
pre {
|
||||
padding: 4px;
|
||||
border-radius: 4px;
|
||||
background: var(--background-3);
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
#line {
|
||||
animation: move 999999s;
|
||||
}
|
||||
|
||||
@keyframes move {
|
||||
from { stroke-dashoffset: 0; }
|
||||
to { stroke-dashoffset: 10000000; }
|
||||
}
|
||||
|
||||
nav {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
float: left;
|
||||
width: 256px;
|
||||
padding: 8px;
|
||||
background: var(--background-2);
|
||||
}
|
||||
|
||||
table {
|
||||
border: solid var(--background-3) 1px;
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
|
||||
& tr {
|
||||
background: var(--background-2);
|
||||
|
||||
&:nth-child(even) {
|
||||
background: var(--background-3);
|
||||
}
|
||||
}
|
||||
|
||||
& thead tr {
|
||||
background: var(--background-4);
|
||||
}
|
||||
|
||||
& td, th {
|
||||
padding: 4px;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
BIN
static/psyqui.mp4
Normal file
BIN
static/psyqui.mp4
Normal file
Binary file not shown.
6
templates/404.html
Normal file
6
templates/404.html
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
{% block content %}
|
||||
<main>
|
||||
<h1>404</h1>
|
||||
<p>not found - <a href="/">back to home</a></p>
|
||||
</main>
|
||||
{% endblock %}
|
||||
13
templates/base.html
Normal file
13
templates/base.html
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf8" />
|
||||
<title>{% block title %}unnamed{% endblock %}</title>
|
||||
{% block head %}
|
||||
<link rel="stylesheet" href="/style.css" />
|
||||
{% endblock %}
|
||||
</head>
|
||||
<body>
|
||||
{% block content %}{% endblock %}
|
||||
</body>
|
||||
</html>
|
||||
20
templates/docs-page.html
Normal file
20
templates/docs-page.html
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}
|
||||
{{ page.title }}
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
{% set section = get_section(path="docs/_index.md") %}
|
||||
|
||||
<nav>
|
||||
<b>pages</b>
|
||||
{% for page in section.pages %}
|
||||
<a href="{{page.path}}">{{page.title}}</a>
|
||||
{% endfor %}
|
||||
</nav>
|
||||
<main>
|
||||
<h1>{{ page.title }}</h1>
|
||||
{{ page.content | safe }}
|
||||
</main>
|
||||
{% endblock %}
|
||||
56
templates/index.html
Normal file
56
templates/index.html
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}home{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<header>
|
||||
</header>
|
||||
<section id="blurb">
|
||||
<h1>jackwagon is federated e2ee thread only chats done right</h1>
|
||||
<a href="#" style="background:#822eba">try it out</a> <a href="/docs/hello">read docs</a>
|
||||
</section>
|
||||
<section id="video">
|
||||
<video src="./psyqui.mp4" controls></video>
|
||||
</section>
|
||||
<section id="about">
|
||||
<div>
|
||||
<h2>why</h2>
|
||||
<ul>
|
||||
<li>Like zulip or discord forum channels, but but taken to its logical conclusion</li>
|
||||
<li>Federated/decentralized and built to last</li>
|
||||
<li>Aiming to be a complete and usable system out of the box, with minimal setup or maintenence</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h2>why not</h2>
|
||||
<ul>
|
||||
<li>It kinda does its own thing and won't easily replace $APP</li>
|
||||
<li>It's yet another platform that you'll have to convince your friends to use</li>
|
||||
<li>Extremely early alpha that probably shouldn't even been released</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h2>other info</h2>
|
||||
<ul>
|
||||
<li>Forked from <a href="https://matrix.org">matrix</a> and <a href="https://conduit.rs">conduit</a> (but incompatible!)</li>
|
||||
<li>Free and open source software</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
<svg width="100%" height="10px">
|
||||
<line id="line" stroke-dasharray="
|
||||
10, 10, 30, 10, 30, 10, 30, 30,
|
||||
10, 10, 30, 30,
|
||||
30, 10, 10, 10, 30, 10, 10, 30,
|
||||
30, 10, 10, 10, 30, 30,
|
||||
10, 10, 30, 10, 30, 30,
|
||||
10, 10, 30, 30,
|
||||
30, 10, 30, 10, 10, 30,
|
||||
30, 10, 30, 10, 30, 30,
|
||||
30, 10, 10, 30"
|
||||
x1="0" y1="5px" x2="100%" y2="5px"
|
||||
style="stroke: var(--background-2)" stroke-width="10"
|
||||
stroke-dashoffset="0"
|
||||
/>
|
||||
</svg>
|
||||
{% endblock %}
|
||||
Loading…
Reference in a new issue