SirBlob/Website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Group Header Rendering Fixes

Browse Source
This commit is contained in:
Sir Blob
2025-11-29 22:14:25 +00:00
parent 0bb3de2b35
commit 49dea88868
7 changed files with 32 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/lib/assets/css/tui-body.css
View File

@@ -140,11 +140,16 @@
.header-text {
color: var(--terminal-accent);
font-weight: 600;
font-size: 1rem;
font-weight: 700;
font-size: 1.35rem;
display: flex;
align-items: center;
gap: 0.5rem;
line-height: 1.2;
}
.header-text.inline-header {
display: inline-flex;
}
:global(.header-icon) {

13
src/lib/components/NavbarWaybar.svelte
View File

@@ -1,5 +1,5 @@
<script lang="ts">
import { mode, colorTheme, toggleMode, setColorTheme, themeOptions, themeColors, type ColorTheme } from '$lib/stores/theme';
import { mode, getThemeIcon, colorTheme, toggleMode, setColorTheme, themeOptions, themeColors, type ColorTheme } from '$lib/stores/theme';
import { page } from '$app/stores';
import { fly, fade, slide } from 'svelte/transition';
import { user, navigation } from '$lib/config';
@@ -166,13 +166,6 @@
mobileMenuOpen = false;
}
function getThemeIcon(theme: ColorTheme): string {
switch (theme) {
case 'arch': return 'mdi:arch';
case 'catppuccin': return 'solar:cat-bold';
default: return 'mdi:palette';
}
}
</script>
<svelte:window on:keydown={handleKeydown} />
@@ -195,9 +188,9 @@
<!-- Left modules -->
<div class="bar-left">
<!-- Arch logo / Launcher -->
<a href="/" class="module launcher" title="Home">
<!-- <a href="/" class="module launcher" title="Home">
<img src="/favicon.png" alt="Blob Icon" width="16" />
</a>
</a> -->
<!-- Mobile menu toggle -->
<button

9
src/lib/components/tui/TuiHeader.svelte
View File

@@ -1,20 +1,13 @@
<script lang="ts">
import Icon from '@iconify/svelte';
import { user } from '$lib/config';
import { colorTheme, type ColorTheme } from '$lib/stores/theme';
import { colorTheme, getThemeIcon, type ColorTheme } from '$lib/stores/theme';
import '$lib/assets/css/tui-header.css';
export let title = 'terminal';
export let interactive = true;
export let hasButtons = false;
function getThemeIcon(theme: ColorTheme): string {
switch (theme) {
case 'arch': return 'mdi:arch';
case 'catppuccin': return 'solar:cat-bold';
default: return 'mdi:palette';
}
}
</script>
<div class="tui-statusbar top">

11
src/lib/components/tui/TuiLine.svelte
View File

@@ -110,7 +110,12 @@
{#if line.content}<span class="image-caption">{line.content}</span>{/if}
</div>
{:else if !isImage}
{#if inline}
{#if inline && isHeader}
<span class="header-text inline-header">
<Icon icon="mdi:pound" width="20" class="header-icon" />
{#each segments as seg}{#if seg.icon}<Icon icon={seg.icon} width="20" class="inline-icon" />{:else if getSegmentStyle(seg)}<span style={getSegmentStyle(seg)}>{seg.text}</span>{:else}{seg.text}{/if}{/each}
</span>
{:else if inline}
<span class="inline-content {line.type}">
{getLinePrefix(line.type)}{#each segments as seg}{#if seg.icon}<Icon icon={seg.icon} width="14" class="inline-icon" />{:else if getSegmentStyle(seg)}<span style={getSegmentStyle(seg)}>{seg.text}</span>{:else}{seg.text}{/if}{/each}
</span>
@@ -124,8 +129,8 @@
{/if}
{#if isHeader}
<span class="content header-text">
<Icon icon="mdi:pound" width="14" class="header-icon" />
{#each segments as seg}{#if seg.icon}<Icon icon={seg.icon} width="16" class="inline-icon" />{:else if getSegmentStyle(seg)}<span style={getSegmentStyle(seg)}>{seg.text}</span>{:else}{seg.text}{/if}{/each}
<Icon icon="mdi:pound" width="25" class="header-icon" />
{#each segments as seg}{#if seg.icon}<Icon icon={seg.icon} width="25" class="inline-icon" />{:else if getSegmentStyle(seg)}<span style={getSegmentStyle(seg)}>{seg.text}</span>{:else}{seg.text}{/if}{/each}
</span>
{:else}
<span class="content">

14
src/lib/pages/portfolio.ts
View File

@@ -18,7 +18,7 @@ export const lines: TerminalLine[] = [
inline: true,
children: [
// User info
{ type: 'header', content: `(&primary,bold)${user.name}(&)` },
{ type: 'header', content: `(&bold)${user.name}(&)` },
{ type: 'info', content: `(&accent)${user.title}(&)` },
{ type: 'output', content: `(&white)Location:(&) (&primary)${user.location}(&)` },
{ type: 'output', content: `(&muted)${user.bio}(&)` },
@@ -44,15 +44,7 @@ export const lines: TerminalLine[] = [
href: social.link,
inline: true
})),
// {
// type: 'button',
// content: `Email: ${user.email}`,
// icon: 'mdi:email',
// style: 'secondary',
// href: `mailto:${user.email}`
// },
{ type: 'blank', content: '' },
{ type: 'divider', content: 'SKILLS', id: 'skills' },
// Skills as TUI sections
@@ -90,14 +82,12 @@ export const lines: TerminalLine[] = [
// Interests
{ type: 'info', content: '(&accent,bold)▸ Interests(&)' },
{ type: 'output', content: ' ' + skills.interests.map(s => `(&muted)${s}(&)`).join(' (&muted)•(&) ') },
{ type: 'blank', content: '' },
{ type: 'divider', content: 'PROJECTS', id: 'projects' },
{ type: 'blank', content: '' },
// Featured projects with buttons
...projects.filter(p => p.featured).flatMap(project => [
{ type: 'header' as const, content: `(&primary,bold)${project.name}(&)` },
{ type: 'header' as const, content: `(&bold)${project.name}(&)` },
{ type: 'output' as const, content: `(&muted)${project.description}(&)` },
{ type: 'info' as const, content: `(&info)TechStack: (&primary)${project.tech.join(', ')}(&)` },
...(project.github ? [{

3
src/lib/pages/projects.ts
View File

@@ -9,7 +9,6 @@ const featuredCount = sortedCards.filter(c => c.featured).length;
export const lines: TerminalLine[] = [
{ type: 'command', content: 'ls ~/projects --grid' },
{ type: 'divider', content: 'PROJECTS' },
{ type: 'blank', content: '' },
...projects.filter(p => p.featured).flatMap(project => [
{ type: 'header' as const, content: `(&bold)${project.name}(&)` },
{ type: 'output' as const, content: `(&muted)${project.description}(&)` },
@@ -50,14 +49,12 @@ export const lines: TerminalLine[] = [
}] : []),
{ type: 'blank' as const, content: '' }
]),
{ type: 'blank', content: '' },
{ type: 'divider', content: 'HACKATHONS' },
{ type: 'command', content: 'ls ~/hackathons --grid' },
{ type: 'blank', content: '' },
{ type: 'header', content: `Hackathon Journey` },
{ type: 'output', content: `(&muted)Total:(&) (&primary)${totalHackathons}(&) (&muted)| Awards:(&) (&yellow)${totalAwards}(&) (&muted)| Featured:(&) (&accent)${featuredCount}(&)` },
{ type: 'blank', content: '' },
{ type: 'blank', content: '' },
{ type: 'cardgrid', content: '', cards: sortedCards },
{ type: 'blank', content: '' },
{ type: 'success', content: `(&success)Ready for the next hackathon! 🚀(&)` },

11
src/lib/stores/theme.ts
View File

@@ -150,6 +150,17 @@ export function setColorTheme(theme: ColorTheme) {
colorTheme.set(theme);
}
export function getThemeIcon(theme: ColorTheme): string {
switch (theme) {
case 'arch': return 'mdi:arch';
case 'catppuccin': return 'solar:cat-bold';
case 'wintry': return 'mdi:snowflake';
case 'rose': return 'mdi:flower-tulip';
case 'cerberus': return 'iconoir:wolf-solid';
default: return 'mdi:palette';
}
}
// Generate theme options from loaded themes
export const themeOptions: { value: ColorTheme; label: string; icon: string }[] =
Object.entries(themes).map(([key, theme]) => ({