Add post subtitle

common/post.ts

@@ -3,6 +3,7 @@ import { JSONContent } from '@tiptap/core'
 export type Post = {
   id: string
   title: string
+  subtitle: string
   content: JSONContent
   creatorId: string // User id
   createdTime: number
@@ -17,3 +18,4 @@ export type DateDoc = Post & {
 }
 
 export const MAX_POST_TITLE_LENGTH = 480
+export const MAX_POST_SUBTITLE_LENGTH = 480

functions/src/create-post.ts

@@ -3,7 +3,11 @@ import * as admin from 'firebase-admin'
 import { getUser } from './utils'
 import { slugify } from '../../common/util/slugify'
 import { randomString } from '../../common/util/random'
-import { Post, MAX_POST_TITLE_LENGTH } from '../../common/post'
+import {
+  Post,
+  MAX_POST_TITLE_LENGTH,
+  MAX_POST_SUBTITLE_LENGTH,
+} from '../../common/post'
 import { APIError, newEndpoint, validate } from './api'
 import { JSONContent } from '@tiptap/core'
 import { z } from 'zod'
@@ -36,6 +40,7 @@ const contentSchema: z.ZodType<JSONContent> = z.lazy(() =>
 
 const postSchema = z.object({
   title: z.string().min(1).max(MAX_POST_TITLE_LENGTH),
+  subtitle: z.string().min(1).max(MAX_POST_SUBTITLE_LENGTH),
   content: contentSchema,
   groupId: z.string().optional(),
 
@@ -48,10 +53,8 @@ const postSchema = z.object({
 
 export const createpost = newEndpoint({}, async (req, auth) => {
   const firestore = admin.firestore()
-  const { title, content, groupId, question, ...otherProps } = validate(
-    postSchema,
-    req.body
-  )
+  const { title, subtitle, content, groupId, question, ...otherProps } =
+    validate(postSchema, req.body)
 
   const creator = await getUser(auth.uid)
   if (!creator)
@@ -89,6 +92,7 @@ export const createpost = newEndpoint({}, async (req, auth) => {
     creatorId: creator.id,
     slug,
     title,
+    subtitle,
     createdTime: Date.now(),
     content: content,
     contractSlug,

web/components/create-post.tsx

@@ -13,6 +13,8 @@ import { Group } from 'common/group'
 
 export function CreatePost(props: { group?: Group }) {
   const [title, setTitle] = useState('')
+  const [subtitle, setSubtitle] = useState('')
+
   const [error, setError] = useState('')
   const [isSubmitting, setIsSubmitting] = useState(false)
 
@@ -22,12 +24,17 @@ export function CreatePost(props: { group?: Group }) {
     disabled: isSubmitting,
   })
 
-  const isValid = editor && title.length > 0 && editor.isEmpty === false
+  const isValid =
+    editor &&
+    title.length > 0 &&
+    subtitle.length > 0 &&
+    editor.isEmpty === false
 
   async function savePost(title: string) {
     if (!editor) return
     const newPost = {
       title: title,
+      subtitle: subtitle,
       content: editor.getJSON(),
       groupId: group?.id,
     }
@@ -62,6 +69,20 @@ export function CreatePost(props: { group?: Group }) {
               onChange={(e) => setTitle(e.target.value || '')}
             />
             <Spacer h={6} />
+            <label className="label">
+              <span className="mb-1">
+                Subtitle<span className={'text-red-700'}> *</span>
+              </span>
+            </label>
+            <Textarea
+              placeholder="e.g. How Elon Musk is getting everyone's attention"
+              className="input input-bordered resize-none"
+              autoFocus
+              maxLength={MAX_POST_TITLE_LENGTH}
+              value={subtitle}
+              onChange={(e) => setSubtitle(e.target.value || '')}
+            />
+            <Spacer h={6} />
             <label className="label">
               <span className="mb-1">
                 Content<span className={'text-red-700'}> *</span>

web/components/groups/group-overview-post.tsx

@@ -43,6 +43,7 @@ function RichEditGroupAboutPost(props: { group: Group; post: Post | null }) {
     if (!editor) return
     const newPost = {
       title: group.name,
+      subtitle: 'About post for the group',
       content: editor.getJSON(),
     }
 

web/components/post-card.tsx

@@ -45,6 +45,9 @@ export function PostCard(props: {
             <span className="text-gray-500">{fromNow(post.createdTime)}</span>
           </div>
           <div className="text-lg font-medium text-gray-900">{post.title}</div>
+          <div className="font-small text-md text-gray-500">
+            {post.subtitle}
+          </div>
         </div>
       </Row>
       {onPostClick ? (

web/pages/date-docs/create.tsx

@@ -23,6 +23,7 @@ export default function CreateDateDocPage() {
   })
 
   const title = `${user?.name}'s Date Doc`
+  const subtitle = 'Manifold dating docs'
   const [birthday, setBirthday] = useState<undefined | string>(undefined)
   const [question, setQuestion] = useState(
     'Will I find a partner in the next 3 months?'
@@ -46,6 +47,7 @@ export default function CreateDateDocPage() {
       'id' | 'creatorId' | 'createdTime' | 'slug' | 'contractSlug'
     > & { question: string } = {
       title,
+      subtitle,
       content: editor.getJSON(),
       bounty: 0,
       birthday: birthdayTime,

web/pages/post/[...slugs]/index.tsx

@@ -25,6 +25,7 @@ import { useCommentsOnPost } from 'web/hooks/use-comments'
 import { useUser } from 'web/hooks/use-user'
 import { usePost } from 'web/hooks/use-post'
 import { SEO } from 'web/components/SEO'
+import { Subtitle } from 'web/components/subtitle'
 
 export async function getStaticProps(props: { params: { slugs: string[] } }) {
   const { slugs } = props.params
@@ -75,7 +76,11 @@ export default function PostPage(props: {
         url={'/post/' + post.slug}
       />
       <div className="mx-auto w-full max-w-3xl ">
-        <Title className="!mt-0 py-4 px-2" text={post.title} />
+        <div>
+          <Title className="!my-0 px-2 pt-4" text={post.title} />
+          <br />
+          <Subtitle className="!mt-2 px-2 pb-4" text={post.subtitle} />
+        </div>
         <Row>
           <Col className="flex-1 px-2">
             <div className={'inline-flex'}>