this repo has no description
docs: add link to prod qnd refine text
+57
-181
+57
-47
README.md
+57
-47
README.md
···
4
4
challenges and face your friends on various metrics (code length, runtime and
5
5
more!).
6
6
7
-
The goal is just to have a neat place to challenge you are your friends on dumb
8
-
on some golf code or stupid optimization problems. You could do a challenge
9
-
where you have to have as little as possible python code, or the fastest C as
10
-
an optimization problem, or even the shortest assembly generated code (with gcc,
11
-
no LLVM compilers).
7
+
The goal is just to have a neat place to challenge for you and your friends to
8
+
compete on dumb golf code challenges or stupid optimization problems. You could
9
+
do a challenge where you have to solve it with the shortest possible python
10
+
code, or the fastest C as an optimization problem, or even the shortest assembly
11
+
generated code (with gcc, no LLVM compilers).
12
+
13
+
The app is deployed at [uiua.online](https://uiua.online) (this is a temporary domain name I bought for 0.80$).
12
14
13
15
14
16
## data ownership
15
17
16
-
All your data is yours. You'll connect to the application using your
17
-
[internet handle](https://internethandle.org/) (aka. atproto identity, also
18
-
known as bluesky account).
18
+
All your data is yours. You'll connect to the application using your [internet
19
+
handle](https://internethandle.org/) (aka. atproto identity, also known as
20
+
bluesky account).
19
21
20
22
All the data you'll produce will be stored on your
21
23
[PDS](https://atproto.com/guides/data-repos) (Personal Data Server). When you
22
-
create a challenge, create tests cases, solutions, etc. everything is stored
23
-
on your PDS by default (you can store it privately on the platform, but this
24
-
is opt-in by design). The problems you'll write solutions for will be stored
25
-
on your PDS by default as well.
24
+
create a challenge, create tests cases, solutions, etc. everything is stored on
25
+
your PDS by default (you can store it privately on the platform, but this is
26
+
opt-in by design). The problems you'll write solutions for will be stored on
27
+
your PDS by default as well.
26
28
27
29
The goal is to allow users to own their data, be able to change platforms as
28
-
they see fit, even after the project dies. As long as their account exists
29
-
on *THEIR* PDS, they can access their data and continue using it. For the
30
-
moment, we wont permit the creation of new accounts on this app, users will have
31
-
to create it on any other platform on the atmosphere (as it requires more
30
+
they see fit, even after the project dies. As long as their account exists on
31
+
*THEIR* PDS, they can access their data and continue using it. For the moment,
32
+
we wont permit the creation of new accounts on this app, users will have to
33
+
create it on any other platform on the atmosphere (as it requires more
32
34
unesserary deployment complexity). I want to have the platform as open as
33
-
possible. The user with just have to log in with their handle/did, complete
34
-
the OAuth flow with their PDS, and then they can start using the platform
35
-
without having to create an account on this platform.
35
+
possible. The user with just have to log in with their handle/did, complete the
36
+
OAuth flow with their PDS, and then they can start using the platform without
37
+
having to create an account on this platform.
38
+
39
+
To learn more, I invite you to check out atproto documentation, or explore the
40
+
atproto collections linked to my account
41
+
[drawbu.dev](https://pdsls.dev/at://did:plc:pj5vgcebbi6shqj6zapminia).
36
42
37
43
38
44
## data / lexicon
···
98
104
## stack + deployment strategy
99
105
100
106
The app was planned to be a Golang + SvelteKit app deployed on Cloudflare
101
-
workers, but because of too many issues with the Go app compiled to WASM
102
-
on the workers runtime, I decided to switch to a full-stack app using
103
-
[Tanstack Start](https://tanstack.com/start/latest) + [Solid](https://www.solidjs.com/).
107
+
workers, but because of too many issues with the Go app compiled to WASM on the
108
+
workers runtime, I decided to switch to a full-stack app using [Tanstack
109
+
Start](https://tanstack.com/start/latest) + [Solid](https://www.solidjs.com/).
104
110
105
111
The app is going to be deployed automatically on Cloudflare workers by a
106
112
Continuous Integration & Deployment [pipeline](./.github/workflows/frontend.yml)
107
-
using GitHub Actions, with decentralized data ownership using [ATProto](https://atproto.com/)
108
-
and a [Cloudflare D1](https://developers.cloudflare.com/d1/) database for
109
-
storing data alongside that won't be stored on the atmosphere. The deployment
110
-
and database both will be deployed on serverless technologies because of its
111
-
deployment as code strategy and near-zero cost for early projects such as this
112
-
one.
113
-
114
-
For the text editor, I'll probably go with a [Monaco Editor](https://microsoft.github.io/monaco-editor/).
115
-
running on the client-side (maybe integrating local WASM lsps later), and will
116
-
use an external service dedicated to executing the code in a containerized,
117
-
reproducible environment. Some examples may include [sprites.dev](https://sprites.dev/)
118
-
and [judge0](https://judge0.com) or even a custom solution with Docker.
119
-
113
+
using GitHub Actions, with decentralized data ownership using
114
+
[ATProto](https://atproto.com/) and a [Cloudflare
115
+
D1](https://developers.cloudflare.com/d1/) database for storing data alongside
116
+
that won't be stored on the atmosphere. The deployment and database both will be
117
+
deployed on serverless technologies because of its deployment as code strategy
118
+
and near-zero cost for early projects such as this one.
120
119
121
-
## development environment
120
+
I setuped a reproducible development environment using a
121
+
[Nix](https://nixos.org/) flake. The whole project uses the
122
+
[pnpm](https://pnpm.io/) package manager, and uses
123
+
[Typescript](https://www.typescriptlang.org/) everywhere. It uses [Tanstack
124
+
Start](https://tanstack.com/start/latest/), [Solid](https://www.solidjs.com/),
125
+
[Tailwind](https://tailwindcss.com/). I will use
126
+
[Prisma](https://www.prisma.io/) as a database ORM, alongside [Tanstack
127
+
Query](https://tanstack.com/query/latest/), and the
128
+
[@atcute](https://github.com/mary-ext/atcute) atproto tools ecosystem (OAuth,
129
+
Lexicons, etc.).
122
130
123
-
I setuped a reproducible development environment using a [Nix](https://nixos.org/)
124
-
flake. The whole project uses the [pnpm](https://pnpm.io/) package manager,
125
-
and uses [Typescript](https://www.typescriptlang.org/) everywhere. It uses
126
-
[Tanstack Start](https://tanstack.com/start/latest/), [Solid](https://www.solidjs.com/),
127
-
[Tailwind](https://tailwindcss.com/). I will use [Prisma](https://www.prisma.io/)
128
-
as a database ORM, alongside [Tanstack Query](https://tanstack.com/query/latest/),
129
-
and the [@atcute](https://github.com/mary-ext/atcute) atproto tools ecosystem
130
-
(OAuth, Lexicons, etc.).
131
+
For the text editor, I'll probably go with a [Monaco
132
+
Editor](https://microsoft.github.io/monaco-editor/). running on the client-side
133
+
(maybe integrating local WASM lsps later), and will use an external service
134
+
dedicated to executing the code in a containerized, reproducible environment.
135
+
Some examples may include [sprites.dev](https://sprites.dev/) and
136
+
[judge0](https://judge0.com) or even a custom solution with Docker.
131
137
132
138
133
139
## acknowledgements
···
142
148
- [tangled](https://tangled.org/)
143
149
- [margin](https://margin.at/)
144
150
145
-
To be fair, this project is both because I wanted a platform like that where I
146
-
could easily create dump contests with my friends, but I also really wanted to
147
-
hack on the atmosphere :)
151
+
Inspiration:
152
+
- [npmx.dev](https://repo.npmx.dev/)
153
+
- [pdsls.dev](https://pdsls.dev/)
154
+
155
+
To be fair, I chose this project both because I wanted a platform like that
156
+
where I could easily create dump contests with my friends, but I also really
157
+
wanted to hack on the atmosphere :)
-134
app/README.md
-134
app/README.md
···
1
-
Welcome to your new TanStack app!
2
-
3
-
# Getting Started
4
-
5
-
To run this application:
6
-
7
-
```bash
8
-
pnpm install
9
-
pnpm dev
10
-
```
11
-
12
-
# Building For Production
13
-
14
-
To build this application for production:
15
-
16
-
```bash
17
-
pnpm build
18
-
```
19
-
20
-
## Styling
21
-
22
-
This project uses [Tailwind CSS](https://tailwindcss.com/) for styling.
23
-
24
-
## Routing
25
-
26
-
This project uses [TanStack Router](https://tanstack.com/router). The initial setup is a file based router. Which means that the routes are managed as files in `src/routes`.
27
-
28
-
### Adding A Route
29
-
30
-
To add a new route to your application just add another a new file in the `./src/routes` directory.
31
-
32
-
TanStack will automatically generate the content of the route file for you.
33
-
34
-
Now that you have two routes you can use a `Link` component to navigate between them.
35
-
36
-
### Adding Links
37
-
38
-
To use SPA (Single Page Application) navigation you will need to import the `Link` component from `@tanstack/solid-router`.
39
-
40
-
```tsx
41
-
import { Link } from '@tanstack/solid-router';
42
-
```
43
-
44
-
Then anywhere in your JSX you can use it like so:
45
-
46
-
```tsx
47
-
<Link to="/about">About</Link>
48
-
```
49
-
50
-
This will create a link that will navigate to the `/about` route.
51
-
52
-
More information on the `Link` component can be found in the [Link documentation](https://tanstack.com/router/v1/docs/framework/solid/api/router/linkComponent).
53
-
54
-
### Using A Layout
55
-
56
-
In the File Based Routing setup the layout is located in `src/routes/__root.tsx`. Anything you add to the root route will appear in all the routes. The route content will appear in the JSX where you use the `<Outlet />` component.
57
-
58
-
Here is an example layout that includes a header:
59
-
60
-
```tsx
61
-
import { Outlet, createRootRoute } from '@tanstack/solid-router';
62
-
import { Link } from '@tanstack/solid-router';
63
-
import { TanStackRouterDevtools } from '@tanstack/solid-router-devtools';
64
-
65
-
export const Route = createRootRoute({
66
-
component: () => (
67
-
<>
68
-
<header>
69
-
<nav>
70
-
<Link to="/">Home</Link>
71
-
<Link to="/about">About</Link>
72
-
</nav>
73
-
</header>
74
-
<Outlet />
75
-
<TanStackRouterDevtools />
76
-
</>
77
-
),
78
-
});
79
-
```
80
-
81
-
The `<TanStackRouterDevtools />` component is not required so you can remove it if you don't want it in your layout.
82
-
83
-
More information on layouts can be found in the [Layouts documentation](https://tanstack.com/router/latest/docs/framework/solid/guide/routing-concepts#layouts).
84
-
85
-
## Data Fetching
86
-
87
-
There are multiple ways to fetch data in your application. You can use TanStack Query to fetch data from a server. But you can also use the `loader` functionality built into TanStack Router to load the data for a route before it's rendered.
88
-
89
-
For example:
90
-
91
-
```tsx
92
-
const peopleRoute = createRoute({
93
-
getParentRoute: () => rootRoute,
94
-
path: '/people',
95
-
loader: async () => {
96
-
const response = await fetch('https://swapi.dev/api/people');
97
-
return response.json() as Promise<{
98
-
results: {
99
-
name: string;
100
-
}[];
101
-
}>;
102
-
},
103
-
component: () => {
104
-
const data = peopleRoute.useLoaderData();
105
-
return (
106
-
<ul>
107
-
{data.results.map((person) => (
108
-
<li key={person.name}>{person.name}</li>
109
-
))}
110
-
</ul>
111
-
);
112
-
},
113
-
});
114
-
```
115
-
116
-
Loaders simplify your data fetching logic dramatically. Check out more information in the [Loader documentation](https://tanstack.com/router/latest/docs/framework/solid/guide/data-loading#loader-parameters).
117
-
118
-
# Demo files
119
-
120
-
Files prefixed with `demo` can be safely deleted. They are there to provide a starting point for you to play around with the features you've installed.
121
-
122
-
## Linting & Formatting
123
-
124
-
This project uses [eslint](https://eslint.org/) and [prettier](https://prettier.io/) for linting and formatting. Eslint is configured using [tanstack/eslint-config](https://tanstack.com/config/latest/docs/eslint). The following scripts are available:
125
-
126
-
```bash
127
-
pnpm lint
128
-
pnpm format
129
-
pnpm check
130
-
```
131
-
132
-
# Learn More
133
-
134
-
You can learn more about all of the offerings from TanStack in the [TanStack documentation](https://tanstack.com).