Markdown mostly working

chriskuehl · Nov 16, 2024 · ba49b52 · ba49b52
1 parent eeb52ce
commit ba49b52
Show file tree

Hide file tree

Showing 12 changed files with 331 additions and 210 deletions.
diff --git a/fluffy/templates/markdown.html b/fluffy/templates/markdown.html
diff --git a/go.mod b/go.mod
@@ -31,5 +31,6 @@ require (
 	github.com/aws/smithy-go v1.20.4 // indirect
 	github.com/inconshreveable/mousetrap v1.1.0 // indirect
 	github.com/spf13/pflag v1.0.5 // indirect
+	github.com/yuin/goldmark v1.7.8 // indirect
 	golang.org/x/sys v0.24.0 // indirect
 )
diff --git a/go.sum b/go.sum
@@ -54,6 +54,8 @@ github.com/spf13/pflag v1.0.5 h1:iy+VFUOCP1a+8yFto/drg2CJ5u0yRoB7fZw3DKv/JXA=
 github.com/spf13/pflag v1.0.5/go.mod h1:McXfInJRrz4CZXVZOBLb0bTZqETkiAhM9Iw0y3An2Bg=
 github.com/stretchr/testify v1.9.0 h1:HtqpIVDClZ4nwg75+f6Lvsy/wHu+3BoSGCbBAcpTsTg=
 github.com/stretchr/testify v1.9.0/go.mod h1:r2ic/lqez/lEtzL7wO/rwa5dbSLXVDPFyf8C91i36aY=
+github.com/yuin/goldmark v1.7.8 h1:iERMLn0/QJeHFhxSt3p6PeN9mGnvIKSpG9YYorDMnic=
+github.com/yuin/goldmark v1.7.8/go.mod h1:uzxRWxtg69N339t3louHJ7+O03ezfj6PlliRlaOzY1E=
 golang.org/x/sys v0.24.0 h1:Twjiwq9dn6R1fQcyiK+wQyHWfaz/BJB+YIpzU/Cv3Xg=
 golang.org/x/sys v0.24.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
 golang.org/x/term v0.23.0 h1:F6D4vR+EHoL9/sWAWgAR1H2DcHr4PareCbAaCo1RpuU=

diff --git a/scss/markdown.scss b/scss/markdown.scss
diff --git a/scss/paste.scss b/scss/paste.scss
@@ -1,3 +1,6 @@
+$source-code-font: 'Source Code Pro', monospace;
+$paste-padding-top: 2px;
+
 .page-paste {
     #style {
         float: right;
@@ -7,6 +10,15 @@
             display: none;
         }
     }
+
+    &.markdown {
+        #container {
+            width: 960px;
+            margin-left: auto;
+            margin-right: auto;
+        }
+    }
+
     #container {
         width: auto;
 
@@ -24,51 +36,23 @@
         }
     }
 
-    #paste {
-        font-family: 'Source Code Pro', monospace;
-
-        $paste-padding-top: 2px;
-
-        .line-numbers {
-            padding: $paste-padding-top 0;
-            /* color comes from the pygments styles */
-            border-right-width: 1px;
-            border-right-style: solid;
-
-            float: left;
-            line-height: 1.25em;
-            text-align: right;
-
-
-            a {
-                cursor: pointer;
-                display: block;
-                text-decoration: none;
-                padding-left: 8px;
-                padding-right: 5px;
-            }
-        }
-
-        .text {
-            padding: $paste-padding-top 0;
-            overflow-x: auto;
-
-            .highlight {
-                // Allow width to expand to match content so block element
-                // children (e.g. lines) extend the full width.
-                display: inline-block;
-                min-width: 100%;
-            }
+    .line-numbers {
+        font-family: $source-code-font;
+        padding: $paste-padding-top 0;
+        /* color comes from the pygments styles */
+        border-right-width: 1px;
+        border-right-style: solid;
 
-            .highlight > pre {
-                line-height: 125%;
+        float: left;
+        line-height: 1.25em;
+        text-align: right;
 
-                // These are line spans (sadly, no class is output by pygments)
-                & > span {
-                    padding-left: 5px;
-                    display: block;
-                }
-            }
+        a {
+            cursor: pointer;
+            display: block;
+            text-decoration: none;
+            padding-left: 8px;
+            padding-right: 5px;
         }
     }
 
@@ -92,4 +76,124 @@
             }
         }
     }
+
+    .text.plain-text {
+        font-family: $source-code-font;
+        padding: $paste-padding-top 0;
+        overflow-x: auto;
+
+        .highlight {
+            // Allow width to expand to match content so block element
+            // children (e.g. lines) extend the full width.
+            display: inline-block;
+            min-width: 100%;
+        }
+
+        .highlight > pre {
+            line-height: 125%;
+
+            // These are line spans (sadly, no class is output by pygments)
+            & > span {
+                padding-left: 5px;
+                display: block;
+            }
+        }
+    }
+
+    .text.rich-text {
+        background-color: white !important;
+        font-size: 15px;
+
+        padding: 24px;
+        line-height: 1.5em;
+        color: #111;
+
+        & > *:first-child {
+            margin-top: 0 !important;
+        }
+
+        h1, h2, h3, h4, h5, h6 {
+            font-weight: bold;
+            margin-top: 26px;
+        }
+
+        h1 { font-size: 28px; }
+        h1, h2 {
+            border-bottom: solid 1px #eee;
+            padding-bottom: 16px;
+            margin-bottom: 14px;
+        }
+        h2 { font-size: 24px; }
+        h3 { font-size: 18px; }
+        h4 { font-size: 16px; }
+        h5 { font-size: 14px; }
+        h6 { font-size: 14px; color: #777; }
+
+        blockquote {
+            color: #555;
+            padding: 0 15px;
+            border-left: solid 5px #ddd;
+        }
+
+        $source-code-bg-color: #f6f6f6;
+
+        pre {
+            font-family: $source-code-font;
+            overflow-x: auto;
+            background-color: $source-code-bg-color;
+            padding: 14px;
+            margin-bottom: 10px;
+        }
+
+        code {
+            font-family: $source-code-font;
+            padding: 3px 6px;
+            font-size: 12px;
+            background-color: $source-code-bg-color;
+            border-radius: 2px;
+        }
+
+        a {
+            text-decoration: none;
+
+            &:hover {
+                text-decoration: underline;
+            }
+        }
+
+        ul, ol {
+            padding-left: 35px;
+
+            li {
+                display: list-item;
+                margin: 5px 0;
+            }
+        }
+
+        ul {
+            list-style: disc;
+        }
+
+        ol {
+            list-style: decimal;
+
+            li {
+                padding-left: 5px;
+            }
+        }
+
+        td, th {
+            border: solid 1px #ddd;
+            padding: 8px;
+        }
+
+        th {
+            font-weight: bold;
+            background-color: #f1f1f1;
+        }
+
+        img {
+            max-width: 100%;
+        }
+    }
 }