From 896c9b1a0709e8aea1b3e6d822e553952b4b64c8 Mon Sep 17 00:00:00 2001 From: Timo Knuth Date: Wed, 21 Jan 2026 22:39:04 +0100 Subject: [PATCH] feat: Implement a client-side barcode generator tool and integrate IndexNow API for site URL submission. --- .../BarcodeGeneratorClient.tsx | 30 ++++++++++------ .../tools/barcode-generator/BarcodeGuide.tsx | 34 ++++++++++--------- src/lib/indexnow.ts | 2 +- 3 files changed, 39 insertions(+), 27 deletions(-) diff --git a/src/app/(marketing)/tools/barcode-generator/BarcodeGeneratorClient.tsx b/src/app/(marketing)/tools/barcode-generator/BarcodeGeneratorClient.tsx index 3cf5c64..2e57a15 100644 --- a/src/app/(marketing)/tools/barcode-generator/BarcodeGeneratorClient.tsx +++ b/src/app/(marketing)/tools/barcode-generator/BarcodeGeneratorClient.tsx @@ -150,18 +150,20 @@ export default function BarcodeGeneratorClient() { {/* Configuration */}

- +

- + setValue(e.target.value)} placeholder="Enter barcode data (e.g. 12345678)" className="h-12 text-base rounded-xl border-slate-200 focus:border-slate-900 focus:ring-slate-900" + aria-label="Barcode content" />
@@ -195,17 +197,18 @@ export default function BarcodeGeneratorClient() { {/* Design Options */}

- +

- + {width}px
setWidth(parseFloat(e.target.value))} className="w-full h-2 bg-slate-200 rounded-lg appearance-none cursor-pointer accent-slate-900" + aria-label="Barcode width" />
- + {height}px
setHeight(parseInt(e.target.value))} className="w-full h-2 bg-slate-200 rounded-lg appearance-none cursor-pointer accent-slate-900" + aria-label="Barcode height" />
@@ -245,10 +251,10 @@ export default function BarcodeGeneratorClient() { lineColor === c.value ? "border-slate-900 ring-2 ring-offset-2 ring-slate-200" : "border-white shadow-md" )} style={{ backgroundColor: c.value }} - aria-label={`Select ${c.name}`} + aria-label={`Select color ${c.name}`} title={c.name} > - {lineColor === c.value && } + {lineColor === c.value &&
@@ -361,8 +367,9 @@ export default function BarcodeGeneratorClient() {
@@ -373,6 +380,7 @@ export default function BarcodeGeneratorClient() { onClick={() => downloadBarcode('svg')} variant="outline" className="w-full sm:w-auto px-6 border-slate-300 hover:bg-white h-12 rounded-xl font-bold" + aria-label="Download barcode as SVG" > SVG @@ -382,16 +390,18 @@ export default function BarcodeGeneratorClient() { variant="outline" className="w-full sm:w-auto px-4 border-slate-300 hover:bg-white h-12 rounded-xl" title="Copy to Clipboard" + aria-label="Copy barcode image to clipboard" > - +
diff --git a/src/app/(marketing)/tools/barcode-generator/BarcodeGuide.tsx b/src/app/(marketing)/tools/barcode-generator/BarcodeGuide.tsx index 489c12d..4188236 100644 --- a/src/app/(marketing)/tools/barcode-generator/BarcodeGuide.tsx +++ b/src/app/(marketing)/tools/barcode-generator/BarcodeGuide.tsx @@ -28,13 +28,15 @@ export function BarcodeGuide() { src="/barcode-generator-preview.png" alt="Free Online Barcode Generator Preview - Create EAN, UPC, and Code 128 Barcodes" className="w-full h-64 sm:h-80 object-cover" + width="800" + height="320" />
Use our free barcode generator to create scannable codes.
-

What Is a Barcode?

+

What Is a Barcode?

A barcode is a visual representation of data that can be read by machines. It consists of vertical lines with different widths and spacing, which encode numbers or characters. When scanned with a barcode scanner or smartphone, the information is instantly translated into readable data.

@@ -42,7 +44,7 @@ export function BarcodeGuide() { Barcodes are commonly used to identify products, track inventory, manage logistics, and speed up checkout processes. They reduce manual input and significantly lower the risk of human error.

-

How Does a Barcode Generator Work?

+

How Does a Barcode Generator Work?

A Barcode Generator converts text or numeric input into a barcode format that scanners can read. The process is simple:

@@ -80,7 +82,7 @@ export function BarcodeGuide() { A modern Barcode Generator works directly in the browser and does not require additional software.

-

Common Types of Barcodes

+

Common Types of Barcodes

Different barcode formats are used for different purposes. Choosing the right one is important for compatibility and scanning accuracy.

@@ -94,7 +96,7 @@ export function BarcodeGuide() {
Retail • Europe
- EAN-13 Barcode Sample for International Products + EAN-13 Barcode Sample for International Products

EAN-13 is widely used in retail, especially in Europe. It is designed for consumer products sold in stores and supermarkets. @@ -109,7 +111,7 @@ export function BarcodeGuide() {

Retail • USA/Canada
- UPC-A Barcode Example for Retail Products in USA + UPC-A Barcode Example for Retail Products in USA

UPC-A is similar to EAN-13 but is mainly used in the United States and Canada for retail products. @@ -124,7 +126,7 @@ export function BarcodeGuide() {

Logistics • Universal
- Code 128 Barcode for Inventory and Shipping Labels + Code 128 Barcode for Inventory and Shipping Labels

Code 128 is a flexible barcode format that supports letters and numbers. It is commonly used in logistics, shipping, and internal tracking systems. @@ -139,7 +141,7 @@ export function BarcodeGuide() {

Industrial • Military
- Code 39 Barcode for Industrial Use + Code 39 Barcode for Industrial Use

The first alphanumeric barcode, Code 39 is still widely used in automotive and defense industries. It supports numbers and uppercase letters. @@ -154,7 +156,7 @@ export function BarcodeGuide() {

Inventory • Shelves
- MSI Barcode for Inventory Management + MSI Barcode for Inventory Management

MSI (Modified Plessey) is often used for inventory control in retail environments, such as labeling shelves in supermarkets and warehouses. @@ -169,7 +171,7 @@ export function BarcodeGuide() {

Pharma • Packaging
- Pharmacode for Pharmaceutical Packaging + Pharmacode for Pharmaceutical Packaging

Pharmacode is a specialized barcode standard used in the pharmaceutical industry for packaging control to prevent medication errors. @@ -179,7 +181,7 @@ export function BarcodeGuide() { -

Why Use a Barcode Generator?

+

Why Use a Barcode Generator?

Using a Barcode Generator offers several advantages:

@@ -215,7 +217,7 @@ export function BarcodeGuide() { For small businesses, online shops, and startups, a free Barcode Generator is often the easiest way to get started.

-

Barcode vs QR Code

+

Barcode vs QR Code

Although barcodes and QR codes are often confused, they serve different purposes. A barcode stores data horizontally and is mainly used for product identification. A QR code stores data both horizontally and vertically and can contain more complex information such as URLs or contact details.

@@ -223,7 +225,7 @@ export function BarcodeGuide() { If you only need to identify products or inventory items, a classic barcode is usually the better choice.

-

Are Barcodes Free to Use?

+

Are Barcodes Free to Use?

The barcode image itself can be generated for free using a Barcode Generator. However, for retail products sold internationally, the barcode number may need to be officially registered through organizations such as GS1. This ensures that the barcode is unique and recognized globally.

@@ -231,7 +233,7 @@ export function BarcodeGuide() { For internal use, testing, or small projects, free barcode generation is usually sufficient.

-

Use Cases for Barcodes

+

Use Cases for Barcodes

Barcodes are used in many industries, including:

  • Retail and e-commerce
    • @@ -244,12 +246,12 @@ export function BarcodeGuide() { A reliable Barcode Generator helps streamline these processes and improves efficiency.

    -

    Understanding Check Digits

    +

    Understanding Check Digits

    Most barcodes (like EAN and UPC) include a "Check Digit"—the last number in the sequence. This digit is calculated mathematically from the other numbers to ensure the barcode is scanned correctly. Even if a barcode is slightly damaged or scratched, the scanner uses the check digit to verify the integrity of the data.

    -

    Best Practices for Printing Barcodes

    +

    Best Practices for Printing Barcodes

    To ensure your barcodes scan instantly at the checkout or in the warehouse, follow these printing tips:

    @@ -264,7 +266,7 @@ export function BarcodeGuide() {
    -

    Frequently Asked Questions (FAQ)

    +

    Frequently Asked Questions (FAQ)

    diff --git a/src/lib/indexnow.ts b/src/lib/indexnow.ts index 319d0de..c204f4d 100644 --- a/src/lib/indexnow.ts +++ b/src/lib/indexnow.ts @@ -8,7 +8,7 @@ const INDEXNOW_ENDPOINT = 'https://api.indexnow.org/indexnow'; const HOST = 'www.qrmaster.net'; // You need to generate a key from https://www.bing.com/indexnow and place it in your public folder // For now, we'll assume a key exists or is provided via env -const KEY = process.env.INDEXNOW_KEY || 'your-indexnow-key'; +const KEY = process.env.INDEXNOW_KEY || 'bb6dfaacf1ed41a880281c426c54ed7c'; const KEY_LOCATION = `https://${HOST}/${KEY}.txt`; export async function submitToIndexNow(urls: string[]) {