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

replace button link block with a separate button link tool inside draftail

Browse Source
This commit is contained in:
Jonas Braathen
2026-07-05 00:51:30 +02:00
parent b0698247b6
commit 6f1d531d5d
25 changed files with 620 additions and 219 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/components/blocks/Blocks.tsx
-4
View File
@@ -11,7 +11,6 @@ import { AccordionBlock } from "./AccordionBlock";
import { EmbedBlock } from "./EmbedBlock";
import { FactBoxBlock } from "./FactBoxBlock";
import { ScheduleBlock } from "./ScheduleBlock";
import { ButtonLinkBlock } from "./ButtonLinkBlock";
import { PageSectionBlock, PageSectionNavigationBlock } from "./PageSection";
import { ContactSectionBlock, ContactSubsectionBlock } from "./ContactSection";
import { ContactListBlock } from "./ContactListBlock";
@@ -53,9 +52,6 @@ export const Blocks = ({ blocks, pageContent }: { blocks: any, pageContent?: boo
case "ScheduleBlock":
return <ScheduleBlock key={block.id} block={block} />;
break;
case "ButtonLinkBlock":
return <ButtonLinkBlock key={block.id} block={block} />;
break;
case "PageSectionBlock":
return <PageSectionBlock key={block.id} block={block} />;
break;
web/src/components/blocks/ButtonLinkBlock.tsx
-57
View File
@@ -1,57 +0,0 @@
import { graphql } from "@/gql";
import { type ButtonLinkBlockFragment } from "@/gql/graphql";
import Link from "next/link";
import { Icon } from "@/components/general/Icon";
export const ButtonLinkBlockFragmentDefinition = graphql(`
fragment ButtonLinkBlock on ButtonLinkBlock {
buttonText: text
buttonAnchor: anchor
buttonExternalUrl: externalUrl
buttonPage: page {
url
}
}
`);
export const ButtonLinkBlock = ({
block,
}: {
block: ButtonLinkBlockFragment;
}) => {
const anchor = block.buttonAnchor ? `#${block.buttonAnchor}` : "";
const pageUrl = block.buttonPage?.url;
const externalUrl = block.buttonExternalUrl;
let href = "#";
let isExternal = false;
if (pageUrl) {
href = `${pageUrl}${anchor}`;
} else if (externalUrl) {
href = `${externalUrl}${anchor}`;
isExternal = true;
} else if (anchor) {
href = anchor;
}
if (isExternal) {
return (
<a
href={href}
className="button"
target="_blank"
rel="noopener noreferrer"
>
<span>{block.buttonText}</span>
<Icon type="externalLink" />
</a>
);
}
return (
<Link href={href} className="button">
<span>{block.buttonText}</span>
<Icon type="arrowRight" />
</Link>
);
};
web/src/components/blocks/RichTextBlock.tsx
+4 -4
View File
@@ -1,5 +1,6 @@
import { graphql } from "@/gql";
import { type RichTextBlockFragment } from "@/gql/graphql";
import { RichText } from "@/components/general/RichText";
import styles from "./richTextBlock.module.scss";
const RichTextBlockFragmentDefinition = graphql(`
@@ -11,9 +12,8 @@ const RichTextBlockFragmentDefinition = graphql(`
export const RichTextBlock = ({ block }: { block: RichTextBlockFragment }) => {
return (
<div
className={styles.richTextBlock}
dangerouslySetInnerHTML={{ __html: block.value }}
></div>
<div className={styles.richTextBlock}>
<RichText content={block.value} />
</div>
);
};
web/src/components/blocks/richTextBlock.module.scss
+5 -5
View File
@@ -92,7 +92,7 @@
font-style: italic;
}
a {
a:not(:global(.button)) {
text-decoration-thickness: .1rem;
text-decoration-color: var(--color-goldenOrange);
font-weight: 500;
@@ -131,7 +131,7 @@
max-width: var(--size-width-p);
border-collapse: collapse;
margin: 0 auto;
tr {
border-top: var(--border);
@@ -139,16 +139,16 @@
border-bottom: var(--border);
}
}
th {
text-align: left;
width: 11rem;
font-weight: 600;
}
th,
td {
padding: var(--spacing-xs) 0;
}
}
}
}
web/src/components/general/ButtonLink.tsx
+41
View File
@@ -0,0 +1,41 @@
import Link from "next/link";
import { Icon } from "@/components/general/Icon";
/**
* A link styled as a button. Internal links use next/link with a forward arrow;
* external links open in a new tab with an external icon. isExternal is inferred
* from the href unless passed explicitly.
*/
export const ButtonLink = ({
href,
isExternal,
children,
}: {
href: string;
isExternal?: boolean;
children: React.ReactNode;
}) => {
const external =
isExternal ?? (!href.startsWith("/") && !href.startsWith("#"));
if (external) {
return (
<a
href={href}
className="button"
target="_blank"
rel="noopener noreferrer"
>
<span>{children}</span>
<Icon type="externalLink" />
</a>
);
}
return (
<Link href={href} className="button">
<span>{children}</span>
<Icon type="arrowRight" />
</Link>
);
};
web/src/components/general/Icon.tsx
+4 -4
View File
@@ -6,7 +6,7 @@ export function Icon({
type?: "doc" | "arrowUp" | "arrowRight" | "externalLink" | "search" | "tickets" | "list" | "calendar" | "filter" | "noFilter" | "email" | "phone" | "instagram" | "facebook" | "flickr" | "tiktok";
}) {
return (
<div className={styles.icon}>
<span className={styles.icon}>
{type === "doc" && (
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -89,7 +89,7 @@ export function Icon({
)}
{!type && (
<div>
<span>
<svg
viewBox="0 0 49 49"
fill="none"
@@ -100,10 +100,10 @@ export function Icon({
fill="currentColor"
/>
</svg>
</div>
</span>
)}
</div>
</span>
);
}
web/src/components/general/RichText.tsx
+32
View File
@@ -0,0 +1,32 @@
import parse, {
domToReact,
Element,
type DOMNode,
type HTMLReactParserOptions,
} from "html-react-parser";
import { ButtonLink } from "@/components/general/ButtonLink";
/**
* Renders CMS rich text (HTML) as React, swapping inline button markers
* (`<a class="button">` from the button-link Draftail feature) for the
* ButtonLink component. Everything else renders as plain HTML.
*/
const options: HTMLReactParserOptions = {
replace: (node) => {
if (
node instanceof Element &&
node.name === "a" &&
node.attribs.class?.split(/\s+/).includes("button")
) {
return (
<ButtonLink href={node.attribs.href ?? "#"}>
{domToReact(node.children as DOMNode[], options)}
</ButtonLink>
);
}
},
};
export const RichText = ({ content }: { content: string }) => {
return <>{parse(content, options)}</>;
};
web/src/gql/gql.ts
+3 -9
View File
@@ -26,7 +26,6 @@ type Documents = {
"\n query allAssociations {\n index: associationIndex {\n ... on AssociationIndex {\n ...AssociationIndex\n }\n }\n associations: pages(\n contentType: \"associations.AssociationPage\"\n limit: 1000\n ) {\n ... on AssociationPage {\n ...Association\n }\n }\n }\n": typeof types.AllAssociationsDocument,
"\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": typeof types.AssociationBySlugDocument,
"\n fragment AccordionBlock on AccordionBlock {\n heading\n body {\n id\n blockType\n }\n }\n": typeof types.AccordionBlockFragmentDoc,
"\n fragment ButtonLinkBlock on ButtonLinkBlock {\n buttonText: text\n buttonAnchor: anchor\n buttonExternalUrl: externalUrl\n buttonPage: page {\n url\n }\n }\n": typeof types.ButtonLinkBlockFragmentDoc,
"\n fragment ContactEntityBlock on ContactEntityBlock {\n contactEntity {\n ...ContactEntity\n }\n }\n": typeof types.ContactEntityBlockFragmentDoc,
"\n fragment ContactListBlock on ContactListBlock {\n items {\n blockType\n ... on ContactEntityBlock {\n contactEntity {\n ...ContactEntity\n }\n }\n }\n }\n": typeof types.ContactListBlockFragmentDoc,
"\n fragment ContactSectionBlock on ContactSectionBlock {\n title\n text\n blocks {\n id\n blockType\n }\n }\n": typeof types.ContactSectionBlockFragmentDoc,
@@ -61,7 +60,7 @@ type Documents = {
"\n query venueBySlug($slug: String!) {\n venue: page(contentType: \"venues.VenuePage\", slug: $slug) {\n ... on VenuePage {\n ...Venue\n }\n }\n }\n": typeof types.VenueBySlugDocument,
"\n fragment VenueRentalIndex on VenueRentalIndex {\n __typename\n title\n seoTitle\n searchDescription\n lead\n body {\n ...Blocks\n }\n }\n": typeof types.VenueRentalIndexFragmentDoc,
"\n query venueRentalIndex {\n index: venueRentalIndex {\n ... on VenueRentalIndex {\n ...VenueRentalIndex\n }\n }\n venues: pages(contentType: \"venues.VenuePage\", limit: 100) {\n ... on VenuePage {\n ...Venue\n }\n }\n }\n": typeof types.VenueRentalIndexDocument,
"\n fragment LeafBlocks on StreamFieldInterface {\n id\n blockType\n field\n ... on RichTextBlock {\n ...RichTextBlock\n }\n ... on ImageWithTextBlock {\n ...ImageWithTextBlock\n }\n ... on ImageSliderBlock {\n ...ImageSliderBlock\n }\n ... on HorizontalRuleBlock {\n ...HorizontalRuleBlock\n }\n ... on FeaturedBlock {\n ...FeaturedBlock\n }\n ... on ContactListBlock {\n ...ContactListBlock\n }\n ... on EmbedBlock {\n ...EmbedBlock\n }\n ... on FactBoxBlock {\n ...FactBoxBlock\n }\n ... on ScheduleBlock {\n ...ScheduleBlock\n }\n ... on ButtonLinkBlock {\n ...ButtonLinkBlock\n }\n }\n": typeof types.LeafBlocksFragmentDoc,
"\n fragment LeafBlocks on StreamFieldInterface {\n id\n blockType\n field\n ... on RichTextBlock {\n ...RichTextBlock\n }\n ... on ImageWithTextBlock {\n ...ImageWithTextBlock\n }\n ... on ImageSliderBlock {\n ...ImageSliderBlock\n }\n ... on HorizontalRuleBlock {\n ...HorizontalRuleBlock\n }\n ... on FeaturedBlock {\n ...FeaturedBlock\n }\n ... on ContactListBlock {\n ...ContactListBlock\n }\n ... on EmbedBlock {\n ...EmbedBlock\n }\n ... on FactBoxBlock {\n ...FactBoxBlock\n }\n ... on ScheduleBlock {\n ...ScheduleBlock\n }\n }\n": typeof types.LeafBlocksFragmentDoc,
"\n fragment OneLevelOfBlocks on StreamFieldInterface {\n ...LeafBlocks\n ... on AccordionBlock {\n ...AccordionBlock\n body {\n ...LeafBlocks\n }\n }\n ... on PageSectionBlock {\n ...PageSectionBlock\n body {\n ...LeafBlocks\n }\n }\n }\n": typeof types.OneLevelOfBlocksFragmentDoc,
"\n fragment Blocks on StreamFieldInterface {\n ...OneLevelOfBlocks\n ... on AccordionBlock {\n ...AccordionBlock\n body {\n ...OneLevelOfBlocks\n }\n }\n ... on PageSectionBlock {\n ...PageSectionBlock\n body {\n ...OneLevelOfBlocks\n }\n }\n ... on ContactSectionBlock {\n ...ContactSectionBlock\n blocks {\n ...OneLevelOfBlocks\n ... on ContactSubsectionBlock {\n ...ContactSubsectionBlock\n blocks {\n ...OneLevelOfBlocks\n }\n }\n }\n }\n }\n": typeof types.BlocksFragmentDoc,
"\n fragment Image on CustomImage {\n id\n url\n width\n height\n alt\n attribution\n }\n": typeof types.ImageFragmentDoc,
@@ -97,7 +96,6 @@ const documents: Documents = {
"\n query allAssociations {\n index: associationIndex {\n ... on AssociationIndex {\n ...AssociationIndex\n }\n }\n associations: pages(\n contentType: \"associations.AssociationPage\"\n limit: 1000\n ) {\n ... on AssociationPage {\n ...Association\n }\n }\n }\n": types.AllAssociationsDocument,
"\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 AccordionBlock on AccordionBlock {\n heading\n body {\n id\n blockType\n }\n }\n": types.AccordionBlockFragmentDoc,
"\n fragment ButtonLinkBlock on ButtonLinkBlock {\n buttonText: text\n buttonAnchor: anchor\n buttonExternalUrl: externalUrl\n buttonPage: page {\n url\n }\n }\n": types.ButtonLinkBlockFragmentDoc,
"\n fragment ContactEntityBlock on ContactEntityBlock {\n contactEntity {\n ...ContactEntity\n }\n }\n": types.ContactEntityBlockFragmentDoc,
"\n fragment ContactListBlock on ContactListBlock {\n items {\n blockType\n ... on ContactEntityBlock {\n contactEntity {\n ...ContactEntity\n }\n }\n }\n }\n": types.ContactListBlockFragmentDoc,
"\n fragment ContactSectionBlock on ContactSectionBlock {\n title\n text\n blocks {\n id\n blockType\n }\n }\n": types.ContactSectionBlockFragmentDoc,
@@ -132,7 +130,7 @@ const documents: Documents = {
"\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 VenueRentalIndex on VenueRentalIndex {\n __typename\n title\n seoTitle\n searchDescription\n lead\n body {\n ...Blocks\n }\n }\n": types.VenueRentalIndexFragmentDoc,
"\n query venueRentalIndex {\n index: venueRentalIndex {\n ... on VenueRentalIndex {\n ...VenueRentalIndex\n }\n }\n venues: pages(contentType: \"venues.VenuePage\", limit: 100) {\n ... on VenuePage {\n ...Venue\n }\n }\n }\n": types.VenueRentalIndexDocument,
"\n fragment LeafBlocks on StreamFieldInterface {\n id\n blockType\n field\n ... on RichTextBlock {\n ...RichTextBlock\n }\n ... on ImageWithTextBlock {\n ...ImageWithTextBlock\n }\n ... on ImageSliderBlock {\n ...ImageSliderBlock\n }\n ... on HorizontalRuleBlock {\n ...HorizontalRuleBlock\n }\n ... on FeaturedBlock {\n ...FeaturedBlock\n }\n ... on ContactListBlock {\n ...ContactListBlock\n }\n ... on EmbedBlock {\n ...EmbedBlock\n }\n ... on FactBoxBlock {\n ...FactBoxBlock\n }\n ... on ScheduleBlock {\n ...ScheduleBlock\n }\n ... on ButtonLinkBlock {\n ...ButtonLinkBlock\n }\n }\n": types.LeafBlocksFragmentDoc,
"\n fragment LeafBlocks on StreamFieldInterface {\n id\n blockType\n field\n ... on RichTextBlock {\n ...RichTextBlock\n }\n ... on ImageWithTextBlock {\n ...ImageWithTextBlock\n }\n ... on ImageSliderBlock {\n ...ImageSliderBlock\n }\n ... on HorizontalRuleBlock {\n ...HorizontalRuleBlock\n }\n ... on FeaturedBlock {\n ...FeaturedBlock\n }\n ... on ContactListBlock {\n ...ContactListBlock\n }\n ... on EmbedBlock {\n ...EmbedBlock\n }\n ... on FactBoxBlock {\n ...FactBoxBlock\n }\n ... on ScheduleBlock {\n ...ScheduleBlock\n }\n }\n": types.LeafBlocksFragmentDoc,
"\n fragment OneLevelOfBlocks on StreamFieldInterface {\n ...LeafBlocks\n ... on AccordionBlock {\n ...AccordionBlock\n body {\n ...LeafBlocks\n }\n }\n ... on PageSectionBlock {\n ...PageSectionBlock\n body {\n ...LeafBlocks\n }\n }\n }\n": types.OneLevelOfBlocksFragmentDoc,
"\n fragment Blocks on StreamFieldInterface {\n ...OneLevelOfBlocks\n ... on AccordionBlock {\n ...AccordionBlock\n body {\n ...OneLevelOfBlocks\n }\n }\n ... on PageSectionBlock {\n ...PageSectionBlock\n body {\n ...OneLevelOfBlocks\n }\n }\n ... on ContactSectionBlock {\n ...ContactSectionBlock\n blocks {\n ...OneLevelOfBlocks\n ... on ContactSubsectionBlock {\n ...ContactSubsectionBlock\n blocks {\n ...OneLevelOfBlocks\n }\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,
@@ -218,10 +216,6 @@ export function graphql(source: "\n query associationBySlug($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 AccordionBlock on AccordionBlock {\n heading\n body {\n id\n blockType\n }\n }\n"): (typeof documents)["\n fragment AccordionBlock on AccordionBlock {\n heading\n body {\n id\n blockType\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 ButtonLinkBlock on ButtonLinkBlock {\n buttonText: text\n buttonAnchor: anchor\n buttonExternalUrl: externalUrl\n buttonPage: page {\n url\n }\n }\n"): (typeof documents)["\n fragment ButtonLinkBlock on ButtonLinkBlock {\n buttonText: text\n buttonAnchor: anchor\n buttonExternalUrl: externalUrl\n buttonPage: page {\n url\n }\n }\n"];
/**
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
*/
@@ -361,7 +355,7 @@ export function graphql(source: "\n query venueRentalIndex {\n index: venueR
/**
* 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 LeafBlocks on StreamFieldInterface {\n id\n blockType\n field\n ... on RichTextBlock {\n ...RichTextBlock\n }\n ... on ImageWithTextBlock {\n ...ImageWithTextBlock\n }\n ... on ImageSliderBlock {\n ...ImageSliderBlock\n }\n ... on HorizontalRuleBlock {\n ...HorizontalRuleBlock\n }\n ... on FeaturedBlock {\n ...FeaturedBlock\n }\n ... on ContactListBlock {\n ...ContactListBlock\n }\n ... on EmbedBlock {\n ...EmbedBlock\n }\n ... on FactBoxBlock {\n ...FactBoxBlock\n }\n ... on ScheduleBlock {\n ...ScheduleBlock\n }\n ... on ButtonLinkBlock {\n ...ButtonLinkBlock\n }\n }\n"): (typeof documents)["\n fragment LeafBlocks on StreamFieldInterface {\n id\n blockType\n field\n ... on RichTextBlock {\n ...RichTextBlock\n }\n ... on ImageWithTextBlock {\n ...ImageWithTextBlock\n }\n ... on ImageSliderBlock {\n ...ImageSliderBlock\n }\n ... on HorizontalRuleBlock {\n ...HorizontalRuleBlock\n }\n ... on FeaturedBlock {\n ...FeaturedBlock\n }\n ... on ContactListBlock {\n ...ContactListBlock\n }\n ... on EmbedBlock {\n ...EmbedBlock\n }\n ... on FactBoxBlock {\n ...FactBoxBlock\n }\n ... on ScheduleBlock {\n ...ScheduleBlock\n }\n ... on ButtonLinkBlock {\n ...ButtonLinkBlock\n }\n }\n"];
export function graphql(source: "\n fragment LeafBlocks on StreamFieldInterface {\n id\n blockType\n field\n ... on RichTextBlock {\n ...RichTextBlock\n }\n ... on ImageWithTextBlock {\n ...ImageWithTextBlock\n }\n ... on ImageSliderBlock {\n ...ImageSliderBlock\n }\n ... on HorizontalRuleBlock {\n ...HorizontalRuleBlock\n }\n ... on FeaturedBlock {\n ...FeaturedBlock\n }\n ... on ContactListBlock {\n ...ContactListBlock\n }\n ... on EmbedBlock {\n ...EmbedBlock\n }\n ... on FactBoxBlock {\n ...FactBoxBlock\n }\n ... on ScheduleBlock {\n ...ScheduleBlock\n }\n }\n"): (typeof documents)["\n fragment LeafBlocks on StreamFieldInterface {\n id\n blockType\n field\n ... on RichTextBlock {\n ...RichTextBlock\n }\n ... on ImageWithTextBlock {\n ...ImageWithTextBlock\n }\n ... on ImageSliderBlock {\n ...ImageSliderBlock\n }\n ... on HorizontalRuleBlock {\n ...HorizontalRuleBlock\n }\n ... on FeaturedBlock {\n ...FeaturedBlock\n }\n ... on ContactListBlock {\n ...ContactListBlock\n }\n ... on EmbedBlock {\n ...EmbedBlock\n }\n ... on FactBoxBlock {\n ...FactBoxBlock\n }\n ... on ScheduleBlock {\n ...ScheduleBlock\n }\n }\n"];
/**
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
*/
web/src/gql/graphql.ts
+26 -83
View File
File diff suppressed because one or more lines are too long
web/src/lib/common.ts
-3
View File
@@ -123,9 +123,6 @@ const LeafBlocksFragmentDefinition = graphql(`
... on ScheduleBlock {
...ScheduleBlock
}
... on ButtonLinkBlock {
...ButtonLinkBlock
}
}
`);