Create website with overview of middleware/tasks/tooling

[marianfoo]

Something similar to https://bestofjs.org/ Base are repos in ui5-community organization Longterm monorepo will be seperate repos

[marianfoo]

maybe similar to https://github.com/SAP-samples/artifact-of-the-month

[marianfoo]

my time is limited right now, but I would start like this: Static page with Jekyll and Github pages. Use a (any) theme, like minimal-mistakes or just-the-docs I would then write the "backend" that the repositories in https://github.com/ui5-community are searched and made searchable (provide a json or create markdown pages). I would then still need support with JS/HTML/CSS, therefore the question if the basic structure would fit for you so? @petermuessig @marcelschork

[marianfoo]

Well, I was hoping will have the resources for GitHub teams that I can use the GitHub Pages even with private repos ;) Anyway, I have a first version here https://marianfoo.github.io/ui5-community-website/ https://github.com/marianfoo/ui5-community-website

Features:

• Website build with OpenUI5 and Horizon Theme
• Used a bit of logic from https://github.com/SAP-samples/artifact-of-the-month/
• Crawler gets currently data from https://github.com/ui5-community/ui5-ecosystem-showcase/tree/main/packages
  • crawler get´s package.json and README.md
  • more repos in ui5-community can later crawled
• startpage with all packages
• search in name and description
• filter with types (from package.json name -> ui5-middleware-index is type middleware)
• Object Page with README.md (usage of ui5-cc-md by @vobu )

ToDo:

• change crawler to crawl whole ui5-community
  • move packages from ui5-ecosystem-showcase to own repos
• define specific metadata (in package.json or own file)
• improve object page with more information (npm data, github data, documentation)

[mauriciolauffer]

I liked what you did there! I have some suggestions though:

• Crawler should get tags/keywords from npm registry. There're a lot of nice things developed by the community which are not in the monorepo ui5-community;
• The app could be Master/Detail to improve UX a little bit. It saves a couple of clicks and optmize screen usage;
• I'd avoid specific metadata, this was the same problem with ui5Lab;

[petermuessig]

Nice work, Marian! 👍

Some small feedback about the self-contained build:

• you need to manually add sap/ui/core/date/Gregorian and sap/ui/core/ComponentSupport to your bundle in the ui5.yaml (an example with adding a third-party lib can be found here - you need to repeat the Component-preload definitions unfortunately)
• as the data is hard-coded we could even add the data to the preload package (optional)

Some general comments:

• Hmm, this project structure defined by the generator-ui5-project isn't really optimal IMO. I'm not 100% behind this as it doesn't follow properly the monorepo structures. It's derived from the SAP MTA builds. I would be more in favor of using one of the workspace concepts, be it npm, yarn, turborepo, or ... - but this is more a personal matter of taste
• We could also switch to use TypeScript for the UI as you do for the crawler?
• Don't submit you auth key - better use an env var to inject it which can be injected as secret in GH actions 😉
• We should use supported languages to avoid the 404s
• Smaller findings are to properly cleanup the dependencies e.g. in XML Views, manifest.json and ui5.yaml

[marianfoo]

Thank you for your feedback @mauriciolauffer and @petermuessig !

Crawler should get tags/keywords from npm registry. There're a lot of nice things developed by the community which are not in the monorepo ui5-community;

I thought this is only for the ui5-community repos? A global one already exists kinda with https://sap-samples.github.io/artifact-of-the-month/#/all . I would start small for now. We probably need to define our focus here.

The app could be Master/Detail to improve UX a little bit. It saves a couple of clicks and optmize screen usage

Sure, its just a MVP. Lot of possibilities with UI/UX

I'd avoid specific metadata, this was the same problem with ui5Lab;

What was the problem with this? But you´re right, better reuse metadata like tags in package.json. But will still need somekind of a global guideline how to define them so we can use them.

you need to manually add sap/ui/core/date/Gregorian and sap/ui/core/ComponentSupport to your bundle in the ui5.yaml (an example with adding a third-party lib can be found here - you need to repeat the Component-preload definitions unfortunately) as the data is hard-coded we could even add the data to the preload package (optional)

I might need your help here. I was just happy that it worked at all :) Hat some problems with ui5-cc-md as well because there was bug(?) in there. Just developed for FLP so have never done that before. Does work a CDN in index.html together with ui5-cc-md? I tried and ui5-cc-md was pulled from the CDN. That´s why i made a self contained build.

Hmm, this project structure defined by the generator-ui5-project isn't really optimal IMO. I'm not 100% behind this as it doesn't follow properly the monorepo structures. It's derived from the SAP MTA builds. I would be more in favor of using one of the workspace concepts, be it npm, yarn, turborepo, or ... - but this is more a personal matter of taste

We might need to discuss how to we move forward with the general repo structure in ui5-community. Doesn´t make the to move forward with the website when the structure completely changes.

We could also switch to use TypeScript for the UI as you do for the crawler?

Thought about this as well, will do next.

Don't submit you auth key - better use an env var to inject it which can be injected as secret in GH actions 😉

i know :D GitHub was smart enough to invalidate it on push, so i left it in there. Will change to env variable next.

We should use supported languages to avoid the 404s

Don´t know what you mean with that. Can you explain?

Smaller findings are to properly cleanup the dependencies e.g. in XML Views, manifest.json and ui5.yaml

A lot of clean up to do because i just wanted it to work plus i copied few things from artifact-of-the-month :)

[mauriciolauffer]

@marianfoo have a look on the following links for supported languages, it's a way to tell the app should only try to download the supported languages rather than whatever location user's browser is:

Resource Bundles and Multiple Languages

Supported Locales and Fallback Chain

[mauriciolauffer]

artifact-of-the-month gets everything SAP related, there're heaps of ABAP pkg, not just Fiori/UI5

[marianfoo]

@marianfoo have a look on the following links for supported languages, it's a way to tell the app should only try to download the supported languages rather than whatever location user's browser is:

Oh, now I know what is meant. Yes I know that and I can implement it.

artifact-of-the-month gets everything SAP related, there're heaps of ABAP pkg, not just Fiori/UI5

You´re right, but we should define our scope here what we want to include here.

[mauriciolauffer]

IMO, the scope should be tags/keywords such as sapui5, openui5, ui5 and fiori.

[marianfoo]

If you have add more points add them here, otherwise later in the repo as issues

Todo bestofui5 website:

• [x] Create Repo in ui5-community and make it public (add todo as issues)
• [x] Add Keywords to all packages/repos
• [x] First get Keywords from package.json
• [x] Create JSON File with all repos which are crawled (for repos and monorepos)
• [x] Create PR Template to add to JSON File
• [x] GitHub Workflow daily build
• [x] Ask for help for Desgin/CSS
• [x] Crawl Statistic (Stars, Downloads, Updated At) --> add to UI (Overview, Object Page similar to bestofjs)
• [x] Supported Locales and Fallback Chain
• [x] Typescript UI5
• [x] Use GitHub Token as Enviroment Variable

[marianfoo]

@mauriciolauffer @marcelschork @petermuessig all suggestions were actually implemented :D so if you have more suggestions please keep them coming

i have put all the current plans/ideas into issues: https://github.com/ui5-community/ui5-community.github.io/issues

just a heads up, i will rename the repo soon

[marianfoo]

I would call this complete