-
Notifications
You must be signed in to change notification settings - Fork 3
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat(blog): icon to share article by url #267
Conversation
Deploying angular-love-client with
|
Latest commit: |
5bbc4c0
|
Status: | ✅ Deploy successful! |
Preview URL: | https://c2d3f80a.angular-love-client.pages.dev |
Branch Preview URL: | https://feat-share-article-url.angular-love-client.pages.dev |
libs/blog/articles/feature-article/src/lib/article-share-icons/article-share-icons.component.ts
Outdated
Show resolved
Hide resolved
libs/blog/articles/feature-article/src/lib/article-share-icons/article-share-icons.component.ts
Outdated
Show resolved
Hide resolved
libs/blog/articles/feature-article/src/lib/article-share-icons/article-share-icons.component.ts
Outdated
Show resolved
Hide resolved
1554a7c
to
90da38e
Compare
isCopyUrlClicked = signal(false); | ||
copyUrlIcon = viewChild<ElementRef>('copyUrlIcon'); | ||
|
||
protected readonly window = window; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
not needed if we expose snippet below to another computed
articleUrl = computed(() => this.language() === 'pl_PL'
? `https://angular.love/${this.slug()}`
: `https://angular.love/en/${this.slug()}`;)
@@ -18,7 +18,8 @@ export type IconType = | |||
| 'send' | |||
| 'tick' | |||
| 'twitter-x' | |||
| 'youtube'; | |||
| 'youtube' | |||
| 'link'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
we don't use this component any longer, this is not needed
@if (!isCopyUrlClicked()) { | ||
<fast-svg name="link" class="text-al-foreground" size="28" /> | ||
} @else { | ||
<fast-svg name="circle-check" class="text-al-foreground" size="28" /> | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
this can be a signal that contains an icon name
@if (!isCopyUrlClicked()) { | |
<fast-svg name="link" class="text-al-foreground" size="28" /> | |
} @else { | |
<fast-svg name="circle-check" class="text-al-foreground" size="28" /> | |
} | |
<fast-svg [name]="link()" class="text-al-foreground" size="28" /> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
nvm, it looks like it doesn't handle it, we have to provide names explicitly
@@ -39,6 +70,12 @@ export class ArticleShareIconsComponent { | |||
title = input.required<string>(); | |||
language = input.required<string>(); | |||
|
|||
isCopyUrlClicked = signal(false); | |||
copyUrlIcon = viewChild<ElementRef>('copyUrlIcon'); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
i don't see a condition that prevents this from being required
copyUrlIcon = viewChild<ElementRef>('copyUrlIcon'); | |
copyUrlIcon = viewChild.required<ElementRef>('copyUrlIcon'); |
and there is no need to use
if (!this.copyUrlIcon()) return;
below
} @else { | ||
<fast-svg name="circle-check" class="text-al-foreground" size="28" /> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
there will be a frame where unloaded icon shows up on the screen as there are some optimizations in this component, so it's better to load them both and use classes to hide one or another
TranslocoDirective, | ||
FastSvgComponent, | ||
CdkCopyToClipboard, | ||
NgClass, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
is this used?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
try this
- no viewchild
- no renderer
- no window
- less code
import { CdkCopyToClipboard } from '@angular/cdk/clipboard';
import {
Component,
computed,
input,
signal,
} from '@angular/core';
import { TranslocoDirective } from '@jsverse/transloco';
import { FastSvgComponent } from '@push-based/ngx-fast-svg';
type ShareItem = {
href: string;
icon: string;
ariaLabel: string;
};
@Component({
standalone: true,
selector: 'al-article-share-icons',
imports: [
TranslocoDirective,
FastSvgComponent,
CdkCopyToClipboard,
],
styleUrls: ['./article-share-icons.component.scss'],
template: `
<div *transloco="let t" class="flex items-center gap-4">
<span class="text-lg font-bold">
{{ t('articleShareIcons.title') }}
</span>
@for (item of items(); track $index) {
<a
role="button"
target="_blank"
[attr.aria-label]="t(item.ariaLabel)"
[href]="item.href"
>
<fast-svg class="text-al-foreground" [name]="item.icon" size="28" />
</a>
}
<a
role="button"
target="_blank"
[attr.aria-label]="t('articleShareIcons.urlAriaLabel')"
[class.url-icon-animated]="animating()"
[cdkCopyToClipboard]="articleUrl()"
(animationend)="animating.set(false)"
(click)="animating.set(true)"
>
<fast-svg [class.!hidden]="animating()" name="link" class="text-al-foreground" size="28" />
<fast-svg [class.!hidden]="!animating()" name="circle-check" class="text-al-foreground" size="28" />
</a>
</div>
`,
})
export class ArticleShareIconsComponent {
readonly slug = input.required<string>();
readonly title = input.required<string>();
readonly language = input.required<string>();
readonly animating = signal(false);
readonly articleUrl = computed(() => this.language() === 'pl_PL'
? `https://angular.love/${this.slug()}`
: `https://angular.love/en/${this.slug()}`);
readonly items = computed<ShareItem[]>(() => {
const text = encodeURIComponent(this.title());
const url = this.articleUrl();
return [
{
icon: 'twitter-x',
href: `https://x.com/intent/tweet?text=${text}&url=${url}&hashtags=angularlove`,
ariaLabel: 'articleShareIcons.twitterAriaLabel',
},
{
icon: 'linkedIn',
href: `https://www.linkedin.com/shareArticle?mini=true&url=${url}`,
ariaLabel: 'articleShareIcons.linkedInAriaLabel',
},
{
icon: 'facebook',
href: `https://www.facebook.com/sharer/sharer.php?u=${url}`,
ariaLabel: 'articleShareIcons.facebookAriaLabel',
},
];
});
}
90da38e
to
07a5a6d
Compare
@@ -13,16 +14,21 @@ type ShareItem = { | |||
@Component({ | |||
standalone: true, | |||
selector: 'al-article-share-icons', | |||
imports: [IconComponent, TranslocoDirective, FastSvgComponent], | |||
imports: [ | |||
IconComponent, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
this can be removed
07a5a6d
to
5bbc4c0
Compare
No description provided.