wizbos-pub/wand-front-utils
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

metadata and logo stuff

Browse Source
This commit is contained in:
notgne2 2019-12-20 04:20:57 -07:00
parent 4dc7d943ec
commit cb84d1a647
4 changed files with 1164 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
default.nix
View File

@ -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
package.json
View File

@ -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
View File

File diff suppressed because it is too large Load Diff

95
webpack.config.js
View File

@ -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,41 +29,8 @@ const jsMin = {
mangle: true, mangle: true,
} }
module.exports = { prerenderOpts = (width, height, name) => ({
output: { outputDir: path.join(__dirname, 'dist', 'prerender', name),
filename: "main.js",
path: path.join(__dirname, "dist"),
publicPath: "/"
},
module: {
rules: [{
test: /\.elm$/,
exclude: [/elm-stuff/, /node_modules/],
loader: 'elm-webpack-loader',
options: {
optimize: true
}
}],
},
plugins: [
new ManifestPlugin(),
new ImageminPlugin({
disable: false,
pngquant: {
quality: '95-100'
}
}),
new TerserPlugin({
terserOptions: jsMin,
}),
new HtmlWebpackPlugin({
hash: true,
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'), staticDir: path.join(__dirname, 'dist'),
routes: ROUTES, routes: ROUTES,
minify: { minify: {
@ -85,6 +52,11 @@ module.exports = {
}, },
renderer: new Renderer({ renderer: new Renderer({
renderAfterTime: 500, renderAfterTime: 500,
viewport: {
width: width,
height: height,
deviceScaleFactor: 1,
}
}), }),
postProcess(renderedRoute) { postProcess(renderedRoute) {
const dom = new JSDOM(renderedRoute.html, { runScripts: 'outside-only' }) const dom = new JSDOM(renderedRoute.html, { runScripts: 'outside-only' })
@ -97,8 +69,57 @@ module.exports = {
...renderedRoute, ...renderedRoute,
html: dom.serialize(), html: dom.serialize(),
} }
}
})
module.exports = {
output: {
filename: 'main.js',
path: path.join(__dirname, 'dist'),
publicPath: '/'
}, },
module: {
rules: [{
test: /\.elm$/,
exclude: [/elm-stuff/, /node_modules/],
loader: 'elm-webpack-loader',
options: {
optimize: true
}
}],
},
plugins: [
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 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({ new InjectManifest({
importWorkboxFrom: 'local', importWorkboxFrom: 'local',
swSrc: magicFile(` swSrc: magicFile(`