CoCalc Logo Icon
StoreFeaturesDocsShareSupportNewsAboutSign UpSign In
sagemathinc

Real-time collaboration for Jupyter Notebooks, Linux Terminals, LaTeX, VS Code, R IDE, and more,
all in one place. Commercial Alternative to JupyterHub.

GitHub Repository: sagemathinc/cocalc
Path: blob/master/src/packages/next/components/landing/cocalc-com-features.tsx
Views: 923
1
/*
2
* This file is part of CoCalc: Copyright © 2023 Sagemath, Inc.
3
* License: MS-RSL – see LICENSE.md for details
4
*/
5
6
import { Button, Col, Grid, Row } from "antd";
7
import { join } from "path";
8
import { useEffect, useState } from "react";
9
10
import { SOFTWARE_ENVIRONMENT_ICON } from "@cocalc/frontend/project/settings/software-consts";
11
import { DOC_AI } from "@cocalc/util/consts/ui";
12
import { COLORS } from "@cocalc/util/theme";
13
import Path from "components/app/path";
14
import DemoCell from "components/demo-cell";
15
import { AvailableTools, Tool } from "components/landing/available-tools";
16
import Info from "components/landing/info";
17
import { CSS, Paragraph, Text } from "components/misc";
18
import A from "components/misc/A";
19
import ChatGPTHelp from "components/openai/chatgpt-help";
20
import {
21
Testimonial,
22
TestimonialComponent,
23
twoRandomTestimonials,
24
} from "components/testimonials";
25
import basePath from "lib/base-path";
26
import { useCustomize } from "lib/customize";
27
import assignments from "public/features/cocalc-course-assignments-2019.png";
28
import RTC from "public/features/cocalc-real-time-jupyter.png";
29
import ComputeServers from "./compute-servers";
30
import { LANDING_HEADER_LEVEL } from "./constants";
31
32
// NOTE: This component is only rendered if the onCoCalcCom customization variable is "true"
33
export function CoCalcComFeatures() {
34
const {
35
siteName = "CoCalc",
36
openaiEnabled,
37
sandboxProjectId,
38
jupyterApiEnabled,
39
shareServer = false,
40
onCoCalcCom,
41
} = useCustomize();
42
const width = Grid.useBreakpoint();
43
44
// to avoid next-js hydration errors
45
const [testimonials, setTestimonials] =
46
useState<[Testimonial, Testimonial]>();
47
48
useEffect(() => {
49
setTestimonials(twoRandomTestimonials());
50
}, []);
51
52
function renderCollaboration(): JSX.Element {
53
return (
54
<Info
55
level={LANDING_HEADER_LEVEL}
56
title="Realtime Collaboration Using Your Favorite Tools"
57
icon="users"
58
image={RTC}
59
anchor="a-realtimesync"
60
alt={"Two browser windows editing the same Jupyter notebook"}
61
style={{ backgroundColor: COLORS.ANTD_BG_BLUE_L }}
62
belowWide={true}
63
icons={[
64
{ icon: "jupyter", link: "/features/jupyter-notebook" },
65
{ icon: "tex", title: "LaTeX", link: "/features/latex-editor" },
66
{ icon: "slides", title: "Whiteboard", link: "/features/whiteboard" },
67
]}
68
>
69
<Paragraph>
70
With {siteName}, you can easily collaborate with colleagues, students,
71
and friends to edit computational documents. We support{" "}
72
<A href={"/features/jupyter-notebook"}>
73
<strong>Jupyter Notebooks</strong>
74
</A>
75
, <A href={"/features/latex-editor"}>LaTeX files</A>,{" "}
76
<A href="/features/sage">SageMath Worksheets</A>,{" "}
77
<A href={"/features/whiteboard"}>Computational Whiteboards</A>, and
78
much more. We have an{" "}
79
<A href={"https://doc.cocalc.com/why.html#open-world-approach"}>
80
open world approach
81
</A>{" "}
82
giving users as much flexibility in choosing software and hardware as
83
possible.
84
</Paragraph>
85
86
<Paragraph>
87
You and your collaborators use the same per-project environment, which
88
provides consistent results, synchronized file changes, and automatic
89
revision history so that you can go back in time when you need to
90
discover what changed and when. {renderShareServer()}
91
</Paragraph>
92
93
<Paragraph>
94
Forget the frustration of sending files back and forth between your
95
collaborators, wasting time reviewing changes, and merging documents.{" "}
96
<A href={"/auth/sign-up"}>Get started with {siteName} today.</A>
97
</Paragraph>
98
</Info>
99
);
100
}
101
102
function renderTeaching() {
103
return (
104
<Info
105
level={LANDING_HEADER_LEVEL}
106
title="Integrated Course Management System"
107
icon="graduation-cap"
108
image={assignments}
109
anchor="a-teaching"
110
alt={"Two browser windows editing the same Jupyter notebook"}
111
style={{ backgroundColor: COLORS.ANTD_BG_BLUE_L }}
112
icons={[
113
{
114
icon: "users",
115
title: "Course Management",
116
link: "https://doc.cocalc.com/teaching-instructors.html",
117
},
118
{
119
icon: "graduation-cap",
120
title: "NBGrader",
121
link: "https://doc.cocalc.com/teaching-nbgrader.html",
122
},
123
{ icon: "slides", title: "Slides", link: "/features/whiteboard" },
124
]}
125
>
126
<Paragraph>
127
You can think of {siteName} as{" "}
128
<Text strong>virtual computer lab</Text> in the cloud. It takes away
129
the pain of teaching scientific software.
130
</Paragraph>
131
<Paragraph>
132
<Text strong>Hassle-free assignments</Text>: {siteName} keeps all
133
files well organized! Due to real-time synchronization you never have
134
to deal with multiple versions of the same file. There is even support
135
for{" "}
136
<A href={"https://doc.cocalc.com/teaching-nbgrader.html"}>
137
automated grading via NBGrader
138
</A>
139
.
140
</Paragraph>
141
<Paragraph>
142
<Text strong>Pre-installed Software</Text> like in a computer lab,{" "}
143
<A href={"/software"}>all software you need</A> is already installed
144
and ready to use.
145
</Paragraph>
146
<Paragraph>
147
<Text strong>Real-time Collaboration</Text> allows you to virtually
148
look students over their shoulders. You can check their work directly
149
and help them by editing the file or using side-chat communication.
150
</Paragraph>
151
<Paragraph>
152
<Button
153
onClick={() =>
154
(window.location.href = join(basePath, "/features/teaching"))
155
}
156
>
157
More about teaching on {siteName}
158
</Button>
159
</Paragraph>
160
</Info>
161
);
162
}
163
164
function renderSandbox() {
165
if (!sandboxProjectId) return;
166
return (
167
<Info
168
level={LANDING_HEADER_LEVEL}
169
title={<>The Public {siteName} Sandbox</>}
170
icon="share-square"
171
anchor="a-sandbox"
172
style={{ backgroundColor: COLORS.GRAY_LLL }}
173
>
174
<Path
175
style={{ marginBottom: "15px" }}
176
project_id={sandboxProjectId}
177
description="Public Sandbox"
178
/>
179
</Info>
180
);
181
}
182
183
function renderShareServer() {
184
if (!shareServer) return;
185
186
return (
187
<>
188
{" "}
189
You can even publish your {siteName} creations to share with anyone via
190
the built-in <A href={"/share/public_paths/page/1"}>share server</A>.
191
</>
192
);
193
}
194
195
function renderMore(): JSX.Element {
196
const text = {
197
software: `All available software`,
198
whiteboard: `Computational whiteboard`,
199
features: `Features overview`,
200
};
201
const software = (
202
<Paragraph style={{ textAlign: "center" }}>
203
<Button
204
onClick={() => (window.location.href = join(basePath, "/software"))}
205
title={text.software}
206
>
207
{text.software}
208
</Button>
209
</Paragraph>
210
);
211
const whiteboard = (
212
<Paragraph style={{ textAlign: "center" }}>
213
<Button
214
onClick={() =>
215
(window.location.href = join(basePath, "/features/whiteboard"))
216
}
217
title={text.whiteboard}
218
>
219
{text.whiteboard}
220
</Button>
221
</Paragraph>
222
);
223
const features = (
224
<Paragraph style={{ textAlign: "center" }}>
225
<Button
226
onClick={() => (window.location.href = join(basePath, "/features"))}
227
title={text.features}
228
>
229
{text.features}
230
</Button>
231
</Paragraph>
232
);
233
return (
234
<Info
235
level={LANDING_HEADER_LEVEL}
236
title="Much More …"
237
icon="wrench"
238
anchor="more"
239
style={{ backgroundColor: COLORS.YELL_LLL }}
240
>
241
<Row>
242
<Col md={8}>
243
<Tool
244
icon={SOFTWARE_ENVIRONMENT_ICON}
245
href="/software"
246
title="Available Software"
247
alt="Available Software"
248
>
249
<Paragraph>
250
{siteName} comes with a variety of software pre-installed,
251
including
252
<A href={"/features/python"}>Python</A>,{" "}
253
<A href={"/features/sage"}>SageMath</A>,{" "}
254
<A href={"/features/r-statistical-software"}>R</A> and{" "}
255
<A href={"/features/julia"}>Julia</A> . You can{" "}
256
<A
257
href={"https://doc.cocalc.com/howto/install-python-lib.html"}
258
>
259
install additional software
260
</A>{" "}
261
directly in your project as well.
262
</Paragraph>
263
{!width.md && software}
264
</Tool>
265
</Col>
266
<Col md={8}>
267
<Tool
268
icon="layout"
269
href="/features/whiteboard"
270
title="Computational Whiteboard"
271
alt="Computational Whiteboard"
272
>
273
<Paragraph>
274
Use a full featured collaborative whiteboard – with support for
275
Jupyter notebook cells – to express and share your ideas.
276
</Paragraph>
277
{!width.md && whiteboard}
278
</Tool>
279
</Col>
280
<Col md={8}>
281
<Tool
282
icon="wrench"
283
href="/features"
284
alt="Features"
285
title="Feature Overview"
286
>
287
<Paragraph>
288
{siteName} offers a variety of features to make your life
289
easier. You can find a list of all features{" "}
290
<A href="/features">here</A>.
291
</Paragraph>
292
{!width.md && features}
293
</Tool>
294
</Col>
295
{width.md && (
296
<>
297
<Col md={8}>{software}</Col>
298
<Col md={8}>{whiteboard}</Col>
299
<Col md={8}>{features}</Col>
300
</>
301
)}
302
</Row>
303
</Info>
304
);
305
}
306
307
function renderAvailableProducts(): JSX.Element {
308
const txtCol = COLORS.GRAY_LL;
309
const toolCol = "white";
310
311
const link: CSS = {
312
color: "white",
313
fontWeight: "bold",
314
} as const;
315
316
const bottom: CSS = {
317
color: txtCol,
318
textAlign: "center",
319
fontSize: "150%",
320
} as const;
321
322
const urlProducts = "/pricing/products";
323
const urlCourses = "/pricing/courses";
324
const urlOnprem = "/pricing/onprem";
325
326
const productsLink = (
327
<Paragraph style={bottom}>
328
<Button
329
ghost
330
size="large"
331
style={{ fontWeight: "bold" }}
332
onClick={() => (window.location.href = join(basePath, urlProducts))}
333
title={"Products Overview"}
334
>
335
Products Overview
336
</Button>
337
</Paragraph>
338
);
339
340
const courseLink = (
341
<Paragraph style={bottom}>
342
<Button
343
ghost
344
size="large"
345
style={{ fontWeight: "bold" }}
346
onClick={() => (window.location.href = join(basePath, urlCourses))}
347
title={"Course Licenses"}
348
>
349
Course Licenses
350
</Button>
351
</Paragraph>
352
);
353
354
const onpremLink = (
355
<Paragraph style={bottom}>
356
<Button
357
ghost
358
size="large"
359
style={{ fontWeight: "bold" }}
360
onClick={() => (window.location.href = join(basePath, urlOnprem))}
361
title={"On-Premises Offerings"}
362
>
363
On-Premises Offerings
364
</Button>
365
</Paragraph>
366
);
367
368
return (
369
<Info
370
level={LANDING_HEADER_LEVEL}
371
title="Solutions"
372
icon="shopping-cart"
373
anchor="products"
374
style={{ backgroundColor: COLORS.BLUE_D }}
375
textStyle={{ color: COLORS.GRAY_LL }}
376
>
377
<Row>
378
<Col md={8}>
379
<Tool
380
icon="server"
381
href={urlProducts}
382
title="Online Service with GPUs"
383
alt="Online Service"
384
textStyle={{ color: toolCol }}
385
>
386
<Paragraph style={{ color: txtCol }}>
387
You can start using {siteName} online for free today.{" "}
388
<A href={"/auth/sign-up"} style={link}>
389
Create an account
390
</A>
391
, open your{" "}
392
<A style={link} href={"https://doc.cocalc.com/trial.html"}>
393
trial project
394
</A>{" "}
395
and{" "}
396
<A
397
style={link}
398
href={"https://doc.cocalc.com/getting-started.html"}
399
>
400
start exploring
401
</A>{" "}
402
{siteName}.
403
</Paragraph>
404
<Paragraph style={{ color: txtCol }}>
405
Upgrade your projects to unlock internet access, better hosting
406
quality, and other upgrades by purchasing a{" "}
407
<A style={link} href={"/store/site-license"}>
408
license
409
</A>{" "}
410
or upgrade via{" "}
411
<A style={link} href={"https://doc.cocalc.com/paygo.html"}>
412
pay-as-you-go
413
</A>{" "}
414
and use GPUs and HPC resources via{" "}
415
<A
416
style={link}
417
href={"https://doc.cocalc.com/compute_server.html"}
418
>
419
compute servers
420
</A>
421
!
422
</Paragraph>
423
{!width.md && productsLink}
424
</Tool>
425
</Col>
426
<Col md={8}>
427
<Tool
428
icon="graduation-cap"
429
href={urlCourses}
430
title="Teach a Course"
431
alt="Teach a Course"
432
textStyle={{ color: toolCol }}
433
>
434
<Paragraph style={{ color: txtCol }}>
435
You can{" "}
436
<A style={link} href="/features/teaching">
437
teach a course
438
</A>{" "}
439
on {siteName} online!
440
</Paragraph>
441
<Paragraph style={{ color: txtCol }}>
442
The{" "}
443
<A style={link} href="pricing/courses">
444
course license options
445
</A>{" "}
446
are very flexible: they range from small professional training
447
up to large university courses. The students can pay {siteName}{" "}
448
directly, or you can pay on their behalf, and it is easy to
449
change a license at any time if you need more resources or the
450
number of students changes.
451
</Paragraph>
452
{!width.md && courseLink}
453
</Tool>
454
</Col>
455
<Col md={8}>
456
<Tool
457
icon="network-wired"
458
href={urlOnprem}
459
alt="On-Premises"
460
title={"On-Premises"}
461
textStyle={{ color: toolCol }}
462
>
463
<Paragraph style={{ color: txtCol }}>
464
It is very easy to run {siteName} on your own computer or
465
cluster. The available options are:
466
<ol>
467
<li>
468
Make your computer available in a {siteName} project via an{" "}
469
<A
470
style={link}
471
href={"https://doc.cocalc.com/compute_server.html"}
472
>
473
on-prem compute server
474
</A>
475
.
476
</li>
477
<li>
478
Deploy a highly scalable variant of {siteName} on your{" "}
479
<strong>Kubernetes cluster</strong> via{" "}
480
<A style={link} href="https://onprem.cocalc.com/">
481
<strong>CoCalc OnPrem</strong>
482
</A>
483
.
484
</li>
485
</ol>
486
</Paragraph>
487
{!width.md && onpremLink}
488
</Tool>
489
</Col>
490
{width.md && (
491
<>
492
<Col md={8}>{productsLink}</Col>
493
<Col md={8}>{courseLink}</Col>
494
<Col md={8}>{onpremLink}</Col>
495
</>
496
)}
497
</Row>
498
</Info>
499
);
500
}
501
502
function renderTestimonials() {
503
if (!testimonials) return;
504
const [t1, t2] = testimonials;
505
return (
506
<Info
507
level={LANDING_HEADER_LEVEL}
508
title="Testimonials"
509
icon="comment"
510
anchor="testimonials"
511
style={{ backgroundColor: COLORS.BS_GREEN_LL }}
512
>
513
<Row gutter={[15, 15]}>
514
<Col md={12}>
515
<TestimonialComponent testimonial={t1} />
516
</Col>
517
<Col md={12}>
518
<TestimonialComponent testimonial={t2} />
519
</Col>
520
<Col md={24} style={{ textAlign: "center" }}>
521
<Button
522
onClick={() =>
523
(window.location.href = join(basePath, "/testimonials"))
524
}
525
title={`More testimonials from users of ${siteName}`}
526
>
527
More testimonials
528
</Button>
529
</Col>
530
</Row>
531
</Info>
532
);
533
}
534
535
function renderChatGPT() {
536
if (!openaiEnabled || !onCoCalcCom) return;
537
return (
538
<Info
539
level={LANDING_HEADER_LEVEL}
540
title="Extensive Generative AI Integration"
541
icon="robot"
542
imageComponent={<ChatGPTHelp size="large" tag={"index"} />}
543
anchor="a-realtimesync"
544
alt={"Two browser windows editing the same Jupyter notebook"}
545
style={{ backgroundColor: COLORS.ANTD_BG_BLUE_L }}
546
>
547
<Paragraph>
548
A wide range of{" "}
549
<A href={DOC_AI}>Generative AI Large Language Models</A> are highly
550
integrated into {siteName}. This helps you{" "}
551
<A href={`${DOC_AI}#jupyter-notebooks`}>fix errors</A>, generate code
552
or LaTeX snippets, summarize documents, and much more.
553
</Paragraph>
554
</Info>
555
);
556
}
557
558
function renderDemoCell() {
559
if (!jupyterApiEnabled) return;
560
561
return (
562
<Info
563
level={LANDING_HEADER_LEVEL}
564
title="Many Programming Languages"
565
icon="flow-chart"
566
imageComponent={<DemoCell tag={"sage"} style={{ width: "100%" }} />}
567
anchor="a-realtimesync"
568
alt={"Two browser windows editing the same Jupyter notebook"}
569
style={{ backgroundColor: COLORS.YELL_LLL }}
570
icons={[
571
{ icon: "julia", link: "/features/julia" },
572
{ icon: "linux", link: "/features/linux" },
573
{ icon: "python", link: "/features/python" },
574
{ icon: "r", link: "/features/r-statistical-software" },
575
{ icon: "sagemath", title: "SageMath", link: "/features/sage" },
576
{ icon: "octave", link: "/features/octave" },
577
]}
578
>
579
<Paragraph>
580
{siteName} supports many{" "}
581
<A href={"/software"}>programming languages</A>. Edit the demo cell on
582
the left and evaluate it by pressing "Run". You can also select a
583
different "kernel", i.e. the programming language that is used to
584
evaluate the cell.
585
</Paragraph>
586
</Info>
587
);
588
}
589
590
return (
591
<>
592
<ComputeServers />
593
{renderChatGPT()}
594
{renderDemoCell()}
595
{renderSandbox()}
596
{renderCollaboration()}
597
<AvailableTools style={{ backgroundColor: COLORS.YELL_LLL }} />
598
{renderTeaching()}
599
{renderMore()}
600
{renderTestimonials()}
601
{renderAvailableProducts()}
602
</>
603
);
604
}
605
606