about page & load more button
This commit is contained in:
parent
d269814488
commit
f3bf7f6551
@ -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);
|
||||
}
|
@ -1,6 +1,6 @@
|
||||
<script>
|
||||
export let title;
|
||||
export let subtitle;
|
||||
export let subtitle = "";
|
||||
|
||||
export let titleClasses = "";
|
||||
export let subtitleClasses = "";
|
||||
|
@ -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
|
||||
|
@ -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"
|
||||
|
@ -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;
|
||||
}
|
||||
};
|
@ -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>
|
||||
|
@ -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>
|
||||
|
10
src/routes/about/+page.svelte
Normal file
10
src/routes/about/+page.svelte
Normal file
@ -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>
|
12
src/routes/getPosts/+server.js
Normal file
12
src/routes/getPosts/+server.js
Normal file
@ -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);
|
||||
}
|
3
src/routes/store.js
Normal file
3
src/routes/store.js
Normal file
@ -0,0 +1,3 @@
|
||||
import { writable } from "svelte/store";
|
||||
|
||||
export const site_id = writable("");
|
Loading…
Reference in New Issue
Block a user