Fix duplicate <p> rendering and organize tests

README.md

@@ -152,6 +152,18 @@ Below are VS Code extensions used in this project.
 
 ## Development
 
+### Useful Commands
+
+#### Convert `.ndjson` to `.json`
+
+Required software: `jq`
+
+```bash
+jq --slurp '.' in.json > out.json
+```
+
+Retrieved from: <https://stackoverflow.com/questions/45456414/convert-json-lines-to-json-array-using-jq>
+
 ### Route Enforcement
 
 To enforce categories and routes, we are using `src/params` to enforce only
@@ -169,12 +181,7 @@ of SvelteKit.
 CI requires unit tests and perhaps integration tests if you could secure a
 development key. This comes with managing the secret on GitHub, though.
 
-We are either using Cloudflare Pages or Vercel to deploy the frontend. The
-backend is deployed via the Sanity CLI deploy command. The frontend requires the
-environment variables to be injected at build time in order to build and deploy
-successfully. These can be accessed in either Cloudflare page's or Vercel's
-appropriate deploy configuration settings. Make sure all of the .env.example
-fields are used in the deployment environment.
+The frontend is deployed to Cloudflare pages. The backend is deployed via the Sanity CLI deploy command. The frontend requires the environment variables to be injected at build time in order to build and deploy successfully. These can be accessed in either Cloudflare page's or Vercel's appropriate deploy configuration settings. Make sure all of the .env.example fields are used in the deployment environment.
 
 ## Useful Links
 

package.json

@@ -25,7 +25,8 @@
     "*.{html,css,json,svelte}": ["yarn prettier --write"]
   },
   "dependencies": {
-    "@portabletext/svelte": "^2.1.11",
+    "@eirikk/portabletext-2-svelte-5": "^0.1.0-alpha.2",
+    "@portabletext/svelte": "^2",
     "@sanity/client": "^6.22.5",
     "@sanity/icons": "^3.4.0",
     "@sanity/image-url": "^1.1.0",
@@ -74,5 +75,8 @@
     "vite": "^5.4.11",
     "vitest": "^2.1.5",
     "wrangler": "^3.90.0"
+  },
+  "resolutions": {
+    "@portabletext/svelte": "npm:@eirikk/[email protected]"
   }
 }

packages/frontend/src/components/Header.svelte

@@ -1,4 +1,5 @@
 <script>
+	import { site } from '$lib/variables';
 	import Navbar from './general/Navbar.svelte';
 
 	import SiteTitle from './SiteTitle.svelte';
@@ -8,7 +9,7 @@
 	<a href="/" class="center">
 		<div class="w-100 flex flex-wrap items-center ma0 pa0">
 			<div class="mw3 mw4-ns">
-				<img src="/favicon.svg" alt="On Magnolia Square logo" class="mw-100" />
+				<img src="/favicon.svg" alt={`${site.name} logo`} class="mw-100" />
 			</div>
 			<div>
 				<SiteTitle />

packages/frontend/src/components/embeds/EmbeddedLink.svelte

@@ -11,7 +11,7 @@
 	let link = parseEmbedLink(portableText.value.contentUrl);
 </script>
 
-<div class="mb4">
+<div class="mv4">
 	{#if link.name == 'spotify'}
 		<SpotifyEmbed spotifyPath={link.path!} />
 	{/if}

packages/frontend/src/components/portabletext/ArticleImage.svelte

@@ -8,31 +8,33 @@
 	let { portableText }: Props = $props();
 </script>
 
-<figure class="ma2 mb4 mw6 center">
+<figure role="group" class="ma2 mb4 mw6 center">
 	<img
 		src={urlFor(portableText.value).fit('max').auto('format').url()}
 		alt={portableText.value.alt}
 		loading="lazy"
 	/>
-	{#if portableText.value.title}
-		<h4 class="ph1 fw5 i ma0 mb3 mt2">{portableText.value.title}</h4>
-	{/if}
-	{#if portableText.value.description || portableText.value.attrs.creditLine}
-		<figcaption class="fw5 f6 gray ph1">
-			<div class="flex flex-column">
-				{#if portableText.value.description}
-					<div>
-						{portableText.value.description}
+	<figcaption>
+		{#if portableText.value.title}
+			<h2 id="fig-title" class="ph1 fw5 i ma0 mb3 mt2 f4">{portableText.value.title}</h2>
+		{/if}
+		{#if portableText.value.description || portableText.value.attrs.creditLine}
+			<div class="fw5 f6 gray ph1">
+				<div class="flex flex-column">
+					{#if portableText.value.description}
+						<div>
+							{portableText.value.description}
+						</div>
+					{/if}
+					<div class="mt1">
+						<p class="pa0 ma0 i o-40">
+							Photo credit: {portableText.value.attrs.creditLine}
+						</p>
 					</div>
-				{/if}
-				<div class="mt1">
-					<p class="pa0 ma0 i o-40">
-						Photo credit: {portableText.value.attrs.creditLine}
-					</p>
 				</div>
 			</div>
-		</figcaption>
-	{/if}
+		{/if}
+	</figcaption>
 </figure>
 
 <style>

packages/frontend/src/components/portabletext/ArticleSingleComponentBlock.svelte

@@ -32,10 +32,13 @@
 {:else if style === 'blockquote'}
 	<blockquote>{@render children?.()}</blockquote>
 {:else if style === 'normal'}
-	<!-- add class `db` to display as block, rather than inline <p> -->
-	<p class="lh-copy f5 f4-l tracked-02 fw4 pa0 mt0 mb4 tl hyphenate db w-100">
-		{@render children?.()}
-	</p>
+	{#if value.children.length === 1 && value.children[0].text === ''}
+		<br />
+	{:else}
+		<p class="lh-copy f5 f4-l tracked-02 fw3 pa0 pb0 mt0 mb2 tl hyphenate w-100 db">
+			{@render children?.()}
+		</p>
+	{/if}
 {:else}
 	{@render children?.()}
 {/if}

packages/frontend/src/lib/defaultComponents/DefaultPTBlock.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
 	import type { BlockComponentProps } from '$lib/rendererTypes';
+	import type { Snippet } from 'svelte';
 
 	interface Props {
 		portableText: BlockComponentProps;
-		children?: import('svelte').Snippet;
+		children?: Snippet;
 	}
 
 	let { portableText, children }: Props = $props();

packages/frontend/src/lib/defaultComponents/DefaultPTLink.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
 	import type { MarkComponentProps } from '$lib/rendererTypes';
+	import type { Snippet } from 'svelte';
 
 	interface Props {
 		portableText: MarkComponentProps;
-		children?: import('svelte').Snippet;
+		children?: Snippet;
 	}
 
 	let { portableText, children }: Props = $props();

packages/frontend/src/routes/(app)/category/[category=categories]/[slug]/+page.server.ts

@@ -6,8 +6,6 @@ import type { Article } from '$lib/schema';
 import type { PageServerLoad } from './$types';
 
 export const load: PageServerLoad = (async (event: ServerLoadEvent) => {
-	let sanityQuery: string;
-
 	const { category, slug } = event.params;
 
 	/**

packages/frontend/src/routes/(app)/category/[category=categories]/[slug]/+page.svelte

@@ -8,15 +8,10 @@
 	import ArticleLink from '$components/portabletext/ArticleLink.svelte';
 	import NormalCentering from '$components/NormalCentering.svelte';
 	import { urlFor } from '$lib/sanity';
-	import {
-		PortableText,
-		ArticleSingleArticleBlock,
-		ArticleImage,
-		ArticleBodyMarks,
-		Tag
-	} from '$lib';
+	import { ArticleSingleArticleBlock, ArticleImage, ArticleBodyMarks, Tag } from '$lib';
 	import { fly } from 'svelte/transition';
 	import ArticleLeadIn from '$components/portabletext/ArticleLeadIn.svelte';
+	import { PortableText } from '@portabletext/svelte';
 
 	interface Props {
 		data: PageData;
@@ -111,7 +106,6 @@
 				}}
 			/>
 		</div>
-		<!-- <NormalCentering></NormalCentering> -->
 	</section>
 </article>
 

packages/frontend/src/hooks.test.ts → packages/frontend/src/tests/hooks.test.ts

@@ -1,5 +1,5 @@
 import { describe, it, expect, vi } from 'vitest';
-import { preflightOptions } from './hooks.server';
+import { preflightOptions } from '../hooks.server';
 
 describe('preflightOptions', () => {
 	it('should return 200 OK for OPTIONS requests', async () => {

packages/frontend/src/sanity.test.ts → packages/frontend/src/tests/sanity.test.ts

@@ -5,11 +5,10 @@ import {
 	getConditions,
 	getIdx,
 	getOrder,
-	sanityFetch,
 	unequal
 } from '$lib/sanity';
 import type { Query } from '$lib/schema';
-import { describe, it, expect, vi } from 'vitest';
+import { describe, it, expect } from 'vitest';
 
 describe('equal', () => {
 	it('returns correct GROQ query string for string comparison', () => {