Skip to content

Commit

Permalink
feat: adding blog page
Browse files Browse the repository at this point in the history
- includes fixes to eslint and rules
  • Loading branch information
Benj0s committed May 16, 2024
1 parent 830a738 commit 1b83ca9
Show file tree
Hide file tree
Showing 18 changed files with 1,252 additions and 1,012 deletions.
6 changes: 4 additions & 2 deletions .eslintrc.cjs
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,14 @@ const config = {
'@next/next/no-html-link-for-pages': 'off',
'import/dynamic-import-chunkname': 'off',
'no-underscore-dangle': ['error', { allow: ['__typename'] }],
'@typescript-eslint/prefer-nullish-coalescing': 'off',
'@typescript-eslint/no-unsafe-enum-comparison': 'off',
'@typescript-eslint/no-restricted-imports': [
'error',
{
paths: [
{
name: ['next/link'],
name: 'next/link',
message: "Please import 'Link' from '~/components/Link' instead.",
},
],
Expand All @@ -32,7 +34,7 @@ const config = {
},
],
},
ignorePatterns: ['client/generated/**/*.ts'],
ignorePatterns: ['client/generated/**/*.ts', 'playwright-report/**', 'test-results/**'],
};

module.exports = config;
4 changes: 0 additions & 4 deletions amplience-client/index.ts
Original file line number Diff line number Diff line change
@@ -1,10 +1,6 @@
import fetchAdapter from '@haverstack/axios-fetch-adapter';
import { ContentClient } from 'dc-delivery-sdk-js';

export interface AmplienceContentItem {
[key: string]: any;
}

interface AmplienceClientOptions {
hubName?: string;
stagingEnvironment?: string;
Expand Down
66 changes: 66 additions & 0 deletions app/(default)/blog/[...slugs]/page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
/* eslint-disable @typescript-eslint/consistent-type-assertions */
/* eslint-disable @typescript-eslint/no-unsafe-member-access */
import { DefaultContentBody, Image } from 'dc-delivery-sdk-js';
import { notFound, ReadonlyURLSearchParams } from 'next/navigation';
import { Metadata } from 'next/types';
import React from 'react';

import { createAmplienceClient } from '~/amplience-client';
import { clientOptionsMapper } from '~/amplience-client/mappers/client-options-mapper';
import { getImageURL } from '~/components/amplience/image/image.utils';
import AmplienceContent from '~/components/amplience/wrapper/amplience-content';

export interface AmplienceBlogPageProps {
searchParams: ReadonlyURLSearchParams;
params: { slugs: string[] };
}

export async function generateMetadata({
searchParams,
params,
}: AmplienceBlogPageProps): Promise<Metadata> {
const amplienceClientOptions = clientOptionsMapper(searchParams);
const amplienceClient = createAmplienceClient(amplienceClientOptions);
const slug = params.slugs.join('/');

try {
const blogPost = (
await amplienceClient.getContentItemByKey(slug)
).toJSON() as DefaultContentBody;

return {
title: `Catalyst | ${blogPost.snippet?.title ?? ''} blog`,
description: `${blogPost.snippet?.description}`,
keywords: blogPost.snippet?.keywords as string[],
openGraph: {
images: getImageURL(blogPost.snippet?.image.image as Image),
},
twitter: {
card: 'summary_large_image',
site: '@amplience',
creator: '@amplience',
images: getImageURL(blogPost.snippet?.image.image as Image),
},
};
} catch (e) {
return notFound();
}
}

export default async function AmplienceBlogPage({ searchParams, params }: AmplienceBlogPageProps) {
const amplienceClientOptions = clientOptionsMapper(searchParams);
const amplienceClient = createAmplienceClient(amplienceClientOptions);
const slug = params.slugs.join('/');

try {
const blogPost = (
await amplienceClient.getContentItemByKey(slug)
).toJSON() as DefaultContentBody;

return <AmplienceContent content={blogPost} />;
} catch (e) {
return notFound();
}
}

export const runtime = 'edge';
4 changes: 1 addition & 3 deletions components/amplience/adaptive-image/adaptive-image.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,7 @@ interface ContextState {
image: AmplienceImage;
transformations?: ImageTransformations;
diParams?: string;
srcset?: {
[factor: string]: ImageTransformations;
};
srcset?: Record<string, ImageTransformations>;
}

export const AdaptiveImageContext = createContext<ContextState | null>(null);
Expand Down
53 changes: 23 additions & 30 deletions components/amplience/blog-snippet/blog-snippet.tsx
Original file line number Diff line number Diff line change
@@ -1,33 +1,41 @@
import { DefaultContentBody } from 'dc-delivery-sdk-js';
import React from 'react';
import { AmplienceContentItem } from '~/amplience-client';
import AmplienceContent from '../wrapper/amplience-content';

import CallToAction from '../call-to-action/call-to-action';
import NextHead from 'next/head';
import { AmplienceImage } from '../image/image.types';
import { getImageURL } from '../image/image.utils';
import AmplienceContent from '../wrapper/amplience-content';

export type BlogSnippetProps = {
image: AmplienceContentItem;
export interface CallToAction {
type: string;
value: string;
label: string;
}

export interface BlogSnippetProps {
image: DefaultContentBody;
title: string;
blogdate: string;
author: string;
category: string[];
category?: string[];
description: string;
cta: any;
tags: any[];
cta?: CallToAction;
tags: string[];
keywords: string;
};
}

const buildCTAUrl = (cta: any) => {
const buildCTAUrl = (cta: CallToAction) => {
switch (cta.type) {
case 'URL':
return cta.value;

case 'Category ID':
return `/category/${cta.value}`;

case 'Product SKU':
return `/product/${cta.value}`;

case 'Page ID':
return `/${cta.value}`;

default:
return '#';
}
Expand All @@ -41,24 +49,9 @@ const BlogSnippet = ({
category,
description,
cta,
keywords,
}: BlogSnippetProps) => {
return (
<>
<NextHead>
<title>{title || 'Amplience Retail Storefront Website'}</title>
<meta name="description" content={description} />
<meta property="og:title" content={title || 'Amplience Retail Storefront Website'} />
<meta property="og:description" content={description} />
<meta name="keywords" content={keywords} />
<meta property="og:image" content={getImageURL(image.image as AmplienceImage)} />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@amplience" />
<meta name="twitter:creator" content="@amplience" />
<meta name="twitter:title" content={title || 'Amplience Retail Storefront Website'} />
<meta name="twitter:description" content={description} />
<meta name="twitter:image" content={getImageURL(image.image as AmplienceImage)} />
</NextHead>
<div className="amp-dc-banner js_dc_banner">
<div className="amp-dc-banner-wrapper">
<div className="amp-dc-banner-pic-wrap">
Expand All @@ -79,15 +72,15 @@ const BlogSnippet = ({

{cta ? (
<CallToAction
key={cta?.label}
href={buildCTAUrl(cta)}
key={cta.label}
style={{
marginTop: '15px !important',
marginRight: '15px !important',
}}
variant={'contained'}
variant="contained"
>
{cta?.label}
{cta.label}
</CallToAction>
) : null}
</div>
Expand Down
15 changes: 8 additions & 7 deletions components/amplience/blog/blog.tsx
Original file line number Diff line number Diff line change
@@ -1,22 +1,23 @@
import { DefaultContentBody } from 'dc-delivery-sdk-js';
import React from 'react';
import { AmplienceContentItem } from '~/amplience-client';

import AmplienceContent from '../wrapper/amplience-content';

export interface BlogProps {
snippet: AmplienceContentItem;
contentTypes?: AmplienceContentItem[];
content: AmplienceContentItem;
snippet: DefaultContentBody;
contentTypes?: DefaultContentBody[];
content: DefaultContentBody;
}

const Blog = ({ snippet, content, contentTypes = [] }: BlogProps) => {
const Blog = (
const blog = (
<div>
<div className="mb-8">
<AmplienceContent content={snippet} />
</div>
<div>
<AmplienceContent content={content} />
{contentTypes.map((item: any, index: number) => (
{contentTypes.map((item: DefaultContentBody, index: number) => (
<div key={index}>
<AmplienceContent content={item} />
</div>
Expand All @@ -25,7 +26,7 @@ const Blog = ({ snippet, content, contentTypes = [] }: BlogProps) => {
</div>
);

return Blog;
return blog;
};

export default Blog;
16 changes: 10 additions & 6 deletions components/amplience/call-to-action/call-to-action.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
import React, { PropsWithChildren } from 'react';
/* eslint-disable import/no-named-as-default */
'use client';

import clsx from 'clsx';
import Link from 'next/link';
import React, { PropsWithChildren } from 'react';

import LinkWithQuery from '../link-with-query/link-with-query';

interface CallToActionProps extends PropsWithChildren {
href: string;
Expand All @@ -17,20 +21,20 @@ const CallToAction = ({
...other
}: CallToActionProps) => {
return href ? (
<Link
href={href}
<LinkWithQuery
className={clsx(
`font mt-4 rounded bg-[#333] px-3.5 py-2.5 text-xs font-bold text-[#eee] no-underline hover:bg-[#eee] hover:text-[#333] hover:no-underline`,
{
['font mt-4 rounded bg-[#eee] px-3.5 py-2.5 text-xs font-bold text-[#333] no-underline hover:bg-[#333] hover:text-[#eee] hover:no-underline']:
'font mt-4 rounded bg-[#eee] px-3.5 py-2.5 text-xs font-bold text-[#333] no-underline hover:bg-[#333] hover:text-[#eee] hover:no-underline':
variant === 'contained',
},
className,
)}
href={href}
{...other}
>
{children}
</Link>
</LinkWithQuery>
) : null;
};

Expand Down
8 changes: 5 additions & 3 deletions components/amplience/card-list/card-list.tsx
Original file line number Diff line number Diff line change
@@ -1,16 +1,18 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import { DefaultContentBody } from 'dc-delivery-sdk-js';
import React from 'react';
import { AmplienceContentItem } from '~/amplience-client';

import Card from '../card/card';

interface CardListProps {
header?: string;
cards?: AmplienceContentItem[];
cards?: DefaultContentBody[];
}

const CardList = ({ header, cards }: CardListProps) => {
return (
<div style={{ marginTop: 30, marginBottom: 30 }}>
{header && <h2>{header}</h2>}
{Boolean(header) && <h2>{header}</h2>}
{cards && (
<div className="space-x-4 sm:flex">
{cards.map((card: any, index: number) => {
Expand Down
Loading

0 comments on commit 1b83ca9

Please sign in to comment.