about page & load more button

src/hooks.server.js

@@ -3,7 +3,6 @@ import { redirect } from '@sveltejs/kit';
 
 /** @type {import('@sveltejs/kit').Handle} */
 export async function handle({ event, resolve }) {
-    console.log(new URL(event.request.url).host)
     if(new URL(event.request.url).host === env.sites_url) redirect(302, env.frontend_url)
     return resolve(event);
 }

src/lib/ui/header.svelte

@@ -1,6 +1,6 @@
 <script>
     export let title;
-    export let subtitle;
+    export let subtitle = "";
 
     export let titleClasses = "";
     export let subtitleClasses = "";

src/routes/+layout.server.js

@@ -1,5 +1,6 @@
 import { redirect } from "@sveltejs/kit";
 import { env } from "$lib";
+import { site_id } from "./store";
 
 /** @type {import("./$types").LayoutServerLoad} */
 export async function load(event) {
@@ -8,7 +9,9 @@ export async function load(event) {
         redirect(302, env.frontend_url);
     }
 
+    
     let blog_info = await res.json();
+    site_id.set(blog_info.site.id);
     
     return {
         blog: blog_info

src/routes/+layout.svelte

@@ -13,8 +13,13 @@
 <div
     class="py-5 px-24 w-full fixed h-min top-0 flex flex-row justify-between bg-white drop-shadow-md"
 >
-    <div>
+    <div class="flex flex-row items-center">
         <a href="/" class="font-bold text-2xl">{data.blog.site.name}</a>
+        <div class="flex flex-row ml-8 font-bold">
+            {#if data.blog.site.use_about_page}
+                <a href="/about">About</a>
+            {/if}
+        </div>
     </div>
     <div>
         <a
@@ -29,7 +34,7 @@
 
 <div class="bg-white py-16 text-center" id="subscribe-form">
     <div class="max-w-lg mx-auto">
-        <h3 class="text-3xl font-bold mb-3">Our newsletter</h3>
+        <h3 class="text-3xl font-bold mb-3">{data.blog.site.freebie_title}</h3>
         {#if isSubscribed}
             <p>Thanks for subscribing!</p>
         {:else}
@@ -41,7 +46,7 @@
             <div
                 class="max-w-[400px] whitespace-nowrap flex justify-around mx-auto"
             >
-                <form method="post" on:submit={saveSubscribed}>
+                <form method="post" action="?/signup">
                     <input
                         name="email"
                         id="email"

src/routes/+page.server.js

@@ -1,18 +1,24 @@
 import { env } from '$lib';
+import { get } from 'svelte/store';
+import { site_id } from './store';
 
 /** @type {import('./$types').Actions} */
 export const actions = {
-	default: async (event) => {
+        signup: async (event) => {
                 const body = await event.request.formData();
                 const email = body.get("email");
-        // let res = await event.fetch(env.api_url + "/blog/signup", {
-        //     method: "post",
-        //     body: JSON.stringify({
-        //         email,
+                let res = await event.fetch(env.api_url + "/blog/signup", {
+                    method: "post",
+                    headers: {
+                        'Content-Type': 'application/json' // Set the Content-Type header to application/json
+                    },
+                    body: JSON.stringify({
+                        email: email,
+                        site_id: get(site_id),
+                        source: event.url.pathname === '/' ? 'home' : event.url.pathname.slice(1),
+                    })
+                });
 
-        //     })
-        // });
-        console.log("env", env.sites_url);
-        console.log("id", event.request.url.replace(env.sites_url, ""))
+                return true;
         }
 };

src/routes/+page.svelte

@@ -3,7 +3,31 @@
 
     export let data;
 
+    let endOfArticle = false;
+
+
     let { blog } = data;
+    let returnSize = blog.total_articles;
+    let offset = blog.articles.length;
+
+    function loadMore() {
+    if (offset >= returnSize) {
+        endOfArticle = true;
+    } else {
+        fetch(`/getPosts?offset=${offset}`)
+            .then(response => response.json())
+            .then(newArticles => {
+                if (newArticles.length > 0) {
+                    blog.articles = [...blog.articles, ...newArticles];
+                    offset += newArticles.length;
+                    if(offset >= returnSize) endOfArticle = true;
+                } else {
+                    endOfArticle = true;
+                }
+            })
+            .catch(error => console.error('Error loading more articles:', error));
+    }
+    }
 </script>
 
 <div>
@@ -39,6 +63,10 @@
                         </div>
                     </a>
                 {/each}
+
+                {#if !endOfArticle}
+                    <button on:click={loadMore} class="px-8 py-3 bg-gray-200 hover:bg-gray-300 cursor-pointer duration-150 text-gray-900 rounded-lg font-semibold mt-6 mx-auto">Load more</button>
+                {/if}
             </div>
         </div>
     </div>

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

@@ -21,10 +21,14 @@
     });
 
     export let data;
-
-    $: console.log(article);
 </script>
 
+<svelte:head>
+    <meta name="description" content={article?.meta_desc} />
+    <meta name="title" content={article?.meta_title} />
+    <title>{article?.meta_title}</title>
+</svelte:head>
+
 <div>
     <Header
         title={article?.title}
@@ -40,7 +44,10 @@
     <div class="mt-12">
         <div class="max-w-2xl mx-auto">
             <div class="markdown-body">
-                <SvelteMarkdown source={article?.content} options={{breaks: true, gfm: true}} />
+                <SvelteMarkdown
+                    source={article?.content}
+                    options={{ breaks: true, gfm: true }}
+                />
             </div>
         </div>
     </div>

src/routes/about/+page.svelte

@@ -0,0 +1,10 @@
+<script>
+    import Header from "$lib/ui/header.svelte";
+
+    export let data;
+</script>
+
+<div class="mt-44 mb-6 text-center w-full">
+    <Header title="About" />
+    <p>{data.blog.site.about_text}</p>
+</div>

src/routes/getPosts/+server.js

@@ -0,0 +1,12 @@
+import { env } from '$lib';
+import { error, json, text } from '@sveltejs/kit';
+import { get } from 'svelte/store';
+import { site_id } from '../store';
+
+/** @type {import('./$types').RequestHandler} */
+export async function GET({fetch, url}) {
+    const offset = url.searchParams.get("offset") || 0;
+    const postsRes = await fetch(env.api_url + `/blog?blog_id=${get(site_id)}&offset=${offset}`).then(x=>x.json());
+
+    return json(postsRes.articles);
+}

src/routes/store.js

@@ -0,0 +1,3 @@
+import { writable } from "svelte/store";
+
+export const site_id = writable("");