Extract npm deps hash calculation to a separate command

Caption tag can only reside in specific context, this change

makes it more generic, so it can be used freely

app/frontend/src/components/CV/Skills.tsx

@@ -66,7 +66,7 @@ const otherSkills: OtherSkill[] = [
   {
     title: "Some of the relevant Frameworks/Tooling",
     description:
-      "Terraform, Prometheus, Grafana, React, Webpack, Rollup, Esbuild, deep understanding of Git",
+      "Terraform, Prometheus, Grafana, Nix shell, React, Webpack, Rollup, Esbuild, deep understanding of Git",
   },
   {
     title: "Software Development",

app/frontend/src/components/Navigation/MainNavigation.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useRef } from "react";
 import { defineMessages, useIntl } from "react-intl";
 
 import { CONTACT_EMAIL, CONTACT_PHONE } from "../../config/environment";
@@ -30,10 +30,85 @@ const messages = defineMessages({
   },
 });
 
+const getTopOffset = (input: HTMLElement) => {
+  let el: HTMLElement | Element | null = input;
+  let o = 0;
+  do {
+    if (!(el instanceof HTMLElement)) {
+      break;
+    }
+
+    if (!isNaN(el.offsetTop)) {
+      o += el.offsetTop;
+    }
+  } while ((el = el.offsetParent));
+
+  return o;
+};
+
 const MainNavigation: React.FC = () => {
   const intl = useIntl();
+
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const d = ref.current;
+    if (!d) {
+      return;
+    }
+
+    let { height } = d.getBoundingClientRect();
+
+    const ro = new ResizeObserver((entries) => {
+      if (entries[0]) {
+        height = entries[0].contentRect.height;
+      }
+    });
+
+    ro.observe(d);
+
+    let scrollPrev = window.scrollY;
+
+    const listener = () => {
+      const down = scrollPrev < window.scrollY;
+      scrollPrev = window.scrollY;
+      const top = getTopOffset(d);
+
+      if (window.innerHeight > height) {
+        d.style.marginTop = `${Math.max(window.scrollY, 0)}px`;
+        return;
+      }
+
+      if (down) {
+        const delta = top + height;
+        const wDelta = window.scrollY + window.innerHeight;
+
+        const diff = wDelta - delta;
+        if (diff > 0) {
+          const sizeDelta = Math.min(window.innerHeight - height, 0);
+          d.style.marginTop = `${Math.max(top + diff + sizeDelta, 0)}px`;
+        }
+      } else {
+        const delta = top;
+        const wDelta = window.scrollY;
+
+        const diff = wDelta - delta;
+        if (diff < 0) {
+          d.style.marginTop = `${Math.max(top + diff, 0)}px`;
+        }
+      }
+    };
+
+    window.addEventListener("scroll", listener);
+
+    return () => {
+      window.removeEventListener("scroll", listener);
+      ro.disconnect();
+    };
+  }, []);
+
   return (
-    <>
+    <div ref={ref}>
       <NavigationHeadline>
         {intl.formatMessage(messages.contact)}
       </NavigationHeadline>
@@ -42,11 +117,11 @@ const MainNavigation: React.FC = () => {
 
       <Contact email={CONTACT_EMAIL} phoneNumber={CONTACT_PHONE} />
 
-      <NavigationHeadline to="#objective">
+      <NavigationHeadline href="#objective">
         {intl.formatMessage(messages.objective)}
       </NavigationHeadline>
 
-      <NavigationHeadline to="#skills">
+      <NavigationHeadline href="#skills">
         {intl.formatMessage(messages.topSkills)}
       </NavigationHeadline>
 
@@ -63,7 +138,7 @@ const MainNavigation: React.FC = () => {
 
       <Spacer spacing={0} withDivider />
 
-      <NavigationHeadline to="#certifications">
+      <NavigationHeadline>
         {intl.formatMessage(messages.certifications)}
       </NavigationHeadline>
 
@@ -76,10 +151,10 @@ const MainNavigation: React.FC = () => {
 
       <Spacer spacing={0} withDivider />
 
-      <NavigationHeadline to="#experience">
+      <NavigationHeadline href="#experience">
         {intl.formatMessage(messages.experience)}
       </NavigationHeadline>
-    </>
+    </div>
   );
 };
 

app/frontend/src/components/Navigation/NavigationHeadline.tsx

@@ -15,17 +15,25 @@ const Link = styled(RouterLink)({
   textDecoration: "none",
 });
 
-type NavigationHeadlineProps = Partial<Pick<RouterLinkProps, "to">>;
+type NavigationHeadlineProps =
+  | (Partial<Pick<RouterLinkProps, "to">> & {
+      href?: undefined;
+    })
+  | {
+      href?: string;
+      to?: undefined;
+    };
 
 const NavigationHeadline: React.FC<
   React.PropsWithChildren<NavigationHeadlineProps>
 > = (props) => {
-  const { children, to } = props;
+  const { children, href, to } = props;
 
   return (
     <Headline>
       {to && <Link to={to}>{children}</Link>}
-      {!to && children}
+      {href && <a href={href}>{children}</a>}
+      {!to && !href && children}
     </Headline>
   );
 };

app/frontend/src/components/common/Text/Caption.tsx

@@ -1,6 +1,6 @@
 import styled from "@emotion/styled";
 
-const Caption = styled("caption")(({ theme }) => ({
+const Caption = styled("div")(({ theme }) => ({
   color: theme.palette.text.secondary,
   fontSize: "0.75rem",
   lineHeight: 1.5,

app/frontend/src/views/Dashboard.tsx

@@ -55,7 +55,7 @@ const Dashboard: React.FC = () => {
         <Summary />
       </Content>
 
-      <div id="experience" />
+      <div id="skills" />
       <Spacer withDivider />
 
       <Headline level={2}>{intl.formatMessage(messages.skillsTitle)}</Headline>

default.nix

@@ -47,7 +47,7 @@ let
       cp -a dist $out
     '';
     npmInstallFlags = "--no-audit --no-progress --no-fund";
-    npmDepsHash = "sha256-dnUbw0kfAA50ZaQ91q/fC+gZhAGNo6vrSQBz6Qf2ngo=";
+    npmDepsHash = "sha256-p4rTpy0t8aajbubvtF1TA83/FFqvfKEOPBb5T0ZRfQY=";
     npmPackFlags = [ "--ignore-scripts" ];
   };
 
@@ -65,7 +65,7 @@ let
     CGO_ENABLED = 0;
     ldflags = "-s -w -X gopkg.c3c.cz/cv/app/server/internal/version.Tag=${version} -X gopkg.c3c.cz/cv/app/server/internal/version.Commit=${rev} -X gopkg.c3c.cz/cv/app/server/internal/version.commitTime=${commitTime} -X gopkg.c3c.cz/cv/app/server/internal/version.repoUrl=${repoUrl}";
     subPackages = [ "app/server" ];
-    vendorSha256 = "sha256-BkwXD8n62+p639vTLwXpCiY8cqYtCjWxaa5tuw78u5g=";
+    vendorSha256 = "sha256-44xcyVk5KcurQLkVJv1MeAj+Pfcu53664pvVgHdyv3E=";
     overrideModAttrs = (_: {
       impureEnvVars = pkgs.lib.fetchers.proxyImpureEnvVars ++ [ "GIT_PROXY_COMMAND" "SOCKS_SERVER" "GOPROXY" ];
     });
@@ -89,6 +89,7 @@ in
       packages = [
         go
         golangci-lint
+        pkgs.prefetch-npm-deps
 
         nodejs
 
@@ -116,6 +117,31 @@ in
           npm --prefix app/frontend run fix
         '';
       }
+      {
+        name = "update-npm-deps-hash";
+        help = "Calculates and updates the npmDepsHash in default.nix";
+        command = ''
+          echo "Calculating npm deps"
+          # STDERR is poluted by the installed nodules, silencing
+          HASH=''$(prefetch-npm-deps ''$PRJ_ROOT/app/frontend/package-lock.json 2> /dev/null)
+          [[ ''$HASH = sha256* ]] && echo "Hash is ''$HASH"
+          [[ ''$HASH != sha256* ]] && echo "Failed" && exit 137
+
+          # Replace the first occurence of npmDepsHash with the new calculated hash in this file
+          sed -i "0,/npmDepsHash =/{s@npmDepsHash = .*@npmDepsHash = \"''$HASH\";@}" ''$PRJ_ROOT/default.nix
+        '';
+      }
+      {
+        name = "pre-commit";
+        help = "Format and fix found issues";
+        command = ''
+          cd ''$PRJ_ROOT
+          golangci-lint run --sort-results --out-format tab --fix
+          npm --prefix ''$PRJ_ROOT/app/frontend run fix
+
+          update-npm-deps-hash
+        '';
+      }
       {
         name = "dev";
         help = "Starts the javascript project in dev";