Add bio tips

web/components/bio/editable-bio.tsx

@@ -8,6 +8,50 @@ import { Row } from 'web/components/layout/row'
 import { TextEditor, useTextEditor } from 'web/components/widgets/editor'
 import { updateProfile } from 'web/lib/api'
 import { track } from 'web/lib/service/analytics'
+import React, {useState} from "react";
+import ReactMarkdown from "react-markdown";
+import Link from "next/link"
+
+const placeHolder = "Tell us about yourself — and what you're looking for!";
+
+const tips = `
+Write a clear and engaging bio to help others understand who you are and the connections you seek. Include:
+- Your core values, interests, and activities
+- Connection goals (friendship, romantic, collaborative) and availability
+- What makes you unique and what you care about
+- Expectations, boundaries, and personality traits
+- Optional: romantic preferences, lifestyle habits, and conversation starters
+`
+
+export function BioTips() {
+  const [showMoreInfo, setShowMoreInfo] = useState(false)
+
+  return (
+    <div className="mt-2 mb-4">
+      <button
+        type="button"
+        onClick={() => setShowMoreInfo(!showMoreInfo)}
+        className="text-sm text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 flex items-center"
+      >
+        {showMoreInfo ? 'Hide info' : 'Tips'}
+        <svg
+          className={`w-4 h-4 ml-1 transition-transform ${showMoreInfo ? 'rotate-180' : ''}`}
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7"/>
+        </svg>
+      </button>
+      {showMoreInfo && (
+        <div className="mt-2 p-3 rounded-md text-sm customlink">
+          <ReactMarkdown>{tips}</ReactMarkdown>
+          <Link href="/tips-bio" target="_blank">Read full tips for writing a high-quality bio</Link>
+        </div>
+      )}
+    </div>
+  )
+}
 
 export function EditableBio(props: {
   profile: Profile
@@ -18,7 +62,7 @@ export function EditableBio(props: {
   const editor = useTextEditor({
     max: MAX_DESCRIPTION_LENGTH,
     defaultValue: (profile.bio as JSONContent) ?? '',
-    placeholder: "Tell us about yourself — and what you're looking for!",
+    placeholder: placeHolder,
   })
 
   const hideButtons = editor?.getText().length === 0 && !profile.bio
@@ -37,6 +81,7 @@ export function EditableBio(props: {
 
   return (
     <Col className="relative w-full">
+      <BioTips/>
       <TextEditor editor={editor} />
 
       {!hideButtons && (
@@ -68,11 +113,12 @@ export function SignupBio(props: {
   const editor = useTextEditor({
     max: MAX_DESCRIPTION_LENGTH,
     defaultValue: '',
-    placeholder: "Tell us about yourself — and what you're looking for!",
+    placeholder: placeHolder,
   })
 
   return (
     <Col className="relative w-full">
+      <BioTips/>
       <TextEditor
         editor={editor}
         onBlur={() => {

web/pages/tips-bio.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import fs from 'fs';
+import path from 'path';
+import MarkdownPage from "web/components/markdown";
+
+const FILENAME = __filename.split('/').pop()?.split('.').shift();
+
+export async function getStaticProps() {
+  const filePath = path.join(process.cwd(), 'public', 'md', FILENAME + '.md');
+  const content = fs.readFileSync(filePath, 'utf8');
+  return {props: {content}};
+}
+
+type Props = { content: string };
+
+export default function Faq({content}: Props) {
+  if (!FILENAME) throw new Error('Could not determine filename');
+  return <MarkdownPage content={content} filename={FILENAME}></MarkdownPage>
+}

web/public/md/tips-bio.md

@@ -0,0 +1,132 @@
+# How to Write a High-Quality Compass Bio
+
+A strong bio is the heart of Compass. It helps others understand who you are, what you care about, and the type of connections you seek. Use the sections below as a guide — include what feels meaningful, and feel free to expand or combine sections as needed.
+
+## 1. **Introduction**
+
+* Briefly introduce yourself: name/nickname, age, languages spoken, location, and general lifestyle.
+
+Example:
+
+_Hi, I’m Lily, a 28-year-old living in Paris. I speak English and French fluently, work in environmental research, and love exploring creative hobbies on weekends._
+
+## 2. **Connection Goals**
+
+* Specify what types of connections you’re seeking: friendship, romantic, collaborative, or multiple.
+* Include your **availability**, timezone, and how you prefer to communicate.
+
+Example:
+
+_I’m looking for deep, meaningful friendships and long-term collaborative projects. I’m in CET timezone and usually available evenings for calls or meetups._
+
+## 3. **Core Values**
+
+* Share the principles that guide your life, decision-making, and relationships.
+* Consider values like honesty, growth, emotional stability, ethical responsibility, or integrity.
+
+Example:
+
+  - _Intellectual curiosity: I enjoy exploring new ideas and challenging my own assumptions._
+  - _Emotional stability: I prioritize calm, constructive dialogue in conflict._
+  - _Ethical responsibility: I aim to reduce suffering in the world through conscious choices._
+
+## 4. **Interests and Activities**
+
+* Hobbies, intellectual pursuits, and preferred ways to spend time.
+* Include specifics (books, movies, sports, creative projects, volunteer work).
+
+Example:
+
+  - _Hiking, meditation, and yoga_
+  - _Reading philosophy, neuroscience, and science fiction_
+  - _Community volunteering: environmental cleanups_
+
+## 5. **Personality and Thinking Style**
+
+* Include your thinking style, emotional tendencies, and results from evidence-based personality tests (e.g., Big 5, MBTI, enneagram).
+* Optional: describe humor, creativity, ambition, organization, or typical reactions to stress.
+
+Example:
+
+  - _Thinking style: analytical and reflective_
+  - _Humor: playful sarcasm and witty observations_
+  - _Personality: introverted, high conscientiousness_
+
+## 6. **Lifestyle and Preferences**
+
+* Include practical habits and preferences: diet, sleep, exercise, living situation, work-life balance, and pets.
+* You may also note subcultures, routines, or quirky habits that define your day-to-day life.
+
+Example:
+
+  - _Mostly vegan_
+  - _Early riser, morning exercise routine_
+  - _Live in a small apartment, enjoy minimalism_
+
+## 7. **Health and Self-Improvement**
+
+* Share relevant physical or mental health traits, triggers, therapy goals, or what you’re actively trying to improve.
+
+Example:
+
+  - _Working on managing anxiety during high-stress situations_
+  - _Physically active but recovering from a minor knee injury_
+
+## 8. **Romantic Relationships (Optional)**
+
+* Only include if seeking romantic connections.
+
+* Examples of what to share:
+
+    * Love languages (giving and receiving)
+    * Timeline for relationship goals
+    * Romantic orientation and preferences
+    * Family goals (children, pets)
+    * Work-life balance and financial habits
+    * Housing situation (renting vs. owning)
+    * Comfort with dating someone with kids
+
+Example:
+
+  - _Romantic orientation: heterosexual_
+  - _Love languages: quality time and words of affirmation_
+  - _Prefer a monogamous relationship, ideally building a family in the next 5–10 years_
+
+## 9. **Ideal Connections**
+
+* Describe the traits, values, or interests you’d like in the people you connect with.
+* Include where alignment is essential vs. where diversity is welcomed.
+
+Example:
+
+  _I value honesty, curiosity, and humor. I’m open to different career paths, but shared commitment to personal growth is important._
+
+## 10. **Altruistic and Community Values**
+
+* Share causes or community efforts you care about.
+* Examples: sustainability, social justice, volunteering, or charitable initiatives.
+
+Example:
+
+  - _Active in local environmental and animal welfare projects_
+  - _Support education access initiatives in developing countries_
+
+## 11. **Conversation Starters**
+
+* Include questions, prompts, or topics you enjoy discussing.
+* Helps people reach out naturally and start meaningful conversations.
+
+Example:
+
+  - _What book changed the way you see the world?_
+  - _Favorite thought experiment or philosophical puzzle?_
+  - _How do you integrate mindfulness into your daily life?_
+
+## **Tips for a Great Bio**
+
+* Be **authentic and specific**. Concrete examples are more memorable than general statements.
+* Balance **depth and readability**: enough information to connect meaningfully without overwhelming.
+* **Update periodically** as your interests, availability, or goals evolve.
+* Respect privacy — share what you’re comfortable with, but don’t shy away from showing personality.
+
+[//]: # (*** Use **Markdown formatting**: headings, bullet points, and line breaks make your bio easy to scan.**)