From 344a870a4dc48f53cbad36e11fbce65d6f87d2ad Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sun, 23 Nov 2025 21:30:07 +0000 Subject: [PATCH 1/3] Initial plan From 54b28df0b01ec17c307955e4b1efc1cdbe5773c4 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sun, 23 Nov 2025 21:35:49 +0000 Subject: [PATCH 2/3] Add sassier documentation-style page with enhanced styling Co-authored-by: phieri <12006381+phieri@users.noreply.github.com> --- docs/docs.css | 268 ++++++++++++++++++++++++++++++++++++++++++++++++ docs/index.html | 171 +++++++++++++++++++++++++++--- 2 files changed, 427 insertions(+), 12 deletions(-) create mode 100644 docs/docs.css diff --git a/docs/docs.css b/docs/docs.css new file mode 100644 index 0000000..9b62573 --- /dev/null +++ b/docs/docs.css @@ -0,0 +1,268 @@ +/** + * Documentation Page Stylesheet + * Custom styles for the callsign.js documentation/demo page + */ + +:root { + --primary-color: #0066cc; + --secondary-color: #6c757d; + --success-color: #28a745; + --code-bg: #f5f5f5; + --border-color: #e0e0e0; + --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12); + --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1); + --radius: 8px; +} + +@media (prefers-color-scheme: dark) { + :root { + --primary-color: #4d9fff; + --secondary-color: #adb5bd; + --code-bg: #2d2d2d; + --border-color: #404040; + } +} + +/* Hero Section */ +.hero { + text-align: center; + padding: 3rem 1rem; + margin-bottom: 2rem; +} + +.hero h1 { + font-size: 3rem; + margin-bottom: 0.5rem; + background: linear-gradient(135deg, var(--primary-color), var(--success-color)); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.hero .subtitle { + font-size: 1.5rem; + font-weight: 600; + margin-bottom: 0.5rem; + opacity: 0.9; +} + +.hero .tagline { + font-size: 1.1rem; + opacity: 0.7; + margin-bottom: 2rem; +} + +.header-links { + display: flex; + gap: 1rem; + justify-content: center; + flex-wrap: wrap; + margin-top: 2rem; +} + +/* Buttons */ +.btn { + display: inline-flex; + align-items: center; + gap: 0.5rem; + padding: 0.75rem 1.5rem; + border-radius: var(--radius); + text-decoration: none; + font-weight: 500; + transition: all 0.2s; + border: 2px solid transparent; +} + +.btn-primary { + background-color: var(--primary-color); + color: white; +} + +.btn-primary:hover { + transform: translateY(-2px); + box-shadow: var(--shadow-md); +} + +.btn-secondary { + border: 2px solid var(--primary-color); + color: var(--primary-color); +} + +.btn-secondary:hover { + background-color: var(--primary-color); + color: white; +} + +/* Sections */ +section { + margin-bottom: 4rem; + scroll-margin-top: 2rem; +} + +section h2 { + font-size: 2rem; + margin-bottom: 1.5rem; + padding-bottom: 0.5rem; + border-bottom: 3px solid var(--primary-color); +} + +/* Demo Cards */ +.demo-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 2rem; + margin-top: 2rem; +} + +.demo-card { + background: var(--code-bg); + padding: 1.5rem; + border-radius: var(--radius); + border: 1px solid var(--border-color); +} + +.demo-card h3 { + margin-top: 0; + color: var(--primary-color); +} + +/* Feature Grid */ +.feature-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 1.5rem; + margin-top: 2rem; +} + +.feature-card { + padding: 1.5rem; + border-radius: var(--radius); + border: 1px solid var(--border-color); + transition: all 0.2s; + text-align: center; +} + +.feature-card:hover { + box-shadow: var(--shadow-md); + transform: translateY(-4px); + border-color: var(--primary-color); +} + +.feature-icon { + font-size: 3rem; + margin-bottom: 1rem; +} + +.feature-card h3 { + color: var(--primary-color); + margin-bottom: 0.5rem; +} + +.feature-card p { + margin: 0; + opacity: 0.8; + font-size: 0.95rem; +} + +/* Getting Started Steps */ +.step { + margin-bottom: 2rem; + padding: 1.5rem; + background: var(--code-bg); + border-radius: var(--radius); + border-left: 4px solid var(--primary-color); +} + +.step h3 { + margin-top: 0; + color: var(--primary-color); +} + +/* Code Blocks */ +pre { + background: var(--code-bg); + padding: 1rem; + border-radius: var(--radius); + overflow-x: auto; + border: 1px solid var(--border-color); +} + +code { + background: var(--code-bg); + padding: 0.2rem 0.4rem; + border-radius: 4px; + font-size: 0.9em; + font-family: 'Courier New', Courier, monospace; +} + +pre code { + background: none; + padding: 0; +} + +/* Tables */ +table { + width: 100%; + border-collapse: collapse; + margin-top: 1rem; +} + +table th { + background: var(--code-bg); + padding: 0.75rem; + text-align: left; + border-bottom: 2px solid var(--border-color); +} + +table td { + padding: 0.75rem; + border-bottom: 1px solid var(--border-color); +} + +table tbody tr:hover { + background: var(--code-bg); +} + +/* Footer */ +footer { + margin-top: 4rem; + padding: 2rem 0; + border-top: 1px solid var(--border-color); + text-align: center; +} + +.footer-content p { + margin: 0.5rem 0; +} + +.footer-content a { + color: var(--primary-color); + text-decoration: none; + margin: 0 0.5rem; +} + +.footer-content a:hover { + text-decoration: underline; +} + +/* Utilities */ +.muted { + opacity: 0.7; + font-style: italic; +} + +/* Responsive */ +@media (max-width: 768px) { + .hero h1 { + font-size: 2rem; + } + + .hero .subtitle { + font-size: 1.2rem; + } + + .feature-grid, + .demo-grid { + grid-template-columns: 1fr; + } +} diff --git a/docs/index.html b/docs/index.html index 5c162d5..eba9011 100644 --- a/docs/index.html +++ b/docs/index.html @@ -3,31 +3,178 @@ - callsign.js example page + callsign.js - ITU Radio Call Sign Library + +
-

callsign.js example page

+
+

๐Ÿ“ป callsign.js

+

Enhance ITU radio call signs on your web pages

+

Interactive call signs with country flags, phonetic information, and automatic detection

+
+ + + View on GitHub + + Get Started +
+
+
- +
+

โœจ Live Demo

+

See the library in action! Call signs below are automatically detected and enhanced with country flags and phonetic information:

+ +
+
+

Marked up call signs

+

Using the <call-sign> tag:

+
    +
  • South African: ZR9OOO
    • +
  • Norwegian: LN0ABC
    • +
  • Slovak: OM0ZAS
    • +
+
+ +
+

Auto-detected call signs

+

With data-search="true" enabled:

+
    +
  • Swedish: SA9BC recognized automatically
    • +
  • Danish: OY9ZZZ also detected
    • +
  • Invalid: YN9ZZZ not in ITU table
    • +
+
+
+
+ +
+

๐ŸŽฏ Features

+
+
+
๐Ÿšฉ
+

Country Flags

+

Automatically displays the country flag for each recognized call sign prefix

+
+
+
๐Ÿ”ค
+

Phonetic Alphabet

+

Provides NATO phonetic spelling in tooltips and for screen readers

+
+
+
๐Ÿ”
+

Auto-Detection

+

Optionally finds and highlights untagged call signs in your content

+
+
+
โ™ฟ
+

Accessible

+

Built with accessibility in mind, including proper ARIA labels

+
+
+
๐ŸŽจ
+

Customizable

+

Style call signs using CSS custom properties for theming

+
+
+
โšก
+

Lightweight

+

No dependencies, works directly in the browser

+
+
+
+ +
+

๐Ÿš€ Getting Started

+ +
+

1. Include the library

+

Add callsign.js to your HTML <head> section:

+ 
<script id="callsign-js" src="callsign.js" defer></script>
+
+ +
+

2. Tag your call signs

+

Wrap call signs with the custom <call-sign> element:

+ 
<p>I had contact with <call-sign>SM8AYA</call-sign> on shortwave.</p>
+
+ +
+

3. Configure options (optional)

+

Customize behavior with data attributes:

+ 
<script id="callsign-js" src="callsign.js" 
+  data-flag="true" 
+  data-monospace="true"
+  data-phonetic="true"
+  data-search="true"
+  defer></script>
+
+
+ +
+

โš™๏ธ Configuration Options

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
OptionDefaultDescription
data-flagtrueShow country flag emoji before call signs
data-monospacetrueRender call signs with monospace font
data-phonetictrueAdd phonetic spelling for screen readers
data-searchfalseAutomatically detect and mark up untagged call signs
+
+ +
+

๐Ÿ“– About

+

This library highlights ITU radio call signs (including amateur radio) on web pages, making them more interactive and informative. The code is intentionally not minified to support the amateur radio community's learning and experimentation goals.

+

Amateur radio is about learning and experimenting. Minified files make it drastically harder to understand the code.

+
+ From 50bf52c51df2a838c2e4e281e612f05d8b36322c Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sun, 23 Nov 2025 21:37:54 +0000 Subject: [PATCH 3/3] Address code review feedback: improve accessibility and wording Co-authored-by: phieri <12006381+phieri@users.noreply.github.com> --- docs/docs.css | 11 ++++++++++- docs/index.html | 2 +- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/docs/docs.css b/docs/docs.css index 9b62573..b05b581 100644 --- a/docs/docs.css +++ b/docs/docs.css @@ -33,12 +33,21 @@ .hero h1 { font-size: 3rem; margin-bottom: 0.5rem; + color: var(--primary-color); background: linear-gradient(135deg, var(--primary-color), var(--success-color)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } +/* Fallback for browsers without background-clip support or high contrast mode */ +@supports not (background-clip: text) or not (-webkit-background-clip: text) { + .hero h1 { + color: var(--primary-color); + background: none; + } +} + .hero .subtitle { font-size: 1.5rem; font-weight: 600; @@ -192,7 +201,7 @@ code { padding: 0.2rem 0.4rem; border-radius: 4px; font-size: 0.9em; - font-family: 'Courier New', Courier, monospace; + font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'Courier New', Courier, monospace; } pre code { diff --git a/docs/index.html b/docs/index.html index eba9011..1c82f88 100644 --- a/docs/index.html +++ b/docs/index.html @@ -160,7 +160,7 @@

โš™๏ธ Configuration Options

๐Ÿ“– About

This library highlights ITU radio call signs (including amateur radio) on web pages, making them more interactive and informative. The code is intentionally not minified to support the amateur radio community's learning and experimentation goals.

-

Amateur radio is about learning and experimenting. Minified files make it drastically harder to understand the code.

+

Amateur radio is about learning and experimenting. Minified files make it dramatically harder to understand the code.