close #17

next.config.js

@@ -9,4 +9,4 @@ module.exports = {
         });
         return config;
     }
-}
+};

package.json

@@ -11,9 +11,8 @@
     "build:data": "node scripts/index.js"
   },
   "dependencies": {
-    "@sindresorhus/slugify": "^2.1.0",
+    "@agentofuser/remark-oembed": "^1.0.4",
     "@svgr/webpack": "^6.2.1",
-    "axios": "^0.27.2",
     "dotenv": "^16.0.1",
     "download-git-repo": "^3.0.2",
     "fast-glob": "^3.2.11",
@@ -27,7 +26,7 @@
     "next": "12.1.4",
     "next-sitemap": "^3.0.5",
     "nextjs-progressbar": "^0.0.14",
-    "octokit": "^1.7.1",
+    "node-fetch": "^3.2.5",
     "react": "18.0.0",
     "react-dom": "18.0.0",
     "react-markdown": "^8.0.2",
@@ -42,6 +41,7 @@
     "remark-attr": "^0.11.1",
     "remark-custom-blocks": "^2.6.0",
     "remark-gfm": "^3.0.1",
+    "remark-iframes": "^4.0.5",
     "remark-math": "^5.1.1",
     "remark-toc": "^8.0.1",
     "traverse": "^0.6.6",

styles/globals.css

@@ -98,13 +98,13 @@ pre:not(.logos-block-mermaid-ascii){
     border: 2px solid var(--hlm-color);
 }
 
-img{
+img, iframe{
     -webkit-filter: url(#colored) grayscale(50%);
-    filter: url(#colored) grayscale(50%);
+    filter: url(#colored) grayscale(100%);
     width: 100%;
 }
 
-img:hover{
+img:hover, iframe:hover{
     -webkit-filter: grayscale(0);
     filter: grayscale(0);
 }

templates/Academia/AcademiaTemplate.tsx

@@ -3,7 +3,7 @@ import {TTemplateProps} from "../../types/ui.types";
 import {IMarkdown} from "../../types/data.types";
 
 
-import style from "./styles/Style.module.css";
+import style from "./Style.module.css";
 import commonStyle from "../common/styles/Styles.common.module.css";
 
 import {Header} from "./containers/Header/Header";
@@ -30,7 +30,9 @@ export const AcademiaTemplate_Markdown: FC<TTemplateProps<IProps>> = (props) =>
         <div className={`${style.container} ${commonStyle.container}`}>
             <Header className={`${style.header} ${commonStyle.header}`}/>
             <main className={`${style.main} ${commonStyle.main} ${commonStyle.main}`}>
-                <Sidebar className={`${style.sidebar} ${commonStyle.sidebar} hidden-scroll`}>
+                <Sidebar className={`${style.sidebar} ${commonStyle.sidebar} hidden-scroll`}
+                         initialDesktop={false}
+                >
                     <Logo dsid={config.ds_id} onClick={toggleMode}/>
                 </Sidebar>
                 <Content className={`${style.content} ${commonStyle.content}`}

templates/Academia/Style.module.css

@@ -46,10 +46,6 @@
 
 @media (min-width:600px) {
 
-    .sidebar :global(.sidebar-toggle-button){
-        display: none;
-    }
-
     .container{
         --page-padding-top: calc(5 * var(--lh));
         padding-top: 0;
@@ -63,12 +59,18 @@
         padding-top: calc(var(--page-padding-top) / 2.5);
     }
 
-    .sidebar{
-    }
-
     .sidebar, .toc{
         top: calc(var(--page-padding-top) / 2);
         padding-top: calc(var(--page-padding-top) / 2);
     }
 
+    .sidebar :global(.sidebar-toggle-button){
+        display: block;
+        position: absolute;
+        top: calc(var(--page-padding-top) / 2);
+        left: 0 !important;
+        width: 30px;
+        margin-top: -2px;
+        /*padding-top: calc(var(--page-padding-top));*/
+    }
 }

templates/Academia/containers/Header/Styles.module.css

@@ -1,6 +1,6 @@
 .container{
     grid-area: header;
-    padding: 0 var(--column-gap) !important;
+    padding: var(--column-gap) !important;
 }
 
 .container :global(.logo-holder){
@@ -8,7 +8,6 @@
 }
 
 .searchBox{
-    /*width: calc(100% - calc(var(--column-gap) * 2));*/
 }
 
 .container :global(.logo-holder){
@@ -22,6 +21,10 @@
 
 @media (min-width:600px){
 
+    .container{
+        padding: 0 var(--column-gap) !important;
+    }
+
     .innerWrapper{
         max-width: var(--max-width);
         margin: auto;

templates/common/containers/Sidebar/Sidebar.tsx

@@ -9,11 +9,14 @@ import {useRouter} from "next/router";
 interface IProps{
     className?: string;
     append?: boolean;
+    initialDesktop?: boolean;
+    initialMobile?: boolean;
 }
 
-export const Sidebar: FC<PropsWithChildren<IProps>> = ({className, children, append=true}) => {
+export const Sidebar: FC<PropsWithChildren<IProps>> = (props) => {
-    const [mobileShow, setMobileShow] = useState(false);
+    const {className, children, append=true, initialDesktop = true, initialMobile = false} = props;
-    const [desktopShow, setDesktopShow] = useState(true);
+    const [mobileShow, setMobileShow] = useState(initialMobile);
+    const [desktopShow, setDesktopShow] = useState(initialDesktop);
 
     const {asPath} = useRouter();
 

templates/common/markdown/components/index.tsx

@@ -1,6 +1,7 @@
 import Link from "next/link";
 import {CodeWrapper} from "./parser-components/Code";
 import {CustomMarkdownH} from "./parser-components/H";
+import {Youtube} from "./ui-components/Youtube/Youtube";
 
 export const logosReactMarkdownComponents = {
     code: CodeWrapper,
@@ -12,6 +13,11 @@ export const logosReactMarkdownComponents = {
     h6: CustomMarkdownH,
     //@ts-ignore
     a: ({node, children, href = "", ..._props}) => {
+
+        if(href.indexOf("www.youtube") > -1){
+            return <Youtube url={href} title={(node.children[0]||{}).value}/>
+        }
+
         if (href.indexOf('http://') === 0 || href.indexOf('https://') === 0){
             return <a {..._props} href={href}>{children}</a>
         }

templates/common/markdown/components/ui-components/Youtube/Style.module.css

@@ -0,0 +1,17 @@
+.container{
+    display: block;
+}
+.iframe{
+    display: block;
+    position: relative;
+    padding-top: calc(calc(9 / 16) * 100%);
+}
+
+.iframe iframe{
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 100%;
+    height: 100%;
+}

templates/common/markdown/components/ui-components/Youtube/Youtube.tsx

@@ -0,0 +1,30 @@
+import {FC} from "react";
+
+import style from "./Style.module.css";
+
+interface IProps {
+    url: string;
+    title: string;
+}
+
+function getYouTubeGetID(url: string): string {
+    const regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/;
+    const match = url.match(regExp);
+    return (match&&match[7].length==11)? match[7] : "";
+}
+
+
+export const Youtube: FC<IProps> = ({url, title}) => {
+    return (
+        <span className={`${style.container} iframe`}>
+            <span className={style.iframe}>
+                <iframe width="700px"
+                        src={`http://www.youtube.com/embed/${getYouTubeGetID(url)}`}
+                        frameBorder="0"
+                        allowFullScreen
+                />
+            </span>
+            <small>{title}</small>
+        </span>
+    )
+}

templates/common/markdown/logos-remark-plugins/index.ts

@@ -1,9 +1,6 @@
 import {PluggableList} from "react-markdown/lib/react-markdown";
 import remarkGfm from 'remark-gfm'
-// import remarkMath from "remark-math";
-
 
 export const logosRemarkPlugins: PluggableList = [
-    remarkGfm,
+    remarkGfm
-    // remarkMath
 ]

utils/data-utils/utils.data.local-md.ts

@@ -4,6 +4,8 @@ import {readFileSync} from "fs";
 import {join} from "path";
 import matter from "gray-matter";
 const toc = require('markdown-toc');
+import removeMarkdown from "markdown-to-text";
+const slug = require("url-slug");
 
 const sidebar: INavigationItemProps[] = require("../../public/compiled/sidebar.flat.json");
 
@@ -32,7 +34,15 @@ export const getStaticPropsFromFolder = <O extends PreviewData>() => async(conte
 
     const rawMD = readFileSync(join(process.cwd(), "docs", navProps.localPath), 'utf-8');
     let {data: metadata, content} = matter(rawMD);
-    const _toc = toc(content).json
+    const _toc = toc(content).json.map((t: any) => {
+        const content = removeMarkdown(t.content);
+        const _slug = slug(content);
+        return {
+            ...t,
+            content,
+            slug: _slug
+        }
+    })
 
     if(navProps.isDir){
         const children = sidebar.filter((c) => {