Fix styling on QrCode component

Author: webstackdev

_TODO.md

@@ -34,7 +34,7 @@ Hide any interactive or screen-specific components using display: none; in your
 - Navigation Menus: All top-level and dropdown links.
 - Search Icons/Bars: These are non-functional on paper.
 - Breadcrumbs: While useful on-screen for site hierarchy, they often look like cluttered, disconnected text on paper. Most designers remove them to keep the focus on the primary content.
-- Social Media & CTA Buttons: "Sign In" or "Follow Us" buttons are irrelevant in print.
+- Social Media & CTA Buttons & Download CTA: "Sign In" or "Follow Us" buttons are irrelevant in print.
 
 __Expand External Links For Print__
 

src/components/QrCode/server/index.ts

@@ -1,4 +1,3 @@
-import { readFile } from 'node:fs/promises'
 import QRCodeStyling from 'qr-code-styling'
 import { JSDOM } from 'jsdom'
 
@@ -10,32 +9,67 @@ const QR_DOT_COLOR = '#000000'
 const QR_CORNER_COLOR = '#4b5563'
 const QR_CORNER_DOT_COLOR = '#111111'
 const QR_BACKGROUND_COLOR = '#ffffff'
-const LOGO_OUTER_COLOR = '#000000'
-const LOGO_INNER_COLOR = '#6b7280'
 const LOGO_BACKDROP_COLOR = '#ffffff'
-const logoSvgFileUrl = new URL('../../../assets/images/site/logo.svg', import.meta.url)
-
-let cachedLogoSvg: string | null = null
+const LOGO_SVG_MARKUP = `<svg
+	id="logo"
+	title="Webstack Builders Company Logo"
+	width="88.360085"
+	height="86.394562"
+	viewBox="0 0 88.360085 86.394562"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<g
+		id="logo-group"
+		transform="translate(-64.234499,-91.339148)"
+	>
+		<path
+			fill="#000000"
+			id="logo-block-top-left"
+			d="M 64.234499,105.965 V 91.339148 h 8.904504 8.904505 V 105.965 120.59085 h -8.904505 -8.904504 z"
+		/>
+		<path
+			fill="#000000"
+			id="logo-block-top-middle"
+			d="M 88.893126,105.965 V 91.339148 H 109.0995 129.30588 V 105.965 120.59085 H 109.0995 88.893126 Z"
+		/>
+		<path
+			fill="#000000"
+			id="logo-block-top-right"
+			d="M 134.78557,105.965 V 91.339148 h 8.90451 8.9045 V 105.965 120.59085 h -8.9045 -8.90451 z"
+		/>
+		<path
+			fill="#6b7280"
+			id="logo-block-middle-left"
+			d="m 64.234499,134.53643 v -8.5034 h 20.548856 20.548855 v 8.5034 8.5034 H 84.783355 64.234499 Z"
+		/>
+		<path
+			fill="#6b7280"
+			id="logo-block-middle-right"
+			d="m 111.49687,134.53643 v -8.5034 h 20.54885 20.54886 v 8.5034 8.5034 h -20.54886 -20.54885 z"
+		/>
+		<path
+			fill="#000000"
+			id="logo-block-bottom-left"
+			d="m 64.234499,163.10786 v -14.62585 h 8.904504 8.904505 v 14.62585 14.62585 h -8.904505 -8.904504 z"
+		/>
+		<path
+			fill="#000000"
+			id="logo-block-bottom-middle"
+			d="m 88.893126,163.10786 v -14.62585 h 20.206374 20.20638 v 14.62585 14.62585 H 109.0995 88.893126 Z"
+		/>
+		<path
+			fill="#000000"
+			id="logo-block-bottom-right"
+			d="m 134.78557,163.10786 v -14.62585 h 8.90451 8.9045 v 14.62585 14.62585 h -8.9045 -8.90451 z"
+		/>
+	</g>
+</svg>`
 
 export interface RenderQrCodeSvgOptions {
 	data: string
 	size?: number
 }
 
-const getMonochromeLogoSvg = async (): Promise<string> => {
-	if (cachedLogoSvg) {
-		return cachedLogoSvg
-	}
-
-	const logoSvg = await readFile(logoSvgFileUrl, 'utf8')
-
-	cachedLogoSvg = logoSvg
-		.replace(/var\(--color-content-inverse\)/g, LOGO_OUTER_COLOR)
-		.replace(/var\(--color-primary\)/g, LOGO_INNER_COLOR)
-
-	return cachedLogoSvg
-}
-
 const parseLogoViewBox = (viewBox: null | string): { height: number; width: number } => {
 	if (!viewBox) {
 		return {
@@ -113,24 +147,22 @@ export const renderQrCodeSvg = async ({
 	data,
 	size = DEFAULT_SIZE,
 }: RenderQrCodeSvgOptions): Promise<string> => {
-	const logoSvgMarkup = await getMonochromeLogoSvg()
-
 	const qrCode = new QRCodeStyling({
 		backgroundOptions: {
 			color: QR_BACKGROUND_COLOR,
 		},
 		cornersDotOptions: {
 			color: QR_CORNER_DOT_COLOR,
-			type: 'dot',
+			type: 'dots',
 		},
 		cornersSquareOptions: {
 			color: QR_CORNER_COLOR,
-			type: 'extra-rounded',
+			type: 'dots',
 		},
 		data,
 		dotsOptions: {
 			color: QR_DOT_COLOR,
-			type: 'rounded',
+			type: 'dots',
 		},
 		height: size,
 		jsdom: JSDOM,
@@ -142,7 +174,7 @@ export const renderQrCodeSvg = async ({
 		width: size,
 	})
 
-	qrCode.applyExtension(createLogoExtension(logoSvgMarkup))
+	qrCode.applyExtension(createLogoExtension(LOGO_SVG_MARKUP))
 
 	const svgBuffer = await qrCode.getRawData('svg')
 

src/content/articles/demo/index.mdx

@@ -12,7 +12,6 @@ isDraft: true
 
 import decisionTreeDiagram from './decision-tree-for-page-vs-notification-classification.jpg'
 import Demo from '@components/Test/Demo.mdx'
-import QrCode from '@components/QrCode/index.astro'
 
 Includes from [other Markdown]('/articles/demo') files.
 
@@ -2171,6 +2170,14 @@ graph TD
     D --> B
 ```
 
+## QR Code
+
+```markdown
+<QrCode isHidden={false} data="https://www.webstackbuilders.com/articles/demo" />
+```
+
+<QrCode isHidden={false} data="https://www.webstackbuilders.com/articles/demo" />
+
 ## Social Embeds
 
 ### YouTube Embed

src/layouts/MarkdownLayout.astro

@@ -32,6 +32,7 @@ import List from '@components/List/index.astro'
 import ListItem from '@components/List/ListItem.astro'
 import MastodonModal from '@components/Social/Mastodon/index.astro'
 import Newsletter from '@components/CallToAction/Newsletter/index.astro'
+import QrCode from '@components/QrCode/index.astro'
 import Shares from '@components/Social/Shares/index.astro'
 import Table from '@components/Table/index.astro'
 import Time from '@components/Time/index.astro'
@@ -62,6 +63,7 @@ const Components = {
   MastodonModal,
   Newsletter,
   Picture,
+  QrCode,
   Shares,
   Testimonials,
   Table,