CoCalc -- x11.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/x11.tsx
Views: ⁶⁸⁷
1
/*
2
 *  This file is part of CoCalc: Copyright © 2021 Sagemath, Inc.
3
 *  License: MS-RSL – see LICENSE.md for details
4
 */
5

6
import { Col, Layout, Row } from "antd";
7

8
import { R_IDE } from "@cocalc/util/consts/ui";
9
import Code from "components/landing/code";
10
import Content from "components/landing/content";
11
import Footer from "components/landing/footer";
12
import Head from "components/landing/head";
13
import Header from "components/landing/header";
14
import Image from "components/landing/image";
15
import Info from "components/landing/info";
16
import Pitch, { STYLE_PITCH } from "components/landing/pitch";
17
import SignIn from "components/landing/sign-in";
18
import { Paragraph, Title } from "components/misc";
19
import A from "components/misc/A";
20
import { Customize } from "lib/customize";
21
import withCustomize from "lib/with-customize";
22
import swirlCourse from "/public/features/swirl-course.png";
23
import swirl from "/public/features/swirl_new_large_final.png";
24
import x11Screenshot from "/public/features/x11-01.png";
25
import applications from "/public/features/x11-applications.png";
26
import x11Firefox from "/public/features/x11-firefox.png";
27
import x11Logo from "/public/features/x11-logo.svg";
28

29
const component = "X11 Desktop";
30
const title = `Run ${component} Graphical Linux Applications`;
31

32
export default function X11({ customize }) {
33
  return (
34
    <Customize value={customize}>
35
      <Head title={title} />
36
      <Layout>
37
        <Header page="features" subPage="x11" />
38
        <Layout.Content>
39
          <Content
40
            landing
41
            startup={component}
42
            body={x11Logo}
43
            title={title}
44
            subtitleBelow={true}
45
            subtitle={
46
              <>
47
                <div>
48
                  Run {component} scripts,{" "}
49
                  <A href="/features/jupyter-notebook">Jupyter notebooks</A>, or
50
                  even full graphical applications in a remote {component}{" "}
51
                  environment.
52
                </div>
53
              </>
54
            }
55
            image={x11Screenshot}
56
            alt={"Screenshot of wxMaxima in X11"}
57
            caption={"Using wxMaxima in X11"}
58
          />
59

60
          <Pitch
61
            col1={
62
              <>
63
                <Title level={2}>Run graphical software in your browser</Title>
64
                <Paragraph>
65
                  CoCalc is able to{" "}
66
                  <strong>
67
                    run{" "}
68
                    <A href="https://en.wikipedia.org/wiki/X_Window_System">
69
                      graphical software using X11
70
                    </A>{" "}
71
                    via your browser
72
                  </strong>
73
                  .
74
                </Paragraph>
75
                <Paragraph>
76
                  The application with a graphical user interface runs remotely
77
                  on CoCalc using a virtual display provided by{" "}
78
                  <A href="https://xpra.org/">XPRA</A>.{" "}
79
                </Paragraph>
80
              </>
81
            }
82
            col2={
83
              <>
84
                <Title level={2}>Features</Title>
85
                <Paragraph>
86
                  <ul>
87
                    <li>
88
                      You no longer have to{" "}
89
                      <strong>install and maintain</strong> the applications. In
90
                      particular when you're teaching a class, students just
91
                      have to sign in to CoCalc to get started!
92
                    </li>
93
                    <li>
94
                      These virtual desktops are <strong>persistent</strong> as
95
                      long as your project is running; you can close your
96
                      browser and come back later.
97
                    </li>
98
                    <li>
99
                      More than one person can <strong>collaboratively</strong>{" "}
100
                      interact with the same X11 application at the same time.
101
                    </li>
102
                    <li>
103
                      You can <strong>copy and paste</strong> between your local
104
                      desktop environment and the virtual graphical X11 session.
105
                    </li>
106
                  </ul>
107
                </Paragraph>
108
              </>
109
            }
110
          />
111

112
          <Pitch
113
            col1={
114
              <>
115
                <Title level={2}>Popular Applications</Title>
116
                <Paragraph>
117
                  <strong>Popular applications that are preinstalled</strong>{" "}
118
                  include <A href="http://maxima.sourceforge.net/">Maxima</A>,{" "}
119
                  <A href="https://www.libreoffice.org/">LibreOffice</A>,{" "}
120
                  <A href="https://www.openmodelica.org/">OpenModelica</A>,{" "}
121
                  <A href="https://www.rstudio.com/">{R_IDE}</A>,{" "}
122
                  <A href="https://swirlstats.com/">
123
                    {"{"}swirl{"}"}
124
                  </A>
125
                  , <A href="http://www.xm1math.net/texmaker/">TexMaker</A>, and
126
                  much more …
127
                </Paragraph>
128
                <Paragraph>
129
                  Please check out our comprehensive table of{" "}
130
                  <strong>
131
                    <A href="https://doc.cocalc.com/x11.html#installed-applications">
132
                      installed applications
133
                    </A>
134
                  </strong>{" "}
135
                  for additional details.{" "}
136
                </Paragraph>
137
              </>
138
            }
139
            col2={
140
              <>
141
                <Title level={2}>Documentation/Technical Background</Title>
142
                <Paragraph>
143
                  The{" "}
144
                  <strong>
145
                    <A href="https://doc.cocalc.com/x11.html">
146
                      X11 Documentation
147
                    </A>
148
                  </strong>{" "}
149
                  explains how to use a virtual desktop on CoCalc.
150
                </Paragraph>
151
                <Paragraph>
152
                  Read our{" "}
153
                  <A href="http://blog.sagemath.com/cocalc/2018/11/05/x11.html">
154
                    blog post
155
                  </A>{" "}
156
                  to learn more about this features!{" "}
157
                </Paragraph>
158
              </>
159
            }
160
          />
161

162
          <Row style={STYLE_PITCH}>
163
            <Col
164
              lg={24}
165
              style={{
166
                paddingBottom: "30px",
167
                background: "white",
168
              }}
169
            >
170
              <Image
171
                style={{ width: "100%" }}
172
                src={applications}
173
                alt="Image showing buttons for many X11 Applications in CoCalc"
174
              />
175
            </Col>
176
          </Row>
177

178
          <Info.Heading
179
            description={
180
              "There are many ways to use X11 in CoCalc to complement Jupyter notebooks and other functionality."
181
            }
182
          >
183
            Some ways to use X11 in CoCalc
184
          </Info.Heading>
185

186
          <Info
187
            title="Use R's {swirl} in your web browser"
188
            icon="r"
189
            image={swirlCourse}
190
            anchor="a-swirl"
191
            alt="Using Swirl via X11 to do the basic programming course"
192
            wide
193
          >
194
            <Image
195
              src={swirl}
196
              style={{ width: "100%", marginBottom: "15px" }}
197
              alt="Using Swirl and X11 in CoCalc"
198
            />
199
            <Paragraph>
200
              CoCalc provides a way to use the{" "}
201
              <A href="https://swirlstats.com/">
202
                interactive R tutorial package Swirl
203
              </A>{" "}
204
              in your web browser, even though Swirl doesn't work with Jupyter
205
              notebooks due to its complicated IO model.
206
            </Paragraph>
207
            <Paragraph>
208
              Create an X11 desktop, then in the terminal, type "R", then{" "}
209
              <Code>
210
                options(swirl_courses_dir="~/R/courses",swirl_data_dir="~/R/data")
211
              </Code>{" "}
212
              then
213
              <Code>library("swirl"); swirl()</Code>
214
            </Paragraph>
215
            <Paragraph>
216
              You can use swirl in{" "}
217
              <A href="/features/teaching">teaching a course.</A>
218
            </Paragraph>
219
          </Info>
220

221
          <Info
222
            title="Use Firefox to test a web server"
223
            icon="firefox"
224
            image={x11Firefox}
225
            anchor="a-firefox"
226
            alt="Using Firefox to connect to a local web server"
227
          >
228
            <Paragraph>
229
              You can use Firefox running from within your CoCalc project to
230
              connect to a server running there only listening on localhost.
231
              This avoids any{" "}
232
              <A href="https://doc.cocalc.com/howto/webserver.html">
233
                proxying or url rewriting.
234
              </A>
235
            </Paragraph>
236
            <Paragraph>
237
              Firefox works very well in the X11 graphical desktop on CoCalc.
238
            </Paragraph>
239
          </Info>
240

241
          <SignIn startup={component} />
242
        </Layout.Content>
243
        <Footer />
244
      </Layout>
245
    </Customize>
246
  );
247
}
248

249
export async function getServerSideProps(context) {
250
  return await withCustomize({ context });
251
}
252

253
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.
