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} */
|
/** @type {import('@sveltejs/kit').Handle} */
|
||||||
export async function handle({ event, resolve }) {
|
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)
|
if(new URL(event.request.url).host === env.sites_url) redirect(302, env.frontend_url)
|
||||||
return resolve(event);
|
return resolve(event);
|
||||||
}
|
}
|
@ -1,6 +1,6 @@
|
|||||||
<script>
|
<script>
|
||||||
export let title;
|
export let title;
|
||||||
export let subtitle;
|
export let subtitle = "";
|
||||||
|
|
||||||
export let titleClasses = "";
|
export let titleClasses = "";
|
||||||
export let subtitleClasses = "";
|
export let subtitleClasses = "";
|
||||||
|
@ -1,5 +1,6 @@
|
|||||||
import { redirect } from "@sveltejs/kit";
|
import { redirect } from "@sveltejs/kit";
|
||||||
import { env } from "$lib";
|
import { env } from "$lib";
|
||||||
|
import { site_id } from "./store";
|
||||||
|
|
||||||
/** @type {import("./$types").LayoutServerLoad} */
|
/** @type {import("./$types").LayoutServerLoad} */
|
||||||
export async function load(event) {
|
export async function load(event) {
|
||||||
@ -8,7 +9,9 @@ export async function load(event) {
|
|||||||
redirect(302, env.frontend_url);
|
redirect(302, env.frontend_url);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
let blog_info = await res.json();
|
let blog_info = await res.json();
|
||||||
|
site_id.set(blog_info.site.id);
|
||||||
|
|
||||||
return {
|
return {
|
||||||
blog: blog_info
|
blog: blog_info
|
||||||
|
@ -13,8 +13,13 @@
|
|||||||
<div
|
<div
|
||||||
class="py-5 px-24 w-full fixed h-min top-0 flex flex-row justify-between bg-white drop-shadow-md"
|
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>
|
<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>
|
||||||
<div>
|
<div>
|
||||||
<a
|
<a
|
||||||
@ -29,7 +34,7 @@
|
|||||||
|
|
||||||
<div class="bg-white py-16 text-center" id="subscribe-form">
|
<div class="bg-white py-16 text-center" id="subscribe-form">
|
||||||
<div class="max-w-lg mx-auto">
|
<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}
|
{#if isSubscribed}
|
||||||
<p>Thanks for subscribing!</p>
|
<p>Thanks for subscribing!</p>
|
||||||
{:else}
|
{:else}
|
||||||
@ -41,7 +46,7 @@
|
|||||||
<div
|
<div
|
||||||
class="max-w-[400px] whitespace-nowrap flex justify-around mx-auto"
|
class="max-w-[400px] whitespace-nowrap flex justify-around mx-auto"
|
||||||
>
|
>
|
||||||
<form method="post" on:submit={saveSubscribed}>
|
<form method="post" action="?/signup">
|
||||||
<input
|
<input
|
||||||
name="email"
|
name="email"
|
||||||
id="email"
|
id="email"
|
||||||
|
@ -1,18 +1,24 @@
|
|||||||
import { env } from '$lib';
|
import { env } from '$lib';
|
||||||
|
import { get } from 'svelte/store';
|
||||||
|
import { site_id } from './store';
|
||||||
|
|
||||||
/** @type {import('./$types').Actions} */
|
/** @type {import('./$types').Actions} */
|
||||||
export const actions = {
|
export const actions = {
|
||||||
default: async (event) => {
|
signup: async (event) => {
|
||||||
const body = await event.request.formData();
|
const body = await event.request.formData();
|
||||||
const email = body.get("email");
|
const email = body.get("email");
|
||||||
// let res = await event.fetch(env.api_url + "/blog/signup", {
|
let res = await event.fetch(env.api_url + "/blog/signup", {
|
||||||
// method: "post",
|
method: "post",
|
||||||
// body: JSON.stringify({
|
headers: {
|
||||||
// email,
|
'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),
|
||||||
|
})
|
||||||
|
});
|
||||||
|
|
||||||
// })
|
return true;
|
||||||
// });
|
}
|
||||||
console.log("env", env.sites_url);
|
|
||||||
console.log("id", event.request.url.replace(env.sites_url, ""))
|
|
||||||
}
|
|
||||||
};
|
};
|
@ -3,7 +3,31 @@
|
|||||||
|
|
||||||
export let data;
|
export let data;
|
||||||
|
|
||||||
|
let endOfArticle = false;
|
||||||
|
|
||||||
|
|
||||||
let { blog } = data;
|
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>
|
</script>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
@ -39,6 +63,10 @@
|
|||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
{/each}
|
{/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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -21,10 +21,14 @@
|
|||||||
});
|
});
|
||||||
|
|
||||||
export let data;
|
export let data;
|
||||||
|
|
||||||
$: console.log(article);
|
|
||||||
</script>
|
</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>
|
<div>
|
||||||
<Header
|
<Header
|
||||||
title={article?.title}
|
title={article?.title}
|
||||||
@ -40,7 +44,10 @@
|
|||||||
<div class="mt-12">
|
<div class="mt-12">
|
||||||
<div class="max-w-2xl mx-auto">
|
<div class="max-w-2xl mx-auto">
|
||||||
<div class="markdown-body">
|
<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>
|
</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