Fix admonition style (#286)

Author: kazk

content/meta/docs.mdx

@@ -0,0 +1,52 @@
+---
+title: Writing Codewars Docs
+---
+
+The Codewars Docs is built with [Docusaurus][docusaurus], and the docs are written in Markdown.
+Each page has "Edit this page" link that allows you to contribute on GitHub.
+
+Plain Markdown is great for writing, but sometimes we need extra features to make the docs more helpful.
+Docusaurus provides some [Markdown extensions][markdown-features], and has support for [MDX][mdx] to extend Markdown with React components.
+
+This page summarizes the features we use, and is also used to test the styling. See [Docusaurus docs][docusaurus-docs] for more details.
+
+## Admonitions
+
+Use the following syntax to add admonitions:
+
+```markdown
+:::type title?
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
+:::
+```
+
+`type` is required. `title` is optional and defaults to uppercased `type`.
+
+### Types
+
+:::note
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
+:::
+
+:::tip
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
+:::
+
+:::info
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
+:::
+
+:::warning
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
+:::
+
+:::caution
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
+:::
+
+[docusaurus]: https://docusaurus.io/
+[docusaurus-docs]: https://docusaurus.io/docs
+[mdx]: https://mdxjs.com/
+[markdown-features]: https://docusaurus.io/docs/markdown-features

docusaurus.config.js

@@ -62,6 +62,7 @@ module.exports = {
           sidebarPath: require.resolve("./sidebars.js"),
           editUrl: "https://github.com/codewars/docs/edit/master/",
         },
+        blog: false,
         theme: {
           customCss: require.resolve("./src/css/custom.css"),
         },

package.json

@@ -36,6 +36,11 @@
     ]
   },
   "devDependencies": {
-    "prettier": "^2.2.1"
+    "autoprefixer": "^10.2.5",
+    "postcss": "^8.2.10",
+    "postcss-nested": "^5.0.5",
+    "postcss-preset-env": "^6.7.0",
+    "prettier": "^2.2.1",
+    "tailwindcss": "^2.1.1"
   }
 }

sidebars.js

@@ -482,5 +482,10 @@ module.exports = {
       ],
     },
     "glossary",
+    {
+      type: "category",
+      label: "Meta",
+      items: ["meta/docs"],
+    },
   ],
 };

sitePlugin.js

@@ -1,15 +1,31 @@
 const path = require("path");
 
-// Make `@components/` resolve to `src/components`.
 module.exports = () => {
   return {
     name: "site-plugin",
+
+    // Make `@components/` resolve to `src/components`.
     configureWebpack: (_config, _isServer) => ({
       resolve: {
         alias: {
           "@components": path.resolve(__dirname, "src/components/"),
         },
       },
     }),
+
+    // Append new PostCSS plugins.
+    configurePostCss: (postcssOptions) => {
+      postcssOptions.plugins.push(
+        require("tailwindcss"),
+        require("postcss-nested"),
+        require("postcss-preset-env")({
+          autoprefixer: {
+            flexbox: "no-2009",
+          },
+          stage: 4,
+        })
+      );
+      return postcssOptions;
+    },
   };
 };

src/components/Anchored.jsx

@@ -2,7 +2,7 @@ import React from "react";
 
 const Anchored = ({ id, children }) => {
   return (
-    <div id={`.${id}`} class="anchored">
+    <div id={`.${id}`} class="anchored inline relative">
       <a class="anchor-link" href={`#.${id}`} aria-hidden="true"></a>
       {children}
     </div>

src/css/custom.css

@@ -4,6 +4,9 @@
  * bundles Infima by default. Infima is a CSS framework designed to
  * work well for content-centric websites.
  */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 
 :root {
   --ifm-color-primary: #b1361e;
@@ -47,10 +50,6 @@ html[data-theme="dark"] .header-github-link:before {
     no-repeat;
 }
 
-.anchored {
-  display: inline;
-  position: relative;
-}
 .anchored:target {
   background-color: var(--cw-anchored-target-bg);
 }
@@ -59,13 +58,85 @@ html[data-theme="dark"] .header-github-link:before {
 }
 .anchored > .anchor-link::before {
   content: "*";
-  /* -ml-2 pr-2 absolute inset-y-0 opacity-0 float-left text-primary */
-  margin-left: -0.5rem;
-  padding-right: 0.5rem;
+  @apply -ml-2 pr-2 absolute inset-y-0 opacity-0 float-left;
   color: var(--ifm-color-primary);
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  opacity: 0;
-  float: left;
+}
+
+/* Remove .alert styles from Docusaurus */
+.admonition.alert {
+  border-radius: 0;
+  border-width: 0;
+}
+
+.admonition {
+  @apply mb-4 py-4 pr-8 pl-4;
+
+  & .admonition-heading h5 {
+    @apply flex items-center m-0 mb-2 uppercase text-lg;
+  }
+
+  & .admonition-icon {
+    @apply inline-block align-middle mr-1 mt-1.5;
+
+    & svg {
+      @apply inline-block w-5 h-5;
+      @apply fill-current stroke-current;
+    }
+  }
+}
+
+.admonition.admonition-note {
+  @apply bg-note bg-opacity-10 border-solid border-l-8 border-note;
+
+  & .admonition-heading {
+    @apply text-note;
+  }
+  & .admonition-content {
+    @apply text-note-content;
+  }
+}
+
+.admonition.admonition-tip {
+  @apply bg-tip bg-opacity-10 border-solid border-l-8 border-tip;
+
+  & .admonition-heading {
+    @apply text-tip;
+  }
+  & .admonition-content {
+    @apply text-tip-content;
+  }
+}
+
+.admonition.admonition-info {
+  @apply bg-info bg-opacity-10 border-solid border-l-8 border-info;
+
+  & .admonition-heading {
+    @apply text-info;
+  }
+  & .admonition-content {
+    @apply text-info-content;
+  }
+}
+
+.admonition.admonition-warning {
+  @apply bg-warning bg-opacity-10 border-solid border-l-8 border-warning;
+
+  & .admonition-heading {
+    @apply text-warning;
+  }
+  & .admonition-content {
+    @apply text-warning-content;
+  }
+}
+
+.admonition.admonition-caution,
+.admonition.admonition-danger {
+  @apply bg-caution bg-opacity-10 border-solid border-l-8 border-caution;
+
+  & .admonition-heading {
+    @apply text-caution;
+  }
+  & .admonition-content {
+    @apply text-caution-content;
+  }
 }

tailwind.config.js

@@ -0,0 +1,48 @@
+const colors = require("tailwindcss/colors");
+const plugin = require("tailwindcss/plugin");
+
+module.exports = {
+  mode: "jit",
+  purge: ["./src/**/*.{js,jsx,ts,tsx}", "./content/**/*.mdx"],
+  corePlugins: {
+    preflight: false,
+  },
+  // Using custom dark variant `html[data-theme="dark"]` to match Docusaurus.
+  darkMode: false,
+  theme: {
+    extend: {
+      colors: {
+        brand: "#b1361e",
+        // Admonitions colors
+        note: colors.coolGray[600],
+        "note-content": colors.coolGray[500],
+        tip: colors.emerald[600],
+        "tip-content": colors.emerald[600],
+        info: colors.lightBlue[500],
+        "info-content": colors.lightBlue[700],
+        warning: colors.orange[500],
+        "warning-content": colors.orange[700],
+        caution: colors.red[600],
+        "caution-content": colors.red[500],
+      },
+    },
+  },
+  variants: {
+    extend: {
+      backgroundColor: ["dark"],
+      textColor: ["dark"],
+      display: ["dark"],
+    },
+  },
+  plugins: [
+    plugin(({ addVariant, e }) => {
+      addVariant("dark", ({ modifySelectors, separator }) => {
+        modifySelectors(({ className }) => {
+          return `html[data-theme="dark"] .${e(
+            `dark${separator}${className}`
+          )}`;
+        });
+      });
+    }),
+  ],
+};