From f03d918bcec05e23fa4bfc391f59d269e9cf4913 Mon Sep 17 00:00:00 2001 From: Tal-Ben-Avi Date: Tue, 26 Mar 2024 10:11:28 +0200 Subject: [PATCH 1/7] add Icons. --- public/assets/discord.svg | 5 + public/assets/linkedin.svg | 5 + public/assets/telegram.svg | 5 + public/assets/twitter.svg | 5 + .../src/pages/content/@slug/PostPage.tsx | 237 +++++++----------- .../content/@slug/SocialShare/SocialShare.tsx | 71 ++++++ 6 files changed, 176 insertions(+), 152 deletions(-) create mode 100644 public/assets/discord.svg create mode 100644 public/assets/linkedin.svg create mode 100644 public/assets/telegram.svg create mode 100644 public/assets/twitter.svg create mode 100644 workspaces/website/src/pages/content/@slug/SocialShare/SocialShare.tsx diff --git a/public/assets/discord.svg b/public/assets/discord.svg new file mode 100644 index 0000000000..4f3b0b1c73 --- /dev/null +++ b/public/assets/discord.svg @@ -0,0 +1,5 @@ + + + \ No newline at end of file diff --git a/public/assets/linkedin.svg b/public/assets/linkedin.svg new file mode 100644 index 0000000000..4ee38d47c6 --- /dev/null +++ b/public/assets/linkedin.svg @@ -0,0 +1,5 @@ + + + \ No newline at end of file diff --git a/public/assets/telegram.svg b/public/assets/telegram.svg new file mode 100644 index 0000000000..256a3276b7 --- /dev/null +++ b/public/assets/telegram.svg @@ -0,0 +1,5 @@ + + + \ No newline at end of file diff --git a/public/assets/twitter.svg b/public/assets/twitter.svg new file mode 100644 index 0000000000..2afaf03874 --- /dev/null +++ b/public/assets/twitter.svg @@ -0,0 +1,5 @@ + + + \ No newline at end of file diff --git a/workspaces/website/src/pages/content/@slug/PostPage.tsx b/workspaces/website/src/pages/content/@slug/PostPage.tsx index 3a75d1aa1b..6994f71844 100644 --- a/workspaces/website/src/pages/content/@slug/PostPage.tsx +++ b/workspaces/website/src/pages/content/@slug/PostPage.tsx @@ -1,13 +1,6 @@ /** * Module dependencies. */ - -import { - AiFillFacebook, - AiFillLinkedin, - AiOutlineTwitter -} from "react-icons/ai"; - import { Box, Button, @@ -17,18 +10,16 @@ import { Grid, HStack, Heading, - Icon, Img, useBreakpointValue, } from "@chakra-ui/react"; import { Category } from "@starknet-io/cms-data/src/categories"; -import { Configure, InstantSearch, useHits } from "react-instantsearch-hooks-web"; import { - FacebookShareButton, - LinkedinShareButton, - TwitterShareButton, -} from "react-share"; + Configure, + InstantSearch, + useHits, +} from "react-instantsearch-hooks-web"; import { Post } from "@starknet-io/cms-data/src/posts"; import { TableOfContents } from "src/pages/(components)/TableOfContents/TableOfContents"; @@ -44,18 +35,15 @@ import algoliasearch from "algoliasearch"; import { BlogCard } from "@ui/Blog/BlogCard"; import { BlogHit } from "../PostsPage"; import { BlogBreadcrumbs } from "@ui/Blog/BlogBreadcrumbs"; - -/** - * Export `Props` type. - */ +import SocialShare from "./SocialShare/SocialShare"; export interface Props { readonly params: LocaleParams & { readonly slug: string; }; - readonly categories: readonly Category[] - readonly topics: readonly Topic[] - readonly post: Post + readonly categories: readonly Category[]; + readonly topics: readonly Topic[]; + readonly post: Post; readonly env?: { readonly ALGOLIA_INDEX: string; readonly ALGOLIA_APP_ID: string; @@ -78,56 +66,61 @@ export interface MarkdownBlock { */ export function PostPage(props: Props): JSX.Element { - const { params: { slug, locale }, categories, topics, post, env } = props; + const { + params: { slug, locale }, + categories, + topics, + post, + env, + } = props; const postCategories = categories.filter((c) => post.category.includes(c.id)); const videoId = post.post_type !== "article" ? post.video?.id : undefined; - const shareUrl = `${env?.SITE_URL}/content/${slug}` const isMobile = useBreakpointValue({ base: true, lg: false }); const searchClient = useMemo(() => { - return algoliasearch(env?.ALGOLIA_APP_ID ?? '', env?.ALGOLIA_SEARCH_API_KEY ?? ''); + return algoliasearch( + env?.ALGOLIA_APP_ID ?? "", + env?.ALGOLIA_SEARCH_API_KEY ?? "" + ); }, [env?.ALGOLIA_APP_ID, env?.ALGOLIA_SEARCH_API_KEY]); - + return ( - - {!!post.toc && !isMobile ? ( - ) : null} - + {post.post_type === "article" ? ( @@ -135,31 +128,31 @@ export function PostPage(props: Props): JSX.Element { borderRadius={"8px"} src={post.image} alt={post.title} - width={'100%'} + width={"100%"} /> @@ -171,7 +164,7 @@ export function PostPage(props: Props): JSX.Element { - + {`Page last updated ${moment( post?.gitlog?.date ).fromNow()}`} @@ -181,26 +174,21 @@ export function PostPage(props: Props): JSX.Element { ) : null} {post.title} {post.post_desc && ( - + {post.post_desc} )} - {post.post_type !== "article" && ( @@ -208,10 +196,10 @@ export function PostPage(props: Props): JSX.Element { @@ -223,7 +211,7 @@ export function PostPage(props: Props): JSX.Element { - + {`Page last updated ${moment( post?.gitlog?.date ).fromNow()}`} @@ -233,91 +221,40 @@ export function PostPage(props: Props): JSX.Element { )} {(post.blocks?.length ?? 0) > 0 && ( - + {post.blocks?.map((block, i) => ( - + ))} )} - + {post.topic?.map((topic, i) => ( ))} - - - - Share this post: - - - - - - - - - - - - - - + + + - + - - {'May also interest you'} + + {"May also interest you"} - + - ) + ); } /** * `RelatedSection` component. */ -function RelatedSection({ post, topics }: Pick) { +function RelatedSection({ post, topics }: Pick) { const { hits } = useHits(); - const normalizedHits = hits.filter((hit) => hit.id !== post.id).slice(0,4); + const normalizedHits = hits.filter((hit) => hit.id !== post.id).slice(0, 4); return ( {normalizedHits.map((hit, index) => ( - + ))} - ) + ); } diff --git a/workspaces/website/src/pages/content/@slug/SocialShare/SocialShare.tsx b/workspaces/website/src/pages/content/@slug/SocialShare/SocialShare.tsx new file mode 100644 index 0000000000..bf67b7851c --- /dev/null +++ b/workspaces/website/src/pages/content/@slug/SocialShare/SocialShare.tsx @@ -0,0 +1,71 @@ +import { Flex, Icon, Text } from "@chakra-ui/react"; +import { + FacebookShareButton, + LinkedinShareButton, + TwitterShareButton, + TelegramShareButton, +} from "react-share"; +import { FaTelegram } from "react-icons/fa"; +import { FaTwitter } from "react-icons/fa"; +import { FaDiscord } from "react-icons/fa6"; +import { FaLinkedin } from "react-icons/fa"; + +interface Props { + readonly params: LocaleParams & { + readonly slug: string; + }; + readonly env?: { + readonly ALGOLIA_INDEX: string; + readonly ALGOLIA_APP_ID: string; + readonly ALGOLIA_SEARCH_API_KEY: string; + readonly SITE_URL: string; + }; +} +const SocialShare = ({ params: { slug, locale }, env }: Props) => { + const shareUrl = `${ + env?.SITE_URL || "https://www.starknet.io" + }${locale}/content/${slug}`; + return ( + + Share this post: + + + + + + + + + {/* need to be discord */} + + + + + + + + + ); +}; + +export default SocialShare; From a181e8c78b56e2c81412fbab589fd528a115f8a1 Mon Sep 17 00:00:00 2001 From: Tal-Ben-Avi Date: Tue, 26 Mar 2024 12:31:06 +0200 Subject: [PATCH 2/7] save changes --- .../src/pages/content/@slug/SocialShare/SocialShare.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/workspaces/website/src/pages/content/@slug/SocialShare/SocialShare.tsx b/workspaces/website/src/pages/content/@slug/SocialShare/SocialShare.tsx index bf67b7851c..f43b48432c 100644 --- a/workspaces/website/src/pages/content/@slug/SocialShare/SocialShare.tsx +++ b/workspaces/website/src/pages/content/@slug/SocialShare/SocialShare.tsx @@ -1,13 +1,13 @@ import { Flex, Icon, Text } from "@chakra-ui/react"; import { - FacebookShareButton, + // FacebookShareButton, LinkedinShareButton, TwitterShareButton, TelegramShareButton, } from "react-share"; import { FaTelegram } from "react-icons/fa"; import { FaTwitter } from "react-icons/fa"; -import { FaDiscord } from "react-icons/fa6"; +// import { FaDiscord } from "react-icons/fa6"; import { FaLinkedin } from "react-icons/fa"; interface Props { @@ -47,14 +47,14 @@ const SocialShare = ({ params: { slug, locale }, env }: Props) => { /> {/* need to be discord */} - + {/* - + */} Date: Tue, 26 Mar 2024 12:36:05 +0200 Subject: [PATCH 3/7] changing Icons UI --- .../content/@slug/SocialShare/SocialShare.tsx | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/workspaces/website/src/pages/content/@slug/SocialShare/SocialShare.tsx b/workspaces/website/src/pages/content/@slug/SocialShare/SocialShare.tsx index f43b48432c..53329f429d 100644 --- a/workspaces/website/src/pages/content/@slug/SocialShare/SocialShare.tsx +++ b/workspaces/website/src/pages/content/@slug/SocialShare/SocialShare.tsx @@ -26,10 +26,21 @@ const SocialShare = ({ params: { slug, locale }, env }: Props) => { env?.SITE_URL || "https://www.starknet.io" }${locale}/content/${slug}`; return ( - - Share this post: + + Share this post: - + Date: Tue, 26 Mar 2024 13:33:20 +0200 Subject: [PATCH 4/7] fixing design --- .../content/@slug/SocialShare/SocialShare.tsx | 24 +++++++++---------- 1 file changed, 11 insertions(+), 13 deletions(-) diff --git a/workspaces/website/src/pages/content/@slug/SocialShare/SocialShare.tsx b/workspaces/website/src/pages/content/@slug/SocialShare/SocialShare.tsx index 53329f429d..4d35b61cd9 100644 --- a/workspaces/website/src/pages/content/@slug/SocialShare/SocialShare.tsx +++ b/workspaces/website/src/pages/content/@slug/SocialShare/SocialShare.tsx @@ -28,32 +28,30 @@ const SocialShare = ({ params: { slug, locale }, env }: Props) => { return ( - Share this post: + Share this post: @@ -69,8 +67,8 @@ const SocialShare = ({ params: { slug, locale }, env }: Props) => { From ab0b5b85df051d92d8e0cf2bfd99260f836a5d4b Mon Sep 17 00:00:00 2001 From: Tal-Ben-Avi Date: Mon, 1 Apr 2024 10:24:09 +0300 Subject: [PATCH 5/7] fixing socialIcons ui --- .../src/pages/content/@slug/PostPage.tsx | 17 +++++------ .../content/@slug/SocialShare/SocialShare.tsx | 30 +++++-------------- 2 files changed, 14 insertions(+), 33 deletions(-) diff --git a/workspaces/website/src/pages/content/@slug/PostPage.tsx b/workspaces/website/src/pages/content/@slug/PostPage.tsx index 6994f71844..027f4346c7 100644 --- a/workspaces/website/src/pages/content/@slug/PostPage.tsx +++ b/workspaces/website/src/pages/content/@slug/PostPage.tsx @@ -188,8 +188,10 @@ export function PostPage(props: Props): JSX.Element { {post.post_desc} )} - - + + + + {post.post_type !== "article" && ( @@ -219,7 +221,6 @@ export function PostPage(props: Props): JSX.Element { )} - {(post.blocks?.length ?? 0) > 0 && ( {post.blocks?.map((block, i) => ( @@ -242,19 +243,15 @@ export function PostPage(props: Props): JSX.Element { ))} - - - - - + - - {"May also interest you"} + + May also interest you { - const shareUrl = `${ - env?.SITE_URL || "https://www.starknet.io" - }${locale}/content/${slug}`; +const SocialShare = ({ params: { slug, locale } }: Props) => { + const shareUrl = `${import.meta.env.VITE_SITE_URL}${locale}/content/${slug}`; return ( { > { - {/* need to be discord */} - {/* - - */} Date: Mon, 1 Apr 2024 11:04:26 +0300 Subject: [PATCH 6/7] fix linkdien button --- .../content/@slug/SocialShare/SocialShare.tsx | 35 ++++++++++--------- 1 file changed, 19 insertions(+), 16 deletions(-) diff --git a/workspaces/website/src/pages/content/@slug/SocialShare/SocialShare.tsx b/workspaces/website/src/pages/content/@slug/SocialShare/SocialShare.tsx index 9f5703c368..0b94619cfa 100644 --- a/workspaces/website/src/pages/content/@slug/SocialShare/SocialShare.tsx +++ b/workspaces/website/src/pages/content/@slug/SocialShare/SocialShare.tsx @@ -1,9 +1,5 @@ import { Flex, Icon, Text } from "@chakra-ui/react"; -import { - LinkedinShareButton, - TwitterShareButton, - TelegramShareButton, -} from "react-share"; +import { TwitterShareButton, TelegramShareButton } from "react-share"; import { FaTelegram } from "react-icons/fa"; import { FaTwitter } from "react-icons/fa"; import { FaLinkedin } from "react-icons/fa"; @@ -13,8 +9,13 @@ interface Props { readonly slug: string; }; } + const SocialShare = ({ params: { slug, locale } }: Props) => { const shareUrl = `${import.meta.env.VITE_SITE_URL}${locale}/content/${slug}`; + const encodedUrl = encodeURIComponent(shareUrl); + const linkedinShareUrl = `https://www.linkedin.com/sharing/share-offsite/?url=${encodedUrl}`; + const handleLinkedinShare = () => window.open(linkedinShareUrl, "_blank"); + return ( { { - - - + ); From 960410341b950fe5950861d96f342d3e1e3c8bef Mon Sep 17 00:00:00 2001 From: Tal-Ben-Avi Date: Mon, 1 Apr 2024 15:37:28 +0300 Subject: [PATCH 7/7] fix social icons sizes --- .../content/@slug/SocialShare/SocialShare.tsx | 40 ++++++++++--------- 1 file changed, 21 insertions(+), 19 deletions(-) diff --git a/workspaces/website/src/pages/content/@slug/SocialShare/SocialShare.tsx b/workspaces/website/src/pages/content/@slug/SocialShare/SocialShare.tsx index 0b94619cfa..30e46fe3b7 100644 --- a/workspaces/website/src/pages/content/@slug/SocialShare/SocialShare.tsx +++ b/workspaces/website/src/pages/content/@slug/SocialShare/SocialShare.tsx @@ -1,5 +1,9 @@ import { Flex, Icon, Text } from "@chakra-ui/react"; -import { TwitterShareButton, TelegramShareButton } from "react-share"; +import { + TwitterShareButton, + TelegramShareButton, + LinkedinShareButton, +} from "react-share"; import { FaTelegram } from "react-icons/fa"; import { FaTwitter } from "react-icons/fa"; import { FaLinkedin } from "react-icons/fa"; @@ -11,7 +15,7 @@ interface Props { } const SocialShare = ({ params: { slug, locale } }: Props) => { - const shareUrl = `${import.meta.env.VITE_SITE_URL}${locale}/content/${slug}`; + const shareUrl = `${import.meta.env.VITE_SITE_URL}/${locale}/content/${slug}`; const encodedUrl = encodeURIComponent(shareUrl); const linkedinShareUrl = `https://www.linkedin.com/sharing/share-offsite/?url=${encodedUrl}`; const handleLinkedinShare = () => window.open(linkedinShareUrl, "_blank"); @@ -27,38 +31,36 @@ const SocialShare = ({ params: { slug, locale } }: Props) => { - + - + - + + + );