CDA: add the new templates to all versions (tsx, jsx, basic)

MotorTruck1221 · Jun 21, 2024 · 5093490 · 5093490
1 parent a2cb23c
commit 5093490
Show file tree

Hide file tree

Showing 12 changed files with 543 additions and 16 deletions.
diff --git a/create-dreamland-app/templates/basic/default/index.css b/create-dreamland-app/templates/basic/default/index.css
@@ -0,0 +1,11 @@
+/* This is to modify anything outside of components */
+* {
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+}
+
+body {
+    width: 100%;
+    height: 100vh;
+}
diff --git a/create-dreamland-app/templates/basic/default/index.html b/create-dreamland-app/templates/basic/default/index.html
@@ -3,9 +3,11 @@
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
-        <title>Basic Dreamland Example</title>
+        <title>Basic Dreamland Starter</title>
         <script src="https://unpkg.com/dreamland" defer></script>
         <script src="./script.js" defer></script>
+        <link rel="stylesheet" href="./index.css" /> 
+        <link rel="icon" type="image/svg+xml" href="./logo.svg" />
     </head>
     <body>
 

diff --git a/create-dreamland-app/templates/basic/default/logo.svg b/create-dreamland-app/templates/basic/default/logo.svg
diff --git a/create-dreamland-app/templates/basic/default/script.js b/create-dreamland-app/templates/basic/default/script.js
@@ -1,10 +1,76 @@
+//the base style (used in the root div)
+const baseStyle = css`
+    width: 100%;
+    height: 100%;
+    min-height: 100%;
+    background: #181a1b;
+    color: white;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    gap: 6px;
+`
+
+//sets the styles for the dreamland logo
+const img = css`
+    width: 200px;
+    height: 200px;
+`
+
+//sets the styles for h1 tag ("Dreamland.js")
+const title = css`
+    font-size: 3.2em;
+`
+
+//set the styles for the p tag ("edit something something to modify this page")
+const getStarted = css`
+    font-size: 1.2em;
+`
+
+//sets the styles for the div the buttons are contained in
+const buttonRow = css`
+    display: flex;
+    flex-direction: row;
+    gap: 8px;
+`
+
+//sets the styles for the button with the count in it
+const counterButton = css`
+    color: white;
+    background: #9932b3;
+    border: none;
+    border-radius: 8px;
+    font-size: 1em;
+    padding: 0.6em 1.2em;
+    cursor: pointer;
+`
+
+//sets the styles for the link to the dreamland.js docs
+const docsButton = css`
+    color: white;
+    background-color: #9932b3;
+    border: none;
+    border-radius: 8px;
+    font-size: 1em;
+    padding: 0.6em 1.2em;
+    text-decoration: none;
+`
+
 function App() {
     this.counter = 0;
     return html`
-		<div>
-			<button on:click=${() => this.counter++}>Click me!</button>
-			<p>${use(this.counter)}</p>
-		</div>
+		 <div class=${baseStyle}>
+            <img class=${img} src="/logo.svg"></img>
+            <h1 class=${title}>Dreamland.js</h1>
+            <p class=${getStarted}>Edit src/index.jsx to modfiy this page</p>
+            <br />
+            <div class=${buttonRow}>
+                <button class=${counterButton} on:click={() => this.counter++}>Count is: {use(this.counter)}</button>
+                <a class=${docsButton} href="https://dreamland.js.org/learn" target="_blank" rel="noreferrer noopener">Get Started</a>
+            </div>
+        </div>
 	`;
 }
 

diff --git a/create-dreamland-app/templates/jsx/dreamland-router/src/routes/home.jsx b/create-dreamland-app/templates/jsx/dreamland-router/src/routes/home.jsx
@@ -65,7 +65,7 @@ const Home = function () {
          <div class={baseStyle}>
             <img class={img} src="/logo.svg"></img>
             <h1 class={title}>Dreamland.js</h1>
-            <p class={getStarted}>Edit src/index.jsx to modfiy this page</p>
+            <p class={getStarted}>Edit src/routes/home.jsx to modfiy this page</p>
             <br />
             <div class={buttonRow}>
                 <button class={counterButton} on:click={() => this.counter++}>Count is: {use(this.counter)}</button>

diff --git a/create-dreamland-app/templates/tsx/default/index.html b/create-dreamland-app/templates/tsx/default/index.html
@@ -2,9 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/logo.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Dreamland + Vite + TS</title>
+    <title>Dreamland Starter + TS</title>
   </head>
   <body>
     <div id="app"></div>