diff --git a/create-dreamland-app/templates/basic/default/index.css b/create-dreamland-app/templates/basic/default/index.css new file mode 100644 index 0000000..b50e9f3 --- /dev/null +++ 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 index ac8edfa..738967c 100644 --- a/create-dreamland-app/templates/basic/default/index.html +++ b/create-dreamland-app/templates/basic/default/index.html @@ -3,9 +3,11 @@ - Basic Dreamland Example + Basic Dreamland Starter + + diff --git a/create-dreamland-app/templates/basic/default/logo.svg b/create-dreamland-app/templates/basic/default/logo.svg new file mode 100644 index 0000000..f7b9f0f --- /dev/null +++ b/create-dreamland-app/templates/basic/default/logo.svg @@ -0,0 +1,146 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/create-dreamland-app/templates/basic/default/script.js b/create-dreamland-app/templates/basic/default/script.js index 50a9452..f01cbf0 100644 --- 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` -
- -

${use(this.counter)}

-
+
+ +

Dreamland.js

+

Edit src/index.jsx to modfiy this page

+
+
+ + Get Started +
+
`; } 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 index 21f188f..153403f 100644 --- 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 () {

Dreamland.js

-

Edit src/index.jsx to modfiy this page

+

Edit src/routes/home.jsx to modfiy this page


diff --git a/create-dreamland-app/templates/tsx/default/index.html b/create-dreamland-app/templates/tsx/default/index.html index c41764b..9039486 100644 --- a/create-dreamland-app/templates/tsx/default/index.html +++ b/create-dreamland-app/templates/tsx/default/index.html @@ -2,9 +2,9 @@ - + - Dreamland + Vite + TS + Dreamland Starter + TS
diff --git a/create-dreamland-app/templates/tsx/default/public/logo.svg b/create-dreamland-app/templates/tsx/default/public/logo.svg new file mode 100644 index 0000000..f7b9f0f --- /dev/null +++ b/create-dreamland-app/templates/tsx/default/public/logo.svg @@ -0,0 +1,146 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/create-dreamland-app/templates/tsx/default/public/vite.svg b/create-dreamland-app/templates/tsx/default/public/vite.svg deleted file mode 100644 index e7b8dfb..0000000 --- a/create-dreamland-app/templates/tsx/default/public/vite.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/create-dreamland-app/templates/tsx/default/src/index.css b/create-dreamland-app/templates/tsx/default/src/index.css new file mode 100644 index 0000000..b50e9f3 --- /dev/null +++ b/create-dreamland-app/templates/tsx/default/src/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/tsx/default/src/main.tsx b/create-dreamland-app/templates/tsx/default/src/main.tsx index 983420d..6b88e8a 100644 --- a/create-dreamland-app/templates/tsx/default/src/main.tsx +++ b/create-dreamland-app/templates/tsx/default/src/main.tsx @@ -1,5 +1,69 @@ +//You may want to switch this to 'dreamland' when building for prod import 'dreamland/dev'; +//used to modify stuff outside of components +import './index.css'; + +//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; +` + // typescript syntax for defining components const App: Component< { @@ -13,9 +77,15 @@ const App: Component< > = function () { this.counter = 0; return ( -
- -

{use(this.counter)}

+
+ +

Dreamland.js

+

Edit src/index.tsx to modfiy this page

+
+
+ + Get Started +
); }; diff --git a/create-dreamland-app/templates/tsx/dreamland-router/src/main.tsx b/create-dreamland-app/templates/tsx/dreamland-router/src/main.tsx index 44e68bc..dce08a1 100644 --- a/create-dreamland-app/templates/tsx/dreamland-router/src/main.tsx +++ b/create-dreamland-app/templates/tsx/dreamland-router/src/main.tsx @@ -1,5 +1,14 @@ import 'dreamland/dev'; import { Router } from './router'; + +//Used to style anything outside of components +import './index.css'; + +const base = css` + width: 100%; + height: 100%; +` + // typescript syntax for defining components const App: Component< { @@ -13,7 +22,7 @@ const App: Component< this.mount = () => { Router.render(this.root); }; - return
; + return
; }; window.addEventListener('load', () => { diff --git a/create-dreamland-app/templates/tsx/dreamland-router/src/routes/home.tsx b/create-dreamland-app/templates/tsx/dreamland-router/src/routes/home.tsx index de2bef1..08cfcb7 100644 --- a/create-dreamland-app/templates/tsx/dreamland-router/src/routes/home.tsx +++ b/create-dreamland-app/templates/tsx/dreamland-router/src/routes/home.tsx @@ -1,10 +1,77 @@ +//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; +` + const Home: Component<{}, { counter: number }> = function () { this.counter = 0; return ( -
- -

{use(this.counter)}

+
+ +

Dreamland.js

+

Edit src/routes/home.jsx to modfiy this page

+
+
+ + Get Started +
+ ); };