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/info/doc.tsx
Views: 687
1
import Footer from "components/landing/footer";

2
import Header from "components/landing/header";

3
import Head from "components/landing/head";

4
import { Layout } from "antd";

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

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

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

8
import { Icon } from "@cocalc/frontend/components/icon";

9
import IndexList, { DataSource, Item } from "components/landing/index-list";

10
import { MAX_WIDTH } from "lib/config";

11


12
const dataSource: DataSource = [

13
  {

14
    link: "https://doc.cocalc.com/",

15
    title: "Browse the CoCalc Manual",

16
    logo: "book",

17
    image: "https://doc.cocalc.com/_static/cocalc-doc-logo.svg",

18
    description: (

19
      <>

20
        The reference manual explains the major functionality of CoCalc in

21
        depth. In particular, it contains the{" "}

22
        <A href="https://doc.cocalc.com/teaching-instructors.html">

23
          Instructor Guide

24
        </A>

25
        , which explains how to integrate CoCalc with teaching a course, it

26
        documents{" "}

27
        <A href="https://doc.cocalc.com/project.html">

28
          configuring and using projects in CoCalc

29
        </A>

30
        , explains how to{" "}

31
        <A href="https://doc.cocalc.com/howto/index.html">

32
          install your own software,

33
        </A>

34
        and how to{" "}

35
        <A href="https://doc.cocalc.com/api/">

36
          embed and control CoCalc via the API

37
        </A>

38
        .

39
      </>

40
    ),

41
  },

42
  {

43
    landingPages: true,

44
    link: "https://github.com/sagemathinc/cocalc-desktop#readme",

45
    title: "Install the CoCalc Desktop Application",

46
    logo: "laptop",

47
    description: (

48
      <>

49
        If you're having browser compatibility issues with CoCalc, you can try

50
        installing the{" "}

51
        <A href="https://github.com/sagemathinc/cocalc-desktop#readme">

52
          CoCalc desktop application for Windows and MacOS

53
        </A>

54
        . This is a lightweight application that connects to the main cocalc.com

55
        site, but is completely separate from your web browser.

56
      </>

57
    ),

58
  },

59
  {

60
    landingPages: true,

61
    link: "/pricing/onprem",

62
    title: "Install CoCalc on Your Own Server or Cluster",

63
    logo: "server",

64
    description: (

65
      <>

66
        It is possible to{" "}

67
        <A href="/pricing/onprem">

68
          fully run your own commercially supported instance of CoCalc

69
        </A>{" "}

70
        on anything from your laptop to a large Kubernetes cluster.

71
      </>

72
    ),

73
  },

74
] as DataSource;

75


76
export default function Help({ customize }) {

77
  const { contactEmail } = customize;

78
  let data = dataSource;

79
  if (contactEmail) {

80
    const link = `mailto:${contactEmail}`;

81
    data = [

82
      {

83
        logo: "envelope",

84
        link,

85
        title: (

86
          <>

87
            <b>Email us at {contactEmail}</b>

88
          </>

89
        ),

90
        description: (

91
          <>

92
            If you have a question or problem, please send an email to{" "}

93
            <A href={link}>{contactEmail}</A>. Be as specific as you can. In

94
            particular, include URL's of relevant files!

95
          </>

96
        ),

97
      } as Item,

98
    ].concat(dataSource);

99
  }

100
  return (

101
    <Customize value={customize}>

102
      <Head title="CoCalc Documentation" />

103
      <Layout>

104
        <Header page="info" subPage="doc" />

105
        <Layout.Content

106
          style={{

107
            backgroundColor: "white",

108
          }}

109
        >

110
          <div

111
            style={{

112
              maxWidth: MAX_WIDTH,

113
              margin: "15px auto",

114
              padding: "15px",

115
              backgroundColor: "white",

116
            }}

117
          >

118
            <IndexList

119
              title={

120
                <>

121
                  <Icon name="life-saver" style={{ marginRight: "30px" }} />

122
                  CoCalc - Documentation

123
                </>

124
              }

125
              description={

126
                <>

127
                  There are many ways that you can connect with the broader

128
                  CoCalc community.

129
                </>

130
              }

131
              dataSource={data}

132
            />

133
          </div>

134
          <Footer />

135
        </Layout.Content>

136
      </Layout>

137
    </Customize>

138
  );

139
}

140


141
export async function getServerSideProps(context) {

142
  return await withCustomize({ context });

143
}

144


145