## Layout.astro
```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;
---
{title} | {site.title}
```
## 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
```bash
# 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)
```bash
# 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
```
```bash
# 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
```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;
}
```