-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
32 changed files
with
362 additions
and
712 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,52 @@ | ||
<script lang="ts"> | ||
import BulletPoint from '$components/bullet-point.svelte'; | ||
// import Icon from '$components/icon.svelte'; | ||
import PortableText from '$components/portable-text/portable-text.svelte'; | ||
import type { AuthorTimelineItem } from '$types'; | ||
export let title: string | undefined, body: AuthorTimelineItem['body'], date: string; | ||
</script> | ||
|
||
<div class="item"> | ||
<div> | ||
<!-- <Icon icon="ArrowRight" class="mr-4" /> --> | ||
<BulletPoint /> | ||
<span> | ||
<h2>{title}</h2> | ||
<p>{date}</p> | ||
</span> | ||
</div> | ||
|
||
{#if body} | ||
<div class="body"> | ||
<PortableText text={body} /> | ||
</div> | ||
{/if} | ||
</div> | ||
|
||
<style lang="scss"> | ||
.item { | ||
@apply flex flex-col items-start justify-start; | ||
} | ||
h2 { | ||
@apply text-lg font-bold text-white; | ||
} | ||
div { | ||
@apply flex w-full flex-row items-center justify-start gap-x-2; | ||
span { | ||
@apply flex w-full flex-row items-center justify-between text-base; | ||
} | ||
p { | ||
@apply font-mono text-base; | ||
} | ||
} | ||
.body { | ||
@apply -mt-1 pl-8 text-base; | ||
} | ||
</style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,67 @@ | ||
<script lang="ts"> | ||
import { derived } from 'svelte/store'; | ||
import { currentLang, t } from '$i18n'; | ||
import TimelineItem from './timeline-item.svelte'; | ||
import type { AuthorTimelineItem } from '$types'; | ||
export let section: AuthorTimelineItem[]; | ||
const title = section[0].title; | ||
const dateDisplay = derived([currentLang, t], ([currentLang, t]) => { | ||
return (start: string, end: string | undefined) => { | ||
try { | ||
const startDate = new Date(start), | ||
endDate = end ? new Date(end) : undefined; | ||
if (!endDate) { | ||
return `${new Intl.DateTimeFormat(currentLang, { | ||
month: 'short', | ||
year: 'numeric' | ||
}).format(startDate)} - ${t('present')}`; | ||
} | ||
return `${new Intl.DateTimeFormat(currentLang, { | ||
month: 'short', | ||
year: 'numeric' | ||
}).format(startDate)} - ${new Intl.DateTimeFormat(currentLang, { | ||
month: 'short', | ||
year: 'numeric' | ||
}).format(endDate)}`; | ||
} catch (_) { | ||
return t('Invalid date'); | ||
} | ||
}; | ||
}); | ||
</script> | ||
|
||
<section> | ||
<h1>{title}</h1> | ||
|
||
<div> | ||
{#each section as item} | ||
<TimelineItem | ||
title={item.subtitle} | ||
body={item.body} | ||
date={$dateDisplay(item.range.start, item.range.end)} | ||
/> | ||
{/each} | ||
</div> | ||
</section> | ||
|
||
<style lang="scss"> | ||
h1 { | ||
@apply mb-3 font-code text-2xl font-bold text-white; | ||
} | ||
section { | ||
@apply my-6; | ||
div { | ||
@apply flex flex-col; | ||
} | ||
} | ||
</style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,4 +1,13 @@ | ||
<div | ||
class="mx-2 h-1 w-1 rounded-full bg-dark/80 transition-all duration-150 dark:bg-light/90 {$$props.class || | ||
''}" | ||
/> | ||
<div class={$$props.class || ''} /> | ||
|
||
<style lang="scss"> | ||
div { | ||
@apply mx-2 block h-1 w-1 flex-shrink-0 rounded-full bg-dark/80 transition-all duration-150; | ||
} | ||
:global(.dark) { | ||
div { | ||
@apply bg-light/80; | ||
} | ||
} | ||
</style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,4 +1,4 @@ | ||
<span /> | ||
<span class={$$props.class || ''} /> | ||
|
||
<style lang="scss"> | ||
span { | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.