riccardoperra / codeimage Goto Github PK

View Code? Open in Web Editor NEW

1.2K 5.0 63.0 13.85 MB

A tool to beautify your code screenshots. Built with SolidJS and Fastify.

Home Page: https://codeimage.dev

License: MIT License

JavaScript 1.13% HTML 0.65% TypeScript 96.27% SCSS 1.01% Shell 0.01% MDX 0.94%

solid-js solid code editor screenshot snippets tweet sharing codesnippets beautiful

codeimage's Introduction

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.

🤖 Tech stack

CodeImage architecture consist of a PNPM monorepo, currently subdivided in packages and apps.

Apps

@codeimage/app

The front-end application, entirely built with SolidJS.

It currently also relies on these libraries:

vanilla-extract: Zero-runtime Stylesheets-in-TypeScript.
CodeMirror6: Extensible code editor
StateBuilder: Composable state management
@codeui/kit: Accessible UI Kit based on Kobalte
solid-primitives: SolidJS primitives library

@codeimage/api

The REST API layer built with Fastify, Prisma ORM and Auth0.

Packages

@codeimage/ui: contains the source code of the UI kit of CodeImage front-end application.

Note the UI kit is being moved to @codeui/kit repository
@codeimage/config: contains the base configurations and interfaces for CodeImage
@codeimage/highlight: contains the custom editor and highlighting themes for CodeMirror
@codeimage/dom-export: contains the html-to-image fork which includes several fix for image export
@codeimage/locale: contains a wrapper of @solid-primitives/i18n which includes strict typing for i18n
@codeimage/vanilla-extract: contain the Vanilla Extract plugin fork which includes SolidJS and PNPM fixes to work under monorepo.
@codeimage/prisma-models: contains the Prisma ORM backend models shared across front-end and back-end application.
@codeimage/atomic-state: contain the source code of a small state manager which includes some utilities helper for RxJS and solid-js/store

🌏 Contributions

Warning 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.

See the CONTRIBUTING.md guide for more details.

CodeImage is the winner of SolidHack 2022 for the Best Application category!

License

MIT © Riccardo Perra

codeimage's People

Contributors

Stargazers

Watchers

codeimage's Issues

Export action improvements

In desktop/mobile view, export button is only exporting the image, but no information about the extension or sizing are displayed. A dialog where these options will be settled could be useful

🐞- Link sharing

Already done in main/dev branch. Must investigate on WebShare API errors on iOS due to async task and font loading

🤖 - Investigate for presets

Presets are premade templates that user can create without any restriction. Presets will be built-in in the application providing settings adapted for Social media

🚀 - Code beautify

Code beautifier could not be available for all language. Must investigate to discover which tool can be used.

For html/js/css/ts there is prettier plugin

🚀 - Mobile lite view

Due to accessibility and issues related to frame scaling (#42) when opening the mobile version of the app there could be used a button that change the canvas view to a lite modality.

In the lite modality (<=749 width) only the Editor will be viewed, then the preview could be accessed clicking another action (or with the export button)

🚀 - Ui kit design tokens improvements

Adjust vanilla-extract duplicate styling in components
Provide better abstraction for base components to avoid style code duplication
Improve sprinkles and base component API
Provide better accessibility (see lighthouse)

Broken image export using Safari

🐞- Frame scale property should not be saved on local storage

🤖 - Investigate on SSR image generation

To investigate

OSS

create pr template
improve ci workflow
add contributing.md and code line-guides
Update README.md

🚀 - Moonlight Theme

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

https://github.com/atomiks/moonlight-vscode-theme

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 moonlight 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

🚀 - Auto-language detection

Example: https://github.com/aldy505/flourite-web

Another option is higlightjs with "auto" mode to discover the language

Editor select dropdown overflow broken in mobile view

🚀 - Monokai Pro Theme

Color scheme https://monokai.pro/

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

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 monokaiPro 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

Commands:
F: focus text editor
Esc: unfocus text editor
B: toggle background
D: toggle dark mode
L: select programming language
Ctrl+S: export (check if should open dialog or export directly)
Ctrl+Shift+Ccopy link with share api
? open shortcut

🚀 - Mobile native inputs

Components like select, range, color must be native in mobile phones due to ux accessibility. In desktop modality there will be a custom component

Tab name is not using selected font

🐞 - Broken code mirror cursor and line numbers on scaled content

~~Added to fix mobile editor cursor and gutter when scaling the content, should be removed since it is an experimental property~~.

Edit:
After an investigation, it seems that there is a browser issue with "getBoundingClientRects"that returns inconsistent values when the parent node has the transform scale property.

This could be fixed wrapping the scaled content into an iframe. This could be a possible implementation that doesn't cover these issues:

Stylesheet are not fully loaded. When switching a theme that uses @emotion/css the stylesheet must be loaded into the iframe.
Iframe position must be changered.
Frame handler size could be fixed

Possible implementation: create a new app package that handle only his style and the editor content

// IFrame.tsx

type IFrameProps = JSX.IntrinsicElements['iframe'] & {};

export function IFrame(props: IFrameProps): JSX.Element {
  const [ref, setRef] = createSignal<HTMLIFrameElement>();
  const [mountNode, setMountNode] = createSignal<HTMLElement>();
  const [height, setHeight] = createSignal(0);
  const [width, setWidth] = createSignal(0);

  createEffect(
    on(ref, frame => {
      if (!frame || !frame.contentWindow) return;
      const currentHead = window.document.head;
      frame.contentDocument!.head.innerHTML = currentHead.innerHTML;
      setMountNode(() => frame.contentWindow?.document.body);

      setTimeout(() => {
        const scrollHeight = ref()?.contentWindow?.document.body.scrollHeight;
        const scrollWidth = ref()?.contentWindow?.document.body.scrollWidth;
        setHeight(scrollHeight ?? 0);
        setWidth(scrollWidth ?? 0);
      });
    }),
  );

  return (
    <iframe {...props} ref={setRef} width={width()} height={height()}>
      <Show when={mountNode()}>
        {node => <Portal mount={node}>{props.children}</Portal>}
      </Show>
    </iframe>
  );
}

// FrameHandler.tsx

export function FrameHandler(
  props: PropsWithChildren<FrameHandlerProps>,
): JSXElement {
  const [internalRef, setInternalRef] = createSignal<HTMLDivElement>();
  const [canvasScale, setCanvasScale] = createSignal(1);
  const ratio = 0.1;

  createEffect(
    on([internalRef], ([frame]) => {
      setTimeout(() => {
        const scale = getScaleByRatio(
          // TODO: should be a ref (?)
          frame?.parentElement,
          frame,
          1 + ratio,
        );
        props.onScaleChange(scale);
        setCanvasScale(scale);
      });
    }),
  );

  return (
    <Box class={styles.wrapper}>
      <div
        class={styles.handler}
        style={assignInlineVars({
          [styles.frameHandlerVars.scale]: canvasScale().toString(),
        })}
        ref={createRef<'div'>(props, e => {
          setInternalRef(() => e);
        })}
      >
        <div use:exportExclude={true} class={styles.squaredBackgroundOverlay} />

        <IFrame>{props.children}</IFrame>
      </div>
    </Box>
  );
}

Move configuration into @codeimage/config

Default themes

Code editor

PWA support

🚀 - Changelog and release automation

Planning:

Main will host beta.codeimage.dev
Release branches will host the new codeimage.dev

To deploy in production:

Add a workflow dispatch
Set git repo, use peter-evans/create-pull-request@v3 to create a new pull request for branch release/${{ steps.run-release.outputs.new_version }}