import CodeMirrorMarkdownEditor from '~/components/CodeMirrorMarkdownEditor'
import PageLayout from '~/components/PageLayout'
import { SITE_NAME } from '~/lib/site-config'

export function meta() {
  return [{ title: `Help — ${SITE_NAME}` }]
}

const HELP_CONTENT = `
Our editor uses Markdown plus extensions designed for writers in specialized fields.
Don't worry, the **toolbar buttons** will help you with the syntax.
For a deeper dive please see the documentation sites for
[GitHub Flavored Markdown](https://github.github.com/gfm/),
[KaTeX](https://katex.org/docs/support_table.html) math notation,
[Mermaid](https://mermaid.js.org/intro/) diagrams,
[ABC](https://paulrosen.github.io/abcjs/overview/abc-notation.html) music notation, and
[Fountain](https://fountain.io/syntax/) screenplays.

You can upload images to use anywhere on your article. 
They will be saved to your personal data server (PDS) and served through Bluesky's content delivery network (CDN) for super fast access, just like the photos in your Bluesky posts.

<br/><br/>

## Mentions, hashtags, and cashtags

Just type things like #wildlife or @atproto.com for Bluesky hashtags and profiles.  
You can also view detailed financial information for stocks and index symbols like $AAPL or $^GSPC . It won't affect price text like $10 so no worries.

<br/>

## Code

Inline as \`myVariable\` or in a code block with syntax highlighting and a language badge:

\`\`\`javascript
function hello() {
  console.log("Hello, world!");
}
\`\`\`

<br/><br/>

## Math

Use LaTeX syntax for math. Expressions within text like $$ log_2(64) = 6 $$ stay inline.

Expressions surrounded by blank lines are rendered in display mode:

$$\\sum_{i=1}^{n} i = \\frac{n(n+1)}{2}$$

- Surround text with \`$$\` for math expressions 
e.g. \`$$ x^2 $$\` becomes $$x^2$$.
- Start with \`\\$\` when you want 2 or more $ signs in a row as literals.  
For example, use \`\\$$$\` to display a price as $$$.

<br/><br/>

## Function Plots

Visualize 2-D mathematical functions in an interactive graph using ECMAScript syntax:

\`\`\`functionplot
x^2
sin(x)
log2(x)
\`\`\`

<br/><br/>

You can also use **frontmatter** (a common format for specifying metadata in Markdown documents) to show or hide the grid and specify the **size**, **domain**, and **range** for the plot.

\`\`\`functionplot
---
xMin: 0
xMax: 10
yMin: 0
yMax: 10
width: 500
height: 250
grid: true
---
1
log2(x)
x
x*log2(x)
x^2
\`\`\`

<br/><br/>

## Musical Notation

ABC notation for musical scores:

\`\`\`abc
X:1
K:D
DD AA|BBA2|
\`\`\`

<br/><br/>

## Embed web content

You can also embed web content like music, video, social media posts, or even a whole coding sandbox thanks to [Iframely](https://iframely.com/domains). 
Just select the **Embed** button on the toolbar while writing your post. 

### Social Media

\`\`\`embed
https://bsky.app/profile/bsky.app/post/3l6oveex3ii2l
\`\`\`

<br/><br/>

### Music & Podcasts

\`\`\`embed
https://open.spotify.com/track/7dLU4J2XZ9cRB9SJqORo9d?si=2267fa99c8ae46b2
\`\`\`

<br/>

\`\`\`embed
https://open.spotify.com/episode/0SoZg3LjLsMvhoTLcEI64g?si=q5UnilO0SIiot4apmPmBlA
\`\`\`

### GIFs

\`\`\`embed
https://media2.giphy.com/media/v1.Y2lkPTc5MGI3NjExZmEyc2JkNDY2cGRwY3hjN2g4ZXh6cWhlYjJhd204dTNrdWxsNXBodSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/5VKbvrjxpVJCM/giphy.gif
\`\`\`

### Photo and video

\`\`\`embed
https://picsum.photos/500
\`\`\`

<br/>

\`\`\`embed
https://www.youtube.com/watch?v=iX6w1P60m8M
\`\`\`

<br/><br/>

## Technical Diagrams

Use [Mermaid](https://mermaid.js.org/intro/) syntax to write all kinds of diagrams. A few examples:  

### Flowchart

\`\`\`mermaid
flowchart TD
    A[Start] --> B{Is it working?}
    B -->|Yes| C[Great!]
    B -->|No| D[Debug]
    D --> B
    C --> E[End]
\`\`\`

<br/><br/>

### Architecture diagram

\`\`\`mermaid
architecture-beta
group api(cloud)[Infrastructure]

service db(database)[Database] in api
service disk1(disk)[Storage] in api
service server(server)[Server] in api

server:R -- L:db
server:B -- T:disk1
\`\`\`

<br/><br/>

Architecture diagrams support [logos](https://icon-sets.iconify.design/logos/)!
\`\`\`mermaid
architecture-beta
group api(logos:aws-cloudformation)[Infrastructure]

service db(logos:aws-aurora)[Database] in api
service disk1(logos:aws-s3)[Storage] in api
service server(logos:aws-ec2)[Server] in api

server:R -- L:db
server:B -- T:disk1
\`\`\`

<br/><br/>

### Git diagram

\`\`\`mermaid
---
title: Example Git diagram
---

gitGraph:
    commit
    branch feature1
    commit id:"my changes"
    checkout main
    commit
    merge feature1
    commit
    commit tag:"v1.0.0" type: HIGHLIGHT 
    branch feature2
    commit
\`\`\`

<br/><br/>

### Sankey diagram

\`\`\`mermaid
sankey
%% source,target,value
Revenue, Online store, 104.453
Revenue, Physical stores, 113.726
Revenue, Subscription services, 27.14
\`\`\`

<br/><br/>

### Sequence diagram

\`\`\`mermaid
---
title: Conversation
---
sequenceDiagram
Alice->>John: Hello John, how are you?
loop Healthcheck
    John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
\`\`\`

<br/><br/>

Flowcharts and sequence diagrams support math!
\`\`\`mermaid
sequenceDiagram
    autonumber
    participant 1 as $$\\alpha$$
    participant 2 as $$\\beta$$
    1->>2: Solve: $$\\sqrt{2+2}$$
    2-->>1: Answer: $$2$$
    Note right of 2: $$\\sqrt{2+2}=\\sqrt{4}=2$$

\`\`\`

<br/><br/>

### Kanban board

\`\`\`mermaid
---
config:
  kanban:
    ticketBaseUrl: 'https://mermaidchart.atlassian.net/browse/#TICKET#'
---
kanban
  Todo
    [Create Documentation]
    docs[Create blog about the new diagram]
  [In progress]
    id6[Create renderer so that it works in all cases.]
  id9[Ready for deploy]
    id8[Design grammar]@{ assigned: 'knsv' }
  id10[Ready for test]
    id4[Create parsing tests]@{ ticket: MC-2038, assigned: 'K.Sveidqvist', priority: 'High' }
    id66[Last item]@{ priority: 'Very Low', assigned: 'knsv' }
  id11[Done]
    id5[Define getData]
    id2[Title of diagram is more than 100 chars when user duplicates diagram with 100 char]@{ ticket: MC-2036, priority: 'Very High'}
    id3[Update DB function]@{ ticket: MC-2037, assigned: knsv, priority: 'High' }

  id12[Can't reproduce]
    id3[Weird flickering in Firefox]
\`\`\`

<br/><br/>

### Quadrant chart

\`\`\`mermaid
quadrantChart
    title Reach and engagement of campaigns
    x-axis Low Reach --> High Reach
    y-axis Low Engagement --> High Engagement
    quadrant-1 We should expand
    quadrant-2 Need to promote
    quadrant-3 Re-evaluate
    quadrant-4 May be improved
    Campaign A: [0.3, 0.6]
    Campaign B: [0.45, 0.23]
    Campaign C: [0.57, 0.69]
    Campaign D: [0.78, 0.34]
    Campaign E: [0.40, 0.34]
    Campaign F: [0.35, 0.78]
\`\`\`

<br/><br/>

## Fountain Screenplays

Write screenplays in Fountain format (experimental):

\`\`\`fountain
Title: Your Screenplay
Credit: written by
Author: Your Name
Source: based on the novel by Someone
Notes:
  FINAL PRODUCTION DRAFT
Copyright: (c) 2025 Awesome Pictures

This is a personal story.

====

INT. COFFEE SHOP - DAY

JOHN sits at a table, typing on his laptop.

JOHN 
(excited)
This is how you write a screenplay! I really like this place. Good drinks, friendly staff.

SARAH approaches.

SARAH
What are you working on?

CUT TO BLACK.

> _**THE END**_ <
\`\`\`
`

export default function Help() {
  return (
    <PageLayout maxWidth="4xl" spacing="8">
      <h1 className="font-display text-2xl font-semibold text-stone-900 dark:text-white">Help</h1>
      <CodeMirrorMarkdownEditor displayMode="preview" initialValue={HELP_CONTENT} showToolbar={false} />
    </PageLayout>
  )
}
