Link bar on left side of main page

(Sucks on phones, but otherwise okay)
Bug fixes

src/components/ContactButton.jsx

@@ -0,0 +1,13 @@
+"use client"
+
+import * as React from "react"
+
+import { Button } from "./ui/button"
+import { cn } from '../lib/utils'
+import { icons } from "../lib/icons"
+
+export function ContactButton({variant, link}) {
+    return (
+        <a href={link} target="_blank"><Button id={`${variant}Btn`} variant="outline" size="icon" className={cn("bg-inherit border-none text-content hover:text-bkg p-1 justify-center")}  dangerouslySetInnerHTML={{ __html: icons[variant] }} /></a>
+    )
+}

src/components/Hero.astro

@@ -2,11 +2,19 @@
 import SinglePage from "../layouts/SinglePage.astro";
 import { getLangFromUrl, useTranslations } from "../i18n/utils";
 import { ContactForm } from "./ContactForm";
+import { ContactButton } from "./ContactButton";
 
 const t = useTranslations(getLangFromUrl(Astro.url))
 ---
 
 <SinglePage>
+    <!-- Contacts list -->
+    <div class="fixed left-0 top-[40%] flex flex-col text-lg text-content">
+        <ContactButton variant={"matrix"} link="https://matrix.to/#/@cyril:cyrilsebek.cz" />
+        <ContactButton variant={"telegram"} link="https://t.me/blboun3" />
+        <ContactButton variant={"github"} link="https://github.com/Blboun3" />
+        <ContactButton variant={"git"} link="https://git.cyrilsebek.cz/blboun3" />
+    </div>
     <!-- Hero Image -->
     <div class="w-full flex justify-center mt-20 ">
         <img src={t("hero").image} alt="" class="rounded-full w-[200px] h-[200px]" />

src/i18n/en.js

@@ -105,7 +105,7 @@ export const en = {
   Blog page
   */
   blog: {
-    title: "Blog",
+    title: "Blog @ Cyril Šebek",
     description: "My personal blog, documenting some of my crazy ideas",
   },
 
@@ -113,6 +113,7 @@ export const en = {
   Page with musical compositions
   */
   music: {
+    pageTitle: "Music @ Cyril Šebek",
     title: "My compositions",
     description: "This is page is listing all my published musical compositions.",
     downloadPDF: "Download PDF",

src/icons/blog.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-6 h-6">
-    <path stroke-linecap="round" stroke-linejoin="round" d="M12 7.5h1.5m-1.5 3h1.5m-7.5 3h7.5m-7.5 3h7.5m3-9h3.375c.621 0 1.125.504 1.125 1.125V18a2.25 2.25 0 0 1-2.25 2.25M16.5 7.5V18a2.25 2.25 0 0 0 2.25 2.25M16.5 7.5V4.875c0-.621-.504-1.125-1.125-1.125H4.125C3.504 3.75 3 4.254 3 4.875V18a2.25 2.25 0 0 0 2.25 2.25h13.5M6 7.5h3v3H6v-3Z" />
-  </svg>
-  

src/icons/dark_mode.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-6 h-6">
-    <path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z" />
-  </svg>
-  

src/icons/favicon.svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 128 128">
-    <path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
-</svg>

src/icons/home.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-6 h-6">
-    <path stroke-linecap="round" stroke-linejoin="round" d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
-  </svg>
-  

src/icons/lang.svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-6 h-6">
-  <path stroke-linecap="round" stroke-linejoin="round" d="m10.5 21 5.25-11.25L21 21m-9-3h7.5M3 5.621a48.474 48.474 0 0 1 6-.371m0 0c1.12 0 2.233.038 3.334.114M9 5.25V3m3.334 2.364C11.176 10.658 7.69 15.08 3 17.502m9.334-12.138c.896.061 1.785.147 2.666.257m-4.589 8.495a18.023 18.023 0 0 1-3.827-5.802" />
-</svg>

src/icons/light_mode.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-6 h-6">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z" />
-</svg>
-      

src/layouts/BlogPost.astro

@@ -9,7 +9,7 @@ const { title, description, language } = Astro.props;
 ---
 
 <MainLayout
-  title={title}
+  title=`${title} @ Cyril Šebek`
   description={description}
   lang={language}
 >

src/lib/icons.js

@@ -46,4 +46,9 @@ const music = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill=
   <path fill-rule="evenodd" d="M19.952 1.651a.75.75 0 0 1 .298.599V16.303a3 3 0 0 1-2.176 2.884l-1.32.377a2.553 2.553 0 1 1-1.403-4.909l2.311-.66a1.5 1.5 0 0 0 1.088-1.442V6.994l-9 2.572v9.737a3 3 0 0 1-2.176 2.884l-1.32.377a2.553 2.553 0 1 1-1.402-4.909l2.31-.66a1.5 1.5 0 0 0 1.088-1.442V5.25a.75.75 0 0 1 .544-.721l10.5-3a.75.75 0 0 1 .658.122Z" clip-rule="evenodd" />
 </svg>`;
 
-export const icons = { home: home, blog: blog, theme_dark: theme_dark, theme_light: theme_light, lang: lang, theme_auto: theme_auto, music: music };
+const matrix = `<svg role="img" viewBox="-1 -1 26 26" xmlns="http://www.w3.org/2000/svg"><title>Matrix</title><path fill="currentColor" stroke="currentColor" d="M.632.55v22.9H2.28V24H0V0h2.28v.55zm7.043 7.26v1.157h.033c.309-.443.683-.784 1.117-1.024.433-.245.936-.365 1.5-.365.54 0 1.033.107 1.481.314.448.208.785.582 1.02 1.108.254-.374.6-.706 1.034-.992.434-.287.95-.43 1.546-.43.453 0 .872.056 1.26.167.388.11.716.286.993.53.276.245.489.559.646.951.152.392.23.863.23 1.417v5.728h-2.349V11.52c0-.286-.01-.559-.032-.812a1.755 1.755 0 0 0-.18-.66 1.106 1.106 0 0 0-.438-.448c-.194-.11-.457-.166-.785-.166-.332 0-.6.064-.803.189a1.38 1.38 0 0 0-.48.499 1.946 1.946 0 0 0-.231.696 5.56 5.56 0 0 0-.06.785v4.768h-2.35v-4.8c0-.254-.004-.503-.018-.752a2.074 2.074 0 0 0-.143-.688 1.052 1.052 0 0 0-.415-.503c-.194-.125-.476-.19-.854-.19-.111 0-.259.024-.439.074-.18.051-.36.143-.53.282-.171.138-.319.337-.439.595-.12.259-.18.6-.18 1.02v4.966H5.46V7.81zm15.693 15.64V.55H21.72V0H24v24h-2.28v-.55z"/></svg>`
+const telegram = `<svg role="img" viewBox="-1 -1 26 26" xmlns="http://www.w3.org/2000/svg"><title>Telegram</title><path fill="currentColor" stroke="currentColor" d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z"/></svg>`
+const github = `<svg role="img" viewBox="-1 -1 26 26" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path fill="currentColor" stroke="currentColor" d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>`
+const git = `<svg role="img" viewBox="-1 -1 26 26" xmlns="http://www.w3.org/2000/svg"><title>Git</title><path fill="currentColor" stroke="currentColor" d="M23.546 10.93L13.067.452c-.604-.603-1.582-.603-2.188 0L8.708 2.627l2.76 2.76c.645-.215 1.379-.07 1.889.441.516.515.658 1.258.438 1.9l2.658 2.66c.645-.223 1.387-.078 1.9.435.721.72.721 1.884 0 2.604-.719.719-1.881.719-2.6 0-.539-.541-.674-1.337-.404-1.996L12.86 8.955v6.525c.176.086.342.203.488.348.713.721.713 1.883 0 2.6-.719.721-1.889.721-2.609 0-.719-.719-.719-1.879 0-2.598.182-.18.387-.316.605-.406V8.835c-.217-.091-.424-.222-.6-.401-.545-.545-.676-1.342-.396-2.009L7.636 3.7.45 10.881c-.6.605-.6 1.584 0 2.189l10.48 10.477c.604.604 1.582.604 2.186 0l10.43-10.43c.605-.603.605-1.582 0-2.187"/></svg>`
+
+export const icons = { home: home, blog: blog, theme_dark: theme_dark, theme_light: theme_light, lang: lang, theme_auto: theme_auto, music: music, matrix: matrix, telegram: telegram, github: github, git: git};

src/pages/[lang]/blog/tags/[tag].astro

@@ -35,7 +35,7 @@ const { posts } = Astro.props;
 const filteredPosts = posts.filter((post) => post.data.tags?.includes(tag) && post.data.language == Astro.currentLocale);
 ---
 
-<MainLayout title={tag} description={"desc"} lang={lang}>
+<MainLayout title=`${tag} @ Cyril Šebek` description={"desc"} lang={lang}>
   <SinglePageBlogMode>
     <h1 class="text-2xl text-center font-bold text-content mb-10 mt-5">{t("postsTagged")} "{tag}"</h1>
     <PostsList filteredPosts={filteredPosts} lang={Astro.currentLocale} />

src/pages/[lang]/music/index.astro

@@ -23,8 +23,8 @@ const songs = await getCompositions()
 ---
 
 <MainLayout
-  title={t("title")}
+  title={t("music")["pageTitle"]}
-  description={t("description")}
+  description={t("music")["description"]}
   lang={Astro.currentLocale}
   themeOverride="theme_auto"
 >