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/pages/lang/index.tsx
Views: 791
1
/*

2
 *  This file is part of CoCalc: Copyright © 2024 Sagemath, Inc.

3
 *  License: MS-RSL – see LICENSE.md for details

4
 */

5


6
import { Layout, List, Typography } from "antd";

7


8
import { GetServerSidePropsContext } from "next";

9


10
import { getI18nMessages } from "locales/lib";

11
import { LOCALE, query2locale } from "locales/misc";

12


13
// The I18nProvider is either english by default, or based on the query path: /lang/[locale]

14
import I18nProvider from "next-translate/I18nProvider";

15


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

17
import { LOCALIZATIONS } from "@cocalc/util/i18n";

18


19
import Footer from "components/landing/footer";

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

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

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

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

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

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

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

27


28
function Index({ customize }) {

29
  const { siteName } = customize;

30


31
  const links = LOCALE.map((locale, idx) => {

32
    const l = LOCALIZATIONS[locale];

33
    return {

34
      locale,

35
      content: [

36
        l.flag,

37
        <A key={idx} href={`/${locale}`}>

38
          <strong>{l.native}</strong> – {l.name}

39
        </A>,

40
      ],

41
    };

42
  })

43
    .sort((a, b) =>

44
      LOCALIZATIONS[a.locale].name.localeCompare(LOCALIZATIONS[b.locale].name),

45
    )

46
    .map((item) => item.content);

47


48
  return (

49
    <>

50
      <Head title={`Translations – ${siteName}`} />

51
      <Layout>

52
        <Header />

53
        <Layout.Content style={{ backgroundColor: "white" }}>

54
          <div

55
            style={{

56
              maxWidth: MAX_WIDTH,

57
              margin: "15px auto",

58
              padding: "15px",

59
              backgroundColor: "white",

60
            }}

61
          >

62
            <Title level={1}>

63
              <Icon name="global" /> Translations

64
            </Title>

65
            <Paragraph>

66
              <List

67
                header={

68
                  <>

69
                    <Paragraph>

70
                      We offer a dedicated landing page that provides an

71
                      overview of {siteName}, available in several languages.

72
                      Please note that all other pages are currently available

73
                      only in English – including the{" "}

74
                      <A href={"/"}>main landing page</A>.

75
                    </Paragraph>

76
                    <Paragraph>

77
                      Note: There is an ongoing effort to provide {siteName}'s

78
                      main application in all these languages as well!

79
                    </Paragraph>

80
                  </>

81
                }

82
                dataSource={links}

83
                bordered

84
                renderItem={(item) => (

85
                  <List.Item>

86
                    <Typography.Text mark>{item[0]}</Typography.Text> {item[1]}

87
                  </List.Item>

88
                )}

89
              />

90
            </Paragraph>

91
          </div>

92
          <Footer />

93
        </Layout.Content>

94
      </Layout>

95
    </>

96
  );

97
}

98


99
export default function I18NIndexPage({ customize, locale, messages }) {

100
  return (

101
    <Customize value={customize}>

102
      <I18nProvider lang={locale} namespaces={messages}>

103
        <Index customize={customize} />

104
      </I18nProvider>

105
    </Customize>

106
  );

107
}

108


109
export async function getServerSideProps(context: GetServerSidePropsContext) {

110
  const locale = query2locale(context.query);

111
  const messages = await getI18nMessages(locale);

112


113
  return withCustomize({

114
    context,

115
    props: { locale, messages },

116
  });

117
}

118


119