roadmap.tsx 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
  1. import BasicPage from "../components/BasicPage"
  2. import Head from "next/head"
  3. import Hero from "../components/Hero"
  4. import { withDefaultStaticProps } from "../utils/defaultStaticProps"
  5. import Layout from "../components/Layout"
  6. import data from "../data/roadmap"
  7. import IssueTimeline from "../components/IssueTimeline"
  8. import LinkButton from "../components/LinkButton"
  9. import { FormattedMessage, useIntl } from "react-intl"
  10. const Roadmap = () => {
  11. const intl = useIntl()
  12. return (
  13. <Layout>
  14. <div dir="ltr" className="[unicode-bidi:plaintext]">
  15. <Hero homepage safeTextShadow={false} noHeight>
  16. <div className="grid gap-x-gutter gap-y-16 lg:grid-cols-12">
  17. <div className="full-width-bg__inner lg:col-span-5 lg:text-end">
  18. <h1 className="h1 mb-8 pt-16">
  19. <FormattedMessage id="roadmap.title" defaultMessage="Roadmap" />
  20. </h1>
  21. <p className="sh1 mb-11">
  22. <FormattedMessage
  23. id="roadmap.lead"
  24. defaultMessage="This is a glimpse into what we're working on and what we're planning to work on."
  25. />
  26. </p>
  27. <div className="flex justify-center lg:justify-end">
  28. <LinkButton
  29. size="large"
  30. href="https://github.com/mastodon/mastodon/issues"
  31. >
  32. <FormattedMessage
  33. id="roadmap.suggest_a_feature"
  34. defaultMessage="Suggest a feature"
  35. />
  36. </LinkButton>
  37. </div>
  38. </div>
  39. <div className="max-w-[100vw] text-start lg:col-span-7">
  40. <IssueTimeline roadmap={data} />
  41. </div>
  42. </div>
  43. </Hero>
  44. <Head>
  45. <title>
  46. {`${intl.formatMessage({
  47. id: "roadmap.page_title",
  48. defaultMessage: "Public Roadmap",
  49. })} - Mastodon`}
  50. </title>
  51. <meta
  52. property="og:title"
  53. content={intl.formatMessage({
  54. id: "roadmap.page_title",
  55. defaultMessage: "Public Roadmap",
  56. })}
  57. />
  58. <meta
  59. name="description"
  60. content={intl.formatMessage({
  61. id: "roadmap.page_description",
  62. defaultMessage: "Learn what we are working on in Mastodon",
  63. })}
  64. />
  65. <meta
  66. name="og:description"
  67. content={intl.formatMessage({
  68. id: "roadmap.page_description",
  69. defaultMessage: "Learn what we are working on in Mastodon",
  70. })}
  71. />
  72. </Head>
  73. </div>
  74. </Layout>
  75. )
  76. }
  77. export const getStaticProps = withDefaultStaticProps()
  78. export default Roadmap