Skip to content

Commit 625db28

Browse files
watthemwatthem
committed
feat: Add initial documentation website and examples for front.js.
1 parent 2c16749 commit 625db28

File tree

11 files changed

+1876
-181
lines changed

11 files changed

+1876
-181
lines changed

‎website/KB/index.html‎

Lines changed: 17 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -4,37 +4,40 @@
44
<head>
55
<meta charset="UTF-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<meta name="description" content="front.js Knowledge Base - Documentation, guides, and API reference for the secure islands architecture micro-framework.">
7+
<meta name="description"
8+
content="front.js Knowledge Base - Documentation, guides, and API reference for the secure islands architecture micro-framework.">
89
<title>front.js - Knowledge Base</title>
9-
10+
1011
<!-- Canonical URL -->
1112
<link rel="canonical" href="https://frontjs.dev/KB/">
12-
13+
1314
<!-- Favicon -->
1415
<link rel="icon" href="../favicon.svg" type="image/svg+xml">
1516
<link rel="alternate icon" href="../favicon.ico">
16-
17+
1718
<!-- Open Graph / Facebook -->
1819
<meta property="og:type" content="website">
1920
<meta property="og:url" content="https://frontjs.dev/KB/">
2021
<meta property="og:title" content="front.js Knowledge Base - Documentation">
21-
<meta property="og:description" content="Complete documentation, guides, and API reference for front.js - the secure islands architecture micro-framework.">
22+
<meta property="og:description"
23+
content="Complete documentation, guides, and API reference for front.js - the secure islands architecture micro-framework.">
2224
<meta property="og:image" content="https://frontjs.dev/og-image.png">
23-
25+
2426
<!-- Twitter -->
2527
<meta name="twitter:card" content="summary_large_image">
2628
<meta name="twitter:url" content="https://frontjs.dev/KB/">
2729
<meta name="twitter:title" content="front.js Knowledge Base - Documentation">
28-
<meta name="twitter:description" content="Complete documentation, guides, and API reference for front.js - the secure islands architecture micro-framework.">
30+
<meta name="twitter:description"
31+
content="Complete documentation, guides, and API reference for front.js - the secure islands architecture micro-framework.">
2932
<meta name="twitter:image" content="https://frontjs.dev/og-image.png">
30-
33+
3134
<!-- Preconnect to CDN -->
3235
<link rel="preconnect" href="https://esm.sh" crossorigin>
3336
<link rel="dns-prefetch" href="https://esm.sh">
34-
37+
3538
<!-- Plausible Analytics -->
3639
<script defer data-domain="frontjs.dev" src="https://plausible.io/js/script.js"></script>
37-
40+
3841
<link rel="stylesheet" href="../styles.css">
3942
</head>
4043

@@ -128,7 +131,7 @@ <h3>🚀 Static Deployment</h3>
128131
<section class="links">
129132
<h2>Access the KB</h2>
130133
<div class="cta">
131-
<a href="../../KB/" class="button primary">View Live KB</a>
134+
<a href="../docs/" class="button primary">View Live KB</a>
132135
<a href="https://github.com/watthem/front-js/tree/main/KB" class="button secondary">View Source</a>
133136
</div>
134137
<p style="text-align: center; margin-top: 1.5rem; color: #666;">
@@ -145,7 +148,7 @@ <h3>Option 1: Using back-js</h3>
145148
<pre><code>cd back-js
146149
npm start
147150

148-
# KB available at http://localhost:3000/KB/</code></pre>
151+
# KB available at http://localhost:8080/docs/</code></pre>
149152
</div>
150153

151154
<div class="code-block">
@@ -156,7 +159,7 @@ <h3>Option 2: Static Server</h3>
156159
# Node.js
157160
npx serve .
158161

159-
# Then navigate to /KB/</code></pre>
162+
# Then navigate to /docs/</code></pre>
160163
</div>
161164
</div>
162165
</section>
@@ -198,4 +201,4 @@ <h3>"Component not registered" Error</h3>
198201
<script type="module" src="../app.js"></script>
199202
</body>
200203

201-
</html>
204+
</html>

‎website/docs/README.md‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
# front.js Knowledge Base
2+
3+
Internal knowledge base built with front.js that showcases documentation, guides, and detailed explanations.
4+
5+
## Structure
6+
7+
- `index.html` - Main HTML page
8+
- `app.js` - front.js components (Navigation, MarkdownViewer)
9+
- `styles.css` - Site styling
10+
- `content/` - Markdown files to display
11+
12+
## Running Locally
13+
14+
### Option 1: Static Server (Recommended)
15+
16+
Use any static file server:
17+
18+
```bash
19+
# Using Python
20+
python3 -m http.server 8000
21+
22+
# Using Node.js (npx serve)
23+
npx serve .
24+
25+
# Using PHP
26+
php -S localhost:8000
27+
```
28+
29+
Then open `http://localhost:8000` in your browser.
30+
31+
### Option 2: Using back.js
32+
33+
From the `back-js/` directory:
34+
35+
```bash
36+
cd ../back-js
37+
npm start
38+
```
39+
40+
Then open `http://localhost:3000` in your browser.
41+
42+
## Deployment
43+
44+
The KB is a pure static site and can be deployed to:
45+
46+
- GitHub Pages
47+
- Netlify
48+
- Vercel
49+
- Any static hosting service
50+
51+
Just deploy the `KB/` directory contents.
52+
53+
### Recommended: GitHub Pages
54+
55+
For the best user experience, deploy the KB to GitHub Pages at `kb.frontjs.com` (or a subdomain of your choosing):
56+
57+
1. **Configure custom domain** (optional):
58+
- Add a `CNAME` file to the `KB/` directory with your domain name
59+
- Configure DNS with your domain registrar
60+
61+
2. **Deploy via GitHub Actions**:
62+
- Use the provided `.github/workflows/deploy-kb.yml` workflow
63+
- Or manually push the `KB/` directory to the `gh-pages` branch
64+
65+
3. **Update website links**:
66+
- Once deployed, update `website/KB/index.html` to point to the live URL
67+
- Update navigation links in `website/index.html` and `website/examples/index.html`
68+
69+
**Note:** This is the internal knowledge base showcase. The main website is in the `website/` directory.
70+
71+
## Features
72+
73+
- **Client-side markdown rendering** - Uses `marked` library from CDN
74+
- **Hash-based navigation** - Deep linking via URL hash (`#explainer`, `#manifesto`, etc.)
75+
- **Reactive navigation** - Built with front.js `val`/`run` for reactivity
76+
- **No build step** - Pure HTML, CSS, and JavaScript
77+
78+
## Adding Content
79+
80+
To add a new document:
81+
82+
1. Add markdown file to `content/` directory
83+
2. Update `DOCS` object in `app.js`:
84+
85+
```javascript
86+
const DOCS = {
87+
// ... existing docs
88+
'new-doc': {
89+
title: 'New Document',
90+
file: 'NEW-DOC.md',
91+
id: 'new-doc'
92+
}
93+
};
94+
```
95+
96+
The navigation and viewer will automatically pick it up.

0 commit comments

Comments
 (0)