From 1671671b79d31868f946e611dfa90dbc4db16bd1 Mon Sep 17 00:00:00 2001 From: Akshit lakhera Date: Mon, 23 Sep 2024 07:38:59 +0000 Subject: [PATCH 1/2] Added reddit social button --- components/common/SocialShare.tsx | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/components/common/SocialShare.tsx b/components/common/SocialShare.tsx index ea1e8e37b..2d547ae31 100644 --- a/components/common/SocialShare.tsx +++ b/components/common/SocialShare.tsx @@ -1,7 +1,7 @@ import React, { FC } from 'react' // Icons -import { BsTwitter, BsLinkedin, BsFacebook } from 'react-icons/bs' +import { BsTwitter, BsLinkedin, BsFacebook ,BsReddit} from 'react-icons/bs' import { FaHackerNewsSquare } from 'react-icons/fa' interface SocialShareProps { @@ -13,9 +13,11 @@ interface SocialShareProps { linkedin?: boolean facebook?: boolean hackerNews?: boolean + reddit?: boolean } const SocialShare:FC = ({ + reddit= true, twitter = true, linkedin = true, facebook = false, @@ -35,6 +37,7 @@ const SocialShare:FC = ({ {linkedin && } {facebook && } {hackerNews && } + {reddit && } ) } @@ -72,4 +75,12 @@ const HackerNewsLink:FC = ({url}) => { ) +} + +const RedditLink: FC = ({url}) => { + return ( + + + + ) } \ No newline at end of file From 548c67a9cec267e8e8186c276a21556564b0612f Mon Sep 17 00:00:00 2001 From: Akshit lakhera Date: Mon, 30 Sep 2024 04:11:31 +0000 Subject: [PATCH 2/2] Title autopopulation is done --- components/common/SocialShare.tsx | 32 +++++++++++++++-------- package-lock.json | 42 +++++++++++++++++++++++++++++++ package.json | 1 + 3 files changed, 64 insertions(+), 11 deletions(-) diff --git a/components/common/SocialShare.tsx b/components/common/SocialShare.tsx index 2d547ae31..84ba82ad8 100644 --- a/components/common/SocialShare.tsx +++ b/components/common/SocialShare.tsx @@ -1,10 +1,10 @@ import React, { FC } from 'react' - // Icons import { BsTwitter, BsLinkedin, BsFacebook ,BsReddit} from 'react-icons/bs' import { FaHackerNewsSquare } from 'react-icons/fa' interface SocialShareProps { + title:string url: string direction?: string size?: string @@ -15,7 +15,13 @@ interface SocialShareProps { hackerNews?: boolean reddit?: boolean } - +const extractTitleFromURL = (url: string): string => { + const slug = url.split('/').pop() || ''; + return slug + .split('-') + .map(word => word.charAt(0).toUpperCase() + word.slice(1)) + .join(' '); +}; const SocialShare:FC = ({ reddit= true, twitter = true, @@ -25,29 +31,33 @@ const SocialShare:FC = ({ url, direction = "row", size = "xl" || "lg" || "md" || "sm" || "xs", - gap = 2 + gap = 2, + }) => { - + const title= extractTitleFromURL(url); const commonStyle = `gap-${gap} ${direction == "row" ? "flex-row" : "flex-col"}` const iconSize = `text-${size}` return (
- {twitter && } - {linkedin && } - {facebook && } - {hackerNews && } - {reddit && } + {twitter && } + {linkedin && } + {facebook && } + {hackerNews && } + {reddit && }
) } export default SocialShare + interface SocialLinkProps { url: string + title: string } + const TwitterLink:FC = ({url}) => { return ( @@ -77,9 +87,9 @@ const HackerNewsLink:FC = ({url}) => { ) } -const RedditLink: FC = ({url}) => { +const RedditLink: FC = ({title , url}) => { return ( - + ) diff --git a/package-lock.json b/package-lock.json index 09d4597f8..49d88e3dc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -23,6 +23,7 @@ "react-intersection-observer": "^9.4.3", "react-markdown": "^8.0.5", "react-player": "^2.12.0", + "react-router-dom": "^6.26.2", "react-slideshow-image": "^4.0.5", "rss": "^1.2.2", "sanity": "^3.48.1", @@ -3222,6 +3223,15 @@ "node": "^12.20.0 || ^14.13.1 || >=16.0.0" } }, + "node_modules/@remix-run/router": { + "version": "1.19.2", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.19.2.tgz", + "integrity": "sha512-baiMx18+IMuD1yyvOGaHM9QrVUPGGG0jC+z+IPHnRJWUAUvaKuWKyE8gjDj2rzv3sz9zOGoRSPgeBVHRhZnBlA==", + "license": "MIT", + "engines": { + "node": ">=14.0.0" + } + }, "node_modules/@rexxars/react-json-inspector": { "version": "8.0.1", "resolved": "https://registry.npmjs.org/@rexxars/react-json-inspector/-/react-json-inspector-8.0.1.tgz", @@ -15460,6 +15470,38 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "6.26.2", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.26.2.tgz", + "integrity": "sha512-tvN1iuT03kHgOFnLPfLJ8V95eijteveqdOSk+srqfePtQvqCExB8eHOYnlilbOcyJyKnYkr1vJvf7YqotAJu1A==", + "license": "MIT", + "dependencies": { + "@remix-run/router": "1.19.2" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.26.2", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.26.2.tgz", + "integrity": "sha512-z7YkaEW0Dy35T3/QKPYB1LjMK2R1fxnHO8kWpUMTBdfVzZrWOiY9a7CtN8HqdWtDUWd5FY6Dl8HFsqVwH4uOtQ==", + "license": "MIT", + "dependencies": { + "@remix-run/router": "1.19.2", + "react-router": "6.26.2" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/react-rx": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/react-rx/-/react-rx-3.1.3.tgz", diff --git a/package.json b/package.json index 83f3a0b79..0e23271fb 100644 --- a/package.json +++ b/package.json @@ -25,6 +25,7 @@ "react-intersection-observer": "^9.4.3", "react-markdown": "^8.0.5", "react-player": "^2.12.0", + "react-router-dom": "^6.26.2", "react-slideshow-image": "^4.0.5", "rss": "^1.2.2", "sanity": "^3.48.1",