federating my verse (iceshrimp & mastodon API compat, read-only)
This commit is contained in:
parent
8dc8190cdf
commit
da93978820
GPG key ID:
CF99829C92678188
67 changed files with 2743 additions and 649 deletions
3
.gitignore
vendored
Normal file
3
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
**/.DS_Store
|
||||||
|
node_modules/
|
||||||
|
dist/
|
||||||
13
index.html
Normal file
13
index.html
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<link rel="icon" type="image/png" href="/favicon.png">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<title>space social</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
<script type="module" src="/src/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
1185
package-lock.json
generated
Normal file
1185
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
18
package.json
Normal file
18
package.json
Normal file
|
|
@ -0,0 +1,18 @@
|
||||||
|
{
|
||||||
|
"name": "spacesocial-client",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"description": "social media for the galaxy-wide-web! 🌌",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "vite build",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"author": "",
|
||||||
|
"license": "ISC",
|
||||||
|
"devDependencies": {
|
||||||
|
"@sveltejs/vite-plugin-svelte": "^3.1.1",
|
||||||
|
"svelte": "^4.2.18",
|
||||||
|
"vite": "^5.3.1"
|
||||||
|
}
|
||||||
|
}
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 88 KiB |
|
|
@ -1,240 +0,0 @@
|
||||||
:root {
|
|
||||||
--fg0: #eee;
|
|
||||||
--bg0: #080808;
|
|
||||||
--bg1: #101010;
|
|
||||||
--bg2: #121212;
|
|
||||||
--accent: #b7fd49;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
|
|
||||||
background-color: var(--bg0);
|
|
||||||
color: var(--fg0);
|
|
||||||
|
|
||||||
font-family: "Inter", sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
#feed {
|
|
||||||
width: 720px;
|
|
||||||
margin: 0 auto;
|
|
||||||
background-color: var(--bg1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-container {
|
|
||||||
padding: 20px 32px;
|
|
||||||
border-bottom: 1px solid #8884;
|
|
||||||
transition: background-color .1s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-container:hover {
|
|
||||||
background-color: var(--bg2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-context {
|
|
||||||
margin-bottom: 8px;
|
|
||||||
padding-left: 58px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
color: var(--accent);
|
|
||||||
opacity: .8;
|
|
||||||
transition: opacity .1s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-container:hover .post-context {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-context-icon {
|
|
||||||
margin-right: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-context a,
|
|
||||||
.post-context a:visited,
|
|
||||||
.post-header-container a,
|
|
||||||
.post-header-container a:visited {
|
|
||||||
color: inherit;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
.post-context a:hover,
|
|
||||||
.post-header-container a:hover {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-context-time {
|
|
||||||
margin-left: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
article.post { /* ... */ }
|
|
||||||
|
|
||||||
.post-header-container {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-avatar-container {
|
|
||||||
margin-right: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-avatar {
|
|
||||||
border-radius: 8px;
|
|
||||||
box-shadow: 2px 2px #0004;
|
|
||||||
/* transition: transform .2s ease-out; */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* .post-avatar:hover { */
|
|
||||||
/* transform: scale(1.1); */
|
|
||||||
/* } */
|
|
||||||
|
|
||||||
.post-header {
|
|
||||||
display: flex;
|
|
||||||
flex-grow: 1;
|
|
||||||
flex-direction: row;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-info {
|
|
||||||
margin-left: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-user-info a {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-body {
|
|
||||||
margin-top: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-media-container {
|
|
||||||
margin-top: 8px;
|
|
||||||
display: grid;
|
|
||||||
grid-gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-media-container[data-count="1"] {
|
|
||||||
grid-template-rows: 1fr;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-media-container[data-count="2"] {
|
|
||||||
grid-template-columns: 1fr 1fr;
|
|
||||||
grid-template-rows: 1fr;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-media-container[data-count="3"] {
|
|
||||||
grid-template-columns: 1fr .5fr;
|
|
||||||
grid-template-rows: 1fr 1fr;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-media-container[data-count="4"] {
|
|
||||||
grid-template-columns: 1fr 1fr;
|
|
||||||
grid-template-rows: 1fr 1fr;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-media {
|
|
||||||
border-radius: 12px;
|
|
||||||
background-color: #000;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-media a {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
display: block;
|
|
||||||
cursor: zoom-in;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-media a img {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
display: block;
|
|
||||||
object-fit: contain;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-media-container > :nth-child(1) {
|
|
||||||
grid-column: 1/2;
|
|
||||||
grid-row: 1/2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-media-container[data-count="3"] > :nth-child(1) {
|
|
||||||
grid-row: 1/3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-media-container > :nth-child(2) {
|
|
||||||
grid-column: 2/2;
|
|
||||||
grid-row: 1/2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-media-container > :nth-child(3) {
|
|
||||||
grid-column: 1/2;
|
|
||||||
grid-row: 2/2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-media-container[data-count="3"] > :nth-child(3) {
|
|
||||||
grid-column: 2/2;
|
|
||||||
grid-row: 2/2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-media-container > :nth-child(4) {
|
|
||||||
grid-column: 2/2;
|
|
||||||
grid-row: 2/2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-container footer {
|
|
||||||
opacity: .8;
|
|
||||||
transition: opacity .1s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-container:hover footer {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-reactions {
|
|
||||||
margin-top: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
button.reaction {
|
|
||||||
padding: 6px 8px;
|
|
||||||
font-size: 1em;
|
|
||||||
background: none;
|
|
||||||
color: inherit;
|
|
||||||
border: none;
|
|
||||||
border-radius: 8px;
|
|
||||||
/* transition: transform .1s ease-out; */
|
|
||||||
}
|
|
||||||
|
|
||||||
button.reaction:hover,
|
|
||||||
.post-actions button:hover {
|
|
||||||
/* transform: scale(1.1); */
|
|
||||||
background: #8881;
|
|
||||||
}
|
|
||||||
|
|
||||||
button.reaction:active,
|
|
||||||
.post-actions button:active {
|
|
||||||
/* transform: scale(.95); */
|
|
||||||
background: #0001;
|
|
||||||
}
|
|
||||||
|
|
||||||
button.reaction.active,
|
|
||||||
.post-actions button.active {
|
|
||||||
background: var(--accent);
|
|
||||||
color: var(--bg0);
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-actions {
|
|
||||||
margin-top: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-actions button {
|
|
||||||
padding: 6px 8px;
|
|
||||||
font-size: 1em;
|
|
||||||
background: none;
|
|
||||||
color: inherit;
|
|
||||||
border: none;
|
|
||||||
border-radius: 8px;
|
|
||||||
transition: transform .1s ease-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-actions button .count {
|
|
||||||
opacity: .5;
|
|
||||||
}
|
|
||||||
BIN
public/font/inter/Inter-Black.woff2
Normal file
BIN
public/font/inter/Inter-Black.woff2
Normal file
Binary file not shown.
BIN
public/font/inter/Inter-BlackItalic.woff2
Normal file
BIN
public/font/inter/Inter-BlackItalic.woff2
Normal file
Binary file not shown.
BIN
public/font/inter/Inter-Bold.woff2
Normal file
BIN
public/font/inter/Inter-Bold.woff2
Normal file
Binary file not shown.
BIN
public/font/inter/Inter-BoldItalic.woff2
Normal file
BIN
public/font/inter/Inter-BoldItalic.woff2
Normal file
Binary file not shown.
BIN
public/font/inter/Inter-ExtraBold.woff2
Normal file
BIN
public/font/inter/Inter-ExtraBold.woff2
Normal file
Binary file not shown.
BIN
public/font/inter/Inter-ExtraBoldItalic.woff2
Normal file
BIN
public/font/inter/Inter-ExtraBoldItalic.woff2
Normal file
Binary file not shown.
BIN
public/font/inter/Inter-ExtraLight.woff2
Normal file
BIN
public/font/inter/Inter-ExtraLight.woff2
Normal file
Binary file not shown.
BIN
public/font/inter/Inter-ExtraLightItalic.woff2
Normal file
BIN
public/font/inter/Inter-ExtraLightItalic.woff2
Normal file
Binary file not shown.
BIN
public/font/inter/Inter-Italic.woff2
Normal file
BIN
public/font/inter/Inter-Italic.woff2
Normal file
Binary file not shown.
BIN
public/font/inter/Inter-Light.woff2
Normal file
BIN
public/font/inter/Inter-Light.woff2
Normal file
Binary file not shown.
BIN
public/font/inter/Inter-LightItalic.woff2
Normal file
BIN
public/font/inter/Inter-LightItalic.woff2
Normal file
Binary file not shown.
BIN
public/font/inter/Inter-Medium.woff2
Normal file
BIN
public/font/inter/Inter-Medium.woff2
Normal file
Binary file not shown.
BIN
public/font/inter/Inter-MediumItalic.woff2
Normal file
BIN
public/font/inter/Inter-MediumItalic.woff2
Normal file
Binary file not shown.
BIN
public/font/inter/Inter-Regular.woff2
Normal file
BIN
public/font/inter/Inter-Regular.woff2
Normal file
Binary file not shown.
BIN
public/font/inter/Inter-SemiBold.woff2
Normal file
BIN
public/font/inter/Inter-SemiBold.woff2
Normal file
Binary file not shown.
BIN
public/font/inter/Inter-SemiBoldItalic.woff2
Normal file
BIN
public/font/inter/Inter-SemiBoldItalic.woff2
Normal file
Binary file not shown.
BIN
public/font/inter/Inter-Thin.woff2
Normal file
BIN
public/font/inter/Inter-Thin.woff2
Normal file
Binary file not shown.
BIN
public/font/inter/Inter-ThinItalic.woff2
Normal file
BIN
public/font/inter/Inter-ThinItalic.woff2
Normal file
Binary file not shown.
BIN
public/font/inter/InterDisplay-Black.woff2
Normal file
BIN
public/font/inter/InterDisplay-Black.woff2
Normal file
Binary file not shown.
BIN
public/font/inter/InterDisplay-BlackItalic.woff2
Normal file
BIN
public/font/inter/InterDisplay-BlackItalic.woff2
Normal file
Binary file not shown.
BIN
public/font/inter/InterDisplay-Bold.woff2
Normal file
BIN
public/font/inter/InterDisplay-Bold.woff2
Normal file
Binary file not shown.
BIN
public/font/inter/InterDisplay-BoldItalic.woff2
Normal file
BIN
public/font/inter/InterDisplay-BoldItalic.woff2
Normal file
Binary file not shown.
BIN
public/font/inter/InterDisplay-ExtraBold.woff2
Normal file
BIN
public/font/inter/InterDisplay-ExtraBold.woff2
Normal file
Binary file not shown.
BIN
public/font/inter/InterDisplay-ExtraBoldItalic.woff2
Normal file
BIN
public/font/inter/InterDisplay-ExtraBoldItalic.woff2
Normal file
Binary file not shown.
BIN
public/font/inter/InterDisplay-ExtraLight.woff2
Normal file
BIN
public/font/inter/InterDisplay-ExtraLight.woff2
Normal file
Binary file not shown.
BIN
public/font/inter/InterDisplay-ExtraLightItalic.woff2
Normal file
BIN
public/font/inter/InterDisplay-ExtraLightItalic.woff2
Normal file
Binary file not shown.
BIN
public/font/inter/InterDisplay-Italic.woff2
Normal file
BIN
public/font/inter/InterDisplay-Italic.woff2
Normal file
Binary file not shown.
BIN
public/font/inter/InterDisplay-Light.woff2
Normal file
BIN
public/font/inter/InterDisplay-Light.woff2
Normal file
Binary file not shown.
BIN
public/font/inter/InterDisplay-LightItalic.woff2
Normal file
BIN
public/font/inter/InterDisplay-LightItalic.woff2
Normal file
Binary file not shown.
BIN
public/font/inter/InterDisplay-Medium.woff2
Normal file
BIN
public/font/inter/InterDisplay-Medium.woff2
Normal file
Binary file not shown.
BIN
public/font/inter/InterDisplay-MediumItalic.woff2
Normal file
BIN
public/font/inter/InterDisplay-MediumItalic.woff2
Normal file
Binary file not shown.
BIN
public/font/inter/InterDisplay-Regular.woff2
Normal file
BIN
public/font/inter/InterDisplay-Regular.woff2
Normal file
Binary file not shown.
BIN
public/font/inter/InterDisplay-SemiBold.woff2
Normal file
BIN
public/font/inter/InterDisplay-SemiBold.woff2
Normal file
Binary file not shown.
BIN
public/font/inter/InterDisplay-SemiBoldItalic.woff2
Normal file
BIN
public/font/inter/InterDisplay-SemiBoldItalic.woff2
Normal file
Binary file not shown.
BIN
public/font/inter/InterDisplay-Thin.woff2
Normal file
BIN
public/font/inter/InterDisplay-Thin.woff2
Normal file
Binary file not shown.
BIN
public/font/inter/InterDisplay-ThinItalic.woff2
Normal file
BIN
public/font/inter/InterDisplay-ThinItalic.woff2
Normal file
Binary file not shown.
BIN
public/font/inter/InterVariable-Italic.woff2
Normal file
BIN
public/font/inter/InterVariable-Italic.woff2
Normal file
Binary file not shown.
BIN
public/font/inter/InterVariable.woff2
Normal file
BIN
public/font/inter/InterVariable.woff2
Normal file
Binary file not shown.
92
public/font/inter/LICENSE.txt
Normal file
92
public/font/inter/LICENSE.txt
Normal file
|
|
@ -0,0 +1,92 @@
|
||||||
|
Copyright (c) 2016 The Inter Project Authors (https://github.com/rsms/inter)
|
||||||
|
|
||||||
|
This Font Software is licensed under the SIL Open Font License, Version 1.1.
|
||||||
|
This license is copied below, and is also available with a FAQ at:
|
||||||
|
http://scripts.sil.org/OFL
|
||||||
|
|
||||||
|
-----------------------------------------------------------
|
||||||
|
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
|
||||||
|
-----------------------------------------------------------
|
||||||
|
|
||||||
|
PREAMBLE
|
||||||
|
The goals of the Open Font License (OFL) are to stimulate worldwide
|
||||||
|
development of collaborative font projects, to support the font creation
|
||||||
|
efforts of academic and linguistic communities, and to provide a free and
|
||||||
|
open framework in which fonts may be shared and improved in partnership
|
||||||
|
with others.
|
||||||
|
|
||||||
|
The OFL allows the licensed fonts to be used, studied, modified and
|
||||||
|
redistributed freely as long as they are not sold by themselves. The
|
||||||
|
fonts, including any derivative works, can be bundled, embedded,
|
||||||
|
redistributed and/or sold with any software provided that any reserved
|
||||||
|
names are not used by derivative works. The fonts and derivatives,
|
||||||
|
however, cannot be released under any other type of license. The
|
||||||
|
requirement for fonts to remain under this license does not apply
|
||||||
|
to any document created using the fonts or their derivatives.
|
||||||
|
|
||||||
|
DEFINITIONS
|
||||||
|
"Font Software" refers to the set of files released by the Copyright
|
||||||
|
Holder(s) under this license and clearly marked as such. This may
|
||||||
|
include source files, build scripts and documentation.
|
||||||
|
|
||||||
|
"Reserved Font Name" refers to any names specified as such after the
|
||||||
|
copyright statement(s).
|
||||||
|
|
||||||
|
"Original Version" refers to the collection of Font Software components as
|
||||||
|
distributed by the Copyright Holder(s).
|
||||||
|
|
||||||
|
"Modified Version" refers to any derivative made by adding to, deleting,
|
||||||
|
or substituting -- in part or in whole -- any of the components of the
|
||||||
|
Original Version, by changing formats or by porting the Font Software to a
|
||||||
|
new environment.
|
||||||
|
|
||||||
|
"Author" refers to any designer, engineer, programmer, technical
|
||||||
|
writer or other person who contributed to the Font Software.
|
||||||
|
|
||||||
|
PERMISSION AND CONDITIONS
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining
|
||||||
|
a copy of the Font Software, to use, study, copy, merge, embed, modify,
|
||||||
|
redistribute, and sell modified and unmodified copies of the Font
|
||||||
|
Software, subject to the following conditions:
|
||||||
|
|
||||||
|
1) Neither the Font Software nor any of its individual components,
|
||||||
|
in Original or Modified Versions, may be sold by itself.
|
||||||
|
|
||||||
|
2) Original or Modified Versions of the Font Software may be bundled,
|
||||||
|
redistributed and/or sold with any software, provided that each copy
|
||||||
|
contains the above copyright notice and this license. These can be
|
||||||
|
included either as stand-alone text files, human-readable headers or
|
||||||
|
in the appropriate machine-readable metadata fields within text or
|
||||||
|
binary files as long as those fields can be easily viewed by the user.
|
||||||
|
|
||||||
|
3) No Modified Version of the Font Software may use the Reserved Font
|
||||||
|
Name(s) unless explicit written permission is granted by the corresponding
|
||||||
|
Copyright Holder. This restriction only applies to the primary font name as
|
||||||
|
presented to the users.
|
||||||
|
|
||||||
|
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
|
||||||
|
Software shall not be used to promote, endorse or advertise any
|
||||||
|
Modified Version, except to acknowledge the contribution(s) of the
|
||||||
|
Copyright Holder(s) and the Author(s) or with their explicit written
|
||||||
|
permission.
|
||||||
|
|
||||||
|
5) The Font Software, modified or unmodified, in part or in whole,
|
||||||
|
must be distributed entirely under this license, and must not be
|
||||||
|
distributed under any other license. The requirement for fonts to
|
||||||
|
remain under this license does not apply to any document created
|
||||||
|
using the Font Software.
|
||||||
|
|
||||||
|
TERMINATION
|
||||||
|
This license becomes null and void if any of the above conditions are
|
||||||
|
not met.
|
||||||
|
|
||||||
|
DISCLAIMER
|
||||||
|
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||||
|
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
|
||||||
|
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
|
||||||
|
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
|
||||||
|
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||||
|
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
|
||||||
|
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||||
|
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
|
||||||
|
OTHER DEALINGS IN THE FONT SOFTWARE.
|
||||||
57
public/font/inter/inter.css
Normal file
57
public/font/inter/inter.css
Normal file
|
|
@ -0,0 +1,57 @@
|
||||||
|
/* Variable fonts usage:
|
||||||
|
:root { font-family: "Inter", sans-serif; }
|
||||||
|
@supports (font-variation-settings: normal) {
|
||||||
|
:root { font-family: "InterVariable", sans-serif; font-optical-sizing: auto; }
|
||||||
|
} */
|
||||||
|
@font-face {
|
||||||
|
font-family: InterVariable;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 100 900;
|
||||||
|
font-display: swap;
|
||||||
|
src: url("InterVariable.woff2") format("woff2");
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: InterVariable;
|
||||||
|
font-style: italic;
|
||||||
|
font-weight: 100 900;
|
||||||
|
font-display: swap;
|
||||||
|
src: url("InterVariable-Italic.woff2") format("woff2");
|
||||||
|
}
|
||||||
|
|
||||||
|
/* static fonts */
|
||||||
|
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100; font-display: swap; src: url("Inter-Thin.woff2") format("woff2"); }
|
||||||
|
@font-face { font-family: "Inter"; font-style: italic; font-weight: 100; font-display: swap; src: url("Inter-ThinItalic.woff2") format("woff2"); }
|
||||||
|
@font-face { font-family: "Inter"; font-style: normal; font-weight: 200; font-display: swap; src: url("Inter-ExtraLight.woff2") format("woff2"); }
|
||||||
|
@font-face { font-family: "Inter"; font-style: italic; font-weight: 200; font-display: swap; src: url("Inter-ExtraLightItalic.woff2") format("woff2"); }
|
||||||
|
@font-face { font-family: "Inter"; font-style: normal; font-weight: 300; font-display: swap; src: url("Inter-Light.woff2") format("woff2"); }
|
||||||
|
@font-face { font-family: "Inter"; font-style: italic; font-weight: 300; font-display: swap; src: url("Inter-LightItalic.woff2") format("woff2"); }
|
||||||
|
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("Inter-Regular.woff2") format("woff2"); }
|
||||||
|
@font-face { font-family: "Inter"; font-style: italic; font-weight: 400; font-display: swap; src: url("Inter-Italic.woff2") format("woff2"); }
|
||||||
|
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("Inter-Medium.woff2") format("woff2"); }
|
||||||
|
@font-face { font-family: "Inter"; font-style: italic; font-weight: 500; font-display: swap; src: url("Inter-MediumItalic.woff2") format("woff2"); }
|
||||||
|
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("Inter-SemiBold.woff2") format("woff2"); }
|
||||||
|
@font-face { font-family: "Inter"; font-style: italic; font-weight: 600; font-display: swap; src: url("Inter-SemiBoldItalic.woff2") format("woff2"); }
|
||||||
|
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("Inter-Bold.woff2") format("woff2"); }
|
||||||
|
@font-face { font-family: "Inter"; font-style: italic; font-weight: 700; font-display: swap; src: url("Inter-BoldItalic.woff2") format("woff2"); }
|
||||||
|
@font-face { font-family: "Inter"; font-style: normal; font-weight: 800; font-display: swap; src: url("Inter-ExtraBold.woff2") format("woff2"); }
|
||||||
|
@font-face { font-family: "Inter"; font-style: italic; font-weight: 800; font-display: swap; src: url("Inter-ExtraBoldItalic.woff2") format("woff2"); }
|
||||||
|
@font-face { font-family: "Inter"; font-style: normal; font-weight: 900; font-display: swap; src: url("Inter-Black.woff2") format("woff2"); }
|
||||||
|
@font-face { font-family: "Inter"; font-style: italic; font-weight: 900; font-display: swap; src: url("Inter-BlackItalic.woff2") format("woff2"); }
|
||||||
|
@font-face { font-family: "InterDisplay"; font-style: normal; font-weight: 100; font-display: swap; src: url("InterDisplay-Thin.woff2") format("woff2"); }
|
||||||
|
@font-face { font-family: "InterDisplay"; font-style: italic; font-weight: 100; font-display: swap; src: url("InterDisplay-ThinItalic.woff2") format("woff2"); }
|
||||||
|
@font-face { font-family: "InterDisplay"; font-style: normal; font-weight: 200; font-display: swap; src: url("InterDisplay-ExtraLight.woff2") format("woff2"); }
|
||||||
|
@font-face { font-family: "InterDisplay"; font-style: italic; font-weight: 200; font-display: swap; src: url("InterDisplay-ExtraLightItalic.woff2") format("woff2"); }
|
||||||
|
@font-face { font-family: "InterDisplay"; font-style: normal; font-weight: 300; font-display: swap; src: url("InterDisplay-Light.woff2") format("woff2"); }
|
||||||
|
@font-face { font-family: "InterDisplay"; font-style: italic; font-weight: 300; font-display: swap; src: url("InterDisplay-LightItalic.woff2") format("woff2"); }
|
||||||
|
@font-face { font-family: "InterDisplay"; font-style: normal; font-weight: 400; font-display: swap; src: url("InterDisplay-Regular.woff2") format("woff2"); }
|
||||||
|
@font-face { font-family: "InterDisplay"; font-style: italic; font-weight: 400; font-display: swap; src: url("InterDisplay-Italic.woff2") format("woff2"); }
|
||||||
|
@font-face { font-family: "InterDisplay"; font-style: normal; font-weight: 500; font-display: swap; src: url("InterDisplay-Medium.woff2") format("woff2"); }
|
||||||
|
@font-face { font-family: "InterDisplay"; font-style: italic; font-weight: 500; font-display: swap; src: url("InterDisplay-MediumItalic.woff2") format("woff2"); }
|
||||||
|
@font-face { font-family: "InterDisplay"; font-style: normal; font-weight: 600; font-display: swap; src: url("InterDisplay-SemiBold.woff2") format("woff2"); }
|
||||||
|
@font-face { font-family: "InterDisplay"; font-style: italic; font-weight: 600; font-display: swap; src: url("InterDisplay-SemiBoldItalic.woff2") format("woff2"); }
|
||||||
|
@font-face { font-family: "InterDisplay"; font-style: normal; font-weight: 700; font-display: swap; src: url("InterDisplay-Bold.woff2") format("woff2"); }
|
||||||
|
@font-face { font-family: "InterDisplay"; font-style: italic; font-weight: 700; font-display: swap; src: url("InterDisplay-BoldItalic.woff2") format("woff2"); }
|
||||||
|
@font-face { font-family: "InterDisplay"; font-style: normal; font-weight: 800; font-display: swap; src: url("InterDisplay-ExtraBold.woff2") format("woff2"); }
|
||||||
|
@font-face { font-family: "InterDisplay"; font-style: italic; font-weight: 800; font-display: swap; src: url("InterDisplay-ExtraBoldItalic.woff2") format("woff2"); }
|
||||||
|
@font-face { font-family: "InterDisplay"; font-style: normal; font-weight: 900; font-display: swap; src: url("InterDisplay-Black.woff2") format("woff2"); }
|
||||||
|
@font-face { font-family: "InterDisplay"; font-style: italic; font-weight: 900; font-display: swap; src: url("InterDisplay-BlackItalic.woff2") format("woff2"); }
|
||||||
|
|
@ -1,107 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!--
|
|
||||||
experimenting with post layouts here!
|
|
||||||
don't expect anything too flashy ;3
|
|
||||||
|
|
||||||
ari melody, 2024
|
|
||||||
-->
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<title></title>
|
|
||||||
<link href="css/style.css" rel="stylesheet">
|
|
||||||
<script type="application/javascript" src="script/main.mjs" defer></script>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<audio id="sound-success" src="sound/success.wav"></audio>
|
|
||||||
<header>
|
|
||||||
|
|
||||||
</header>
|
|
||||||
<main>
|
|
||||||
<div id="feed">
|
|
||||||
<!--
|
|
||||||
<div class="post-container" aria-label="ari; hello world!~; 02:12:06">
|
|
||||||
<div class="post-context">
|
|
||||||
<span class="post-context-icon">🔁</span>
|
|
||||||
<span class="post-context-action">
|
|
||||||
<a href="/@ari">ari 💫</a> boosted this post.
|
|
||||||
</span>
|
|
||||||
<span class="post-context-time">
|
|
||||||
<time title="6/3/2024, 2:12:06 AM">2m ago</time>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<article class="post">
|
|
||||||
<div class="post-header-container">
|
|
||||||
<a href="/@ari" class="post-avatar-container">
|
|
||||||
<img src="avatar/ari.jpg" alt="" width="48" height="48" class="post-avatar" loading="lazy" decoding="async">
|
|
||||||
</a>
|
|
||||||
<header class="post-header">
|
|
||||||
<div class="post-user-info">
|
|
||||||
<a href="/@ari" class="name">ari 💫</a>
|
|
||||||
<span class="username">@ari</span>
|
|
||||||
</div>
|
|
||||||
<div class="post-info">
|
|
||||||
<a href="/post/21c892b23701" class="created-at">
|
|
||||||
<time title="6/3/2024, 2:11:58 AM">10m ago</time>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
</div>
|
|
||||||
<div class="post-body">
|
|
||||||
<span class="post-content">hello world!~</span>
|
|
||||||
<div class="post-media-container" data-count="3">
|
|
||||||
<div class="post-media image">
|
|
||||||
<a href="media/ariyeah-button.png">
|
|
||||||
<img src="media/ariyeah-button.png" alt="custom miiverse "yeah!" button" loading="lazy" decoding="async">
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="post-media image">
|
|
||||||
<a href="media/beer.jpg">
|
|
||||||
<img src="media/beer.jpg" alt="barney calhoun with beer" loading="lazy" decoding="async">
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="post-media image">
|
|
||||||
<a href="media/duck.jpg">
|
|
||||||
<img src="media/duck.jpg" alt="big rubber duck" loading="lazy" decoding="async">
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<footer class="post-footer">
|
|
||||||
<div class="post-reactions">
|
|
||||||
<button type="button" class="reaction">
|
|
||||||
<span>⭐</span>
|
|
||||||
<span class="count">52</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div class="post-actions">
|
|
||||||
<button type="button" class="reply" aria-label="Reply" title="Reply">
|
|
||||||
<span>🗨️</span>
|
|
||||||
<span class="count">7</span>
|
|
||||||
</button>
|
|
||||||
<button type="button" class="boost" aria-label="Boost" title="Boost">
|
|
||||||
<span>🔁</span>
|
|
||||||
<span class="count">13</span>
|
|
||||||
</button>
|
|
||||||
<button type="button" class="favourite" aria-label="Favourite" title="Favourite">
|
|
||||||
<span>⭐</span>
|
|
||||||
</button>
|
|
||||||
<button type="button" class="react" aria-label="React" title="React">
|
|
||||||
<span>😃</span>
|
|
||||||
</button>
|
|
||||||
<button type="button" class="quote" aria-label="Quote" title="Quote">
|
|
||||||
<span>🗣️</span>
|
|
||||||
</button>
|
|
||||||
<button type="button" class="more" aria-label="More" title="More">
|
|
||||||
<span>🛠️</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
</article>
|
|
||||||
</div>
|
|
||||||
-->
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,302 +0,0 @@
|
||||||
const aria_safe_regex = /([\u2700-\u27BF]|[\uE000-\uF8FF]|\uD83C[\uDC00-\uDFFF]|\uD83D[\uDC00-\uDFFF]|[\u2011-\u26FF]|\uD83E[\uDD10-\uDDFF]|[\r])/g;
|
|
||||||
const INSTANCE_URL = "soc.arimelody.me";
|
|
||||||
|
|
||||||
const sounds = {
|
|
||||||
"default": new Audio("sound/log.ogg"),
|
|
||||||
"post": new Audio("sound/success.ogg"),
|
|
||||||
"boost": new Audio("sound/hello.ogg"),
|
|
||||||
};
|
|
||||||
|
|
||||||
const actors = {
|
|
||||||
"@ari": {
|
|
||||||
"url": "https://soc.arimelody.me/@ari",
|
|
||||||
"name": "ari 💫",
|
|
||||||
"avatar": "avatar/ari.jpg",
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const test_post = {
|
|
||||||
"context": {
|
|
||||||
"type": "boost",
|
|
||||||
"by": "@ari",
|
|
||||||
"at": 1718513838624,
|
|
||||||
},
|
|
||||||
"author": "@ari",
|
|
||||||
"url": "/post/21c892b23701",
|
|
||||||
"at": 1718513988384,
|
|
||||||
"content": "hello world!~",
|
|
||||||
"media": [
|
|
||||||
{ "url": "media/ariyeah-button.png", "alt": "custom miiverse \"yeah!\" button" },
|
|
||||||
{ "url": "media/beer.jpg", "alt": "barney calhoun with beer" },
|
|
||||||
{ "url": "media/duck.jpg", "alt": "big rubber duck" },
|
|
||||||
],
|
|
||||||
"replies": 7,
|
|
||||||
"boosts": 13,
|
|
||||||
"reactions": [
|
|
||||||
{ "react": "⭐", "count": "52" },
|
|
||||||
{ "react": "❤️", "count": "9" },
|
|
||||||
],
|
|
||||||
};
|
|
||||||
|
|
||||||
const feed = document.getElementById("feed");
|
|
||||||
|
|
||||||
function render_post(data) {
|
|
||||||
// TODO: please god just use or make a library to build this
|
|
||||||
|
|
||||||
const actor = actors[data.author];
|
|
||||||
if (!actor) return;
|
|
||||||
const date = new Date(data.at);
|
|
||||||
|
|
||||||
const post = document.createElement("article");
|
|
||||||
post.classList.add("post-container");
|
|
||||||
post.ariaLabel = actor.name.replace(aria_safe_regex, "").trim() + "; " + data.content + "; " + date.toLocaleTimeString();
|
|
||||||
|
|
||||||
if (data.context && data.context.by && actors[data.context.by]) {
|
|
||||||
// post context
|
|
||||||
const post_context = document.createElement("div");
|
|
||||||
post_context.classList.add("post-context");
|
|
||||||
|
|
||||||
if (data.context.type == "boost") {
|
|
||||||
const post_context_icon = document.createElement("span");
|
|
||||||
post_context_icon.classList.add("post-context-icon");
|
|
||||||
post_context_icon.innerText = "🔁";
|
|
||||||
post_context.appendChild(post_context_icon);
|
|
||||||
|
|
||||||
const post_context_action = document.createElement("span");
|
|
||||||
post_context_action.classList.add("post-context-action");
|
|
||||||
const actor = actors[data.context.by];
|
|
||||||
post_context_action.innerHTML = `boosted by <a href="${actor.url}">${actor.name}</a>`;
|
|
||||||
post_context.appendChild(post_context_action);
|
|
||||||
|
|
||||||
const post_context_time = document.createElement("span");
|
|
||||||
post_context_time.classList.add("post-context-time");
|
|
||||||
post_context_time.innerHTML = `<time>${new Date(data.context.at).toLocaleString()}</time>`;
|
|
||||||
post_context.appendChild(post_context_time);
|
|
||||||
}
|
|
||||||
|
|
||||||
post.appendChild(post_context);
|
|
||||||
}
|
|
||||||
|
|
||||||
// the actual post
|
|
||||||
// article.post
|
|
||||||
const post_article = document.createElement("article");
|
|
||||||
|
|
||||||
const post_header_container = document.createElement("div");
|
|
||||||
post_header_container.classList.add("post-header-container");
|
|
||||||
const post_avatar_container = document.createElement("a");
|
|
||||||
post_avatar_container.classList.add("post-avatar-container");
|
|
||||||
post_avatar_container.href = actor.url;
|
|
||||||
const post_avatar = document.createElement("img");
|
|
||||||
post_avatar.classList.add("post-avatar");
|
|
||||||
post_avatar.src = actor.avatar;
|
|
||||||
post_avatar.alt = "";
|
|
||||||
post_avatar.width = 48;
|
|
||||||
post_avatar.height = 48;
|
|
||||||
post_avatar.loading = "lazy";
|
|
||||||
post_avatar.decoding = "async";
|
|
||||||
post_avatar_container.appendChild(post_avatar);
|
|
||||||
post_header_container.appendChild(post_avatar_container);
|
|
||||||
|
|
||||||
const post_header = document.createElement("header");
|
|
||||||
post_header.classList.add("post-header");
|
|
||||||
const post_user_info = document.createElement("div");
|
|
||||||
post_user_info.classList.add("post-user-info");
|
|
||||||
const post_user_info_name = document.createElement("a");
|
|
||||||
post_user_info_name.classList.add("name");
|
|
||||||
post_user_info_name.href = actor.url;
|
|
||||||
post_user_info_name.innerText = actor.name
|
|
||||||
post_user_info.appendChild(post_user_info_name);
|
|
||||||
const post_user_info_username = document.createElement("span");
|
|
||||||
post_user_info_username.classList.add("username");
|
|
||||||
post_user_info_username.href = actor.url;
|
|
||||||
post_user_info_username.innerText = data.author
|
|
||||||
post_user_info.appendChild(post_user_info_username);
|
|
||||||
post_header.appendChild(post_user_info);
|
|
||||||
const post_info = document.createElement("div");
|
|
||||||
post_info.classList.add("post-info");
|
|
||||||
const post_info_time = document.createElement("a");
|
|
||||||
post_info_time.classList.add("created-at");
|
|
||||||
const post_date = new Date(data.at);
|
|
||||||
post_info_time.innerHTML = `<time title=${post_date.toLocaleString()}>${post_date.toLocaleString()}</time>`;
|
|
||||||
post_info_time.href = post.url;
|
|
||||||
post_info.appendChild(post_info_time);
|
|
||||||
post_header.appendChild(post_info);
|
|
||||||
post_header_container.appendChild(post_header);
|
|
||||||
|
|
||||||
post_article.appendChild(post_header_container);
|
|
||||||
|
|
||||||
|
|
||||||
const post_body = document.createElement("div");
|
|
||||||
post_body.classList.add("post-body");
|
|
||||||
|
|
||||||
const post_content = document.createElement("span");
|
|
||||||
post_content.classList.add("post-content");
|
|
||||||
post_content.innerText = data.content;
|
|
||||||
post_body.appendChild(post_content);
|
|
||||||
|
|
||||||
const media_container = document.createElement("div");
|
|
||||||
media_container.classList.add("post-media-container");
|
|
||||||
media_container.dataset.count = data.media.length;
|
|
||||||
data.media.forEach(media => {
|
|
||||||
const media_item = document.createElement("div");
|
|
||||||
media_item.classList.add("post-media");
|
|
||||||
const link = document.createElement("a");
|
|
||||||
link.href = media.url;
|
|
||||||
const source = document.createElement("img");
|
|
||||||
source.src = media.url;
|
|
||||||
source.alt = media.alt;
|
|
||||||
source.loading = "lazy";
|
|
||||||
source.decoding = "async";
|
|
||||||
link.appendChild(source);
|
|
||||||
media_item.appendChild(link);
|
|
||||||
media_container.appendChild(media_item);
|
|
||||||
});
|
|
||||||
post_body.appendChild(media_container);
|
|
||||||
|
|
||||||
post_article.appendChild(post_body);
|
|
||||||
|
|
||||||
|
|
||||||
const post_footer = document.createElement("footer");
|
|
||||||
post_footer.classList.add("post-footer");
|
|
||||||
|
|
||||||
const post_reactions = document.createElement("div");
|
|
||||||
post_reactions.classList.add("post-reactions");
|
|
||||||
data.reactions.forEach(reaction => {
|
|
||||||
const btn = document.createElement("button");
|
|
||||||
btn.classList.add("reaction");
|
|
||||||
btn.type = "button";
|
|
||||||
const emote = document.createElement("span");
|
|
||||||
emote.innerText = reaction.react;
|
|
||||||
btn.appendChild(emote);
|
|
||||||
const count = document.createElement("span");
|
|
||||||
count.classList.add("count");
|
|
||||||
count.innerText = reaction.count;
|
|
||||||
btn.appendChild(count);
|
|
||||||
post_reactions.appendChild(btn);
|
|
||||||
});
|
|
||||||
post_footer.appendChild(post_reactions);
|
|
||||||
|
|
||||||
const post_actions = document.createElement("div");
|
|
||||||
post_actions.classList.add("post-actions");
|
|
||||||
|
|
||||||
const reply_button = document.createElement("button");
|
|
||||||
reply_button.type = "button";
|
|
||||||
reply_button.ariaLabel = "Reply";
|
|
||||||
reply_button.title = "Reply";
|
|
||||||
reply_button.innerHTML = `<span>🗨️</span><span class="count">${data.replies}</count>`;
|
|
||||||
post_actions.appendChild(reply_button);
|
|
||||||
|
|
||||||
const boost_button = document.createElement("button");
|
|
||||||
boost_button.type = "button";
|
|
||||||
boost_button.ariaLabel = "Boost";
|
|
||||||
boost_button.title = "Boost";
|
|
||||||
boost_button.innerHTML = `<span>🔁</span><span class="count">${data.boosts}</count>`;
|
|
||||||
post_actions.appendChild(boost_button);
|
|
||||||
|
|
||||||
const fav_button = document.createElement("button");
|
|
||||||
fav_button.type = "button";
|
|
||||||
fav_button.ariaLabel = "Favourite";
|
|
||||||
fav_button.title = "Favourite";
|
|
||||||
fav_button.innerText = "⭐";
|
|
||||||
post_actions.appendChild(fav_button);
|
|
||||||
|
|
||||||
const react_button = document.createElement("button");
|
|
||||||
react_button.type = "button";
|
|
||||||
react_button.ariaLabel = "React";
|
|
||||||
react_button.title = "React";
|
|
||||||
react_button.innerText = "😃";
|
|
||||||
post_actions.appendChild(react_button);
|
|
||||||
|
|
||||||
const quote_button = document.createElement("button");
|
|
||||||
quote_button.type = "button";
|
|
||||||
quote_button.ariaLabel = "Quote";
|
|
||||||
quote_button.title = "Quote";
|
|
||||||
quote_button.innerText = "🗣️";
|
|
||||||
post_actions.appendChild(quote_button);
|
|
||||||
|
|
||||||
const more_button = document.createElement("button");
|
|
||||||
more_button.type = "button";
|
|
||||||
more_button.ariaLabel = "More";
|
|
||||||
more_button.title = "More";
|
|
||||||
more_button.innerText = "⚒️";
|
|
||||||
post_actions.appendChild(more_button);
|
|
||||||
|
|
||||||
post_footer.appendChild(post_actions);
|
|
||||||
|
|
||||||
post_article.appendChild(post_footer);
|
|
||||||
|
|
||||||
|
|
||||||
post.appendChild(post_article);
|
|
||||||
|
|
||||||
return post;
|
|
||||||
};
|
|
||||||
|
|
||||||
function hook_post_listeners(post) {
|
|
||||||
post.querySelectorAll("button").forEach(button => {
|
|
||||||
button.addEventListener("click", () => {
|
|
||||||
if (button.classList.contains("reaction")) {
|
|
||||||
toggle_reaction(button);
|
|
||||||
}
|
|
||||||
|
|
||||||
switch (button.ariaLabel) {
|
|
||||||
case "Reply":
|
|
||||||
play_sound("post");
|
|
||||||
break;
|
|
||||||
|
|
||||||
case "Boost":
|
|
||||||
play_sound("boost");
|
|
||||||
break;
|
|
||||||
|
|
||||||
case "Favourite":
|
|
||||||
post.querySelectorAll("button.reaction").forEach(reaction => {
|
|
||||||
if (!reaction.innerText.startsWith("⭐")) return;
|
|
||||||
toggle_reaction(reaction);
|
|
||||||
});
|
|
||||||
play_sound();
|
|
||||||
break;
|
|
||||||
|
|
||||||
default:
|
|
||||||
play_sound();
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function toggle_reaction(reaction) {
|
|
||||||
const was_active = reaction.classList.contains("active");
|
|
||||||
reaction.classList.toggle("active");
|
|
||||||
const count = reaction.querySelector(".count");
|
|
||||||
count.innerText = Number(count.innerText) + (was_active ? -1 : 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
function load_content() {
|
|
||||||
for (let i = 0; i < 10; i++) {
|
|
||||||
const post = render_post(test_post);
|
|
||||||
feed.appendChild(post);
|
|
||||||
hook_post_listeners(post);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function play_sound(name) {
|
|
||||||
if (!name) name = "default";
|
|
||||||
const sound = sounds[name];
|
|
||||||
if (!sound) {
|
|
||||||
console.warn(`Attempted to play sound "${name}", which does not exist!`);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
sound.pause();
|
|
||||||
sound.currentTime = 0;
|
|
||||||
sound.play();
|
|
||||||
}
|
|
||||||
|
|
||||||
feed.querySelectorAll(".post-container").forEach(post => {
|
|
||||||
hook_post_listeners(post);
|
|
||||||
});
|
|
||||||
load_content();
|
|
||||||
|
|
||||||
document.addEventListener("scroll", event => {
|
|
||||||
while (window.innerHeight + window.scrollY >= document.body.offsetHeight - 1000) {
|
|
||||||
load_content();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
154
src/App.svelte
Normal file
154
src/App.svelte
Normal file
|
|
@ -0,0 +1,154 @@
|
||||||
|
<script>
|
||||||
|
import Feed from './Feed.svelte';
|
||||||
|
import Error from './Error.svelte';
|
||||||
|
import Instance from './instance.js';
|
||||||
|
|
||||||
|
let ready = false;
|
||||||
|
if (localStorage.getItem("fedi_host") && localStorage.getItem("fedi_token")) {
|
||||||
|
Instance.setup(
|
||||||
|
localStorage.getItem("fedi_host"),
|
||||||
|
localStorage.getItem("fedi_token"),
|
||||||
|
true
|
||||||
|
).then(() => {
|
||||||
|
ready = true;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function log_in(event) {
|
||||||
|
event.preventDefault();
|
||||||
|
localStorage.setItem("fedi_host", event.target.instance_host.value);
|
||||||
|
localStorage.setItem("fedi_token", event.target.session_token.value);
|
||||||
|
location = location;
|
||||||
|
}
|
||||||
|
|
||||||
|
function log_out() {
|
||||||
|
localStorage.removeItem("fedi_host");
|
||||||
|
localStorage.removeItem("fedi_token");
|
||||||
|
location = location;
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<header>
|
||||||
|
<h1>space social</h1>
|
||||||
|
<p>social media for the galaxy-wide-web! 🌌</p>
|
||||||
|
<button id="log-out" on:click={log_out}>log out</button>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
{#if ready}
|
||||||
|
<Feed />
|
||||||
|
{:else if !Instance.get_instance().ok}
|
||||||
|
<Error>
|
||||||
|
<p>this app requires a <strong>instance host</strong> and <strong>session token</strong> to work! you may enter these below:</p>
|
||||||
|
|
||||||
|
<form on:submit={data => (log_in(data))}>
|
||||||
|
<label for="instance host">instance host: </label>
|
||||||
|
<input type="text" id="instance_host">
|
||||||
|
<br>
|
||||||
|
<label for="session token">session token: </label>
|
||||||
|
<input type="password" id="session_token">
|
||||||
|
<br>
|
||||||
|
<button type="submit" id="log-in">log in</button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<h4>how do i get these?</h4>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<strong>instance host</strong> refers to the domain of your fediverse instance. i.e. <code>ice.arimelody.me</code>.
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
a <strong>token</strong> is a unique code that grants applications permission to act on your behalf.
|
||||||
|
you can find it in your browser's cookies for your instance.
|
||||||
|
(instructions for <a href="https://support.mozilla.org/en-US/questions/1219653">firefox</a>
|
||||||
|
and <a href="https://superuser.com/questions/1715037/how-can-i-view-the-content-of-cookies-in-chrome">chrome</a>)
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<p><small>
|
||||||
|
your login credentials will not be saved to an external server.
|
||||||
|
they are required for communication with the fediverse instance, and are saved entirely within your browser.
|
||||||
|
a cleaner login flow will be built in the future.
|
||||||
|
</small></p>
|
||||||
|
<p><small>
|
||||||
|
oh yeah i should also probably mention this is <strong><em>extremely experimental software</em></strong>;
|
||||||
|
even if you use the exact same instance as me, you may encounter problems.
|
||||||
|
if that's all cool with you, welcome aboard!
|
||||||
|
</small></p>
|
||||||
|
|
||||||
|
<p>made with ❤️ by <a href="https://arimelody.me">ari melody</a>, 2024</p>
|
||||||
|
</Error>
|
||||||
|
{/if}
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
header {
|
||||||
|
width: min(768px, calc(100vw - 32px));
|
||||||
|
margin: 16px auto;
|
||||||
|
padding: 0 16px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
color: var(--accent);
|
||||||
|
margin: 0 16px 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
width: min(800px, calc(100vw - 16px));
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: var(--accent);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="text"], input[type="password"] {
|
||||||
|
margin-bottom: 8px;
|
||||||
|
padding: 4px 6px;
|
||||||
|
font-family: inherit;
|
||||||
|
border: none;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
button#log-in, button#log-out {
|
||||||
|
margin-left: auto;
|
||||||
|
padding: 8px 12px;
|
||||||
|
font-size: 1em;
|
||||||
|
background-color: var(--bg2);
|
||||||
|
color: inherit;
|
||||||
|
border: none;
|
||||||
|
border-radius: 16px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: color .1s, background-color .1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
button#log-in.active, button#log-out.active {
|
||||||
|
background: var(--accent);
|
||||||
|
color: var(--bg0);
|
||||||
|
}
|
||||||
|
|
||||||
|
button#log-in:hover, button#log-out:hover {
|
||||||
|
color: var(--bg0);
|
||||||
|
background: var(--fg0);
|
||||||
|
}
|
||||||
|
|
||||||
|
button#log-in:active, button#log-out:active {
|
||||||
|
background: #0001;
|
||||||
|
}
|
||||||
|
|
||||||
|
code {
|
||||||
|
font-size: 1.2em;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
26
src/Error.svelte
Normal file
26
src/Error.svelte
Normal file
|
|
@ -0,0 +1,26 @@
|
||||||
|
<script>
|
||||||
|
export let msg = "";
|
||||||
|
export let trace = "";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="error">
|
||||||
|
{#if msg}
|
||||||
|
<p class="msg">{@html msg}</p>
|
||||||
|
{/if}
|
||||||
|
{#if trace}
|
||||||
|
<pre class="trace">{trace}</pre>
|
||||||
|
{/if}
|
||||||
|
<slot></slot>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.error {
|
||||||
|
margin-top: 16px;
|
||||||
|
padding: 20px 32px;
|
||||||
|
border: 1px solid #8884;
|
||||||
|
border-radius: 16px;
|
||||||
|
background-color: var(--bg1);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
</style>
|
||||||
49
src/Feed.svelte
Normal file
49
src/Feed.svelte
Normal file
|
|
@ -0,0 +1,49 @@
|
||||||
|
<script>
|
||||||
|
import Post from './post/Post.svelte';
|
||||||
|
import Error from './Error.svelte';
|
||||||
|
import Instance from './instance.js';
|
||||||
|
|
||||||
|
let posts = [];
|
||||||
|
let loading = false;
|
||||||
|
|
||||||
|
let error;
|
||||||
|
|
||||||
|
async function load_posts() {
|
||||||
|
if (loading) return; // no spamming!!
|
||||||
|
loading = true;
|
||||||
|
|
||||||
|
let new_posts = [];
|
||||||
|
if (posts.length === 0) new_posts = await Instance.get_timeline()
|
||||||
|
else new_posts = await Instance.get_timeline(posts[posts.length - 1].id);
|
||||||
|
|
||||||
|
if (!new_posts) {
|
||||||
|
error = `sorry! the frontend is unable to communicate with your server.
|
||||||
|
|
||||||
|
this app is still in very early development, and is currently only built to support iceshrimp.
|
||||||
|
|
||||||
|
for more information, please consult the developer console.`;
|
||||||
|
loading = false;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
posts = [...posts, ...new_posts];
|
||||||
|
|
||||||
|
loading = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
load_posts();
|
||||||
|
document.addEventListener("scroll", event => {
|
||||||
|
if (!loading && window.innerHeight + window.scrollY >= document.body.offsetHeight - 2048) {
|
||||||
|
load_posts();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div id="feed">
|
||||||
|
{#if error}
|
||||||
|
<Error msg={error.replaceAll('\n', '<br>')} />
|
||||||
|
{/if}
|
||||||
|
{#each posts as post}
|
||||||
|
<Post post={post} />
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
20
src/app.css
Normal file
20
src/app.css
Normal file
|
|
@ -0,0 +1,20 @@
|
||||||
|
@import url("/font/inter/inter.css");
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--fg0: #eee;
|
||||||
|
--bg0: #080808;
|
||||||
|
--bg1: #101010;
|
||||||
|
--bg2: #121212;
|
||||||
|
--accent: #b7fd49;
|
||||||
|
--accent-bg: #242b1a;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
color: var(--fg0);
|
||||||
|
background-color: var(--bg0);
|
||||||
|
|
||||||
|
font-family: "Inter", sans-serif;
|
||||||
|
}
|
||||||
93
src/emoji.js
Normal file
93
src/emoji.js
Normal file
|
|
@ -0,0 +1,93 @@
|
||||||
|
import Instance from './instance.js';
|
||||||
|
|
||||||
|
const EMOJI_REGEX = /:[a-z0-9_\-]+:/g;
|
||||||
|
|
||||||
|
let emoji_cache = [];
|
||||||
|
|
||||||
|
export default class Emoji {
|
||||||
|
name;
|
||||||
|
host;
|
||||||
|
url;
|
||||||
|
width;
|
||||||
|
height;
|
||||||
|
|
||||||
|
static parse(data, host) {
|
||||||
|
const instance = Instance.get_instance();
|
||||||
|
let emoji = null;
|
||||||
|
switch (instance.type) {
|
||||||
|
case Instance.types.ICESHRIMP:
|
||||||
|
emoji = Emoji.#parse_iceshrimp(data);
|
||||||
|
break;
|
||||||
|
case Instance.types.MASTODON:
|
||||||
|
emoji = Emoji.#parse_mastodon(data);
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
if (emoji !== null) emoji_cache.push(emoji);
|
||||||
|
return emoji;
|
||||||
|
}
|
||||||
|
|
||||||
|
static #parse_iceshrimp(data, host) {
|
||||||
|
let emoji = new Emoji()
|
||||||
|
emoji.name = data.name.substring(1, data.name.search('@'));
|
||||||
|
emoji.host = host;
|
||||||
|
emoji.url = data.url;
|
||||||
|
emoji.width = data.width;
|
||||||
|
emoji.height = data.height;
|
||||||
|
return emoji;
|
||||||
|
}
|
||||||
|
|
||||||
|
static #parse_mastodon(data, host) {
|
||||||
|
let emoji = new Emoji()
|
||||||
|
emoji.name = data.shortcode;
|
||||||
|
emoji.host = host;
|
||||||
|
emoji.url = data.url;
|
||||||
|
emoji.width = data.width;
|
||||||
|
emoji.height = data.height;
|
||||||
|
return emoji;
|
||||||
|
}
|
||||||
|
|
||||||
|
get id() {
|
||||||
|
return this.name + '@' + this.host;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function parse_text(text, ignore_instance) {
|
||||||
|
if (!text) return text;
|
||||||
|
|
||||||
|
let index = text.search(EMOJI_REGEX);
|
||||||
|
if (index === -1) return text;
|
||||||
|
index++;
|
||||||
|
|
||||||
|
// find the emoji name
|
||||||
|
let length = 0;
|
||||||
|
while (index + length < text.length && text[index + length] !== ':') length++;
|
||||||
|
let emoji_name = ':' + text.substring(index, index + length) + ':';
|
||||||
|
|
||||||
|
// does this emoji exist?
|
||||||
|
let emoji;
|
||||||
|
for (let cached in emoji_cache) {
|
||||||
|
if (cached.id === emoji_name) {
|
||||||
|
emoji = cached;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!emoji) return text.substring(0, index + length) + parse_text(text.substring(index + length));
|
||||||
|
|
||||||
|
// replace emoji code with <img>
|
||||||
|
const img = `<img src="${emoji.url}" class="emoji" width="26" height="26" title=":${emoji_name}:" alt="${emoji_name}">`;
|
||||||
|
return text.substring(0, index - 1) + img +
|
||||||
|
parse(text.substring(index + length + 1), emojis, ignore_instance);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function parse_one(reaction, emojis) {
|
||||||
|
if (reaction == '❤') return '❤️'; // stupid heart unicode
|
||||||
|
if (!reaction.startsWith(':') || !reaction.endsWith(':')) return reaction;
|
||||||
|
for (let i = 0; i < emojis.length; i++) {
|
||||||
|
if (emojis[i].name == reaction.substring(1, reaction.length - 1))
|
||||||
|
return `<img src="${emojis[i].url}" class="emoji" width="26" height="26" title="${reaction}" alt="${emojis[i].name}">`;
|
||||||
|
}
|
||||||
|
return reaction;
|
||||||
|
}
|
||||||
107
src/instance.js
Normal file
107
src/instance.js
Normal file
|
|
@ -0,0 +1,107 @@
|
||||||
|
import Post from './post/post.js';
|
||||||
|
|
||||||
|
let instance;
|
||||||
|
|
||||||
|
const ERR_UNSUPPORTED = "Unsupported server";
|
||||||
|
const ERR_SERVER_RESPONSE = "Unsupported response from the server";
|
||||||
|
|
||||||
|
export default class Instance {
|
||||||
|
#host;
|
||||||
|
#token;
|
||||||
|
#type;
|
||||||
|
#secure;
|
||||||
|
|
||||||
|
static types = {
|
||||||
|
ICESHRIMP: "iceshrimp",
|
||||||
|
MASTODON: "mastodon",
|
||||||
|
MISSKEY: "misskey",
|
||||||
|
AKKOMA: "akkoma",
|
||||||
|
};
|
||||||
|
|
||||||
|
static get_instance() {
|
||||||
|
if (!instance) instance = new Instance();
|
||||||
|
return instance;
|
||||||
|
}
|
||||||
|
|
||||||
|
static async setup(host, token, secure) {
|
||||||
|
instance = Instance.get_instance();
|
||||||
|
instance.host = host;
|
||||||
|
instance.token = token;
|
||||||
|
instance.secure = secure;
|
||||||
|
await instance.#guess_type();
|
||||||
|
}
|
||||||
|
|
||||||
|
async #guess_type() {
|
||||||
|
const url = instance.#proto + instance.host + "/api/v1/instance";
|
||||||
|
console.log("Snooping for instance information at " + url + "...");
|
||||||
|
const res = await fetch(url);
|
||||||
|
const data = await res.json();
|
||||||
|
const version = data.version.toLowerCase();
|
||||||
|
|
||||||
|
instance.type = Instance.types.MASTODON;
|
||||||
|
if (version.search("iceshrimp") !== -1) instance.type = Instance.types.ICESHRIMP;
|
||||||
|
if (version.search("misskey") !== -1) instance.type = Instance.types.MISSKEY;
|
||||||
|
if (version.search("akkoma") !== -1) instance.type = Instance.types.AKKOMA;
|
||||||
|
|
||||||
|
console.log("Assumed server type to be \"" + instance.type + "\".");
|
||||||
|
}
|
||||||
|
|
||||||
|
static async get_timeline(last_post_id) {
|
||||||
|
let data = null;
|
||||||
|
switch (instance.type) {
|
||||||
|
case Instance.types.ICESHRIMP:
|
||||||
|
data = await instance.#get_timeline_iceshrimp(last_post_id);
|
||||||
|
break;
|
||||||
|
case Instance.types.MASTODON:
|
||||||
|
data = await instance.#get_timeline_mastodon(last_post_id);
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
console.error(ERR_UNSUPPORTED);
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
if (data.constructor != Array) {
|
||||||
|
console.error(ERR_SERVER_RESPONSE);
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
let posts = [];
|
||||||
|
data.forEach(post_data => {
|
||||||
|
const post = Post.parse(post_data);
|
||||||
|
if (!post) return;
|
||||||
|
posts = [...posts, post];
|
||||||
|
});
|
||||||
|
return posts;
|
||||||
|
}
|
||||||
|
|
||||||
|
async #get_timeline_iceshrimp(last_post_id) {
|
||||||
|
let body = Object;
|
||||||
|
if (last_post_id) body.untilId = last_post_id;
|
||||||
|
const res = await fetch(this.#proto + this.host + "/api/notes/timeline", {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { "Authorization": "Bearer " + this.token },
|
||||||
|
body: JSON.stringify(body)
|
||||||
|
});
|
||||||
|
return await res.json();
|
||||||
|
}
|
||||||
|
|
||||||
|
async #get_timeline_mastodon(last_post_id) {
|
||||||
|
let url = this.#proto + this.host + "/api/v1/timelines/home";
|
||||||
|
if (last_post_id) url += "?max_id=" + last_post_id;
|
||||||
|
const res = await fetch(url, {
|
||||||
|
method: 'GET',
|
||||||
|
headers: { "Authorization": "Bearer " + this.token }
|
||||||
|
});
|
||||||
|
return await res.json();
|
||||||
|
}
|
||||||
|
|
||||||
|
get #proto() {
|
||||||
|
if (this.secure) return "https://";
|
||||||
|
return "http://";
|
||||||
|
}
|
||||||
|
|
||||||
|
static get ok() {
|
||||||
|
if (!instance) return false;
|
||||||
|
if (!instance.host) return false;
|
||||||
|
if (!instance.token) return false;
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
}
|
||||||
9
src/main.js
Normal file
9
src/main.js
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
import './app.css';
|
||||||
|
import App from './App.svelte';
|
||||||
|
import Instance from './instance.js';
|
||||||
|
|
||||||
|
const app = new App({
|
||||||
|
target: document.getElementById('app')
|
||||||
|
});
|
||||||
|
|
||||||
|
export default app;
|
||||||
166
src/post/Body.svelte
Normal file
166
src/post/Body.svelte
Normal file
|
|
@ -0,0 +1,166 @@
|
||||||
|
<script>
|
||||||
|
export let post;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="post-body">
|
||||||
|
{#if post.warning}
|
||||||
|
<p class="post-warning"><strong>{post.warning}</strong></p>
|
||||||
|
{/if}
|
||||||
|
{#if post.text}
|
||||||
|
<span class="post-text">{@html post.rich_text}</span>
|
||||||
|
{/if}
|
||||||
|
<div class="post-media-container" data-count={post.files.length}>
|
||||||
|
{#each post.files as file}
|
||||||
|
<div class="post-media image">
|
||||||
|
<a href={file.url}>
|
||||||
|
<img src={file.url} alt={file.alt} height="200" loading="lazy" decoding="async">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
{#if post.boost && post.text}
|
||||||
|
<p class="post-warning"><strong>this is quoting a post! quotes are not supported yet.</strong></p>
|
||||||
|
<!-- TODO: quotes support -->
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.post-body {
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-warning {
|
||||||
|
padding: 4px 8px;
|
||||||
|
--warn-bg: rgba(255,220,30,.2);
|
||||||
|
background-image: repeating-linear-gradient(-45deg, transparent, transparent 10px, var(--warn-bg) 10px, var(--warn-bg) 20px);
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-text {
|
||||||
|
word-wrap: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-text :global(code) {
|
||||||
|
font-size: 1.2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-text :global(code:has(pre)) {
|
||||||
|
margin: 8px 0;
|
||||||
|
padding: 8px;
|
||||||
|
display: block;
|
||||||
|
overflow-x: scroll;
|
||||||
|
border-radius: 8px;
|
||||||
|
background-color: #080808;
|
||||||
|
color: var(--accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-text :global(code pre) {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-text :global(a) {
|
||||||
|
color: var(--accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-text :global(a.mention) {
|
||||||
|
color: var(--accent);
|
||||||
|
padding: 6px 6px;
|
||||||
|
margin: -6px 0;
|
||||||
|
background: var(--accent-bg);
|
||||||
|
border-radius: 6px;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-text :global(a.mention:hover) {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-text :global(a.hashtag) {
|
||||||
|
background-color: transparent;
|
||||||
|
padding: 0;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-text :global(.mention-avatar) {
|
||||||
|
position: relative;
|
||||||
|
top: 4px;
|
||||||
|
height: 20px;
|
||||||
|
margin-right: 4px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-media-container {
|
||||||
|
max-height: 540px;
|
||||||
|
margin-top: 8px;
|
||||||
|
display: grid;
|
||||||
|
grid-gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-media-container[data-count="1"] {
|
||||||
|
grid-template-rows: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-media-container[data-count="2"] {
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
grid-template-rows: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-media-container[data-count="3"] {
|
||||||
|
grid-template-columns: 1fr .5fr;
|
||||||
|
grid-template-rows: 1fr 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-media-container[data-count="4"] {
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
grid-template-rows: 1fr 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-media {
|
||||||
|
border-radius: 12px;
|
||||||
|
background-color: #000;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-media a {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: block;
|
||||||
|
cursor: zoom-in;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-media a img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: block;
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-media-container > :nth-child(1) {
|
||||||
|
grid-column: 1/2;
|
||||||
|
grid-row: 1/2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-media-container[data-count="3"] > :nth-child(1) {
|
||||||
|
grid-row: 1/3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-media-container > :nth-child(2) {
|
||||||
|
grid-column: 2/2;
|
||||||
|
grid-row: 1/2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-media-container > :nth-child(3) {
|
||||||
|
grid-column: 1/2;
|
||||||
|
grid-row: 2/2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-media-container[data-count="3"] > :nth-child(3) {
|
||||||
|
grid-column: 2/2;
|
||||||
|
grid-row: 2/2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-media-container > :nth-child(4) {
|
||||||
|
grid-column: 2/2;
|
||||||
|
grid-row: 2/2;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
52
src/post/BoostContext.svelte
Normal file
52
src/post/BoostContext.svelte
Normal file
|
|
@ -0,0 +1,52 @@
|
||||||
|
<script>
|
||||||
|
import { parse_text as parse_emojis } from '../emoji.js';
|
||||||
|
import { shorthand as short_time } from '../time.js';
|
||||||
|
|
||||||
|
export let post;
|
||||||
|
|
||||||
|
let time_string = post.created_at.toLocaleString();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="post-context">
|
||||||
|
<span class="post-context-icon">🔁</span>
|
||||||
|
<span class="post-context-action">
|
||||||
|
<a href="/{post.user.mention}">{@html parse_emojis(post.user.name, post.user.emojis, true)}</a> boosted this post.
|
||||||
|
</span>
|
||||||
|
<span class="post-context-time">
|
||||||
|
<time title="{time_string}">{short_time(post.created_at)}</time>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.post-context {
|
||||||
|
margin-bottom: 8px;
|
||||||
|
padding-left: 58px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
color: var(--accent);
|
||||||
|
opacity: .8;
|
||||||
|
transition: opacity .1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-container:hover .post-context {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-context-icon {
|
||||||
|
margin-right: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-context a,
|
||||||
|
.post-context a:visited {
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.post-context a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-context-time {
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
54
src/post/FooterButton.svelte
Normal file
54
src/post/FooterButton.svelte
Normal file
|
|
@ -0,0 +1,54 @@
|
||||||
|
<script>
|
||||||
|
import { play_sound } from '../sound.js';
|
||||||
|
|
||||||
|
export let icon = "🔧";
|
||||||
|
export let type = "action";
|
||||||
|
export let label = "Action";
|
||||||
|
export let title = label;
|
||||||
|
export let count = 0;
|
||||||
|
export let sound = "default";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="{type}"
|
||||||
|
aria-label="{label}"
|
||||||
|
title="{title}"
|
||||||
|
on:click={() => (play_sound(sound))}>
|
||||||
|
<span>{@html icon}</span>
|
||||||
|
{#if count}
|
||||||
|
<span class="count">{count}</span>
|
||||||
|
{/if}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
button {
|
||||||
|
padding: 6px 8px;
|
||||||
|
font-size: 1em;
|
||||||
|
background: none;
|
||||||
|
color: inherit;
|
||||||
|
border: none;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
button.active {
|
||||||
|
background: var(--accent);
|
||||||
|
color: var(--bg0);
|
||||||
|
}
|
||||||
|
|
||||||
|
button:hover {
|
||||||
|
background: #8881;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:active {
|
||||||
|
background: #0001;
|
||||||
|
}
|
||||||
|
|
||||||
|
.count {
|
||||||
|
opacity: .5;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:hover .count {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
79
src/post/Header.svelte
Normal file
79
src/post/Header.svelte
Normal file
|
|
@ -0,0 +1,79 @@
|
||||||
|
<script>
|
||||||
|
import { parse_text as parse_emojis } from '../emoji.js';
|
||||||
|
import { shorthand as short_time } from '../time.js';
|
||||||
|
|
||||||
|
export let post;
|
||||||
|
|
||||||
|
let time_string = post.created_at.toLocaleString();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="post-header-container">
|
||||||
|
<a href="/{post.user.mention}" class="post-avatar-container">
|
||||||
|
<img src={post.user.avatar_url} type={post.user.avatar_type} alt="" width="48" height="48" class="post-avatar" loading="lazy" decoding="async">
|
||||||
|
</a>
|
||||||
|
<header class="post-header">
|
||||||
|
<div class="post-user-info">
|
||||||
|
<a href="/{post.user.mention}" class="name">{@html parse_emojis(post.user.name, post.user.emojis, true)}</a>
|
||||||
|
<span class="username">{post.user.mention}</span>
|
||||||
|
</div>
|
||||||
|
<div class="post-info">
|
||||||
|
<a href={post.url} class="created-at">
|
||||||
|
<time title={time_string}>{short_time(post.created_at)}</time>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.post-header-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-header-container a,
|
||||||
|
.post-header-container a:visited {
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.post-header-container a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-avatar-container {
|
||||||
|
margin-right: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-avatar {
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 2px 2px #0004;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-header {
|
||||||
|
display: flex;
|
||||||
|
flex-grow: 1;
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-info {
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-user-info a {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-user-info .name :global(.emoji) {
|
||||||
|
position: relative;
|
||||||
|
top: 4px;
|
||||||
|
height: 26px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-user-info .username {
|
||||||
|
opacity: .5;
|
||||||
|
font-size: .9em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-info .created-at {
|
||||||
|
font-size: .8em;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
79
src/post/Post.svelte
Normal file
79
src/post/Post.svelte
Normal file
|
|
@ -0,0 +1,79 @@
|
||||||
|
<script>
|
||||||
|
import BoostContext from './BoostContext.svelte';
|
||||||
|
import ReplyContext from './ReplyContext.svelte';
|
||||||
|
import Header from './Header.svelte';
|
||||||
|
import Body from './Body.svelte';
|
||||||
|
import FooterButton from './FooterButton.svelte';
|
||||||
|
import { parse_one as parse_reaction } from '../emoji.js';
|
||||||
|
import { play_sound } from '../sound.js';
|
||||||
|
|
||||||
|
export let post;
|
||||||
|
|
||||||
|
let post_context = undefined;
|
||||||
|
let _post = post;
|
||||||
|
let is_boost = false;
|
||||||
|
if (_post.boost) {
|
||||||
|
is_boost = true;
|
||||||
|
post_context = _post;
|
||||||
|
_post = _post.boost;
|
||||||
|
}
|
||||||
|
|
||||||
|
let aria_label = post.user.username + '; ' + post.text + '; ' + post.created_at;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="post-container" aria-label={aria_label}>
|
||||||
|
{#if _post.reply}
|
||||||
|
<ReplyContext post={_post.reply} />
|
||||||
|
{/if}
|
||||||
|
{#if is_boost && !post_context.text}
|
||||||
|
<BoostContext post={post_context} />
|
||||||
|
{/if}
|
||||||
|
<article class="post">
|
||||||
|
<Header post={_post} />
|
||||||
|
<Body post={_post} />
|
||||||
|
<footer class="post-footer">
|
||||||
|
<div class="post-reactions">
|
||||||
|
{#each Object.keys(_post.reactions) as reaction}
|
||||||
|
<FooterButton icon={parse_reaction(reaction, _post.emojis)} type="reaction" bind:count={_post.reactions[reaction]} title={reaction} label="" />
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
<div class="post-actions">
|
||||||
|
<FooterButton icon="🗨️" type="reply" label="Reply" bind:count={_post.reply_count} sound="post" />
|
||||||
|
<FooterButton icon="🔁" type="boost" label="Boost" bind:count={_post.boost_count} sound="boost" />
|
||||||
|
<FooterButton icon="⭐" type="favourite" label="Favourite" />
|
||||||
|
<FooterButton icon="😃" type="react" label="React" />
|
||||||
|
<FooterButton icon="🗣️" type="quote" label="Quote" />
|
||||||
|
<FooterButton icon="🛠️" type="more" label="More" />
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.post-container {
|
||||||
|
margin-top: 16px;
|
||||||
|
padding: 28px 32px 20px 32px;
|
||||||
|
border: 1px solid #8884;
|
||||||
|
border-radius: 16px;
|
||||||
|
background-color: var(--bg1);
|
||||||
|
transition: background-color .1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-container:hover {
|
||||||
|
background-color: var(--bg2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-reactions {
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-actions {
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-container :global(.emoji) {
|
||||||
|
position: relative;
|
||||||
|
top: 6px;
|
||||||
|
height: 26px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
130
src/post/ReplyContext.svelte
Normal file
130
src/post/ReplyContext.svelte
Normal file
|
|
@ -0,0 +1,130 @@
|
||||||
|
<script>
|
||||||
|
import Header from './Header.svelte';
|
||||||
|
import Body from './Body.svelte';
|
||||||
|
import FooterButton from './FooterButton.svelte';
|
||||||
|
import Post from './Post.svelte';
|
||||||
|
import { parse_text as parse_emojis, parse_one as parse_reaction } from '../emoji.js';
|
||||||
|
import { shorthand as short_time } from '../time.js';
|
||||||
|
|
||||||
|
export let post;
|
||||||
|
|
||||||
|
let time_string = post.created_at.toLocaleString();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<article class="post-reply">
|
||||||
|
<div class="post-reply-avatar-container">
|
||||||
|
<a href="/{post.user.mention}" class="post-avatar-container">
|
||||||
|
<img src={post.user.avatar_url} type={post.user.avatar_type} alt="" width="48" height="48" class="post-avatar" loading="lazy" decoding="async">
|
||||||
|
</a>
|
||||||
|
<div class="line">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="post-reply-main">
|
||||||
|
<div class="post-header-container">
|
||||||
|
<header class="post-header">
|
||||||
|
<div class="post-user-info">
|
||||||
|
<a href="/{post.user.mention}" class="name">{@html parse_emojis(post.user.name, post.user.emojis, true)}</a>
|
||||||
|
<span class="username">{post.user.mention}</span>
|
||||||
|
</div>
|
||||||
|
<div class="post-info">
|
||||||
|
<a href={post.url} class="created-at">
|
||||||
|
<time title={time_string}>{short_time(post.created_at)}</time>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Body post={post} />
|
||||||
|
|
||||||
|
<footer class="post-footer">
|
||||||
|
<div class="post-reactions">
|
||||||
|
{#each Object.keys(post.reactions) as reaction}
|
||||||
|
<FooterButton icon={parse_reaction(reaction, post.emojis)} type="reaction" bind:count={post.reactions[reaction]} title={reaction} label="" />
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
<div class="post-actions">
|
||||||
|
<FooterButton icon="🗨️" type="reply" label="Reply" bind:count={post.reply_count} />
|
||||||
|
<FooterButton icon="🔁" type="boost" label="Boost" bind:count={post.boost_count} />
|
||||||
|
<FooterButton icon="⭐" type="favourite" label="Favourite" />
|
||||||
|
<FooterButton icon="😃" type="react" label="React" />
|
||||||
|
<FooterButton icon="🗣️" type="quote" label="Quote" />
|
||||||
|
<FooterButton icon="🛠️" type="more" label="More" />
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.post-reply {
|
||||||
|
padding-bottom: 24px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-reply-avatar-container {
|
||||||
|
margin-right: 12px;
|
||||||
|
margin-bottom: -24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-reply-avatar-container .line {
|
||||||
|
position: relative;
|
||||||
|
top: -4px;
|
||||||
|
left: -1px;
|
||||||
|
width: 50%;
|
||||||
|
height: calc(100% - 48px);
|
||||||
|
border-right: 2px solid #8888;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-reply-main {
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-header-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-header-container a,
|
||||||
|
.post-header-container a:visited {
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.post-header-container a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-avatar {
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 2px 2px #0004;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-header {
|
||||||
|
display: flex;
|
||||||
|
flex-grow: 1;
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-info {
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-user-info a {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-user-info .name :global(.emoji) {
|
||||||
|
position: relative;
|
||||||
|
top: 4px;
|
||||||
|
max-height: 1.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-user-info .username {
|
||||||
|
opacity: .5;
|
||||||
|
font-size: .9em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-info .created-at {
|
||||||
|
font-size: .8em;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
220
src/post/post.js
Normal file
220
src/post/post.js
Normal file
|
|
@ -0,0 +1,220 @@
|
||||||
|
import Instance from '../instance.js';
|
||||||
|
import User from '../user/user.js';
|
||||||
|
|
||||||
|
import { parse_one as parse_emoji } from '../emoji.js';
|
||||||
|
|
||||||
|
let post_cache = Object;
|
||||||
|
|
||||||
|
export default class Post {
|
||||||
|
id;
|
||||||
|
created_at;
|
||||||
|
user;
|
||||||
|
text;
|
||||||
|
warning;
|
||||||
|
boost_count;
|
||||||
|
reply_count;
|
||||||
|
mentions;
|
||||||
|
reactions;
|
||||||
|
emojis;
|
||||||
|
files;
|
||||||
|
url;
|
||||||
|
reply;
|
||||||
|
boost;
|
||||||
|
|
||||||
|
static resolve_id(id) {
|
||||||
|
return post_cache[id] || null;
|
||||||
|
}
|
||||||
|
|
||||||
|
static parse(data) {
|
||||||
|
const instance = Instance.get_instance();
|
||||||
|
let post = null;
|
||||||
|
switch (instance.type) {
|
||||||
|
case Instance.types.ICESHRIMP:
|
||||||
|
post = Post.#parse_iceshrimp(data);
|
||||||
|
break;
|
||||||
|
case Instance.types.MASTODON:
|
||||||
|
post = Post.#parse_mastodon(data);
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
if (!post) {
|
||||||
|
console.error("Error while parsing post data");
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
post_cache[post.id] = post;
|
||||||
|
return post;
|
||||||
|
}
|
||||||
|
|
||||||
|
static #parse_iceshrimp(data) {
|
||||||
|
let post = new Post()
|
||||||
|
post.id = data.id;
|
||||||
|
post.created_at = new Date(data.createdAt);
|
||||||
|
post.user = User.parse(data.user);
|
||||||
|
post.text = data.text;
|
||||||
|
post.warning = data.cw;
|
||||||
|
post.boost_count = data.renoteCount;
|
||||||
|
post.reply_count = data.repliesCount;
|
||||||
|
post.mentions = data.mentions;
|
||||||
|
post.reactions = data.reactions;
|
||||||
|
post.emojis = data.emojis;
|
||||||
|
post.files = data.files;
|
||||||
|
post.url = data.url;
|
||||||
|
post.boost = data.renote ? Post.parse(data.renote) : null;
|
||||||
|
post.reply = data.reply ? Post.parse(data.reply) : null;
|
||||||
|
return post;
|
||||||
|
}
|
||||||
|
|
||||||
|
static #parse_mastodon(data) {
|
||||||
|
let post = new Post()
|
||||||
|
post.id = data.id;
|
||||||
|
post.created_at = new Date(data.created_at);
|
||||||
|
post.user = User.parse(data.account);
|
||||||
|
post.text = data.content;
|
||||||
|
post.warning = data.spoiler_text;
|
||||||
|
post.boost_count = data.reblogs_count;
|
||||||
|
post.reply_count = data.replies_count;
|
||||||
|
post.mentions = data.mentions;
|
||||||
|
post.reactions = data.reactions;
|
||||||
|
post.emojis = data.emojis;
|
||||||
|
post.files = data.media_attachments;
|
||||||
|
post.url = data.url;
|
||||||
|
post.boost = data.reblog ? Post.parse(data.reblog) : null;
|
||||||
|
post.reply = data.in_reply_to_id ? Post.resolve_id(data.in_reply_to_id) : null;
|
||||||
|
return post;
|
||||||
|
}
|
||||||
|
|
||||||
|
get rich_text() {
|
||||||
|
let text = this.text;
|
||||||
|
if (!text) return text;
|
||||||
|
|
||||||
|
const markdown_tokens = [
|
||||||
|
{ tag: "pre", token: "```" },
|
||||||
|
{ tag: "code", token: "`" },
|
||||||
|
{ tag: "strong", token: "**", regex: /\*{2}/g },
|
||||||
|
{ tag: "strong", token: "__" },
|
||||||
|
{ tag: "em", token: "*", regex: /\*/g },
|
||||||
|
{ tag: "em", token: "_" },
|
||||||
|
];
|
||||||
|
|
||||||
|
let response = "";
|
||||||
|
let current;
|
||||||
|
let index = 0;
|
||||||
|
while (index < text.length) {
|
||||||
|
let sample = text.substring(index);
|
||||||
|
let allow_new = !current || !current.nostack;
|
||||||
|
|
||||||
|
// handle newlines
|
||||||
|
if (allow_new && sample.startsWith('\n')) {
|
||||||
|
response += "<br>";
|
||||||
|
index++;
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
// handle mentions
|
||||||
|
if (allow_new && sample.match(/@[a-z0-9-_.]+@[a-z0-9-_.]+/g)) {
|
||||||
|
// find end of the mention
|
||||||
|
let length = 1;
|
||||||
|
while (index + length < text.length && /[a-z0-9-_.]/.test(text[index + length])) length++;
|
||||||
|
length++; // skim the middle @
|
||||||
|
while (index + length < text.length && /[a-z0-9-_.]/.test(text[index + length])) length++;
|
||||||
|
|
||||||
|
let mention = text.substring(index, index + length);
|
||||||
|
|
||||||
|
// attempt to resolve mention to a user
|
||||||
|
let user = User.resolve_mention(mention);
|
||||||
|
if (user) {
|
||||||
|
const out = `<a href="/${user.mention}" class="mention">` +
|
||||||
|
`<img src="${user.avatar_url}" class="mention-avatar" width="20" height="20">` +
|
||||||
|
"@" + user.name + "</a>";
|
||||||
|
if (current) current.text += out;
|
||||||
|
else response += out;
|
||||||
|
} else {
|
||||||
|
response += mention;
|
||||||
|
}
|
||||||
|
index += mention.length;
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (Instance.get_instance().type !== Instance.types.MASTODON) {
|
||||||
|
// handle links
|
||||||
|
if (allow_new && sample.match(/^[a-z]{3,6}:\/\/[^\s]+/g)) {
|
||||||
|
// get length of link
|
||||||
|
let length = text.substring(index).search(/\s|$/g);
|
||||||
|
let url = text.substring(index, index + length);
|
||||||
|
let out = `<a href="${url}">${url}</a>`;
|
||||||
|
if (current) current.text += out;
|
||||||
|
else response += out;
|
||||||
|
index += length;
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// handle emojis
|
||||||
|
if (allow_new && sample.startsWith(':')) {
|
||||||
|
// lookahead to next invalid emoji character
|
||||||
|
let look = sample.substring(1).search(/[^a-zA-Z0-9-_.]/g) + 1;
|
||||||
|
// if it's ':', we can parse it
|
||||||
|
if (look !== 0 && sample[look] === ':') {
|
||||||
|
let emoji_code = sample.substring(0, look + 1);
|
||||||
|
let out = parse_emoji(emoji_code, this.emojis);
|
||||||
|
if (current) current.text += out;
|
||||||
|
else response += out;
|
||||||
|
index += emoji_code.length;
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// handle markdown
|
||||||
|
// TODO: handle misskey-flavoured markdown
|
||||||
|
if (current) {
|
||||||
|
// try to pop stack
|
||||||
|
if (sample.startsWith(current.token)) {
|
||||||
|
index += current.token.length;
|
||||||
|
let out = `<${current.tag}>${current.text}</${current.tag}>`;
|
||||||
|
if (current.token === '```')
|
||||||
|
out = `<code><pre>${current.text}</pre></code>`;
|
||||||
|
if (current.parent) current.parent.text += out;
|
||||||
|
else response += out;
|
||||||
|
current = current.parent;
|
||||||
|
} else {
|
||||||
|
current.text += sample[0];
|
||||||
|
index++;
|
||||||
|
}
|
||||||
|
} else if (allow_new) {
|
||||||
|
// can we add to stack?
|
||||||
|
let pushed = false;
|
||||||
|
for (let i = 0; i < markdown_tokens.length; i++) {
|
||||||
|
let item = markdown_tokens[i];
|
||||||
|
if (sample.startsWith(item.token)) {
|
||||||
|
let new_current = {
|
||||||
|
token: item.token,
|
||||||
|
tag: item.tag,
|
||||||
|
text: "",
|
||||||
|
parent: current,
|
||||||
|
};
|
||||||
|
if (item.token === '```' || item.token === '`') new_current.nostack = true;
|
||||||
|
current = new_current;
|
||||||
|
pushed = true;
|
||||||
|
index += current.token.length;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (!pushed) {
|
||||||
|
response += sample[0];
|
||||||
|
index++;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// destroy the remaining stack
|
||||||
|
while (current) {
|
||||||
|
let out = current.token + current.text;
|
||||||
|
if (current.parent) current.parent.text += out;
|
||||||
|
else response += out;
|
||||||
|
current = current.parent;
|
||||||
|
}
|
||||||
|
|
||||||
|
return response;
|
||||||
|
}
|
||||||
|
}
|
||||||
17
src/sound.js
Normal file
17
src/sound.js
Normal file
|
|
@ -0,0 +1,17 @@
|
||||||
|
const sounds = {
|
||||||
|
"default": new Audio("sound/log.ogg"),
|
||||||
|
"post": new Audio("sound/success.ogg"),
|
||||||
|
"boost": new Audio("sound/hello.ogg"),
|
||||||
|
};
|
||||||
|
|
||||||
|
export function play_sound(name) {
|
||||||
|
if (!name) name = "default";
|
||||||
|
const sound = sounds[name];
|
||||||
|
if (!sound) {
|
||||||
|
console.warn(`Attempted to play sound "${name}", which does not exist!`);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
sound.pause();
|
||||||
|
sound.currentTime = 0;
|
||||||
|
sound.play();
|
||||||
|
}
|
||||||
23
src/time.js
Normal file
23
src/time.js
Normal file
|
|
@ -0,0 +1,23 @@
|
||||||
|
const denoms = [
|
||||||
|
{ unit: 's', min: 0 },
|
||||||
|
{ unit: 'm', min: 60 },
|
||||||
|
{ unit: 'h', min: 60 },
|
||||||
|
{ unit: 'd', min: 24 },
|
||||||
|
{ unit: 'w', min: 7 },
|
||||||
|
{ unit: 'y', min: 52 },
|
||||||
|
];
|
||||||
|
|
||||||
|
export function shorthand(date) {
|
||||||
|
let value = (new Date() - date) / 1000;
|
||||||
|
let unit = 's';
|
||||||
|
let index = 0;
|
||||||
|
while (index < denoms.length - 1) {
|
||||||
|
if (value < denoms[index + 1].min) break;
|
||||||
|
index++
|
||||||
|
value /= denoms[index].min;
|
||||||
|
unit = denoms[index].unit;
|
||||||
|
}
|
||||||
|
if (value > 0)
|
||||||
|
return Math.floor(value) + unit + " ago";
|
||||||
|
return "in " + Math.floor(value) + unit;
|
||||||
|
}
|
||||||
83
src/user/user.js
Normal file
83
src/user/user.js
Normal file
|
|
@ -0,0 +1,83 @@
|
||||||
|
import Instance from '../instance.js';
|
||||||
|
import Emoji from '../emoji.js';
|
||||||
|
|
||||||
|
let user_cache = Object;
|
||||||
|
|
||||||
|
export default class User {
|
||||||
|
id;
|
||||||
|
nickname;
|
||||||
|
username;
|
||||||
|
host;
|
||||||
|
avatar_url;
|
||||||
|
emojis;
|
||||||
|
|
||||||
|
static resolve_id(id) {
|
||||||
|
return user_cache[id];
|
||||||
|
}
|
||||||
|
|
||||||
|
static resolve_mention(mention) {
|
||||||
|
for (let i = 0; i < Object.keys(user_cache).length; i++) {
|
||||||
|
let user = user_cache[Object.keys(user_cache)[i]];
|
||||||
|
if (user.mention === mention) return user;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
static parse(data) {
|
||||||
|
const instance = Instance.get_instance();
|
||||||
|
let user = null;
|
||||||
|
switch (instance.type) {
|
||||||
|
case Instance.types.ICESHRIMP:
|
||||||
|
user = User.#parse_iceshrimp(data);
|
||||||
|
break;
|
||||||
|
case Instance.types.MASTODON:
|
||||||
|
user = User.#parse_mastodon(data);
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
if (!user) {
|
||||||
|
console.error("Error while parsing user data");
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
user_cache[user.id] = user;
|
||||||
|
return user;
|
||||||
|
}
|
||||||
|
|
||||||
|
static #parse_iceshrimp(data) {
|
||||||
|
let user = new User();
|
||||||
|
user.id = data.id;
|
||||||
|
user.nickname = data.name;
|
||||||
|
user.username = data.username;
|
||||||
|
user.host = data.host || Instance.get_instance().host;
|
||||||
|
user.avatar_url = data.avatarUrl;
|
||||||
|
user.emojis = [];
|
||||||
|
data.emojis.forEach(emoji => {
|
||||||
|
user.emojis.push(Emoji.parse(emoji, user.host));
|
||||||
|
});
|
||||||
|
return user;
|
||||||
|
}
|
||||||
|
|
||||||
|
static #parse_mastodon(data) {
|
||||||
|
let user = new User();
|
||||||
|
user.id = data.id;
|
||||||
|
user.nickname = data.display_name;
|
||||||
|
user.username = data.username;
|
||||||
|
user.host = data.acct.search('@') ? data.acct.substring(data.acct.search('@') + 1) : instance.host;
|
||||||
|
user.avatar_url = data.avatar;
|
||||||
|
user.emojis = [];
|
||||||
|
data.emojis.forEach(emoji => {
|
||||||
|
user.emojis.push(Emoji.parse(emoji, user.host));
|
||||||
|
});
|
||||||
|
return user;
|
||||||
|
}
|
||||||
|
|
||||||
|
get name() {
|
||||||
|
return this.nickname || this.username;
|
||||||
|
}
|
||||||
|
|
||||||
|
get mention() {
|
||||||
|
let res = "@" + this.username;
|
||||||
|
if (this.host) res += "@" + this.host;
|
||||||
|
return res;
|
||||||
|
}
|
||||||
|
}
|
||||||
7
svelte.config.js
Normal file
7
svelte.config.js
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
// Consult https://svelte.dev/docs#compile-time-svelte-preprocess
|
||||||
|
// for more information about preprocessors
|
||||||
|
preprocess: vitePreprocess(),
|
||||||
|
}
|
||||||
7
vite.config.js
Normal file
7
vite.config.js
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import { svelte } from '@sveltejs/vite-plugin-svelte'
|
||||||
|
|
||||||
|
// https://vitejs.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [svelte()],
|
||||||
|
})
|
||||||
Loading…
Add table
Add a link
Reference in a new issue