+
+
+ `;
+ }
- panel.title = path.basename(uri.fsPath);
- panel.webview.html = getWebviewContent(context, panel.webview, uri, result);
panel.onDidDispose(() => {
delete openAsyncapiMdFiles[uri.fsPath];
@@ -83,175 +171,54 @@ async function promptForAsyncapiFile() {
return uris?.[0];
}
-function getWebviewContent(context: vscode.ExtensionContext, webview: vscode.Webview, asyncapiFile: vscode.Uri, result:any) {
+function getWebviewContent(context: vscode.ExtensionContext, webview: vscode.Webview, asyncapiFile: vscode.Uri, result: any, flowchart: any, classDiagram: any) {
const mermaidJs = webview.asWebviewUri(
vscode.Uri.joinPath(context.extensionUri, 'dist/node_modules/mermaid/dist/mermaid.min.js')
);
+ const panzoomJs = webview.asWebviewUri(
+ vscode.Uri.joinPath(context.extensionUri, 'dist/node_modules/panzoom/dist/panzoom.min.js')
+ );
+ const turndownJs = webview.asWebviewUri(
+ vscode.Uri.joinPath(context.extensionUri, 'dist/node_modules/turndown/dist/turndown.js')
+ );
+ const globalsCSS = webview.asWebviewUri(
+ vscode.Uri.joinPath(context.extensionUri, 'dist/globals.css')
+ );
const html = `
-
+
-
+
+
${err}
+${result}
- Section 2
- Section 3
+ ${flowchart}
+ ${classDiagram}
+
+
+ +
+ ↑
+ -
+ ←
+ →
+ ↓
+
+
Zoom : 1
+ Scroll : 0, 0
+ Zoom : 1
+ Scroll : 0, 0
+ Copied!
+
+
+
+
diff --git a/src/components/Asyncapi.ejs b/src/components/Asyncapi.ejs
index 983bdf1..f8849f3 100644
--- a/src/components/Asyncapi.ejs
+++ b/src/components/Asyncapi.ejs
@@ -1,3 +1,5 @@
-<%- include(path.infoPath,{...info,tagsPath: path.tagsPath}) %>
-<%- include(path.serversPath,{...servers, ...path}) %>
-<%- include(path.operationsPath,{...operations, ...path}) %>
\ No newline at end of file
+
+ <%- include(path.infoPath,{...info,tagsPath: path.tagsPath}) %>
+ <%- include(path.serversPath,{...servers, ...path}) %>
+ <%- include(path.operationsPath,{...operations, ...path}) %>
+
\ No newline at end of file
diff --git a/src/components/Diagnostics.ejs b/src/components/Diagnostics.ejs
new file mode 100644
index 0000000..4494827
--- /dev/null
+++ b/src/components/Diagnostics.ejs
@@ -0,0 +1,22 @@
+Error Loading Preview
+<% data.forEach(diagnostic => { %> +
+ <% if(diagnostic.severity == 0) { %>
+
+ <% } else if(diagnostic.severity == 1) { %>
+
+ <% }else if(diagnostic.severity == 2) { %>
+
+ <% }else if(diagnostic.severity == 3) { %>
+
+ <% } %>
+
+
+<% }) %>
\ No newline at end of file
diff --git a/src/components/Info.ejs b/src/components/Info.ejs
index a4d499c..7bcb6ed 100644
--- a/src/components/Info.ejs
+++ b/src/components/Info.ejs
@@ -1,43 +1,41 @@
-
+
+ ⚠️<%= diagnostic.message %>
+<%= diagnostic.path %>
+<%= diagnostic.code %>+
Source: <%= diagnostic.source %>
+Severity: <%= diagnostic.severity %>
+<%= title %> <%= version %> documentation
-<% if(extensions && extensions.has('x-logo')) { %> -<%= title %> <%= version %> documentation
+-
<% if (specId) { %>
- - Specification ID: <%= specId %> + Specification ID: <%= specId %> <% } %> <% if (license) { %> <% if (license.url()) { %>
- - License: <%= license.name() %> + License: <%= license.name() %> <% }else { %>
- - License: <%= license.name() %> + License: <%= license.name() %> <% } %> <% } %> <% if (termsOfService) { %>
- - Terms of service: <%= termsOfService %> + Terms of service: <%= termsOfService %> <% } %> <% if (defaultContentType) { %>
- - Default content type: <%= defaultContentType %> + Default content type: <%= defaultContentType %> <% } %> <% if (contact) { %> <% if (contact.url()) { %>
- - Support: <%= contact.name() || 'Link' %> + Support: <%= contact.name() || 'Link' %> <% } %> <% if (contact.email()) { %>
- - Email support: <%= contact.email() %> + Email support: <%= contact.email() %> <% } %> <% } %> diff --git a/src/components/Info.ts b/src/components/Info.ts deleted file mode 100644 index 87a6c72..0000000 --- a/src/components/Info.ts +++ /dev/null @@ -1,61 +0,0 @@ -import {AsyncAPIDocumentInterface } from '@asyncapi/parser'; - -export default function info(asyncapi:AsyncAPIDocumentInterface) { - - const info = asyncapi.info(); - const defaultContentType = asyncapi.defaultContentType(); - const specId = info.id(); - const termsOfService = info.termsOfService(); - const license = info.license(); - const contact = info.contact(); - const externalDocs = info.externalDocs(); - const extensions: any = info.extensions(); - - const infoList = []; - if (specId) { - infoList.push(`Specification ID: \`${specId}\``); - } - if (license) { - infoList.push(license.url() ? ( - `License: [${license.name()}](${license.url()})` - ) : `License: ${license.name()}`); - } - if (termsOfService) { - infoList.push( - `[${termsOfService}](${termsOfService})` - ); - } - if (defaultContentType) { - infoList.push( - `Default content type: [${defaultContentType}](https://www.iana.org/assignments/media-types/${defaultContentType})` - ); - } - if (contact) { - if (contact.url()) { - infoList.push( - `Support: [${contact.url()}](${contact.name() || 'Link'})` - ); - } - if (contact.email()) { - infoList.push( - `Email support: [${`mailto:${contact.email()}`}](${contact.email()})` - ); - } - } - - return ( - ` -# ${info.title()} ${info.version()} documentation - -${ - infoList.map((value)=>{ - return '\n* '+ value; - }) -} - -)?extensions.get('x-logo').value():null}) - - -#### ${info.description()} - `); -} \ No newline at end of file diff --git a/src/components/MermaidDiagram.ts b/src/components/MermaidDiagram.ts deleted file mode 100644 index 179d866..0000000 --- a/src/components/MermaidDiagram.ts +++ /dev/null @@ -1,7 +0,0 @@ -import {AsyncAPIDocumentInterface } from '@asyncapi/parser'; - -export default function mermaidDiagram(asyncapi:AsyncAPIDocumentInterface){ - - - return ``; -} \ No newline at end of file diff --git a/src/components/Message.ejs b/src/components/Message.ejs index 7986a83..02a40ba 100644 --- a/src/components/Message.ejs +++ b/src/components/Message.ejs @@ -2,62 +2,59 @@ const messageId = message.id(); const headers = message.headers(); const payload = message.payload(); + const traits = message.traits(); const correlationId = message.correlationId(); const contentType = message.contentType(); const externalDocs = message.externalDocs(); const showInfoList = contentType || externalDocs; let header = 'Message'; - if (message.title()) { - header += ` ${message.title()}`; - } const id = message.name() || messageId; - if (id) { - header += `
- Message ID: <%= messageId %> +
- Message ID: <%= messageId %> <% } %> <% if(contentType) { %>
- - Content type: <%- `${contentType}` %> + Content type: <%- `${contentType}` %> <% } %> - <% if(correlationId) { %> -
- - Correlation ID: <%= correlationId.location() %> + Correlation ID: <%= correlationId?.location() %> - <% if(correlationId.hasDescription()) { %> + <% if(correlationId?.hasDescription()) { %>
${id}`;
- } %>
+ if (message.title() || id) {
+ header += ` ${(message.title() || "")}`;
+ header += ` ${id}`; %>
+ <%- header %>
+ <% } %> -<%- header %>
<% if(message.summary()) { %> <%- md.render(`*${message.summary()}*`) %> <% } %> <% if(showInfoList) { %> -
+
+ -
<% if(messageId) { %>
-
-
+ <% if(correlationId?.location()) { %>
- <%- md.render(correlationId.description()) %> + <%- md.render(correlationId?.description()) %> <% } %> -
Headers
- <%- include(schemaPath,{schema:headers,schemaName:"", hideTitle:true, schemaHelper, md, path:""}) %> + <%- include(schemaPath,{schema:headers.schema? headers.schema : headers,schemaName:"", hideTitle:true, schemaHelper, md, path:""}) %> <% const ex = messageHelper.getHeadersExamples(message); if (ex) { %>Examples of headers@@ -76,11 +73,16 @@ <% } %> <% } %> - <% } %> + <% }else if(headers?.incorrect && Object.values(headers || []).length > 1) { %> +
+
+ <% } %>
- <% if(payload) { %>
+ <% if(payload && !payload.incorrect) { %>
Headers
+- <%= renderObject(headers, 0) %>
Payload
- <%- include(schemaPath,{schema:payload, schemaName:"", hideTitle:true, schemaHelper, md, path:""}) %> + <%- include(schemaPath,{schema:payload.schema? payload.schema : payload, schemaName:"", hideTitle:true, schemaHelper, md, path:""}) %> <% const examples = messageHelper.getPayloadExamples(message); if (examples) { %>Examples of payload@@ -92,7 +94,7 @@ <% }); %> <% } %> <% }else { - const payload = message.payload(); + const payload = message?.payload(); if (payload) { %>
Examples of payload _generated_
<%- md.render(messageHelper.generateExample(payload.json())) %>
@@ -100,10 +102,42 @@
<% } %>
- <% } %>
+ <% }else if(payload?.incorrect && Object.values(payload || []).length > 1) { %>
+
+
+ <% } %>
+
+ <% if(traits?.incorrect && Object.values(traits || []).length > 1) { %>
+ Payload
+- <%= renderObject(payload, 0) %>
+
+ <% } %>
<%- include(bindingsPath,{name:"Message specific information", bindings:message.bindings(), schemaHelper, schemaPath}) %>
<%- include(extensionsPath,{name:"Message extensions", extensions:message.extensions(), schemaHelper, schemaPath}) %>
<%- include(tagsPath,{name:"Message tags", tags:message.tags()}) %>
<% } %>
+<% function renderObject(obj, indent) { %>
+ <% for (let key in obj) { %>
+ <% if (key != 'incorrect') { %>
+ <% if (typeof obj[key] === 'object' && obj[key] !== null) { %>
+ Message Traits
+- <%= renderObject(traits, 0) %>
-
+ <%= renderObject(obj[key], indent + 20) %>
+
-
- <% if(operation.operationId()) { %>
-
- Operation ID: <%= operation.operationId() %> - <% if(servers && servers.length) { %> -
- Available Only on Server: - <%= servers.map(s => { - const serverId = s.id(); - const slug = FormatHelpers.slugify(serverId); - return `[${serverId}](#${slug}-server)`; - }).join(', ') %> - - <% } %> - <% } %> -
Parameters
- <%- include(schemaPath,{ schema: parameters, schemaName: "Parameters", hideTitle: true, schemaHelper, md, path:"" }) %> - <% } %> - - <%- include(securityPath,{ header:'Additional security requirements', protocol: null, security: operation.security(), serverHelper, md }) %> - - - <%- include(bindingsPath,{ name:"Channel specific information", bindings: channel.bindings(), schemaHelper, schemaPath, md }) %> - <%- include(bindingsPath,{ name:"Operation specific information", bindings: operation.bindings(), schemaHelper, schemaPath, md }) %> - <%- include(extensionsPath,{ name:"Channel extensions", extensions: channel.extensions(), schemaHelper, schemaPath, md }) %> - <%- include(extensionsPath,{ name:"Operation extensions", extensions: operation.extensions(), schemaHelper, schemaPath, md }) %> - - - <% const messages = operation.messages().all(); %> - <% if (messages.length !== 0) { %> - <% const messageText = getOperationMessageText({type}); %> - <% if(messages.length > 1) { %> -<%- md.render(messageText) %>
+
+ <%- md.render(`${getRenderedTypeForOperation({type})} \`${channel.address()}\` Operation`) %>
+ <% if(operation.summary()) { %>
+ <%- md.render(`*${operation.summary().trim()}*`) %>
+ <% } %>
+
+ -
+
- Operation ID: <%= operation.operationId() ?? 'Operation_ID_not_available' %> + <% if(servers && servers.length) { %> +
- Available Only on Server: + <%= servers.map(s => { + const serverId = s.id(); + const slug = FormatHelpers.slugify(serverId); + return `[${serverId}](#${slug}-server)`; + }).join(', ') %> + + <% } %> +
Parameters
+ <%- include(schemaPath,{ schema: parameters, schemaName: "Parameters", hideTitle: true, schemaHelper, md, path:"" }) %> + <% } %> + + <%- include(securityPath,{ header:'Additional security requirements', protocol: null, security: operation.security(), serverHelper, md }) %> + + + <%- include(bindingsPath,{ name:"Channel specific information", bindings: channel.bindings(), schemaHelper, schemaPath, md }) %> + <%- include(bindingsPath,{ name:"Operation specific information", bindings: operation.bindings(), schemaHelper, schemaPath, md }) %> + <%- include(extensionsPath,{ name:"Channel extensions", extensions: channel.extensions(), schemaHelper, schemaPath, md }) %> + <%- include(extensionsPath,{ name:"Operation extensions", extensions: operation.extensions(), schemaHelper, schemaPath, md }) %> + + + <% const messages = operation.messages().all(); %> + <% if (messages.length !== 0) { %> + <% const messageText = getOperationMessageText({type}); %> + <% if(messages.length > 1) { %> +<%- md.render(messageText) %>
+ <% } %> + <% for(let message of messages) { %> + <%- include(messagePath,{message, bindingsPath, extensionsPath, schemaHelper, schemaPath, md, messageHelper}) %> + <% } %> + <% } %> + + <% if(operation.traits().incorrect && Object.values(operation.traits() || []).length > 1) { %> +
+
<% } %>
-
+ Operation Traits
+- <%= renderObject(operation.traits(), 0) %>
<% } %> <% } %> <% } %> <% } %> - +<% function renderObject(obj, indent) { %> + <% for (let key in obj) { %> + <% if (key != 'incorrect') { %> + <% if (typeof obj[key] === 'object' && obj[key] !== null) { %> +
-
+ <%= renderObject(obj[key], indent + 20) %>
+
-
<% if(type) { %>
-
- Type: <%= type %> +
- Type: <%= type %> <% } %> <% if(schemas.length > 0) { %> <% for(let schema of schemas) { %> <% if(schema.split('_')[0] == 'OpenID') { %> -
- OpenID Connect URL: <%= schema.split('_')[2] %> +
- OpenID Connect URL: <%= schema.split('_')[2] %> <% }else if(schema.split('_')[0] == 'RequiredScopes'){ %> -
- Required Scopes: <%= schema.split('_')[1]? schema.split('_')[1]: 'Nil' %> +
- Required Scopes: <%= schema.split('_')[1]? schema.split('_')[1]: 'Nil' %>
- URL: <%= server.url() %> -
- Protocol: <%= server.protocol() %> <%= server.protocolVersion() ? server.protocolVersion() : '' %> +
- URL: <%= server.url() || `
` %>
+ - Protocol: <%= server.protocol() %> <%= server.protocolVersion() ? server.protocolVersion() : null %>
| Name | -Description | -Default value | -Allowed values | -
|---|
| <%= entry.id() %> | -<%= entry.description() %> | - <% if(entry.hasDefaultValue()){ %> -<%= entry.defaultValue() %> | - <% }else { %> -_None_ | - <% } %> - <% if(entry.hasAllowedValues()){ %> -<%= entry.allowedValues().map(value => value).join(', ') %> | - <% }else { %> -_Any_ | - <% } %> +Name | +Description | +Default value | +Allowed values |
|---|
+ %%{
+ init: {
+ 'theme': 'base',
+ "themeVariables": {
+ "primaryColor": "#fff",
+ "primaryBorderColor": "#646466",
+ "tertiaryColor": "#fff"
+ }
+ }
+ }%%
+
+ classDiagram
+
+ <% if(!channels.length && !operations.length && !payloads.length && !others.length && !relations.length) { %>
+ AsyncAPI
+ <% } %>
+
+ <% for( let channel of channels){ %>
+ class <%= replaceInvalidChars(`CHANNEL_${channel[0]}`) %>["<%= `${channel[0]}` %>"]{
+ <%= `<>` %>
+ <% for( let prop of Object.entries(channel[1])){
+ let parsedRef = String(prop[1]?.$ref).split('/');
+ %>
+ + <%= (Array.isArray(parsedRef))? (parsedRef[parsedRef.length-1]) : typeof prop[1] %> <%= prop[0] %>
+ <% } %>
+ }
+ <% } %>
+ <% for( let operation of operations){ %>
+ class <%= replaceInvalidChars(`OPERATION_${operation[0]}`) %>["<%= `${operation[0]}` %>"]{
+ <%= `<>` %>
+ <% for( let prop of Object.entries(operation[1])){
+ if(String(prop[0]).toLowerCase() === 'action') { %>
+ + <%= prop[0] %> <%= prop[1] %>
+ <% } } %>
+ }
+ <% } %>
+
+ <% for( let payload of payloads){ %>
+ class <%= replaceInvalidChars(payload[0]) %>["<%= payload[0] %>"]{
+ <%= `<>` %>
+ <% Object.getOwnPropertyNames(payload[1]).map(prop=>{ %>
+ + <%= payload[1][prop].type || typeof payload[1][prop] %> <%= prop %>
+ <% }) %>
+ }
+ <% } %>
+
+ <% for( let other of others){
+ let elements = other[0].split('.');
+ %>
+ class <%= replaceInvalidChars(other[0]) %>["<%= elements[elements.length-1] %>"]{
+ <%= `<>` %>
+ <% Object.getOwnPropertyNames(other[1]).map(prop=>{ %>
+ + <%= other[1][prop].type || typeof other[1][prop] %> <%= prop %>
+ <% }) %>
+ }
+ <% } %>
+ <% for( let relation of relations) { %>
+ <%= relation %>
+ <% } %>
+
+
+<% function replaceInvalidChars(str) { return str.replaceAll(/[`~!@#$%^&*()|+\-=?;:'",.<>\{\}\[\]\\\/]/gi,"_")} %>
\ No newline at end of file
diff --git a/src/components/flowchart.ejs b/src/components/flowchart.ejs
index e69de29..d574887 100644
--- a/src/components/flowchart.ejs
+++ b/src/components/flowchart.ejs
@@ -0,0 +1,39 @@
+<% let highlighter = []; %>
+
+ flowchart TD
+ <% if(servers?.length) { %>
+ subgraph "\nServers"
+ <% for( let server of servers){ %>
+ <%= server.replaceAll(/[\(\)\[\]\{\}]/g, "")%>(["<%= server %>"])
+ <% } %>
+ end
+ <% } %>
+ <% if(channels?.length) { %>
+ subgraph "\nChannels"
+ <% for( let channel of channels){ %>
+ <%= channel.replaceAll(/[\(\)\[\]\{\}]/g, "")%>(["<%= channel %>"])
+ <% } %>
+ end
+ <% } %>
+ <% if(operations?.length) { %>
+ subgraph "\nOperations"
+ <% for( let operation of operations){ %>
+ <%= operation.replaceAll(/[\(\)\[\]\{\}]/g, "")%>(["<%= operation %>"])
+ <% } %>
+ end
+ <% } %>
+ <% if(messages?.length) { %>
+ subgraph "\nMessages"
+ <% for( let message of messages){ %>
+ <%= message.replaceAll(/[\(\)\[\]\{\}]/g, "")%>(["<%= message %>"])
+ <% } %>
+ end
+ <% } %>
+ <% for( let relation of relations) { %>
+ <%= relation.replaceAll(/[\(\)\[\]\{\}]/g, "") %>
+ <% let [leftSideObject, rightSideObject] = relation.replaceAll(/[\(\)\[\]\{\}]/g, "").split(" --> "); %>
+
+ <% } %>
+
+
+
\ No newline at end of file
diff --git a/src/globals.css b/src/globals.css
new file mode 100644
index 0000000..61578e4
--- /dev/null
+++ b/src/globals.css
@@ -0,0 +1,493 @@
+html{
+ scroll-behavior: smooth;
+ scrollbar-color: unset;
+}
+body {
+ color: #121212;
+ background-color: #efefef;
+ word-wrap: break-word;
+ margin: 0;
+ padding: 0;
+ display: flex;
+ flex-direction: column;
+ height: 100vh;
+ user-select: text;
+}
+::-webkit-scrollbar {
+ width: 6px!important;
+ height: 6px!important;
+}
+h1 {
+ color: #121212;
+}
+.container {
+ display: flex;
+ overflow: hidden;
+}
+.section {
+ position: relative;
+ flex: 0 0 100%;
+ box-sizing: border-box;
+ padding: 20px;
+ aspect-ratio: 1;
+ overflow: auto;
+ height:calc(100vh - 60px);;
+}
+.button-container {
+ display: flex;
+ justify-content: center;
+ margin: 10px;
+ position: fixed;
+ bottom: 0px;
+ width: calc(100% - 25px);
+}
+.button {
+ padding: 10px 20px;
+ margin: 0px 10px;
+ border-radius: .5rem;
+ color: #444;
+ font-size: 1rem;
+ font-weight: 700;
+ letter-spacing: .1rem;
+ cursor: pointer;
+ flex:1;
+ border: none;
+ outline: none;
+ transition: .2s ease-in-out;
+ box-shadow: -6px -6px 14px rgba(255, 255, 255, .7),
+ -6px -6px 10px rgba(255, 255, 255, .5),
+ 6px 6px 8px rgba(255, 255, 255, .075),
+ 6px 6px 10px rgba(0, 0, 0, .15);
+}
+button:hover {
+ box-shadow: -2px -2px 6px rgba(255, 255, 255, .6),
+ -2px -2px 4px rgba(255, 255, 255, .4),
+ 2px 2px 2px rgba(255, 255, 255, .05),
+ 2px 2px 4px rgba(0, 0, 0, .1);
+}
+button:active {
+ box-shadow: inset -2px -2px 6px rgba(255, 255, 255, .7),
+ inset -2px -2px 4px rgba(255, 255, 255, .5),
+ inset 2px 2px 2px rgba(255, 255, 255, .075),
+ inset 2px 2px 4px rgba(0, 0, 0, .15);
+}
+.table-container{
+ overflow-x:auto;
+}
+table {
+ width: 100%;
+ border-collapse: collapse;
+ margin-top: 20px;
+}
+th, td {
+ padding: 12px;
+ text-align: left;
+ border-bottom: 1px solid #ddd;
+}
+th {
+ background-color: black;
+ color: white;
+}
+tr:nth-child(even) {
+ background-color: #fefefe;
+}
+code {
+ display: block;
+ padding: 10px;
+ background-color: #282c34;
+ color: #abb2bf;
+ border-radius: 5px;
+ margin-bottom: 20px;
+ margin-top: 20px;
+ white-space: pre-wrap;
+}
+blockquote {
+ border-left: 4px solid #61dafb;
+ margin: 0;
+ margin-top: 20px;
+ padding: 10px 20px;
+ background-color: #fff;
+ color: #333;
+}
+a {
+ text-decoration: none;
+ color: #3498db;
+ font-weight: bold;
+ transition: color 0.3s ease-in-out;
+}
+a:hover {
+ color: #1abc9c;
+}
+
+@media screen and (max-width: 600px) {
+ table {
+ display: block;
+ }
+
+ thead, tbody, th, td, tr {
+ display: block;
+ }
+ td {
+ background-color: #efefef;
+ }
+ th {
+ position: absolute;
+ top: -9999px;
+ left: -9999px;
+ }
+
+ td {
+ border: none;
+ position: relative;
+ padding-left: 50%;
+ white-space: nowrap;
+ }
+
+ td:before {
+ position: absolute;
+ top: 12px;
+ left: 6px;
+ width: 45%;
+ padding-right: 10px;
+ white-space: nowrap;
+ content: attr(data-th) ": ";
+ font-weight: bold;
+ }
+ code {
+ font-size: 14px;
+ }
+
+ blockquote {
+ font-size: 16px;
+ }
+}
+
+.diagnostic {
+ position: relative;
+ display: flex;
+ border: 1px solid #ccc;
+ border-radius: 10px;
+ padding: 20px;
+ margin-bottom: 20px;
+ background-color: #fff;
+ box-shadow: 5px 5px 15px #bcbcbc, -5px -5px 15px #ffffff;
+ transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+ overflow: hidden;
+}
+
+.diagnostic:hover {
+ transform: translate(2px, 2px);
+ box-shadow: 7px 7px 20px #bcbcbc, -7px -7px 20px #ffffff;
+}
+
+.left-bar {
+ width: 7px;
+ border-radius: 10px 0 0 10px;
+ display: inline-block;
+ vertical-align: top;
+ margin-right: 20px;
+}
+
+.high {
+ background-color: #e74c3c;
+}
+.medium {
+ background-color: #d9720b;
+}
+.low {
+ background-color: #ebe80a;
+}
+.hint{
+ background-color: #119adf;
+}
+
+.content-box {
+ flex-grow: 1;
+}
+
+.message {
+ font-size: 18px;
+ font-weight: bold;
+ margin-bottom: 10px;
+}
+
+.secondary-text {
+ color: #666;
+ font-size: 14px;
+ margin-bottom: 10px;
+}
+
+.icon {
+ font-size: 24px;
+ color: #e74c3c;
+ margin-right: 10px;
+ vertical-align: middle;
+}
+
+.code {
+ font-family: monospace;
+ white-space: pre-wrap;
+ background-color: #f9f9f9;
+ padding: 10px;
+ border-radius: 5px;
+ margin-top: 10px;
+}
+
+.source {
+ font-style: italic;
+ color: #999;
+ margin-top: 10px;
+}
+
+.close-btn {
+ position: absolute;
+ top: 10px;
+ right: 10px;
+ background: none;
+ border: none;
+ font-size: 16px;
+ cursor: pointer;
+}
+
+.nested-object {
+ margin-left: 20px;
+}
+.key {
+ font-weight: bold;
+}
+.value {
+ color: blue;
+}
+
+#section2, #section3{
+ display:flex;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+}
+.mermaid{
+ width: inherit;
+}
+
+#control-panel {
+ position: absolute;
+ right: 30px;
+ bottom: 80px;
+ width: 120px;
+ height: 120px;
+ display: none;
+ justify-content: center;
+ align-items: center;
+ background-color: rgba(0, 0, 0, 0.7);
+ border-radius: 50%;
+ padding: 10px;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+ user-select: none;
+}
+
+.control-button {
+ width: 40px;
+ height: 40px;
+ background-color: #cbcaca;
+ border-radius: 50%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-size: 25px;
+ font-weight: bold;
+ color: #333;
+ position: absolute;
+ cursor: pointer;
+ transition: background-color 0.3s;
+ box-sizing: border-box;
+ padding-bottom: 2px;
+}
+
+.control-button:hover {
+ background-color: #f7f7f7;
+}
+
+#zoom-in { top: 50px; left: 50%; transform: translate(-50%, -50%); }
+#zoom-out { top: 50px; left: 50%; transform: translate(-50%, -50%); }
+#pan-up { top: 90px; left: 50%; transform: translate(-50%, -100px); }
+#pan-down { top: 70px; left: 50%; transform: translate(-50%, 40px); }
+#pan-left { top: 70px; left: -10px; transform: translateY(-50%); }
+#pan-right { top: 70px; right: -10px; transform: translateY(-50%); }
+
+#zoom-info {
+ position: absolute;
+ display: none;
+ left: 30px;
+ bottom: 80px;
+ background-color: rgba(0, 0, 0, 0.7);
+ color: #fff;
+ padding: 10px;
+ border-radius: 5px;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+ flex-direction: column;
+}
+
+#zoom-in {
+ width: 80px;
+ height: 40px;
+ border-top-left-radius: 80px;
+ border-top-right-radius: 80px;
+ border-bottom-left-radius: 0;
+ border-bottom-right-radius: 0;
+ left: 50%;
+ transform: translate(-50%, -50%);
+}
+
+#zoom-out {
+ width: 80px;
+ height: 40px;
+ border-bottom-left-radius: 80px;
+ border-bottom-right-radius: 80px;
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+ left: 50%;
+ transform: translate(-50%, 50%);
+}
+
+#cy {
+ display: none;
+}
+
+#copy-button {
+ position: absolute;
+ top: 10px;
+ right: 10px;
+ padding: 2px 5px 4px 5px;
+ background-color: #000;
+ color: white;
+ border: none;
+ border-radius: 5px;
+ cursor: pointer;
+}
+
+#copy-button:hover {
+ background-color: #0056b3;
+}
+
+#copied-indicator {
+ position: absolute;
+ top: -50px;
+ right: calc(50vw - 25px);
+ padding: 5px 10px;
+ background-color: #28a745;
+ color: white;
+ border-radius: 1px;
+ transition: opacity 0.3s ease-in;
+}
+
+.highlight-node {
+ fill: #96dafb !important;
+ stroke: #0056b3 !important;
+}
+
+.highlight-edge {
+ stroke-width: 5px !important;
+}
+
+#index {
+ width: 0px;
+ padding: 0px;
+ background-color: #bbbbbb;
+ position: fixed;
+ height: 100%;
+ overflow-y: auto;
+ transition: width 0.4s, padding 0.4s;
+ z-index: 1;
+ white-space: nowrap;
+}
+
+.index-part {
+ width: 40vw;
+ overflow: hidden;
+}
+
+.index-part-title{
+ cursor: pointer;
+ font-weight: bold;
+ margin-bottom: 10px;
+ display: flex;
+ align-items: center;
+}
+
+#index ul {
+list-style-type: none;
+padding-left: 15px;
+}
+#index li {
+ white-space: nowrap;
+ padding-bottom: 5px;
+ width: 100%;
+ text-overflow: ellipsis;
+}
+
+
+.arrow {
+ display: inline-block;
+ margin-right: 10px;
+ transition: transform 0.3s ease;
+ font-family: cursive;
+ text-decoration: none;
+}
+
+.index-part-content{
+ display: none;
+ padding-left: 20px;
+}
+
+h4, h5 {
+ margin-top: 20px;
+ margin-bottom: 10px;
+}
+
+#index a{
+ text-decoration: none;
+ color: #333;
+ padding-right: 5px;
+}
+
+#index a:active {
+ border: 0px;
+ outline: 0px;
+}
+
+#index a:hover {
+ text-decoration: underline;
+}
+
+.expand-contract-btn {
+display: flex;
+flex-direction: row;
+justify-content: center;
+border: 0.5px solid #c9c8c8;
+border-radius: 100%;
+position: absolute;
+top: 50%;
+left: -35px;
+z-index: 2;
+width: 60px;
+height: 60px;
+background: #ddd;
+transition: left 0.4s;
+}
+
+.contract-btn, .expand-btn {
+ position: relative;
+ top: 50%;
+ transform: translateY(-30px);
+ font-size: 40px;
+ font-weight: bolder;
+ font-family: cursive;
+ cursor: pointer;
+}
+
+.contract-btn {
+ border-right: 0.1px solid #8d8c8c;
+}
+.expand-btn {
+ border-left: 0.1px solid #8d8c8c;
+}
diff --git a/webpack.config.js b/webpack.config.js
index efee6b9..b3c5ea2 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -64,9 +64,20 @@ const extensionConfig = {
from: 'node_modules/mermaid/dist/mermaid.min.js',
to: 'node_modules/mermaid/dist/mermaid.min.js',
},
+ {
+ from: 'node_modules/panzoom/dist/panzoom.min.js',
+ to: 'node_modules/panzoom/dist/panzoom.min.js',
+ },{
+ from: 'node_modules/turndown/dist/turndown.js',
+ to: 'node_modules/turndown/dist/turndown.js',
+ },
{
from: 'src/components',
to: 'components'
+ },
+ {
+ from: 'src/globals.css',
+ to: 'globals.css'
}
],