msc-viewer

A possibly better way to display the Matrix Spec Changes
git clone git://archive.git.mtrnord.blog/MTRNord/msc-viewer.git
Log | Files | Refs | README | LICENSE

Preview.astro (2456B)

      1 ---
      2 import { marked } from "marked";
      3 interface Props {
      4     title: string;
      5     author: string;
      6     content: string;
      7     id: number;
      8 }
      9 
     10 const { title, author, content, id } = Astro.props;
     11 const content_split = content.split(/\r?\n/);
     12 content_split.length = Math.min(content_split.length, 5);
     13 const content_joined = content_split.join("\n");
     14 
     15 const markdown = marked.parse(content_joined, { breaks: true, gfm: true });
     16 ---
     17 
     18 <div class="outer-post">
     19     <div class="post">
     20         <a href={`/mscs/${id}`}>{title}</a>
     21         <h2>{author}</h2>
     22         <div class="markdown-wrapper">
     23             <Fragment set:html={markdown} />
     24         </div>
     25     </div>
     26     <hr />
     27 </div>
     28 
     29 <style lang="scss">
     30     .outer-post {
     31         display: flex;
     32         flex-direction: column;
     33         align-items: flex-start;
     34         gap: var(--spacing-2, 8px);
     35         align-self: stretch;
     36 
     37         hr {
     38             border-color: var(--colors-slate-500, #64748b);
     39             width: 100%;
     40         }
     41     }
     42     .post {
     43         display: flex;
     44         padding: 0px var(--spacing-2, 8px) var(--spacing-2, 8px)
     45             var(--spacing-2, 8px);
     46         flex-direction: column;
     47         align-items: flex-start;
     48         gap: 8px;
     49         align-self: stretch;
     50 
     51         a {
     52             color: var(--colors-neutral-50, #fafafa);
     53             font-size: 24px;
     54             font-style: normal;
     55             font-weight: 500;
     56         }
     57 
     58         a:hover {
     59             color: var(--colors-neutral-200, rgb(229 229 229));
     60             text-decoration: underline;
     61         }
     62 
     63         h2 {
     64             color: var(--colors-neutral-50, #fafafa);
     65             font-size: 16px;
     66             font-style: normal;
     67             font-weight: 300;
     68         }
     69 
     70         .markdown-wrapper {
     71             color: var(--colors-neutral-50, #fafafa);
     72             font-size: 16px;
     73             font-style: normal;
     74             font-weight: 400;
     75             align-self: stretch;
     76         }
     77     }
     78 </style>
     79 
     80 <style is:inline>
     81     .markdown-wrapper {
     82         a {
     83             color: var(--colors-amber-200, rgb(253 230 138));
     84             text-decoration: none;
     85         }
     86         a:hover {
     87             color: var(--colors-amber-100, rgb(254 243 199));
     88             text-decoration: underline;
     89         }
     90         ul {
     91             list-style-type: disc;
     92             margin-left: 2em;
     93         }
     94 
     95         ol {
     96             list-style-type: decimal;
     97             margin-left: 2em;
     98         }
     99 
    100         hr {
    101             width: 0;
    102         }
    103     }
    104 </style>