diff --git a/scripts/build_site.js b/scripts/build_site.js index 8aabbd2..6b1eae8 100644 --- a/scripts/build_site.js +++ b/scripts/build_site.js @@ -202,6 +202,76 @@ h2, h3, h4, h5, h6 { color: var(--accent-blue); transform: translateX(-5px); } + +.install-block { + background: #0d0d0d; + padding: 1rem; + border-radius: 8px; + border: 1px solid var(--border-color); + margin-bottom: 2rem; + display: flex; + justify-content: space-between; + align-items: center; + font-family: monospace; + color: var(--text-secondary); +} + +.action-bar { + display: flex; + justify-content: flex-end; + margin-bottom: 1rem; +} + +.copy-btn { + background: transparent; + border: 1px solid var(--border-color); + color: var(--text-secondary); + padding: 0.25rem 0.75rem; + border-radius: 4px; + cursor: pointer; + font-size: 0.8rem; + transition: all 0.2s; +} + +.copy-btn:hover { + border-color: var(--accent-blue); + color: var(--accent-blue); +} + +.nav-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 2rem; +} + +.nav-header .back-link { + margin-bottom: 0; +} + +.gradient-btn { + background: linear-gradient(90deg, var(--accent-blue), #9089fc); + color: white; + border: none; + padding: 0.5rem 1rem; + border-radius: 20px; + cursor: pointer; + font-weight: 600; + transition: all 0.3s ease; + text-shadow: 0 1px 2px rgba(0,0,0,0.2); +} + +.gradient-btn:hover { + box-shadow: 0 0 15px var(--accent-glow); + transform: translateY(-1px); +} + +.gradient-btn:disabled, .copy-btn:disabled { + opacity: 0.7; + cursor: not-allowed; + transform: none; + box-shadow: none; +} `; function parseFrontmatter(content) { @@ -221,7 +291,10 @@ function parseFrontmatter(content) { return { frontmatter, body }; } -function renderPage(title, content, isIndex = false) { +function renderPage(title, content, isIndex = false, extra = {}) { + // Note: The user manually updated this command in a previous step, preserving that change. + const installCmd = `npx skills add rodydavis/skills --skill ${extra.skillPath}`; + return ` @@ -236,19 +309,56 @@ function renderPage(title, content, isIndex = false) {
- ${!isIndex ? `← Back to Skills` : ''} -
-

${isIndex ? 'Agent Skills' : title}

- ${isIndex ? ` -

by Rody Davis

-
- View on GitHub -
- ` : ''} -
-
+ ${!isIndex ? ` +
+ ← Back to Skills + +
` : ''} + ${isIndex ? `
+

Agent Skills

+

by Rody Davis

+
+ View on GitHub +
+
` : ''} + + ${!isIndex ? ` +
+ ${installCmd} + +
+
+ ${content} +
+ + + ` : ` +
${content}
+ `}
`; @@ -291,7 +401,10 @@ function build() { // 2. Generate Skill Pages skills.forEach(skill => { const htmlContent = md.render(skill.content); - const pageHtml = renderPage(skill.name, htmlContent); + const pageHtml = renderPage(skill.name, htmlContent, false, { + skillPath: skill.path, + rawMarkdown: skill.content + }); // Create directory for the skill page (prettier URLs: /skill-name/index.html) const skillOutputDir = path.join(outputDir, skill.path);