diff --git a/.gitignore b/.gitignore index 844c1d2..c5bb1db 100644 --- a/.gitignore +++ b/.gitignore @@ -8,9 +8,10 @@ # testing /coverage -# next.js -/.next/ -/out/ +# next.js +/.next/ +/.next-stale-module-cache/ +/out/ # production /build @@ -70,8 +71,17 @@ tmp/ .codex-temp/ *.report.html *.report.json -tmp_*.js -test_email.py -meta-fix.js -read-inbox.mjs -quora_antwort_statisch_dynamisch.txt +tmp_*.js +test_email.py +meta-fix.js +read-inbox.mjs +quora_antwort_statisch_dynamisch.txt + +# Local developer-package workspaces and unreferenced generated media +/packages/ +/public/Events/ +/public/Gyms/ +/public/Hotels/ +/public/Real Estate/ +/public/restaurant/ +/.qr-master-api-health-state diff --git a/src/app/(main)/(marketing)/developers/page.tsx b/src/app/(main)/(marketing)/developers/page.tsx new file mode 100644 index 0000000..4f0280d --- /dev/null +++ b/src/app/(main)/(marketing)/developers/page.tsx @@ -0,0 +1,196 @@ +import { Metadata } from 'next'; +import { + ArrowRight, + Braces, + Chrome, + Code2, + ExternalLink, + Github, + Package, + TerminalSquare, +} from 'lucide-react'; + +export const metadata: Metadata = { + title: 'Developer Ecosystem | QR Master', + description: + 'Create QR codes with QR Master in VS Code, Chrome, Python, Node.js, GitHub Actions, and your own workflows.', + alternates: { + canonical: 'https://www.qrmaster.net/developers', + }, +}; + +const tools = [ + { + title: 'VS Code / Cursor / Windsurf Extension', + icon: Code2, + description: + 'Generate QR codes directly in VS Code, Cursor, VSCodium, and Windsurf preview tabs.', + command: 'qrmaster.generate', + linkLabel: 'Open VSX Registry', + url: 'https://open-vsx.org/extension/qrmaster/qrmaster-generator', + }, + { + title: 'GitHub Action Marketplace', + icon: Braces, + description: + 'Automate QR code generation in GitHub Actions workflows and build artifacts.', + command: 'uses: knuthtimo-lab/qrmaster-cli@v1.0.0', + linkLabel: 'GitHub Marketplace Action', + url: 'https://github.com/marketplace/actions/qr-master-code-generator', + }, + { + title: 'Node.js CLI & npm Package', + icon: Package, + description: + 'Generate vector SVG and PNG QR codes from any terminal or Node.js application.', + command: 'npx qrmaster-cli generate "https://www.qrmaster.net"', + linkLabel: 'View on npm', + url: 'https://www.npmjs.com/package/qrmaster-cli', + }, + { + title: 'PyPI Python Package', + icon: TerminalSquare, + description: + 'Use QR Master from Python scripts and Django or Flask applications.', + command: 'pip install qrmaster', + linkLabel: 'View on PyPI', + url: 'https://pypi.org/project/qrmaster/', + }, + { + title: 'GitHub Repository', + icon: Github, + description: + 'Explore the source, clone the CLI, open issues, and build on QR Master.', + command: 'git clone https://github.com/knuthtimo-lab/qrmaster-cli.git', + linkLabel: 'Explore on GitHub', + url: 'https://github.com/knuthtimo-lab/qrmaster-cli', + }, + { + title: 'Chrome Web Store Extension', + icon: Chrome, + description: + 'The QR Master browser extension has been submitted and is awaiting Google review.', + command: 'Item ID: cieplgkdeempmjknljhabookhfhejgno', + linkLabel: 'Chrome Web Store', + url: 'https://chromewebstore.google.com', + status: 'Soon', + }, +]; + +export default function DevelopersPage() { + return ( +
+
+
+ +
+
+
+ The toolkit +

+ Choose your environment. +

+

+ Each integration lets you generate QR codes without leaving the tools you already use. +

+
+ +
+ {tools.map((tool) => { + const Icon = tool.icon; + + return ( +
+
+
+
+ {tool.status ? ( + + {tool.status} + + ) : null} +
+

{tool.title}

+

{tool.description}

+ + + {tool.command} + + + + {tool.linkLabel} + +
+ ); + })} +
+
+
+ +
+
+
+ Open source +

+ Start with the CLI, then make it your own. +

+

+ Browse the repository for the CLI source, command examples, and GitHub Action setup. +

+ + View the repository + +
+
+
+
+ ); +} diff --git a/src/components/ui/Footer.tsx b/src/components/ui/Footer.tsx index 21ba082..738420b 100644 --- a/src/components/ui/Footer.tsx +++ b/src/components/ui/Footer.tsx @@ -123,10 +123,22 @@ export function Footer({ variant = 'marketing', t }: FooterProps) {
  • {translations.terms_of_service}
  • Contact
  • QR Code Erstellen (DE)
  • -
  • Barcode Generator
  • +
    +

    Developer Suite

    + +
    +
    diff --git a/src/lib/blog-data.ts b/src/lib/blog-data.ts index cc1dcd8..c0daac8 100644 --- a/src/lib/blog-data.ts +++ b/src/lib/blog-data.ts @@ -1,6 +1,157 @@ import type { BlogPost } from './types'; export const blogPosts: BlogPost[] = [ + { + slug: 'youtube-qr-code-guide', + title: 'YouTube QR Codes: Turn Offline Attention Into Video Views', + description: + 'Learn how to create a YouTube QR code for a video, channel, playlist, or Short—and choose the right destination, CTA, print placement, and tracking setup.', + excerpt: + 'A useful YouTube QR code does more than open YouTube. This guide shows how to match the code to the moment someone scans it, then measure what works.', + category: 'Social Media', + pillar: 'use-cases', + published: true, + publishDate: '2026-07-31', + date: 'July 31, 2026', + datePublished: '2026-07-31T09:00:00Z', + dateModified: '2026-07-31T09:00:00Z', + updatedAt: '2026-07-31', + authorSlug: 'timo', + authorName: 'Timo Knuth', + authorTitle: 'QR Code & Marketing Expert', + readTime: '8 Min', + image: '/og-youtube-generator.png', + heroImage: '/og-youtube-generator.png', + imageAlt: 'YouTube video preview and QR code on a smartphone', + keywords: [ + 'youtube qr code', + 'youtube video qr code', + 'youtube channel qr code', + 'youtube playlist qr code', + 'youtube shorts qr code', + 'track youtube qr code scans', + ], + quickAnswer: + '

    A YouTube QR code turns a printed scan into a direct path to a video, channel, playlist, or Short. Choose one specific next action for each code, add a clear instruction such as “Scan to watch the 60-second demo,” and use a dynamic QR code when the link may change or you need scan analytics.

    ', + keySteps: [ + 'Choose one destination: a video, channel, playlist, Short, or timestamped moment.', + 'Copy the share link from YouTube and paste it into the QR Master YouTube QR code generator.', + 'Write a specific call to action that tells people what they will get after scanning.', + 'Download a high-quality QR image, place it where the video is useful, and test it on real phones.', + 'Use a separate dynamic QR code for each important placement if you want to compare scan activity.', + ], + faq: [ + { + question: 'Should my YouTube QR code link to a video or my channel?', + answer: + 'Link to one video when the person scanning has a specific question or has just seen a related product, poster, or instruction. Link to your channel when the main goal is ongoing discovery and subscriptions. A playlist is best for a guided series.', + }, + { + question: 'Can a YouTube QR code start at a specific point in a video?', + answer: + 'Yes. Use YouTube\'s share option to copy a link that includes the starting time, then create the QR code from that full link. Test it before printing because playback behavior can vary by device and app settings.', + }, + { + question: 'Can I change the YouTube video after printing the QR code?', + answer: + 'A static QR code cannot be changed because it contains the destination link directly. A dynamic QR code can point to a new video later while the printed QR pattern stays the same.', + }, + { + question: 'How do I know which poster or product generated a YouTube scan?', + answer: + 'Create one distinct dynamic QR code per placement—for example, one for packaging, one for a trade-show banner, and one for a receipt. Compare their scan activity in your QR analytics. You can also add UTM parameters when you control the destination page.', + }, + { + question: 'Do YouTube QR codes work with Shorts and playlists?', + answer: + 'Yes. Copy the Share link for the Short or playlist and use it as the QR destination. The key is to pair the code with a CTA that explains what the viewer will see.', + }, + ], + relatedSlugs: [ + 'trackable-qr-codes', + 'utm-parameter-qr-codes', + 'qr-code-print-size-guide', + 'instagram-qr-code-generator', + ], + content: `
    +

    A QR code beside a YouTube logo is not a strategy. It is only a shortcut. The useful question is: what should someone see after they scan, at this exact moment?

    + +

    Someone holding a product may need a setup video. A visitor at your stand may need a 30-second demo. A customer leaving your restaurant may want a recipe, a behind-the-scenes story, or a reason to come back. When the video answers the question already in their head, a YouTube QR code removes the last bit of friction between interest and play.

    + +

    This guide helps you create that kind of QR code—one that gives people a useful next step instead of sending them into a generic channel page.

    + +

    First choose the job your QR code needs to do

    + +

    The same channel can have several QR codes. Each should serve one situation and one action.

    + + + +

    For example, “Watch our channel” makes a weak table-tent CTA. “Scan to see today’s dish prepared in 45 seconds” gives a guest a concrete reason to scan. The code stays the same technology; the outcome is much clearer.

    + +

    How to make a YouTube QR code with QR Master

    + +
      +
    1. Open the destination in YouTube. Select Share and copy the exact link for the video, channel, playlist, or Short.
    2. +
    3. Decide whether the link is permanent. For a single, unchanging video, a static code can be enough. For campaigns, printed materials, or a video you may replace later, use a dynamic code.
    4. +
    5. Create the code. Paste the link into the YouTube QR Code Generator.
    6. +
    7. Make the promise visible. Put a short CTA beside the code. Tell people what they receive, not merely what to do.
    8. +
    9. Test the real experience. Scan it from the intended distance and in normal lighting. Check the actual destination on both iPhone and Android if your audience uses both.
    10. +
    + +

    Write a CTA that earns the scan

    + +

    “Scan me” asks for effort without offering a reason. A good QR CTA makes a small, credible promise that fits the placement.

    + + + +

    Specific language also protects the viewer’s time. If the video takes six minutes, say so. If it is a playlist, name the result: “Start the three-part onboarding series.”

    + +

    Static or dynamic: decide before you print

    + +

    A static QR code stores the YouTube link inside the pattern. It is simple, but permanent. If the video is removed, unlisted, replaced, or no longer the right destination, the code on your printed material cannot be edited.

    + +

    A dynamic QR code stores a managed redirect instead. You can update the final YouTube destination without changing the QR code on the poster, product, menu, or display. It is the safer choice whenever the physical item will last longer than the campaign.

    + +

    That distinction matters especially for restaurant teams. A printed table card can keep its QR code while the destination changes from a seasonal menu video to a chef introduction or a new promotion. For the broader workflow, see QR codes for restaurants.

    + +

    Measure placements, not just total scans

    + +

    One QR code used everywhere gives you one blended number. It cannot tell you whether the window poster, receipt, product insert, or counter sign created the interest.

    + +

    Instead, create a separate dynamic QR code for each meaningful placement. Give each code a clear label in your dashboard, such as spring-packaging, storefront-window, or event-booth. You can then compare scan activity by time and placement, keep what earns attention, and replace what does not.

    + +

    Use QR code tracking for scan-level campaign insight. If the path leads to a page you control before YouTube, add UTM parameters to connect the offline placement with your web analytics.

    + +

    Design and placement checklist

    + + + +

    The simplest reliable setup

    + +

    Start with one specific video that solves a real question. Use a direct, honest CTA. Generate the code, test it where it will live, and use a dynamic version when the destination or measurement matters. That is enough to turn a printed square into a useful bridge from the physical world to your YouTube content.

    + +

    Ready to make one? Create your free YouTube QR code with QR Master.

    +
    `, + }, + { slug: 'convert-static-to-dynamic-qr-code', title: 'Can You Convert a Static QR Code to a Dynamic One?',