Add embedded gists & JSON gist data/metadata (#179)

public/catppuccin-latte.css

@@ -1,3 +1,4 @@
+.chroma:not(.markdown) { color: #4c4f69 }
 /* Error */ .chroma .err { color: #d20f39 }
 /* LineLink */ .chroma .lnlinks { outline: none; text-decoration: none; color: inherit }
 /* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }

public/catppuccin-macchiato.css

@@ -1,3 +1,4 @@
+.chroma:not(.markdown) { color: #cad3f5 }
 /* Error */ .chroma .err { color: #f38ba8 }
 /* LineLink */ .chroma .lnlinks { outline: none; text-decoration: none; color: inherit }
 /* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }

public/embed.scss

@@ -0,0 +1,112 @@
+@import "github-markdown-css/github-markdown-light";
+@import './catppuccin-latte';
+
+
+.dark {
+    @import "github-markdown-css/github-markdown-dark";
+    @import './catppuccin-macchiato';
+}
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@config "../tailwind-embed.config.js";
+
+.html {
+    -webkit-text-size-adjust: 100%;
+    font-feature-settings: normal;
+    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+    font-variation-settings: normal;
+    line-height: 1.5;
+    -moz-tab-size: 4;
+    -o-tab-size: 4;
+    tab-size: 4
+}
+
+ol, ul {
+    list-style: revert;
+}
+
+.code {
+    font-family: Menlo, Consolas, Liberation Mono, monospace;
+}
+
+.code .line-num {
+    width: 4%;
+    text-align: right;
+}
+
+.code td {
+    padding-top: 0 !important;
+    padding-bottom: 0 !important;
+}
+
+.code tbody {
+    line-height: 18.2px;
+}
+
+.line-code {
+    @apply pl-2;
+    background: none !important;
+}
+
+.line-num {
+    @apply cursor-pointer text-slate-600 dark:text-slate-400 hover:text-black dark:hover:text-white;
+}
+
+table.csv-table {
+    @apply w-full whitespace-pre text-xs text-slate-300;
+}
+
+table.csv-table thead {
+    text-align: left;
+}
+
+table.csv-table thead tr {
+    @apply bg-slate-100 dark:bg-slate-800;
+}
+
+table.csv-table tbody tr {
+    @apply bg-gray-500 dark:bg-gray-900;
+}
+
+table.csv-table thead tr th {
+    @apply border py-2 px-1 border-slate-300 dark:border-slate-700;
+}
+
+table.csv-table tbody td {
+    @apply border py-1.5 px-1 border-slate-200 dark:border-slate-800;
+}
+
+dl.dl-config {
+    @apply grid grid-cols-3 text-sm;
+}
+
+dl.dl-config dt {
+    @apply col-span-1 text-gray-700 dark:text-slate-300 font-bold;
+}
+
+dl.dl-config dd {
+    @apply ml-1 col-span-2 break-words;
+}
+
+.markdown-body {
+    @apply dark:bg-gray-900;
+}
+
+.markdown-body pre {
+    @apply flex relative items-start p-0;
+}
+
+.markdown-body .code-div {
+    @apply p-4 max-w-full overflow-x-auto;
+}
+
+.markdown-body code {
+    @apply overflow-auto whitespace-pre;
+}
+
+.chroma.preview.markdown code {
+    @apply p-4;
+}

public/embed.ts

@@ -0,0 +1 @@
+import "./embed.scss"

public/main.ts

@@ -1,4 +1,3 @@
-import './style.css';
 import './style.scss';
 import './favicon-32.png';
 import './opengist.svg';

public/style.css

@@ -2,6 +2,8 @@
 @tailwind components;
 @tailwind utilities;
 
+@config "../tailwind.config.js";
+
 @layer base {
     ul, ol {
         list-style: revert;
@@ -98,10 +100,6 @@ pre {
     max-height: 337px;
 }
 
-.hljs {
-    color: #c9d1d9;
-}
-
 .line-code.selected {
     background-color: rgb(255, 247, 190) !important;
     box-shadow: inset 4px 0 0 rgb(255, 213, 65) !important;

public/style.scss

@@ -7,3 +7,5 @@
     @import "github-markdown-css/github-markdown-dark";
     @import './catppuccin-macchiato';
 }
+
+@import "style.css";