image & link

app/(pages)/(components)/footer/index.js

@@ -4,10 +4,13 @@ import s from './footer.module.scss'
 export function Footer() {
   return (
     <footer className={s.footer}>
-      <Link href="https://darkroom.engineering/" target="_blank">
+      <Link href="https://darkroom.engineering/" className="link">
         darkroom.engineering
       </Link>
-      <Link href="https://github.com/darkroomengineering/satus" target="_blank">
+      <Link
+        href="https://github.com/darkroomengineering/satus"
+        className="link"
+      >
         github
       </Link>
     </footer>

app/(pages)/(components)/navigation/navigation.module.scss

@@ -1,6 +1,8 @@
 .nav {
   display: flex;
   flex-direction: column;
+  position: fixed;
+  z-index: 2;
 
   .title {
     display: inline-flex;

components/image/image.module.scss

@@ -0,0 +1,4 @@
+.block {
+  width: unset;
+  height: unset;
+}

components/image/index.js

@@ -1,6 +1,44 @@
+import cn from 'clsx'
 import NextImage from 'next/image'
 import { forwardRef } from 'react'
+import variables from 'styles/config'
+import s from './image.module.scss'
 
-export const Image = forwardRef(function Image({ ...props }, ref) {
-  return <NextImage ref={ref} {...props} />
+export const Image = forwardRef(function Image(
+  {
+    style,
+    className,
+    loading = 'eager',
+    objectFit = 'cover',
+    quality = 90,
+    alt = '',
+    block,
+    width = block && 1,
+    height = block && 1,
+    fill = typeof width === 'undefined' || typeof height === 'undefined',
+    mobileSize = '100vw',
+    desktopSize = '100vw',
+    sizes = `(max-width: ${parseFloat(variables.breakpoints.mobile)}px) ${mobileSize}, ${desktopSize}`,
+    ...props
+  },
+  ref,
+) {
+  return (
+    <NextImage
+      ref={ref}
+      fill={fill}
+      width={width}
+      height={height}
+      loading={loading}
+      quality={quality}
+      alt={alt}
+      style={{
+        objectFit,
+        ...style,
+      }}
+      className={cn(className, block && s.block)}
+      sizes={sizes}
+      {...props}
+    />
+  )
 })

components/link/index.js

@@ -1,10 +1,11 @@
 'use client'
 
+import { useLenis } from 'components/lenis'
 import NextLink from 'next/link'
 import { forwardRef } from 'react'
 
 export const Link = forwardRef(function Link(
-  { href, fallback = 'div', ...props },
+  { href, fallback = 'div', onClick, ...props },
   ref,
 ) {
   if (typeof href !== 'string') {
@@ -13,10 +14,29 @@ export const Link = forwardRef(function Link(
     return <Tag ref={ref} {...props} href={href} />
   }
 
-  if (href.startsWith('http')) {
+  const isExternal = href.startsWith('http')
+
+  if (isExternal) {
     props.target = '_blank'
     props.rel = 'noopener noreferrer'
   }
 
-  return <NextLink ref={ref} {...props} href={href} />
+  const isAnchor = href.startsWith('#')
+
+  const lenis = useLenis() // eslint-disable-line
+
+  return (
+    <NextLink
+      ref={ref}
+      onClick={(e) => {
+        if (isAnchor) {
+          e.preventDefault()
+          lenis?.scrollTo(href)
+        }
+        onClick?.(e)
+      }}
+      {...props}
+      href={href}
+    />
+  )
 })

next.config.js

@@ -20,7 +20,6 @@ const sassVars = require(__dirname + '/styles/config.js')
 
 const nextConfig = {
   reactStrictMode: true,
-  transpilePackages: ['@studio-freight/compono'],
   experimental: {
     optimizeCss: true,
     nextScriptWorkers: true,

styles/config.js

@@ -38,27 +38,4 @@ const viewports = {
   },
 }
 
-// function getCSSColors() {
-//   return Object.entries(colors).reduce(
-//     (acc, [key, value]) => acc + `--${key}: ${value};`,
-//     '',
-//   )
-// }
-
-// function getCSSThemes() {
-//   return Object.entries(themes).reduce(
-//     (acc, [key, colors]) =>
-//       acc +
-//       `.theme-${key}:{${Object.entries(colors).reduce(
-//         (acc, [key, value]) => acc + `--${key}: ${value};`,
-//         '',
-//       )}}`,
-//     '',
-//   )
-// }
-
-// export function getStyle() {
-//   return `:root{${getCSSColors()}}${getCSSThemes()}`
-// }
-
 module.exports = { breakpoints, colors, themes, viewports }