Skip to content

Commit

Permalink
use navaid as an SPA router
Browse files Browse the repository at this point in the history
reykjalin committed Oct 29, 2024
1 parent 7763e65 commit 1eea09a
Showing 19 changed files with 124 additions and 73 deletions.
20 changes: 20 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -30,6 +30,7 @@
},
"dependencies": {
"axios": "^1.6.8",
"navaid": "^1.2.0",
"zod": "^3.22.5"
}
}
}
8 changes: 7 additions & 1 deletion resources/css/style.css
Original file line number Diff line number Diff line change
@@ -8,6 +8,7 @@
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'Atkinson Hyperlegible';
src:
@@ -16,6 +17,7 @@
font-weight: bold;
font-style: normal;
}

@font-face {
font-family: 'Atkinson Hyperlegible';
src:
@@ -24,6 +26,7 @@
font-weight: normal;
font-style: italic;
}

@font-face {
font-family: 'Atkinson Hyperlegible';
src:
@@ -39,18 +42,21 @@
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'JetBrains Mono';
src: url('../fonts/JetBrainsMono-Bold.woff2') format('woff2');
font-weight: bold;
font-style: normal;
}

@font-face {
font-family: 'JetBrains Mono';
src: url('../fonts/JetBrainsMono-Italic.woff2') format('woff2');
font-weight: normal;
font-style: italic;
}

@font-face {
font-family: 'JetBrains Mono';
src: url('../fonts/JetBrainsMono-BoldItalic.woff2') format('woff2');
@@ -64,4 +70,4 @@
--pico-font-family: 'Atkinson Hyperlegible', var(--pico-font-family-sans-serif);
--pico-font-family-monospace: 'JetBrains Mono', var(--pico-font-family-monospace);
--pico-font-size: 16px;
}
}
30 changes: 30 additions & 0 deletions resources/js/src/App.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
<script lang="ts">
import type { Component } from 'svelte';
import { router } from './lib/router';
import Header from './entrypoints/Header.svelte';
import Tasks from './entrypoints/Tasks.svelte';
import Login from './entrypoints/Login.svelte';
import Register from './entrypoints/Register.svelte';
let Route: Component | undefined = $state(undefined);
router
.on('/', () => {
Route = Tasks;
})
.on('/login', () => {
Route = Login;
})
.on('/register', () => {
Route = Register;
});
router.listen();
</script>

<Header />

{#if Route}
<Route />
{/if}
8 changes: 8 additions & 0 deletions resources/js/src/app.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import { mount } from 'svelte';
import App from './App.svelte';

const appComponent = document.getElementById('app');

if (appComponent) {
mount(App, { target: appComponent });
}
6 changes: 3 additions & 3 deletions resources/js/src/entrypoints/Footer.svelte
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="footer">
<footer>
<div>
<p><a href="/blog">Blog</a></p>
<p><a href="/privacy">Privacy</a></p>
@@ -12,10 +12,10 @@
Afrek is open-source under the AGPL license.<br />Get the source code
<a href="https://sr.ht/~reykjalin/Afrek">on Sourcehut</a>.
</p>
</div>
</footer>

<style>
div.footer {
footer {
border-block-start: 1px solid var(--pico-color-violet-600);
text-align: center;
padding: 5rem;
13 changes: 7 additions & 6 deletions resources/js/src/entrypoints/Header.svelte
Original file line number Diff line number Diff line change
@@ -14,30 +14,31 @@
}
</script>

<div class="header">
<header>
<nav>
<ul>
<li><h1><a href="/">Afrek</a></h1></li>
</ul>
<ul>
{#await $user then u}
{#if u}
<li><a href="/tasks">Tasks</a></li>
<li><a href="/app/">Tasks</a></li>
<li><a href="/logout" onclick={handleLogout}>Logout</a></li>
<li>{u.email}</li>
{:else}
<li><a href="/login">Login</a></li>
<li><a href="/register">Register</a></li>
<li><a href="/app/login">Login</a></li>
<li><a href="/app/register">Register</a></li>
{/if}
{/await}
</ul>
</nav>
</div>
</header>

<style>
div.header {
header {
padding: 0.5rem 1rem;
border-block-end: 1px solid var(--pico-color-violet-600);
margin-block-end: 2rem;
& h1 {
margin: 0;
4 changes: 3 additions & 1 deletion resources/js/src/entrypoints/Login.svelte
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<script lang="ts">
import { isAxiosError } from 'axios';
import { router } from '../lib/router';
import { getCsrfCookie, login, getUser } from '../lib/api/auth';
import PageTitle from '../lib/components/pagetitle.svelte';
@@ -30,7 +31,8 @@
$effect(() => {
$user.then((u) => {
if (u) {
window.location.href = '/tasks';
// Redirect to task list after succesful login.
router.route('/');
}
});
});
4 changes: 3 additions & 1 deletion resources/js/src/entrypoints/Register.svelte
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
<script lang="ts">
import { router } from '../lib/router';
import { getCsrfCookie, getUser, register } from '../lib/api/auth';
import PageTitle from '../lib/components/pagetitle.svelte';
@@ -34,7 +35,8 @@
$effect(() => {
$user.then((u) => {
if (u) {
window.location.href = '/tasks';
// Redirect to task list after successful login.
router.route('/');
}
});
});
17 changes: 16 additions & 1 deletion resources/js/src/entrypoints/Tasks.svelte
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
<script lang="ts">
import { flip } from 'svelte/animate';
import { fade } from 'svelte/transition';
import { router } from '../lib/router';
import {
getTasks,
getTags,
@@ -25,6 +26,7 @@
let selectedTaskDetails: string = $state('');
let selectedTaskTags: string = $state('');
// Update task list when `selectedTag` changes.
$effect(() => {
getTasks(selectedTag)
.then((t) => ($tasks = t))
@@ -33,12 +35,25 @@
// We get a 401 unauhtorized if we're not logged in, so redirect to
// the login screen if that happens.
if (e.status === 401) {
window.location.href = '/login';
router.route('/login');
}
}
});
});
// Redirect to login page when the user isn't logged in, or after they log out.
$effect(() => {
$user
.then((u) => {
if (!u) {
router.route('/login');
}
})
.catch((_) => {
router.route('/login');
});
});
let fetchTasks = async () => {
if (await $user) {
$tasks = await getTasks();
10 changes: 0 additions & 10 deletions resources/js/src/entrypoints/login.ts

This file was deleted.

12 changes: 0 additions & 12 deletions resources/js/src/entrypoints/register.ts

This file was deleted.

12 changes: 0 additions & 12 deletions resources/js/src/entrypoints/tasks.ts

This file was deleted.

3 changes: 3 additions & 0 deletions resources/js/src/lib/router.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import navaid from 'navaid';

export let router = navaid('/app');
4 changes: 4 additions & 0 deletions resources/views/app.blade.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
<x-app-layout>
<div id="app">
</div>
</x-app-layout>
7 changes: 1 addition & 6 deletions resources/views/components/app-layout.blade.php
Original file line number Diff line number Diff line change
@@ -10,15 +10,10 @@
'resources/css/pico.violet.min.css',
'resources/css/pico.colors.min.css',
'resources/css/style.css',
'resources/js/src/entrypoints/header.ts',
'resources/js/src/entrypoints/login.ts',
'resources/js/src/entrypoints/register.ts',
'resources/js/src/entrypoints/tasks.ts',
'resources/js/src/app.ts',
])
</head>
<body>
<header id="header"></header>

{{ $slot }}
</body>
</html>
7 changes: 2 additions & 5 deletions resources/views/components/layout.blade.php
Original file line number Diff line number Diff line change
@@ -12,16 +12,13 @@
'resources/css/style.css',
'resources/js/src/entrypoints/header.ts',
'resources/js/src/entrypoints/footer.ts',
'resources/js/src/entrypoints/login.ts',
'resources/js/src/entrypoints/register.ts',
'resources/js/src/entrypoints/tasks.ts',
])
</head>
<body>
<header id="header"></header>
<div id="header"></div>

{{ $slot }}

<footer id="footer"></footer>
<div id="footer"></div>
</body>
</html>
23 changes: 13 additions & 10 deletions routes/web.php
Original file line number Diff line number Diff line change
@@ -8,16 +8,19 @@
return view("home");
});

Route::get("/tasks", function () {
return view("tasks");
});

Route::get("/login", function () {
return view("login");
});

Route::get("/register", function () {
return view("register");
// SPA app routes.
Route::prefix('app')->group(function () {
Route::get("/", function () {
return view("app");
});

Route::get('/login', function () {
return view("app");
});

Route::get('/register', function () {
return view("app");
});
});

Route::get('/privacy', function () {
6 changes: 2 additions & 4 deletions vite.config.js
Original file line number Diff line number Diff line change
@@ -9,11 +9,9 @@ export default defineConfig({
'resources/css/style.css',
'resources/css/pico.colors.min.css',
'resources/css/pico.violet.min.css',
'resources/js/src/entrypoints/footer.ts',
'resources/js/src/entrypoints/header.ts',
'resources/js/src/entrypoints/register.ts',
'resources/js/src/entrypoints/login.ts',
'resources/js/src/entrypoints/tasks.ts',
'resources/js/src/entrypoints/footer.ts',
'resources/js/src/app.ts',
],
refresh: true,
}),

0 comments on commit 1eea09a

Please sign in to comment.