160 lines
4.7 KiB
Markdown
160 lines
4.7 KiB
Markdown
## 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;
|
|
---
|
|
|
|
<!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
|
|
|
|
```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;
|
|
}
|
|
``` |