Move the demo page into its own demo/ folder (AI)
index.html and its site-shell CSS (reset.css, header.css, layout.css) now live under demo/, separate from the library's own css/, js/, strings/, templates/, and articles/ at the repo root. Root css/ now holds only css/components/ — the styles any embedding page actually needs. Fixed demo/index.html's own relative paths to the component CSS and router.js (one level up now); its own site-shell CSS links needed no change since they moved along with it. No BASE_URL/MARKED_URL changes in js/config.js — those resolve from the script's own location via import.meta.url, independent of wherever the HTML page that loaded it lives. Updated README.md throughout: project structure diagram, Translations' index.html mentions, the Embedding section's site-level CSS example paths, the nginx config's SPA location block (now /demo/ instead of root), and Running locally's preview instructions. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01AXSVPS3UmmASiiprPfcnUd
This commit is contained in:
biosiasandClaude Sonnet 5 committed
1 parent
1dc5e16d14
commit
3c510ba92e
5 files changed
+27
-23
No files matched your search
@@ -38,16 +38,18 @@ A minimal CMS where articles are Markdown files rendered in the browser. No buil
|
||||
|
||||
This whole repo *is* cmjs — clone it as-is into an existing site (or copy `css/`, `js/`,
|
||||
`strings/`, `templates/`, and your own `articles/` into one) and embed it into a page there; see
|
||||
"Embedding in an existing page" below. `index.html` plus the root `css/` files are just a
|
||||
standalone demo/preview shell, not something an embedding page needs to bring along.
|
||||
"Embedding in an existing page" below. `demo/` is a standalone demo/preview page, kept separate
|
||||
from the library — not something an embedding page needs to bring along.
|
||||
|
||||
```
|
||||
├── README.md
|
||||
├── index.html # Single-page demo shell — served from the repo root
|
||||
├── demo/ # Standalone demo/preview page — not needed to embed cmjs elsewhere
|
||||
│ ├── index.html # Single-page shell
|
||||
│ └── css/
|
||||
│ ├── reset.css # CSS variables, dark mode, box-sizing reset, focus styles
|
||||
│ ├── header.css # Site header, title link, search form
|
||||
│ └── layout.css # Main content wrapper, state messages, responsive
|
||||
├── css/
|
||||
│ ├── reset.css # Demo shell: CSS variables, dark mode, box-sizing reset, focus styles
|
||||
│ ├── header.css # Demo shell: site header, title link, search form
|
||||
│ ├── layout.css # Demo shell: main content wrapper, state messages, responsive
|
||||
│ └── components/ # Component styles — needed by any embedding page
|
||||
│ ├── card.css # Article list cards and filter heading
|
||||
│ ├── article.css # Single article view, back link, hero image
|
||||
@@ -226,7 +228,8 @@ Available locales: `en` (default), `cs` (Czech), `sk` (Slovak).
|
||||
|
||||
To add another translation:
|
||||
|
||||
1. Set `<html lang="xx">` in your `index.html` to the target language code (e.g. `cs`).
|
||||
1. Set `<html lang="xx">` on the embedding page (or `demo/index.html` for this repo's own demo)
|
||||
to the target language code (e.g. `cs`).
|
||||
2. Add `strings/xx.json` with the same keys as `en.json` (copy it as a starting point) —
|
||||
you only need to include the keys you're translating; anything missing quietly falls back to
|
||||
English rather than breaking.
|
||||
@@ -238,9 +241,9 @@ The resolved locale also drives date formatting (`Intl.DateTimeFormat`), search
|
||||
tag-label sorting (`localeCompare`), via `getLocale()` in the same module — so a translation
|
||||
file doesn't just relabel text, it affects how dates and sorting behave too.
|
||||
|
||||
Site-specific branding that lives in `index.html` itself (the page `<title>`, the header search
|
||||
placeholder, the sidebar section headings) is plain static HTML, not JS-templated — translate it
|
||||
by editing `index.html` directly, the same way you'd customise it for any other embedding site.
|
||||
Site-specific branding that lives in the embedding page itself (the page `<title>`, the header
|
||||
search placeholder, the sidebar section headings) is plain static HTML, not JS-templated —
|
||||
translate it by editing that page directly (`demo/index.html` for this repo's own demo).
|
||||
|
||||
## Embedding in an existing page
|
||||
|
||||
@@ -250,9 +253,9 @@ To add cmjs to any HTML page, three things are needed: the CSS, the two mount-po
|
||||
|
||||
```html
|
||||
<!-- Site-level styles (or replace with your own) -->
|
||||
<link rel="stylesheet" href="css/reset.css">
|
||||
<link rel="stylesheet" href="css/header.css">
|
||||
<link rel="stylesheet" href="css/layout.css">
|
||||
<link rel="stylesheet" href="demo/css/reset.css">
|
||||
<link rel="stylesheet" href="demo/css/header.css">
|
||||
<link rel="stylesheet" href="demo/css/layout.css">
|
||||
|
||||
<!-- Component styles -->
|
||||
<link rel="stylesheet" href="css/components/card.css">
|
||||
@@ -331,9 +334,9 @@ server {
|
||||
server_name example.com;
|
||||
root /var/www/cmjs;
|
||||
|
||||
# Serve the SPA
|
||||
location / {
|
||||
try_files $uri $uri/ /index.html;
|
||||
# Serve the demo page
|
||||
location /demo/ {
|
||||
try_files $uri $uri/ /demo/index.html;
|
||||
}
|
||||
|
||||
# Enable JSON directory listing for article discovery (applies to all subdirs)
|
||||
@@ -444,5 +447,6 @@ Using nginx locally (example for Linux):
|
||||
# Symlink or copy the repo to your nginx webroot, then reload:
|
||||
sudo nginx -s reload
|
||||
```
|
||||
Then open `/demo/` in a browser to preview.
|
||||
|
||||
> Python's `http.server` returns HTML directory listings, not JSON, so article discovery won't work with it. Use nginx.
|
||||
File renamed without changes.
File renamed without changes.
File renamed without changes.
@@ -7,12 +7,12 @@
|
||||
<link rel="stylesheet" href="css/reset.css">
|
||||
<link rel="stylesheet" href="css/header.css">
|
||||
<link rel="stylesheet" href="css/layout.css">
|
||||
<link rel="stylesheet" href="css/components/card.css">
|
||||
<link rel="stylesheet" href="css/components/article.css">
|
||||
<link rel="stylesheet" href="css/components/content.css">
|
||||
<link rel="stylesheet" href="css/components/pagination.css">
|
||||
<link rel="stylesheet" href="css/components/toc.css">
|
||||
<link rel="stylesheet" href="css/components/author-profile.css">
|
||||
<link rel="stylesheet" href="../css/components/card.css">
|
||||
<link rel="stylesheet" href="../css/components/article.css">
|
||||
<link rel="stylesheet" href="../css/components/content.css">
|
||||
<link rel="stylesheet" href="../css/components/pagination.css">
|
||||
<link rel="stylesheet" href="../css/components/toc.css">
|
||||
<link rel="stylesheet" href="../css/components/author-profile.css">
|
||||
</head>
|
||||
<body class="blog-page">
|
||||
<header>
|
||||
@@ -43,6 +43,6 @@
|
||||
</aside>
|
||||
</main>
|
||||
|
||||
<script type="module" src="js/router.js"></script>
|
||||
<script type="module" src="../js/router.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in new issue
Block a user