Reimplement /feedstock-outputs in Docusaurus #2064
Conversation
|
Short video demo with the current prototype: Screen.Recording.2024-01-28.at.23.16.23.mov |
|
cc @asmitbm |
|
One more update: Screen.Recording.2024-01-29.at.12.20.43.mov |
jaimergp
changed the title
|
conda-forge/feedstock-outputs#58 is now merged, so this is ready for review. |
Co-authored-by: jaimergp <jaimergp@users.noreply.github.com>
|
We need to turn off gh pages on the outputs repo before merging. Let me know when! |
|
I think we can do it right after merging here! Thanks @beckermr! |
|
I was thinking if we can center the table and contents for better view. And I'll look if I can have a fix size for the table as it is changing based on the content on every search performed |
|
I'm logging out for today, so I'll merge tomorrow morning as I disable GH pages on the feedstock-outputs repo. If you want to suggest a couple patches in the meantime, go for it @asmitbm. If not, we can address the UI refinements in subsequent PRs. Thanks! |
|
|
||
| return ( | ||
| <div | ||
| className={["container", "margin-vert--lg"].join(" ")} |
There was a problem hiding this comment.
| className={["container", "margin-vert--lg"].join(" ")} | |
| className={["container", "margin-vert--lg"].join(" ")} | |
| style={{ overflowX: 'auto', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }} |
There was a problem hiding this comment.
To center the contents on the page.
There was a problem hiding this comment.
Would it be better to have a styles.module.css file to avoid inline styles?
There was a problem hiding this comment.
We can achieve that, but it would require updating class names across the entire page to follow the format className={styles.table}.
| </label> | ||
| </div> | ||
| </form> | ||
| <table> |
There was a problem hiding this comment.
| <table> | |
| <table style={{ width: '100%', tableLayout: 'fixed', borderCollapse: 'collapse'}}> |
| </form> | ||
| <table> | ||
| <thead> | ||
| <tr> |
There was a problem hiding this comment.
| <tr> | |
| <tr style={{ border: '1px solid #ddd', padding: '8px' }}> |
| {(filteredPackages.length && | ||
| filteredPackages.map((pkg) => ( | ||
| <tr key={pkg.name}> | ||
| <td> |
There was a problem hiding this comment.
| <td> | |
| <td style={{ border: '1px solid #ddd', padding: '8px' }}> |
| {highlightSubstring(pkg.name, searchTermLower)} | ||
| </a> | ||
| </td> | ||
| <td> |
There was a problem hiding this comment.
| <td> | |
| <td style={{ border: '1px solid #ddd', padding: '8px' }}> |
|
I tried the suggestions locally but, while centered, the table width is still content-dependent, which makes everything jump a bit as the table gets regenerated. I'm going to merge for now to see if the whole thing works in production, and we can adjust the UI later. |
PR Checklist:
Part of #1971. Needs conda-forge/feedstock-outputs#58.
The new implementation will be available under
/packages./feedstock-outputsredirects there.