codeimage

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

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

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

Let's introduce multiple tabs support!

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.

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

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

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

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

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

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

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

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

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

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

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

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

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