244 lines
8.4 KiB
JavaScript
244 lines
8.4 KiB
JavaScript
import { defineConfig } from "vite";
|
|
|
|
import elmPlugin from "vite-plugin-elm";
|
|
import { VitePWA } from "vite-plugin-pwa"
|
|
import viteCompression from "vite-plugin-compression"
|
|
// import vitePrerender from "vite-plugin-prerender"
|
|
// import prerender from '@prerenderer/rollup-plugin'
|
|
import { imagetools } from "vite-imagetools"
|
|
import htmlPlugin from "vite-plugin-html-config"
|
|
|
|
import { promises as fs } from "fs"
|
|
import path from "path"
|
|
|
|
// const Renderer = vitePrerender.PuppeteerRenderer;
|
|
|
|
/** @type {import("vite").UserConfig} */
|
|
export default defineConfig(async () => {
|
|
const pkg = JSON.parse(await fs.readFile(path.join(__dirname, "package.json")));
|
|
|
|
const lossyQuality = 85;
|
|
const prerenderOptions = {
|
|
staticDir: path.join(__dirname, "dist"),
|
|
routes: pkg.routes,
|
|
minify: {
|
|
collapseBooleanAttributes: true,
|
|
collapseInlineTagWhitespace: true,
|
|
collapseWhitespace: true,
|
|
decodeEntities: true,
|
|
sortAttributes: true,
|
|
sortClassName: true,
|
|
minifyCSS: true,
|
|
minifyJS: true,
|
|
removeAttributeQuotes: true,
|
|
removeComments: true,
|
|
removeScriptTypeAttributes: true,
|
|
removeStyleLinkTypeAttributes: true,
|
|
removeRedundantAttributes: true,
|
|
removeOptionalTags: true,
|
|
},
|
|
};
|
|
|
|
const host = process.env.URL || import.meta.url || "http://localhost";
|
|
const getURL = (path = "") => new URL(path, host).toString();
|
|
const getPath = (path = "") => {
|
|
const x = new URL(path, host);
|
|
return x.pathname + x.search;
|
|
// return await import("./" + path);
|
|
};
|
|
|
|
return {
|
|
plugins: [
|
|
htmlPlugin({
|
|
title: pkg.displayName,
|
|
|
|
// TODO .ico
|
|
favicon: getPath("/data/images/icon.png?h=16&w=16"),
|
|
|
|
links: [
|
|
{
|
|
rel: "apple-touch-icon",
|
|
href: getPath("/data/images/icon.png?h=180&w=180"),
|
|
sizes: "180x180",
|
|
},
|
|
{
|
|
rel: "icon",
|
|
href: getPath("/data/images/icon.png?h=32&w=32"),
|
|
sizes: "32x32",
|
|
type: "image/png",
|
|
},
|
|
{
|
|
rel: "icon",
|
|
href: getPath("/data/images/icon.png?h=16&w=16"),
|
|
sizes: "16x16",
|
|
type: "image/png",
|
|
},
|
|
{
|
|
rel: "mask-icon",
|
|
href: getPath("/data/images/icon.png?h=180&w=180"),
|
|
sizes: "180x180",
|
|
color: pkg.color,
|
|
},
|
|
{
|
|
rel: "icon",
|
|
href: getPath("/data/images/icon.png?h=16&w=16"),
|
|
sizes: "16x16",
|
|
},
|
|
// TODO .ico
|
|
{
|
|
rel: "icon",
|
|
href: getPath("/data/images/icon.png?h=16&w=16"),
|
|
sizes: "16x16",
|
|
},
|
|
],
|
|
|
|
metas: [
|
|
{
|
|
name: "description",
|
|
content: pkg.description,
|
|
},
|
|
{
|
|
name: "author",
|
|
content: pkg.author.name,
|
|
},
|
|
{
|
|
name: "theme-color",
|
|
content: pkg.color,
|
|
},
|
|
{
|
|
name: "og:url",
|
|
content: host,
|
|
},
|
|
{
|
|
name: "og:type",
|
|
content: "website",
|
|
},
|
|
{
|
|
name: "og:title",
|
|
content: pkg.displayName,
|
|
},
|
|
{
|
|
name: "og:description",
|
|
content: pkg.description,
|
|
},
|
|
{
|
|
name: "og:image",
|
|
content: getURL("/data/images/logo.png"),
|
|
},
|
|
{
|
|
name: "twitter:card",
|
|
content: "summary_large_image",
|
|
},
|
|
{
|
|
name: "twitter:domain",
|
|
content: "",
|
|
},
|
|
{
|
|
name: "twitter:url",
|
|
content: host,
|
|
},
|
|
{
|
|
name: "twitter:title",
|
|
content: pkg.displayName,
|
|
},
|
|
{
|
|
name: "twitter:description",
|
|
content: pkg.description,
|
|
},
|
|
{
|
|
name: "twitter:image",
|
|
content: getURL("/data/images/logo.png"),
|
|
},
|
|
],
|
|
}),
|
|
elmPlugin.plugin(),
|
|
VitePWA({
|
|
injectRegister: "auto",
|
|
registerType: "autoUpdate",
|
|
manifest: {
|
|
name: pkg.displayName,
|
|
// TODO better?
|
|
short_name: pkg.displayName,
|
|
description: pkg.description,
|
|
theme_color: pkg.color,
|
|
icons: [
|
|
{
|
|
src: getPath("/data/images/icon.png?h=192&w=192"),
|
|
sizes: "192x192",
|
|
type: "image/png",
|
|
},
|
|
{
|
|
src: getPath("/data/images/icon.png?h=512&w=512"),
|
|
sizes: "512x512",
|
|
type: "image/png",
|
|
},
|
|
{
|
|
src: getPath("/data/images/icon.png?h=512&w=512"),
|
|
sizes: "512x512",
|
|
type: "image/png",
|
|
purpose: "any maskable",
|
|
},
|
|
]
|
|
},
|
|
devOptions: {
|
|
enabled: true
|
|
}
|
|
}),
|
|
imagetools({
|
|
defaultDirectives: (url) => {
|
|
if (url.pathname.endsWith(".png")) {
|
|
return new URLSearchParams({
|
|
format: "webp",
|
|
lossless: true,
|
|
quality: 100,
|
|
});
|
|
}
|
|
|
|
if (url.pathname.endsWith(".l.png")) {
|
|
return new URLSearchParams({
|
|
format: "webp",
|
|
quality: lossyQuality,
|
|
});
|
|
}
|
|
|
|
if (url.pathname.endsWith(".jpg")) {
|
|
return new URLSearchParams({
|
|
format: "webp",
|
|
quality: lossyQuality,
|
|
});
|
|
}
|
|
|
|
return new URLSearchParams();
|
|
},
|
|
}),
|
|
viteCompression({
|
|
algorithm: "brotliCompress",
|
|
}),
|
|
// vitePrerender({
|
|
// ...prerenderOptions,
|
|
// outputDir: path.join(__dirname, "dist", "prerender", "mobile"),
|
|
// renderer: new Renderer({
|
|
// viewport: {
|
|
// isMobile: true,
|
|
// hasTouch: true,
|
|
// width: 450,
|
|
// height: 800,
|
|
// },
|
|
// }),
|
|
// }),
|
|
// vitePrerender({
|
|
// ...prerenderOptions,
|
|
// outputDir: path.join(__dirname, "dist", "prerender", "desktop"),
|
|
// renderer: new Renderer({
|
|
// viewport: {
|
|
// isMobile: false,
|
|
// hasTouch: false,
|
|
// width: 1500,
|
|
// height: 1000,
|
|
// },
|
|
// }),
|
|
// }),
|
|
],
|
|
}
|
|
});
|