Skip to content

Commit 46567a1

Browse files
dataGriffdataGriff
committed
feat: enhance search functionality with external repository suggestions and improve documentation layout
1 parent cbaf6ef commit 46567a1

4 files changed

Lines changed: 382 additions & 17 deletions

File tree

‎docs/assets/javascripts/extra.js‎

Lines changed: 205 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,26 @@ function initializeSearchEnhancements() {
3939
const searchInput = document.querySelector('.md-search__input');
4040
if (!searchInput) return;
4141

42+
// External repositories metadata for enhanced search
43+
const externalRepos = {
44+
docs: {
45+
name: 'Documentation Hub',
46+
url: 'https://codebase-interface.github.io/docs',
47+
searchUrl: 'https://codebase-interface.github.io/docs/search/?q=',
48+
repoUrl: 'https://github.com/codebase-interface/docs',
49+
repoSearchUrl: 'https://github.com/codebase-interface/docs/search?q=',
50+
topics: ['templates', 'guides', 'specifications', 'best-practices', 'architecture', 'frameworks']
51+
},
52+
cli: {
53+
name: 'CLI Tools',
54+
url: 'https://codebase-interface.github.io/cli',
55+
searchUrl: 'https://codebase-interface.github.io/cli/search/?q=',
56+
repoUrl: 'https://github.com/codebase-interface/cli',
57+
repoSearchUrl: 'https://github.com/codebase-interface/cli/search?q=',
58+
topics: ['automation', 'validation', 'generation', 'commands', 'installation', 'configuration']
59+
}
60+
};
61+
4262
// Add search suggestions for common queries
4363
const commonQueries = [
4464
'documentation standards',
@@ -47,14 +67,21 @@ function initializeSearchEnhancements() {
4767
'contributing guidelines',
4868
'audience interfaces',
4969
'taskfile',
50-
'automation'
70+
'automation',
71+
'templates',
72+
'validation',
73+
'installation',
74+
'configuration'
5175
];
5276

5377
// Enhanced search with repository context
5478
searchInput.addEventListener('input', debounce(function(e) {
5579
const query = e.target.value.toLowerCase();
5680

5781
if (query.length > 2) {
82+
// Add external search suggestions
83+
addExternalSearchSuggestions(query, externalRepos);
84+
5885
// Track search queries for analytics
5986
if (typeof gtag !== 'undefined') {
6087
gtag('event', 'search', {
@@ -64,6 +91,183 @@ function initializeSearchEnhancements() {
6491
}
6592
}
6693
}, 300));
94+
95+
// Add external search button to search results
96+
addExternalSearchOptions(externalRepos);
97+
}
98+
99+
/**
100+
* Add external repository search suggestions
101+
*/
102+
function addExternalSearchSuggestions(query, repos) {
103+
// Look for existing external results container
104+
let externalContainer = document.querySelector('.external-search-results');
105+
106+
if (!externalContainer) {
107+
externalContainer = document.createElement('div');
108+
externalContainer.className = 'external-search-results';
109+
externalContainer.innerHTML = `
110+
<div class="external-search-header">
111+
<h4>🔍 Search External Resources</h4>
112+
<p>Find more detailed information in our specialized repositories:</p>
113+
</div>
114+
`;
115+
116+
const searchOutput = document.querySelector('.md-search__output');
117+
if (searchOutput) {
118+
searchOutput.appendChild(externalContainer);
119+
}
120+
}
121+
122+
// Clear existing suggestions
123+
const existingSuggestions = externalContainer.querySelectorAll('.external-suggestion');
124+
existingSuggestions.forEach(s => s.remove());
125+
126+
// Add suggestions for each repo based on query relevance
127+
Object.entries(repos).forEach(([key, repo]) => {
128+
const relevantTopics = repo.topics.filter(topic =>
129+
topic.includes(query) || query.includes(topic)
130+
);
131+
132+
if (relevantTopics.length > 0 || query.length > 3) {
133+
const suggestion = document.createElement('div');
134+
suggestion.className = 'external-suggestion';
135+
suggestion.innerHTML = `
136+
<div class="suggestion-content">
137+
<strong>${repo.name}</strong>
138+
<p>Search for "${query}" in ${repo.name.toLowerCase()}</p>
139+
${relevantTopics.length > 0 ? `<small>Related: ${relevantTopics.join(', ')}</small>` : ''}
140+
</div>
141+
<div class="suggestion-buttons">
142+
<a href="${repo.searchUrl}${encodeURIComponent(query)}"
143+
target="_blank"
144+
class="suggestion-link docs-search"
145+
onclick="CodebaseInterface.trackEvent('external_search', 'search', '${key}:${query}')">
146+
Search Docs →
147+
</a>
148+
<a href="${repo.repoSearchUrl}${encodeURIComponent(query)}"
149+
target="_blank"
150+
class="suggestion-link repo-search"
151+
onclick="CodebaseInterface.trackEvent('repo_search', 'search', '${key}:${query}')">
152+
Search Repo →
153+
</a>
154+
</div>
155+
`;
156+
157+
externalContainer.appendChild(suggestion);
158+
}
159+
});
160+
}
161+
162+
/**
163+
* Add external search options to the search interface
164+
*/
165+
function addExternalSearchOptions(repos) {
166+
const searchForm = document.querySelector('.md-search__form');
167+
if (!searchForm) return;
168+
169+
// Add CSS for external search styling
170+
if (!document.querySelector('#external-search-styles')) {
171+
const styles = document.createElement('style');
172+
styles.id = 'external-search-styles';
173+
styles.textContent = `
174+
.external-search-results {
175+
margin: 1rem 0;
176+
padding: 1rem;
177+
background: var(--md-code-bg-color);
178+
border-radius: 8px;
179+
border-left: 4px solid var(--ci-primary, #2563eb);
180+
}
181+
182+
.external-search-header h4 {
183+
margin: 0 0 0.5rem 0;
184+
color: var(--ci-primary, #2563eb);
185+
font-size: 0.9rem;
186+
}
187+
188+
.external-search-header p {
189+
margin: 0 0 1rem 0;
190+
font-size: 0.8rem;
191+
opacity: 0.8;
192+
}
193+
194+
.external-suggestion {
195+
display: flex;
196+
align-items: center;
197+
justify-content: space-between;
198+
padding: 0.75rem;
199+
margin: 0.5rem 0;
200+
background: var(--md-default-bg-color);
201+
border-radius: 6px;
202+
border: 1px solid var(--md-default-fg-color--lightest);
203+
transition: all 0.2s ease;
204+
}
205+
206+
.external-suggestion:hover {
207+
transform: translateX(4px);
208+
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
209+
}
210+
211+
.suggestion-content {
212+
flex: 1;
213+
}
214+
215+
.suggestion-content strong {
216+
color: var(--ci-primary, #2563eb);
217+
font-size: 0.85rem;
218+
}
219+
220+
.suggestion-content p {
221+
margin: 0.25rem 0;
222+
font-size: 0.8rem;
223+
}
224+
225+
.suggestion-content small {
226+
color: var(--md-default-fg-color--light);
227+
font-size: 0.7rem;
228+
}
229+
230+
.suggestion-buttons {
231+
display: flex;
232+
gap: 0.5rem;
233+
flex-direction: column;
234+
}
235+
236+
@media (min-width: 768px) {
237+
.suggestion-buttons {
238+
flex-direction: row;
239+
}
240+
}
241+
242+
.suggestion-link {
243+
background: var(--ci-primary, #2563eb);
244+
color: white !important;
245+
padding: 0.4rem 0.8rem;
246+
border-radius: 4px;
247+
text-decoration: none;
248+
font-size: 0.75rem;
249+
font-weight: 500;
250+
transition: background 0.2s ease;
251+
text-align: center;
252+
min-width: 100px;
253+
}
254+
255+
.suggestion-link:hover {
256+
background: var(--ci-accent, #0ea5e9);
257+
text-decoration: none;
258+
}
259+
260+
.suggestion-link.repo-search {
261+
background: var(--md-default-fg-color--light);
262+
color: var(--md-default-bg-color) !important;
263+
}
264+
265+
.suggestion-link.repo-search:hover {
266+
background: var(--md-default-fg-color);
267+
}
268+
`;
269+
document.head.appendChild(styles);
270+
}
67271
}
68272

69273
/**

‎docs/assets/stylesheets/extra.css‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,66 @@
9696
margin: 2rem 0;
9797
}
9898

99+
.resources-grid {
100+
margin: 2rem 0;
101+
}
102+
103+
.resources-grid h3 {
104+
color: var(--ci-primary);
105+
border-bottom: 2px solid var(--ci-primary);
106+
padding-bottom: 0.5rem;
107+
margin-bottom: 1rem;
108+
}
109+
110+
.resources-grid > div {
111+
background: var(--md-code-bg-color);
112+
border-radius: 8px;
113+
padding: 1.5rem;
114+
margin-bottom: 2rem;
115+
border-left: 4px solid var(--ci-primary);
116+
box-shadow: var(--ci-shadow);
117+
}
118+
119+
.resources-grid ul {
120+
list-style: none;
121+
padding-left: 0;
122+
}
123+
124+
.resources-grid li {
125+
margin: 0.75rem 0;
126+
padding: 0.5rem 0;
127+
padding-left: 1.5rem;
128+
position: relative;
129+
}
130+
131+
.resources-grid li:before {
132+
content: "▶";
133+
position: absolute;
134+
left: 0;
135+
color: var(--ci-primary);
136+
font-size: 0.8rem;
137+
}
138+
139+
.resources-grid table {
140+
margin-top: 1rem;
141+
}
142+
143+
.resources-grid table th {
144+
background: var(--ci-primary) !important;
145+
color: white !important;
146+
font-weight: 600 !important;
147+
}
148+
149+
.resources-grid table td a {
150+
color: var(--ci-primary);
151+
text-decoration: none;
152+
font-weight: 500;
153+
}
154+
155+
.resources-grid table td a:hover {
156+
text-decoration: underline;
157+
}
158+
99159
/* Card Styling */
100160
.principle-card {
101161
background: var(--md-default-bg-color);

0 commit comments

Comments
 (0)