CoCalc -- whiteboard.tsx

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

GitHub Repository: sagemathinc/cocalc
Path: blob/master/src/packages/next/pages/features/whiteboard.tsx
Views: ⁶⁸⁷
1
/*
2
 *  This file is part of CoCalc: Copyright © 2022 Sagemath, Inc.
3
 *  License: MS-RSL – see LICENSE.md for details
4
 */
5

6
import { Layout } from "antd";
7

8
import { Icon } from "@cocalc/frontend/components/icon";
9
import Content from "components/landing/content";
10
import Footer from "components/landing/footer";
11
import Head from "components/landing/head";
12
import Header from "components/landing/header";
13
import Image from "components/landing/image";
14
import Pitch from "components/landing/pitch";
15
import SignIn from "components/landing/sign-in";
16
import { Paragraph, Title } from "components/misc";
17
import A from "components/misc/A";
18
import { Customize } from "lib/customize";
19
import withCustomize from "lib/with-customize";
20
import WhiteboardPostIt from "/public/features/whiteboard-post-it.png";
21
import WhiteboardImage from "/public/features/whiteboard-sage.png";
22

23
export default function Whiteboard({ customize }) {
24
  return (
25
    <Customize value={customize}>
26
      <Head title="Computational Whiteboard" />
27
      <Layout>
28
        <Header page="features" subPage="whiteboard" />
29
        <Layout.Content>
30
          <Content
31
            landing
32
            body={<Icon name="layout" style={{ fontSize: "100px" }} />}
33
            startup={"Whiteboard"}
34
            title={
35
              "Online Collaborative Whiteboard with Jupyter Code Cells and LaTeX Mathematics"
36
            }
37
            subtitleBelow={true}
38
            subtitle={
39
              <>
40
                Sketch out ideas and run Jupyter code cells with CoCalc
41
                Whiteboard
42
              </>
43
            }
44
            image={WhiteboardImage}
45
            alt={"Collaborative Computational Whiteboard"}
46
          />
47

48
          <Pitch
49
            col1={
50
              <>
51
                <Title level={2}>
52
                  Full featured online collaborative computational whiteboard
53
                </Title>
54
                <Paragraph>
55
                  As explained in{" "}
56
                  <A href="https://about.cocalc.com/2022/09/08/all-about-computational-whiteboard/">
57
                    our blog
58
                  </A>{" "}
59
                  and{" "}
60
                  <A href="https://doc.cocalc.com/whiteboard.html">
61
                    documentation
62
                  </A>
63
                  , CoCalc{"'"}s collaborative computational whiteboards support
64
                  an infinite canvas with
65
                </Paragraph>
66
                <Paragraph>
67
                  <ul>
68
                    <li>
69
                      <A href="https://doc.cocalc.com/markdown.html">
70
                        Rich text collaborative markdown editor
71
                      </A>{" "}
72
                      with mathematical LaTeX expressions,
73
                    </li>
74
                    <li>
75
                      Sticky <strong>notes</strong>,
76
                    </li>
77
                    <li>
78
                      Sketching with <strong>pens</strong>,
79
                    </li>
80
                    <li>
81
                      <A href="/features/jupyter-notebook">
82
                        <strong>Jupyter code cells</strong>
83
                      </A>{" "}
84
                      with support for tab completion and interactive widgets,
85
                    </li>
86
                    <li>
87
                      <strong>Chat</strong> conversations with collaborators,
88
                    </li>
89
                    <li>
90
                      Hundreds of <strong>icons</strong>,
91
                    </li>
92
                    <li>
93
                      <strong>Frames</strong> to group objects, and
94
                    </li>
95
                    <li>
96
                      <strong>Stopwatches</strong> and{" "}
97
                      <strong>Countdown timers</strong> to organize and track
98
                      work.
99
                    </li>
100
                  </ul>
101
                </Paragraph>
102
              </>
103
            }
104
            col2={
105
              <>
106
                <Title level={2}>
107
                  A Computational Whiteboard with Jupyter cells and more!
108
                </Title>
109
                <Paragraph>
110
                  You can{" "}
111
                  <A href="https://doc.cocalc.com/whiteboard.html#jupyter-cells">
112
                    use <strong>Jupyter notebook code cells</strong>
113
                  </A>{" "}
114
                  with over a dozen supported kernels, a massive library of
115
                  pre-installed software and interactive widgets. You
116
                  <ul>
117
                    <li>
118
                      Create <strong>edges</strong> between all objects,
119
                    </li>
120
                    <li>
121
                      Use <strong>frames</strong> to organize the whiteboard
122
                      into sections,
123
                    </li>
124
                    <li>
125
                      <strong>Split your editor</strong> windows to view
126
                      multiple parts of the whiteboard simultaneously,
127
                    </li>
128
                    <li>
129
                      Easily navigate with an <strong>overview map</strong> with
130
                      two preview modes,
131
                    </li>
132
                    <li>
133
                      Every change you and your collaborators make is recorded
134
                      via browsable <strong>TimeTravel</strong> and you can
135
                      copy/paste from any point in the history, and
136
                    </li>
137
                    <li>
138
                      <strong>Publish</strong> your whiteboards to{" "}
139
                      <A href="/share">the share server</A>.
140
                    </li>
141
                  </ul>
142
                </Paragraph>
143
              </>
144
            }
145
          />
146
        </Layout.Content>
147
        <div
148
          style={{
149
            color: "#555",
150
            fontSize: "16px",
151
            textAlign: "center",
152
            margin: "20px",
153
          }}
154
        >
155
          <Title level={1}>Now Available!</Title>
156
          <Paragraph style={{ fontSize: "14pt", margin: "15px" }}>
157
            Read much more about the computational whiteboard in{" "}
158
            <A href="https://about.cocalc.com/2022/09/08/all-about-computational-whiteboard/">
159
              our blog
160
            </A>{" "}
161
            and{" "}
162
            <A href="https://doc.cocalc.com/whiteboard.html">
163
              the documentation.
164
            </A>
165
          </Paragraph>
166
          <Paragraph>
167
            Try it in any CoCalc project by clicking +New, then clicking
168
            "Whiteboard".
169
            <br />
170
            <br />
171
            We also offer <A href="/features/slides">
172
              slide presentations
173
            </A>{" "}
174
            with similar functionality.
175
            <br />
176
            <SignIn startup={"Whiteboard"} />
177
            <Image
178
              alt="Screenshot showing whiteboard with post-it notes."
179
              src={WhiteboardPostIt}
180
              style={{ margin: "15px auto", maxWidth: "1512px" }}
181
            />
182
          </Paragraph>
183
        </div>
184
        <Footer />
185
      </Layout>
186
    </Customize>
187
  );
188
}
189

190
export async function getServerSideProps(context) {
191
  return await withCustomize({ context });
192
}
193

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

Product

Resources

Company

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

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