blboun3/personal-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Activity

Middleware & transitions

Browse Source
This commit is contained in:
Cyril Šebek 2024-07-09 10:46:16 +02:00
parent d9e7b62e14
commit 238c62923f
Signed by: blboun3
SSH Key Fingerprint: SHA256:n9dMtOPzgsD+CCerUJslEnU2dzVanbaIv0XDQVRVjeg
7 changed files with 32 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
astro.config.mjs
View File

@ -46,7 +46,7 @@ export default defineConfig({
], ],
defaultLocale: "en", defaultLocale: "en",
routing: { routing: {
redirectToDefaultLocale: true, redirectToDefaultLocale: false,
prefixDefaultLocale: true prefixDefaultLocale: true
}, },
fallback: { fallback: {

2
src/components/Showcase.astro
View File

@ -5,7 +5,7 @@ export const prerender = true;
--- ---
<SinglePage> <SinglePage>
<div class="flex flex-col h-screen"> <div class="flex flex-col h-dvh">
<ShowcaseTabs currentLocale={Astro.currentLocale} client:load /> <ShowcaseTabs currentLocale={Astro.currentLocale} client:load />
</div> </div>
</SinglePage> </SinglePage>

7
src/layouts/MainLayout.astro
View File

@ -4,13 +4,12 @@ import { ViewTransitions } from 'astro:transitions';
import Navbar from "../components/Navbar.astro"; import Navbar from "../components/Navbar.astro";
import "../style/index.css"; import "../style/index.css";
import { useTranslations } from '../i18n/utils'; import { useTranslations } from '../i18n/utils';
//import "../style/globals.css";
const t = useTranslations(lang) const t = useTranslations(lang)
--- ---
<!doctype html> <!doctype html>
<html lang={lang} data-theme={themeOverride ? themeOverride : "theme_auto"} class="overflow-hidden"> <html lang={lang} data-theme={themeOverride ? themeOverride : "theme_auto"} class="overflow-hidden" transition:animate="none">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@ -26,8 +25,8 @@ const t = useTranslations(lang)
<script transition:persist is:raw is:inline> <script transition:persist is:raw is:inline>
document.addEventListener('astro:after-swap', () => {document.documentElement.setAttribute("data-theme", localStorage.getItem("data-theme") || document.documentElement.getAttribute("data-theme"));}); document.addEventListener('astro:after-swap', () => {document.documentElement.setAttribute("data-theme", localStorage.getItem("data-theme") || document.documentElement.getAttribute("data-theme"));});
</script> </script>
<Navbar /> <Navbar transition:animate="initial" transition:persist="navbar"/>
<div class="bg-bkg h-dvh overflow-y-scroll snap-mandatory snap-y scroll-smooth " transition:animate="fade" style="scrollbar-width: thin;"> <div class="bg-bkg h-dvh overflow-y-scroll snap-mandatory snap-y scroll-smooth overflow-x-clip" transition:animate="fade" style="scrollbar-width: thin;">
<slot /> <slot />
</div> </div>
</body> </body>

2
src/layouts/SinglePage.astro
View File

@ -1,4 +1,4 @@
<div class="snap-start h-screen overflow-clip pt-14"> <div class="snap-start h-dvh overflow-clip pt-14">
<div class="bg-bkg h-full w-full sm:grid sm:grid-cols-6 lg:grid-cols-12"> <div class="bg-bkg h-full w-full sm:grid sm:grid-cols-6 lg:grid-cols-12">
<div <div
class="sm:col-start-2 sm:col-end-6 lg:col-start-3 lg:col-end-11 xl:col-start-3 xl:col-end-11 3xl:col-start-4 3xl:col-end-10 h-full p-2 sm:p-6" class="sm:col-start-2 sm:col-end-6 lg:col-start-3 lg:col-end-11 xl:col-start-3 xl:col-end-11 3xl:col-start-4 3xl:col-end-10 h-full p-2 sm:p-6"

2
src/layouts/SinglePageBlogMode.astro
View File

@ -1,4 +1,4 @@
<div class="h-screen pt-14"> <div class="h-dvh pt-14">
<div class="bg-bkg h-full w-full sm:grid sm:grid-cols-6 lg:grid-cols-12"> <div class="bg-bkg h-full w-full sm:grid sm:grid-cols-6 lg:grid-cols-12">
<div <div
class="sm:col-start-2 sm:col-end-6 lg:col-start-3 lg:col-end-11 xl:col-start-3 xl:col-end-11 3xl:col-start-4 3xl:col-end-10 h-full p-2 sm:p-6" class="sm:col-start-2 sm:col-end-6 lg:col-start-3 lg:col-end-11 xl:col-start-3 xl:col-end-11 3xl:col-start-4 3xl:col-end-10 h-full p-2 sm:p-6"

2
src/pages/[lang]/blog/[...slug].astro
View File

@ -43,7 +43,7 @@ const { Content } = await page.render();
{ // @ts-ignore } { // @ts-ignore }
<Separator className="my-4"/> <Separator className="my-4"/>
</div> </div>
<div class="text-left"> <div class="text-left p-3">
<Content /> <Content />
</div> </div>
</article> </article>

50
src/pages/index.astro
View File

@ -1,36 +1,32 @@
--- ---
export const prerender = true; export const prerender = true
import type { GetStaticPaths } from "astro";
import MainLayout from "../layouts/MainLayout.astro"; import MainLayout from "../layouts/MainLayout.astro";
import Hero from "../components/Hero.astro";
import About from "../components/About.astro";
import Showcase from "../components/Showcase.astro";
import FloatingLinks from "../components/FloatingLinks.astro";
export const getStaticPaths = (() => { //@ts-ignore
return [ import { getLangFromUrl, useTranslations } from "../i18n/utils";
{params: {lang: "en"}},
{params: {lang: "cs"}},
{params: {lang: "de"}},
{params: {lang: "fr"}}
];
}) satisfies GetStaticPaths;
const { lang } = Astro.params const t = useTranslations(getLangFromUrl(Astro.url));
// Don't remove export async function getStaticPaths() {
if (Astro.preferredLocale) { return ["en", "fr", "cs", "de"].map((lang) => {
return Astro.redirect(`/${Astro.preferredLocale}/`); return { params: { lang } };
});
} }
--- ---
<MainLayout title={t("title")} description={t("description")} lang={Astro.currentLocale} themeOverride="theme_auto">
<MainLayout title="sitetitle" description="sitedescription" lang={lang}> <head>
<h1>Welcome</h1> <meta http-equiv="refresh" content="0; url=https://cyrilsebek.cz/en">
<p> <script type="text/javascript">
You shouldn't be here. please continue to one of the following: window.location.href = "https://cyrilsebek.cz/en"
</p> </script>
<ul> </head>
<li><a href="/en">English Version / English</a></li> <FloatingLinks />
<li><a href="/cs">Czech Version / Česky</a></li> <Hero />
<li><a href="/de">German Version [WIP] / Deutsch [laufende Arbeiten]</a></li> <About />
<li><a href="/fr">French Version [WIP] / Français [travail en cours]</a></li> <Showcase />
</ul>
</MainLayout> </MainLayout>