docs: updates

.github/workflows/publish.yml

@@ -21,7 +21,7 @@ jobs:
         env:
           NODE_ENV: production
         with:
-          args: yarn build
+          args: pnpm build
       - name: Deploy 🚀
         uses: JamesIves/github-pages-deploy-action@4.0.0
         with:

.gitignore

@@ -1,4 +1,4 @@
-
+.turbo/
 /node_modules/
 /*.logs
 /.yarn/

articles/package.json

@@ -2,6 +2,9 @@
   "name": "@morten-olsen/personal-webpage-articles",
   "main": "./dist/index.js",
   "private": true,
+  "scripts": {
+    "build": "tsc --build"
+  },
   "dependencies": {
     "@morten-olsen/goodwrites": "workspace:^"
   }

package.json

@@ -1,6 +1,5 @@
 {
   "name": "@morten-olsen/goodwrites-repo",
-  "packageManager": "yarn@3.1.0",
   "workspaces": [
     "packages/goodwrites",
     "packages/goodwrites-webpack-loader",
@@ -23,6 +22,7 @@
     "jest": "^29.3.1",
     "prettier": "^2.8.0",
     "ts-jest": "^29.0.3",
+    "turbo": "^1.7.0",
     "typescript": "^4.9.3"
   },
   "config": {
@@ -31,9 +31,9 @@
     }
   },
   "scripts": {
-    "cli": "yarn workspace @morten-olsen/goodwrites-cli run cli",
+    "cli": "turbo cli --filter=@morten-olsen/goodwrites-cli ",
-    "dev": "yarn workspace @morten-olsen/personal-webpage next dev",
+    "dev": "turbo dev --filter=@morten-olsen/personal-webpage",
-    "build": "tsc --build && yarn workspace @morten-olsen/personal-webpage next build && yarn workspace @morten-olsen/personal-webpage next export",
+    "build": "turbo build",
     "postinstall": "husky install"
   },
   "private": true,

packages/goodwrites-cli/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@morten-olsen/goodwrites-cli",
-  "packageManager": "yarn@3.1.0",
   "bin": {
     "goodwrites": "./bin/index.js"
   },
   "scripts": {
-    "cli": "./bin/index.js"
+    "cli": "./bin/index.js",
+    "main": "./dist/index.js"
   },
   "dependencies": {
     "@morten-olsen/goodwrites": "workspace:^",

packages/goodwrites-latex/package.json

@@ -1,6 +1,9 @@
 {
   "name": "@morten-olsen/goodwrites-latex",
   "main": "./dist/index.js",
+  "scripts": {
+    "build": "tsc --build"
+  },
   "devDependencies": {
     "@types/marked": "^4.0.7"
   },

packages/goodwrites-viewer/package.json

@@ -1,6 +1,9 @@
 {
   "name": "@morten-olsen/goodwrites-viewer",
   "main": "./dist/index.js",
+  "scripts": {
+    "build": "tsc --build"
+  },
   "dependencies": {
     "@fontsource/merriweather": "^4.5.14",
     "@morten-olsen/goodwrites": "workspace:^",

packages/goodwrites-webpack-loader/package.json

@@ -1,9 +1,13 @@
 {
   "name": "@morten-olsen/goodwrites-webpack-loader",
   "main": "./dist/index.js",
+  "scripts": {
+    "build": "tsc --build"
+  },
   "devDependencies": {
     "@types/fs-extra": "^9.0.13",
     "@types/marked": "^4.0.7",
+    "@types/sharp": "^0.31.1",
     "@types/webpack": "^5.28.0",
     "loader-utils": "^3.2.1",
     "yaml": "^2.1.3"
@@ -14,6 +18,7 @@
     "fs-extra": "^11.1.0",
     "marked": "^4.0.12",
     "node-latex": "^3.1.0",
+    "sharp": "^0.31.3",
     "slugify": "^1.6.5",
     "stream": "^0.0.2"
   }

packages/goodwrites/package.json

@@ -1,7 +1,9 @@
 {
   "name": "@morten-olsen/goodwrites",
-  "packageManager": "yarn@3.1.0",
   "main": "./dist/index.js",
+  "scripts": {
+    "build": "tsc --build"
+  },
   "dependencies": {
     "@sinclair/typebox": "^0.25.10",
     "fs-extra": "^11.1.0",

packages/markdown-loader/package.json

@@ -1,6 +1,9 @@
 {
   "name": "@morten-olsen/markdown-loader",
   "main": "./dist/index.js",
+  "scripts": {
+    "build": "tsc --build"
+  },
   "devDependencies": {
     "remark": "^13"
   },

pnpm-workspace.yaml

@@ -0,0 +1,5 @@
+packages:
+  - packages/*
+  - webpage
+  - profile
+  - articles

profile/package.json

@@ -1,4 +1,7 @@
 {
   "name": "@morten-olsen/personal-webpage-profile",
-  "main": "./dist/index.js"
+  "main": "./dist/index.js",
+  "scripts": {
+    "build": "tsc --build"
+  }
 }

profile/src/data/positions.ts

@@ -1,14 +1,20 @@
-import { Position } from "../types/positions";
+import { Position } from '../types/positions';
 
-const context = (require as any).context('../../positions', true, /\.md$/)
+const context = (require as any).context('../../positions', true, /\.md$/);
 
-const getPositions = () => context.keys().map((key: string) => context(key)).map((a: any) => ({
+const getPositions = () =>
+  context
+    .keys()
+    .map((key: string) => context(key))
+    .map((a: any) => ({
       ...a,
       attributes: {
         ...a.attributes,
-    start: a.attributes.start ? new Date(a.attributes.start).getTime() : null,
+        start: a.attributes.start
+          ? new Date(a.attributes.start).getTime()
+          : null,
         end: a.attributes.end ? new Date(a.attributes.end).getTime() : null,
       },
-})) as Position[];
+    })) as Position[];
 
 export { getPositions };

turbo.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://turbo.build/schema.json",
+  "baseBranch": "origin/main",
+  "pipeline": {
+    "build": {
+      "dependsOn": ["^build"],
+      "outputs": ["dist/**"],
+      "inputs": ["src/**/*.tsx", "src/**/*.ts", "./tsconfig.*.json"]
+    },
+    "test": {
+      "cache": false
+    },
+    "cli": {
+      "dependsOn": ["^build"],
+      "cache": false
+    },
+    "dev": {
+      "cache": false
+    }
+  },
+  "globalDependencies": ["tsconfig.json"]
+}
+

webpage/package.json

@@ -1,6 +1,10 @@
 {
   "name": "@morten-olsen/personal-webpage",
   "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build && next export"
+  },
   "dependencies": {
     "@fontsource/black-ops-one": "^4.5.9",
     "@fontsource/merriweather": "^4.5.14",
@@ -24,6 +28,8 @@
     "@morten-olsen/goodwrites-webpack-loader": "workspace:^",
     "@types/chroma-js": "^2.1.4",
     "@types/three": "^0.146.0",
-    "next-compose-plugins": "^2.2.1"
+    "next-compose-plugins": "^2.2.1",
+    "responsive-loader": "^3.1.2",
+    "sharp": "^0.31.3"
   }
 }

webpage/plugins/with-images.js

@@ -21,7 +21,7 @@ exports.withImages = (nextConfig = {}) => ({
       // issuer: /\.\w+(?<!(s?c|sa)ss)$/i, // commented out because of a bug with require.context load https://github.com/webpack/webpack/issues/9309
       use: [
         {
-          loader: require.resolve("url-loader"),
+          loader: require.resolve("responsive-loader"),
           options: {
             limit: nextConfig.inlineImageLimit,
             fallback: require.resolve("file-loader"),

webpage/src/pages/index.tsx

@@ -6,7 +6,8 @@ import { GetStaticProps } from 'next';
 import { getPositions, Position } from '@morten-olsen/personal-webpage-profile';
 import { Sheet } from '../components/sheet';
 import { ArticleGrid } from 'components/articles/grid';
-const cover = require('./cover.jpg');
+const cover = require('./cover.jpg?sizes[]=300,sizes[]=600,sizes[]=1024,sizes[]=2048');
+const coverWebP = require('./cover.jpg?sizes[]=300,sizes[]=600,sizes[]=1024,sizes[]=2048&format=webp');
 
 type Props = {
   articles: ReturnType<typeof getArticles>;
@@ -61,10 +62,43 @@ const Arrow = styled.div`
   }
 `;
 
+const ImageBg = styled.picture`
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  height: 100%;
+  object-fit: cover;
+  object-position: center;
+  z-index: -1;
+  opacity: 0.5;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: center;
+  }
+`;
+
 const Index: FC<Props> = ({ articles }) => {
   return (
     <>
-      <Sheet color="#c85279" background={cover}>
+      <Sheet color="#c85279">
+        <ImageBg>
+          <source
+            srcSet={coverWebP.srcSet}
+            type="image/webp"
+            sizes="(min-width: 1024px) 1024px, 100vw"
+          />
+          <img
+            src={cover.src}
+            srcSet={cover.srcSet}
+            sizes="(min-width: 1024px) 1024px, 100vw"
+            loading="lazy"
+          />
+        </ImageBg>
         <Arrow />
         <Hero>
           {"Hi, I'm Morten".split(' ').map((char, index) => (