Merge pull request #7 from lottie/roadmap

First draft of Lottie roadmap page

content/templates/roadmap.md

@@ -0,0 +1,36 @@
+---
+title: Roadmap
+date: "2024-01-4T12:01:05.284Z"
+description: "Summary of released and upcoming feautres covered by the Lottie specification"
+image: null
+---
+
+### v1.0 (September 2024)
+
+The v1.0 specification contains features that are commonly used by current players and that behave in a consistent way. Not all features are currently covered and missing features may be added in future releases.
+
+Features in 1.0 release:
+
+- **Layers** - Shapes, Solids, Images, Precomposition, Null
+- **Shapes** - Rectangle, Ellipse, Path, Polystar
+- **Shape Styles and Modifiers** - Fill, Stroke, Gradient Fill, Gradient Stroke, Trim Path
+- **Shape Grouping** - Group, Transform
+- **Transforms** - Position, Split Position, Rotation, Scale, Opacity, Skew, Skew Axis
+- **Assets** - Precomposition, Image
+- **Time Remap and Stretch**
+- **Masks and Mattes**
+- **Slots**
+
+### v1.1 (H1 2025)
+
+- Contents TBD
+
+### Future Releases
+
+- Player Profiles
+- Text Layers
+- Layer effects
+- Metadata
+- Blend modes
+- Expressions
+- Additional modifiers

src/components/header.js

@@ -62,6 +62,15 @@ export const Header = () => {
                 {ROUTES.implementations.text}
               </Nav.Link>
             </Nav.Item>
+            <Nav.Item>
+              <Nav.Link
+                as={Link}
+                className="text-capitalize"
+                to={ROUTES.roadmap.route}
+              >
+                {ROUTES.roadmap.text}
+              </Nav.Link>
+            </Nav.Item>
             <Nav.Item>
               <Nav.Link as={Link} to={ROUTES.community.route} target="_blank">
                 {ROUTES.community.text}

src/constants/index.js

@@ -2,7 +2,7 @@ export const ROUTES = {
   specification: {
     route: "/specification",
     text: "Specification",
-    text2: 'Read the Spec'
+    text2: "Read the Spec",
   },
   community: {
     route: "/#community",
@@ -16,6 +16,10 @@ export const ROUTES = {
     route: "/news",
     text: "News",
   },
+  roadmap: {
+    route: "/roadmap",
+    text: "Roadmap",
+  },
   contribute: {
     // route: "contribute",
     text: "Contribute",

src/templates/roadmap.js

@@ -0,0 +1,63 @@
+import * as React from "react"
+
+import { graphql } from "gatsby"
+
+import Container from "react-bootstrap/Container"
+import Row from "react-bootstrap/Row"
+import Col from "react-bootstrap/Col"
+
+import Layout from "../components/layout"
+import Seo from "../components/seo"
+
+const Roadmap = ({ data }) => {
+  const { page } = data
+  const { html, frontmatter } = page
+
+  return (
+    <Layout>
+      <section className="bg-primary-subtle">
+        <Container className="py-5">
+          <Row>
+            <Col className="py-5">
+              <h1 className="mb-3 h2">{frontmatter.title || ""}</h1>
+              <h5 className="fw-normal">{frontmatter.description || ""}</h5>
+            </Col>
+          </Row>
+        </Container>
+      </section>
+      <Container>
+        <Row>
+          <Col>
+            <section
+              className="py-5"
+              dangerouslySetInnerHTML={{ __html: html }}
+              itemProp="articleBody"
+            />
+          </Col>
+        </Row>
+      </Container>
+    </Layout>
+  )
+}
+
+export default Roadmap
+
+/**
+ * Head export to define metadata for the page
+ *
+ * See: https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-head/
+ */
+export const Head = () => <Seo title="Roadmap" description="Lottie Roadmap" />
+
+export const pageQuery = graphql`
+  query ImplementationsPage($id: String!) {
+    page: markdownRemark(id: { eq: $id }) {
+      html
+      frontmatter {
+        title
+        date(formatString: "MMMM DD, YYYY")
+        description
+      }
+    }
+  }
+`