✨ Post listing

astro.config.mjs

@@ -16,7 +16,7 @@ export default defineConfig({
     defaultLocale: 'en',
     routing: {
       fallbackType: 'rewrite',
-      prefixDefaultLocale: true,
+      prefixDefaultLocale: false,
     },
   },
 })

src/layouts/Layout.astro

@@ -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" href="https://sn.solsynth.dev"> Solian </a>
-          <a class="link link-hover">Design</a>
+          <a class="link link-hover" href="https://files.solsynth.dev">
-          <a class="link link-hover">Marketing</a>
+            Solarfiles
-          <a class="link link-hover">Advertisement</a>
+          </a>
-        </nav>
+          <a class="link link-hover" href="https://git.solsynth.dev">
-        <nav>
+            Solargit
-          <h6 class="footer-title">Company</h6>
+          </a>
-          <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>
         </nav>
         <nav>
           <h6 class="footer-title">Legal</h6>

src/pages/en/index.astro

@@ -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>

src/pages/index.astro

@@ -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...">
+<Layout>
-  <div class="w-full h-full flex justify-center items-center text-center">
+  <div class="section container mx-auto grid-cols-1 lg:grid-cols-3" id="intro">
-    <div class="text-center">
+    <div
-      <h1 class="text-4xl font-bold">You will be redirected soon.</h1>
+      class="sub-section flex flex-col items-end justify-center lg:col-span-1"
-      <p>You should not see this page...</p>
+    >
+      <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>

src/pages/posts/index.astro

@@ -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>

src/pages/terms/index.astro

@@ -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>
 

src/pages/terms/privacy-policy.astro

@@ -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">

src/pages/terms/user-agreements.astro

@@ -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">

src/pages/zh-cn/terms/privacy-policy.astro

@@ -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">

src/pages/zh-cn/terms/user-agreements.astro

@@ -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 除外）。
+      <p>我们不允许任何形式的源码二次发布（Fork 除外）。</p>
-    </code></pre><p
+      <p>
-      >
         包括但不限于，将 GitHub 或 Solsynth Code Repository 上的代码仓库镜像于
         GitLab、Gitee 等其他 Git 提供者。
         <strong>二次售卖源码更是不允许的。</strong>