automate CSS/JS cache busting

.gitignore

@@ -1,2 +1,3 @@
+nginx.conf.tmp
 node_modules
 static_tmp

deploy_static

@@ -25,5 +25,9 @@ ssh $remote sync -f $target
 ssh $remote ln -snf $target /var/www/html
 ssh $remote sync .
 
+rsync -rpcv --chmod=D755,F644 --delete nginx.conf.tmp $remote:/etc/nginx/nginx.conf
+ssh $remote sync -f /etc/nginx/nginx.conf
+ssh $remote systemctl reload nginx
+
 echo
 echo active is now $target

nginx/nginx.conf

@@ -67,7 +67,7 @@ http {
 
     map $http_cookie $preload_resources {
         "~*__Host-preload=1" "";
-        default "</grapheneos.css?29>; rel=preload; as=style, </fonts/roboto_latin.woff2?20>; rel=preload; as=font; crossorigin, </fonts/roboto_bold_latin.woff2?20>; rel=preload; as=font; crossorigin, </mask-icon.svg>; rel=preload; as=image";
+        default "</grapheneos.css>; rel=preload; as=style, </fonts/roboto_latin.woff2?20>; rel=preload; as=font; crossorigin, </fonts/roboto_bold_latin.woff2?20>; rel=preload; as=font; crossorigin, </mask-icon.svg>; rel=preload; as=image";
     }
 
     server {

process_static

@@ -15,6 +15,18 @@ done
 
 find static_tmp -name '*.css' -exec csso {} -o {} \;
 find static_tmp -name '*.js' -exec terser --module -cmo {} {} \;
+
+replace=""
+for file in static_tmp/**/*.css static_tmp/js/*.js; do
+    hash=$(sha256sum "$file" | head -c 8)
+    dest="$(dirname $file)/$hash.$(basename $file)"
+    mv "$file" "$dest"
+    replace+=";s/\\/$(basename $file)/\\/$(basename $dest)/g"
+done
+
+cp nginx/nginx.conf nginx.conf.tmp
+sed -i "$replace" static_tmp/**/*.html nginx.conf.tmp
+
 find static_tmp -name '*.html' -exec html-minifier --collapse-whitespace \
     --process-scripts "application/ld+json" --collapse-boolean-attributes \
     --remove-attribute-quotes --remove-comments --remove-empty-attributes \

static/404.html

@@ -21,7 +21,7 @@
         <link rel="icon" sizes="any" type="image/svg+xml" href="/mask-icon.svg"/>
         <link rel="mask-icon" href="/mask-icon.svg" color="#1a1a1a"/>
         <link rel="apple-touch-icon" href="/apple-touch-icon.png"/>
-        <link rel="stylesheet" href="/grapheneos.css?29"/>
+        <link rel="stylesheet" href="/grapheneos.css"/>
         <link rel="manifest" href="/manifest.webmanifest"/>
         <link rel="license" href="/LICENSE.txt"/>
     </head>

static/articles/grapheneos-servers.html

@@ -23,7 +23,7 @@
         <link rel="icon" sizes="any" type="image/svg+xml" href="/mask-icon.svg"/>
         <link rel="mask-icon" href="/mask-icon.svg" color="#1a1a1a"/>
         <link rel="apple-touch-icon" href="/apple-touch-icon.png"/>
-        <link rel="stylesheet" href="/grapheneos.css?29"/>
+        <link rel="stylesheet" href="/grapheneos.css"/>
         <link rel="manifest" href="/manifest.webmanifest"/>
         <link rel="license" href="/LICENSE.txt"/>
     </head>

static/articles/index.html

@@ -23,7 +23,7 @@
         <link rel="icon" sizes="any" type="image/svg+xml" href="/mask-icon.svg"/>
         <link rel="mask-icon" href="/mask-icon.svg" color="#1a1a1a"/>
         <link rel="apple-touch-icon" href="/apple-touch-icon.png"/>
-        <link rel="stylesheet" href="/grapheneos.css?29"/>
+        <link rel="stylesheet" href="/grapheneos.css"/>
         <link rel="manifest" href="/manifest.webmanifest"/>
         <link rel="license" href="/LICENSE.txt"/>
     </head>

static/articles/server-traffic-shaping.html

@@ -23,7 +23,7 @@
         <link rel="icon" sizes="any" type="image/svg+xml" href="/mask-icon.svg"/>
         <link rel="mask-icon" href="/mask-icon.svg" color="#1a1a1a"/>
         <link rel="apple-touch-icon" href="/apple-touch-icon.png"/>
-        <link rel="stylesheet" href="/grapheneos.css?29"/>
+        <link rel="stylesheet" href="/grapheneos.css"/>
         <link rel="manifest" href="/manifest.webmanifest"/>
         <link rel="license" href="/LICENSE.txt"/>
     </head>

static/articles/sitewide-advertising-industry-opt-out.html

@@ -23,7 +23,7 @@
         <link rel="icon" sizes="any" type="image/svg+xml" href="/mask-icon.svg"/>
         <link rel="mask-icon" href="/mask-icon.svg" color="#1a1a1a"/>
         <link rel="apple-touch-icon" href="/apple-touch-icon.png"/>
-        <link rel="stylesheet" href="/grapheneos.css?29"/>
+        <link rel="stylesheet" href="/grapheneos.css"/>
         <link rel="manifest" href="/manifest.webmanifest"/>
         <link rel="license" href="/LICENSE.txt"/>
     </head>

static/build.html

@@ -23,10 +23,10 @@
         <link rel="icon" sizes="any" type="image/svg+xml" href="/mask-icon.svg"/>
         <link rel="mask-icon" href="/mask-icon.svg" color="#1a1a1a"/>
         <link rel="apple-touch-icon" href="/apple-touch-icon.png"/>
-        <link rel="stylesheet" href="/grapheneos.css?29"/>
+        <link rel="stylesheet" href="/grapheneos.css"/>
         <link rel="manifest" href="/manifest.webmanifest"/>
         <link rel="license" href="/LICENSE.txt"/>
-        <script type="module" src="/js/redirect.js?12"></script>
+        <script type="module" src="/js/redirect.js"></script>
     </head>
     <body>
         <header>

static/contact.html

@@ -23,7 +23,7 @@
         <link rel="icon" sizes="any" type="image/svg+xml" href="/mask-icon.svg"/>
         <link rel="mask-icon" href="/mask-icon.svg" color="#1a1a1a"/>
         <link rel="apple-touch-icon" href="/apple-touch-icon.png"/>
-        <link rel="stylesheet" href="/grapheneos.css?29"/>
+        <link rel="stylesheet" href="/grapheneos.css"/>
         <link rel="manifest" href="/manifest.webmanifest"/>
         <link rel="license" href="/LICENSE.txt"/>
     </head>

static/donate.html

@@ -23,7 +23,7 @@
         <link rel="icon" sizes="any" type="image/svg+xml" href="/mask-icon.svg"/>
         <link rel="mask-icon" href="/mask-icon.svg" color="#1a1a1a"/>
         <link rel="apple-touch-icon" href="/apple-touch-icon.png"/>
-        <link rel="stylesheet" href="/grapheneos.css?29"/>
+        <link rel="stylesheet" href="/grapheneos.css"/>
         <link rel="manifest" href="/manifest.webmanifest"/>
         <link rel="license" href="/LICENSE.txt"/>
     </head>

static/faq.html

@@ -23,10 +23,10 @@
         <link rel="icon" sizes="any" type="image/svg+xml" href="/mask-icon.svg"/>
         <link rel="mask-icon" href="/mask-icon.svg" color="#1a1a1a"/>
         <link rel="apple-touch-icon" href="/apple-touch-icon.png"/>
-        <link rel="stylesheet" href="/grapheneos.css?29"/>
+        <link rel="stylesheet" href="/grapheneos.css"/>
         <link rel="manifest" href="/manifest.webmanifest"/>
         <link rel="license" href="/LICENSE.txt"/>
-        <script type="module" src="/js/redirect.js?12"></script>
+        <script type="module" src="/js/redirect.js"></script>
     </head>
     <body>
         <header>

static/features.html

@@ -23,7 +23,7 @@
         <link rel="icon" sizes="any" type="image/svg+xml" href="/mask-icon.svg"/>
         <link rel="mask-icon" href="/mask-icon.svg" color="#1a1a1a"/>
         <link rel="apple-touch-icon" href="/apple-touch-icon.png"/>
-        <link rel="stylesheet" href="/grapheneos.css?29"/>
+        <link rel="stylesheet" href="/grapheneos.css"/>
         <link rel="manifest" href="/manifest.webmanifest"/>
         <link rel="license" href="/LICENSE.txt"/>
     </head>

static/history.html

@@ -23,7 +23,7 @@
         <link rel="icon" sizes="any" type="image/svg+xml" href="/mask-icon.svg"/>
         <link rel="mask-icon" href="/mask-icon.svg" color="#1a1a1a"/>
         <link rel="apple-touch-icon" href="/apple-touch-icon.png"/>
-        <link rel="stylesheet" href="/grapheneos.css?29"/>
+        <link rel="stylesheet" href="/grapheneos.css"/>
         <link rel="manifest" href="/manifest.webmanifest"/>
         <link rel="license" href="/LICENSE.txt"/>
     </head>

static/index.html

@@ -23,10 +23,10 @@
         <link rel="icon" sizes="any" type="image/svg+xml" href="/mask-icon.svg"/>
         <link rel="mask-icon" href="/mask-icon.svg" color="#1a1a1a"/>
         <link rel="apple-touch-icon" href="/apple-touch-icon.png"/>
-        <link rel="stylesheet" href="/grapheneos.css?29"/>
+        <link rel="stylesheet" href="/grapheneos.css"/>
         <link rel="manifest" href="/manifest.webmanifest"/>
         <link rel="license" href="/LICENSE.txt"/>
-        <script type="module" src="/js/redirect.js?12"></script>
+        <script type="module" src="/js/redirect.js"></script>
     </head>
     <body>
         <header>

static/install/cli.html

@@ -23,10 +23,10 @@
         <link rel="icon" sizes="any" type="image/svg+xml" href="/mask-icon.svg"/>
         <link rel="mask-icon" href="/mask-icon.svg" color="#1a1a1a"/>
         <link rel="apple-touch-icon" href="/apple-touch-icon.png"/>
-        <link rel="stylesheet" href="/grapheneos.css?29"/>
+        <link rel="stylesheet" href="/grapheneos.css"/>
         <link rel="manifest" href="/manifest.webmanifest"/>
         <link rel="license" href="/LICENSE.txt"/>
-        <script type="module" src="/js/redirect.js?12"></script>
+        <script type="module" src="/js/redirect.js"></script>
     </head>
     <body>
         <header>

static/install/index.html

@@ -23,10 +23,10 @@
         <link rel="icon" sizes="any" type="image/svg+xml" href="/mask-icon.svg"/>
         <link rel="mask-icon" href="/mask-icon.svg" color="#1a1a1a"/>
         <link rel="apple-touch-icon" href="/apple-touch-icon.png"/>
-        <link rel="stylesheet" href="/grapheneos.css?29"/>
+        <link rel="stylesheet" href="/grapheneos.css"/>
         <link rel="manifest" href="/manifest.webmanifest"/>
         <link rel="license" href="/LICENSE.txt"/>
-        <script type="module" src="/js/redirect.js?12"></script>
+        <script type="module" src="/js/redirect.js"></script>
     </head>
     <body>
         <header>

static/install/web.html

@@ -23,12 +23,12 @@
         <link rel="icon" sizes="any" type="image/svg+xml" href="/mask-icon.svg"/>
         <link rel="mask-icon" href="/mask-icon.svg" color="#1a1a1a"/>
         <link rel="apple-touch-icon" href="/apple-touch-icon.png"/>
-        <link rel="stylesheet" href="/grapheneos.css?29"/>
+        <link rel="stylesheet" href="/grapheneos.css"/>
         <link rel="manifest" href="/manifest.webmanifest"/>
         <link rel="license" href="/LICENSE.txt"/>
-        <script type="module" src="/js/redirect.js?12"></script>
+        <script type="module" src="/js/redirect.js"></script>
         <script type="module" src="/js/fastboot/dist/fastboot.min.mjs?1.0.8"></script>
-        <script type="module" src="/js/web-install.js?13"></script>
+        <script type="module" src="/js/web-install.js"></script>
     </head>
     <body>
         <header>

static/pdfviewer-privacy-policy.html

@@ -23,7 +23,7 @@
         <link rel="icon" sizes="any" type="image/svg+xml" href="/mask-icon.svg"/>
         <link rel="mask-icon" href="/mask-icon.svg" color="#1a1a1a"/>
         <link rel="apple-touch-icon" href="/apple-touch-icon.png"/>
-        <link rel="stylesheet" href="/grapheneos.css?29"/>
+        <link rel="stylesheet" href="/grapheneos.css"/>
         <link rel="manifest" href="/manifest.webmanifest"/>
         <link rel="license" href="/LICENSE.txt"/>
     </head>

static/releases.html

@@ -24,11 +24,11 @@
         <link rel="icon" sizes="any" type="image/svg+xml" href="/mask-icon.svg"/>
         <link rel="mask-icon" href="/mask-icon.svg" color="#1a1a1a"/>
         <link rel="apple-touch-icon" href="/apple-touch-icon.png"/>
-        <link rel="stylesheet" href="/grapheneos.css?29"/>
+        <link rel="stylesheet" href="/grapheneos.css"/>
         <link rel="manifest" href="/manifest.webmanifest"/>
         <link rel="license" href="/LICENSE.txt"/>
-        <script type="module" src="/js/releases.js?14"></script>
+        <script type="module" src="/js/releases.js"></script>
-        <script type="module" src="/js/redirect.js?12"></script>
+        <script type="module" src="/js/redirect.js"></script>
     </head>
     <body>
         <header>

static/source.html

@@ -23,7 +23,7 @@
         <link rel="icon" sizes="any" type="image/svg+xml" href="/mask-icon.svg"/>
         <link rel="mask-icon" href="/mask-icon.svg" color="#1a1a1a"/>
         <link rel="apple-touch-icon" href="/apple-touch-icon.png"/>
-        <link rel="stylesheet" href="/grapheneos.css?29"/>
+        <link rel="stylesheet" href="/grapheneos.css"/>
         <link rel="manifest" href="/manifest.webmanifest"/>
         <link rel="license" href="/LICENSE.txt"/>
     </head>

static/usage.html

@@ -23,10 +23,10 @@
         <link rel="icon" sizes="any" type="image/svg+xml" href="/mask-icon.svg"/>
         <link rel="mask-icon" href="/mask-icon.svg" color="#1a1a1a"/>
         <link rel="apple-touch-icon" href="/apple-touch-icon.png"/>
-        <link rel="stylesheet" href="/grapheneos.css?29"/>
+        <link rel="stylesheet" href="/grapheneos.css"/>
         <link rel="manifest" href="/manifest.webmanifest"/>
         <link rel="license" href="/LICENSE.txt"/>
-        <script type="module" src="/js/redirect.js?12"></script>
+        <script type="module" src="/js/redirect.js"></script>
     </head>
     <body>
         <header>