yuzucchii/yuzucchii.xyz
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

little nice update

Browse Source
This commit is contained in:
yuzu 2025-05-06 21:11:52 -05:00
parent 281043f96f
commit fa11ca9575
25 changed files with 4504 additions and 254 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.dockerignore
View File

@ -1,3 +1,2 @@
.zig-cache/
zig-out/

11
.gitignore vendored
View File

@ -4,4 +4,15 @@ data/
*.core
.jetzig
.zig-cache/
# local should be custom
Dockerfile
compose.yml
node_modules/
static/
jetzig_downloads.json
.bundle
bundle.tar.gz
public/styles.css
log/
.env.*
.env

2
Dockerfile
View File

@ -1,6 +1,6 @@
FROM alpine:latest AS build
RUN apk add jq curl tar xz git vim
RUN curl --output /zig.tar.xz "$(curl -s 'https://ziglang.org/download/index.json' | jq -r '.master."aarch64-linux".tarball')"
RUN curl --output /zig.tar.xz "$(curl -s 'https://ziglang.org/download/index.json' | jq -r '.master."86_64-linux".tarball')"
RUN mkdir /zig
WORKDIR /zig

2
build.sh Normal file
View File

@ -0,0 +1,2 @@
npx tailwind --output public/styles.css
zig build -Denvironment=production install

3
build.zig
View File

@ -9,8 +9,7 @@ pub fn build(b: *std.Build) !void {
.name = "yuzucchiidotxyz",
.root_source_file = b.path("src/main.zig"),
.target = target,
.optimize = optimize,
.use_llvm = true // fix for my arm machine
.optimize = optimize
});
const options = b.addOptions();

36
compose.yml
View File

@ -1,16 +1,16 @@
services:
server:
env_file: ".env"
build:
context: .
dockerfile: Dockerfile
ports:
- "8080:8080"
restart: unless-stopped
depends_on:
- postgres
networks:
- postgres-network
# server:
# env_file: ".env"
# build:
# context: .
# dockerfile: Dockerfile
# ports:
# - "8080:8080"
# restart: unless-stopped
# depends_on:
# - postgres
# networks:
# - postgres-network
postgres:
image: postgres:16
@ -19,13 +19,13 @@ services:
POSTGRES_USER: ${JETQUERY_USERNAME}
POSTGRES_PASSWORD: ${JETQUERY_PASSWORD}
ports:
- "5431:5432"
- "5432:5432"
volumes:
- ./data/:/var/lib/postgresql/data/
networks:
- postgres-network
# networks:
# - postgres-network
networks:
postgres-network:
driver: bridge
# networks:
# postgres-network:
# driver: bridge

1
config/database.zig
View File

@ -1,6 +1,7 @@
pub const database = .{
.development = .{
.adapter = .postgresql,
.hostname = "localhost",
},
.testing = .{
.adapter = .postgresql,

2409
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

18
package.json Normal file
View File

@ -0,0 +1,18 @@
{
"name": "yuzucchii.xyz",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@tailwindcss/typography": "^0.5.16",
"tailwindcss": "^3.4.17"
},
"dependencies": {
"@tailwindcss/cli": "^4.1.5"
}
}

1637
public/styles.css
View File

File diff suppressed because it is too large Load Diff

53
src/app/views/blogs.zig
View File

@ -5,6 +5,8 @@ const Zmd = @import("zmd").Zmd;
const tokens = @import("zmd").tokens;
const Node = @import("zmd").Node;
pub const layout = "panel";
/// Default fragments. Pass this to `Zmd.toHtml` or provide your own.
/// Formatters can be functions receiving an allocator, the current node, and the rendered
/// content, or a 2-element tuple containing the open and close for each node.
@ -123,11 +125,35 @@ pub fn get(id: []const u8, request: *jetzig.Request) !jetzig.View {
var root = try request.data(.object);
try root.put("blog", eb);
const cookies = try request.cookies();
const allowed = blk: {
const session = cookies.get("session") orelse break :blk false;
const session_query = jetzig.database.Query(.Session)
.findBy(.{ .session_id = session.value });
_ = request.repo.execute(session_query) catch break :blk false;
break :blk true;
};
try root.put("allowed", allowed);
try request.process();
return request.render(.ok);
}
pub fn new(request: *jetzig.Request) !jetzig.View {
pub fn new(request: *jetzig.Request, data: *jetzig.Data) !jetzig.View {
const cookies = try request.cookies();
const allowed = blk: {
const session = cookies.get("session") orelse break :blk false;
const session_query = jetzig.database.Query(.Session)
.findBy(.{ .session_id = session.value });
_ = request.repo.execute(session_query) catch break :blk false;
break :blk true;
};
const root = try data.object();
try root.put("allowed", allowed);
return request.render(.ok);
}
@ -170,6 +196,31 @@ pub fn post(request: *jetzig.Request) !jetzig.View {
}
pub fn delete(id: []const u8, request: *jetzig.Request) !jetzig.View {
// check "session" cookie for authentication
const cookies = try request.cookies();
const session = cookies.get("session") orelse {
return request.fail(.not_found);
};
// check if session is valid
const query = jetzig.database.Query(.Session)
.findBy(.{ .session_id = session.value });
if (try request.repo.execute(query)) |_| {
const delete_query = jetzig.database.Query(.Blog)
.find(try std.fmt.parseInt(i32, id, 10));
if (try request.repo.execute(delete_query)) |blog_post| {
try request.repo.delete(blog_post);
}
return request.redirect("/blogs", .moved_permanently);
} else {
return request.fail(.not_found);
}
}
test "index" {
var app = try jetzig.testing.app(std.testing.allocator, @import("routes"));

2
src/app/views/blogs/get.zmpl
View File

@ -1,6 +1,6 @@
<div>
<h1>{{.blog.title}}</h1>
<div class="mt-6 prose prose-lg dark:prose-dark">
<div class="prose prose-slate max-w-none mt-6 dark:prose-dark">
{{zmpl.fmt.raw(zmpl.ref("blog.content"))}}
</div>
</div>

77
src/app/views/blogs/index.zmpl
View File

@ -1,31 +1,54 @@
@args allowed: bool
<div>
<div class="max-w-3xl mx-auto mt-10 space-y-6">
@for (.blogs) |blog| {
@if ($.allowed)
<button id="delete-post">
Delete post
</button>
<script>
document.getElementById('delete-post').addEventListener('click', function () {
fetch(`/blogs/${blog.id}`, {
method: 'DELETE',
headers: {
'Content-Type': 'application/json'
},
})
.catch(error => {
console.error('Error during logout:', error);
});
}
</script>
@end
<a href="/blogs/{{blog.id}}">{{blog.title}}</a>
{{zmpl.fmt.datetime(blog.get("created_at"), "%Y-%m-%d %H:%M")}}
<br/>
}
<hr/>
<div class="p-4 border border-gray-200 rounded-xl shadow-sm hover:shadow transition">
<div class="flex justify-between items-center">
<a href="/blogs/{{blog.id}}" class="text-xl font-semibold text-blue-600 hover:underline">
{{blog.title}}
</a>
@if ($.allowed)
<a href="/blogs/new">New Blog</a>
@end
@if ($.allowed)
<button
id="delete-post-{{blog.id}}"
class="text-sm text-red-600 hover:text-red-800"
>
Delete
</button>
@end
</div>
<p class="text-gray-500 text-sm mt-1">
{{zmpl.fmt.datetime(blog.get("created_at"), "%Y-%m-%d %H:%M")}}
</p>
</div>
}
@if ($.allowed)
<div class="pt-4">
<a href="/blogs/new" class="inline-block px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition">
+ New Blog
</a>
</div>
@end
</div>
@if ($.allowed)
<script>
document.addEventListener("DOMContentLoaded", () => {
document.querySelectorAll('[id^="delete-post-"]').forEach(button => {
button.addEventListener("click", () => {
const id = button.id.replace("delete-post-", "");
fetch(`/blogs/${id}`, {
method: 'DELETE',
headers: {
'Content-Type': 'application/json'
},
})
.then(() => window.location.reload())
.catch(err => console.error("Failed to delete post:", err));
});
});
});
</script>
@end

33
src/app/views/blogs/new.zmpl
View File

@ -1,12 +1,25 @@
<div>
<form action="/blogs" method="POST">
{{context.authenticityFormElement()}}
<label>Title</label>
<input name="title" />
<label>Content</label>
<textarea name="content"></textarea>
<label>Preview</label>
<textarea name="preview"></textarea>
<input type="submit" />
<div class="max-w-2xl mx-auto mt-10 p-6 bg-white shadow-md rounded-2xl">
<form action="/blogs" method="POST" class="space-y-6">
{{context.authenticityFormElement()}}
<div>
<label for="title" class="block text-sm font-medium text-gray-700">Title</label>
<input name="title" id="title" class="mt-1 w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 focus:ring-opacity-50" />
</div>
<div>
<label for="content" class="block text-sm font-medium text-gray-700">Content</label>
<textarea name="content" id="content" rows="8" class="mt-1 w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 focus:ring-opacity-50"></textarea>
</div>
<div>
<label for="preview" class="block text-sm font-medium text-gray-700">Preview</label>
<textarea name="preview" id="preview" rows="3" class="mt-1 w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 focus:ring-opacity-50"></textarea>
</div>
<div>
<input type="submit" value="Publish" class="px-4 py-2 bg-blue-600 text-white font-semibold rounded-md shadow hover:bg-blue-700 transition-colors" />
</div>
</form>
</div>

30
src/app/views/layouts/_footer.zmpl Normal file
View File

@ -0,0 +1,30 @@
@zig {
const links = .{
.{ .href = "https://yuzucchii.xyz", .title = "Home" },
.{ .href = "/rss", .title = "RSS" },
.{ .href = "https://codeberg.org/yuzu", .title = "Codeberg" },
.{ .href = "https://bsky.app/", .title = "Bluesky" },
.{ .href = "https://discord.gg/pvraBkepUP", .title = "Discord" },
};
}
<footer class="mt-12 border-t pt-6 text-center text-sm text-gray-600">
<div class="max-w-xl mx-auto px-4">
<div class="bg-yellow-100 text-yellow-800 border border-yellow-200 rounded-md px-4 py-3 mb-6">
<p class="text-sm md:text-base">
This website is not reliant on JavaScript. All scripts are optional and publicly available.
</p>
</div>
<div class="flex justify-center flex-wrap gap-4 mb-4 text-blue-500">
@zig {
inline for (links) |link| {
<a href="{{link.href}}" class="hover:underline">{{link.title}}</a>
}
}
</div>
<p class="text-xs text-gray-500 padding-bottom-5">&copy; 2025 yuzucchii.xyz</p>
</div>
</footer>

34
src/app/views/layouts/panel.zmpl Normal file
View File

@ -0,0 +1,34 @@
@args allowed: bool
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="theme-color" content="#ffffff" />
<link rel="icon" href="/favicon.ico" />
<link rel="stylesheet" href="/styles.css" />
<title>yuzucchii.xyz</title>
</head>
<body>
<main>
<div class="mx-auto max-w-3xl mt-sm">
<br/>
<h1 class="text-3xl font-bold mb-4">Hello, I like doing things.</h1>
<div class="mb-8">
<a href="/blogs" class="text-blue-500 hover:underline">Blog</a>
@if ($.allowed)
<a href="/logout" class="text-blue-500 hover:underline ml-4">Logout</a>
@else
<a href="/login" class="text-blue-500 hover:underline ml-4">Login</a>
@end
<a href="https://git.yuzucchii.xyz" class="text-blue-500 hover:underline ml-4" rel="noopener">Gitea</a>
<a href="/rss" class="text-blue-500 hover:underline ml-4">RSS feed</a>
<a href="https://searx.yuzucchii.xyz" class="text-blue-500 hover:underline ml-4">SearX</a>
<a href="/files" class="text-red-500 hover:underline ml-4">Files</a>
<a href="mailto:me@yuzucchii.xyz" class="text-blue-500 hover:underline ml-4">E-mail</a>
</div>
{{zmpl.content}}
</main>
</body>
@partial layouts/footer
</html>

18
src/app/views/login.zig
View File

@ -2,9 +2,21 @@ const std = @import("std");
const jetzig = @import("jetzig");
const uuid4 = @import("uuid").v4;
pub fn index(request: *jetzig.Request) !jetzig.View {
// check if logged in
pub const layout = "panel";
pub fn index(request: *jetzig.Request, data: *jetzig.Data) !jetzig.View {
const cookies = try request.cookies();
const allowed = blk: {
const session = cookies.get("session") orelse break :blk false;
const session_query = jetzig.database.Query(.Session)
.findBy(.{ .session_id = session.value });
_ = request.repo.execute(session_query) catch break :blk false;
break :blk true;
};
const root = try data.object();
try root.put("allowed", allowed);
if (cookies.get("session")) |session| if (session.value.len != 0)
return request.redirect("/blogs", .moved_permanently);
@ -43,9 +55,11 @@ pub fn post(request: *jetzig.Request) !jetzig.View {
.value = uuid,
.path = "/",
.domain = @import("dev").DOMAIN,
.same_site = .lax,
.http_only = true,
.secure = false,
.max_age = 60 * 60 * 24 * 7, // 1 week
.partitioned = false,
});
// post to Session table

69
src/app/views/login/index.zmpl
View File

@ -1,30 +1,45 @@
<div>
<form id="login-form">
<label>Discrete password</label>
<input name="password" type="password"/>
<button type="submit">Login</button>
</form>
<title>Login panel for admins</title>
<body>
<div class="min-h-screen flex items-center justify-center bg-gray-100">
<form id="login-form" class="bg-white p-8 rounded-2xl shadow-xl w-full max-w-sm space-y-6">
<div>
<label for="password" class="block text-sm font-medium text-gray-700 mb-1">Discrete password</label>
<input
id="password"
name="password"
type="password"
class="w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition"
/>
</div>
<button
type="submit"
class="w-full bg-black text-white font-semibold py-2 rounded-md hover:bg-gray-800 transition-colors"
>
Login
</button>
</form>
</div>
<script>
document.querySelector('#login-form').addEventListener('submit', function(event) {
event.preventDefault();
const password = document.querySelector('input[name="password"]').value;
fetch('/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ password })
})
.then(res => res.json())
.then(res => {
window.location.href = '/blogs';
})
.catch(err => {
console.error('Login error:', err);
});
});
</script>
</div>
<script>
document.querySelector('#login-form').addEventListener('submit', function(event) {
event.preventDefault();
const password = document.querySelector('input[name="password"]').value;
fetch('/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ password })
})
.then(res => res.json())
.then(res => {
window.location.href = '/blogs';
})
.catch(err => {
console.error('Login error:', err);
});
});
</script>
</body>

16
src/app/views/logout.zig
View File

@ -1,7 +1,21 @@
const std = @import("std");
const jetzig = @import("jetzig");
pub fn index(request: *jetzig.Request) !jetzig.View {
pub const layout = "panel";
pub fn index(request: *jetzig.Request, data: *jetzig.Data) !jetzig.View {
const cookies = try request.cookies();
const allowed = blk: {
const session = cookies.get("session") orelse break :blk false;
const session_query = jetzig.database.Query(.Session)
.findBy(.{ .session_id = session.value });
_ = request.repo.execute(session_query) catch break :blk false;
break :blk true;
};
const root = try data.object();
try root.put("allowed", allowed);
return request.render(.ok);
}

61
src/app/views/logout/index.zmpl
View File

@ -1,28 +1,39 @@
<button id="logout-button">Logout</button>
<script>
document.getElementById('logout-button').addEventListener('click', function () {
fetch('/logout', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ action: 'logout' })
})
.then(response => {
if (!response.ok) {
throw new Error(`Logout failed: ${response.status}`);
}
return response.json(); // if you expect JSON back
})
.then(data => {
console.log('Logout successful:', data);
// window.location.href = '/login'; // redirect if needed
})
.catch(error => {
console.error('Error during logout:', error);
});
});
<title>Login panel for admins</title>
<body>
<div>
<button
id="logout-button"
class="px-4 py-2 bg-white border border-gray-300 text-gray-800 rounded-md shadow-sm hover:bg-gray-100 hover:border-gray-400 transition-all"
>
Logout
</button>
</div>
</script>
<script>
document.getElementById('logout-button').addEventListener('click', function () {
fetch('/logout', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ action: 'logout' })
})
.then(response => {
if (!response.ok) {
throw new Error(`Logout failed: ${response.status}`);
}
return response.json(); // if you expect JSON back
})
.then(data => {
console.log('Logout successful:', data);
// window.location.href = '/login'; // redirect if needed
})
.catch(error => {
console.error('Error during logout:', error);
});
});
</script>
</body>

43
src/app/views/root.zig
View File

@ -1,50 +1,17 @@
const std = @import("std");
const jetzig = @import("jetzig");
pub const layout = "panel";
const Article = struct {
title: [255]u8,
blob: [255]u8
};
/// `src/app/views/root.zig` represents the root URL `/`
/// The `index` view function is invoked when when the HTTP verb is `GET`.
/// Other view types are invoked either by passing a resource ID value (e.g. `/1234`) or by using
/// a different HTTP verb:
///
/// GET / => index(request, data)
/// GET /1234 => get(id, request, data)
/// POST / => post(request, data)
/// PUT /1234 => put(id, request, data)
/// PATCH /1234 => patch(id, request, data)
/// DELETE /1234 => delete(id, request, data)
pub fn index(request: *jetzig.Request, data: *jetzig.Data) !jetzig.View {
// The first call to `data.object()` or `data.array()` sets the root response data value.
// JSON requests return a JSON string representation of the root data value.
// Zmpl templates can access all values in the root data value.
var root = try data.object();
// Add a string to the root object.
try root.put("title", data.string("yuzucchii.xyz"));
// Request params have the same type as a `data.object()` so they can be inserted them
// directly into the response data. Fetch `http://localhost:8080/?message=hello` to set the
// param. JSON data is also accepted when the `content-type: application/json` header is
// present.
const params = try request.params();
const cookies = try request.cookies();
var obj = try data.object();
try obj.put("title",data.string("The simplest article ever"));
try obj.put("description",data.string("Hello in this article I being to do things"));
var objj = try data.object();
try objj.put("title",data.string("The most complicated thing ever"));
try objj.put("description",data.string("Dude, that shit is like harder than a rock"));
var array = try root.put("articles", .array);
try array.append(obj);
try array.append(objj);
const query = jetzig.database.Query(.Blog).orderBy(.{.created_at = .desc});
const blogs = try request.repo.all(query);
@ -61,12 +28,6 @@ pub fn index(request: *jetzig.Request, data: *jetzig.Data) !jetzig.View {
try root.put("allowed", allowed);
try root.put("bsky_link", "empty for now");
try root.put("discord_link", "https://discord.gg/pvraBkepUP");
try root.put("codeberg_link", "https://codeberg.org/yuzu");
try root.put("message_param", params.get("message"));
// Set arbitrary response headers as required. `content-type` is automatically assigned for
// HTML, JSON responses.
//

106
src/app/views/root/index.zmpl
View File

@ -1,90 +1,24 @@
@args articles: Zmpl.Array, allowed: bool
@args articles: Zmpl.Array
<section class="max-w-3xl mx-auto px-4 py-8">
<!-- Banner -->
<div class="mb-8">
<img src="/banner.jpg" alt="Banner" class="w-full rounded-xl shadow-md">
</div>
<html>
<head>
<script src="https://unpkg.com/htmx.org@1.9.10"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="/styles.css" />
<title> {{.title}} </title
</head>
<!-- Introduction -->
<p class="text-lg leading-relaxed mb-10 text-gray-700">
I created this website in order to store things I do. Don’t be scared of the simple layout —
this website is featureful and full of things to explore. Please enjoy your visit.
</p>
<body>
<div class="mx-auto max-w-3xl mt-sm">
<br/>
<h1 class="text-3xl font-bold mb-4">Hello, I like doing things.</h1>
<!-- Articles Section -->
<h2 class="text-2xl font-semibold mb-4 border-b pb-2">Latest Articles</h2>
<div class="mb-8">
<a href="/blogs" class="text-blue-500 hover:underline">Blog</a>
@if ($.allowed)
<a href="/logout" class="text-blue-500 hover:underline ml-4">Logout</a>
@else
<a href="/login" class="text-blue-500 hover:underline ml-4">Login</a>
@end
<a href="https://git.yuzucchii.xyz" class="text-blue-500 hover:underline ml-4" rel="noopener">Gitea instance</a>
<a href="https://chat.yuzucchii.xyz" class="text-blue-500 hover:underline ml-4" rel="noopener">IRC</a>
<a href="/rss" class="text-blue-500 hover:underline ml-4">RSS feed</a>
<a href="https://searx.yuzucchii.xyz" class="text-red-500 hover:underline ml-4">SearX</a>
<a href="/files" class="text-red-500 hover:underline ml-4">Files</a>
<a href="mailto:me@yuzucchii.xyz" class="text-blue-500 hover:underline ml-4">E-mail</a>
<button
id="copy-button"
type="button"
onclick="navigator.clipboard.writeText('mc.yuzucchii.xyz'); showCopiedMessage();"
class="js-only text-green-500 hover:underline ml-4 bg-transparent p-0 border-none cursor-pointer"
>
Minecraft server
</button>
<span id="copy-msg" class="js-only hidden text-green-600 ml-2 hidden">Copied!</span>
<script>
const msg = document.getElementById('copy-msg');
msg.classList.remove('js-only');
const button = document.getElementById('copy-button');
button.classList.remove('js-only')
</script>
<noscript>
<p class="text-red-500 ml-4">Minecraft server: mc.yuzucchii.xyz</p>
<hr/>
<p class="text-red-500 ml-4">This site works without JavaScript enabled, enjoy your experience</p>
</noscript>
</div>
<!-- Banner Image -->
<div class="mb-6">
<img src="/banner.jpg" alt="Banner" class="w-full rounded-xl shadow-md">
</div>
<p class="text-lg mb-6">I created this website in order to store things I do, but don't be scared of the simple layout, this website is featureful and full of things to do, please enjoy your visit.</p>
@for (.articles) |article| {
@partial root/article_blob(title: article.title, blob: article.content, id: article.id)
}
</div>
<footer class="mt-12 border-t pt-6 text-center text-sm text-gray-600">
<div class="max-w-xl mx-auto px-4">
<div class="bg-yellow-100 text-yellow-800 border border-yellow-200 rounded-md px-4 py-3 mb-6">
<p class="text-sm md:text-base">
This website is not reliant on JavaScript, and all scripts are optional and publicly available.
</p>
<div class="space-y-6">
@for (.articles) |article| {
<div class="p-4 border rounded-xl bg-white shadow-sm hover:shadow transition">
@partial root/article_blob(title: article.title, blob: article.blob, id: article.id)
</div>
<div class="flex justify-center flex-wrap gap-4 mb-4 text-blue-500">
<a href="{{.bsky_link}}" class="hover:underline" target="_blank" rel="noopener">Bluesky</a>
<a href="{{.discord_link}}" class="hover:underline" target="_blank" rel="noopener">Discord</a>
<a href="{{.codeberg_link}}" class="hover:underline" target="_blank" rel="noopener">Codeberg</a>
<a href="https://yuzucchii.xyz" class="hover:underline" target="_blank" rel="noopener">yuzucchii.xyz</a>
</div>
<p class="text-xs text-gray-500">&copy; 2025 yuzucchii.xyz</p>
</div>
</footer>
</body>
<script>
function showCopiedMessage() {
const msg = document.getElementById('copy-msg');
msg.classList.remove('hidden');
setTimeout(() => msg.classList.add('hidden'), 2000);
}
</script>
</html>
}
</div>
</section>

1
src/main.zig
View File

@ -13,6 +13,7 @@ pub const jetzig_options = struct {
/// `jetzig.middleware` (e.g. `jetzig.middleware.HtmxMiddleware`).
pub const middleware: []const type = &.{
jetzig.middleware.AntiCsrfMiddleware,
//@import("app/middleware/BasicMiddleware.zig"),
//@import("app/middleware/AuthMiddleware.zig"),
};

73
src/tailwind.css Normal file
View File

@ -0,0 +1,73 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
/* Base typography improvements */
@layer base {
body {
@apply bg-white text-gray-800 antialiased leading-relaxed;
}
h1, h2, h3, h4, h5, h6 {
@apply font-semibold text-gray-900;
}
a {
@apply text-blue-600 hover:underline transition;
}
input, textarea, button {
@apply outline-none focus:ring focus:ring-blue-200 focus:ring-opacity-50;
}
textarea {
@apply resize-y;
}
}
/* Reusable components */
@layer components {
.btn {
@apply inline-block px-4 py-2 rounded-md font-medium shadow-sm transition;
}
.btn-primary {
@apply btn bg-blue-600 text-white hover:bg-blue-700;
}
.btn-danger {
@apply btn bg-red-600 text-white hover:bg-red-700;
}
.btn-outline {
@apply btn border border-gray-300 text-gray-800 hover:bg-gray-100;
}
.card {
@apply p-4 border border-gray-200 rounded-xl bg-white shadow-sm hover:shadow transition;
}
.section-title {
@apply text-2xl font-semibold mb-4 border-b pb-2;
}
.form-field {
@apply block w-full rounded-md border border-gray-300 shadow-sm mt-1;
}
.form-label {
@apply block text-sm font-medium text-gray-700 mb-1;
}
}
/* Utility overrides or extras */
@layer utilities {
.text-muted {
@apply text-gray-500;
}
.max-w-read {
@apply max-w-prose mx-auto;
}
}

22
tailwind.config.js Normal file
View File

@ -0,0 +1,22 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/app/views/**/*.{zmpl,html,js}", "./src/main.zig"],
theme: {
extend: {
typography: ({ theme }) => ({
DEFAULT: {
css: {
color: theme('colors.gray.800'),
a: { color: theme('colors.blue.600') },
pre: { backgroundColor: theme('colors.gray.100') },
blockquote: {
borderLeftColor: theme('colors.yellow.400'),
fontStyle: 'italic',
},
}
}
})
}
},
plugins: [require('@tailwindcss/typography')],
}