Provide SCSS styling for Markdown (#15)

* Add base theme + breakpoints * Typography + highlight styles * Callouts styles * Images + YouTube styles * Button styles * Base code styling * Prism styling for code * Add code environment styles * Add style index files * Load styles in webpack dev * Cleanup empty style tag * Add missing copyright headers * Remove commented-out font-family for code * Prism toolbar should not be nested in pre * Allow the root text styles to be disabled * Add disabled styles for buttons * Use details to collapse plugin information in README * Add README content for styles * Add stylelint to repo * Use double quotes for strings * Use kebab-case for variables and mixins * Set stylelint rules to match current style * Add note about linting to README * Add to changelog * Add item for styling to PR template * Use css grid for dev layout
digitalocean · Jun 14, 2022 · 3cc7209 · 3cc7209
1 parent bc2b3a0
commit 3cc7209
Show file tree

Hide file tree

Showing 32 changed files with 3,527 additions and 113 deletions.
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
@@ -4,6 +4,7 @@
 
 - **Build Scripts:** <!-- Scripts relating to building, testing or CI -->
 - **Markdown-It Plugins:** <!-- Which part of the Markdown-It plugins? -->
+- **SCSS Styling:** <!-- Which part of the SCSS styling? -->
 - **PrismJS Integration:** <!-- Changes relating to PrismJS, the vendoring and HTML plugin -->
 - **Something else:** <!-- Say what it is, here! -->
 

diff --git a/.stylelintrc.json b/.stylelintrc.json
@@ -0,0 +1,11 @@
+{
+  "extends": "stylelint-config-standard-scss",
+  "rules": {
+    "alpha-value-notation": "number",
+    "color-function-notation": "legacy",
+    "color-hex-length": "long",
+    "indentation": 4,
+    "no-descending-specificity": null,
+    "no-invalid-position-at-import-rule": null
+  }
+}
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,7 @@ Each list item should be prefixed with `(patch)` or `(minor)` or `(major)`.
 See `PUBLISH.md` for instructions on how to publish a new version.
 -->
 
+- (minor) Provide SCSS styling for Markdown
 - (patch) Add development setup using Webpack
 - (minor) Add support for embedding CanIUse data
 - (minor) Add support for embedding Glitch projects

diff --git a/README.md b/README.md
diff --git a/dev/client.html b/dev/client.html
@@ -19,45 +19,6 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0" />
     <title>do-markdownit</title>
-    <style>
-        html,
-        body {
-            padding: 0;
-            margin: 0;
-        }
-
-        #app {
-            display: flex;
-            flex-direction: column;
-        }
-
-        #textbox,
-        #output {
-            padding: 1rem;
-            margin: 0;
-        }
-
-        #textbox {
-            border: none;
-            background: rgba(0, 0, 0, 0.05);
-        }
-
-        #output {
-            overflow: auto;
-        }
-
-        @media only screen and (min-width: 768px) {
-            #app {
-                display: flex;
-                flex-flow: row nowrap;
-            }
-
-            #textbox,
-            #output {
-                flex-basis: 50%;
-            }
-        }
-    </style>
 </head>
 <body>
 <div id="app">

diff --git a/dev/client.js b/dev/client.js
@@ -16,6 +16,7 @@ limitations under the License.
 
 'use strict';
 
+require('./client.scss');
 const render = require('./render');
 
 document.addEventListener('DOMContentLoaded', () => {

diff --git a/dev/client.scss b/dev/client.scss
@@ -0,0 +1,44 @@
+/*
+Copyright 2022 DigitalOcean
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+
+You may obtain a copy of the License at
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+html,
+body {
+    padding: 0;
+    margin: 0;
+}
+
+#app {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(384px, 1fr));
+}
+
+#textbox,
+#output {
+    padding: 1rem;
+    margin: 0;
+}
+
+#textbox {
+    border: none;
+    background: rgba(0, 0, 0, 0.025);
+}
+
+#output {
+    @import "../styles";
+    @import "../styles/digitalocean";
+
+    overflow: auto;
+}
diff --git a/dev/webpack.config.js b/dev/webpack.config.js
@@ -39,4 +39,16 @@ module.exports = {
             },
         }),
     ],
+    module: {
+        rules: [
+            {
+                test: /\.s[ac]ss$/i,
+                use: [
+                    'style-loader',
+                    'css-loader',
+                    'sass-loader',
+                ],
+            },
+        ],
+    },
 };
diff --git a/fixtures/full-output.html b/fixtures/full-output.html
@@ -186,20 +186,20 @@ <h2 id="step-2-code">Step 2 — Code</h2>
 </code></pre>
 <h2 id="step-3-callouts">Step 3 — Callouts</h2>
 <p>Here is a note, a warning, some info and a draft note:</p>
-<div class="note">
+<div class="callout note">
 <p><strong>Note:</strong> Use this for notes on a publication.</p>
 </div>
-<div class="warning">
+<div class="callout warning">
 <p><strong>Warning:</strong> Use this to warn users.</p>
 </div>
-<div class="info">
+<div class="callout info">
 <p><strong>Info:</strong> Use this for product information.</p>
 </div>
-<div class="draft">
+<div class="callout draft">
 <p><strong>Draft:</strong> Use this for notes in a draft publication.</p>
 </div>
 <p>A callout can also be given a label, which supports inline markdown as well:</p>
-<div class="note">
+<div class="callout note">
 <p class="callout-label">Labels support <em>inline</em> <strong>markdown</strong></p>
 <p><strong>Note:</strong> Use this for notes on a publication.</p>
 </div>