Skip to content

Commit 77dcae2

Browse files
webstackdevwebstackdev
committed
Initial restyle of Social Share component
1 parent 75d6f76 commit 77dcae2

6 files changed

Lines changed: 30 additions & 74 deletions

File tree

‎_TODO.md‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -130,8 +130,6 @@ https://mermaid.js.org/config/directives.html
130130

131131
- Add a copyright notice to content
132132

133-
- Time in prose is causing a line break, and the colon and minutes to be removed - "2:47 AM" in `src/content/articles/mtls-certificate-rotation-service-mesh-authentication/pdf.mdx`. Times like "11:59:59" are breaking across two lines - `src/content/articles/rate-limiting-token-bucket-leaky-bucket-implementation/index.mdx` in "Algorithm Overview" section
134-
135133
- We need to exclude "Footnotes" from the ToC list of links. Right now it shows at the bottom if there's a Footnotes H2 (footnotes in the article).
136134

137135
- If a reader has already given their email address - newsletter signup, contact form, download registration, then the download CTA on short form articles should go directly to the HTML version of the deep dive, and it should have a PDF download button. Think this workflow through - maybe a "Short / Deep-Dive" slider button on top and don't show the CTA + the PDF download button.

‎src/components/Content/Layout/index.astro‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -80,21 +80,23 @@ const { author, article, path, readingTime, section } = Astro.props
8080
aria-labelledby="article-share-title"
8181
slot="after-content"
8282
>
83-
<div class="flex flex-col md:flex-row md:items-center md:justify-between gap-6">
84-
<div>
85-
<h2 class="text-lg font-semibold mb-2" id="article-share-title">
83+
<WebMentions url={`https://www.webstackbuilders.com${path}`} />
84+
<div class="flex flex-col gap-6">
85+
<div class="flex flex-col sm:flex-row sm:justify-start sm:items-center gap-2">
86+
<h2
87+
class="text-lg font-semibold"
88+
id="article-share-title"
89+
>
8690
Share this article
8791
</h2>
88-
<p class="text-content-active text-sm">
92+
<p class="text-content-active text-sm sm:text-right sm:ml-6">
8993
Found this helpful? Share it with others who might benefit.
9094
</p>
9195
</div>
92-
<WebMentions url={`https://www.webstackbuilders.com${path}`} />
9396
<Shares
9497
url={`https://www.webstackbuilders.com${path}`}
9598
title={article.data.title}
9699
description={`Read "${article.data.title}" on Webstack Builders`}
97-
class="shrink-0"
98100
/>
99101
</div>
100102
</section>

‎src/components/Social/Shares/client/index.ts‎

Lines changed: 7 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import { LitElement, html, nothing } from 'lit'
1+
import { LitElement, html } from 'lit'
2+
import { ifDefined } from 'lit/directives/if-defined.js'
23
import { unsafeHTML } from 'lit/directives/unsafe-html.js'
34
import { addScriptBreadcrumb } from '@components/scripts/errors'
45
import { handleScriptError } from '@components/scripts/errors/handler'
@@ -10,11 +11,8 @@ import { queryMetaDescription, querySocialShareIconMarkup } from './selectors'
1011

1112
const COMPONENT_TAG_NAME = 'social-share-element'
1213
const DEFAULT_NETWORKS = 'x,linkedin,bluesky,reddit,mastodon'
13-
const DEFAULT_LABEL = 'Share:'
1414
const MASTODON_MODAL_ID = 'mastodon-modal'
1515

16-
let socialShareInstanceCounter = 0
17-
1816
export class SocialShareElement extends LitElement {
1917
static registeredName = COMPONENT_TAG_NAME
2018

@@ -23,7 +21,6 @@ export class SocialShareElement extends LitElement {
2321
title: { type: String },
2422
description: { type: String },
2523
layout: { type: String },
26-
labelText: { type: String, attribute: 'label-text' },
2724
socialNetworksAttr: { type: String, attribute: 'social-networks' },
2825
containerClass: { type: String, attribute: 'container-class' },
2926
iconBankId: { type: String, attribute: 'icon-bank-id' },
@@ -33,11 +30,9 @@ export class SocialShareElement extends LitElement {
3330
declare title: string
3431
declare description: string
3532
declare layout: 'horizontal' | 'vertical'
36-
declare labelText: string
3733
declare socialNetworksAttr: string
3834
declare containerClass: string
3935
declare iconBankId: string
40-
private labelId: string
4136
private iconMarkupCache: Map<string, string>
4237

4338
constructor() {
@@ -46,12 +41,9 @@ export class SocialShareElement extends LitElement {
4641
this.title = ''
4742
this.description = ''
4843
this.layout = 'horizontal'
49-
this.labelText = DEFAULT_LABEL
5044
this.socialNetworksAttr = DEFAULT_NETWORKS
5145
this.containerClass = ''
5246
this.iconBankId = ''
53-
socialShareInstanceCounter += 1
54-
this.labelId = `social-share-label-${socialShareInstanceCounter}`
5547
this.iconMarkupCache = new Map()
5648
}
5749

@@ -63,31 +55,20 @@ export class SocialShareElement extends LitElement {
6355
const shareData = this.getShareData()
6456
const shareText = `${shareData.text} ${shareData.url}`.trim()
6557
const containerClassList = [
66-
styles.container,
6758
'social-share',
6859
this.layout === 'vertical' ? 'flex flex-col gap-2' : 'flex flex-wrap gap-3',
60+
'max-sm:justify-center',
6961
this.containerClass,
7062
]
7163
.filter(Boolean)
7264
.join(' ')
7365

74-
const labelClassList = [
75-
styles.label,
76-
'social-share__label text-sm font-semibold text-content-active mr-2 self-center',
77-
]
78-
.filter(Boolean)
79-
.join(' ')
80-
81-
const hasLabelText = Boolean(this.labelText?.trim())
82-
8366
return html`
8467
<div
8568
class="${containerClassList}"
8669
role="group"
87-
aria-labelledby=${hasLabelText ? this.labelId : nothing}
88-
aria-label=${hasLabelText ? nothing : 'Share this content'}
70+
aria-label="Share this content"
8971
>
90-
<span id=${this.labelId} class="${labelClassList}">${this.labelText}</span>
9172
${this.selectedPlatforms.map(platform =>
9273
this.renderPlatform(platform, shareData, shareText)
9374
)}
@@ -123,7 +104,7 @@ export class SocialShareElement extends LitElement {
123104
const displayName = platform.id === 'x' ? 'X.com' : platform.name
124105
const buttonClassList = [
125106
styles.button,
126-
'social-share__button inline-flex items-center gap-2 px-4 py-2 rounded-lg text-white font-medium transition-colors hover:shadow-md no-underline hover:no-underline',
107+
'social-share__button relative inline-flex items-center gap-2 px-4 py-2 rounded-lg text-white font-medium transition-colors hover:shadow-md no-underline hover:no-underline hover:-translate-y-px active:translate-y-0 focus-visible:outline-none',
127108
platform.colorClasses,
128109
]
129110
.filter(Boolean)
@@ -136,8 +117,8 @@ export class SocialShareElement extends LitElement {
136117
type="button"
137118
class="${buttonClassList}"
138119
aria-label="${platform.ariaLabel}"
139-
aria-haspopup=${isMastodon ? 'dialog' : nothing}
140-
aria-controls=${isMastodon ? MASTODON_MODAL_ID : nothing}
120+
aria-haspopup=${ifDefined(isMastodon ? 'dialog' : undefined)}
121+
aria-controls=${ifDefined(isMastodon ? MASTODON_MODAL_ID : undefined)}
141122
data-platform="${platform.id}"
142123
data-share="${platform.id}"
143124
data-share-text="${shareText}"

‎src/components/Social/Shares/index.astro‎

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -40,11 +40,21 @@ const iconBankId = `social-share-icon-bank-${Math.random().toString(36).slice(2)
4040
---
4141

4242
<div id={iconBankId} hidden aria-hidden="true">
43-
<span data-social-share-icon="x"><Icon icon="x" size={6} color="inherit" /></span>
44-
<span data-social-share-icon="linkedin"><Icon icon="linkedin" size={6} color="inherit" /></span>
45-
<span data-social-share-icon="bluesky"><Icon icon="bluesky" size={6} color="inherit" /></span>
46-
<span data-social-share-icon="reddit"><Icon icon="reddit" size={6} color="inherit" /></span>
47-
<span data-social-share-icon="mastodon"><Icon icon="mastodon" size={6} color="inherit" /></span>
43+
<span data-social-share-icon="x">
44+
<Icon icon="x" size={6} color="inherit" />
45+
</span>
46+
<span data-social-share-icon="linkedin">
47+
<Icon icon="linkedin" size={6} color="inherit" />
48+
</span>
49+
<span data-social-share-icon="bluesky">
50+
<Icon icon="bluesky" size={6} color="inherit" />
51+
</span>
52+
<span data-social-share-icon="reddit">
53+
<Icon icon="reddit" size={6} color="inherit" />
54+
</span>
55+
<span data-social-share-icon="mastodon">
56+
<Icon icon="mastodon" size={6} color="inherit" />
57+
</span>
4858
</div>
4959

5060
<social-share-element
@@ -56,7 +66,6 @@ const iconBankId = `social-share-icon-bank-${Math.random().toString(36).slice(2)
5666
social-networks={socialNetworksAttr}
5767
container-class={containerClassAttr}
5868
icon-bank-id={iconBankId}
59-
label-text="Share:"
6069
>
6170
</social-share-element>
6271

‎src/components/Social/Shares/index.module.css‎

Lines changed: 0 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,3 @@
1-
.button:hover {
2-
.button {
3-
position: relative;
4-
text-decoration: none;
5-
}
6-
7-
.button:hover {
8-
text-decoration: none;
9-
transform: translateY(-1px);
10-
}
11-
12-
.button:focus-visible {
13-
outline: none;
14-
}
15-
161
.button:focus-visible::after {
172
border: 2px solid var(--color-spotlight);
183
border-radius: 0;
@@ -21,20 +6,3 @@
216
pointer-events: none;
227
position: absolute;
238
}
24-
25-
.button:active {
26-
transform: translateY(0);
27-
}
28-
29-
@media (width < 40em) {
30-
.container {
31-
justify-content: center;
32-
}
33-
34-
.label {
35-
margin-bottom: 0.5rem;
36-
text-align: center;
37-
width: 100%;
38-
}
39-
}
40-
}

‎src/components/Social/Shares/index.module.css.d.ts‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
declare const styles: {
22
readonly button: string
3-
readonly container: string
4-
readonly label: string
53
}
64

75
export default styles

0 commit comments

Comments
 (0)