Fix the god damn cyrillic rendering

This commit is contained in:
2024-10-30 19:51:15 +01:00
parent b8aba2deb2
commit 6f753dfd9b
4 changed files with 44 additions and 40 deletions

View File

@@ -11,7 +11,7 @@ const { title } = Astro.props;
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<meta name="description" content="Astro description" /> <meta name="description" content="Astro description" />
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />

View File

@@ -1,6 +1,6 @@
--- ---
import Layout from '../layouts/Layout.astro'; import Layout from "../layouts/Layout.astro";
import Card from '../components/Card.astro'; import Card from "../components/Card.astro";
--- ---
<Layout title="Welcome to Astro."> <Layout title="Welcome to Astro.">
@@ -63,10 +63,8 @@ import Card from '../components/Card.astro';
</main> </main>
<div class="min-h-screen bg-gray-100 flex items-center justify-center"> <div class="min-h-screen bg-gray-100 flex items-center justify-center">
<h1 class="text-4xl font-bold text-blue-600 hover:text-blue-800"> <h1 class="text-4xl font-bold text-blue-600 hover:text-blue-800">Hello Tailwind + Astro!</h1>
Hello Tailwind + Astro! </div>
</h1>
</div>
</Layout> </Layout>
<style> <style>

View File

@@ -1,4 +1,5 @@
--- ---
import Layout from '../layouts/Layout.astro';
import type { APIResponse, Player } from "../types"; import type { APIResponse, Player } from "../types";
const res = await fetch("http://localhost:3000/player"); const res = await fetch("http://localhost:3000/player");
@@ -6,34 +7,36 @@ const data: APIResponse<Player[]> = await res.json();
console.log(data); console.log(data);
--- ---
<div class="overflow-x-auto p-5"> <Layout title="Players">
{ <div class="overflow-x-auto p-5">
data.success && ( {
<table class="min-w-full bg-white border border-gray-300"> data.success && (
<thead> <table class="min-w-full bg-white border border-gray-300">
<tr class="bg-gray-100"> <thead>
<th class="p-4 border border-gray-300 text-left">Name</th> <tr class="bg-gray-100">
<th class="p-4 border border-gray-300 text-left">Guild</th> <th class="p-4 border border-gray-300 text-left">Name</th>
<th class="p-4 border border-gray-300 text-left">#Notes</th> <th class="p-4 border border-gray-300 text-left">Guild</th>
<th class="p-4 border border-gray-300 text-left">#Associations</th> <th class="p-4 border border-gray-300 text-left">#Notes</th>
</tr> <th class="p-4 border border-gray-300 text-left">#Associations</th>
</thead>
<tbody>
{data.data.map((player) => (
<tr key={player.name} class="hover:bg-gray-50">
<td class="p-4 border border-gray-300">
<a href={`/player/${player.name}`} class="text-blue-600 hover:underline">
{player.name}
</a>
</td>
<td class="p-4 border border-gray-300">{player.guild.name}</td>
<td class="p-4 border border-gray-300">{player.notes}</td>
<td class="p-4 border border-gray-300">{player.associations}</td>
</tr> </tr>
))} </thead>
</tbody> <tbody>
</table> {data.data.map((player) => (
) <tr key={player.name} class="hover:bg-gray-50">
} <td class="p-4 border border-gray-300">
{!data.success && <div>{data.message}</div>} <a href={`/player/${player.name}`} class="text-blue-600 hover:underline">
</div> {player.name}
</a>
</td>
<td class="p-4 border border-gray-300">{player.guild.name}</td>
<td class="p-4 border border-gray-300">{player.notes}</td>
<td class="p-4 border border-gray-300">{player.associations}</td>
</tr>
))}
</tbody>
</table>
)
}
{!data.success && <div>{data.message}</div>}
</div>
</Layout>

View File

@@ -1,7 +1,10 @@
--- ---
const { name } = Astro.params; const { name } = Astro.params;
import Layout from '../../layouts/Layout.astro';
--- ---
<div> <Layout title={name || "Player"}>
<h1>Hello {name}!</h1> <div>
</div> <h1>Hello {name}!</h1>
</div>
</Layout>