Create text macros <Card> for Strapi CMS (#122)

ekaterinburgdev · Aug 27, 2024 · 357528a · 357528a
1 parent dfab1cb
commit 357528a
Show file tree

Hide file tree

Showing 8 changed files with 141 additions and 55 deletions.
diff --git a/client/components/Articles/Article/Article.module.css b/client/components/Articles/Article/Article.module.css
@@ -69,37 +69,37 @@
     padding-bottom: 0;
 }
 
-.ArticleContent a:hover {
+.ArticleText a:hover {
     text-decoration: none;
 }
 
-.ArticleContent h2 {
+.ArticleText h2 {
     margin-top: 1.4em;
     margin-bottom: .3em;
     font-weight: 500;
     font-size: 22px;
     line-height: 1.16;
 }
 
-.ArticleContent h3 {
+.ArticleText h3 {
     margin-top: 1.9em;
     margin-bottom: .8em;
     font-weight: 500;
     font-size: 18px;
     line-height: 1.25;
 }
 
-.ArticleContent h4 {
+.ArticleText h4 {
     margin-top: 1.75em;
     margin-bottom: .25em;
     font-weight: 500;
     font-size: 14px;
     line-height: 1.25;
 }
 
-.ArticleContent ol,
-.ArticleContent ul,
-.ArticleContent p {
+.ArticleText ol,
+.ArticleText ul,
+.ArticleText p {
     margin-bottom: 1.1em;
     font-size: 14px;
     line-height: 1.4;
@@ -113,33 +113,33 @@
     }
 }
 
-.ArticleContent li {
+.ArticleText li {
     margin-top: .75em;
     margin-bottom: .75em;
 }
 
-.ArticleContent li::marker {
+.ArticleText li::marker {
     color: #667999;
 }
 
-.ArticleContent ol {
+.ArticleText ol {
     padding-left: 1em;
 }
 
-.ArticleContent ul {
+.ArticleText ul {
     padding-left: 1.5em;
     list-style-type: none;
 }
 
-.ArticleContent ul > li:before {
+.ArticleText ul > li:before {
     content: "—";
     display: inline-block;
     margin-left: -1.5em;
     padding-right: .5em;
     opacity: .45;
 }
 
-.ArticleContent blockquote {
+.ArticleText blockquote {
     margin: 8px 0;
     padding: 16px;
     border-radius: 16px;
@@ -148,12 +148,12 @@
     line-height: 1.35;
 }
 
-.ArticleContent blockquote p {
+.ArticleText blockquote p {
     margin: 0;
 }
 
-.ArticleContent b,
-.ArticleContent strong {
+.ArticleText b,
+.ArticleText strong {
     font-weight: 500;
 }
 
@@ -193,30 +193,30 @@
         font-size: 64px;
     }
 
-    .ArticleContent {
+    .ArticleText {
         gap: 32px;
         padding-bottom: 80px;
     }
 
-    .ArticleContent h2 {
+    .ArticleText h2 {
         font-size: 48px;
     }
 
-    .ArticleContent h3 {
+    .ArticleText h3 {
         font-size: 32px;
     }
 
-    .ArticleContent h4 {
+    .ArticleText h4 {
         font-size: 22px;
     }
 
-    .ArticleContent ol,
-    .ArticleContent ul,
-    .ArticleContent p {
+    .ArticleText ol,
+    .ArticleText ul,
+    .ArticleText p {
         font-size: 20px;
     }
 
-    .ArticleContent blockquote {
+    .ArticleText blockquote {
         margin: 16px 0;
         padding: 24px;
     }
@@ -251,12 +251,12 @@
 
 @media screen and (min-width: 1440px) {
     .ArticleContent {
-        gap: 96px;
+        gap: 64px;
     }
 
     .ArticleBack {
         font-size: 26px;
         margin-left: -16px;
         margin-bottom: 72px;
     }
-}
+}
diff --git a/client/components/Articles/Article/Article.tsx b/client/components/Articles/Article/Article.tsx
@@ -1,18 +1,15 @@
 import React from 'react';
 import classNames from 'classnames/bind';
-import md from 'markdown-it';
+import parseMarkdown from './parseMarkdown';
+
 import { ArticleProps } from './Article.types';
 import Link from 'next/link';
 
-import styles from './Article.module.css';
-import t from 'utils/typograph';
 import { Feedback } from 'components/UI/Feedback/Feedback';
 
-const cn = classNames.bind(styles);
+import styles from './Article.module.css';
 
-function getContent(html) {
-    return t(md({ html: true }).render(html));
-}
+const cn = classNames.bind(styles);
 
 export function Article({ title, description, sidebar, external, onFeedbackClick }: ArticleProps) {
     return (
@@ -24,18 +21,19 @@ export function Article({ title, description, sidebar, external, onFeedbackClick
                 </Link>
                 <Feedback onClick={onFeedbackClick} size="l" />
             </div>}
+
             <article className={cn(styles.ArticleContent)}>
                 <div className={cn(styles.ArticleText)}>
                     {title && <h1 className={cn(styles.ArticleTitle)}>{title}</h1>}
-                    {description && <div dangerouslySetInnerHTML={{ __html: getContent(description) }} />}
+                    {description && <div dangerouslySetInnerHTML={{ __html: parseMarkdown(description) }} />}
                 </div>
                 {sidebar !== undefined && <aside className={cn(styles.ArticleAside)}>
                     {external && (
                         <div className={cn(styles.ArticleAsideFeedback)}>
                             <Feedback size="l" onClick={onFeedbackClick} />
                         </div>
                     )}
-                    {sidebar && <div dangerouslySetInnerHTML={{ __html: getContent(sidebar) }} />}
+                    {sidebar && <div dangerouslySetInnerHTML={{ __html: parseMarkdown(sidebar) }} />}
                 </aside>}
             </article>
         </div>

diff --git a/client/components/Articles/Article/parseMarkdown.tsx b/client/components/Articles/Article/parseMarkdown.tsx
@@ -0,0 +1,34 @@
+import { renderToString } from 'react-dom/server';
+import markdownIt from 'markdown-it';
+import markdownItCsc from 'markdown-it-custom-short-codes';
+import t from 'utils/typograph';
+
+import { Card } from 'components/MainPage/Card/Card';
+
+export default function parseMarkdown(html) {
+    const md = markdownIt({ html: true }).use(markdownItCsc);
+
+    const defaultCscBodyRender = md.renderer.rules.csc || function render(tokens, index, options, env, self) {
+        return self.renderToken(tokens, index, options);
+    }
+
+    md.renderer.rules.csc = (tokens, index) => {
+        if (tokens[index].tag === 'card') {
+            const props = parseToObject(tokens[index].markup);
+            tokens[index].content = renderToString(<Card size="small" {...props} />);
+        }
+
+        return defaultCscBodyRender(tokens, index);
+    };
+
+    return t(md.render(html));
+}
+
+function parseToObject(keyValueString): any {
+    const obj = {};
+    keyValueString.match(/(\w+)="(.*?)"/g).forEach(keyVal => {
+        const [key, val] = keyVal.split('=');
+        obj[key] = val.replace(/"/g, '');
+    });
+    return obj;
+}
diff --git a/client/components/MainPage/Card/Card.tsx b/client/components/MainPage/Card/Card.tsx
@@ -34,7 +34,7 @@ export function Card({
 }: CardProps) {
     const cardRef = useRef<HTMLAnchorElement>(null);
     const cardTitleRef = useRef<HTMLDivElement>(null);
-    const isExternalUrl = url.includes('http');
+    const isExternalUrl = url?.includes('http');
 
     useSmoothCorners(cardRef);
 

diff --git a/client/components/MainPage/Card/Card.types.ts b/client/components/MainPage/Card/Card.types.ts
@@ -3,16 +3,15 @@ import React, { ReactElement } from 'react';
 import { TCardSize, TCardType } from 'api/main-page/main-page.types';
 
 export type CardProps = {
-    type: TCardType | undefined;
+    type?: TCardType | undefined;
     title: string;
-    titleBackgroundColor: string;
+    titleBackgroundColor?: string;
     url: string;
-    size: TCardSize | undefined,
-    backgroundImage: string;
-    backgroundImageHover: string;
-    headerCaption: string;
-    footerCaption: string;
-    dynamicContent: ReactElement;
-    key: number;
+    size?: TCardSize | undefined,
+    backgroundImage?: string;
+    backgroundImageHover?: string;
+    headerCaption?: string;
+    footerCaption?: string;
+    dynamicContent?: ReactElement;
     onClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;
 };
diff --git a/client/components/UI/Modal/Modal.module.css b/client/components/UI/Modal/Modal.module.css
@@ -119,9 +119,9 @@ html:has(.Modal) {
     }
 
     .Modal_Align-top {
-        margin-top: 70px;
+        margin-top: 50px;
         margin-bottom: 0;
-        height: calc(100% - 70px);
+        height: calc(100% - 50px);
     }
 
     .Modal_Align-top .ModalInner {
@@ -188,11 +188,6 @@ html:has(.Modal) {
         max-width: 1200px;
     }
 
-    .Modal_Align-top .ModalInner {
-        border-radius: 32px 32px 0 0;
-    }
-
-
     .ModalTitle {
         padding: 60px 64px 0;
         font-size: 32px;

diff --git a/client/package.json b/client/package.json
@@ -15,12 +15,13 @@
     "leaflet": "^1.9.4",
     "lodash": "^4.17.21",
     "markdown-it": "^14.1.0",
+    "markdown-it-custom-short-codes": "^1.0.1",
     "next": "^14.2.6",
     "prop-types": "^15.8.1",
+    "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-leaflet": "4.2.1",
     "react-redux": "^9.1.2",
-    "react": "^18.3.1",
     "redux": "^5.0.1",
     "transport-common": "workspace:*",
     "typescript": "^5.5.4",