Designing and engineering interfaces for humans.
See
my work, find out more{" "}
diff --git a/src/pages/api/go-redirect-service/[...name].ts b/src/pages/api/go-redirect-service/[...name].ts
index 599145f..2fdcd76 100644
--- a/src/pages/api/go-redirect-service/[...name].ts
+++ b/src/pages/api/go-redirect-service/[...name].ts
@@ -1,6 +1,7 @@
import type { NextRequest } from "next/server";
import Data from "./data.json";
+
interface DataStructure {
links: { [key: string]: string };
tempDisable: { [key: string]: string };
diff --git a/src/pages/api/go-redirect-service/data.json b/src/pages/api/go-redirect-service/data.json
index 61595f6..2dc32d4 100644
--- a/src/pages/api/go-redirect-service/data.json
+++ b/src/pages/api/go-redirect-service/data.json
@@ -15,7 +15,6 @@
"p/clock/build": "https://jakub-studio.github.io/SpectrumClock/build/",
"p/clock/ui": "https://www.figma.com/proto/lRA7N3IpU0zIZaNb4hCfsZ/The-Spectrum-Clock?page-id=0%3A1&node-id=2%3A169&viewport=241%2C48%2C0.15&scaling=contain&starting-point-node-id=2%3A47&show-proto-sidebar=1",
"p/clock/video": "https://vimeo.com/714461646",
- "p/buzz/ui": "",
"p/screwd/ui": "https://www.figma.com/proto/MNtcKmUjrOe9wShI146I96/ScrewdApp?node-id=132%3A127&viewport=657%2C922%2C0.5&scaling=scale-down&starting-point-node-id=216%3A296"
},
"tempDisable": {}
diff --git a/src/pages/works/[id].tsx b/src/pages/works/[id].tsx
index 84abe62..b293970 100644
--- a/src/pages/works/[id].tsx
+++ b/src/pages/works/[id].tsx
@@ -1,7 +1,8 @@
+import { GetStaticPaths, GetStaticProps } from "next";
+
import { MarkdownPost, MarkdownPostProps } from "@/components/MarkdownPost";
import { ContentDirectoryNames, getContentIDs } from "@/modules/fs";
import { getStaticMarkdoc } from "@/modules/markdown/server";
-import { GetStaticPaths, GetStaticProps } from "next";
interface Params {
[param: string]: string;
diff --git a/src/pages/works/index.tsx b/src/pages/works/index.tsx
index 52bdfaa..c925b54 100644
--- a/src/pages/works/index.tsx
+++ b/src/pages/works/index.tsx
@@ -1,14 +1,17 @@
-import Post from "@/components/Post";
+import { useCallback, useEffect, useRef, useState } from "react";
import Image from "next/image";
import Link from "next/link";
-import { resolveImage } from "@/modules/images";
-import { ContentDirectoryNames, getContentIDs } from "@/modules/fs";
+import { useRouter } from "next/router";
+
+import c from "clsx";
+
+import Metadata from "@/components/Meta";
+import Post from "@/components/Post";
+import { MARKDOC_FILE_EXTENSION } from "@/constants";
import projectIndexPageSort from "@/content/projects/_indexPageSort.json";
+import { ContentDirectoryNames, getContentIDs } from "@/modules/fs";
+import { resolveImage } from "@/modules/images";
import { getStaticMarkdoc } from "@/modules/markdown/server";
-import Metadata from "@/components/Meta";
-import { useCallback, useEffect, useRef, useState } from "react";
-import c from "clsx";
-import { useRouter } from "next/router";
import { isDev } from "@/utils";
interface ProjectCategoryPillProps {
@@ -28,12 +31,12 @@ interface ComingSoonProject {
const ProjectCategoryPill: React.FC
= props => {
const className = c(
- "border dark:border-stone-700 rounded-full flex px-4 py-2 items-center justify-center transition-all shrink-0 select-none disable-tap-highlight",
+ "border dark:border-ui-700 rounded-full flex px-4 py-2 items-center justify-center transition-all shrink-0 select-none disable-tap-highlight",
{
- "opacity-50 hover:opacity-100 text-stone-800 dark:text-stone-300":
+ "opacity-50 hover:opacity-100 text-ui-800 dark:text-ui-300":
props.unselected,
- "border-stone-400": !props.active,
- "bg-stone-800 border-stone-800 text-stone-100 dark:bg-stone-700 text-stone-50 dark:text-stone-50":
+ "border-ui-400": !props.active,
+ "bg-ui-800 border-ui-800 text-ui-100 dark:bg-ui-700 text-ui-50 dark:text-ui-50":
props.active
}
);
@@ -78,7 +81,7 @@ const ProjectLink: React.FC = props => {
src={src}
alt={alt}
placeholder="blur"
- className="rounded-md shadow-inner h-80 object-cover"
+ className="h-80 rounded-md object-cover shadow-inner"
fill
quality={90}
priority={props.requestPriorityLoading === true}
@@ -88,8 +91,8 @@ const ProjectLink: React.FC = props => {
{/* Top black gradient */}
{/* Text content */}
-
-
+
+
{props.category.map((category, index) => (
@@ -107,10 +110,10 @@ const ProjectLink: React.FC
= props => {
-
+
{props.title}
-
{props.description}
+
{props.description}
@@ -226,7 +229,7 @@ const ProjectsIndexPage: React.FC
= props => {
like to filter by category/discipline.
-
+
{Object.keys(categoryCounts).map(category => (
{
+ return twMerge(clsx(inputs));
+};
+
export const isProd = process.env.NODE_ENV === "production";
export const isDev = !isProd;
diff --git a/tailwind.config.js b/tailwind.config.js
index d32bce7..0b2507a 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,20 +1,25 @@
const defaultTheme = require("tailwindcss/defaultTheme");
+const defaultColors = require("tailwindcss/colors");
const v = varName => `var(--${varName})`;
module.exports = {
darkMode: "class",
- content: ["./src/**/*.{js,ts,jsx,tsx,md}"],
+ content: ["./src/**/*.{js,ts,jsx,tsx,md,mdoc}"],
theme: {
fontFamily: {
- serif: ["var(--font-serif)", ...defaultTheme.fontFamily.serif],
- // this is not the way things should be done iirc
- sans: ["var(--font-sans)", ...defaultTheme.fontFamily.sans]
+ serif: [v("font-serif"), ...defaultTheme.fontFamily.serif],
+ sans: [v("font-sans"), ...defaultTheme.fontFamily.sans]
+ },
+ colors: {
+ ui: defaultColors.stone,
+ brand: "#ffa50a",
+
+ black: defaultColors.black,
+ white: defaultColors.white,
+ transparent: defaultColors.transparent
},
extend: {
- colors: {
- brand: "#ffa50a"
- },
minHeight: {
44: "44px"
},
diff --git a/tsconfig.json b/tsconfig.json
index 811db57..a2d9293 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -17,8 +17,19 @@
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
- }
+ },
+ "plugins": [
+ {
+ "name": "next"
+ }
+ ]
},
- "include": ["next-env.d.ts", "app.d.ts", "**/*.ts", "**/*.tsx"],
+ "include": [
+ "next-env.d.ts",
+ "app.d.ts",
+ "**/*.ts",
+ "**/*.tsx",
+ ".next/types/**/*.ts"
+ ],
"exclude": ["node_modules"]
}