Maintenance 2023/03

.nvmrc

@@ -1 +1 @@
-14
+18

README.md

@@ -1,17 +1,21 @@
 # rare.fi
 
+Blog posts are being fetched from dev.to. [API documentation](https://developers.forem.com/api/v1).
+
 ## Requirements
 
-- nvm
+- node.js >=18.x.x
+- nvm >=9.x.x
 
-## Dev
+## Development
 
 ```
 nvm use
-npm install
+npm i
 npm run dev
 ```
 
-## Build
+## Production build
 
-`npm run build`
+- `npm run build`
+- `npm start`

components/Button.tsx

@@ -15,6 +15,7 @@ type ButtonProps = {
   href?: string;
   style?: CSSProperties;
   label?: string;
+  children?: React.ReactNode;
 };
 
 const Button: React.FC<ButtonProps> = ({
@@ -29,10 +30,13 @@ const Button: React.FC<ButtonProps> = ({
   return (
     <>
       {href ? (
-        <Link aria-label={label} href={href}>
-          <a style={style} className={c("button", kind, className)}>
-            {children}
-          </a>
+        <Link
+          aria-label={label}
+          href={href}
+          style={style}
+          className={c("button", kind, className)}
+        >
+          {children}
         </Link>
       ) : (
         <button

components/CircleButton.tsx

@@ -7,6 +7,7 @@ type CircleButtonProps = {
   className?: string;
   onClick?: () => void;
   label?: string;
+  children: React.ReactNode | string;
 };
 
 const CircleButton: React.FC<CircleButtonProps> = ({

components/ContactUs/ContactUsHeader.tsx

@@ -1,21 +1,43 @@
-import React from "react";
-import { openPopupWidget } from "react-calendly";
+import { useEffect, useState } from "react";
+import { PopupModal } from "react-calendly";
 import Button from "../Button";
 
-export const ContactUsHeader = () => (
-  <section
-    id="contact-us-header"
-    className="col-all layout-grid p-8 mt-64 md:mt-32"
-  >
-    <h2 className="h2-small col-start-2 col-span-4 leading-relaxed md:col-span-6 lg:col-start-1">
-      You have a higher chance to succeed if we work together.
-    </h2>
-    <Button
-      label="Book our first no-obligation chat"
-      onClick={() => openPopupWidget({ url: "https://calendly.com/riku-rare" })}
-      className="mt-10 mb-10 px-12 col-start-2 col-span-3 lg:col-start-1 lg:col-span-5 md:col-span-6 sm:col-span-7"
+export const ContactUsHeader = () => {
+  const [popupOpen, setPopupOpen] = useState(false);
+  const [rootElement, setRootElement] = useState<HTMLElement | null>(null);
+
+  useEffect(() => {
+    const el = document.getElementById("__next");
+    if (el) {
+      setRootElement(el);
+    }
+  }, []);
+
+  return (
+    <section
+      id="contact-us-header"
+      className="col-all layout-grid p-8 mt-64 md:mt-32"
     >
-      Book our first no&#8209;obligation chat
-    </Button>
-  </section>
-);
+      <h2 className="h2-small col-start-2 col-span-4 leading-relaxed md:col-span-6 lg:col-start-1">
+        You have a higher chance to succeed if we work together.
+      </h2>
+      {rootElement && (
+        <>
+          <Button
+            label="Book our first no-obligation chat"
+            onClick={() => setPopupOpen(true)} // openPopupWidget({ url: "https://calendly.com/riku-rare" }
+            className="mt-10 mb-10 px-12 col-start-2 col-span-3 lg:col-start-1 lg:col-span-5 md:col-span-6 sm:col-span-7"
+          >
+            Book our first no&#8209;obligation chat
+          </Button>
+          <PopupModal
+            url="https://calendly.com/riku-rare"
+            onModalClose={() => setPopupOpen(false)}
+            open={popupOpen}
+            rootElement={rootElement}
+          />
+        </>
+      )}
+    </section>
+  );
+};

components/ContactUsSection.tsx

@@ -1,5 +1,4 @@
 import Link from "next/link";
-import React from "react";
 import { c } from "../utils/classnames";
 import Button from "./Button";
 import JourneyCircle from "./JourneyCircle";
@@ -29,7 +28,7 @@ const ContactUs = () => {
         <JourneyCircle className="-ml-6 lg:ml-0">
           <img
             src="/static/journey-1.svg"
-            className="transform translate-x-8 translate-y-8 xl:translate-x-6 xl:translate-y-6 xl:scale-90"
+            className="translate-x-8 translate-y-8 xl:translate-x-6 xl:translate-y-6 xl:scale-90"
             alt="Swift person with a Rare -paper in it's hand"
           />
         </JourneyCircle>
@@ -47,7 +46,7 @@ const ContactUs = () => {
         <JourneyCircle className="inline-flex ">
           <img
             src="/static/journey-2.svg"
-            className="transform scale-135 translate-y-4"
+            className="scale-135 translate-y-4"
             alt="Person running to a futuristic car with a paper in it's hand"
           />
         </JourneyCircle>
@@ -64,7 +63,7 @@ const ContactUs = () => {
         <JourneyCircle className="-mr-6 lg:mr-0">
           <img
             src="/static/journey-3.svg"
-            className="transform translate-y-2"
+            className="translate-y-2"
             alt="Flying hero with a lemon in it's hand"
           />
         </JourneyCircle>
@@ -81,15 +80,13 @@ const ContactUs = () => {
 
       <div className="col-all flex items-center justify-center text-center">
         <Link href="/contact-us">
-          <a>
-            <Button
-              label="Book our first no-obligation chat"
-              className="mt-10"
-              kind="secondary-light"
-            >
-              Book our first no&#8209;obligation chat
-            </Button>
-          </a>
+          <Button
+            label="Book our first no-obligation chat"
+            className="mt-10"
+            kind="secondary-light"
+          >
+            Book our first no&#8209;obligation chat
+          </Button>
         </Link>
       </div>
     </section>

components/CookieConsent.tsx

@@ -1,5 +1,5 @@
 import Link from "next/link";
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import ReactGA from "react-ga";
 import { hotjar } from "react-hotjar";
 import { getItem, setItem } from "../utils/local-storage";
@@ -45,13 +45,12 @@ const CookieConsent = () => {
           experience of our users.
           <p className="mt-0 md:mt-4">
             Find out more about the cookies we use:{" "}
-            <Link href="/privacy">
-              <a
-                target="_blank"
-                className="text-[#34517E] border-b-2 border-gray-500 hover:text-dark-blue"
-              >
-                Cookie &amp; Privacy policy
-              </a>
+            <Link
+              href="/privacy"
+              target="_blank"
+              className="text-[#34517E] border-b-2 border-gray-500 hover:text-dark-blue"
+            >
+              Cookie &amp; Privacy policy
             </Link>
           </p>
         </div>

components/JourneyCircle.tsx

@@ -3,6 +3,7 @@ import { c } from "../utils/classnames";
 
 type CircleProps = {
   className?: string;
+  children?: React.ReactNode | string;
 };
 
 const JourneyCircle: React.FC<CircleProps> = ({ className, children }) => {

components/Nav/NavBar.tsx

@@ -43,17 +43,15 @@ const NavBar: React.FC<{ theme?: "dark" | "light" }> = ({
           userIsScrolled && !menuIsOpen ? "py-4" : "py-16 md:py-6"
         } transition-all duration-300 flex items-center justify-between col-start-2 col-end-8`}
       >
-        <Link href="/">
-          <a className="z-30">
-            <Logo
-              kind={
-                theme === "dark" || userIsScrolled || menuIsOpen
-                  ? "light"
-                  : "dark"
-              }
-              size={userIsScrolled ? "sm" : "md"}
-            />
-          </a>
+        <Link href="/" className="z-30">
+          <Logo
+            kind={
+              theme === "dark" || userIsScrolled || menuIsOpen
+                ? "light"
+                : "dark"
+            }
+            size={userIsScrolled ? "sm" : "md"}
+          />
         </Link>
 
         <section className="space-x-16 text-xl inline-flex lg:hidden">

components/Nav/NavItem.tsx

@@ -1,6 +1,5 @@
-import React from "react";
-import Link from "next/link";
 import { useRouter } from "next/dist/client/router";
+import Link from "next/link";
 import { c } from "../../utils/classnames";
 
 type Props = {
@@ -38,8 +37,8 @@ const NavItem = ({
 
   return (
     <>
-      <Link href={url}>
-        <a className={linkClasses}>{text}</a>
+      <Link href={url} className={linkClasses}>
+        {text}
       </Link>
 
       <style jsx>{`

components/Stories/BlogPostCard.tsx

@@ -20,34 +20,32 @@ const BlogPostCard = ({
   imagePlaceholder,
   href,
 }: StoryProps) => (
-  <Link href={href}>
-    <a className="group block">
-      <div className="mb-2">
-        {imagePlaceholder ? (
-          <AnimatedImage
-            src={image}
-            alt={imageAlt}
-            width={1075}
-            height={425}
-            placeholder="blur"
-            blurDataURL={imagePlaceholder}
-            className="object-cover"
-          />
-        ) : (
-          <AnimatedImage
-            src={image}
-            alt={imageAlt}
-            width={1075}
-            height={425}
-            className="object-cover"
-          />
-        )}
-      </div>
-      {title && <span className="tag text-mid-blue">{title}</span>}
-      <span className="h4 mt-6 sm:mt-3 sm:text-[14px] group-hover:text-action-purple break-words">
-        {header}
-      </span>
-    </a>
+  <Link href={href} className="group block">
+    <div className="mb-2">
+      {imagePlaceholder ? (
+        <AnimatedImage
+          src={image}
+          alt={imageAlt ?? ""}
+          width={1075}
+          height={425}
+          placeholder="blur"
+          blurDataURL={imagePlaceholder}
+          className="object-cover"
+        />
+      ) : (
+        <AnimatedImage
+          src={image}
+          alt={imageAlt ?? ""}
+          width={1075}
+          height={425}
+          className="object-cover"
+        />
+      )}
+    </div>
+    {title && <span className="tag text-mid-blue">{title}</span>}
+    <span className="h4 mt-6 sm:mt-3 sm:text-[14px] group-hover:text-action-purple break-words">
+      {header}
+    </span>
   </Link>
 );