Skip to content

Commit 5dd0342

Browse files
jjlong150jjlong150
committed
Fix homepage text not displaying
1 parent 484aebf commit 5dd0342

4 files changed

Lines changed: 124 additions & 30 deletions

File tree

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

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
// .vitepress/theme/env.d.ts
2+
/// <reference types="vite/client" />
3+
4+
// Allow side-effect CSS imports (no default export)
5+
declare module '*.css' {
6+
const content: string
7+
export default content
8+
}
9+
10+
// Specifically for the blog plugin (in case the generic one doesn't catch it)
11+
declare module 'vitepress-plugin-blog/style.css' {
12+
const content: string
13+
export default content
14+
}

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

Lines changed: 43 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,58 @@
22
import type { Theme } from 'vitepress'
33
import DefaultTheme from 'vitepress/theme'
44
import { withBlogTheme } from 'vitepress-plugin-blog'
5+
import { h } from 'vue'
6+
57
import Comments from './components/Comments.vue'
8+
9+
// Import the blog plugin styles
610
import 'vitepress-plugin-blog/style.css'
711

12+
// Import our own styles (make sure this is after the blog styles so it can override them if needed)
13+
import './style.css'
14+
815
const blogTheme = withBlogTheme(DefaultTheme)
916

1017
export default {
11-
...blogTheme,
18+
extends: blogTheme, // Use 'extends' – this is the most compatible way with the blog plugin
19+
20+
Layout() {
21+
return h(blogTheme.Layout!, null, {
22+
// 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>Buy Me a Coffee</strong></td><td><a href="https://www.buymeacoffee.com/exceltographviz" target="_blank" rel="noopener">Show your support!</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+
])
49+
})
50+
},
51+
1252
enhanceApp(ctx) {
13-
// Call the blog theme's enhanceApp first
53+
// Let the blog theme do its thing first
1454
blogTheme.enhanceApp?.(ctx)
1555

16-
// Then register our Comments component
56+
// Register your custom component
1757
ctx.app.component('Comments', Comments)
1858
}
1959
} satisfies Theme

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

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
.home-extra-content {
2+
max-width: 768px;
3+
margin: 3.5rem auto 0;
4+
padding: 0 1.5rem;
5+
}
6+
7+
/* Headings */
8+
.home-extra-content h2 {
9+
font-size: 1.75rem;
10+
line-height: 1.3;
11+
font-weight: 700;
12+
margin: 2.5rem 0 1.25rem;
13+
color: var(--vp-c-text-1);
14+
word-break: break-word;
15+
}
16+
17+
.home-extra-content h3 {
18+
font-size: 1.4rem;
19+
line-height: 1.35;
20+
font-weight: 600;
21+
margin: 2.25rem 0 1rem;
22+
color: var(--vp-c-text-1);
23+
}
24+
25+
/* Links - This is the important part */
26+
.home-extra-content a {
27+
color: var(--vp-c-brand-1);
28+
text-decoration: none;
29+
font-weight: 500;
30+
border-bottom: 1px solid var(--vp-c-brand-1);
31+
transition: border-color 0.2s;
32+
}
33+
34+
.home-extra-content a:hover {
35+
border-bottom-color: transparent;
36+
color: var(--vp-c-brand-2);
37+
}
38+
39+
/* Paragraphs */
40+
.home-extra-content p {
41+
margin-bottom: 1.4em;
42+
line-height: 1.75;
43+
color: var(--vp-c-text-2);
44+
}
45+
46+
/* Table */
47+
.home-extra-content .features-table {
48+
width: 100%;
49+
border-collapse: collapse;
50+
margin: 1.8rem 0 1rem;
51+
}
52+
53+
.home-extra-content .features-table td {
54+
padding: 0.9rem 1.1rem;
55+
border-bottom: 1px solid var(--vp-c-divider);
56+
vertical-align: top;
57+
}
58+
59+
.home-extra-content .features-table td:first-child {
60+
width: 38%;
61+
font-weight: 600;
62+
color: var(--vp-c-text-1);
63+
}
64+
65+
.home-extra-content .features-table td:last-child {
66+
color: var(--vp-c-text-2);
67+
}

‎docs/index.md‎

Lines changed: 0 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -59,30 +59,3 @@ features:
5959
details: Exchange workbook data in a JSON format suitable for version control
6060
link: /exchange/
6161
---
62-
63-
<div class="vp-doc">
64-
65-
### Create Stunning Relationship Diagrams from Spreadsheets
66-
67-
The **Relationship Visualizer** spreadsheet transforms your Excel tables into clear, professional **Graphviz diagrams** 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.
68-
69-
### Why Users Love It
70-
71-
Whether you're mapping data flows, org charts, timelines, ERDs, or circuits, this tool makes complex relationships instantly understandable.
72-
73-
| | |
74-
| :--- |--|
75-
| **Draws as you type** | Live Graphviz rendering as data changes |
76-
| **Powerful styling** | Colors, shapes, fonts, arrows, reusable styles |
77-
| **Advanced features** | SQL queries, SVG animation, DOT preview, JSON exchange |
78-
| **Cross-platform** | Works on 🪟 Windows and 🍎 macOS |
79-
| **Sleek UI** | Custom Excel ribbon tabs across all worksheets |
80-
| **Multilingual** | English · French · German · Italian · Polish |
81-
| **Absolutely Free** | Free to use · No license required · Donations appreciated |
82-
| **Open Source** | [![MIT License](https://img.shields.io/badge/License-MIT-blue.svg)](./license/) |
83-
| **Project Supporters** | [![Buy Me a Coffee](https://img.shields.io/badge/Buy%20Me%20a%20Coffee-ffdd00?&logo=buy-me-a-coffee&logoColor=black)](https://www.buymeacoffee.com/exceltographviz) |
84-
| **Code Documentation** | [![Ask DeepWiki](https://deepwiki.com/badge.svg)](https://deepwiki.com/jjlong150/ExcelToGraphviz) |
85-
| ![](/sourceforge-community-choice.png) | *SourceForge Community Choice* Award [![Download Excel to Graphviz](https://img.shields.io/sourceforge/dt/relationship-visualizer.svg)](https://sourceforge.net/projects/relationship-visualizer/files/latest/download)|
86-
| | |
87-
88-
</div>

0 commit comments

Comments
 (0)