move assets to src

README.md

@@ -1,4 +1,4 @@
-![TypeCell Logo](./packages/editor/public/assets/logo_with_text.svg?raw=true)
+![TypeCell Logo](./packages/editor/src/assets/logo_with_text.svg?raw=true)
 
 Welcome to TypeCell! Let's reimagine how we can make it easier to understand, build and share knowledge.
 

packages/editor/src/app/main/components/Logo.tsx

@@ -1,4 +1,5 @@
 import { getStoreService } from "../../../store/local/stores";
+import logo_with_text from "../../../assets/logo_with_text.svg";
 import styles from "./Logo.module.css";
 
 export const Logo = () => {
@@ -12,7 +13,7 @@ export const Logo = () => {
         e.preventDefault();
         navigationStore.showStartScreen();
       }}>
-      <img src="/assets/logo_with_text.svg" alt="TypeCell Logo" />
+      <img src={logo_with_text} alt="TypeCell Logo" />
     </a>
   );
 };

packages/editor/src/app/main/components/StartScreen.module.css

@@ -10,7 +10,9 @@
 .introduction {
   padding: 3em 0 11em 0;
   position: relative;
-  background: linear-gradient(0deg, #eff7fc, #eff7fc);
+  background: url(./startscreen/assets/background_pattern.svg),
+    linear-gradient(0deg, #eff7fc, #eff7fc);
+  /* background: linear-gradient(0deg, #eff7fc, #eff7fc); */
 }
 
 .introduction .github {

packages/editor/src/app/main/components/StartScreen.tsx

@@ -3,6 +3,12 @@ import styles from "./StartScreen.module.css";
 import GitHubButton from "react-github-btn";
 import { getStoreService } from "../../../store/local/stores";
 import { NotebookOverviewItem } from "./NotebookOverviewItem";
+import app_logo from "../../../assets/app_logo.svg";
+import intro from "./startscreen/assets/intro.gif";
+import lightning from "./startscreen/assets/lightning.svg";
+import globe from "./startscreen/assets/globe.svg";
+import notebook_preview from "./startscreen/assets/notebook_preview.jpg";
+import npm from "./startscreen/assets/npm.svg";
 
 export const StartScreen = observer(() => {
   const { navigationStore, sessionStore } = getStoreService();
@@ -33,7 +39,7 @@ export const StartScreen = observer(() => {
             <div className={styles.row + " row"}>
               <img
                 className={styles.logo}
-                src="/assets/app_logo.svg"
+                src={app_logo}
                 alt="TypeCell app logo"
               />
             </div>
@@ -66,7 +72,7 @@ export const StartScreen = observer(() => {
         <section className={styles.demo}>
           <div className="container">
             <div className={styles.code_block}>
-              <img src="/assets/intro.gif" alt="TypeCell Demo" />
+              <img src={intro} alt="TypeCell Demo" />
             </div>
           </div>
         </section>
@@ -76,7 +82,7 @@ export const StartScreen = observer(() => {
             <div className={styles.perk_row + " row"}>
               <div className={styles.perk}>
                 <div className={styles.icon}>
-                  <img src="/assets/lightning.svg" alt="Lightning icon" />
+                  <img src={lightning} alt="Lightning icon" />
                 </div>
                 <span>
                   Execute code changes in realtime, directly in your browser
@@ -85,14 +91,14 @@ export const StartScreen = observer(() => {
               <div className={styles.separator}></div>
               <div className={styles.perk}>
                 <div className={styles.icon}>
-                  <img src="/assets/npm.svg" alt="NPM logo" />
+                  <img src={npm} alt="NPM logo" />
                 </div>
                 <span>Instantly use npm modules in your notebook</span>
               </div>
               <div className={styles.separator}></div>
               <div className={styles.perk}>
                 <div className={styles.icon}>
-                  <img src="/assets/globe.svg" alt="Globe icon" />
+                  <img src={globe} alt="Globe icon" />
                 </div>
                 <span>Colaborate with anyone in an instant</span>
               </div>
@@ -116,7 +122,7 @@ export const StartScreen = observer(() => {
               <NotebookOverviewItem
                 title="Import & transform CSV"
                 description="See if we can import and manipulate some data"
-                previewImageUrl="/assets/notebook_preview.jpg"
+                previewImageUrl={notebook_preview}
                 author={{
                   username: "Niklas",
                   profileImageUrl: "",
@@ -127,7 +133,7 @@ export const StartScreen = observer(() => {
               <NotebookOverviewItem
                 title="3D prototype. Work with new models and cameras"
                 description="Load a 3D model with adjustable camera interface"
-                previewImageUrl="/assets/notebook_preview.jpg"
+                previewImageUrl={notebook_preview}
                 author={{
                   username: "Yousef",
                   profileImageUrl: "",
@@ -138,7 +144,7 @@ export const StartScreen = observer(() => {
               <NotebookOverviewItem
                 title="Use React graphs"
                 description="Use React graph library to display various bar charts"
-                previewImageUrl="/assets/notebook_preview.jpg"
+                previewImageUrl={notebook_preview}
                 author={{
                   username: "Pieter",
                   profileImageUrl: "",