onedevatlasBeta
Browse the atlas
AllUI5BTPCAPABAP
SampleSampletypeA worked example you read or clone. Evidence: it demonstrates, it never provides.See every one →What this type is →independently maintainedindependently maintainedoriginPublished by one person or a small company outside SAP. Says nothing about quality; the readings say that.See every one →Starting point

UI5 VitePress

A VitePress documentation project to clone and run, with UI5 Web Components usable in its Vue pages, CDS and ABAP CDS code blocks highlighted, and cf push or an MTA build to put it on SAP BTP.

A VitePress documentation site with its configuration already committed: clone it, npm install, npm run dev, and the dev server opens at http://localhost:5173. Inside it are UI5 Web Components usable in any Vue single-file component, with a mixin that switches their theme when VitePress's dark mode switch is thrown, and Tailwind CSS v4 imported as layers in .vitepress/theme/custom.css without Preflight, because VitePress brings its own reset, with a Fire and Water palette declared as @theme variables. Shiki grammars for CAP CDS and ABAP CDS are preconfigured, so a cds or abapcds fenced block is highlighted the way a ts block is, and a plantuml block becomes a diagram. The getting-started guide writes out two SAP deployment paths: cf push onto the Cloud Foundry runtime with the Staticfile buildpack and a 32 MB manifest, and an MTA build that zips the built site into the HTML5 Application Repository for SAP Work Zone, after which the base path in .vitepress/config.ts has to be set to the deployed app's URL. What you take away is the clone: there is no package to install into a site you already have, and the theme and the palette are edited in your own copy.

GitHub12 ★
Homepage

Facts

Last pushLicenceMIT

Where it sits

Lives in
UI5
Serves
BTP/BAIP
Flavors
Web Components
Requires
VitePressVitePressoutside the atlasThe static site generator the project is a configuration of: the pages are markdown it compiles, and dev, build and preview in package.json are its commands.@ui5/webcomponents@ui5/webcomponentsartifactThe UI elements the site's own Vue components are built from; the preconfigured theme ships a mixin that switches their theme together with VitePress's dark mode switch.
Optional
SAP BTP, Cloud Foundry RuntimeSAP BTP, Cloud Foundry RuntimeartifactWhere the built site directory runs when it is pushed to SAP BTP: cf push with the Staticfile buildpack named in the project's manifest.yaml.SAP HTML5 Application Repository service for SAP BTPSAP HTML5 Application Repository service for SAP BTPartifactWhere the zipped build is uploaded on the Work Zone path, built and deployed with the mta tools and served afterwards through the managed Application Router.

Who is behind it

Holger SchäferHolger SchäferPersonMaintains this
In the atlas: maintains 1@hschaefer123maintainer

What it declares

Every artifact

Type
Sample
Origin
Independently maintained
Runtime
Node.js

As a sample

Form
does not say

Connections4

Download
UI5 VitePress connectionsUI5 VitePressNEEDS→ needs2needs stated The UI elements the site's own Vue components are built from; the preconfigured theme ships a mixin that switches their theme together with VitePress's dark mode switch. hschaefer123/ui5-vitepress — README, Features: https://github.com/hschaefer123/ui5-vitepress UI5 VitePress — UI5 Web Components, Toogle Dark Mode Mixin: https://raw.githubusercontent.com/hschaefer123/ui5-vitepress/main/src/guide/ui5wc.md@ui5/webcomponentsneeds stated The static site generator the project is a configuration of: the pages are markdown it compiles, and `dev`, `build` and `preview` in `package.json` are its commands. UI5 VitePress — What is UI5 VitePress?, Dependencies: https://raw.githubusercontent.com/hschaefer123/ui5-vitepress/main/src/guide/index.md hschaefer123/ui5-vitepress — README: https://github.com/hschaefer123/ui5-vitepressVitePress→ optionally needs2optionally needs stated If: the site is deployed to SAP BTP Cloud Foundry with cf push Where the built `site` directory runs when it is pushed to SAP BTP: `cf push` with the Staticfile buildpack named in the project's `manifest.yaml`. UI5 VitePress — Getting Started, Deployment, SAP BTP: https://raw.githubusercontent.com/hschaefer123/ui5-vitepress/main/src/guide/getting-started.mdSAP BTP, Cloud Foundry Runtimeifoptionally needs stated If: the site is deployed for SAP Work Zone through the managed Application Router Where the zipped build is uploaded on the Work Zone path, built and deployed with the mta tools and served afterwards through the managed Application Router. UI5 VitePress — Getting Started, Deployment, SAP WorkZone: https://raw.githubusercontent.com/hschaefer123/ui5-vitepress/main/src/guide/getting-started.mdSAP HTML5 Application Repositoryservice for SAP BTPif

README

quoted from hschaefer123/ui5-vitepress under MIT, read
hschaefer123/ui5-vitepress/README.mdOn GitHub

UI5 VitePress

Pre-configured “Ready to Run” solution to get started immediately with VitePress and UI5.

Live Demo (see .github/workflows/deploy.yml)

Fire and Water Design System

Project Screenshot

Features

  • Vue based Single-File Components (SFC)
  • UI5 Web Components implementing the Fiori design system.
  • PostCSS preprocessor transforming CSS with plugins:
    • Tailwind CSS enabling a utility-first driven design system, incl. vendor prefixing via Lightning CSS.
  • PlantUML creating diagrams from plain text.
  • Deployment
    • GitHub Pages using actions
    • BTP using manifest

Installation

  1. Clone the repo 
    git clone https://github.com/hschaefer123/ui5-vitepress.git
  2. Install NPM packages 
    npm install
  3. Start dev server using 
    npm run dev

The dev server automatically opens a browser window at http://localhost:5173.

Everything else can be found in the application.

License

Distributed under the MIT License. See LICENSE for more information.

Contact

Holger Schäfer - @hschaefer123

UDINA Business Technology Platform: https://btp.udina.de

MIT, read

Details

Sources3
GitHub APIdiscovered herechecked
github.com/hschaefer123/ui5-vitepresstree, pushes, contributors, CIchecked
README.mdquoted, and what the entry declareschecked

Sources are graph entities: the same page may back several entries, and an unreachable source flags every row that rests on it.

Compatibility and provenance
runtimesnode
discovered viaGitHub API
first seen in the atlas
ecosystem and domainui5, learning-and-reference
Flavors1
Web Components
“UI5 Web Components implementing the Fiori design system.” — hschaefer123/ui5-vitepress — README, Featureschecked
History in the atlas1
  1. First seen.
For your agent
Ref
artifact:ui5-vitepress
JSON
/artifacts/ui5-vitepress.json
MCP
Connecting an agent