edb/neuf-www
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

change news article date formatting

Browse Source
This commit is contained in:
Jonas Braathen
2024-06-21 23:57:16 +02:00
parent b51c737885
commit 9dcb543482
3 changed files with 12 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
web/src/app/aktuelt/[slug]/page.tsx
View File

@ -3,7 +3,7 @@ import { Blocks } from "@/components/blocks/Blocks";
import Image from "@/components/general/Image"; import Image from "@/components/general/Image";
import { graphql } from "@/gql"; import { graphql } from "@/gql";
import { NewsFragment } from "@/gql/graphql"; import { NewsFragment } from "@/gql/graphql";
import { compactDateFormat, formatDate } from "@/lib/date"; import { formatExtendedDateTime } from "@/lib/date";
import { notFound } from "next/navigation"; import { notFound } from "next/navigation";
export async function generateStaticParams() { export async function generateStaticParams() {
@ -67,7 +67,7 @@ export default async function Page({ params }: { params: { slug: string } }) {
)} )}
</figure> </figure>
)} )}
<p>{formatDate(news.firstPublishedAt, compactDateFormat)}</p> <p>{formatExtendedDateTime(news.firstPublishedAt, true, true)}</p>
</section> </section>
<section className="pageContent"> <section className="pageContent">
<Blocks blocks={news.body} /> <Blocks blocks={news.body} />

4
web/src/components/news/NewsItem.tsx
View File

@ -1,7 +1,7 @@
import styles from "./newsItem.module.scss"; import styles from "./newsItem.module.scss";
import Image from "../general/Image"; import Image from "../general/Image";
import { NewsFragment } from "@/lib/news"; import { NewsFragment } from "@/lib/news";
import { formatDate, compactDateFormat } from "@/lib/date"; import { formatDate, compactDateFormat, formatExtendedDateTime } from "@/lib/date";
import Link from "next/link"; import Link from "next/link";
export const NewsItem = ({ news }: { news: NewsFragment }) => { export const NewsItem = ({ news }: { news: NewsFragment }) => {
@ -22,7 +22,7 @@ export const NewsItem = ({ news }: { news: NewsFragment }) => {
</div> </div>
<div className={styles.text}> <div className={styles.text}>
<p className={styles.date}> <p className={styles.date}>
{formatDate(news.firstPublishedAt, compactDateFormat)} {formatExtendedDateTime(news.firstPublishedAt, true, true)}
</p> </p>
<h2 className={styles.title}>{news.title}</h2> <h2 className={styles.title}>{news.title}</h2>
<p className={styles.lead}>{news.excerpt}</p> <p className={styles.lead}>{news.excerpt}</p>

13
web/src/lib/date.ts
View File

@ -24,15 +24,18 @@ export function formatYearMonth(yearMonth: string) {
return formatDate(parsed, "MMMM yyyy"); return formatDate(parsed, "MMMM yyyy");
} }
export function formatExtendedDateTime(date: Date | string | number, dateOnly: boolean = false) { export function formatExtendedDateTime(
date: Date | string | number,
dateOnly: boolean = false,
alwaysIncludeYear: boolean = false
) {
// wide date with weekday and month name // wide date with weekday and month name
// year included if not current year // year included if not current year
const parsed = toLocalTime(date); const parsed = toLocalTime(date);
const timePart = dateOnly ? "" : " 'kl.' HH:mm"; const timePart = dateOnly ? "" : " 'kl.' HH:mm";
if (parsed.getFullYear === new Date().getFullYear) { const isCurrentYear = parsed.getFullYear === new Date().getFullYear;
return formatDate(parsed, `EEEE d. MMMM${timePart}`); const yearPart = isCurrentYear && !alwaysIncludeYear ? "" : " yyyy";
} return formatDate(parsed, `EEEE d. MMMM${yearPart}${timePart}`);
return formatDate(parsed, `EEEE d. MMMM yyyy${timePart}`);
} }
export function isTodayOrFuture( export function isTodayOrFuture(