feat: updated website with styling and more examples #88
Conversation
novaotp
changed the title
There was a problem hiding this comment.
Given the changes in this PR, we probably want to define at least a partial build task, because the page itself shouldn't need to run client-side code just to "finish rendering itself".
There's also a bunch of general cleanup we can do wrt CSS, SVG, and markup, but this is a great first pass, thank you for helping!
| draggable="false" | ||
| /> | ||
| </div> | ||
| <html lang="en"> |
There was a problem hiding this comment.
please keep this two-space indented
| <header id="navbar"> | ||
| <a href="https://github.com/drag-drop-touch-js/dragdroptouch" target="_blank"> | ||
| <svg | ||
| xmlns="http://www.w3.org/2000/svg" |
There was a problem hiding this comment.
When used in HTML5, SVG elements do not count as XML, and do not use namespaces.
| stroke-linejoin="round" | ||
| class="icon icon-tabler icons-tabler-outline icon-tabler-brand-github" | ||
| > | ||
| <path stroke="none" d="M0 0h24v24H0z" fill="none" /> |
| fill="none" | ||
| stroke="currentColor" | ||
| stroke-width="2" | ||
| stroke-linecap="round" | ||
| stroke-linejoin="round" |
There was a problem hiding this comment.
Let's not use inline styling - when used as a regular HTML5 element any SVG element is subject to CSS just like every else (but require you to set the SVG-specific CSS properties like stroke or fill rather than color and background of course)
| > | ||
| </div> | ||
| </div> | ||
| <div id="content"> |
There was a problem hiding this comment.
We don't need to duplicate the entire nav, just use @media (...) on the CSS side to style things appropriately based on viewport dimensions.
| const importMetaErrorCode = document.querySelector(`#import-meta-error-code`); | ||
| importMetaErrorCode.innerHTML = await codeToHtml( | ||
| `Uncaught SyntaxError: import.meta may only appear in a module`, | ||
| { | ||
| lang: "html", | ||
| theme: "catppuccin-latte", | ||
| } | ||
| ); |
There was a problem hiding this comment.
As long as we write proper JS, this error does not need handling.
| /** Highlight the code with Shiki. */ | ||
| const downloadPolyfillCode = document.querySelector(`#download-polyfill-code`); | ||
| downloadPolyfillCode.innerHTML = await codeToHtml( | ||
| `<script | ||
| src="drag-drop-touch.esm.min.js?autoload" | ||
| type="module" | ||
| ></script>`, | ||
| { | ||
| lang: "javascript", | ||
| theme: "catppuccin-latte", | ||
| } | ||
| ); |
There was a problem hiding this comment.
If we're inlining SVG, let's also inline the syntax-highlighted code. That way, this code only needs to run once (at build time) rather than having to run as many times as there are people visiting this page.
| html, | ||
| body { | ||
| position: relative; | ||
| width: 100%; | ||
| height: 100dvh; | ||
| overflow: hidden; | ||
| } |
There was a problem hiding this comment.
Let's not do this: this is a normal web page, not a single-page app. The polyfill should work for pages with scrollbars just fine.
There was a problem hiding this comment.
Also, since CSS nesting has been part of the standard for a year now, and tooling like VS Code understand nesting just fine, let's not add a whole bunch of flat rules. Nest where we can, and if we need "component"-specific rules that need global declaration, we can @import those from a separate file (although I don't think that necessary here)
| @@ -1,46 +1,579 @@ | |||
| [draggable] { | |||
| user-select: none; | |||
| * { | |||
There was a problem hiding this comment.
Why are we adding a * rule here? Just assign the font-family for the html,body rule, and the C in CSS will take care of the rest.
|
|
||
| a { | ||
| color: black; | ||
| text-decoration: none; |
There was a problem hiding this comment.
Let's not mess with accessibility: this is not an app, it's still a normal webpage, so links can stay default coloured and underlined.
|
Sorry to see you close this PR |
Closes #73