feat: catppuccin color schemes (#90)

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

.node-version

@@ -1 +1 @@
-20
+21

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+	"css.customData": [".vscode/tailwind.json"]
+}

.vscode/tailwind.json

@@ -0,0 +1,55 @@
+{
+	"version": 1.1,
+	"atDirectives": [
+		{
+			"name": "@tailwind",
+			"description": "Use the `@tailwind` directive to insert Tailwind's `base`, `components`, `utilities` and `screens` styles into your CSS.",
+			"references": [
+				{
+					"name": "Tailwind Documentation",
+					"url": "https://tailwindcss.com/docs/functions-and-directives#tailwind"
+				}
+			]
+		},
+		{
+			"name": "@apply",
+			"description": "Use the `@apply` directive to inline any existing utility classes into your own custom CSS. This is useful when you find a common utility pattern in your HTML that you’d like to extract to a new component.",
+			"references": [
+				{
+					"name": "Tailwind Documentation",
+					"url": "https://tailwindcss.com/docs/functions-and-directives#apply"
+				}
+			]
+		},
+		{
+			"name": "@responsive",
+			"description": "You can generate responsive variants of your own classes by wrapping their definitions in the `@responsive` directive:\n```css\n@responsive {\n  .alert {\n    background-color: #E53E3E;\n  }\n}\n```\n",
+			"references": [
+				{
+					"name": "Tailwind Documentation",
+					"url": "https://tailwindcss.com/docs/functions-and-directives#responsive"
+				}
+			]
+		},
+		{
+			"name": "@screen",
+			"description": "The `@screen` directive allows you to create media queries that reference your breakpoints by **name** instead of duplicating their values in your own CSS:\n```css\n@screen sm {\n  /* ... */\n}\n```\n…gets transformed into this:\n```css\n@media (min-width: 640px) {\n  /* ... */\n}\n```\n",
+			"references": [
+				{
+					"name": "Tailwind Documentation",
+					"url": "https://tailwindcss.com/docs/functions-and-directives#screen"
+				}
+			]
+		},
+		{
+			"name": "@variants",
+			"description": "Generate `hover`, `focus`, `active` and other **variants** of your own utilities by wrapping their definitions in the `@variants` directive:\n```css\n@variants hover, focus {\n   .btn-brand {\n    background-color: #3182CE;\n  }\n}\n```\n",
+			"references": [
+				{
+					"name": "Tailwind Documentation",
+					"url": "https://tailwindcss.com/docs/functions-and-directives#variants"
+				}
+			]
+		}
+	]
+}

config/11ty/shortcodes.js

@@ -20,27 +20,7 @@ const stringifyAttributes = (attributeMap) => {
 
 const insertImage = async function (source, alt, options) {
 	const classes = options?.classes || '';
-	const dark = options?.dark || false;
-
-	if (!dark) {
-		source = path.join('images', `${this.page.fileSlug}/${source}`);
-	} else if (dark !== -1) {
-		return (
-			(await insertImage(
-				path.join('images', `${this.page.fileSlug}/${source}`),
-				alt,
-				{ classes: classes + ' light', dark: -1 },
-			)) +
-			(await insertImage(
-				path.join('images', `${this.page.fileSlug}/${dark}`),
-				alt,
-				{
-					classes: classes + ' dark',
-					dark: -1,
-				},
-			))
-		);
-	}
+	source = path.join('images', `${this.page.fileSlug}/${source}`);
 
 	const dimensions = sizeOf(source);
 

config/markdown/core.js

@@ -56,7 +56,12 @@ const markdownLibrary = markdownIt({
 	})
 	.use(
 		await markdownItShiki({
-			themes: { light: 'github-light', dark: 'github-dark' },
+			themes: {
+				latte: 'catppuccin-latte',
+				frappe: 'catppuccin-frappe',
+				macchiato: 'catppuccin-macchiato',
+				mocha: 'catppuccin-mocha',
+			},
 			defaultColor: false,
 			transformers: [
 				transformerNotationDiff(),

config/transforms/css.js

@@ -4,6 +4,7 @@ import postcss from 'postcss';
 import * as sass from 'sass';
 
 import { createRequire } from 'node:module';
+import path from 'node:path';
 const require = createRequire(import.meta.url);
 
 const targets = browserslistToTargets(browserslist('defaults'));
@@ -34,6 +35,7 @@ export async function processTailwindCss(content) {
 export async function processSass(content) {
 	const processed = await sass.compileStringAsync(content, {
 		sourceMap: false,
+		loadPaths: [path.join(import.meta.dirname, '../../node_modules/')],
 	});
 
 	return processed.css;

config/transforms/javascript.js

@@ -1,7 +1,14 @@
 import { minify } from 'terser';
+import site from '../../site.config.js';
 
 export async function minifyJavascript(content) {
-	const minified = await minify(content);
+	const minified = await minify(content, {
+		compress: {
+			global_defs: {
+				site: site,
+			},
+		},
+	});
 
 	return minified.code;
 }

package.json

@@ -16,6 +16,7 @@
 		"@11ty/eleventy-fetch": "^4.0.1",
 		"@11ty/eleventy-img": "^4.0.2",
 		"@aloskutov/eleventy-plugin-external-links": "^2.1.1",
+		"@catppuccin/palette": "^1.1.0",
 		"@ryanccn/eleventy-plugin-rss": "^1.2.2",
 		"@shikijs/markdown-it": "1.2.0",
 		"@shikijs/transformers": "1.2.0",

public/giscus/frappe.css

@@ -0,0 +1,81 @@
+main {
+  --color-prettylights-syntax-comment: #838ba7;
+  --color-prettylights-syntax-constant: #8caaee;
+  --color-prettylights-syntax-entity: #8caaee;
+  --color-prettylights-syntax-storage-modifier-import: #ef9f76;
+  --color-prettylights-syntax-entity-tag: #81c8be;
+  --color-prettylights-syntax-keyword: #f4b8e4;
+  --color-prettylights-syntax-string: #a6d189;
+  --color-prettylights-syntax-variable: #ef9f76;
+  --color-prettylights-syntax-invalid-illegal-text: #e78284;
+  --color-prettylights-syntax-invalid-illegal-bg: rgba(231, 130, 132, 0.15);
+  --color-prettylights-syntax-markup-heading: #81c8be;
+  --color-prettylights-syntax-markup-italic: #e5c890;
+  --color-prettylights-syntax-markup-bold: #e5c890;
+  --color-prettylights-syntax-markup-deleted-text: #c6d0f5;
+  --color-prettylights-syntax-markup-deleted-bg: rgba(231, 130, 132, 0.4);
+  --color-prettylights-syntax-markup-inserted-text: #c6d0f5;
+  --color-prettylights-syntax-markup-inserted-bg: rgba(166, 209, 137, 0.4);
+  --color-prettylights-syntax-markup-changed-text: #c6d0f5;
+  --color-prettylights-syntax-markup-changed-bg: rgba(229, 200, 144, 0.4);
+  --color-prettylights-syntax-markup-ignored-text: #c6d0f5;
+  --color-btn-text: #c6d0f5;
+  --color-btn-bg: #414559;
+  --color-btn-border: #51576d;
+  --color-btn-hover-bg: #51576d;
+  --color-btn-hover-border: #626880;
+  --color-btn-active-bg: #626880;
+  --color-btn-selected-bg: #626880;
+  --color-btn-counter-bg: #626880;
+  --color-btn-outline-text: #ca9ee6;
+  --color-btn-shadow: 0 0 transparent;
+  --color-btn-inset-shadow: 0 0 transparent;
+  --color-btn-primary-text: #303446;
+  --color-btn-primary-bg: #a6d189;
+  --color-btn-primary-border: transparent;
+  --color-btn-primary-shadow: 0 0 transparent;
+  --color-btn-primary-inset-shadow: 0 0 transparent;
+  --color-btn-primary-hover-bg: #c2dfae;
+  --color-btn-primary-hover-border: #c2dfae;
+  --color-btn-primary-selected-bg: #c2dfae;
+  --color-btn-primary-selected-shadow: 0 0 transparent;
+  --color-btn-primary-disabled-text: #232634;
+  --color-btn-primary-disabled-bg: rgba(166, 209, 137, 0.4);
+  --color-btn-primary-disabled-border: transparent;
+  --color-action-list-item-default-hover-bg: #51576d;
+  --color-segmented-control-bg: #626880;
+  --color-segmented-control-button-bg: #303446;
+  --color-segmented-control-button-selected-border: #737994;
+  --color-fg-default: #c6d0f5;
+  --color-fg-muted: #b5bfe2;
+  --color-fg-subtle: #b5bfe2;
+  --color-canvas-default: #303446;
+  --color-canvas-overlay: #414559;
+  --color-canvas-inset: #232634;
+  --color-canvas-subtle: #292c3c;
+  --color-border-default: #51576d;
+  --color-border-muted: #414559;
+  --color-neutral-muted: rgba(115, 121, 148, 0.4);
+  --color-accent-fg: #ca9ee6;
+  --color-accent-emphasis: #ca9ee6;
+  --color-accent-muted: rgba(202, 158, 230, 0.4);
+  --color-accent-subtle: rgba(202, 158, 230, 0.15);
+  --color-success-fg: #a6d189;
+  --color-attention-fg: #ef9f76;
+  --color-attention-muted: #ca9ee6;
+  --color-attention-subtle: rgba(202, 158, 230, 0.15);
+  --color-danger-fg: #e78284;
+  --color-danger-muted: rgba(231, 130, 132, 0.4);
+  --color-danger-subtle: rgba(231, 130, 132, 0.8);
+  --color-primer-shadow-inset: 0 0 transparent;
+  --color-scale-gray-7: #51576d;
+  --color-scale-blue-8: #6089e7;
+  --color-social-reaction-bg-hover: var(--color-scale-gray-7);
+  --color-social-reaction-bg-reacted-hover: var(--color-scale-blue-8);
+}
+main .gsc-comment-box-textarea::placeholder {
+  color: #a5adce;
+}
+main .gsc-loading-image {
+  background-image: url("https://raw.githubusercontent.com/uncenter/ctp-giscus/main/assets/loading.gif");
+}

public/giscus/latte.css

@@ -0,0 +1,81 @@
+main {
+  --color-prettylights-syntax-comment: #8c8fa1;
+  --color-prettylights-syntax-constant: #1e66f5;
+  --color-prettylights-syntax-entity: #1e66f5;
+  --color-prettylights-syntax-storage-modifier-import: #fe640b;
+  --color-prettylights-syntax-entity-tag: #179299;
+  --color-prettylights-syntax-keyword: #ea76cb;
+  --color-prettylights-syntax-string: #40a02b;
+  --color-prettylights-syntax-variable: #fe640b;
+  --color-prettylights-syntax-invalid-illegal-text: #d20f39;
+  --color-prettylights-syntax-invalid-illegal-bg: rgba(210, 15, 57, 0.15);
+  --color-prettylights-syntax-markup-heading: #179299;
+  --color-prettylights-syntax-markup-italic: #df8e1d;
+  --color-prettylights-syntax-markup-bold: #df8e1d;
+  --color-prettylights-syntax-markup-deleted-text: #4c4f69;
+  --color-prettylights-syntax-markup-deleted-bg: rgba(210, 15, 57, 0.4);
+  --color-prettylights-syntax-markup-inserted-text: #4c4f69;
+  --color-prettylights-syntax-markup-inserted-bg: rgba(64, 160, 43, 0.4);
+  --color-prettylights-syntax-markup-changed-text: #4c4f69;
+  --color-prettylights-syntax-markup-changed-bg: rgba(223, 142, 29, 0.4);
+  --color-prettylights-syntax-markup-ignored-text: #4c4f69;
+  --color-btn-text: #4c4f69;
+  --color-btn-bg: #ccd0da;
+  --color-btn-border: #bcc0cc;
+  --color-btn-hover-bg: #bcc0cc;
+  --color-btn-hover-border: #acb0be;
+  --color-btn-active-bg: #acb0be;
+  --color-btn-selected-bg: #acb0be;
+  --color-btn-counter-bg: #acb0be;
+  --color-btn-outline-text: #8839ef;
+  --color-btn-shadow: 0 0 transparent;
+  --color-btn-inset-shadow: 0 0 transparent;
+  --color-btn-primary-text: #eff1f5;
+  --color-btn-primary-bg: #40a02b;
+  --color-btn-primary-border: transparent;
+  --color-btn-primary-shadow: 0 0 transparent;
+  --color-btn-primary-inset-shadow: 0 0 transparent;
+  --color-btn-primary-hover-bg: #50c836;
+  --color-btn-primary-hover-border: #50c836;
+  --color-btn-primary-selected-bg: #50c836;
+  --color-btn-primary-selected-shadow: 0 0 transparent;
+  --color-btn-primary-disabled-text: #dce0e8;
+  --color-btn-primary-disabled-bg: rgba(64, 160, 43, 0.4);
+  --color-btn-primary-disabled-border: transparent;
+  --color-action-list-item-default-hover-bg: #bcc0cc;
+  --color-segmented-control-bg: #acb0be;
+  --color-segmented-control-button-bg: #eff1f5;
+  --color-segmented-control-button-selected-border: #9ca0b0;
+  --color-fg-default: #4c4f69;
+  --color-fg-muted: #5c5f77;
+  --color-fg-subtle: #5c5f77;
+  --color-canvas-default: #eff1f5;
+  --color-canvas-overlay: #ccd0da;
+  --color-canvas-inset: #dce0e8;
+  --color-canvas-subtle: #e6e9ef;
+  --color-border-default: #bcc0cc;
+  --color-border-muted: #ccd0da;
+  --color-neutral-muted: rgba(156, 160, 176, 0.4);
+  --color-accent-fg: #8839ef;
+  --color-accent-emphasis: #8839ef;
+  --color-accent-muted: rgba(136, 57, 239, 0.4);
+  --color-accent-subtle: rgba(136, 57, 239, 0.15);
+  --color-success-fg: #40a02b;
+  --color-attention-fg: #fe640b;
+  --color-attention-muted: #8839ef;
+  --color-attention-subtle: rgba(136, 57, 239, 0.15);
+  --color-danger-fg: #d20f39;
+  --color-danger-muted: rgba(210, 15, 57, 0.4);
+  --color-danger-subtle: rgba(210, 15, 57, 0.8);
+  --color-primer-shadow-inset: 0 0 transparent;
+  --color-scale-gray-7: #bcc0cc;
+  --color-scale-blue-8: #0a4ed6;
+  --color-social-reaction-bg-hover: var(--color-scale-gray-7);
+  --color-social-reaction-bg-reacted-hover: var(--color-scale-blue-8);
+}
+main .gsc-comment-box-textarea::placeholder {
+  color: #6c6f85;
+}
+main .gsc-loading-image {
+  background-image: url("https://raw.githubusercontent.com/uncenter/ctp-giscus/main/assets/loading.gif");
+}