Slides v0 #76
Slides v0 #76
Conversation
| {{ body }} | ||
| </MarkdownHTML> | ||
| </div> | ||
| </template> |
There was a problem hiding this comment.
Small change, factoring out the prme body html that renders markdown (joined pr, and review) into a single component given that both slides and page views use this.
| {{ body }} | ||
| </MarkdownHTML> | ||
| </div> | ||
| <BodyMarkdown :model="model" /> |
There was a problem hiding this comment.
Using the new BodyMarkdown component on the page.
| <template> | ||
| <div> | ||
| <ComponentCard :badge="idx" title-class=""> | ||
| <template #title> | ||
| <code>{{ comment.path }}</code> | ||
| </template> | ||
| <template #body> | ||
| <div class="overflow-scroll text-lg max-h-[70vh]"> | ||
| <DiffBlock :comment="comment" /> | ||
| </div> | ||
| </template> | ||
| </ComponentCard> | ||
| <div class="max-w-2xl mx-auto text-center"> | ||
| <MarkdownHTML>{{ commentBody }}</MarkdownHTML> | ||
| </div> | ||
| </div> | ||
| </template> |
There was a problem hiding this comment.
SlideCard is a new component for how we render slides.
Currently, it goes basically full width, reusing the ComponentCard which is a horrible name, for the code-block-diff and then the comment underneath (no real styling).
|
|
||
| <div v-for="(c, i) in model.comments" :key="i"> | ||
| <SlideCard | ||
| v-if="i+2==current" :comment="c" |
There was a problem hiding this comment.
This is kind of silly, but renders the SlideCard only if the current index (mapped/controlled) by current state and keypresses, is this one.
It's brittle because the number of slides preceding the comments is hardcoded to 2.
When we end up adding more slides either before the comments or after, this will break.
| FIN | ||
| </div> | ||
| </div> | ||
| <div class="flex-grow" /> |
There was a problem hiding this comment.
Vertically center sandwiching things with flex-grow.
| "nuxt": "^3.4.3", | ||
| "postcss": "^8.4.21", | ||
| "tailwindcss": "^3.3.1" | ||
| "eslint": "^8.41.0", |
There was a problem hiding this comment.
Unrelated dependency updates.
| <div v-else class="absolute top-0 left-0 right-0 bottom-0"> | ||
| <SlideShow :model="data" /> | ||
| </div> |
There was a problem hiding this comment.
- This is mostly a clone of the non slides page except for the slide content is absolutely positioned so that its centered in the viewport, because I'm bad at CSS.
- Future work will factor out the "chrome" and API fetching business.
Testing other markdown formatting things in this render.
No description provided.