test news page
This commit is contained in:
parent
1244ee474e
commit
bc38ea49bb
@ -3,7 +3,6 @@
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="icon" href="/favicon.svg">
|
||||
<link rel="stylesheet" href="/default-dark.css">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>OpenMCP News Feature</title>
|
||||
@ -15,3 +14,11 @@
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
<style>
|
||||
.openmcp-icon {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
background: url('https://kirigaya.cn/openmcp/images/favicon.svg') no-repeat center/contain;
|
||||
}
|
||||
</style>
|
||||
@ -1,6 +1,4 @@
|
||||
<script setup lang="ts">
|
||||
import OmIcon from './OmIcon.vue';
|
||||
|
||||
const props = defineProps({
|
||||
version: {
|
||||
type: String,
|
||||
@ -11,7 +9,7 @@ const props = defineProps({
|
||||
|
||||
<template>
|
||||
<header class="openmcp-header">
|
||||
<om-icon />
|
||||
<div class="openmcp-icon openmcp-logo"></div>
|
||||
<div>
|
||||
<h1>
|
||||
OpenMCP Client<sup><small>{{ props.version }}</small></sup>
|
||||
@ -71,6 +69,14 @@ const props = defineProps({
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.openmcp-logo {
|
||||
display: inline-block;
|
||||
width: 84px;
|
||||
height: 84px;
|
||||
border-radius: 16px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
hr {
|
||||
border: none;
|
||||
border-top: 1.5px solid #B988D1;
|
||||
|
||||
@ -1,14 +1,30 @@
|
||||
<script setup lang="ts">
|
||||
import VanillaTilt from 'vanilla-tilt';
|
||||
import { onMounted, ref } from 'vue';
|
||||
const container = ref<any>(null);
|
||||
onMounted(() => {
|
||||
VanillaTilt.init(container.value, {
|
||||
max: 12,
|
||||
speed: 400,
|
||||
glare: true,
|
||||
'max-glare': 0.5
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="feature-section">
|
||||
<div class="section-title">🐳 Learn More Features & Usage</div>
|
||||
|
||||
<div
|
||||
style="margin-bottom: 1.1rem;"
|
||||
>Learn more about how to use openmcp to build your AI Agent & MCP fast</div>
|
||||
<div style="margin-bottom: 1.1rem;">Learn more about how to use openmcp to build your AI Agent & MCP fast</div>
|
||||
|
||||
<div class="bilibili-player-container" style="display:flex; width: 100%; justify-content: center;">
|
||||
<!-- <a href="https://www.youtube.com/embed/S7igsEhcLiw?si=6sqvbYJxSRoFS26g" target="_blank" class="bilibili-player-container" style="display:flex; width: 100%; justify-content: center;">
|
||||
<iframe width="100%" height="580" src="https://www.youtube.com/embed/S7igsEhcLiw?si=6sqvbYJxSRoFS26g" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
|
||||
</div>
|
||||
</a> -->
|
||||
|
||||
<a href="https://www.youtube.com/watch?v=S7igsEhcLiw" target="_blank" class="bilibili-player-container">
|
||||
<img src="https://pic1.zhimg.com/80/v2-951261f789708621a2c34faa5fa6f330_1440w.png" alt="" ref="container">
|
||||
</a>
|
||||
|
||||
</section>
|
||||
</template>
|
||||
@ -64,21 +80,21 @@
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.bilibili-player-container img {
|
||||
max-width: 100%;
|
||||
box-shadow: 0 4px 12px var(--vscode-widget-shadow);
|
||||
border-radius: .5em;
|
||||
}
|
||||
|
||||
|
||||
.bilibili-player-container {
|
||||
position: relative;
|
||||
min-width: 377px;
|
||||
min-height: 225px;
|
||||
width: 52.36vw;
|
||||
height: 580px;
|
||||
border: 2px solid var(--vp-c-brand-3);
|
||||
border-radius: 8px;
|
||||
aspect-ratio: 16/9;
|
||||
width: fit-content;
|
||||
height: fit-content;
|
||||
margin: 2rem 0;
|
||||
border-radius: .5em;
|
||||
overflow: hidden;
|
||||
transition: box-shadow 0.3s ease, border-color 0.3s ease;
|
||||
box-shadow: 0 4px 12px var(--vscode-widget-shadow);
|
||||
}
|
||||
|
||||
@media (max-width: 2700px) {
|
||||
@ -99,8 +115,4 @@
|
||||
}
|
||||
}
|
||||
|
||||
.bilibili-player-container:hover {
|
||||
border-color: var(--vp-c-brand-1);
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
</style>
|
||||
@ -1,5 +1,8 @@
|
||||
<template>
|
||||
<svg width="84" height="84" viewBox="0 0 612 612" fill="none" xmlns="http://www.w3.org/2000/svg" class="openmcp-logo">
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from 'vue';
|
||||
|
||||
const svgString = `
|
||||
<svg width="84" height="84" viewBox="0 0 612 612" fill="none" xmlns="http://www.w3.org/2000/svg" class="openmcp-logo">
|
||||
<defs>
|
||||
<linearGradient id="gradient_1" gradientUnits="userSpaceOnUse" x1="300" y1="0" x2="300" y2="600">
|
||||
<stop offset="0" stop-color="#A1A7F6" />
|
||||
@ -60,33 +63,36 @@
|
||||
</defs>
|
||||
<g transform="translate(6 2)">
|
||||
<g>
|
||||
<path
|
||||
d="M300 0C465.708 0 600 134.292 600 300C600 300 600 300 600 300C600 465.708 465.708 600 300 600C300 600 300 600 300 600C134.292 600 0 465.708 0 300C0 300 0 300 0 300C0 134.292 134.292 0 300 0Z"
|
||||
fill="#5A00FF" fill-rule="evenodd" />
|
||||
<path
|
||||
d="M300 0C465.708 0 600 134.292 600 300C600 300 600 300 600 300C600 465.708 465.708 600 300 600C300 600 300 600 300 600C134.292 600 0 465.708 0 300C0 300 0 300 0 300C0 134.292 134.292 0 300 0Z"
|
||||
fill="url(#gradient_1)" fill-rule="evenodd" />
|
||||
<path d="M300 0C465.708 0 600 134.292 600 300C600 300 600 300 600 300C600 465.708 465.708 600 300 600C300 600 300 600 300 600C134.292 600 0 465.708 0 300C0 300 0 300 0 300C0 134.292 134.292 0 300 0Z" fill="#5A00FF" fill-rule="evenodd" />
|
||||
<path d="M300 0C465.708 0 600 134.292 600 300C600 300 600 300 600 300C600 465.708 465.708 600 300 600C300 600 300 600 300 600C134.292 600 0 465.708 0 300C0 300 0 300 0 300C0 134.292 134.292 0 300 0Z" fill="url(#gradient_1)" fill-rule="evenodd" />
|
||||
</g>
|
||||
<path
|
||||
d="M0 110.5C0 49.4725 49.4725 0 110.5 0C171.527 0 221 49.4725 221 110.5C221 171.527 171.527 221 110.5 221C49.4725 221 0 171.527 0 110.5Z"
|
||||
fill="url(#gradient_2)" fill-rule="evenodd" filter="url(#filter_3)" transform="translate(293 324)" />
|
||||
<path
|
||||
d="M0 55.5C0 24.8482 24.8482 0 55.5 0C86.1518 0 111 24.8482 111 55.5C111 86.1518 86.1518 111 55.5 111C24.8482 111 0 86.1518 0 55.5Z"
|
||||
fill="url(#gradient_4)" fill-rule="evenodd" filter="url(#filter_5)" transform="translate(48 269)" />
|
||||
<path
|
||||
d="M0 174C0 77.9024 77.9024 0 174 0C270.098 0 348 77.9024 348 174C348 270.098 270.098 348 174 348C77.9024 348 0 270.098 0 174Z"
|
||||
fill="url(#gradient_6)" fill-rule="evenodd" filter="url(#filter_7)" transform="translate(188 56)" />
|
||||
<path
|
||||
d="M0 57C0 25.5198 25.5198 0 57 0C88.4802 0 114 25.5198 114 57C114 88.4802 88.4802 114 57 114C25.5198 114 0 88.4802 0 57Z"
|
||||
fill="url(#gradient_8)" fill-rule="evenodd" filter="url(#filter_9)" transform="translate(388 129)" />
|
||||
<path d="M0 110.5C0 49.4725 49.4725 0 110.5 0C171.527 0 221 49.4725 221 110.5C221 171.527 171.527 221 110.5 221C49.4725 221 0 171.527 0 110.5Z" fill="url(#gradient_2)" fill-rule="evenodd" filter="url(#filter_3)" transform="translate(293 324)" />
|
||||
<path d="M0 55.5C0 24.8482 24.8482 0 55.5 0C86.1518 0 111 24.8482 111 55.5C111 86.1518 86.1518 111 55.5 111C24.8482 111 0 86.1518 0 55.5Z" fill="url(#gradient_4)" fill-rule="evenodd" filter="url(#filter_5)" transform="translate(48 269)" />
|
||||
<path d="M0 174C0 77.9024 77.9024 0 174 0C270.098 0 348 77.9024 348 174C348 270.098 270.098 348 174 348C77.9024 348 0 270.098 0 174Z" fill="url(#gradient_6)" fill-rule="evenodd" filter="url(#filter_7)" transform="translate(188 56)" />
|
||||
<path d="M0 57C0 25.5198 25.5198 0 57 0C88.4802 0 114 25.5198 114 57C114 88.4802 88.4802 114 57 114C25.5198 114 0 88.4802 0 57Z" fill="url(#gradient_8)" fill-rule="evenodd" filter="url(#filter_9)" transform="translate(388 129)" />
|
||||
</g>
|
||||
</svg>
|
||||
</svg>
|
||||
`;
|
||||
|
||||
const svgContainer = ref<HTMLElement | null>(null);
|
||||
|
||||
onMounted(() => {
|
||||
if (svgContainer.value) {
|
||||
svgContainer.value.innerHTML = svgString;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<span ref="svgContainer" class="openmcp-logo"></span>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.openmcp-logo {
|
||||
display: inline-block;
|
||||
width: 84px;
|
||||
height: 84px;
|
||||
border-radius: 16px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
</style>
|
||||
@ -153,16 +153,7 @@ export function getNewsWebviewContent(context: vscode.ExtensionContext, panel: v
|
||||
const viewRoot = fspath.join(context.extensionPath, 'resources', 'changelog');
|
||||
const htmlIndexPath = fspath.join(viewRoot, 'index.html');
|
||||
|
||||
const html = fs.readFileSync(htmlIndexPath, { encoding: 'utf-8' })?.replace(/(<link.+?href="|<script.+?src="|<img.+?src="|url\()(.+?)(\)|")/g, (m, $1, $2) => {
|
||||
const importFile = $2 as string;
|
||||
const rel = importFile.startsWith('/') ? importFile.substring(1) : importFile;
|
||||
const absLocalPath = fspath.resolve(viewRoot, rel);
|
||||
|
||||
const webviewUri = panel.webview.asWebviewUri(vscode.Uri.file(absLocalPath));
|
||||
const replaceHref = $1 + webviewUri?.toString() + '"';
|
||||
return replaceHref;
|
||||
});
|
||||
|
||||
const html = fs.readFileSync(htmlIndexPath, { encoding: 'utf-8' });
|
||||
return html;
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user