darkicewolf50_site/src/routes/blogs/[slug]/+page.svelte

<script>
	import { page } from '$app/state';
	let pageNum = $derived(page.params.slug);
	let numLimit = $state(10);

	// $inspect(page.params.slug);

	// $inspect(numLimit);

	let blogsPromise = $state(null);

	$effect(async () => {
		try {
			const res = await fetch(
				`https://darkicewolf50cloud.bajacloud.duckdns.org/blogs/${numLimit}/${pageNum}`
			);
			if (!res.ok) {
				blogsPromise = null;
				return;
			}
			const data = await res.json();
			blogsPromise = Array.isArray(data) ? data : null;
		} catch (e) {
			console.error('Fetch error:', e);
			blogsPromise = null;
		}
	});
</script>

<title>Brock Tomlinson - Blogs - {pageNum}</title>
<meta name="robots" content="noindex, nofollow" />
<!-- // document::Stylesheet { href: asset!("/assets/styling/blog.css") } -->
<div id="blogs">
	<div id="blogs-title">
		<h1>Blogs</h1>
		<p>
			This is a collection of blog posts, ranging from tutorials, technologies I found interesting,
			and opinion pieces
		</p>
		<p>These blogs are my opinion and mine alone</p>
	</div>
	<div id="blogs-on-show">
		{#await blogsPromise}
			<div id="blog-loading"><p>Loading blogs...</p></div>
		{:then blogs}
			{#if blogs && blogs.length > 0}
				{#each blogs as blog, blogIndex}
					<a
						class="blog-preview"
						href={'/blog/' + blog.blog_file_name}
						key={blog.blog_file_name + blogIndex}
					>
						<div class="blog-info">
							<h1>{blog.blog_title}</h1>
							<div>
								<ul>
									{#each blog.tags as tag, tagIndex}
										<li key={tag + tagIndex}>{tag}</li>
									{/each}
								</ul>
								<p>{blog.date_last_edit}</p>
							</div>
						</div>
						<div class="blog_content">{@html blog.html_blog_content}</div>
						<button>Read More Here</button>
					</a>
				{/each}
			{:else}
				<div id="blog-out-of">
					<p>No more blogs available</p>
					<a href="/blogs/0"><button>Go Back</button></a>
				</div>
			{/if}
		{:catch error}
			<div id="blog-loading"><p>An error has occurred</p></div>
		{/await}
	</div>
	<div id="blog-nav">
		{#if pageNum > 0}
			<a href={'/blogs/' + (pageNum - 1)}><button>{'<-- Go Back'}</button></a>
		{/if}
		<div>
			<label for="selectHowManyShow">display: </label>
			<select name="selectHowManyShow" id="selectHowManyShow" bind:value={numLimit}>
				<option value={10}>10</option>
				<option value={25}>25</option>
				<option value={50}>50</option>
				<option value={100}>100</option>
			</select>
		</div>
		<a href={'/blogs/' + (pageNum + 1)}>{'Next -->'}</a>
	</div>
</div>

<style>
	.blog-info {
		display: flex;
		flex-direction: column;
	}

	.blog-info p {
		padding: 2svh 0svw;
		margin: 0px;
	}

	.blog-info h1 {
		padding: 1svh 1svw !important;
		margin: 2svh 0svw !important;
		margin-bottom: 0px !important;
		font-size: 2em !important;
		border-radius: 0px !important;
		border-bottom: none !important;
	}

	.blog-info div {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 1svh 0svw;
		border-bottom: var(--underlineTitle);
		border-radius: var(--underlineTitleBorderRadius);
	}

	ul {
		display: flex;
		flex-direction: row;
		list-style-type: none;
		margin: 0px;
		padding: 0px;
	}

	ul li {
		background-color: rgba(128, 0, 128, 0.2);
		border-radius: 1rem;
		padding: 0.25svh 8px;
		margin: 0svh 0.25svh;
		height: fit-content;
	}

	#blogs {
		display: flex;
		flex-direction: column;
		min-height: 80svh;
	}

	h1 {
		border-bottom: var(--underlineTitle);
		border-radius: var(--underlineTitleBorderRadius);
		margin: 1svh 2svw;
		padding: 1svh 2svw;
		display: flex;
	}

	button {
		background-color: var(--card-background-color);
		border-radius: var(--card-border-radius);
		border: none;
		color: inherit;
		font-size: x-large;
		padding: 0.5rem;
		margin: 1svh 0svw;
	}

	p {
		margin: 0px;
		padding: 0px;
	}

	a {
		text-decoration: none;
		color: inherit;
	}

	a:hover {
		color: #91a4d2;
	}

	.blog-preview {
		display: flex;
		flex-direction: column;
		background-color: var(--card-background-color);
		border-radius: var(--card-border-radius);
		padding: 0svh 2svw;
		max-width: 600px;
	}

	#blogs .blog-preview h1 {
		border-bottom: none;
		padding: 0svh 1svw;
		margin: 0px;
	}

	.blog-preview button {
		width: max-content;
		border: 2px solid rgba(145, 164, 210, 0.4);
		border-radius: var(--card-border-radius);
		font-size: medium;
		margin-top: auto;
		margin-bottom: 4svh;
	}
	#blogs .blog-preview .blog-info div p:last-child {
		margin-right: 0svh;
		margin-left: 2svw;
		padding: 0px;
	}

	#blogs-title {
		display: flex;
		flex-direction: column;
		padding-bottom: 1svh;
	}

	#blogs-title p {
		margin: 0svh 1svw;
		padding: 1svh 0svw;
	}

	#blogs-on-show {
		display: flex;
		flex-flow: row wrap;
		justify-content: center;
		padding: 2svh 0svw;
		row-gap: 2svh;
		column-gap: 2svw;
	}

	#blog-loading {
		display: flex;
		flex-direction: column;
		justify-self: center;
		align-self: center;
		justify-content: center;
		align-items: center;

		background-color: var(--card-background-color);
		border-radius: var(--card-border-radius);
		padding: 2svh 2svw;
		margin: 8svh 0svw;
	}

	#blog-out-of {
		display: flex;
		flex-direction: column;
		justify-self: center;
		align-self: center;
		justify-content: center;
		align-items: center;

		background-color: var(--card-background-color);
		border-radius: var(--card-border-radius);
		padding: 2svh 2svw;
		margin: 8svh 0svw;
	}

	#blog-nav {
		display: flex;
		align-items: center;
		position: relative;

		padding: 0svh 2svw;
		margin-top: auto;
		margin-bottom: 2svh;

		background-color: var(--card-background-color);
		border-radius: var(--card-border-radius);
	}

	#blog-nav a:last-child {
		margin-left: auto;
	}

	#blog-nav div {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		justify-self: center;

		margin: 1svh 0svw;
		padding: 0.5rem;
		column-gap: 1svw;
		min-height: 28px;
		font-size: large;

		background-color: var(--card-background-color);
		border-radius: var(--card-border-radius);

		position: relative;
		left: 50%;
		transform: translateX(-50%);
	}
</style>