feat(share-buttons): Add social media share buttons component (#897)

* feat(share-buttons): Add social media share buttons component * chore(share-buttons): Add comments * fix: share buttons moved to Published --------- Co-authored-by: Quentin Deroubaix <[email protected]>
AmadeusITGroup · Sep 3, 2024 · 1f9e05f · 1f9e05f
1 parent a917905
commit 1f9e05f
Show file tree

Hide file tree

Showing 6 changed files with 95 additions and 22 deletions.
diff --git a/demo/src/lib/layout/Header.svelte b/demo/src/lib/layout/Header.svelte
@@ -17,6 +17,7 @@
 
 	$: tabs = $page.data.tabs ?? [];
 	$: builtPageTitle = getTitle(pageTitle || title, $selectedApiFramework$, $selectedPackageType$);
+	$: includesFwk = !!$page.params.framework;
 </script>
 
 <svelte:head>
@@ -34,18 +35,20 @@
 		<div class="d-flex ms-auto gap-2 justify-content-center">
 			{#if status === 'inprogress'}<span class="badge text-bg-warning">In progress</span>{/if}
 			{#if status === 'beta'}<span class="badge text-bg-info">Beta</span>{/if}
-			{#if $selectedApiFramework$ === 'typescript'}<span class="d-block d-md-none p-0"
-					><Svg svg={typescriptLogo} className="icon-24 d-flex position-relative" /></span
-				>{/if}
-			{#if $selectedApiFramework$ === 'react'}<span class="d-block d-md-none p-0"
-					><Svg svg={reactLogo} className="icon-24 d-flex position-relative" /></span
-				>{/if}
-			{#if $selectedApiFramework$ === 'angular'}<span class="d-block d-md-none p-0"
-					><Svg svg={angularLogo} className="icon-24 d-flex position-relative" /></span
-				>{/if}
-			{#if $selectedApiFramework$ === 'svelte'}<span class="d-block d-md-none p-0"
-					><Svg svg={svelteLogo} className="icon-24 d-flex position-relative" /></span
-				>{/if}
+			{#if includesFwk}
+				{#if $selectedApiFramework$ === 'typescript'}<span class="d-block d-md-none p-0"
+						><Svg svg={typescriptLogo} className="icon-24 d-flex position-relative" /></span
+					>{/if}
+				{#if $selectedApiFramework$ === 'react'}<span class="d-block d-md-none p-0"
+						><Svg svg={reactLogo} className="icon-24 d-flex position-relative" /></span
+					>{/if}
+				{#if $selectedApiFramework$ === 'angular'}<span class="d-block d-md-none p-0"
+						><Svg svg={angularLogo} className="icon-24 d-flex position-relative" /></span
+					>{/if}
+				{#if $selectedApiFramework$ === 'svelte'}<span class="d-block d-md-none p-0"
+						><Svg svg={svelteLogo} className="icon-24 d-flex position-relative" /></span
+					>{/if}
+			{/if}
 			{#if cssFramework === 'bootstrap'}<span class="d-block d-md-none p-0"
 					><Svg svg={bootstrapLogo} className="icon-24 d-flex logo-bootstrap position-relative" /></span
 				>{/if}

diff --git a/demo/src/lib/layout/Published.svelte b/demo/src/lib/layout/Published.svelte
@@ -1,7 +1,58 @@
-<script>
+<script lang="ts">
+	import {page} from '$app/stores';
+	import Svg from '$lib/layout/Svg.svelte';
+	import twitter from 'bootstrap-icons/icons/twitter-x.svg?raw';
+	import facebook from 'bootstrap-icons/icons/facebook.svg?raw';
+	import linkedin from 'bootstrap-icons/icons/linkedin.svg?raw';
+
+	import fbasso from '$resources/images/fbasso.webp';
+
+	type AuthorInfo = {
+		icon: string;
+		title: string;
+	};
+
+	const authorLogo = {
+		fbasso: {
+			icon: fbasso,
+			title: 'Fabrice Basso, Software engineer at Amadeus',
+		},
+	} satisfies Record<string, AuthorInfo>;
+
 	export let date;
+	export let author: keyof typeof authorLogo;
 
-	date = Intl.DateTimeFormat('en-US', {dateStyle: 'full'}).format(new Date(date));
+	$: encodedUrl = encodeURIComponent(`https://amadeusitgroup.github.io/AgnosUI/latest` + $page.url.pathname);
+	$: formattedDate = Intl.DateTimeFormat('en-US', {dateStyle: 'medium'}).format(new Date(date));
 </script>
 
-<strong class="d-flex mb-2">Published on {date}</strong>
+<div class="d-flex flex-wrap">
+	<div class="d-flex gap-3">
+		<img src={authorLogo[author].icon} alt="Publisher avatar" class="avatar" />
+		<div>
+			<strong>{authorLogo[author].title}</strong>
+			<div>Published on {formattedDate}</div>
+		</div>
+	</div>
+	<div class="d-flex flex-grow-1 justify-content-end gap-2 ms-5 align-self-end">
+		<a target="_blank" class="nav-link" href="https://twitter.com/share?url={encodedUrl}" aria-label="Share on Twitter">
+			<Svg className="icon-20 align-middle" svg={twitter} />
+		</a>
+		<a target="_blank" class="nav-link" href="https://www.facebook.com/sharer/sharer.php?u={encodedUrl}" aria-label="Share on Facebook">
+			<Svg className="icon-20 align-middle" svg={facebook} />
+		</a>
+		<a target="_blank" class="nav-link" href="https://www.linkedin.com/sharing/share-offsite/?url={encodedUrl}" aria-label="Share on LinkedIn">
+			<Svg className="icon-20 align-middle" svg={linkedin} />
+		</a>
+	</div>
+</div>
+<hr />
+
+<style>
+	.avatar {
+		vertical-align: middle;
+		width: 50px;
+		height: 50px;
+		border-radius: 50%;
+	}
+</style>
diff --git a/demo/src/resources/images/fbasso.webp b/demo/src/resources/images/fbasso.webp
diff --git a/demo/src/resources/images/tansu-blog.webp b/demo/src/resources/images/tansu-blog.webp
diff --git a/demo/src/routes/blog/2024-02-01/+page.svelte b/demo/src/routes/blog/2024-02-01/+page.svelte
@@ -3,13 +3,35 @@
 	import Published from '$lib/layout/Published.svelte';
 	import Markdown from '$lib/markdown/Markdown.svelte';
 	import source from './tansu-reactivity.md?raw';
+	import headerImg from '$resources/images/tansu-blog.webp';
+
+	const title = 'State management with Tansu';
+	const description =
+		'In AgnosUI, we employ Tansu to handle our widget states. This article explores the effective ways to use Tansu for broader state management, drawing upon our practical experience in developing AgnosUI.';
 </script>
 
 <svelte:head>
-	<title>State management with Tansu</title>
-	<meta name="description" content="Blog article exploring State Management with Tansu." />
+	<title>{title}</title>
+	<meta name="description" content={description} />
+	<!-- Twitter -->
+	<meta name="twitter:card" content="summary_large_image" />
+	<meta name="twitter:title" content={title} />
+	<meta property="twitter:domain" content="amadeusitgroup.github.io" />
+	<meta property="twitter:url" content="https://amadeusitgroup.github.io/AgnosUI/latest/blog/2024-02-01" />
+	<meta name="twitter:image" content={headerImg} />
+	<meta name="twitter:image:alt" content="Blog header image" />
+	<meta name="twitter:description" content={description} />
+	<!-- Open Graph general (Facebook, Pinterest & Google+) -->
+	<meta name="og:title" content={title} />
+	<meta name="og:description" content={description} />
+	<meta name="og:url" content="https://amadeusitgroup.github.io/AgnosUI/latest/blog/2024-02-01" />
+	<meta name="og:site_name" content="AgnosUI" />
+	<meta name="og:locale" content="en" />
+	<meta name="og:type" content="website" />
+	<meta property="og:image" content={headerImg} />
 </svelte:head>
 
-<Header title="State management with Tansu" />
-<Published date="02/01/2024" />
+<Header {title} />
+<Published date="02/01/2024" author="fbasso" />
+<img src={headerImg} alt="frontend development" class="w-100 mb-3" />
 <Markdown {source} />
diff --git a/demo/src/routes/blog/2024-02-01/tansu-reactivity.md b/demo/src/routes/blog/2024-02-01/tansu-reactivity.md
@@ -406,6 +406,3 @@ In this exploration of state management with Tansu, we've delved into powerful t
 The examples presented, highlight the flexibility Tansu offers in managing state at varying levels of complexity. Whether you're dealing with local or server-driven data, the principles explored here provide a foundation for structuring your application's state in a way that promotes maintainability and scalability.
 
 Incorporating these techniques into your projects not only enhances the clarity of your code but also contributes to a more robust and responsive state management.
-
-**Fabrice Basso<br>
-Software engineer at Amadeus**