{"id":22559692,"url":"https://github.com/taurusilver7/canva-code","last_synced_at":"2025-10-08T07:41:00.666Z","repository":{"id":192331945,"uuid":"686520634","full_name":"taurusilver7/canva-code","owner":"taurusilver7","description":"A custom code-snippet screenshot web application built with React \u0026 Tailwindcss","archived":false,"fork":false,"pushed_at":"2023-09-08T15:58:02.000Z","size":331,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-02T12:35:50.756Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://canva-code.vercel.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/taurusilver7.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-09-03T04:12:32.000Z","updated_at":"2023-09-12T04:18:19.000Z","dependencies_parsed_at":"2023-09-04T08:40:56.176Z","dependency_job_id":"81abe276-b461-4dfa-a940-9ebee80f861f","html_url":"https://github.com/taurusilver7/canva-code","commit_stats":null,"previous_names":["taurusilver7/canva-code"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taurusilver7%2Fcanva-code","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taurusilver7%2Fcanva-code/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taurusilver7%2Fcanva-code/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taurusilver7%2Fcanva-code/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/taurusilver7","download_url":"https://codeload.github.com/taurusilver7/canva-code/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246026110,"owners_count":20711581,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-07T21:08:00.059Z","updated_at":"2025-10-08T07:40:55.635Z","avatar_url":"https://github.com/taurusilver7.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Canva Code\n\n\u003e Explore the state-of-art Custom Code Screenshot Web Application built with React, Vite \u0026 Tailwindcss.\n\n## Highlights\n\n-  Capture a DOM Node screenshot using [html-to-image](https://www.npmjs.com/package/html-to-image)\n-  Code Syntax Highlighting using [highlight.js](https://www.npmjs.com/package/re-resizable). It has a primary auto language detection support.\n-  Auto programming-language detection using [flourite](https://www.npmjs.com/package/flourite)\n\n-  Crop \u0026 resize the code snippet with [re-resizable](https://www.npmjs.com/package/re-resizable)\n-  Manage the global state management with [Zustand](https://www.npmjs.com/package/zustand)\n\n## Available Script\n\n```bash\nnpm create vite@latest \u003cname\u003e -- --template react\n# and\nnpm run dev (to run local development server)\n```\n\n```bash\nnpm i -D tailwindcss autoprefixer postcss\n# and\nnpx tailwindcss init -p\n# and (after Initial set up, add shadcn-ui)\nnpx shadcn-ui@latest init\n# Follow the instructions to setup a base configuration.\n\n```\n\n## Build\n\nAdd paths to the template in tailwind configuration. Using a `meta` tag, set the application color scheme to dark.\n\nFollow the [guide](https://ui.shadcn.com/docs/installation/vite) \u0026 set up a configuration file for shadcn-ui.\n\nResolve any [path errors](https://ui.shadcn.com/docs/installation/vite) in `vite.config.js`.\n\nFollow 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.\n\nAdd the react Toaster at the top level in the root component. Make a programming language object file to support multi pardigarm languages.\n\nCreate a CodeEditor component with a mac-style header \u0026 react-simple-code-editor component.\n\nSetup a global state with zustand. Create initial vales for the code-snippet user preferences in the store \u0026 import them in root \u0026 codeEditor. Create terenary operators for background, theme, fonts in the code snippet.\n\nAdd 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.\n\nCreate 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.\n\nThe App root component should handle the copyLink since the query parameters for the location are available in the App component.\n\nCustomize the snippet props like the theme, cropping, language, fonts, darkMode. Adjust the overflow height of options \u0026 their widths to fit into the block.\n\nAdd additional options, if any.\n\n## Deploy\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftaurusilver7%2Fcanva-code","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftaurusilver7%2Fcanva-code","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftaurusilver7%2Fcanva-code/lists"}