Skip to content

Commit

Permalink
Update redesign blog
Browse files Browse the repository at this point in the history
  • Loading branch information
nuno-aac committed Nov 30, 2023
1 parent ad588e5 commit cb3ab40
Show file tree
Hide file tree
Showing 28 changed files with 1,860 additions and 514 deletions.
9 changes: 9 additions & 0 deletions _data/settings/featured-sections.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
items:
- categroy: community-and-events
- categroy: community-calls
- categroy: ecosystem
- categroy: engineering
- categroy: 757155c6-ce07-49f1-af21-907b7e0b1cb1
- categroy: governance
- categroy: stark-math
- categroy: stark-struck
10 changes: 10 additions & 0 deletions workspaces/cms-config/src/collections/categories.ts
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,16 @@ export const categoriesCollectionConfig = {
widget: "string",
crowdin: true
},
{
name: 'parentCategory',
label: 'Parent category',
widget: 'relation',
collection: 'categories',
search_fields: ['name'],
value_field: 'id',
display_fields: ['name'],
options_length: 300
},
{
name: "show_custom_featured_post",
label: "Show custom featured post",
Expand Down
5 changes: 5 additions & 0 deletions workspaces/cms-config/src/collections/posts.ts
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,11 @@ export const postsCollectionConfig = {
],
default: "article",
},
{
name: "isFeatured",
label: "Is featured post",
widget: "boolean",
},
{
name: "title",
label: "Post Title",
Expand Down
25 changes: 25 additions & 0 deletions workspaces/cms-config/src/collections/settings.ts
Original file line number Diff line number Diff line change
Expand Up @@ -131,6 +131,31 @@ export const settingsCollectionConfig = {
},
],
},
{
label: "Featured Sections",
name: "featured-sections",
file: `_data/settings/featured-sections.yml`,
crowdin: false,
fields: [
{
label: "Category sections",
name: "items",
widget: "list",
fields: [
{
name: 'categroy',
label: 'Category',
widget: 'relation',
collection: 'categories',
search_fields: ['name'],
value_field: 'id',
display_fields: ['name'],
options_length: 300
},
],
},
],
},
{
label: "Wallets",
name: "wallets",
Expand Down
2 changes: 2 additions & 0 deletions workspaces/cms-config/src/main.ts
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,9 @@ export const CMSConfig = {
branch: "dev",
base_url: "https://netlify-cms-auth.haim-6b2.workers.dev",
preview_context: "Vercel – starknet-website",
local_backend: true,
},
local_backend: true,
publish_mode: "editorial_workflow",
show_preview_links: true,
media_folder: "public/assets",
Expand Down
1 change: 1 addition & 0 deletions workspaces/cms-data/src/categories.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { getFirst, getJSON } from "@starknet-io/cms-utils/src/index";
export interface Category {
readonly id: string;
readonly slug: string;
readonly parentCategory?: string;
readonly name: string;
readonly show_custom_featured_post?: boolean;
readonly custom_featured_post?: string;
Expand Down
61 changes: 45 additions & 16 deletions workspaces/website/src/components/ArticleCard/ArticleCard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,16 @@ import {
Icon,
Flex,
ChakraProps,
useBreakpointValue
useBreakpointValue,
BoxProps,
FlexProps
} from "@chakra-ui/react";
import { Text } from "@ui/Typography/Text";
import { Heading } from "@ui/Typography/Heading";
import { FiBookOpen, FiHeadphones, FiTv } from "react-icons/fi";
import { CardGradientBorder } from "@ui/Card/components/CardGradientBorder";
import { Category as DataCategory } from "@starknet-io/cms-data/src/categories";
import { ReactNode } from "react";
import { FiBookOpen, FiHeadphones, FiTv } from "react-icons/fi";

type RootProps = {
children: React.ReactNode;
Expand Down Expand Up @@ -43,39 +46,53 @@ const Root = ({ children, href, type = "grid", sx }: RootProps) => {
);
};

type ImageProps = {
type ImageProps = BoxProps & {
children?: ReactNode;
url?: string;
imageAlt?: string;
type?: | "grid" | "featured";
};

const Image = ({ url, imageAlt, type = "grid" }: ImageProps) => {
const Image = ({ children, url, imageAlt, type = "grid", ...rest }: ImageProps) => {
const size = useBreakpointValue({ base: '581px', sm: '350px', md: '430px', xl: '320px' });
const featuredImageSize = useBreakpointValue({ base: '581px', sm: '350px', md: '430px', lg: '550px', xl: '606px' });
const cloudflareImage = `https://starknet.io/cdn-cgi/image/width=${type === "featured" ? featuredImageSize : size},height=auto,format=auto${url}`;
const isProd = import.meta.env.VITE_ALGOLIA_INDEX === "production";
return (
<Box overflow="hidden" {...type === "featured" && { width: "auto", maxWidth: "60%"}}>
<Box
overflow="hidden"
{...type === "featured" && { width: "auto", maxWidth: "60%"}}
{...rest}
>
<ChakraImage
src={isProd ? cloudflareImage : url}
alt={imageAlt}
width="full"
height={type === "featured" ? "100%" : { base: "16rem", md: "12rem", lg: "10rem" }}
height={'100%'}
objectFit="cover"
{...type === "grid" && { borderTopRadius: 8}}
/>

{children}
</Box>
);
};

type BodyProps = {
type BodyProps = FlexProps & {
children: React.ReactNode;
type?: | "grid" | "featured";
};

const Body = ({ children, type = "grid" }: BodyProps) => {
const Body = ({ children, type = "grid", ...rest }: BodyProps) => {
return (
<Flex flex={1} direction="column" pl={6} pr={6} {...type === "featured" && { pt: 8 }}>
<Flex
flex={1}
direction="column"
pl={6}
pr={6}
{...type === "featured" && { pt: 8 }}
{...rest}
>
{children}
</Flex>
);
Expand All @@ -95,15 +112,19 @@ const Category = ({ category }: CategoryProps) => {
);
};

type ContentProps = {
type ContentProps = FlexProps & {
title: string;
excerpt: string;
type?: | "grid" | "featured";
};

const Content = ({ title, excerpt, type = "grid" }: ContentProps) => {
const Content = ({ title, excerpt, type = "grid", ...rest }: ContentProps) => {
return (
<Flex gap="3" direction="column" flex={1}>
<Flex
gap="3"
direction="column"
{...rest}
>
<Heading
color="heading-navy-fg"
variant={type === "featured" ? "h2" : "h4"}
Expand All @@ -113,24 +134,27 @@ const Content = ({ title, excerpt, type = "grid" }: ContentProps) => {
>
{title}
</Heading>
<Text variant="cardBody" noOfLines={4}>
<Text variant="cardBody" noOfLines={3}>
{excerpt}
</Text>
</Flex>
);
};

type FooterProps = {
type FooterProps = FlexProps & {
hideIcon?: boolean;
postType: string;
publishedAt?: string;
timeToConsume?: string;
type?: | "grid" | "featured";
};
const Footer = ({
hideIcon,
postType,
publishedAt = "N/A",
timeToConsume = "5min read",
type = "grid"
type = "grid",
...rest
}: FooterProps) => {
const renderPostTypeIcon = () => {
switch (postType) {
Expand All @@ -146,9 +170,14 @@ const Footer = ({
}
};
return (
<Flex p={type === "featured" ? "14px 0" : 6}>
<Flex
p={type === "featured" ? "14px 0" : 6}
{...rest}
>
<HStack>
{!hideIcon && (
<Icon as={renderPostTypeIcon()} />
)}

<Text fontSize="sm" color="muted">
{publishedAt} ·
Expand Down
130 changes: 130 additions & 0 deletions workspaces/website/src/components/Blog/BlogCard.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,130 @@
/**
* Module dependencies
*/

import { BlogHit } from "src/pages/posts/CategoryPage";
import {
Body,
Content,
Footer,
Image,
Root
} from "@ui/ArticleCard/ArticleCard";

import moment from "moment";
import { Topic } from "@starknet-io/cms-data/src/topics";
import { Tag } from "@chakra-ui/tag";
import { useMemo } from "react";
import { Box, Flex, Grid, Icon } from "@chakra-ui/react";
import { IoPlaySharp } from "react-icons/io5";

/**
* `Props` type.
*/

type Props = {
isFeatured?: boolean;
post: BlogHit;
topics: Topic[]
};


/**
* Export `BlogCard` component.
*/

export const BlogCard = ({ isFeatured, post, topics }: Props) => {
const topicNames = useMemo(() => (
post.topic
.slice(0, 3)
.map((topic) => topics.find(({ id }) => id === topic)?.name)
.filter((topic) => !!topic)
), [post, topics])

return (
<Root
href={`/${post.locale}/post/${post.slug}`}
sx={{
img: {
transition: 'transform 0.4s ease-in-out',
},
_hover: {
background:
"linear-gradient(0.25turn, white, white) padding-box,linear-gradient(200deg, #C507E4, #5C94FF) ",
borderColor: "transparent",
img : {
transform: 'scale(1.05)'
}
},
...(isFeatured && {
minWidth: '434px',
scrollSnapAlign: 'start',
})
}}
>
<Image
aspectRatio={'1.78'}
position={'relative'}
url={post.image}
>
{(post.post_type === 'video' || post.post_type == 'audio') && (
<Grid
placeItems={'center'}
position={'absolute'}
inset={'0'}
>
<Icon
as={IoPlaySharp}
color={'white'}
fontSize={'40px'}
/>
</Grid>
)}
</Image>

<Body
maxHeight={'234px'}
minHeight={'234px'}
>
{topicNames.length > 0 && (
<Box
height={'30px'}
overflow={'hidden'}
marginBottom={'10px'}
>
{topicNames.length !== 0 && (
<Flex
flexWrap={'wrap'}
gap={'8px'}
>
{topicNames.map((topic) => (
<Tag
color={'inherit'}
fontSize={'12px'}
width={'max-content'}
>
{topic}
</Tag>
))}
</Flex>
)}
</Box>
)}

<Content
excerpt={post.short_desc}
title={post.title}
/>

<Footer
hideIcon
marginTop={'auto'}
padding={'16px 0 32px'}
postType={post.post_type}
publishedAt={moment(post.published_date).format("MMM DD, YYYY")}
timeToConsume={post.timeToConsume}
/>
</Body>
</Root>
);
}
Loading

0 comments on commit cb3ab40

Please sign in to comment.