{"id":16163467,"url":"https://github.com/marianfoo/bestofcapjs-website","last_synced_at":"2025-04-07T04:28:34.091Z","repository":{"id":207535296,"uuid":"719484992","full_name":"marianfoo/bestofcapjs-website","owner":"marianfoo","description":null,"archived":false,"fork":false,"pushed_at":"2024-06-04T05:15:23.000Z","size":48424,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-13T08:52:38.951Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://bestofcapjs.org/","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":"2023-11-16T09:13:46.000Z","updated_at":"2024-06-04T05:13:40.000Z","dependencies_parsed_at":null,"dependency_job_id":"53a7c73a-86b8-4170-a4ac-af0f80d85acb","html_url":"https://github.com/marianfoo/bestofcapjs-website","commit_stats":null,"previous_names":["marianfoo/bestofcapjs-website"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marianfoo%2Fbestofcapjs-website","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marianfoo%2Fbestofcapjs-website/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marianfoo%2Fbestofcapjs-website/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marianfoo%2Fbestofcapjs-website/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/marianfoo","download_url":"https://codeload.github.com/marianfoo/bestofcapjs-website/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247592147,"owners_count":20963464,"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:50.245Z","updated_at":"2025-04-07T04:28:34.072Z","avatar_url":"https://github.com/marianfoo.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Best of cap-js\n\n\"Best of cap-js\" is the new entry page for the cap-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 cap-js.  \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 `bestofcapjs-data repo`](https://github.com/marianfoo/bestofcapjs-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.  \n**You can also bookmark your searches. A url could look like this:**  \n\u003chttps://bestofcapjs.org/#/packages?search=live\u0026tokens=middleware:type\u0026sort=downloadsCurrentFortnight\u003e\n\nEach packages has metadata added what type it is and what tags are associated with it.  \nData is coming from GitHub, NPM and Visual Studio Marketplace.\n\nThe search is divided into three sections:\n\n- search by name and description\n- filter by type, tags and license\n- sorting\n\nThe filter narrows down the results more and more with each selected field.\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### 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### Timeline\n\nThe timeline shows the latest changes in the associated NPM packages\n\n### Contribution\n\nThis list shows the top contributors to the GitHub packages.\n\n# Technical\n\n## Overview\n\nHere is a diagram that illustrates the architecture of bestofcapjs.  \n\nIn short:  \nThe repository `bestofcapjs-data` generates the data and serves it to the website, so it is effectively our backend for the website.  \nIn the repository `bestofcapjs-website` only the frontend is maintained. This is generated after each commit in `main` branch.  \n![Best of cap-js Diagramm](img/BestOfUI5_Architecture.png)\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/marianfoo/bestofcapjs-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/marianfoo/bestofcapjs-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/marianfoo/bestofcapjs-website/tree/docs) and force pushed to the `docs` branch.  \nFrom there, GitHub Pages will automatically deploy the new version to the webpage \u003chttps://bestofcapjs.org/\u003e .\n\n### Testing\n\nWe run [`wdi5`](https://github.com/js-soft/wdi5) tests on every Pull Request.  \nImplicitly, the build is also tested before the wdi5 tests, since it is executed before the tests.  \nThe tests are located in the [`test`](https://github.com/marianfoo/bestofcapjs-website/tree/main/src/test) folder.  \nWe run the tests with [mock data](https://github.com/marianfoo/bestofcapjs-website/tree/main/src/localService) to make sure we get consistent results on the tests.\n\n## Backend\n\n**The backend is located in a seperate repository [`bestofcapjs-data`](https://github.com/marianfoo/bestofcapjs-data#readme).**  \n**For a more detailed documentation read the readme there.**\n\nWe crawl data from GitHub and NPM.  \nThe source code is written in typescript and in folder [`src`](https://github.com/marianfoo/bestofcapjs-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/marianfoo/bestofcapjs-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/marianfoo/bestofcapjs-data/blob/main/sources.json).\n\n## DevOps\n\n### Deployment of Pull Requests to Azure Static Web Apps\n\nIn order for contributors to better understand the impact of a pull request and to better test it, there is an option to deploy the changes of a pull request into a test environment, using [Azure Static Web Apps](https://azure.microsoft.com/en-en/services/app-service/static/#overview).  \nThis makes it easy to access and test the app.  \n**For security reasons, this only works for pull requests from the `ui5-community` repo.**\n\n#### How To\n\n- **Create**: To initiate the deployment to Azure Static Web Apps, the label `deploy_test` must be assigned to a pull request.  \n  - If this was successful, a comment is left in the pull request with the link to the app.  \n- **Update**: After the label is added, each commit initiates an update to the Azure Static Web App.\n  - If this label is not present on the pull request, the GitHub actions will be skipped every time.  \n- **Delete**: If the pull request is closed (manually or via merge), the Azure Static Web App is also deleted.\n  -  Do not remove the label, otherwise the app will not be deleted!\n\n## Run local\n\n### Requirements\n\nEither [npm](https://www.npmjs.com/) or [yarn](https://yarnpkg.com/) for dependency management.\n\ngit clone:\n`\u003e git clone https://github.com/marianfoo/bestofcapjs-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\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarianfoo%2Fbestofcapjs-website","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarianfoo%2Fbestofcapjs-website","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarianfoo%2Fbestofcapjs-website/lists"}