Skip to content

Commit 2b21b51

Browse files
nemanjamnemanjam
committed
Share component gray color, single size
1 parent 1d1d3d1 commit 2b21b51

File tree

4 files changed

+140
-82
lines changed

4 files changed

+140
-82
lines changed

‎docs/working-notes/my-old-code/Share.astro

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
---
2+
import {
3+
FacebookShareButton,
4+
HackerNewsShareButton,
5+
LinkedInShareButton,
6+
RedditShareButton,
7+
SocialShare,
8+
TwitterShareButton,
9+
} from 'astro-social-share';
10+
11+
import { cva } from 'class-variance-authority';
12+
13+
import { DEFAULT_METADATA } from '@/constants/metadata';
14+
import { CONFIG } from '@/config';
15+
16+
import type { ComponentProps } from 'astro/types';
17+
import type { VariantProps } from 'class-variance-authority';
18+
19+
const shareVariants = cva('', {
20+
variants: {
21+
size: { sm: 'share-sm', md: 'share-md' },
22+
},
23+
});
24+
25+
type SocialShareProps = Omit<ComponentProps<typeof SocialShare>, 'buttons'>;
26+
export interface Props extends SocialShareProps, VariantProps<typeof shareVariants> {
27+
class?: string;
28+
}
29+
const { size = 'md', class: className, ...shareProps } = Astro.props;
30+
31+
const { title, description } = DEFAULT_METADATA;
32+
const { SITE_URL } = CONFIG;
33+
34+
// via is only for twitter
35+
const defaultProps = { description, title, via: SITE_URL };
36+
37+
// dont change order because of colors
38+
const buttons = [
39+
TwitterShareButton,
40+
FacebookShareButton,
41+
RedditShareButton,
42+
LinkedInShareButton,
43+
HackerNewsShareButton,
44+
];
45+
46+
const props = { ...defaultProps, ...shareProps };
47+
48+
// todo: change package
49+
---
50+
51+
<div class={shareVariants({ size, className })}>
52+
{/* doesnt expose class, junk lib */}
53+
<SocialShare {...props} {buttons} />
54+
</div>
55+
56+
{/* his slot is broken */}
57+
<style is:global slot="astro-social-share-css">
58+
.astro-social-share {
59+
@apply inline-block;
60+
}
61+
62+
.social-share-btn {
63+
@apply inline-block !mr-0;
64+
65+
&:hover {
66+
filter: brightness(70%);
67+
}
68+
}
69+
70+
/* size variants */
71+
.share-md {
72+
.astro-social-share {
73+
@apply h-10 space-x-8;
74+
}
75+
76+
.social-share-btn svg {
77+
@apply inline-block w-10 h-10;
78+
}
79+
}
80+
81+
.share-sm {
82+
.astro-social-share {
83+
@apply h-6 space-x-6 !my-4;
84+
}
85+
.social-share-btn svg {
86+
@apply inline-block w-6 h-6;
87+
}
88+
}
89+
90+
/* twitter */
91+
.social-share-btn:nth-child(1) {
92+
fill: #000000;
93+
94+
/* must target path */
95+
&:hover path {
96+
@apply fill-gray-400;
97+
}
98+
}
99+
100+
/* facebook */
101+
.social-share-btn:nth-child(2) {
102+
fill: #1877f2;
103+
}
104+
105+
/* reddit */
106+
.social-share-btn:nth-child(3) {
107+
fill: #ff4500;
108+
}
109+
110+
/* linkedin */
111+
.social-share-btn:nth-child(4) {
112+
fill: #0a66c2;
113+
}
114+
115+
/* hackernews */
116+
.social-share-btn:nth-child(5) {
117+
fill: #f0652f;
118+
}
119+
</style>

‎src/components/Share.astro

Lines changed: 9 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -8,25 +8,17 @@ import {
88
TwitterShareButton,
99
} from 'astro-social-share';
1010
11-
import { cva } from 'class-variance-authority';
12-
1311
import { DEFAULT_METADATA } from '@/constants/metadata';
1412
import { CONFIG } from '@/config';
13+
import { cn } from '@/utils/styles';
1514
1615
import type { ComponentProps } from 'astro/types';
17-
import type { VariantProps } from 'class-variance-authority';
18-
19-
const shareVariants = cva('', {
20-
variants: {
21-
size: { sm: 'share-sm', md: 'share-md' },
22-
},
23-
});
2416
2517
type SocialShareProps = Omit<ComponentProps<typeof SocialShare>, 'buttons'>;
26-
export interface Props extends SocialShareProps, VariantProps<typeof shareVariants> {
18+
export interface Props extends SocialShareProps {
2719
class?: string;
2820
}
29-
const { size = 'md', class: className, ...shareProps } = Astro.props;
21+
const { class: className, ...shareProps } = Astro.props;
3022
3123
const { title, description } = DEFAULT_METADATA;
3224
const { SITE_URL } = CONFIG;
@@ -48,72 +40,21 @@ const props = { ...defaultProps, ...shareProps };
4840
// todo: change package
4941
---
5042

51-
<div class={shareVariants({ size, className })}>
52-
{/* doesnt expose class, junk lib */}
43+
<div class={cn('inline-flex items-center gap-2', className)}>
44+
<span class="font-bold text-base">Share:</span>
5345
<SocialShare {...props} {buttons} />
5446
</div>
5547

5648
{/* his slot is broken */}
5749
<style is:global slot="astro-social-share-css">
5850
.astro-social-share {
59-
@apply inline-block;
51+
@apply my-0;
6052
}
6153

6254
.social-share-btn {
63-
@apply inline-block !mr-0;
64-
65-
&:hover {
66-
filter: brightness(70%);
67-
}
68-
}
69-
70-
/* size variants */
71-
.share-md {
72-
.astro-social-share {
73-
@apply h-10 space-x-8;
74-
}
75-
76-
.social-share-btn svg {
77-
@apply inline-block w-10 h-10;
78-
}
79-
}
80-
81-
.share-sm {
82-
.astro-social-share {
83-
@apply h-6 space-x-6 !my-4;
84-
}
85-
.social-share-btn svg {
86-
@apply inline-block w-6 h-6;
55+
@apply inline-block w-6 h-6 !mr-4;
56+
svg {
57+
@apply w-full h-full fill-captions;
8758
}
8859
}
89-
90-
/* twitter */
91-
.social-share-btn:nth-child(1) {
92-
fill: #000000;
93-
94-
/* must target path */
95-
&:hover path {
96-
@apply fill-gray-400;
97-
}
98-
}
99-
100-
/* facebook */
101-
.social-share-btn:nth-child(2) {
102-
fill: #1877f2;
103-
}
104-
105-
/* reddit */
106-
.social-share-btn:nth-child(3) {
107-
fill: #ff4500;
108-
}
109-
110-
/* linkedin */
111-
.social-share-btn:nth-child(4) {
112-
fill: #0a66c2;
113-
}
114-
115-
/* hackernews */
116-
.social-share-btn:nth-child(5) {
117-
fill: #f0652f;
118-
}
11960
</style>

‎src/pages/blog/[slug].astro

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -108,9 +108,12 @@ const metadata: Metadata = { title, description, image };
108108

109109
<Content />
110110

111-
<TagList tags={tags} size="lg" class="mb-4 md:mb-6" />
112-
113-
<Share {title} {description} url={`${ROUTES.BLOG}${slug}`} size="md" />
111+
<div
112+
class="flex justify-between items-start gap-4 flex-col md:flex-row mt-6 md:mt-8 mb-12 md:mb-16"
113+
>
114+
<TagList tags={tags} size="md" />
115+
<Share {title} {description} url={`${ROUTES.BLOG}${slug}`} />
116+
</div>
114117

115118
<Giscus />
116119
</Fragment>

‎src/pages/design/embeds.mdx

Lines changed: 6 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,12 @@ back to [Index](/design)
1515

1616
## Embeds
1717

18+
### Social share
19+
20+
<Share />
21+
22+
---
23+
1824
### astro-embed
1925

2026
#### Tweet
@@ -51,14 +57,3 @@ back to [Index](/design)
5157

5258
<LinkPreview id="https://astro.build/blog/welcome-world/" />
5359

54-
---
55-
56-
### Social share
57-
58-
#### md
59-
60-
<Share size="md" />
61-
62-
#### sm
63-
64-
<Share size="sm" />

0 commit comments

Comments
 (0)