jackyzha0 / ctrl-v

📋 a modern, open-source pastebin with latex and markdown rendering support

ctrl-v

A modern, open-source pastebin with latex and markdown rendering support

Frontend is in React + Next.js and backend is in Go. Deployed via Vercel and Google Cloud Run.

Public API

The ctrl-v API is provided for free for other developers to easily develop on top of it. It can be reached at https://api.ctrl-v.app/.

GET /health

# get the health of the API
curl https://api.ctrl-v.app/health

# 200 OK
# > "status ok"

POST /api

# create a new paste
curl -L -X POST 'https://api.ctrl-v.app/api' \
    -F 'expiry=2021-03-09T01:02:43.082Z' \
    -F 'content=print(\"test content\")' \
    -F 'title=test paste' \
    -F 'language=python'

# or with a password
curl -L -X POST 'https://api.ctrl-v.app/api' \
    -F 'expiry=2021-03-09T01:02:43.082Z' \
    -F 'content=print(\"test content\")' \
    -F 'title=test paste' \
    -F 'language=python' \
    -F 'password=hunter2'

# 200 OK
# > { "hash": "6Z7NVVv" }

# 400 BAD_REQUEST
# happens when title/body is too long, password couldnt
# be hashed, or expiry is not in RFC3339 format

GET /api/{hash}

# get unprotected hash
curl https://api.ctrl-v.app/api/1t9UybX

# 200 OK
# > {
# >   "content": "print(\"test content\")",
# >   "expiry": "2021-03-09T01:02:43.082Z",
# >   "language": "python",
# >   "timestamp": "2021-03-02T01:06:16.209501971Z",
# >   "title": "test paste"
# > }

# 401 BAD_REQUEST
# happens when paste is password protected. when this happens, try the authenticated alternative using POST
# 404 NOT_FOUND
# no paste with that ID found

POST /api/{hash}

# get unprotected hash
curl -L -X POST 'https://api.ctrl-v.app/api/1t9UybX' \
  -F 'password=hunter2'

# 200 OK
# > {
# >   "content": "print(\"test content\")",
# >   "expiry": "2021-03-09T01:02:43.082Z",
# >   "language": "python",
# >   "timestamp": "2021-03-02T01:06:16.209501971Z",
# >   "title": "test paste"
# > }

# 401 BAD_REQUEST
# wrong password
# 404 NOT_FOUND
# no paste with that ID found

Developing

when doing local backend development, make sure you change the backend address to be localhost. You can find this on Line 4 of frontend/src/http/shared.js

Common

make dev — starts React development server on :3000 and backend on :8080

Frontend

make fe-run — starts React development server on :3000

make fe-build — builds development release of frontend in frontend/build

Backend

make run — starts backend on :8080

make lint — lints all Go files

make docker-build — builds Docker image of current backend

make docker-run — runs built Docker image on :8080

ctrl-v's Issues

refactor class components to use functional components

🌙 Dark mode

'nuff said

const theme = {
  colors: {
    background: '#111111',
    codeHighlight: '#ffffff08',
    border: '#565656',
    text: '#faf9f5',
    error: '#ee1111',
  },
}

AC:

• Add toggle to switch themes
• Persist option to local storage

Add line number selection

Would be nice to be able to create permalinks for pastes too, similar to what GitHub offers: https://docs.github.com/en/github/managing-your-work-on-github/creating-a-permanent-link-to-a-code-snippet

Example URL would be https://ctrl-v.app/2uKMJEu#L1-L14

Good place to start would be the lineProps prop on the syntax highlighter: https://www.npmjs.com/package/react-syntax-highlighter

AC:

• After a paste has been created, users should be able to click on the line number gutter to highlight/select lines
• Selecting lines should bring up the option to copy a permalink to those lines
• Viewing a paste with permalink anchors should highlight those lines

Setup CI/CD Workflows

AC:

• Changes to backend are deployed to GCR
• Changes to frontend are deployed to Firebase Hosting

Markdown Code Rendered Differently in Preview

When previewing markdown on the main page, both code blocks and inline code are displayed without the background:

The render of the actual paste:

Also syntax highlighting would be nice if it isn't too hard.

add cache invalidation for expired pastes

Ability to 'fork' a paste

Would be nice to be able to copy content of an existing paste and make a new one with its contents

AC:

• Add a 'fork' button to view paste page
• Add new backend endpoint to create paste with content

Text Area control are finicky

Indenting and unindenting text kinda sucks right now

AC:

• Properly support tabbing and shift-tabbing
• Set tab spacing to 2 spaces

paste sanitization

make sure people's pastes aren't the big bad

Markdown Syntax Highlighting

Ryan: "also syntax highlighting would be nice if it isn't too hard"

Say less. This discussion may be a good starter: remarkjs/react-markdown#46

Migrate to Next.js

UI is unclear

AC:

• Make password field description
• Rename 'new paste' to 'create paste'
• Add spinner to indicate loading

fix and refactor makefile

1. fix docker-all to properly depend on docker-build
2. move all backend related makefile stuff into backend and reference it using -C flag
3. move all frontend related makefile stuff into frontend and reference it using -C flag

add ability to embed pastes

When I link a paste that's latex, a preview is rendered.

add loading text to ViewPaste component

account for container spin-up time (~300ms) and make ViewPaste component display loading... while we wait for a response

add markdown rendering support

Add documentation for public API

AC:

• Document public API endpoints in README

Add language autodetect for syntax highlighting

AC:

• ctrl-v should auto-detect the language I've pasted in
• Language select should update
• increase language selection!!

Style Tags Not Working

<p style="color: blue">Siddhant</p>

This Should Render to:

But, it is rendering like this:

fix mobile view

website looks like garbage on mobile, pls fix
probably just use media queries? @ianmah lmk if you have experience w responsive react

AC

• mobile no longer looks like ass

Related to all CSS issues

• Responsive Watermark at Bottom Left
• Password TextBox

Please add more to the list, if you find any!

add tab support to text input

make sure pressing tab adds 4 spaces rather than focusing next input field

replace current markdown renderer with React Markdown

https://github.com/rexxars/react-markdown