Mike/freno-dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

readable

Browse Source
This commit is contained in:
Michael Freno
2025-12-23 08:39:56 -05:00
parent 95b5549352
commit be3e9a9e0b
5 changed files with 63 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/Bars.tsx
View File

@@ -17,6 +17,7 @@ import { ActivityHeatmap } from "./ActivityHeatmap";
import { DarkModeToggle } from "./DarkModeToggle"; import { DarkModeToggle } from "./DarkModeToggle";
import { SkeletonBox, SkeletonText } from "./SkeletonLoader"; import { SkeletonBox, SkeletonText } from "./SkeletonLoader";
import { env } from "~/env/client"; import { env } from "~/env/client";
import { A, useNavigate } from "@solidjs/router";
function formatDomainName(url: string): string { function formatDomainName(url: string): string {
const domain = url.split("://")[1]?.split(":")[0] ?? url; const domain = url.split("://")[1]?.split(":")[0] ?? url;
@@ -284,6 +285,7 @@ export function LeftBar() {
fetchData(); fetchData();
}, 0); }, 0);
}); });
const navigate = useNavigate();
return ( return (
<nav <nav
@@ -412,7 +414,13 @@ export function LeftBar() {
Blog Blog
</a> </a>
</li> </li>
<li class="hover:text-subtext0 w-fit transition-transform duration-200 ease-in-out hover:-translate-y-0.5 hover:scale-110 hover:font-bold"> <li
class="hover:text-subtext0 w-fit cursor-pointer transition-transform duration-200 ease-in-out hover:-translate-y-0.5 hover:scale-110 hover:font-bold"
onClick={() => {
navigate("/account");
handleLinkClick();
}}
>
<Show <Show
when={isMounted() && userInfo()?.isAuthenticated} when={isMounted() && userInfo()?.isAuthenticated}
fallback={ fallback={
@@ -421,7 +429,7 @@ export function LeftBar() {
</a> </a>
} }
> >
<a href="/account" onClick={handleLinkClick}> <A href="/account" onClick={handleLinkClick}>
Account Account
<Show when={userInfo()?.email}> <Show when={userInfo()?.email}>
<span class="text-subtext0 text-sm font-normal"> <span class="text-subtext0 text-sm font-normal">
@@ -429,7 +437,7 @@ export function LeftBar() {
({userInfo()!.email}) ({userInfo()!.email})
</span> </span>
</Show> </Show>
</a> </A>
</Show> </Show>
</li> </li>
<Show when={isMounted() && userInfo()?.isAuthenticated}> <Show when={isMounted() && userInfo()?.isAuthenticated}>
@@ -462,7 +470,7 @@ export function LeftBar() {
} }
export function RightBar() { export function RightBar() {
const { rightBarSize, rightBarVisible } = useBars(); const { rightBarVisible } = useBars();
let ref: HTMLDivElement | undefined; let ref: HTMLDivElement | undefined;
return ( return (

9
src/components/blog/DeletePostButton.tsx
View File

@@ -29,9 +29,12 @@ export default function DeletePostButton(props: DeletePostButtonProps) {
return ( return (
<form onSubmit={deletePostTrigger} class="flex w-full justify-end"> <form onSubmit={deletePostTrigger} class="flex w-full justify-end">
<button type="submit"> <button type="submit" class="hover:cursor-pointer">
<Show when={loading()} fallback={<TrashIcon height={24} width={24} strokeWidth={1.5} />}> <Show
<LoadingSpinner height={24} width={24} /> when={!loading()}
fallback={<LoadingSpinner height={24} width={24} />}
>
<TrashIcon height={24} width={24} strokeWidth={1.5} />
</Show> </Show>
</button> </button>
</form> </form>

8
src/components/icons/TrashIcon.tsx
View File

@@ -10,15 +10,15 @@ const TrashIcon = (props: {
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
fill="none" fill="none"
viewBox="0 0 24 24" viewBox="0 0 24 24"
strokeWidth={props.strokeWidth} stroke-width={props.strokeWidth}
stroke={props.stroke ? props.stroke : undefined} stroke={props.stroke ? props.stroke : undefined}
height={props.height} height={props.height}
width={props.width} width={props.width}
class={props.stroke ? undefined : "stroke-zinc-900 dark:stroke-white"} class={props.stroke ? undefined : "stroke-base"}
> >
<path <path
strokeLinecap="round" stroke-linecap="round"
strokeLinejoin="round" stroke-linejoin="round"
d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
/> />
</svg> </svg>

65
src/routes/account.tsx
View File

@@ -468,33 +468,31 @@ export default function AccountPage() {
setPasswordBlurred(true); setPasswordBlurred(true);
}; };
// Helper to get provider display info // Helper to get provider display name
const getProviderInfo = (provider: UserProfile["provider"]) => { const getProviderName = (provider: UserProfile["provider"]) => {
switch (provider) { switch (provider) {
case "google": case "google":
return { return "Google";
name: "Google",
icon: <GoogleLogo height={24} width={24} />,
color: "text-blue-500"
};
case "github": case "github":
return { return "GitHub";
name: "GitHub",
icon: <GitHub height={24} width={24} fill="currentColor" />,
color: "text-gray-700 dark:text-gray-300"
};
case "email": case "email":
return { return "Email";
name: "Email",
icon: <EmailIcon height={24} width={24} />,
color: "text-green-500"
};
default: default:
return { return "Unknown";
name: "Unknown", }
icon: <EmailIcon height={24} width={24} />,
color: "text-gray-500"
}; };
// Helper to get provider icon color
const getProviderColor = (provider: UserProfile["provider"]) => {
switch (provider) {
case "google":
return "text-blue-500";
case "github":
return "text-gray-700 dark:text-gray-300";
case "email":
return "text-green-500";
default:
return "text-gray-500";
} }
}; };
@@ -533,13 +531,24 @@ export default function AccountPage() {
Account Type Account Type
</div> </div>
<div class="flex items-center justify-center gap-3"> <div class="flex items-center justify-center gap-3">
<span <span class={getProviderColor(userProfile().provider)}>
class={getProviderInfo(userProfile().provider).color} <Show when={userProfile().provider === "google"}>
<GoogleLogo height={24} width={24} />
</Show>
<Show when={userProfile().provider === "github"}>
<GitHub height={24} width={24} fill="currentColor" />
</Show>
<Show
when={
userProfile().provider === "email" ||
!userProfile().provider
}
> >
{getProviderInfo(userProfile().provider).icon} <EmailIcon height={24} width={24} />
</Show>
</span> </span>
<span class="text-lg font-semibold"> <span class="text-lg font-semibold">
{getProviderInfo(userProfile().provider).name} Account {getProviderName(userProfile().provider)} Account
</span> </span>
</div> </div>
<Show <Show
@@ -800,7 +809,7 @@ export default function AccountPage() {
{userProfile().provider === "email" {userProfile().provider === "email"
? "Set a password to enable password login" ? "Set a password to enable password login"
: "Add a password to enable email/password login alongside your " + : "Add a password to enable email/password login alongside your " +
getProviderInfo(userProfile().provider).name + getProviderName(userProfile().provider) +
" login"} " login"}
</div> </div>
</Show> </Show>
@@ -979,7 +988,7 @@ export default function AccountPage() {
fallback={ fallback={
<div class="flex flex-col items-center"> <div class="flex flex-col items-center">
<div class="text-crust mb-4 text-center text-sm"> <div class="text-crust mb-4 text-center text-sm">
Your {getProviderInfo(userProfile().provider).name}{" "} Your {getProviderName(userProfile().provider)}{" "}
account doesn't have a password. To delete your account doesn't have a password. To delete your
account, please set a password first, then return account, please set a password first, then return
here to proceed with deletion. here to proceed with deletion.
@@ -1022,7 +1031,7 @@ export default function AccountPage() {
deleteAccountButtonLoading() deleteAccountButtonLoading()
? "bg-red cursor-not-allowed brightness-75" ? "bg-red cursor-not-allowed brightness-75"
: "bg-red hover:brightness-125 active:scale-90" : "bg-red hover:brightness-125 active:scale-90"
} mx-auto mt-4 flex justify-center rounded px-4 py-2 text-base transition-all duration-300 ease-out`} } border-text mx-auto mt-4 flex justify-center rounded border px-4 py-2 text-base transition-all duration-300 ease-out`}
> >
{deleteAccountButtonLoading() {deleteAccountButtonLoading()
? "Deleting..." ? "Deleting..."

4
src/routes/blog/[title]/index.tsx
View File

@@ -293,8 +293,8 @@ export default function PostPage() {
"pointer-events": "none" "pointer-events": "none"
}} }}
/> />
<div class="text-text fixed top-1/3 z-50 m-auto w-full px-4 text-center tracking-widest backdrop-blur-xs select-text md:w-[calc(100vw-500px)]"> <div class="fixed top-1/3 z-50 m-auto w-full px-4 text-center tracking-widest text-white backdrop-blur-md select-text text-shadow-lg backdrop:brightness-50 md:w-[calc(100vw-500px)]">
<div class="text-3xl font-light tracking-widest"> <div class="text-3xl font-semibold tracking-widest">
{p().title.replaceAll("_", " ")} {p().title.replaceAll("_", " ")}
<div class="py-8 text-xl font-light tracking-widest"> <div class="py-8 text-xl font-light tracking-widest">
{p().subtitle} {p().subtitle}