{"id":16163491,"url":"https://github.com/marianfoo/sap-npm-api-collection-website","last_synced_at":"2025-07-17T01:34:27.105Z","repository":{"id":98721903,"uuid":"488671485","full_name":"marianfoo/SAP-NPM-API-collection-website","owner":"marianfoo","description":null,"archived":false,"fork":false,"pushed_at":"2022-07-05T13:23:22.000Z","size":28477,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-07T04:31:23.277Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://marianfoo.github.io/SAP-NPM-API-collection-website/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/marianfoo.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-05-04T16:53:26.000Z","updated_at":"2022-05-04T17:06:12.000Z","dependencies_parsed_at":"2023-05-24T23:00:17.961Z","dependency_job_id":null,"html_url":"https://github.com/marianfoo/SAP-NPM-API-collection-website","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/marianfoo/SAP-NPM-API-collection-website","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marianfoo%2FSAP-NPM-API-collection-website","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marianfoo%2FSAP-NPM-API-collection-website/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marianfoo%2FSAP-NPM-API-collection-website/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marianfoo%2FSAP-NPM-API-collection-website/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/marianfoo","download_url":"https://codeload.github.com/marianfoo/SAP-NPM-API-collection-website/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marianfoo%2FSAP-NPM-API-collection-website/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265558661,"owners_count":23787954,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-10T02:35:58.460Z","updated_at":"2025-07-17T01:34:27.085Z","avatar_url":"https://github.com/marianfoo.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Best of UI5\n\n\"Best of UI5\" is the new entry page for the ui5-community.  \nIt will show the best of community projects, be it applications, libraries, custom controls, tooling extensions, middlewares, tasks or Easy UI5 generators.  \nEveryone can be able to register their projects at Best of UI5.  \nThe projects will be ranked by various information about the projects and filterable by important criteria.  \nThis should help to find you the best suited reuse project for your development needs!\n\n## Add your package\n\nJust create a [issue with this template in the `bestofui5-data repo`](https://github.com/ui5-community/bestofui5-data/issues/new?assignees=marianfoo\u0026labels=new%20package\u0026template=new_package.md\u0026title=Add%20new%20Package:) with your package and just check if you meet the prerequisites\n\n## Views\n\n### Hot Packages\n\nOverview of the most popular packages.  \nThe packages are sorted by the growth of downloads in the last 30 days.\n\n### All Packages\n\nYou can here search/filter/sort the packages.  \nEach packages has metadata added what type it is and what tags are associated with it.  \nMost data is coming from GitHub and NPM.\n\n### Tags\n\nHere are all types and tags list that are used in the packages.  \nIf you click on a tag, you will see all the packages that have this tag.\n\n### Object View\n\nYou can click on any package to get more information about it.  \nCurrently not only npm metadata is displayed, also the readme, historic npm downloads and all versions are displayed.\n\n# Technical\n\n## Frontend\n\nThe frontend is generated with the [UI5-TS-App Generator](https://github.com/ui5-community/generator-ui5-ts-app) and written completly in TypeScript.\nIn the folder `src` is the source code.\n\n### External Dependencies\n\nWe use two external modules (`ui5-cc-md` and `chart.js`) that are integrated in two different ways.\n\n#### `ui5-cc-md`\n\nFor each package we load the `README.md` to show it on the object page.  \nTo render this we use [`ui5-cc-md`](https://github.com/ui5-community/ui5-cc-md) integrated via NPM.  \nTo use this simply install `ui5-cc-md` and add `ui5-cc-md` to your `package.json` at [\"ui5\"--\u003e\"dependencies\"](https://github.com/ui5-community/bestofui5-website/blob/5a33b4b710d8143f1d07195bba9ca28696871995/package.json#L77-L82).  \nNow we can use simply use this in the [`Object.view.xml`](https://github.com/ui5-community/bestofui5-website/blob/5a33b4b710d8143f1d07195bba9ca28696871995/src/view/Object.view.xml#L94) to render the markdown.\n\n#### `chart.js`\n\nWe also get the historical download data from all npm packages.  \nTo display this data we use [`chart.js`](https://www.npmjs.com/package/chart.js) in the in the `Object.view.xml`.  \nTo use this library install via NPM [`ui5-tooling-modules`](https://www.npmjs.com/package/ui5-tooling-modules) and `chart.js`.  \nAs template to integrate `chart.js` we use almost the same implementation from [@akudev](https://github.com/akudev) in this tutorial:\n[ui5-typescript-tutorial - Using NPM Packages](https://github.com/SAP-samples/ui5-typescript-tutorial/tree/main/exercises/ex8)  \nFor a better usage we create a [custom control](https://github.com/ui5-community/bestofui5-website/blob/main/src/control/BarChart.ts) to use a bar chart.\nNow we can use this chart in the [`Object.view.xml#L61-L63`](https://github.com/ui5-community/bestofui5-website/blob/5a33b4b710d8143f1d07195bba9ca28696871995/src/view/Object.view.xml#L83-L85) to display the data.\n\n### UI5 Web Components\n\nEven though the [UI5 Web Components](https://sap.github.io/ui5-webcomponents/) were originally intended for use outside of the UI5 framework, the components are now integrated into the OpenUI5 framework.  \nThey will replace the standard controls in the long run and therefore it makes sense to use them already.  \nAs a use case, we wanted to display the individual released versions of the NPM packages sorted by date.  \nIn [SAPUI5 there is a timeline](https://ui5.sap.com/#/api/sap.suite.ui.commons.Timeline) for this, but unfortunately not in OpenUI5, however in the [UI5 web components](https://sap.github.io/ui5-webcomponents/playground/components/Timeline/) there is.  \nTo use the UI5 web components, [@petermuessig](https://github.com/petermuessig) has already written a [detailed blog](https://blogs.sap.com/2022/03/10/ui5-web-components-enablement-for-openui5-sapui5/) about it.  \nThrough direct integration with OpenUI5 the use is as simple as any other control [`Timeline.view.xml#L18-L37`](https://github.com/ui5-community/bestofui5-website/blob/5a33b4b710d8143f1d07195bba9ca28696871995/src/view/Timeline.view.xml#L18-L37)\n\n### Build \u0026 Deployment\n\nBuild is automated with GitHub Actions.  \nOn every push to `main`, the [`build`](https://github.com/ui5-community/bestofui5-website/blob/main/.github/workflows/build.yml) workflow is triggered.  \nThis will transpile typescript to javascript and run `ui5 build self-contained --all`.  \nThe result will be moved to the new folder [`docs`](https://github.com/ui5-community/bestofui5-website/tree/docs) and force pushed to the `docs` branch.  \nFrom there, GitHub Pages will automatically deploy the new version to the webpage \u003chttps://bestofui5.org/\u003e .\n\n### Testing\n\nWe run [`wdi5`](https://github.com/js-soft/wdi5) tests on every Pull Request.  \nThe tests are located in the [`test`](https://github.com/ui5-community/bestofui5-website/tree/main/src/test) folder.\n\n## Backend\n\n**The backend is located in a seperate repository [`bestofui5-data`](https://github.com/ui5-community/bestofui5-data).**\n\nWe crawl data from GitHub and NPM.  \nThe source code is written in typescript and in folder [`src`](https://github.com/ui5-community/bestofui5-data/tree/main/src).\nIt creates two json files (`data`, `versions`) which will be used as a model in the UI5 App.  \nThe latest update of the files are located in the [`data`](https://github.com/ui5-community/bestofui5-data/tree/live-data/data) folder on the `live-data` branch. \nThe frontend is using these raw files [directly from the branch](https://github.com/ui5-community/bestofui5-website/blob/5a33b4b710d8143f1d07195bba9ca28696871995/src/manifest.json#L17-L27).  \nThe packages are crawled from are located in [`sources.json`](https://github.com/ui5-community/bestofui5-data/blob/main/sources.json).\n\n## Requirements\n\nEither [npm](https://www.npmjs.com/) or [yarn](https://yarnpkg.com/) for dependency management.\n\n## Run local\n\ngit clone:\n`\u003e git clone https://github.com/ui5-community/bestofui5-website`\n\nInstall:\n`\u003e npm install`\n\nStart UI5 App:\n`\u003e npm start`\n\n## Changelog\n\nView the [Changelog here](CHANGELOG.md)\n\n## License\n\nThis project is licensed under the Apache Software License, version 2.0 except as noted otherwise in the [LICENSE](LICENSE) file.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarianfoo%2Fsap-npm-api-collection-website","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarianfoo%2Fsap-npm-api-collection-website","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarianfoo%2Fsap-npm-api-collection-website/lists"}