• repo
  • readme
  • stackblitz

mark-my-words

View on Github

    Topics:

  • extension
  • vscode
.

A vscode extension to publish selected snippet of text to a post endpoint

mark-my-words
.
B

Languages

  • .
  • .
  • .
  • .
  • TypeScript95.4%
  • CSS2.6%
  • JavaScript1.2%
  • HTML0.8%

mark-my-words readme

Mark My Words

A vscode extension tio publish selected snippet of text to an endpoint

usage

  • select a block of text or markdown and trigger th extension using ctrl/cmd + shift + p then type Publish selected

configure the endpoint in the extension settings
settings image

  • the first level requires
  • the name you wan to give this
  • the base url
  • the method
  • the endpoint (will be joied with the base url)
  • the headers
  • the body (key , value)

📝 Note
title,description and content will be the default locatiosn but you can configure paggings to pint to other fileds in you body request

{
  "formData.title": "body.title",
  "formData.description": "body.description",
  "formData.content": "body.markdown", // my backend expects a field named markdown insted of content
  "request.token": "headers.Authorization" // when you add an auth method it will add the returned token to this header
}

adding these hints will auto extract the title and description for you

// ---Title:This title will be extracted
// ---Description:This description will be extracted

🚨 Warning
your settings are savde in vscode workspace settings take any approprate precautions

[!NOTE]
It looks ugly and clutterd but it works. so if you have ideas how to make it look better please let me know

Tech stack

vite + preact + typescript + tailwindcss + zustand

helpful references:

  • vite plugin vscode : use any vite framework to write your webviews

  • vscode-tailwind: a tailwind plugin with all the vscode color variables and utilities

  • vscode-elements : a set of web components that align with vscode style

  • vscode elements react example

  • Ben awad intor to vscode plugins : old video on how to use vscode plugins , probably use the stater code fro the vite vscode repo but the commands and techniques are almost the same

[!NOTE]
if you pick react remember to disable strict mode