Port learning path to hugo compatible markdown #628
Conversation
Signed-off-by: vishalvivekm <[email protected]>
Signed-off-by: vishalvivekm <[email protected]>
Signed-off-by: vishalvivekm <[email protected]>
✅ Deploy Preview for bejewelled-pegasus-b0ce81 ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Signed-off-by: vishalvivekm <[email protected]>
Signed-off-by: vishalvivekm <[email protected]>
layouts/shortcodes/image.html
Outdated
| {{ $title := .Get "title" | default "" }} | ||
|
|
||
| <div class="image-container" style="text-align: {{ $align }}; margin: 1rem 0;"> | ||
| <img src="{{ $src | safeURL }}" alt="{{ $alt }}" {{ with $title }}title="{{ . }}"{{ end }} style="width: {{ $width }}; max-width: 100%; height: auto; border-radius: 0.5rem; box-shadow: 0 0 0.5rem rgba(0, 179, 159, 0.4);" data-modal="true" onclick="openModal(this)" /> |
There was a problem hiding this comment.
Hi @vishalvivekm,
Great work! I learned a lot from it.✍️
I noticed that the images on these new pages look a bit different from those in the rest of our docs. It seems the inline styles in image.html are overriding the global CSS, causing inconsistent sizing (they appear to be 100% width).
Perhaps we could refactor layouts/shortcodes/image.html to produce a similar HTML structure to our layouts/_default/_markup/render-image.html file. This would ensure that no matter which method is used to add an image, the styling remains the same across the entire site.
What do you think?👀
For comparison:
| Standard Doc Image | New Learning Path Image |
|
|
Signed-off-by: vishalvivekm <[email protected]>
There was a problem hiding this comment.
Hi @vishalvivekm
I noticed a couple of minor rendering issues. I did some experimenting and I think I've found the causes:
-
alertShortcode Rendering Issue: On pages likeinterpreting-meshery-designs, thealertshortcodes aren't rendering correctly. The content inside isn't parsed as Markdown (e.g.,**text**appears with raw asterisks) and the component is missing its proper CSS styling.
I found that this only happens when thealertis nested inside the{{< chapterstyle >}}shortcode. After I removed thechapterstylewrapper from the top and bottom of the file, thealertrendered perfectly. But I'm not sure if this has any other purpose.🤔 -
Bulleted List Formatting: In the screenshot I'm looking at from
reviewing-designs, some bulleted lists (* ...) are broken into separate paragraphs.
An extra blank line between list items will break the<ul>list.
Hope this feedback is helpful. Amazing work on this huge migration!
|
|
||
| **How It Works:** | ||
|
|
||
| * **Lock Comments:** By locking a comment, you ensure that it stays in place. This can be particularly useful for critical components that form the backbone of your design. |
There was a problem hiding this comment.
| * **Lock Comments:** By locking a comment, you ensure that it stays in place. This can be particularly useful for critical components that form the backbone of your design. | |
| * **Lock Comments:** By locking a comment, you ensure that it stays in place. This can be particularly useful for critical components that form the backbone of your design. |
Notes for Reviewers
This PR fixes #
https://deploy-preview-628--bejewelled-pegasus-b0ce81.netlify.app/learning-paths/
Signed commits