wip: Custom mirroring tangled knot written in Rust
rust
tangled
mirror
knot
app: init homepage
+85
-1
+16
-1
app/src/App.tsx
+16
-1
app/src/App.tsx
···
1
1
import type { Component } from "solid-js";
2
+
import { SignInButton } from "./SigninButton";
2
3
import { SessionProvider } from "./session";
3
4
import { QueryClient, QueryClientProvider } from "@tanstack/solid-query";
5
+
import { RepositoriesList } from "./RepositoriesList";
4
6
5
7
const queryClient = new QueryClient();
8
+
9
+
const hostame = import.meta.env.VITE_HOSTNAME ?? window.location.hostname;
6
10
7
11
const App: Component = () => {
8
12
return (
9
13
<QueryClientProvider client={queryClient}>
10
14
<SessionProvider>
11
-
<p class="text-4xl text-green-700 text-center py-20">Hello tailwind!</p>
15
+
<div class="mx-auto max-w-xl lg:max-w-4xl py-4 px-4 min-h-dvh">
16
+
<header class="border-b-2 border-zinc-300 dark:border-zinc-300">
17
+
<h1>
18
+
<span class="text-amber-700">{hostame}</span> dashboard
19
+
</h1>
20
+
<span>configure your knotty instance</span>
21
+
</header>
22
+
<main>
23
+
<SignInButton />
24
+
<RepositoriesList />
25
+
</main>
26
+
</div>
12
27
</SessionProvider>
13
28
</QueryClientProvider>
14
29
);
+7
app/src/RepositoriesList.tsx
+7
app/src/RepositoriesList.tsx
+62
app/src/index.css
+62
app/src/index.css
···
1
1
@import "tailwindcss";
2
+
3
+
@font-face {
4
+
font-family: "Iosevka";
5
+
font-style: normal;
6
+
font-display: swap;
7
+
font-weight: 400;
8
+
src:
9
+
url(https://cdn.jsdelivr.net/fontsource/fonts/iosevka@latest/latin-400-normal.woff2)
10
+
format("woff2"),
11
+
url(https://cdn.jsdelivr.net/fontsource/fonts/iosevka@latest/latin-400-normal.woff)
12
+
format("woff");
13
+
}
14
+
15
+
:root {
16
+
@apply bg-background text-text font-mono text-lg;
17
+
18
+
--background: var(--color-zinc-100);
19
+
--background-contrast: hsl(0 0% 5%);
20
+
--text: var(--color-black);
21
+
--text-contrast: var(--color-zinc-200);
22
+
--border: var(--color-zinc-400);
23
+
--border-input: var(--color-zinc-300);
24
+
--bg-input: var(--color-white);
25
+
--success: hsl(142 71% 30%);
26
+
--error: var(--color-red-600);
27
+
28
+
@variant dark {
29
+
--background: hsl(0 0% 5%);
30
+
--background-contrast: var(--color-zinc-100);
31
+
--text: var(--color-zinc-200);
32
+
--text-contrast: var(--color-black);
33
+
--border: var(--color-zinc-700);
34
+
--border-input: var(--color-zinc-800);
35
+
--bg-input: var(--color-zinc-900);
36
+
--success: hsl(142 71% 55%);
37
+
--error: var(--color-red-400);
38
+
}
39
+
}
40
+
41
+
@theme inline {
42
+
--font-mono: "Iosevka", monospace;
43
+
44
+
--color-background: var(--background);
45
+
--color-background-contrast: var(--background-contrast);
46
+
--color-text: var(--text);
47
+
--color-text-contrast: var(--text-contrast);
48
+
--color-border: var(--border);
49
+
--color-bg-input: var(--bg-input);
50
+
--color-border-input: var(--border-input);
51
+
--color-success: var(--success);
52
+
--color-error: var(--error);
53
+
54
+
--radius-input: 9px;
55
+
--spacing-input: 3rem;
56
+
57
+
--shadow-mini: 0px 1px 0px 1px rgba(0, 0, 0, 0.04);
58
+
--shadow-btn: 0px 1px 0px 1px rgba(0, 0, 0, 0.03);
59
+
}
60
+
61
+
@utility focus-ring {
62
+
@apply focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current;
63
+
}