https://github.com/taurusilver7/canva-code
A custom code-snippet screenshot web application built with React & Tailwindcss
https://github.com/taurusilver7/canva-code
Last synced: 9 months ago
JSON representation
A custom code-snippet screenshot web application built with React & Tailwindcss
- Host: GitHub
- URL: https://github.com/taurusilver7/canva-code
- Owner: taurusilver7
- Created: 2023-09-03T04:12:32.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-09-08T15:58:02.000Z (almost 3 years ago)
- Last Synced: 2025-02-02T12:35:50.756Z (over 1 year ago)
- Language: JavaScript
- Homepage: https://canva-code.vercel.app
- Size: 323 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Canva Code
> Explore the state-of-art Custom Code Screenshot Web Application built with React, Vite & Tailwindcss.
## Highlights
- Capture a DOM Node screenshot using [html-to-image](https://www.npmjs.com/package/html-to-image)
- Code Syntax Highlighting using [highlight.js](https://www.npmjs.com/package/re-resizable). It has a primary auto language detection support.
- Auto programming-language detection using [flourite](https://www.npmjs.com/package/flourite)
- Crop & resize the code snippet with [re-resizable](https://www.npmjs.com/package/re-resizable)
- Manage the global state management with [Zustand](https://www.npmjs.com/package/zustand)
## Available Script
```bash
npm create vite@latest -- --template react
# and
npm run dev (to run local development server)
```
```bash
npm i -D tailwindcss autoprefixer postcss
# and
npx tailwindcss init -p
# and (after Initial set up, add shadcn-ui)
npx shadcn-ui@latest init
# Follow the instructions to setup a base configuration.
```
## Build
Add paths to the template in tailwind configuration. Using a `meta` tag, set the application color scheme to dark.
Follow the [guide](https://ui.shadcn.com/docs/installation/vite) & set up a configuration file for shadcn-ui.
Resolve any [path errors](https://ui.shadcn.com/docs/installation/vite) in `vite.config.js`.
Follow the guide and add [shadcn-ui] to the dependencies. Add other dependencies based on the project requirements. Most of them are based on the image conversions, screenshot capture.
Add the react Toaster at the top level in the root component. Make a programming language object file to support multi pardigarm languages.
Create a CodeEditor component with a mac-style header & react-simple-code-editor component.
Setup a global state with zustand. Create initial vales for the code-snippet user preferences in the store & import them in root & codeEditor. Create terenary operators for background, theme, fonts in the code snippet.
Add the export options to the menu, and create their corresponding handler functions. Create copyImage to copy the ref target image with a standard pixel ratio and copy it to clipboard.
Create a copyLink handler function to get the code state from the store before copying to the clipboard. Create a saveImage handler to save the image in png or svg format.
The App root component should handle the copyLink since the query parameters for the location are available in the App component.
Customize the snippet props like the theme, cropping, language, fonts, darkMode. Adjust the overflow height of options & their widths to fit into the block.
Add additional options, if any.
## Deploy