fix: optimize font handling via local font with preload and optional display

2026-03-10 08:51:24 +00:00 · 2022-03-27 18:16:39 +02:00
parent 1968e2365d
commit cb105c5f1e
17 changed files with 240 additions and 51 deletions
--- a/package.json
+++ b/package.json
@@ -37,7 +37,7 @@
    "test": "yarn test:node && yarn test:web",
    "test:integration": "playwright test packages/*/test-node/*.spec.js",
    "test:node": "yarn test:unit && yarn test:integration",
-    "test:unit": "node --trace-warnings ./node_modules/.bin/mocha --require ./scripts/testMochaGlobalHooks.js \"packages/*/test-node/**/*.test.{ts,js,mjs,cjs}\" -- --timeout 5000 --reporter dot --exit",
+    "test:unit": "node --trace-warnings ./node_modules/.bin/mocha --require ./scripts/testMochaGlobalHooks.js \"packages/*/test-node/**/*.test.{ts,js,mjs,cjs}\" -- --timeout 8000 --reporter dot --exit",
    "test:web": "web-test-runner",
    "types": "run-s types:clear types:copy types:build",
    "types:build": "tsc --build",
@@ -85,7 +85,7 @@
    "prettier": "^2.5.1",
    "prettier-plugin-package": "^1.3.0",
    "publish-docs": "^0.1.2",
-    "puppeteer": "^9.0.0",
+    "puppeteer": "^13.0.0",
    "remark-emoji": "^2.1.0",
    "rimraf": "^3.0.2",
    "rollup": "^2.36.1",
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -30,7 +30,7 @@
    "rocket:build": "node src/cli.js build -c demo",
    "rocket:start": "node src/cli.js start -c demo",
    "start": "npm run rocket:start",
-    "test": "mocha --require ../../scripts/testMochaGlobalHooks.js test-node/**/*.test.{js,cjs} test-node/*.test.{js,cjs} --timeout 5000",
+    "test": "mocha --require ../../scripts/testMochaGlobalHooks.js test-node/**/*.test.{js,cjs} test-node/*.test.{js,cjs} --timeout 8000",
    "test:watch": "onchange 'src/**/*.{js,cjs}' 'test-node/**/*.{js,cjs}' -- npm test",
    "types:copy": "copyfiles \"./types/**/*.d.ts\" dist-types/",
    "xtest:watch": "mocha test/**/*.test.js --parallel --watch"
--- a/packages/cli/src/RocketBuild.js
+++ b/packages/cli/src/RocketBuild.js
@@ -188,7 +188,7 @@ export class RocketBuild {
          }
        }
        const url = `http://localhost:${this.engine.devServer.config.port}/${relUrl}`;
-        await page.goto(url);
+        await page.goto(url, { waitUntil: 'networkidle0' });
        await page.screenshot({ path: imagePath });

        await unlink(openGraphFile);
--- a/packages/launch/__public/fonts/OpenSans-Italic-VariableFont_wdth,wght.ttf
+++ b/packages/launch/__public/fonts/OpenSans-Italic-VariableFont_wdth,wght.ttf
--- a/packages/launch/__public/fonts/OpenSans-Italic-VariableFont_wdth,wght.woff2
+++ b/packages/launch/__public/fonts/OpenSans-Italic-VariableFont_wdth,wght.woff2
--- a/packages/launch/__public/fonts/OpenSans-VariableFont_wdth,wght.ttf
+++ b/packages/launch/__public/fonts/OpenSans-VariableFont_wdth,wght.ttf
--- a/packages/launch/__public/fonts/OpenSans-VariableFont_wdth,wght.woff2
+++ b/packages/launch/__public/fonts/OpenSans-VariableFont_wdth,wght.woff2
--- a/packages/launch/css/404.css
+++ b/packages/launch/css/404.css
@@ -1,5 +1,3 @@
-@import url('https://fonts.googleapis.com/css?family=Dosis:300,400,500');
-
@-moz-keyframes rocket-movement {
  100% {
    -moz-transform: translate(1200px, -600px);
--- a/packages/launch/css/layout.css
+++ b/packages/launch/css/layout.css
@@ -5,6 +5,14 @@
  }
 }

+@font-face {
+  font-family: 'Open Sans';
+  src: url('/fonts/OpenSans-VariableFont_wdth,wght.woff2') format('woff2 supports variations'),
+    url('/fonts/OpenSans-VariableFont_wdth,wght.woff2') format('woff2-variations');
+  font-weight: 1 999;
+  font-display: optional;
+}
+
 body {
  margin: 0;
  font-family: var(--primary-font-family);
--- a/packages/launch/src/LayoutSidebar.js
+++ b/packages/launch/src/LayoutSidebar.js
@@ -136,15 +136,12 @@ export class LayoutSidebar extends Layout {
        <meta name="twitter:card" content="summary_large_image" />
      `,
      head__40: html`
-        <link rel="preconnect" href="https://fonts.googleapis.com" crossorigin />
-
        <link
-          href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&amp;display=optional"
-          rel="stylesheet"
-        />
-        <link
-          href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&amp;display=optional"
-          rel="stylesheet"
+          rel="preload"
+          href="/fonts/OpenSans-VariableFont_wdth,wght.woff2"
+          as="font"
+          type="font/woff2"
+          crossorigin
        />

        <link rel="stylesheet" href="resolve:@rocket/launch/css/variables.css" />
--- a/presets/spark/src/css/content.css
+++ b/presets/spark/src/css/content.css
@@ -3,7 +3,7 @@
  src: url('/fonts/OpenSans-VariableFont_wdth,wght.woff2') format('woff2 supports variations'),
    url('/fonts/OpenSans-VariableFont_wdth,wght.woff2') format('woff2-variations');
  font-weight: 1 999;
-  font-display: swap;
+  font-display: optional;
 }

 body {
--- a/site/pages/10--docs/30--guides/20--social-media.rocket.md
+++ b/site/pages/10--docs/30--guides/20--social-media.rocket.md
@@ -57,8 +57,23 @@ export const openGraphLayout = () => html`
  <html lang="en">
    <head>
      <meta charset="utf-8" />
+      <link
+        rel="preload"
+        href="/fonts/OpenSans-VariableFont_wdth,wght.woff2"
+        as="font"
+        type="font/woff2"
+        crossorigin
+      />
      <style>
+        @font-face {
+          font-family: 'Open Sans';
+          src: url('/fonts/OpenSans-VariableFont_wdth,wght.woff2') format('woff2 supports variations'),
+            url('/fonts/OpenSans-VariableFont_wdth,wght.woff2') format('woff2-variations');
+          font-weight: 1 999;
+          font-display: optional;
+        }
        body {
+          font-family: 'Open Sans', sans-serif;
          background: conic-gradient(from 90deg at 50% 0%, #111, 50%, #222, #111);
          color: #ccc;
          display: block;
@@ -122,6 +137,15 @@ The best approach is to
 See a small screen capture of how that may look
 https://twitter.com/daKmoR/status/1507727164099248135?s=20&t=iESgVMwNfoPuPMbASLfIlw

+### Fonts
+
+In most cases the build of rocket will run within a CI (like Github Actions) or via a service (like Netlify build).
+This means that if we locally design your open graph html with a specific font and then generate the open graph image on a different machine then we may get a different result. The reasons for that is that systems fonts are vastly different per Operating System and Service.
+
+To prevent this it's recommended to use a web font as that will make sure wherever the image gets generated it will always have access to the same font.
+
+Loading web fonts can be tricky so be sure to checkout our [web fonts guide](./80--web-fonts.rocket.md).
+
 ### Using the PageTree

 Instead of extra defining the data for the open graph image we can use the [PageTree](../20--basics/50--layouts.rocket.md) to automatically get the page title.
@@ -139,8 +163,23 @@ export const openGraphLayout = () => html`
  <html lang="en">
    <head>
      <meta charset="utf-8" />
+      <link
+        rel="preload"
+        href="/fonts/OpenSans-VariableFont_wdth,wght.woff2"
+        as="font"
+        type="font/woff2"
+        crossorigin
+      />
      <style>
+        @font-face {
+          font-family: 'Open Sans';
+          src: url('/fonts/OpenSans-VariableFont_wdth,wght.woff2') format('woff2 supports variations'),
+            url('/fonts/OpenSans-VariableFont_wdth,wght.woff2') format('woff2-variations');
+          font-weight: 1 999;
+          font-display: optional;
+        }
        body {
+          font-family: 'Open Sans', sans-serif;
          background: conic-gradient(from 90deg at 50% 0%, #111, 50%, #222, #111);
          color: #ccc;
          display: block;
@@ -216,8 +255,23 @@ export const layout = data => html`
  <html lang="en">
    <head>
      <meta charset="utf-8" />
+      <link
+        rel="preload"
+        href="/fonts/OpenSans-VariableFont_wdth,wght.woff2"
+        as="font"
+        type="font/woff2"
+        crossorigin
+      />
      <style>
+        @font-face {
+          font-family: 'Open Sans';
+          src: url('/fonts/OpenSans-VariableFont_wdth,wght.woff2') format('woff2 supports variations'),
+            url('/fonts/OpenSans-VariableFont_wdth,wght.woff2') format('woff2-variations');
+          font-weight: 1 999;
+          font-display: optional;
+        }
        body {
+          font-family: 'Open Sans', sans-serif;
          margin: 20px;
        }
        h1 {
--- a/site/pages/10--docs/30--guides/80--web-fonts.rocket.md
+++ b/site/pages/10--docs/30--guides/80--web-fonts.rocket.md
@@ -0,0 +1,94 @@
+```js server
+/* START - Rocket auto generated - do not touch */
+export const sourceRelativeFilePath = '10--docs/30--guides/80--web-fonts.rocket.md';
+import {
+  html,
+  layout,
+  setupUnifiedPlugins,
+  components,
+  openGraphLayout,
+} from '../../recursive.data.js';
+export { html, layout, setupUnifiedPlugins, components, openGraphLayout };
+/* END - Rocket auto generated - do not touch */
+
+export const subTitle =
+  'Using a variable font file with preload and optional display means NO layout shift at all';
+```
+
+# Web Fonts
+
+Using web fonts can be tricky and as there are so many considerations
+
+- Use a [Variable Font](https://web.dev/variable-fonts/)?
+- How to [reduced the size](https://web.dev/reduce-webfont-size/)?
+- How to avoid [a layout shift as the font is loaded](https://web.dev/preload-optional-fonts/)?
+- ...
+
+Here is a quick summary of what you should do as of 2022.
+
+1. Use a variable font
+
+   This means only ONE font file needs to be download for all the different weights and widths.
+   This file is usually bigger then one weight of a font but smaller then multiple weights font files.
+
+   Not many fonts are "easily" accessible as a variable font. Often you need to manually [convert](https://convertio.co/ttf-woff/) a variable font ttf file to a web woff2 file.
+
+   If you just need any font then feel free to download the the optimized [Open Sans](/fonts/OpenSans-VariableFont_wdth,wght.woff2) we are using on this page.
+
+   ```css
+   @font-face {
+     font-family: 'Open Sans';
+     src: url('/fonts/OpenSans-VariableFont_wdth,wght.woff2') format('woff2 supports variations'), url('/fonts/OpenSans-VariableFont_wdth,wght.woff2')
+         format('woff2-variations');
+     font-weight: 1 999;
+   }
+   ```
+
+2. Preload the web font
+
+   This means the font will start downloading before any CSS has even been parsed.
+
+   ```html
+   <link
+     rel="preload"
+     href="/fonts/OpenSans-VariableFont_wdth,wght.woff2"
+     as="font"
+     type="font/woff2"
+     crossorigin
+   />
+   ```
+
+3. Use optional fonts
+
+   In combination with 2. this means there will be NO layout shift at all. Nothing will be display until the font is loaded or a timeout (usually 100ms) is reached. If there is a timeout then for this page visit a fallback font will be used.
+   On the next page load the font will be cached and directly rendered with the web font.
+
+   ```css
+   @font-face {
+     font-display: optional;
+   }
+   ```
+
+## Put it all together
+
+All together this means you can use local web fonts and there will be no layout shift.
+
+```html
+<link
+  rel="preload"
+  href="/fonts/OpenSans-VariableFont_wdth,wght.woff2"
+  as="font"
+  type="font/woff2"
+  crossorigin
+/>
+
+<style>
+  @font-face {
+    font-family: 'Open Sans';
+    src: url('/fonts/OpenSans-VariableFont_wdth,wght.woff2') format('woff2 supports variations'), url('/fonts/OpenSans-VariableFont_wdth,wght.woff2')
+        format('woff2-variations');
+    font-weight: 1 999;
+    font-display: optional;
+  }
+</style>
+```
--- a/site/pages/index.rocket.js
+++ b/site/pages/index.rocket.js
@@ -70,8 +70,24 @@ export const openGraphLayout = data => html`
  <html lang="en">
    <head>
      <meta charset="utf-8" />
-      <style>
+      <link
+        rel="preload"
+        href="/fonts/OpenSans-VariableFont_wdth,wght.woff2"
+        as="font"
+        type="font/woff2"
+        crossorigin
+      />
+      <style type="text/css">
+        @font-face {
+          font-family: 'Open Sans';
+          src: url('/fonts/OpenSans-VariableFont_wdth,wght.woff2')
+              format('woff2 supports variations'),
+            url('/fonts/OpenSans-VariableFont_wdth,wght.woff2') format('woff2-variations');
+          font-weight: 1 999;
+          font-display: optional;
+        }
        body {
+          font-family: 'Open Sans', sans-serif;
          background: conic-gradient(from 90deg at 50% 0%, #111, 50%, #222, #111);
          color: #ccc;
          font-size: 30px;
@@ -102,10 +118,11 @@ export const openGraphLayout = data => html`
        }
        #bg-wrapper img {
          position: absolute;
-          right: -17%;
-          top: -7%;
+          right: -15%;
+          top: -6%;
          transform: rotate(45deg);
-          width: 69%;
+          width: 61%;
+          z-index: 10;
        }
        .item {
          display: flex;
--- a/site/pages/pageTreeData.rocketGenerated.json
+++ b/site/pages/pageTreeData.rocketGenerated.json
@@ -607,6 +607,11 @@
                  "id": "adjusting-the-open-graph-layout",
                  "level": 3
                },
+                {
+                  "text": "Fonts",
+                  "id": "fonts",
+                  "level": 3
+                },
                {
                  "text": "Using the PageTree",
                  "id": "using-the-pagetree",
@@ -819,6 +824,29 @@
              "outputRelativeFilePath": "docs/guides/styles-and-css/index.html",
              "sourceRelativeFilePath": "10--docs/30--guides/70--styles-and-css.rocket.md",
              "level": 3
+            },
+            {
+              "title": "Web Fonts | Rocket",
+              "h1": "Web Fonts",
+              "headlinesWithId": [
+                {
+                  "text": "Web Fonts",
+                  "id": "web-fonts",
+                  "level": 1
+                },
+                {
+                  "text": "Put it all together",
+                  "id": "put-it-all-together",
+                  "level": 2
+                }
+              ],
+              "name": "Web Fonts",
+              "menuLinkText": "Web Fonts",
+              "url": "/docs/guides/web-fonts/",
+              "outputRelativeFilePath": "docs/guides/web-fonts/index.html",
+              "sourceRelativeFilePath": "10--docs/30--guides/80--web-fonts.rocket.md",
+              "level": 3,
+              "subTitle": "Using a variable font file with preload and optional display means NO layout shift at all"
            }
          ]
        }
--- a/site/pages/recursive.data.js
+++ b/site/pages/recursive.data.js
@@ -64,7 +64,22 @@ export const openGraphLayout = data => html`
  <html lang="en">
    <head>
      <meta charset="utf-8" />
+      <link
+        rel="preload"
+        href="/fonts/OpenSans-VariableFont_wdth,wght.woff2"
+        as="font"
+        type="font/woff2"
+        crossorigin
+      />
      <style>
+        @font-face {
+          font-family: 'Open Sans';
+          src: url('/fonts/OpenSans-VariableFont_wdth,wght.woff2')
+              format('woff2 supports variations'),
+            url('/fonts/OpenSans-VariableFont_wdth,wght.woff2') format('woff2-variations');
+          font-weight: 1 999;
+          font-display: optional;
+        }
        body {
          background: conic-gradient(from 90deg at 50% 0%, #111, 50%, #222, #111);
          color: #ccc;
@@ -73,6 +88,7 @@ export const openGraphLayout = data => html`
          padding: 30px;
          box-sizing: border-box;
          margin: 0;
+          font-family: 'Open Sans', sans-serif;
        }
        #powered-by {
          margin: 3%;
@@ -91,15 +107,15 @@ export const openGraphLayout = data => html`
          background: linear-gradient(to bottom right, #ffe259, #ffa751);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
-          font-size: 108px;
+          font-size: 100px;
          margin: 3%;
        }
        p {
-          margin-left: 3%;
+          margin: 3%;
        }
        #sub-title {
          font-size: 50px;
-          max-width: 62%;
+          max-width: 67%;
        }
        #bg-wrapper {
          position: absolute;
--- a/yarn.lock
+++ b/yarn.lock
@@ -3807,11 +3807,6 @@ detect-indent@^6.0.0:
  resolved "https://registry.yarnpkg.com/detect-indent/-/detect-indent-6.0.0.tgz#0abd0f549f69fc6659a254fe96786186b6f528fd"
  integrity sha512-oSyFlqaTHCItVRGK5RmrmjB+CmaMOW7IaNA/kdxqhoa6d17j/5ce9O9eWXmV/KEdRwqpQA+Vqe8a8Bsybu4YnA==

-devtools-protocol@0.0.869402:
-  version "0.0.869402"
-  resolved "https://registry.yarnpkg.com/devtools-protocol/-/devtools-protocol-0.0.869402.tgz#03ade701761742e43ae4de5dc188bcd80f156d8d"
-  integrity sha512-VvlVYY+VDJe639yHs5PHISzdWTLL3Aw8rO4cvUtwvoxFd6FHbE4OpHHcde52M6096uYYazAmd4l0o5VuFRO2WA==
-
 devtools-protocol@0.0.960912:
  version "0.0.960912"
  resolved "https://registry.yarnpkg.com/devtools-protocol/-/devtools-protocol-0.0.960912.tgz#411c1fa355eddb72f06c4a8743f2808766db6245"
@@ -4210,7 +4205,7 @@ external-editor@^3.1.0:
    iconv-lite "^0.4.24"
    tmp "^0.0.33"

-extract-zip@2.0.1, extract-zip@^2.0.0, extract-zip@^2.0.1:
+extract-zip@2.0.1, extract-zip@^2.0.1:
  version "2.0.1"
  resolved "https://registry.yarnpkg.com/extract-zip/-/extract-zip-2.0.1.tgz#663dca56fe46df890d5f131ef4a06d22bb8ba13a"
  integrity sha512-GDhU9ntwuKyGXdZBUgTIe+vXnWj0fppUEtMDL0+idd5Sta8TGpHssn/eusA9mrPr9qNDym6SxAYZjNvCn/9RBg==
@@ -6558,7 +6553,7 @@ node-emoji@^1.10.0:
  dependencies:
    lodash.toarray "^4.4.0"

-node-fetch@2.6.7, node-fetch@^2.6.0, node-fetch@^2.6.1, node-fetch@^2.6.7:
+node-fetch@2.6.7, node-fetch@^2.6.0, node-fetch@^2.6.7:
  version "2.6.7"
  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.7.tgz#24de9fba827e3b4ae44dc8b20256a379160052ad"
  integrity sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==
@@ -7142,7 +7137,7 @@ process-nextick-args@~2.0.0:
  resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
  integrity sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==

-progress@2.0.3, progress@^2.0.0, progress@^2.0.1, progress@^2.0.3:
+progress@2.0.3, progress@^2.0.0, progress@^2.0.3:
  version "2.0.3"
  resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8"
  integrity sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==
@@ -7253,24 +7248,6 @@ puppeteer@^13.0.0:
    unbzip2-stream "1.4.3"
    ws "8.5.0"

-puppeteer@^9.0.0:
-  version "9.1.1"
-  resolved "https://registry.yarnpkg.com/puppeteer/-/puppeteer-9.1.1.tgz#f74b7facf86887efd6c6b9fabb7baae6fdce012c"
-  integrity sha512-W+nOulP2tYd/ZG99WuZC/I5ljjQQ7EUw/jQGcIb9eu8mDlZxNY2SgcJXTLG9h5gRvqA3uJOe4hZXYsd3EqioMw==
-  dependencies:
-    debug "^4.1.0"
-    devtools-protocol "0.0.869402"
-    extract-zip "^2.0.0"
-    https-proxy-agent "^5.0.0"
-    node-fetch "^2.6.1"
-    pkg-dir "^4.2.0"
-    progress "^2.0.1"
-    proxy-from-env "^1.1.0"
-    rimraf "^3.0.2"
-    tar-fs "^2.0.0"
-    unbzip2-stream "^1.3.3"
-    ws "^7.2.3"
-
 qs@^6.5.2:
  version "6.9.4"
  resolved "https://registry.yarnpkg.com/qs/-/qs-6.9.4.tgz#9090b290d1f91728d3c22e54843ca44aea5ab687"
@@ -8314,7 +8291,7 @@ table-layout@^1.0.1:
    typical "^5.2.0"
    wordwrapjs "^4.0.0"

-tar-fs@2.1.1, tar-fs@^2.0.0:
+tar-fs@2.1.1:
  version "2.1.1"
  resolved "https://registry.yarnpkg.com/tar-fs/-/tar-fs-2.1.1.tgz#489a15ab85f1f0befabb370b7de4f9eb5cbe8784"
  integrity sha512-V0r2Y9scmbDRLCNex/+hYzvp/zyYjvFbHPNgVTKfQvVrb6guiE/fxP+XblDNR011utopbkex2nM4dHNV6GDsng==
@@ -8577,7 +8554,7 @@ typical@^5.0.0, typical@^5.2.0:
  resolved "https://registry.yarnpkg.com/typical/-/typical-5.2.0.tgz#4daaac4f2b5315460804f0acf6cb69c52bb93066"
  integrity sha512-dvdQgNDNJo+8B2uBQoqdb11eUCE1JQXhvjC/CZtgvZseVd5TYMXnq0+vuUemXbd/Se29cTaUuPX3YIc2xgbvIg==

-unbzip2-stream@1.4.3, unbzip2-stream@^1.3.3:
+unbzip2-stream@1.4.3:
  version "1.4.3"
  resolved "https://registry.yarnpkg.com/unbzip2-stream/-/unbzip2-stream-1.4.3.tgz#b0da04c4371311df771cdc215e87f2130991ace7"
  integrity sha512-mlExGW4w71ebDJviH16lQLtZS32VKqsSfk80GCfUlwT/4/hNRFsoscrF/c++9xinkMzECL1uL9DDwXqFWkruPg==
@@ -9027,7 +9004,7 @@ ws@8.5.0:
  resolved "https://registry.yarnpkg.com/ws/-/ws-8.5.0.tgz#bfb4be96600757fe5382de12c670dab984a1ed4f"
  integrity sha512-BWX0SWVgLPzYwF8lTzEy1egjhS4S4OEAHfsO8o65WOVsrnSRGaSiUaa9e0ggGlkMTtBlmOpEXiie9RUcBO86qg==

-ws@^7.2.3, ws@^7.4.2, ws@^7.4.6:
+ws@^7.4.2, ws@^7.4.6:
  version "7.5.5"
  resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.5.tgz#8b4bc4af518cfabd0473ae4f99144287b33eb881"
  integrity sha512-BAkMFcAzl8as1G/hArkxOxq3G7pjUqQ3gzYbLL0/5zNkph70e+lCoxBGnm6AW1+/aiNeV4fnKqZ8m4GZewmH2w==