Skip to content

Commit 468201a

Browse files
gwennlbhgwennlbh
committed
✨ Styling done + metrics
1 parent b3a0ed7 commit 468201a

11 files changed

+302
-61
lines changed

‎README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ echo "AUTHENTIK_SECRET_KEY=$(openssl rand -base64 60 | tr -d '\n')" >> .env
99
docker compose up -d
1010
# se faire un café
1111
bun i
12-
bun mesh dev
12+
bun dev
1313
```
1414

1515
## Tester

‎authentik.yaml

+2
Original file line numberDiff line numberDiff line change
@@ -39247,9 +39247,11 @@ components:
3924739247
properties:
3924839248
x_cord:
3924939249
type: integer
39250+
format: int64
3925039251
readOnly: true
3925139252
y_cord:
3925239253
type: integer
39254+
format: int64
3925339255
readOnly: true
3925439256
required:
3925539257
- x_cord

‎bun.lockb

448 Bytes
Binary file not shown.

‎mesh.config.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -120,7 +120,7 @@ export const composeConfig = defineComposeConfig({
120120
@resolveTo(
121121
sourceName: "Authentik"
122122
sourceTypeName: "Query"
123-
sourceFieldName: "core_application_metrics_list"
123+
sourceFieldName: "core_applications_metrics_list"
124124
requiredSelectionSet: "{ slug }"
125125
sourceArgs: { slug: "{root.slug}" }
126126
)

‎package.json

+3-2
Original file line numberDiff line numberDiff line change
@@ -40,8 +40,8 @@
4040
"vite": "^5.0.3"
4141
},
4242
"dependencies": {
43-
"@graphql-mesh/migrate-config-cli": "^1.2.3",
4443
"@graphql-hive/gateway": "^1.4.12",
44+
"@graphql-mesh/migrate-config-cli": "^1.2.3",
4545
"@graphql-mesh/transform-filter-schema": "^0.102.12",
4646
"@graphql-mesh/transform-naming-convention": "^0.102.12",
4747
"@graphql-mesh/transform-prefix": "^0.102.12",
@@ -50,7 +50,8 @@
5050
"arctic": "^2.2.2",
5151
"dotenv": "^16.4.5",
5252
"graphql": "^16.9.0",
53-
"slug": "^10.0.0"
53+
"slug": "^10.0.0",
54+
"svelte-tiny-linked-charts": "^1.6.2"
5455
},
5556
"patchedDependencies": {
5657
"@graphql-tools/[email protected]": "patches/@graphql-tools%[email protected]"

‎src/app.html

+64
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,70 @@
44
<meta charset="utf-8" />
55
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
66
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
<link rel="preconnect" href="https://fonts.googleapis.com" />
8+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
9+
<link
10+
href="https://fonts.googleapis.com/css2?family=Host+Grotesk:ital,wght@0,300..800;1,300..800&family=Azaret+Mono&display=swap"
11+
rel="stylesheet"
12+
/>
13+
<style>
14+
h1,
15+
h2,
16+
h3,
17+
label,
18+
dt,
19+
input {
20+
font-family: 'Azaret Mono', monospace;
21+
}
22+
h1,
23+
h2,
24+
h3 {
25+
margin: 0;
26+
padding: 0;
27+
}
28+
*:not(h1, h2, h3, label, dt, input) {
29+
font-family: 'Host Grotesk', sans-serif;
30+
}
31+
body {
32+
--green: #09ff89;
33+
background-color: black;
34+
color: white;
35+
}
36+
input {
37+
font-size: 1em;
38+
background-color: transparent;
39+
color: var(--green);
40+
border: 1px solid var(--green);
41+
box-shadow: none;
42+
padding: 0.25em 0.5em;
43+
}
44+
input:focus {
45+
background-color: var(--green);
46+
color: black;
47+
}
48+
button {
49+
cursor: pointer;
50+
}
51+
h1,
52+
h2,
53+
h3,
54+
a {
55+
color: var(--green);
56+
}
57+
58+
:is(a.button, button) {
59+
text-decoration: none;
60+
padding: 1ch 2ch;
61+
background-color: transparent;
62+
color: var(--green);
63+
border: 1px solid var(--green);
64+
}
65+
:is(a.button, button):hover,
66+
:is(a.button, button):focus-visible {
67+
background-color: var(--green);
68+
color: black;
69+
}
70+
</style>
771
%sveltekit.head%
872
</head>
973
<body data-sveltekit-preload-data="hover">

‎src/routes/+layout.svelte

+63
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
<script lang="ts">
2+
import { page } from '$app/stores';
3+
4+
let { children } = $props();
5+
</script>
6+
7+
<header>
8+
<h1>
9+
<a href="/">
10+
<img
11+
src="https://git.inpt.fr/inp-net/visual-identity/-/raw/main/favicon-green-on-black.svg"
12+
alt=">_"
13+
/>
14+
INP Developers
15+
</a>
16+
</h1>
17+
<a class="button" href={$page.url.hash === '#new' && $page.url.pathname === '/' ? '#' : '/#new'}
18+
>new app</a
19+
>
20+
</header>
21+
22+
<main>{@render children()}</main>
23+
24+
<footer>
25+
Un service INP-net.
26+
<br />
27+
source @
28+
<a href="https://git.inpt.fr/inp-net/developers-dashboard"
29+
>git.inpt.fr/inp-net/developers-dashboard</a
30+
>
31+
<br />
32+
stack = &lbrace; <a href="https://the-guild.dev/graphql/mesh">GraphQL Mesh</a>,
33+
<a href="https://svelte.dev">Svelte</a>, <a href="https://houdinigraphql.com">Houdini GraphQL</a> &rbrace;
34+
</footer>
35+
36+
<style>
37+
h1 a {
38+
display: flex;
39+
align-items: center;
40+
gap: 0 1ch;
41+
text-decoration: none;
42+
}
43+
h1 img {
44+
height: 1.2em;
45+
}
46+
47+
header,
48+
main,
49+
footer {
50+
max-width: 1000px;
51+
margin: 0 auto;
52+
}
53+
header {
54+
margin-bottom: 3rem;
55+
display: flex;
56+
justify-content: space-between;
57+
align-items: center;
58+
}
59+
footer {
60+
margin-top: 5rem;
61+
opacity: 0.5;
62+
}
63+
</style>

‎src/routes/+page.svelte

+63-28
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
import type { PageData } from './$houdini';
44
import { onMount } from 'svelte';
55
import { goto } from '$app/navigation';
6+
import { page } from '$app/stores';
67
78
interface Props {
89
data: PageData;
@@ -11,6 +12,7 @@
1112
1213
const { data, form }: Props = $props();
1314
const { PageHome } = $derived(data);
15+
let creating = $derived($page.url.hash === '#new');
1416
1517
const apps = $derived(
1618
$PageHome.data?.applications?.__typename === 'PaginatedApplicationList'
@@ -27,46 +29,79 @@
2729
});
2830
</script>
2931

30-
<h1>Home</h1>
3132
{#if apps.length === 0}
32-
<a href="/login">Connexion</a>
33-
{/if}
34-
35-
<form action="?/createApp" method="post">
36-
<label>
37-
<span>Groupe Churros</span>
38-
<input type="text" name="group" />
39-
</label>
40-
<label>
41-
<span>Nom de l'app</span>
42-
<input type="text" name="name" />
43-
</label>
33+
<a class="button" href="/login">Connexion</a>
34+
{:else}
35+
{#if creating}
36+
<form class="new" action="?/createApp" method="post">
37+
<label for="new-group">
38+
<span>Groupe Churros</span>
39+
</label>
40+
<input id="new-group" type="text" name="group" />
41+
<label for="new-name">
42+
<span>Nom de l'app</span>
43+
</label>
44+
<input id="new-name" type="text" name="name" />
4445

45-
<section class="submit">
46-
<button type="submit">Créer</button>
47-
</section>
48-
</form>
46+
<section class="submit">
47+
<button type="submit">Créer</button>
48+
</section>
49+
</form>
50+
{/if}
4951

50-
<ul>
51-
{#each apps as app}
52-
<li>
53-
<a href="/apps/{app.slug}">
54-
<img src={app.metaIcon} alt="Icone" />
55-
{app.name} by {app?.metaPublisher}
56-
</a>
57-
</li>
58-
{/each}
59-
</ul>
52+
<ul>
53+
{#each apps as app}
54+
<li>
55+
<a href="/apps/{app.slug}">
56+
<img src={app.metaIcon} alt="[]" />
57+
{app.name}
58+
<small>
59+
by {app?.metaPublisher}
60+
</small>
61+
</a>
62+
</li>
63+
{/each}
64+
</ul>
65+
{/if}
6066

6167
<style>
68+
form.new {
69+
display: flex;
70+
flex-direction: column;
71+
justify-content: center;
72+
align-items: center;
73+
padding: 3rem 1rem;
74+
gap: 1rem 0;
75+
max-width: 600px;
76+
margin: 0 auto;
77+
}
6278
ul {
79+
--itemsize: 10rem;
6380
list-style: none;
6481
padding-left: 0;
82+
display: grid;
83+
grid-template-columns: repeat(auto-fill, minmax(var(--itemsize), 1fr));
84+
gap: 1px;
85+
background-color: var(--green);
86+
border: 1px solid var(--green);
6587
}
6688
li > a {
6789
display: flex;
6890
align-items: center;
69-
gap: 0 1ch;
91+
gap: 1ch;
92+
text-decoration: none;
93+
flex-direction: column;
94+
height: var(--itemsize);
95+
justify-content: center;
96+
align-items: center;
97+
padding: 2ch;
98+
background-color: black;
99+
text-align: center;
100+
}
101+
li > a:hover,
102+
li > a:focus-visible {
103+
background-color: var(--green);
104+
color: black;
70105
}
71106
li img {
72107
height: 1.5rem;

‎src/routes/apps/[slug]/+page.gql

+6-3
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,6 @@ query PageApplication($slug: String!) {
66
metaIcon
77
metaDescription
88
launchUrl
9-
churrosGroup {
10-
uid
11-
}
129
oauth2Provider {
1310
... on OAuth2Provider {
1411
pk
@@ -18,6 +15,12 @@ query PageApplication($slug: String!) {
1815
redirectUris
1916
}
2017
}
18+
metrics {
19+
... on Coordinate {
20+
xCord
21+
yCord
22+
}
23+
}
2124
}
2225
... on GenericError {
2326
detail

0 commit comments

Comments
 (0)