A frontend in Vue.js for the Chronos documentation server.
The configuration is done in the public/chronos.json
file. The following
options are available:
{
"title": "Chronos Documentation",
"logoTitle": "Documentation",
"logoUrl": "/logo.svg",
"description": "A frontend in Vue.js for the Chronos documentation server.",
"baseUrl": "http://localhost:5173",
"chronosCollections": [
[
{
"shortName": "docs",
"title": "Docs",
"url": "http://localhost:8080/documentation",
"description": "Read the technical documentation for the Awesome project."
}
],
[
{
"shortName": "handbook",
"title": "Handbook",
"url": "http://localhost:8080/handbook",
"description": "Are you a new user? Read the handbook to learn how to use the Awesome project."
}
]
],
"extraLinks": [
[
{
"url": "https://github.com/vanilla-os/Chronos",
"name": "Source Code"
}
]
]
}
the following optional are available for collections:
editUrl
: the URL to the edit page of the collection, it must contain the
{{lang}}
and {{slug}}
placeholders, for example:
https://github.com/Vanilla-OS/documentation/blob/main/articles/{{lang}}/{{slug}}.md
you can also generate the configuration file using the npm run generate-config
command, by setting the following environment variables:
CHRONOS_TITLE
CHRONOS_LOGO_TITLE
CHRONOS_LOGO_URL
CHRONOS_DESCRIPTION
CHRONOS_BASE_URL
CHRONOS_COLLECTION*
(where * is a number)CHRONOS_EXTRA_LINK*
(where * is a number)for example:
CHRONOS_TITLE='Chronos Documentation' \
CHRONOS_LOGO_TITLE='Documentation' \
CHRONOS_LOGO_URL='/logo.svg' \
CHRONOS_DESCRIPTION='A frontend in Vue.js for the Chronos documentation server.' \
CHRONOS_BASE_URL='http://localhost:5173' \
CHRONOS_COLLECTION_1='[{"shortName": "docs", "title": "Docs", "url": "http://localhost:8080/documentation", "description": "Read the technical documentation for the Awesome project."}]' \
CHRONOS_COLLECTION_2='[{"shortName": "handbook", "title": "Handbook", "url": "http://localhost:8080/handbook", "description": "Are you a new user? Read the handbook to learn how to use the Awesome project."}]' \
# add more collections here
CHRONOS_EXTRA_LINK_1='[{"url": "https://github.com/vanilla-os/Chronos", "name": "Source Code"}]' \
# add more extra links here
To start the development server, run the following command:
pnpm dev
To generate the configuration file, run the following command:
pnpm generate-config
To build the production version, run the following command:
pnpm build
To deploy the production version using Docker, run the following command:
docker pull ghcr.io/vanilla-os/chronos-fe:main
docker run -d -p 6090:80 ghcr.io/vanilla-os/chronos-fe:main \
-e CHRONOS_TITLE='Chronos Documentation' \
-e CHRONOS_LOGO_TITLE='Documentation' \
-e CHRONOS_LOGO_URL='/logo.svg' \
-e CHRONOS_DESCRIPTION='A frontend in Vue.js for the Chronos documentation server.' \
-e CHRONOS_BASE_URL='http://localhost:5173' \
-e CHRONOS_COLLECTION_1='[{"shortName": "docs", "title": "Docs", "url": "http://localhost:8080/documentation", "description": "Read the technical documentation for the Awesome project."}]' \
-e CHRONOS_COLLECTION_2='[{"shortName": "handbook", "title": "Handbook", "url": "http://localhost:8080/handbook", "description": "Are you a new user? Read the handbook to learn how to use the Awesome project."}]' \
# add more collections here
-e CHRONOS_EXTRA_LINK_1='[{"url": "https://github.com/vanilla-os/Chronos", "name": "Source Code"}]' \
# add more extra links here