feat(blog): icon to share article by url

[majahendzel-va]

No description provided.

[cloudflare-pages]

Deploying angular-love-client with    Cloudflare Pages

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

View logs

[DDonochVA]

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()}`;)

[DDonochVA]

we don't use this component any longer, this is not needed

[DDonochVA]

this can be a signal that contains an icon name

Suggested change

	@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" />

[DDonochVA]

nvm, it looks like it doesn't handle it, we have to provide names explicitly

[DDonochVA]

i don't see a condition that prevents this from being required

Suggested change

	copyUrlIcon = viewChild<ElementRef>('copyUrlIcon');
	copyUrlIcon = viewChild.required<ElementRef>('copyUrlIcon');

and there is no need to use

if (!this.copyUrlIcon()) return;

below

[DDonochVA]

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

[DDonochVA]

is this used?

[DDonochVA]

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',
      },
    ];
  });
}

[DDonochVA]

this can be removed