aboutsummaryrefslogtreecommitdiff
path: root/components/Markdown
diff options
context:
space:
mode:
authorflu0r1ne <flu0r1ne@flu0r1ne.net>2023-09-07 21:28:37 -0500
committerflu0r1ne <flu0r1ne@flu0r1ne.net>2023-09-07 21:28:37 -0500
commitd67f3514eff4f45ad1ca84cde6465e622acd4dcc (patch)
tree55f9c8e4f68f1269300b937fb14ae76e3446d621 /components/Markdown
parentef4fb0a5277ee99bd0f1747b77e733ef7f02460d (diff)
downloadhomepage-d67f3514eff4f45ad1ca84cde6465e622acd4dcc.tar.xz
homepage-d67f3514eff4f45ad1ca84cde6465e622acd4dcc.zip
Scoped global styling to all markdown
Make React compatible with markdown-style HTML by added components with identical styling to markdown. This is done while CSS scoping is maintained. Additional style is loaded through the markdown loader by injecting default-styling tags into the components. This allows default-margin to be added to these elements in addition to the styling found in the React elements. The homepage reflects the domain, as defined by an environmental variable.
Diffstat (limited to 'components/Markdown')
-rw-r--r--components/Markdown/index.tsx16
-rw-r--r--components/Markdown/markdown.module.scss111
-rw-r--r--components/Markdown/markdown.scss418
3 files changed, 426 insertions, 119 deletions
diff --git a/components/Markdown/index.tsx b/components/Markdown/index.tsx
index 1a71330..b6def4f 100644
--- a/components/Markdown/index.tsx
+++ b/components/Markdown/index.tsx
@@ -1,24 +1,24 @@
import React, { FC } from 'react';
-import styles from './markdown.module.scss';
+
import clsx from 'clsx';
interface MarkdownProps {
md: string;
className?: string;
- props?: object;
}
-const Markdown : FC<MarkdownProps> = ({md, className, ...props}) => (
- <div
- className={clsx(styles.markdownContainer, className)}
+const Markdown : FC<MarkdownProps> = ({md, className}) => {
+ const prerendered = (
+ <div
dangerouslySetInnerHTML={{
__html: md
}}
-
- {...props}
/>
-);
+ );
+
+ return prerendered;
+};
export type {
MarkdownProps
diff --git a/components/Markdown/markdown.module.scss b/components/Markdown/markdown.module.scss
deleted file mode 100644
index e1debd1..0000000
--- a/components/Markdown/markdown.module.scss
+++ /dev/null
@@ -1,111 +0,0 @@
-.markdownContainer {
- strong {
- font-weight: 600;
- }
-
- h1 {
- font-size: 2.8rem;
- font-weight: 300;
- line-height: 1.167;
- letter-spacing: -0.01562em;
- margin-top: 1.0rem;
- margin-bottom: 1rem;
-
- padding-bottom: 0.4rem;
- border-bottom: 0.12rem solid rgb(53, 53, 53);
- }
-
- h2 {
- font-size: 2.3rem;
- font-weight: 300;
- line-height: 1.2;
- letter-spacing: -0.00833em;
-
- margin-top: 1.6rem;
- margin-bottom: 0.8rem;
- }
-
- h3 {
- font-size: 1.3rem;
- font-weight: 400;
- line-height: 1.167;
- letter-spacing: 0em;
-
- margin-top: 1.3rem;
- margin-bottom: 0.5rem;
- }
-
- h4 {
- font-size: 1.25rem;
- }
-
- h5 {
- font-size: 1.15rem;
- }
-
- h6 {
- font-size: 1.10rem;
- }
-
- h4, h5, h6 {
- margin-top: 0.8rem;
- margin-bottom: 0.6rem;
- }
-
- p, li {
- font-size: 1rem;
- letter-spacing: 0.00938em;
- font-weight: 300;
- }
-
- p {
- font-size: 1rem;
- line-height: 1.5;
- margin-bottom: 1em;
- }
-
- code {
- font-size: 1rem;
- line-height: 1.5;
- padding: 0.05rem 0.2rem;
- }
-
- pre {
- padding: 0.5rem 1.0rem;
- margin: 0.5rem 0;
- box-sizing: border-box;
- }
- pre > code {
- padding: 0;
- }
-
- code, pre {
- background-color: #f2f4f7;
- border-radius: 5px;
- }
-
- pre {
- overflow: auto;
- box-sizing: border-box;
- }
-
- @media screen and (max-width: 700px) {
- pre {
- padding-bottom: 0.7rem;
- }
- }
-
- li {
- line-height: 1.15;
- margin-left: 1em;
- margin-top: 0.3em;
- list-style-image: none;
- list-style-position: outside;
- list-style-type: circle;
- }
-
- img {
- max-width: 95%;
- margin: 2em 2.5%;
- }
-}
diff --git a/components/Markdown/markdown.scss b/components/Markdown/markdown.scss
new file mode 100644
index 0000000..e529e66
--- /dev/null
+++ b/components/Markdown/markdown.scss
@@ -0,0 +1,418 @@
+/* AUTOMATIC MARGIN APPLIED WHEN md-dl */
+
+.md-dl.md-h1, .md-dl.md-h2, .md-dl.md-h3, .md-dl.md-h4, .md-dl.md-h5, .md-dl.md-h6 {
+ margin-top: 20px;
+ margin-bottom: 14px;
+}
+
+.md-dl.md-list, .md-dl.md-pre, .md-dl.md-p, .md-dl.md-table, .md-dl.md-blockquote {
+ margin-bottom: 14px;
+}
+
+.md-dl.md-list .md-list {
+ margin-bottom: 0;
+}
+
+.md-dl.md-blockquote > :last-child {
+ margin-bottom: 0;
+}
+
+.md-dl.md-wrapper > :first-child {
+ margin-top: 0;
+}
+
+/* LINKS */
+
+.md-a {
+ text-decoration: none;
+}
+
+.md-a:hover {
+ text-decoration: underline;
+}
+
+.md-a, .md-a:visited, .md-a:active, .md-a:hover {
+ color: #0716ea;
+}
+
+/* TEXT */
+
+.md-blockquote, .md-p, .md-li {
+ font-size: 1rem;
+ letter-spacing: 0.00938em;
+ line-height: 1.5;
+}
+
+.md-code {
+ font-size: 1rem;
+ line-height: 1.25;
+}
+
+.md-strong {
+ font-weight: bold;
+}
+
+.md-em {
+ font-style: italic;
+}
+
+/* LISTS */
+
+.md-li {
+ line-height: 1.25;
+ margin-left: 1em;
+
+ list-style-image: none;
+ list-style-position: inside;
+ list-style-type: none;
+}
+
+// allow wrapping with inside list-style-position elements
+.md-li > p {
+ display: inline;
+}
+
+.md-dl.md-li > p {
+ margin-bottom: 0;
+
+ &::after {
+ content: "";
+ display: block;
+ margin-bottom: 14px;
+ }
+}
+
+.md-li-checkbox {
+ list-style-type: none !important;
+}
+
+.md-checkbox {
+ margin: 0;
+ margin-right: 0.5em;
+}
+
+// UP TO FOUR LEVELS OF DECORATORS
+
+.md-ol > li {
+ list-style-type: decimal;
+}
+
+.md-ul > li {
+ list-style-type: disc;
+}
+
+.md-list .md-ul > li {
+ list-style-type: circle;
+}
+
+.md-list .md-list .md-ul > li {
+ list-style-type: square;
+}
+
+.md-list .md-list .md-list .md-ul > li {
+ list-style-type: disc;
+}
+
+// ADD SLIGHT MARGIN TO SPACE ELEMENTS EXCEPT THE FIRST
+
+.md-list > li:not(:first-child) {
+ margin-top: 0.15rem;
+}
+
+.md-list .md-list > li:first-child {
+ margin-top: 0.15rem;
+}
+
+/* HEADINGS */
+
+.md-h1 {
+ font-size: 3rem;
+ font-weight: 300;
+ line-height: 1.167;
+ letter-spacing: -0.01562em;
+
+ padding-bottom: 0.4rem;
+ border-bottom: 0.12rem solid rgb(53, 53, 53);
+}
+
+.md-h2 {
+ font-size: 2.5rem;
+ font-weight: 300;
+ line-height: 1.2;
+ letter-spacing: -0.00833em;
+}
+
+.md-h3 {
+ font-size: 1.4rem;
+ font-weight: 400;
+ line-height: 1.167;
+ letter-spacing: 0em;
+}
+
+.md-h4 {
+ font-size: 1.38rem;
+}
+
+.md-h5 {
+ font-size: 1.26rem;
+}
+
+.md-h6 {
+ font-size: 1.2rem;
+}
+
+
+/* CODE */
+
+.md-codespan {
+ background-color: #f2f4f7;
+ border-radius: 5px;
+ padding: 0.05rem 0.2rem;
+}
+
+/* BLOCKQUOTE */
+
+.md-blockquote {
+ box-sizing: border-box;
+
+ position: relative;
+ padding-left: 1.2rem;
+ padding-top: 0.05rem;
+ padding-bottom: 0.05rem;
+
+ &::before {
+ content: "";
+ position: absolute;
+ left: 0;
+ top: 0;
+ bottom: 0;
+ width: 3px;
+ background-color: grey;
+ }
+}
+
+/* CODE */
+
+.md-pre {
+ background-color: #f2f4f7;
+ border-radius: 5px;
+ padding: 12px;
+ overflow: scroll;
+}
+
+/* MD LINE / SEP */
+
+.md-hr {
+ font-size: 300;
+}
+
+/* TABLES */
+
+.md-table {
+ width: 100%;
+ border-collapse: collapse;
+ margin: 1rem 0;
+}
+
+.md-thead {
+ background-color: #f2f4f7;
+ font-size: 1.10rem;
+
+ .md-th {
+ padding: 0.5rem 0.75rem;
+ text-align: left;
+ border-bottom: 2px solid #545454;
+ }
+}
+
+
+.md-tbody {
+ .md-tr {
+ &:nth-child(even) {
+ background-color: #f8f8f8;
+ }
+
+ &:nth-child(odd) {
+ background-color: #ffffff;
+ }
+ }
+
+ .md-td {
+ padding: 0.5rem 0.75rem;
+ border-bottom: 1px solid #ddd;
+ }
+}
+
+/* IMAGE */
+
+.md-img {
+ max-width: 95%;
+ margin: 2em 2.5%;
+}
+
+/* DEL */
+
+.md-del { }
+
+.markdownContainer {
+ /* Strong */
+
+ strong {
+ font-weight: 600;
+ }
+
+ /* Headings */
+
+ h1 {
+ font-size: 2.8rem;
+ font-weight: 300;
+ line-height: 1.167;
+ letter-spacing: -0.01562em;
+ margin-top: 1.0rem;
+ margin-bottom: 1rem;
+
+ padding-bottom: 0.4rem;
+ border-bottom: 0.12rem solid rgb(53, 53, 53);
+ }
+
+ h2 {
+ font-size: 2.3rem;
+ font-weight: 300;
+ line-height: 1.2;
+ letter-spacing: -0.00833em;
+
+ margin-top: 1.6rem;
+ margin-bottom: 0.8rem;
+ }
+
+ h3 {
+ font-size: 1.3rem;
+ font-weight: 400;
+ line-height: 1.167;
+ letter-spacing: 0em;
+
+ margin-top: 1.3rem;
+ margin-bottom: 0.5rem;
+ }
+
+ h4 {
+ font-size: 1.25rem;
+ }
+
+ h5 {
+ font-size: 1.15rem;
+ }
+
+ h6 {
+ font-size: 1.10rem;
+ }
+
+ h4, h5, h6 {
+ margin-top: 0.8rem;
+ margin-bottom: 0.6rem;
+ }
+
+ p, li {
+ font-size: 1rem;
+ letter-spacing: 0.00938em;
+ }
+
+ p {
+ font-size: 1rem;
+ line-height: 1.5;
+ margin-bottom: 1em;
+ }
+
+ code {
+ font-size: 1rem;
+ line-height: 1.5;
+ padding: 0.05rem 0.2rem;
+ }
+
+ pre {
+ padding: 0.5rem 1.0rem;
+ margin: 0.5rem 0;
+ box-sizing: border-box;
+ }
+ pre > code {
+ padding: 0;
+ }
+
+ code, pre {
+ background-color: #f2f4f7;
+ border-radius: 5px;
+ }
+
+ pre {
+ overflow: auto;
+ box-sizing: border-box;
+ }
+
+ @media screen and (max-width: 700px) {
+ pre {
+ padding-bottom: 0.7rem;
+ }
+ }
+
+ /* LISTS */
+
+ // li {
+ // font-size: 1rem;
+ // letter-spacing: 0.00938em;
+
+ // line-height: 1.4;
+ // margin-left: 1em;
+
+ // list-style-image: none;
+ // list-style-position: inside;
+ // list-style-type: none;
+
+ // box-sizing: border-box;
+
+ // font-size: 1rem;
+ // }
+
+ // ul, ol {
+ // li:not(:first-child) {
+ // margin-top: 0.15rem;
+ // }
+ // }
+
+ // ul ol li, ol li {
+ // list-style-type: decimal;
+ // }
+
+ // ul li {
+ // list-style-type: disc;
+ // }
+
+ // ul, ol {
+ // ul li:first-child, ol li:first-child {
+ // margin-top: 0.15rem !important;
+ // }
+
+ // ul li {
+ // list-style-type: circle;
+ // }
+
+ // ul, ol {
+ // ul li {
+ // list-style-type: square;
+ // }
+ // }
+ // }
+
+ // li {
+ // line-height: 1.15;
+ // margin-left: 1em;
+ // margin-bottom: 0.3em;
+ // list-style-image: none;
+ // list-style-position: outside;
+ // list-style-type: circle;
+ // }
+
+ img {
+ max-width: 95%;
+ margin: 2em 2.5%;
+ }
+}