hexmani.ac
pleroma-like client for Bluesky
pl.hexmani.ac
bluesky
pleroma
social-media
Create non-functional login page
+344
-35
+1
-1
README.md
+1
-1
README.md
···
1
-
<img src="meta/logo.png" alt="The Bluroma logo, containing three rectangles with one rounded corner each shaped to look like an uppercase B and the Bluroma name written in the Convection font beside it." width="200">
1
+
<img src="static/logo.png" alt="The Bluroma logo, containing three rectangles with one rounded corner each shaped to look like an uppercase B and the Bluroma name written in the Convection font beside it." width="200">
2
2
3
3
## About
4
4
+3
bun.lock
+3
bun.lock
···
4
4
"": {
5
5
"name": "vite-template-solid",
6
6
"dependencies": {
7
+
"@solidjs/router": "^0.15.3",
7
8
"solid-js": "^1.9.5",
8
9
},
9
10
"devDependencies": {
···
215
216
"@solid-primitives/styles": ["@solid-primitives/styles@0.1.2", "", { "dependencies": { "@solid-primitives/rootless": "^1.5.2", "@solid-primitives/utils": "^6.3.2" }, "peerDependencies": { "solid-js": "^1.6.12" } }, "sha512-7iX5K+J5b1PRrbgw3Ki92uvU2LgQ0Kd/QMsrAZxDg5dpUBwMyTijZkA3bbs1ikZsT1oQhS41bTyKbjrXeU0Awg=="],
216
217
217
218
"@solid-primitives/utils": ["@solid-primitives/utils@6.3.2", "", { "peerDependencies": { "solid-js": "^1.6.12" } }, "sha512-hZ/M/qr25QOCcwDPOHtGjxTD8w2mNyVAYvcfgwzBHq2RwNqHNdDNsMZYap20+ruRwW4A3Cdkczyoz0TSxLCAPQ=="],
219
+
220
+
"@solidjs/router": ["@solidjs/router@0.15.3", "", { "peerDependencies": { "solid-js": "^1.8.6" } }, "sha512-iEbW8UKok2Oio7o6Y4VTzLj+KFCmQPGEpm1fS3xixwFBdclFVBvaQVeibl1jys4cujfAK5Kn6+uG2uBm3lxOMw=="],
218
221
219
222
"@types/babel__core": ["@types/babel__core@7.20.5", "", { "dependencies": { "@babel/parser": "^7.20.7", "@babel/types": "^7.20.7", "@types/babel__generator": "*", "@types/babel__template": "*", "@types/babel__traverse": "*" } }, "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA=="],
220
223
+4
-2
index.html
+4
-2
index.html
···
1
1
<!doctype html>
2
2
<html lang="en">
3
3
<head>
4
+
<link rel="icon" href="/favicon.png" type="image/png" />
4
5
<meta charset="utf-8" />
5
6
<meta name="viewport" content="width=device-width, initial-scale=1" />
6
7
<meta name="theme-color" content="#1285FE" />
···
16
17
<h2>JavaScript not enabled</h2>
17
18
<p>
18
19
Your browser has either disabled JavaScript or an extension
19
-
has blocked Bluroma from using JavaScript. Please enable
20
-
JavaScript to continue.
20
+
has blocked Bluroma from using JavaScript.</p>
21
+
<p>Please enable
22
+
JavaScript to continue.</p>
21
23
</p>
22
24
<img src="/favicon.png" alt="Bluroma Logo" />
23
25
</div>
meta/logo.png
static/logo.png
meta/logo.png
static/logo.png
+1
package.json
+1
package.json
-10
src/App.scss
-10
src/App.scss
-15
src/App.tsx
-15
src/App.tsx
+19
src/components/container.tsx
+19
src/components/container.tsx
···
1
+
import { JSX } from "solid-js";
2
+
3
+
type ContainerProps = {
4
+
title: string;
5
+
children?: JSX.Element;
6
+
};
7
+
8
+
const Container = (props: ContainerProps) => {
9
+
return (
10
+
<div class="container">
11
+
<div class="container-header">
12
+
<span>{props.title}</span>
13
+
</div>
14
+
<div>{props.children}</div>
15
+
</div>
16
+
);
17
+
};
18
+
19
+
export default Container;
+14
-6
src/index.tsx
+14
-6
src/index.tsx
···
1
1
/* @refresh reload */
2
-
import { render } from 'solid-js/web';
3
-
import 'solid-devtools';
2
+
import { render } from "solid-js/web";
3
+
import "solid-devtools";
4
+
import { Route, Router } from "@solidjs/router";
4
5
5
-
import App from './App';
6
+
import Login from "./routes/login";
6
7
7
-
const root = document.getElementById('root');
8
+
const root = document.getElementById("root");
8
9
9
10
if (import.meta.env.DEV && !(root instanceof HTMLElement)) {
10
11
throw new Error(
11
-
'Root element not found. Did you forget to add it to your index.html? Or maybe the id attribute got misspelled?',
12
+
"Root element not found. Did you forget to add it to your index.html? Or maybe the id attribute got misspelled?",
12
13
);
13
14
}
14
15
15
-
render(() => <App />, root!);
16
+
render(
17
+
() => (
18
+
<Router root={Login}>
19
+
<Route path="/" component={Login} />
20
+
</Router>
21
+
),
22
+
root!,
23
+
);
+69
src/routes/login.tsx
+69
src/routes/login.tsx
···
1
+
import { Component } from "solid-js";
2
+
import Navbar from "../components/navbar";
3
+
import "../styles/main.scss";
4
+
import typefaceLogo from "/logo.png?url";
5
+
import Container from "../components/container";
6
+
7
+
const Login: Component = () => {
8
+
return (
9
+
<>
10
+
<Navbar />
11
+
<div id="sidebar">
12
+
<Container
13
+
title="Log in"
14
+
children={
15
+
<div class="login">
16
+
<form name="login" id="login">
17
+
<label for="handle">Handle</label>
18
+
<br />
19
+
<input
20
+
type="text"
21
+
id="handle"
22
+
name="handle"
23
+
maxlength="255"
24
+
placeholder="soykaf.com"
25
+
required
26
+
/>
27
+
<br />
28
+
<button type="submit">Login</button>
29
+
</form>
30
+
</div>
31
+
}
32
+
/>
33
+
</div>
34
+
<div id="content">
35
+
<Container
36
+
title="About"
37
+
children={
38
+
<>
39
+
<img src={typefaceLogo} width="400" />
40
+
<h2>A Bluesky client with a familiar face</h2>
41
+
<hr />
42
+
<p>
43
+
<b>Bluroma</b> is a web client for Bluesky, designed to provide
44
+
a customizable power-user experience. Its design is heavily
45
+
influenced by the <a href="https://pleroma.social">Pleroma</a>{" "}
46
+
and <a href="https://akkoma.social">Akkoma</a> projects, and
47
+
intends to provide a similar, from-scratch user interface for
48
+
Bluesky users.
49
+
</p>
50
+
<h3>Links</h3>
51
+
<ul>
52
+
<li>
53
+
<a href="https://tangled.org/@hexmani.ac/bluroma">Tangled</a>
54
+
</li>
55
+
<li>
56
+
<a href="https://pdsls.dev/at://did:plc:5szlrh3xkfxxsuu4mo6oe6h7">
57
+
Developer
58
+
</a>
59
+
</li>
60
+
</ul>
61
+
</>
62
+
}
63
+
/>
64
+
</div>
65
+
</>
66
+
);
67
+
};
68
+
69
+
export default Login;
+25
src/styles/container.scss
+25
src/styles/container.scss
···
1
+
@use "./vars";
2
+
3
+
.container {
4
+
background-color: rgba(15, 22, 30, 1);
5
+
border-radius: vars.$containerBorderRadius;
6
+
margin: 1em;
7
+
padding: 0 0 1em 0;
8
+
max-height: 100%;
9
+
box-shadow:
10
+
0px 0px 3px 0px rgba(0, 0, 0, 0.5),
11
+
0px 4px 6px 3px rgba(0, 0, 0, 0.3);
12
+
}
13
+
14
+
.container-header {
15
+
font-weight: 500;
16
+
background-color: vars.$foregroundColor;
17
+
text-align: left;
18
+
padding: 1em;
19
+
height: 1rem;
20
+
border-radius: vars.$containerBorderRadius vars.$containerBorderRadius 0 0;
21
+
margin-bottom: 1em;
22
+
box-shadow:
23
+
0px 1px 3px 0px rgba(0, 0, 0, 0.4),
24
+
0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset;
25
+
}
+180
src/styles/main.scss
+180
src/styles/main.scss
···
1
+
@use "./container";
2
+
@use "./vars";
3
+
4
+
/* Core page format */
5
+
6
+
body {
7
+
box-sizing: border-box;
8
+
display: grid;
9
+
column-gap: 1rem;
10
+
grid-template-columns: auto 20% 35% 20% auto;
11
+
grid-template-rows: auto auto auto;
12
+
text-align: center;
13
+
color: vars.$textColor;
14
+
background-color: rgba(12, 17, 24, 1);
15
+
font-family: Arial, Helvetica, sans-serif;
16
+
margin: 0;
17
+
overflow: hidden;
18
+
}
19
+
20
+
#nav {
21
+
box-shadow:
22
+
0px 1px 4px 0px rgba(0, 0, 0, 0.4),
23
+
0px 2px 7px 0px rgba(0, 0, 0, 0.3);
24
+
display: grid;
25
+
grid-template-rows: auto;
26
+
grid-template-columns: auto auto auto auto auto;
27
+
grid-column-start: span 5;
28
+
grid-row-start: span 1;
29
+
background-color: vars.$foregroundColor;
30
+
height: 3.5rem;
31
+
padding-right: 0;
32
+
width: 100%;
33
+
}
34
+
35
+
.center-nav {
36
+
grid-column: 3;
37
+
position: relative;
38
+
39
+
img {
40
+
transition-timing-function: ease-in-out;
41
+
transition-duration: 0.15s;
42
+
margin-top: 0.5rem;
43
+
height: 2.5rem;
44
+
filter: grayscale(1);
45
+
}
46
+
47
+
img:hover {
48
+
filter: grayscale(0);
49
+
}
50
+
}
51
+
52
+
#sidebar {
53
+
grid-column-start: 2;
54
+
grid-column-end: 3;
55
+
grid-row-start: 2;
56
+
grid-row-end: 3;
57
+
}
58
+
59
+
#content {
60
+
grid-column-start: 3;
61
+
grid-column-end: 5;
62
+
grid-row-start: span 2;
63
+
}
64
+
65
+
/* Login menu */
66
+
67
+
.login,
68
+
.login > form {
69
+
display: flex;
70
+
flex-direction: column;
71
+
text-align: left;
72
+
line-height: 24px;
73
+
padding: 0.3em 0.5em 0;
74
+
75
+
label {
76
+
margin-bottom: 0.25rem;
77
+
}
78
+
79
+
input {
80
+
background-color: vars.$foregroundColor;
81
+
border: 0;
82
+
border-radius: 3px;
83
+
box-shadow:
84
+
0px 1px 0px 0px rgba(0, 0, 0, 0.2) inset,
85
+
0px -1px 0px 0px rgba(255, 255, 255, 0.2) inset,
86
+
0px 0px 2px 0px rgba(0, 0, 0, 1) inset;
87
+
color: vars.$textColor;
88
+
padding: 0.5rem;
89
+
}
90
+
91
+
button {
92
+
display: flex;
93
+
flex-direction: row;
94
+
justify-content: end;
95
+
align-items: center;
96
+
text-align: right;
97
+
align-self: flex-end;
98
+
border-radius: vars.$containerBorderRadius;
99
+
}
100
+
}
101
+
102
+
a {
103
+
text-decoration: none;
104
+
color: #1185fe;
105
+
}
106
+
107
+
a:hover {
108
+
font-weight: bold;
109
+
font-style: italic;
110
+
}
111
+
112
+
button,
113
+
.button {
114
+
padding: 0.5em 1em;
115
+
margin: 1em 0;
116
+
font-family: Arial, Helvetica, sans-serif;
117
+
font-weight: bold;
118
+
border: none;
119
+
border-radius: containerBorderRadius;
120
+
background-color: vars.$foregroundColor;
121
+
color: vars.$textColor;
122
+
width: auto;
123
+
box-shadow:
124
+
0px 0px 2px 0px rgba(0, 0, 0, 1),
125
+
0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset,
126
+
0px -1px 0px 0px rgba(0, 0, 0, 0.2) inset;
127
+
}
128
+
129
+
button:hover,
130
+
.button:hover {
131
+
box-shadow:
132
+
0px 0px 1px 2px rgba(185, 185, 186, 0.4) inset,
133
+
0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset,
134
+
0px -1px 0px 0px rgba(0, 0, 0, 0.2) inset;
135
+
}
136
+
137
+
img {
138
+
display: inline-block;
139
+
}
140
+
141
+
ul {
142
+
display: inline;
143
+
list-style-type: none;
144
+
}
145
+
146
+
h3 {
147
+
margin-bottom: 0;
148
+
}
149
+
150
+
/* Dashboard */
151
+
152
+
.post-form {
153
+
display: flex;
154
+
flex-direction: column;
155
+
place-content: center;
156
+
157
+
button {
158
+
}
159
+
}
160
+
161
+
#post-textbox {
162
+
background-color: vars.$foregroundColor;
163
+
border: 0;
164
+
border-radius: containerBorderRadius;
165
+
box-shadow:
166
+
0px 1px 0px 0px rgba(0, 0, 0, 0.2) inset,
167
+
0px -1px 0px 0px rgba(255, 255, 255, 0.2) inset,
168
+
0px 0px 2px 0px rgba(0, 0, 0, 1) inset;
169
+
color: vars.$textColor;
170
+
font-family: inherit;
171
+
font-size: 14px;
172
+
resize: none;
173
+
max-width: 90%;
174
+
}
175
+
176
+
.dashboard-feed {
177
+
p {
178
+
color: #8d8d8d;
179
+
}
180
+
}
+3
src/styles/vars.scss
+3
src/styles/vars.scss
+7
-1
static/styles/nojs.css
+7
-1
static/styles/nojs.css