feat

9a1cda54 · 璃白. · 0f667900 · 9a1cda54 · 9a1cda54 · 9a1cda54
8 changed file
--- a/dist/assets/index.css
+++ b/dist/assets/index.css
--- a/dist/index.html
+++ b/dist/index.html
@@ -12,8 +12,8 @@
        border: 1px solid skyblue;
      }
    </style>
-    <script type="module" crossorigin src="./assets/index.js"></script>
-    <link rel="modulepreload" href="./assets/vendor.js">
+    <script type="module" crossorigin src="./index.js"></script>
+    <link rel="modulepreload" href="./vendor.js">
    <link rel="stylesheet" href="./assets/index.css">
  </head>
  <body>

--- a/dist/assets/index.js
+++ b/dist/assets/index.js
-import{d as e,l as t,m as n,c as l,a as s,b as o,e as r,w as i,T as a,o as c,F as u,_ as d,r as p,f as h,n as f,g,h as m,p as v,i as y,j as b}from"./vendor.js";!function(){const e=document.createElement("link").relList;if(!(e&&e.supports&&e.supports("modulepreload"))){for(const e of document.querySelectorAll('link[rel="modulepreload"]'))t(e);new MutationObserver((e=>{for(const n of e)if("childList"===n.type)for(const e of n.addedNodes)"LINK"===e.tagName&&"modulepreload"===e.rel&&t(e)})).observe(document,{childList:!0,subtree:!0})}function t(e){if(e.ep)return;e.ep=!0;const t=function(e){const t={};return e.integrity&&(t.integrity=e.integrity),e.referrerpolicy&&(t.referrerPolicy=e.referrerpolicy),"use-credentials"===e.crossorigin?t.credentials="include":"anonymous"===e.crossorigin?t.credentials="omit":t.credentials="same-origin",t}(e);fetch(e.href,t)}}();var k=(e,t)=>{for(const[n,l]of t)e[n]=l;return e};const j=e({name:"HelloWorld",props:{info:{type:Object,default:{cell_type:"",source:[],outputs:[]}}},computed:{input(){const e=this.info,n=(e.input?e.input.join(""):"")+(e.source?e.source.join(""):"");switch(e.cell_type){case"heading":const l=e.level;return`<h${l}>${n}</h${l}>`;case"markdown":return this.marked(n);case"code":return`<code class="hljs">${this.generateCodeLineNum(n?t.highlightAuto(n).value:"")}</code>`;default:return n}},output(){var e;const n=null==(e=this.info.outputs)?void 0:e.map((e=>(e.text?e.text.join(""):"")+(e.png?`<img src="data:image/png;base64,${e.png}" />`:"")+(e.svg?e.svg.join(""):""))).join("");return n?/[img|svg]/.test(n)?n:t.highlightAuto(n).value:""}},data:()=>({showResult:!1,loading:!1,timeObj:""}),methods:{run(){this.loading=!0,this.showResult=!0;const e=this.loadTime();this.timeObj=setTimeout((()=>{this.loading=!1,clearTimeout(this.timeObj)}),e)},loadTime:()=>Math.floor(500*Math.random()+500),marked(e){if(!e)return"";n.setOptions({breaks:!1,gfm:!0,langPrefix:"hljs language-",highlight:e=>this.generateCodeLineNum(t.highlightAuto(e).value)});return n(e)},generateCodeLineNum:e=>e?`<ul class="code_line_num"><li>${e.replace(/\n/g,"\n</li><li>")}\n</li></ul>`:""}}),_={class:"jupyter_input"},S={key:1,class:"stop_btn"},C={class:"jupyter_code"},L=["innerHTML"],w={key:0,class:"jupyter_output"},$={key:0,class:"loading"},T=["innerHTML"];const M=e({name:"App",props:{url:{type:String,default:""}},components:{Cell:k(j,[["render",function(e,t,n,d,p,h){return c(),l("div",null,[s("div",_,[e.output&&!e.loading?(c(),l("div",{key:0,class:"run_btn",onClick:t[0]||(t[0]=(...t)=>e.run&&e.run(...t))})):o("",!0),e.output&&e.loading?(c(),l("div",S)):o("",!0),s("div",C,[s("pre",null,[s("p",{innerHTML:e.input},null,8,L)])])]),r(a,{name:"fade"},{default:i((()=>[e.showResult?(c(),l("div",w,[e.loading?(c(),l("div",$)):(c(),l(u,{key:1},[s("div",{class:"close_btn",onClick:t[1]||(t[1]=t=>e.showResult=!1)}),s("div",{class:"jupyter_result",innerHTML:e.output},null,8,T)],64))])):o("",!0)])),_:1})])}],["__scopeId","data-v-57ea04c9"]])},data:()=>({cells:[],fullScreen:!1}),created(){this.fetchCells()},computed:{linkHref(){return this.url.replace(/\/blob\//,"/jupyter/")}},methods:{fetchCells(){const e=this.url;if(!e)return;const{groups:t}=/(?<prex>^https?:\/\/\S+.net)\/(?<project_path>\S*)\/\-\/blob\/(?<branch>\S+?)\/(?<path>\S*)/.exec(e),n=`${t.prex}/api/v4/projects/${encodeURIComponent(t.project_path)}/repository/files/${t.path}/raw?ref=${t.branch}`;d.get(n).then((({data:e})=>{this.cells=this.getCells(e),console.log(111,e),console.log(222,this.cells)}))},getCells(e){var t;const n=[];return e.cells&&n.push(...e.cells),null==(t=e.worksheets)||t.forEach((e=>{n.push(...e.cells)})),console.log(3333,n),n}}}),N=e=>(v("data-v-0054616b"),e=e(),y(),e),x=["href"],A=[m(" 点击这里去"),N((()=>s("span",null,"notebook",-1))),m("中调试该代码 ")];var H=k(M,[["render",function(e,t,n,r,i,a){const d=p("Cell");return c(),l("div",{class:f(["relative",{fullScreen:e.fullScreen}])},[s("div",{class:f(["jupyter_container",{fullScreen:e.fullScreen}])},[(c(!0),l(u,null,h(e.cells,(e=>(c(),g(d,{key:e.id,info:e},null,8,["info"])))),128))],2),e.fullScreen?(c(),l("button",{key:0,onClick:t[0]||(t[0]=t=>e.fullScreen=!1),class:"copyButton"}," 退出全屏 ")):(c(),l("button",{key:1,onClick:t[1]||(t[1]=t=>e.fullScreen=!0),class:"copyButton"}," 全屏显示 ")),e.cells.length?(c(),l("a",{key:2,href:e.linkHref,target:"_blank",class:"link"},A,8,x)):o("",!0)],2)}],["__scopeId","data-v-0054616b"]]);document.addEventListener("DOMContentLoaded",(()=>{const e=Array.from(document.querySelectorAll("a"));e.length&&e.forEach((e=>{const t=e.href;if(!(null==t?void 0:t.includes(".ipynb"))||!e.className.includes("jupyterEl"))return;const n=document.createElement("div");var l,s;l=n,(s=e).parentNode.insertBefore(l,s.nextSibling),b(H,{url:t}).mount(n)}))}));
+import{d as e,l as t,m as n,c as l,a as o,b as s,e as r,w as i,T as a,o as c,F as u,_ as d,r as p,f as h,n as f,g,h as m,p as y,i as v,j as b}from"./vendor.js";!function(){const e=document.createElement("link").relList;if(!(e&&e.supports&&e.supports("modulepreload"))){for(const e of document.querySelectorAll('link[rel="modulepreload"]'))t(e);new MutationObserver((e=>{for(const n of e)if("childList"===n.type)for(const e of n.addedNodes)"LINK"===e.tagName&&"modulepreload"===e.rel&&t(e)})).observe(document,{childList:!0,subtree:!0})}function t(e){if(e.ep)return;e.ep=!0;const t=function(e){const t={};return e.integrity&&(t.integrity=e.integrity),e.referrerpolicy&&(t.referrerPolicy=e.referrerpolicy),"use-credentials"===e.crossorigin?t.credentials="include":"anonymous"===e.crossorigin?t.credentials="omit":t.credentials="same-origin",t}(e);fetch(e.href,t)}}();var k=(e,t)=>{for(const[n,l]of t)e[n]=l;return e};const j=e({name:"HelloWorld",props:{info:{type:Object,default:{cell_type:"",source:[],outputs:[]}}},computed:{input(){const e=this.info,n=(e.input?e.input.join(""):"")+(e.source?e.source.join(""):"");switch(e.cell_type){case"heading":const l=e.level;return`<h${l}>${n}</h${l}>`;case"markdown":return this.marked(n);case"code":return`<code class="hljs">${this.generateCodeLineNum(n?t.highlightAuto(n).value:"")}</code>`;default:return n}},output(){var e;const n=null==(e=this.info.outputs)?void 0:e.map((e=>(e.text?e.text.join(""):"")+(e.png?`<img src="data:image/png;base64,${e.png}" />`:"")+(e.svg?e.svg.join(""):""))).join("");return n?/[img|svg]/.test(n)?n:t.highlightAuto(n).value:""}},data:()=>({showResult:!1,loading:!1,timeObj:""}),methods:{run(){this.loading=!0,this.showResult=!0;const e=this.loadTime();this.timeObj=setTimeout((()=>{this.loading=!1,clearTimeout(this.timeObj)}),e)},loadTime:()=>Math.floor(500*Math.random()+500),marked(e){if(!e)return"";n.setOptions({breaks:!1,gfm:!0,langPrefix:"hljs language-",highlight:e=>this.generateCodeLineNum(t.highlightAuto(e).value)});return n(e)},generateCodeLineNum:e=>e?`<ul class="code_line_num"><li>${e.replace(/\n/g,"\n</li><li>")}\n</li></ul>`:""}}),_={class:"jupyter_input"},S={key:1,class:"stop_btn"},C={class:"jupyter_code"},L=["innerHTML"],w={key:0,class:"jupyter_output"},$={key:0,class:"loading"},T=["innerHTML"];const M=e({name:"App",props:{url:{type:String,default:""}},components:{Cell:k(j,[["render",function(e,t,n,d,p,h){return c(),l("div",null,[o("div",_,[e.output&&!e.loading?(c(),l("div",{key:0,class:"run_btn",onClick:t[0]||(t[0]=(...t)=>e.run&&e.run(...t))})):s("",!0),e.output&&e.loading?(c(),l("div",S)):s("",!0),o("div",C,[o("pre",null,[o("p",{innerHTML:e.input},null,8,L)])])]),r(a,{name:"fade"},{default:i((()=>[e.showResult?(c(),l("div",w,[e.loading?(c(),l("div",$)):(c(),l(u,{key:1},[o("div",{class:"close_btn",onClick:t[1]||(t[1]=t=>e.showResult=!1)}),o("div",{class:"jupyter_result",innerHTML:e.output},null,8,T)],64))])):s("",!0)])),_:1})])}],["__scopeId","data-v-57ea04c9"]])},data:()=>({cells:[],fullScreen:!1}),created(){this.fetchCells()},computed:{linkHref(){return this.url.replace(/\/blob\//,"/jupyter/")}},methods:{fetchCells(){const e=this.url;if(!e)return;const{groups:t}=/(?<prex>^https?:\/\/\S+.net)\/(?<project_path>\S*)\/\-\/blob\/(?<branch>\S+?)\/(?<path>\S*)/.exec(e),n=`${t.prex}/api/v4/projects/${encodeURIComponent(t.project_path)}/repository/files/${t.path}/raw?ref=${t.branch}`;d.get(n).then((({data:e})=>{this.cells=this.getCells(e),console.log(111,e),console.log(222,this.cells)}))},getCells(e){var t;const n=[];return e.cells&&n.push(...e.cells),null==(t=e.worksheets)||t.forEach((e=>{n.push(...e.cells)})),console.log(3333,n),n}}}),N=e=>(y("data-v-4273ead8"),e=e(),v(),e),x=["href"],A=[m(" 点击这里去"),N((()=>o("span",null,"notebook",-1))),m("中调试该代码 ")];var H=k(M,[["render",function(e,t,n,r,i,a){const d=p("Cell");return c(),l("div",{class:f(["relative",{fullScreen:e.fullScreen}])},[o("div",{class:f(["jupyter_container",{fullScreen:e.fullScreen}]),id:"jupyter_container"},[(c(!0),l(u,null,h(e.cells,(e=>(c(),g(d,{key:e.id,info:e},null,8,["info"])))),128))],2),e.fullScreen?(c(),l("button",{key:0,onClick:t[0]||(t[0]=t=>e.fullScreen=!1),class:"copyButton"}," 退出全屏 ")):(c(),l("button",{key:1,onClick:t[1]||(t[1]=t=>e.fullScreen=!0),class:"copyButton"}," 全屏显示 ")),e.cells.length?(c(),l("a",{key:2,href:e.linkHref,target:"_blank",class:"link"},A,8,x)):s("",!0)],2)}],["__scopeId","data-v-4273ead8"]]);console.log("load script"),document.addEventListener("DOMContentLoaded",(()=>{const e=Array.from(document.querySelectorAll("a"));console.log("render func"),console.log(e),e.length&&e.forEach((e=>{const t=e.href;if(!t||!t.includes(".ipynb")||!e.className.includes("jupyterEl"))return;const n=document.createElement("div");var l,o;l=n,(o=e).parentNode.insertBefore(l,o.nextSibling),b(H,{url:t}).mount(n)}))}));
--- a/dist/assets/vendor.js
+++ b/dist/assets/vendor.js
--- a/src/App.vue
+++ b/src/App.vue
 <template>
  <div :class="['relative', { fullScreen }]">
-    <div :class="['jupyter_container', { fullScreen }]">
+    <div :class="['jupyter_container', { fullScreen }]" id="jupyter_container">
      <Cell v-for="item in cells" :key="item.id" :info="item" />
    </div>
    <button @click="fullScreen = false" v-if="fullScreen" class="copyButton">
@@ -89,13 +89,14 @@ export default defineComponent({
  &.fullScreen {
    .jupyter_container {
      position: fixed;
-      width: 100vw;
+      width: 100%;
      height: 100vh;
      top: 0;
      left: 0;
      z-index: 9999999;
      margin: 0;
      max-height: unset;
+      overflow-y: unset;
    }
    .copyButton {
      position: fixed;

--- a/src/assets/css/style.less
+++ b/src/assets/css/style.less
@@ -15,13 +15,24 @@ img {
  position: relative;
 }

-.jupyter_container {
+.jupyter_container#jupyter_container {
+  pre,
+  p,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin: 0 !important;
+    color: #abb2bf !important;
+  }
  pre {
    // border-left: 1px solid @color-blue;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-x: auto;
-    margin: 0;
+    margin: 0 !important;
    padding: 0;
    code {
      // line-height: 1.2;
@@ -30,29 +41,40 @@ img {
      word-wrap: normal;
      tab-size: 2;
      box-sizing: border-box;
-      margin: 0;
-      ul {
+      margin: 0 !important;
+      padding: 0 !important;
+      &.hljs {
+        background: none !important;
+      }
+    }
+    ul {
+      list-style: decimal;
+      margin: 0 0 0 28px;
+      line-height: 14px !important;
+      padding: 0;
+      li {
        list-style: decimal;
-        margin: 0 0 0 28px;
-        padding: 0;
-        li {
-          list-style: decimal;
-          padding: 2px 12px;
-          margin: 0;
-          line-height: 14px;
-          width: 100%;
-          box-sizing: border-box;
-          &:first-child {
-            padding-top: 6px;
-          }
-          &:last-child {
-            padding-bottom: 6px;
-          }
-          &::marker {
-            content: counter(list-item) " ";
-            color: #808080;
+        padding: 2px 12px;
+        margin: 0;
+        line-height: 14px !important;
+        width: 100%;
+        box-sizing: border-box;
+        code {
+          display: inline-block;
+          &.hljs {
+            background: none !important;
          }
        }
+        &:first-child {
+          padding-top: 6px;
+        }
+        &:last-child {
+          padding-bottom: 6px;
+        }
+        &::marker {
+          content: counter(list-item) " ";
+          color: #808080;
+        }
      }
    }
  }

--- a/src/main.ts
+++ b/src/main.ts
@@ -2,19 +2,21 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import './assets/css/style.less';

+console.log('load script')
 document.addEventListener('DOMContentLoaded', () => {
  const jupyterLinks = Array.from(document.querySelectorAll('a'))
-
+  console.log('render func')
+  console.log(jupyterLinks)
  function insertAfter(newNode: HTMLElement, referenceNode: HTMLElement) {
    (referenceNode as any).parentNode.insertBefore(newNode, referenceNode.nextSibling);
  }
  if (jupyterLinks.length) {
    jupyterLinks.forEach(item => {
      const url = item.href
-      if (!url?.includes('.ipynb') || !item.className.includes('jupyterEl')) return
+      if (!url || !url.includes('.ipynb') || !item.className.includes('jupyterEl')) return
      const targetEL = document.createElement('div')
      insertAfter(targetEL, item)
-      
+
      createApp(App, {
        url
      }).mount(targetEL)

--- a/vite.config.ts
+++ b/vite.config.ts
@@ -22,8 +22,8 @@ export default defineConfig({
  build: {
    rollupOptions: {
      output: {
-        entryFileNames: 'assets/[name].js',
-        chunkFileNames: 'assets/[name].js',
+        entryFileNames: '[name].js',
+        chunkFileNames: '[name].js',
        assetFileNames: 'assets/[name].[ext]'
      }
    }