done language switching

This commit is contained in:
Cyril Šebek 2024-04-07 11:11:04 +02:00
parent 00daf4222a
commit d5026cfc05
Signed by: blboun3
SSH Key Fingerprint: SHA256:n9dMtOPzgsD+CCerUJslEnU2dzVanbaIv0XDQVRVjeg
28 changed files with 1650 additions and 96 deletions

View File

@ -1,33 +1,35 @@
import { defineConfig } from 'astro/config'; import { defineConfig } from 'astro/config';
import tailwind from "@astrojs/tailwind"; import tailwind from "@astrojs/tailwind";
import mdx from '@astrojs/mdx'; import mdx from '@astrojs/mdx';
import sitemap from '@astrojs/sitemap'; import sitemap from '@astrojs/sitemap';
import node from '@astrojs/node';
import react from "@astrojs/react";
// https://astro.build/config // https://astro.build/config
export default defineConfig({ export default defineConfig({
output: "hybrid", output: "hybrid",
adapter: node({
mode: "standalone"
}),
site: 'https://cyrilsebek.cz', site: 'https://cyrilsebek.cz',
integrations: [tailwind(), mdx(), sitemap()], integrations: [tailwind({
applyBaseStyles: false,
}), mdx(), sitemap(), react()],
i18n: { i18n: {
locales: [ locales: [{
{
path: "cs", path: "cs",
codes: ["cs", "sk"], codes: ["cs", "sk"]
}, }, {
{
path: "de", path: "de",
codes: ["de", "gsw"], codes: ["de", "gsw"]
}, }, {
{
path: "en", path: "en",
codes: ["en"] codes: ["en"]
}, }, {
{
path: "fr", path: "fr",
codes: ["fr"] codes: ["fr"]
} }],
],
defaultLocale: "en", defaultLocale: "en",
routing: { routing: {
prefixDefaultLocale: true prefixDefaultLocale: true
@ -35,6 +37,6 @@ export default defineConfig({
fallback: { fallback: {
de: "en", de: "en",
fr: "en" fr: "en"
}, }
} }
}); });

17
components.json Normal file
View File

@ -0,0 +1,17 @@
{
"$schema": "https://ui.shadcn.com/schema.json",
"style": "default",
"rsc": false,
"tsx": false,
"tailwind": {
"config": "tailwind.config.mjs",
"css": "./src/style/globals.css",
"baseColor": "slate",
"cssVariables": true,
"prefix": ""
},
"aliases": {
"components": "@/components",
"utils": "@/lib/utils"
}
}

View File

@ -11,10 +11,24 @@
}, },
"dependencies": { "dependencies": {
"@astrojs/mdx": "^2.2.1", "@astrojs/mdx": "^2.2.1",
"@astrojs/node": "^8.2.5",
"@astrojs/react": "^3.1.1",
"@astrojs/rss": "^4.0.5", "@astrojs/rss": "^4.0.5",
"@astrojs/sitemap": "^3.1.1", "@astrojs/sitemap": "^3.1.1",
"@astrojs/tailwind": "^5.1.0", "@astrojs/tailwind": "^5.1.0",
"@radix-ui/react-dropdown-menu": "^2.0.6",
"@types/react": "^18.2.74",
"@types/react-dom": "^18.2.24",
"astro": "^4.5.6", "astro": "^4.5.6",
"tailwindcss": "^3.4.1" "class-variance-authority": "^0.7.0",
"clsx": "^2.1.0",
"cmdk": "^1.0.0",
"lucide-react": "^0.365.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"tailwind-merge": "^2.2.2",
"tailwindcss": "^3.4.1",
"tailwindcss-animate": "^1.0.7",
"vaul": "^0.9.0"
} }
} }

File diff suppressed because it is too large Load Diff

View File

@ -8,8 +8,15 @@ const { title, description } = dictionary[Astro.currentLocale];
<SinglePage> <SinglePage>
<div class="h-full max-h-dvh max-w-full grid grid-rows-3 gap-4"> <div class="h-full max-h-dvh max-w-full grid grid-rows-3 gap-4">
<AboutModule row="0" image="/temp.jpg"> <AboutModule row="0" image="/temp.jpg">
<h1 class="text-accent">Lorem</h1> <h1 class="text-accent text-center text-lg md:text-xl xl:text-3xl font-bold py-3 lg:py-10">Lorem</h1>
<p class="text-content text-center text-md xl:text-lg xl:px-10">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque consequatur voluptatibus nobis dolores repellendus similique, ut sit odit commodi optio tempore totam, quaerat at distinctio nisi dolore magnam quia perferendis.</p>
</AboutModule>
<AboutModule row="1" image="/temp.jpg" flipped>
<h1 class="text-accent text-center text-lg md:text-xl xl:text-3xl font-bold py-3 lg:py-10">Ipsum</h1>
<p class="text-content text-center text-md xl:text-lg xl:px-10">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque consequatur voluptatibus nobis dolores repellendus similique, ut sit odit commodi optio tempore totam, quaerat at distinctio nisi dolore magnam quia perferendis.</p>
</AboutModule>
<AboutModule row="2" image="/temp.jpg" alt="image">
<h1 class="text-accent text-center text-lg md:text-xl xl:text-3xl font-bold py-3 lg:py-10">Dolor</h1>
<p class="text-content text-center text-md xl:text-lg xl:px-10">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque consequatur voluptatibus nobis dolores repellendus similique, ut sit odit commodi optio tempore totam, quaerat at distinctio nisi dolore magnam quia perferendis.</p>
</AboutModule> </AboutModule>
<AboutModule row="1" image="/temp.jpg" flipped />
<AboutModule row="2" image="/temp.jpg" alt="image"/>
</SinglePage> </SinglePage>

View File

@ -7,15 +7,15 @@ const { row, flipped, image, alt } = Astro.props;
{ {
flipped ? ( flipped ? (
<> <>
<div class="bg-accentRed rounded-lg col-start-0 col-span-2 "> <div class="bg-accentRed/65 rounded-lg col-start-0 col-span-2 hover:bg-accentRed/85 ">
<slot /> <slot />
</div> </div>
<div class={`h-full rounded-lg col-start-3 bg-[url('${image}')] bg-no-repeat bg-cover`} /> <div class="h-full rounded-lg col-start-3 bg-no-repeat bg-cover" style={`background-image: url(${image})`} />
</> </>
) : ( ) : (
<> <>
<div class={`h-full rounded-lg col-start-0 bg-[url('${image}')] bg-no-repeat bg-cover`} /> <div class="h-full rounded-lg col-start-0 bg-no-repeat bg-cover" style={`background-image: url(${image})`} />
<div class="bg-accentRed rounded-lg col-start-2 col-span-2"> <div class="bg-accentRed/65 rounded-lg col-start-2 col-span-2 hover:bg-accentRed/85">
<slot /> <slot />
</div> </div>
</> </>

View File

@ -0,0 +1,49 @@
"use client"
import * as React from "react"
import { navigate } from 'astro:transitions/client';
import { icons } from "../lib/icons"
import { Button } from "./ui/button"
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuRadioGroup,
DropdownMenuRadioItem,
DropdownMenuTrigger,
} from "./ui/dropdown-menu"
// Please note that clang = lang, it's just for more confusion
export function LangSwitcher() {
function getClang(){
const clang = window.location.pathname.substring(1,3);
return clang
}
const [clang, setClang] = React.useState(getClang());
function clinkClang(clang) {
console.log(`${clang}`);
const currentPath = window.location.pathname.slice(3);
setClang(clang);
navigate(`/${clang}${currentPath}`);
}
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline" size="icon" className="bg-inherit border-none text-content" dangerouslySetInnerHTML={{ __html: icons["lang"] }} />
</DropdownMenuTrigger>
<DropdownMenuContent className="w-56">
<DropdownMenuRadioGroup value={clang} onValueChange={clinkClang}>
<DropdownMenuRadioItem value="cs">Česky</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="de">Deutsch</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="en">English</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="fr">Français</DropdownMenuRadioItem>
</DropdownMenuRadioGroup>
</DropdownMenuContent>
</DropdownMenu >
)
}

View File

@ -0,0 +1,15 @@
"use client"
import * as React from "react"
import { Button } from "./ui/button"
import { cn } from '../lib/utils'
import { icons } from "../lib/icons"
export function NavButton({selected, variant}) {
return (
<Button variant="outline" size="icon" className={cn("bg-inherit border-none text-content", selected ? "text-accent" : "text-content")} dangerouslySetInnerHTML={{ __html: icons[variant] }} />
)
}

View File

@ -1,23 +1,41 @@
--- ---
import Navlink from "./Navlink.astro"; import { getRelativeLocaleUrl } from "astro:i18n";
const links = [ /* import ThemeSelector from "./ThemeSelector" */
{ import NavbarSkeleton from "./NavbarSkeleton.astro";
display: "Home", import { LangSwitcher } from "./LangSwitcher";
href: "/" import { NavButton } from "./NavButton";
}, {
display: "Blog",
href: "/blog" function selected(path) {
}, { return (
display: "About", (Astro.url.pathname
href: "/about" .replace(Astro.currentLocale + "/", "")
}, { .slice(0, -1) || "/") == path
display: "Contact", );
href: "/contact"
} }
];
--- ---
<nav class="w-full flex justify-center">
<div class="justify-around w-full md:w-[767px] flex"> <NavbarSkeleton>
{ links.map((item) => (<Navlink href={item.href}, display={item.display}, isActive={ (Astro.url.pathname.replace(Astro.currentLocale + "/", "").slice(0,-1) || "/") == item.href}/>)) } <!-- Page Navigation -->
<div class="flex gap-1">
<a href={getRelativeLocaleUrl(Astro.currentLocale, "/")}>
<NavButton selected={selected("/")} variant="home"/>
</a>
<a href={getRelativeLocaleUrl(Astro.currentLocale, "/blog")}>
<NavButton selected={selected("/blog")} variant="blog"/>
</a>
</div> </div>
</nav>
<!-- Logo -->
<div>
<!-- <Icon icon="favicon" class={"h-8 w-8 text-content"} /> -->
</div>
<!-- Options (language, light/dark mode) -->
<div class="flex gap-4">
<!-- <Icon icon="dark_mode" class={"h-8 w-8 hover:text-primary text-content"} /> -->
<LangSwitcher client:load client:only/>
<!-- <ThemeSelector client:load></ThemeSelector> -->
</div>
</NavbarSkeleton>
./NavButton

View File

@ -0,0 +1,17 @@
<nav class="w-full flex justify-center">
<div class="fixed w-full top-0 z-50 bg-bkgNavbar/70 shadow-md rounded-b-md">
<div
class="sm:grid sm:grid-cols-6 lg:grid-cols-12"
>
<div
class="sm:col-start-2 sm:col-end-6 lg:col-start-3 lg:col-end-11 2xl:col-start-4 2xl:col-end-10 "
>
<div
class="container mx-auto px-6 py-2 flex items-center justify-between"
>
<slot />
</div>
</div>
</div>
</div>
</nav>

View File

@ -1,11 +0,0 @@
---
import { getRelativeLocaleUrl } from "astro:i18n";
const { display, href, isActive } = Astro.props;
---
<a
href={getRelativeLocaleUrl(Astro.currentLocale, href)}
class={(isActive ? "bg-accent " : "bg-content hover:bg-primary ") + " w-full text-center mx-0.5"}
><span>{display}</span></a
>

View File

View File

@ -0,0 +1,47 @@
import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { cva } from "class-variance-authority";
import { cn } from "../../lib/utils"
const buttonVariants = cva(
"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
{
variants: {
variant: {
default: "bg-primary text-primary-foreground hover:bg-primary/90",
destructive:
"bg-destructive text-destructive-foreground hover:bg-destructive/90",
outline:
"border border-input bg-background hover:bg-primary hover:text-accent-foreground",
secondary:
"bg-secondary text-secondary-foreground hover:bg-secondary/80",
ghost: "hover:bg-accent hover:text-accent-foreground",
link: "text-primary underline-offset-4 hover:underline",
},
size: {
default: "h-10 px-4 py-2",
sm: "h-9 rounded-md px-3",
lg: "h-11 rounded-md px-8",
icon: "h-10 w-10",
},
},
defaultVariants: {
variant: "default",
size: "default",
},
}
)
const Button = React.forwardRef(({ className, variant, size, asChild = false, ...props }, ref) => {
const Comp = asChild ? Slot : "button"
return (
(<Comp
className={cn(buttonVariants({ variant, size, className }))}
ref={ref}
{...props} />)
);
})
Button.displayName = "Button"
export { Button, buttonVariants }

View File

@ -0,0 +1,155 @@
import * as React from "react"
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
import { Check, ChevronRight, Circle } from "lucide-react"
import { cn } from "../../lib/utils"
const DropdownMenu = DropdownMenuPrimitive.Root
const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
const DropdownMenuGroup = DropdownMenuPrimitive.Group
const DropdownMenuPortal = DropdownMenuPrimitive.Portal
const DropdownMenuSub = DropdownMenuPrimitive.Sub
const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
const DropdownMenuSubTrigger = React.forwardRef(({ className, inset, children, ...props }, ref) => (
<DropdownMenuPrimitive.SubTrigger
ref={ref}
className={cn(
"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
inset && "pl-8",
className
)}
{...props}>
{children}
<ChevronRight className="ml-auto h-4 w-4" />
</DropdownMenuPrimitive.SubTrigger>
))
DropdownMenuSubTrigger.displayName =
DropdownMenuPrimitive.SubTrigger.displayName
const DropdownMenuSubContent = React.forwardRef(({ className, ...props }, ref) => (
<DropdownMenuPrimitive.SubContent
ref={ref}
className={cn(
"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
className
)}
{...props} />
))
DropdownMenuSubContent.displayName =
DropdownMenuPrimitive.SubContent.displayName
const DropdownMenuContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => (
<DropdownMenuPrimitive.Portal>
<DropdownMenuPrimitive.Content
ref={ref}
sideOffset={sideOffset}
className={cn(
"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
className
)}
{...props} />
</DropdownMenuPrimitive.Portal>
))
DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
const DropdownMenuItem = React.forwardRef(({ className, inset, ...props }, ref) => (
<DropdownMenuPrimitive.Item
ref={ref}
className={cn(
"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
inset && "pl-8",
className
)}
{...props} />
))
DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
const DropdownMenuCheckboxItem = React.forwardRef(({ className, children, checked, ...props }, ref) => (
<DropdownMenuPrimitive.CheckboxItem
ref={ref}
className={cn(
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
className
)}
checked={checked}
{...props}>
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
<DropdownMenuPrimitive.ItemIndicator>
<Check className="h-4 w-4" />
</DropdownMenuPrimitive.ItemIndicator>
</span>
{children}
</DropdownMenuPrimitive.CheckboxItem>
))
DropdownMenuCheckboxItem.displayName =
DropdownMenuPrimitive.CheckboxItem.displayName
const DropdownMenuRadioItem = React.forwardRef(({ className, children, ...props }, ref) => (
<DropdownMenuPrimitive.RadioItem
ref={ref}
className={cn(
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
className
)}
{...props}>
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
<DropdownMenuPrimitive.ItemIndicator>
<Circle className="h-2 w-2 fill-current" />
</DropdownMenuPrimitive.ItemIndicator>
</span>
{children}
</DropdownMenuPrimitive.RadioItem>
))
DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
const DropdownMenuLabel = React.forwardRef(({ className, inset, ...props }, ref) => (
<DropdownMenuPrimitive.Label
ref={ref}
className={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
{...props} />
))
DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
const DropdownMenuSeparator = React.forwardRef(({ className, ...props }, ref) => (
<DropdownMenuPrimitive.Separator
ref={ref}
className={cn("-mx-1 my-1 h-px bg-muted", className)}
{...props} />
))
DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
const DropdownMenuShortcut = ({
className,
...props
}) => {
return (
(<span
className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
{...props} />)
);
}
DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
export {
DropdownMenu,
DropdownMenuTrigger,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuCheckboxItem,
DropdownMenuRadioItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuShortcut,
DropdownMenuGroup,
DropdownMenuPortal,
DropdownMenuSub,
DropdownMenuSubContent,
DropdownMenuSubTrigger,
DropdownMenuRadioGroup,
}

4
src/icons/blog.svg Normal file
View File

@ -0,0 +1,4 @@
<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>

After

Width:  |  Height:  |  Size: 485 B

4
src/icons/dark_mode.svg Normal file
View File

@ -0,0 +1,4 @@
<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>

After

Width:  |  Height:  |  Size: 387 B

3
src/icons/favicon.svg Normal file
View File

@ -0,0 +1,3 @@
<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>

After

Width:  |  Height:  |  Size: 614 B

4
src/icons/home.svg Normal file
View File

@ -0,0 +1,4 @@
<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>

After

Width:  |  Height:  |  Size: 441 B

3
src/icons/lang.svg Normal file
View File

@ -0,0 +1,3 @@
<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>

After

Width:  |  Height:  |  Size: 441 B

4
src/icons/light_mode.svg Normal file
View File

@ -0,0 +1,4 @@
<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>

After

Width:  |  Height:  |  Size: 400 B

View File

@ -2,6 +2,7 @@
const { title, description, lang, themeOverride } = Astro.props; const { title, description, lang, themeOverride } = Astro.props;
import Navbar from "../components/Navbar.astro"; import Navbar from "../components/Navbar.astro";
import "../style/index.css"; import "../style/index.css";
import "../style/globals.css";
--- ---
<!doctype html> <!doctype html>
@ -10,10 +11,11 @@ import "../style/index.css";
<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" />
<meta name="description" content={description} /> <meta name="description" content={description} />
<link rel="shortcut icon" href="/favicon.svg">
<title>{title}</title> <title>{title}</title>
</head> </head>
<body class="bg-bkg" > <body class="bg-bkg" >
<!--<Navbar /> --> <Navbar />
<div class="bg-bkg h-dvh w-full overflow-y-scroll snap-mandatory snap-y scroll-smooth"> <div class="bg-bkg h-dvh w-full overflow-y-scroll snap-mandatory snap-y scroll-smooth">
<slot /> <slot />
</div> </div>

View File

@ -1,7 +1,7 @@
<div class="snap-start w-screen h-screen overflow-clip"> <div class="snap-start w-screen h-screen overflow-clip pt-10">
<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 h-full p-2 sm:p-6" class="sm:col-start-2 sm:col-end-6 lg:col-start-3 lg:col-end-11 2xl:col-start-4 2xl:col-end-10 h-full p-2 sm:p-6"
> >
<slot /> <slot />
</div> </div>

17
src/lib/icons.js Normal file
View File

@ -0,0 +1,17 @@
const home = `<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>`;
const blog = `<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>`;
const dark_theme = `<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>`;
const light_theme = `<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>`;
const lang = `<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>`
export const icons = { home: home, blog: blog, dark_theme: dark_theme, light_theme: light_theme, lang:lang };

6
src/lib/utils.js Normal file
View File

@ -0,0 +1,6 @@
import { clsx } from "clsx"
import { twMerge } from "tailwind-merge"
export function cn(...inputs) {
return twMerge(clsx(inputs))
}

71
src/style/globals.css Normal file
View File

@ -0,0 +1,71 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 222.2 47.4% 11.2%;
--muted: 210 40% 96.1%;
--muted-foreground: 215.4 16.3% 46.9%;
--popover: 0 0% 100%;
--popover-foreground: 222.2 47.4% 11.2%;
--border: 214.3 31.8% 91.4%;
--input: 214.3 31.8% 91.4%;
--card: 0 0% 100%;
--card-foreground: 222.2 47.4% 11.2%;
--primary: 222.2 47.4% 11.2%;
--primary-foreground: 210 40% 98%;
--secondary: 210 40% 96.1%;
--secondary-foreground: 222.2 47.4% 11.2%;
--accent: 210 40% 96.1%;
--accent-foreground: 222.2 47.4% 11.2%;
--destructive: 0 100% 50%;
--destructive-foreground: 210 40% 98%;
--ring: 215 20.2% 65.1%;
--radius: 0.5rem;
}
.dark {
--background: 224 71% 4%;
--foreground: 213 31% 91%;
--muted: 223 47% 11%;
--muted-foreground: 215.4 16.3% 56.9%;
--accent: 216 34% 17%;
--accent-foreground: 210 40% 98%;
--popover: 224 71% 4%;
--popover-foreground: 215 20.2% 65.1%;
--border: 216 34% 17%;
--input: 216 34% 17%;
--card: 224 71% 4%;
--card-foreground: 213 31% 91%;
--primary: 210 40% 98%;
--primary-foreground: 222.2 47.4% 1.2%;
--secondary: 222.2 47.4% 11.2%;
--secondary-foreground: 210 40% 98%;
--destructive: 0 63% 31%;
--destructive-foreground: 210 40% 98%;
--ring: 216 34% 17%;
--radius: 0.5rem;
}
}

View File

@ -8,6 +8,7 @@ Dark Mode: https://www.realtimecolors.com/dashboard?colors=e7e7e9-0f0f0f-5819c5
@layer base { @layer base {
:root { :root {
--color-bkg: 0deg, 0%, 94%; --color-bkg: 0deg, 0%, 94%;
--color-bkgNavbar: 0deg, 0%, 50%;
--color-content: 240deg, 4%, 9%; --color-content: 240deg, 4%, 9%;
--color-primary: 54deg, 100%, 50%; --color-primary: 54deg, 100%, 50%;
--color-secondary: 237deg, 100%, 93%; --color-secondary: 237deg, 100%, 93%;
@ -18,6 +19,7 @@ Dark Mode: https://www.realtimecolors.com/dashboard?colors=e7e7e9-0f0f0f-5819c5
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
:root { :root {
--color-bkg: 0deg, 0%, 6%; --color-bkg: 0deg, 0%, 6%;
--color-bkgNavbar: 0deg, 0%, 17%;
--color-content: 240deg, 4%, 91%; --color-content: 240deg, 4%, 91%;
--color-primary: 262deg, 77%, 44%; --color-primary: 262deg, 77%, 44%;
--color-secondary: 273deg, 100%, 20%; --color-secondary: 273deg, 100%, 20%;
@ -28,6 +30,7 @@ Dark Mode: https://www.realtimecolors.com/dashboard?colors=e7e7e9-0f0f0f-5819c5
:root[data-theme="dark"] { :root[data-theme="dark"] {
--color-bkg: 0deg, 0%, 6%; --color-bkg: 0deg, 0%, 6%;
--color-bkgNavbar: 0deg, 0%, 17%;
--color-content: 240deg, 4%, 91%; --color-content: 240deg, 4%, 91%;
--color-primary: 262deg, 77%, 44%; --color-primary: 262deg, 77%, 44%;
--color-secondary: 273deg, 100%, 20%; --color-secondary: 273deg, 100%, 20%;
@ -37,6 +40,7 @@ Dark Mode: https://www.realtimecolors.com/dashboard?colors=e7e7e9-0f0f0f-5819c5
:root[data-theme="light"] { :root[data-theme="light"] {
--color-bkg: 0deg, 0%, 94%; --color-bkg: 0deg, 0%, 94%;
--color-bkgNavbar: 0deg, 0%, 50%;
--color-content: 240deg, 4%, 9%; --color-content: 240deg, 4%, 9%;
--color-primary: 54deg, 100%, 50%; --color-primary: 54deg, 100%, 50%;
--color-secondary: 237deg, 100%, 93%; --color-secondary: 237deg, 100%, 93%;

View File

@ -1,4 +1,5 @@
/** @type {import('tailwindcss').Config} */ /** @type {import('tailwindcss').Config} */
function withOpacity(variableName) { function withOpacity(variableName) {
return ({ opacityValue }) => { return ({ opacityValue }) => {
if (opacityValue !== undefined) { if (opacityValue !== undefined) {
@ -8,28 +9,75 @@ function withOpacity(variableName) {
} }
} }
export default { module.exports = {
content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'], darkMode: ["class"],
content: [
'./pages/**/*.{js,jsx}',
'./components/**/*.{js,jsx}',
'./app/**/*.{js,jsx}',
'./src/**/*.{js,jsx}',
'./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}',
],
theme: { theme: {
container: {
center: true,
padding: "2rem",
screens: {
"2xl": "1400px",
},
},
extend: { extend: {
colors: { colors: {
bkg: withOpacity('--color-bkg'), bkg: withOpacity('--color-bkg'),
bkgNavbar: withOpacity('--color-bkgNavbar'),
content: withOpacity('--color-content'), content: withOpacity('--color-content'),
primary: withOpacity('--color-primary'), primary: withOpacity('--color-primary'),
secondary: withOpacity('--color-secondary'), secondary: withOpacity('--color-secondary'),
accent: withOpacity('--color-accent'), accent: withOpacity('--color-accent'),
accentRed: withOpacity('--color-accent-red'), accentRed: withOpacity('--color-accent-red'),
},
},
},
plugins: [],
}
/* border: "hsl(var(--border))",
--color-bkg: 0deg, 0%, 94%; input: "hsl(var(--input))",
--color-content: 240deg, 4%, 9%; ring: "hsl(var(--ring))",
--color-primary: 54deg, 100%, 50%; background: "hsl(var(--background))",
--color-secondary: 237deg, 100%, 93%; foreground: "hsl(var(--foreground))",
--color-accent: 262deg, 73%, 47%; destructive: {
DEFAULT: "hsl(var(--destructive))",
foreground: "hsl(var(--destructive-foreground))",
},
muted: {
DEFAULT: "hsl(var(--muted))",
foreground: "hsl(var(--muted-foreground))",
},
popover: {
DEFAULT: "hsl(var(--popover))",
foreground: "hsl(var(--popover-foreground))",
},
card: {
DEFAULT: "hsl(var(--card))",
foreground: "hsl(var(--card-foreground))",
},
},
borderRadius: {
lg: "var(--radius)",
md: "calc(var(--radius) - 2px)",
sm: "calc(var(--radius) - 4px)",
},
keyframes: {
"accordion-down": {
from: { height: "0" },
to: { height: "var(--radix-accordion-content-height)" },
},
"accordion-up": {
from: { height: "var(--radix-accordion-content-height)" },
to: { height: "0" },
},
},
animation: {
"accordion-down": "accordion-down 0.2s ease-out",
"accordion-up": "accordion-up 0.2s ease-out",
},
},
},
plugins: [require("tailwindcss-animate")],
} }
*/

View File

@ -1,3 +1,10 @@
{ {
"extends": "astro/tsconfigs/base" "extends": "astro/tsconfigs/base",
"compilerOptions": {
"paths": {
"@/*": [
"./src/*"
]
}
}
} }