Restyle Add templates to doc pages and give docs home one#1335
Merged
Conversation
shcheklein
added a commit
that referenced
this pull request
May 22, 2020
* Add templates to doc pages and give docs home one - Default docs page template moved from `src/templates/doc-home.tsx` to `src/templates/doc.tsx`. A new homepage-specific (but currently identical) template has been added in its place. - Added frontmatter to docs home source to define the template - Docs now have a "template" field, which when defined changes the component used to make its page. This is a file relative to `src/templates` with the extension left off. This defaults to `doc`, or the file `src/templates/doc.tsx`. This is not currently on blog posts. * Add "card" and "cards" custom components to Docs * Create some example content with the new custom card components This is not intended to be final, but show off the general premise of how using custom components for this kind of layout would look like. The card and cards components are, on top of being fully stylable with CSS modules, capable of using arbitrary Markdown images or elements as the card "logo" when the `logo` prop is set to `true` (or anything truthy, like the string `"true"`). This works around the complexity of working in custom image capability by leaning on the one we already have in Markdown. To make a card with a logo, set the "logo" prop to true and make sure the first element in the card contains the image you want- this element will be set aside in its own div, with the rest of the contents displayed beside it using `flex` There are some quirks with Remark custom components, though: - custom components aren't indented - custom components must be contained to one line, including props. - custom components can include Markdown, but there must be an empty line between the transition. - self-closing tags aren't supported Should we use custom components more often, we can migrate to MDX (I actually already have a fully working branch with it that I made on my own time) which handles this syntax much more comfortably because it's designed around the concept. All our custom remark-based logic will cleanly port because MDX actually uses Remark in its pipeline. * Resolve TS issues in example * Remove doc home template and example images In an effort to make the current solution good enough to fit release, I've removed the alternate template since this branch currently favors custom components. * Add example images to all home cards, and remove example heading. * Remove images from cards in doc home content * Improve Cards and add href feature. Cards now accept a `href` prop, which turns the whole card into a link. This is our Link wrapper, so we get the same automatic `rel` and `target` setting for external links as well as Gatsby Link for internal ones. This link spans the whole card, and has some styling to go along with it. Currently the hover style is set to a slight grow animation, but it could be anything. Most of the `children`-modifying hackery has been removed in favor of wrapping all Cards. This also brings a degree of consistency to Cards, and we can apply indivual styles if the need arises. It's still needed for the Card Images, however, since newlines that show up in `children` are mandatory for how rehype's React and MD are separated. * Change doc home content - Make each Card a single link applied via the new `href` part - Add headings to each card - Remove card icons * Change hover animation to background-color Now they match the right side buttons, aside from the animated transition. * index: simplify and update content * Restyled by prettier (#1335) Co-authored-by: Restyled.io <commits@restyled.io> * home page, get started - fix the link * docs index - change oder, cards should go first * home index: return use cases * card style: less contrast for the heading * docs home page: update cards text Co-authored-by: Ivan Shcheklein <shcheklein@gmail.com> Co-authored-by: restyled-io[bot] <32688539+restyled-io[bot]@users.noreply.github.com> Co-authored-by: Restyled.io <commits@restyled.io>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Automated style fixes for #1268, created by Restyled.
The following restylers made fixes:
To incorporate these changes, merge this Pull Request into the original. We
recommend using the Squash or Rebase strategies.
NOTE: As work continues on the original Pull Request, this process will
re-run and update (force-push) this Pull Request with updated style fixes as
necessary. If the style is fixed manually at any point (i.e. this process finds
no fixes to make), this Pull Request will be closed automatically.
Sorry if this was unexpected. To disable it, see our documentation.