Create elegant screenshots of your source code. Built with SolidJS

Last update: Jan 3, 2023

Overview

Create elegant code screenshots of your source code.

Introduction

CodeImage is the newest tool to help developers to create beautiful screenshots of their code, providing several features to speed up the process to post in social media.

🚀 Features

✅ Customizable terminal window, editor and frame style
✅ 15+ custom themes for code editor
✅ Highlighting support for 10+ programming languages
✅ Tab name with customizable icons
✅ Web share api support
✅ Keyboard shortcuts support
✅ Mobile view support
✅ Multi-language support
✅ Light and dark mode support

💻 Run locally

To run the project locally, you must have in your local machine pnpm >= 6.23.2 and node >= 14.x;

Install dependencies

$ pnpm install

Build core libraries

$ pnpm libs:build

Run @codeimage/app

Development mode:

$ pnpm dev

Production mode (no reload, serve static files):

$ pnpm build:prod && pnpm serve --filter=@codeimage/app

🤖 Tech stack

CodeImage front-end app currently relies on these technologies:

SolidJS: UI framework
CodeMirror6: Code Editor
vanilla-extract: Design system and app theme
HeroIcons: Icons
solid-headless: Headless WAI-ARIA widgets for SolidJS
@ngneat/elf + RxJS: Reactive state management

Other libraries:

solid-primitives: SolidJS primitives library
solid-use: Collection of solid-js utilities
material-icon-theme: Icons for custom terminal tabs
@emotion/css: CSS Utility used for custom codemirror themes
floating-ui: Utilities for positioning floating elements
Lion: White label web components in Lit (used for custom combobox)

🌏 Contributions

⚠️ Read this before opening any PR!

When contributing, it's better to first discuss the change you wish to make via issue or discussion, or any other method with the owners of this repository before making a change.

Until the end of solid hackathon voting ends phase, pull request must target the next branch

See the CONTRIBUTING.md guide for more details.

License

MIT © Riccardo Perra

Comments

🚀 - Add support for multiple tabs

Which @codeimage/* package(s) are relevant/releated to the feature request?

codeimage

Description

As the title says, it would be nice to have multiple tabs, be able to switch between them and maybe be able to generate multiple images.
feature P2

opened by micnic 14
feat: added Cascadia Code font
PR Checklist

Please check if your PR fulfills the following requirements:

[ ] The commit message follows our guidelines: https://github.com/riccardoperra/codeimage/blob/main/CONTRIBUTING.md#commit

[ ] Tests for the changes have been added (for bug fixes / features)

[ ] Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

[ ] Bugfix [x] Feature [x] Code style update (formatting, local variables) [ ] Refactoring (no functional changes, no api changes) [ ] Build related changes [ ] CI related changes [ ] Documentation content changes [ ] Other... Please describe:

What is the current behavior?

Issue Number: N/A

What is the new behavior?

Does this PR introduce a breaking change?

[ ] Yes [x] No

Other information
opened by max-programming 9
🚀 - Add Shade of Purple theme
Which @codeimage/* package(s) are relevant/releated to the feature request?

highlight

Description

This task consist of creating a new theme for CodeImage editor using CodeMirror API.

https://github.com/ahmadawais/shades-of-purple-vscode

Instructions for contributions

Follow the CONTRIBUTING.md instructions to prepare your environment.

NOTE If your intention is to only develop a new theme, you don't need to use docker or install everything. You will work only on @codeimage/highlight package

Move to packages/highlight. You will see a How to create a new theme section in the README.md file .

Run the pnpm generate:theme script and put the shadeOfPurple theme name

Open the theme playground with pnpm dev (from the highlight package) or pnpm dev --filter=@codeimage/highlight (from the root folder)

For further help you can ask for help in the comments below
good first issue feature hacktoberfest
opened by riccardoperra 8
fix: update german translations
PR Checklist

Please check if your PR fulfills the following requirements:

[x ] The commit message follows our guidelines: https://github.com/riccardoperra/codeimage/blob/main/CONTRIBUTING.md#commit

[ ] Tests for the changes have been added (for bug fixes / features)

[ ] Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

[ ] Bugfix [ ] Feature [ ] Code style update (formatting, local variables) [ ] Refactoring (no functional changes, no api changes) [ ] Build related changes [ ] CI related changes [ ] Documentation content changes [x ] Other... Please describe: Update of i18n / german translations

What is the current behavior?

Issue Number: N/A

What is the new behavior?

The new translations are more fluid for german users

Does this PR introduce a breaking change?

[ ] Yes [x ] No

Other information

Because some of the german words are very long, at least on my screen, some of the labels are partly hidden behind the related inputs / selects. What is the best way to avoid that? Should I insert some hyphens?
opened by apollo79 8
🚀 - Export to clipboard

Which @codeimage/* package(s) are relevant/releated to the feature request?

codeimage

Description

It would be great to have the possibility to save the generated image to clipboard on export. When preparing some code screenshots I do multiple tries and have to spam my file system, but with export to clipboard would keep it clean and I'll be able to paste in the presentation faster and easier. I would even recommend to make this the default behavior of CodeImage.
feature P3 next

opened by micnic 7
🚀 - Add a way to disable syntax highlighting

Which @codeimage/* package(s) are relevant/releated to the feature request?

Don't known / other

Description

As of now, there's no way to disable syntax highlighting completely: if you find yourself with a language and/or a type of file that is not supported by the website, you'll still have to choose one.

The only workaround is to remove CSS properties with the browser's webtools.
feature P2

opened by EndBug 7
Feat: panda theme
PR Checklist

Please check if your PR fulfills the following requirements:

[X] The commit message follows our guidelines: https://github.com/riccardoperra/codeimage/blob/main/CONTRIBUTING.md#commit

PR Type

What kind of change does this PR introduce?

[ ] Bugfix [X] Feature [ ] Code style update (formatting, local variables) [ ] Refactoring (no functional changes, no api changes) [ ] Build related changes [ ] CI related changes [ ] Documentation content changes [ ] Other... Please describe:

What is the current behavior?

Issue Number: Closes #366

What is the new behavior?

Does this PR introduce a breaking change?

[ ] Yes [X] No

Other information
hacktoberfest-accepted
opened by TGlide 7
feat(highlight): add poimandres theme
PR Checklist

Please check if your PR fulfills the following requirements:

[x] The commit message follows our guidelines: https://github.com/riccardoperra/codeimage/blob/main/CONTRIBUTING.md#commit

[ ] Tests for the changes have been added (for bug fixes / features)

[ ] Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

[ ] Bugfix [x] Feature [ ] Code style update (formatting, local variables) [ ] Refactoring (no functional changes, no api changes) [ ] Build related changes [ ] CI related changes [ ] Documentation content changes [ ] Other... Please describe:

What is the current behavior?

Issue Number: #301

What is the new behavior?

Does this PR introduce a breaking change?

[ ] Yes [x] No

Other information

Let me know if any changes are needed. There was a few more files I had to edit to add the theme, so people can refer to this if they're adding themes in the future.
opened by Kalmarv 7
perf: performance optimizations
Issue Number: #264

[X] #202

[ ] Improve codemirror performance with the latest version partial update features

[ ] Analyze better DOM structure to improve performance and reaction to changes

[X] Chunk splitting for @codeimage/theme https://github.com/riccardoperra/codeimage/pull/280

[X] https://github.com/riccardoperra/codeimage/issues/170

[X] Theme lazy loading + suspense

[X] Split chunks for main app

[X] InlineComboBox should be loaded in lazy loading

[X] Split chunks for CodeMirror editor in order to defer his loading after main app
opened by riccardoperra 7
🚀 - Vue Support

Which @codeimage/* package(s) are relevant/releated to the feature request?

Editor Language

Description

Would love it if you could get Vue syntax support. You have the icon for it, but the Language Editor defaults to "Typescript", which isn't always the syntax case for Vue.
feature

opened by kupoback 6
fix(app): fix light mode
PR Checklist

Please check if your PR fulfills the following requirements:

[ ] The commit message follows our guidelines: https://github.com/riccardoperra/codeimage/blob/main/CONTRIBUTING.md#commit

[ ] Tests for the changes have been added (for bug fixes / features)

[ ] Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

[ ] Bugfix [ ] Feature [ ] Code style update (formatting, local variables) [ ] Refactoring (no functional changes, no api changes) [ ] Build related changes [ ] CI related changes [ ] Documentation content changes [ ] Other... Please describe:

What is the current behavior?

Issue Number: N/A

What is the new behavior?

Does this PR introduce a breaking change?

[ ] Yes [ ] No

Other information
opened by riccardoperra 6
[POC] feat: refactor state management
PR Checklist

Please check if your PR fulfills the following requirements:

[ ] The commit message follows our guidelines: https://github.com/riccardoperra/codeimage/blob/main/CONTRIBUTING.md#commit

[ ] Tests for the changes have been added (for bug fixes / features)

[ ] Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

[ ] Bugfix [ ] Feature [ ] Code style update (formatting, local variables) [ ] Refactoring (no functional changes, no api changes) [ ] Build related changes [ ] CI related changes [ ] Documentation content changes [ ] Other... Please describe:

What is the current behavior?

Issue Number: N/A

What is the new behavior?

Does this PR introduce a breaking change?

[ ] Yes [ ] No

Other information
opened by riccardoperra 6
chore(release): version packages
This PR was opened by the Changesets release GitHub action. When you're ready to do a release, you can merge this and publish to npm yourself or setup this action to publish automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated.

Releases

@codeimage/[email protected]

Minor Changes

513c6aa6 Thanks @riccardoperra! - Add prettier language formatting support

Patch Changes

Updated dependencies []:

@codeimage/[email protected]

@codeimage/[email protected]

Minor Changes

513c6aa6 Thanks @riccardoperra! - Button press animations and snackbar custom container class support

@codeimage/[email protected]

Patch Changes

Updated dependencies [513c6aa6]:

@codeimage/[email protected]

@codeimage/[email protected]

@codeimage/[email protected]

Minor Changes

513c6aa6 Thanks @riccardoperra! - Add action toolbar and randomize, copy to clipboard and prettier format actions

Patch Changes

Updated dependencies [513c6aa6, 513c6aa6]:

@codeimage/[email protected]

@codeimage/[email protected]

@codeimage/[email protected]
opened by github-actions[bot] 1
🚀 - Let user use custom fonts or Fonts installed in the Machine/PC.

Which @codeimage/* package(s) are relevant/releated to the feature request?

ui, Don't known / other

Description

Now, we only have 6 fonts to choose from. But I want to use custom monospace font which is already installed in my PC. Please add a support for that too.
feature

opened by KunalTanwar 3
398 add changelog inside the web application
PR Checklist

Please check if your PR fulfills the following requirements:

[x] The commit message follows our guidelines: https://github.com/riccardoperra/codeimage/blob/main/CONTRIBUTING.md#commit

[x] Tests for the changes have been added (for bug fixes / features)

[x] Docs have been added / updated (for bug fixes / features)

PR Type

POC What kind of change does this PR introduce?

[ ] Bugfix [x] Feature [ ] Code style update (formatting, local variables) [ ] Refactoring (no functional changes, no api changes) [ ] Build related changes [ ] CI related changes [ ] Documentation content changes [ ] Other... Please describe:

What is the current behavior?

Issue Number: N/A

What is the new behavior?

Does this PR introduce a breaking change?

[ ] Yes [x] No

Other information
opened by hackpirodev 2
🚀 - Add changelog inside the web application
Discussed in https://github.com/riccardoperra/codeimage/discussions/397

^{Originally posted by riccardoperra May 15, 2022}

Description

Users should be notified when a new update of the app has been released. The idea is to handle a changelog component which will shows all info about the newest release.

Here's some recommendation/questions that we've discussed with @hackpirodev:

Dialog once you open the app

Guest users will see a full screen dialog with the latest release info the first time they see the page. (Then we will save a "user read" flag in the local storage in order to save this info locally.

For Authenticated users we may save this info using the Auth0 user metadata

How we retrieve the content

We have some ideas about how rendering the content of the release automatically:

Notion Content Landing Page

Github releases

Save the content in our database/backend? We may have more control but Railway is not free 😄

Here are some things that we have to analyze in order to take the right way:

We need to skip the patch/fixes releases or don't make them more priority than a more important release

We need to handle the markdown / have some metadata in order to display "title",. "thumbnail", "small description", "full description". Can we group these in order to show a grouped content? (e.g. Majors first, then minors inside it and all patches listed above)

How can we know if there is a new release?

How much this change impact in performance for bundle size, fcp/lcp (lighthouse) scores?

How to display this content in the website

We need a new page on the upcoming website (e.g. https://changelog.framer.website/)

How we render the content

In my opinion MDX could be the right choice since there are some examples of using solid with mdx content in order to also have more flexibility (what if we need to render some custom content inside?)

In the case we choose Notion, we have to make sure we can render his blocks without taking a lot of effort since there aren't libraries that does this job right now (there is an example for React https://github.com/splitbee/react-notion) but implementation could be easier without VDOM

cc @hackpirodev
documentation feature P1
opened by hackpirodev 0
feat: monokaiPro-theme
PR Checklist

Please check if your PR fulfills the following requirements:

[x] The commit message follows our guidelines: https://github.com/riccardoperra/codeimage/blob/main/CONTRIBUTING.md#commit

[x] Tests for the changes have been added (for bug fixes / features)

[x] Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

[ ] Bugfix [ ] Feature [ ] Code style update (formatting, local variables) [ ] Refactoring (no functional changes, no api changes) [ ] Build related changes [ ] CI related changes [ ] Documentation content changes [ ] Other... Please describe:

What is the current behavior?

Issue Number: https://github.com/riccardoperra/codeimage/issues/21

What is the new behavior?

Does this PR introduce a breaking change?

[ ] Yes [ ] No

Other information
opened by SIMRAN88 3

Releases(v1.0.10)

v1.0.10(Jan 2, 2023)
The newest release introduce a new editor theme: Aura.

Also, several bugs have been fixed including SVG export which now finally generates the image with the correct size. In fact, export size has been drastically reduced from ~7-10mb to ~500kb/1.5mb.

What's Changed

feat(app/dom-export) reduction of svg export size by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/433 - issue #432 by @afonsojramos

feat: Add aura theme by @zihan-ch in https://github.com/riccardoperra/codeimage/pull/431

fix(api): auth0 handle error registration by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/435

chore(release): version packages by @github-actions in https://github.com/riccardoperra/codeimage/pull/434

New Contributors

@zihan-ch made their first contribution in https://github.com/riccardoperra/codeimage/pull/431

Full Changelog: https://github.com/riccardoperra/codeimage/compare/v1.0.9...v1.0.10
Source code(tar.gz)
Source code(zip)
v1.0.9(Dec 18, 2022)
What's Changed

feat(app/config): vue highlighting support by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/429 - issue by @kupoback in https://github.com/riccardoperra/codeimage/issues/424

chore(release): version packages by @github-actions in https://github.com/riccardoperra/codeimage/pull/430

Full Changelog: https://github.com/riccardoperra/codeimage/compare/v1.0.8...v1.0.9
Source code(tar.gz)
Source code(zip)
v1.0.8(Dec 17, 2022)
What's Changed

fix: umami is not defined for some browsers by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/427

chore(release): version packages by @github-actions in https://github.com/riccardoperra/codeimage/pull/428

Full Changelog: https://github.com/riccardoperra/codeimage/compare/v1.0.7...v1.0.8
Source code(tar.gz)
Source code(zip)
v1.0.7(Dec 17, 2022)
What's Changed

fix(app): set shadow none not working by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/425

chore(release): version packages by @github-actions in https://github.com/riccardoperra/codeimage/pull/426

Full Changelog: https://github.com/riccardoperra/codeimage/compare/v1.0.6...v1.0.7
Source code(tar.gz)
Source code(zip)
v1.0.6(Dec 16, 2022)
What's Changed

fix: fix titles by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/419

feat: added Cascadia Code font by @max-programming in https://github.com/riccardoperra/codeimage/pull/421

chore(release): version packages by @github-actions in https://github.com/riccardoperra/codeimage/pull/422

New Contributors

@max-programming made their first contribution in https://github.com/riccardoperra/codeimage/pull/421

Full Changelog: https://github.com/riccardoperra/codeimage/compare/v1.0.5...v1.0.6
Source code(tar.gz)
Source code(zip)
v1.0.5(Dec 14, 2022)
What's Changed

fix(app): fix light mode by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/417

chore(release): version packages by @github-actions in https://github.com/riccardoperra/codeimage/pull/418

Thanks to @fadhilsaheer for notifying the issue

Full Changelog: https://github.com/riccardoperra/codeimage/compare/v1.0.4...v1.0.5
Source code(tar.gz)
Source code(zip)
v1.0.4(Dec 13, 2022)
Breaking Changes

CodeImage logo has been updated!

The application of codeimage will now live into app.codeimage.dev. codeimage.dev will now redirect to the website.

Codeimage website by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/390

chore(release): version packages by @github-actions in https://github.com/riccardoperra/codeimage/pull/400

feat(app): update codeimage logo by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/401

feat(website): website section improvements by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/402

perf: website static style extract by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/404

fix: remote svg icon not rendering by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/408

Feat/website improvements by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/409

feat(website): fixes to deploy website in production by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/412

feat(website): auth0 by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/413

feat(website): og images by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/414

chore(release): version packages by @github-actions in https://github.com/riccardoperra/codeimage/pull/407

feat(website): login by redirect state by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/415

Also thanks to @hackpirodev for the given feedbacks 😄

Full Changelog: https://github.com/riccardoperra/codeimage/compare/v1.0.2...v1.0.4
Source code(tar.gz)
Source code(zip)
v1.0.2(Nov 12, 2022)
What's Changed

chore(release): version packages by @github-actions in https://github.com/riccardoperra/codeimage/pull/392

feat(config): add ruby syntax highlighting by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/394

feat: update auth0 by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/396

chore(release): version packages by @github-actions in https://github.com/riccardoperra/codeimage/pull/395

Full Changelog: https://github.com/riccardoperra/codeimage/compare/v1.0.0...v1.0.2
Source code(tar.gz)
Source code(zip)
v1.0.0(Nov 12, 2022)
This new version of CodeImage introduces Projects; a dedicated space where you can save all your code snippets.

Development of these new features have been started in the middle of july with @hackpirodev, and finally the biggest part is done 🎊.

This is why CodeImage officially pass to version 1.0.

Projects

Projects basically allows everyone to manage their snippets and save them remotely in order to access them from everywhere.

A new homepage for every user which has the authorization to use it will appear. This mean also you will be able to share publicly your snippets. In fact, each snippet have an unique uuid associated and present in the URL which will allows everyone to watch it in read-only modality.

Here's an example; https://codeimage.dev/413d9f66-cc7e-41b3-bbef-1c2f737ed74a

Projects will be available FOR FREE only for authenticated users.

Authentication system

Due to the necessity of persisting the project information on a backend server, we decided to allows these features only for authenticated users.

The authentication system integrates Auth0 in order to provide a easy and fast social login (Github) with in mind the possibility to choose also others social networks login method in the future.

Save snippets remotely

CodeImage projects introduce a new service into the core application: a backend server. We have opt-in for Fastify which is for us one of the best available choice in the current state of backend development.

Using a custom backend allows us to have 100% of control of what's inside our system. We've tried several solutions like Firebase, Supabase etc. but we preferred moving to the stack Fastify - Prisma in order to provide also a good developer expericence, better type safety and flexibility.

The backend will be currently SELF-HOSTED without gain. At the moment the goal is to provide this service for free.

Pipeline with super-powers

We've also refactored our pipeline system in order to provide better CI/CD deployments, improving timings and centralizing everything.

UI Improvements

This new version introduces also new UI improvements and small changes in order to provide a better user experience.

Hacktoberfest

October is known by developers to be the month of hacktoberfest. I would like to thank all the contributors who help us with the dedicated issues:

@SIMRAN88

Add shade of purple theme https://github.com/riccardoperra/codeimage/issues/365

Add Moonlight theme https://github.com/riccardoperra/codeimage/pull/372

@TGlide

Add Panda theme https://github.com/riccardoperra/codeimage/issues/366

@Vikki123

Add Vitesse dark theme https://github.com/riccardoperra/codeimage/issues/305

What's next?

Most of the expected software thought when CodeImage started are completed, so now the focus will be splitted in two parts:

Core development (75%)

New features (25%)

Here some new things that are already planned and will be released soon 😄

ThemeBuilder: creates new theme for both CodeImage or your editor and share it to the world

Embeds: embed your snippets everywhere in a SEO-friendly way.

codeimage-ui: the ui kit of codeimage will be released as a standalone ui kit library for SolidJS

Changelog

feat(ui): text dynamic variants by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/353

feat: add experimental mobile ui by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/357

feat: pagination component by @hackpirodev in https://github.com/riccardoperra/codeimage/pull/356

Refactor: theme mode UI by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/358

fix: pagination cleanup by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/359

Projects by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/327

Feat: panda theme by @TGlide in https://github.com/riccardoperra/codeimage/pull/367

feat: shades of purple theme by @SIMRAN88 in https://github.com/riccardoperra/codeimage/pull/370

feat: added moonlight theme by @SIMRAN88 in https://github.com/riccardoperra/codeimage/pull/372

feat(ui): themes splitting by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/371

ci: update pipeline by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/373

chore: update README.md by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/374

fix: fix MSW load by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/376

feat: added new vitesseDark theme by @Vikki123 in https://github.com/riccardoperra/codeimage/pull/378

fix: added vitesseDark to themeRegistry by @Vikki123 in https://github.com/riccardoperra/codeimage/pull/379

build: update all dependencies by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/383

feat: add txt extension to disable syntax highlighting by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/386 (feedback by @EndBug)

New Contributors

@TGlide made their first contribution in https://github.com/riccardoperra/codeimage/pull/367

@SIMRAN88 made their first contribution in https://github.com/riccardoperra/codeimage/pull/370

@Vikki123 made their first contribution in https://github.com/riccardoperra/codeimage/pull/378

Full Changelog: https://github.com/riccardoperra/codeimage/compare/v0.21.4...v1.0.0
Source code(tar.gz)
Source code(zip)
v0.21.4(Sep 3, 2022)
What's Changed

fix: disable shadow rendering on exported image in ios by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/351

Full Changelog: https://github.com/riccardoperra/codeimage/compare/v0.21.3...v0.21.4
Source code(tar.gz)
Source code(zip)
v0.21.3(Aug 21, 2022)
What's Changed

fix: update german translations by @apollo79 in https://github.com/riccardoperra/codeimage/pull/312

break long words in property editor by @apollo79 in https://github.com/riccardoperra/codeimage/pull/313

fix(app): add loading indicator when exporting as image by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/331

feat(config): add xml and json language support by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/333

chore(release): version packages by @github-actions in https://github.com/riccardoperra/codeimage/pull/332

New Contributors

@apollo79 made their first contribution in https://github.com/riccardoperra/codeimage/pull/312

@hadiyarajesh suggest a new feature in https://github.com/riccardoperra/codeimage/pull/330 (https://github.com/riccardoperra/codeimage/pull/331)

Full Changelog: https://github.com/riccardoperra/codeimage/compare/v0.21.2...v0.21.3
Source code(tar.gz)
Source code(zip)
v0.21.2(Jul 14, 2022)
Poimandres theme is finally available to CodeImage thanks to @Kalmarv https://github.com/riccardoperra/codeimage/issues/301

What's Changed

feat(highlight): add poimandres theme by @Kalmarv in https://github.com/riccardoperra/codeimage/pull/302

Other

Adding new themes is even easier with the new generate:theme command https://github.com/riccardoperra/codeimage/commit/a2ab82d9a01da72a3b8e73d0e9c10626d2333e5f

New Contributors

@Kalmarv made their first contribution in https://github.com/riccardoperra/codeimage/pull/302

Full Changelog: https://github.com/riccardoperra/codeimage/compare/v0.21.1...v0.21.2
Source code(tar.gz)
Source code(zip)
v0.21.1(Jul 13, 2022)
What's Changed

build: update solid-codemirror to v2.0.0 by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/298

build: update all dependencies by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/298

fix: fix umami script in production build by @riccardoperra in https://github.com/riccardoperra/codeimage/commit/f1d44c251b1ae3778fe3acbc4cdf984d373cfb00

Full Changelog: https://github.com/riccardoperra/codeimage/compare/v0.20.0...v0.21.1
Source code(tar.gz)
Source code(zip)
v0.21.0(Jun 26, 2022)
This new version of CodeImage expands the number of the editor options and the list of available themes. There are also some improvements to the UI core in order to integrate Motion One for animations and solid-aria for overlays, dialogs and popovers.

What's new

Shadows

Until now, CodeImage snippets have always used a default, non-editable, shadow. From today, thanks to @hackpirodev contribution #287, you will be able to choose from a predefined set of shadows.

Currently, the list of available shadows is that:

Small

Medium

Large

Bottom

3D effect

Note Do you want to contribute and do you think we forgot to add a drop shadow, or do you want to improve an existing one? You can create an issue in order to discuss it

Github themes

Two new themes has been added into the theme switcher. Let's introduce Github Dark and Github Light!

New Locale

Spanish language has been added to CodeImage!

Other changes

There are some graphical improvements with this new version of CodeImage:

Editor sidebar will now use scrollbar-gutter which will fix layout shifting when available properties changes https://github.com/riccardoperra/codeimage/commit/97af7de149f3b794486ce947f6e562fb1ada982d

Dialogs and overlays accessibility has been improved thanks to @solid-aria/dialog

What's Changed

refactor(ui): add @solid-aria/dialog integration by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/288

feat(app): #239 add shadow options by @hackpirodev in https://github.com/riccardoperra/codeimage/issues/287

fix(app): fix mobile shadow select by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/292

feat(app): add spañol by @hackpirodev in https://github.com/riccardoperra/codeimage/pull/293

Full Changelog: https://github.com/riccardoperra/codeimage/compare/v0.20.0...v0.21.0
Source code(tar.gz)
Source code(zip)
v0.20.0(Jun 14, 2022)
This is the first CodeImage version which mainly focus on improving bundle size and page loading. v0.20.0 is the first step following the hackathon end that manage to fix a part of the choices that had been made during the first months of development

Most of the packages has been reorganized, dividing the build content into several chunks to be loaded lazily.

Thanks to Suspense, each portion of the page that need to be rendered in an asynchronous way, will show a custom skeleton loading fallback until it's ready for use.

Note Enabling the cache, loading will be significantly faster and loading will be halved. Service worker is currently disabled Screenshot used for the the gif above have been made using "Slow 3G" and disabled cache, so each assets including fonts were loaded the first time

What's Changed

perf: refactor @codeimage/theme with chunk splitting by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/280

perf: add theme switcher lazy loading w/ suspense by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/283

perf: split CodeMirror plugins in chunks by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/284

perf: performance optimizations by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/281

Performance results

Desktop (before)

Desktop (After)

Mobile (before)

Mobile (After)

Full Changelog: https://github.com/riccardoperra/codeimage/compare/v0.19.2...v0.20.0
Source code(tar.gz)
Source code(zip)
v0.19.2(Jun 11, 2022)
Bug fixes

fix(app): fix frame resize computed size on devices with different pixelRatio by @alexandercerutti in https://github.com/riccardoperra/codeimage/pull/277

New Contributors

@alexandercerutti made their first contribution in https://github.com/riccardoperra/codeimage/pull/277

Full Changelog: https://github.com/riccardoperra/codeimage/compare/v0.19.1...v0.19.2
Source code(tar.gz)
Source code(zip)
v0.19.1(Jun 9, 2022)
What's new

feat(config): add Kotlin cm5 language support by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/274

Bug fixes

fix(ui): fix RemoteSvgIcon rendering issue by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/274

Full Changelog: https://github.com/riccardoperra/codeimage/compare/v0.19.0...v0.19.1
Source code(tar.gz)
Source code(zip)

v0.19.0(Jun 6, 2022)

Let's introduce multiple tabs support!

9f248fed-29ca-4355-81fe-b2895f24b7cb

What's new

Multiple tabs

Thanks to @micnic feedback #257, CodeImage will support multiple tabs on the code editor 😃.

Tabs allow you to more easily group your snippets, and send them together when you want to share them on social networks.

They are responsive and adapt to the space, they are available for both accent and non-accent themes, but are currently limited to a max of six.

Also, you can drag and drop your tabs through the bar so you can reorder them as you like.

Note If you have never done this, you can use the shortcut Ctrl + C and Ctrl + V to copy and paste them anywhere! Currently this feature is limited to one item at a time.

f5fbcd8f-c1c1-4c3f-867c-72121ffad3c9

d5da5045-1f8d-4f6e-9e8f-fa7509f527ce

Theme improvements

No new themes have been added, but some of them have been improved for both the highlighing and container colors, contrast accent etc.

Also, the image export now is mostly consistent between all browsers therefore some problems related to Safari have been solved.

What's changed

feat(app): add support for multiple tabs by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/265

Bug fixes

Fix i18n translations for BottomBar on mobile by @hackpirodev in https://github.com/riccardoperra/codeimage/pull/266
Fix image export across all browsers by @riccardoperra in #270

Others

Update package dependencies by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/256
Add @codeimage/dom-export (fork of html-to-image) in library packages by @riccardoperra in #270
Query param state have been temporarily disabled

New Contributors

@micnic gave several tips and feedback for the development of https://github.com/riccardoperra/codeimage/issues/257
@hackpirodev made their first contribution in https://github.com/riccardoperra/codeimage/pull/266

Full Changelog: https://github.com/riccardoperra/codeimage/compare/v0.17.2...v0.19.0

Source code(tar.gz)
Source code(zip)

v0.18.0(May 24, 2022)
CodeImage officially supports theme with gradients!

What's new

With the latest release, CodeImage allows you to set gradients from a rich and accurate choice of pre-defined colors.

Most of the themes highlighting have been improved, also following the update of CodeMirror6 to ^0.20 version, to improve the quality of the generated snippets.

Color Picker

Say goodbye to the native color picker, you can now use the newest one which allows you to choose from a rich color palette between gradients and plain colors, so you can select the one you like more.

If you think there is a missing color on the palette, you can always propose a new one creating a new GitHub issue.

Alternative background

This release also enables the Background property in the frame section. You can now set an alternative background which works even better with the use of gradients!

Note Currently, this modality doesn’t support the Window with tab accent style. During the time it will be be improved and support the tab style soon

Make your code snippets unique!

What's changed

feat: add theme gradients by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/258

feat(app): add alternative theme by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/262

chore(release): version packages by @github-actions in https://github.com/riccardoperra/codeimage/pull/259

Bug fixes

Fix query params update when properties change by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/263

Fix empty editor when theme configuration is not valid by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/261

Other

Update SolidJS to v1.4.2

@solid-aria is now part of CodeImage! Updates of current components will follow

Removed deprecated libraries and factory functions for themes which were using PrismJS highlighting-like classes

Full Changelog: https://github.com/riccardoperra/codeimage/compare/v0.17.2...v0.18.0
Source code(tar.gz)
Source code(zip)
v0.17.2(May 19, 2022)
What's Changed

fix: fix umami script not loading in production environment by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/254

Full Changelog: https://github.com/riccardoperra/codeimage/compare/v0.17.1...v0.17.2
Source code(tar.gz)
Source code(zip)
v0.17.1(May 18, 2022)
What's Changed

fix: fix params encoding by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/251

Full Changelog: https://github.com/riccardoperra/codeimage/compare/v0.17.0...v0.17.1
Source code(tar.gz)
Source code(zip)
v0.17.0(May 18, 2022)
What's Changed

feat(app): add umami analytics by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/237

Full Changelog: https://github.com/riccardoperra/codeimage/compare/v0.16.1...v0.17.0
Source code(tar.gz)
Source code(zip)
v0.16.1(May 7, 2022)
Bug fixes

Fix not working open button on mobile devices - @riccardoperra in https://github.com/riccardoperra/codeimage/pull/231

Full Changelog: https://github.com/riccardoperra/codeimage/compare/v0.16.0...v0.16.1
Source code(tar.gz)
Source code(zip)
v0.16.0(May 5, 2022)
This is the first release after SolidJS hackathon. It focus on improving core packages and some features for future implementations.

What's new

Improved the search theme filter - @JRafael91 in https://github.com/riccardoperra/codeimage/pull/143

Space mono font is now available as new editor font - @riccardoperra in https://github.com/riccardoperra/codeimage/pull/210

Add glass reflection like effect to the editor - @riccardoperra in https://github.com/riccardoperra/codeimage/pull/215

You can now exports your snippets directly in a new tab - @riccardoperra in https://github.com/riccardoperra/codeimage/pull/221

You can copy to your clipboard the snippet with Ctrl+C - @riccardoperra in https://github.com/riccardoperra/codeimage/pull/221

Improved editor input style - @riccardoperra in https://github.com/riccardoperra/codeimage/pull/223

Themes highlighing has been improved - @riccardoperra in https://github.com/riccardoperra/codeimage/pull/214

Bug fixes

Enabled indent with tab - @riccardoperra in https://github.com/riccardoperra/codeimage/pull/218

ShareButton is now displayed on Safari and Firefox - @riccardoperra in https://github.com/riccardoperra/codeimage/pull/222

Other

PrismJS factory theme has been deprecated. New themes will use the latest CodeMirror Highlight API - @riccardoperra in https://github.com/riccardoperra/codeimage/pull/214

App will be updated automatically after a new release. The update prompt will not be shown anymore - @riccardoperra in https://github.com/riccardoperra/codeimage/pull/224

README.md has been updated - @riccardoperra in https://github.com/riccardoperra/codeimage/pull/206

CodeMirror packages has been updated to v0.20 - @riccardoperra in https://github.com/riccardoperra/codeimage/pull/226

New Contributors

@JRafael91 made their first contribution in https://github.com/riccardoperra/codeimage/pull/143

Full Changelog: https://github.com/riccardoperra/codeimage/compare/v0.15.2...v0.16.0
Source code(tar.gz)
Source code(zip)
v0.15.2(Apr 10, 2022)
What's Changed

fix(app): fix broken padding on image export by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/204

Full Changelog: https://github.com/riccardoperra/codeimage/compare/v0.15.1...v0.15.2
Source code(tar.gz)
Source code(zip)
v0.15.1(Apr 10, 2022)
What's Changed

feat(theme): add Material Light theme by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/198

fix(app): add click event to ThemeSwitcher radio item by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/200

Full Changelog: https://github.com/riccardoperra/codeimage/compare/v0.15.0...v0.15.1
Source code(tar.gz)
Source code(zip)
v0.15.0(Apr 9, 2022)
What's Changed

docs: update README.md by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/169

refactor(app): move UI components to @codeimage/ui by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/171

refactor(ui): move Drdopwon to @codeimage/ui by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/188

refactor(ui): move SvgIcon to @codeimage/ui by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/189

refactor(ui): move PortalHost to @codeimage/ui by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/190

refactor(ui): move Snackbar to @codeimage/ui by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/191

refactor(ui): move Toggle to @codeimage/ui by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/192

refactor(ui): move TextField to @codeimage/ui by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/191

refactor(ui): move SvgIcon to @codeimage/ui by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/191

refactor(ui): move Snackbar to @codeimage/ui by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/191

refactor(ui): move RangeField to @codeimage/ui by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/191

refactor(ui): move Label to @codeimage/ui by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/171

refactor(ui): move Button, Text and Link to @codeimage/ui by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/171

refactor(ui): move RadioBlock to @codeimage/ui by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/171

refactor(ui): move SegmentedField to @codeimage/ui by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/171

refactor(ui): move Select to @codeimage/ui by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/171

refactor(ui): move PortalHost @codeimage/ui by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/171

refactor(ui): move Dialog and Transtiion to @codeimage/ui by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/171

refactor(ui): move Box to @codeimage/ui by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/171

refactor(ui): add component factory by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/193

ci: refactor build scripts by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/194

Full Changelog: https://github.com/riccardoperra/codeimage/compare/v0.14.7...v0.15.0
Source code(tar.gz)
Source code(zip)
v0.14.7(Apr 4, 2022)
What's Changed

fix(app): hidden tab accent and placeholder on export when empty #162 by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/163

fix(app): fix mac os terminal style margin by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/166

chore: update vite dependency by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/165

fix(theme): broken editor autocomplete style #167 by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/168

Full Changelog: https://github.com/riccardoperra/codeimage/compare/v0.14.6...v0.14.7
Source code(tar.gz)
Source code(zip)
v0.14.6(Apr 3, 2022)
What's Changed

fix: export button loading state stuck on iOS #159 by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/160

Full Changelog: https://github.com/riccardoperra/codeimage/compare/v0.14.5...v0.14.6
Source code(tar.gz)
Source code(zip)
v0.14.5(Apr 3, 2022)
What's Changed

feat: add code editor by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/3

feat: frame/toolbar styling by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/5

feat: add theme switcher core by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/7

feat: add terminal style type by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/9

feat: add dynamic light/dark theme by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/11

feat: add localization support by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/13

feat: add language selector by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/15

feat: add base themes by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/18

feat: add export action by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/26

feat: add editor multi-language support by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/29

refactor: move configuration into @codeimage/config by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/31

feat: add font change support by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/34

chore: add material vulcano theme by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/35

feat: add mobile interface by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/39

feat: pwa support by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/40

feat: add arc dark theme by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/44

feat: export action improvements by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/67

chore: oss infra improvements by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/65

docs: update .changelogrc by @github-actions in https://github.com/riccardoperra/codeimage/pull/73

Version Packages by @github-actions in https://github.com/riccardoperra/codeimage/pull/75

docs: update .changelogrc by @github-actions in https://github.com/riccardoperra/codeimage/pull/76

Version Packages by @github-actions in https://github.com/riccardoperra/codeimage/pull/77

docs: update .changelogrc by @github-actions in https://github.com/riccardoperra/codeimage/pull/80

fix: broken image export using safari by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/81

docs: update .changelogrc by @github-actions in https://github.com/riccardoperra/codeimage/pull/83

58 theme api improvements by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/89

feat: language extension icons by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/93

85 show brand logo on exported image by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/97

docs: update .changelogrc by @github-actions in https://github.com/riccardoperra/codeimage/pull/92

feat: 23 material palenight theme by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/99

docs: update .changelogrc by @github-actions in https://github.com/riccardoperra/codeimage/pull/98

fix: 101 fix footer links by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/104

108 missing ng component icon by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/112

feat: auto language when extension change by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/114

feat: shortcut hint toolbar by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/115

feat: 88 theme search input by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/117

feat: refactor store with elf by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/119

feat: 113 improve style for selected theme in sidebar by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/122

feat: 109 improve tab svg loader icon by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/123

fix: fix accessibility issues by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/124

refactor(locale): 87 replace in with solid primitives package by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/126

feat: 71 add german language by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/127

fix: 116 editor cursor not visible for some themes by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/129

fix: 95 broken range input on firefox by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/130

refactor: add elf setter props factory by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/133

fix: 105 fix editor frame size and resizing by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/135

feat: perf improvements #2 - improve accessibility by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/137

feat: perf improvements #1 - startup fallback by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/136

fix: fix codemirror dependency version by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/139

feat: 132 add hint for file name icons by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/140

chore: fix build library script by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/141

69 changelog and release automation by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/142

chore(release): version packages by @github-actions in https://github.com/riccardoperra/codeimage/pull/144

fix: export dialog translations not updating #138 by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/145

chore(release): version packages by @github-actions in https://github.com/riccardoperra/codeimage/pull/146

chore: add sitemap.xml by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/148

refactor(app): ui kit design token improvements by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/147

Update README.md by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/151

chore(release): version packages by @github-actions in https://github.com/riccardoperra/codeimage/pull/150

fix: 152 fix history plugin by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/153

chore(release): version packages by @github-actions in https://github.com/riccardoperra/codeimage/pull/154

chore: update app assets by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/155

chore(release): version packages by @github-actions in https://github.com/riccardoperra/codeimage/pull/156

fix: tab icon loading is not visible on light mode editor #103 by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/157

chore(release): version packages by @github-actions in https://github.com/riccardoperra/codeimage/pull/158

Full Changelog: https://github.com/riccardoperra/codeimage/commits/v0.14.15
Source code(tar.gz)
Source code(zip)