metadata and logo stuff
This commit is contained in:
parent
4dc7d943ec
commit
cb84d1a647
82
default.nix
82
default.nix
@ -1,9 +1,9 @@
|
||||
{ pkgs, google-chrome, symlinkJoin, stdenv, elmPackages, ... }:
|
||||
{ pkgs, google-chrome, symlinkJoin, stdenv, elmPackages, libjpeg, optipng, ... }:
|
||||
|
||||
let
|
||||
pnpm2nix = pkgs.callPackage (builtins.fetchGit {
|
||||
url = "https://github.com/notgne2/pnpm2nix.git";
|
||||
rev = "21e7f567485d5095343d5c397638e4dbeca0b4a4";
|
||||
rev = "909accd35d23664254b43109ee58cd0c3d83a6d9";
|
||||
}) {};
|
||||
|
||||
nodeCleanSourceFilter = name: type: pkgs.lib.cleanSourceFilter name type &&
|
||||
@ -41,11 +41,36 @@ let
|
||||
chmod +x $local_chromium/chrome-linux/chrome
|
||||
'';
|
||||
}));
|
||||
gifsicle = (drv: drv.overrideAttrs(oldAttrs: {
|
||||
buildInputs = oldAttrs.buildInputs ++ [ pkgs.autoconf pkgs.automake ];
|
||||
}));
|
||||
jpegtran = (drv: drv.overrideAttrs(oldAttrs: {
|
||||
buildInputs = [ libjpeg ];
|
||||
}));
|
||||
optipng = (drv: drv.overrideAttrs(oldAttrs: {
|
||||
buildInputs = [ optipng ];
|
||||
}));
|
||||
optipng-bin = (drv: drv.overrideAttrs(oldAttrs: {
|
||||
preBuild = ''
|
||||
mkdir -p $HOME/node_modules/optipng-bin/vendor
|
||||
ln -s ${optipng}/bin/optipng $HOME/node_modules/optipng-bin/vendor/optipng
|
||||
'';
|
||||
}));
|
||||
jpegtran-bin = (drv: drv.overrideAttrs(oldAttrs: {
|
||||
preBuild = ''
|
||||
mkdir -p $HOME/node_modules/jpegtran-bin/vendor
|
||||
ln -s ${libjpeg}/bin/jpegtran $HOME/node_modules/jpegtran-bin/vendor/jpegtran
|
||||
'';
|
||||
}));
|
||||
};
|
||||
};
|
||||
|
||||
mkWandardFront = {
|
||||
name,
|
||||
prettyName ? name,
|
||||
description ? "",
|
||||
themeColor ? "#000000",
|
||||
backgroundColor ? "#000000",
|
||||
src,
|
||||
nodePackages ? null,
|
||||
routes ? [ "/" ],
|
||||
@ -61,6 +86,10 @@ let
|
||||
baseWebpackConfig = builtins.readFile ./webpack.config.js;
|
||||
webpackConfig = ''
|
||||
const ROUTES = ${builtins.toJSON routes}
|
||||
const PRETTY_NAME = ${builtins.toJSON prettyName}
|
||||
const DESCRIPTION = ${builtins.toJSON description}
|
||||
const THEME_COLOR = ${builtins.toJSON themeColor}
|
||||
const BACKGROUND_COLOR = ${builtins.toJSON backgroundColor}
|
||||
'' + "\n" + baseWebpackConfig;
|
||||
webpackConfigFile = pkgs.writeText "${name}-webpack-config" webpackConfig;
|
||||
|
||||
@ -70,6 +99,54 @@ let
|
||||
sourceTarget.src = '/main.js'
|
||||
document.body.appendChild(sourceTarget)
|
||||
'';
|
||||
|
||||
templateHtml = pkgs.writeText "template-html" ''
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
|
||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||
<link rel="apple-touch-icon" sizes="57x57" href="/appdata/apple-touch-icon-57x57.png">
|
||||
<link rel="apple-touch-icon" sizes="60x60" href="/appdata/apple-touch-icon-60x60.png">
|
||||
<link rel="apple-touch-icon" sizes="72x72" href="/appdata/apple-touch-icon-72x72.png">
|
||||
<link rel="apple-touch-icon" sizes="76x76" href="/appdata/apple-touch-icon-76x76.png">
|
||||
<link rel="apple-touch-icon" sizes="114x114" href="/appdata/apple-touch-icon-114x114.png">
|
||||
<link rel="apple-touch-icon" sizes="120x120" href="/appdata/apple-touch-icon-120x120.png">
|
||||
<link rel="apple-touch-icon" sizes="144x144" href="/appdata/apple-touch-icon-144x144.png">
|
||||
<link rel="apple-touch-icon" sizes="152x152" href="/appdata/apple-touch-icon-152x152.png">
|
||||
<link rel="apple-touch-icon" sizes="167x167" href="/appdata/apple-touch-icon-167x167.png">
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/appdata/apple-touch-icon-180x180.png">
|
||||
<link rel="apple-touch-icon" sizes="1024x1024" href="/appdata/apple-touch-icon-1024x1024.png">
|
||||
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)" href="/appdata/apple-touch-startup-image-320x460.png">
|
||||
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)" href="/appdata/apple-touch-startup-image-640x920.png">
|
||||
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="/appdata/apple-touch-startup-image-640x1096.png">
|
||||
<link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" href="/appdata/apple-touch-startup-image-750x1294.png">
|
||||
<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3)" href="/appdata/apple-touch-startup-image-1182x2208.png">
|
||||
<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3)" href="/appdata/apple-touch-startup-image-1242x2148.png">
|
||||
<link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)" href="/appdata/apple-touch-startup-image-748x1024.png">
|
||||
<link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" href="/appdata/apple-touch-startup-image-1496x2048.png">
|
||||
<link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)" href="/appdata/apple-touch-startup-image-768x1004.png">
|
||||
<link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" href="/appdata/apple-touch-startup-image-1536x2008.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/appdata/favicon-16x16.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/appdata/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="228x228" href="/appdata/coast-228x228.png">
|
||||
<link rel="manifest" href="/appdata/manifest.json">
|
||||
<link rel="shortcut icon" href="/appdata/favicon.ico">
|
||||
<link rel="yandex-tableau-widget" href="/appdata/yandex-browser-manifest.json">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
||||
<meta name="apple-mobile-web-app-title">
|
||||
<meta name="application-name" content="${prettyName}">
|
||||
<meta name="mobile-web-app-capable" content="yes">
|
||||
<meta name="msapplication-TileColor" content="#fff">
|
||||
<meta name="msapplication-TileImage" content="/appdata/mstile-144x144.png">
|
||||
<meta name="msapplication-config" content="/appdata/browserconfig.xml">
|
||||
<meta name="theme-color" content="${themeColor}">
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
'';
|
||||
in
|
||||
stdenv.mkDerivation {
|
||||
inherit name;
|
||||
@ -86,6 +163,7 @@ let
|
||||
ln -sf ${nodeSource}/node_modules .
|
||||
cp ${webpackConfigFile} webpack.config.js
|
||||
cp ${wandInit} wand.js
|
||||
cp ${templateHtml} template.html
|
||||
'';
|
||||
|
||||
shellHook = ''
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
"dependencies": {
|
||||
"copy-webpack-plugin": "^5.1.1",
|
||||
"elm-webpack-loader": "^6.0.1",
|
||||
"favicons-webpack-plugin": "^1.0.2",
|
||||
"html-webpack-plugin": "^3.2.0",
|
||||
"imagemin-webpack-plugin": "^2.4.2",
|
||||
"jsdom": "^15.2.1",
|
||||
@ -10,7 +11,6 @@
|
||||
"terser-webpack-plugin": "^2.3.1",
|
||||
"webpack": "^4.41.4",
|
||||
"webpack-cli": "^3.3.10",
|
||||
"webpack-manifest-plugin": "^2.2.0",
|
||||
"workbox-webpack-plugin": "^4.3.1"
|
||||
},
|
||||
"name": "wand-front-utils",
|
||||
@ -22,4 +22,4 @@
|
||||
"author": "notgne2",
|
||||
"license": "AGPL-3.0",
|
||||
"description": ""
|
||||
}
|
||||
}
|
||||
1048
pnpm-lock.yaml
generated
1048
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@ -5,8 +5,8 @@ const PrerenderSPAPlugin = require('prerender-spa-plugin')
|
||||
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
|
||||
const CopyPlugin = require('copy-webpack-plugin')
|
||||
const { InjectManifest } = require('workbox-webpack-plugin')
|
||||
const ManifestPlugin = require('webpack-manifest-plugin')
|
||||
const ImageminPlugin = require('imagemin-webpack-plugin').default
|
||||
const FaviconsWebpackPlugin = require('favicons-webpack-plugin')
|
||||
const { JSDOM } = require('jsdom')
|
||||
const tempy = require('tempy')
|
||||
const fs = require('fs')
|
||||
@ -20,7 +20,7 @@ const magicFile = (text) => {
|
||||
// const magicAppend = (orig, text, sep = '\n') => magicFile(fs.readFileSync(orig) + sep + text)
|
||||
|
||||
const jsMin = {
|
||||
pure_funcs: ["F2", "F3", "F4", "F5", "F6", "F7", "F8", "F9", "A2", "A3", "A4", "A5", "A6", "A7", "A8", "A9"],
|
||||
pure_funcs: ['F2', 'F3', 'F4', 'F5', 'F6', 'F7', 'F8', 'F9', 'A2', 'A3', 'A4', 'A5', 'A6', 'A7', 'A8', 'A9'],
|
||||
pure_getters: true,
|
||||
keep_fargs: false,
|
||||
unsafe_comps: true,
|
||||
@ -29,11 +29,54 @@ const jsMin = {
|
||||
mangle: true,
|
||||
}
|
||||
|
||||
prerenderOpts = (width, height, name) => ({
|
||||
outputDir: path.join(__dirname, 'dist', 'prerender', name),
|
||||
staticDir: path.join(__dirname, 'dist'),
|
||||
routes: ROUTES,
|
||||
minify: {
|
||||
minifyCSS: {
|
||||
compatibility: 'ie9',
|
||||
level: 2
|
||||
},
|
||||
minifyJS: jsMin,
|
||||
|
||||
collapseBooleanAttributes: true,
|
||||
collapseWhitespace: true,
|
||||
removeRedundantAttributes: true,
|
||||
removeScriptTypeAttributes: true,
|
||||
removeStyleLinkTypeAttributes: true,
|
||||
|
||||
removeComments: true,
|
||||
sortAttributes: true,
|
||||
sortClassName: true,
|
||||
},
|
||||
renderer: new Renderer({
|
||||
renderAfterTime: 500,
|
||||
viewport: {
|
||||
width: width,
|
||||
height: height,
|
||||
deviceScaleFactor: 1,
|
||||
}
|
||||
}),
|
||||
postProcess(renderedRoute) {
|
||||
const dom = new JSDOM(renderedRoute.html, { runScripts: 'outside-only' })
|
||||
dom.window.eval(`
|
||||
const wandTarget = document.createElement('script')
|
||||
wandTarget.src = '/wand.js'
|
||||
document.body.appendChild(wandTarget)
|
||||
`)
|
||||
return {
|
||||
...renderedRoute,
|
||||
html: dom.serialize(),
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
module.exports = {
|
||||
output: {
|
||||
filename: "main.js",
|
||||
path: path.join(__dirname, "dist"),
|
||||
publicPath: "/"
|
||||
filename: 'main.js',
|
||||
path: path.join(__dirname, 'dist'),
|
||||
publicPath: '/'
|
||||
},
|
||||
module: {
|
||||
rules: [{
|
||||
@ -46,59 +89,37 @@ module.exports = {
|
||||
}],
|
||||
},
|
||||
plugins: [
|
||||
new ManifestPlugin(),
|
||||
new ImageminPlugin({
|
||||
disable: false,
|
||||
pngquant: {
|
||||
quality: '95-100'
|
||||
}
|
||||
}),
|
||||
new TerserPlugin({
|
||||
terserOptions: jsMin,
|
||||
}),
|
||||
new CopyPlugin([{ from: 'data', to: 'data' }, { from: 'wand.js', to: 'wand.js' }]),
|
||||
new ImageminPlugin({
|
||||
jpegtran: { progressive: true },
|
||||
}),
|
||||
new HtmlWebpackPlugin({
|
||||
hash: true,
|
||||
inject: true,
|
||||
name: PRETTY_NAME,
|
||||
template: './template.html',
|
||||
meta: {
|
||||
viewport: 'width=device-width, initial-scale=1'
|
||||
}
|
||||
}),
|
||||
new CopyPlugin([{ from: 'data', to: 'data' }, { from: 'wand.js', to: 'wand.js' }]),
|
||||
new PrerenderSPAPlugin({
|
||||
staticDir: path.join(__dirname, 'dist'),
|
||||
routes: ROUTES,
|
||||
minify: {
|
||||
minifyCSS: {
|
||||
compatibility: 'ie9',
|
||||
level: 2
|
||||
},
|
||||
minifyJS: jsMin,
|
||||
|
||||
collapseBooleanAttributes: true,
|
||||
collapseWhitespace: true,
|
||||
removeRedundantAttributes: true,
|
||||
removeScriptTypeAttributes: true,
|
||||
removeStyleLinkTypeAttributes: true,
|
||||
|
||||
removeComments: true,
|
||||
sortAttributes: true,
|
||||
sortClassName: true,
|
||||
},
|
||||
renderer: new Renderer({
|
||||
renderAfterTime: 500,
|
||||
}),
|
||||
postProcess(renderedRoute) {
|
||||
const dom = new JSDOM(renderedRoute.html, { runScripts: 'outside-only' })
|
||||
dom.window.eval(`
|
||||
const wandTarget = document.createElement('script')
|
||||
wandTarget.src = '/wand.js'
|
||||
document.body.appendChild(wandTarget)
|
||||
`)
|
||||
return {
|
||||
...renderedRoute,
|
||||
html: dom.serialize(),
|
||||
}
|
||||
},
|
||||
new FaviconsWebpackPlugin({
|
||||
logo: path.join(__dirname, 'data', 'images', 'logo.png'),
|
||||
inject: false, // manually in our template for now cos its fuckd
|
||||
mode: 'webapp',
|
||||
prefix: 'appdata',
|
||||
favicons: {
|
||||
appName: PRETTY_NAME,
|
||||
appDescription: DESCRIPTION,
|
||||
background: BACKGROUND_COLOR,
|
||||
theme_color: THEME_COLOR,
|
||||
}
|
||||
}),
|
||||
new PrerenderSPAPlugin(prerenderOpts(1920, 1080, 'desktop')),
|
||||
new PrerenderSPAPlugin(prerenderOpts(375, 667, 'phone')),
|
||||
new PrerenderSPAPlugin(prerenderOpts(768, 1024, 'tablet')),
|
||||
new InjectManifest({
|
||||
importWorkboxFrom: 'local',
|
||||
swSrc: magicFile(`
|
||||
|
||||
Loading…
Reference in New Issue
Block a user