4.7 KiB
4.7 KiB
Layout.astro
---
// src/layouts/Layout.astro
import Nav from "../components/Navbar.astro";
import Toast from '../components/Toast.astro';
import site from "../data/site.json";
import "../styles/global.css"; // LOKALNI RESURSI
interface Props {
title?: string;
description?: string;
}
const {
title = site.title,
description = site.description
} = Astro.props;
---
<!doctype html>
<html lang="hr" class="scroll-smooth">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="generator" content={Astro.generator} />
<meta name="description" content={description} />
<title>{title} | {site.title}</title>
<!-- LOKALNI RESURSI -->
<link rel="stylesheet" href="/css/all.min.css" />
</head>
<body class="bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-white antialiased min-h-screen flex flex-col">
<Nav />
<main class="flex-grow w-full max-w-7xl mx-auto pt-24 pb-12 px-4 sm:px-6 lg:px-8">
<slot />
</main>
<footer class="bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 py-6 text-center text-sm text-gray-500">
© {new Date().getFullYear()} {site.title}. Sva prava pridržana.
</footer>
<Toast />
<!-- LOKALNI RESURSI -->
<script is:inline src="/js/flowbite.min.js"></script>
</body>
</html>
<style is:global>
/* Integracija Tailwinda unutar Layouta više ne sadrži @tailwind direktive
jer su one sada pravilno konfigurirane unutar src/styles/global.css rute */
</style>
Staviti u /public resurse koji se ne mijenjaji i koje preglednik mora dohvatiti točno onakve kakve jesu
- flowbite.min.js
- već gotovi kompajlirani CSS
- roboti
- manifesti
- ikone
Korak 1: Dohvati resurse
# 1. Kreiranje strukture mapa unutar public direktorija
mkdir -p public/js public/css
# 2. Preuzimanje Flowbite JS-a u public/js mapu
wget -O public/js/flowbite.min.js https://cdn.jsdelivr.net/npm/flowbite@2.5.2/dist/flowbite.min.js
# 3. Preuzimanje FontAwesome CSS-a u public/css mapu
wget -O public/css/all.min.css https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css
Font Awesome ikone je potrebno staviti u folder webfonts (public/webfonts)
# Kreiranje mape za fontove ikona
mkdir -p public/webfonts
# Preuzimanje ključnih fontova koje FontAwesome koristi za renderiranje ikona
wget -P public/webfonts/ https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/webfonts/fa-solid-900.woff2
wget -P public/webfonts/ https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/webfonts/fa-regular-400.woff2
wget -P public/webfonts/ https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/webfonts/fa-brands-400.woff2
# 1. Kreiranje mape za Inter font unutar javnih resursa
mkdir -p public/webfonts/inter
# 2. Preuzimanje .woff2 datoteka izravno s provjerenog upstream repozitorija
wget -O public/webfonts/inter/inter-400.woff2 https://cdn.jsdelivr.net/fontsource/fonts/inter@5.0.7/latin-400-normal.woff2
wget -O public/webfonts/inter/inter-500.woff2 https://cdn.jsdelivr.net/fontsource/fonts/inter@5.0.7/latin-500-normal.woff2
wget -O public/webfonts/inter/inter-600.woff2 https://cdn.jsdelivr.net/fontsource/fonts/inter@5.0.7/latin-600-normal.woff2
wget -O public/webfonts/inter/inter-700.woff2 https://cdn.jsdelivr.net/fontsource/fonts/inter@5.0.7/latin-700-normal.woff2
wget -O public/webfonts/inter/inter-800.woff2 https://cdn.jsdelivr.net/fontsource/fonts/inter@5.0.7/latin-800-normal.woff2
Korak 2: Poveži resurse u src/styles/global.css
/* src/styles/global.css */
/* --- LOKALNE DEFINICIJE INTER FONTA --- */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/webfonts/inter/inter-400.woff2') format('woff2');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('/webfonts/inter/inter-500.woff2') format('woff2');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('/webfonts/inter/inter-600.woff2') format('woff2');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('/webfonts/inter/inter-700.woff2') format('woff2');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url('/webfonts/inter/inter-800.woff2') format('woff2');
}
/* --- TAILWIND V4 KONFIGURACIJA TEME --- */
@theme {
/* Postavljamo naš lokalni Inter kao primarni sans-serif font aplikacije */
--font-sans: 'Inter', system-ui, -apple-system, sans-serif;
}