@@ -40,7 +40,6 @@ export const StartScreen = observer((props: { sessionStore: SessionStore }) => {
40
40
Interactive documents. < strong > Reimagined.</ strong >
41
41
< br />
42
42
</ h1 >
43
- { /* <!-- <h1>A fresh take on documents.<br /></h1> --> */ }
44
43
< p >
45
44
TypeCell is a fresh take on what documents and software can look
46
45
like. Think < em > Notion + Jupyter Notebooks</ em > . Open Source.
@@ -50,12 +49,6 @@ export const StartScreen = observer((props: { sessionStore: SessionStore }) => {
50
49
< a className = { styles . simple } onClick = { onNewNotebookClick } href = "/" >
51
50
Create new notebook
52
51
</ a >
53
- { /* <CTAButton href="/docs/quickstart"
54
- >Create your workspace (beta)</CTAButton
55
- > */ }
56
- { /* <!-- <CTAButton href="/guides/introduction" layout="simple"
57
- >Learn more</CTAButton
58
- > --> */ }
59
52
</ div >
60
53
</ div >
61
54
< div className = { styles . headerMedia } >
@@ -65,34 +58,6 @@ export const StartScreen = observer((props: { sessionStore: SessionStore }) => {
65
58
</ div >
66
59
</ header >
67
60
< div className = { styles . page + " centered" } >
68
- { /* <section className={styles.introduction}>
69
- <div className="container">
70
- <div>
71
- <h1>Create & share live interactive notebooks</h1>
72
- <p>
73
- TypeCell is an open source Typescript live programming
74
- environment. <br /> Running code has never been easier :)
75
- </p>
76
- </div>
77
- <div className={styles.buttons}>
78
- <Link
79
- className={`${buttonStyles.button} ${buttonStyles.primary}`}
80
- to={toTutorial()}>
81
- Try interactive tutorial
82
- </Link>
83
-
84
- <a
85
- className={`${buttonStyles.button} ${buttonStyles.secondary}`}
86
- href="/"
87
- onClick={onNewNotebookClick}>
88
- Create new notebook
89
- </a>
90
- </div>
91
- <div className={styles.code_block}>
92
- <img src={intro} alt="TypeCell Demo" />
93
- </div>
94
- </div>
95
- </section> */ }
96
61
< section className = { styles . storySection + " " + styles . uneven } >
97
62
< div className = { styles . content + " " + styles . story } >
98
63
< div className = { "" } >
@@ -108,7 +73,14 @@ export const StartScreen = observer((props: { sessionStore: SessionStore }) => {
108
73
</ p >
109
74
< p >
110
75
Hackable, or Malleable software, puts users in control by making
111
- tools customizable with End-User Programming.
76
+ tools customizable with{ " " }
77
+ < a
78
+ href = "https://www.inkandswitch.com/end-user-programming/"
79
+ target = "_blank"
80
+ rel = "noreferrer" >
81
+ End-User Programming
82
+ </ a >
83
+ .
112
84
</ p >
113
85
< p >
114
86
Use TypeCell to create and share your knowledge base of live,
@@ -130,51 +102,35 @@ export const StartScreen = observer((props: { sessionStore: SessionStore }) => {
130
102
< div className = { styles . perk } >
131
103
< h3 > Local-first architecture</ h3 >
132
104
< span >
133
- Built on the principles of local-first software; the
134
- architecture that makes apps like Linear fast and fun to use.
105
+ Built on the principles of{ " " }
106
+ < a
107
+ href = "https://www.inkandswitch.com/local-first/"
108
+ target = "_blank"
109
+ rel = "noreferrer" >
110
+ local-first software
111
+ </ a >
112
+ ; the architecture that makes apps like Linear fast and fun to
113
+ use.
135
114
</ span >
136
115
</ div >
137
116
138
117
< div className = { styles . perk } >
139
118
< h3 > Collaborate</ h3 >
140
119
< span >
141
- We always liked multiplayer mode best. Share your documents and
142
- collaborate in real-time (powered by Yjs CRDT).
120
+ We always liked multiplayer mode best :) Share your documents
121
+ and collaborate in real-time, powered by{ " " }
122
+ < a
123
+ href = "https://github.com/yjs/yjs"
124
+ target = "_blank"
125
+ rel = "noreferrer" >
126
+ Yjs CRDT
127
+ </ a >
128
+ .
143
129
</ span >
144
130
</ div >
145
131
</ div >
146
132
</ section >
147
133
148
- { /* <section className={styles.perksSection}>
149
- <div className={styles.perks + " " + styles.content}>
150
- <div className={styles.perk}>
151
- <div className={styles.icon}>
152
- <img src={lightning} alt="Lightning icon" />
153
- </div>
154
- <h3>Reactive Runtime</h3>
155
- <span>
156
- The Reactive Runtime evaluates as-you-type, directly in your
157
- browser.
158
- </span>
159
- </div>
160
-
161
- <div className={styles.perk}>
162
- <div className={styles.icon}>
163
- <img src={npm} alt="NPM logo" />
164
- </div>
165
- <h3>Full ecosystem</h3>
166
- <span>Built-in support for TypeScript, React, NPM and more.</span>
167
- </div>
168
-
169
- <div className={styles.perk}>
170
- <div className={styles.icon}>
171
- <img src={globe} alt="Globe icon" />
172
- </div>
173
- <h3>Collaborate</h3>
174
- <span>Share your notebooks and collaborate in real-time.</span>
175
- </div>
176
- </div>
177
- </section> */ }
178
134
< div className = { styles . section_separator } role = "separator" > </ div >
179
135
< section className = { styles . storySection + " " + styles . sdf } >
180
136
< div className = { styles . content + " " + styles . story } >
@@ -185,7 +141,7 @@ export const StartScreen = observer((props: { sessionStore: SessionStore }) => {
185
141
thereby, less transparent and inclusive.
186
142
</ p >
187
143
< p >
188
- We want to empower the next generation of makers by creating a
144
+ We want to empower the next generation of makers by embedding a
189
145
programming environment that's Live, Simple and Fun to use.
190
146
</ p >
191
147
</ div >
@@ -228,15 +184,57 @@ export const StartScreen = observer((props: { sessionStore: SessionStore }) => {
228
184
< img src = { intro } alt = "TypeCell Demo" />
229
185
</ div >
230
186
< div className = { "" } >
231
- < h4 > Join our journey </ h4 >
187
+ < h4 > Join the TypeCell community </ h4 >
232
188
< p >
233
- Software development is becoming more and more complex and
234
- thereby, less transparent .
189
+ We're just getting started, and invite you to shape this journey
190
+ together .
235
191
</ p >
236
192
< p >
237
- We want to empower the next generation of makers by creating a
238
- programming environment that's Live, Simple and Fun to use .
193
+ Create your own workspace and join the community on Discord to
194
+ share your thoughts, or contribute to the project on GitHub .
239
195
</ p >
196
+ < p >
197
+ Dive into the sneak-peeks below to check out some features we
198
+ plan to work on next:
199
+ </ p >
200
+ </ div >
201
+ </ div >
202
+ < div className = { styles . perks + " " + styles . content } >
203
+ < div className = { styles . perk } >
204
+ < h3 > AI Integration</ h3 >
205
+ < span >
206
+ An AI-programmer that codes live alongside you, ensuring you
207
+ always remain in control.
208
+ < br />
209
+ < a
210
+ href = "https://twitter.com/YousefED/status/1599805936280907776"
211
+ target = "_blank"
212
+ rel = "noreferrer" >
213
+ Preview experiment
214
+ </ a >
215
+ </ span >
216
+ </ div >
217
+ < div className = { styles . perk } >
218
+ < h3 > Plugins & Shareable Blocks</ h3 >
219
+ < span >
220
+ Extend the TypeCell environment with Plugins and custom
221
+ shareable Blocks.
222
+ < br />
223
+ < a
224
+ href = "https://twitter.com/YousefED/status/1677342430545301504"
225
+ target = "_blank"
226
+ rel = "noreferrer" >
227
+ Preview experiment
228
+ </ a >
229
+ </ span >
230
+ </ div >
231
+ < div className = { styles . perk } >
232
+ < h3 > Instant deploys</ h3 >
233
+ < span >
234
+ With just a single click, build and deploy TypeCell pages,
235
+ simplifying the process of creating and sharing interactive
236
+ websites.
237
+ </ span >
240
238
</ div >
241
239
</ div >
242
240
</ section >
0 commit comments