feat: Finishes styling and textures

Author: thecodedrift

.czrc

@@ -0,0 +1,4 @@
+ADBLOCK=1
+DISABLE_OPENCOLLECTIVE=1
+OPEN_SOURCE_CONTRIBUTOR=1
+SUPPRESS_SUPPORT=1

.env

@@ -0,0 +1 @@
+__generated__/*

.eslintignore

@@ -0,0 +1,5 @@
+{
+  "root": true,
+  "parser": "@typescript-eslint/parser",
+  "extends": ["next/core-web-vitals"]
+}

.eslintrc

@@ -8,7 +8,6 @@
 # Please put your IDE ignores in your home ~/.gitignore
 # Most editors are at https://github.com/github/gitignore/tree/master/Global
 
-.env
 .env.local
 .next
 .vercel

.eslintrc.js

@@ -0,0 +1,14 @@
+const path = require("path");
+
+// https://nextjs.org/docs/basic-features/eslint#lint-staged
+const buildEslintCommand = (filenames) =>
+  `next lint --fix --file ${filenames
+    .map((f) => path.relative(process.cwd(), f))
+    .join(" --file ")}`;
+
+module.exports = {
+  // global configurations, these are always cleaned with prettier
+  "{*,**/*}.{json,gql,graphql,md,yaml,yml}": ["prettier --write"],
+  // next.js linting
+  "{*,**/*}.{js,ts,jsx,tsx,vue}": [buildEslintCommand],
+};

.gitignore

@@ -0,0 +1,8 @@
+/* eslint-disable */
+module.exports = {
+name: "@yarnpkg/plugin-dotenv",
+factory: function (require) {
+var plugin;plugin=(()=>{var e={86:(e,r,n)=>{"use strict";n.r(r),n.d(r,{hooks:()=>i});var t=n(347),o=n(843),s=n.n(o);const i={async setupScriptEnvironment(e,r){var n;const o=(0,t.v)({path:null!==(n=s()(".env"))&&void 0!==n?n:void 0});Object.assign(r,o.parsed)}}},347:(e,r,n)=>{const t=n(747),o=n(622);function s(e){console.log("[dotenv][DEBUG] "+e)}const i=/^\s*([\w.-]+)\s*=\s*(.*)?\s*$/,u=/\\n/g,c=/\n|\r|\r\n/;function l(e,r){const n=Boolean(r&&r.debug),t={};return e.toString().split(c).forEach((function(e,r){const o=e.match(i);if(null!=o){const e=o[1];let r=o[2]||"";const n=r.length-1,s='"'===r[0]&&'"'===r[n];"'"===r[0]&&"'"===r[n]||s?(r=r.substring(1,n),s&&(r=r.replace(u,"\n"))):r=r.trim(),t[e]=r}else n&&s(`did not match key and value when parsing line ${r+1}: ${e}`)})),t}e.exports.v=function(e){let r=o.resolve(process.cwd(),".env"),n="utf8",i=!1;e&&(null!=e.path&&(r=e.path),null!=e.encoding&&(n=e.encoding),null!=e.debug&&(i=!0));try{const e=l(t.readFileSync(r,{encoding:n}),{debug:i});return Object.keys(e).forEach((function(r){Object.prototype.hasOwnProperty.call(process.env,r)?i&&s(`"${r}" is already defined in \`process.env\` and will not be overwritten`):process.env[r]=e[r]})),{parsed:e}}catch(e){return{error:e}}}},843:(e,r,n)=>{"use strict";var t=n(747),o=n(622),s=n(588),i=t.readFileSync,u=t.statSync,c=o.join,l=o.resolve,a=/^\./,p=o.sep;function d(e,r,n){r=c(e,r);var t=c(r,n);return u(t)&&{cwd:e,dir:r,path:t}}function f(e,r,t){r=c(e,r);var o=c(r,t),s=n(603).resolve(o);return s&&{cwd:e,dir:r,path:s}}function v(e,r){var n=g(e,r);return n&&n.path}function g(e,r){if(!e)return null;var n,t=null!==(r=r||{}).dir&&void 0!==r.dir?r.dir:".config",o=r.dot?e:e.replace(a,""),i=r.module?f:d,u=l(r.cwd||".").split(p),c=u.length;function v(r){try{return i(r,"",e)}catch(e){}try{return i(r,t,o)}catch(e){}}for(;c--;){if(n=v(u.join(p)))return n;u.pop()}return(r.home||null===r.home||void 0===r.home)&&(n=v(s))?n:null}e.exports=v,e.exports.obj=g,e.exports.read=function(e,r){if(!e)return null;var n=v(e,r=r||{});return n&&i(n,{encoding:r.encoding||"utf8",flag:r.flag})},e.exports.require=function(e,r){if(!e)return null;(r=r||{}).module=!0;var t=v(e,r);return t&&n(603)(t)}},603:e=>{function r(e){var r=new Error("Cannot find module '"+e+"'");throw r.code="MODULE_NOT_FOUND",r}r.keys=()=>[],r.resolve=r,r.id=603,e.exports=r},918:(e,r,n)=>{"use strict";var t=n(87);e.exports="function"==typeof t.homedir?t.homedir:function(){var e=process.env,r=e.HOME,n=e.LOGNAME||e.USER||e.LNAME||e.USERNAME;return"win32"===process.platform?e.USERPROFILE||e.HOMEDRIVE+e.HOMEPATH||r||null:"darwin"===process.platform?r||(n?"/Users/"+n:null):"linux"===process.platform?r||(0===process.getuid()?"/root":n?"/home/"+n:null):r||null}},588:(e,r,n)=>{"use strict";e.exports=n(918)()},747:e=>{"use strict";e.exports=require("fs")},87:e=>{"use strict";e.exports=require("os")},622:e=>{"use strict";e.exports=require("path")}},r={};function n(t){if(r[t])return r[t].exports;var o=r[t]={exports:{}};return e[t](o,o.exports,n),o.exports}return n.n=e=>{var r=e&&e.__esModule?()=>e.default:()=>e;return n.d(r,{a:r}),r},n.d=(e,r)=>{for(var t in r)n.o(r,t)&&!n.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:r[t]})},n.o=(e,r)=>Object.prototype.hasOwnProperty.call(e,r),n.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n(86)})();
+return plugin;
+}
+};

.lintstagedrc.cjs

@@ -3,5 +3,7 @@ nodeLinker: node-modules
 plugins:
   - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
     spec: "@yarnpkg/plugin-interactive-tools"
+  - path: .yarn/plugins/@yarnpkg/plugin-dotenv.cjs
+    spec: "https://unpkg.com/yarn-plugin-dotenv/bundles/@yarnpkg/plugin-dotenv.js"
 
 yarnPath: .yarn/releases/yarn-3.1.1.cjs

.lintstagedrc.yml

@@ -1,10 +1,11 @@
 {
   "name": "codedrift",
   "private": true,
-  "version": "1.0.0",
+  "version": "2.0.0",
   "description": "Personal blog & site of Rudolph Jakob Heuser",
-  "main": "",
-  "author": "Jakob Heuser <[email protected]>",
+  "license": "MIT",
+  "main": "./src/pages/index.ts",
+  "author": "Jakob Heuser <[email protected]>",
   "homepage": "https://codedrift.com",
   "bugs": {
     "url": "https://github.com/jakobo/codedrift/issues"
@@ -17,7 +18,6 @@
     "eslint": "eslint",
     "lint-staged": "lint-staged --shell"
   },
-  "license": "MIT",
   "dependencies": {
     "@heroicons/react": "^1.0.6",
     "@tailwindcss/forms": "^0.5.2",
@@ -37,7 +37,7 @@
     "ky": "^0.30.0",
     "ky-universal": "^0.9.1",
     "luxon": "^2.2.0",
-    "next": "^12.0.7",
+    "next": "^12.1.6",
     "next-seo": "^5.4.0",
     "next-urql": "^3.3.2",
     "postcss": "^8.4.14",
@@ -76,7 +76,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.18.0",
-    "@babel/plugin-transform-unicode-regex": "^7.16.5",
+    "@babel/plugin-transform-unicode-regex": "^7.16.7",
     "@commitlint/cli": "^11.0.0",
     "@commitlint/config-conventional": "^11.0.0",
     "@graphql-codegen/add": "^3.1.0",
@@ -101,7 +101,7 @@
     "eslint-config-next": "latest",
     "husky": "^4.3.8",
     "lint-staged": "^10.5.4",
-    "prettier": "^2.2.1",
+    "prettier": "^2.6.2",
     "typescript": "^4.6.4"
   },
   "husky": {

.yarn/cache/@babel-helper-annotate-as-pure-npm-7.16.7-75d26b1e4c-d235be963f.zip

@@ -0,0 +1,10 @@
+# RFC-9116 is amazing, and we all should use it
+# A static website probably does not need this, but we live on the internet
+# so anything is possible.
+#
+# I have intentionally ommitted the Expires field, as this security email
+# will exist for as long as I own and write on codedrift.com
+
+Canonical: https://codedrift.com/.well-known/security.txt
+Contact: mailto:[email protected]?subject=Security
+Preferred-Languages: en

.yarn/cache/@babel-helper-create-regexp-features-plugin-npm-7.16.0-9afb84be3e-d6230477e1.zip

@@ -43,7 +43,7 @@ export const PostDirectory: React.FC<PostDirectoryProps> = ({
         .reverse()
         .map((year) => (
           <div key={year} className={cx("mb-8", className)}>
-            <h2 className="w-full font-title text-2xl text-left text-gray-800 border-b border-gray-800 mb-1">
+            <h2 className="w-full font-sans text-2xl text-left text-gray-800 border-b border-gray-800 mb-1">
               {year}
             </h2>
             <ul className="grid gap-8 grid-cols-2">

.yarn/cache/@babel-helper-create-regexp-features-plugin-npm-7.17.12-a615eb0070-fe49d26b0f.zip

@@ -160,7 +160,7 @@ export const Layout: React.FC<PropsWithChildren<{}>> = ({ children }) => {
         <main className="w-full max-w-limit flex-grow p-4 pt-12">
           {children}
         </main>
-        <footer className="w-full h-20 bg-gray-700 dark:bg-gray-800 mt-8">
+        <footer className="w-full h-20 bg-gray-700 bg-leather-stone-700 dark:bg-gray-800 dark:bg-leather-stone-700 mt-8">
           <div className="flex flex-row items-center max-w-limit text-gray-100 dark:text-gray-200 p-4 text-sm">
             <div className="w-1/4">&lt;/&gt;</div>
             <div className="flex-grow text-center">

.yarn/cache/@babel-helper-plugin-utils-npm-7.14.5-e35eef11cb-fe20e90a24.zip

@@ -4,10 +4,7 @@ import { DateTime } from "luxon";
 import { Post as PT, Tag } from "types/Post";
 import { demoji } from "src/lib/demoji";
 import cx from "classnames";
-import { LINK, MINOR_LINK, PROSE } from "src/constants";
-
-const permalinkClass =
-  "block font-sans-caps text-gray-300 text-sm no-underline";
+import { MINOR_LINK, PROSE } from "src/constants";
 
 const widont = (text: string) =>
   text.replace(/([^\s])\s+([^\s]+)\s*$/, "$1\u00a0$2");

.yarn/cache/@babel-helper-plugin-utils-npm-7.17.12-49129e950f-4813cf0ddb.zip

@@ -38,4 +38,4 @@ export const PROSE = [
 export const ICON_LINK =
   "transition-all text-gray-500 hover:!text-gray-400 dark:text-gray-500 hover:dark:!text-gray-400";
 
-export const SECTION_HEADLINE = ["font-title", "text-7xl", "mb-3"].join(" ");
+export const SECTION_HEADLINE = ["font-title", "text-6xl", "mb-3"].join(" ");

.yarn/cache/@babel-plugin-syntax-jsx-npm-7.14.5-14192e29dd-3a2ba87534.zip

@@ -12,7 +12,7 @@ class MyDocument extends Document {
           />
         </Head>
         <body
-          className="bg-gray-100 bg-texture dark:bg-texture-invert dark:bg-gray-900 text-gray-800 dark:text-gray-100"
+          className="bg-gray-100 bg-paper-stone-200 dark:bg-gray-900 dark:bg-paper-stone-800 text-gray-800 dark:text-gray-100"
           style={{
             margin: 0,
             padding: 0,

.yarn/cache/@babel-plugin-transform-unicode-regex-npm-7.16.5-1a3540c1fb-61ce385633.zip renamed to .yarn/cache/@babel-plugin-transform-unicode-regex-npm-7.16.7-0a6888bf4d-ef7721cfb1.zip

@@ -60,7 +60,7 @@ const Colophon: React.FC<{}> = () => {
             <a href="https://fonts.google.com/specimen/Work+Sans">
               Work Sans Light
             </a>
-            . The <a href="https://tailwindcss.com/">Tailwind CSS</a> Slate
+            . The <a href="https://tailwindcss.com/">Tailwind CSS</a> stone
             pallete drives the primary color scheme, with Emerald and Amber
             providing primary and secondary colors respectively.
           </p>

.yarn/cache/@babel-runtime-npm-7.15.4-52ce5bf6ea-c408254304.zip

@@ -49,15 +49,18 @@ const Home: React.FC<{}> = () => {
       <Layout>
         <div className="flex-col flex-shrink-0 w-full lg:w-auto">
           <div className="max-w-reading mx-2 lg:mx-0">
-            <h1 className="font-title font-bold text-5xl mb-3">
+            <h1 className="font-title text-6xl mb-3">
               Hey 👋🏼, I&rsquo;m Jakob
             </h1>
-            <p className="font-sans font-light leading-normal">
+            <p className="font-sans">
               I&lsquo;m the co-founder of{" "}
-              <a href="https://taskless.io">Taskless</a>, the world&lsquo;s
-              fastest job queueing system for serverless and edge computing.
+              <a href="https://taskless.io" className={linkClasses}>
+                Taskless
+              </a>
+              , the world&lsquo;s fastest job queueing system for serverless and
+              edge computing.
             </p>
-            <p className="font-sans font-light leading-normal mt-3">
+            <p className="font-sans mt-3">
               The messy parts when we build things is my happy place.
               Ocassionally, I write about{" "}
               <Link href="/thunked/tag/%F0%9F%93%9A%20Code">
@@ -79,7 +82,7 @@ const Home: React.FC<{}> = () => {
           <div className="max-w-reading mt-4 mx-2 lg:mx-0 flex flex-col space-y-8 pt-6">
             {(posts || []).map((post) => (
               <div key={post.id}>
-                <h3 className="font-sans font-bold text-2xl">
+                <h3 className="font-sans text-2xl">
                   <Link href={`/thunked/${post.slug}`} passHref>
                     <a
                       href={`/thunked/${post.slug}`}
@@ -89,9 +92,8 @@ const Home: React.FC<{}> = () => {
                     </a>
                   </Link>
                 </h3>
-                <div className="font-sans-caps text-sm">
+                <div className="font-sans text-sm">
                   <span
-                    className="text-xs"
                     title={DateTime.fromISO(post.publishedAt).toLocaleString()}
                   >
                     {DateTime.fromISO(post.publishedAt).toRelativeCalendar()}

.yarn/cache/@babel-types-npm-7.15.0-20151d256a-6d6bcdfce9.zip

@@ -105,7 +105,7 @@ const ThunkedBySlug: React.FC<ThunkedBySlugProps> = ({ webmentions = [] }) => {
             titleTag={({ children, ...props }) => (
               <h1
                 {...props}
-                className={`${props.className || ""} font-title text-5xl`}
+                className={`${props.className || ""} font-title text-6xl`}
               >
                 {children}
               </h1>