diff --git a/src/app.html b/src/app.html index 1907c570..a59c387b 100644 --- a/src/app.html +++ b/src/app.html @@ -10,6 +10,12 @@ href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&family=Poppins:wght@100;300;500;700&display=swap" rel="stylesheet" /> + + + + + + %sveltekit.head% diff --git a/src/lib/components/BlogCard.svelte b/src/lib/components/BlogCard.svelte index b9489595..56a8660c 100644 --- a/src/lib/components/BlogCard.svelte +++ b/src/lib/components/BlogCard.svelte @@ -7,7 +7,7 @@ class="group card bg-base-800 ring-base-700 hover:ring-2 cursor-pointer no-underline" >
-

+

{title}

{text}

diff --git a/src/lib/components/BlogGrid.svelte b/src/lib/components/BlogGrid.svelte new file mode 100644 index 00000000..e5415fd2 --- /dev/null +++ b/src/lib/components/BlogGrid.svelte @@ -0,0 +1,10 @@ + + +
+ {#each posts as { title, preview_text, slug, categories, img } (slug)} + + {/each} +
diff --git a/src/lib/components/FeaturedAppCarousel.svelte b/src/lib/components/FeaturedAppCarousel.svelte index 9f11cbae..35fc1b18 100644 --- a/src/lib/components/FeaturedAppCarousel.svelte +++ b/src/lib/components/FeaturedAppCarousel.svelte @@ -8,7 +8,7 @@ {:else if slides.length > 1} ({ id: s.link, ...s }))}> -
+
diff --git a/src/lib/components/Pagination.svelte b/src/lib/components/Pagination.svelte new file mode 100644 index 00000000..b8723fdf --- /dev/null +++ b/src/lib/components/Pagination.svelte @@ -0,0 +1,25 @@ + + +{#if totalPageCount > 1 && currentPage !== 1} + +{/if} + +{#each Array(totalPageCount) as _, i} + {#if currentPage !== i + 1} + {i + 1} + {:else} + {i + 1} + {/if} +{/each} + +{#if totalPageCount > 1 && currentPage !== totalPageCount} + +{/if} diff --git a/src/lib/components/SEO.svelte b/src/lib/components/SEO.svelte index 47be0180..5082d787 100644 --- a/src/lib/components/SEO.svelte +++ b/src/lib/components/SEO.svelte @@ -57,7 +57,6 @@ 'browser extension notepad' ], screenshot = 'img/website_seo_img.png', - icon = 'img/rgb_logo_256.png', url, articleData = null; @@ -70,12 +69,6 @@ {title} - - - - - - diff --git a/src/lib/components/base/Carousel.svelte b/src/lib/components/base/Carousel.svelte index 37ad53f1..6059966f 100644 --- a/src/lib/components/base/Carousel.svelte +++ b/src/lib/components/base/Carousel.svelte @@ -16,34 +16,24 @@ export let autoScroll: boolean = true; export let autoScrollDuration: number = 5000; - let autoScrollInterval; + let autoScrollInterval: ReturnType; let moving: boolean = false; $: length = items.length; - function next() { + function step(amount: number) { if (moving) return; moving = true; - activeIndex = (activeIndex + 1 + length) % length; + activeIndex = (activeIndex + amount + length) % length; setTimeout(() => (moving = false), duration); if (autoScroll && autoScrollDuration) { clearInterval(autoScrollInterval); - autoScrollInterval = setInterval(next, autoScrollDuration); + autoScrollInterval = setInterval(() => step(1), autoScrollDuration); } } - function prev() { - if (moving) return; - moving = true; - activeIndex = (activeIndex - 1 + length) % length; - setTimeout(() => (moving = false), duration); - if (autoScroll && autoScrollDuration) { - clearInterval(autoScrollInterval); - autoScrollInterval = setInterval(next, autoScrollDuration); - } - } - function goto(idx) { + function goto(idx: number) { if (moving) return; moving = true; activeIndex = idx; @@ -51,13 +41,13 @@ if (autoScroll && autoScrollDuration) { clearInterval(autoScrollInterval); - autoScrollInterval = setInterval(next, autoScrollDuration); + autoScrollInterval = setInterval(() => step(1), autoScrollDuration); } } $: if (autoScroll && autoScrollDuration) { clearInterval(autoScrollInterval); - autoScrollInterval = setInterval(next, autoScrollDuration); + autoScrollInterval = setInterval(() => step(1), autoScrollDuration); } else { clearInterval(autoScrollInterval); } @@ -71,7 +61,7 @@ 'primary' ? 'bg-primary hover:bg-green-700' : 'bg-base-900 hover:bg-base-800'}" - on:click={prev} + on:click={() => step(-1)} > @@ -94,7 +84,7 @@ 'primary' ? 'bg-primary hover:bg-green-700' : 'bg-base-900 hover:bg-base-800'}" - on:click={next} + on:click={() => step(1)} > diff --git a/src/routes/(rgb)/Footer.svelte b/src/lib/components/layout/Footer.svelte similarity index 100% rename from src/routes/(rgb)/Footer.svelte rename to src/lib/components/layout/Footer.svelte diff --git a/src/routes/(rgb)/Navbar.svelte b/src/lib/components/layout/Navbar.svelte similarity index 95% rename from src/routes/(rgb)/Navbar.svelte rename to src/lib/components/layout/Navbar.svelte index c7fa3aca..41d2203f 100644 --- a/src/routes/(rgb)/Navbar.svelte +++ b/src/lib/components/layout/Navbar.svelte @@ -52,7 +52,7 @@
  • - + Blog diff --git a/src/routes/(rgb)/RGBHero.svelte b/src/lib/components/layout/RGBHero.svelte similarity index 100% rename from src/routes/(rgb)/RGBHero.svelte rename to src/lib/components/layout/RGBHero.svelte diff --git a/src/lib/components/SmallFooter.svelte b/src/lib/components/layout/SmallFooter.svelte similarity index 94% rename from src/lib/components/SmallFooter.svelte rename to src/lib/components/layout/SmallFooter.svelte index 69156645..a4107201 100644 --- a/src/lib/components/SmallFooter.svelte +++ b/src/lib/components/layout/SmallFooter.svelte @@ -1,5 +1,5 @@ diff --git a/src/routes/(rgb)/+layout.svelte b/src/routes/(rgb)/+layout.svelte index b7c1b08a..f0e785d6 100644 --- a/src/routes/(rgb)/+layout.svelte +++ b/src/routes/(rgb)/+layout.svelte @@ -1,9 +1,9 @@ diff --git a/src/routes/(rgb)/+page.svelte b/src/routes/(rgb)/+page.svelte index ea4eadc4..d0d890d0 100644 --- a/src/routes/(rgb)/+page.svelte +++ b/src/routes/(rgb)/+page.svelte @@ -2,11 +2,11 @@ import { page } from '$app/stores'; import FeaturedAppCarousel from '$lib/components/FeaturedAppCarousel.svelte'; - import BlogCard from '$lib/components/BlogCard.svelte'; import SEO from '$lib/components/SEO.svelte'; import Icon from '$lib/components/Icon.svelte'; import projects from '$lib/data/projects'; + import BlogGrid from '$lib/components/BlogGrid.svelte'; export let data = {}; @@ -49,11 +49,8 @@

    Featured Articles

    -
    - {#each featuredPosts as { title, preview_text, slug, categories, img } (slug)} - - {/each} -
    + +

    diff --git a/src/routes/(rgb)/[...404]/+page.svelte b/src/routes/(rgb)/[...404]/+page.svelte deleted file mode 100644 index 7aca9318..00000000 --- a/src/routes/(rgb)/[...404]/+page.svelte +++ /dev/null @@ -1,23 +0,0 @@ - - - - Page Not Found | RGB Studios - - -

    -

    Error 404

    -

    The resource could not be found

    - - -

    - Go back home - or check out our popular projects: -

    - - -
    diff --git a/src/routes/(rgb)/blog/+page.svelte b/src/routes/(rgb)/blog/+page.svelte index 05b3b39a..cc0a28e5 100644 --- a/src/routes/(rgb)/blog/+page.svelte +++ b/src/routes/(rgb)/blog/+page.svelte @@ -7,21 +7,34 @@ import { page } from '$app/stores'; - import BlogCard from '$lib/components/BlogCard.svelte'; + import BlogGrid from '$lib/components/BlogGrid.svelte'; import Breadcrumbs from '$lib/components/Breadcrumbs.svelte'; + import Icon from '$lib/components/Icon.svelte'; + import Pagination from '$lib/components/Pagination.svelte'; import SEO from '$lib/components/SEO.svelte'; export let data = {}; $: posts = data.posts; + const postsPerPage = 12; + const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1); $: category = $page.url.searchParams.get('category'); + $: searchTerm = ''; // Show only non-hidden posts of the given category, then sort them by date $: filteredPosts = posts ?.filter((post) => !post.hidden) .filter((post) => category === null || post.categories.includes(category)) + .filter( + (post) => + searchTerm === '' || + post.title + .replace(/ /g, '') + .toLowerCase() + .includes(searchTerm.replace(/ /g, '').toLowerCase()) + ) .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()); $: pageTitle = category === null ? 'Blog' : `${capitalize(category)} Blog Posts`; @@ -59,22 +72,41 @@

    {pageTitle}

    + {#if searchTerm !== '' && filteredPosts.length !== 0} +

    + {filteredPosts.length} results for {searchTerm}: +

    + {/if}
    +
    (searchTerm = evt.target[0].value)} +> + + +
    + {#if filteredPosts.length !== 0} -
    - {#each filteredPosts as { title, preview_text, slug, categories, img } (slug)} - - {/each} -
    + + {#if searchTerm === ''} + + {/if} {:else}

    - No posts found for that category. Try a different category or - View all blog posts - + No posts found for that {category !== null && searchTerm === '' + ? 'category' + : category === null && searchTerm !== '' + ? 'search' + : 'category and search'}. Try a different category or search or + (searchTerm = '')}> View all blog posts

    +
    {/if} diff --git a/src/routes/(rgb)/blog/page/[page]/+page.js b/src/routes/(rgb)/blog/page/[page]/+page.js new file mode 100644 index 00000000..f4f795c4 --- /dev/null +++ b/src/routes/(rgb)/blog/page/[page]/+page.js @@ -0,0 +1,30 @@ +import { error } from '@sveltejs/kit'; + +const postsPerPage = 12; + +/** @type {import('./$types').PageServerLoad} */ +export async function load({ fetch, params }) { + // If non-numeric values, 404 + if (!new RegExp(/^[0-9]+$/).test(params.page)) { + throw error(404, 'Not found'); + } + // If page number is 0 or contains a leading 0, 404 + if (params.page[0] === '0') { + throw error(404, 'Not found'); + } + + const pageNum = parseInt(params.page); + + const res = await fetch('/blog/posts.json'); + const posts = await res.json(); + + const totalPosts = posts.length; + const pagePosts = posts.splice(postsPerPage * (pageNum - 1), postsPerPage); + + // Invalid page number, 404 + if (pagePosts.length === 0) { + throw error(404, 'Not found'); + } + + return { posts: pagePosts, pageNum, totalPosts }; +} diff --git a/src/routes/(rgb)/blog/page/[page]/+page.svelte b/src/routes/(rgb)/blog/page/[page]/+page.svelte new file mode 100644 index 00000000..1cdb5b33 --- /dev/null +++ b/src/routes/(rgb)/blog/page/[page]/+page.svelte @@ -0,0 +1,39 @@ + + + + Blog Page {pageNum} | RGB Studios + + + + +
    +
    +

    Blog Page {pageNum}

    +
    + + + +
    diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte index 5a4be5cc..adc217d0 100644 --- a/src/routes/+error.svelte +++ b/src/routes/+error.svelte @@ -1,8 +1,9 @@ - Error | RGB Studios + {$page.status === 404 ? 'Page Not Found' : 'Error'} | RGB Studios - +