Feat: Add light/dark mode to bundle

sandypockets · Dec 16, 2023 · 84ae6f0 · 84ae6f0
1 parent 800cd7f
commit 84ae6f0
Show file tree

Hide file tree

Showing 9 changed files with 272 additions and 38 deletions.
diff --git a/dist/index.css → dist/index.cjs.dark.css b/dist/index.css → dist/index.cjs.dark.css
diff --git a/dist/index.esm.css → dist/index.cjs.light.css b/dist/index.esm.css → dist/index.cjs.light.css
diff --git a/dist/index.esm.dark.css b/dist/index.esm.dark.css
diff --git a/dist/index.esm.light.css b/dist/index.esm.light.css
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "epic-remark",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "description": "Epic Remark is an all-in-one markdown to HTML processor built on top of remark",
   "main": "dist/index.cjs",
   "module": "dist/index.esm.js",

diff --git a/rollup.config.js b/rollup.config.js
@@ -3,41 +3,31 @@ import commonjs from '@rollup/plugin-commonjs';
 import postcss from 'rollup-plugin-postcss';
 import { terser } from 'rollup-plugin-terser';
 
-export default [
-  // ESM build
-  {
-    input: 'src/index.js',
-    output: {
-      file: 'dist/index.esm.js',
-      format: 'esm',
-      sourcemap: false,
-    },
-    plugins: [
-      resolve(),
-      commonjs(),
-      postcss({
-        extract: true,
-        minimize: true,
-      }),
-      terser(),
-    ],
+const createConfig = (format, outputFile, cssFile) => ({
+  input: 'src/index.js',
+  output: {
+    file: `dist/${outputFile}`,
+    format: format,
+    sourcemap: false,
   },
-  // CommonJS build
-  {
-    input: 'src/index.js',
-    output: {
-      file: 'dist/index.cjs',
-      format: 'cjs',
-      sourcemap: false,
-    },
-    plugins: [
-      resolve(),
-      commonjs(),
-      postcss({
-        extract: true,
-        minimize: true,
-      }),
-      terser(),
-    ],
-  }
+  plugins: [
+    resolve(),
+    commonjs(),
+    postcss({
+      extract: `${cssFile}`,
+      minimize: true,
+    }),
+    terser(),
+  ],
+});
+
+export default [
+  // ESM build for light mode
+  createConfig('esm', 'index.esm.js', 'index.esm.light.css'),
+  // ESM build for dark mode
+  createConfig('esm', 'index.esm.js', 'index.esm.dark.css'),
+  // CommonJS build for light mode
+  createConfig('cjs', 'index.cjs', 'index.cjs.light.css'),
+  // CommonJS build for dark mode
+  createConfig('cjs', 'index.cjs', 'index.cjs.dark.css'),
 ];
diff --git a/src/index.js b/src/index.js
@@ -1,4 +1,4 @@
-import './styles.css';
+import './styles-dark.css';
 import addHeadingIds from './plugins/addHeadingIds.js';
 import wrapElements from './plugins/wrapElements.js';
 import addTableOfContents from './plugins/addTableOfContents.js';

diff --git a/src/styles.css → src/styles-dark.css b/src/styles.css → src/styles-dark.css
diff --git a/src/styles-light.css b/src/styles-light.css
@@ -0,0 +1,242 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
+
+.markdown {
+    color: #333; /* Dark text for light background */
+    font-size: 1.125rem;
+    line-height: 1.75;
+    overflow-x: hidden;
+    font-family: 'Inter', sans-serif;
+}
+
+.markdown a,
+.markdown a > code {
+    color: #2b6cb0; /* A more subtle link color */
+    transition: color 0.15s ease-in-out;
+    margin: 0.25rem;
+}
+
+.markdown a > code {
+    margin: -0.25rem;
+}
+
+.markdown code,
+.markdown pre,
+.markdown pre > code {
+    font-family: monospace;
+    font-size: 0.875rem;
+    color: currentColor;
+}
+
+.markdown code {
+    border: 1px solid rgba(160, 160, 160, 0.5); /* Lighter border color */
+    border-radius: 0.25rem;
+    padding: 0.125rem 0.375rem;
+    background-color: #f7fafc; /* Light background for inline code */
+    color: #2d3748; /* Darker text color for readability */
+}
+
+.markdown pre > code {
+    padding: 0.125rem;
+    border: none;
+}
+
+.markdown pre {
+    padding: 0.625rem 0.125rem;
+    overflow: scroll;
+    white-space: pre;
+    border: 1px solid rgba(160, 160, 160, 0.5); /* Lighter border color */
+    border-radius: 0.25rem;
+    background-color: #f7fafc; /* Light background for code blocks */
+    margin: 0.75rem;
+    color: #2d3748; /* Darker text color for readability */
+}
+
+.markdown h2 > code,
+.markdown h3 > code {
+    font-size: inherit;
+    margin-top: inherit;
+    margin-bottom: inherit;
+    line-height: inherit;
+    font-family: monospace;
+}
+
+.markdown p {
+    margin-top: 1.25rem;
+    margin-bottom: 1.25rem;
+    font-size: 1rem;
+    line-height: 1.4;
+    letter-spacing: 0.02em;
+}
+
+.markdown strong {
+    font-weight: bold;
+}
+
+.markdown em {
+    font-style: italic;
+}
+
+.markdown blockquote {
+    font-style: italic;
+    background-color: rgba(200, 200, 200, 0.2); /* Lighter background for blockquote */
+    padding: 0.125rem 0.625rem;
+    border-left: 4px solid #4a5568; /* Darker border color for visibility */
+}
+
+.markdown ul,
+.markdown ol,
+.markdown blockquote {
+    margin-top: 1.5rem;
+    font-size: 1rem;
+}
+
+.markdown ul,
+.markdown ol {
+    margin-left: 1rem;
+}
+
+.markdown ul li,
+.markdown ol li {
+    padding-left: 0;
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem;
+}
+
+.markdown hr {
+    margin-top: 2.5rem;
+}
+
+.markdown h1,
+.markdown h2,
+.markdown h3,
+.markdown h4,
+.markdown h5,
+.markdown h6,
+.copy-link-h1,
+.copy-link-h2,
+.copy-link-h3,
+.copy-link-h4,
+.copy-link-h5,
+.copy-link-h6 {
+    font-weight: bold;
+    text-transform: lowercase;
+    color: #2d3748; /* Darker color for headers */
+    line-height: 1.2;
+}
+
+.markdown h1,
+.copy-link-h1 {
+    font-size: 1.5rem;
+    margin-top: 1rem;
+    margin-bottom: 0.625rem;
+}
+
+.markdown h2,
+.copy-link-h2 {
+    font-size: 1.25rem;
+    margin-top: 1.25rem;
+    margin-bottom: -0.125rem;
+}
+
+.markdown h3,
+.copy-link-h3 {
+    font-size: 1rem;
+    margin-top: 1rem;
+    margin-bottom: -0.1875rem;
+}
+
+.markdown h4,
+.copy-link-h4 {
+    font-size: 0.875rem;
+    margin-top: 1.25rem;
+    margin-bottom: -0.1875rem;
+}
+
+.markdown h5,
+.copy-link-h5,
+.markdown h6,
+.copy-link-h6 {
+    font-size: 1rem;
+    margin-top: 1.25rem;
+}
+
+.markdown table {
+    width: 100%;
+    border-collapse: collapse;
+    border-spacing: 0;
+    background-color: #fff; /* White background for tables */
+    border-radius: 0.5rem;
+    margin: 0.125rem;
+}
+
+.markdown table th,
+.markdown table td {
+    padding: 0.75rem;
+    border: 1px solid rgba(160, 160, 160, 0.5); /* Lighter border color */
+    background-color: rgba(245, 245, 245, 1); /* Very light background for table cells */
+    font-size: 0.875rem;
+}
+
+.markdown table th {
+    font-weight: bold;
+    background-color: rgba(230, 230, 230, 1); /* Slightly darker background for table headers */
+}
+
+.markdown table tbody tr:last-child td {
+    border-bottom: none;
+}
+
+.markdown table td:first-child {
+    border-left: none;
+}
+
+.markdown table tr:last-child td {
+    border-bottom: none;
+}
+
+.markdown table tr td:last-child {
+    border-right: none;
+}
+
+.markdown table thead tr:first-child th:first-child {
+    border-top-left-radius: 0.25rem;
+}
+
+.markdown table thead tr:first-child th:last-child {
+    border-top-right-radius: 0.25rem;
+}
+
+.markdown table tbody tr:last-child td:first-child {
+    border-bottom-left-radius: 0.25rem;
+}
+
+.markdown table tbody tr:last-child td:last-child {
+    border-bottom-right-radius: 0.25rem;
+}
+
+ul.markdown.toc {
+    list-style: disc;
+    margin-left: 1.5rem;
+    margin-top: 0.5rem;
+    font-size: 0.9rem;
+}
+
+div.epic-remark-gist {
+    height: 400px;
+}
+
+div.epic-remark-gist > iframe {
+    height: 100%;
+}
+
+iframe.epic-remark-youtube {
+    height: 400px;
+}
+
+@media (max-width: 768px) {
+    .markdown table th,
+    .markdown table td {
+        padding: 0.5rem;
+        font-size: 0.8rem;
+    }
+}