Merge pull request #39 from webcomponents-preview/feature/38-improve-…

…readme-handling

Feature/38 improve readme handling

src/components/feature/readme-frame/README.md

@@ -8,10 +8,9 @@
 
 ## CSS Properties
 
-| Name                          | Default | Description                        |
-| ----------------------------- | ------- | ---------------------------------- |
-| `--wcp-readme-frame-distance` |         | Outer margin of the preview frame  |
-| `--wcp-readme-frame-spacing`  |         | Inner padding of the preview frame |
+| Name                         | Default | Description                        |
+| ---------------------------- | ------- | ---------------------------------- |
+| `--wcp-readme-frame-spacing` |         | Inner padding of the preview frame |
 
 ## Slots
 

src/components/feature/readme-frame/readme-frame.component.scss

@@ -2,15 +2,10 @@
 
 // prettier-ignore
 :host {
-  ---wcp-readme-frame-distance: var(--wcp-readme-frame-distance, #{0 utils.size(1)});
-  ---wcp-readme-frame-spacing: var(--wcp-readme-frame-spacing, #{utils.size(1)});
+  ---wcp-readme-frame-spacing: var(--wcp-readme-frame-spacing, #{utils.size(1) utils.size(2)});
 }
 
 :host {
   display: block;
   padding: var(---wcp-readme-frame-spacing);
-
-  @include utils.breakpoint(sm) {
-    margin: var(---wcp-readme-frame-distance);
-  }
 }

src/components/feature/readme-frame/readme-frame.component.ts

@@ -11,7 +11,6 @@ import styles from './readme-frame.component.scss';
  *
  * @slot - The readme frame is usually filled with a readme element.
  *
- * @cssprop --wcp-readme-frame-distance - Outer margin of the preview frame
  * @cssprop --wcp-readme-frame-spacing - Inner padding of the preview frame
  */
 @customElement('wcp-readme-frame')

src/components/root/root.component.scss

@@ -1,3 +1,5 @@
+@use 'sass:map';
+@use 'sass:math';
 @use '@/styles/utils' as utils;
 
 // prettier-ignore
@@ -50,16 +52,23 @@
 
   background-color: var(---wcp-root-background);
   color: var(---wcp-root-color);
-  
+
   font-family: var(--wcp-font-family);
   font-feature-settings: normal;
   font-size: 15px;
   line-height: 1.3;
 
-
   @include utils.breakpoint(sm) {
     font-size: 13px;
   }
+
+  @include utils.breakpoint(md) {
+    font-size: 15px;
+  }
+
+  @include utils.breakpoint(lg) {
+    font-size: 17px;
+  }
 }
 
 :host(:not([inline])) {

src/components/root/root.component.ts

@@ -9,6 +9,7 @@ import { when } from 'lit/directives/when.js';
 
 import { ColorSchemable } from '@/utils/color-scheme.utils';
 import { Config, getConfig } from '@/utils/config.utils';
+import { prefixRelativeUrls } from '@/utils/markdown.utils';
 import type { Element, Manifest } from '@/utils/parser.types';
 import { parseCEM } from '@/parsers/cem/parse';
 import { Routable } from '@/utils/routable.utils';
@@ -167,7 +168,10 @@ export class Root extends Routable(ColorSchemable(LitElement)) {
 
   protected renderReadme(url: string): TemplateResult {
     // fetch the readme contents and parse it as markdown
-    const markdown = fetch(url).then((response) => response.text());
+    const path = url.substring(0, url.lastIndexOf('/') + 1);
+    const markdown = fetch(url)
+      .then((response) => response.text())
+      .then((markdown) => prefixRelativeUrls(markdown, path));
     return html`
       <wcp-readme-frame>
         <wcp-readme markdown="${until(markdown, '')}"></wcp-readme>

src/styles/mixins/breakpoint.mixin.scss

@@ -3,8 +3,10 @@
 // use scss variables for media queries
 $breakpoints: (
   xs: 480px,
-  // unsued yet
   sm: 768px,
+  md: 992px,
+  lg: 1200px,
+  xl: 1600px,
 );
 
 @mixin breakpoint($name) {

src/utils/markdown.utils.spec.ts

@@ -0,0 +1,15 @@
+import { prefixRelativeUrls } from './markdown.utils';
+
+describe('markdown.utils', () => {
+  describe('prefixRelativeUrls', () => {
+    it('prefixes relative urls', () => {
+      expect(prefixRelativeUrls('[foo](bar)', 'baz/')).toBe('[foo](baz/bar)');
+      expect(prefixRelativeUrls('[foo](./bar)', 'baz/')).toBe('[foo](baz/bar)');
+    });
+
+    it('does not prefix absolute urls', () => {
+      expect(prefixRelativeUrls('[foo](https://bar)', 'baz/')).toBe('[foo](https://bar)');
+      expect(prefixRelativeUrls('[foo](/bar)', 'baz/')).toBe('[foo](/bar)');
+    });
+  });
+});

src/utils/markdown.utils.ts

@@ -6,6 +6,11 @@ export function getCodeExample(slot: HTMLSlotElement): string {
   return slot.assignedElements().reduce((acc, el) => `${acc}\n${el.outerHTML}`, '');
 }
 
+export function prefixRelativeUrls(markdown: string, path: string): string {
+  // https://regex101.com/r/Hqh28g/2
+  return markdown.replace(/(\[[^\]]*\]\()(?!http|\/)(?:\.\/)?([^)]*)(\))/g, `$1${path}$2$3`);
+}
+
 export function renderMarkdown(mardown: string, addCodePreview = true): string {
   return marked(mardown, {
     highlight(code: string, lang: string) {