feat: Add logo to top navigation

- Add logo.svg from assets to Starlight navigation bar
- Logo appears alongside site title in top nav
- Enhances site branding and visual identity
This commit is contained in:
Claude AI Guide Project 2025-07-08 00:26:02 -06:00
parent fab2254318
commit 2925a43138
2 changed files with 99 additions and 0 deletions

View File

@ -8,6 +8,9 @@ export default defineConfig({
starlight({ starlight({
title: 'How to Talk to Claude', title: 'How to Talk to Claude',
description: 'A comprehensive guide to AI collaboration skills - for humans', description: 'A comprehensive guide to AI collaboration skills - for humans',
logo: {
src: './src/assets/logo.svg',
},
social: [ social: [
{ icon: 'github', label: 'GitHub', href: 'https://github.com/your-username/how-to-talk-to-claude' } { icon: 'github', label: 'GitHub', href: 'https://github.com/your-username/how-to-talk-to-claude' }
], ],

96
src/assets/logo.svg Normal file
View File

@ -0,0 +1,96 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
viewBox="0 0 200 60"
version="1.1"
id="svg4"
sodipodi:docname="logo.svg"
inkscape:version="1.4.2 (2aeb623e1d, 2025-05-12)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview4"
pagecolor="#505050"
bordercolor="#eeeeee"
borderopacity="1"
inkscape:showpageshadow="0"
inkscape:pageopacity="0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#505050"
showgrid="false"
inkscape:zoom="4.185"
inkscape:cx="84.109916"
inkscape:cy="30.704898"
inkscape:window-width="3838"
inkscape:window-height="1975"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="svg4" />
<defs
id="defs2">
<linearGradient
id="logoGradient"
x1="0%"
y1="0%"
x2="100%"
y2="0%">
<stop
offset="0%"
style="stop-color:#667eea;stop-opacity:1"
id="stop1" />
<stop
offset="100%"
style="stop-color:#764ba2;stop-opacity:1"
id="stop2" />
</linearGradient>
</defs>
<!-- Chat bubble 1 -->
<rect
x="10"
y="20"
width="30"
height="20"
rx="10"
fill="url(#logoGradient)"
opacity="0.8"
id="rect2" />
<!-- Chat bubble 2 -->
<rect
x="25"
y="10"
width="30"
height="20"
rx="10"
fill="url(#logoGradient)"
opacity="0.6"
id="rect3" />
<!-- Text -->
<text
x="132.44209"
y="19.504181"
font-family="system-ui, sans-serif"
font-size="16px"
font-weight="600"
fill="currentColor"
id="text3"><tspan
sodipodi:role="line"
id="tspan4"
x="132.44209"
y="19.504181"
style="text-align:center;text-anchor:middle">How to Talk</tspan><tspan
sodipodi:role="line"
id="tspan5"
x="132.44209"
y="39.504181"
style="text-align:center;text-anchor:middle">to Claude</tspan></text>
<text
x="98.673836"
y="53.708485"
font-family="system-ui, sans-serif"
font-size="12px"
fill="currentColor"
opacity="0.7"
id="text4">for Humans</text>
</svg>

After

Width:  |  Height:  |  Size: 2.4 KiB