codeimage

Infrastructure update

This release doesn't add any ui feature to CodeImage app. Instead, project dependencies has been updated in most of packages to vite 5, latest version of typescript, solid and newest version of Kobalte and @codeui/kit

What's Changed

• Update @codeui/kit and kobalte by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/647
• chore(release): version packages by @github-actions in https://github.com/riccardoperra/codeimage/pull/649

Full Changelog: https://github.com/riccardoperra/codeimage/compare/v1.7.2...v1.8.0

What's Changed

• feat: add support for protobuf by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/645

Full Changelog: https://github.com/riccardoperra/codeimage/compare/v1.7.1...v1.7.2

What's Changed

• fix: update fleet theme by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/642

Full Changelog: https://github.com/riccardoperra/codeimage/compare/v1.7.0...v1.7.1

What's Changed

• feat: shareable presets by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/637
• chore(release): version packages by @github-actions in https://github.com/riccardoperra/codeimage/pull/638

Full Changelog: https://github.com/riccardoperra/codeimage/compare/v1.6.2...v1.7.0

What's Changed

• fix: disable box-shadow rendering on ios/safari by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/634
• chore(release): version packages by @github-actions in https://github.com/riccardoperra/codeimage/pull/635

Full Changelog: https://github.com/riccardoperra/codeimage/compare/v1.6.1...v1.6.2

What's Changed

• feat: add support for go lang by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/631
• chore(release): version packages by @github-actions in https://github.com/riccardoperra/codeimage/pull/632

Full Changelog: https://github.com/riccardoperra/codeimage/compare/v1.6.0...v1.6.1

CodeImage new update is here!

This update was released very late due to lack of time, and introduces several things to the editor options.

Here's a table of content of the 1.6.0 update:

• New Window border options
• Starting line number
• New editor padding

Editor has been updated allowing to update the window border options. With this update,
a new macOS-like border is now available for everyone.

You'll be able to update the border type through the new border option.

https://github.com/riccardoperra/codeimage/assets/37072694/fa3d8d05-9f9f-4dc5-9a48-62457df11b54

Thanks to @alexandercerutti, the editor
will now let you decide the starting line number of your code.

https://github.com/riccardoperra/codeimage/assets/37072694/4cdc07f6-26c6-4974-981f-723e86726a88

Thanks to @SarjuHansaliya, the editor will now include a new 0 padding option

What's Changed

• feat: update umami by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/620
• feat(app): allow zero padding by @SarjuHansaliya in https://github.com/riccardoperra/codeimage/pull/625
• feat(app,api): add line number start option by @riccardoperra and @alexandercerutti in https://github.com/riccardoperra/codeimage/pull/624
• feat(app,api) add new border type glass option by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/611

New Contributors

• @SarjuHansaliya made their first contribution in https://github.com/riccardoperra/codeimage/pull/625

Full Changelog: https://github.com/riccardoperra/codeimage/compare/v1.5.0...v1.6.0

What's Changed

• feat(config): yaml language support #618 by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/621
• feat: update umami by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/620
• chore(release): version packages by @github-actions in https://github.com/riccardoperra/codeimage/pull/622

Full Changelog: https://github.com/riccardoperra/codeimage/compare/v1.5.0...v1.5.1

A new CodeImage update is here!

It has been several months since the last major update. During last months we've been working on app fixes, new languages support, themes...and today we'll release a bunch of new features as one of the last update of 2023 year.

Here's a table of content of the 1.5.0 update:

• Local system fonts
• Window style themes
• New Xcode like themes
• In-app changelog
• App fixes

Editor has been updated introducing a new experimental font support with Local Font Access API.
Prior browser authorisation, this allows you to access yours locally installed fonts to display the code as you prefer.

https://github.com/riccardoperra/codeimage/assets/37072694/bc24e0c9-8792-4749-be7a-76d40d0a9a21

CodeImage always had two types of terminal-like themes: Windows and MacOS. We are planning to add during next months new special themes that can beautify your screenshots more and more.

Today, the window select has been updated introducing two new terminal themes:

• MacOS Outline
• MacOS Gray

We've also moved the old "accent mode" toggle in the sidebar to the window selection as a checkbox.

https://github.com/riccardoperra/codeimage/assets/37072694/23825c5b-adea-48f4-ba0b-0a6d36d09dea

The themes collection has been updated introducing two new themes inspired from Xcode:

• Xcode Dark
• Xcode light

https://github.com/riccardoperra/codeimage/assets/37072694/7d09728c-677e-41c0-9ae4-142956b4bc46

Since today, while opening CodeImage you may see sometimes a new dialog that will notify you of a new update.

You'll be able to recognise new features through a new badge indicating that it is a new feature.Once you use the feature a couple of times, the badge will automatically disappear.

As with all updates, we set aside some time to fix issues on both the application side and the internal side.

We fixed a tab name font rendering issue thanks to @KunalTanwar feedbacks, but we also made several optimization and improvements to the repository structure, particularly on unit and integration test of our backend.

We've also update the tab extension combobox replacing the Lion UI component with Kobalte

What's Changed

• fix: optimize repository dependencies/packages by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/585
• feat: implement local system font picker for theme builder by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/576
• fix: fix api test by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/587
• feat: add xcode light/dark theme by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/589
• feat(highlight): support for c programming language by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/595
• fix: tab title font is different when exporting by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/596
• feat: add new editor frame themes by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/591
• feat: in app changelog / version feature recogniser by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/599
• fix: add default font weight for local system fonts if not found by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/604
• feat: refactor combobox with kobalte by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/605

Full Changelog: https://github.com/riccardoperra/codeimage/compare/v1.4.4...v1.5.0

What's Changed

• feat: add code ui segmented control support by @riccardoperra in #572

Full Changelog: https://github.com/riccardoperra/codeimage/compare/v1.4.3...v1.4.4

This new version introduce the JetBrains Fleet Dark Theme in the CodeImage editor!

What's Changed

• Update prod-deploy.yml by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/565
• feat(app/highlight): add fleet theme by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/570
• chore(release): version packages by @github-actions in https://github.com/riccardoperra/codeimage/pull/571

Full Changelog: https://github.com/riccardoperra/codeimage/compare/v1.4.2...v1.4.3

What's Changed

• ci: fix preview deployments by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/557
• Add sidebar animation by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/556
• Export by rounded corners by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/553
• Allows to add multiple formatter by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/554

Full Changelog: https://github.com/riccardoperra/codeimage/compare/v1.4.1...v1.4.2

What's Changed

• feat: optional format on paste event by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/549
• feat: add dart and scala support by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/550

Full Changelog: https://github.com/riccardoperra/codeimage/compare/v1.4.0...v1.4.1

After 3 months, we are thrilled to announce the latest CodeImage update. First of all me and @hackpirodev would like to thank all the users who have given feedback, recommended features and helped during the development.

This new update introduce several fixes and improvements like core changes to the UI, tech stack updates, export flow improvements and new features that have been requested over the last few months.

☁️ Presets - #472

We are introducing Presets, a powerful new feature that allows to save and manage presets configuration of the frame style. With this update, you can reuse your preferred styles on your snippets, ensuring a consistent and visually appealing presentation of the code.

Presets will available for both guest and logged-in users with some limits:

• Guest users are now able to create a maximum of 3 presets, stored locally.
• Logged in users are able to create a maximum of 10 presets.

Limit may change during the time after an analysis of the usage and the feedback we’ll receive.

Note Guest users presets are saved only locally through the browser. This means that by changing browsers, browsing incognito or clearing the cache you will lose all saved presets. If you have presets saved locally, once logged in you can persist them remotely automatically.

🖼️ Custom background - #503

Requested in #503, now you can also add a custom background on your snippet by using an image URL or by importing a file from your system.

At the moment we are not planning to save images on our backend, so the background image can't be persisted if you upload an image through your file system.

You can still add an image URL that we can save as string to reuse and save it. Obviously the image url must point to a valid URL and reachable from the browser. (e.g. https://assets.shots.so/preview/holo-gradients/01.jpg)

🖌️ New UI

CodeImage's UI have been revamped.

We are now officially using Kobalte through a self-made UI kit (repository).

This was definitely the longest update, involving the refactor of colors and components like buttons, dropdowns, inputs, modals and also the animations.

💾 Export settings - #509

You can now customize the export settings to match your preferences while using the Copy to clipboard and the Open in new tab feature. Also, you will be able to see the output resolution of the image with the associated pixel ratio, which will include also a 6x option to export the image in a bigger quality.

📐 Aspect ratio - #503 (Experimental)

This new release introduce an experimental support for Aspect ratio option.

You now have the flexibility to modify the aspect ratio to perfectly fit your desired dimensions, ensuring your images are not cropped when shared on social media platforms.

📦 API source code refactor to latest ESM and TypeScript >5.0 - #530

The backend api has been refactored to work with latest version of Node, TypeScript 5.1 and ES Modules 😄

We've adjusted our development workflow using tsup as bundler without losing the convenience of fastify-autoload

This update also removed node-tap in favor of vitest due to better DX and integration with ESM. We were able to refactor all of the tests without too much trouble.

📏 No more fixed width - #503

From this version, CodeImage snippet will have a dynamic min-width based on the content which can no longer be wrapped in multiple lines. This allows you to change the size as you like, even if the code is small and you don't need to have a minimum size of 600px.

🎴 Exported image improvements

We've updates some core behavior of DomExport package, which is a fork of html-to-image to add several fixes and improvements to the image export flow:

• Snippets that overflows to the screen viewport are not cropped anymore
• Partially fixes an issue where Safari from iOS and MacOS are not always able to generate the image including the custom background or the font (https://bugs.webkit.org/show_bug.cgi?id=219770)
• Faster image generation by removing unused styles, fonts and duplicate cloned nodes

⚛️ State management

CodeImage never used a specific state manager to handle the application state. Solid allows you to manage everything very simply but the application is getting heavier, and it doesn't seem like it's easy to organize the code when it gets long and verbose.

For this reason we've done a refactor using my personal state manager statebuilder which allows you to manage the state in a modular way through plugins on an as-needed basis.

What's Changed

• chore(docs): update contributing docker command by @kriskw1999 in https://github.com/riccardoperra/codeimage/pull/504
• fix: safari rename dialog not opening by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/524
• chore: update README.md by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/523
• feat: dynamic min width by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/528
• feat: integrate ESM + node18 + typescript5.0 + vitest in fastify api by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/530
• feat: customizable export options by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/510
• fix(app): canvas export image content is not rendered if it's higher than viewport by @riccardoperra in #532
• feat: customizable export options by @riccardoperra in #510
• feat: dynamic min width by @riccardoperra in #528
• feat: custom background image by @riccardoperra in #526
• fix: fix language field editor by @riccardoperra in #521
• feat: refactor UI with codeui by @riccardoperra and @hackpirodev in #506
• feat: refactor textfield with @codeui/kit by @riccardoperra in #517
• feat: refactor Pagination with @codeui/kit by @riccardoperra in #516
• fix: add radio item by @codeui/kit by @riccardoperra in #508
• feat: @codeui/[email protected] and kobalte 0.9.0 upgrade by @riccardoperra in #514
• feat: integrate submodule kit by @riccardoperra in #513

New Contributors

• @kriskw1999 made their first contribution in https://github.com/riccardoperra/codeimage/pull/504

Full Changelog: https://github.com/riccardoperra/codeimage/compare/v1.3.1...v1.4.0

What's Changed

• feat(app,config): sort editor language by featured property and alphabetically by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/488

Full Changelog: https://github.com/riccardoperra/codeimage/compare/v1.3.0...v1.3.1

This new version of CodeImage add a new editor options: font ligatures.

Ligatures are glyphs that combines some sequences of characters into a new form that makes for a more harmonious. They were already present in some CodeImage fonts, but not everyone likes it and in some cases make snippets more difficult to read.

For this reason it has now become an option that can be configured and deactivated directly from the editor.

What's Changed

• feat(app): option to disable ligatures in fonts #483 by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/486 - issue #483 by @Brian-Pob

Full Changelog: https://github.com/riccardoperra/codeimage/compare/v1.2.0...v1.3.0

What's Changed

• fix(ui): fix pagination total pages calc by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/478
• feat(app): change syntax highlight with locked bg by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/477 - issue #473 by @goncy - @hackpirodev
• chore(release): version packages by @github-actions in https://github.com/riccardoperra/codeimage/pull/479

Full Changelog: https://github.com/riccardoperra/codeimage/compare/v1.1.8...v1.2.0

What's Changed

• fix(app): fix editor state options persistence after refresh by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/474 - issue by @goncy in #473
• chore(release): version packages by @github-actions in https://github.com/riccardoperra/codeimage/pull/475

Full Changelog: https://github.com/riccardoperra/codeimage/compare/v1.1.7...v1.1.8

What's Changed

• feat(config): added csharp by @hackpirodev in https://github.com/riccardoperra/codeimage/pull/464

Full Changelog: https://github.com/riccardoperra/codeimage/compare/v1.1.6...v1.1.7

What's Changed

• feat(app): auto day night mode by @riccardoperra in https://github.com/riccardoperra/codeimage/pull/461 - issue #460 by @JustDesoroxxx
• chore(release): version packages by @github-actions in https://github.com/riccardoperra/codeimage/pull/462

Full Changelog: https://github.com/riccardoperra/codeimage/compare/v1.1.5...v1.1.6