✨ Post listing
This commit is contained in:
parent
ee33a43ac8
commit
15e1b3971f
@ -16,7 +16,7 @@ export default defineConfig({
|
||||
defaultLocale: 'en',
|
||||
routing: {
|
||||
fallbackType: 'rewrite',
|
||||
prefixDefaultLocale: true,
|
||||
prefixDefaultLocale: false,
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
@ -84,17 +84,13 @@ const locale = Astro.currentLocale ?? 'en'
|
||||
</aside>
|
||||
<nav>
|
||||
<h6 class="footer-title">Services</h6>
|
||||
<a class="link link-hover">Branding</a>
|
||||
<a class="link link-hover">Design</a>
|
||||
<a class="link link-hover">Marketing</a>
|
||||
<a class="link link-hover">Advertisement</a>
|
||||
</nav>
|
||||
<nav>
|
||||
<h6 class="footer-title">Company</h6>
|
||||
<a class="link link-hover">About us</a>
|
||||
<a class="link link-hover">Contact</a>
|
||||
<a class="link link-hover">Jobs</a>
|
||||
<a class="link link-hover">Press kit</a>
|
||||
<a class="link link-hover" href="https://sn.solsynth.dev"> Solian </a>
|
||||
<a class="link link-hover" href="https://files.solsynth.dev">
|
||||
Solarfiles
|
||||
</a>
|
||||
<a class="link link-hover" href="https://git.solsynth.dev">
|
||||
Solargit
|
||||
</a>
|
||||
</nav>
|
||||
<nav>
|
||||
<h6 class="footer-title">Legal</h6>
|
||||
|
||||
@ -1,110 +0,0 @@
|
||||
---
|
||||
import { Image } from 'astro:assets'
|
||||
import { Icon } from 'astro-icon/components'
|
||||
|
||||
import Layout from '@/layouts/Layout.astro'
|
||||
|
||||
import CompanyAsideImage from '@/assets/images/company-aside.webp'
|
||||
import AppStoreGetImage from '@/assets/images/app-store/get-it-on-black.svg'
|
||||
import ProductSnPreviewImage from '@/assets/images/products/solar-network.webp'
|
||||
---
|
||||
|
||||
<Layout>
|
||||
<div class="section container mx-auto grid-cols-1 lg:grid-cols-3" id="intro">
|
||||
<div
|
||||
class="sub-section flex flex-col items-end justify-center lg:col-span-1"
|
||||
>
|
||||
<h1 class="text-4xl font-bold text-right">Solsynth LLC</h1>
|
||||
<p class="text-lg text-right">
|
||||
A vibrant creating wonderful software and hope the future will be
|
||||
brighter.
|
||||
</p>
|
||||
<a class="link flex items-center gap-1 mt-2" href="#work-featured">
|
||||
<span>See some of our works</span>
|
||||
<Icon name="material-symbols:arrow-downward" />
|
||||
</a>
|
||||
</div>
|
||||
<div class="sub-section flex items-center lg:col-span-2">
|
||||
<Image
|
||||
src={CompanyAsideImage}
|
||||
alt="galaxy"
|
||||
class="rounded-lg shadow-xl"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-flex py-12 shadow-lg bg-base-300" id="work-featured">
|
||||
<div class="section container mx-auto grid-cols-1 lg:grid-cols-3">
|
||||
<div
|
||||
class="sub-section flex flex-col items-start lg:items-end justify-center lg:col-span-1"
|
||||
>
|
||||
<div class="badge badge-primary flex gap-1 items-center mb-2">
|
||||
<Icon name="material-symbols:star" />
|
||||
<span>Featured Project</span>
|
||||
</div>
|
||||
|
||||
<h2 class="text-3xl font-bold lg:text-right">Solar Network</h2>
|
||||
<p class="text-lg lg:text-right">
|
||||
The next generation social network. But not only for social media.
|
||||
</p>
|
||||
<blockquote
|
||||
class="text-md lg:text-right bg-neutral text-neutral-content px-7 py-5 rounded-xl font-mono mt-2"
|
||||
>
|
||||
Social Network, Redefined.
|
||||
</blockquote>
|
||||
|
||||
<div class="flex gap-3 mt-4 items-center text-right">
|
||||
<span
|
||||
class="opacity-75 text-xs max-lg:order-last"
|
||||
style="line-height: 1"
|
||||
>
|
||||
Also supports Android, Windows, and any modern web browser
|
||||
</span>
|
||||
<a
|
||||
href="https://apps.apple.com/us/app/solian/id6499032345?itscg=30200&itsct=apps_box_link&mttnsubad=6499032345"
|
||||
>
|
||||
<Image src={AppStoreGetImage} alt="get it on app store" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<a
|
||||
class="link flex items-center gap-1 mt-3"
|
||||
href="/products/solar-network"
|
||||
>
|
||||
<span>Learn more about Solar Network</span>
|
||||
<Icon name="material-symbols:arrow-right-alt" />
|
||||
</a>
|
||||
</div>
|
||||
<div class="sub-section flex items-center lg:col-span-2">
|
||||
<Image
|
||||
src={ProductSnPreviewImage}
|
||||
alt="solar network cross-platform preview"
|
||||
class="rounded-lg shadow-xl"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
.section {
|
||||
min-height: 90vh;
|
||||
width: 100%;
|
||||
gap: 0 2rem;
|
||||
padding: 0 1rem;
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.section-flex {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sub-section {
|
||||
padding: 1rem;
|
||||
}
|
||||
</style>
|
||||
@ -1,12 +1,110 @@
|
||||
---
|
||||
import { Image } from 'astro:assets'
|
||||
import { Icon } from 'astro-icon/components'
|
||||
|
||||
import Layout from '@/layouts/Layout.astro'
|
||||
|
||||
import CompanyAsideImage from '@/assets/images/company-aside.webp'
|
||||
import AppStoreGetImage from '@/assets/images/app-store/get-it-on-black.svg'
|
||||
import ProductSnPreviewImage from '@/assets/images/products/solar-network.webp'
|
||||
---
|
||||
|
||||
<Layout title="Redirecting...">
|
||||
<div class="w-full h-full flex justify-center items-center text-center">
|
||||
<div class="text-center">
|
||||
<h1 class="text-4xl font-bold">You will be redirected soon.</h1>
|
||||
<p>You should not see this page...</p>
|
||||
<Layout>
|
||||
<div class="section container mx-auto grid-cols-1 lg:grid-cols-3" id="intro">
|
||||
<div
|
||||
class="sub-section flex flex-col items-end justify-center lg:col-span-1"
|
||||
>
|
||||
<h1 class="text-4xl font-bold text-right">Solsynth LLC</h1>
|
||||
<p class="text-lg text-right">
|
||||
A vibrant creating wonderful software and hope the future will be
|
||||
brighter.
|
||||
</p>
|
||||
<a class="link flex items-center gap-1 mt-2" href="#work-featured">
|
||||
<span>See some of our works</span>
|
||||
<Icon name="material-symbols:arrow-downward" />
|
||||
</a>
|
||||
</div>
|
||||
<div class="sub-section flex items-center lg:col-span-2">
|
||||
<Image
|
||||
src={CompanyAsideImage}
|
||||
alt="galaxy"
|
||||
class="rounded-lg shadow-xl"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-flex py-12 shadow-lg bg-base-300" id="work-featured">
|
||||
<div class="section container mx-auto grid-cols-1 lg:grid-cols-3">
|
||||
<div
|
||||
class="sub-section flex flex-col items-start lg:items-end justify-center lg:col-span-1"
|
||||
>
|
||||
<div class="badge badge-primary flex gap-1 items-center mb-2">
|
||||
<Icon name="material-symbols:star" />
|
||||
<span>Featured Project</span>
|
||||
</div>
|
||||
|
||||
<h2 class="text-3xl font-bold lg:text-right">Solar Network</h2>
|
||||
<p class="text-lg lg:text-right">
|
||||
The next generation social network. But not only for social media.
|
||||
</p>
|
||||
<blockquote
|
||||
class="text-md lg:text-right bg-neutral text-neutral-content px-7 py-5 rounded-xl font-mono mt-2"
|
||||
>
|
||||
Social Network, Redefined.
|
||||
</blockquote>
|
||||
|
||||
<div class="flex gap-3 mt-4 items-center text-right">
|
||||
<span
|
||||
class="opacity-75 text-xs max-lg:order-last"
|
||||
style="line-height: 1"
|
||||
>
|
||||
Also supports Android, Windows, and any modern web browser
|
||||
</span>
|
||||
<a
|
||||
href="https://apps.apple.com/us/app/solian/id6499032345?itscg=30200&itsct=apps_box_link&mttnsubad=6499032345"
|
||||
>
|
||||
<Image src={AppStoreGetImage} alt="get it on app store" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<a
|
||||
class="link flex items-center gap-1 mt-3"
|
||||
href="/products/solar-network"
|
||||
>
|
||||
<span>Learn more about Solar Network</span>
|
||||
<Icon name="material-symbols:arrow-right-alt" />
|
||||
</a>
|
||||
</div>
|
||||
<div class="sub-section flex items-center lg:col-span-2">
|
||||
<Image
|
||||
src={ProductSnPreviewImage}
|
||||
alt="solar network cross-platform preview"
|
||||
class="rounded-lg shadow-xl"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
.section {
|
||||
min-height: 90vh;
|
||||
width: 100%;
|
||||
gap: 0 2rem;
|
||||
padding: 0 1rem;
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.section-flex {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sub-section {
|
||||
padding: 1rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
149
src/pages/posts/index.astro
Normal file
149
src/pages/posts/index.astro
Normal file
@ -0,0 +1,149 @@
|
||||
---
|
||||
export const prerender = false
|
||||
|
||||
import sanitizeHtml from 'sanitize-html'
|
||||
import { Icon } from 'astro-icon/components'
|
||||
import { marked } from 'marked'
|
||||
|
||||
import Layout from '@/layouts/Layout.astro'
|
||||
import AttachmentRenderer from '@/components/AttachmentRenderer.astro'
|
||||
import { getAttachmentUrl, fetchAttachmentMeta } from '@/scripts/attachment'
|
||||
|
||||
const page = parseInt(Astro.url.searchParams.get('page') ?? '1') || 1
|
||||
|
||||
async function getPosts() {
|
||||
const baseUrl = import.meta.env.PUBLIC_SOLAR_NETWORK_URL
|
||||
const res = await fetch(
|
||||
`${baseUrl}/cgi/co/posts?take=10&offset=${Math.max(page - 1, 0) * 10}`
|
||||
)
|
||||
const data = await res.json()
|
||||
const posts = await Promise.all(
|
||||
data['data'].map(async (ele: any) => {
|
||||
if (ele.body?.content) {
|
||||
ele.body.content = await parseContent(
|
||||
ele.body.content,
|
||||
ele.type == 'story'
|
||||
)
|
||||
}
|
||||
if (ele.body?.attachments) {
|
||||
ele.body.attachments = await fetchAttachmentMeta(ele.body.attachments)
|
||||
}
|
||||
return ele
|
||||
})
|
||||
)
|
||||
|
||||
return posts
|
||||
}
|
||||
|
||||
const posts = await getPosts()
|
||||
|
||||
async function parseContent(data: string, useBreaks: boolean = false) {
|
||||
const rawContent = await marked(data, {
|
||||
breaks: useBreaks,
|
||||
})
|
||||
return sanitizeHtml(rawContent)
|
||||
}
|
||||
---
|
||||
|
||||
<Layout title="Posts">
|
||||
<div role="alert" class="alert shadow-lg px-12 m-0 rounded-none mb-5">
|
||||
<Icon
|
||||
name="material-symbols:ungroup"
|
||||
class="stroke-info fill-info h-6 w-6 shrink-0"
|
||||
/>
|
||||
<div>
|
||||
<h3 class="font-bold">Open in the Solian</h3>
|
||||
<div class="text-xs">
|
||||
The most modern, user-friendly, and official Solar Network app.
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<a class="btn btn-sm" href="/products/solar-network#downloads">Get</a>
|
||||
<a class="btn btn-sm" href="https://sn.solsynth.dev/posts">Open</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="container max-w-[85ch] mx-auto mt-[15vh] px-12 flex flex-col gap-4"
|
||||
>
|
||||
<h1 class="text-2xl font-bold">Posts</h1>
|
||||
<p>Explore the posts all over the Solar Network.</p>
|
||||
|
||||
<div class="flex flex-col gap-4 mt-4 mx-[-16px]">
|
||||
{
|
||||
posts.map((ele: any) => (
|
||||
<a href={`/posts/${ele.id}`}>
|
||||
<div class="card bg-base-100 w-full border-neutral border">
|
||||
<div class="card-body">
|
||||
<div class="flex gap-4 items-center mb-5">
|
||||
<div class="avatar">
|
||||
<div class="w-12 rounded-full">
|
||||
<img
|
||||
src={getAttachmentUrl(ele.publisher.avatar)}
|
||||
alt="avatar"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="userinfo flex flex-col">
|
||||
<span class="flex gap-2 items-baseline">
|
||||
<span class="text-md font-bold">
|
||||
{ele.publisher.nick}
|
||||
</span>
|
||||
<span class="text-xs font-mono">
|
||||
@{ele.publisher.name}
|
||||
</span>
|
||||
</span>
|
||||
<span class="text-sm overflow-ellipsis">
|
||||
{new Date(ele.created_at).toLocaleString()}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{ele.body.title && (
|
||||
<h2 class="card-title">
|
||||
{ele.body?.title ?? `Post #${ele.id}`}
|
||||
</h2>
|
||||
)}
|
||||
<article>
|
||||
<div
|
||||
class="prose max-w-none max-md:prose-lg"
|
||||
set:html={ele.body?.content ?? ''}
|
||||
/>
|
||||
|
||||
{ele.body?.attachments && (
|
||||
<div
|
||||
class="attachment-list mt-5 gap-4 grid grid-cols-1"
|
||||
class:list={
|
||||
ele.body.attachments.length >= 2
|
||||
? 'md:grid-cols-2'
|
||||
: 'md:grid-cols-1'
|
||||
}
|
||||
>
|
||||
{ele.body.attachments.map((attachment: any) => (
|
||||
<div class="attachment">
|
||||
<AttachmentRenderer data={attachment} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
))
|
||||
}
|
||||
|
||||
<div class="flex justify-center items-center mt-12">
|
||||
<div class="join">
|
||||
<a
|
||||
class="join-item btn"
|
||||
class:list={page == 1 ? 'btn-disabled' : ''}
|
||||
href={`/posts?page=${page - 1}`}>«</a
|
||||
>
|
||||
<button class="join-item btn">Page {page}</button>
|
||||
<a class="join-item btn" href={`/posts?page=${page + 1}`}>»</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
@ -4,7 +4,7 @@ import Layout from '@/layouts/Layout.astro'
|
||||
|
||||
<Layout title="Terms & Conditions">
|
||||
<div
|
||||
class="container max-w-[85ch] mx-auto mt-[25vh] px-2 flex flex-col gap-4"
|
||||
class="container max-w-[85ch] mx-auto mt-[25vh] px-12 flex flex-col gap-4"
|
||||
>
|
||||
<h1 class="text-2xl font-bold">Terms & Conditions</h1>
|
||||
|
||||
@ -3,7 +3,9 @@ import Layout from '@/layouts/Layout.astro'
|
||||
---
|
||||
|
||||
<Layout title="User Agreements">
|
||||
<div class="container max-w-[85ch] mx-auto mt-[25vh] flex flex-col gap-4">
|
||||
<div
|
||||
class="container max-w-[85ch] mx-auto mt-[25vh] px-12 flex flex-col gap-4"
|
||||
>
|
||||
<h1 class="text-4xl font-bold">Privacy Policy</h1>
|
||||
|
||||
<article class="prose prose-lg max-w-none mt-5">
|
||||
@ -3,7 +3,9 @@ import Layout from '@/layouts/Layout.astro'
|
||||
---
|
||||
|
||||
<Layout title="User Agreements">
|
||||
<div class="container max-w-[85ch] mx-auto mt-[25vh] flex flex-col gap-4">
|
||||
<div
|
||||
class="container max-w-[85ch] mx-auto mt-[25vh] px-12 flex flex-col gap-4"
|
||||
>
|
||||
<h1 class="text-4xl font-bold">User Agreements</h1>
|
||||
|
||||
<article class="prose prose-lg max-w-none mt-5">
|
||||
@ -3,7 +3,9 @@ import Layout from '@/layouts/Layout.astro'
|
||||
---
|
||||
|
||||
<Layout title="User Agreements">
|
||||
<div class="container max-w-[85ch] mx-auto mt-[25vh] flex flex-col gap-4">
|
||||
<div
|
||||
class="container max-w-[85ch] mx-auto mt-[25vh] px-12 flex flex-col gap-4"
|
||||
>
|
||||
<h1 class="text-4xl font-bold">隐私政策</h1>
|
||||
|
||||
<article class="prose prose-lg max-w-none mt-5">
|
||||
|
||||
@ -3,7 +3,9 @@ import Layout from '@/layouts/Layout.astro'
|
||||
---
|
||||
|
||||
<Layout title="User Agreements">
|
||||
<div class="container max-w-[85ch] mx-auto mt-[25vh] flex flex-col gap-4">
|
||||
<div
|
||||
class="container max-w-[85ch] mx-auto mt-[25vh] px-12 flex flex-col gap-4"
|
||||
>
|
||||
<h1 class="text-4xl font-bold">用户协议</h1>
|
||||
|
||||
<article class="prose prose-lg max-w-none mt-5">
|
||||
@ -84,9 +86,8 @@ import Layout from '@/layouts/Layout.astro'
|
||||
</p>
|
||||
<p>若您想搭建我们制品的镜像站，请与我们取得联系以豁免此条例。</p>
|
||||
<h3 id="secondary-distribution-of-source-code">源码二次发布</h3>
|
||||
<pre><code>我们不允许任何形式的源码二次发布（Fork 除外）。
|
||||
</code></pre><p
|
||||
>
|
||||
<p>我们不允许任何形式的源码二次发布（Fork 除外）。</p>
|
||||
<p>
|
||||
包括但不限于，将 GitHub 或 Solsynth Code Repository 上的代码仓库镜像于
|
||||
GitLab、Gitee 等其他 Git 提供者。
|
||||
<strong>二次售卖源码更是不允许的。</strong>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user