Skip to content

Commit 7871c43

Browse files
jjlong150jjlong150
committed
KGC-inspired website tune-up
1 parent 4261756 commit 7871c43

22 files changed

Lines changed: 793 additions & 157 deletions

File tree

‎docs/.vitepress/config.mts‎

Lines changed: 22 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -64,16 +64,15 @@ export default defineConfig({
6464

6565
sidebar: [
6666
{
67-
text: 'Getting Started',
68-
items: [
69-
{ text: 'Overview', link: '/overview/' },
70-
{ text: 'Workbook', link: '/workbook/' },
71-
{ text: 'Launchpad', link: '/launchpad/' },
72-
]
73-
},
74-
{
75-
text: 'Graphs',
67+
text: 'Foundations',
68+
link: '/overview/',
7669
items: [
70+
{
71+
items: [
72+
{ text: 'Workbook', link: '/workbook/' },
73+
{ text: 'Launchpad', link: '/launchpad/' },
74+
]
75+
},
7776
{
7877
text: 'Creating Graphs',
7978
link: '/create/',
@@ -86,7 +85,7 @@ export default defineConfig({
8685
]
8786
},
8887
{
89-
text: 'Styling and Views',
88+
text: 'Adding Style',
9089
link: '/addstyle/',
9190
items: [
9291
{ text: 'Style Designer', link: '/designer/' },
@@ -115,28 +114,28 @@ export default defineConfig({
115114
link: '/sql/extensions/',
116115
items: [
117116
{ text: 'Directives', link: '/sql/directives/' },
118-
{ text: 'Clustering', link: '/sql/clustering/' },
119-
{ text: 'Count Substitution', link: '/sql/counts/' },
120-
{ text: 'Label Splitting', link: '/sql/labelsplit/' },
121-
{ text: 'Chaining Nodes', link: '/sql/chaining/' },
122-
{ text: 'Creating Subgraphs', link: '/sql/subgraphs/' },
123-
{ text: 'Tree Traversal', link: '/sql/recursion/'},
124-
{ text: 'Iteration', link: '/sql/iterate/' },
125-
{ text: 'Enumeration', link: '/sql/enumerate/' } ,
126-
{ text: 'Concatenation', link: '/sql/concatenation/' }
117+
{ text: 'Cluster Nodes', link: '/sql/clustering/' },
118+
{ text: 'Substitute Counts', link: '/sql/counts/' },
119+
{ text: 'Split Long Labels', link: '/sql/labelsplit/' },
120+
{ text: 'Chain Nodes', link: '/sql/chaining/' },
121+
{ text: 'Align Nodes', link: '/sql/subgraphs/' },
122+
{ text: 'Traverse Trees', link: '/sql/recursion/'},
123+
{ text: 'Iterate SQL Results', link: '/sql/iterate/' },
124+
{ text: 'Enumerate Values', link: '/sql/enumerate/' } ,
125+
{ text: 'Concatenate Values', link: '/sql/concatenation/' }
127126
]
128127
},
129-
{ text: 'Examples',
128+
{ text: 'Advanced SQL Examples',
130129
items: [
131130
{ text: 'Organization Charts', link: '/sql/orgcharts/' },
132131
{ text: 'Timelines and Roadmaps', link: '/sql/timeline/' }
133132
]
134133
},
135-
{ text: 'SQL Syntax', link: '/sql/syntax/' },
134+
{ text: 'SQL Syntax Reference', link: '/sql/syntax/' },
136135
]
137136
},
138137
{
139-
text: 'Data Exchange',
138+
text: 'Exchange Data',
140139
items: [
141140
{ text: 'Using JSON Files', link: '/exchange/',
142141
items: [
@@ -182,7 +181,7 @@ export default defineConfig({
182181

183182
editLink: {
184183
pattern: 'https://buymeacoffee.com/exceltographviz',
185-
text: 'Like this tool? Show your support!'
184+
text: 'Find this tool helpful? Consider supporting its development.'
186185
},
187186

188187
socialLinks: [

‎docs/.vitepress/theme/components/HomeExtra.vue‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<template>
2+
<div class="home-extra-content">
3+
<div v-html="html"></div>
4+
</div>
5+
</template>
6+
7+
<script setup>
8+
const html = `
9+
<h2>Turn Spreadsheets into Beautiful Graphviz Diagrams</h2>
10+
<p>The <strong>Relationship Visualizer</strong> spreadsheet transforms your Excel tables into clear, professional <strong>Graphviz diagrams</strong> in seconds. Say goodbye to manual drawing tools — simply enter your data as rows (e.g., "A is related to B"), and watch graphs appear automatically.</p>
11+
12+
<h3>Why Users Love It</h3>
13+
<p>Whether you're mapping data flows, organization charts, process workflows, timelines, or dependency diagrams, the Relationship Visualizer turns complex relationships into clear, expressive diagrams.</p>
14+
15+
<table class="features-table">
16+
<tr><td><strong>Draws as you type</strong></td><td>Live Graphviz rendering as data changes</td></tr>
17+
<tr><td><strong>Powerful styling</strong></td><td>Colors, shapes, fonts, arrows, and reusable CSS-like styles</td></tr>
18+
<tr><td><strong>Advanced features</strong></td><td>SQL queries, SVG animation, DOT preview, and JSON exchange</td></tr>
19+
20+
<tr><td><strong>Cross-platform</strong></td><td>Works on Windows and macOS</td></tr>
21+
<tr><td><strong>Sleek UI</strong></td><td>Custom Excel ribbon tabs across all worksheets</td></tr>
22+
<tr><td><strong>Multilingual</strong></td><td>English · French · German · Italian · Polish</td></tr>
23+
24+
<tr><td><strong>Absolutely Free</strong></td><td>Free to use · No license required · Donations appreciated</td></tr>
25+
<tr><td><strong>Open Source</strong></td><td>MIT License</td></tr>
26+
<tr><td><strong>Rich Code Documentation</strong></td><td><a href="https://deepwiki.com/jjlong150/ExcelToGraphviz" target="_blank" rel="noopener">AI-powered DeepWiki</a></td></tr>
27+
<tr><td><strong>Award Winning</strong></td><td>SourceForge Community Choice Award</td></tr>
28+
29+
<tr><td><strong>Show Your Support</strong></td><td><a href="https://www.buymeacoffee.com/exceltographviz" target="_blank" rel="noopener">Buy Me a Coffee</a></td></tr>
30+
</table>
31+
32+
<center>
33+
<img src="sourceforge-community-choice.png" alt="SourceForge Community Choice Award" width="90" style="margin-top: 8px;">
34+
</center>
35+
`
36+
</script>
37+
38+
<style scoped>
39+
/* Your existing styles still apply */
40+
</style>

‎docs/.vitepress/theme/components/YouTube.vue‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<template>
2+
<div class="vp-youtube">
3+
<iframe
4+
:src="computedSrc"
5+
title="YouTube video player"
6+
frameborder="0"
7+
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
8+
allowfullscreen
9+
></iframe>
10+
</div>
11+
</template>
12+
13+
<script setup>
14+
import { computed } from 'vue'
15+
16+
const props = defineProps({
17+
id: { type: String, required: true },
18+
start: { type: [String, Number], default: null },
19+
end: { type: [String, Number], default: null }
20+
})
21+
22+
const computedSrc = computed(() => {
23+
const base = `https://www.youtube.com/embed/${props.id}`
24+
const params = new URLSearchParams()
25+
26+
if (props.start) params.set('start', props.start)
27+
if (props.end) params.set('end', props.end)
28+
29+
const query = params.toString()
30+
return query ? `${base}?${query}` : base
31+
})
32+
</script>
33+
34+
<style scoped>
35+
.vp-youtube {
36+
position: relative;
37+
width: 100%;
38+
padding-bottom: 56.25%; /* 16:9 */
39+
height: 0;
40+
overflow: hidden;
41+
border-radius: 8px;
42+
}
43+
44+
.vp-youtube iframe {
45+
position: absolute;
46+
top: 0;
47+
left: 0;
48+
width: 100%;
49+
height: 100%;
50+
}
51+
</style>

‎docs/.vitepress/theme/env.d.ts‎

Lines changed: 0 additions & 14 deletions
This file was deleted.

‎docs/.vitepress/theme/index.ts‎

Lines changed: 5 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ import { withBlogTheme } from 'vitepress-plugin-blog'
55
import { h } from 'vue'
66

77
import Comments from './components/Comments.vue'
8+
import HomeExtra from './components/HomeExtra.vue'
9+
import YouTube from './components/YouTube.vue'
810

911
// Import the blog plugin styles
1012
import 'vitepress-plugin-blog/style.css'
@@ -20,32 +22,7 @@ export default {
2022
Layout() {
2123
return h(blogTheme.Layout!, null, {
2224
// Only inject extra content on the home page (after the 6 features)
23-
'home-features-after': () => h('div', { class: 'home-extra-content' }, [
24-
h('div', {
25-
innerHTML: `
26-
<h2>Turn Spreadsheets into Beautiful Graphviz Diagrams</h2>
27-
<p>The <strong>Relationship Visualizer</strong> spreadsheet transforms your Excel tables into clear, professional <strong>Graphviz diagrams</strong> in seconds. Say goodbye to manual drawing tools — simply enter your data as rows (e.g., "A is related to B"), and watch graphs appear automatically.</p>
28-
<h3>Why Users Love It</h3>
29-
<p>Whether you're mapping data flows, org charts, timelines, ERDs, or circuits, this tool makes complex relationships instantly understandable.</p>
30-
<table class="features-table">
31-
<tr><td><strong>Draws as you type</strong></td><td>Live Graphviz rendering as data changes</td></tr>
32-
<tr><td><strong>Powerful styling</strong></td><td>Colors, shapes, fonts, arrows, reusable styles</td></tr>
33-
<tr><td><strong>Advanced features</strong></td><td>SQL queries, SVG animation, DOT preview, JSON exchange</td></tr>
34-
<tr><td><strong>Cross-platform</strong></td><td>Works on Windows and macOS</td></tr>
35-
<tr><td><strong>Sleek UI</strong></td><td>Custom Excel ribbon tabs across all worksheets</td></tr>
36-
<tr><td><strong>Multilingual</strong></td><td>English · French · German · Italian · Polish</td></tr>
37-
<tr><td><strong>Absolutely Free</strong></td><td>Free to use · No license required · Donations appreciated</td></tr>
38-
<tr><td><strong>Open Source</strong></td><td>MIT License</td></tr>
39-
<tr><td><strong>Rich Code Documentaion</strong></td><td><a href="https://deepwiki.com/jjlong150/ExcelToGraphviz" target="_blank" rel="noopener">AI-powered DeepWiki </a></td></tr>
40-
<tr><td><strong>Show Your Support</strong></td><td><a href="https://www.buymeacoffee.com/exceltographviz" target="_blank" rel="noopener">Buy Me a Coffee!</a></td></tr>
41-
<tr><td><strong>Award Winning</strong><br></td><td>SourceForge Community Choice Award</td></tr>
42-
</table>
43-
<center>
44-
<img src="/sourceforge-community-choice.png" alt="SourceForge Community Choice Award" width="90" style="margin-top: 8px;">
45-
</center>
46-
`
47-
})
48-
])
25+
'home-features-after': () => h(HomeExtra)
4926
})
5027
},
5128

@@ -55,5 +32,7 @@ export default {
5532

5633
// Register your custom component
5734
ctx.app.component('Comments', Comments)
35+
ctx.app.component('HomeExtra', HomeExtra)
36+
ctx.app.component('YouTube', YouTube)
5837
}
5938
} satisfies Theme

‎docs/.vitepress/theme/shims.d.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
/* docs/.vitepress/theme/shims.d.ts */
2+
3+
/// <reference types="vite/client" />
4+
5+
declare module '*.vue' {
6+
import { DefineComponent } from 'vue'
7+
const component: DefineComponent<{}, {}, any>
8+
export default component
9+
}
10+
11+
declare module '*.css'

‎docs/.vitepress/theme/style.css‎

Lines changed: 48 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,4 +64,51 @@
6464

6565
.home-extra-content .features-table td:last-child {
6666
color: var(--vp-c-text-2);
67-
}
67+
}
68+
69+
/* Advanced topic cards grid */
70+
.advanced-grid {
71+
display: grid;
72+
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
73+
gap: 1rem;
74+
margin-top: 1rem;
75+
}
76+
77+
/* Card styling (merged + icon-ready + grid-safe) */
78+
.advanced-card {
79+
display: flex;
80+
align-items: center;
81+
gap: 0.6rem;
82+
padding: 1rem 1.2rem;
83+
border-radius: 8px;
84+
background: var(--vp-c-bg-soft);
85+
border: 1px solid var(--vp-c-divider);
86+
text-decoration: none;
87+
color: var(--vp-c-text-1);
88+
font-weight: 500;
89+
transition: background 0.15s ease, border-color 0.15s ease;
90+
91+
/* CRITICAL FIXES */
92+
width: 100%;
93+
box-sizing: border-box;
94+
min-width: 0; /* allows flex content to shrink inside grid cell */
95+
}
96+
97+
/* Hover state */
98+
.advanced-card:hover {
99+
background: var(--vp-c-bg-alt);
100+
border-color: var(--vp-c-brand-1);
101+
}
102+
103+
/* Icon wrapper */
104+
.advanced-card .icon {
105+
display: flex;
106+
align-items: center;
107+
}
108+
109+
/* SVG icon sizing */
110+
.advanced-card .icon svg {
111+
width: 20px;
112+
height: 20px;
113+
stroke-width: 1.5;
114+
}

‎docs/addstyle/index.md‎

Lines changed: 46 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,50 @@
1-
# Add Style to Your Graphs
1+
# Adding Style
22

3-
Styling is what transforms a raw graph into a clear, expressive visualization, helping your graph tell a more compelling story. This section introduces the tools and techniques for applying styles to nodes, edges, and clusters.
3+
Styling is where your graphs come alive. Colors, shapes, and layout choices turn raw data into a visual story your audience can understand at a glance. This section introduces the tools that make that possible.
44

5-
Use the links below to explore each styling capability in depth.
5+
Use the cards below to explore each styling capability in depth.
66

7-
| [Style Designer](../designer/) | [Style Gallery](../styles/) | [Create Views](../views/) |
8-
|----------------|-------------- | ------------ |
9-
| ![](./styledesigner.png) | ![](./stylegallery.png) | ![](./createviews.png) |
10-
| Define reusable styles for graph elements. Control color, shape, font, and layout attributes with precision. | Save and organize your custom styles in a gallery for easy reuse across graphs and workbooks. | Apply styles selectively to create focused views highlighting specific data or relationships. |
7+
<div class="advanced-grid">
8+
<a class="advanced-card" href="../designer/">
9+
<strong>Style Designer</strong><br><br>
10+
<img src="./styledesigner.png" alt="Style Designer"
11+
style="width:50%; border-radius:6px; margin:0.8rem 0; border:1px solid rgba(0,0,0,0.08);">
12+
<small><i>Define reusable styles for nodes, edges, and clusters.</i></small>
13+
</a>
14+
</div>
1115

16+
<div class="advanced-grid">
17+
<a class="advanced-card" href="../styles/">
18+
<strong>Style Gallery</strong><br><br>
19+
<img src="./stylegallery.png" alt="Style Gallery"
20+
style="width:50%; border-radius:6px; margin:0.8rem 0; border:1px solid rgba(0,0,0,0.08);">
21+
<small><i>Save and organize your custom styles for reuse.</i></small>
22+
</a>
23+
</div>
24+
25+
<div class="advanced-grid">
26+
<a class="advanced-card" href="../views/">
27+
<strong>Create Views</strong><br><br>
28+
<img src="./createviews.png" alt="Create Views"
29+
style="width:50%; border-radius:6px; margin:0.8rem 0; border:1px solid rgba(0,0,0,0.08);">
30+
<small><i>Apply styles selectively to highlight specific data.</i></small>
31+
</a>
32+
</div>
33+
34+
<style>
35+
.advanced-card,
36+
.advanced-card:visited,
37+
.advanced-card:hover,
38+
.advanced-card:active {
39+
text-decoration: none !important;
40+
}
41+
42+
.advanced-card {
43+
transition: transform 0.15s ease, box-shadow 0.15s ease;
44+
}
45+
46+
.advanced-card:hover {
47+
transform: translateY(-3px);
48+
box-shadow: 0 4px 12px rgba(0,0,0,0.12);
49+
}
50+
</style>

0 commit comments

Comments
 (0)