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.

GitHub Repository: sagemathinc/cocalc
 Path: blob/master/src/packages/next/pages/features/slides.tsx
Views: 687
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 Pitch from "components/landing/pitch";

14
import SignIn from "components/landing/sign-in";

15
import { Paragraph, Title } from "components/misc";

16
import A from "components/misc/A";

17
import { Customize } from "lib/customize";

18
import withCustomize from "lib/with-customize";

19
import SlidesImage from "/public/features/slides-sage.png";

20


21
export default function Slides({ customize }) {

22
  return (

23
    <Customize value={customize}>

24
      <Head title="Computational Slides" />

25
      <Layout>

26
        <Header page="features" subPage="slides" />

27
        <Layout.Content>

28
          <Content

29
            landing

30
            body={<Icon name="slides" style={{ fontSize: "100px" }} />}

31
            startup={"Slides"}

32
            title={

33
              "Online Collaborative Slides with Jupyter Code Cells and LaTeX Mathematics"

34
            }

35
            subtitleBelow={true}

36
            subtitle={

37
              <>

38
                Give presentations with code and mathematics using CoCalc Slides

39
              </>

40
            }

41
            image={SlidesImage}

42
            alt={"Collaborative Computational Slides"}

43
          />

44


45
          <Pitch

46
            col1={

47
              <>

48
                <Title level={2}>

49
                  Full featured online collaborative computational slides

50
                </Title>

51
                <Paragraph>

52
                  <ul>

53
                    <li>

54
                      <A href="https://doc.cocalc.com/markdown.html">

55
                        Rich text collaborative markdown editor

56
                      </A>{" "}

57
                      with mathematical LaTeX expressions,

58
                    </li>

59
                    <li>

60
                      Sticky <strong>notes</strong>,

61
                    </li>

62
                    <li>

63
                      Sketching with <strong>pens</strong>,

64
                    </li>

65
                    <li>

66
                      <A href="/features/jupyter-notebook">

67
                        <strong>Jupyter code cells</strong>

68
                      </A>{" "}

69
                      with support for tab completion and interactive widgets,

70
                    </li>

71
                    <li>

72
                      <strong>Chat</strong> conversations with collaborators,

73
                    </li>

74
                    <li>

75
                      Hundreds of <strong>icons</strong>,

76
                    </li>

77
                    <li>

78
                      <strong>Frames</strong> to group objects, and

79
                    </li>

80
                    <li>

81
                      <strong>Stopwatches</strong> and{" "}

82
                      <strong>Countdown timers</strong> to organize and track

83
                      work.

84
                    </li>

85
                  </ul>

86
                </Paragraph>

87
              </>

88
            }

89
            col2={

90
              <>

91
                <Title level={2}>

92
                  Computational Slides with Jupyter cells and more!

93
                </Title>

94
                <Paragraph>

95
                  You can{" "}

96
                  <A href="https://doc.cocalc.com/whiteboard.html#jupyter-cells">

97
                    use <strong>Jupyter notebook code cells</strong>

98
                  </A>{" "}

99
                  with over a dozen supported kernels, a massive library of

100
                  pre-installed software and interactive widgets. You

101
                  <ul>

102
                    <li>

103
                      Use <strong>slides</strong> to organize your presentation

104
                      into sections,

105
                    </li>

106
                    <li>

107
                      <strong>Split your editor</strong> windows to view

108
                      multiple sections of your slides simultaneously,

109
                    </li>

110
                    <li>

111
                      Easily navigate with an{" "}

112
                      <strong>overview map and pages</strong>,

113
                    </li>

114
                    <li>

115
                      Every change that you and your collaborators make is

116
                      recorded via browsable <strong>TimeTravel</strong> and you

117
                      can copy/paste from any point in the history, and

118
                    </li>

119
                    <li>

120
                      <strong>Publish</strong> your slides to{" "}

121
                      <A href="/share">the share server</A>.

122
                    </li>

123
                  </ul>

124
                </Paragraph>

125
              </>

126
            }

127
          />

128
        </Layout.Content>

129
        <div

130
          style={{

131
            color: "#555",

132
            fontSize: "16px",

133
            textAlign: "center",

134
            margin: "20px",

135
          }}

136
        >

137
          <Title level={1}>Now Available!</Title>

138
          <Paragraph>

139
            Try it in any CoCalc project by clicking +New, then clicking

140
            "Slides".

141
            <br />

142
            <br />

143
            We also offer an{" "}

144
            <A href="/features/whiteboard">infinite canvas whiteboard</A> with

145
            similar functionality.

146
            <br />

147
            <SignIn startup={"Slides"} />

148
          </Paragraph>

149
        </div>

150
        <Footer />

151
      </Layout>

152
    </Customize>

153
  );

154
}

155


156
export async function getServerSideProps(context) {

157
  return await withCustomize({ context });

158
}

159


160