Merge remote-tracking branch 'origin/main' into feat/website-auth0

.github/workflows/main.yml

@@ -199,7 +199,7 @@ jobs:
           vercel-org-id: ${{ secrets.VERCEL_ORG_ID}} #Required
           vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID}} #Required
           alias-domains: | #Optional
-            codeimage-ui-pr-{{PR_NUMBER}}.vercel.app
+            codeimage-app-pr-{{PR_NUMBER}}.vercel.app
 
   build-highlight-dev:
     name: '@codeimage/highlight dev and Preview'

.github/workflows/prod-deploy.yml

@@ -399,3 +399,40 @@ jobs:
           vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }} #Required
           alias-domains: | #Optional
             codeimage.dev
+
+
+  deploy-website:
+    needs: [ install, lint, typecheck-packages, build-packages ]
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: pnpm/[email protected]
+        with:
+          version: 7
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'pnpm'
+
+      - name: Restore packages
+        uses: actions/cache@v3
+        with:
+          path: packages
+          key: packages-dist-${{ github.run_id }}-${{ github.run_number }}
+
+      - name: Install dependencies
+        run: |
+          pnpm --prefer-offline install
+
+      - name: Build
+        run: |
+          pnpm --filter=@codeimage/website build
+
+      - name: Publish on Netlify
+        uses: netlify/actions/cli@master
+        with:
+          args: deploy --dir=apps/website/dist/public --prod
+        env:
+          NETLIFY_SITE_ID: ${{ secrets.WEBSITE_NETLIFY_SITE_ID }}
+          NETLIFY_AUTH_TOKEN: ${{ secrets.WEBSITE_NETLIFY_AUTH_TOKEN }}

README.md

@@ -1,4 +1,4 @@
-![CodeImage logo](https://github.com/riccardoperra/codeimage/blob/main/banner.png?raw=true)
+![CodeImage logo](./docs/banner.png?raw=true)
 
 > Create elegant code screenshots of your source code.
 

apps/codeimage/public/assets/blank.html

@@ -4,7 +4,7 @@
   <meta charset='utf-8'>
   <meta name='theme-color'>
   <meta name='apple-mobile-web-app-status-bar-style' content='dark-content'>
-  <link rel='icon' href='/assets/favicon.svg' type='image/svg+xml'>
+  <link rel='icon' href='/assets/favicon.ico'>
   <link rel='preload' href='/assets/codeimage-logo-blue-svg-v1.svg' as='image' type='image/svg+xml'>
   <meta name='viewport'
         content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover'>

apps/codeimage/public/sitemap.xml

@@ -7,7 +7,7 @@
     <loc>https://codeimage.dev/</loc>
     <lastmod>2022-04-01</lastmod>
     <image:image>
-      <image:loc>https://codeimage.dev/assets/codeimage-logo-white.svg</image:loc>
+      <image:loc>https://codeimage.dev/assets/codeimage-logo-blue-svg-v1</image:loc>
     </image:image>
   </url>
 </urlset>

apps/website/src/components/FeatureCard/FeatureCard.css.ts

@@ -1,6 +1,6 @@
 import {backgroundColorVar} from '@codeimage/ui';
 import {createVar, style} from '@vanilla-extract/css';
-import {responsiveStyle} from '~/core/responsive';
+import {responsiveStyle} from '~/theme/responsive';
 
 const cardPadding = createVar();
 const cardOuterRadius = createVar();
@@ -69,6 +69,9 @@ export const imageSection = style([
     opacity: 1,
     height: '300px',
     width: '100%',
+    // @ts-expect-error No present in types. This is for safari absolute + overflow hidden bug
+    '-webkitMaskImage':
+      '-webkit-radial-gradient(circle, white 100%, black 100%)',
   },
   responsiveStyle({
     mobile: {
@@ -85,7 +88,7 @@ export const imageSection = style([
 export const imageWrapper = style({
   aspectRatio: '2 / 1',
   flex: '0 0 auto',
-  borderRadius: '32px',
+  borderRadius: `16px`,
   height: '568px',
   left: '48px',
   overflow: 'hidden',

apps/website/src/components/Footer/Footer.css.ts

@@ -1,6 +1,6 @@
 import {themeVars} from '@codeimage/ui';
 import {style} from '@vanilla-extract/css';
-import {responsiveStyle} from '~/core/responsive';
+import {responsiveStyle} from '~/theme/responsive';
 
 export const footer = style({
   backgroundColor: themeVars.dynamicColors.panel.background,

apps/website/src/components/GithubButton/GithubButton.css.ts

@@ -1,6 +1,6 @@
 import {themeVars} from '@codeimage/ui';
 import {createVar, style} from '@vanilla-extract/css';
-import {responsiveStyle} from '~/core/responsive';
+import {responsiveStyle} from '~/theme/responsive';
 
 export const githubButton = style({
   display: 'flex',

apps/website/src/components/Header/Header.css.ts

@@ -1,5 +1,4 @@
 import {themeVars} from '@codeimage/ui';
-import {darkGrayScale} from '@codeimage/ui/themes/darkTheme';
 import {createTheme, createVar, style} from '@vanilla-extract/css';
 
 export const [toolbarTheme, toolbarVars] = createTheme({
@@ -9,11 +8,14 @@ export const [toolbarTheme, toolbarVars] = createTheme({
 
 const headerBorderColor = createVar();
 
+export const headerBgColor = createVar();
+
 export const header = style([
   toolbarTheme,
   {
     vars: {
       [headerBorderColor]: 'rgba(0,0,0,0)',
+      [headerBgColor]: 'rgba(12, 12, 12, 0.6)',
     },
     display: 'flex',
     position: 'fixed',
@@ -24,7 +26,7 @@ export const header = style([
     transition: 'border-color 250ms ease-in-out',
     selectors: {
       '&[data-scrolled=true]': {
-        backgroundColor: `rgba(12, 12, 12, 0.6)`,
+        backgroundColor: headerBgColor,
         backdropFilter: 'saturate(180%) blur(20px)',
         // @ts-expect-error: Why not working
         '-webkitBackdropFilter': 'saturate(180%) blur(20px)',

apps/website/src/components/Header/Header.tsx

@@ -1,15 +1,15 @@
 import {Button} from '@codeimage/ui';
-import {A} from '@solidjs/router';
+import {assignInlineVars} from '@vanilla-extract/dynamic';
 import {createMemo, createSignal, onCleanup, onMount} from 'solid-js';
-import {injectBreakpoints} from '~/core/breakpoints';
 import {mainWebsiteLink} from '~/core/constants';
+import {getUiStore} from '~/ui';
 import {CodeImageLogoSvg} from '../CodeImageLogo/CodeImageLogoSvg';
 import {content} from '../Main/MainPage.css';
 import * as styles from './Header.css';
 
 export function Header() {
   const [scrolled, setScrolled] = createSignal(false);
-  const bp = injectBreakpoints();
+  const ui = getUiStore();
   onMount(() => {
     const contentEl = document.querySelector(`.${content}`) as HTMLElement;
     const observer = new IntersectionObserver(
@@ -26,7 +26,13 @@ export function Header() {
   const dataScrolled = createMemo(() => scrolled());
 
   return (
-    <div class={styles.header} data-scrolled={dataScrolled() ?? false}>
+    <div
+      class={styles.header}
+      style={assignInlineVars({
+        [styles.headerBgColor]: `${ui.value.navColor}20`,
+      })}
+      data-scrolled={dataScrolled() ?? false}
+    >
       <div class={styles.headerContent}>
         <div class={styles.headerContentInner}>
           <CodeImageLogoSvg height={32} width={164} />

apps/website/src/components/Landing/ComingSoon/ComingSoon.css.ts

@@ -1,12 +1,12 @@
 import {themeVars} from '@codeimage/ui';
 import {darkGrayScale} from '@codeimage/ui/themes/darkTheme';
 import {style} from '@vanilla-extract/css';
-import {responsiveStyle} from '~/core/responsive';
-import {rootThemeVars} from '~/theme.css';
+import {responsiveStyle} from '~/theme/responsive';
+import {rootThemeVars} from '~/theme/theme.css';
 
 export const main = style([
   {
-    backgroundColor: '#000',
+    backgroundColor: rootThemeVars.black,
     paddingLeft: themeVars.spacing[6],
     paddingRight: themeVars.spacing[6],
     paddingBottom: themeVars.spacing[24],
@@ -37,36 +37,6 @@ export const twoSections = style([
   }),
 ]);
 
-export const halfCard = style([
-  {
-    border: `1px solid rgb(24 24 27)`,
-    backgroundColor: 'rgb(39 39 42 / 0.25)',
-    placeContent: 'center flex-start',
-    alignItems: 'center',
-    display: 'flex',
-    flexFlow: 'row nowrap',
-    gap: '96px',
-    overflow: 'visible',
-    position: 'relative',
-    flexDirection: 'column',
-    padding: '24px',
-    borderRadius: '24px',
-    flex: 1,
-  },
-  responsiveStyle({
-    mobile: {
-      borderRadius: '32px',
-    },
-    desktop: {
-      flexDirection: 'row',
-      borderRadius: '96px',
-      padding: '48px',
-      paddingTop: themeVars.spacing[24],
-      paddingBottom: themeVars.spacing[24],
-    },
-  }),
-]);
-
 export const badge = style({
   width: '64px',
   height: '64px',
@@ -133,15 +103,24 @@ export const rightCardAnalytics = style({
   gap: '24px',
 });
 
-export const analyticsCard = style({
-  width: '224px',
-  height: '140px',
-  boxSizing: 'content-box',
-  background: themeVars.backgroundColor.purple['200'],
-  padding: '24px',
-  borderRadius: '32px',
-  color: themeVars.textColor.gray['800'],
-});
+export const analyticsCard = style([
+  {
+    width: '224px',
+    height: '140px',
+    boxSizing: 'content-box',
+    background: themeVars.backgroundColor.purple['200'],
+    padding: '24px',
+    color: themeVars.textColor.gray['800'],
+  },
+  responsiveStyle({
+    mobile: {
+      borderRadius: `16px`,
+    },
+    desktop: {
+      borderRadius: '32px',
+    },
+  }),
+]);
 
 export const image = style({
   pointerEvents: 'none',