Skip to content

Commit b99aa32

Browse files
kosmozkosmoz
committed
chore: add logo
1 parent 1280374 commit b99aa32

File tree

4 files changed

+83
-46
lines changed

4 files changed

+83
-46
lines changed

‎index.html‎

Lines changed: 76 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,31 @@
1111
background: #f0f0f0;
1212
color: #282828;
1313
margin: 0;
14+
font-family: sans-serif;
15+
}
16+
17+
main {
18+
max-width: 52rem;
19+
margin: 0 auto;
20+
}
21+
22+
.card {
23+
box-shadow:
24+
0 2px 4px rgba(0, 0, 0, 0.1),
25+
0 8px 16px rgba(0, 0, 0, 0.1);
26+
background: #fcfcfc;
27+
margin: 2rem 0 0.8rem;
28+
padding: 2rem;
29+
border-radius: 8px;
30+
}
31+
32+
h1 {
33+
margin: 0 0 0.8rem;
34+
display: flex;
35+
align-items: center;
36+
gap: 0.2em;
1437
}
1538

16-
h1,
1739
h2,
1840
h3,
1941
h4,
@@ -22,16 +44,8 @@
2244
margin-bottom: 0.4rem;
2345
}
2446

25-
main {
26-
background: #fcfcfc;
27-
font-family: sans-serif;
28-
max-width: 52rem;
29-
margin: 2rem auto;
30-
padding: 2rem;
31-
border-radius: 8px;
32-
box-shadow:
33-
0 2px 4px rgba(0, 0, 0, 0.1),
34-
0 8px 16px rgba(0, 0, 0, 0.1);
47+
.logo {
48+
height: 1.2em;
3549
}
3650

3751
form {
@@ -60,38 +74,62 @@
6074
padding: 0.5rem 1rem;
6175
cursor: pointer;
6276
}
77+
78+
.footer {
79+
display: flex;
80+
gap: 0.2rem;
81+
justify-content: flex-end;
82+
align-items: center;
83+
}
6384
</style>
6485
</head>
6586
<body>
6687
<main>
67-
<form method="GET">
68-
<h1>MCP Server Instructions</h1>
69-
<div>
70-
<label for="edit-url">Server URL</label>
71-
<input
72-
type="text"
73-
id="edit-url"
74-
name="url"
75-
placeholder="Enter URL"
76-
required
77-
/>
78-
</div>
79-
<div>
80-
<label for="edit-name">Server Name (optional)</label>
81-
<input
82-
type="text"
83-
id="edit-name"
84-
name="name"
85-
placeholder="Enter Name"
86-
/>
88+
<div class="card">
89+
<h1>
90+
<img class="logo" src="https://hyprmcp.com/mc-dark.svg" />
91+
MCP Server Instructions
92+
</h1>
93+
94+
<div id="content">
95+
<form method="GET">
96+
<h2>Server Information</h2>
97+
<div>
98+
<label for="edit-url">Server URL</label>
99+
<input
100+
type="text"
101+
id="edit-url"
102+
name="url"
103+
placeholder="Enter URL"
104+
required
105+
/>
106+
</div>
107+
<div>
108+
<label for="edit-name">Server Name (optional)</label>
109+
<input
110+
type="text"
111+
id="edit-name"
112+
name="name"
113+
placeholder="Enter Name"
114+
/>
115+
</div>
116+
<button type="submit">Show</button>
117+
</form>
118+
<form method="GET">
119+
<input type="hidden" name="url" value="https://mcp.example.com" />
120+
<button type="submit">Show example</button>
121+
</form>
87122
</div>
88-
<button type="submit">Show</button>
89-
</form>
90-
<form method="GET">
91-
<input type="hidden" name="url" value="https://mcp.example.com" />
92-
<button type="submit">Show example</button>
93-
</form>
123+
</div>
124+
125+
<div class="footer">
126+
Created by
127+
<a href="https://hyprmcp.com/"
128+
><img src="https://hyprmcp.com/hyprmcp_20px.svg"
129+
/></a>
130+
</div>
94131
</main>
132+
95133
<script>
96134
const queryParams = location.search
97135
.substring(1)
@@ -112,9 +150,7 @@ <h1>MCP Server Instructions</h1>
112150
el.setAttribute('name', queryParams.name);
113151
}
114152

115-
document.querySelector('main').innerHTML =
116-
`<h1>MCP Server Instructions</h1>`;
117-
document.querySelector('main').appendChild(el);
153+
document.querySelector('#content').replaceChildren(el);
118154
}
119155
</script>
120156
</body>

‎src/component/index.ts‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import {
1414
} from './styles.module.css';
1515

1616
export class McpInstructions extends HTMLElement {
17-
public static observedAttributes = ['url', 'name'];
17+
public static observedAttributes = ['url', 'name', 'watermark'];
1818

1919
private selectedTarget: Target = 'cursor';
2020
private url?: string;
@@ -33,9 +33,7 @@ export class McpInstructions extends HTMLElement {
3333
constructor() {
3434
super();
3535
const template = document.createElement('template');
36-
template.innerHTML = `<div class="${header}"></div>
37-
<div class="${content}"></div>
38-
<div class="${footer}">Created by <a href="https://hyprmcp.com/">Hypr MCP</a></div>`;
36+
template.innerHTML = `<div class="${header}"></div><div class="${content}"></div>`;
3937
this.root = template.content;
4038

4139
this.header = this.root.querySelector(`.${header}`)!;

‎src/component/styles.module.css‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,9 @@ mcp-install-instructions {
4747
}
4848

4949
.footer {
50-
text-align: end;
50+
display: flex;
51+
gap: 0.2rem;
52+
justify-content: flex-end;
53+
align-items: center;
5154
}
5255
}

‎src/lib/util/watermark.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
export const watermark = `by [Hypr MCP](https://hyprmcp.com/)`;
1+
export const watermark = `by [![Hypr MCP](https://hyprmcp.com/hyprmcp_20px.svg)](https://hyprmcp.com/)`;

0 commit comments

Comments
 (0)