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

Convert markdown page to one big example #1065

Merged
merged 4 commits into from
May 21, 2020

Conversation

simurai
Copy link
Contributor

@simurai simurai commented Apr 13, 2020

This is a left-over from #917. It shows the markdown content (that got manually converted to HTML) as a live example.

Before After
Rendered by Doctocat Single live example
  • Benefit: It should be more accurate to test changes since it uses Primer CSS's .markdown-body styling instead of Doctocat (Primer Components).
  • Downside: Harder to update the HTML. The "source" also needs to be kept in sync.

@vercel
Copy link

vercel bot commented Apr 13, 2020

This pull request is being automatically deployed with ZEIT Now (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://zeit.co/primer/primer-css/jic7tls0s
✅ Preview: https://primer-css-git-markdown-table-refactor-2.primer.now.sh

@simurai simurai requested review from a team and emilybrick and removed request for a team April 13, 2020 03:10
@emilybrick
Copy link
Contributor

I need to catch up on some context but aside from the benefits listed in the description, how come there's now a border around the markdown content?
Screenshot 2020-04-13 17 08 06

The other difference i notice is a missing TOC
Screenshot 2020-04-13 17 05 12

^ I'm fine getting rid of this sticky TOC if that's intended.

@simurai
Copy link
Contributor Author

simurai commented Apr 14, 2020

I need to catch up on some context

The difference is that before we were testing markdown styling by just writing the markdown "as if it was the content". And therefore Primer Components did the styling. This PR convertes the markdown to HTML and then wrapps it in a "live example" by adding these 3 backticks ```html live.

Before:

# Header 1

After

```html live
<h1>Header 1</h1>
```

Now since it's a "live example", Primer CSS and the .markdown-body styles are getting used. There shouldn't be a big difference, but good to catch any bugs or so.

how come there's now a border around the markdown content?

This is just the normal border that is shown around "live examples". It might look a bit odd since the markdown example is huge and you need to scroll a long time to reach the "code". Smaller ones look like this:

image

The other difference i notice is a missing TOC
I'm fine getting rid of this sticky TOC if that's intended.

Yeah, the TOC wasn't really useful since the headers are only there to test how headers render, but not to navigate between different sections like on normal pages.

Co-Authored-By: Emily Brick <emilybrick@github.com>
@vercel vercel bot temporarily deployed to Preview April 14, 2020 02:55 Inactive
@vercel vercel bot temporarily deployed to Preview April 14, 2020 03:08 Inactive
Copy link
Contributor

@emilybrick emilybrick left a comment

Choose a reason for hiding this comment

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

👍

@simurai simurai changed the base branch from master to release-14.4.0 May 21, 2020 06:58
@simurai simurai merged commit 81d833f into release-14.4.0 May 21, 2020
@simurai simurai deleted the markdown-table-refactor-2 branch May 21, 2020 06:58
@simurai simurai mentioned this pull request May 21, 2020
5 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants