feat: tag build-in page

2022-08-17 21:57:18 +01:00 · 2022-08-17 21:57:18 +01:00 · e7abdc0893
parent a6f66fca15
commit e7abdc0893
7 changed files with 100 additions and 21 deletions
--- a/package.json
+++ b/package.json
@ -44,7 +44,7 @@
    "busboy": "^1.6.0",
    "clsx": "^1.1.1",
    "cookie": "^0.5.0",
-    "crossbell.js": "^0.10.15",
+    "crossbell.js": "^0.10.17",
    "dayjs": "^1.11.1",
    "dotenv": "^16.0.0",
    "emoji-mart": "^5.2.0",
@ -76,7 +76,7 @@
    "remark-rehype": "^10.1.0",
    "sortablejs": "^1.15.0",
    "ua-parser-js": "^1.0.2",
-    "unidata.js": "^0.6.12",
+    "unidata.js": "^0.6.14",
    "unified": "^10.1.2",
    "unist-builder": "^3.0.0",
    "unist-util-visit": "^4.1.0",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -49,7 +49,7 @@ specifiers:
  clsx: ^1.1.1
  cookie: ^0.5.0
  cross-spawn: ^7.0.3
-  crossbell.js: ^0.10.15
+  crossbell.js: ^0.10.17
  dayjs: ^1.11.1
  dotenv: ^16.0.0
  emoji-mart: ^5.2.0
@ -92,7 +92,7 @@ specifiers:
  tailwindcss: ^3.0.24
  typescript: ^4.5.5
  ua-parser-js: ^1.0.2
-  unidata.js: ^0.6.12
+  unidata.js: ^0.6.14
  unified: ^10.1.2
  unist-builder: ^3.0.0
  unist-util-visit: ^4.1.0
@ -131,7 +131,7 @@ dependencies:
  busboy: 1.6.0
  clsx: 1.1.1
  cookie: 0.5.0
-  crossbell.js: 0.10.15
+  crossbell.js: 0.10.17
  dayjs: 1.11.3
  dotenv: 16.0.1
  emoji-mart: 5.2.0
@ -163,7 +163,7 @@ dependencies:
  remark-rehype: 10.1.0
  sortablejs: 1.15.0
  ua-parser-js: 1.0.2
-  unidata.js: 0.6.12
+  unidata.js: 0.6.14
  unified: 10.1.2
  unist-builder: 3.0.0
  unist-util-visit: 4.1.0
@ -1662,8 +1662,8 @@ packages:
    resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==}
    dev: true

-  /@types/lodash/4.14.182:
-    resolution: {integrity: sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q==}
+  /@types/lodash/4.14.183:
+    resolution: {integrity: sha512-UXavyuxzXKMqJPEpFPri6Ku5F9af6ZJXUneHhvQJxavrEjuHkFp2YnDWHcxJiG7hk8ZkWqjcyNeW1s/smZv5cw==}
    dev: false

  /@types/long/4.0.2:
@ -3176,8 +3176,8 @@ packages:
      which: 2.0.2
    dev: true

-  /crossbell.js/0.10.15:
-    resolution: {integrity: sha512-sJ6J+tHwvqBGsTWAwqu8/is3B7WfTkyuwJ1Qb56/JoCj/l51Dha5KLUGaACJKlBuknvkmVB3zCPenEvmmbwMtQ==}
+  /crossbell.js/0.10.17:
+    resolution: {integrity: sha512-BRgclp6m0QsI9eA48mlBXaIIEBnYYNOW3hJPnegPqqrtaWafSdJhJPLP/qoKY13YdGEQBLszpjivrRYc+GKFhA==}
    dependencies:
      async-retry: 1.3.3
      ethers: 5.6.9
@ -4423,7 +4423,7 @@ packages:
    resolution: {integrity: sha512-UHHu1HqW22ZhK6C/1Zmjf7mQpOwPwLYZ+xcsOgpzistONU8QqvCop6Od29p/kw1GUVoq2Ihu6ItpKLtlojx4FQ==}
    engines: {node: '>=16'}
    dependencies:
-      undici: 5.8.2
+      undici: 5.9.1
    dev: false

  /file-entry-cache/6.0.1:
@ -8278,18 +8278,18 @@ packages:
    engines: {node: '>=12.18'}
    dev: true

-  /undici/5.8.2:
-    resolution: {integrity: sha512-3KLq3pXMS0Y4IELV045fTxqz04Nk9Ms7yfBBHum3yxsTR4XNn+ZCaUbf/mWitgYDAhsplQ0B1G4S5D345lMO3A==}
+  /undici/5.9.1:
+    resolution: {integrity: sha512-6fB3a+SNnWEm4CJbgo0/CWR8RGcOCQP68SF4X0mxtYTq2VNN8T88NYrWVBAeSX+zb7bny2dx2iYhP3XHi00omg==}
    engines: {node: '>=12.18'}
    dev: false

-  /unidata.js/0.6.12:
-    resolution: {integrity: sha512-fQ0C54+exK7n5j8zb91dBGy+o3vy9QWyCdJhyVXLrgGpBHOLbx4BOGO5sb0BK8fqY4w+TVFr/+CM7KboOU8mGg==}
+  /unidata.js/0.6.14:
+    resolution: {integrity: sha512-T6aQfebvrG+Y67z1a5lKHo6cf5yRL5quO9xqphxmFY1wS+0aOdaFc2TDRSdwnOGEWGtr/rEkPVzDiLUGJMpZCw==}
    dependencies:
-      '@types/lodash': 4.14.182
+      '@types/lodash': 4.14.183
      '@urql/core': 2.5.0_graphql@16.5.0
      axios: 0.27.2
-      crossbell.js: 0.10.15
+      crossbell.js: 0.10.17
      ethers: 5.6.9
      graphql: 16.5.0
      lodash: 4.17.21
--- a/src/components/site/SiteArchives.tsx
+++ b/src/components/site/SiteArchives.tsx
@ -6,7 +6,8 @@ import { Notes, Note } from "~/lib/types"

 export const SiteArchives: React.FC<{
  posts?: Notes
-}> = ({ posts }) => {
+  title?: string
+}> = ({ posts, title }) => {
  const groupedByYear = useMemo<Map<string, Note[]>>(() => {
    const map = new Map()

@ -26,7 +27,7 @@ export const SiteArchives: React.FC<{

  return (
    <>
-      <h2 className="text-xl font-bold page-title">Archives</h2>
+      <h2 className="text-xl font-bold page-title">{title || "Archives"}</h2>
      {posts.list.length === 0 && (
        <div className="mt-5">
          <EmptyState />
--- a/src/components/site/SiteHeader.tsx
+++ b/src/components/site/SiteHeader.tsx
@ -96,7 +96,6 @@ export const SiteHeader: React.FC<{
  const siteSubscriptions = useGetSiteSubscriptions({
    siteId: site?.username || "",
  })
-  console.log(siteSubscriptions.data)

  useEffect(() => {
    if (
--- a/src/models/page.model.ts
+++ b/src/models/page.model.ts
@ -107,6 +107,7 @@ export async function getPagesBySite(input: {
  includeContent?: boolean
  includeExcerpt?: boolean
  render?: boolean
+  tags?: string[]
 }) {
  if (!input.site) {
    return {
@ -122,6 +123,9 @@ export async function getPagesBySite(input: {
    identity: input.site,
    platform: "Crossbell",
    limit: input.take || 1000,
+    filter: {
+      tags: [...(input.tags || []), input.type],
+    },
  })) || {
    total: 0,
    list: [],
@ -154,7 +158,6 @@ export async function getPagesBySite(input: {
          page.applications?.includes("Crosslog") ||
          page.applications?.includes("xlog"),
      )
-      .filter((page) => page.tags?.includes(input.type))
      .sort((a, b) => +new Date(b.date_published) - +new Date(a.date_published))
    pages.total = pages.list.length

--- a/src/pages/_site/[site]/tag/[tag].tsx
+++ b/src/pages/_site/[site]/tag/[tag].tsx
@ -0,0 +1,63 @@
+import { GetServerSideProps } from "next"
+import { SiteLayout } from "~/components/site/SiteLayout"
+import { serverSidePropsHandler } from "~/lib/server-side-props"
+import { SiteArchives } from "~/components/site/SiteArchives"
+import { Viewer, Profile, Notes } from "~/lib/types"
+import { queryClientServer } from "~/lib/query-client.server"
+import { prefetchGetSite } from "~/queries/site.server"
+import { useGetSite } from "~/queries/site"
+import { dehydrate, QueryClient } from "@tanstack/react-query"
+import { useGetPagesBySite } from "~/queries/page"
+import { prefetchGetPagesBySite } from "~/queries/page.server"
+import { PageVisibilityEnum } from "~/lib/types"
+
+export const getServerSideProps: GetServerSideProps = serverSidePropsHandler(
+  async (ctx) => {
+    const domainOrSubdomain = ctx.params!.site as string
+    const tag = ctx.params!.tag as string
+
+    await prefetchGetSite(domainOrSubdomain)
+    await prefetchGetPagesBySite({
+      site: domainOrSubdomain,
+      take: 1000,
+      type: "post",
+      visibility: PageVisibilityEnum.Published,
+      tags: [tag],
+    })
+
+    return {
+      props: {
+        dehydratedState: dehydrate(queryClientServer),
+        domainOrSubdomain,
+        tag,
+      },
+    }
+  },
+)
+
+function SiteArchivesPage({
+  domainOrSubdomain,
+  tag,
+}: {
+  site: Profile
+  posts: Notes
+  domainOrSubdomain: string
+  tag: string
+}) {
+  const site = useGetSite(domainOrSubdomain)
+  const posts = useGetPagesBySite({
+    site: domainOrSubdomain,
+    take: 1000,
+    type: "post",
+    visibility: PageVisibilityEnum.Published,
+    tags: [tag],
+  })
+
+  return (
+    <SiteLayout site={site.data} title={tag}>
+      <SiteArchives posts={posts.data} title={tag} />
+    </SiteLayout>
+  )
+}
+
+export default SiteArchivesPage
--- a/src/pages/dashboard/[subdomain]/settings/navigation.tsx
+++ b/src/pages/dashboard/[subdomain]/settings/navigation.tsx
@ -128,6 +128,19 @@ export default function SiteSettingsNavigationPage() {
  return (
    <DashboardLayout title="Navigation">
      <SettingsLayout title="Site Settings" type="site">
+        <div className="p-5 text-zinc-500 bg-zinc-50 mb-5 rounded-lg text-xs space-y-2">
+          <p className="text-zinc-800 text-sm font-bold">
+            Tips: built-in pages
+          </p>
+          <p>
+            <span className="text-zinc-800">Archives page:</span>{" "}
+            <span className="bg-zinc-200 rounded-lg px-2">/archives</span>
+          </p>
+          <p>
+            <span className="text-zinc-900">Tag page:</span>{" "}
+            <span className="bg-zinc-200 rounded-lg px-2">/tag/[tag]</span>
+          </p>
+        </div>
        <form onSubmit={handleSubmit}>
          <div className="bg-zinc-50 rounded-lg overflow-hidden">
            {items.length === 0 && (