Skip to content

Commit bd9d701

Browse files
committed
fix: W3C-style ontology pages, version switcher fix, playwright MCP
- Ontology index pages: W3C-inspired layout (white bg, blue header, metadata dl, BFO tables) - Version switcher: removed duplicate static dropdown, fixed Vue component to use window.location.href instead of router.go(), wrapped in ClientOnly - Removed dead v3.4 dropdown from nav config - Playwright MCP added to project settings for next session
1 parent 410b011 commit bd9d701

4 files changed

Lines changed: 282 additions & 141 deletions

File tree

docs/.vitepress/config.mts

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -21,17 +21,9 @@ export default withMermaid(defineConfig({
2121
siteTitle: 'Concept Kernel',
2222

2323
nav: [
24-
{
25-
text: 'v3.4',
26-
items: [
27-
{ text: 'v3.4 (stable)', link: '/v3.4/' },
28-
{ text: 'v3.5-alpha3', link: '/v3.5-alpha3/' },
29-
]
30-
},
3124
{ text: 'Docs', link: '/v3.4/introduction' },
3225
{ text: 'Architecture', link: '/v3.4/architecture' },
33-
{ text: 'Concepts', link: '/v3.4/concepts/kernels' },
34-
{ text: 'Ontology', link: '/ontology/v3.4/' },
26+
{ text: 'Ontology', link: '/ontology/v3.5/' },
3527
{ text: 'Get Started', link: '/v3.4/getting-started/quickstart' },
3628
{
3729
text: 'Community',
Lines changed: 61 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
11
<script setup>
2-
import { computed, ref } from 'vue'
3-
import { useRoute, useRouter } from 'vitepress'
2+
import { computed, ref, onMounted, onUnmounted } from 'vue'
3+
import { useRoute } from 'vitepress'
44
55
const route = useRoute()
6-
const router = useRouter()
76
87
const versions = [
9-
{ label: 'v3.4', prefix: '/v3.4/', badge: 'stable' },
10-
{ label: 'v3.5-alpha3', prefix: '/v3.5-alpha3/', badge: 'alpha' },
8+
{ label: 'v3.4', prefix: '/v3.4/', badge: 'stable', color: '#22c55e' },
9+
{ label: 'v3.5-alpha3', prefix: '/v3.5-alpha3/', badge: 'alpha', color: '#eab308' },
1110
]
1211
1312
const current = computed(() => {
@@ -16,106 +15,80 @@ const current = computed(() => {
1615
})
1716
1817
const isOpen = ref(false)
18+
const switcher = ref(null)
1919
2020
function switchTo(version) {
2121
isOpen.value = false
22+
if (typeof window === 'undefined') return
2223
const currentPath = route.path
23-
const currentVersion = versions.find(v => currentPath.startsWith(v.prefix))
24-
if (currentVersion && currentVersion.prefix !== version.prefix) {
25-
const relativePath = currentPath.replace(currentVersion.prefix, '')
26-
router.go(version.prefix + relativePath)
27-
} else if (!currentVersion) {
28-
router.go(version.prefix)
24+
const cur = versions.find(v => currentPath.startsWith(v.prefix))
25+
if (cur && cur.prefix !== version.prefix) {
26+
const relativePath = currentPath.replace(cur.prefix, '')
27+
window.location.href = version.prefix + relativePath
28+
} else {
29+
window.location.href = version.prefix
2930
}
3031
}
32+
33+
function handleClickOutside(e) {
34+
if (switcher.value && !switcher.value.contains(e.target)) {
35+
isOpen.value = false
36+
}
37+
}
38+
39+
onMounted(() => {
40+
document.addEventListener('click', handleClickOutside)
41+
})
42+
onUnmounted(() => {
43+
document.removeEventListener('click', handleClickOutside)
44+
})
3145
</script>
3246

3347
<template>
34-
<div class="version-switcher" @mouseleave="isOpen = false">
35-
<button class="version-btn" @click="isOpen = !isOpen" v-if="typeof current === 'object'">
36-
{{ current.label }}
37-
<span class="version-badge" :class="current.badge">{{ current.badge }}</span>
38-
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
39-
<polyline points="6 9 12 15 18 9"/>
40-
</svg>
41-
</button>
42-
<div v-show="isOpen" class="version-dropdown">
43-
<a
44-
v-for="v in versions"
45-
:key="v.label"
46-
:class="{ active: v.prefix === current.prefix }"
47-
@click.prevent="switchTo(v)"
48-
>
49-
{{ v.label }}
50-
<span class="version-badge" :class="v.badge">{{ v.badge }}</span>
51-
</a>
48+
<ClientOnly>
49+
<div ref="switcher" class="version-switcher">
50+
<button class="version-btn" @click.stop="isOpen = !isOpen">
51+
{{ current.label }}
52+
<span class="version-badge" :style="{ color: current.color, background: current.color + '22' }">{{ current.badge }}</span>
53+
<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="6 9 12 15 18 9"/></svg>
54+
</button>
55+
<div v-if="isOpen" class="version-dropdown">
56+
<a
57+
v-for="v in versions"
58+
:key="v.label"
59+
:class="{ active: v.prefix === current.prefix }"
60+
href="#"
61+
@click.prevent.stop="switchTo(v)"
62+
>
63+
{{ v.label }}
64+
<span class="version-badge" :style="{ color: v.color, background: v.color + '22' }">{{ v.badge }}</span>
65+
</a>
66+
</div>
5267
</div>
53-
</div>
68+
</ClientOnly>
5469
</template>
5570

5671
<style scoped>
57-
.version-switcher {
58-
position: relative;
59-
margin-right: 8px;
60-
}
72+
.version-switcher { position: relative; margin-right: 12px; }
6173
.version-btn {
62-
display: flex;
63-
align-items: center;
64-
gap: 6px;
65-
padding: 4px 10px;
66-
border: 1px solid var(--vp-c-divider);
67-
border-radius: 6px;
68-
background: transparent;
69-
color: var(--vp-c-text-1);
70-
font-size: 13px;
71-
cursor: pointer;
72-
font-family: inherit;
73-
}
74-
.version-btn:hover {
75-
border-color: var(--vp-c-brand-1);
76-
}
77-
.version-badge {
78-
font-size: 10px;
79-
padding: 1px 5px;
80-
border-radius: 4px;
81-
font-weight: 600;
82-
}
83-
.version-badge.stable {
84-
background: rgba(34, 197, 94, 0.15);
85-
color: #22c55e;
86-
}
87-
.version-badge.alpha {
88-
background: rgba(234, 179, 8, 0.15);
89-
color: #eab308;
74+
display: flex; align-items: center; gap: 5px;
75+
padding: 3px 10px; border: 1px solid var(--vp-c-divider); border-radius: 6px;
76+
background: transparent; color: var(--vp-c-text-1);
77+
font-size: 12px; cursor: pointer; font-family: inherit; white-space: nowrap;
9078
}
79+
.version-btn:hover { border-color: var(--vp-c-brand-1); }
80+
.version-badge { font-size: 9px; padding: 1px 5px; border-radius: 3px; font-weight: 600; }
9181
.version-dropdown {
92-
position: absolute;
93-
top: calc(100% + 4px);
94-
left: 0;
95-
min-width: 160px;
96-
background: var(--vp-c-bg-elv);
97-
border: 1px solid var(--vp-c-divider);
98-
border-radius: 8px;
99-
padding: 4px;
100-
z-index: 100;
101-
box-shadow: 0 4px 16px rgba(0,0,0,0.15);
82+
position: absolute; top: calc(100% + 6px); left: 0; min-width: 150px;
83+
background: var(--vp-c-bg-elv); border: 1px solid var(--vp-c-divider);
84+
border-radius: 8px; padding: 4px; z-index: 200;
85+
box-shadow: 0 8px 24px rgba(0,0,0,0.2);
10286
}
10387
.version-dropdown a {
104-
display: flex;
105-
align-items: center;
106-
gap: 6px;
107-
padding: 6px 10px;
108-
border-radius: 4px;
109-
font-size: 13px;
110-
color: var(--vp-c-text-1);
111-
cursor: pointer;
112-
text-decoration: none;
113-
}
114-
.version-dropdown a:hover {
115-
background: var(--vp-c-bg-soft);
116-
}
117-
.version-dropdown a.active {
118-
color: var(--vp-c-brand-1);
119-
font-weight: 600;
88+
display: flex; align-items: center; gap: 6px;
89+
padding: 8px 10px; border-radius: 4px;
90+
font-size: 13px; color: var(--vp-c-text-1); cursor: pointer; text-decoration: none;
12091
}
92+
.version-dropdown a:hover { background: var(--vp-c-bg-soft); }
93+
.version-dropdown a.active { color: var(--vp-c-brand-1); font-weight: 600; }
12194
</style>
Lines changed: 108 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,109 @@
11
<!DOCTYPE html>
2-
<html><head><meta charset="utf-8"><title>CKP Ontology v3.4</title>
3-
<style>body{font-family:system-ui;background:#1a1a2e;color:#e0e0e0;max-width:600px;margin:4rem auto;padding:0 2rem}
4-
a{color:#60a5fa}h1{color:#a78bfa}code{background:#111;padding:2px 6px;border-radius:3px;font-size:0.9rem}
5-
.file{display:block;padding:0.3rem 0}</style></head><body>
6-
<h1>CKP Ontology v3.4</h1>
7-
<p><code>@prefix ckp: &lt;https://conceptkernel.org/ontology/v3.4/&gt;</code></p>
8-
<h3>Turtle Files</h3>
9-
<a class="file" href="core.ttl">core.ttl</a>
10-
<a class="file" href="kernel-metadata.ttl">kernel-metadata.ttl</a>
11-
<a class="file" href="processes.ttl">processes.ttl</a>
12-
<a class="file" href="relations.ttl">relations.ttl</a>
13-
<a class="file" href="rbac.ttl">rbac.ttl</a>
14-
<a class="file" href="self-improvement.ttl">self-improvement.ttl</a>
15-
<a class="file" href="shapes.ttl">shapes.ttl</a>
16-
<a class="file" href="workflow.ttl">workflow.ttl</a>
17-
<a class="file" href="kernel-entity-template.ttl">kernel-entity-template.ttl</a>
18-
<h3>Schema</h3>
19-
<a class="file" href="schema.yaml">schema.yaml (LinkML)</a>
20-
<a class="file" href="index.json">index.json</a>
21-
<p style="margin-top:2rem;color:#888;font-size:0.8rem"><a href="/">← conceptkernel.org</a></p>
22-
</body></html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>CKP Ontology v3.4 — Concept Kernel Protocol</title>
7+
<style>
8+
body { font-family: 'Noto Sans', 'Helvetica Neue', Arial, sans-serif; margin: 0; padding: 0; background: #fff; color: #333; line-height: 1.6; }
9+
.header { background: #005a9c; color: #fff; padding: 0.8rem 2rem; display: flex; align-items: center; justify-content: space-between; }
10+
.header a { color: #fff; text-decoration: none; font-size: 0.95rem; }
11+
.header .title { font-weight: 600; }
12+
.container { max-width: 900px; margin: 0 auto; padding: 2rem; }
13+
.meta { background: #f8f9fa; border-left: 4px solid #005a9c; padding: 1rem 1.5rem; margin-bottom: 2rem; font-size: 0.88rem; }
14+
.meta dt { font-weight: 600; color: #005a9c; }
15+
.meta dd { margin: 0 0 0.4rem 0; }
16+
.meta a { color: #005a9c; }
17+
h1 { color: #005a9c; font-size: 1.6rem; margin-bottom: 0.5rem; }
18+
h2 { font-size: 1.15rem; color: #005a9c; border-bottom: 1px solid #ddd; padding-bottom: 0.3rem; margin-top: 2rem; }
19+
.status { display: inline-block; padding: 2px 10px; border-radius: 3px; font-size: 0.75rem; font-weight: 600; background: #e6f4ea; color: #137333; vertical-align: middle; margin-left: 0.5rem; }
20+
.prefix-box { background: #f0f4f8; border: 1px solid #d0dae4; padding: 0.7rem 1rem; border-radius: 4px; font-family: 'Consolas', monospace; font-size: 0.88rem; margin: 1rem 0; }
21+
table { border-collapse: collapse; width: 100%; margin: 0.8rem 0; }
22+
th { text-align: left; background: #f0f0f0; padding: 0.45rem 0.7rem; border: 1px solid #ddd; font-size: 0.8rem; color: #555; }
23+
td { padding: 0.45rem 0.7rem; border: 1px solid #ddd; font-size: 0.88rem; }
24+
td a { color: #005a9c; text-decoration: none; }
25+
td a:hover { text-decoration: underline; }
26+
code { background: #f4f4f4; padding: 0.1em 0.35em; border-radius: 2px; font-size: 0.82rem; font-family: 'Consolas', monospace; }
27+
.bfo { font-family: monospace; font-size: 0.82rem; color: #666; }
28+
.footer { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid #ddd; color: #999; font-size: 0.78rem; }
29+
.footer a { color: #005a9c; }
30+
p.abstract { font-size: 0.92rem; max-width: 720px; }
31+
</style>
32+
</head>
33+
<body>
34+
<div class="header">
35+
<span class="title"><a href="https://conceptkernel.org">Concept Kernel Protocol</a></span>
36+
<span><a href="https://conceptkernel.org/ontology/v3.5/">v3.5 (alpha)</a></span>
37+
</div>
38+
<div class="container">
39+
40+
<h1>CKP Ontology v3.4 <span class="status">Stable</span></h1>
41+
42+
<dl class="meta">
43+
<dt>This version</dt>
44+
<dd><a href="https://conceptkernel.org/ontology/v3.4/">https://conceptkernel.org/ontology/v3.4/</a></dd>
45+
<dt>Latest version</dt>
46+
<dd><a href="https://conceptkernel.org/ontology/v3.5/">https://conceptkernel.org/ontology/v3.5/</a> (alpha-3)</dd>
47+
<dt>Namespace URI</dt>
48+
<dd><code>https://conceptkernel.org/ontology/v3.4/</code></dd>
49+
<dt>Editors</dt>
50+
<dd>Peter Styk, ConceptKernel</dd>
51+
<dt>Source</dt>
52+
<dd><a href="https://github.com/ConceptKernel/conceptkernel.github.io">GitHub</a></dd>
53+
</dl>
54+
55+
<div class="prefix-box">@prefix ckp: &lt;https://conceptkernel.org/ontology/v3.4/&gt; .</div>
56+
57+
<h2>Abstract</h2>
58+
<p class="abstract">This document describes the namespace <code>https://conceptkernel.org/ontology/v3.4/</code> used by the Concept Kernel Protocol. The ontology provides BFO 2020-aligned class definitions for autonomous concept kernels — Material Entities with independently-governed identity, capability, and knowledge loops.</p>
59+
60+
<h2>Ontology Modules</h2>
61+
<table>
62+
<tr><th>Module</th><th>File</th><th>Description</th><th>BFO</th></tr>
63+
<tr><td>Core</td><td><a href="core.ttl">core.ttl</a></td><td>Kernel, Edge, Instance, HotKernel, ColdKernel</td><td class="bfo">0000040, 0000031</td></tr>
64+
<tr><td>Kernel Metadata</td><td><a href="kernel-metadata.ttl">kernel-metadata.ttl</a></td><td>Roles and Functions borne by kernels</td><td class="bfo">0000023, 0000034</td></tr>
65+
<tr><td>Processes</td><td><a href="processes.ttl">processes.ttl</a></td><td>Invocation, EdgeCommunication, Consensus, Broadcast</td><td class="bfo">0000015</td></tr>
66+
<tr><td>Relations</td><td><a href="relations.ttl">relations.ttl</a></td><td>Properties, property chains, SWRL rules</td><td></td></tr>
67+
<tr><td>RBAC</td><td><a href="rbac.ttl">rbac.ttl</a></td><td>Authorization for inter-kernel communication</td><td></td></tr>
68+
<tr><td>Workflow</td><td><a href="workflow.ttl">workflow.ttl</a></td><td>Workflow execution temporal patterns</td><td class="bfo">0000015</td></tr>
69+
<tr><td>Self-Improvement</td><td><a href="self-improvement.ttl">self-improvement.ttl</a></td><td>Validation issues and recommendations</td><td></td></tr>
70+
<tr><td>Shapes</td><td><a href="shapes.ttl">shapes.ttl</a></td><td>SHACL validation for protocol conformance</td><td></td></tr>
71+
</table>
72+
73+
<h2>Supporting Files</h2>
74+
<table>
75+
<tr><th>File</th><th>Format</th><th>Description</th></tr>
76+
<tr><td><a href="kernel-entity-template.ttl">kernel-entity-template.ttl</a></td><td>Turtle</td><td>Template for per-kernel ontology.ttl generation</td></tr>
77+
<tr><td><a href="schema.yaml">schema.yaml</a></td><td>LinkML</td><td>Governance definitions, kernel types, edge predicates</td></tr>
78+
<tr><td><a href="index.json">index.json</a></td><td>JSON</td><td>Machine-readable metadata with coverage scores</td></tr>
79+
</table>
80+
81+
<h2>BFO 2020 Alignment</h2>
82+
<table>
83+
<tr><th>BFO Class</th><th>URI</th><th>CKP Entities</th></tr>
84+
<tr><td>Material Entity</td><td class="bfo">bfo:0000040</td><td>Kernel, Edge</td></tr>
85+
<tr><td>Gen. Dependent Continuant</td><td class="bfo">bfo:0000031</td><td>Instance, KernelOntology</td></tr>
86+
<tr><td>Role</td><td class="bfo">bfo:0000023</td><td>Kernel roles</td></tr>
87+
<tr><td>Function</td><td class="bfo">bfo:0000034</td><td>Kernel functions</td></tr>
88+
<tr><td>Disposition</td><td class="bfo">bfo:0000016</td><td>Contracts (Queue, Storage, Notification)</td></tr>
89+
<tr><td>Process</td><td class="bfo">bfo:0000015</td><td>Invocation, Communication, Consensus</td></tr>
90+
</table>
91+
92+
<h2>Namespaces</h2>
93+
<table>
94+
<tr><th>Prefix</th><th>URI</th></tr>
95+
<tr><td><code>ckp:</code></td><td><code>https://conceptkernel.org/ontology/v3.4/</code></td></tr>
96+
<tr><td><code>ckpp:</code></td><td><code>https://conceptkernel.org/ontology/v3.4/process/</code></td></tr>
97+
<tr><td><code>ckpr:</code></td><td><code>https://conceptkernel.org/ontology/v3.4/relation/</code></td></tr>
98+
<tr><td><code>ckpw:</code></td><td><code>https://conceptkernel.org/ontology/v3.4/workflow/</code></td></tr>
99+
<tr><td><code>ckpi:</code></td><td><code>https://conceptkernel.org/ontology/v3.4/improvement/</code></td></tr>
100+
</table>
101+
102+
<div class="footer">
103+
<a href="https://conceptkernel.org">conceptkernel.org</a> · <a href="https://github.com/ConceptKernel">GitHub</a> · <a href="https://discord.gg/sTbfxV9xyU">Discord</a><br>
104+
Copyright 2024-present ConceptKernel Contributors. MIT License.
105+
</div>
106+
107+
</div>
108+
</body>
109+
</html>

0 commit comments

Comments
 (0)