Version 0.0.16: better css

synw · synw · commit 265aa3bfe919 · 2023-03-11T12:11:17.000+01:00
diff --git a/docs/assets/_...all_-7e1a8884.js b/docs/assets/_...all_-7e1a8884.js
diff --git a/docs/assets/code_block-8208bcc7.js b/docs/assets/code_block-8208bcc7.js
@@ -1,4 +1,4 @@
-import{d as o,o as n,c as t,b as s,a as c,u as e,p as _,s as l}from"./index-aeae53b3.js";const r={class:"prosed"},p=s("h1",null,"Code block example",-1),m={class:"not-prose"},h=o({__name:"code_block",setup(d){const a=`first_name = "Bob"
+import{d as o,o as n,c as t,b as s,a as c,u as e,p as _,s as l}from"./index-ffdf6deb.js";const r={class:"prosed"},p=s("h1",null,"Code block example",-1),m={class:"not-prose"},h=o({__name:"code_block",setup(d){const a=`first_name = "Bob"
 last_name = "Miller"
 name = f"{first_name} {last_name}"
 print("The name is", name)
diff --git a/docs/assets/index-8668586b.css b/docs/assets/index-8668586b.css
diff --git a/docs/assets/index-ebed095a.css b/docs/assets/index-ebed095a.css
diff --git a/docs/assets/index-ffdf6deb.js b/docs/assets/index-ffdf6deb.js
diff --git a/docs/assets/notebook-b1456740.js b/docs/assets/notebook-b1456740.js
@@ -1,4 +1,4 @@
-import{d as n,o,c as s,a as c,u as e,p as t,x as p}from"./index-aeae53b3.js";const r={class:"container mx-auto"},d=n({__name:"notebook",setup(l){const a=[`a=1
+import{d as n,o,c as s,a as c,u as e,p as t,w as p}from"./index-ffdf6deb.js";const r={class:"container mx-auto"},d=n({__name:"notebook",setup(l){const a=[`a=1
 b=2
 c=a+b
 c`,"c"];return(_,m)=>(o(),s("div",r,[c(e(p),{py:e(t),namespace:"example",cells:a},null,8,["py"])]))}});export{d as default};
diff --git a/docs/index.html b/docs/index.html
@@ -6,8 +6,8 @@
     <link rel="icon" href="/vuepython/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Doc</title>
-    <script type="module" crossorigin src="/vuepython/assets/index-aeae53b3.js"></script>
-    <link rel="stylesheet" href="/vuepython/assets/index-8668586b.css">
+    <script type="module" crossorigin src="/vuepython/assets/index-ffdf6deb.js"></script>
+    <link rel="stylesheet" href="/vuepython/assets/index-ebed095a.css">
   </head>
 
   <body>
diff --git a/docsite/components.d.ts b/docsite/components.d.ts
@@ -9,6 +9,7 @@ declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     DefaultSidebar: typeof import('./src/components/sidebars/DefaultSidebar.vue')['default']
     'IEva:arrowBackOutline': typeof import('~icons/eva/arrow-back-outline')['default']
+    'IFa6Brands:github': typeof import('~icons/fa6-brands/github')['default']
     'IFaSolid:moon': typeof import('~icons/fa-solid/moon')['default']
     'IFaSolid:sun': typeof import('~icons/fa-solid/sun')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
diff --git a/docsite/package.json b/docsite/package.json
@@ -18,7 +18,7 @@
     "usepython": "^0.0.10",
     "vue": "^3.2.31",
     "vue-router": "^4.1.5",
-    "vuepython": "^0.0.15"
+    "vuepython": "../../vuepython/"
   },
   "devDependencies": {
     "@docdundee/docnav": "^0.0.7",
diff --git a/docsite/src/components/TheHeader.vue b/docsite/src/components/TheHeader.vue
@@ -23,6 +23,11 @@
         <button v-for="link in links" class="border-none btn" @click="closeMenu(); $router.push(link.href)"
           v-html="link.name"></button>
         <py-status :py="py"></py-status>
+        <div>
+          <a class="text-2xl btn" :href="repoUrl">
+            <i-fa6-brands:github></i-fa6-brands:github>
+          </a>
+        </div>
         <div class="px-5 text-lg cursor-pointer txt-lighter dark:txt-light" @click="toggleDarkMode()">
           <i-fa-solid:moon v-if="!user.isDarkMode.value"></i-fa-solid:moon>
           <i-fa-solid:sun v-else></i-fa-solid:sun>
@@ -47,6 +52,7 @@ import { ref, computed } from "vue";
 import { SwHeader, SwMobileMenu } from "@snowind/header";
 import { PyStatus } from "vuepython"
 import { user, py } from "@/state";
+import { repoUrl } from "@/conf";
 import { useRouter } from "vue-router";
 
 defineProps({
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vuepython",
-  "version": "0.0.15",
+  "version": "0.0.16",
   "description": "Edit and run Python code in Vuejs",
   "repository": "https://github.com/synw/vuepython",
   "scripts": {
diff --git a/src/MainCss.vue b/src/MainCss.vue
@@ -1,16 +1,31 @@
 <template>
+  <div class="txt-success"></div>
 </template>
 
 <style lang="sass">
+.cursor-pointer
+  cursor: pointer
+.cursor-wait
+  cursor: wait
+.app-icon
+  @apply inline-block text-xl
+  &.icon-success
+    @apply text-green-600
+  &.icon-danger
+    @apply text-red-500 dark:text-red-400
+  &.icon-light
+    @apply text-gray-500 dark:text-gray-300
+  &.icon-lighter
+    @apply text-slate-200 dark:text-neutral-600
 .code-editor
   @apply overflow-x-auto overflow-y-hidden
 .pycode-block:not(.raw)
   .code-editor
     @apply p-2 bg-gray-100 dark:bg-black dark:text-neutral-200 rounded-md max-w-[100ch] xl:min-w-[100ch] border border-gray-200 dark:border-neutral-800
 .code-exec-btn
-  @apply mt-2
+  @apply mt-2 focus:ring-0 border
 .code-output
-  @apply pl-8 pt-2
+  @apply pl-8 pt-2 flex flex-col
   &.filled
     @apply px-2
 .btn.neuro
@@ -20,5 +35,15 @@
   @apply space-y-2
 .notebook
   & .cell-num
-    @apply text-slate-400
+    @apply text-slate-400 mr-5
+  & .buttonbar
+    @apply flex justify-end ml-8 w-max
+    & .add-cell-btn
+      @apply flex flex-row items-center space-x-2 btn text-slate-200 dark:text-neutral-700
+  & .cell
+    @apply flex flex-col w-full
+    & .cell-block
+      @apply flex flex-row w-full
+      & .cell-main
+        @apply flex-grow
 </style>
diff --git a/src/PyCodeBlock.vue b/src/PyCodeBlock.vue
@@ -1,33 +1,33 @@
 <template>
   <div class="pycode-block">
-    <div class="overflow-y-hidden code-editor">
+    <div class="code-editor">
       <code-editor :code="parsedCode" @keyup.ctrl.enter="runTheCode()" lang="python" @edit="updateCode($event)"
         :hljs="hljs"></code-editor>
     </div>
     <div v-if="controls == true">
-      <button class="border code-exec-btn btn neuro focus:ring-0"
-        :class="(canRun && !isExecuting) ? 'cursor-pointer' : 'cursor-wait'" @click="runTheCode()">
+      <button class="code-exec-btn btn neuro" :class="(canRun && !isExecuting) ? 'cursor-pointer' : 'cursor-wait'"
+        @click="runTheCode()">
         <template v-if="!canRun">
-          <app-icon name="play" class="inline-block text-xl txt-lighter"></app-icon>
+          <app-icon name="play" class="app-icon icon-lighter"></app-icon>
         </template>
         <template v-else>
           <template v-if="!isExecuting">
-            <app-icon name="play" class="inline-block text-xl txt-success"></app-icon>
+            <app-icon name="play" class="app-icon icon-success"></app-icon>
           </template>
           <template v-else>
             <template v-if="log.id == id">
-              <app-icon name="python" class="inline-block text-xl txt-danger"></app-icon>
+              <app-icon name="python" class="app-icon icon-danger"></app-icon>
             </template>
             <template v-else>
-              <app-icon name="play" class="inline-block text-xl txt-lighter"></app-icon>
+              <app-icon name="play" class="app-icon icon-lighter"></app-icon>
             </template>
           </template>
         </template>
         &nbsp;Execute
       </button>
       <!-- button class="ml-2 cursor-pointer neuro btn" v-if="namespace && controlsClear" @click="clear()">Clear</button -->
     </div>
-    <div class="flex flex-col code-output" :class="bottomMargin">
+    <div class="code-output" :class="bottomMargin">
       <div v-if="stdout == true && log.stdOut.length > 0">
         <pre v-for="row in log.stdOut" v-html="row"></pre>
       </div>
diff --git a/src/PyNotebook.vue b/src/PyNotebook.vue
@@ -1,23 +1,23 @@
 <template>
-  <div @keyup.esc="toggleCmdMode()" @keyup.a="pressA()">
-    <div class="flex justify-end ml-8 w-max">
-      <button class="flex flex-row items-center space-x-2 btn" @click="addCell()">
-        <div class="txt-lighter">
+  <div class="notebook" @keyup.esc="toggleCmdMode()" @keyup.a="pressA()">
+    <div class="buttonbar">
+      <button class="add-cell-btn" @click="addCell()">
+        <div>
           <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
             <path fill="currentColor"
               d="M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14zm-8-2h2v-4h4v-2h-4V7h-2v4H7v2h4z" />
           </svg>
         </div>
-        <div class="txt-lighter">Add a cell</div>
+        <div>Add a cell</div>
       </button>
     </div>
-    <div class="flex flex-col w-full">
-      <div :id="child.cellId" v-for="(child, i) in children" :key="child.id" class="flex flex-row w-full cell"
+    <div class="cell">
+      <div :id="child.cellId" v-for="(child, i) in children" :key="child.id" class="cell-block"
         :class="cellNums ? '' : ''">
-        <div v-if="cellNums" class="mr-5 cell-num">
+        <div v-if="cellNums" class="cell-num">
           [{{ i + 1 }}]&nbsp;:
         </div>
-        <div class="flex-grow">
+        <div class="cell-main">
           <py-code-block :id="child.id" :py="py" :code="child.code" :controls="false" :namespace="namespace">
           </py-code-block>
         </div>
@@ -30,7 +30,7 @@
 import { onBeforeMount, reactive, ref } from 'vue';
 import { usePython } from "usepython";
 import PyCodeBlock from "./PyCodeBlock.vue";
-import "highlight.js/styles/stackoverflow-light.css"
+//import "highlight.js/styles/stackoverflow-light.css"
 
 const props = defineProps({
   namespace: {

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		-import{d as o,o as n,c as t,b as s,a as c,u as e,p as _,s as l}from"./index-aeae53b3.js";const r={class:"prosed"},p=s("h1",null,"Code block example",-1),m={class:"not-prose"},h=o({__name:"code_block",setup(d){const a=`first_name = "Bob"
	`1`	+import{d as o,o as n,c as t,b as s,a as c,u as e,p as _,s as l}from"./index-ffdf6deb.js";const r={class:"prosed"},p=s("h1",null,"Code block example",-1),m={class:"not-prose"},h=o({__name:"code_block",setup(d){const a=`first_name = "Bob"
`2`	`2`	`last_name = "Miller"`
`3`	`3`	`name = f"{first_name} {last_name}"`
`4`	`4`	`print("The name is", name)`