Version Packages

docs/guides/go-live/social-media.md

@@ -9,7 +9,7 @@ It will look like this but with your logo
 
 There are multiple ways you can modify it.
 
-Note: If your logo has an `<xml>` tag it will throw an error as it will be inlined into this svg and nested xml tags are not allowed.
+Note: If your logo has an `<?xml>` tag it will throw an error as it will be inlined into this svg and nested xml tags are not allowed.
 
 ## Setting it via frontMatter
 
@@ -69,22 +69,24 @@ const config = {
         logo = '',
       }) => {
         let svgStr = `
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 630">
-            <defs></defs>
-            <rect width="100%" height="100%" fill="#ddd" />
-            <circle cx="1000" cy="230" r="530" fill="#efefef"></circle>
-            <rect width="100%" height="100%" style="fill:none; stroke-width:20; stroke:red;" />
-            <g transform="matrix(0.6, 0, 0, 0.6, 580, 100)">${logo}</g>
-            <text x="70" y="200" font-family="'Bitstream Vera Sans','Helvetica',sans-serif" font-weight="700" font-size="80">
-              ${title}
-            </text>
-            <text x="70" y="320" font-family="'Bitstream Vera Sans','Helvetica',sans-serif" font-weight="700" font-size="60">
-              ${subTitle}
-            </text>
-            <text x="70" y="420" font-family="'Bitstream Vera Sans','Helvetica',sans-serif" font-weight="700" font-size="60">
-              ${subTitle2}
-            </text>
-            <text x="70" y="560" fill="gray" font-size="40">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 630" style="fill: #ecedef;">
+            <defs/>
+            <rect width="100%" height="100%" fill="#38393e"/>
+            <g transform="matrix(0.45, 0, 0, 0.45, 300, 60)">${logo}</g>
+            <g style="
+              font-size: 70px;
+              text-anchor: middle;
+              font-family: 'Bitstream Vera Sans','Helvetica',sans-serif;
+              font-weight: 700;
+            ">
+              <text x="50%" y="470">
+                ${title}
+              </text>
+              <text x="50%" y="520" style="font-size: 30px;">
+                ${subTitle}
+              </text>
+            </g>
+            <text x="10" y="620" style="font-size: 30px; fill: gray;">
               ${footer}
             </text>
           </svg>

packages/cli/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @rocket/cli
 
+## 0.4.1
+
+### Patch Changes
+
+- c92769a: Processing links and asset urls to generate the final html output is now utf8 safe
+- 562e91f: Make sure logos do not have "<?xml" in their code
+
 ## 0.4.0
 
 ### Minor Changes

packages/cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rocket/cli",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "publishConfig": {
     "access": "public"
   },
@@ -66,7 +66,8 @@
     "command-line-args": "^5.1.1",
     "command-line-usage": "^6.1.1",
     "fs-extra": "^9.0.1",
-    "plugins-manager": "^0.2.0"
+    "plugins-manager": "^0.2.0",
+    "utf8": "^3.0.0"
   },
   "types": "dist-types/index.d.ts"
 }

packages/cli/src/eleventy-plugins/processLocalReferences.cjs

@@ -1,5 +1,6 @@
 const fs = require('fs');
 const path = require('path');
+const utf8 = require('utf8');
 const { SaxEventType, SAXParser } = require('sax-wasm');
 
 const saxPath = require.resolve('sax-wasm/lib/sax-wasm.wasm');
@@ -204,15 +205,15 @@ function applyChanges(_changes, _content) {
   return content.replace(/XXXRocketProcessLocalReferencesXXX/g, '\n');
 }
 
-async function processLocalReferences(content) {
+async function processLocalReferences(_content) {
+  const content = utf8.encode(_content);
   const inputPath = this.inputPath;
   const { hrefs, assets } = extractReferences(content, inputPath);
   const newHrefs = calculateNewHrefs(hrefs, inputPath);
   const newAssets = calculateNewAssets(assets, inputPath);
 
   const newContent = applyChanges([...newHrefs, ...newAssets], content);
-
-  return newContent;
+  return utf8.decode(newContent);
 }
 
 module.exports = {

packages/cli/src/public/createSocialImage.cjs

@@ -22,8 +22,8 @@ async function createSocialImage(args) {
   const logoBuffer = await fs.promises.readFile(logoPath);
   const logo = logoBuffer.toString();
 
-  if (logo.includes('<xml')) {
-    throw new Error('You should not have an "<xml" tag in your logo.svg');
+  if (logo.includes('<?xml')) {
+    throw new Error('You should not have an "<?xml" tag in your logo.svg');
   }
 
   const svgStr = await createSocialImageSvg({ logo, ...args });

packages/cli/test-node/RocketCli.computedConfig.test.js

@@ -156,8 +156,8 @@ describe('RocketCli computedConfig', () => {
         '<img src="/images/my-img.svg" alt="absolute-img"></p>',
         '<div>',
         '  <a href="./">Root</a>',
-        '  <a href="guides/#with-anchor">Guides</a>',
-        '  <a href="./one-level/raw/">Raw</a>',
+        '  👇<a href="guides/#with-anchor">Guides</a>',
+        '  👉 <a href="./one-level/raw/">Raw</a>',
         '  <a href="template/">Template</a>',
         '  <a href="./rules/tabindex/">EndingIndex</a>',
         '  <img src="./images/my-img.svg" alt="my-img">',

packages/cli/test-node/computed-config-fixtures/image-link/docs/index.md

@@ -8,8 +8,8 @@
 
 <div>
   <a href="./">Root</a>
-  <a href="./guides.md#with-anchor">Guides</a>
-  <a href="./one-level/raw.html">Raw</a>
+  👇<a href="./guides.md#with-anchor">Guides</a>
+  👉 <a href="./one-level/raw.html">Raw</a>
   <a href="./template.njk">Template</a>
   <a href="./rules/tabindex.md">EndingIndex</a>
   <img src="./images/my-img.svg" alt="my-img">

yarn.lock

@@ -8664,6 +8664,11 @@ uri-js@^4.2.2:
   dependencies:
     punycode "^2.1.0"
 
+utf8@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/utf8/-/utf8-3.0.0.tgz#f052eed1364d696e769ef058b183df88c87f69d1"
+  integrity sha512-E8VjFIQ/TyQgp+TZfS6l8yp/xWppSAHzidGiRrqe4bK4XP9pTRyKFgGJpO3SN7zdX4DeomTrwaseCHovfpFcqQ==
+
 util-deprecate@^1.0.1, util-deprecate@~1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"