Skip to content

Commit

Permalink
add contentgrid navbar (#40)
Browse files Browse the repository at this point in the history 
Why:
- Content Grid requires a navbar by design to navigate and filter shown
content based on content type;
How:
- Added a navigation bar with buttons that help filtering out content
based on content type;

Example:

Filtering for Blogposts:

![imagem](https://github.com/user-attachments/assets/8bcd2f73-f786-480e-ab21-b847725ad78d)

Filtering for Podcasts:

![imagem](https://github.com/user-attachments/assets/5329884d-5b17-4ad3-9c25-92fc5f89642f)
  • Loading branch information
@rccsousa
rccsousa authored Oct 3, 2024
1 parent d0aeac8 commit b85fb6d
Show file tree
Hide file tree
Showing 34 changed files with 1,371 additions and 258 deletions.
4 changes: 4 additions & 0 deletions .eslintrc.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,8 @@ module.exports = {
extends: ['plugin:@next/next/recommended', '@payloadcms'],
ignorePatterns: ['**/payload-types.ts'],
plugins: ['prettier'],
rules: {
'@typescript-eslint/explicit-function-return-type': 'off',
'@typescript-eslint/array-type': 'off',
},
}
85 changes: 37 additions & 48 deletions src/app/(pages)/[slug]/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,56 +1,50 @@
import { Metadata } from "next";
import { draftMode } from "next/headers";
import { Metadata } from 'next'
import { draftMode } from 'next/headers'

import { Page } from '../../../payload/payload-types'
import { fetchDoc } from '../../_api/fetchDoc'
import HubContentGrid from '../../_blocks/HubContentGrid/page'
import { Subscribe } from '../../_blocks/Subscribe'
import SearchBar from '../../_components/SearchBar'
import { ALL_CONTENT } from '../../_graphql/allContent'
import { fetcher } from '../../_utilities/fetcher'
import { generateMeta } from '../../_utilities/generateMeta'
import styles from './styles.module.css'

import { Page } from "../../../payload/payload-types";
import { fetchDoc } from "../../_api/fetchDoc";

import { generateMeta } from "../../_utilities/generateMeta";

import styles from "./styles.module.css";


import { Subscribe } from "@/app/_blocks/Subscribe";
import { ALL_CONTENT } from "@/app/_graphql/allContent";
import ContentCard from "@/app/_components/ContentCard";
import { fetcher } from "@/app/_utilities/fetcher";
import { AllIcon } from '@/app/_icons/icons'

// Payload Cloud caches all files through Cloudflare, so we don't need Next.js to cache them as well
// This means that we can turn off Next.js data caching and instead rely solely on the Cloudflare CDN
// To do this, we include the `no-cache` header on the fetch requests used to get the data for this page
// But we also need to force Next.js to dynamically render this page on each request for preview mode to work
// See https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config#dynamic
// If you are not using Payload Cloud then this line can be removed, see `../../../README.md#cache`
export const dynamic = "force-dynamic";


export default async function Page({ params: { slug = "home" } }) {
const content = await fetcher({ query: ALL_CONTENT });

const content_list = Object.keys(content).flatMap(key =>
content[key].map(content => ({
contentType: key,
content: content,
})));
export const dynamic = 'force-dynamic'

export default async function Page({ params: { slug = 'home' } }) {
const articles = await fetcher({ query: ALL_CONTENT })

return (
<>
{/* Head Block*/}
<div className={styles.headBlock}>
<div className={styles.imageContainer}>
<img className={styles.topImage} src={"/contenthub-top-img.png"} />
<div className={styles.hubLogo}>
<p>
Content
<br />
<span style={{ fontFamily: 'var(--acta-bold)' }}>Hub</span>
</p>
</div>

{/* Top Highlight */}
<div className={`${styles.highlights} ${styles.topHighlight}`}>
<p> HIGHLIGHTS </p>
<h6> From nutritionist to product designer: Reinvinting my carrer at 30</h6>
<p>
<span className={styles.categoryPill}>Inside subvisual</span> Date and Readtime{" "}
<span className={styles.categoryPill}>Inside subvisual</span> Date and Readtime{' '}
</p>
<div className={styles.authorPill}>
<img className={styles.authorImage} src={"/static-image.jpg"} />
<img className={styles.authorImage} src={'/static-image.jpg'} />
Rui Sousa
</div>
</div>
Expand All @@ -59,51 +53,46 @@ export default async function Page({ params: { slug = "home" } }) {
<div className={`${styles.highlights} ${styles.bottomHighlight}`}>
<p> HIGHLIGHTS </p>
<p>
{" "}
{' '}
From nutritionist to product designer: <br /> Reinvinting my carrer at 30
</p>
<p>
<span className={styles.categoryPill}>Inside subvisual</span> Date and Readtime{" "}
<span className={styles.categoryPill}>Inside subvisual</span> Date and Readtime{' '}
</p>
<div className={styles.authorPill}>
<img className={styles.authorImage} src={"/static-image.jpg"} />
<img className={styles.authorImage} src={'/static-image.jpg'} />
Rui Sousa
</div>
</div>
</div>

{/* Search Bar */}
<SearchBar />
{/* Content Grid */}
<div className={styles.contentGridContainer}>
<div className={styles.contentGrid}>
{content_list.map((article, i) => (
<div className={styles.contentCard} key={i}>
<ContentCard key={i} contentType={article.key} content={article.content} />
</div>
))}
</div>
</div>
<HubContentGrid articles={articles} />

<Subscribe />
</>
);
)
}

export async function generateMetadata({ params: { slug = "home" } }): Promise<Metadata> {
const { isEnabled: isDraftMode } = draftMode();
export async function generateMetadata({ params: { slug = 'home' } }): Promise<Metadata> {
const { isEnabled: isDraftMode } = draftMode()

let page: Page | null = null;
let page: Page | null = null

try {
page = await fetchDoc<Page>({
collection: "pages",
collection: 'pages',
slug,
draft: isDraftMode,
});
})
} catch (error) {
// don't throw an error if the fetch fails
// this is so that we can render static fallback pages for the demo
// when deploying this template on Payload Cloud, this page needs to build before the APIs are live
// in production you may want to redirect to a 404 page or at least log the error somewhere
}

return generateMeta({ doc: page });
return generateMeta({ doc: page })
}
111 changes: 43 additions & 68 deletions src/app/(pages)/[slug]/styles.module.css
View file
Original file line number Diff line number Diff line change
@@ -1,29 +1,35 @@
/* Top block */
.headBlock {
width: calc(100% - 32px);
width: var(--content-width);
margin: 0 auto;
display: grid;
grid-template-rows: repeat(2, 1fr);
row-gap: 15px;
row-gap: 20px;
column-gap: 20px;
}

.highlights {
padding: 31px 25px 31px 25px;
}

.topImage {
width: 100%;
min-width: 328px;
.hubLogo {
display: flex;
background-color: var(--sub-purple-600);
border-radius: 45px;
font-family: var(--colfax);
color: white;
align-items: flex-end;
line-height: 48px;
font-size: var(--size-48);
padding-bottom: 20px;
padding-left: 40px;
}

.highlights {
padding: 30px 20px;
}

.topHighlight {
display: flex;
flex-direction: column;
gap: 20px;
border-radius: 45px;
background-color: var(--sub-purple-300);
background-color: var(--sub-purple-400);
color: var(--soft-white-100);
}
Expand All @@ -36,12 +42,11 @@
color: var(--sub-blue-800);
background-color: var(--sub-blue-100);
height: 28px;
padding: 3px 20px 3px 20px;
width: fit-content;
padding: 4px 20px;
border-radius: 100px;
font-family: var(--colfax-medium);
font-weight: 500;
font-size: var(--mobile-caption);
font-family: var(--colfax);
font-weight: bold;
font-size: var(--size-10);
align-content: center;
}

Expand All @@ -52,11 +57,10 @@
background-color: var(--soft-white-100);
width: fit-content;
border-radius: 100px;
padding: 5px 20px 5px 5px;
margin-top: 10px;
padding: 5px 15px 5px 5px;
color: var(--dark-rock-800);
font-size: var(--desktop-xsmall);
font-family: var(--colfax-medium);
font-size: var(--size-12);
font-family: var(--colfax);
}

.authorImage {
Expand All @@ -65,74 +69,45 @@
border-radius: 50%;
}

.contentGridContainer{
width: calc(100% - 160px);
margin: 0 auto;
margin-top: 40px;
margin-bottom: 40px;
}

.contentGrid {

margin: 0 auto;
display: grid;
grid-template-columns: repeat(3,1fr);

}

.contentCard {
padding: 49px 20px 49px 20px;
height: min-content;

border: 1px solid var(--dark-rock-800);
}

@media (min-width: 1024px) {

@media(min-width: 1024px) {
/* Head block */
.headBlock {
width: calc(100% - 160px);
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: repeat(2, 1fr);
row-gap: 20px;
column-gap: 20px;
}

.highlights {
padding: 40px 20px 30px 40px;
}
.hubLogo {
grid-column: 1;
grid-row: 1 / 3;
font-size: var(--size-113);
line-height: 1;
}

.categoryPill {
font-size: var(--desktop-caption);
.topHighlight {
grid-column: 2;
}

.topImage {
width: 100%;
height: 566px;
.bottomHighlight {
display: flex;
flex-direction: column;
gap: 20px;
border-radius: 45px;
border: 1px solid var(--dark-rock-800);
grid-column: 2;
}

.imageContainer {
grid-column: 1;
grid-row: 1 / 3;
.categoryPill {
font-size: var(--size-16);
}

.topHighlight {
border-radius: 45px;
background-color: var(--sub-purple-300);
background-color: var(--sub-purple-400);
grid-column: 2;
height: 283px;
width: 100%;

}

.bottomHighlight {
display: block;
border-radius: 45px;
border: 1px solid var(--dark-rock-800);
grid-column: 2;
height: 283px;
width: 100%;
}

}
38 changes: 19 additions & 19 deletions src/app/(pages)/styleguide/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,29 +1,29 @@
export default function StyleguidePage() {
return (
<div>
<h1 style={{ fontFamily: "var(--colfax-medium)" }}>This is a Colfax Medium H1.</h1>
<h1 style={{ fontFamily: "var(--colfax-regular)" }}>This is a Colfax Redular H1.</h1>
<h1 style={{ fontFamily: "var(--acta-book)" }}>This is an Acta H1.</h1>
<h1 style={{ fontFamily: 'var(--colfax-medium)' }}>This is a Colfax Medium H1.</h1>
<h1 style={{ fontFamily: 'var(--colfax-regular)' }}>This is a Colfax Redular H1.</h1>
<h1 style={{ fontFamily: 'var(--acta-book)' }}>This is an Acta H1.</h1>

<h2 style={{ fontFamily: "var(--colfax-medium)" }}>This is a Colfax Medium H2.</h2>
<h2 style={{ fontFamily: "var(--colfax-regular)" }}>This is a Colfax Regular H2.</h2>
<h2 style={{ fontFamily: "var(--acta-book)" }}>This is an Acta H2.</h2>
<h2 style={{ fontFamily: 'var(--colfax-medium)' }}>This is a Colfax Medium H2.</h2>
<h2 style={{ fontFamily: 'var(--colfax-regular)' }}>This is a Colfax Regular H2.</h2>
<h2 style={{ fontFamily: 'var(--acta-book)' }}>This is an Acta H2.</h2>

<h3 style={{ fontFamily: "var(--colfax-medium)" }}>This is a Colfax Medium H3.</h3>
<h3 style={{ fontFamily: "var(--colfax-regular)" }}>This is a Colfax Regular H3.</h3>
<h3 style={{ fontFamily: "var(--acta-book)" }}>This is an Acta H3.</h3>
<h3 style={{ fontFamily: 'var(--colfax-medium)' }}>This is a Colfax Medium H3.</h3>
<h3 style={{ fontFamily: 'var(--colfax-regular)' }}>This is a Colfax Regular H3.</h3>
<h3 style={{ fontFamily: 'var(--acta-book)' }}>This is an Acta H3.</h3>

<h4 style={{ fontFamily: "var(--colfax-medium)" }}>This is a Colfax Medium H4.</h4>
<h4 style={{ fontFamily: "var(--colfax-regular)" }}>This is a Colfax Regular H4.</h4>
<h4 style={{ fontFamily: "var(--acta-book)" }}>This is an Acta H4.</h4>
<h4 style={{ fontFamily: 'var(--colfax-medium)' }}>This is a Colfax Medium H4.</h4>
<h4 style={{ fontFamily: 'var(--colfax-regular)' }}>This is a Colfax Regular H4.</h4>
<h4 style={{ fontFamily: 'var(--acta-book)' }}>This is an Acta H4.</h4>

<h5 style={{ fontFamily: "var(--colfax-medium)" }}>This is a Colfax Medium H5.</h5>
<h5 style={{ fontFamily: "var(--colfax-regular)" }}>This is a Colfax Regular H5.</h5>
<h5 style={{ fontFamily: "var(--acta-book)" }}>This is an Acta H5.</h5>
<h5 style={{ fontFamily: 'var(--colfax-medium)' }}>This is a Colfax Medium H5.</h5>
<h5 style={{ fontFamily: 'var(--colfax-regular)' }}>This is a Colfax Regular H5.</h5>
<h5 style={{ fontFamily: 'var(--acta-book)' }}>This is an Acta H5.</h5>

<h6 style={{ fontFamily: "var(--colfax-medium)" }}>This is a Colfax Medium H6.</h6>
<h6 style={{ fontFamily: "var(--colfax-regular)" }}>This is a Colfax Regular H6.</h6>
<h6 style={{ fontFamily: "var(--acta-book)" }}>This is an Acta H6.</h6>
<h6 style={{ fontFamily: 'var(--colfax-medium)' }}>This is a Colfax Medium H6.</h6>
<h6 style={{ fontFamily: 'var(--colfax-regular)' }}>This is a Colfax Regular H6.</h6>
<h6 style={{ fontFamily: 'var(--acta-book)' }}>This is an Acta H6.</h6>
</div>
);
)
}
Loading

0 comments on commit b85fb6d

Please sign in to comment.