Merge pull request #8159 from vector-im/jryans/versioned-img-urls
Use content hashing for font and image URLs
This commit is contained in:
J. Ryan Stinnett
GitHub
commit
d71e84b790
12 changed files with 670 additions and 203 deletions
721
package-lock.json
generated
721
package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -33,8 +33,8 @@
|
|||
"build:res": "node scripts/copy-res.js",
|
||||
"build:modernizr": "modernizr -c .modernizr.json -d src/vector/modernizr.js",
|
||||
"build:compile": "npm run reskindex && babel --source-maps -d lib src",
|
||||
"build:bundle": "cross-env NODE_ENV=production webpack-cli -p --progress --bail --mode production",
|
||||
"build:bundle:dev": "webpack-cli --progress --bail --mode development",
|
||||
"build:bundle": "cross-env NODE_ENV=production webpack -p --progress --bail --mode production",
|
||||
"build:bundle:dev": "webpack --progress --bail --mode development",
|
||||
"build:electron": "npm run clean && npm run build && npm run install:electron && build -wml --ia32 --x64",
|
||||
"build:react-sdk": "node scripts/npm-sub.js matrix-react-sdk run build",
|
||||
"build:js-sdk": "node scripts/npm-sub.js matrix-js-sdk run start:init",
|
||||
|
|
@ -100,6 +100,7 @@
|
|||
"concurrently": "^4.0.1",
|
||||
"cpx": "^1.3.2",
|
||||
"cross-env": "^4.0.0",
|
||||
"css-loader": "^2.1.0",
|
||||
"electron-builder": "^20.29.0",
|
||||
"electron-builder-squirrel-windows": "^11.6.1",
|
||||
"electron-devtools-installer": "^2.2.4",
|
||||
|
|
@ -110,6 +111,7 @@
|
|||
"eslint-plugin-flowtype": "^2.50.3",
|
||||
"eslint-plugin-react": "^7.11.1",
|
||||
"expect": "^1.16.0",
|
||||
"file-loader": "^3.0.1",
|
||||
"fs-extra": "^0.30.0",
|
||||
"html-webpack-plugin": "^3.2.0",
|
||||
"json-loader": "^0.5.3",
|
||||
|
|
@ -136,7 +138,6 @@
|
|||
"postcss-scss": "^1.0.6",
|
||||
"postcss-simple-vars": "^4.1.0",
|
||||
"postcss-strip-inline-comments": "^0.1.5",
|
||||
"raw-loader": "^0.5.1",
|
||||
"react-addons-perf": "^15.4.0",
|
||||
"react-addons-test-utils": "^15.6.0",
|
||||
"rimraf": "^2.4.3",
|
||||
|
|
|
|||
|
|
@ -130,7 +130,7 @@
|
|||
<div>
|
||||
<h3>_t("Search the room directory")</h3>
|
||||
<a class="mx_HomePage_room" href="#/directory">
|
||||
<img class="mx_HomePage_icon" src="img/icons-directory.svg">
|
||||
<img class="mx_HomePage_icon" src="home/images/icons-directory.svg">
|
||||
</a>
|
||||
<span class="mx_HomePage_comment">
|
||||
_t("Lots of rooms already exist in Matrix, linked to existing networks (Slack, IRC, Gitter etc) or independent. Check out the directory!")
|
||||
|
|
|
|||
24
res/home/images/icons-directory.svg
Normal file
24
res/home/images/icons-directory.svg
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg width="25px" height="25px" viewBox="0 0 25 25" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>icons_directory</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs></defs>
|
||||
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="Left-panel" transform="translate(-83.000000, -726.000000)">
|
||||
<g id="icons_directory">
|
||||
<g transform="translate(83.000000, 726.000000)">
|
||||
<path d="M12.5,25 C19.4035594,25 25,19.4035594 25,12.5 C25,5.59644063 19.4035594,0 12.5,0 C5.59644063,0 0,5.59644063 0,12.5 C0,19.4035594 5.59644063,25 12.5,25 Z" id="Oval-1-Copy-7" fill="#76CFA6"></path>
|
||||
<g id="Lines" transform="translate(6.000000, 7.000000)" stroke="#FFFFFF" stroke-linecap="round">
|
||||
<path d="M4,5.5 L9,5.5" id="Line"></path>
|
||||
<path d="M4,1.5 L13,1.5" id="Line-Copy-4"></path>
|
||||
<path d="M0,1.5 L2,1.5" id="Line" opacity="0.6"></path>
|
||||
<path d="M0,5.5 L2,5.5" id="Line" opacity="0.6"></path>
|
||||
<path d="M4,9.5 L11,9.5" id="Line-Copy-6"></path>
|
||||
<path d="M0,9.5 L2,9.5" id="Line-Copy-3" opacity="0.6"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
|
|
@ -100,8 +100,8 @@ limitations under the License.
|
|||
font-size: 16px;
|
||||
line-height: 25px;
|
||||
background-color: $form-bg-color;
|
||||
background-image: url(../../themes/status/img/dot.svg);
|
||||
box-shadow: 0px 5px 16px 0px rgba(25,12,46,0.16);
|
||||
background-image: url("$(status)/img/dot.svg");
|
||||
box-shadow: 0px 5px 16px 0px rgba(25,12,46,0.16);
|
||||
position: relative;
|
||||
text-align: center;
|
||||
}
|
||||
|
|
|
|||
15
res/themes/status/css/_fonts.scss
Normal file
15
res/themes/status/css/_fonts.scss
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
@font-face {
|
||||
font-family:PostGrotesk-Medium;
|
||||
src:url('https://status.im/fonts/PostGrotesk-Medium.eot');
|
||||
src:url('https://status.im/fonts/PostGrotesk-Medium.eot?#iefix') format("embedded-opentype"),url('https://status.im/fonts/PostGrotesk-Medium.woff') format("woff"),url('https://status.im/fonts/PostGrotesk-Medium.svg#PostGrotesk-Medium') format("svg");
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family:PostGrotesk-Book;
|
||||
src:url('https://status.im/fonts/PostGrotesk-Book.eot');
|
||||
src:url('https://status.im/fonts/PostGrotesk-Book.eot?#iefix') format("embedded-opentype"),url('https://status.im/fonts/PostGrotesk-Book.woff') format("woff"),url('https://status.im/fonts/PostGrotesk-Book.svg#PostGrotesk-Book') format("svg");
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
5
res/themes/status/css/_paths.scss
Normal file
5
res/themes/status/css/_paths.scss
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
// Path from root SCSS file (such as `status.scss`) to `res` dir in `matrix-react-sdk`
|
||||
$res: ../../../../node_modules/matrix-react-sdk/res;
|
||||
|
||||
// Path from root SCSS file (such as `status.scss`) to `status` dir in `riot-web`
|
||||
$status: ..;
|
||||
|
|
@ -1,19 +1,3 @@
|
|||
@font-face {
|
||||
font-family:PostGrotesk-Medium;
|
||||
src:url('https://status.im/fonts/PostGrotesk-Medium.eot');
|
||||
src:url('https://status.im/fonts/PostGrotesk-Medium.eot?#iefix') format("embedded-opentype"),url('https://status.im/fonts/PostGrotesk-Medium.woff') format("woff"),url('https://status.im/fonts/PostGrotesk-Medium.svg#PostGrotesk-Medium') format("svg");
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family:PostGrotesk-Book;
|
||||
src:url('https://status.im/fonts/PostGrotesk-Book.eot');
|
||||
src:url('https://status.im/fonts/PostGrotesk-Book.eot?#iefix') format("embedded-opentype"),url('https://status.im/fonts/PostGrotesk-Book.woff') format("woff"),url('https://status.im/fonts/PostGrotesk-Book.svg#PostGrotesk-Book') format("svg");
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
// We deliberately prioritise Arial over Helvetica here due to diacritic problems (see _base.scss)
|
||||
// N.B. that the status.im website uses:
|
||||
// font-family:PostGrotesk-Book,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
|
||||
|
|
@ -203,8 +187,8 @@ $event-redacted-border-color: #cccccc;
|
|||
// event timestamp
|
||||
$event-timestamp-color: #acacac;
|
||||
|
||||
$edit-button-url: "../../img/icon_context_message.svg";
|
||||
$copy-button-url: "../../img/icon_copy_message.svg";
|
||||
$edit-button-url: "$(res)/img/icon_context_message.svg";
|
||||
$copy-button-url: "$(res)/img/icon_copy_message.svg";
|
||||
|
||||
// e2e
|
||||
$e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
@import "_paths.scss";
|
||||
@import "_fonts.scss";
|
||||
@import "../../../../node_modules/matrix-react-sdk/res/themes/light/css/_base.scss";
|
||||
@import "_status.scss";
|
||||
@import "../../../../node_modules/matrix-react-sdk/res/css/_components.scss";
|
||||
|
|
|
|||
|
|
@ -53,9 +53,9 @@ const COPY_LIST = [
|
|||
["res/home.html", "webapp"],
|
||||
["res/home-status.html", "webapp"],
|
||||
["res/home/**", "webapp/home"],
|
||||
["res/vector-icons/**", "webapp/vector-icons"],
|
||||
["node_modules/matrix-react-sdk/res/{fonts,img,themes,media}/**", "webapp"],
|
||||
["res/themes/**", "webapp/themes"],
|
||||
["res/vector-icons/**", "webapp/vector-icons"],
|
||||
["node_modules/matrix-react-sdk/res/media/**", "webapp/media"],
|
||||
["node_modules/emojione/assets/svg/*", "webapp/emojione/svg/"],
|
||||
["node_modules/emojione/assets/png/*", "webapp/emojione/png/"],
|
||||
// XXX: This is tied quite heavily to the matching olm.js so it really should be
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@
|
|||
window.vector_indexeddb_worker_script = '<%= htmlWebpackPlugin.files.chunks['indexeddb-worker'].entry %>';
|
||||
</script>
|
||||
<script src="<%= htmlWebpackPlugin.files.chunks['bundle'].entry %>"></script>
|
||||
<img src="img/warning.svg" width="24" height="23" style="visibility: hidden; position: absolute; top: 0px; left: 0px;"/>
|
||||
<img src="<%= require('matrix-react-sdk/res/img/warning.svg') %>" width="24" height="23" style="visibility: hidden; position: absolute; top: 0px; left: 0px;"/>
|
||||
<audio id="messageAudio">
|
||||
<source src="media/message.ogg" type="audio/ogg" />
|
||||
<source src="media/message.mp3" type="audio/mpeg" />
|
||||
|
|
|
|||
|
|
@ -28,23 +28,21 @@ module.exports = {
|
|||
{
|
||||
test: /\.scss$/,
|
||||
// 1. postcss-loader turns the SCSS into normal CSS.
|
||||
// 2. raw-loader turns the CSS into a javascript module
|
||||
// whose default export is a string containing the CSS.
|
||||
// (raw-loader is similar to css-loader, but the latter
|
||||
// would also drag in the imgs and fonts that our CSS refers to
|
||||
// as webpack inputs.)
|
||||
// 2. css-loader turns the CSS into a JS module whose default
|
||||
// export is a string containing the CSS, while also adding
|
||||
// the images and fonts from CSS as Webpack inputs.
|
||||
// 3. ExtractTextPlugin turns that string into a separate asset.
|
||||
use: ExtractTextPlugin.extract({
|
||||
use: [
|
||||
"raw-loader",
|
||||
"css-loader",
|
||||
{
|
||||
loader: 'postcss-loader',
|
||||
options: {
|
||||
config: {
|
||||
path: './postcss.config.js'
|
||||
}
|
||||
}
|
||||
}
|
||||
path: './postcss.config.js',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
}),
|
||||
},
|
||||
|
|
@ -52,10 +50,38 @@ module.exports = {
|
|||
// this works similarly to the scss case, without postcss.
|
||||
test: /\.css$/,
|
||||
use: ExtractTextPlugin.extract({
|
||||
use: "raw-loader"
|
||||
use: "css-loader",
|
||||
}),
|
||||
},
|
||||
|
||||
{
|
||||
test: /\.(gif|png|svg|ttf)$/,
|
||||
// Use a content-based hash in the name so that we can set a long cache
|
||||
// lifetime for assets while still delivering changes quickly.
|
||||
oneOf: [
|
||||
{
|
||||
// Images referenced in HTML files
|
||||
issuer: /\.html$/,
|
||||
loader: 'file-loader',
|
||||
options: {
|
||||
name: '[name].[hash:7].[ext]',
|
||||
outputPath: getImgOutputPath,
|
||||
},
|
||||
},
|
||||
{
|
||||
// Images referenced in JS and CSS files
|
||||
loader: 'file-loader',
|
||||
options: {
|
||||
name: '[name].[hash:7].[ext]',
|
||||
outputPath: getImgOutputPath,
|
||||
publicPath: function(url, resourcePath) {
|
||||
// JS and CSS image usages end up the `bundles/[hash]` output
|
||||
// directory, so we adjust the final path to navigate up twice.
|
||||
return path.join("../..", getImgOutputPath(url, resourcePath));
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
noParse: [
|
||||
// for cross platform compatibility use [\\\/] as the path separator
|
||||
|
|
@ -75,14 +101,13 @@ module.exports = {
|
|||
output: {
|
||||
path: path.join(__dirname, "webapp"),
|
||||
|
||||
// the generated js (and CSS, from the ExtractTextPlugin) are put in a
|
||||
// The generated JS (and CSS, from the ExtractTextPlugin) are put in a
|
||||
// unique subdirectory for the build. There will only be one such
|
||||
// 'bundle' directory in the generated tarball; however, hosting
|
||||
// servers can collect 'bundles' from multiple versions into one
|
||||
// directory and symlink it into place - this allows users who loaded
|
||||
// an older version of the application to continue to access webpack
|
||||
// chunks even after the app is redeployed.
|
||||
//
|
||||
filename: "bundles/[hash]/[name].js",
|
||||
chunkFilename: "bundles/[hash]/[name].js",
|
||||
devtoolModuleFilenameTemplate: function(info) {
|
||||
|
|
@ -158,3 +183,17 @@ module.exports = {
|
|||
inline: false,
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* Merge assets found via CSS and imports into a single tree, while also preserving
|
||||
* directories under `res`.
|
||||
*
|
||||
* @param {string} url The adjusted name of the file, such as `warning.1234567.svg`.
|
||||
* @param {string} resourcePath The absolute path to the source file with unmodified name.
|
||||
* @return {string} The returned paths will look like `img/warning.1234567.svg`.
|
||||
*/
|
||||
function getImgOutputPath(url, resourcePath) {
|
||||
const prefix = /^.*\/res\//;
|
||||
const outputDir = path.dirname(resourcePath).replace(prefix, "");
|
||||
return path.join(outputDir, path.basename(url));
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue