docs: update README.md (#363)

* docs: update README.md * docs: update CONTRIBUTING.md * chore: fix dependencies * refactor: move themes to @codeimage/ui
riccardoperra · Oct 3, 2022 · 35f1c27 · 35f1c27
1 parent 2ab525d
commit 35f1c27
Show file tree

Hide file tree

Showing 40 changed files with 448 additions and 332 deletions.
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -8,16 +8,29 @@ with the owners of this repository before making a change.
 All members of our community are expected to follow our [Code of Conduct](CODE_OF_CONDUCT.md). Please make sure you are
 welcoming and friendly in all of our spaces.
 
-## Cloning the repository
+## Requirements
+
+> **Note** Due to the recent release, the modalities of contribution could change during the time.
+
+In order to contribute and start the project locally, you can follow these 2 guides:
+
+- [Run on your machine](#run-on-your-machine)
+- [Run on CodeSandbox Projects without having to install and run the project locally](#run-on-codesandbox-projects)
+
+## Run on your machine
+
+### Cloning the repository
+
 To start contributing to the project, you have to fork this repository and clone it to your local machine:
 
 ```bash
 git clone https://github.com/YOUR_USERNAME/codeimage.git
 ```
 
-## Installing Node.js and pnpm
+### Installing Node.js and pnpm
 
-This repository uses [pnpm](https://pnpm.io/it/) to manage multiple projects. You need to install **pnpm 6.23.2 or higher** and **Node.js v14 or higher**.
+This repository uses [pnpm](https://pnpm.io/it/) to manage multiple projects. You need to install **pnpm 7 or higher**
+and **Node.js v16 or higher**.
 
 You can run the following commands in your terminal to check your local Node.js and npm versions:
 
@@ -26,34 +39,70 @@ node -v
 pnpm -v
 ```
 
-## Installing dependencies
+### Installing dependencies
 
 Once in the project's root directory, you can run the following command to install the project's dependencies:
 
 ```bash
 pnpm install
 ```
 
-## Creating a new branch
+### Creating a new branch
 
 Make sure you create a new branch for your changes. You can do this by running the following command in your terminal:
 
 ```bash
-git checkout -b feat/my-component
+git checkout -b feat/my-feature
 ```
 
-## Starting the development server
+### Preparing the environment
 
-After installing the project's dependencies, you can run the following command to start the development server:
+In order to prepare your environment correctly, you need to have `Docker` installed in your machine to launch the
+docker-compose.
 
 ```bash
-pnpm libs:build #Install dependent libraries
+docker-compose -f apps/api/docker-compose.dev.yml -p codeimage up -d
+```
+
+As soon as the containers are all ready, you can launch the `prepare:env` script to configure your environment variables automatically.
+
+```bash
+pnpm prepare:env
+```
+
+It is a small cli that will guide you to the correct configuration.
+
+> **WARNING** Be sure to enable the Auth0 mock if you don't have a properly configured account with environment variables.
+
+After configuring everything Prisma migrations will be launched to generate the types.
+
+### Starting the development server
+
+After your environment is configured, you can run the following command to start the development server:
+
+```bash
+pnpm libs:build # Build dependent libraries
 pnpm app:dev
 ```
 
 Now you can open http://localhost:4200 in your browser to see the project's site.
 
-## Pull Request Process
+You can access the API backend server through `http://localhost:3000`
+
+## Run on Codesandbox Projects
+
+You will be able to access the Project repository through this link:
+
+https://codesandbox.io/p/github/riccardoperra/codeimage
+
+![img.png](docs/codesandbox_fork.png)
+*Preview of CodeSandbox projects with Fork action*
+
+[You don't know CodeSandbox Projects?](https://codesandbox.io/post/announcing-codesandbox-projects)
+
+[CodeSandbox Docs](https://codesandbox.io/docs/projects/learn/introduction/overview)
+
+### Pull Request Process
 
 1. We follow [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0-beta.4/) in our commit messages, i.e.
    `feat(core): improve typing`

diff --git a/README.md b/README.md
@@ -10,81 +10,68 @@
 [![Built with Vanilla Extract](https://img.shields.io/badge/Built%20with-Vanilla%20Extract-ff69b4)](https://github.com/seek-oss/vanilla-extract)
 [![Code quality](https://img.shields.io/lgtm/grade/javascript/github/riccardoperra/codeimage)](https://lgtm.com/projects/g/riccardoperra/codeimage/alerts/?mode=list)
 ![License](https://img.shields.io/github/license/riccardoperra/codeimage)
-
-![CodeImage showcase](https://i.imgur.com/9mrRo7n.gif)
+![CodeImage showcase](docs/showcase_1.png)
 
 ## Introduction
 
-[CodeImage](https://codeimage.dev) is the newest tool to help developers to create beautiful screenshots of their code, providing several
+[CodeImage](https://codeimage.dev) 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](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share) support \
-✅ Keyboard shortcuts support \
-✅ Mobile view support \
-✅ Multi-language support \
-✅ Light and dark mode support
 
-## 💻 Run locally
+## 🤖 Tech stack
 
-**CodeImage** use a monorepo structure with pnpm. It's currently subdivided in these packages:
-- [@codeimage/app](./apps/codeimage): front-end application
-- [@codeimage/config](./packages/config): Base configuration and interfaces for CodeImage
-- [@codeimage/dom-export](./packages/dom-export): html-to-image fork which includes several fix for image export
-- [@codeimage/highlight](./packages/highlight): Editor themes and highlighting
-- [@codeimage/locale](./packages/locale): Wrapper of @solid-primitives/i18n which includes strict typing for i18n
-- [@codeimage/ui](./packages/ui): UI kit of CodeImage front-end application
+CodeImage architecture consist of a PNPM monorepo, currently subdivided in `packages` and `apps`.
 
-To run the project locally, you must have in your local machine pnpm >= 7 and node >= 16.x;
+![Dependency Graph](./docs/dependency_graph.png)
 
-1. Install dependencies
+### Apps
 
-```bash
-$ pnpm install
-```
+#### [@codeimage/app](./apps/codeimage)
 
-2. Build core libraries
+The front-end application, entirely built with SolidJS.
 
-```bash
-$ pnpm libs:build
-```
+It currently also relies on these libraries:
 
-3. Run @codeimage/app
+- [vanilla-extract](https://github.com/seek-oss/vanilla-extract): Zero-runtime Stylesheets-in-TypeScript.
+- [CodeMirror6](https://codemirror.net/6/): Extensible code editor
+- [solid-aria](https://github.com/solidjs-community/solid-aria): High-quality primitives that help to build accessible
+  user interfaces
+- [solid-primitives](https://github.com/solidjs-community/solid-primitives): SolidJS primitives library
 
-```bash
-$ pnpm dev
-```
+#### [@codeimage/api](./apps/api)
 
-## 🤖 Tech stack
+The REST API layer built with [Fastify](https://github.com/fastify/fastify),
+[Prisma ORM](https://github.com/prisma/prisma) and [Auth0](https://auth0.com/).
 
-CodeImage front-end app is entirely built with [SolidJS](https://github.com/solidjs/solid), and currently relies on these technologies:
+### Packages
 
-- [CodeMirror6](https://codemirror.net/6/): Code Editor
-- [vanilla-extract](https://github.com/seek-oss/vanilla-extract): Design system and app theme
-- [HeroIcons](https://heroicons.com/): App icons
-- [solid-aria](https://github.com/solidjs-community/solid-aria): High-quality primitives that help to build accessible user interfaces
-- [@ngneat/elf](https://github.com/ngneat/elf) + [RxJS](https://github.com/ReactiveX/rxjs): Reactive state management
+- [@codeimage/ui](./packages/ui): contains the source code of the UI kit of CodeImage front-end application
+- [@codeimage/config](./packages/config): contains the base configurations and interfaces for CodeImage
+- [@codeimage/highlight](./packages/highlight): contains the custom editor and highlighting themes for CodeMirror
 
-#### Other libraries:
 
-- [solid-primitives](https://github.com/solidjs-community/solid-primitives): SolidJS primitives library
-- [solid-use](https://github.com/LXSMNSYC/solid-use): Collection of solid-js utilities
-- [material-icon-theme](https://github.com/PKief/vscode-material-icon-theme): Icons for custom terminal tabs
-- [floating-ui](https://github.com/floating-ui/floating-ui/): Utilities for positioning floating elements
-- [Lion](https://github.com/ing-bank/lion): White label web components in Lit (used for custom combobox)
+- [@codeimage/dom-export](./packages/dom-export): contains the [html-to-image](https://github.com/bubkoo/html-to-image)
+  fork which includes several fix for image export
+- [@codeimage/locale](./packages/locale): contains a wrapper
+  of [@solid-primitives/i18n](https://github.com/solidjs-community/solid-primitives/tree/main/packages/i18n) which
+  includes strict typing for i18n
+- [@codeimage/vanilla-extract](./packages/vanilla-extract): contain
+  the [Vanilla Extract](https://github.com/seek-oss/vanilla-extract) plugin fork which includes SolidJS and PNPM fixes
+  to work under monorepo.
+- [@codeimage/prisma-models](./packages/prisma-models): contains the Prisma ORM backend models shared across front-end
+  and back-end application.
+- [@codeimage/atomic-state](./packages/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!**
+> **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](/CONTRIBUTING.md) guide for more details.
+See the [CONTRIBUTING.md](./CONTRIBUTING.md) guide for more details.
 
 
 ---
@@ -97,7 +84,6 @@ See the [CONTRIBUTING.md](/CONTRIBUTING.md) guide for more details.
   CodeImage is the winner of <a href="https://hack.solidjs.com">SolidHack 2022</a> for the Best Application category!
 </p>
 
-
 ## License
 
 MIT © [Riccardo Perra](https://github.com/riccardoperra)
diff --git a/apps/api/package.json b/apps/api/package.json
@@ -60,6 +60,6 @@
     "fastify-tsconfig": "^1.0.1",
     "sinon": "^14.0.0",
     "tap": "^16.3.0",
-    "typescript": "^4.8.2"
+    "typescript": "^4.8.4"
   }
 }
diff --git a/apps/codeimage/package.json b/apps/codeimage/package.json
@@ -25,7 +25,7 @@
     "prettier": "^2.6.2",
     "rimraf": "^3.0.2",
     "sass": "^1.52.1",
-    "typescript": "^4.8.2",
+    "typescript": "^4.8.4",
     "vite": "^3.0.9",
     "vite-plugin-pwa": "^0.12.3",
     "vite-plugin-solid": "^2.3.0",
@@ -77,7 +77,7 @@
     "@solid-primitives/context": "^0.1.0",
     "@solid-primitives/i18n": "^1.1.0",
     "@solid-primitives/immutable": "^0.1.1",
-    "@solid-primitives/platform": "^0.0.100",
+    "@solid-primitives/platform": "^0.0.101",
     "@solid-primitives/resize-observer": "^2.0.3",
     "@thisbeyond/solid-dnd": "^0.7.1",
     "@vanilla-extract/css": "^1.7.3",

diff --git a/apps/codeimage/src/components/Frame/Frame.css.ts b/apps/codeimage/src/components/Frame/Frame.css.ts
@@ -1,4 +1,4 @@
-import {backgroundColorVar, themeVars} from '@codeimage/ui';
+import {backgroundColorVar, themeVars, withThemeMode} from '@codeimage/ui';
 import {createTheme, style} from '@vanilla-extract/css';
 
 export const [frame, frameVars] = createTheme({
@@ -12,12 +12,39 @@ export const [frame, frameVars] = createTheme({
   minHeight: '150px',
   maxWidth: '1400px',
   controlHandleSize: '24px',
-  controlHandleColor: themeVars.dynamicColors.frameDragControlBackgroundColor,
+  controlHandleColor: '',
+  resizeLineBadgeBackgroundColor: '',
+  resizeLineBackgroundColor: '',
   controlOffset: '0px',
 });
 
-export const container = style([
+export const wrapper = style([
   frame,
+  {
+    selectors: {
+      ...withThemeMode({
+        dark: {
+          vars: {
+            [frameVars.resizeLineBadgeBackgroundColor]: '#161515',
+            [frameVars.resizeLineBackgroundColor]: 'hsla(0,0%,100%,.25)',
+            [frameVars.controlHandleColor]: '#EEEEEE',
+          },
+        },
+        light: {
+          vars: {
+            [frameVars.resizeLineBackgroundColor]:
+              themeVars.backgroundColor.black,
+            [frameVars.resizeLineBadgeBackgroundColor]:
+              themeVars.backgroundColor.black,
+            [frameVars.controlHandleColor]: themeVars.backgroundColor.black,
+          },
+        },
+      }),
+    },
+  },
+]);
+
+export const container = style([
   {
     width: frameVars.width,
     maxWidth: frameVars.maxWidth,
@@ -101,8 +128,8 @@ export const resizeLine = style({
   bottom: -25,
   width: '100%',
   height: '15px',
-  borderLeft: `1px solid ${themeVars.dynamicColors.resizeLineBackgroundColor}`,
-  borderRight: `1px solid ${themeVars.dynamicColors.resizeLineBackgroundColor}`,
+  borderLeft: `1px solid ${frameVars.resizeLineBackgroundColor}`,
+  borderRight: `1px solid ${frameVars.resizeLineBackgroundColor}`,
   display: 'flex',
 });
 
@@ -112,7 +139,7 @@ export const resizeBadge = style([
     padding: '0 1em',
     display: 'inline-block',
     fontSize: '12px',
-    backgroundColor: themeVars.dynamicColors.resizeLineBadgeBackgroundColor,
+    backgroundColor: frameVars.resizeLineBadgeBackgroundColor,
     color: 'white',
     alignItems: 'center',
     margin: 'auto',
@@ -122,7 +149,7 @@ export const resizeBadge = style([
 
 export const resizeLineDivider = style({
   position: 'absolute',
-  borderColor: themeVars.dynamicColors.resizeLineBackgroundColor,
+  borderColor: frameVars.resizeLineBackgroundColor,
   left: 0,
   top: '50%',
   width: '100%',

diff --git a/apps/codeimage/src/components/Frame/Frame.tsx b/apps/codeimage/src/components/Frame/Frame.tsx
@@ -4,6 +4,7 @@ import {ParentComponent, Show} from 'solid-js';
 import {exportExclude as _exportExclude} from '@core/directives/exportExclude';
 import {useModality} from '@core/hooks/isMobile';
 import {createHorizontalResize} from '@core/hooks/resizable';
+import {wrapper} from './Frame.css';
 import * as styles from './Frame.css';
 
 export const exportExclude = _exportExclude;
@@ -30,7 +31,7 @@ export const Frame: ParentComponent<{
   const modality = useModality();
 
   return (
-    <Box position={'relative'}>
+    <Box position={'relative'} class={styles.wrapper}>
       <div
         ref={setRef}
         class={styles.container}