Website Gallery page building

[skzhang1]

Why are these changes needed?

There are many interesting examples and resources from discord, twitter, linkedin, medium, youtube, reddit, github.
We need to build a gallery page to collect these interesting examples and encourage the community to enrich the content.

Related issue number

Closes #830

Tasks

• Change the gallery page style. Show each example with title + icon + link. Now it is a markdown page.

Checks

• I've included any doc changes needed for https://microsoft.github.io/autogen/. See https://microsoft.github.io/autogen/docs/Contribute#documentation to build and test documentation locally.
• I've added tests (if relevant) corresponding to the changes introduced in this PR.
• I've made sure all auto checks have passed.

[codecov-commenter]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 26.58%. Comparing base (1b4fb8f) to head (e0bbe74).
Report is 786 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main     #850   +/-   ##
=======================================
  Coverage   26.58%   26.58%           
=======================================
  Files          28       28           
  Lines        3732     3732           
  Branches      847      847           
=======================================
  Hits          992      992           
  Misses       2667     2667           
  Partials       73       73           

Flag	Coverage Δ
unittests	26.52% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[sonichi]

Does the page render as a gallery?

[skzhang1]

@sonichi Now it is rendered using a markdown page. I am now trying to make it render as a gallery.

[sonichi]

Is it possible to add tags for each? It'll be hard to browse.

[skzhang1]

Is it possible to add tags for each? It'll be hard to browse.

Currently I show the catalog on the right. Users could also search them using the search box on the top.

[sonichi]

Is it possible to add tags for each? It'll be hard to browse.

Currently I show the catalog on the right. Users could also search them using the search box on the top.

adding tag will help search.

[victordibia]

@sonichi Now it is rendered using a markdown page. I am now trying to make it render as a gallery.

Hi @skzhang1 , my current intuition is that we will benefit from building a custom (reusable) react component that can format data as a gallery. I am not sure how to accomplish it yet, but can do some research and share my findings.

[victordibia]

My findings so far are as follows:

• We can create an .mdx file instead of .md for the galler. .mdx lets us add custom React components.
• We can define a gallery.json and represent each item as an entry

[
  {
    "title": "AutoGen Playground",
    "link": "https://huggingface.co/spaces/thinkall/AutoGen_Playground",
    "description": "A space to explore the capabilities of AutoGen.",
    "image": "default.png",
    "tags": ["web", "app"]
  },
  ...
  ]

• Create a custom react component that loads and renders the gallery. We can implement behaviors like search by tags etc.

I have some sample code for this .. the result being below.

@skzhang1 is it ok if I committed the code to this PR and then you can modify it as needed? let me know.

@sonichi .. is this close to what you are envisioning?

[sonichi]

Yes. Looks great!

[skzhang1]

@sonichi Now it is rendered using a markdown page. I am now trying to make it render as a gallery.

Hi @skzhang1 , my current intuition is that we will benefit from building a custom (reusable) react component that can format data as a gallery. I am not sure how to accomplish it yet, but can do some research and share my findings.

@victordibia It looks great to me! Can you make a commit for that? We will enrich the content correspondingly.

[victordibia]

@victordibia It looks great to me! Can you make a commit for that? We will enrich the content correspondingly.

@skzhang1, I made a commit. Thanks for taking the lead and helping with this feature, it will really help the community
Please feel free to double check and modify the content of gallery.json for completeness.

Note: You might have to run yarn install again to update dependencies (mainly support the the antd library)

[skzhang1]

@victordibia Thanks for your help! I made small changes to the content. Now this PR looks good to me. I will add icons to these applications in another PR. I think we can merge these PR and encourage uses to submit their demos in the community at first. Can you check the content again? @sonichi @qingyun-wu Thanks!

[victordibia]

Looks good to me.
I agree that it might be a good idea add some icons or color coding to each tag.
We might also want an author field to indicate if it is a community example or by the autogen team. And yes, let us work on that on a different PR.

Thanks again for working on this!

[sonichi]

I didn't go through all the examples. I checked a few and commented.

[sonichi]

For the case when image is not provided, I meant rendering the image contained in the linked page, like the gallery forum in discord: https://discord.com/channels/1153072414184452236/1161015724521836634
It it's hard to do it here, we can use a common default image as proposed, but the default image needs to be replaced by a more commonly representative image like the autogen landing image.