Add Algolia InstantSearch Integration to TypeComposer Docs - #18

Draft
joaodibba with Copilot wants to merge 7 commits into
mainfrom
copilot/add-algolia-search-integration
Draft

Add Algolia InstantSearch Integration to TypeComposer Docs#18
joaodibba with Copilot wants to merge 7 commits into
mainfrom
copilot/add-algolia-search-integration

Conversation

CopilotAI commented Oct 10, 2025•
edited
Loading

Copy link
Copy Markdown
Contributor

Overview

This PR integrates Algolia InstantSearch into the TypeComposer documentation to enable fast, relevant search functionality as requested in the issue.

🔍 Features Added

Search Functionality

  • Algolia InstantSearch integration with a polished modal-based UI
  • Keyboard shortcuts: ⌘K (Mac) / Ctrl+K (Windows/Linux) to open search, ESC to close
  • Search button in navigation bar with visual keyboard shortcut indicator
  • Highlighted search terms in results for better visibility
  • Content snippets showing context around matched terms
  • Theme-aware styling supporting both dark and light modes
  • Responsive design optimized for mobile and desktop

Components

1. AlgoliaSearch (src/components/search/AlgoliaSearch.ts)

Core search component implementing Algolia InstantSearch with:

  • Configurable search widgets (searchBox, hits, configure)
  • Unique instance IDs to prevent DOM conflicts if multiple instances exist
  • Proper lifecycle management with onInit/onDestroy hooks
  • DOM verification using requestAnimationFrame before initialization
  • Clean resource disposal on component destruction

2. SearchModal (src/components/search/SearchModal.ts)

Modal wrapper providing:

  • Backdrop with blur effect
  • Keyboard shortcut handling (⌘K/Ctrl+K for open, ESC for close)
  • Focus management for accessibility
  • Scroll lock when modal is open

3. Custom Styles (src/components/search/search.scss)

Theme-aware styles including:

  • Modal and backdrop styling with glassmorphism effects
  • Search input and results styling
  • Highlight and snippet formatting
  • Responsive breakpoints for mobile devices

4. NavBar Updates (src/components/navbar/NavBar.ts)

  • Added search button with Lucide Search icon
  • Keyboard shortcut indicator (⌘K) visible on desktop
  • SearchModal integration and management

📚 Documentation & Tooling

Setup Documentation

  1. ALGOLIA_SETUP.md - Comprehensive 175-line setup guide covering:

    • Algolia account creation and configuration
    • Credential setup instructions
    • Three indexing strategies: Algolia Crawler, DocSearch program, Manual indexing
    • Customization options for search behavior and UI
    • Troubleshooting common issues
    • API reference links

  2. README.md - Updated project documentation (160 lines) with:

    • Search feature overview
    • Quick setup instructions
    • Project structure updates
    • Technology stack additions

  3. .env.example - Environment variable template for secure credential management

Indexing Script

scripts/index-algolia.js - Automated documentation indexing tool (177 lines) that:

  • Scans MDX files from the content directory
  • Extracts titles, content, and heading hierarchy
  • Strips MDX/Markdown syntax for clean text
  • Uploads records to Algolia with optimized settings
  • Configures searchable attributes and highlighting

📦 Dependencies

Added two production dependencies:

  • algoliasearch (v5.x) - Algolia JavaScript client (lite version for optimal bundle size)
  • instantsearch.js (v4.x) - InstantSearch UI library

🎨 Screenshots

Search Button in Navbar

Homepage with Search Button

The search button is prominently displayed in the navigation bar with a keyboard shortcut indicator (⌘K) for discoverability.

Search Modal Interface

Search Modal

Clean, accessible search modal with blur backdrop. The search input is auto-focused when opened for immediate typing.

Docs Page with Search

Docs Page

Search functionality available across all documentation pages with consistent styling.

🔧 Setup Instructions

The integration uses placeholder Algolia credentials that need to be replaced with actual values:

  1. Create Algolia account at algolia.com

  2. Set up environment variables:

    cp .env.example .env
# Edit .env with your Algolia credentials

  3. Update credentials in src/components/search/AlgoliaSearch.ts:

    constALGOLIA_APP_ID="your_app_id";constALGOLIA_SEARCH_API_KEY="your_search_api_key";constALGOLIA_INDEX_NAME="typecomposer_docs";

  4. Index documentation:

    export ALGOLIA_APP_ID=your_app_id
export ALGOLIA_ADMIN_API_KEY=your_admin_api_key
node scripts/index-algolia.js

✅ Testing

  • Build succeeds without errors or warnings
  • Search modal opens/closes correctly via button click and keyboard shortcuts
  • Keyboard navigation works (⌘K/Ctrl+K, ESC)
  • Theme styling applies correctly in both dark and light modes
  • Responsive design verified on mobile and desktop viewports
  • Component lifecycle properly manages InstantSearch instance
  • Multiple instance support verified with unique IDs

📝 Implementation Notes

  • Security: Admin API key is only used in the indexing script (server-side). Client uses search-only API key.
  • Performance: Uses Algolia lite client for minimal bundle impact (~30KB gzipped)
  • Accessibility: Modal includes focus trapping and keyboard navigation
  • Browser Compatibility: Uses requestAnimationFrame for reliable DOM initialization
  • Error Handling: Gracefully handles missing credentials with informative error messages

🔗 Related Resources

Closes #[issue_number] (if applicable)

Original prompt

This section details on the original issue you should resolve

<issue_title>Feature: Add Algolia Search to TypeComposer Docs</issue_title>
<issue_description>Integrate Algolia InstantSearch into the TypeComposer docs to enable fast, relevant search.</issue_description>

<agent_instructions>Integrate Algolia InstantSearch into the TypeComposer docs to enable fast, relevant search.</agent_instructions>

Comments on the Issue (you are @copilot in this section)

Fixes#17

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

CopilotAIand others added 6 commits October 10, 2025 12:50
@joaodibba
Initial plan for Algolia InstantSearch integration
ff9c65d
Co-authored-by: joaodibba <113291032+joaodibba@users.noreply.github.com>
@joaodibba
Add Algolia InstantSearch integration components
5b0ece3
Co-authored-by: joaodibba <113291032+joaodibba@users.noreply.github.com>
@joaodibba
Add comprehensive documentation for Algolia search setup
5b37922
Co-authored-by: joaodibba <113291032+joaodibba@users.noreply.github.com>
@joaodibba
Fix search component initialization timing
0a383b8
Co-authored-by: joaodibba <113291032+joaodibba@users.noreply.github.com>
@joaodibba
Address code review feedback: use unique IDs and requestAnimationFrame
1bb69a8
Co-authored-by: joaodibba <113291032+joaodibba@users.noreply.github.com>
@joaodibba
Add DOM verification before InstantSearch initialization
b091bd1
Co-authored-by: joaodibba <113291032+joaodibba@users.noreply.github.com>
CopilotAI changed the title [WIP] Add Algolia Search to TypeComposer docsAdd Algolia InstantSearch Integration to TypeComposer DocsOct 10, 2025
CopilotAI requested a review from joaodibbaOctober 10, 2025 13:11
Base automatically changed from develop to mainJune 16, 2026 00:12
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@joaodibbajoaodibbaAwaiting requested review from joaodibba

Assignees

@joaodibbajoaodibba

Copilot code reviewCopilot

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@joaodibba
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
Add Algolia InstantSearch Integration to TypeComposer Docs - #18
Draft
joaodibba with Copilot wants to merge 7 commits into
mainfrom 
copilot/add-algolia-search-integration
Draft
Add Algolia InstantSearch Integration to TypeComposer Docs#18
joaodibba with Copilot wants to merge 7 commits into
mainfrom 
copilot/add-algolia-search-integration
Conversation
CopilotAI
commented
Oct 10, 2025•

edited

Loading

Copy link


Copy Markdown

Contributor
Overview
This PR integrates Algolia InstantSearch into the TypeComposer documentation to enable fast, relevant search functionality as requested in the issue.
🔍 Features Added
Search Functionality
  • Algolia InstantSearch integration with a polished modal-based UI
  • Keyboard shortcuts: ⌘K (Mac) / Ctrl+K (Windows/Linux) to open search, ESC to close
  • Search button in navigation bar with visual keyboard shortcut indicator
  • Highlighted search terms in results for better visibility
  • Content snippets showing context around matched terms
  • Theme-aware styling supporting both dark and light modes
  • Responsive design optimized for mobile and desktop
Components
1. AlgoliaSearch (src/components/search/AlgoliaSearch.ts)
Core search component implementing Algolia InstantSearch with:
  • Configurable search widgets (searchBox, hits, configure)
  • Unique instance IDs to prevent DOM conflicts if multiple instances exist
  • Proper lifecycle management with onInit/onDestroy hooks
  • DOM verification using requestAnimationFrame before initialization
  • Clean resource disposal on component destruction
2. SearchModal (src/components/search/SearchModal.ts)
Modal wrapper providing:
  • Backdrop with blur effect
  • Keyboard shortcut handling (⌘K/Ctrl+K for open, ESC for close)
  • Focus management for accessibility
  • Scroll lock when modal is open
3. Custom Styles (src/components/search/search.scss)
Theme-aware styles including:
  • Modal and backdrop styling with glassmorphism effects
  • Search input and results styling
  • Highlight and snippet formatting
  • Responsive breakpoints for mobile devices
4. NavBar Updates (src/components/navbar/NavBar.ts)
  • Added search button with Lucide Search icon
  • Keyboard shortcut indicator (⌘K) visible on desktop
  • SearchModal integration and management
📚 Documentation & Tooling
Setup Documentation
  1. ALGOLIA_SETUP.md - Comprehensive 175-line setup guide covering:
    • Algolia account creation and configuration
    • Credential setup instructions
    • Three indexing strategies: Algolia Crawler, DocSearch program, Manual indexing
    • Customization options for search behavior and UI
    • Troubleshooting common issues
    • API reference links
  2. README.md - Updated project documentation (160 lines) with:
    • Search feature overview
    • Quick setup instructions
    • Project structure updates
    • Technology stack additions
  3. .env.example - Environment variable template for secure credential management
Indexing Script
scripts/index-algolia.js - Automated documentation indexing tool (177 lines) that:
  • Scans MDX files from the content directory
  • Extracts titles, content, and heading hierarchy
  • Strips MDX/Markdown syntax for clean text
  • Uploads records to Algolia with optimized settings
  • Configures searchable attributes and highlighting
📦 Dependencies
Added two production dependencies:
  • algoliasearch (v5.x) - Algolia JavaScript client (lite version for optimal bundle size)
  • instantsearch.js (v4.x) - InstantSearch UI library
🎨 Screenshots
Search Button in Navbar
Homepage with Search Button
The search button is prominently displayed in the navigation bar with a keyboard shortcut indicator (⌘K) for discoverability.
Search Modal Interface
Search Modal
Clean, accessible search modal with blur backdrop. The search input is auto-focused when opened for immediate typing.
Docs Page with Search
Docs Page
Search functionality available across all documentation pages with consistent styling.
🔧 Setup Instructions
The integration uses placeholder Algolia credentials that need to be replaced with actual values:
  1. Create Algolia account at algolia.com
  2. Set up environment variables:
    cp .env.example .env
# Edit .env with your Algolia credentials
  3. Update credentials in src/components/search/AlgoliaSearch.ts:
    constALGOLIA_APP_ID="your_app_id";constALGOLIA_SEARCH_API_KEY="your_search_api_key";constALGOLIA_INDEX_NAME="typecomposer_docs";
  4. Index documentation:
    export ALGOLIA_APP_ID=your_app_id
export ALGOLIA_ADMIN_API_KEY=your_admin_api_key
node scripts/index-algolia.js
✅ Testing
  • Build succeeds without errors or warnings
  • Search modal opens/closes correctly via button click and keyboard shortcuts
  • Keyboard navigation works (⌘K/Ctrl+K, ESC)
  • Theme styling applies correctly in both dark and light modes
  • Responsive design verified on mobile and desktop viewports
  • Component lifecycle properly manages InstantSearch instance
  • Multiple instance support verified with unique IDs
📝 Implementation Notes
  • Security: Admin API key is only used in the indexing script (server-side). Client uses search-only API key.
  • Performance: Uses Algolia lite client for minimal bundle impact (~30KB gzipped)
  • Accessibility: Modal includes focus trapping and keyboard navigation
  • Browser Compatibility: Uses requestAnimationFrame for reliable DOM initialization
  • Error Handling: Gracefully handles missing credentials with informative error messages
🔗 Related Resources
Closes #[issue_number] (if applicable)
Original prompt
This section details on the original issue you should resolve
<issue_title>Feature: Add Algolia Search to TypeComposer Docs</issue_title>

<issue_description>Integrate Algolia InstantSearch into the TypeComposer docs to enable fast, relevant search.</issue_description>
<agent_instructions>Integrate Algolia InstantSearch into the TypeComposer docs to enable fast, relevant search.</agent_instructions>
Comments on the Issue (you are @copilot in this section)
Fixes#17
✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.
CopilotAIand others
added 6 commits
October 10, 2025 12:50
@joaodibba
Initial plan for Algolia InstantSearch integration
ff9c65d
Co-authored-by: joaodibba <113291032+joaodibba@users.noreply.github.com>
@joaodibba
Add Algolia InstantSearch integration components
5b0ece3
Co-authored-by: joaodibba <113291032+joaodibba@users.noreply.github.com>
@joaodibba
Add comprehensive documentation for Algolia search setup
5b37922
Co-authored-by: joaodibba <113291032+joaodibba@users.noreply.github.com>
@joaodibba
Fix search component initialization timing
0a383b8
Co-authored-by: joaodibba <113291032+joaodibba@users.noreply.github.com>
@joaodibba
Address code review feedback: use unique IDs and requestAnimationFrame
1bb69a8
Co-authored-by: joaodibba <113291032+joaodibba@users.noreply.github.com>
@joaodibba
Add DOM verification before InstantSearch initialization
b091bd1
Co-authored-by: joaodibba <113291032+joaodibba@users.noreply.github.com>
CopilotAI
changed the title
[WIP] Add Algolia Search to TypeComposer docsAdd Algolia InstantSearch Integration to TypeComposer DocsOct 10, 2025
CopilotAI
requested a review
from joaodibbaOctober 10, 2025 13:11

Base automatically changed from
develop to
mainJune 16, 2026 00:12
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@joaodibbajoaodibbaAwaiting requested review from joaodibba

Assignees

@joaodibbajoaodibba
Copilot code reviewCopilot

Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

2 participants

@joaodibba

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
Add Algolia InstantSearch Integration to TypeComposer Docs - #18
Draft
joaodibba with Copilot wants to merge 7 commits into
mainfrom 
copilot/add-algolia-search-integration
Draft
Add Algolia InstantSearch Integration to TypeComposer Docs#18
joaodibba with Copilot wants to merge 7 commits into
mainfrom 
copilot/add-algolia-search-integration
Conversation
CopilotAI
commented
Oct 10, 2025•

edited

Loading

Copy link


Copy Markdown

Contributor
Overview
This PR integrates Algolia InstantSearch into the TypeComposer documentation to enable fast, relevant search functionality as requested in the issue.
🔍 Features Added
Search Functionality
  • Algolia InstantSearch integration with a polished modal-based UI
  • Keyboard shortcuts: ⌘K (Mac) / Ctrl+K (Windows/Linux) to open search, ESC to close
  • Search button in navigation bar with visual keyboard shortcut indicator
  • Highlighted search terms in results for better visibility
  • Content snippets showing context around matched terms
  • Theme-aware styling supporting both dark and light modes
  • Responsive design optimized for mobile and desktop
Components
1. AlgoliaSearch (src/components/search/AlgoliaSearch.ts)
Core search component implementing Algolia InstantSearch with:
  • Configurable search widgets (searchBox, hits, configure)
  • Unique instance IDs to prevent DOM conflicts if multiple instances exist
  • Proper lifecycle management with onInit/onDestroy hooks
  • DOM verification using requestAnimationFrame before initialization
  • Clean resource disposal on component destruction
2. SearchModal (src/components/search/SearchModal.ts)
Modal wrapper providing:
  • Backdrop with blur effect
  • Keyboard shortcut handling (⌘K/Ctrl+K for open, ESC for close)
  • Focus management for accessibility
  • Scroll lock when modal is open
3. Custom Styles (src/components/search/search.scss)
Theme-aware styles including:
  • Modal and backdrop styling with glassmorphism effects
  • Search input and results styling
  • Highlight and snippet formatting
  • Responsive breakpoints for mobile devices
4. NavBar Updates (src/components/navbar/NavBar.ts)
  • Added search button with Lucide Search icon
  • Keyboard shortcut indicator (⌘K) visible on desktop
  • SearchModal integration and management
📚 Documentation & Tooling
Setup Documentation
  1. ALGOLIA_SETUP.md - Comprehensive 175-line setup guide covering:
    • Algolia account creation and configuration
    • Credential setup instructions
    • Three indexing strategies: Algolia Crawler, DocSearch program, Manual indexing
    • Customization options for search behavior and UI
    • Troubleshooting common issues
    • API reference links
  2. README.md - Updated project documentation (160 lines) with:
    • Search feature overview
    • Quick setup instructions
    • Project structure updates
    • Technology stack additions
  3. .env.example - Environment variable template for secure credential management
Indexing Script
scripts/index-algolia.js - Automated documentation indexing tool (177 lines) that:
  • Scans MDX files from the content directory
  • Extracts titles, content, and heading hierarchy
  • Strips MDX/Markdown syntax for clean text
  • Uploads records to Algolia with optimized settings
  • Configures searchable attributes and highlighting
📦 Dependencies
Added two production dependencies:
  • algoliasearch (v5.x) - Algolia JavaScript client (lite version for optimal bundle size)
  • instantsearch.js (v4.x) - InstantSearch UI library
🎨 Screenshots
Search Button in Navbar
Homepage with Search Button
The search button is prominently displayed in the navigation bar with a keyboard shortcut indicator (⌘K) for discoverability.
Search Modal Interface
Search Modal
Clean, accessible search modal with blur backdrop. The search input is auto-focused when opened for immediate typing.
Docs Page with Search
Docs Page
Search functionality available across all documentation pages with consistent styling.
🔧 Setup Instructions
The integration uses placeholder Algolia credentials that need to be replaced with actual values:
  1. Create Algolia account at algolia.com
  2. Set up environment variables:
    cp .env.example .env
# Edit .env with your Algolia credentials
  3. Update credentials in src/components/search/AlgoliaSearch.ts:
    constALGOLIA_APP_ID="your_app_id";constALGOLIA_SEARCH_API_KEY="your_search_api_key";constALGOLIA_INDEX_NAME="typecomposer_docs";
  4. Index documentation:
    export ALGOLIA_APP_ID=your_app_id
export ALGOLIA_ADMIN_API_KEY=your_admin_api_key
node scripts/index-algolia.js
✅ Testing
  • Build succeeds without errors or warnings
  • Search modal opens/closes correctly via button click and keyboard shortcuts
  • Keyboard navigation works (⌘K/Ctrl+K, ESC)
  • Theme styling applies correctly in both dark and light modes
  • Responsive design verified on mobile and desktop viewports
  • Component lifecycle properly manages InstantSearch instance
  • Multiple instance support verified with unique IDs
📝 Implementation Notes
  • Security: Admin API key is only used in the indexing script (server-side). Client uses search-only API key.
  • Performance: Uses Algolia lite client for minimal bundle impact (~30KB gzipped)
  • Accessibility: Modal includes focus trapping and keyboard navigation
  • Browser Compatibility: Uses requestAnimationFrame for reliable DOM initialization
  • Error Handling: Gracefully handles missing credentials with informative error messages
🔗 Related Resources
Closes #[issue_number] (if applicable)
Original prompt
This section details on the original issue you should resolve
<issue_title>Feature: Add Algolia Search to TypeComposer Docs</issue_title>

<issue_description>Integrate Algolia InstantSearch into the TypeComposer docs to enable fast, relevant search.</issue_description>
<agent_instructions>Integrate Algolia InstantSearch into the TypeComposer docs to enable fast, relevant search.</agent_instructions>
Comments on the Issue (you are @copilot in this section)
Fixes#17
✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.
CopilotAIand others
added 6 commits
October 10, 2025 12:50
@joaodibba
Initial plan for Algolia InstantSearch integration
ff9c65d
Co-authored-by: joaodibba <113291032+joaodibba@users.noreply.github.com>
@joaodibba
Add Algolia InstantSearch integration components
5b0ece3
Co-authored-by: joaodibba <113291032+joaodibba@users.noreply.github.com>
@joaodibba
Add comprehensive documentation for Algolia search setup
5b37922
Co-authored-by: joaodibba <113291032+joaodibba@users.noreply.github.com>
@joaodibba
Fix search component initialization timing
0a383b8
Co-authored-by: joaodibba <113291032+joaodibba@users.noreply.github.com>
@joaodibba
Address code review feedback: use unique IDs and requestAnimationFrame
1bb69a8
Co-authored-by: joaodibba <113291032+joaodibba@users.noreply.github.com>
@joaodibba
Add DOM verification before InstantSearch initialization
b091bd1
Co-authored-by: joaodibba <113291032+joaodibba@users.noreply.github.com>
CopilotAI
changed the title
[WIP] Add Algolia Search to TypeComposer docsAdd Algolia InstantSearch Integration to TypeComposer DocsOct 10, 2025
CopilotAI
requested a review
from joaodibbaOctober 10, 2025 13:11

Base automatically changed from
develop to
mainJune 16, 2026 00:12
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@joaodibbajoaodibbaAwaiting requested review from joaodibba

Assignees

@joaodibbajoaodibba
Copilot code reviewCopilot

Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

2 participants

@joaodibba

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
Add Algolia InstantSearch Integration to TypeComposer Docs - #18
Draft
joaodibba with Copilot wants to merge 7 commits into
mainfrom 
copilot/add-algolia-search-integration
Draft
Add Algolia InstantSearch Integration to TypeComposer Docs#18
joaodibba with Copilot wants to merge 7 commits into
mainfrom 
copilot/add-algolia-search-integration
Conversation
CopilotAI
commented
Oct 10, 2025•

edited

Loading

Copy link


Copy Markdown

Contributor
Overview
This PR integrates Algolia InstantSearch into the TypeComposer documentation to enable fast, relevant search functionality as requested in the issue.
🔍 Features Added
Search Functionality
  • Algolia InstantSearch integration with a polished modal-based UI
  • Keyboard shortcuts: ⌘K (Mac) / Ctrl+K (Windows/Linux) to open search, ESC to close
  • Search button in navigation bar with visual keyboard shortcut indicator
  • Highlighted search terms in results for better visibility
  • Content snippets showing context around matched terms
  • Theme-aware styling supporting both dark and light modes
  • Responsive design optimized for mobile and desktop
Components
1. AlgoliaSearch (src/components/search/AlgoliaSearch.ts)
Core search component implementing Algolia InstantSearch with:
  • Configurable search widgets (searchBox, hits, configure)
  • Unique instance IDs to prevent DOM conflicts if multiple instances exist
  • Proper lifecycle management with onInit/onDestroy hooks
  • DOM verification using requestAnimationFrame before initialization
  • Clean resource disposal on component destruction
2. SearchModal (src/components/search/SearchModal.ts)
Modal wrapper providing:
  • Backdrop with blur effect
  • Keyboard shortcut handling (⌘K/Ctrl+K for open, ESC for close)
  • Focus management for accessibility
  • Scroll lock when modal is open
3. Custom Styles (src/components/search/search.scss)
Theme-aware styles including:
  • Modal and backdrop styling with glassmorphism effects
  • Search input and results styling
  • Highlight and snippet formatting
  • Responsive breakpoints for mobile devices
4. NavBar Updates (src/components/navbar/NavBar.ts)
  • Added search button with Lucide Search icon
  • Keyboard shortcut indicator (⌘K) visible on desktop
  • SearchModal integration and management
📚 Documentation & Tooling
Setup Documentation
  1. ALGOLIA_SETUP.md - Comprehensive 175-line setup guide covering:
    • Algolia account creation and configuration
    • Credential setup instructions
    • Three indexing strategies: Algolia Crawler, DocSearch program, Manual indexing
    • Customization options for search behavior and UI
    • Troubleshooting common issues
    • API reference links
  2. README.md - Updated project documentation (160 lines) with:
    • Search feature overview
    • Quick setup instructions
    • Project structure updates
    • Technology stack additions
  3. .env.example - Environment variable template for secure credential management
Indexing Script
scripts/index-algolia.js - Automated documentation indexing tool (177 lines) that:
  • Scans MDX files from the content directory
  • Extracts titles, content, and heading hierarchy
  • Strips MDX/Markdown syntax for clean text
  • Uploads records to Algolia with optimized settings
  • Configures searchable attributes and highlighting
📦 Dependencies
Added two production dependencies:
  • algoliasearch (v5.x) - Algolia JavaScript client (lite version for optimal bundle size)
  • instantsearch.js (v4.x) - InstantSearch UI library
🎨 Screenshots
Search Button in Navbar
Homepage with Search Button
The search button is prominently displayed in the navigation bar with a keyboard shortcut indicator (⌘K) for discoverability.
Search Modal Interface
Search Modal
Clean, accessible search modal with blur backdrop. The search input is auto-focused when opened for immediate typing.
Docs Page with Search
Docs Page
Search functionality available across all documentation pages with consistent styling.
🔧 Setup Instructions
The integration uses placeholder Algolia credentials that need to be replaced with actual values:
  1. Create Algolia account at algolia.com
  2. Set up environment variables:
    cp .env.example .env
# Edit .env with your Algolia credentials
  3. Update credentials in src/components/search/AlgoliaSearch.ts:
    constALGOLIA_APP_ID="your_app_id";constALGOLIA_SEARCH_API_KEY="your_search_api_key";constALGOLIA_INDEX_NAME="typecomposer_docs";
  4. Index documentation:
    export ALGOLIA_APP_ID=your_app_id
export ALGOLIA_ADMIN_API_KEY=your_admin_api_key
node scripts/index-algolia.js
✅ Testing
  • Build succeeds without errors or warnings
  • Search modal opens/closes correctly via button click and keyboard shortcuts
  • Keyboard navigation works (⌘K/Ctrl+K, ESC)
  • Theme styling applies correctly in both dark and light modes
  • Responsive design verified on mobile and desktop viewports
  • Component lifecycle properly manages InstantSearch instance
  • Multiple instance support verified with unique IDs
📝 Implementation Notes
  • Security: Admin API key is only used in the indexing script (server-side). Client uses search-only API key.
  • Performance: Uses Algolia lite client for minimal bundle impact (~30KB gzipped)
  • Accessibility: Modal includes focus trapping and keyboard navigation
  • Browser Compatibility: Uses requestAnimationFrame for reliable DOM initialization
  • Error Handling: Gracefully handles missing credentials with informative error messages
🔗 Related Resources
Closes #[issue_number] (if applicable)
Original prompt
This section details on the original issue you should resolve
<issue_title>Feature: Add Algolia Search to TypeComposer Docs</issue_title>

<issue_description>Integrate Algolia InstantSearch into the TypeComposer docs to enable fast, relevant search.</issue_description>
<agent_instructions>Integrate Algolia InstantSearch into the TypeComposer docs to enable fast, relevant search.</agent_instructions>
Comments on the Issue (you are @copilot in this section)
Fixes#17
✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.
CopilotAIand others
added 6 commits
October 10, 2025 12:50
@joaodibba
Initial plan for Algolia InstantSearch integration
ff9c65d
Co-authored-by: joaodibba <113291032+joaodibba@users.noreply.github.com>
@joaodibba
Add Algolia InstantSearch integration components
5b0ece3
Co-authored-by: joaodibba <113291032+joaodibba@users.noreply.github.com>
@joaodibba
Add comprehensive documentation for Algolia search setup
5b37922
Co-authored-by: joaodibba <113291032+joaodibba@users.noreply.github.com>
@joaodibba
Fix search component initialization timing
0a383b8
Co-authored-by: joaodibba <113291032+joaodibba@users.noreply.github.com>
@joaodibba
Address code review feedback: use unique IDs and requestAnimationFrame
1bb69a8
Co-authored-by: joaodibba <113291032+joaodibba@users.noreply.github.com>
@joaodibba
Add DOM verification before InstantSearch initialization
b091bd1
Co-authored-by: joaodibba <113291032+joaodibba@users.noreply.github.com>
CopilotAI
changed the title
[WIP] Add Algolia Search to TypeComposer docsAdd Algolia InstantSearch Integration to TypeComposer DocsOct 10, 2025
CopilotAI
requested a review
from joaodibbaOctober 10, 2025 13:11

Base automatically changed from
develop to
mainJune 16, 2026 00:12
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@joaodibbajoaodibbaAwaiting requested review from joaodibba

Assignees

@joaodibbajoaodibba
Copilot code reviewCopilot

Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

2 participants

@joaodibba

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
Add Algolia InstantSearch Integration to TypeComposer Docs - #18
Draft
joaodibba with Copilot wants to merge 7 commits into
mainfrom 
copilot/add-algolia-search-integration
Draft
Add Algolia InstantSearch Integration to TypeComposer Docs#18
joaodibba with Copilot wants to merge 7 commits into
mainfrom 
copilot/add-algolia-search-integration
Conversation
CopilotAI
commented
Oct 10, 2025•

edited

Loading

Copy link


Copy Markdown

Contributor
Overview
This PR integrates Algolia InstantSearch into the TypeComposer documentation to enable fast, relevant search functionality as requested in the issue.
🔍 Features Added
Search Functionality
  • Algolia InstantSearch integration with a polished modal-based UI
  • Keyboard shortcuts: ⌘K (Mac) / Ctrl+K (Windows/Linux) to open search, ESC to close
  • Search button in navigation bar with visual keyboard shortcut indicator
  • Highlighted search terms in results for better visibility
  • Content snippets showing context around matched terms
  • Theme-aware styling supporting both dark and light modes
  • Responsive design optimized for mobile and desktop
Components
1. AlgoliaSearch (src/components/search/AlgoliaSearch.ts)
Core search component implementing Algolia InstantSearch with:
  • Configurable search widgets (searchBox, hits, configure)
  • Unique instance IDs to prevent DOM conflicts if multiple instances exist
  • Proper lifecycle management with onInit/onDestroy hooks
  • DOM verification using requestAnimationFrame before initialization
  • Clean resource disposal on component destruction
2. SearchModal (src/components/search/SearchModal.ts)
Modal wrapper providing:
  • Backdrop with blur effect
  • Keyboard shortcut handling (⌘K/Ctrl+K for open, ESC for close)
  • Focus management for accessibility
  • Scroll lock when modal is open
3. Custom Styles (src/components/search/search.scss)
Theme-aware styles including:
  • Modal and backdrop styling with glassmorphism effects
  • Search input and results styling
  • Highlight and snippet formatting
  • Responsive breakpoints for mobile devices
4. NavBar Updates (src/components/navbar/NavBar.ts)
  • Added search button with Lucide Search icon
  • Keyboard shortcut indicator (⌘K) visible on desktop
  • SearchModal integration and management
📚 Documentation & Tooling
Setup Documentation
  1. ALGOLIA_SETUP.md - Comprehensive 175-line setup guide covering:
    • Algolia account creation and configuration
    • Credential setup instructions
    • Three indexing strategies: Algolia Crawler, DocSearch program, Manual indexing
    • Customization options for search behavior and UI
    • Troubleshooting common issues
    • API reference links
  2. README.md - Updated project documentation (160 lines) with:
    • Search feature overview
    • Quick setup instructions
    • Project structure updates
    • Technology stack additions
  3. .env.example - Environment variable template for secure credential management
Indexing Script
scripts/index-algolia.js - Automated documentation indexing tool (177 lines) that:
  • Scans MDX files from the content directory
  • Extracts titles, content, and heading hierarchy
  • Strips MDX/Markdown syntax for clean text
  • Uploads records to Algolia with optimized settings
  • Configures searchable attributes and highlighting
📦 Dependencies
Added two production dependencies:
  • algoliasearch (v5.x) - Algolia JavaScript client (lite version for optimal bundle size)
  • instantsearch.js (v4.x) - InstantSearch UI library
🎨 Screenshots
Search Button in Navbar
Homepage with Search Button
The search button is prominently displayed in the navigation bar with a keyboard shortcut indicator (⌘K) for discoverability.
Search Modal Interface
Search Modal
Clean, accessible search modal with blur backdrop. The search input is auto-focused when opened for immediate typing.
Docs Page with Search
Docs Page
Search functionality available across all documentation pages with consistent styling.
🔧 Setup Instructions
The integration uses placeholder Algolia credentials that need to be replaced with actual values:
  1. Create Algolia account at algolia.com
  2. Set up environment variables:
    cp .env.example .env
# Edit .env with your Algolia credentials
  3. Update credentials in src/components/search/AlgoliaSearch.ts:
    constALGOLIA_APP_ID="your_app_id";constALGOLIA_SEARCH_API_KEY="your_search_api_key";constALGOLIA_INDEX_NAME="typecomposer_docs";
  4. Index documentation:
    export ALGOLIA_APP_ID=your_app_id
export ALGOLIA_ADMIN_API_KEY=your_admin_api_key
node scripts/index-algolia.js
✅ Testing
  • Build succeeds without errors or warnings
  • Search modal opens/closes correctly via button click and keyboard shortcuts
  • Keyboard navigation works (⌘K/Ctrl+K, ESC)
  • Theme styling applies correctly in both dark and light modes
  • Responsive design verified on mobile and desktop viewports
  • Component lifecycle properly manages InstantSearch instance
  • Multiple instance support verified with unique IDs
📝 Implementation Notes
  • Security: Admin API key is only used in the indexing script (server-side). Client uses search-only API key.
  • Performance: Uses Algolia lite client for minimal bundle impact (~30KB gzipped)
  • Accessibility: Modal includes focus trapping and keyboard navigation
  • Browser Compatibility: Uses requestAnimationFrame for reliable DOM initialization
  • Error Handling: Gracefully handles missing credentials with informative error messages
🔗 Related Resources
Closes #[issue_number] (if applicable)
Original prompt
This section details on the original issue you should resolve
<issue_title>Feature: Add Algolia Search to TypeComposer Docs</issue_title>

<issue_description>Integrate Algolia InstantSearch into the TypeComposer docs to enable fast, relevant search.</issue_description>
<agent_instructions>Integrate Algolia InstantSearch into the TypeComposer docs to enable fast, relevant search.</agent_instructions>
Comments on the Issue (you are @copilot in this section)
Fixes#17
✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.
CopilotAIand others
added 6 commits
October 10, 2025 12:50
@joaodibba
Initial plan for Algolia InstantSearch integration
ff9c65d
Co-authored-by: joaodibba <113291032+joaodibba@users.noreply.github.com>
@joaodibba
Add Algolia InstantSearch integration components
5b0ece3
Co-authored-by: joaodibba <113291032+joaodibba@users.noreply.github.com>
@joaodibba
Add comprehensive documentation for Algolia search setup
5b37922
Co-authored-by: joaodibba <113291032+joaodibba@users.noreply.github.com>
@joaodibba
Fix search component initialization timing
0a383b8
Co-authored-by: joaodibba <113291032+joaodibba@users.noreply.github.com>
@joaodibba
Address code review feedback: use unique IDs and requestAnimationFrame
1bb69a8
Co-authored-by: joaodibba <113291032+joaodibba@users.noreply.github.com>
@joaodibba
Add DOM verification before InstantSearch initialization
b091bd1
Co-authored-by: joaodibba <113291032+joaodibba@users.noreply.github.com>
CopilotAI
changed the title
[WIP] Add Algolia Search to TypeComposer docsAdd Algolia InstantSearch Integration to TypeComposer DocsOct 10, 2025
CopilotAI
requested a review
from joaodibbaOctober 10, 2025 13:11

Base automatically changed from
develop to
mainJune 16, 2026 00:12
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@joaodibbajoaodibbaAwaiting requested review from joaodibba

Assignees

@joaodibbajoaodibba
Copilot code reviewCopilot

Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

2 participants

@joaodibba

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
Add Algolia InstantSearch Integration to TypeComposer Docs - #18
Draft
joaodibba with Copilot wants to merge 7 commits into
mainfrom 
copilot/add-algolia-search-integration
Draft
Add Algolia InstantSearch Integration to TypeComposer Docs#18
joaodibba with Copilot wants to merge 7 commits into
mainfrom 
copilot/add-algolia-search-integration
Conversation
CopilotAI
commented
Oct 10, 2025•

edited

Loading

Copy link


Copy Markdown

Contributor
Overview
This PR integrates Algolia InstantSearch into the TypeComposer documentation to enable fast, relevant search functionality as requested in the issue.
🔍 Features Added
Search Functionality
  • Algolia InstantSearch integration with a polished modal-based UI
  • Keyboard shortcuts: ⌘K (Mac) / Ctrl+K (Windows/Linux) to open search, ESC to close
  • Search button in navigation bar with visual keyboard shortcut indicator
  • Highlighted search terms in results for better visibility
  • Content snippets showing context around matched terms
  • Theme-aware styling supporting both dark and light modes
  • Responsive design optimized for mobile and desktop
Components
1. AlgoliaSearch (src/components/search/AlgoliaSearch.ts)
Core search component implementing Algolia InstantSearch with:
  • Configurable search widgets (searchBox, hits, configure)
  • Unique instance IDs to prevent DOM conflicts if multiple instances exist
  • Proper lifecycle management with onInit/onDestroy hooks
  • DOM verification using requestAnimationFrame before initialization
  • Clean resource disposal on component destruction
2. SearchModal (src/components/search/SearchModal.ts)
Modal wrapper providing:
  • Backdrop with blur effect
  • Keyboard shortcut handling (⌘K/Ctrl+K for open, ESC for close)
  • Focus management for accessibility
  • Scroll lock when modal is open
3. Custom Styles (src/components/search/search.scss)
Theme-aware styles including:
  • Modal and backdrop styling with glassmorphism effects
  • Search input and results styling
  • Highlight and snippet formatting
  • Responsive breakpoints for mobile devices
4. NavBar Updates (src/components/navbar/NavBar.ts)
  • Added search button with Lucide Search icon
  • Keyboard shortcut indicator (⌘K) visible on desktop
  • SearchModal integration and management
📚 Documentation & Tooling
Setup Documentation
  1. ALGOLIA_SETUP.md - Comprehensive 175-line setup guide covering:
    • Algolia account creation and configuration
    • Credential setup instructions
    • Three indexing strategies: Algolia Crawler, DocSearch program, Manual indexing
    • Customization options for search behavior and UI
    • Troubleshooting common issues
    • API reference links
  2. README.md - Updated project documentation (160 lines) with:
    • Search feature overview
    • Quick setup instructions
    • Project structure updates
    • Technology stack additions
  3. .env.example - Environment variable template for secure credential management
Indexing Script
scripts/index-algolia.js - Automated documentation indexing tool (177 lines) that:
  • Scans MDX files from the content directory
  • Extracts titles, content, and heading hierarchy
  • Strips MDX/Markdown syntax for clean text
  • Uploads records to Algolia with optimized settings
  • Configures searchable attributes and highlighting
📦 Dependencies
Added two production dependencies:
  • algoliasearch (v5.x) - Algolia JavaScript client (lite version for optimal bundle size)
  • instantsearch.js (v4.x) - InstantSearch UI library
🎨 Screenshots
Search Button in Navbar
Homepage with Search Button
The search button is prominently displayed in the navigation bar with a keyboard shortcut indicator (⌘K) for discoverability.
Search Modal Interface
Search Modal
Clean, accessible search modal with blur backdrop. The search input is auto-focused when opened for immediate typing.
Docs Page with Search
Docs Page
Search functionality available across all documentation pages with consistent styling.
🔧 Setup Instructions
The integration uses placeholder Algolia credentials that need to be replaced with actual values:
  1. Create Algolia account at algolia.com
  2. Set up environment variables:
    cp .env.example .env
# Edit .env with your Algolia credentials
  3. Update credentials in src/components/search/AlgoliaSearch.ts:
    constALGOLIA_APP_ID="your_app_id";constALGOLIA_SEARCH_API_KEY="your_search_api_key";constALGOLIA_INDEX_NAME="typecomposer_docs";
  4. Index documentation:
    export ALGOLIA_APP_ID=your_app_id
export ALGOLIA_ADMIN_API_KEY=your_admin_api_key
node scripts/index-algolia.js
✅ Testing
  • Build succeeds without errors or warnings
  • Search modal opens/closes correctly via button click and keyboard shortcuts
  • Keyboard navigation works (⌘K/Ctrl+K, ESC)
  • Theme styling applies correctly in both dark and light modes
  • Responsive design verified on mobile and desktop viewports
  • Component lifecycle properly manages InstantSearch instance
  • Multiple instance support verified with unique IDs
📝 Implementation Notes
  • Security: Admin API key is only used in the indexing script (server-side). Client uses search-only API key.
  • Performance: Uses Algolia lite client for minimal bundle impact (~30KB gzipped)
  • Accessibility: Modal includes focus trapping and keyboard navigation
  • Browser Compatibility: Uses requestAnimationFrame for reliable DOM initialization
  • Error Handling: Gracefully handles missing credentials with informative error messages
🔗 Related Resources
Closes #[issue_number] (if applicable)
Original prompt
This section details on the original issue you should resolve
<issue_title>Feature: Add Algolia Search to TypeComposer Docs</issue_title>

<issue_description>Integrate Algolia InstantSearch into the TypeComposer docs to enable fast, relevant search.</issue_description>
<agent_instructions>Integrate Algolia InstantSearch into the TypeComposer docs to enable fast, relevant search.</agent_instructions>
Comments on the Issue (you are @copilot in this section)
Fixes#17
✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.
CopilotAIand others
added 6 commits
October 10, 2025 12:50
@joaodibba
Initial plan for Algolia InstantSearch integration
ff9c65d
Co-authored-by: joaodibba <113291032+joaodibba@users.noreply.github.com>
@joaodibba
Add Algolia InstantSearch integration components
5b0ece3
Co-authored-by: joaodibba <113291032+joaodibba@users.noreply.github.com>
@joaodibba
Add comprehensive documentation for Algolia search setup
5b37922
Co-authored-by: joaodibba <113291032+joaodibba@users.noreply.github.com>
@joaodibba
Fix search component initialization timing
0a383b8
Co-authored-by: joaodibba <113291032+joaodibba@users.noreply.github.com>
@joaodibba
Address code review feedback: use unique IDs and requestAnimationFrame
1bb69a8
Co-authored-by: joaodibba <113291032+joaodibba@users.noreply.github.com>
@joaodibba
Add DOM verification before InstantSearch initialization
b091bd1
Co-authored-by: joaodibba <113291032+joaodibba@users.noreply.github.com>
CopilotAI
changed the title
[WIP] Add Algolia Search to TypeComposer docsAdd Algolia InstantSearch Integration to TypeComposer DocsOct 10, 2025
CopilotAI
requested a review
from joaodibbaOctober 10, 2025 13:11

Base automatically changed from
develop to
mainJune 16, 2026 00:12
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@joaodibbajoaodibbaAwaiting requested review from joaodibba

Assignees

@joaodibbajoaodibba
Copilot code reviewCopilot

Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

2 participants

@joaodibba

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
Add Algolia InstantSearch Integration to TypeComposer Docs - #18
Draft
joaodibba with Copilot wants to merge 7 commits into
mainfrom 
copilot/add-algolia-search-integration
Draft
Add Algolia InstantSearch Integration to TypeComposer Docs#18
joaodibba with Copilot wants to merge 7 commits into
mainfrom 
copilot/add-algolia-search-integration
Conversation
CopilotAI
commented
Oct 10, 2025•

edited

Loading

Copy link


Copy Markdown

Contributor
Overview
This PR integrates Algolia InstantSearch into the TypeComposer documentation to enable fast, relevant search functionality as requested in the issue.
🔍 Features Added
Search Functionality
  • Algolia InstantSearch integration with a polished modal-based UI
  • Keyboard shortcuts: ⌘K (Mac) / Ctrl+K (Windows/Linux) to open search, ESC to close
  • Search button in navigation bar with visual keyboard shortcut indicator
  • Highlighted search terms in results for better visibility
  • Content snippets showing context around matched terms
  • Theme-aware styling supporting both dark and light modes
  • Responsive design optimized for mobile and desktop
Components
1. AlgoliaSearch (src/components/search/AlgoliaSearch.ts)
Core search component implementing Algolia InstantSearch with:
  • Configurable search widgets (searchBox, hits, configure)
  • Unique instance IDs to prevent DOM conflicts if multiple instances exist
  • Proper lifecycle management with onInit/onDestroy hooks
  • DOM verification using requestAnimationFrame before initialization
  • Clean resource disposal on component destruction
2. SearchModal (src/components/search/SearchModal.ts)
Modal wrapper providing:
  • Backdrop with blur effect
  • Keyboard shortcut handling (⌘K/Ctrl+K for open, ESC for close)
  • Focus management for accessibility
  • Scroll lock when modal is open
3. Custom Styles (src/components/search/search.scss)
Theme-aware styles including:
  • Modal and backdrop styling with glassmorphism effects
  • Search input and results styling
  • Highlight and snippet formatting
  • Responsive breakpoints for mobile devices
4. NavBar Updates (src/components/navbar/NavBar.ts)
  • Added search button with Lucide Search icon
  • Keyboard shortcut indicator (⌘K) visible on desktop
  • SearchModal integration and management
📚 Documentation & Tooling
Setup Documentation
  1. ALGOLIA_SETUP.md - Comprehensive 175-line setup guide covering:
    • Algolia account creation and configuration
    • Credential setup instructions
    • Three indexing strategies: Algolia Crawler, DocSearch program, Manual indexing
    • Customization options for search behavior and UI
    • Troubleshooting common issues
    • API reference links
  2. README.md - Updated project documentation (160 lines) with:
    • Search feature overview
    • Quick setup instructions
    • Project structure updates
    • Technology stack additions
  3. .env.example - Environment variable template for secure credential management
Indexing Script
scripts/index-algolia.js - Automated documentation indexing tool (177 lines) that:
  • Scans MDX files from the content directory
  • Extracts titles, content, and heading hierarchy
  • Strips MDX/Markdown syntax for clean text
  • Uploads records to Algolia with optimized settings
  • Configures searchable attributes and highlighting
📦 Dependencies
Added two production dependencies:
  • algoliasearch (v5.x) - Algolia JavaScript client (lite version for optimal bundle size)
  • instantsearch.js (v4.x) - InstantSearch UI library
🎨 Screenshots
Search Button in Navbar
Homepage with Search Button
The search button is prominently displayed in the navigation bar with a keyboard shortcut indicator (⌘K) for discoverability.
Search Modal Interface
Search Modal
Clean, accessible search modal with blur backdrop. The search input is auto-focused when opened for immediate typing.
Docs Page with Search
Docs Page
Search functionality available across all documentation pages with consistent styling.
🔧 Setup Instructions
The integration uses placeholder Algolia credentials that need to be replaced with actual values:
  1. Create Algolia account at algolia.com
  2. Set up environment variables:
    cp .env.example .env
# Edit .env with your Algolia credentials
  3. Update credentials in src/components/search/AlgoliaSearch.ts:
    constALGOLIA_APP_ID="your_app_id";constALGOLIA_SEARCH_API_KEY="your_search_api_key";constALGOLIA_INDEX_NAME="typecomposer_docs";
  4. Index documentation:
    export ALGOLIA_APP_ID=your_app_id
export ALGOLIA_ADMIN_API_KEY=your_admin_api_key
node scripts/index-algolia.js
✅ Testing
  • Build succeeds without errors or warnings
  • Search modal opens/closes correctly via button click and keyboard shortcuts
  • Keyboard navigation works (⌘K/Ctrl+K, ESC)
  • Theme styling applies correctly in both dark and light modes
  • Responsive design verified on mobile and desktop viewports
  • Component lifecycle properly manages InstantSearch instance
  • Multiple instance support verified with unique IDs
📝 Implementation Notes
  • Security: Admin API key is only used in the indexing script (server-side). Client uses search-only API key.
  • Performance: Uses Algolia lite client for minimal bundle impact (~30KB gzipped)
  • Accessibility: Modal includes focus trapping and keyboard navigation
  • Browser Compatibility: Uses requestAnimationFrame for reliable DOM initialization
  • Error Handling: Gracefully handles missing credentials with informative error messages
🔗 Related Resources
Closes #[issue_number] (if applicable)
Original prompt
This section details on the original issue you should resolve
<issue_title>Feature: Add Algolia Search to TypeComposer Docs</issue_title>

<issue_description>Integrate Algolia InstantSearch into the TypeComposer docs to enable fast, relevant search.</issue_description>
<agent_instructions>Integrate Algolia InstantSearch into the TypeComposer docs to enable fast, relevant search.</agent_instructions>
Comments on the Issue (you are @copilot in this section)
Fixes#17
✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.
CopilotAIand others
added 6 commits
October 10, 2025 12:50
@joaodibba
Initial plan for Algolia InstantSearch integration
ff9c65d
Co-authored-by: joaodibba <113291032+joaodibba@users.noreply.github.com>
@joaodibba
Add Algolia InstantSearch integration components
5b0ece3
Co-authored-by: joaodibba <113291032+joaodibba@users.noreply.github.com>
@joaodibba
Add comprehensive documentation for Algolia search setup
5b37922
Co-authored-by: joaodibba <113291032+joaodibba@users.noreply.github.com>
@joaodibba
Fix search component initialization timing
0a383b8
Co-authored-by: joaodibba <113291032+joaodibba@users.noreply.github.com>
@joaodibba
Address code review feedback: use unique IDs and requestAnimationFrame
1bb69a8
Co-authored-by: joaodibba <113291032+joaodibba@users.noreply.github.com>
@joaodibba
Add DOM verification before InstantSearch initialization
b091bd1
Co-authored-by: joaodibba <113291032+joaodibba@users.noreply.github.com>
CopilotAI
changed the title
[WIP] Add Algolia Search to TypeComposer docsAdd Algolia InstantSearch Integration to TypeComposer DocsOct 10, 2025
CopilotAI
requested a review
from joaodibbaOctober 10, 2025 13:11

Base automatically changed from
develop to
mainJune 16, 2026 00:12
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@joaodibbajoaodibbaAwaiting requested review from joaodibba

Assignees

@joaodibbajoaodibba
Copilot code reviewCopilot

Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

2 participants

@joaodibba

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
Add Algolia InstantSearch Integration to TypeComposer Docs - #18
Draft
joaodibba with Copilot wants to merge 7 commits into
mainfrom 
copilot/add-algolia-search-integration
Draft
Add Algolia InstantSearch Integration to TypeComposer Docs#18
joaodibba with Copilot wants to merge 7 commits into
mainfrom 
copilot/add-algolia-search-integration
Conversation
CopilotAI
commented
Oct 10, 2025•

edited

Loading

Copy link


Copy Markdown

Contributor
Overview
This PR integrates Algolia InstantSearch into the TypeComposer documentation to enable fast, relevant search functionality as requested in the issue.
🔍 Features Added
Search Functionality
  • Algolia InstantSearch integration with a polished modal-based UI
  • Keyboard shortcuts: ⌘K (Mac) / Ctrl+K (Windows/Linux) to open search, ESC to close
  • Search button in navigation bar with visual keyboard shortcut indicator
  • Highlighted search terms in results for better visibility
  • Content snippets showing context around matched terms
  • Theme-aware styling supporting both dark and light modes
  • Responsive design optimized for mobile and desktop
Components
1. AlgoliaSearch (src/components/search/AlgoliaSearch.ts)
Core search component implementing Algolia InstantSearch with:
  • Configurable search widgets (searchBox, hits, configure)
  • Unique instance IDs to prevent DOM conflicts if multiple instances exist
  • Proper lifecycle management with onInit/onDestroy hooks
  • DOM verification using requestAnimationFrame before initialization
  • Clean resource disposal on component destruction
2. SearchModal (src/components/search/SearchModal.ts)
Modal wrapper providing:
  • Backdrop with blur effect
  • Keyboard shortcut handling (⌘K/Ctrl+K for open, ESC for close)
  • Focus management for accessibility
  • Scroll lock when modal is open
3. Custom Styles (src/components/search/search.scss)
Theme-aware styles including:
  • Modal and backdrop styling with glassmorphism effects
  • Search input and results styling
  • Highlight and snippet formatting
  • Responsive breakpoints for mobile devices
4. NavBar Updates (src/components/navbar/NavBar.ts)
  • Added search button with Lucide Search icon
  • Keyboard shortcut indicator (⌘K) visible on desktop
  • SearchModal integration and management
📚 Documentation & Tooling
Setup Documentation
  1. ALGOLIA_SETUP.md - Comprehensive 175-line setup guide covering:
    • Algolia account creation and configuration
    • Credential setup instructions
    • Three indexing strategies: Algolia Crawler, DocSearch program, Manual indexing
    • Customization options for search behavior and UI
    • Troubleshooting common issues
    • API reference links
  2. README.md - Updated project documentation (160 lines) with:
    • Search feature overview
    • Quick setup instructions
    • Project structure updates
    • Technology stack additions
  3. .env.example - Environment variable template for secure credential management
Indexing Script
scripts/index-algolia.js - Automated documentation indexing tool (177 lines) that:
  • Scans MDX files from the content directory
  • Extracts titles, content, and heading hierarchy
  • Strips MDX/Markdown syntax for clean text
  • Uploads records to Algolia with optimized settings
  • Configures searchable attributes and highlighting
📦 Dependencies
Added two production dependencies:
  • algoliasearch (v5.x) - Algolia JavaScript client (lite version for optimal bundle size)
  • instantsearch.js (v4.x) - InstantSearch UI library
🎨 Screenshots
Search Button in Navbar
Homepage with Search Button
The search button is prominently displayed in the navigation bar with a keyboard shortcut indicator (⌘K) for discoverability.
Search Modal Interface
Search Modal
Clean, accessible search modal with blur backdrop. The search input is auto-focused when opened for immediate typing.
Docs Page with Search
Docs Page
Search functionality available across all documentation pages with consistent styling.
🔧 Setup Instructions
The integration uses placeholder Algolia credentials that need to be replaced with actual values:
  1. Create Algolia account at algolia.com
  2. Set up environment variables:
    cp .env.example .env
# Edit .env with your Algolia credentials
  3. Update credentials in src/components/search/AlgoliaSearch.ts:
    constALGOLIA_APP_ID="your_app_id";constALGOLIA_SEARCH_API_KEY="your_search_api_key";constALGOLIA_INDEX_NAME="typecomposer_docs";
  4. Index documentation:
    export ALGOLIA_APP_ID=your_app_id
export ALGOLIA_ADMIN_API_KEY=your_admin_api_key
node scripts/index-algolia.js
✅ Testing
  • Build succeeds without errors or warnings
  • Search modal opens/closes correctly via button click and keyboard shortcuts
  • Keyboard navigation works (⌘K/Ctrl+K, ESC)
  • Theme styling applies correctly in both dark and light modes
  • Responsive design verified on mobile and desktop viewports
  • Component lifecycle properly manages InstantSearch instance
  • Multiple instance support verified with unique IDs
📝 Implementation Notes
  • Security: Admin API key is only used in the indexing script (server-side). Client uses search-only API key.
  • Performance: Uses Algolia lite client for minimal bundle impact (~30KB gzipped)
  • Accessibility: Modal includes focus trapping and keyboard navigation
  • Browser Compatibility: Uses requestAnimationFrame for reliable DOM initialization
  • Error Handling: Gracefully handles missing credentials with informative error messages
🔗 Related Resources
Closes #[issue_number] (if applicable)
Original prompt
This section details on the original issue you should resolve
<issue_title>Feature: Add Algolia Search to TypeComposer Docs</issue_title>

<issue_description>Integrate Algolia InstantSearch into the TypeComposer docs to enable fast, relevant search.</issue_description>
<agent_instructions>Integrate Algolia InstantSearch into the TypeComposer docs to enable fast, relevant search.</agent_instructions>
Comments on the Issue (you are @copilot in this section)
Fixes#17
✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.
CopilotAIand others
added 6 commits
October 10, 2025 12:50
@joaodibba
Initial plan for Algolia InstantSearch integration
ff9c65d
Co-authored-by: joaodibba <113291032+joaodibba@users.noreply.github.com>
@joaodibba
Add Algolia InstantSearch integration components
5b0ece3
Co-authored-by: joaodibba <113291032+joaodibba@users.noreply.github.com>
@joaodibba
Add comprehensive documentation for Algolia search setup
5b37922
Co-authored-by: joaodibba <113291032+joaodibba@users.noreply.github.com>
@joaodibba
Fix search component initialization timing
0a383b8
Co-authored-by: joaodibba <113291032+joaodibba@users.noreply.github.com>
@joaodibba
Address code review feedback: use unique IDs and requestAnimationFrame
1bb69a8
Co-authored-by: joaodibba <113291032+joaodibba@users.noreply.github.com>
@joaodibba
Add DOM verification before InstantSearch initialization
b091bd1
Co-authored-by: joaodibba <113291032+joaodibba@users.noreply.github.com>
CopilotAI
changed the title
[WIP] Add Algolia Search to TypeComposer docsAdd Algolia InstantSearch Integration to TypeComposer DocsOct 10, 2025
CopilotAI
requested a review
from joaodibbaOctober 10, 2025 13:11

Base automatically changed from
develop to
mainJune 16, 2026 00:12
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@joaodibbajoaodibbaAwaiting requested review from joaodibba

Assignees

@joaodibbajoaodibba
Copilot code reviewCopilot

Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

2 participants

@joaodibba