Updated sample post (for testing purposes)

Async LessCSS loading; changed colors
Changed "share" icon
2023-07-24 20:32:40 +04:00 · 2023-07-24 20:32:26 +04:00 · 2023-07-24 17:59:44 +04:00 · 2023-07-24 17:52:51 +04:00 · 2023-07-24 17:49:07 +04:00
10 changed files with 353 additions and 55 deletions
--- a/astro.config.mjs
+++ b/astro.config.mjs
@ -9,6 +9,7 @@ import rehypeSlug from 'rehype-slug';
 import rehypeAutolinkHeadings from 'rehype-autolink-headings';

 import rehypeFigure from 'rehype-figure';
+import rehypeImageAttr from './rehype-image-attr.mjs';

 export default defineConfig({
  integrations: [compress()],
@ -28,6 +29,7 @@ export default defineConfig({
        { behavior: "append" },
      ],
      rehypeFigure,
+      rehypeImageAttr,
    ],
  },
  redirects: {
--- a/package-lock.json
+++ b/package-lock.json
@ -5,7 +5,6 @@
  "requires": true,
  "packages": {
    "": {
-      "name": "dc09.ru",
      "version": "0.0.1",
      "dependencies": {
        "astro": "^2.9.0",
@ -1763,6 +1762,13 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/b4a": {
+      "version": "1.6.4",
+      "resolved": "https://registry.npmjs.org/b4a/-/b4a-1.6.4.tgz",
+      "integrity": "sha512-fpWrvyVHEKyeEvbKZTVOeZF3VSKKWtJxFIxX/jaVPf+cLbGUSitjb49pHLqPV2BUNNZ0LcoeEGfE/YCpyDYHIw==",
+      "optional": true,
+      "peer": true
+    },
    "node_modules/bail": {
      "version": "2.0.2",
      "resolved": "https://registry.npmjs.org/bail/-/bail-2.0.2.tgz",
@ -2525,9 +2531,9 @@
      }
    },
    "node_modules/detect-libc": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.1.tgz",
-      "integrity": "sha512-463v3ZeIrcWtdgIg6vI6XUncguvr2TnGl4SzDXinkt9mSLpBJKXT3mW6xT3VQdDN11+WVs29pgvivTc4Lp8v+w==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.2.tgz",
+      "integrity": "sha512-UX6sGumvvqSaXgdKGUsgZWqcUyIXZ/vZTrlRT/iobiKhGL0zL4d3osHj3uqllWJK+i+sixDS/3COVEOFbupFyw==",
      "engines": {
        "node": ">=8"
      }
@ -2796,6 +2802,13 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/fast-fifo": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/fast-fifo/-/fast-fifo-1.3.0.tgz",
+      "integrity": "sha512-IgfweLvEpwyA4WgiQe9Nx6VV2QkML2NkvZnk1oKnIzXgXdWxuhF7zw4DvLTPZJn6PIUneiAXPF24QmoEqHTjyw==",
+      "optional": true,
+      "peer": true
+    },
    "node_modules/fast-glob": {
      "version": "3.2.12",
      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz",
@ -5095,6 +5108,13 @@
        }
      ]
    },
+    "node_modules/queue-tick": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/queue-tick/-/queue-tick-1.0.1.tgz",
+      "integrity": "sha512-kJt5qhMxoszgU/62PLP1CJytzd2NKetjSRnyuj31fDd3Rlcz3fzlFdFLD1SItunPwyqEOkca6GbV612BWfaBag==",
+      "optional": true,
+      "peer": true
+    },
    "node_modules/rc": {
      "version": "1.2.8",
      "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
@ -5769,20 +5789,20 @@
      "integrity": "sha512-rb+9B5YBIEzYcD6x2VKidaa+cqYBJQKnU4oe4E3ANwRRN56yk/ua1YCJT1n21NTS8w6CcOclAKNP3PhdCXKYtQ=="
    },
    "node_modules/sharp": {
-      "version": "0.32.1",
-      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.32.1.tgz",
-      "integrity": "sha512-kQTFtj7ldpUqSe8kDxoGLZc1rnMFU0AO2pqbX6pLy3b7Oj8ivJIdoKNwxHVQG2HN6XpHPJqCSM2nsma2gOXvOg==",
+      "version": "0.32.4",
+      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.32.4.tgz",
+      "integrity": "sha512-exUnZewqVZC6UXqXuQ8fyJJv0M968feBi04jb9GcUHrWtkRoAKnbJt8IfwT4NJs7FskArbJ14JAFGVuooszoGg==",
      "hasInstallScript": true,
      "optional": true,
      "peer": true,
      "dependencies": {
        "color": "^4.2.3",
-        "detect-libc": "^2.0.1",
+        "detect-libc": "^2.0.2",
        "node-addon-api": "^6.1.0",
        "prebuild-install": "^7.1.1",
-        "semver": "^7.5.0",
+        "semver": "^7.5.4",
        "simple-get": "^4.0.1",
-        "tar-fs": "^2.1.1",
+        "tar-fs": "^3.0.4",
        "tunnel-agent": "^0.6.0"
      },
      "engines": {
@ -5792,6 +5812,30 @@
        "url": "https://opencollective.com/libvips"
      }
    },
+    "node_modules/sharp/node_modules/tar-fs": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-3.0.4.tgz",
+      "integrity": "sha512-5AFQU8b9qLfZCX9zp2duONhPmZv0hGYiBPJsyUdqMjzq/mqVpy/rEUSeHk1+YitmxugaptgBh5oDGU3VsAJq4w==",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "mkdirp-classic": "^0.5.2",
+        "pump": "^3.0.0",
+        "tar-stream": "^3.1.5"
+      }
+    },
+    "node_modules/sharp/node_modules/tar-stream": {
+      "version": "3.1.6",
+      "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-3.1.6.tgz",
+      "integrity": "sha512-B/UyjYwPpMBv+PaFSWAmtYjwdrlEaZQEhMIBFNC5oEG8lpiW8XjcSdmEaClj28ArfKScKHs2nshz3k2le6crsg==",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "b4a": "^1.6.4",
+        "fast-fifo": "^1.2.0",
+        "streamx": "^2.15.0"
+      }
+    },
    "node_modules/shebang-command": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@ -5949,6 +5993,17 @@
        "node": ">=10.0.0"
      }
    },
+    "node_modules/streamx": {
+      "version": "2.15.0",
+      "resolved": "https://registry.npmjs.org/streamx/-/streamx-2.15.0.tgz",
+      "integrity": "sha512-HcxY6ncGjjklGs1xsP1aR71INYcsXFJet5CU1CHqihQ2J5nOsbd4OjgjHO42w/4QNv9gZb3BueV+Vxok5pLEXg==",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "fast-fifo": "^1.1.0",
+        "queue-tick": "^1.0.1"
+      }
+    },
    "node_modules/string_decoder": {
      "version": "1.3.0",
      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
@ -7981,6 +8036,13 @@
        }
      }
    },
+    "b4a": {
+      "version": "1.6.4",
+      "resolved": "https://registry.npmjs.org/b4a/-/b4a-1.6.4.tgz",
+      "integrity": "sha512-fpWrvyVHEKyeEvbKZTVOeZF3VSKKWtJxFIxX/jaVPf+cLbGUSitjb49pHLqPV2BUNNZ0LcoeEGfE/YCpyDYHIw==",
+      "optional": true,
+      "peer": true
+    },
    "bail": {
      "version": "2.0.2",
      "resolved": "https://registry.npmjs.org/bail/-/bail-2.0.2.tgz",
@ -8469,9 +8531,9 @@
      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA=="
    },
    "detect-libc": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.1.tgz",
-      "integrity": "sha512-463v3ZeIrcWtdgIg6vI6XUncguvr2TnGl4SzDXinkt9mSLpBJKXT3mW6xT3VQdDN11+WVs29pgvivTc4Lp8v+w=="
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.2.tgz",
+      "integrity": "sha512-UX6sGumvvqSaXgdKGUsgZWqcUyIXZ/vZTrlRT/iobiKhGL0zL4d3osHj3uqllWJK+i+sixDS/3COVEOFbupFyw=="
    },
    "devalue": {
      "version": "4.3.2",
@ -8669,6 +8731,13 @@
        "is-extendable": "^0.1.0"
      }
    },
+    "fast-fifo": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/fast-fifo/-/fast-fifo-1.3.0.tgz",
+      "integrity": "sha512-IgfweLvEpwyA4WgiQe9Nx6VV2QkML2NkvZnk1oKnIzXgXdWxuhF7zw4DvLTPZJn6PIUneiAXPF24QmoEqHTjyw==",
+      "optional": true,
+      "peer": true
+    },
    "fast-glob": {
      "version": "3.2.12",
      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz",
@ -10175,6 +10244,13 @@
      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A=="
    },
+    "queue-tick": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/queue-tick/-/queue-tick-1.0.1.tgz",
+      "integrity": "sha512-kJt5qhMxoszgU/62PLP1CJytzd2NKetjSRnyuj31fDd3Rlcz3fzlFdFLD1SItunPwyqEOkca6GbV612BWfaBag==",
+      "optional": true,
+      "peer": true
+    },
    "rc": {
      "version": "1.2.8",
      "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
@ -10643,20 +10719,46 @@
      "integrity": "sha512-rb+9B5YBIEzYcD6x2VKidaa+cqYBJQKnU4oe4E3ANwRRN56yk/ua1YCJT1n21NTS8w6CcOclAKNP3PhdCXKYtQ=="
    },
    "sharp": {
-      "version": "0.32.1",
-      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.32.1.tgz",
-      "integrity": "sha512-kQTFtj7ldpUqSe8kDxoGLZc1rnMFU0AO2pqbX6pLy3b7Oj8ivJIdoKNwxHVQG2HN6XpHPJqCSM2nsma2gOXvOg==",
+      "version": "0.32.4",
+      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.32.4.tgz",
+      "integrity": "sha512-exUnZewqVZC6UXqXuQ8fyJJv0M968feBi04jb9GcUHrWtkRoAKnbJt8IfwT4NJs7FskArbJ14JAFGVuooszoGg==",
      "optional": true,
      "peer": true,
      "requires": {
        "color": "^4.2.3",
-        "detect-libc": "^2.0.1",
+        "detect-libc": "^2.0.2",
        "node-addon-api": "^6.1.0",
        "prebuild-install": "^7.1.1",
-        "semver": "^7.5.0",
+        "semver": "^7.5.4",
        "simple-get": "^4.0.1",
-        "tar-fs": "^2.1.1",
+        "tar-fs": "^3.0.4",
        "tunnel-agent": "^0.6.0"
+      },
+      "dependencies": {
+        "tar-fs": {
+          "version": "3.0.4",
+          "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-3.0.4.tgz",
+          "integrity": "sha512-5AFQU8b9qLfZCX9zp2duONhPmZv0hGYiBPJsyUdqMjzq/mqVpy/rEUSeHk1+YitmxugaptgBh5oDGU3VsAJq4w==",
+          "optional": true,
+          "peer": true,
+          "requires": {
+            "mkdirp-classic": "^0.5.2",
+            "pump": "^3.0.0",
+            "tar-stream": "^3.1.5"
+          }
+        },
+        "tar-stream": {
+          "version": "3.1.6",
+          "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-3.1.6.tgz",
+          "integrity": "sha512-B/UyjYwPpMBv+PaFSWAmtYjwdrlEaZQEhMIBFNC5oEG8lpiW8XjcSdmEaClj28ArfKScKHs2nshz3k2le6crsg==",
+          "optional": true,
+          "peer": true,
+          "requires": {
+            "b4a": "^1.6.4",
+            "fast-fifo": "^1.2.0",
+            "streamx": "^2.15.0"
+          }
+        }
      }
    },
    "shebang-command": {
@ -10767,6 +10869,17 @@
      "resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz",
      "integrity": "sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg=="
    },
+    "streamx": {
+      "version": "2.15.0",
+      "resolved": "https://registry.npmjs.org/streamx/-/streamx-2.15.0.tgz",
+      "integrity": "sha512-HcxY6ncGjjklGs1xsP1aR71INYcsXFJet5CU1CHqihQ2J5nOsbd4OjgjHO42w/4QNv9gZb3BueV+Vxok5pLEXg==",
+      "optional": true,
+      "peer": true,
+      "requires": {
+        "fast-fifo": "^1.1.0",
+        "queue-tick": "^1.0.1"
+      }
+    },
    "string_decoder": {
      "version": "1.3.0",
      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
--- a/rehype-image-attr.mjs
+++ b/rehype-image-attr.mjs
@ -0,0 +1,13 @@
+// Adds some HTML attributes to images,
+// only loading=lazy for now
+
+import { selectAll } from 'unist-util-select'
+
+export default function rehypeImageAttr() {
+    return (tree, file) => {
+        const imgs = selectAll('element[tagName=img]', tree)
+        for (let img of imgs) {
+            img.properties.loading = 'lazy'
+        }
+    }
+}
--- a/remark-post-meta.mjs
+++ b/remark-post-meta.mjs
@ -1,3 +1,7 @@
+// Adds metadata to a Markdown page:
+// description -- text extracted from the first paragraph
+// readingTime -- reading time of the whole text, in float (not integer)
+
 import { select } from 'unist-util-select'
 import { visit } from 'unist-util-visit'
 import getReadingTime from 'reading-time'
@ -8,10 +12,9 @@ export default function remarkPostMeta() {

    const firstParaText = mdToString(firstPara)
    const articleText = mdToString(tree)
-
    const readingTime = getReadingTime(articleText)
-    data.astro.frontmatter.readingTime = readingTime.minutes

+    data.astro.frontmatter.readingTime = readingTime.minutes
    data.astro.frontmatter.description = firstParaText
  }
 }
--- a/src/components/ArticleCard.astro
+++ b/src/components/ArticleCard.astro
@ -47,7 +47,7 @@ const link = `/blog/${post.slug}`;
        <MenuItem
            name={/*Share*/""}
            link="javascript:void(0)"
-            icon="&#xf064;"
+            icon="&#xf1e0;"
            atLeft={false}>
            <span slot="js-dataset"
                data-btn="share"
--- a/src/components/ThemeModal.astro
+++ b/src/components/ThemeModal.astro
@ -27,10 +27,11 @@ import TextBox from "./TextBox.astro";
            <TextBox id="accent" label="Accent color" placeholder="HEX (#fff)" regex="#?(?:[A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})" size={7} />
            <Input label="">
                <span class="color-btns" slot="after">
-                    <ColorBtn name="red" hex="#ba505a" />
-                    <ColorBtn name="yellow" hex="#b9aa50" />
-                    <ColorBtn name="green" hex="#5bab65" />
-                    <ColorBtn name="blue" hex="#6570d6" />
+                    <ColorBtn name="maroon" hex="#d15a63" />
+                    <ColorBtn name="coffee" hex="#aa705b" />
+                    <ColorBtn name="grass" hex="#5bab65" />
+                    <ColorBtn name="mint" hex="#449c80" />
+                    <ColorBtn name="indigo" hex="#6570d6" />
                </span>
            </Input>
        </fieldset>
@ -52,6 +53,10 @@ import TextBox from "./TextBox.astro";

    .color-btns {
        margin-top: 0.2rem;
+
+        display: flex;
+        flex-direction: row;
+        column-gap: 0.25rem;
    }

    .hint {
@ -234,12 +239,21 @@ import TextBox from "./TextBox.astro";
            lessStyles.type = 'text/css'
            lessStyles.href = '/theme_dyn.less'
            document.head.append(lessStyles)
+            // Create script element for Less config
+            const lessConfig = document.createElement('script')
+            lessConfig.innerText = 'less = ' + JSON.stringify({
+                env: 'production',
+                async: true,  // really important for slow internet connection
+                fileAsync: true,
+                errorReporting: 'console',
+            })
            // Create LessCSS script element
            const lessScript = document.createElement('script')
            lessScript.src = '/less.min.js'
            // Modify variables when less is loaded
            lessScript.addEventListener('load', reloadTheme)
            // Load LessCSS script
+            document.head.append(lessConfig)
            document.head.append(lessScript)
        }
        else
--- a/src/content/blog/20230529-post.md
+++ b/src/content/blog/20230529-post.md
@ -5,13 +5,27 @@
 ##### H5
 ###### H6

-```
-123
-```
-
 _Hello_  
 **world**

+This is just a text for test, i.e. testing text,
+so there should be no meaning, no colorful diagrams
+with statistics that lie you.
+
+Maybe I'd better use _"Lorem ipsum"_, but it is already
+written in the another sample post.  
+But... hey, why not?
+
+Lorem ipsum dolor sit amet, consequeter adipiscing elit
+I forgot what's next
+
+1234567890 123456789012345678 90123456789012345678 901234567890123456789012345678901234567890123456789
+1234567890 123456789012345678901234567890123 45678901234567890123456789012345678901234567890123456789
+12345678901234567 89012345678901234 56789012345678901234567890123456789012345678901234567890123456789
+123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
+1234567890123456789012 345678901234567890123456789012345 67890123456789012345678901234567890123456789
+123456789 123456
+
 |Col1|Col2|Col3|
 |:--:|:---|---:|
 |Some|cool|data|
@ -24,3 +38,141 @@ console.log(Object.keys({a:'a',b:'b'}))
 > Quotation

 ![Forest](/assets/forest.jpg)
+
+1234567890 123456789012345678 90123456789012345678 901234567890123456789012345678901234567890123456789
+1234567890 123456789012345678901234567890123 45678901234567890123456789012345678901234567890123456789
+12345678901234567 89012345678901234 56789012345678901234567890123456789012345678901234567890123456789
+123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
+1234567890123456789012 345678901234567890123456789012345 67890123456789012345678901234567890123456789
+123456789 123456 1234567890 123456789012345678 90123456789012345678 901234567890123456789012345678901234567890123456789
+1234567890 123456789012345678901234567890123 45678901234567890123456789012345678901234567890123456789
+12345678901234567 89012345678901234 56789012345678901234567890123456789012345678901234567890123456789
+123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
+1234567890123456789012 345678901234567890123456789012345 67890123456789012345678901234567890123456789
+123456789 123456
+
+1234567890 123456789012345678 90123456789012345678 901234567890123456789012345678901234567890123456789
+1234567890 123456789012345678901234567890123 45678901234567890123456789012345678901234567890123456789
+12345678901234567 89012345678901234 56789012345678901234567890123456789012345678901234567890123456789
+123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
+1234567890123456789012 345678901234567890123456789012345 67890123456789012345678901234567890123456789
+123456789 123456 1234567890 123456789012345678 90123456789012345678 901234567890123456789012345678901234567890123456789
+1234567890 123456789012345678901234567890123 45678901234567890123456789012345678901234567890123456789
+12345678901234567 89012345678901234 56789012345678901234567890123456789012345678901234567890123456789
+123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
+1234567890123456789012 345678901234567890123456789012345 67890123456789012345678901234567890123456789
+123456789 123456
+
+1234567890 123456789012345678 90123456789012345678 901234567890123456789012345678901234567890123456789
+1234567890 123456789012345678901234567890123 45678901234567890123456789012345678901234567890123456789
+12345678901234567 89012345678901234 56789012345678901234567890123456789012345678901234567890123456789
+123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
+1234567890123456789012 345678901234567890123456789012345 67890123456789012345678901234567890123456789
+123456789 123456 1234567890 123456789012345678 90123456789012345678 901234567890123456789012345678901234567890123456789
+1234567890 123456789012345678901234567890123 45678901234567890123456789012345678901234567890123456789
+12345678901234567 89012345678901234 56789012345678901234567890123456789012345678901234567890123456789
+123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
+1234567890123456789012 345678901234567890123456789012345 67890123456789012345678901234567890123456789
+123456789 123456
+
+1234567890 123456789012345678 90123456789012345678 901234567890123456789012345678901234567890123456789
+1234567890 123456789012345678901234567890123 45678901234567890123456789012345678901234567890123456789
+12345678901234567 89012345678901234 56789012345678901234567890123456789012345678901234567890123456789
+123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
+1234567890123456789012 345678901234567890123456789012345 67890123456789012345678901234567890123456789
+123456789 123456 1234567890 123456789012345678 90123456789012345678 901234567890123456789012345678901234567890123456789
+1234567890 123456789012345678901234567890123 45678901234567890123456789012345678901234567890123456789
+12345678901234567 89012345678901234 56789012345678901234567890123456789012345678901234567890123456789
+123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
+1234567890123456789012 345678901234567890123456789012345 67890123456789012345678901234567890123456789
+123456789 123456
+
+1234567890 123456789012345678 90123456789012345678 901234567890123456789012345678901234567890123456789
+1234567890 123456789012345678901234567890123 45678901234567890123456789012345678901234567890123456789
+12345678901234567 89012345678901234 56789012345678901234567890123456789012345678901234567890123456789
+123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
+1234567890123456789012 345678901234567890123456789012345 67890123456789012345678901234567890123456789
+123456789 123456 1234567890 123456789012345678 90123456789012345678 901234567890123456789012345678901234567890123456789
+1234567890 123456789012345678901234567890123 45678901234567890123456789012345678901234567890123456789
+12345678901234567 89012345678901234 56789012345678901234567890123456789012345678901234567890123456789
+123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
+1234567890123456789012 345678901234567890123456789012345 67890123456789012345678901234567890123456789
+123456789 123456
+
+1234567890 123456789012345678 90123456789012345678 901234567890123456789012345678901234567890123456789
+1234567890 123456789012345678901234567890123 45678901234567890123456789012345678901234567890123456789
+12345678901234567 89012345678901234 56789012345678901234567890123456789012345678901234567890123456789
+123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
+1234567890123456789012 345678901234567890123456789012345 67890123456789012345678901234567890123456789
+123456789 123456 1234567890 123456789012345678 90123456789012345678 901234567890123456789012345678901234567890123456789
+1234567890 123456789012345678901234567890123 45678901234567890123456789012345678901234567890123456789
+12345678901234567 89012345678901234 56789012345678901234567890123456789012345678901234567890123456789
+123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
+1234567890123456789012 345678901234567890123456789012345 67890123456789012345678901234567890123456789
+123456789 123456
+
+1234567890 123456789012345678 90123456789012345678 901234567890123456789012345678901234567890123456789
+1234567890 123456789012345678901234567890123 45678901234567890123456789012345678901234567890123456789
+12345678901234567 89012345678901234 56789012345678901234567890123456789012345678901234567890123456789
+123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
+1234567890123456789012 345678901234567890123456789012345 67890123456789012345678901234567890123456789
+123456789 123456 1234567890 123456789012345678 90123456789012345678 901234567890123456789012345678901234567890123456789
+1234567890 123456789012345678901234567890123 45678901234567890123456789012345678901234567890123456789
+12345678901234567 89012345678901234 56789012345678901234567890123456789012345678901234567890123456789
+123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
+1234567890123456789012 345678901234567890123456789012345 67890123456789012345678901234567890123456789
+123456789 123456
+
+1234567890 123456789012345678 90123456789012345678 901234567890123456789012345678901234567890123456789
+1234567890 123456789012345678901234567890123 45678901234567890123456789012345678901234567890123456789
+12345678901234567 89012345678901234 56789012345678901234567890123456789012345678901234567890123456789
+123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
+1234567890123456789012 345678901234567890123456789012345 67890123456789012345678901234567890123456789
+123456789 123456 1234567890 123456789012345678 90123456789012345678 901234567890123456789012345678901234567890123456789
+1234567890 123456789012345678901234567890123 45678901234567890123456789012345678901234567890123456789
+12345678901234567 89012345678901234 56789012345678901234567890123456789012345678901234567890123456789
+123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
+1234567890123456789012 345678901234567890123456789012345 67890123456789012345678901234567890123456789
+123456789
+
+## 123456
+
+![Picture1](https://img2.goodfon.com/original/1920x1080/5/bb/river-forest-trees-water-rocks-mountains-snow-landscape-natu.jpg)
+
+1234567890 123456789012345678 90123456789012345678 901234567890123456789012345678901234567890123456789
+1234567890 123456789012345678901234567890123 45678901234567890123456789012345678901234567890123456789
+12345678901234567 89012345678901234 56789012345678901234567890123456789012345678901234567890123456789
+123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
+1234567890123456789012 345678901234567890123456789012345 67890123456789012345678901234567890123456789
+123456789 123456 1234567890 123456789012345678 90123456789012345678 901234567890123456789012345678901234567890123456789
+1234567890 123456789012345678901234567890123 45678901234567890123456789012345678901234567890123456789
+12345678901234567 89012345678901234 56789012345678901234567890123456789012345678901234567890123456789
+123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
+1234567890123456789012 345678901234567890123456789012345 67890123456789012345678901234567890123456789
+123456789 123456
+
+1234567890 123456789012345678 90123456789012345678 901234567890123456789012345678901234567890123456789
+1234567890 123456789012345678901234567890123 45678901234567890123456789012345678901234567890123456789
+12345678901234567 89012345678901234 56789012345678901234567890123456789012345678901234567890123456789
+123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
+1234567890123456789012 345678901234567890123456789012345 67890123456789012345678901234567890123456789
+123456789 123456 1234567890 123456789012345678 90123456789012345678 901234567890123456789012345678901234567890123456789
+1234567890 123456789012345678901234567890123 45678901234567890123456789012345678901234567890123456789
+12345678901234567 89012345678901234 56789012345678901234567890123456789012345678901234567890123456789
+123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
+1234567890123456789012 345678901234567890123456789012345 67890123456789012345678901234567890123456789
+123456789 123456
+
+1234567890 123456789012345678 90123456789012345678 901234567890123456789012345678901234567890123456789
+1234567890 123456789012345678901234567890123 45678901234567890123456789012345678901234567890123456789
+12345678901234567 89012345678901234 56789012345678901234567890123456789012345678901234567890123456789
+123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
+1234567890123456789012 345678901234567890123456789012345 67890123456789012345678901234567890123456789
+123456789 123456 1234567890 123456789012345678 90123456789012345678 901234567890123456789012345678901234567890123456789
+1234567890 123456789012345678901234567890123 45678901234567890123456789012345678901234567890123456789
+12345678901234567 89012345678901234 56789012345678901234567890123456789012345678901234567890123456789
+123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
+1234567890123456789012 345678901234567890123456789012345 67890123456789012345678901234567890123456789
+123456789
+
+![Picture2](https://img4.goodfon.com/original/1920x1080/b/ba/kanada-ozero-les-kamni-reka-peizazh-luchi-kamen-priroda.jpg)
--- a/src/pages/blog/[slug].astro
+++ b/src/pages/blog/[slug].astro
@ -49,6 +49,9 @@ const {
    @import "/src/styles/max_width.less";

    article {
+        .container-width-mixin();
+        margin: 0;
+
        & > h1:first-of-type {
            display: none;
        }
@ -81,8 +84,7 @@ const {
    }

    pre {
-        max-width: calc(100vw - @body-padding * 2 - @main-padding * 2) !important;
-        box-sizing: border-box;
+        .element-width-mixin();

        padding: 1rem;
        border-radius: var(--bdrs);
@ -93,9 +95,13 @@ const {
            "Liberation Mono", "Lucida Console", monospace;
    }

+    figure {
+        .element-width-mixin();
+    }
+
    img {
+        max-width: 100%;
        display: block;
-        max-width: 90%;
        margin: auto;
    }

@ -108,7 +114,7 @@ const {
    }

    table {
-        max-width: 90%;
+        .element-width-mixin();
        margin: auto;

        border-collapse: collapse;
--- a/src/styles/grid_calc.less
+++ b/src/styles/grid_calc.less
@ -17,27 +17,7 @@
@profile-width: @gi-width-wo-text + @profile-text-width;
@service-width: @gi-width-wo-text + @service-text-width;

-.grid-mixin(@custom-width) {
-    /*
-    display: grid;
-    grid-template-columns: repeat(1, auto);
-
-    @width-for-2: @custom-width * 2 + @all-padding;
-    @width-for-3: @custom-width * 3 + @all-padding;
-
-    & when (@width-for-2 < @max-width) {
-        @media (min-width: @width-for-2) {
-            grid-template-columns: repeat(2, auto);
-        }
-    }
-
-    & when (@width-for-3 < @max-width) {
-        @media (min-width: @width-for-3) {
-            grid-template-columns: repeat(3, auto);
-        }
-    }
-    */
-
+.grid-mixin() {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
--- a/src/styles/max_width.less
+++ b/src/styles/max_width.less
@ -2,3 +2,18 @@
@body-padding: 0.5rem;
@main-padding: 0.25rem;
@all-padding: @body-padding * 2 + @main-padding * 2;
+
+// Bugfix for elements like <pre>
+// that goes beyond container's width
+.element-width-mixin() {
+    max-width: calc(100vw - @all-padding) !important;
+    box-sizing: border-box;
+}
+
+// Bugfix for containers like <article>
+// that somehow goes beyond container's width
+// trying to fit all the text
+.container-width-mixin() {
+    max-width: calc(~'100% -' @all-padding) !important;
+    box-sizing: border-box;
+}
Author	SHA1	Message	Date
DarkCat09	e176173730	Updated sample post (for testing purposes)	2023-07-24 20:32:40 +04:00
DarkCat09	d6b37d32d9	Async LessCSS loading; changed colors	2023-07-24 20:32:26 +04:00
DarkCat09	623b11ac65	Changed "share" icon	2023-07-24 17:59:44 +04:00
DarkCat09	9dda240ebe	rehype-image-attr; descriptions for plugins	2023-07-24 17:52:51 +04:00
DarkCat09	d51f0d3f03	Bugfix for containers max-width, code cleanup	2023-07-24 17:49:07 +04:00