feat(site): support custom markdown route

Author: xiejay97

packages/site/.gitignore

@@ -3,4 +3,5 @@ src/app/configs/*
 
 src/app/i18n/resources.json
 
-src/app/routes/components/
+src/app/routes/components/*
+!src/app/routes/components/*.md

packages/site/src/app/components/route/DemoBox.scss

@@ -1,6 +1,6 @@
 @import '~rfs/scss';
 
-.app-route__anchor {
+.app-route-article__anchor {
   position: fixed;
   top: 120px;
   right: 20px;
@@ -13,7 +13,7 @@
   }
 }
 
-.app-route__anchor-conatiner {
+.app-route-article__anchor-conatiner {
   position: fixed;
   right: 0;
   bottom: 0;
@@ -27,7 +27,7 @@
   background-color: var(--d-background-color);
 }
 
-.app-route__anchor-button {
+.app-route-article__anchor-button {
   position: fixed;
   right: 20px;
   bottom: 44px;
@@ -49,169 +49,3 @@
 
   appearance: none;
 }
-
-.app-route-article {
-  code {
-    word-break: break-all;
-  }
-
-  pre > code {
-    font-family: Consolas, Menlo, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
-  }
-
-  pre code.hljs {
-    background-color: var(--app-code-background-color);
-  }
-
-  code:not(pre > code) {
-    margin: 0 1px;
-    padding: 4px 6px;
-    border-radius: 3px;
-
-    font-family: Consolas, Menlo, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
-
-    background-color: var(--app-code-background-color);
-  }
-
-  a:not(.app-demo-box__renderer a) {
-    color: var(--d-color-primary);
-    text-decoration: none;
-
-    &:hover {
-      color: var(--d-color-primary-lighter);
-    }
-  }
-
-  h1 {
-    margin: 8px 0 20px;
-
-    font-weight: 500;
-    @include font-size(2rem);
-  }
-
-  h2 {
-    margin: 38px 0 20px;
-
-    font-weight: 500;
-    @include font-size(1.5rem);
-  }
-
-  h3 {
-    margin: 28px 0 12px;
-
-    font-weight: 500;
-    @include font-size(1.25rem);
-  }
-
-  table {
-    width: 100%;
-    margin: 8px 0 16px;
-    border: 1px solid var(--d-border-color);
-    border-collapse: collapse;
-    border-spacing: 0;
-
-    empty-cells: show;
-
-    th {
-      font-weight: 500;
-      white-space: nowrap;
-
-      background: var(--app-th-background-color);
-    }
-
-    th,
-    td {
-      padding: 16px 24px;
-      border: 1px solid var(--d-divider-color);
-
-      text-align: left;
-    }
-  }
-
-  .anchor {
-    display: inline-block;
-    margin-left: 8px;
-
-    color: var(--d-color-primary);
-    text-decoration: none;
-
-    opacity: 0;
-
-    transition: opacity 0.2s linear;
-
-    &:focus-visible {
-      outline: none;
-      opacity: 1;
-    }
-  }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    &:hover .anchor {
-      opacity: 1;
-    }
-  }
-
-  .icon-button {
-    color: var(--d-color-step-400);
-
-    cursor: pointer;
-
-    transition: color 0.1s linear;
-
-    &:hover {
-      color: var(--d-color-primary);
-    }
-  }
-
-  .app-route-article__subtitle {
-    margin-left: 12px;
-  }
-
-  .app-route-article__demos {
-    pre code.hljs {
-      background-color: transparent;
-    }
-  }
-
-  .app-route-article__api {
-    .app-table-container {
-      width: 100%;
-      overflow-x: auto;
-    }
-
-    table {
-      min-width: 1200px;
-
-      table-layout: fixed;
-
-      th:nth-of-type(1) {
-        width: 260px;
-
-        white-space: nowrap;
-      }
-
-      th:nth-of-type(2) {
-        width: calc(100% - 720px);
-      }
-
-      th:nth-of-type(3) {
-        width: 300px;
-      }
-
-      th:nth-of-type(4) {
-        width: 160px;
-      }
-
-      td:nth-of-type(1),
-      td:nth-of-type(3),
-      td:nth-of-type(4) {
-        font-family: Consolas, Menlo, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
-      }
-    }
-  }
-}