From 1b2cbc1a9bb73d659afa120ba947fa5564d2fa6a Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Mon, 10 Aug 2020 02:02:35 +0100
Subject: [PATCH] Add and use Tailwind CSS typography plugin

Replace custom markup styles with Tailwind CSS's typography/prose plugin
(https://github.com/tailwindlabs/tailwindcss-typography).
---
 .../assets/css/components/markup.pcss         | 115 ------------------
 .../assets/css/custom-components.pcss         |   1 -
 web/themes/custom/opdavies/package-lock.json  |   6 +
 web/themes/custom/opdavies/package.json       |   1 +
 web/themes/custom/opdavies/tailwind.config.js |  17 ++-
 .../templates/field/field--body.html.twig     |   6 +-
 .../field--node--field-events--talk.html.twig |   2 +-
 .../templates/node/node--talk.html.twig       |   2 +-
 8 files changed, 28 insertions(+), 122 deletions(-)
 delete mode 100644 web/themes/custom/opdavies/assets/css/components/markup.pcss

diff --git a/web/themes/custom/opdavies/assets/css/components/markup.pcss b/web/themes/custom/opdavies/assets/css/components/markup.pcss
deleted file mode 100644
index ebb0d1d..0000000
--- a/web/themes/custom/opdavies/assets/css/components/markup.pcss
+++ /dev/null
@@ -1,115 +0,0 @@
-.markup {
-  a {
-    @apply underline;
-
-    &:hover {
-      @apply no-underline
-    }
-
-    &:focus {
-      @apply p-px -m-px bg-blue-700 text-white outline-none
-    }
-  }
-
-  p {
-    @apply leading-relaxed;
-
-    + p {
-      @apply mt-4
-    }
-  }
-
-  ol {
-    @apply list-decimal
-  }
-
-  ul {
-    @apply list-disc;
-  }
-
-  ol,
-  ul {
-    @apply pl-5;
-
-    + * {
-      @apply mt-4
-    }
-
-    li + li {
-      @apply mt-2
-    }
-  }
-
-  p {
-    + blockquote,
-    + ol,
-    + ul,
-    + div[v-pre] {
-      @apply mt-4
-    }
-  }
-
-  blockquote + * {
-    @apply mt-4
-  }
-
-  code {
-    @apply -my-px px-1 py-px border border-gray-400 text-sm bg-gray-200
-  }
-
-  pre {
-    @apply border-l-3 border-gray-400 text-sm bg-gray-200;
-
-    code {
-      @apply p-6 block border-none leading-loose text-sm overflow-x-scroll
-    }
-  }
-
-  * + pre,
-  * + div[v-pre] {
-    @apply my-4
-  }
-
-  img,
-  figure {
-    @apply my-8
-  }
-
-  figure {
-    img {
-      @apply m-0
-    }
-
-    figcaption {
-      @apply mt-3
-    }
-  }
-
-  h2 {
-    @apply leading-tight
-  }
-
-  * + h2 {
-    @apply mt-6
-  }
-
-  h2 + * {
-    @apply mt-3
-  }
-
-  h3 {
-    @apply text-xl font-bold leading-tight
-  }
-
-  * + h3 {
-    @apply mt-6
-  }
-
-  h3 + * {
-    @apply mt-2
-  }
-
-  h2 + h3 {
-    @apply mt-4
-  }
-}
diff --git a/web/themes/custom/opdavies/assets/css/custom-components.pcss b/web/themes/custom/opdavies/assets/css/custom-components.pcss
index 69e0881..b675cf8 100644
--- a/web/themes/custom/opdavies/assets/css/custom-components.pcss
+++ b/web/themes/custom/opdavies/assets/css/custom-components.pcss
@@ -1,7 +1,6 @@
 @import './components/button.pcss';
 @import './components/container.pcss';
 @import './components/lead.pcss';
-@import './components/markup.pcss';
 @import './components/note.pcss';
 @import './components/recommendation.pcss';
 @import './components/table.pcss';
diff --git a/web/themes/custom/opdavies/package-lock.json b/web/themes/custom/opdavies/package-lock.json
index 5a0d36d..50fc8bb 100644
--- a/web/themes/custom/opdavies/package-lock.json
+++ b/web/themes/custom/opdavies/package-lock.json
@@ -1102,6 +1102,12 @@
         "yargs-parser": "^18.1.3"
       }
     },
+    "@tailwindcss/typography": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.2.0.tgz",
+      "integrity": "sha512-aPgMH+CjQiScLZculoDNOQUrrK2ktkbl3D6uCLYp1jgYRlNDrMONu9nMu8LfwAeetYNpVNeIGx7WzHSu0kvECg==",
+      "dev": true
+    },
     "@types/anymatch": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/@types/anymatch/-/anymatch-1.3.1.tgz",
diff --git a/web/themes/custom/opdavies/package.json b/web/themes/custom/opdavies/package.json
index 3b8eb5c..8c0df0d 100644
--- a/web/themes/custom/opdavies/package.json
+++ b/web/themes/custom/opdavies/package.json
@@ -9,6 +9,7 @@
   },
   "devDependencies": {
     "@symfony/webpack-encore": "^0.30.2",
+    "@tailwindcss/typography": "^0.2.0",
     "alpinejs": "^2.3.5",
     "autoprefixer": "^9.8.0",
     "highlightjs": "^9.16.2",
diff --git a/web/themes/custom/opdavies/tailwind.config.js b/web/themes/custom/opdavies/tailwind.config.js
index 737d9f3..d015a60 100644
--- a/web/themes/custom/opdavies/tailwind.config.js
+++ b/web/themes/custom/opdavies/tailwind.config.js
@@ -19,6 +19,19 @@ module.exports = {
     }
   },
   theme: {
+    typography: (theme) => ({
+      default: {
+        css: {
+          a: {
+            color: theme('colors.blue.500')
+          },
+          h2: {
+            marginBottom: theme('spacing.2'),
+            marginTop: theme('spacing.8')
+          }
+        }
+      }
+    }),
     extend: {
       colors: {
         inherit: 'inherit'
@@ -51,7 +64,9 @@ module.exports = {
           return `.${e(`focus-visible${separator}${className}`)}[data-focus-visible-added]`
         })
       })
-    })
+    }),
+
+    require('@tailwindcss/typography')
   ],
   variants: {
     borderColor: [...variants.borderColor, 'focus-visible'],
diff --git a/web/themes/custom/opdavies/templates/field/field--body.html.twig b/web/themes/custom/opdavies/templates/field/field--body.html.twig
index 8ff8c90..76635a6 100644
--- a/web/themes/custom/opdavies/templates/field/field--body.html.twig
+++ b/web/themes/custom/opdavies/templates/field/field--body.html.twig
@@ -44,12 +44,12 @@
   {% if multiple %}
     <div{{ attributes }}>
       {% for item in items %}
-        <div{{ item.attributes.addClass('markup') }}>{{ item.content }}</div>
+        <div{{ item.attributes.addClass('prose max-w-none') }}>{{ item.content }}</div>
       {% endfor %}
     </div>
   {% else %}
     {% for item in items %}
-      <div{{ attributes.addClass('markup') }}>{{ item.content }}</div>
+      <div{{ attributes.addClass('prose max-w-none') }}>{{ item.content }}</div>
     {% endfor %}
   {% endif %}
 {% else %}
@@ -59,7 +59,7 @@
     <div>
       {% endif %}
       {% for item in items %}
-        <div{{ item.attributes.addClass('markup') }}>{{ item.content }}</div>
+        <div{{ item.attributes.addClass('prose max-w-none') }}>{{ item.content }}</div>
       {% endfor %}
       {% if multiple %}
     </div>
diff --git a/web/themes/custom/opdavies/templates/field/field--node--field-events--talk.html.twig b/web/themes/custom/opdavies/templates/field/field--node--field-events--talk.html.twig
index 5e1a206..1763132 100644
--- a/web/themes/custom/opdavies/templates/field/field--node--field-events--talk.html.twig
+++ b/web/themes/custom/opdavies/templates/field/field--node--field-events--talk.html.twig
@@ -42,7 +42,7 @@
   ]
 %}
 
-<div{{ attributes.addClass('markup') }}>
+<div{{ attributes.addClass('prose max-w-none') }}>
   <h2{{ title_attributes.addClass(title_classes) }}>
     {{ label }}
   </h2>
diff --git a/web/themes/custom/opdavies/templates/node/node--talk.html.twig b/web/themes/custom/opdavies/templates/node/node--talk.html.twig
index c499639..e34b7c8 100644
--- a/web/themes/custom/opdavies/templates/node/node--talk.html.twig
+++ b/web/themes/custom/opdavies/templates/node/node--talk.html.twig
@@ -90,7 +90,7 @@
     </footer>
   {% endif %}
 
-  <div{{ content_attributes.addClass(['space-y-6', page ? 'markup']) }}>
+  <div{{ content_attributes.addClass(['space-y-6', page ? 'prose max-w-none']) }}>
     {{ content }}
   </div>