generated from darkicewolf50/ssg-sveltekit-template
feat(master): back to dixous 2.0.1
This commit is contained in:
292
src/routes/blogs/[slug]/+page.svelte
Normal file
292
src/routes/blogs/[slug]/+page.svelte
Normal file
@ -0,0 +1,292 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user