Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adds MDX support and a Tab component for the different examples #2810

Merged
merged 9 commits into from
Jan 26, 2021

Conversation

alexandercarls
Copy link
Contributor

@alexandercarls alexandercarls commented Jan 4, 2021

  • Added MDX Support while needing to reimplement some remark-Plugins.
  • Reworked the Table of Contents due to the new data structure.
  • Side effect: I also fixed ToC reloading on every link click when the page is first visited and react/gatsby routing didn't take place yet.
  • Side effect: I fixed that the document headers are not hidden behind the top document bar for mobile and small desktop screensize.
  • Added a granular Tabs component and a tailored ExampleTabs component for the domain with the fixed three different approaches.
  • Copy-Toastr is not a faithful reimplementation. I like the "new" one better :).

TODO after deployment (prod/staging):

  • Verify if the plugin @darth-knoppix/gatsby-plugin-feed still works with the html field, given that we now process mdx and feed reader look as clean as before.

Couldn't fix, waiting for new version:

@michaelstaib
Copy link
Member

Awesome, can't wait for this one :)

@fredericbirke fredericbirke linked an issue Jan 5, 2021 that may be closed by this pull request
@rstaib
Copy link
Member

rstaib commented Jan 7, 2021

Cannot wait to see it in action 👍

@alexandercarls alexandercarls force-pushed the ac/example-tabs branch 3 times, most recently from 917af8f to e84e988 Compare January 8, 2021 23:13
@alexandercarls
Copy link
Contributor Author

The tabs currently look like this:

Desktop:

image

Mobile (iPhone SE):

image

@PascalSenn
Copy link
Member

@alex

The tabs currently look like this:

Desktop:

image

Mobile (iPhone SE):

image

this is really cool!!

@PascalSenn
Copy link
Member

we could even play around with a dropdown in the mobile version. this may scale better with more than three tabs

@alexandercarls
Copy link
Contributor Author

alexandercarls commented Jan 9, 2021

we could even play around with a dropdown in the mobile version. this may scale better with more than three tabs

That is certainly an improvement. I decided not to do it yet, as we currently don't have more than three tabs and ExampleTabs is tailored for the three different approaches.

I would improve it when the scenario comes up :).

@rstaib
Copy link
Member

rstaib commented Jan 9, 2021

Very cool to see progress on the tabs component, just let me know when I could start the review.

@alexandercarls alexandercarls force-pushed the ac/example-tabs branch 7 times, most recently from 7e0ec01 to 69aab20 Compare January 18, 2021 22:14
@alexandercarls alexandercarls marked this pull request as ready for review January 18, 2021 22:34
@alexandercarls
Copy link
Contributor Author

@rstaib ready for review :)

@fredericbirke fredericbirke self-requested a review January 24, 2021 11:36
@fredericbirke
Copy link
Contributor

fredericbirke commented Jan 24, 2021

I checked rss/atom/feed files and they are valid and working:
image
They are even looking better than the current prod ones. Only thing we could improv are the headings for rss, the old ones link to the website if clicked, but this is more a nice to have.

There are still some issues, which all will be fixed in a follow up, because they provide the business value and are only small issies:
Tabs still don't look great:
image

Tabs with text before code look bad:
image

@fredericbirke fredericbirke mentioned this pull request Jan 24, 2021
fredericbirke
fredericbirke previously approved these changes Jan 24, 2021
Copy link
Contributor

@fredericbirke fredericbirke left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There are still some design issues, all described in this follow up:
#2930

Everything else is fine!

@alexandercarls
Copy link
Contributor Author

Added a new commit 7b770ce which fixed the horizontal scrolling in the pre tag for small viewports (i.e. language indicator and copy button no longer scroll) and added some margin when a tab begins with a paragraph.

@fredericbirke fredericbirke self-requested a review January 24, 2021 16:35
fredericbirke
fredericbirke previously approved these changes Jan 24, 2021
Copy link
Contributor

@fredericbirke fredericbirke left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@PascalSenn
Copy link
Member

/AzurePipelines Run

@azure-pipelines
Copy link

Azure Pipelines successfully started running 2 pipeline(s).

@sonarcloud
Copy link

sonarcloud bot commented Jan 24, 2021

Kudos, SonarCloud Quality Gate passed!

Bug A 0 Bugs
Vulnerability A 0 Vulnerabilities
Security Hotspot A 0 Security Hotspots
Code Smell A 0 Code Smells

No Coverage information No Coverage information
No Duplication information No Duplication information

Copy link
Member

@rstaib rstaib left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good work! Just a few comments.

website/package.json Outdated Show resolved Hide resolved
website/src/blog/2019-01-24-schema-stitching.md Outdated Show resolved Hide resolved
website/src/blog/2019-01-24-schema-stitching.md Outdated Show resolved Hide resolved
website/src/components/mdx/auto-linked-heading.tsx Outdated Show resolved Hide resolved
website/src/components/mdx/auto-linked-heading.tsx Outdated Show resolved Hide resolved
website/src/components/mdx/code-block.tsx Outdated Show resolved Hide resolved
website/src/components/mdx/copy.tsx Outdated Show resolved Hide resolved
@rstaib
Copy link
Member

rstaib commented Jan 25, 2021

@fredericbirke at the moment we should not have any text in tabs. If so, then we should probably rewrite the section.

@rstaib
Copy link
Member

rstaib commented Jan 25, 2021

@fredericbirke can you point me to the file where you found text inside a tab!? thanks

@alexandercarls
Copy link
Contributor Author

alexandercarls commented Jan 25, 2021

@fredericbirke can you point me to the file where you found text inside a tab!? thanks

@rstaib
http://localhost:8000/docs/hotchocolate/defining-a-schema/unions-and-interfaces#interface-definition

@rstaib
Copy link
Member

rstaib commented Jan 25, 2021

@fredericbirke we should rewrite that. But for now we keep it look ugly.

Copy link
Member

@rstaib rstaib left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Look good! Just one more thing :-D Could you please run yarn format so that prettier takes care of code styling.

@rstaib rstaib merged commit cc9652f into ChilliCream:main Jan 26, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Code Tab Switcher
5 participants