add news

dnscms/associations/models.py

@@ -1,4 +1,5 @@
 from django.db import models
+from grapple.helpers import register_singular_query_field
 from grapple.models import (
     GraphQLImage,
     GraphQLRichText,
@@ -12,6 +13,7 @@ from wagtail.models import Page
 from dnscms.fields import CommonStreamField
 
 
+@register_singular_query_field("associationIndex")
 class AssociationIndex(Page):
     max_count = 1
     subpage_types = ["associations.AssociationPage"]

dnscms/dnscms/settings/base.py

@@ -25,12 +25,15 @@ BASE_DIR = os.path.dirname(PROJECT_DIR)
 
 INSTALLED_APPS = [
     "dnscms",
+    # adding more cms apps? may want to add it to GRAPPLE as well
     "images",
-    "home",
     "generic",
+    "home",
     "associations",
     "events",
     "venues",
+    "news",
+    # end cms apps
     "grapple",
     "graphene_django",
     "wagtail.contrib.forms",
@@ -160,6 +163,8 @@ MEDIA_URL = "/media/"
 # Wagtail settings
 
 WAGTAIL_SITE_NAME = "dnscms"
+WAGTAIL_ALLOW_UNICODE_SLUGS = False
+
 WAGTAILIMAGES_IMAGE_MODEL = "images.CustomImage"
 
 # Search
@@ -181,12 +186,13 @@ BASE_URL = "http://example.com"
 GRAPHENE = {"SCHEMA": "grapple.schema.schema"}
 GRAPPLE = {
     "APPS": [
-        "home",
+        "images",
         "generic",
+        "home",
         "associations",
         "events",
         "venues",
-        "images",
+        "news",
     ],
     "EXPOSE_GRAPHIQL": True,
 }

dnscms/dnscms/wagtail_hooks.py

@@ -5,6 +5,7 @@ from wagtail.admin.menu import MenuItem
 
 from associations.models import AssociationIndex
 from events.models import EventIndex
+from news.models import NewsIndex
 
 
 @hooks.register("register_rich_text_features")
@@ -30,6 +31,15 @@ def register_associations_menu_item():
     return MenuItem("Foreninger", associations_url, icon_name="group", order=2)
 
 
+@hooks.register("register_admin_menu_item")
+def register_associations_menu_item():
+    page = NewsIndex.objects.first()
+    news_url = "#"
+    if page:
+        news_url = reverse("wagtailadmin_explore", args=(quote(page.pk),))
+    return MenuItem("Nyheter", news_url, icon_name="info-circle", order=3)
+
+
 @hooks.register("construct_page_action_menu")
 def make_publish_default_action(menu_items, request, context):
     for index, item in enumerate(menu_items):

dnscms/news/apps.py

@@ -0,0 +1,6 @@
+from django.apps import AppConfig
+
+
+class NewsConfig(AppConfig):
+    default_auto_field = "django.db.models.BigAutoField"
+    name = "news"

dnscms/news/migrations/0001_initial.py

@@ -0,0 +1,42 @@
+# Generated by Django 5.0.6 on 2024-05-20 21:14
+
+import django.db.models.deletion
+import wagtail.blocks
+import wagtail.fields
+import wagtail.images.blocks
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    initial = True
+
+    dependencies = [
+        ('wagtailcore', '0093_uploadedfile'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='NewsIndex',
+            fields=[
+                ('page_ptr', models.OneToOneField(auto_created=True, on_delete=django.db.models.deletion.CASCADE, parent_link=True, primary_key=True, serialize=False, to='wagtailcore.page')),
+                ('lead', wagtail.fields.RichTextField()),
+            ],
+            options={
+                'abstract': False,
+            },
+            bases=('wagtailcore.page',),
+        ),
+        migrations.CreateModel(
+            name='NewsPage',
+            fields=[
+                ('page_ptr', models.OneToOneField(auto_created=True, on_delete=django.db.models.deletion.CASCADE, parent_link=True, primary_key=True, serialize=False, to='wagtailcore.page')),
+                ('body', wagtail.fields.StreamField([('paragraph', wagtail.blocks.RichTextBlock(label='Rik tekst')), ('image', wagtail.blocks.StructBlock([('image', wagtail.images.blocks.ImageChooserBlock(label='Bilde')), ('image_format', wagtail.blocks.ChoiceBlock(choices=[('fullwidth', 'Fullbredde'), ('bleed', 'Utfallende'), ('original', 'Uendret størrelse')], icon='cup', label='Bildeformat')), ('text', wagtail.blocks.CharBlock(label='Tekst', max_length=512, required=False))], label='Bilde')), ('image_slider', wagtail.blocks.StructBlock([('images', wagtail.blocks.ListBlock(wagtail.blocks.StructBlock([('image', wagtail.images.blocks.ImageChooserBlock(label='Bilde')), ('text', wagtail.blocks.CharBlock(label='Tekst', max_length=512, required=False))]), label='Bilder', min_num=1))], label='Bildegalleri'))], default=[('paragraph', '')])),
+                ('excerpt', models.TextField(max_length=512)),
+            ],
+            options={
+                'abstract': False,
+            },
+            bases=('wagtailcore.page',),
+        ),
+    ]

dnscms/news/migrations/0002_alter_newsindex_lead.py

@@ -0,0 +1,19 @@
+# Generated by Django 5.0.6 on 2024-05-20 21:21
+
+import wagtail.fields
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('news', '0001_initial'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='newsindex',
+            name='lead',
+            field=wagtail.fields.RichTextField(blank=True),
+        ),
+    ]

dnscms/news/migrations/0003_newspage_featured_image.py

@@ -0,0 +1,20 @@
+# Generated by Django 5.0.6 on 2024-05-20 21:24
+
+import django.db.models.deletion
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('images', '0002_alter_customimage_options_alter_customimage_alt'),
+        ('news', '0002_alter_newsindex_lead'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='newspage',
+            name='featured_image',
+            field=models.ForeignKey(blank=True, help_text='Velg et bilde til bruk i på forsiden og andre visningsflater. Bør være et bilde eller en illustrasjon uten tekst.', null=True, on_delete=django.db.models.deletion.SET_NULL, related_name='+', to='images.customimage'),
+        ),
+    ]

dnscms/news/models.py

@@ -0,0 +1,60 @@
+from django.db import models
+from grapple.helpers import register_singular_query_field
+from grapple.models import GraphQLImage, GraphQLRichText, GraphQLStreamfield, GraphQLString
+from wagtail.admin.panels import FieldPanel
+from wagtail.fields import RichTextField
+from wagtail.models import Page
+
+from dnscms.fields import CommonStreamField
+
+
+@register_singular_query_field("newsIndex")
+class NewsIndex(Page):
+    max_count = 1
+    subpage_types = ["news.NewsPage"]
+
+    lead = RichTextField(features=["bold", "italic", "link"], blank=True)
+
+    content_panels = Page.content_panels + [
+        FieldPanel("lead", heading="Leder"),
+    ]
+
+    graphql_fields = [
+        GraphQLRichText("lead"),
+    ]
+
+
+class NewsPage(Page):
+    subpage_types = []
+    parent_page_types = ["news.NewsIndex"]
+    show_in_menus = False
+
+    excerpt = models.TextField(max_length=512, blank=False)
+    body = CommonStreamField
+    featured_image = models.ForeignKey(
+        "images.CustomImage",
+        null=True,
+        blank=True,
+        on_delete=models.SET_NULL,
+        related_name="+",
+        help_text=(
+            "Velg et bilde til bruk i på forsiden og andre visningsflater. "
+            "Bør være et bilde eller en illustrasjon uten tekst."
+        ),
+    )
+
+    content_panels = Page.content_panels + [
+        FieldPanel(
+            "excerpt",
+            heading="Utdrag",
+            help_text="En veldig kort oppsummering av innholdet nedenfor. Brukes på forsiden og i artikkeloversikten.",
+        ),
+        FieldPanel("featured_image"),
+        FieldPanel("body"),
+    ]
+
+    graphql_fields = [
+        GraphQLString("excerpt"),
+        GraphQLStreamfield("body"),
+        GraphQLImage("featured_image"),
+    ]

web/src/app/aktuelt/[slug]/page.tsx

@@ -0,0 +1,68 @@
+import { graphql } from "@/gql";
+import { NewsFragment } from "@/gql/graphql";
+import { getClient } from "@/app/client";
+import { Blocks } from "@/components/blocks/Blocks";
+import Image from "@/components/general/Image";
+
+export async function generateStaticParams() {
+  const allNewsSlugsQuery = graphql(`
+    query allNewsSlugs {
+      pages(contentType: "news.NewsPage") {
+        id
+        slug
+      }
+    }
+  `);
+  const { data, error } = await getClient().query(allNewsSlugsQuery, {});
+
+  if (data === undefined || error) {
+    throw new Error("failed to generate static params");
+  }
+
+  return data?.pages.map((page: any) => ({
+    slug: page.slug,
+  }));
+}
+
+export default async function Page({ params }: { params: { slug: string } }) {
+  const newsBySlugQuery = graphql(`
+    query newsBySlug($slug: String!) {
+      news: page(contentType: "news.NewsPage", slug: $slug) {
+        ... on NewsPage {
+          ...News
+        }
+      }
+    }
+  `);
+
+
+  const { data, error } = await getClient().query(newsBySlugQuery, {
+    slug: params.slug,
+  });
+
+  const news = (data?.news ?? {}) as NewsFragment;
+  const featuredImage: any = news.featuredImage
+
+console.log(data)
+console.log('error', error)
+
+  return (
+    <main className="site-main" id="main">
+      <section className="page-header">
+        <h1>{news.title}</h1>
+        {featuredImage && (
+          <Image
+            src={featuredImage.url}
+            alt={featuredImage.alt}
+            width={featuredImage.width}
+            height={featuredImage.height}
+            sizes="100vw"
+          />
+        )}
+      </section>
+      <section className="page-content">
+        <Blocks blocks={news.body} />
+      </section>
+    </main>
+  );
+}

web/src/app/aktuelt/page.tsx

@@ -1,15 +1,19 @@
 import { graphql } from "@/gql";
-//import { NewsFragment } from "@/gql/graphql";
 import { getClient } from "@/app/client";
 import { NewsList } from "@/components/news/NewsList";
 import Link from "next/link";
 import { PageHeader } from "@/components/general/PageHeader";
+import { newsQuery, NewsFragment, NewsIndexFragment } from "@/lib/news";
 
 export default async function Page() {
+  const { data, error } = await getClient().query(newsQuery, {});
+  const news = (data?.news ?? []) as NewsFragment[];
+  const index = (data?.index ?? []) as NewsIndexFragment;
+
   return (
     <main className="site-main" id="main">
-      <PageHeader heading="Siste nytt" />
+      <PageHeader heading={index.title} lead={index.lead} />
-      <NewsList />
+      <NewsList news={news} />
     </main>
   );
 }

web/src/app/foreninger/page.tsx

@@ -41,10 +41,7 @@ const AssociationFragmentDefinition = graphql(`
 export default async function Page() {
   const allAssociationsQuery = graphql(`
     query allAssociations {
-      index: page(
+      index: associationIndex {
-        contentType: "associations.AssociationIndex"
-        urlPath: "/home/foreninger/"
-      ) {
         ... on AssociationIndex {
           ...AssociationIndex
         }

web/src/app/page.tsx

@@ -1,5 +1,7 @@
 import { graphql } from "@/gql";
-import { EventFragment, HomeFragment } from "@/gql/graphql";
+import { EventFragment } from "@/lib/event";
+import { NewsFragment } from "@/lib/news";
+import { HomeFragment } from "@/gql/graphql";
 import { getClient } from "@/app/client";
 import { FeaturedEvents } from "@/components/events/FeaturedEvents";
 import { NewsList } from "@/components/news/NewsList";
@@ -34,11 +36,17 @@ export default async function Home() {
           ...Home
         }
       }
+      news: pages(contentType: "news.newsPage", limit: 3) {
+        ... on NewsPage {
+          ...News
+        }
+      }
     }
   `);
   const { data, error } = await getClient().query(homeQuery, {});
-  const events = (data?.events?.futureEvents ?? []) as EventFragment[];
   const home = (data?.home ?? []) as HomeFragment;
+  const events = (data?.events?.futureEvents ?? []) as EventFragment[];
+  const news = (data?.news ?? []) as NewsFragment[];
 
   const featuredEventIds = home.featuredEvents.map((x) => x.id);
   const featuredEvents = [
@@ -50,7 +58,7 @@ export default async function Home() {
     <main className="site-main index" id="main">
       <FeaturedEvents events={featuredEvents} />
       <UpcomingEvents events={events} />
-      <NewsList heading="Siste nytt" limit={3} featured />
+      <NewsList heading="Siste nytt" limit={3} featured news={news} />
       <blockquote>«Hvor Glæden hersker, er alltid Fest»</blockquote>
       <IconListBlock />
       <FeaturedBlock />

web/src/components/events/EventItem.tsx

@@ -8,7 +8,7 @@ import {
   EventFragment,
   getClosestOccurrence,
 } from "@/lib/event";
-import { toLocalTime, formatDate, commonDateFormat } from "@/lib/date";
+import { toLocalTime, formatDate, commonDateTimeFormat } from "@/lib/date";
 
 export const EventItem = ({
   event,
@@ -46,11 +46,11 @@ export const EventItem = ({
           <p className={styles.details}>
             {numOccurrences === 1 &&
               nextOccurrence?.start &&
-              formatDate(nextOccurrence.start, commonDateFormat)}
+              formatDate(nextOccurrence.start, commonDateTimeFormat)}
             {numOccurrences > 1 && nextOccurrence?.start && (
               <span>
                 <em>Neste:</em>{" "}
-                {formatDate(nextOccurrence.start, commonDateFormat)}
+                {formatDate(nextOccurrence.start, commonDateTimeFormat)}
               </span>
             )}
           </p>

web/src/components/general/PageHeader.tsx

@@ -10,7 +10,7 @@ export const PageHeader = ({
   return (
     <div className={styles.pageHeader}>
       <h1 className={styles.title}>{heading}</h1>
-      <p className="lead">{lead}</p>
+      {lead && <p className="lead">{lead}</p>}
     </div>
   );
 };

web/src/components/news/NewsItem.tsx

@@ -1,23 +1,34 @@
 import styles from "./newsItem.module.scss";
-import Link from "next/link";
 import Image from "../general/Image";
+import { NewsFragment } from "@/lib/news";
+import { formatDate, commonDateFormat } from "@/lib/date";
+import Link from "next/link";
+
+export const NewsItem = ({ news }: { news: NewsFragment }) => {
+  const featuredImage: any = news.featuredImage;
 
-export const NewsItem = () => {
   return (
-    <li className={`${styles.newsItem} linkItem`}>
+    <Link href={`/aktuelt/${news.slug}`}>
-      <div className={styles.image}></div>
+      <li className={`${styles.newsItem} linkItem`}>
-      <div className={styles.text}>
+        <div className={styles.image}>
-        <p className={styles.date}>Publiseringsdato</p>
+          {featuredImage && (
-        <h2 className={styles.title}>Nyhetsartikkel</h2>
+            <Image
-        <p className={styles.lead}>
+              src={featuredImage.url}
-          Sed sodales nunc quis sapien malesuada, a faucibus turpis blandit.
+              alt={featuredImage.alt}
-          Suspendisse potenti. Sed auctor enim et augue dapibus, vitae laoreet
+              width={featuredImage.width}
-          lacus vulputate. Nulla sed finibus diam.
+              height={featuredImage.height}
-        </p>
+              sizes="20vw"
-      </div>
+            />
-      {/*<Link href={`/lokaler/${venue.slug}`} className="hiddenLink">
+          )}
-        Mer om lokalet {venue.title}
+        </div>
-  </Link>*/}
+        <div className={styles.text}>
-    </li>
+          <p className={styles.date}>
+            {formatDate(news.firstPublishedAt, commonDateFormat)}
+          </p>
+          <h2 className={styles.title}>{news.title}</h2>
+          <p className={styles.lead}>{news.excerpt}</p>
+        </div>
+      </li>
+    </Link>
   );
 };

web/src/components/news/NewsList.tsx

@@ -1,38 +1,27 @@
 import { NewsItem } from "./NewsItem";
 import styles from "./newsList.module.scss";
+import { NewsFragment } from "@/lib/news";
 
 export const NewsList = ({
+  news,
   heading,
   featured,
   limit,
 }: {
+  news: NewsFragment[];
   heading?: string;
   featured?: boolean;
   limit?: number;
 }) => {
+  const filteredNews = limit ? news.slice(0, limit) : news;
+
   return (
     <section className={styles.newsWrapper}>
       {heading && <h2 className="suphead">{heading}</h2>}
       <ul className={`${styles.newsList} ${featured && styles.featured}`}>
-        {limit === 3 ? (
+        {filteredNews.map((singleNews) => (
-          <>
+          <NewsItem key={singleNews.id} news={singleNews} />
-            <NewsItem />
+        ))}
-            <NewsItem />
-            <NewsItem />
-          </>
-        ) : (
-          <>
-            <NewsItem />
-            <NewsItem />
-            <NewsItem />
-            <NewsItem />
-            <NewsItem />
-            <NewsItem />
-            <NewsItem />
-            <NewsItem />
-            <NewsItem />
-          </>
-        )}
       </ul>
     </section>
   );

web/src/gql/gql.ts

@@ -16,23 +16,28 @@ const documents = {
     "\n  fragment Generic on GenericPage {\n    __typename\n    id\n    urlPath\n    title\n    body {\n      ...Blocks\n    }\n  }\n": types.GenericFragmentDoc,
     "\n    query allGenericSlugs {\n      pages(contentType: \"generic.GenericPage\") {\n        id\n        urlPath\n      }\n    }\n  ": types.AllGenericSlugsDocument,
     "\n    query genericPageByUrl($urlPath: String!) {\n      page: page(contentType: \"generic.GenericPage\", urlPath: $urlPath) {\n        ... on GenericPage {\n          ...Generic\n        }\n      }\n    }\n  ": types.GenericPageByUrlDocument,
+    "\n    query allNewsSlugs {\n      pages(contentType: \"news.NewsPage\") {\n        id\n        slug\n      }\n    }\n  ": types.AllNewsSlugsDocument,
+    "\n    query newsBySlug($slug: String!) {\n      news: page(contentType: \"news.NewsPage\", slug: $slug) {\n        ... on NewsPage {\n          ...News\n        }\n      }\n    }\n  ": types.NewsBySlugDocument,
     "\n    query allEventSlugs {\n      pages(contentType: \"events.EventPage\") {\n        id\n        slug\n      }\n    }\n  ": types.AllEventSlugsDocument,
     "\n    query eventBySlug($slug: String!) {\n      event: page(contentType: \"events.EventPage\", slug: $slug) {\n        ... on EventPage {\n          ...Event\n        }\n      }\n    }\n  ": types.EventBySlugDocument,
     "\n    query allAssociationSlugs {\n      pages(contentType: \"associations.AssociationPage\") {\n        id\n        slug\n      }\n    }\n  ": types.AllAssociationSlugsDocument,
     "\n    query associationBySlug($slug: String!) {\n      association: page(\n        contentType: \"associations.AssociationPage\"\n        slug: $slug\n      ) {\n        ... on AssociationPage {\n          ...Association\n        }\n      }\n    }\n  ": types.AssociationBySlugDocument,
-    "\n  fragment AssociationIndex on AssociationIndex {\n    ... on AssociationIndex {\n      title\n      lead\n      body {\n        id\n        blockType\n        field\n        ... on RichTextBlock {\n          rawValue\n          value\n        }\n      }\n    }\n  }\n": types.AssociationIndexFragmentDoc,
+    "\n  fragment AssociationIndex on AssociationIndex {\n    ... on AssociationIndex {\n      title\n      lead\n      body {\n        ...Blocks\n      }\n    }\n  }\n": types.AssociationIndexFragmentDoc,
-    "\n  fragment Association on AssociationPage {\n    __typename\n    id\n    slug\n    title\n    excerpt\n    body {\n      id\n      blockType\n      field\n      ... on RichTextBlock {\n        rawValue\n        value\n      }\n    }\n    logo {\n      url\n      width\n      height\n    }\n    associationType\n    websiteUrl\n  }\n": types.AssociationFragmentDoc,
+    "\n  fragment Association on AssociationPage {\n    __typename\n    id\n    slug\n    title\n    excerpt\n    body {\n      ...Blocks\n    }\n    logo {\n      url\n      width\n      height\n    }\n    associationType\n    websiteUrl\n  }\n": types.AssociationFragmentDoc,
-    "\n    query allAssociations {\n      index: page(\n        contentType: \"associations.AssociationIndex\"\n        urlPath: \"/home/foreninger/\"\n      ) {\n        ... on AssociationIndex {\n          ...AssociationIndex\n        }\n      }\n      associations: pages(contentType: \"associations.AssociationPage\") {\n        ... on AssociationPage {\n          ...Association\n        }\n      }\n    }\n  ": types.AllAssociationsDocument,
+    "\n    query allAssociations {\n      index: associationIndex {\n        ... on AssociationIndex {\n          ...AssociationIndex\n        }\n      }\n      associations: pages(contentType: \"associations.AssociationPage\") {\n        ... on AssociationPage {\n          ...Association\n        }\n      }\n    }\n  ": types.AllAssociationsDocument,
     "\n    query allVenueSlugs {\n      pages(contentType: \"venues.VenuePage\") {\n        id\n        slug\n      }\n    }\n  ": types.AllVenueSlugsDocument,
     "\n    query venueBySlug($slug: String!) {\n      venue: page(contentType: \"venues.VenuePage\", slug: $slug) {\n        ... on VenuePage {\n          ...Venue\n        }\n      }\n    }\n  ": types.VenueBySlugDocument,
-    "\n  fragment Venue on VenuePage {\n    __typename\n    id\n    slug\n    title\n    body {\n      id\n      blockType\n      field\n      ... on RichTextBlock {\n        rawValue\n        value\n      }\n    }\n    featuredImage {\n      ...Image\n    }\n    showAsBookable\n    floor\n    preposition\n    capabilityAudio\n    capabilityAudioVideo\n    capabilityBar\n    capabilityLighting\n    capacityLegal\n    capacityStanding\n    capacitySitting\n  }\n": types.VenueFragmentDoc,
+    "\n  fragment Venue on VenuePage {\n    __typename\n    id\n    slug\n    title\n    body {\n      ...Blocks\n    }\n    featuredImage {\n      ...Image\n    }\n    showAsBookable\n    floor\n    preposition\n    capabilityAudio\n    capabilityAudioVideo\n    capabilityBar\n    capabilityLighting\n    capacityLegal\n    capacityStanding\n    capacitySitting\n  }\n": types.VenueFragmentDoc,
     "\n    query allVenues {\n      venues: pages(contentType: \"venues.VenuePage\") {\n        ... on VenuePage {\n          ...Venue\n        }\n      }\n    }\n  ": types.AllVenuesDocument,
     "\n  fragment Home on HomePage {\n    ... on HomePage {\n      featuredEvents {\n        id\n      }\n    }\n  }\n": types.HomeFragmentDoc,
-    "\n    query home {\n      events: eventIndex {\n        ... on EventIndex {\n          futureEvents {\n            ... on EventPage {\n              ...Event\n            }\n          }\n        }\n      }\n      home: page(contentType: \"home.HomePage\", urlPath: \"/home/\") {\n        ... on HomePage {\n          ...Home\n        }\n      }\n    }\n  ": types.HomeDocument,
+    "\n    query home {\n      events: eventIndex {\n        ... on EventIndex {\n          futureEvents {\n            ... on EventPage {\n              ...Event\n            }\n          }\n        }\n      }\n      home: page(contentType: \"home.HomePage\", urlPath: \"/home/\") {\n        ... on HomePage {\n          ...Home\n        }\n      }\n      news: pages(contentType: \"news.newsPage\", limit: 3) {\n        ... on NewsPage {\n          ...News\n        }\n      }\n    }\n  ": types.HomeDocument,
     "\n  fragment Blocks on StreamFieldInterface {\n    id\n    blockType\n    field\n    ... on RichTextBlock {\n      rawValue\n      value\n    }\n    ... on ImageWithTextBlock {\n      image {\n        ...Image\n      }\n      imageFormat\n      text\n    }\n    ... on ImageSliderBlock {\n      images {\n        ... on ImageSliderItemBlock {\n          image {\n            ...Image\n          }\n          text\n        }\n      }\n    }\n  }\n": types.BlocksFragmentDoc,
     "\n  fragment Image on CustomImage {\n    id\n    url\n    width\n    height\n    alt\n    attribution\n  }\n": types.ImageFragmentDoc,
     "\n  fragment Event on EventPage {\n    __typename\n    id\n    slug\n    title\n    body {\n      id\n      blockType\n      field\n      ... on RichTextBlock {\n        rawValue\n        value\n      }\n    }\n    featuredImage {\n      ...Image\n    }\n    facebookUrl\n    ticketUrl\n    priceRegular\n    priceMember\n    priceStudent\n    categories {\n      ... on EventCategory {\n        name\n        slug\n      }\n    }\n    occurrences {\n      ... on EventOccurrence {\n        __typename\n        id\n        start\n        end\n        venue {\n          __typename\n          id\n          slug\n          title\n        }\n      }\n    }\n  }\n": types.EventFragmentDoc,
     "\n  query futureEvents {\n    events: eventIndex {\n      ... on EventIndex {\n        futureEvents {\n          ... on EventPage {\n            ...Event\n          }\n        }\n      }\n    }\n    eventCategories: eventCategories {\n      ... on EventCategory {\n        name\n        slug\n        showInFilters\n      }\n    }\n  }\n": types.FutureEventsDocument,
+    "\n  fragment News on NewsPage {\n    __typename\n    id\n    slug\n    title\n    firstPublishedAt\n    excerpt\n    featuredImage {\n      ...Image\n    }\n    body {\n      ...Blocks\n    }\n  }\n": types.NewsFragmentDoc,
+    "\n  fragment NewsIndex on NewsIndex {\n    __typename\n    id\n    slug\n    title\n    lead\n  }\n": types.NewsIndexFragmentDoc,
+    "\n  query news {\n    index: newsIndex {\n      ... on NewsIndex {\n        ...NewsIndex\n      }\n    }\n    news: pages(contentType: \"news.NewsPage\") {\n      ... on NewsPage {\n        ...News\n      }\n    }\n  }\n": types.NewsDocument,
 };
 
 /**
@@ -61,6 +66,14 @@ export function graphql(source: "\n    query allGenericSlugs {\n      pages(cont
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
 export function graphql(source: "\n    query genericPageByUrl($urlPath: String!) {\n      page: page(contentType: \"generic.GenericPage\", urlPath: $urlPath) {\n        ... on GenericPage {\n          ...Generic\n        }\n      }\n    }\n  "): (typeof documents)["\n    query genericPageByUrl($urlPath: String!) {\n      page: page(contentType: \"generic.GenericPage\", urlPath: $urlPath) {\n        ... on GenericPage {\n          ...Generic\n        }\n      }\n    }\n  "];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(source: "\n    query allNewsSlugs {\n      pages(contentType: \"news.NewsPage\") {\n        id\n        slug\n      }\n    }\n  "): (typeof documents)["\n    query allNewsSlugs {\n      pages(contentType: \"news.NewsPage\") {\n        id\n        slug\n      }\n    }\n  "];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(source: "\n    query newsBySlug($slug: String!) {\n      news: page(contentType: \"news.NewsPage\", slug: $slug) {\n        ... on NewsPage {\n          ...News\n        }\n      }\n    }\n  "): (typeof documents)["\n    query newsBySlug($slug: String!) {\n      news: page(contentType: \"news.NewsPage\", slug: $slug) {\n        ... on NewsPage {\n          ...News\n        }\n      }\n    }\n  "];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
@@ -80,15 +93,15 @@ export function graphql(source: "\n    query associationBySlug($slug: String!) {
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "\n  fragment AssociationIndex on AssociationIndex {\n    ... on AssociationIndex {\n      title\n      lead\n      body {\n        id\n        blockType\n        field\n        ... on RichTextBlock {\n          rawValue\n          value\n        }\n      }\n    }\n  }\n"): (typeof documents)["\n  fragment AssociationIndex on AssociationIndex {\n    ... on AssociationIndex {\n      title\n      lead\n      body {\n        id\n        blockType\n        field\n        ... on RichTextBlock {\n          rawValue\n          value\n        }\n      }\n    }\n  }\n"];
+export function graphql(source: "\n  fragment AssociationIndex on AssociationIndex {\n    ... on AssociationIndex {\n      title\n      lead\n      body {\n        ...Blocks\n      }\n    }\n  }\n"): (typeof documents)["\n  fragment AssociationIndex on AssociationIndex {\n    ... on AssociationIndex {\n      title\n      lead\n      body {\n        ...Blocks\n      }\n    }\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "\n  fragment Association on AssociationPage {\n    __typename\n    id\n    slug\n    title\n    excerpt\n    body {\n      id\n      blockType\n      field\n      ... on RichTextBlock {\n        rawValue\n        value\n      }\n    }\n    logo {\n      url\n      width\n      height\n    }\n    associationType\n    websiteUrl\n  }\n"): (typeof documents)["\n  fragment Association on AssociationPage {\n    __typename\n    id\n    slug\n    title\n    excerpt\n    body {\n      id\n      blockType\n      field\n      ... on RichTextBlock {\n        rawValue\n        value\n      }\n    }\n    logo {\n      url\n      width\n      height\n    }\n    associationType\n    websiteUrl\n  }\n"];
+export function graphql(source: "\n  fragment Association on AssociationPage {\n    __typename\n    id\n    slug\n    title\n    excerpt\n    body {\n      ...Blocks\n    }\n    logo {\n      url\n      width\n      height\n    }\n    associationType\n    websiteUrl\n  }\n"): (typeof documents)["\n  fragment Association on AssociationPage {\n    __typename\n    id\n    slug\n    title\n    excerpt\n    body {\n      ...Blocks\n    }\n    logo {\n      url\n      width\n      height\n    }\n    associationType\n    websiteUrl\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "\n    query allAssociations {\n      index: page(\n        contentType: \"associations.AssociationIndex\"\n        urlPath: \"/home/foreninger/\"\n      ) {\n        ... on AssociationIndex {\n          ...AssociationIndex\n        }\n      }\n      associations: pages(contentType: \"associations.AssociationPage\") {\n        ... on AssociationPage {\n          ...Association\n        }\n      }\n    }\n  "): (typeof documents)["\n    query allAssociations {\n      index: page(\n        contentType: \"associations.AssociationIndex\"\n        urlPath: \"/home/foreninger/\"\n      ) {\n        ... on AssociationIndex {\n          ...AssociationIndex\n        }\n      }\n      associations: pages(contentType: \"associations.AssociationPage\") {\n        ... on AssociationPage {\n          ...Association\n        }\n      }\n    }\n  "];
+export function graphql(source: "\n    query allAssociations {\n      index: associationIndex {\n        ... on AssociationIndex {\n          ...AssociationIndex\n        }\n      }\n      associations: pages(contentType: \"associations.AssociationPage\") {\n        ... on AssociationPage {\n          ...Association\n        }\n      }\n    }\n  "): (typeof documents)["\n    query allAssociations {\n      index: associationIndex {\n        ... on AssociationIndex {\n          ...AssociationIndex\n        }\n      }\n      associations: pages(contentType: \"associations.AssociationPage\") {\n        ... on AssociationPage {\n          ...Association\n        }\n      }\n    }\n  "];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
@@ -100,7 +113,7 @@ export function graphql(source: "\n    query venueBySlug($slug: String!) {\n
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "\n  fragment Venue on VenuePage {\n    __typename\n    id\n    slug\n    title\n    body {\n      id\n      blockType\n      field\n      ... on RichTextBlock {\n        rawValue\n        value\n      }\n    }\n    featuredImage {\n      ...Image\n    }\n    showAsBookable\n    floor\n    preposition\n    capabilityAudio\n    capabilityAudioVideo\n    capabilityBar\n    capabilityLighting\n    capacityLegal\n    capacityStanding\n    capacitySitting\n  }\n"): (typeof documents)["\n  fragment Venue on VenuePage {\n    __typename\n    id\n    slug\n    title\n    body {\n      id\n      blockType\n      field\n      ... on RichTextBlock {\n        rawValue\n        value\n      }\n    }\n    featuredImage {\n      ...Image\n    }\n    showAsBookable\n    floor\n    preposition\n    capabilityAudio\n    capabilityAudioVideo\n    capabilityBar\n    capabilityLighting\n    capacityLegal\n    capacityStanding\n    capacitySitting\n  }\n"];
+export function graphql(source: "\n  fragment Venue on VenuePage {\n    __typename\n    id\n    slug\n    title\n    body {\n      ...Blocks\n    }\n    featuredImage {\n      ...Image\n    }\n    showAsBookable\n    floor\n    preposition\n    capabilityAudio\n    capabilityAudioVideo\n    capabilityBar\n    capabilityLighting\n    capacityLegal\n    capacityStanding\n    capacitySitting\n  }\n"): (typeof documents)["\n  fragment Venue on VenuePage {\n    __typename\n    id\n    slug\n    title\n    body {\n      ...Blocks\n    }\n    featuredImage {\n      ...Image\n    }\n    showAsBookable\n    floor\n    preposition\n    capabilityAudio\n    capabilityAudioVideo\n    capabilityBar\n    capabilityLighting\n    capacityLegal\n    capacityStanding\n    capacitySitting\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
@@ -112,7 +125,7 @@ export function graphql(source: "\n  fragment Home on HomePage {\n    ... on Hom
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "\n    query home {\n      events: eventIndex {\n        ... on EventIndex {\n          futureEvents {\n            ... on EventPage {\n              ...Event\n            }\n          }\n        }\n      }\n      home: page(contentType: \"home.HomePage\", urlPath: \"/home/\") {\n        ... on HomePage {\n          ...Home\n        }\n      }\n    }\n  "): (typeof documents)["\n    query home {\n      events: eventIndex {\n        ... on EventIndex {\n          futureEvents {\n            ... on EventPage {\n              ...Event\n            }\n          }\n        }\n      }\n      home: page(contentType: \"home.HomePage\", urlPath: \"/home/\") {\n        ... on HomePage {\n          ...Home\n        }\n      }\n    }\n  "];
+export function graphql(source: "\n    query home {\n      events: eventIndex {\n        ... on EventIndex {\n          futureEvents {\n            ... on EventPage {\n              ...Event\n            }\n          }\n        }\n      }\n      home: page(contentType: \"home.HomePage\", urlPath: \"/home/\") {\n        ... on HomePage {\n          ...Home\n        }\n      }\n      news: pages(contentType: \"news.newsPage\", limit: 3) {\n        ... on NewsPage {\n          ...News\n        }\n      }\n    }\n  "): (typeof documents)["\n    query home {\n      events: eventIndex {\n        ... on EventIndex {\n          futureEvents {\n            ... on EventPage {\n              ...Event\n            }\n          }\n        }\n      }\n      home: page(contentType: \"home.HomePage\", urlPath: \"/home/\") {\n        ... on HomePage {\n          ...Home\n        }\n      }\n      news: pages(contentType: \"news.newsPage\", limit: 3) {\n        ... on NewsPage {\n          ...News\n        }\n      }\n    }\n  "];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
@@ -129,6 +142,18 @@ export function graphql(source: "\n  fragment Event on EventPage {\n    __typena
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
 export function graphql(source: "\n  query futureEvents {\n    events: eventIndex {\n      ... on EventIndex {\n        futureEvents {\n          ... on EventPage {\n            ...Event\n          }\n        }\n      }\n    }\n    eventCategories: eventCategories {\n      ... on EventCategory {\n        name\n        slug\n        showInFilters\n      }\n    }\n  }\n"): (typeof documents)["\n  query futureEvents {\n    events: eventIndex {\n      ... on EventIndex {\n        futureEvents {\n          ... on EventPage {\n            ...Event\n          }\n        }\n      }\n    }\n    eventCategories: eventCategories {\n      ... on EventCategory {\n        name\n        slug\n        showInFilters\n      }\n    }\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(source: "\n  fragment News on NewsPage {\n    __typename\n    id\n    slug\n    title\n    firstPublishedAt\n    excerpt\n    featuredImage {\n      ...Image\n    }\n    body {\n      ...Blocks\n    }\n  }\n"): (typeof documents)["\n  fragment News on NewsPage {\n    __typename\n    id\n    slug\n    title\n    firstPublishedAt\n    excerpt\n    featuredImage {\n      ...Image\n    }\n    body {\n      ...Blocks\n    }\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(source: "\n  fragment NewsIndex on NewsIndex {\n    __typename\n    id\n    slug\n    title\n    lead\n  }\n"): (typeof documents)["\n  fragment NewsIndex on NewsIndex {\n    __typename\n    id\n    slug\n    title\n    lead\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(source: "\n  query news {\n    index: newsIndex {\n      ... on NewsIndex {\n        ...NewsIndex\n      }\n    }\n    news: pages(contentType: \"news.NewsPage\") {\n      ... on NewsPage {\n        ...News\n      }\n    }\n  }\n"): (typeof documents)["\n  query news {\n    index: newsIndex {\n      ... on NewsIndex {\n        ...NewsIndex\n      }\n    }\n    news: pages(contentType: \"news.NewsPage\") {\n      ... on NewsPage {\n        ...News\n      }\n    }\n  }\n"];
 
 export function graphql(source: string) {
   return (documents as any)[source] ?? {};

web/src/lib/date.ts

@@ -1,10 +1,11 @@
 import { isToday, isAfter, parse } from "date-fns";
 import { nb } from "date-fns/locale";
-import { toZonedTime, format} from "date-fns-tz";
+import { toZonedTime, format } from "date-fns-tz";
 
 const timeZone = "Europe/Oslo";
 
-export const commonDateFormat = "dd.MM.yyyy 'kl.' HH:mm";
+export const commonDateTimeFormat = "dd.MM.yyyy 'kl.' HH:mm";
+export const commonDateFormat = "dd.MM.yyyy";
 
 export function toLocalTime(date: Date | string | number) {
   return toZonedTime(date, timeZone);

web/src/lib/news.ts

@@ -0,0 +1,46 @@
+import { graphql } from "@/gql";
+import { NewsFragment } from "@/gql/graphql";
+
+export type { NewsFragment, NewsIndexFragment } from "@/gql/graphql";
+
+const NewsFragmentDefinition = graphql(`
+  fragment News on NewsPage {
+    __typename
+    id
+    slug
+    title
+    firstPublishedAt
+    excerpt
+    featuredImage {
+      ...Image
+    }
+    body {
+      ...Blocks
+    }
+  }
+`);
+
+const NewsIndexFragmentDefinition = graphql(`
+  fragment NewsIndex on NewsIndex {
+    __typename
+    id
+    slug
+    title
+    lead
+  }
+`);
+
+export const newsQuery = graphql(`
+  query news {
+    index: newsIndex {
+      ... on NewsIndex {
+        ...NewsIndex
+      }
+    }
+    news: pages(contentType: "news.NewsPage") {
+      ... on NewsPage {
+        ...News
+      }
+    }
+  }
+`);