Skip to content

Commit 1237dfe

Browse files
TechWatchingTechWatching
committed
feat(content): add MCP servers article with curated server list
Add a new article detailing favorite MCP servers that enhance AI capabilities. Includes a grid component for displaying server information with categories for better organization. Also updates styles and configuration for image handling.
1 parent 348bd39 commit 1237dfe

File tree

7 files changed

+232
-12
lines changed

7 files changed

+232
-12
lines changed

‎.vscode/mcp.json‎

Lines changed: 20 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,22 @@
11
{
2-
"servers": {
3-
"nuxt-ui": {
4-
"type": "http",
5-
"url": "https://ui.nuxt.com/mcp"
6-
},
7-
"nuxt": {
8-
"type": "http",
9-
"url": "https://nuxt.com/mcp"
10-
}
11-
}
2+
"servers": {
3+
"nuxt-ui": {
4+
"type": "http",
5+
"url": "https://ui.nuxt.com/mcp"
6+
},
7+
"nuxt": {
8+
"type": "http",
9+
"url": "https://nuxt.com/mcp"
10+
},
11+
"io.github.ChromeDevTools/chrome-devtools-mcp": {
12+
"type": "stdio",
13+
"command": "npx",
14+
"args": [
15+
"chrome-devtools-mcp@0.12.1"
16+
],
17+
"gallery": "https://api.mcp.github.com",
18+
"version": "0.12.1"
19+
}
20+
},
21+
"inputs": []
1222
}

‎app/assets/css/main.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,12 @@
1717
--color-green-800: #016538;
1818
--color-green-900: #0A5331;
1919
--color-green-950: #052E16;
20+
21+
/* MCP Server category colors */
22+
--color-cat-vcs: #10b981;
23+
--color-cat-testing: #a855f7;
24+
--color-cat-docs: #3b82f6;
25+
--color-cat-cloud: #f97316;
2026
}
2127

2228
.dark {

‎app/components/content/McpServerGrid.vue‎

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
<script setup lang="ts">
2+
interface McpServer {
3+
title: string
4+
description: string
5+
icon: string
6+
to: string
7+
category: 'vcs' | 'testing' | 'docs' | 'cloud'
8+
}
9+
10+
const props = defineProps<{
11+
servers: McpServer[]
12+
shuffle?: boolean
13+
}>()
14+
15+
const categories = {
16+
vcs: { label: 'Version Control', color: 'var(--color-cat-vcs)' },
17+
testing: { label: 'Browser Automation', color: 'var(--color-cat-testing)' },
18+
docs: { label: 'Documentation', color: 'var(--color-cat-docs)' },
19+
cloud: { label: 'Cloud & DevOps', color: 'var(--color-cat-cloud)' }
20+
} as const
21+
22+
const activeFilter = ref<string | null>(null)
23+
24+
// Shuffle once on component mount to avoid hydration mismatch
25+
const isReady = ref(!props.shuffle)
26+
const shuffledServers = ref<McpServer[]>(props.shuffle ? [] : props.servers)
27+
onMounted(() => {
28+
if (props.shuffle) {
29+
// Fisher-Yates shuffle (no built-in in JS/VueUse)
30+
const arr = [...props.servers]
31+
for (let i = arr.length - 1; i > 0; i--) {
32+
const j = Math.floor(Math.random() * (i + 1))
33+
;[arr[i], arr[j]] = [arr[j]!, arr[i]!]
34+
}
35+
shuffledServers.value = arr
36+
isReady.value = true
37+
}
38+
})
39+
40+
const filteredServers = computed(() => {
41+
return shuffledServers.value
42+
})
43+
44+
function toggleFilter(categoryId: string) {
45+
activeFilter.value = activeFilter.value === categoryId ? null : categoryId
46+
}
47+
48+
function getCategoryInfo(category: keyof typeof categories) {
49+
return categories[category] || categories.docs
50+
}
51+
52+
function isHighlighted(category: string) {
53+
return !activeFilter.value || activeFilter.value === category
54+
}
55+
</script>
56+
57+
<template>
58+
<div
59+
v-if="isReady"
60+
class="space-y-6"
61+
>
62+
<!-- Legend / Filter -->
63+
<div class="flex flex-wrap gap-2">
64+
<button
65+
v-for="(cat, id) in categories"
66+
:key="id"
67+
class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full text-sm font-medium transition-all cursor-pointer border-2"
68+
:style="{
69+
backgroundColor: activeFilter === id ? cat.color : `color-mix(in srgb, ${cat.color} 12%, transparent)`,
70+
borderColor: cat.color,
71+
color: activeFilter === id ? 'white' : cat.color
72+
}"
73+
@click="toggleFilter(id)"
74+
>
75+
<span
76+
class="w-2.5 h-2.5 rounded-full"
77+
:style="{ backgroundColor: cat.color }"
78+
/>
79+
{{ cat.label }}
80+
</button>
81+
<button
82+
v-if="activeFilter"
83+
class="px-3 py-1.5 rounded-full text-sm font-medium bg-neutral-500/20 text-neutral-400 hover:bg-neutral-500/30 transition-all cursor-pointer"
84+
@click="activeFilter = null"
85+
>
86+
Show all
87+
</button>
88+
</div>
89+
90+
<!-- Grid -->
91+
<UPageGrid>
92+
<UPageCard
93+
v-for="server in filteredServers"
94+
:key="server.title"
95+
:title="server.title"
96+
:description="server.description"
97+
:icon="server.icon"
98+
:to="server.to"
99+
target="_blank"
100+
:class="[
101+
'transition-all duration-300',
102+
!isHighlighted(server.category) && 'opacity-25 grayscale scale-95'
103+
]"
104+
:style="{
105+
boxShadow: isHighlighted(server.category)
106+
? `inset 0 0 0 2px ${getCategoryInfo(server.category).color}, 0 0 20px color-mix(in srgb, ${getCategoryInfo(server.category).color} 25%, transparent)`
107+
: 'none'
108+
}"
109+
:ui="{
110+
root: 'relative',
111+
header: 'absolute top-2 right-2 z-10'
112+
}"
113+
>
114+
<template #header>
115+
<span
116+
class="px-2 py-0.5 rounded-full text-xs font-medium"
117+
:style="{
118+
backgroundColor: `color-mix(in srgb, ${getCategoryInfo(server.category).color} 19%, transparent)`,
119+
color: getCategoryInfo(server.category).color
120+
}"
121+
>
122+
{{ getCategoryInfo(server.category).label }}
123+
</span>
124+
</template>
125+
</UPageCard>
126+
</UPageGrid>
127+
</div>
128+
</template>

‎app/pages/goodies/[slug].vue‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,13 @@ if (goodie.value.image?.src) {
4444
v-if="goodie.image?.src"
4545
:src="goodie.image.src"
4646
:alt="goodie.image.alt || goodie.title"
47-
class="goodie-cover-image w-full rounded-lg shadow-lg mb-8"
47+
:width="goodie.image.width"
48+
:style="goodie.image.maxHeight ? { maxHeight: `${goodie.image.maxHeight}px` } : undefined"
49+
:class="[
50+
'goodie-cover-image rounded-lg shadow-lg mb-8',
51+
goodie.image.width ? 'mx-auto' : 'w-full',
52+
goodie.image.maxHeight ? 'object-cover w-full' : ''
53+
]"
4854
/>
4955

5056
<UPageHeader

‎content.config.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -133,7 +133,10 @@ export const collections = {
133133
type: 'page',
134134
schema: z.object({
135135
lead: z.string().optional(),
136-
image: createImageSchema().optional()
136+
image: createImageSchema().extend({
137+
width: z.number().optional(),
138+
maxHeight: z.number().optional()
139+
}).optional()
137140
})
138141
}),
139142
speaking: defineCollection({

‎content/3.goodies/2.mcp-servers.md‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
---
2+
title: My Favorite MCP Servers
3+
lead: Essential Model Context Protocol servers that enhance AI capabilities
4+
description: A curated collection of my favorite MCP servers that extend AI assistants with powerful integrations for development, documentation, and automation.
5+
image:
6+
src: /goodies/puzzle_1.jpg
7+
maxHeight: 300
8+
---
9+
10+
MCP (Model Context Protocol) servers enable AI assistants to interact with external tools, databases, and APIs. Here are the ones I use most frequently.
11+
12+
::mcp-server-grid
13+
---
14+
shuffle: true
15+
servers:
16+
- title: GitKraken
17+
description: Manage Git repositories, branches, commits, and other git tasks.
18+
icon: i-simple-icons-gitkraken
19+
to: https://www.gitkraken.com/mcp
20+
category: vcs
21+
- title: Chrome DevTools
22+
description: Full browser automation with screenshots, network monitoring, and DevTools integration.
23+
icon: i-simple-icons-googlechrome
24+
to: https://github.com/chromedevtools/chrome-devtools-mcp
25+
category: testing
26+
- title: Playwright
27+
description: End-to-end testing across Chromium, Firefox, and WebKit browsers.
28+
icon: i-simple-icons-playwright
29+
to: https://github.com/microsoft/playwright-mcp
30+
category: testing
31+
- title: Microsoft Learn
32+
description: Azure, .NET, Visual Studio, and Microsoft platform documentation.
33+
icon: i-simple-icons-microsoft
34+
to: https://github.com/MicrosoftDocs/mcp
35+
category: docs
36+
- title: Context7
37+
description: Real-time documentation and code examples from any library or framework via Upstash's API.
38+
icon: i-heroicons-book-open
39+
to: https://github.com/upstash/context7
40+
category: docs
41+
- title: Nuxt
42+
description: Framework documentation, modules, deployment guides, and community resources.
43+
icon: i-simple-icons-nuxtdotjs
44+
to: https://nuxt.com/docs/4.x/guide/ai/mcp
45+
category: docs
46+
- title: Nuxt UI
47+
description: Component library with examples, templates, and theming documentation.
48+
icon: i-heroicons-sparkles
49+
to: https://ui.nuxt.com/docs/getting-started/ai/mcp
50+
category: docs
51+
- title: GitHub
52+
description: Repository management, issues, pull requests, actions, and GitHub API integration.
53+
icon: i-simple-icons-github
54+
to: https://github.com/github/github-mcp-server
55+
category: cloud
56+
- title: Azure
57+
description: Manage Azure resources, subscriptions, and cloud infrastructure via Azure CLI and APIs.
58+
icon: i-simple-icons-microsoftazure
59+
to: https://github.com/microsoft/mcp/tree/main/servers/Azure.Mcp.Server
60+
category: cloud
61+
- title: Azure DevOps
62+
description: Pipelines, boards, repos, artifacts, and project management for Azure DevOps Services.
63+
icon: i-simple-icons-azuredevops
64+
to: https://github.com/microsoft/azure-devops-mcp
65+
category: cloud
66+
---
67+
::

‎public/goodies/puzzle_1.jpg‎

556 KB
Loading

0 commit comments

Comments
 (0)