Wko-library NPM

WKO.at #23 HTML Prototype

astro (v2.0.4)

Astro is a web framework for creating HTML components and pages.

See astro website and doc.

Prerequisites

Node.js v16.12.0 or higher.
VSC (+ astro extension)
Terminal (Astro is accessed through its CLI)

npm run tasks

`dev`

runs dev environment under localhost:3000

`build`

builds project under dist folder

`preview`

runs preview of build under localhost:3000

`build-production`

builds project with different routing paths needed for Gentics CMS

asset changes

If there are any changes on the assets (e.g. css, js, icons, fonts, images, ...) it's necessary to do further steps in this repo.
Quote:

Building and copying of wko23 assets
When the css / js has been updated by the wko templater all local installations need to run wko23-build-css-js to generate and copy the new versions to their correct places Afterwards, changes in directory cms/packages/wko/files/images/icons and file cms/packages/wko/files/css/style.css have to be commited.

actual steps:

. switch to gtx-wko-cms repo
. change to wko-23 directory
. pull int branch
. checkout to new branch
. change to gtx-wko-cms directory
. pull int branch
. git bash ./wko23-build-css-js
. commit and push changes in wko-23/cms/packages/wko/files/ directory in newly created branch
. create merge request for int

Project structure

├── dist
├── distProduction
├── public
.   ├── ct
.   .   ├── config.js
.   .   ├── consent.js
.   .   └── GCM.js
.   ├── fonts
.   ├── images
.   .   ├── favicons
.   .   └── icons
├── src
.   ├── components
.   .   ├── doc
.   .       ├── **/*.astro
.   .   └── wko
.   .       ├── **/*.astro
.   ├── content
.   .   ├── doc
.   .   .   ├── **/*.mdx
.   .   └── config.ts
.   ├── layouts
.   .   ├── doc
.   .   .   ├── **/*.astro
.   .   └── wko
.   .   .   ├── **/*.astro
.   ├── pages
.   .   ├── wko
.   .   .   ├── **/*.astro
.   .   ├── [...slug].astro
.   .   └── index.astro
.   ├── scripts
.   .   ├── doc
.   .   .   ├── **/*.js
.   .   └── wko
.   .   .   ├── gtx_custom.js
.   .   .   ├── gtx_form.js
.   .   .   ├── search.js
.   .   .   └── wkoui.js
.   └── styles
.   .   ├── doc
.   .   .   ├── custom.scss
.   .   .   ├── index.css
.   .   .   └── theme.css
.   .   └── wko
.   .   .   └── **/*.scss
.   ├── const.ts
.   ├── ...
.   ├── astro.config-production.mjs
.   ├── astro.config.mjs
.   ├── ...
└── └── ...

The project consists of two parts, the library (which uses Astro theme docs) and the individual templates for preview.

Project folders/files

`public`

The public directory is for files and assets that do not need to be processed during Astro’s build process. These files will be copied into the build folder untouched.

`components`

Components are reusable units of code for HTML pages.

`content`

Content entries are stored as either Markdown (.md) or MDX (.mdx) files.

`layouts`

These are most often used by Astro pages and Markdown or MDX pages to wrap some content and define the layout of the page.

`pages`

A page can be an Astro or a Markdown file that represents some page of content for your site.

`scripts`

wko/gtx_custom.js: Written by Gentics only
wko/gtx_form.js: Written by Gentics only
wko/search.js: Handles search in project with Google Search API
wko/wkoui.js: Project specific code

`const.ts`

Adds links to preview Astro components (content/doc/*.mdx) or pages (pages/wko/*.astro) in library's sidebar.

astro.config.mjs

Configure settings for build process. By default, this will generate static files and place them in a dist directory.
astro.config-production.mjs handles assets build for Gentics CMS.