Merge pull request #25 from lottie/kn/contrib-page

docs: Introduce a `contribute` and update navigation.

changes the "community" header and footer nav to "contribute"
introduces a dedicated page for contribution navigation
added links to repo and google group

Author: kudanai

content/templates/contribute.md

@@ -0,0 +1,23 @@
+---
+title: Contributing to LAC
+date: "2025-05-14T12:01:05.284Z"
+description: "On this page you will find information on how to engage with the Lottie Animation Community and how to contribute to the project."
+image: null
+---
+
+### Contributing to the specification
+
+LAC welcomes contributions and proposals to the specifications from the community.  
+The primary place for contributions is the [lottie-spec](https://github.com/lottie/lottie-spec) repository, where the specification is hosted.
+
+The steps to contribute are as follows:
+
+* [Familiarize yourself with our Contributing Guidelines](https://github.com/lottie/lottie-spec/blob/main/CONTRIBUTING.md).
+* [Open an issue or pull request in the Specifications Repository](https://github.com/lottie/lottie-spec).
+
+### Engaging in Discussions
+
+LAC engages with the community through a variety of channels. Information about these are listed below:
+
+* [As an issue on the specifications repository](https://github.com/lottie/lottie-spec)
+* [LAC Google Group](https://groups.google.com/g/lottie-dev)

src/components/footer.js

@@ -74,8 +74,8 @@ export const Footer = () => {
             </Nav.Link>
           </Nav.Item>
           <Nav.Item>
-            <Nav.Link as={Link} to={ROUTES.community.route} target="_blank">
-              {ROUTES.community.text}
+            <Nav.Link as={Link} to={ROUTES.contribute.route} target="_blank">
+              {ROUTES.contribute.text}
             </Nav.Link>
           </Nav.Item>
           <Nav.Item>

src/components/header.js

@@ -90,8 +90,8 @@ export const Header = () => {
               </Nav.Link>
             </Nav.Item>
             <Nav.Item>
-              <Nav.Link as={Link} to={ROUTES.community.route} target="_blank">
-                {ROUTES.community.text}
+              <Nav.Link as={Link} to={ROUTES.contribute.route} target="_blank">
+                {ROUTES.contribute.text}
               </Nav.Link>
             </Nav.Item>
             <Nav.Item>

src/constants/index.js

@@ -21,7 +21,7 @@ export const ROUTES = {
     text: "Roadmap",
   },
   contribute: {
-    // route: "contribute",
+    route: "/contribute",
     text: "Contribute",
   },
   buttons: {

src/pages/index.js

@@ -91,8 +91,7 @@ const Home = ({ data }) => {
                   size="lg"
                   variant="link"
                   className="mt-4 py-0 fw-semibold text-decoration-none text-primary"
-                  target="_blank"
-                  href={urls?.specRepo || ""}
+                  href={ROUTES.contribute.route || ""}
                 >
                   {ROUTES.contribute.text}
                 </Button>
@@ -151,8 +150,7 @@ const Home = ({ data }) => {
                 as="a"
                 size="lg"
                 className="mt-4"
-                href={urls?.specRepo || ""}
-                target="_blank"
+                href={ROUTES.contribute.route || ""}
               >
                 {ROUTES.contribute.text}
               </Button>

src/templates/contribute.js

@@ -0,0 +1,68 @@
+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 Contribute = ({ 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 Contribute
+
+/**
+ * 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="Contribute"
+    description="Contribute to Lottie Animation Community"
+  />
+)
+
+export const pageQuery = graphql`
+  query ImplementationsPage($id: String!) {
+    page: markdownRemark(id: { eq: $id }) {
+      html
+      frontmatter {
+        title
+        date(formatString: "MMMM DD, YYYY")
+        description
+      }
+    }
+  }
+`