Merge pull request #1 from DnCov/feature/code-hilight

feature: code hilight & parse vedio adn audio

packages/transparent-info-app/components/MdImg.tsx

@@ -0,0 +1,81 @@
+import { useEffect, useState } from 'react';
+import { ipfsGateways } from '../src/config';
+interface Props {
+  src?: string;
+  [key: string]: any;
+}
+
+enum ExtType {
+  img,
+  vedio,
+  audio,
+  unknown,
+}
+
+type Checker = [ExtType, RegExp];
+
+const checkers: Checker[] = [
+  [ExtType.img, /\.(jpe?g|png|gif|webp)/],
+  [ExtType.audio, /\.(mp3|ogg)/],
+  [ExtType.vedio, /\.(mp4)/],
+];
+
+function checkType(src?: string): ExtType {
+  if (!src) {
+    return ExtType.unknown;
+  }
+  for (let ck of checkers) {
+    const [type, regex] = ck;
+    if (regex.test(src)) {
+      return type;
+    }
+  }
+
+  return ExtType.unknown;
+}
+
+function Video(props: Props) {
+  const { alt, src } = props;
+  return (
+    <video {...props} width="320" height="240" controls>
+      <source src={src} type="video/mp4" />
+      {alt}
+    </video>
+  );
+}
+
+function Audio(props: Props) {
+  const { alt, src } = props;
+
+  return (
+    <audio controls>
+      {/* <source src="horse.ogg" type="audio/ogg" /> */}
+      <source src={src} type="audio/mpeg" />
+      Your browser does not support the audio element. {alt}
+    </audio>
+  );
+}
+
+export default (props: Props) => {
+  const [baseUrl, setBaseUrl] = useState('');
+
+  useEffect(() => {
+    if (!/ip[fn]s/.test(window.location.href)) {
+      // tmp chose first
+      setBaseUrl(ipfsGateways[0]);
+    }
+  }, []);
+
+  const { src } = props;
+  const type = checkType(src);
+  console.log(type);
+  switch (type) {
+    case ExtType.img:
+      return <img {...props} src={`${baseUrl}${src}`} />;
+    case ExtType.vedio:
+      return <Video {...props} src={`${baseUrl}${src}`} />;
+    case ExtType.audio:
+      return <Audio {...props} src={`${baseUrl}${src}`} />;
+  }
+  return <span>unknown media src: {src} please check</span>;
+};

packages/transparent-info-app/components/hilight.tsx

@@ -0,0 +1,222 @@
+export default () => (
+  <style global jsx>
+    {`
+      pre[class*='language-'],
+      code[class*='language-'] {
+        color: #d4d4d4;
+        font-size: 13px;
+        text-shadow: none;
+        font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+        direction: ltr;
+        text-align: left;
+        white-space: pre;
+        word-spacing: normal;
+        word-break: normal;
+        line-height: 1.5;
+        -moz-tab-size: 4;
+        -o-tab-size: 4;
+        tab-size: 4;
+        -webkit-hyphens: none;
+        -moz-hyphens: none;
+        -ms-hyphens: none;
+        hyphens: none;
+      }
+
+      pre[class*='language-']::selection,
+      code[class*='language-']::selection {
+        text-shadow: none;
+        background: #b3d4fc;
+      }
+
+      @media print {
+        pre[class*='language-'],
+        code[class*='language-'] {
+          text-shadow: none;
+        }
+      }
+
+      pre[class*='language-'] {
+        padding: 1em;
+        margin: 0.5em 0;
+        overflow: auto;
+        background: #1e1e1e;
+      }
+
+      :not(pre) > code[class*='language-'] {
+        padding: 0.1em 0.3em;
+        border-radius: 0.3em;
+        color: #db4c69;
+        background: #f9f2f4;
+      }
+      /*********************************************************
+* Tokens
+*/
+      .namespace {
+        opacity: 0.7;
+      }
+
+      .token.comment,
+      .token.prolog,
+      .token.doctype,
+      .token.cdata {
+        color: #6a9955;
+      }
+
+      .token.punctuation {
+        color: #d4d4d4;
+      }
+
+      .token.property,
+      .token.tag,
+      .token.boolean,
+      .token.number,
+      .token.constant,
+      .token.symbol,
+      .token.deleted {
+        color: #b5cea8;
+      }
+
+      .token.selector,
+      .token.attr-name,
+      .token.string,
+      .token.char,
+      .token.builtin,
+      .token.inserted {
+        color: #ce9178;
+      }
+
+      .token.operator,
+      .token.entity,
+      .token.url,
+      .language-css .token.string,
+      .style .token.string {
+        color: #d4d4d4;
+        background: #1e1e1e;
+      }
+
+      .token.atrule,
+      .token.attr-value,
+      .token.keyword {
+        color: #c586c0;
+      }
+
+      .token.function {
+        color: #dcdcaa;
+      }
+
+      .token.regex,
+      .token.important,
+      .token.variable {
+        color: #d16969;
+      }
+
+      .token.important,
+      .token.bold {
+        font-weight: bold;
+      }
+
+      .token.italic {
+        font-style: italic;
+      }
+
+      .token.constant {
+        color: #9cdcfe;
+      }
+
+      .token.class-name {
+        color: #4ec9b0;
+      }
+
+      .token.parameter {
+        color: #9cdcfe;
+      }
+
+      .token.interpolation {
+        color: #9cdcfe;
+      }
+
+      .token.punctuation.interpolation-punctuation {
+        color: #569cd6;
+      }
+
+      .token.boolean {
+        color: #569cd6;
+      }
+
+      .token.property {
+        color: #9cdcfe;
+      }
+
+      .token.selector {
+        color: #d7ba7d;
+      }
+
+      .token.tag {
+        color: #569cd6;
+      }
+
+      .token.attr-name {
+        color: #9cdcfe;
+      }
+
+      .token.attr-value {
+        color: #ce9178;
+      }
+
+      .token.entity {
+        color: #4ec9b0;
+        cursor: unset;
+      }
+
+      .token.namespace {
+        color: #4ec9b0;
+      }
+      /*********************************************************
+* Language Specific
+*/
+      pre[class*='language-javascript'],
+      code[class*='language-javascript'] {
+        color: #4ec9b0;
+      }
+
+      pre[class*='language-css'],
+      code[class*='language-css'] {
+        color: #ce9178;
+      }
+
+      pre[class*='language-html'],
+      code[class*='language-html'] {
+        color: #d4d4d4;
+      }
+
+      .language-html .token.punctuation {
+        color: #808080;
+      }
+      /*********************************************************
+* Line highlighting
+*/
+      pre[data-line] {
+        position: relative;
+      }
+
+      pre[class*='language-'] > code[class*='language-'] {
+        position: relative;
+        z-index: 1;
+      }
+
+      .line-highlight {
+        position: absolute;
+        left: 0;
+        right: 0;
+        padding: inherit 0;
+        margin-top: 1em;
+        background: #f7ebc6;
+        box-shadow: inset 5px 0 0 #f7d87c;
+        z-index: 0;
+        pointer-events: none;
+        line-height: inherit;
+        white-space: pre;
+      }
+    `}
+  </style>
+);

packages/transparent-info-app/components/ipfs/Env.tsx

@@ -0,0 +1,15 @@
+import { useState, useEffect } from 'react';
+import { ipfsGateways } from '../../src/config';
+
+export default () => {
+  useEffect(() => {
+    if (!/ip[fn]s\//.test(window.location.href)) {
+      // tmp chose first
+      document.querySelectorAll('img').forEach(e => {
+        e.src = `${ipfsGateways[0]}${e.src}`;
+      });
+    }
+  }, []);
+
+  return <span />;
+};

packages/transparent-info-app/components/sample/section.mdx

@@ -0,0 +1,53 @@
+# 添加文件
+
+```bash
+# 安装
+brew install ipfs
+# 添加文件
+ipfs add file_path.ext
+# 如果没有运行节点 可暂时用我树莓派上的 或者替换为其他可用节点
+ipfs --api=/dns4/ncov.fox.mn/tcp/5001 add give_mefive.gif
+added QmRbRJSipSvFYPdwVhREv2YNBeJKWEeeCw1s7dSZGgDtwx give_mefive.gif
+
+```
+
+## image sample
+
+![cat give me five](/ipfs/QmRbRJSipSvFYPdwVhREv2YNBeJKWEeeCw1s7dSZGgDtwx#img_name.gif)
+
+# vedio sample
+
+![qiushi](/ipfs/Qmb9BGnskZQg4PS3LtFi1mLYQQ9B1c6an31QaFguNdsYmf#qiushi_wuhan.mp4)
+
+- asdsadsadasda
+- adsadsad
+- asdsadsadasda
+- asdasda asda
+- adfs ads sdf
+
+## h2 title
+
+**todo list**
+
+- [x] sfdsfsf
+- [ ] dfdsfsdf
+- [x] dfsdfdsfsdff
+- [ ] sdfsdfdf
+
+# this jsx
+
+```jsx
+// packages/transparent-info-app/pages/sample/withmdx.jsx
+
+import Post from '../../components/sample/section.mdx';
+
+import Layout from '../../components/Layout';
+
+export default () => {
+  return (
+    <Layout title="with mdx post sample">
+      <Post />
+    </Layout>
+  );
+};
+```

packages/transparent-info-app/next.config.js

@@ -1,7 +1,12 @@
-const withMDX = require("@next/mdx")({
-  extension: /\.mdx?$/
+const rehypePrism = require('@mapbox/rehype-prism');
+
+const withMDX = require('@next/mdx')({
+  extension: /\.mdx?$/,
+  options: {
+    hastPlugins: [rehypePrism],
+  },
 });
 
 module.exports = withMDX({
-  pageExtensions: ["js", "jsx", "md", "mdx", "tsx"]
+  pageExtensions: ['js', 'jsx', 'md', 'mdx', 'tsx'],
 });

packages/transparent-info-app/package.json

@@ -29,6 +29,7 @@
     "url": "https://github.com/DnCov/transparent-info/issues"
   },
   "dependencies": {
+    "@mapbox/rehype-prism": "^0.4.0",
     "@material-ui/core": "^4.9.0",
     "@material-ui/icons": "^4.5.1",
     "@material-ui/styles": "^4.9.0",