add vite bundler
This commit is contained in:
Joshua Seigler
parent
e9eeff880e
commit
320b777b99
7 changed files with 1260 additions and 142 deletions
1
.gitignore
vendored
1
.gitignore
vendored
|
|
@ -2,3 +2,4 @@ dist
|
|||
node_modules
|
||||
.plugin-clean
|
||||
.cache
|
||||
.11ty-vite
|
||||
|
|
|
|||
|
|
@ -1,22 +1,15 @@
|
|||
"use strict";
|
||||
|
||||
const darkModeMediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
|
||||
|
||||
document.querySelector('script[data-website-id]').addEventListener('load', () => {
|
||||
try {
|
||||
umami.identify({ deviceTheme: darkModeMediaQuery ? "dark" : "light" });
|
||||
} catch {}
|
||||
});
|
||||
|
||||
/** @param {Event} evt */
|
||||
function removeEffect({ target }) {
|
||||
const effectsLayer = document.querySelector("#effects");
|
||||
if (effectsLayer == null) { return };
|
||||
const effects = Array.from(effectsLayer.children).filter(
|
||||
(e) => e.__effectParent === target,
|
||||
(e) => e['__effectParent'] === target,
|
||||
);
|
||||
effects.forEach((e) => {
|
||||
e.getAnimations().forEach((anim) => {
|
||||
if (anim.currentTime < 100) {
|
||||
if (+(anim.currentTime ?? 0) < 100) {
|
||||
anim.pause();
|
||||
effectsLayer.removeChild(e);
|
||||
return;
|
||||
|
|
@ -33,12 +26,14 @@ function removeEffect({ target }) {
|
|||
});
|
||||
}
|
||||
|
||||
/** @param {Event} evt */
|
||||
function addEffect({ target }) {
|
||||
function isElement(target: EventTarget | null): target is Element {
|
||||
return target !== null && typeof target["matches"] === 'function'
|
||||
}
|
||||
|
||||
function addEffect({ target }: UIEvent) {
|
||||
const effectsLayer = document.querySelector("#effects");
|
||||
if (
|
||||
target == null ||
|
||||
!target["matches"] ||
|
||||
!isElement(target) ||
|
||||
!target.matches("a[href],.nav-toggle-button,button,input[type='radio']")
|
||||
) {
|
||||
return;
|
||||
|
|
@ -51,7 +46,7 @@ function addEffect({ target }) {
|
|||
rects.forEach((rect) => {
|
||||
const { top, left, width, height } = rect;
|
||||
const newEffect = document.createElement("div");
|
||||
newEffect.__effectParent = target;
|
||||
newEffect['__effectParent'] = target;
|
||||
newEffect.classList.add("effect-instance");
|
||||
const padding = "10rem";
|
||||
newEffect.style.top = `calc(${top + window.scrollY}px - ${padding})`;
|
||||
|
|
@ -59,7 +54,7 @@ function addEffect({ target }) {
|
|||
newEffect.style.width = `calc(${width}px + 2 * ${padding})`;
|
||||
newEffect.style.height = `calc(${height}px + 2 * ${padding})`;
|
||||
newEffect.style.setProperty('--glowColor', color);
|
||||
effectsLayer.appendChild(newEffect);
|
||||
effectsLayer?.appendChild(newEffect);
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -5,18 +5,18 @@ import mdAnchor from "markdown-it-anchor";
|
|||
import { spoiler as mdSpoiler } from "@mdit/plugin-spoiler";
|
||||
import { footnote as mdFootnote } from "@mdit/plugin-footnote";
|
||||
import mdLinkAttributes from "markdown-it-link-attributes";
|
||||
import prettier from "prettier";
|
||||
import mdPrism from "markdown-it-prism";
|
||||
import dayjs from "dayjs";
|
||||
import utc from "dayjs/plugin/utc.js";
|
||||
import clean from "eleventy-plugin-clean";
|
||||
import toc from "eleventy-plugin-toc";
|
||||
import site from "./site/_data/site.js";
|
||||
import { feedPlugin } from "@11ty/eleventy-plugin-rss";
|
||||
import { feedPlugin as EleventyFeedPlugin } from "@11ty/eleventy-plugin-rss";
|
||||
import EleventyVitePlugin from "@11ty/eleventy-plugin-vite";
|
||||
import { execSync } from "child_process";
|
||||
import eleventyAutoCacheBuster from "eleventy-auto-cache-buster";
|
||||
import mdPrism from "markdown-it-prism";
|
||||
import fetch from "@11ty/eleventy-fetch";
|
||||
import { XMLValidator, XMLParser } from "fast-xml-parser";
|
||||
import { ViteMinifyPlugin } from "vite-plugin-minify";
|
||||
|
||||
dayjs.extend(utc);
|
||||
|
||||
|
|
@ -116,26 +116,6 @@ export default async (config) => {
|
|||
|
||||
config.addCollection("webroll", fetchShaarliWebroll);
|
||||
|
||||
config.addTransform("prettier", (content, outputPath) => {
|
||||
if (typeof outputPath !== "string") {
|
||||
return content;
|
||||
}
|
||||
const extname = path.extname(outputPath);
|
||||
switch (extname) {
|
||||
case ".html":
|
||||
case ".css":
|
||||
case ".json":
|
||||
// Strip leading period from extension and use as the Prettier parser.
|
||||
const parser = extname.replace(/^./, "");
|
||||
return prettier.format(content, { parser });
|
||||
default:
|
||||
return content;
|
||||
}
|
||||
});
|
||||
|
||||
config.addFilter("absoluteURL", (url) => {
|
||||
return new URL(url, site.baseUrl).href;
|
||||
});
|
||||
config.addFilter("toISOString", (dateString) => {
|
||||
return new Date(dateString).toISOString();
|
||||
});
|
||||
|
|
@ -151,7 +131,7 @@ export default async (config) => {
|
|||
const buildTime = new Date().toISOString().replace(/[:.-]/g, "");
|
||||
config.addGlobalData("buildTime", buildTime);
|
||||
|
||||
config.addPlugin(feedPlugin, {
|
||||
config.addPlugin(EleventyFeedPlugin, {
|
||||
type: "atom", // "atom", ""rss", or "json"
|
||||
outputPath: "/feed.xml",
|
||||
collection: {
|
||||
|
|
@ -171,7 +151,20 @@ export default async (config) => {
|
|||
stylesheet: "/simple-atom.xslt",
|
||||
});
|
||||
|
||||
config.addPlugin(eleventyAutoCacheBuster);
|
||||
config.addPlugin(EleventyVitePlugin, {
|
||||
viteOptions: {
|
||||
server: {
|
||||
port: 8080
|
||||
},
|
||||
build: {
|
||||
mode: 'production',
|
||||
sourcemap: true,
|
||||
},
|
||||
plugins: [
|
||||
ViteMinifyPlugin({})
|
||||
]
|
||||
}
|
||||
});
|
||||
|
||||
config.addPlugin(toc);
|
||||
|
||||
|
|
|
|||
1298
package-lock.json
generated
1298
package-lock.json
generated
File diff suppressed because it is too large
Load diff
15
package.json
15
package.json
|
|
@ -5,9 +5,9 @@
|
|||
"description": "",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"dev": "npx @11ty/eleventy --serve",
|
||||
"dev": "npx @11ty/eleventy --incremental --serve",
|
||||
"build": "npx @11ty/eleventy",
|
||||
"publish": "npx @11ty/eleventy && gh-pages -d dist -b gh-pages"
|
||||
"publish": "npx @11ty/eleventy && npx gh-pages -d dist -b gh-pages"
|
||||
},
|
||||
"keywords": [],
|
||||
"author": "Joshua Seigler",
|
||||
|
|
@ -16,21 +16,20 @@
|
|||
"@11ty/eleventy": "^3.1.0",
|
||||
"@11ty/eleventy-fetch": "^5.1.0",
|
||||
"@11ty/eleventy-plugin-rss": "^2.0.4",
|
||||
"@11ty/eleventy-plugin-vite": "^6.0.0",
|
||||
"@mdit/plugin-footnote": "^0.22.0",
|
||||
"@mdit/plugin-spoiler": "^0.21.0",
|
||||
"@types/node": "^24.0.5",
|
||||
"@types/umami": "^2.10.0",
|
||||
"dayjs": "^1.11.11",
|
||||
"eleventy-auto-cache-buster": "^0.8.1",
|
||||
"eleventy-plugin-clean": "^2.0.1",
|
||||
"eleventy-plugin-toc": "^1.1.5",
|
||||
"fast-xml-parser": "^5.2.5",
|
||||
"gh-pages": "^6.3.0",
|
||||
"markdown-it-anchor": "^9.0.1",
|
||||
"markdown-it-link-attributes": "^4.0.1",
|
||||
"markdown-it-prism": "^3.0.0",
|
||||
"prettier": "^3.3.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"gh-pages": "^6.3.0",
|
||||
"pagefind": "^1.3.0"
|
||||
"pagefind": "^1.3.0",
|
||||
"vite-plugin-minify": "^2.1.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ title: Joshua's Homepage
|
|||
<link rel="stylesheet" href="{{ "/site.css" | url }}"/>
|
||||
<style>{% include "-inline-css.njk" %}</style>
|
||||
<script defer src="https://stats.apps.seigler.net/script.js" data-website-id="ccb4bd94-2a71-47fe-8eea-d85bf75b7f6d"></script>
|
||||
<script defer src="/scripts/effects.js"></script>
|
||||
<script defer src="/scripts/main.ts" type="module"></script>
|
||||
<link rel="me" href="https://github.com/seigler"/>
|
||||
<link rel="webmention" href="https://webmention.io/joshua.seigler.net/webmention"/>
|
||||
<title>{{ computedTitle }} - {{ site.title }}</title>
|
||||
|
|
@ -21,13 +21,13 @@ title: Joshua's Homepage
|
|||
{%- endif %}
|
||||
<meta property="og:title" content="{{ computedTitle }}"/>
|
||||
<meta property="og:type" content="{{ article }}"/>
|
||||
<meta property="og:url" content="{{ page.url | absoluteURL }}"/>
|
||||
<meta property="og:url" content="{{ page.url | url }}"/>
|
||||
<meta name="twitter:title" content="{{ computedTitle }}"/>
|
||||
<meta name="twitter:description" content="{{ description }}"/>
|
||||
{% if cover %}
|
||||
<meta property="og:image" content="{{ cover | absoluteURL }}"/>
|
||||
<meta name="twitter:image" content="{{ cover | absoluteURL }}"/>
|
||||
{% endif %}
|
||||
{%- if cover %}
|
||||
<meta property="og:image" content="{{ cover | url }}"/>
|
||||
<meta name="twitter:image" content="{{ cover | url }}"/>
|
||||
{%- endif %}
|
||||
<meta name="twitter:card" content="summary"/>
|
||||
<meta name="generator" content="{{ eleventy.generator }}">
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -7,6 +7,6 @@ title: Search
|
|||
<main>
|
||||
<div class="searchCard">
|
||||
<div id="searchbox"></div>
|
||||
<script src="/pagefind/pagefind-ui.js" onload="new PagefindUI({ element: '#searchbox', showImages: false, resetStyles: false, autofocus: true });"></script>
|
||||
<script src="/pagefind/pagefind-ui.js" type="module" onload="new PagefindUI({ element: '#searchbox', showImages: false, resetStyles: false, autofocus: true });"></script>
|
||||
</div>
|
||||
</main>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue