Merge 90d723b7bc into 188740129d

.gitignore

@@ -13,4 +13,5 @@ idea/
 /appendix/04/index.html
 /09/test.html
 
-.vscode
+.vscode
+node_modules

footer.php

@@ -17,5 +17,23 @@
             ga("create", "UA-18824436-2", "auto");
             ga("send", "pageview");
         </script>
+        <script>
+            if ("serviceWorker" in navigator) {
+                // Register a service worker hosted at the root of the
+                // site using the default scope.
+                navigator.serviceWorker.register('service-worker.build2.js').then(
+                // navigator.serviceWorker.register('pwa-sw.js').then(
+                    (registration) => {
+                        console.log("Service worker registration succeeded:", registration);
+                    },
+                    (error) => {
+                        console.error(`Service worker registration failed: ${error}`);
+                    },
+                );
+            } else {
+                console.error("Service workers are not supported.");
+            }
+            
+        </script>
     </body>
 </html>

glossary/index.php

@@ -11,7 +11,7 @@
 			$README .= $language;
 		}
 	}
-
+	
 	if(!empty($_GET['search']))
 		$subtitle = ": ".$_GET['search'];
 

index.php

@@ -1,4 +1,5 @@
 <?php
+	// ob_start();
 	$path = ".";
 	$subtitle = "";
 	$README = "README";
@@ -22,4 +23,7 @@
 
 	echo '</div>';
 	include("footer.php");
+
+	// $output = ob_get_contents();
+	// file_put_contents("index.html", $output);
 ?>

manifest.json

@@ -0,0 +1,48 @@
+{
+    "name": "TheBookOfShaders",
+    "short_name": "TheBookOfShaders",
+    "start_url": "/",
+    "display": "standalone",
+    "description": "This is a gentle step-by-step guide through the abstract and complex universe of Fragment Shaders.",
+    "lang": "en",
+    "dir": "auto",
+    "theme_color": "#000000",
+    "background_color": "#000000",
+    "orientation": "any",
+    "icons": [
+        {
+            "src": "https://www.pwabuilder.com/assets/icons/icon_512.png",
+            "sizes": "512x512",
+            "type": "image/png",
+            "purpose": "maskable"
+        },
+        {
+            "src": "https://www.pwabuilder.com/assets/icons/icon_192.png",
+            "sizes": "192x192",
+            "type": "image/png",
+            "purpose": "any"
+        }
+    ],
+    "screenshots": [
+        {
+            "src": "https://www.pwabuilder.com/assets/screenshots/screen1.png",
+            "sizes": "2880x1800",
+            "type": "image/png",
+            "description": "A screenshot of the home page"
+        }
+    ],
+    "related_applications": [
+        {
+            "platform": "windows",
+            "url": " The URL to your app in that app store"
+        }
+    ],
+    "prefer_related_applications": false,
+    "shortcuts": [
+        {
+            "name": "The name you would like to be displayed for your shortcut",
+            "url": "The url you would like to open when the user chooses this shortcut. This must be a URL local to your PWA. For example: If my start_url is /, this URL must be something like /shortcut",
+            "description": "A description of the functionality of this shortcut"
+        }
+    ]
+}

src/pwa/build.js

@@ -0,0 +1,36 @@
+const { generateSW, injectManifest } = require("workbox-build");
+
+// to test glob patterns use: https://globster.xyz/
+// injectManifest({
+generateSW({
+    globDirectory: "../",
+    globPatterns: [
+        "**/*[!gulpfile].{frag,png,jpg,jpeg,gif,txt,html,css,yml,psd,xml,woff,woff2,js}",
+        "src/glslCanvas/build/*",
+        "src/glslEditor/build/*",
+        "src/glslGallery/build/*",
+        "src/moon/*",
+    ],
+    globIgnores: [
+        "epub/**/*",
+        "motionToolKit/**/*",
+        "proceduralTexture/**/*",
+        "src/parsedown/**/*",
+        "src/pwa/**/*",
+        "src/**/src/**/*",
+    ],
+    swDest: "sw2.js",
+    ignoreURLParametersMatching: [/^utm_/, /^fbclid$/],
+    maximumFileSizeToCacheInBytes: 10000000,
+}).then(({ count, size, warnings }) => {
+    if (warnings.length > 0) {
+        console.warn(
+            "Warnings encountered while injecting the manifest:",
+            warnings.join("\n")
+        );
+    }
+
+    console.log(
+        `Injected a manifest which will precache ${count} files, totaling ${size} bytes.`
+    );
+});

src/pwa/build2.js

@@ -0,0 +1,55 @@
+const { generateSW } = require("workbox-build");
+const { getTemplateUrls } = require("./lib");
+
+const mainPages = getTemplateUrls("./");
+const appendixPages = getTemplateUrls("./appendix");
+const examplesPages = getTemplateUrls("./examples");
+const glossaryPages = getTemplateUrls("./glossary", false, "?search=");
+
+// to test glob patterns use: https://globster.xyz/
+// injectManifest({
+generateSW({
+    globDirectory: "../../",
+    globPatterns: [
+        "**/*.{frag,png,jpg,jpeg,gif,txt,html,css,yml,psd,xml,woff,woff2,js}",
+        "src/glslCanvas/build/*",
+        "src/glslEditor/build/*",
+        "src/glslGallery/build/*",
+        "src/moon/*",
+    ],
+    globIgnores: [
+        "epub/**/*",
+        "motionToolKit/**/*",
+        "proceduralTexture/**/*",
+        "src/parsedown/**/*",
+        "src/pwa/**/*",
+        "src/pwa/*",
+        "src/**/src/**/*",
+        "src/glslCanvas/*",
+        "src/glslEditor/*",
+        "src/glslGallery/*",
+    ],
+    templatedURLs: {
+        "/": ["index.php", "header.php", "toc-header.php", "footer.php"],
+        "edit.php": "edit.php",
+        "glossary/": ["glossary/*.{md,php}"],
+        "appendix/": ["appendix/*.{md,php}"],
+        ...mainPages,
+        ...glossaryPages,
+        ...appendixPages,
+        ...examplesPages,
+    },
+    swDest: "../../service-worker.build2.js",
+    maximumFileSizeToCacheInBytes: 15000000,
+}).then(({ count, size, warnings }) => {
+    if (warnings.length > 0) {
+        console.warn(
+            "Warnings encountered while injecting the manifest:",
+            warnings.join("\n")
+        );
+    }
+
+    console.log(
+        `Injected a manifest which will precache ${count} files, totaling ${size} bytes.`
+    );
+});

src/pwa/inject.js

@@ -0,0 +1,55 @@
+const { injectManifest } = require("workbox-build");
+const { getTemplateUrls } = require("./lib");
+
+const mainPages = getTemplateUrls("./");
+const appendixPages = getTemplateUrls("./appendix");
+const examplesPages = getTemplateUrls("./examples");
+const glossaryPages = getTemplateUrls("./glossary", false, "?search=");
+
+// to test glob patterns use: https://globster.xyz/
+injectManifest({
+    globDirectory: "../../",
+    globPatterns: [
+        "**/*.{frag,png,jpg,jpeg,gif,txt,html,css,yml,psd,xml,woff,woff2,js}",
+        "src/glslCanvas/build/*",
+        "src/glslEditor/build/*",
+        "src/glslGallery/build/*",
+        "src/moon/*",
+    ],
+    globIgnores: [
+        "epub/**/*",
+        "motionToolKit/**/*",
+        "proceduralTexture/**/*",
+        "src/parsedown/**/*",
+        "src/pwa/**/*",
+        "src/pwa/*",
+        "src/**/src/**/*",
+        "src/glslCanvas/*",
+        "src/glslEditor/*",
+        "src/glslGallery/*",
+    ],
+    templatedURLs: {
+        "/": ["index.php", "header.php", "toc-header.php", "footer.php"],
+        "edit.php": "edit.php",
+        "glossary/": ["glossary/*.{md,php}"],
+        "appendix/": ["appendix/*.{md,php}"],
+        ...mainPages,
+        ...glossaryPages,
+        ...appendixPages,
+        ...examplesPages,
+    },
+    swDest: "service-worker.js",
+    swSrc: "./src/service-worker.js",
+    maximumFileSizeToCacheInBytes: 15000000,
+}).then(({ count, size, warnings }) => {
+    if (warnings.length > 0) {
+        console.warn(
+            "Warnings encountered while injecting the manifest:",
+            warnings.join("\n")
+        );
+    }
+
+    console.log(
+        `Injected a manifest which will precache ${count} files, totaling ${size} bytes.`
+    );
+});

src/pwa/lib.js

@@ -0,0 +1,128 @@
+const fs = require("fs");
+const path = require("path");
+
+const projectPath = path.resolve(__dirname, "../../");
+
+function getLangKeys() {
+    const htmlCode = fs.readFileSync(
+        path.resolve(projectPath, "chap-header.php"),
+        "utf8"
+    );
+    const regex = /\?lan=([a-zA-Z_-]+)/g;
+    let match;
+    const langValues = [];
+
+    while ((match = regex.exec(htmlCode)) !== null) {
+        langValues.push(match[1]);
+    }
+
+    return langValues;
+}
+
+const getPathWithQuery = (pathname, query) => {
+    if (!query) return `/${pathname}/`;
+    const [base, subdir] = pathname.split("/");
+    return `/${base}/${query}${subdir}`;
+};
+
+function getAllLangsRoutesPrev(route, glob, langs) {
+    const suffix = route.includes("?") ? "&" : "?";
+    return langs.reduce(
+        (acc, lang) => ({
+            ...acc,
+            [[route, `lan=${lang}`].join(suffix)]: [glob],
+        }),
+        { [route]: [glob] }
+    );
+}
+
+/**
+ * Checks for files and returns an updated list of dependencies
+ * @param { (string | null )[] } deps
+ * @returns
+ */
+const filterDependecies = (deps) =>
+    deps
+        .filter((v) => v)
+        .map((pathname) =>
+            fs.existsSync(path.resolve(projectPath, pathname)) ? pathname : null
+        )
+        .filter((v) => v);
+
+/**
+ * Adds all available languages to the route, and returns those that exist
+ * @param {string[]} langs - array of languages
+ * @param {string} pathname - path to route
+ * @param {string|undefined} query - used in glossary
+ * @returns {Object.<string, string | string[]>}
+ */
+function getAllLangsRoutes(langs, pathname, query) {
+    let route = `/${pathname}/`;
+    let suffix = "?";
+    let index = `${pathname}/index.php`;
+    if (query) {
+        const [base, subdir] = pathname.split("/");
+        route = `/${base}/${query}${subdir}`;
+        suffix = "&";
+        index = null;
+    }
+
+    const baseRouteDeps = filterDependecies([index, `${pathname}/README.md`]);
+    return langs.reduce(
+        (acc, lang) => {
+            const deps = filterDependecies([
+                index,
+                `${pathname}/README-${lang}.md`,
+            ]);
+
+            // todo: если README-${lang}.md не существует, то привязать к README.md
+            // test: найти страницу без перевода, попробовать зайти на нее из-под оригинального сайта
+            // do  : просто вернуть `${pathname}/README.md` если deps пуст
+            if (deps.length) {
+                return { ...acc, [`${route}${suffix}lan=${lang}`]: deps };
+            }
+
+            return acc;
+        },
+        { [route]: baseRouteDeps }
+    );
+}
+
+/**
+ * Gets a list of all possible routes, including all available languages
+ * @param {string} dir
+ * @param {RegExp | undefined | false} pattern
+ * @param {string | undefined} query
+ * @returns
+ */
+function getTemplateUrls(dir, pattern = /[0-9]{2}/, query) {
+    const langs = getLangKeys();
+    const directoryPath = path.resolve(projectPath, dir);
+
+    const paths = fs
+        .readdirSync(directoryPath)
+        .filter((fileOrDir) =>
+            fs.statSync(path.join(directoryPath, fileOrDir)).isDirectory()
+        )
+        .filter((dir) => (!pattern ? true : pattern.test(dir)))
+        .map((dir) =>
+            path.relative(projectPath, path.resolve(directoryPath, dir))
+        );
+
+    return paths.reduce(
+        (acc, pathname) => ({
+            ...acc,
+            ...getAllLangsRoutes(langs, pathname, query),
+            // ...getAllLangsRoutesPrev(
+            //     getPathWithQuery(pathname, query),
+            //     `${pathname}/*`,
+            //     langs
+            // ),
+        }),
+        {}
+    );
+}
+
+module.exports = {
+    getTemplateUrls,
+};

src/pwa/package.json

@@ -0,0 +1,19 @@
+{
+    "scripts": {
+        "gen-sw": "workbox generateSW workbox-config.js",
+        "build": "browserify pwabuilder-adv-sw.js -p esmify | uglifyjs -cm > pwa-sw.js",
+        "gen-sw2": "node build.js",
+        "sw": "node inject.js",
+        "swb": "browserify service-worker.js -p esmify > ../../service-worker.build.js"
+    },
+    "type": "commonjs",
+    "dependencies": {
+        "workbox-precaching": "^7.0.0"
+    },
+    "devDependencies": {
+        "browserify": "^17.0.0",
+        "esmify": "^2.1.1",
+        "uglifyjs": "^2.4.11",
+        "workbox-cli": "^7.0.0"
+    }
+}

src/pwa/pwabuilder-adv-sw.js

@@ -0,0 +1,23 @@
+import { precacheAndRoute } from "workbox-precaching/precacheAndRoute";
+
+const revision = "abc1";
+precacheAndRoute([
+    {
+        revision: "8d24eb7547812ba1d1a8895cff7db72e",
+        url: "04/three_js/index.html",
+    },
+    { revision: "bf6c14925e66edb1526b6c9489b3c042", url: "css/github.css" },
+    { revision: "e10b985f11be01a7e447a1f801055446", url: "css/style-ch.css" },
+    { revision: "88aaf868b203111dc4f250c57cd8f2aa", url: "css/style-jp.css" },
+    { revision: "ce095c53c74db756db3f96a62889d4c1", url: "css/style.css" },
+    { revision: "a1260fc23f929cc5109bf721e192655a", url: "graph.html" },
+    {
+        revision: "b2b8d5f83423e2954b146b4c891d0654",
+        url: "src/highlight.min.js",
+    },
+    { revision: "46438811d0e87fc6c287b4152a2adf96", url: "src/main.js" },
+    { revision, url: "/" },
+    { revision, url: "/00/*" },
+    { revision, url: "/01/*" },
+    { revision, url: "/02/*" },
+]);

src/pwa/src/service-worker.js

@@ -0,0 +1,9 @@
+import { precacheAndRoute } from "workbox-precaching/precacheAndRoute";
+
+precacheAndRoute(self.__WB_MANIFEST);
+
+self.addEventListener("message", (event) => {
+    if (event.data && event.data.type === "SKIP_WAITING") {
+        self.skipWaiting();
+    }
+});

src/pwa/workbox-config.js

@@ -0,0 +1,13 @@
+module.exports = {
+    globDirectory: "./",
+    globPatterns: [
+        // "**/*.{md,frag,png,jpg,php,jpeg,gif,cpp,h,pde,txt,html,sh,css,yml,psd,xml,woff,woff2,json,js,py,dist}",
+        "**/*.{frag,png,jpg,php,jpeg,gif,pde,txt,html,sh,css,yml,psd,xml,woff,woff2,json,js,py,dist}",
+        // "src/**/*",
+        // "**/*",
+        // "/**/"
+    ],
+    swDest: "sw.js",
+    ignoreURLParametersMatching: [/^utm_/, /^fbclid$/],
+    maximumFileSizeToCacheInBytes: 10000000,
+};