Book a Demo!
CoCalc Logo Icon
StoreFeaturesDocsShareSupportNewsAboutPoliciesSign UpSign In
mastodon
GitHub Repository: mastodon/joinmastodon
 Path: blob/main/pages/roadmap.tsx
1006 views
1
import Head from "next/head"

2
import { FormattedMessage, useIntl } from "react-intl"

3
import { InferGetStaticPropsType } from "next"

4
import Markdown from "react-markdown"

5


6
import Hero from "../components/Hero"

7
import Layout from "../components/Layout"

8
import { RoadmapStatus } from "../components/RoadmapStatus"

9
import { withDefaultStaticProps } from "../utils/defaultStaticProps"

10
import { loadRoadmap } from "../utils/roadmap"

11


12
const Roadmap = ({

13
  features,

14
}: InferGetStaticPropsType<typeof getStaticProps>) => {

15
  const intl = useIntl()

16


17
  return (

18
    <Layout>

19
      <div dir="ltr" className="[unicode-bidi:plaintext]">

20
        <Hero homepage safeTextShadow={false} noHeight>

21
          <div className="grid gap-x-gutter gap-y-16 lg:grid-cols-12">

22
            <div className="full-width-bg__inner lg:col-span-5 lg:text-end">

23
              <h1 className="h1 mb-8 lg:pt-16">

24
                <FormattedMessage id="roadmap.title" defaultMessage="Roadmap" />

25
              </h1>

26
              <p className="sh1 lg:mb-11 text-balance">

27
                <FormattedMessage

28
                  id="roadmap.lead"

29
                  defaultMessage="Here's a glimpse of what we're working on"

30
                />

31
              </p>

32
            </div>

33


34
            <div className="max-w-[100vw] text-start lg:col-span-7 grid grid-cols-1 md:grid-cols-[min-content,auto] gap-4">

35
              {features.map(({ data, content }, index) => (

36
                <section

37
                  key={index}

38
                  className="px-3 py-5 bg-white rounded-xl text-black grid grid-cols-subgrid gap-y-2 md:col-span-2 border border-gray-3"

39
                >

40
                  <div className="mt-1">

41
                    <RoadmapStatus status={data.status} />

42
                  </div>

43
                  <h2 className="font-bold text-b1 col-start-2">

44
                    {data.title}

45
                  </h2>

46
                  <div className="col-start-2 flex flex-col gap-1 body-text">

47
                    <Markdown allowedElements={allowedElements}>

48
                      {content}

49
                    </Markdown>

50
                  </div>

51
                </section>

52
              ))}

53
            </div>

54
          </div>

55
        </Hero>

56


57
        <Head>

58
          <title>

59
            {`${intl.formatMessage({

60
              id: "roadmap.page_title",

61
              defaultMessage: "Public Roadmap",

62
            })} - Mastodon`}

63
          </title>

64


65
          <meta

66
            property="og:title"

67
            content={intl.formatMessage({

68
              id: "roadmap.page_title",

69
              defaultMessage: "Public Roadmap",

70
            })}

71
          />

72
          <meta

73
            name="description"

74
            content={intl.formatMessage({

75
              id: "roadmap.page_description",

76
              defaultMessage: "Learn what we are working on in Mastodon",

77
            })}

78
          />

79
          <meta

80
            name="og:description"

81
            content={intl.formatMessage({

82
              id: "roadmap.page_description",

83
              defaultMessage: "Learn what we are working on in Mastodon",

84
            })}

85
          />

86
        </Head>

87
      </div>

88
    </Layout>

89
  )

90
}

91


92
const allowedElements: ReadonlyArray<string> = [

93
  "p",

94
  "strong",

95
  "em",

96
  "a",

97
  "ul",

98
  "ol",

99
  "li",

100
]

101


102
export const getStaticProps = withDefaultStaticProps(async () => {

103
  const features = await loadRoadmap()

104
  return {

105
    props: { features },

106
  }

107
})

108


109
export default Roadmap

110


111