github
/
developer-roadmap
mirror of https://github.com/kamranahmedse/developer-roadmap.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add buttons to share roadmaps on Hacker News, Reddit, Twitter, Facebook

Browse Source
pull/2879/head
Kamran Ahmed 2 years ago
parent ededf3017a
commit 47dd9e5522
8 changed files with 38 additions and 3 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      components/custom-ad.tsx
  2. 1
      components/icons/facebook-square.svg
  3. 1
      components/icons/hackernews-square.svg
  4. 1
      components/icons/reddit-square.svg
  5. 1
      components/icons/twitter-square.svg
  6. 27
      components/share-icons.tsx
  7. 1
      pages/[roadmap]/index.tsx
  8. 7
      pages/[roadmap]/interactive.tsx

2
components/custom-ad.tsx
Unescape View File

@ -21,7 +21,7 @@ export const CustomAd = () => {
bottom='15px'
right='20px'
zIndex={999}
display='flex'
display={['none', 'none', 'flex', 'flex']}
maxWidth='330px'
bg='white'
boxShadow='0 1px 4px 1px hsla(0, 0%, 0%, .1)'

1
components/icons/facebook-square.svg
Unescape View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M400 32H48A48 48 0 0 0 0 80v352a48 48 0 0 0 48 48h137.25V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.27c-30.81 0-40.42 19.12-40.42 38.73V256h68.78l-11 71.69h-57.78V480H400a48 48 0 0 0 48-48V80a48 48 0 0 0-48-48z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 507 B

1
components/icons/hackernews-square.svg
Unescape View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zM21.2 229.2H21c.1-.1.2-.3.3-.4 0 .1 0 .3-.1.4zm218 53.9V384h-31.4V281.3L128 128h37.3c52.5 98.3 49.2 101.2 59.3 125.6 12.3-27 5.8-24.4 60.6-125.6H320l-80.8 155.1z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 515 B

1
components/icons/reddit-square.svg
Unescape View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M283.2 345.5c2.7 2.7 2.7 6.8 0 9.2-24.5 24.5-93.8 24.6-118.4 0-2.7-2.4-2.7-6.5 0-9.2 2.4-2.4 6.5-2.4 8.9 0 18.7 19.2 81 19.6 100.5 0 2.4-2.3 6.6-2.3 9 0zm-91.3-53.8c0-14.9-11.9-26.8-26.5-26.8-14.9 0-26.8 11.9-26.8 26.8 0 14.6 11.9 26.5 26.8 26.5 14.6 0 26.5-11.9 26.5-26.5zm90.7-26.8c-14.6 0-26.5 11.9-26.5 26.8 0 14.6 11.9 26.5 26.5 26.5 14.9 0 26.8-11.9 26.8-26.5 0-14.9-11.9-26.8-26.8-26.8zM448 80v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V80c0-26.5 21.5-48 48-48h352c26.5 0 48 21.5 48 48zm-99.7 140.6c-10.1 0-19 4.2-25.6 10.7-24.1-16.7-56.5-27.4-92.5-28.6l18.7-84.2 59.5 13.4c0 14.6 11.9 26.5 26.5 26.5 14.9 0 26.8-12.2 26.8-26.8 0-14.6-11.9-26.8-26.8-26.8-10.4 0-19.3 6.2-23.8 14.9l-65.7-14.6c-3.3-.9-6.5 1.5-7.4 4.8l-20.5 92.8c-35.7 1.5-67.8 12.2-91.9 28.9-6.5-6.8-15.8-11-25.9-11-37.5 0-49.8 50.4-15.5 67.5-1.2 5.4-1.8 11-1.8 16.7 0 56.5 63.7 102.3 141.9 102.3 78.5 0 142.2-45.8 142.2-102.3 0-5.7-.6-11.6-2.1-17 33.6-17.2 21.2-67.2-16.1-67.2z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

1
components/icons/twitter-square.svg
Unescape View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-48.9 158.8c.2 2.8.2 5.7.2 8.5 0 86.7-66 186.6-186.6 186.6-37.2 0-71.7-10.8-100.7-29.4 5.3.6 10.4.8 15.8.8 30.7 0 58.9-10.4 81.4-28-28.8-.6-53-19.5-61.3-45.5 10.1 1.5 19.2 1.5 29.6-1.2-30-6.1-52.5-32.5-52.5-64.4v-.8c8.7 4.9 18.9 7.9 29.6 8.3a65.447 65.447 0 0 1-29.2-54.6c0-12.2 3.2-23.4 8.9-33.1 32.3 39.8 80.8 65.8 135.2 68.6-9.3-44.5 24-80.6 64-80.6 18.9 0 35.9 7.9 47.9 20.7 14.8-2.8 29-8.3 41.6-15.8-4.9 15.2-15.2 28-28.8 36.1 13.2-1.4 26-5.1 37.8-10.2-8.9 13.1-20.1 24.7-32.9 34z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 840 B

27
components/share-icons.tsx
Unescape View File

@ -0,0 +1,27 @@
import { Box, Flex, Link } from '@chakra-ui/react';
import HackerNewsIcon from 'components/icons/hackernews-square.svg';
import FacebookIcon from 'components/icons/facebook-square.svg';
import TwitterIcon from 'components/icons/twitter-square.svg';
import RedditIcon from 'components/icons/reddit-square.svg';
import { Icon } from '@chakra-ui/icons';
import { getFacebookShareUrl, getHnShareUrl, getRedditShareUrl, getTwitterShareUrl } from '../lib/url';
type ShareIconProps = {
text: string;
url: string;
}
export function ShareIcons(props: ShareIconProps) {
const { text, url } = props;
return (
<Box pos='absolute' left={'-15px'} top={'60px'} height='100%' display={['none', 'none', 'none', 'block']}>
<Flex pos='sticky' top='100px' flexDir='column'>
<Link target='_blank' color='gray.500' href={getTwitterShareUrl({ url, text })} _hover={{ color: "gray.700" }}><Icon fill='currentColor' height='24px' width='24px' as={TwitterIcon} /></Link>
<Link target='_blank' color='gray.500' href={getFacebookShareUrl({ url, text })} _hover={{ color: "gray.700" }}><Icon fill='currentColor' height='24px' width='24px' as={FacebookIcon} /></Link>
<Link target='_blank' color='gray.500' href={getHnShareUrl({ url, text })} _hover={{ color: "gray.700" }}><Icon fill='currentColor' height='24px' width='24px' as={HackerNewsIcon} /></Link>
<Link target='_blank' color='gray.500' href={getRedditShareUrl({ text, url })} _hover={{ color: "gray.700" }}><Icon fill='currentColor' height='24px' width='24px' as={RedditIcon} /></Link>
</Flex>
</Box>
);
}

1
pages/[roadmap]/index.tsx
Unescape View File

@ -18,6 +18,7 @@ import { SIGNUP_EMAIL_INPUT_NAME, SIGNUP_FORM_ACTION } from '../signup';
import { BellIcon, EmailIcon } from '@chakra-ui/icons';
import { RelatedRoadmaps } from '../../components/related-roadmaps';
import { TeamsBanner } from '../../components/teams-banner';
import { ShareIcons } from '../../components/share-icons';
type RoadmapProps = {
roadmap: RoadmapType;

7
pages/[roadmap]/interactive.tsx
Unescape View File

@ -1,5 +1,5 @@
import { useFetch } from 'use-http';
import { useEffect, useRef, useState } from 'react';
import React, { useEffect, useRef, useState } from 'react';
import { Box, Container } from '@chakra-ui/react';
import { wireframeJSONToSVG } from 'roadmap-renderer';
import { GlobalHeader } from '../../components/global-header';
@ -13,6 +13,7 @@ import { RoadmapError } from '../../components/roadmap/roadmap-error';
import { RoadmapLoader } from '../../components/roadmap/roadmap-loader';
import { removeSortingInfo } from '../../lib/renderer';
import { TeamsBanner } from '../../components/teams-banner';
import { ShareIcons } from '../../components/share-icons';
type RoadmapProps = {
roadmap: RoadmapType;
@ -179,7 +180,7 @@ export function InteractiveRoadmapRenderer(props: RoadmapProps) {
}
return (
<Container maxW={'container.lg'} position="relative" minHeight={minHeight}>
<Container maxW={'container.lg'} position="relative" minHeight={minHeight} pos='relative'>
{(isLoading || isRendering) && <RoadmapLoader />}
<ContentDrawer
roadmap={roadmap}
@ -188,6 +189,8 @@ export function InteractiveRoadmapRenderer(props: RoadmapProps) {
/>
<div ref={roadmapRef} />
<ShareIcons url={`https://roadmap.sh/${roadmap.id}`} text={roadmap.description} />
</Container>
);
}

Write Preview
Loading…
Cancel
Save