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
|
let
|
||||||
pnpm2nix = pkgs.callPackage (builtins.fetchGit {
|
pnpm2nix = pkgs.callPackage (builtins.fetchGit {
|
||||||
url = "https://github.com/notgne2/pnpm2nix.git";
|
url = "https://github.com/notgne2/pnpm2nix.git";
|
||||||
rev = "21e7f567485d5095343d5c397638e4dbeca0b4a4";
|
rev = "909accd35d23664254b43109ee58cd0c3d83a6d9";
|
||||||
}) {};
|
}) {};
|
||||||
|
|
||||||
nodeCleanSourceFilter = name: type: pkgs.lib.cleanSourceFilter name type &&
|
nodeCleanSourceFilter = name: type: pkgs.lib.cleanSourceFilter name type &&
|
||||||
@ -41,11 +41,36 @@ let
|
|||||||
chmod +x $local_chromium/chrome-linux/chrome
|
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 = {
|
mkWandardFront = {
|
||||||
name,
|
name,
|
||||||
|
prettyName ? name,
|
||||||
|
description ? "",
|
||||||
|
themeColor ? "#000000",
|
||||||
|
backgroundColor ? "#000000",
|
||||||
src,
|
src,
|
||||||
nodePackages ? null,
|
nodePackages ? null,
|
||||||
routes ? [ "/" ],
|
routes ? [ "/" ],
|
||||||
@ -61,6 +86,10 @@ let
|
|||||||
baseWebpackConfig = builtins.readFile ./webpack.config.js;
|
baseWebpackConfig = builtins.readFile ./webpack.config.js;
|
||||||
webpackConfig = ''
|
webpackConfig = ''
|
||||||
const ROUTES = ${builtins.toJSON routes}
|
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;
|
'' + "\n" + baseWebpackConfig;
|
||||||
webpackConfigFile = pkgs.writeText "${name}-webpack-config" webpackConfig;
|
webpackConfigFile = pkgs.writeText "${name}-webpack-config" webpackConfig;
|
||||||
|
|
||||||
@ -70,6 +99,54 @@ let
|
|||||||
sourceTarget.src = '/main.js'
|
sourceTarget.src = '/main.js'
|
||||||
document.body.appendChild(sourceTarget)
|
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
|
in
|
||||||
stdenv.mkDerivation {
|
stdenv.mkDerivation {
|
||||||
inherit name;
|
inherit name;
|
||||||
@ -86,6 +163,7 @@ let
|
|||||||
ln -sf ${nodeSource}/node_modules .
|
ln -sf ${nodeSource}/node_modules .
|
||||||
cp ${webpackConfigFile} webpack.config.js
|
cp ${webpackConfigFile} webpack.config.js
|
||||||
cp ${wandInit} wand.js
|
cp ${wandInit} wand.js
|
||||||
|
cp ${templateHtml} template.html
|
||||||
'';
|
'';
|
||||||
|
|
||||||
shellHook = ''
|
shellHook = ''
|
||||||
|
|||||||
@ -2,6 +2,7 @@
|
|||||||
"dependencies": {
|
"dependencies": {
|
||||||
"copy-webpack-plugin": "^5.1.1",
|
"copy-webpack-plugin": "^5.1.1",
|
||||||
"elm-webpack-loader": "^6.0.1",
|
"elm-webpack-loader": "^6.0.1",
|
||||||
|
"favicons-webpack-plugin": "^1.0.2",
|
||||||
"html-webpack-plugin": "^3.2.0",
|
"html-webpack-plugin": "^3.2.0",
|
||||||
"imagemin-webpack-plugin": "^2.4.2",
|
"imagemin-webpack-plugin": "^2.4.2",
|
||||||
"jsdom": "^15.2.1",
|
"jsdom": "^15.2.1",
|
||||||
@ -10,7 +11,6 @@
|
|||||||
"terser-webpack-plugin": "^2.3.1",
|
"terser-webpack-plugin": "^2.3.1",
|
||||||
"webpack": "^4.41.4",
|
"webpack": "^4.41.4",
|
||||||
"webpack-cli": "^3.3.10",
|
"webpack-cli": "^3.3.10",
|
||||||
"webpack-manifest-plugin": "^2.2.0",
|
|
||||||
"workbox-webpack-plugin": "^4.3.1"
|
"workbox-webpack-plugin": "^4.3.1"
|
||||||
},
|
},
|
||||||
"name": "wand-front-utils",
|
"name": "wand-front-utils",
|
||||||
|
|||||||
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 Renderer = PrerenderSPAPlugin.PuppeteerRenderer
|
||||||
const CopyPlugin = require('copy-webpack-plugin')
|
const CopyPlugin = require('copy-webpack-plugin')
|
||||||
const { InjectManifest } = require('workbox-webpack-plugin')
|
const { InjectManifest } = require('workbox-webpack-plugin')
|
||||||
const ManifestPlugin = require('webpack-manifest-plugin')
|
|
||||||
const ImageminPlugin = require('imagemin-webpack-plugin').default
|
const ImageminPlugin = require('imagemin-webpack-plugin').default
|
||||||
|
const FaviconsWebpackPlugin = require('favicons-webpack-plugin')
|
||||||
const { JSDOM } = require('jsdom')
|
const { JSDOM } = require('jsdom')
|
||||||
const tempy = require('tempy')
|
const tempy = require('tempy')
|
||||||
const fs = require('fs')
|
const fs = require('fs')
|
||||||
@ -20,7 +20,7 @@ const magicFile = (text) => {
|
|||||||
// const magicAppend = (orig, text, sep = '\n') => magicFile(fs.readFileSync(orig) + sep + text)
|
// const magicAppend = (orig, text, sep = '\n') => magicFile(fs.readFileSync(orig) + sep + text)
|
||||||
|
|
||||||
const jsMin = {
|
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,
|
pure_getters: true,
|
||||||
keep_fargs: false,
|
keep_fargs: false,
|
||||||
unsafe_comps: true,
|
unsafe_comps: true,
|
||||||
@ -29,11 +29,54 @@ const jsMin = {
|
|||||||
mangle: true,
|
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 = {
|
module.exports = {
|
||||||
output: {
|
output: {
|
||||||
filename: "main.js",
|
filename: 'main.js',
|
||||||
path: path.join(__dirname, "dist"),
|
path: path.join(__dirname, 'dist'),
|
||||||
publicPath: "/"
|
publicPath: '/'
|
||||||
},
|
},
|
||||||
module: {
|
module: {
|
||||||
rules: [{
|
rules: [{
|
||||||
@ -46,59 +89,37 @@ module.exports = {
|
|||||||
}],
|
}],
|
||||||
},
|
},
|
||||||
plugins: [
|
plugins: [
|
||||||
new ManifestPlugin(),
|
|
||||||
new ImageminPlugin({
|
|
||||||
disable: false,
|
|
||||||
pngquant: {
|
|
||||||
quality: '95-100'
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
new TerserPlugin({
|
new TerserPlugin({
|
||||||
terserOptions: jsMin,
|
terserOptions: jsMin,
|
||||||
}),
|
}),
|
||||||
|
new CopyPlugin([{ from: 'data', to: 'data' }, { from: 'wand.js', to: 'wand.js' }]),
|
||||||
|
new ImageminPlugin({
|
||||||
|
jpegtran: { progressive: true },
|
||||||
|
}),
|
||||||
new HtmlWebpackPlugin({
|
new HtmlWebpackPlugin({
|
||||||
hash: true,
|
hash: true,
|
||||||
|
inject: true,
|
||||||
|
name: PRETTY_NAME,
|
||||||
|
template: './template.html',
|
||||||
meta: {
|
meta: {
|
||||||
viewport: 'width=device-width, initial-scale=1'
|
viewport: 'width=device-width, initial-scale=1'
|
||||||
}
|
}
|
||||||
}),
|
}),
|
||||||
new CopyPlugin([{ from: 'data', to: 'data' }, { from: 'wand.js', to: 'wand.js' }]),
|
new FaviconsWebpackPlugin({
|
||||||
new PrerenderSPAPlugin({
|
logo: path.join(__dirname, 'data', 'images', 'logo.png'),
|
||||||
staticDir: path.join(__dirname, 'dist'),
|
inject: false, // manually in our template for now cos its fuckd
|
||||||
routes: ROUTES,
|
mode: 'webapp',
|
||||||
minify: {
|
prefix: 'appdata',
|
||||||
minifyCSS: {
|
favicons: {
|
||||||
compatibility: 'ie9',
|
appName: PRETTY_NAME,
|
||||||
level: 2
|
appDescription: DESCRIPTION,
|
||||||
},
|
background: BACKGROUND_COLOR,
|
||||||
minifyJS: jsMin,
|
theme_color: THEME_COLOR,
|
||||||
|
}
|
||||||
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 PrerenderSPAPlugin(prerenderOpts(1920, 1080, 'desktop')),
|
||||||
|
new PrerenderSPAPlugin(prerenderOpts(375, 667, 'phone')),
|
||||||
|
new PrerenderSPAPlugin(prerenderOpts(768, 1024, 'tablet')),
|
||||||
new InjectManifest({
|
new InjectManifest({
|
||||||
importWorkboxFrom: 'local',
|
importWorkboxFrom: 'local',
|
||||||
swSrc: magicFile(`
|
swSrc: magicFile(`
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user