From 469aa9c9ab124f9849a32d2f539d9293082426a4 Mon Sep 17 00:00:00 2001
From: Marko OLEKSIYENKO <marko.oleksiyenko@amadeus.com>
Date: Tue, 12 Sep 2023 12:49:02 +0200
Subject: [PATCH] feat(blog): Set up the basic blog post space

---
 demo/src/lib/layout/Code.svelte               |  13 ++-
 demo/src/lib/layout/Sample.svelte             |   8 --
 demo/src/lib/layout/TableOfContents.svelte    |  97 ++++++++++++++++++
 demo/src/routes/[framework]/+layout.svelte    |  79 +-------------
 demo/src/routes/blog/+page.svelte             |  24 +++++
 .../yyyy-mm-dd-template/+page.svelte          |  64 ++++++++++++
 demo/src/routes/blog/blog-preview.svelte      |  22 ++++
 demo/src/routes/blog/blog-styling.scss        |  13 +++
 demo/src/routes/blog/blog.model.ts            |   7 ++
 demo/src/routes/blog/latest.svelte            |  26 +++++
 demo/static/blog_placeholder.png              | Bin 0 -> 11798 bytes
 11 files changed, 267 insertions(+), 86 deletions(-)
 create mode 100644 demo/src/lib/layout/TableOfContents.svelte
 create mode 100644 demo/src/routes/blog/+page.svelte
 create mode 100644 demo/src/routes/blog/blog-pages/yyyy-mm-dd-template/+page.svelte
 create mode 100644 demo/src/routes/blog/blog-preview.svelte
 create mode 100644 demo/src/routes/blog/blog-styling.scss
 create mode 100644 demo/src/routes/blog/blog.model.ts
 create mode 100644 demo/src/routes/blog/latest.svelte
 create mode 100644 demo/static/blog_placeholder.png

diff --git a/demo/src/lib/layout/Code.svelte b/demo/src/lib/layout/Code.svelte
index 6e1cc91475..14ef8fa8bb 100644
--- a/demo/src/lib/layout/Code.svelte
+++ b/demo/src/lib/layout/Code.svelte
@@ -1,4 +1,7 @@
 <script lang="ts">
+	import Svg from '$lib/layout/Svg.svelte';
+	import {tooltip} from '$lib/tooltip/tooltip';
+	import clipboard from 'bootstrap-icons/icons/clipboard.svg?raw';
 	import './code.scss';
 	import hljs, {languageFromFileName} from './highlight';
 
@@ -12,10 +15,18 @@
 	$: formattedCode = appliedLanguage ? hljs.highlight(code, {language: appliedLanguage}).value : null;
 </script>
 
-<div class={`bg-light-subtle ${className}`}>
+<div class={`d-flex bg-light-subtle ${className}`}>
 	<pre class="mb-0"><code bind:this={container}
 			>{#if formattedCode != null}<!-- eslint-disable-line svelte/no-at-html-tags -->{@html formattedCode}{:else}{code}{/if}</code
 		></pre>
+	<div class="ms-auto">
+		<button
+			class="btn"
+			aria-label="copy to clipboard"
+			use:tooltip={{content: 'Copy to clipboard'}}
+			on:click={() => navigator.clipboard.writeText(code)}><Svg className={`align-middle icon-20`} svg={clipboard} /></button
+		>
+	</div>
 </div>
 
 <style lang="scss">
diff --git a/demo/src/lib/layout/Sample.svelte b/demo/src/lib/layout/Sample.svelte
index ecb7ef9031..55d1ae77d2 100644
--- a/demo/src/lib/layout/Sample.svelte
+++ b/demo/src/lib/layout/Sample.svelte
@@ -174,14 +174,6 @@
 					<button class="nav-link" class:active={selectedFileName === file} on:click={() => (selectedFileName = file)}>{file}</button>
 				</li>
 			{/each}
-			<li class="ms-auto">
-				<button
-					class="btn"
-					aria-label="copy to clipboard"
-					use:tooltip={{content: 'Copy to clipboard'}}
-					on:click={() => navigator.clipboard.writeText(code)}><Svg className={`align-middle icon-20`} svg={clipboard} /></button
-				>
-			</li>
 		</ul>
 		<div class="border border-top-0">
 			<Lazy component={() => import('./Code.svelte')} {code} fileName={selectedFileName} className="py-3 px-2 px-sm-4 code-sample">
diff --git a/demo/src/lib/layout/TableOfContents.svelte b/demo/src/lib/layout/TableOfContents.svelte
new file mode 100644
index 0000000000..b4d696ec3a
--- /dev/null
+++ b/demo/src/lib/layout/TableOfContents.svelte
@@ -0,0 +1,97 @@
+<script lang="ts">
+	export let visibleElements$: any;
+	export let elements$: any;
+
+	function getElementProperties(visibleElements$: any, element: HTMLElement, isVisible: boolean) {
+		const header = element.querySelector('h1,h2,h3') as HTMLElement;
+		if (header) {
+			const classnames = [`toc-link d-inline-block toc-${header.tagName.toLowerCase()}`];
+
+			const firstSubSection = element.querySelector('section');
+			if ((firstSubSection && visibleElements$().has(firstSubSection)) || (!firstSubSection && isVisible)) {
+				classnames.push('active');
+			}
+
+			return {
+				label: header.innerText,
+				href: header.querySelector('a')?.getAttribute('href') ?? '',
+				classname: classnames.join(' '),
+			};
+		} else {
+			return {
+				label: '',
+				href: '',
+				classname: '',
+			};
+		}
+	}
+</script>
+
+<div class="demo-toc col-auto d-none d-lg-flex">
+	{#if $elements$.length}
+		<div class="toc-content ms-2 border-start-1">
+			<div class="toc-title fw-bold pb-2 mb-1">On this page</div>
+			<ul class="list-unstyled mb-0 pb-0 pb-md-2 pe-lg-2 main-nav-list small">
+				{#each $elements$ as element}
+					{@const isVisible = $visibleElements$.has(element)}
+					{@const {label, classname, href} = getElementProperties(visibleElements$, element, isVisible)}
+					<li>
+						<a class={classname} aria-current={isVisible ? 'page' : undefined} {href}>
+							{label}
+						</a>
+					</li>
+				{/each}
+			</ul>
+		</div>
+	{/if}
+</div>
+
+<style lang="scss">
+	@import '../../../../common/variables';
+
+	.main-nav-list {
+		@include media-breakpoint-down(md) {
+			display: flex;
+			flex-direction: row;
+			justify-content: space-evenly;
+		}
+	}
+
+	@include media-breakpoint-up(md) {
+		.demo-toc {
+			position: sticky;
+			top: 0;
+			display: block !important;
+			height: calc(100vh - 6rem);
+			overflow-y: auto;
+		}
+	}
+
+	.toc {
+		&-link:hover,
+		&-link:focus {
+			color: var(--bs-emphasis-color);
+			background-color: var(--demo-sidebar-link-bg);
+		}
+		&-link {
+			padding: 0.1875rem 0.5rem;
+			color: var(--bs-body-color);
+			text-decoration: none;
+			border-left: 3px solid transparent;
+			transition: border-color 0.25s;
+
+			&.active {
+				color: var(--bs-emphasis-color);
+				border-left-color: var(--bs-primary);
+				transition: none;
+			}
+		}
+
+		&-h2 {
+			padding-left: 0.5rem;
+		}
+		&-h3 {
+			padding-left: 1rem;
+		}
+	}
+</style>
diff --git a/demo/src/routes/[framework]/+layout.svelte b/demo/src/routes/[framework]/+layout.svelte
index 1b34df6086..d36d63fc3c 100644
--- a/demo/src/routes/[framework]/+layout.svelte
+++ b/demo/src/routes/[framework]/+layout.svelte
@@ -3,31 +3,9 @@
 	import 'bootstrap/dist/css/bootstrap.css';
 	import {pathToRoot$, selectedFramework$, intersectionApi} from '../../lib/stores';
 	import {menu} from '../navigation';
+	import TableOfContents from '$lib/layout/TableOfContents.svelte';
 
 	const {elements$, visibleElements$} = intersectionApi;
-	function getElementProperties(element: HTMLElement, isVisible: boolean) {
-		const header = element.querySelector('h1,h2,h3') as HTMLElement;
-		if (header) {
-			const classnames = [`toc-link d-inline-block toc-${header.tagName.toLowerCase()}`];
-
-			const firstSubSection = element.querySelector('section');
-			if ((firstSubSection && visibleElements$().has(firstSubSection)) || (!firstSubSection && isVisible)) {
-				classnames.push('active');
-			}
-
-			return {
-				label: header.innerText,
-				href: header.querySelector('a')?.getAttribute('href') ?? '',
-				classname: classnames.join(' '),
-			};
-		} else {
-			return {
-				label: '',
-				href: '',
-				classname: '',
-			};
-		}
-	}
 </script>
 
 <div class="demo-layout row">
@@ -60,24 +38,7 @@
 	<div class="pb-4 col">
 		<slot />
 	</div>
-	<div class="demo-toc col-auto d-none d-lg-flex">
-		{#if $elements$.length}
-			<div class="toc-content ms-2 border-start-1">
-				<div class="toc-title fw-bold pb-2 mb-1">On this page</div>
-				<ul class="list-unstyled mb-0 pb-0 pb-md-2 pe-lg-2 main-nav-list small">
-					{#each $elements$ as element}
-						{@const isVisible = $visibleElements$.has(element)}
-						{@const {label, classname, href} = getElementProperties(element, isVisible)}
-						<li>
-							<a class={classname} aria-current={isVisible ? 'page' : undefined} {href}>
-								{label}
-							</a>
-						</li>
-					{/each}
-				</ul>
-			</div>
-		{/if}
-	</div>
+	<TableOfContents {visibleElements$} {elements$} />
 </div>
 
 <style lang="scss">
@@ -98,41 +59,5 @@
 			height: calc(100vh - 6rem);
 			overflow-y: auto;
 		}
-
-		.demo-toc {
-			position: sticky;
-			top: 0;
-			display: block !important;
-			height: calc(100vh - 6rem);
-			overflow-y: auto;
-		}
-	}
-
-	.toc {
-		&-link:hover,
-		&-link:focus {
-			color: var(--bs-emphasis-color);
-			background-color: var(--demo-sidebar-link-bg);
-		}
-		&-link {
-			padding: 0.1875rem 0.5rem;
-			color: var(--bs-body-color);
-			text-decoration: none;
-			border-left: 3px solid transparent;
-			transition: border-color 0.25s;
-
-			&.active {
-				color: var(--bs-emphasis-color);
-				border-left-color: var(--bs-primary);
-				transition: none;
-			}
-		}
-
-		&-h2 {
-			padding-left: 0.5rem;
-		}
-		&-h3 {
-			padding-left: 1rem;
-		}
 	}
 </style>
diff --git a/demo/src/routes/blog/+page.svelte b/demo/src/routes/blog/+page.svelte
new file mode 100644
index 0000000000..f175c1e4d4
--- /dev/null
+++ b/demo/src/routes/blog/+page.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+	import BlogPreview from './blog-preview.svelte';
+	import type {BlogPost} from './blog.model';
+	import Latest from './latest.svelte';
+
+	let blogs: BlogPost[] = [
+		{
+			header: 'Blog post header 1',
+			shortDescription: 'Short blog post description with catchy phrases 1',
+			author: 'Author',
+			publishDate: '09-11-2023',
+			href: '/blog/blog-pages/dd-mm-yyyy-template',
+		},
+	];
+</script>
+
+<Latest blogPost={blogs[blogs.length - 1]} />
+<div class="row">
+	{#each blogs as blog}
+		<div class="col-4 mb-5">
+			<BlogPreview blogPost={blog} />
+		</div>
+	{/each}
+</div>
diff --git a/demo/src/routes/blog/blog-pages/yyyy-mm-dd-template/+page.svelte b/demo/src/routes/blog/blog-pages/yyyy-mm-dd-template/+page.svelte
new file mode 100644
index 0000000000..b3aad96446
--- /dev/null
+++ b/demo/src/routes/blog/blog-pages/yyyy-mm-dd-template/+page.svelte
@@ -0,0 +1,64 @@
+<script lang="ts">
+	import Code from '$lib/layout/Code.svelte';
+	import Section from '$lib/layout/Section.svelte';
+	import TableOfContents from '$lib/layout/TableOfContents.svelte';
+	import {intersectionApi} from '$lib/stores';
+	import {onMount} from 'svelte';
+
+	let code = `import { Component } from '@angular/core';
+import { NgbAccordionModule } from '@ng-bootstrap/ng-bootstrap';
+
+@Component({
+  selector: 'df-demo-accordion-basic',
+  templateUrl: './accordion-basic.html',
+  standalone: true,
+  imports: [NgbAccordionModule]
+})
+export class NgbdAccordionBasic {}`;
+
+	const {elements$, visibleElements$} = intersectionApi;
+	let container: HTMLElement;
+
+	// needed to update the table of contents with scrollspy behavior
+	onMount(() => {
+		intersectionApi.patch({
+			elements: [...container.querySelectorAll('section')] as HTMLElement[],
+		});
+	});
+</script>
+
+<svelte:head>
+	<title>Blog post example</title>
+	<meta name="description" content="Blog post example" />
+</svelte:head>
+
+<div class="d-flex demo-layout flex-row mt-3 align-items-baseline" bind:this={container}>
+	<div class="col-10 mx-auto">
+		<Section label="Loram Ipsum" id="lorem-ipsum" level={2}>
+			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lobortis dolor quis dui condimentum, ut pharetra velit lobortis. Mauris a
+			elementum metus. Sed lacinia nisi eu diam venenatis porttitor. Morbi arcu nunc, efficitur vitae sem sed, commodo pulvinar tellus. Donec eu ipsum
+			consequat, mollis nibh at, pharetra tortor. Fusce sit amet lacus ac mi bibendum molestie a sed ante. In quis justo lorem. Phasellus placerat,
+			dolor at eleifend iaculis, lorem augue vestibulum risus, a fermentum libero augue vitae sem. Quisque porta turpis nec fermentum consequat.
+			Suspendisse vel molestie est. Aliquam mollis, nibh a iaculis sollicitudin, massa eros pulvinar massa, in rhoncus lectus nisl at nisi.
+			Suspendisse euismod vulputate turpis vitae tristique. Aenean tincidunt enim quis ante pellentesque imperdiet.
+
+			<Code {code} className="py-3 px-2 px-sm-4 code-sample" />
+		</Section>
+
+		<Section label="Nullam Enim" id="nullam-enim" level={2}>
+			Quisque molestie lacinia justo eget pharetra. Phasellus et metus mattis libero consequat vestibulum. Nam vitae dignissim sem, eu egestas libero.
+			Quisque fringilla quis ex vitae auctor. Nullam enim mi, posuere nec tempus a, tristique vel nisi. Nulla volutpat turpis eget turpis tempor
+			scelerisque. Nunc nec vehicula elit, at molestie nisi.
+		</Section>
+
+		<Section label="Vehicula Felis" id="vehicula-felis" level={2}>
+			In a ante vehicula felis ullamcorper sagittis. Sed dignissim mi sit amet magna vulputate rutrum. Donec pretium rhoncus posuere. Sed sit amet
+			erat quam. Mauris eu nulla pharetra, malesuada quam non, vestibulum erat. Sed malesuada elit eu tellus elementum, quis congue dui lacinia. Donec
+			facilisis erat purus, nec ornare sapien aliquet eget. Aliquam erat volutpat. Duis a eros magna. Donec varius neque non dignissim feugiat. Nullam
+			pellentesque egestas tempor. Maecenas accumsan turpis est, eu efficitur ex tempor posuere. Nam interdum aliquam nibh, eu ultrices velit pharetra
+			in. Etiam vitae urna hendrerit nisi ornare imperdiet eget in nisl.
+		</Section>
+	</div>
+
+	<TableOfContents {visibleElements$} {elements$} />
+</div>
diff --git a/demo/src/routes/blog/blog-preview.svelte b/demo/src/routes/blog/blog-preview.svelte
new file mode 100644
index 0000000000..46936de07f
--- /dev/null
+++ b/demo/src/routes/blog/blog-preview.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+	import './blog-styling.scss';
+	import type {BlogPost} from './blog.model';
+
+	export let blogPost: BlogPost;
+</script>
+
+<div class="d-flex flex-column">
+	<div>
+		<a class="blog-link" href={blogPost.href} aria-label="link to blog post" title="BlogPost">
+			<img class="blog-preview" src="blog_placeholder.png" alt="Blog placeholder" />
+			<div>
+				<h1>{blogPost.header}</h1>
+				{blogPost.shortDescription}
+			</div>
+		</a>
+	</div>
+	<div>
+		{blogPost.author}
+		{blogPost.publishDate}
+	</div>
+</div>
diff --git a/demo/src/routes/blog/blog-styling.scss b/demo/src/routes/blog/blog-styling.scss
new file mode 100644
index 0000000000..bf55253286
--- /dev/null
+++ b/demo/src/routes/blog/blog-styling.scss
@@ -0,0 +1,13 @@
+.blog-preview {
+	width: 100%;
+	object-fit: contain;
+}
+
+a.blog-link {
+	color: inherit !important;
+	text-decoration: none !important;
+}
+
+img {
+	border: 1px solid gray;
+}
diff --git a/demo/src/routes/blog/blog.model.ts b/demo/src/routes/blog/blog.model.ts
new file mode 100644
index 0000000000..d93392944b
--- /dev/null
+++ b/demo/src/routes/blog/blog.model.ts
@@ -0,0 +1,7 @@
+export interface BlogPost {
+	header: string;
+	shortDescription: string;
+	author: string;
+	publishDate: string;
+	href: string;
+}
diff --git a/demo/src/routes/blog/latest.svelte b/demo/src/routes/blog/latest.svelte
new file mode 100644
index 0000000000..aaec248113
--- /dev/null
+++ b/demo/src/routes/blog/latest.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+	import './blog-styling.scss';
+	import type {BlogPost} from './blog.model';
+
+	export let blogPost: BlogPost;
+</script>
+
+<div class="d-flex row my-5">
+	<div class="col-6">
+		<a class="blog-link" href={blogPost.href} aria-label="link to blog post" title="BlogPost">
+			<img class="blog-preview" src="blog_placeholder.png" alt="Blog placeholder" />
+		</a>
+	</div>
+	<div class="col-6 d-flex flex-column justify-content-between">
+		<div>
+			<a class="blog-link" href={blogPost.href} aria-label="link to blog post" title="BlogPost">
+				<h1>{blogPost.header}</h1>
+				{blogPost.shortDescription}
+			</a>
+		</div>
+		<div>
+			<h3>{blogPost.author}</h3>
+			<h3>{blogPost.publishDate}</h3>
+		</div>
+	</div>
+</div>
diff --git a/demo/static/blog_placeholder.png b/demo/static/blog_placeholder.png
new file mode 100644
index 0000000000000000000000000000000000000000..bb1655c7e6ab1ede859ba5463401dd3f96ee1ec6
GIT binary patch
literal 11798
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
M@xP;iXZ_WG0j9H_9{>OV

literal 0
HcmV?d00001