Merge #140: fix browser issues

50133fa fix browser issues (Graeme Byrne)

Pull request description:

  * Duplicate was being used in `data/blog-posts` and `data/index-posts.ts`. Data now stored in data/posts.ts
    * `routes/+layout.ts`, `routes/(home)/+page.server.ts` and `routes/api/+server.ts` updated to access data from correct location.
  * Text in `prevNext` component modified to reflect issue #138
  * `.md` files added to `.prettierignore` so `CodeBlock` component can be applied to all code blocks.
  * `CodeBlock.svelte` component modified as mentioned in #52. Inspiration for change came from https://www.roboleary.net/2022/01/13/copy-code-to-clipboard-blog.html?utm_source=chatgpt.com
  * In order to solve issue #137, the reliance on unsupported `startViewTransition` is removed, ensuring more consistent behavior across different browsers and preventing navigation issues.
  ```
  const supportsViewTransition = typeof window !== 'undefined' && 'startViewTransition' in document;

  onNavigate((navigation) => {
  return new Promise((resolve) => {
  if (supportsViewTransition) {
  const transition = document.startViewTransition(async () => {
  if (contentDiv) {
  contentDiv.scrollTop = 0;
  }
  resolve();
  await navigation.complete;
  });
  } else {
  if (contentDiv) {
  contentDiv.scrollTop = 0;
  }
  resolve();
  }
  });
  });
  ```
  * Overlapping `PostTable.svelte` in blog posts as mentioned in #139. The below change explicitly handles the resize event with `on:resize`, preventing conflicts between automatic binding and reactive updates, ensuring smoother state management.
  ```
  <svelte:window on:resize={() => (size = window.innerWidth)} />

  <div class={size >= 1440 ? 'scroll-container' : ''} style={divStyle}>
  <div>
  <slot />
  </div>
  </div>
  ```

ACKs for top commit:
  josecelano:
    ACK 50133fa

Tree-SHA512: 4a042cc0a98abca811b9506e08e4d1edc614f0cce36e54286606e1801960e94d1947798de740b6f0ebf3e42a75e882b42cf8a27db9bff3d4ee2da847ff963d70

Author: josecelano

.prettierignore

@@ -14,3 +14,5 @@ node_modules
 package-lock.json
 pnpm-lock.yaml
 yarn.lock
+
+src/routes/blog/**/*.md

src/lib/components/molecules/CodeBlock.svelte

@@ -46,22 +46,24 @@
 </script>
 
 <div class="code-block" class:full-bleed={fullBleed} bind:this={codeBlockElement}>
-	{#if filename}
-		<div class="filename">{filename}</div>
-	{/if}
-	{#if lang}
-		<div class="lang">{lang}</div>
-	{/if}
-	<button
-		class={`copy-button ${showCheckmark ? 'copy-button-green' : 'copy-button-gray'}`}
-		onclick={copyToClipboard}
-	>
-		{#if showCheckmark}
-			<Icon icon="charm:tick" color="#6cdb2e" />
-		{:else}
-			<Icon icon="ion:copy-outline" color="#FFFFFF" />
+	<div class="code-block-info">
+		{#if filename}
+			<div class="filename">{filename}</div>
 		{/if}
-	</button>
+		{#if lang}
+			<div class="lang">{lang}</div>
+		{/if}
+		<button
+			class={`copy-button ${showCheckmark ? 'copy-button-green' : 'copy-button-gray'}`}
+			onclick={copyToClipboard}
+		>
+			{#if showCheckmark}
+				Code Copied <Icon icon="charm:tick" color="#6cdb2e" />
+			{:else}
+				Copy Code<Icon icon="ion:copy-outline" color="#FFFFFF" />
+			{/if}
+		</button>
+	</div>
 	<div class="code-content">
 		{#if code}
 			<pre><code
@@ -85,10 +87,10 @@
 		line-height: 1.33em;
 		border-radius: 8px;
 		box-shadow: var(--card-shadow);
-		padding: 12px 10px 20px 10px;
+		padding: 0 0 20px 0;
 		min-height: 80px;
 		background-color: #282c34 !important;
-
+		border: 1px solid gray;
 		margin: 30px 0;
 
 		:global(pre) {
@@ -111,17 +113,21 @@
 
 		.code-content code {
 			border-radius: 8px;
+			margin: 1rem 0.5rem 0 0.5rem;
+			padding: 20px;
+		}
+
+		.code-block-info {
+			display: flex;
+			justify-content: space-between;
+			border-bottom: 1px solid gray;
+			padding: 0.3rem 0.5rem;
 		}
 
 		.lang {
-			position: absolute;
-			right: 0;
-			top: -15px;
-			background-color: rgba(36, 36, 36, 1);
-			border-radius: 8px;
 			padding: 5px 10px;
 			z-index: 2;
-			font-size: 0.85em;
+			font-size: 1em;
 		}
 
 		.filename {
@@ -137,13 +143,16 @@
 		}
 
 		.copy-button {
-			position: absolute;
-			top: 1.5rem;
-			right: 1.5rem;
-			padding: 0.25rem;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			border: 1px solid gray;
 			border-radius: 0.375rem;
+			gap: 0.5rem;
+			padding: 0.25rem 0.5rem;
 			box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
 			cursor: pointer;
+			font-size: 0.85em;
 		}
 
 		.copy-button-green {

src/lib/components/molecules/PostTable.svelte

@@ -1,4 +1,3 @@
-<!-- @migration-task Error while migrating Svelte code: Can't migrate code with afterUpdate. Please migrate by hand. -->
 <script lang="ts">
 	import { onMount } from 'svelte';
 
@@ -13,12 +12,14 @@
 		}
 	};
 
-	onMount(updateStyles);
+	onMount(() => {
+		updateStyles();
+	});
 
 	$: updateStyles();
 </script>
 
-<svelte:window bind:innerWidth={size} />
+<svelte:window on:resize={() => (size = window.innerWidth)} />
 
 <div class={size >= 1440 ? 'scroll-container' : ''} style={divStyle}>
 	<div>

src/lib/components/singletons/PrevNextPost.svelte

@@ -43,7 +43,7 @@
 				<a href="/blog/{prevPost.meta.slug}">{prevPost?.meta?.title}</a>
 			</div>
 		{:else}
-			<h3 class="inactive">You are reading our first post.</h3>
+			<h3 class="inactive">You are reading our most recent post.</h3>
 		{/if}
 	</div>
 

src/lib/data/blog-posts/index.ts

@@ -28,6 +28,5 @@ export const fetchMarkdownPosts = async () => {
 			};
 		})
 	);
-
 	return allPosts;
 };

src/lib/data/blog-posts/utils.ts

@@ -1,4 +1,4 @@
-import { fetchMarkdownPosts } from '$lib/utils/index_posts';
+import { fetchMarkdownPosts } from '$lib/data/posts';
 import type { Contributor } from '$lib/utils/types';
 import { fetchWithCache } from '$lib/utils/cache';
 

src/lib/utils/index_posts.ts src/lib/data/posts.ts

@@ -4,18 +4,27 @@
 	import Header from '$lib/components/organisms/Header.svelte';
 	import Footer from '$lib/components/organisms/Footer.svelte';
 	import { onNavigate } from '$app/navigation';
+
 	let contentDiv: HTMLElement | null = null;
 
+	const supportsViewTransition = typeof window !== 'undefined' && 'startViewTransition' in document;
+
 	onNavigate((navigation) => {
 		return new Promise((resolve) => {
-			const transition = document.startViewTransition(async () => {
+			if (supportsViewTransition) {
+				const transition = document.startViewTransition(async () => {
+					if (contentDiv) {
+						contentDiv.scrollTop = 0;
+					}
+					resolve();
+					await navigation.complete;
+				});
+			} else {
 				if (contentDiv) {
-					// Fix scroll
 					contentDiv.scrollTop = 0;
 				}
 				resolve();
-				await navigation.complete;
-			});
+			}
 		});
 	});
 

src/routes/(home)/+page.server.ts

@@ -1,9 +1,10 @@
 export const prerender = true;
 
-import { filteredPosts } from '$lib/data/blog-posts';
+export const load = async ({ fetch }) => {
+	const response = await fetch(`/api`);
+	const posts = await response.json();
 
-export async function load() {
 	return {
-		posts: filteredPosts
+		posts
 	};
-}
+};

src/routes/+layout.svelte

@@ -1,4 +1,4 @@
-import { fetchMarkdownPosts } from '$lib/utils/index_posts';
+import { fetchMarkdownPosts } from '$lib/data/posts';
 import { json } from '@sveltejs/kit';
 
 export const GET = async () => {

src/routes/+layout.ts

@@ -1,4 +1,4 @@
-import { fetchMarkdownPosts } from '$lib/utils/index_posts';
+import { fetchMarkdownPosts } from '$lib/data/posts';
 
 export async function load({ params }) {
 	const post = await import(`../${params.slug}.md`);