diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/organisms/KeywordsList.astro | 11 | ||||
| -rw-r--r-- | src/components/organisms/RelativeTime.astro | 19 | ||||
| -rw-r--r-- | src/components/templates/MicroBlog.astro | 66 | ||||
| -rw-r--r-- | src/components/templates/PrevNextNav.astro | 13 |
4 files changed, 88 insertions, 21 deletions
diff --git a/src/components/organisms/KeywordsList.astro b/src/components/organisms/KeywordsList.astro index d3b9e7f..44c5641 100644 --- a/src/components/organisms/KeywordsList.astro +++ b/src/components/organisms/KeywordsList.astro @@ -7,7 +7,13 @@ const { keywords } = Astro.props; --- <p> - {keywords.map((x) => <span>#<b itemprop="keywords">{x}</b></span>)} + { + keywords.map((x) => ( + <span><a href={`/blog/keywords/${x}`}>#<b itemprop="keywords">{ + x + }</b></a></span> + )) + } </p> <style> @@ -16,8 +22,9 @@ const { keywords } = Astro.props; flex-direction: row-reverse; flex-wrap: wrap; gap: calc(var(--size-0) * 1em); + margin-block: calc(var(--size-0) * 1em); - & > * { + & > * > * { border-radius: calc(infinity * 1px); background-color: color-mix( in srgb, diff --git a/src/components/organisms/RelativeTime.astro b/src/components/organisms/RelativeTime.astro new file mode 100644 index 0000000..13d531d --- /dev/null +++ b/src/components/organisms/RelativeTime.astro @@ -0,0 +1,19 @@ +--- +import type { HTMLAttributes } from "astro/types"; +import { getRelativeTimeUnit } from "@utils/datetime"; + +interface Props { + date: Date; + locales: Intl.LocalesArgument; + options: Intl.RelativeTimeFormatOptions; + itemprop: HTMLAttributes<"time">["itemprop"]; +} + +const { date, locales, options } = Astro.props; + +const format = new Intl.RelativeTimeFormat(locales, options).format( + ...getRelativeTimeUnit(date), +); +--- + +{format} diff --git a/src/components/templates/MicroBlog.astro b/src/components/templates/MicroBlog.astro index 88321dc..713e7eb 100644 --- a/src/components/templates/MicroBlog.astro +++ b/src/components/templates/MicroBlog.astro @@ -1,12 +1,17 @@ --- import Date from "@components/organisms/Date.astro"; +import RelativeTime from "@components/organisms/RelativeTime.astro"; import KeywordsList from "@components/organisms/KeywordsList.astro"; import { getFirstUserID, getLastUpdate } from "@lib/collection/helpers"; -import type { Micro, MicroEntry } from "@lib/collection/schemas"; +import type { MicroEntry } from "@lib/collection/schemas"; +import { getRelativeTimeUnit } from "@utils/datetime"; -interface Props extends MicroEntry {} +interface Props { + micro: MicroEntry; + seeAll?: boolean; +} -const micro = Astro.props; +const { micro, seeAll = false } = Astro.props; const { id, data, rendered } = micro; const { title, lang, keywords } = data; const date = getLastUpdate(micro); @@ -20,6 +25,7 @@ const little = ((first?.[0] ?? "") + (last?.[0] ?? "")).slice(0, 2); itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting" + style={`--rows: ${seeAll ? 3 : 2};`} > <header> <h3 class="title"> @@ -36,35 +42,49 @@ const little = ((first?.[0] ?? "") + (last?.[0] ?? "")).slice(0, 2); itemscope itemtype="https://schema.org/Person" ><span itemprop="alternateName">{first} {last}</span></span> - <span class="small">· <Date + <span class="small" + >· <Date {date} locales={lang} options={{ month: "short", day: "numeric" }} itemprop="dateModified" - /></span> + /> (<RelativeTime + {date} + locales={lang} + options={{ + style: "short", + numeric: "auto", + }} + />)</span> </div> + <span class="lang mute">{lang}</span> </header> <div class="content small"> <div {lang} itemprop="articleBody text"> <Fragment set:html={rendered?.html} /> </div> <footer> + <a href={`/blog/read/${id}`}>Ver mais...</a> <div class="keywords"><KeywordsList {keywords} /></div> </footer> </div> - <aside> - <small><a href="/blog/micro/1">Ver todos os microposts</a></small> - </aside> + { + seeAll && ( + <aside> + <small><a href="/blog/micro/1">Ver todos os microposts</a></small> + </aside> + ) + } </article> <style> article { - border-radius: calc(var(--size-1) * 1em); + --rows: 2 border-radius: calc(var(--size-1) * 1em); box-shadow: 0 0 calc(var(--size-1) * 1em) var(--color-light); padding: calc(var(--size-4) * 1em); display: grid; - grid-template-rows: repeat(3, auto); - grid-template-columns: calc(var(--size-9) * 1em) auto; + grid-template-rows: repeat(var(--rows), auto); + grid-template-columns: calc(var(--size-9) * 1em) repeat(2, auto); gap: calc(var(--size-1) * 1em); & > header { @@ -73,7 +93,7 @@ const little = ((first?.[0] ?? "") + (last?.[0] ?? "")).slice(0, 2); & > aside { grid-row: 3 / 4; - grid-column: 1 / 3; + grid-column: 1 / 4; border-block-start: 1px solid #e7e7e7; padding-block-start: calc(var(--size-1) * 1em); } @@ -93,7 +113,8 @@ const little = ((first?.[0] ?? "") + (last?.[0] ?? "")).slice(0, 2); color: #fff; font-weight: 950; font-size: smaller; - border-radius: calc(infinity * 1px); + /* border-radius: calc(infinity * 1px); */ + border-radius: calc(var(--size-3) * 1em); text-align: center; text-transform: uppercase; } @@ -102,15 +123,32 @@ const little = ((first?.[0] ?? "") + (last?.[0] ?? "")).slice(0, 2); .title { display: none; } + + .lang { + grid-row: 1/2; + grid-column: 3 / 4; + display: flex; + justify-content: flex-end; + align-items: baseline; + } + .content { grid-row: 2/3; - grid-column: 2 / 3; + grid-column: 2 / 4; & > [lang] > :global(*:first-child) { margin-block-start: 0; } & > [lang] > :global(*:last-child) { margin-block-end: 0; } + + & > footer { + display: flex; + gap: 1em; + flex-wrap: wrap; + justify-content: space-between; + align-items: baseline; + } } .keywords { diff --git a/src/components/templates/PrevNextNav.astro b/src/components/templates/PrevNextNav.astro index fe8bd8d..f60a4cd 100644 --- a/src/components/templates/PrevNextNav.astro +++ b/src/components/templates/PrevNextNav.astro @@ -1,21 +1,23 @@ --- interface Props { + first?: string | URL; previous?: string | URL; next?: string | URL; + last?: string | URL; label?: string; } -const { next, previous, label } = Astro.props; +const { first, next, previous, last, label } = Astro.props; --- { - (next || previous) && ( + (first || next || previous || last) && ( <nav> + {first && <p><a href={Astro.props.first}>Primeiro</a></p>} { previous && ( <p> - < <a rel="prev" href={`/blog/${Astro.props.previous}`} - >Anterior</a> + < <a rel="prev" href={Astro.props.previous}>Anterior</a> </p> ) } @@ -23,10 +25,11 @@ const { next, previous, label } = Astro.props; { next && ( <p> - <a rel="next" href={`/blog/${Astro.props.next}`}>Próximo</a> > + <a rel="next" href={Astro.props.next}>Próximo</a> > </p> ) } + {last && <p><a href={Astro.props.last}>Último</a></p>} </nav> ) } |