😎 Articles page revamping

data/articles/Test_Article/content.md

@@ -1 +1,96 @@
-Content coming soon...
+## Terminal Command
+
+```
+node --version
+```
+
+## Style File
+
+```scss
+@import "../../../../common/style/variables";
+
+.articles {
+  padding-top: $navbar-height;
+}
+```
+
+## Complex React Component
+
+The code below is a snippet of JSX code
+
+```jsx
+import "./style";
+import { Route, useRouteMatch } from "react-router-dom";
+import { Article } from "t9/types/fullstack";
+import { Content } from "./content";
+import Grid from "@material-ui/core/Grid";
+import React from "react";
+import { Sidebar } from "./sidebar";
+import { SidebarTreeItem } from "t9/types/main";
+import { connect } from "react-redux";
+import { fetchArticlesList } from "t9/apps/main/redux/actions/articles-scene";
+import { fetchCurrentArticle } from "t9/apps/main/redux/actions/articles-scene";
+import { useEffect } from "react";
+
+export const ArticlesScene = (props: ArticlesSceneProps) => {
+  useEffect(() => {
+    props.fetchArticlesList();
+  }, []);
+
+  const { path } = useRouteMatch();
+
+  return (
+    <Grid container className="articles">
+      {/* Sidebar */}
+      <Grid item xs={false} md={3} style={{ paddingTop: "1rem" }}>
+        <Sidebar
+          tree={props.sidebarTree}
+          expanded={props.expanded}
+          selected={props.currentArticle ? props.currentArticle.slug : ""}
+        />
+      </Grid>
+      {/* Content */}
+      <Grid item xs>
+        <Route
+          path={`${path}/:articleSlug`}
+          render={() => (
+            <Content
+              key={location.pathname}
+              currentArticle={props.currentArticle}
+              fetchCurrentArticle={props.fetchCurrentArticle}
+            />
+          )}
+        />
+      </Grid>
+      {/* Headers */}
+      <Grid item xs={false} lg={2}>
+        <div style={{ height: "200px", background: "translate" }} />
+      </Grid>
+    </Grid>
+  );
+};
+
+export interface ArticlesSceneInitialState {
+  sidebarTree: SidebarTreeItem[] | null;
+  expanded: string[];
+  currentArticle: Article | null;
+}
+
+interface ArticlesSceneProps {
+  fetchArticlesList: () => void;
+  fetchCurrentArticle: () => void;
+  sidebarTree: SidebarTreeItem[] | null;
+  expanded: string[];
+  currentArticle: Article | null;
+}
+
+export default connect(
+  (state: { articlesScene: ArticlesSceneProps }) => ({
+    ...state.articlesScene,
+  }),
+  (dispatch: any) => ({
+    fetchArticlesList: () => dispatch(fetchArticlesList()),
+    fetchCurrentArticle: () => dispatch(fetchCurrentArticle()),
+  }),
+)(ArticlesScene);
+```

data/articles/Welcome_to_dzCode/content.md

@@ -1 +1,188 @@
-Content coming soon...
+## Typographic replacements
+
+Enable typographer option to see result.
+
+(c) (C) (r) (R) (tm) (TM) (p) (P) +-
+
+test.. test... test..... test?..... test!....
+
+!!!!!! ???? ,, -- ---
+
+"Smartypants, double quotes" and 'single quotes'
+
+## Emphasis
+
+**This is bold text**
+
+**This is bold text**
+
+_This is italic text_
+
+_This is italic text_
+
+~~Strikethrough~~
+
+## Blockquotes
+
+> Blockquotes can also be nested...
+>
+> > ...by using additional greater-than signs right next to each other...
+> >
+> > > ...or with spaces between arrows.
+
+## Lists
+
+Unordered
+
+- Create a list by starting a line with `+`, `-`, or `*`
+- Sub-lists are made by indenting 2 spaces:
+  - Marker character change forces new list start:
+    - Ac tristique libero volutpat at
+    * Facilisis in pretium nisl aliquet
+    - Nulla volutpat aliquam velit
+- Very easy!
+
+Ordered
+
+1. Lorem ipsum dolor sit amet
+2. Consectetur adipiscing elit
+3. Integer molestie lorem at massa
+
+1) You can use sequential numbers...
+1) ...or keep all the numbers as `1.`
+
+Start numbering with offset:
+
+57. foo
+1. bar
+
+## Code
+
+Inline `code`
+
+Indented code
+
+    // Some comments
+    line 1 of code
+    line 2 of code
+    line 3 of code
+
+Block code "fences"
+
+```
+Sample text here...
+```
+
+Syntax highlighting
+
+```js
+var foo = function(bar) {
+  return bar++;
+};
+
+console.log(foo(5));
+```
+
+## Tables
+
+| Option | Description                                                               |
+| ------ | ------------------------------------------------------------------------- |
+| data   | path to data files to supply the data that will be passed into templates. |
+| engine | engine to be used for processing templates. Handlebars is the default.    |
+| ext    | extension to be used for dest files.                                      |
+
+Right aligned columns
+
+| Option |                                                               Description |
+| -----: | ------------------------------------------------------------------------: |
+|   data | path to data files to supply the data that will be passed into templates. |
+| engine |    engine to be used for processing templates. Handlebars is the default. |
+|    ext |                                      extension to be used for dest files. |
+
+## Links
+
+[link text](http://dev.nodeca.com)
+
+[link with title](http://nodeca.github.io/pica/demo/ "title text!")
+
+Autoconverted link https://github.com/nodeca/pica (enable linkify to see)
+
+## Plugins
+
+The killer feature of `markdown-it` is very effective support of
+[syntax plugins](https://www.npmjs.org/browse/keyword/markdown-it-plugin).
+
+### [Emojies](https://github.com/markdown-it/markdown-it-emoji)
+
+> Classic markup: :wink: :crush: :cry: :tear: :laughing: :yum:
+>
+> Shortcuts (emoticons): :-) :-( 8-) ;)
+
+see [how to change output](https://github.com/markdown-it/markdown-it-emoji#change-output) with twemoji.
+
+### [Subscript](https://github.com/markdown-it/markdown-it-sub) / [Superscript](https://github.com/markdown-it/markdown-it-sup)
+
+- 19^th^
+- H~2~O
+
+### [\<ins>](https://github.com/markdown-it/markdown-it-ins)
+
+++Inserted text++
+
+### [\<mark>](https://github.com/markdown-it/markdown-it-mark)
+
+==Marked text==
+
+### [Footnotes](https://github.com/markdown-it/markdown-it-footnote)
+
+Footnote 1 link[^first].
+
+Footnote 2 link[^second].
+
+Inline footnote^[Text of inline footnote] definition.
+
+Duplicated footnote reference[^second].
+
+[^first]: Footnote **can have markup**
+
+  and multiple paragraphs.
+
+[^second]: Footnote text.
+
+### [Definition lists](https://github.com/markdown-it/markdown-it-deflist)
+
+Term 1
+
+: Definition 1
+with lazy continuation.
+
+Term 2 with _inline markup_
+
+: Definition 2
+
+        { some code, part of Definition 2 }
+
+    Third paragraph of definition 2.
+
+_Compact style:_
+
+Term 1
+~ Definition 1
+
+Term 2
+~ Definition 2a
+~ Definition 2b
+
+### [Abbreviations](https://github.com/markdown-it/markdown-it-abbr)
+
+This is HTML abbreviation example.
+
+It converts "HTML", but keep intact partial entries like "xxxHTMLyyy" and so on.
+
+\*[HTML]: Hyper Text Markup Language
+
+### [Custom containers](https://github.com/markdown-it/markdown-it-container)
+
+::: warning
+_here be dragons_
+:::

frontend/package.json

@@ -61,6 +61,7 @@
     "@types/react-dom": "^16.9.6",
     "@types/react-redux": "^7.1.7",
     "@types/react-router-dom": "^5.1.4",
+    "@types/react-syntax-highlighter": "^11.0.4",
     "@types/react-toastify": "^4.1.0",
     "@types/redux": "^3.6.0",
     "@types/redux-thunk": "^2.1.0",
@@ -96,6 +97,7 @@
     "react-dom": "^16.13.1",
     "react-redux": "^7.2.0",
     "react-router-dom": "^5.1.2",
+    "react-syntax-highlighter": "^13.3.1",
     "react-toastify": "^6.0.8",
     "redux": "^4.0.5",
     "redux-thunk": "^2.3.0",

frontend/src/apps/main/components/markdown/index.tsx

@@ -1,31 +1,59 @@
 import ReactMarkdown, { MarkdownProps } from "markdown-to-jsx";
 import { LinkV2 } from "src/components/link-v2";
 import React from "react";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import Typography from "@material-ui/core/Typography";
+import prism from "react-syntax-highlighter/dist/esm/styles/prism/prism";
+import tomorrow from "react-syntax-highlighter/dist/esm/styles/prism/tomorrow";
+import { useTheme } from "@material-ui/core/styles";
 
-const options = {
-  overrides: {
-    h1: {
-      component: Typography,
-      props: {
-        gutterBottom: true,
-        variant: "h5",
-      },
-    },
-    h2: { component: Typography, props: { gutterBottom: true, variant: "h6" } },
-    h3: {
-      component: Typography,
-      props: { gutterBottom: true, variant: "subtitle1" },
-    },
-    h4: {
-      component: Typography,
-      props: { gutterBottom: true, variant: "caption", paragraph: true },
-    },
-    p: { component: Typography, props: { paragraph: true, align: "justify" } },
-    a: { component: LinkV2 },
-    pre: { props: { style: { overflowX: "auto" } } },
-  },
-};
 export const Markdown = (props: MarkdownProps) => {
-  return <ReactMarkdown {...props} options={options as any} />;
+  const theme = useTheme();
+
+  return (
+    <ReactMarkdown
+      {...props}
+      options={{
+        overrides: {
+          h1: {
+            component: Typography,
+            props: {
+              gutterBottom: true,
+              variant: "h5",
+            },
+          },
+          h2: {
+            component: Typography,
+            props: { gutterBottom: true, variant: "h6" },
+          },
+          h3: {
+            component: Typography,
+            props: { gutterBottom: true, variant: "subtitle1" },
+          },
+          h4: {
+            component: Typography,
+            props: { gutterBottom: true, variant: "caption", paragraph: true },
+          },
+          p: { component: Typography, props: { paragraph: true } },
+          a: { component: LinkV2 },
+          pre: {
+            component({ children: { props } }: any) {
+              return (
+                <SyntaxHighlighter
+                  {...props}
+                  language={
+                    props.className
+                      ? props.className.replace("lang-", "")
+                      : null
+                  }
+                  style={theme.palette.type === "dark" ? tomorrow : prism}
+                />
+              );
+            },
+            props: { style: { overflowX: "auto" } },
+          },
+        },
+      }}
+    />
+  );
 };