Conversation
|
|
Review or Edit in CodeSandboxOpen the branch in Web Editor • VS Code • Insiders |
✅ Deploy Preview for histoire-site ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ Deploy Preview for histoire-controls ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ Deploy Preview for histoire-examples-vue3 ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ Deploy Preview for histoire-examples-svelte3 ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Summary of ChangesHello @vaga, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request focuses on enhancing the visual presentation and consistency of Markdown files within the application. By adjusting typography styles and ensuring proper theme application for elements like blockquotes and tables, the changes aim to provide a more cohesive and readable experience for documentation across various themes. Highlights
🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console. Changelog
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
The pull request significantly enhances the readability of Markdown documentation by improving visual consistency across themes, fixing blockquote styling, and adding table borders. The changes are well-implemented and address the stated goals effectively.
| --- | ||
| __Advertisement :)__ | ||
|
|
||
| - __[pica](https://nodeca.github.io/pica/demo/)__ - high quality and fast image | ||
| resize in browser. | ||
| - __[babelfish](https://github.com/nodeca/babelfish/)__ - developer friendly | ||
| i18n with plurals support and easy syntax. | ||
|
|
||
| You will like those projects! | ||
|
|
||
| --- | ||
|
|
||
| # h1 Heading 8-) | ||
| ## h2 Heading | ||
| ### h3 Heading | ||
| #### h4 Heading | ||
| ##### h5 Heading | ||
| ###### h6 Heading | ||
|
|
||
| ## Horizontal Rules | ||
|
|
||
| ___ | ||
|
|
||
| --- | ||
|
|
||
| *** | ||
|
|
||
| ## Typographic replacements | ||
|
|
||
| Enable typographer option to see result. | ||
|
|
||
| (c) (C) (r) (R) (tm) (TM) (p) (P) +- | ||
|
|
||
| test.. test... test..... test?..... test!.... | ||
|
|
||
| !!!!!! ???? ,, -- --- | ||
|
|
||
| "Smartypants, double quotes" and 'single quotes' | ||
|
|
||
| ## Emphasis | ||
|
|
||
| **This is bold text** | ||
|
|
||
| __This is bold text__ | ||
|
|
||
| *This is italic text* | ||
|
|
||
| _This is italic text_ | ||
|
|
||
| ~~Strikethrough~~ | ||
|
|
||
| ## Blockquotes | ||
|
|
||
| > Blockquotes can also be nested... | ||
| >> ...by using additional greater-than signs right next to each other... | ||
| > > > ...or with spaces between arrows. | ||
|
|
||
| ## Lists | ||
|
|
||
| Unordered | ||
|
|
||
| + Create a list by starting a line with `+`, `-`, or `*` | ||
| + Sub-lists are made by indenting 2 spaces: | ||
| - Marker character change forces new list start: | ||
| * Ac tristique libero volutpat at | ||
| + Facilisis in pretium nisl aliquet | ||
| - Nulla volutpat aliquam velit | ||
| + Very easy! | ||
|
|
||
| Ordered | ||
|
|
||
| 1. Lorem ipsum dolor sit amet | ||
| 2. Consectetur adipiscing elit | ||
| 3. Integer molestie lorem at massa | ||
|
|
||
| 1. You can use sequential numbers... | ||
| 1. ...or keep all the numbers as `1.` | ||
|
|
||
| Start numbering with offset: | ||
|
|
||
| 57. foo | ||
| 1. bar | ||
|
|
||
| ## Code | ||
|
|
||
| Inline `code` | ||
|
|
||
| Indented code | ||
|
|
||
| // Some comments | ||
| line 1 of code | ||
| line 2 of code | ||
| line 3 of code | ||
|
|
||
| Block code "fences" | ||
|
|
||
| ``` | ||
| Sample text here... | ||
| ``` | ||
|
|
||
| Syntax highlighting | ||
|
|
||
| ``` js | ||
| const foo = function (bar) { | ||
| return bar++ | ||
| } | ||
|
|
||
| console.warn(foo(5)) | ||
| ``` | ||
|
|
||
| ## Tables | ||
|
|
||
| | Option | Description | | ||
| | ------ | ----------- | | ||
| | data | path to data files to supply the data that will be passed into templates. | | ||
| | engine | engine to be used for processing templates. Handlebars is the default. | | ||
| | ext | extension to be used for dest files. | | ||
|
|
||
| Right aligned columns | ||
|
|
||
| | Option | Description | | ||
| | ------:| -----------:| | ||
| | data | path to data files to supply the data that will be passed into templates. | | ||
| | engine | engine to be used for processing templates. Handlebars is the default. | | ||
| | ext | extension to be used for dest files. | | ||
|
|
||
| ## Links | ||
|
|
||
| [link text](http://dev.nodeca.com) | ||
|
|
||
| [link with title](http://nodeca.github.io/pica/demo/ "title text!") | ||
|
|
||
| Autoconverted link https://github.com/nodeca/pica (enable linkify to see) | ||
|
|
||
| ## Images | ||
|
|
||
|  | ||
|  |
There was a problem hiding this comment.
Adding extensive markdown content to a story file directly can make the file very long and potentially harder to maintain. While this is for demonstration purposes, consider if a separate .md file linked to the story would be more appropriate for very large documentation sections in a real-world scenario to keep story files focused on the story itself.
| border-width: 0; | ||
| border-style: solid; | ||
| border-color: #e5e7eb; | ||
| } |
There was a problem hiding this comment.
The removal of border-style: solid; and border-color: #e5e7eb; from the universal ::after pseudo-element is a significant change. While this might be intended to simplify styling as mentioned in the PR description, it could potentially affect other elements that rely on these default border styles. It's good that the tailwind.config.cjs file explicitly adds borderStyle: 'solid' for thead, tr, blockquote, but a more targeted removal here might be safer if other components implicitly relied on these global defaults.
| 'blockquote': { | ||
| 'marginLeft': 0, | ||
| 'marginRight': 0, | ||
| 'backgroundColor': theme('colors.gray-100'), | ||
| 'padding': '.25rem .375rem', | ||
|
|
||
| '& p:first-child': { | ||
| marginTop: 0, | ||
| }, | ||
|
|
||
| '& p:last-child': { | ||
| marginBottom: 0, | ||
| }, | ||
|
|
||
| '.dark &': { | ||
| backgroundColor: theme('colors.gray-750'), | ||
| }, | ||
| marginInlineStart: '0.375rem', | ||
| marginInlineEnd: '0.375rem', | ||
| }, |
There was a problem hiding this comment.
The removal of specific styling for a tags, h1-h4, th, li, and code elements from the Tailwind typography plugin's DEFAULT CSS block means these elements will now rely solely on Tailwind's default typography styles or other global styles. While the PR aims for simplified styling, ensure that the new default styles for these elements are visually consistent and meet the desired readability standards across all themes. For example, the previous a tag styling included textDecoration: 'none' and &:hover: { textDecoration: 'underline' }, which provided a clear visual cue for links. The new setup might lose this specific behavior.
| '--tw-prose-links': theme('colors.primary-500'), | ||
| '--tw-prose-pre-bg': theme('colors.gray-800'), |
There was a problem hiding this comment.
The previous blockquote styling included backgroundColor and padding which provided a distinct visual appearance. The new marginInlineStart and marginInlineEnd only control the horizontal spacing. While the PR description mentions simplifying styling, ensure that the new blockquote appearance is still clear and distinguishable, especially in different themes, as the background color was explicitly handled for dark mode previously.
1 participant
Description
This PR improves the readability of Markdown documentation by refining the visual consistency across different themes.
Additional context
I'm open to feedback and further improvements. Let me know if you have any suggestions, and I'll be happy to implement them.
What is the purpose of this pull request?
Before submitting the PR, please make sure you do the following
fixes #123).