Compare commits
1 commit
| Author | SHA1 | Date | |
|---|---|---|---|
| 7598b1e103 |
40 changed files with 999 additions and 2353 deletions
|
|
@ -6,27 +6,13 @@ module.exports = {
|
|||
extends: [
|
||||
"eslint:recommended",
|
||||
"plugin:@typescript-eslint/recommended",
|
||||
"plugin:react/recommended",
|
||||
],
|
||||
overrides: [
|
||||
{
|
||||
env: {
|
||||
node: true,
|
||||
},
|
||||
files: [".eslintrc.{js,cjs}"],
|
||||
parserOptions: {
|
||||
sourceType: "script",
|
||||
},
|
||||
},
|
||||
"plugin:solid/recommended",
|
||||
],
|
||||
ignorePatterns: ["dist/**", ".eslintrc.cjs"],
|
||||
parser: "@typescript-eslint/parser",
|
||||
parserOptions: {
|
||||
ecmaVersion: "latest",
|
||||
sourceType: "module",
|
||||
},
|
||||
plugins: ["@typescript-eslint", "react"],
|
||||
rules: {
|
||||
"react/react-in-jsx-scope": "off",
|
||||
"no-mixed-spaces-and-tabs": "off",
|
||||
},
|
||||
plugins: ["@typescript-eslint", "solid"],
|
||||
};
|
||||
|
|
|
|||
|
|
@ -2,11 +2,12 @@
|
|||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Mercury</title>
|
||||
<title>Vite + Solid + TS</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/index.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -6,47 +6,32 @@
|
|||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "tsc && vite build",
|
||||
"preview": "vite preview"
|
||||
"preview": "vite preview",
|
||||
"format": "prettier -w ."
|
||||
},
|
||||
"dependencies": {
|
||||
"@emotion/react": "^11.11.1",
|
||||
"@emotion/styled": "^11.11.0",
|
||||
"@fontsource/roboto": "^5.0.8",
|
||||
"@heroicons/react": "^2.0.18",
|
||||
"@mui/icons-material": "^5.14.9",
|
||||
"@mui/material": "^5.14.9",
|
||||
"@reduxjs/toolkit": "^1.9.5",
|
||||
"axios": "^1.5.0",
|
||||
"humanize-duration": "^3.29.0",
|
||||
"i18next": "^23.5.1",
|
||||
"luxon": "^3.4.3",
|
||||
"markdown-it": "^13.0.1",
|
||||
"preact": "^10.16.0",
|
||||
"react-helmet": "^6.1.0",
|
||||
"react-i18next": "^13.2.2",
|
||||
"react-redux": "^8.1.2",
|
||||
"redux": "^4.2.1",
|
||||
"@suid/icons-material": "^0.6.11",
|
||||
"@suid/material": "^0.15.1",
|
||||
"@suid/vite-plugin": "^0.1.5",
|
||||
"axios": "^1.6.2",
|
||||
"humanize-duration": "^3.31.0",
|
||||
"markdown-it": "^13.0.2",
|
||||
"sanitize-html": "^2.11.0",
|
||||
"ulid": "^2.3.0",
|
||||
"wouter-preact": "^2.11.0"
|
||||
"solid-js": "^1.8.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@preact/preset-vite": "^2.5.0",
|
||||
"@types/humanize-duration": "^3.27.1",
|
||||
"@types/luxon": "^3.3.2",
|
||||
"@types/markdown-it": "^13.0.1",
|
||||
"@types/node": "^20.6.0",
|
||||
"@types/react-helmet": "^6.1.6",
|
||||
"@types/sanitize-html": "^2.9.0",
|
||||
"@typescript-eslint/eslint-plugin": "^6.7.0",
|
||||
"@typescript-eslint/parser": "^6.7.0",
|
||||
"autoprefixer": "^10.4.15",
|
||||
"eslint": "^8.49.0",
|
||||
"eslint-plugin-react": "^7.33.2",
|
||||
"postcss": "^8.4.29",
|
||||
"prettier": "^3.0.3",
|
||||
"tailwindcss": "^3.3.3",
|
||||
"typescript": "^5.0.2",
|
||||
"vite": "^4.4.5"
|
||||
"@types/humanize-duration": "^3.27.3",
|
||||
"@types/markdown-it": "^13.0.7",
|
||||
"@types/node": "^20.9.4",
|
||||
"@types/sanitize-html": "^2.9.5",
|
||||
"@typescript-eslint/eslint-plugin": "^6.12.0",
|
||||
"@typescript-eslint/parser": "^6.12.0",
|
||||
"eslint": "^8.54.0",
|
||||
"eslint-plugin-solid": "^0.13.0",
|
||||
"prettier": "^3.1.0",
|
||||
"typescript": "^5.2.2",
|
||||
"vite": "^5.0.0",
|
||||
"vite-plugin-solid": "^2.7.2"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +0,0 @@
|
|||
export default {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
};
|
||||
15
frontend/src/App.tsx
Normal file
15
frontend/src/App.tsx
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
import accountStore from "./lib/store/account";
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<>
|
||||
<ul>
|
||||
<li>Username: {accountStore.me.username}</li>
|
||||
<li>ID: {accountStore.me.id}</li>
|
||||
<li>Domain: {accountStore.me.domain}</li>
|
||||
<li>Email: {accountStore.me.email}</li>
|
||||
</ul>
|
||||
</>
|
||||
);
|
||||
|
||||
}
|
||||
|
|
@ -1,32 +0,0 @@
|
|||
import { Router, Route, Switch } from "wouter-preact";
|
||||
|
||||
import PostPage from "$pages/blog/post";
|
||||
import HomeTimeline from "$pages/timeline/home";
|
||||
|
||||
export default function AppRouter() {
|
||||
return (
|
||||
<>
|
||||
<Router base="/web">
|
||||
<Switch>
|
||||
{/* Posts */}
|
||||
<Route path="/@:username/posts/:postId">
|
||||
<PostPage />
|
||||
</Route>
|
||||
|
||||
{/* User timelines */}
|
||||
<Route path="/@:username/with_replies">Replies!</Route>
|
||||
<Route path="/@:username/media">Media!</Route>
|
||||
<Route path="/@:username">User!</Route>
|
||||
|
||||
{/* Home */}
|
||||
<Route path="/local">Local timeline</Route>
|
||||
<Route path="/global">Global timeline</Route>
|
||||
<Route path="/notifications">Notifications</Route>
|
||||
<Route path="/">
|
||||
<HomeTimeline />
|
||||
</Route>
|
||||
</Switch>
|
||||
</Router>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
import { Helmet } from "react-helmet";
|
||||
|
||||
export default function DefaultHead() {
|
||||
return (
|
||||
<Helmet>
|
||||
<title>Mercury</title>
|
||||
</Helmet>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
import { Provider } from "react-redux";
|
||||
import { CssBaseline } from "@mui/material";
|
||||
|
||||
import store from "$lib/store";
|
||||
import Layout from "$components/layout";
|
||||
|
||||
import DefaultHead from "./DefaultHead";
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
<>
|
||||
<CssBaseline>
|
||||
<Provider store={store}>
|
||||
<DefaultHead />
|
||||
<Layout />
|
||||
</Provider>
|
||||
</CssBaseline>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="27.68" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 296"><path fill="#673AB8" d="m128 0l128 73.9v147.8l-128 73.9L0 221.7V73.9z"></path><path fill="#FFF" d="M34.865 220.478c17.016 21.78 71.095 5.185 122.15-34.704c51.055-39.888 80.24-88.345 63.224-110.126c-17.017-21.78-71.095-5.184-122.15 34.704c-51.055 39.89-80.24 88.346-63.224 110.126Zm7.27-5.68c-5.644-7.222-3.178-21.402 7.573-39.253c11.322-18.797 30.541-39.548 54.06-57.923c23.52-18.375 48.303-32.004 69.281-38.442c19.922-6.113 34.277-5.075 39.92 2.148c5.644 7.223 3.178 21.403-7.573 39.254c-11.322 18.797-30.541 39.547-54.06 57.923c-23.52 18.375-48.304 32.004-69.281 38.441c-19.922 6.114-34.277 5.076-39.92-2.147Z"></path><path fill="#FFF" d="M220.239 220.478c17.017-21.78-12.169-70.237-63.224-110.126C105.96 70.464 51.88 53.868 34.865 75.648c-17.017 21.78 12.169 70.238 63.224 110.126c51.055 39.889 105.133 56.485 122.15 34.704Zm-7.27-5.68c-5.643 7.224-19.998 8.262-39.92 2.148c-20.978-6.437-45.761-20.066-69.28-38.441c-23.52-18.376-42.74-39.126-54.06-57.923c-10.752-17.851-13.218-32.03-7.575-39.254c5.644-7.223 19.999-8.261 39.92-2.148c20.978 6.438 45.762 20.067 69.281 38.442c23.52 18.375 42.739 39.126 54.06 57.923c10.752 17.85 13.218 32.03 7.574 39.254Z"></path><path fill="#FFF" d="M127.552 167.667c10.827 0 19.603-8.777 19.603-19.604c0-10.826-8.776-19.603-19.603-19.603c-10.827 0-19.604 8.777-19.604 19.603c0 10.827 8.777 19.604 19.604 19.604Z"></path></svg>
|
||||
|
Before Width: | Height: | Size: 1.6 KiB |
1
frontend/src/assets/solid.svg
Normal file
1
frontend/src/assets/solid.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 166 155.3"><path d="M163 35S110-4 69 5l-3 1c-6 2-11 5-14 9l-2 3-15 26 26 5c11 7 25 10 38 7l46 9 18-30z" fill="#76b3e1"/><linearGradient id="a" gradientUnits="userSpaceOnUse" x1="27.5" y1="3" x2="152" y2="63.5"><stop offset=".1" stop-color="#76b3e1"/><stop offset=".3" stop-color="#dcf2fd"/><stop offset="1" stop-color="#76b3e1"/></linearGradient><path d="M163 35S110-4 69 5l-3 1c-6 2-11 5-14 9l-2 3-15 26 26 5c11 7 25 10 38 7l46 9 18-30z" opacity=".3" fill="url(#a)"/><path d="M52 35l-4 1c-17 5-22 21-13 35 10 13 31 20 48 15l62-21S92 26 52 35z" fill="#518ac8"/><linearGradient id="b" gradientUnits="userSpaceOnUse" x1="95.8" y1="32.6" x2="74" y2="105.2"><stop offset="0" stop-color="#76b3e1"/><stop offset=".5" stop-color="#4377bb"/><stop offset="1" stop-color="#1f3b77"/></linearGradient><path d="M52 35l-4 1c-17 5-22 21-13 35 10 13 31 20 48 15l62-21S92 26 52 35z" opacity=".3" fill="url(#b)"/><linearGradient id="c" gradientUnits="userSpaceOnUse" x1="18.4" y1="64.2" x2="144.3" y2="149.8"><stop offset="0" stop-color="#315aa9"/><stop offset=".5" stop-color="#518ac8"/><stop offset="1" stop-color="#315aa9"/></linearGradient><path d="M134 80a45 45 0 00-48-15L24 85 4 120l112 19 20-36c4-7 3-15-2-23z" fill="url(#c)"/><linearGradient id="d" gradientUnits="userSpaceOnUse" x1="75.2" y1="74.5" x2="24.4" y2="260.8"><stop offset="0" stop-color="#4377bb"/><stop offset=".5" stop-color="#1a336b"/><stop offset="1" stop-color="#1a336b"/></linearGradient><path d="M114 115a45 45 0 00-48-15L4 120s53 40 94 30l3-1c17-5 23-21 13-34z" fill="url(#d)"/></svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
|
|
@ -1,62 +0,0 @@
|
|||
import { Home, Notifications, People, Public } from "@mui/icons-material";
|
||||
import {
|
||||
Drawer,
|
||||
List,
|
||||
ListItemButton,
|
||||
ListItemIcon,
|
||||
ListItemText,
|
||||
} from "@mui/material";
|
||||
import { useLocation } from "wouter-preact";
|
||||
|
||||
export default function DesktopNav() {
|
||||
const [location, navigate] = useLocation();
|
||||
|
||||
return (
|
||||
<>
|
||||
<Drawer
|
||||
sx={{ width: 200, display: { xs: "none", lg: "block" } }}
|
||||
variant="permanent"
|
||||
anchor="left"
|
||||
>
|
||||
<List>
|
||||
<ListItemButton
|
||||
onClick={() => navigate("/web")}
|
||||
selected={location === "/web"}
|
||||
>
|
||||
<ListItemIcon>
|
||||
<Home />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary="Home" />
|
||||
</ListItemButton>
|
||||
<ListItemButton
|
||||
onClick={() => navigate("/web/notifications")}
|
||||
selected={location === "/web/notifications"}
|
||||
>
|
||||
<ListItemIcon>
|
||||
<Notifications />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary="Notifications" />
|
||||
</ListItemButton>
|
||||
<ListItemButton
|
||||
onClick={() => navigate("/web/local")}
|
||||
selected={location === "/web/local"}
|
||||
>
|
||||
<ListItemIcon>
|
||||
<People />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary="Local timeline" />
|
||||
</ListItemButton>
|
||||
<ListItemButton
|
||||
onClick={() => navigate("/web/global")}
|
||||
selected={location === "/web/global"}
|
||||
>
|
||||
<ListItemIcon>
|
||||
<Public />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary="Global timeline" />
|
||||
</ListItemButton>
|
||||
</List>
|
||||
</Drawer>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,43 +0,0 @@
|
|||
import { Paper, BottomNavigation, BottomNavigationAction } from "@mui/material";
|
||||
import { useLocation } from "wouter-preact";
|
||||
import { Home, Notifications, People, Public } from "@mui/icons-material";
|
||||
|
||||
export default function MobileNav() {
|
||||
const [location, navigate] = useLocation();
|
||||
|
||||
return (
|
||||
<Paper
|
||||
sx={{
|
||||
position: "fixed",
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
display: { xs: "block", lg: "none" },
|
||||
}}
|
||||
elevation={3}
|
||||
>
|
||||
<BottomNavigation
|
||||
showLabels={false}
|
||||
value={location}
|
||||
onChange={(_, newValue) => navigate(newValue)}
|
||||
>
|
||||
<BottomNavigationAction icon={<Home />} label="Home" value="/web" />
|
||||
<BottomNavigationAction
|
||||
icon={<Notifications />}
|
||||
label="Notifications"
|
||||
value="/web/notifications"
|
||||
/>
|
||||
<BottomNavigationAction
|
||||
icon={<People />}
|
||||
label="Local"
|
||||
value="/web/local"
|
||||
/>
|
||||
<BottomNavigationAction
|
||||
icon={<Public />}
|
||||
label="Global"
|
||||
value="/web/global"
|
||||
/>
|
||||
</BottomNavigation>
|
||||
</Paper>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
import { Stack } from "@mui/material";
|
||||
|
||||
import AppRouter from "$/AppRouter";
|
||||
import DesktopNav from "./DesktopNav";
|
||||
import MobileNav from "./MobileNav";
|
||||
|
||||
export default function Layout() {
|
||||
return (
|
||||
<>
|
||||
<Stack direction={{ xs: "column", lg: "row" }}>
|
||||
<DesktopNav />
|
||||
<Stack direction="row">
|
||||
<AppRouter />
|
||||
</Stack>
|
||||
<MobileNav />
|
||||
</Stack>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
.post-Post--account {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.post-Post--names {
|
||||
margin: 0 0.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
|
@ -1,58 +0,0 @@
|
|||
import { Avatar, Card, CardContent, Tooltip, Typography } from "@mui/material";
|
||||
import { decodeTime } from "ulid";
|
||||
import { DateTime } from "luxon";
|
||||
|
||||
import type { Post } from "$lib/api/entities/post";
|
||||
import humanizeDuration from "$/lib/duration";
|
||||
|
||||
import "./Post.css";
|
||||
import { renderMarkdown } from "$/lib/markdown";
|
||||
|
||||
interface Props {
|
||||
post: Post;
|
||||
}
|
||||
|
||||
export default function Post(props: Props) {
|
||||
return (
|
||||
<Card>
|
||||
<CardContent>
|
||||
<div className="post-Post--account">
|
||||
<Avatar sx={{ width: 48, height: 48 }}>
|
||||
{props.post.blog.name.slice(0, 1).toUpperCase()}
|
||||
</Avatar>
|
||||
<div className="post-Post--names">
|
||||
<Typography>{props.post.blog.name}</Typography>
|
||||
<Typography color="grey">@{props.post.blog.name}</Typography>
|
||||
</div>
|
||||
<Timestamp timestamp={decodeTime(props.post.id)} />
|
||||
</div>
|
||||
<PostContent post={props.post} />
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
function Timestamp({ timestamp }: { timestamp: number }) {
|
||||
const msAgo = new Date().getTime() - timestamp;
|
||||
const timeString = DateTime.fromMillis(timestamp).toLocaleString(
|
||||
DateTime.DATETIME_SHORT,
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Tooltip title={timeString}>
|
||||
<Typography variant="subtitle2">{humanizeDuration(msAgo)}</Typography>
|
||||
</Tooltip>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function PostContent({ post, small = true }: { post: Post; small?: boolean }) {
|
||||
return (
|
||||
<>
|
||||
<Typography variant={small ? "body2" : "body1"}>
|
||||
<p dangerouslySetInnerHTML={{ __html: renderMarkdown(post.content) }} />
|
||||
</Typography>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
import i18n from "i18next";
|
||||
import { initReactI18next } from "react-i18next";
|
||||
|
||||
import en from "$/translations/en.json";
|
||||
import enPirate from "$/translations/en.pirate.json";
|
||||
|
||||
const resources = {
|
||||
en: {
|
||||
translation: en,
|
||||
},
|
||||
"en-PR": {
|
||||
translation: enPirate,
|
||||
},
|
||||
};
|
||||
|
||||
i18n.use(initReactI18next).init({
|
||||
resources,
|
||||
lng: "en-PR",
|
||||
interpolation: {
|
||||
escapeValue: false,
|
||||
},
|
||||
});
|
||||
|
||||
export default i18n;
|
||||
11
frontend/src/index.tsx
Normal file
11
frontend/src/index.tsx
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
/* @refresh reload */
|
||||
import { render } from "solid-js/web";
|
||||
import "@fontsource/roboto/300.css";
|
||||
import "@fontsource/roboto/400.css";
|
||||
import "@fontsource/roboto/500.css";
|
||||
|
||||
import App from "./App";
|
||||
|
||||
const root = document.getElementById("app");
|
||||
|
||||
render(() => <App />, root!);
|
||||
|
|
@ -1,24 +1,24 @@
|
|||
import axios from "axios";
|
||||
import type { Error } from "./entities/error";
|
||||
|
||||
interface APIFetchData {
|
||||
method?: string;
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
data?: any;
|
||||
token?: string;
|
||||
headers?: Record<string, string>;
|
||||
version?: number;
|
||||
}
|
||||
|
||||
export async function apiFetch<T>(
|
||||
path: string,
|
||||
data:
|
||||
| {
|
||||
method?: string;
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
data?: any;
|
||||
token?: string;
|
||||
headers?: Record<string, string>;
|
||||
version?: number;
|
||||
}
|
||||
| undefined = undefined,
|
||||
data: APIFetchData | undefined = undefined,
|
||||
) {
|
||||
try {
|
||||
const resp = await axios<T>({
|
||||
method: data?.method || "GET",
|
||||
url: `/api/v${data?.version || 1}${path}`,
|
||||
data: data,
|
||||
data: data?.data,
|
||||
});
|
||||
|
||||
return resp.data;
|
||||
|
|
|
|||
|
|
@ -1,5 +0,0 @@
|
|||
import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux";
|
||||
import type { Store, Dispatch } from "./store";
|
||||
|
||||
export const useAppDispatch: () => Dispatch = useDispatch;
|
||||
export const useAppSelector: TypedUseSelectorHook<Store> = useSelector;
|
||||
10
frontend/src/lib/store/account.ts
Normal file
10
frontend/src/lib/store/account.ts
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
import { createStore } from "solid-js/store";
|
||||
import { MeAccount } from "$lib/api/entities/account";
|
||||
|
||||
export const [accountStore, setAccountStore] = createStore({
|
||||
me: JSON.parse(
|
||||
document.getElementById("accountData")!.innerHTML,
|
||||
) as MeAccount,
|
||||
});
|
||||
|
||||
export default accountStore;
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
import { createSlice, type PayloadAction } from "@reduxjs/toolkit";
|
||||
import type { Account, MeAccount } from "$lib/api/entities/account";
|
||||
|
||||
const accountsSlice = createSlice({
|
||||
name: "accounts",
|
||||
initialState: {
|
||||
currentAccount: JSON.parse(
|
||||
document.getElementById("accountData")!.innerHTML,
|
||||
) as MeAccount,
|
||||
accounts: {},
|
||||
usernames: {},
|
||||
} as {
|
||||
currentAccount: MeAccount;
|
||||
accounts: Record<string, Account>;
|
||||
usernames: Record<string, string>;
|
||||
},
|
||||
reducers: {
|
||||
setAccount(state, action: PayloadAction<Account>) {
|
||||
state.usernames[action.payload.username] = action.payload.id; // TODO: change to acct-equivalent field
|
||||
state.accounts[action.payload.id] = action.payload;
|
||||
},
|
||||
removeAccount(state, action: PayloadAction<string>) {
|
||||
delete state.accounts[action.payload];
|
||||
},
|
||||
setCurrentAccount(state, action: PayloadAction<MeAccount>) {
|
||||
state.currentAccount = action.payload;
|
||||
state.accounts[action.payload.id] = action.payload;
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const accounts = accountsSlice.reducer;
|
||||
export const { setAccount, removeAccount } = accountsSlice.actions;
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
|
||||
|
||||
import type { Post } from "$lib/api/entities/post";
|
||||
|
||||
export const mercuryApi = createApi({
|
||||
reducerPath: "mercuryApi",
|
||||
baseQuery: fetchBaseQuery({ baseUrl: "/api/v1" }),
|
||||
endpoints: (builder) => ({
|
||||
getPostById: builder.query<Post, string>({
|
||||
query: (id) => `/posts/${id}`,
|
||||
}),
|
||||
}),
|
||||
});
|
||||
|
||||
export const { useGetPostByIdQuery } = mercuryApi;
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
import { createSlice, type PayloadAction } from "@reduxjs/toolkit";
|
||||
import type { Blog } from "$lib/api/entities/blog";
|
||||
|
||||
const blogSlice = createSlice({
|
||||
name: "blogs",
|
||||
initialState: { blogs: {}, blogNames: {} } as {
|
||||
blogs: Record<string, Blog>;
|
||||
blogNames: Record<string, string>;
|
||||
},
|
||||
reducers: {
|
||||
setBlog(state, action: PayloadAction<Blog>) {
|
||||
state.blogNames[action.payload.name] = action.payload.id;
|
||||
state.blogs[action.payload.id] = action.payload;
|
||||
},
|
||||
removeBlog(state, action: PayloadAction<string>) {
|
||||
delete state.blogs[action.payload];
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const blogs = blogSlice.reducer;
|
||||
export const { setBlog, removeBlog } = blogSlice.actions;
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
import { configureStore } from "@reduxjs/toolkit";
|
||||
import { setupListeners } from "@reduxjs/toolkit/query/react";
|
||||
import { mercuryApi } from "./api";
|
||||
import { accounts } from "./accounts";
|
||||
import { blogs } from "./blogs";
|
||||
import { posts } from "./posts";
|
||||
|
||||
const store = configureStore({
|
||||
reducer: {
|
||||
accounts,
|
||||
blogs,
|
||||
posts,
|
||||
[mercuryApi.reducerPath]: mercuryApi.reducer,
|
||||
},
|
||||
middleware: (getDefaultMiddleware) =>
|
||||
getDefaultMiddleware().concat(mercuryApi.middleware),
|
||||
});
|
||||
|
||||
setupListeners(store.dispatch);
|
||||
|
||||
export default store;
|
||||
export type Store = ReturnType<typeof store.getState>;
|
||||
export type Dispatch = typeof store.dispatch;
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
import { createSlice, type PayloadAction } from "@reduxjs/toolkit";
|
||||
import type { Post } from "$lib/api/entities/post";
|
||||
|
||||
const postsSlice = createSlice({
|
||||
name: "posts",
|
||||
initialState: {} as Record<string, Post>,
|
||||
reducers: {
|
||||
setPost(state, action: PayloadAction<Post>) {
|
||||
state[action.payload.id] = action.payload;
|
||||
},
|
||||
removePost(state, action: PayloadAction<string>) {
|
||||
delete state[action.payload];
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const posts = postsSlice.reducer;
|
||||
export const { setPost, removePost } = postsSlice.actions;
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
import type { Store } from "$lib/store";
|
||||
|
||||
export const getAccount = (state: Store, id: string) =>
|
||||
id in state.accounts.accounts ? state.accounts.accounts[id] : undefined;
|
||||
|
||||
export const getCurrentAccount = (state: Store) =>
|
||||
state.accounts.currentAccount;
|
||||
|
||||
export const getAccountByName = (state: Store, username: string) => {
|
||||
const id =
|
||||
username in state.accounts.usernames
|
||||
? state.accounts.usernames[username]
|
||||
: undefined;
|
||||
if (!id) return undefined;
|
||||
return id in state.accounts.accounts
|
||||
? state.accounts.accounts[id]
|
||||
: undefined;
|
||||
};
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
import type { Store } from "$lib/store";
|
||||
|
||||
export const getBlog = (state: Store, id: string) =>
|
||||
id in state.blogs.blogs ? state.blogs.blogs[id] : undefined;
|
||||
|
||||
export const getBlogByBlogName = (state: Store, name: string) => {
|
||||
const id =
|
||||
name in state.blogs.blogNames ? state.blogs.blogNames[name] : undefined;
|
||||
if (!id) return undefined;
|
||||
return id in state.blogs.blogs ? state.blogs.blogs[id] : undefined;
|
||||
};
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
export { getPost } from "./posts";
|
||||
export { getBlog, getBlogByBlogName } from "./blogs";
|
||||
export { getAccount, getAccountByName, getCurrentAccount } from "./accounts";
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
import type { Store } from "$lib/store";
|
||||
|
||||
/** Gets a status from the store by ID. */
|
||||
export const getPost = (state: Store, id: string) =>
|
||||
id in state.posts ? state.posts[id] : undefined;
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
import { render } from "preact";
|
||||
import "@fontsource/roboto/300.css";
|
||||
import "@fontsource/roboto/400.css";
|
||||
import "@fontsource/roboto/500.css";
|
||||
import "@fontsource/roboto/700.css";
|
||||
|
||||
import App from "./app.tsx";
|
||||
import "./i18n";
|
||||
|
||||
render(<App />, document.getElementById("app")!);
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
import { useGetPostByIdQuery } from "$/lib/store/api";
|
||||
import { CircularProgress } from "@mui/material";
|
||||
import { Redirect, useRoute } from "wouter-preact";
|
||||
import Post from "$components/post/Post";
|
||||
|
||||
export default function PostPage() {
|
||||
const [, params] = useRoute("/@:username/posts/:postId");
|
||||
const { data, error, isLoading } = useGetPostByIdQuery(params!.postId);
|
||||
|
||||
if (error) {
|
||||
throw error;
|
||||
} else if (isLoading || !data) {
|
||||
return <CircularProgress />;
|
||||
}
|
||||
|
||||
if (data.blog.name !== params!.username) {
|
||||
return (
|
||||
<>
|
||||
<Redirect to={`/web/@${data.blog.name}/posts/${data.id}`} />
|
||||
<p>hi world!</p>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Post post={data} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
import { useAppSelector } from "$/lib/hooks";
|
||||
import { getCurrentAccount } from "$/lib/store/selectors";
|
||||
|
||||
export default function HomeTimeline() {
|
||||
const account = useAppSelector(getCurrentAccount);
|
||||
|
||||
return (
|
||||
<>
|
||||
<ul>
|
||||
<li>Username: {account.username}</li>
|
||||
<li>ID: {account.id}</li>
|
||||
<li>Domain: {account.domain}</li>
|
||||
<li>Email: {account.email}</li>
|
||||
</ul>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
{
|
||||
"navbar": {
|
||||
"homeTimeline": "Home timeline"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
{
|
||||
"navbar": {
|
||||
"homeTimeline": "Yar friends' bottles"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,78 +0,0 @@
|
|||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
content: [
|
||||
"../web/frontend/app.html",
|
||||
"./index.html",
|
||||
"./src/**/*.{js,ts,jsx,tsx}",
|
||||
],
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
textDark: "#ffffff",
|
||||
textLight: "#000000",
|
||||
background: {
|
||||
50: "#fefefe",
|
||||
100: "#fdfdfd",
|
||||
200: "#fbfbfb",
|
||||
300: "#f9f9f9",
|
||||
400: "#f7f7f7",
|
||||
500: "#f5f5f5",
|
||||
600: "#c4c4c4",
|
||||
700: "#939393",
|
||||
800: "#626262",
|
||||
900: "#313131",
|
||||
},
|
||||
primary: {
|
||||
50: "#e6f2f3",
|
||||
100: "#cee5e8",
|
||||
200: "#9ccbd1",
|
||||
300: "#6bb2b9",
|
||||
400: "#3998a2",
|
||||
500: "#087e8b",
|
||||
600: "#06656f",
|
||||
700: "#054c53",
|
||||
800: "#033238",
|
||||
900: "#02191c",
|
||||
},
|
||||
secondary: {
|
||||
50: "#f2f2f3",
|
||||
100: "#e5e5e7",
|
||||
200: "#cbccce",
|
||||
300: "#b0b2b6",
|
||||
400: "#96999d",
|
||||
500: "#7c7f85",
|
||||
600: "#63666a",
|
||||
700: "#4a4c50",
|
||||
800: "#323335",
|
||||
900: "#19191b",
|
||||
},
|
||||
danger: {
|
||||
50: "#ffefef",
|
||||
100: "#ffdedf",
|
||||
200: "#ffbdbf",
|
||||
300: "#ff9c9f",
|
||||
400: "#ff7b7f",
|
||||
500: "#ff5a5f",
|
||||
600: "#cc484c",
|
||||
700: "#993639",
|
||||
800: "#662426",
|
||||
900: "#331213",
|
||||
},
|
||||
success: {
|
||||
50: "#edf6f0",
|
||||
100: "#dbece1",
|
||||
200: "#b8d9c2",
|
||||
300: "#94c7a4",
|
||||
400: "#71b485",
|
||||
500: "#4da167",
|
||||
600: "#3e8152",
|
||||
700: "#2e613e",
|
||||
800: "#1f4029",
|
||||
900: "#0f2015",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
};
|
||||
|
|
@ -12,8 +12,8 @@
|
|||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx",
|
||||
"jsxImportSource": "preact",
|
||||
"jsx": "preserve",
|
||||
"jsxImportSource": "solid-js",
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
|
|
@ -22,8 +22,6 @@
|
|||
"noFallthroughCasesInSwitch": true,
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"react": ["./node_modules/preact/compat/"],
|
||||
"react-dom": ["./node_modules/preact/compat/"],
|
||||
"$/*": ["./src/*"],
|
||||
"$lib/*": ["src/lib/*"],
|
||||
"$components/*": ["src/components/*"],
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
import { defineConfig } from "vite";
|
||||
import preact from "@preact/preset-vite";
|
||||
import solid from "vite-plugin-solid";
|
||||
import suid from "@suid/vite-plugin";
|
||||
import { resolve } from "path";
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [preact()],
|
||||
plugins: [suid(), solid()],
|
||||
build: {
|
||||
manifest: "manifest.json",
|
||||
},
|
||||
|
|
|
|||
2611
pnpm-lock.yaml
2611
pnpm-lock.yaml
File diff suppressed because it is too large
Load diff
|
|
@ -40,7 +40,7 @@ func New(app *app.App) *Frontend {
|
|||
glue, err := vueglue.NewVueGlue(&vueglue.ViteConfig{
|
||||
Environment: "development",
|
||||
AssetsPath: "frontend",
|
||||
EntryPoint: "src/main.tsx",
|
||||
EntryPoint: "src/index.tsx",
|
||||
Platform: "vue",
|
||||
FS: os.DirFS("frontend"),
|
||||
})
|
||||
|
|
@ -55,7 +55,7 @@ func New(app *app.App) *Frontend {
|
|||
Environment: "production",
|
||||
URLPrefix: "/assets/",
|
||||
AssetsPath: "dist",
|
||||
EntryPoint: "src/main.tsx",
|
||||
EntryPoint: "src/index.tsx",
|
||||
Platform: "vue",
|
||||
FS: frontend.Embed,
|
||||
})
|
||||
|
|
|
|||
Loading…
Reference in a new issue