From a1b94ae545f54978da8b585f0b6416afd2f93705 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cyril=20=C5=A0ebek?= Date: Fri, 21 Jun 2024 09:20:24 +0200 Subject: [PATCH] Bugfixes - Updated REAMDE.md to reflect current file & folder structure - Fixed Navbar not working - Added middleware exceptions for api and public/ (to not auto link to i18n version) - Fixed blog [slug] and [tag] pages not rendering properly (prerender = true) --- README.md | 70 +++++++++++++++------ src/components/Navbar.astro | 4 +- src/content/blog/blog-post-2/en.md | 84 ++++++++++++++++++++++---- src/middleware.js | 12 +++- src/pages/[lang]/blog/[...slug].astro | 2 + src/pages/[lang]/blog/tags/[tag].astro | 2 + 6 files changed, 139 insertions(+), 35 deletions(-) diff --git a/README.md b/README.md index bbe5269..7f677fb 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@ -# Personal themeable i18n compatible website in astro +# My personal website + +Welcome to my personal [website](https://cyrilsebek.cz) -Code for my personal website written in astro with react.js elements. -i18n compatible (even blog), easily CSS stylable (one .css file for everything) ## 🚀 Project Structure @@ -10,32 +10,68 @@ The file & folder structure is as follows: ```text / ├── public/ -│ └── favicon.svg +│ ├── favicon.svg +│ └── music/ +│ ├── first/ +│ │ ├── my.flac +│ │ ├── my.mp3 +│ │ └── my.pdf +│ ├── second/ +│ └── .../ ├── src/ │ ├── components/ -│ │ └── Card.astro +│ ├── content/ +│ │ ├── blog/ +│ │ │ ├── blog-post-1/ +│ │ │ │ ├── cs.md +│ │ │ │ ├── de.md +│ │ │ │ ├── en.md +│ │ │ │ └── fr.md +│ │ │ ├── blog-post-2/ +│ │ │ └── .../ +│ │ ├── music/ +│ │ │ ├── first.md +│ │ │ ├── second.md +│ │ │ └── ... +│ │ └── config.js +│ ├── i18n/ +│ │ ├── cs.js +│ │ ├── de.js +│ │ ├── en.js +│ │ ├── fr.js +│ │ ├── dictionary.js +│ │ └── utils.ts +│ ├── icons/ │ ├── layouts/ -│ │ └── Layout.astro -│ └── pages/ -│ └── index.astro +│ ├── lib/ +│ │ ├── icons.js +│ │ └── utils.js +│ ├── pages/ +│ ├── style/ +│ │ └── index.css +│ ├── env.d.ts +│ └── middleware.js └── package.json ``` -Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name. +Astro looks for `.astro` or `.md` files in the `src/pages/` directory. **Each page is exposed as a route based on its file name.** There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components. Any static assets, like images, can be placed in the `public/` directory. +Content is placed in the `src/content/` directory into the appropriate subfolder. + ## 🧞 Commands All commands are run from the root of the project, from a terminal: -| Command | Action | -| :------------------------ | :----------------------------------------------- | -| `npm install` | Installs dependencies | -| `npm run dev` | Starts local dev server at `localhost:4321` | -| `npm run build` | Build your production site to `./dist/` | -| `npm run preview` | Preview your build locally, before deploying | -| `npm run astro ...` | Run CLI commands like `astro add`, `astro check` | -| `npm run astro -- --help` | Get help using the Astro CLI | \ No newline at end of file +| Command | Action | +| :----------------------------- | :----------------------------------------------- | +| `npm install` | Installs dependencies | +| `npm run dev` | Starts local dev server at `localhost:4321` | +| `npm run build` | Build your production site to `./dist/` | +| `npm run preview` | Preview your build locally, before deploying | +| `npm run astro ...` | Run CLI commands like `astro add`, `astro check` | +| `npm run astro -- --help` | Get help using the Astro CLI | +| `node ./dist/server/entry.mjs` | Runs app after building | diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro index 12d319f..68b6b57 100644 --- a/src/components/Navbar.astro +++ b/src/components/Navbar.astro @@ -1,5 +1,4 @@ --- -import { getRelativeLocaleUrl } from "astro:i18n"; import { ThemeSelector } from "./ThemeSelector" import NavbarSkeleton from "./NavbarSkeleton.astro"; import { LangSwitcher } from "./LangSwitcher"; @@ -7,8 +6,7 @@ import { NavButton } from "./NavButton"; function selected(path) { var currentURL = Astro.url.pathname - .replace(Astro.currentLocale + "/", "") - .slice(0, -1) || "/"; + .replace(Astro.currentLocale + "/", "") || "/" if( path == "/blog" && currentURL.startsWith("/blog") ){ return (true); } diff --git a/src/content/blog/blog-post-2/en.md b/src/content/blog/blog-post-2/en.md index 21baf94..24554cc 100644 --- a/src/content/blog/blog-post-2/en.md +++ b/src/content/blog/blog-post-2/en.md @@ -9,20 +9,80 @@ image: language: "en" tags: ["test"] --- -## Story about Old days -In the olden days, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae ultricies leo integer malesuada nunc vel risus commodo viverra. Adipiscing enim eu turpis egestas pretium. Euismod elementum nisi quis eleifend quam adipiscing. In hac habitasse platea dictumst vestibulum. Sagittis purus sit amet volutpat. Netus et malesuada fames ac turpis egestas. Eget magna fermentum iaculis eu non diam phasellus vestibulum lorem. Varius sit amet mattis vulputate enim. Habitasse platea dictumst quisque sagittis. Integer quis auctor elit sed vulputate mi. Dictumst quisque sagittis purus sit amet. +# My personal website -## Conclusion -Morbi tristique senectus et netus. Id semper risus in hendrerit gravida rutrum quisque non tellus. Habitasse platea dictumst quisque sagittis purus sit amet. Tellus molestie nunc non blandit massa. Cursus vitae congue mauris rhoncus. Accumsan tortor posuere ac ut. Fringilla urna porttitor rhoncus dolor. Elit ullamcorper dignissim cras tincidunt lobortis. In cursus turpis massa tincidunt dui ut ornare lectus. Integer feugiat scelerisque varius morbi enim nunc. Bibendum neque egestas congue quisque egestas diam. Cras ornare arcu dui vivamus arcu felis bibendum. Dignissim suspendisse in est ante in nibh mauris. Sed tempus urna et pharetra pharetra massa massa ultricies mi. +Welcome to my personal [website](https://cyrilsebek.cz) -## Story about Old days -In the olden days, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae ultricies leo integer malesuada nunc vel risus commodo viverra. Adipiscing enim eu turpis egestas pretium. Euismod elementum nisi quis eleifend quam adipiscing. In hac habitasse platea dictumst vestibulum. Sagittis purus sit amet volutpat. Netus et malesuada fames ac turpis egestas. Eget magna fermentum iaculis eu non diam phasellus vestibulum lorem. Varius sit amet mattis vulputate enim. Habitasse platea dictumst quisque sagittis. Integer quis auctor elit sed vulputate mi. Dictumst quisque sagittis purus sit amet. -## Conclusion -Morbi tristique senectus et netus. Id semper risus in hendrerit gravida rutrum quisque non tellus. Habitasse platea dictumst quisque sagittis purus sit amet. Tellus molestie nunc non blandit massa. Cursus vitae congue mauris rhoncus. Accumsan tortor posuere ac ut. Fringilla urna porttitor rhoncus dolor. Elit ullamcorper dignissim cras tincidunt lobortis. In cursus turpis massa tincidunt dui ut ornare lectus. Integer feugiat scelerisque varius morbi enim nunc. Bibendum neque egestas congue quisque egestas diam. Cras ornare arcu dui vivamus arcu felis bibendum. Dignissim suspendisse in est ante in nibh mauris. Sed tempus urna et pharetra pharetra massa massa ultricies mi. +## 🚀 Project Structure -## Story about Old days -In the olden days, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae ultricies leo integer malesuada nunc vel risus commodo viverra. Adipiscing enim eu turpis egestas pretium. Euismod elementum nisi quis eleifend quam adipiscing. In hac habitasse platea dictumst vestibulum. Sagittis purus sit amet volutpat. Netus et malesuada fames ac turpis egestas. Eget magna fermentum iaculis eu non diam phasellus vestibulum lorem. Varius sit amet mattis vulputate enim. Habitasse platea dictumst quisque sagittis. Integer quis auctor elit sed vulputate mi. Dictumst quisque sagittis purus sit amet. +The file & folder structure is as follows: -## Conclusion -Morbi tristique senectus et netus. Id semper risus in hendrerit gravida rutrum quisque non tellus. Habitasse platea dictumst quisque sagittis purus sit amet. Tellus molestie nunc non blandit massa. Cursus vitae congue mauris rhoncus. Accumsan tortor posuere ac ut. Fringilla urna porttitor rhoncus dolor. Elit ullamcorper dignissim cras tincidunt lobortis. In cursus turpis massa tincidunt dui ut ornare lectus. Integer feugiat scelerisque varius morbi enim nunc. Bibendum neque egestas congue quisque egestas diam. Cras ornare arcu dui vivamus arcu felis bibendum. Dignissim suspendisse in est ante in nibh mauris. Sed tempus urna et pharetra pharetra massa massa ultricies mi. \ No newline at end of file +```text +/ +├── public/ +│ ├── favicon.svg +│ └── music/ +│ ├── first/ +│ │ ├── my.flac +│ │ ├── my.mp3 +│ │ └── my.pdf +│ ├── second/ +│ └── .../ +├── src/ +│ ├── components/ +│ ├── content/ +│ │ ├── blog/ +│ │ │ ├── blog-post-1/ +│ │ │ │ ├── cs.md +│ │ │ │ ├── de.md +│ │ │ │ ├── en.md +│ │ │ │ └── fr.md +│ │ │ ├── blog-post-2/ +│ │ │ └── .../ +│ │ ├── music/ +│ │ │ ├── first.md +│ │ │ ├── second.md +│ │ │ └── ... +│ │ └── config.js +│ ├── i18n/ +│ │ ├── cs.js +│ │ ├── de.js +│ │ ├── en.js +│ │ ├── fr.js +│ │ ├── dictionary.js +│ │ └── utils.ts +│ ├── icons/ +│ ├── layouts/ +│ ├── lib/ +│ │ ├── icons.js +│ │ └── utils.js +│ ├── pages/ +│ ├── style/ +│ │ └── index.css +│ ├── env.d.ts +│ └── middleware.js +└── package.json +``` + +Astro looks for `.astro` or `.md` files in the `src/pages/` directory. **Each page is exposed as a route based on its file name.** + +There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components. + +Any static assets, like images, can be placed in the `public/` directory. + +Content is placed in the `src/content/` directory into the appropriate subfolder. + +## 🧞 Commands + +All commands are run from the root of the project, from a terminal: + +| Command | Action | +| :----------------------------- | :----------------------------------------------- | +| `npm install` | Installs dependencies | +| `npm run dev` | Starts local dev server at `localhost:4321` | +| `npm run build` | Build your production site to `./dist/` | +| `npm run preview` | Preview your build locally, before deploying | +| `npm run astro ...` | Run CLI commands like `astro add`, `astro check` | +| `npm run astro -- --help` | Get help using the Astro CLI | +| `node ./dist/server/entry.mjs` | Runs app after building | diff --git a/src/middleware.js b/src/middleware.js index 089cd4a..9ca1352 100644 --- a/src/middleware.js +++ b/src/middleware.js @@ -6,11 +6,17 @@ const langs = ["en", "de", "cs", "fr"] export const userMiddleware = defineMiddleware(async (ctx, next) => { // this response might come from Astro's i18n middleware, and it might return a 404 const response = await next(); - // the /about page is an exception and we want to render it - if (ctx.url.pathname == "/") { - return Response.redirect(`${ctx.url.protocol}${ctx.url.host}/en/`); + + const exceptions = ["/api", "/public"] + + // If path is in exceptions (i.e. api or public) return default middleware to handle it + if (exceptions.includes(ctx.url.pathname) ) { + return response + + // If no lang is set => set to english (some pages are language-les exceptions) } else if ( !langs.some(item => ctx.url.href.includes(item)) ) { return Response.redirect(`${ctx.url.protocol}${ctx.url.host}/en${ctx.url.pathname}`); + } else { return response; } diff --git a/src/pages/[lang]/blog/[...slug].astro b/src/pages/[lang]/blog/[...slug].astro index c409b55..bebd102 100644 --- a/src/pages/[lang]/blog/[...slug].astro +++ b/src/pages/[lang]/blog/[...slug].astro @@ -1,6 +1,7 @@ --- export const prerender = true +import { Separator } from "../../../components/ui/separator"; import { getBlogPosts } from "../../../content/config"; import BlogPost from "../../../layouts/BlogPost.astro"; @@ -39,6 +40,7 @@ const { Content } = await page.render(); #{tag} )} + diff --git a/src/pages/[lang]/blog/tags/[tag].astro b/src/pages/[lang]/blog/tags/[tag].astro index d5e2104..9d7dbfb 100644 --- a/src/pages/[lang]/blog/tags/[tag].astro +++ b/src/pages/[lang]/blog/tags/[tag].astro @@ -1,4 +1,6 @@ --- +export const prerender = true + import MainLayout from "../../../../layouts/MainLayout.astro"; import SinglePageBlogMode from "../../../../layouts/SinglePageBlogMode.astro"; import { LANGUAGES, getLangFromUrl, useTranslations } from "../../../../i18n/utils";