public/manifest: use variables for program name

This requires a craco hack due to https://github.com/facebook/create-react-app/issues/7953

craco.config.js

@@ -188,6 +188,21 @@ CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.`,
 module.exports = {
     webpack: {
         plugins: [
+            new CopyPlugin({
+                patterns: [
+                    {
+                        from: 'public/manifest.json',
+                        transform(content, path) {
+                            return content
+                                .toString()
+                                .replace(
+                                    /%\w+%/g,
+                                    (m) => process.env[m.slice(1, m.length - 1)],
+                                );
+                        },
+                    },
+                ],
+            }),
             new CopyPlugin({
                 patterns: [
                     {
@@ -248,7 +263,8 @@ module.exports = {
                         webpackConfig,
                         loaderByName('babel-loader'),
                     );
-                    babelLoaders.matches[0].loader.test = /\.(esnext|js|mjs|jsx|ts|tsx)$/;
+                    babelLoaders.matches[0].loader.test =
+                        /\.(esnext|js|mjs|jsx|ts|tsx)$/;
                     babelLoaders.matches[1].loader.test = /\.(esnext|js|mjs)$/;
 
                     const fileLoader = getLoader(

public/manifest.json

@@ -1,6 +1,6 @@
 {
-    "short_name": "Pybricks Code",
-    "name": "Pybricks Code",
+    "short_name": "%REACT_APP_NAME%",
+    "name": "%REACT_APP_NAME%",
     "icons": [
         {
             "src": "favicon.ico",