⚡ feat: more stuff

2021-04-16 21:30:02 -04:00
parent 2ac0c9862d
commit acdbbe6d21
15 changed files with 1203 additions and 821 deletions
--- a/mdsvex.config.cjs
+++ b/mdsvex.config.cjs
@@ -1,20 +1,16 @@
 module.exports = {
-	extensions: [".svx", ".md"],
+	extensions: [".svelte.md"],
 	smartypants: {
 		dashes: "oldschool",
 	},
 	remarkPlugins: [
-		// [require("remark-github"), {
-		// 	// Use your own repository
-		// 	repository: "https://github.com/svelte-add/mdsvex.git",
-		// }],
 		require("remark-abbr"),
 	],
 	rehypePlugins: [
-		// require("rehype-slug"),
-		// [require("rehype-autolink-headings"), {
-		// 	behavior: "wrap",
-		// }],
+		require("rehype-slug"),
+		[require("rehype-autolink-headings"), {
+			behavior: "wrap",
+		}],
 	],
 	layout: {
 		_: "./src/routes/_centered-prose.svelte",
--- a/package.json
+++ b/package.json
@@ -9,20 +9,19 @@
 		"format": "prettier --write ."
 	},
 	"devDependencies": {
-		"@sveltejs/adapter-node": "next",
 		"@sveltejs/adapter-static": "^1.0.0-next.4",
 		"@sveltejs/kit": "next",
-		"@tailwindcss/jit": "^0.1.1",
+		"@tailwindcss/jit": "^0.1.18",
 		"@tailwindcss/typography": "^0.4.0",
-		"@typescript-eslint/eslint-plugin": "^4.19.0",
-		"@typescript-eslint/parser": "^4.19.0",
+		"@typescript-eslint/eslint-plugin": "^4.22.0",
+		"@typescript-eslint/parser": "^4.22.0",
 		"autoprefixer": "^10.2.5",
-		"cssnano": "^4.1.10",
-		"eslint": "^7.22.0",
-		"eslint-config-prettier": "^8.1.0",
-		"eslint-plugin-svelte3": "^3.1.0",
-		"mdsvex": "^0.8.9",
-		"postcss": "^8.2.7",
+		"cssnano": "^5.0.1",
+		"eslint": "^7.24.0",
+		"eslint-config-prettier": "^8.2.0",
+		"eslint-plugin-svelte3": "^3.1.2",
+		"mdsvex": "^0.9.0",
+		"postcss": "^8.2.10",
 		"postcss-load-config": "^3.0.1",
 		"prettier": "~2.2.1",
 		"prettier-plugin-svelte": "^2.2.0",
@@ -30,12 +29,14 @@
 		"rehype-slug": "^4.0.1",
 		"remark-abbr": "^1.4.1",
 		"remark-github": "^10.0.1",
-		"svelte": "^3.29.0",
-		"svelte-preprocess": "^4.6.9",
-		"tailwindcss": "^2.0.3",
-		"tslib": "^2.0.0",
-		"typescript": "^4.0.0",
-		"vite": "^2.1.0"
+		"svelte": "^3.37.0",
+		"svelte-preprocess": "^4.7.0",
+		"tailwindcss": "^2.1.1",
+		"tailwindcss-theme-variants": "^1.11.0-beta.1",
+		"tslib": "^2.2.0",
+		"typescript": "^4.2.4",
+		"vite": "^2.1.5",
+		"vite-imagetools": "3.4.0-next.1"
 	},
 	"type": "module",
 	"engines": {
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/postcss.config.cjs
+++ b/postcss.config.cjs
@@ -1,4 +1,4 @@
-const tailwindcss = require("@tailwindcss/jit");
+const tailwindcss = require("tailwindcss");
 const autoprefixer = require("autoprefixer");
 const cssnano = require("cssnano");

--- a/src/app.css
+++ b/src/app.css
@@ -1,3 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
--- a/src/app.html
+++ b/src/app.html
@@ -2,11 +2,10 @@
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />
-		<link rel="icon" href="/favicon.ico" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		%svelte.head%
 	</head>
-	<body>
+	<body class="bg-primary text-on-primary">
 		<div id="svelte">%svelte.body%</div>
 	</body>
 </html>
--- a/src/app.postcss
+++ b/src/app.postcss
@@ -0,0 +1,10 @@
+@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500&display=swap');
+
+@tailwind base;
+::selection {
+	@apply bg-accent-vivid;
+	@apply text-on-accent;
+}
+
+@tailwind components;
+@tailwind utilities;
--- a/src/routes/$layout.svelte
+++ b/src/routes/$layout.svelte
@@ -1,5 +1,17 @@
 <script>
-	import "../app.css";
+	import "../app.postcss";
+	
+	// TODO: doesn't actually use ico format
+	import faviconIco from "./_favicon.png?width=32&height=32&format=ico";
+	import favicon from "./_favicon.png?width=128&height=128&format=png";
+	import appleTouchIcon from "./_favicon.png?width=180&height=180&format=png";
 </script>

+<svelte:head>
+	<link rel="icon" href={faviconIco} />
+	<link rel="shortcut icon" type="image/png" href={favicon} />
+	<link rel="apple-touch-icon" href={appleTouchIcon} />
+	<link rel="manifest" href="/manifest.json" />
+</svelte:head>
+
 <slot />
--- a/src/routes/_favicon.png
+++ b/src/routes/_favicon.png
--- a/src/routes/index.svelte.md
+++ b/src/routes/index.svelte.md
@@ -0,0 +1,26 @@
+<script>
+	import photosOfMe from "./_me.png?width=10;300;1000&format=png;webp&srcset";
+	import photoOfMe from "./_me.png?width=20&format=webp&metadata";
+</script>
+
+
+# J / Jacob Babich
+
+<picture>
+	<source srcset={photosOfMe} />
+	<img src={photoOfMe.src} height={photoOfMe.height} width={photoOfMe.width} class="w-full" />
+</picture>
+
+**Student at the University of Michigan-Dearborn**
+
+Cool facts about me:
+* I'm seeking a [computer engineering](umdearborn.edu) and **electrical engineering** dual degree.
+
+
+## Imagine this is another heading
+
+Beware that this site is extremely likely to go out of date! I'd like to keep it updated but that might not be a high priority.
+
+---
+
+*This website's source code is available on [GitHub](https://github.com/babichjacob/university-website)*
--- a/src/routes/index.svx
+++ b/src/routes/index.svx
@@ -1,17 +0,0 @@
-<script>
-	import photoOfMe from "./_me.png";
-</script>
-
-
-# J / Jacob Babich
-![Photo of me]({photoOfMe})
-**Student at the University of Michigan-Dearborn**
-
-Cool facts about me:
-* I'm seeking a computer engineering and electrical engineering dual degree.
-
-Beware that this site is extremely likely to go out of date! I'd like to keep it updated but that might not be a high priority.
-
---
-
-*This website's source code is available on [GitHub](https://github.com/babichjacob/university-website)*
--- a/src/routes/manifest.json.ts
+++ b/src/routes/manifest.json.ts
@@ -0,0 +1,22 @@
+import icon192 from './_favicon.png?width=192&height=192&format=png';
+import icon512 from './_favicon.png?width=512&height=512&format=png';
+
+export const get = async () => {
+	return {
+        body: {
+            // TODO: rest of the manifest
+			icons: [
+				{
+					src: icon192,
+					type: 'image/png',
+					sizes: '192x192'
+				},
+				{
+					src: icon512,
+					type: 'image/png',
+					sizes: '512x512'
+				}
+			]
+		}
+	};
+};
--- a/svelte.config.cjs
+++ b/svelte.config.cjs
@@ -1,3 +1,4 @@
+const imagetools = require('vite-imagetools');
 const { mdsvex } = require("mdsvex");
 const mdsvexConfig = require("./mdsvex.config.cjs");
 const sveltePreprocess = require('svelte-preprocess');
@@ -12,9 +13,7 @@ module.exports = {
 	preprocess: [
 		mdsvex(mdsvexConfig),
 		sveltePreprocess({
-			defaults: {
-				style: "postcss",
-			},
+			postcss: true,
 		}),
 	],
 	kit: {
@@ -24,9 +23,14 @@ module.exports = {
 		target: '#svelte',

 		vite: {
+			plugins: [
+				imagetools({
+					force: true
+				}),
+			],
 			ssr: {
 				noExternal: Object.keys(pkg.dependencies || {})
-			}
-		}
-	}
+			},
+		},
+	},
 };
--- a/tailwind-typography-styles.cjs
+++ b/tailwind-typography-styles.cjs
@@ -0,0 +1,47 @@
+module.exports = (_theme) => ({
+	DEFAULT: {
+		css: {
+			color: false,
+			fontWeight: 300,
+			"@apply text-on-primary": "",
+
+			a: {
+				color: false,
+				fontWeight: 400,
+				"@apply text-accent": "",
+			},
+			"a:hover, a:focus": {
+				textDecoration: "underline",
+				"@apply text-accent-strong": "",
+			},
+
+			strong: {
+				color: false,
+				fontWeight: 400,
+			},
+
+			h1: {
+				color: false,
+			},
+			h2: {
+				color: false,
+			},
+			h3: {
+				color: false,
+			},
+			h4: {
+				color: false,
+			},
+
+			"h1, h2, h3, h4": {
+				"@apply font-heading": "",
+			},
+
+			"h1 a, h2 a, h3 a, h4 a": {
+				fontWeight: 500,
+				textDecoration: "none",
+				"@apply text-on-primary": "",
+			},
+		},
+	},
+});
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -1,31 +1,63 @@
-const { tailwindExtractor } = require("tailwindcss/lib/lib/purgeUnusedStyles");
+const colors = require("tailwindcss/colors");
+const defaultTheme = require("tailwindcss/defaultTheme");
+const typography = require("./tailwind-typography-styles.cjs");
+
+const { themeVariants, prefersDark, prefersLight } = require("tailwindcss-theme-variants");

 module.exports = {
-	purge: {
-		content: [
-			"./src/**/*.{html,js,svelte,ts}",
-		],
-		options: {
-			defaultExtractor: (content) => [
-				// If this stops working, please open an issue at https://github.com/svelte-add/tailwindcss/issues rather than bothering Tailwind Labs about it
-				...tailwindExtractor(content),
-				// Match Svelte class: directives (https://github.com/tailwindlabs/tailwindcss/discussions/1731)
-				...[...content.matchAll(/(?:class:)*([\w\d-/:%.]+)/gm)].map(([_match, group, ..._rest]) => group),
-			],
-			keyframes: true,
-		},
-	},
+	mode: "jit",
+	purge: [
+		"./src/**/*.{html,js,md,svelte,svx,ts}",
+	],
 	theme: {
 		extend: {
+			colors: {
+				"true-gray": colors.trueGray,
+				amber: colors.amber,
+			},
+
 			fontFamily: {
-				sans: ["system-ui", "Helvetica", "Arial", "sans-serif"]
-			}
+				sans: ["'Rubik'", ...defaultTheme.fontFamily.sans],
+				heading: ["'Rubik'", ...defaultTheme.fontFamily.serif],
+			},
+
+			typography,
 		},
 	},
-	variants: {
-		extend: {},
-	},
 	plugins: [
 		require("@tailwindcss/typography"),
+		themeVariants({
+			themes: {
+				light: {
+					mediaQuery: prefersLight,
+					semantics: {
+						colors: {
+							"primary": "white",
+							"on-primary": "gray-900",
+
+							"accent": "amber-600",
+							"accent-vivid": "amber-400",
+							"accent-strong": "amber-800",
+							"on-accent": "black",
+						},
+					},
+				},
+				dark: {
+					mediaQuery: prefersDark,
+					semantics: {
+						colors: {
+							"primary": "true-gray-900",
+							"on-primary": "white",
+
+							"accent": "amber-400",
+							"accent-vivid": "amber-600",
+							"accent-strong": "amber-200",
+							"on-accent": "white",
+						},
+					},
+				},
+			},
+			fallback: "compact",
+		}),
 	],
 };