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..027f4346c7 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,37 +174,34 @@ export function PostPage(props: Props): JSX.Element {
) : null}
{post.title}
{post.post_desc && (
-
+
{post.post_desc}
)}
-
-
-
+
+
+
+
{post.post_type !== "article" && (
@@ -223,7 +213,7 @@ export function PostPage(props: Props): JSX.Element {
-
+
{`Page last updated ${moment(
post?.gitlog?.date
).fromNow()}`}
@@ -231,93 +221,37 @@ 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..30e46fe3b7
--- /dev/null
+++ b/workspaces/website/src/pages/content/@slug/SocialShare/SocialShare.tsx
@@ -0,0 +1,69 @@
+import { Flex, Icon, Text } from "@chakra-ui/react";
+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";
+
+interface Props {
+ readonly params: LocaleParams & {
+ 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 (
+
+ Share this post:
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default SocialShare;