wehub-resource-sync
63 lines
3.1 KiB
Markdown
63 lines
3.1 KiB
Markdown
# RunCat 365 — GitHub Pages
|
|
|
|
The project website published at <https://runcat-dev.github.io/RunCat365/>.
|
|
|
|
It is a static site rendered in the browser by [lobster.js](https://hacknock.github.io/lobsterjs/), a Markdown parser loaded from a CDN. There is no build step, bundler, or dependency to install — editing a Markdown file and pushing is all it takes to update the page.
|
|
|
|
## Files
|
|
|
|
| File | Role |
|
|
| :--- | :--- |
|
|
| `index.html` | Loader shell for the landing page. Picks the content file by language and hands it to lobster.js. |
|
|
| `privacy_policy.html` | Loader shell for the privacy policy. Same mechanism as `index.html`. |
|
|
| `content.md` / `content.ja.md` | Landing page content (English / Japanese). |
|
|
| `privacy_policy.md` / `privacy_policy.ja.md` | Privacy policy content (English / Japanese). |
|
|
| `style.css` | Shared stylesheet targeting lobster.js `lbs-*` classes. |
|
|
| `images/` | Screenshots, demo GIF, Microsoft Store badge, and Open Graph thumbnail. |
|
|
|
|
The two `.html` files are thin loaders — almost all content lives in the `.md` files.
|
|
|
|
## Editing content
|
|
|
|
Edit the relevant `.md` file directly. lobster.js renders Markdown plus a few block extensions:
|
|
|
|
- `:::header` … `:::` — page title block
|
|
- `:::footer` … `:::` — footer block (links, language switcher, copyright)
|
|
- `:::warp <name>` … `:::` — a column referenced from a silent table (`~ | [~name] | …`); used for the feature cards and the two-column "What you can monitor" layout
|
|
- `:::details <summary>` … `:::` — collapsible FAQ entry
|
|
- `` — image with an explicit width
|
|
|
|
Any text change is reflected on the next page load — no rebuild required. Keep the English and Japanese files in sync when you change wording or structure.
|
|
|
|
## Language switching
|
|
|
|
The language is chosen by the `?lang` query parameter, read in the `<script>` of each `.html` loader:
|
|
|
|
- no parameter (or anything other than `ja`) → English (`content.md`)
|
|
- `?lang=ja` → Japanese (`content.ja.md`)
|
|
|
|
The footer of each page links between the two. To add a new language:
|
|
|
|
1. Create `content.<lang>.md` (and `privacy_policy.<lang>.md`).
|
|
2. Extend the language-selection logic in `index.html` and `privacy_policy.html` to map the new `?lang` value to that file.
|
|
3. Add a link to the new language in every footer block.
|
|
|
|
## Styling
|
|
|
|
`style.css` targets the `lbs-*` class names that lobster.js emits (`.lbs-heading-1`, `.lbs-paragraph`, `.lbs-table-silent`, `.lbs-details`, `.lbs-footer`, …). The privacy policy page carries a `privacy-policy` body class so its title can be styled smaller than the landing-page hero.
|
|
|
|
## Previewing locally
|
|
|
|
lobster.js fetches the Markdown and its own module over HTTP, so opening the files with `file://` will not work. Serve the directory and open it over `http://`:
|
|
|
|
```sh
|
|
cd docs
|
|
python3 -m http.server 8000
|
|
# then open http://localhost:8000/index.html
|
|
# Japanese: http://localhost:8000/index.html?lang=ja
|
|
```
|
|
|
|
## Deployment
|
|
|
|
The site is served by GitHub Pages from this `docs/` directory on the default branch. Pushing changes here updates the live site; there is nothing to build or deploy manually.
|