add footer

Makefile

@@ -5,6 +5,7 @@ run-dev:
 	GIT_BUILD_TAG=${BUILD_TAG} \
 	GIT_BRANCH=$(shell git rev-parse --abbrev-ref HEAD) \
 	GIT_REVISION=$(shell git rev-parse --short HEAD) \
+	GIT_REPO=$(shell git config --get remote.origin.url) \
 	PATH_PREFIX=/datalab \
 	PREFIX_PATHS=true \
 	yarn start

gatsby-config.js

@@ -9,11 +9,19 @@ console.log("gatsby-config")
 console.log("NODE_ENV", process.env.NODE_ENV)
 console.log("PATH_PREFIX", process.env.PATH_PREFIX)
 console.log("GATSBY_PATH_PREFIX", process.env.GATSBY_PATH_PREFIX)
+console.log("GIT_BUILD_TAG", process.env.GIT_BUILD_TAG)
+console.log("GIT_BRANCH", process.env.GIT_BRANCH)
+console.log("GIT_REVISION", process.env.GIT_REVISION)
+console.log("GIT_REPO", process.env.GIT_REPO)
 
 module.exports = {
   siteMetadata: {
     title: `impresso-datalab`,
     siteUrl: `https://impresso-project.ch/datalab`,
+    gitBuildTag: process.env.GIT_BUILD_TAG,
+    gitBranch: process.env.GIT_BRANCH,
+    gitRevision: process.env.GIT_REVISION,
+    gitRepo: process.env.GIT_REPO,
   },
   pathPrefix: process.env.PATH_PREFIX || "/",
   plugins: [

src/components/Background.css

@@ -74,6 +74,7 @@
   top: calc(50% - var(--circle-size) / 2);
   left: calc(50% - var(--circle-size) / 2);
 
+  will-change: transform;
   transform-origin: center center;
   animation: moveVertical 80s ease infinite;
 
@@ -96,6 +97,7 @@
   left: calc(50% - var(--circle-size) / 2);
 
   transform-origin: calc(50% - 400px);
+  will-change: transform;
   animation: moveInCircle 100s reverse infinite;
 
   opacity: 1;
@@ -116,6 +118,7 @@
   top: calc(50% - var(--circle-size) / 2 - 200px);
   left: calc(50% - var(--circle-size) / 2 + 500px);
 
+  will-change: transform;
   transform-origin: calc(50% + 400px);
   animation: moveInCircle 120s linear infinite;
 

src/components/Footer.js

@@ -0,0 +1,61 @@
+import React from "react"
+import { Link } from "gatsby"
+import { Container, Row, Col } from "react-bootstrap"
+import { useSiteMetadata } from "../hooks"
+import { Github } from "iconoir-react"
+
+const getGithubRepoUrl = (gitRepo, gitRevision) => {
+  // Regular expression to extract the repository path from the gitRepo string
+  const repoRegex = /github\.com[:/](.*)\.git/
+  const repoMatches = gitRepo.match(repoRegex)
+  if (repoMatches && repoMatches.length > 1) {
+    const repoPath = repoMatches[1]
+    return `https://github.com/${repoPath}/commit/${gitRevision}`
+  } else {
+    console.error("Invalid gitRepo format.")
+    return null
+  }
+}
+
+const Footer = () => {
+  const site = useSiteMetadata()
+  const gitRepoUrl = getGithubRepoUrl(site.gitRepo, site.gitRevision)
+
+  console.log("[Footer] render site:", site)
+  return (
+    <footer className="mt-5">
+      <Container>
+        <Row>
+          <Col>{site.title}</Col>
+          <Col>
+            <ul>
+              <li>
+                <Link to="/">impresso-datalab</Link>
+              </li>
+              <li>
+                <Link to="/about">about!</Link>
+              </li>
+            </ul>
+          </Col>
+          <Col>
+            Current version:
+            <br />
+            <a
+              href={gitRepoUrl}
+              target="_blank"
+              rel="noreferrer"
+              title="check github repo"
+            >
+              <Github />
+              <span className="ms-2">
+                {site.gitBuildTag} / {site.gitRevision}
+              </span>
+            </a>
+          </Col>
+        </Row>
+      </Container>
+    </footer>
+  )
+}
+
+export default Footer

src/components/Layout.js

@@ -1,38 +1,18 @@
-import { Link } from "gatsby";
-import React from "react";
-import { Col, Container, Row } from "react-bootstrap";
-import Header from "./Header";
-import { useDataStore } from "../store";
-import Background from "./Background";
+import React from "react"
+import Header from "./Header"
+import Footer from "./Footer"
+import Background from "./Background"
 
 const Layout = ({ children }) => {
-  const isDataReady = useDataStore((state) => state.isReady);
-
-  console.log("[Layout] render");
+  console.log("[Layout] render")
   return (
     <>
       <Header />
       <main>{children}</main>
-      <footer>
-        <Container>
-          <Row>
-            <Col>
-              <ul>
-                <li>
-                  <Link to="/">impresso-datalab</Link>
-                </li>
-                <li>
-                  <Link to="/about">about!</Link>
-                </li>
-              </ul>
-            </Col>
-            <Col>{isDataReady ? "ready" : "loading"}</Col>
-          </Row>
-        </Container>
-      </footer>
+      <Footer />
       <Background />
     </>
-  );
-};
+  )
+}
 
-export default Layout;
+export default Layout

src/hooks.js

@@ -0,0 +1,19 @@
+import { useStaticQuery, graphql } from "gatsby"
+
+export const useSiteMetadata = () => {
+  const { site } = useStaticQuery(graphql`
+    query SiteQuery {
+      site {
+        siteMetadata {
+          title
+          siteUrl
+          gitBuildTag
+          gitBranch
+          gitRevision
+          gitRepo
+        }
+      }
+    }
+  `)
+  return site.siteMetadata
+}

src/notebooks/introduction-to-topic-modeling.mdx

@@ -1,5 +1,7 @@
 ---
-title: 'Introduction to topic modeling'
+title: "Introduction to topic modeling"
 url: https://colab.research.google.com/github/littlecolumns/ds4j-notebooks/blob/master/text-analysis/notebooks/Introduction%20to%20topic%20modeling.ipynb
-author: '@littlecolumns'
+author: "@littlecolumns"
 ---
+
+Make