From 3e1017c6e77715afc824bac24e293eebb66bf1e4 Mon Sep 17 00:00:00 2001 From: retrozinndev Date: Tue, 20 May 2025 14:30:06 -0300 Subject: [PATCH 1/9] :boom: fix(styles): maybe fix nerd font icons(finally?) --- src/layouts/PageLayout.astro | 4 ++-- src/styles/_fonts.scss | 4 ++-- src/styles/global.scss | 11 ++++++----- 3 files changed, 10 insertions(+), 9 deletions(-) diff --git a/src/layouts/PageLayout.astro b/src/layouts/PageLayout.astro index e0d1c12..8c95700 100644 --- a/src/layouts/PageLayout.astro +++ b/src/layouts/PageLayout.astro @@ -16,8 +16,8 @@ const { title, icon } = Astro.props; { title } + "https://1.gravatar.com/avatar/093b64d2016ab8acce8a2fe73cb719f527790d4ecec7f5837db8d46519b38bf8?size=32" + } /> diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss index 49fd042..066ab2d 100644 --- a/src/styles/_fonts.scss +++ b/src/styles/_fonts.scss @@ -1,7 +1,7 @@ @import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"); -@import url("https://www.nerdfonts.com/assets/css/webfont.css"); +@import url("https://cdn.jsdelivr.net/gh/ryanoasis/nerd-fonts@latest/css/nerd-fonts-generated.min.css"); @font-face { - font-family: "Nerd Font Symbols"; + font-family: "NerdFontsSymbols Nerd Font"; src: url("https://cdn.jsdelivr.net/gh/ryanoasis/nerd-fonts@latest/patched-fonts/NerdFontsSymbolsOnly/SymbolsNerdFontMono-Regular.ttf"); } diff --git a/src/styles/global.scss b/src/styles/global.scss index b16bff5..ef876d9 100644 --- a/src/styles/global.scss +++ b/src/styles/global.scss @@ -1,5 +1,6 @@ -@use "./colors"; + @use "./fonts"; +@use "./colors"; html { font-family: Noto Sans, Segoe UI, sans-serif; @@ -39,6 +40,10 @@ body { color: colors.$accent-color-dark } } + + & .nf, .nf { + font-family: "NerdFontsSymbols Nerd Font" + } } h1 { @@ -53,10 +58,6 @@ h3 { font-size: 18px; } -.nf { - font-family: "Nerd Font Symbols"; -} - .center { width: 100%; text-align: center; From c7bab7dde39307dafda559b27b7ec3b91d26f2f7 Mon Sep 17 00:00:00 2001 From: retrozinndev Date: Sun, 25 May 2025 18:30:50 -0300 Subject: [PATCH 2/9] :wrench: chore(astro.config): add react integration --- astro.config.mjs | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/astro.config.mjs b/astro.config.mjs index 3c276c6..35628eb 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -1,7 +1,12 @@ import { defineConfig } from 'astro/config'; +import react from "@astrojs/react"; + // https://astro.build/config export default defineConfig({ site: "https://retrozinndev.github.io", - base: "." + base: ".", + integrations: [ + react() + ], }); From f970b65030ee974e5d1df8784100342ff2852fd0 Mon Sep 17 00:00:00 2001 From: retrozinndev Date: Sun, 25 May 2025 18:31:50 -0300 Subject: [PATCH 3/9] :wrench: chore(package): update deps, add react --- package.json | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/package.json b/package.json index f95de07..bc7f8ec 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,15 @@ }, "dependencies": { "@astrojs/check": "^0.9.4", + "@astrojs/react": "^4.2.7", + "@octokit/rest": "github:octokit/rest.js", + "@types/react": "^19.1.4", + "@types/react-dom": "^19.1.5", "astro": "^5.1.7", + "nanostores": "^1.0.1", + "react": "^19.1.0", + "react-dom": "^19.1.0", + "react-icons": "^5.5.0", "typescript": "^5.4.5" }, "devDependencies": { From 5f928d1d4c9a98cff52382299357e2867f093084 Mon Sep 17 00:00:00 2001 From: retrozinndev Date: Sun, 25 May 2025 18:32:46 -0300 Subject: [PATCH 4/9] :wrench: chore(tsconfig): add jsx compiler options --- tsconfig.json | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/tsconfig.json b/tsconfig.json index 77da9dd..b7243b9 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,3 +1,7 @@ { - "extends": "astro/tsconfigs/strict" -} \ No newline at end of file + "extends": "astro/tsconfigs/strict", + "compilerOptions": { + "jsx": "react-jsx", + "jsxImportSource": "react" + } +} From d13258f56765f3c8b0b974b8d549e359581d6e68 Mon Sep 17 00:00:00 2001 From: retrozinndev Date: Sun, 25 May 2025 18:42:52 -0300 Subject: [PATCH 5/9] :sparkles: feat: use react for some components, add more props also allow link-button component to be used inline --- src/components/LinkButton.astro | 58 ++++++--- src/components/Navigation.astro | 204 ------------------------------- src/components/Navigation.tsx | 109 +++++++++++++++++ src/components/SocialLinks.astro | 105 +++++++++------- src/layouts/PageLayout.astro | 49 +++++--- src/pages/[lang]/index.astro | 147 +++++++++++++++++----- src/pages/[lang]/projects.astro | 44 ++++++- src/pages/[lang]/stack.astro | 105 +++++++++++++--- src/pages/index.astro | 14 +-- 9 files changed, 490 insertions(+), 345 deletions(-) delete mode 100644 src/components/Navigation.astro create mode 100644 src/components/Navigation.tsx diff --git a/src/components/LinkButton.astro b/src/components/LinkButton.astro index f6355c2..531b5ce 100644 --- a/src/components/LinkButton.astro +++ b/src/components/LinkButton.astro @@ -1,15 +1,26 @@ --- +import { FaArrowUpRightFromSquare } from 'react-icons/fa6'; + interface Props { href: string; external?: boolean; + showIcon?: boolean; + title?: string; + spacing?: boolean; } -const { href, external } = Astro.props; +const { href, external, title, showIcon = true, spacing = true } = Astro.props; --- - - + + + + diff --git a/src/components/Navigation.astro b/src/components/Navigation.astro deleted file mode 100644 index 9690188..0000000 --- a/src/components/Navigation.astro +++ /dev/null @@ -1,204 +0,0 @@ ---- -import { Image } from "astro:assets"; -import { useTranslations } from "../i18n/utils.ts"; -import { i18n, languages } from "../i18n/ui.ts"; - -const pages = [ "stack", "projects" ]; -const lang = Astro.params.lang || "en"; -const tr = useTranslations(lang as never); ---- - -
- -
- - - - diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx new file mode 100644 index 0000000..6f09986 --- /dev/null +++ b/src/components/Navigation.tsx @@ -0,0 +1,109 @@ +import "../styles/components/Navigation.scss"; + +import { useEffect, useState, type ReactElement } from "react"; + +import { useTranslations } from "../i18n/utils"; +import { defaultLang } from "../i18n/ui"; +import ToggleThemeButton from "./ToggleThemeButton"; +import LanguageSelector from "./LanguageSelector"; +import { AstroJSX } from "astro/jsx-runtime"; + +interface Props { + lang?: string; + showLanguageSelector?: boolean; + showProfilePic?: boolean; +}; + +type Page = { + name: string; + href: string|URL; + hasI18n?: boolean; +}; + +const pages: Array = [ + { + name: "home", + href: "/", + hasI18n: true + }, + { + name: "about", + href: "/#about", + hasI18n: true + }, + { + name: "stack", + href: "/stack", + hasI18n: true + }, + { + name: "projects", + href: "/projects", + hasI18n: true + } +]; + +export default function(props: Props): ReactElement { + const showProfilePic = props.showProfilePic ?? true; + const lang = props.lang ?? defaultLang; + const tr = useTranslations(lang); + + const [scrolled, setScrolledState] = useState(false); + + useEffect(() => { + function handleScroll() { + if(window.scrollY >= 24) { + setScrolledState(true); + return; + } + + setScrolledState(false); + } + + window.addEventListener("scroll", handleScroll); + }); + + return
+ +
; +} diff --git a/src/components/SocialLinks.astro b/src/components/SocialLinks.astro index 09890a7..6b0631a 100644 --- a/src/components/SocialLinks.astro +++ b/src/components/SocialLinks.astro @@ -1,16 +1,70 @@ --- -// Discord User Widget by vendicated (https://vendicated.dev/) +import type { IconType } from "react-icons"; +import { FaGithub, FaGitlab, FaXTwitter, FaReddit, FaDiscord } from "react-icons/fa6"; +import { FiMail } from "react-icons/fi"; import LinkButton from "./LinkButton.astro"; + +type SocialLink = { + name: string; + href: string; + icon: IconType +}; + +const socials: Array = [ + { + name: "GitHub", + href: "https://github.com/retrozinndev", + icon: FaGithub + }, + { + name: "GitLab", + href: "https://gitlab.com/retrozinndev", + icon: FaGitlab + }, + { + name: "Discord", + href: "https://discord.com/users/568589231954591749", + icon: FaDiscord + }, + { + name: "X / Twitter", + href: "https://x.com/retrozinndev", + icon: FaXTwitter + }, + { + name: "Reddit", + href: "https://reddit.com/user/Much_Clue7037", + icon: FaReddit + }, + { + name: "Mail", + href: "mailto:joaovodias@gmail.com", + icon: FiMail + } +]; --- +