Skip to content

Commit bce4fb1

Browse files
KodingDevKodingDev
committed
chore: nav & page cleanup
1 parent 74b9c17 commit bce4fb1

File tree

15 files changed

+185
-163
lines changed

15 files changed

+185
-163
lines changed

‎mdsvex.config.js‎

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,13 @@
11
import { defineMDSveXConfig } from 'mdsvex';
22
import rehypeSlug from 'rehype-slug';
3-
import rehypeAutolinkHeadings from 'rehype-autolink-headings';
43

54
const config = defineMDSveXConfig({
65
extensions: ['.md', '.svx'],
76
smartypants: {
87
dashes: 'oldschool',
98
},
109

11-
rehypePlugins: [
12-
rehypeSlug,
13-
[
14-
rehypeAutolinkHeadings,
15-
{
16-
behavior: 'wrap',
17-
},
18-
],
19-
],
10+
rehypePlugins: [rehypeSlug],
2011
});
2112

2213
export default config;

‎package.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,6 @@
4040
"prettier": "^2.6.2",
4141
"prettier-plugin-svelte": "^2.7.0",
4242
"prettier-plugin-tailwindcss": "^0.2.1",
43-
"rehype-autolink-headings": "^6.1.1",
4443
"rehype-slug": "^5.1.0",
4544
"sass": "^1.59.2",
4645
"svelte": "^3.44.0",

‎pnpm-lock.yaml‎

Lines changed: 0 additions & 21 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

src/components/layout/Header.svelte renamed to src/components/base/Header.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88

99
<div class="flex flex-col gap-3 {className}">
1010
<p class="text-2xl font-medium"><span class="pr-4">{emoji}</span> {title}</p>
11-
<h1 class="text-5xl font-bold leading-[1.8] sm:text-5xl sm:leading-[1.8]">
11+
<h1 class="text-3xl font-bold leading-[1.8] sm:text-5xl sm:leading-[1.8]">
1212
<slot />
1313
</h1>
1414
</div>

‎src/components/layout/DesktopNavBar.svelte‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
<script lang="ts">
2+
import { page } from '$app/stores';
3+
import { NAV_LINKS, NAV_SOCIALS } from '$lib/data/layout';
4+
import clsx from 'clsx';
5+
import { onMount } from 'svelte';
6+
import SocialButton from './SocialButton.svelte';
7+
8+
// Tweening for the indicator
9+
let visible = false;
10+
let navTween = {
11+
left: '50%',
12+
top: 0,
13+
right: '50%',
14+
};
15+
16+
// Click handler
17+
function updateLink(el: HTMLElement) {
18+
visible = true;
19+
navTween = {
20+
left: el.offsetLeft,
21+
right: el.parentElement.offsetWidth - el.offsetLeft - el.clientWidth,
22+
top: el.offsetTop + el.offsetHeight,
23+
};
24+
}
25+
26+
// Indicators
27+
let indicators: HTMLElement[] = NAV_LINKS.map(() => undefined);
28+
29+
// Recompute function
30+
function recompute() {
31+
// Find the current link
32+
const currentLink = NAV_LINKS.find((link) => link.match.test($page.url.pathname));
33+
if (!currentLink) {
34+
visible = false;
35+
return;
36+
}
37+
38+
// Handle the link click
39+
const index = NAV_LINKS.indexOf(currentLink);
40+
const indicator = indicators[index];
41+
if (!indicator) return;
42+
43+
updateLink(indicator);
44+
}
45+
46+
// Load the initial indicator
47+
onMount(recompute);
48+
page.subscribe(recompute);
49+
</script>
50+
51+
<div class="relative hidden w-fit flex-row items-center justify-end gap-4 pl-12 md:flex md:gap-12 md:pl-24">
52+
{#each NAV_LINKS as link, index}
53+
<a class="group relative text-lg font-medium text-white opacity-75" href={link.href} bind:this={indicators[index]}>
54+
{link.name}
55+
<div
56+
class={clsx(
57+
'absolute -bottom-1 left-0 h-1 w-full rounded-full bg-transparent transition-all',
58+
!link.match.test($page.url.pathname) ? 'group-hover:bg-primary-200/50' : ''
59+
)}
60+
/>
61+
</a>
62+
{/each}
63+
64+
<!-- Nav link underline -->
65+
<div
66+
class="pointer-events-none absolute h-1 rounded-full bg-primary-200/50 transition-all duration-500 {visible ? '' : 'opacity-0'}"
67+
style="left: {navTween.left}px; right: {navTween.right}px; top: {navTween.top}px;"
68+
/>
69+
</div>
70+
71+
<div class="hidden flex-grow flex-row items-center justify-end gap-4 md:flex">
72+
{#each NAV_SOCIALS as social}
73+
<SocialButton {...social} />
74+
{/each}
75+
</div>

‎src/components/layout/MobileNavBar.svelte‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<script lang="ts">
2+
let expanded = false;
3+
</script>
4+
5+
<div class="flex-grow md:hidden" />
6+
7+
<!-- Menu Button -->
8+
<div class="hover:cursor-pointer md:hidden" on:mousedown={() => (expanded = !expanded)}>
9+
<span class="icon-[mdi--menu] text-2xl text-white" />
10+
</div>
11+
12+
<!-- Mobile Navigation -->
13+
<!-- TODO: Implement -->

‎src/components/layout/NavBar.svelte‎

Lines changed: 13 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,71 +1,20 @@
11
<script lang="ts">
2-
import { page } from '$app/stores';
3-
import { onMount } from 'svelte';
4-
5-
export let links: { name: string; href: string; match: RegExp }[];
6-
7-
// Tweening for the indicator
8-
let visible = false;
9-
let navTween = {
10-
left: '50%',
11-
top: 0,
12-
right: '50%',
13-
};
14-
15-
// Click handler
16-
function updateLink(el: HTMLElement) {
17-
visible = true;
18-
navTween = {
19-
left: el.offsetLeft,
20-
right: el.parentElement.offsetWidth - el.offsetLeft - el.clientWidth,
21-
top: el.offsetTop + el.offsetHeight,
22-
};
23-
}
24-
25-
// Indicators
26-
let indicators: HTMLElement[] = links.map(() => undefined);
2+
import Image from '$components/base/Image.svelte';
3+
import { FEATURED_ARTIST } from '$lib/data/commissions';
4+
import DesktopNavBar from './DesktopNavBar.svelte';
5+
import MobileNavBar from './MobileNavBar.svelte';
276
287
// Current page checker
29-
const isCurrent = (link: (typeof links)[0]) => link.match.test($page.url.pathname);
30-
31-
// Recompute function
32-
function recompute() {
33-
// Find the current link
34-
const currentLink = links.find(isCurrent);
35-
if (!currentLink) {
36-
visible = false;
37-
return;
38-
}
39-
40-
// Handle the link click
41-
const index = links.indexOf(currentLink);
42-
const indicator = indicators[index];
43-
if (!indicator) return;
44-
45-
updateLink(indicator);
46-
}
47-
48-
// Load the initial indicator
49-
onMount(recompute);
50-
page.subscribe(recompute);
518
</script>
529

53-
<!-- TODO: Mobile nav-->
54-
<div class="relative flex w-fit flex-row items-center justify-end gap-4 pl-12 sm:justify-start md:gap-12 md:pl-24">
55-
{#each links as link, index}
56-
<a class="group relative text-lg font-medium text-white opacity-75" href={link.href} bind:this={indicators[index]}>
57-
{link.name}
58-
<div
59-
class="absolute -bottom-1 left-0 h-1 w-full rounded-full bg-transparent transition-all {!link.match.test($page.url.pathname)
60-
? 'group-hover:bg-primary-200/50'
61-
: ''}"
62-
/>
63-
</a>
64-
{/each}
10+
<div class="flex h-24 border-b border-b-white/10">
11+
<div class="my-auto flex w-full flex-row items-center">
12+
<!-- Avatar -->
13+
<Image class="aspect-square h-11 w-11 rounded-xl object-cover object-top" picture={FEATURED_ARTIST.commission.images[0]} alt="Logo" />
14+
<div class="flex-grow md:hidden" />
6515

66-
<!-- Nav link underline -->
67-
<div
68-
class="pointer-events-none absolute h-1 rounded-full bg-primary-200/50 transition-all duration-500 {visible ? '' : 'opacity-0'}"
69-
style="left: {navTween.left}px; right: {navTween.right}px; top: {navTween.top}px;"
70-
/>
16+
<!-- Navigation -->
17+
<DesktopNavBar />
18+
<MobileNavBar />
19+
</div>
7120
</div>

‎src/components/layout/SocialButton.svelte‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<script lang="ts">
2+
export let href: string;
3+
export let icon: string;
4+
export let color: string;
5+
</script>
6+
7+
<a class="flex h-11 w-11 rounded-xl border border-white/[15%] p-3 {color} group transition-all hover:border-2" {href}>
8+
<div class="m-auto transition-all group-hover:-translate-y-1">
9+
<span class="{icon} opacity-75" />
10+
</div>
11+
</a>

‎src/lib/data/layout.ts‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
/**
2+
* The navigation links for the site.
3+
*/
4+
export const NAV_LINKS: NavLink[] = [
5+
{
6+
name: 'Home',
7+
href: '/',
8+
match: /^\/$/,
9+
},
10+
{
11+
name: 'Blog',
12+
href: '/blog',
13+
match: /^\/blog/,
14+
},
15+
{
16+
name: 'Clients',
17+
href: '/clients',
18+
match: /^\/clients/,
19+
},
20+
{
21+
name: 'Art',
22+
href: '/art',
23+
match: /^\/art/,
24+
},
25+
];
26+
27+
/**
28+
* Social links for the site.
29+
*/
30+
export const NAV_SOCIALS: SocialLink[] = [
31+
{
32+
href: 'https://twitter.com/KodingDev_',
33+
icon: 'icon-[mdi--twitter]',
34+
color: 'bg-[#1E96E8]/5',
35+
},
36+
{
37+
href: 'mailto:hello@koding.dev',
38+
icon: 'icon-[material-symbols--mail-rounded]',
39+
color: 'bg-[#8439FF]/5',
40+
},
41+
{
42+
href: 'https://github.com/KodingDev',
43+
icon: 'icon-[mdi--github]',
44+
color: 'bg-[#000000]/5',
45+
},
46+
];
47+
48+
/**
49+
* Typing for the navigation links.
50+
*/
51+
export type NavLink = {
52+
name: string;
53+
href: string;
54+
match: RegExp;
55+
};
56+
57+
/**
58+
* Typing for the social links.
59+
*/
60+
export type SocialLink = {
61+
href: string;
62+
icon: string;
63+
color: string;
64+
};

0 commit comments

Comments
 (0)