SebinNyshkim/sebin-reference
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: ✨ add vue.config.js with aliases, html head meta and image processing

Browse source
This commit is contained in:
Marcus Mietz 2020-08-26 19:17:13 +02:00
parent d7e8f55b41
commit 240507dc91
2 changed files with 92 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

20
public/index.html
View file

@ -4,25 +4,15 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Sebin Nyshkim - Reference Page</title> <link rel="<%= htmlWebpackPlugin.options.links.favicon.rel %>" href="<%= htmlWebpackPlugin.options.links.favicon.href %>" type="<%= htmlWebpackPlugin.options.links.favicon.type %>">
<link rel="favicon" href="/img/sebin-smug-icon.png" type="image/png"> <link rel="<%= htmlWebpackPlugin.options.links.icon.rel %>" href="<%= htmlWebpackPlugin.options.links.icon.href %>" type="<%= htmlWebpackPlugin.options.links.icon.type %>">
<link rel="icon" href="/img/sebin-smug-icon.png" type="image/png"> <title><%= htmlWebpackPlugin.options.title %></title>
<meta name="twitter:card" content="summary">
<meta name="twitter:creator" content="@SebinNyshkim">
<meta name="twitter:description" content="Learn everything about your favorite neighborhood derg, down to the minute details!">
<meta name="twitter:text:title" content="Sebin Nyshkim - Reference Page">
<meta name="twitter:image" content="https://ref.sebin-nyshkim.net/img/sebin-smug-icon.png">
<meta name="og:title" content="Sebin Nyshkim - Reference Page">
<meta name="og:type" content="website">
<meta name="og:url" content="https://ref.sebin-nyshkim.net">
<meta name="og:image" content="https://ref.sebin-nyshkim.net/img/sebin-smug-icon.png">
<meta name="og:description" content="Learn everything about your favorite neighborhood derg, down to the minute details!">
</head> </head>
<body> <body>
<noscript> <noscript>
<strong>We're sorry but sebin-reference doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript> </noscript>
<div class="bubbles"></div>
<div id="app"></div> <div id="app"></div>
<!-- built files will be auto injected --> <!-- built files will be auto injected -->
</body> </body>

87
vue.config.js Normal file
View file

@ -0,0 +1,87 @@
const path = require("path");
module.exports = {
publicPath: "",
css: {
sourceMap: process.env.NODE_ENV !== "production"
},
configureWebpack: {
resolve: {
alias: {
"@fonts": path.resolve(__dirname, "src/assets/fonts/"),
"@img": path.resolve(__dirname, "src/assets/img/"),
"@scss": path.resolve(__dirname, "src/scss/"),
"@data": path.resolve(__dirname, "src/data/"),
"@mixins": path.resolve(__dirname, "src/mixins/"),
"@components": path.resolve(__dirname, "src/components/")
}
}
},
chainWebpack: config => {
config.plugin("html").tap(args => {
const meta = {
title: "Sebin Nyshkim - Reference Page",
desc: "The official reference Page for Sebin Nyshkim",
type: "website",
url: "https://ref.sebin-nyshkim.net",
image: "favicon.png",
twitter: {
card: "summary",
creator: "@SebinNyshkim"
}
};
const links = {
icon: {
rel: "icon",
href: meta.image,
type: "image/png"
},
favicon: {
rel: "favicon",
href: meta.image,
type: "image/png"
}
};
args[0].title = meta.title;
args[0].links = links;
args[0].meta = {
"twitter:card": meta.twitter.card,
"twitter:creator": meta.twitter.creator,
"twitter:description": meta.desc,
"twitter:text:title": meta.title,
"twitter:image": meta.image,
"og:title": meta.title,
"og:type": meta.type,
"og:url": meta.url,
"og:image": meta.image,
"og:description": meta.desc
};
return args;
});
config.module
.rule("images")
.test(/\.(png|jpe?g|gif|webp|svg)(\?.*)?$/i)
.use("image-webpack-loader")
.loader("image-webpack-loader")
.tap(options => {
const newOpts = {
mozjpeg: {
progressive: true,
quality: 75
},
pngquant: {
quality: [0.65, 0.9],
speed: 4
},
gifsicle: {
interlaced: false
}
};
return { ...options, ...newOpts };
});
}
};