themekit-js 1.1.4 → 1.1.5

package/README.md

@@ -1 +1,50 @@
-#  ThemeKit
+#  ThemeKit
+
+
+
+<!--#Doc-->
+### markdown样式 222 
+<!--Doc #--> 
+
+<!--#GithubCode--> 
+  [markdown-it](https://github.com/seedunk/markdown-it)&nbsp;&nbsp;&nbsp;[markdown-it2](https://github.com/seedunk/markdown-it)
+   
+
+  ```javascript
+    set test="123123"  
+    set test="123123"
+    function a(){} 
+    //撒大大 
+  ``` 
+<!--GithubCode #--> 
+
+<!--#Hero-->
+ ## 个人
+ # Seedunk
+  其他站点说明
+  
+  [跳转1](#)&nbsp;&nbsp;[跳转2](?theme=alt)
+
+  ![右图](bg.jpg)![右图](bg.jpg)
+  ![右图](bg.jpg?hero=right)
+<!--Hero #-->
+<!--#Doc-->
+# markdown样式 
+<!--Doc #-->
+
+<!--#Features-->
+  - ![](bg.jpg?class=icon)![](bg.jpg?class=icon)
+    # A
+    AAAAAAAAAAAAA
+    
+    [查看更多](/baidu.com)
+  - ## B
+    bbbb
+  
+  * ### c
+    ccc
+  * ### d
+    dd
+  * ### d
+    dd
+<!--Features #-->

package/dist/client/index.js

@@ -6,3 +6,4 @@ export { useRoute, useRouter } from './app/router';
 export { inBrowser, onContentUpdated, defineClientComponent, withBase, getScrollOffset } from './app/utils';
 // components
 export { Content } from './app/components/Content';
+//@seedunk

package/dist/client/theme-default/Layout.vue

@@ -51,6 +51,11 @@ provide('hero-image-slot-exists', heroImageSlotExists)
     </VPSidebar>
 
     <VPContent>
+      
+      <!--@seedun from TKBlock-->
+      <template #block-top><slot name="block-top" /></template>
+      <template #block-bottom><slot name="block-bottom" /></template>
+      
       <template #page-top><slot name="page-top" /></template>
       <template #page-bottom><slot name="page-bottom" /></template>
 
@@ -78,7 +83,7 @@ provide('hero-image-slot-exists', heroImageSlotExists)
       <template #aside-ads-before><slot name="aside-ads-before" /></template>
       <template #aside-ads-after><slot name="aside-ads-after" /></template>
     </VPContent>
-
+    
     <VPFooter />
     <slot name="layout-bottom" />
   </div>

package/dist/client/theme-default/components/TKBlock.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+ 
+import { useData } from '../composables/data' 
+import Hero from './blocks/Hero.vue';
+import Doc from './blocks/Doc.vue';  
+import Features from './blocks/Features.vue';
+const { frontmatter } = useData()
+</script>
+
+<template>
+  <div class="TKBlock">
+
+    <div class="clearfix" v-for="(item, index) in frontmatter.blocks" :key="index"> 
+          <Hero :block="item" v-if="item.block_type =='Hero'"></Hero> 
+          <Features :block="item" v-else-if="item.block_type =='Features'"></Features> 
+          <Doc :block="item" v-else-if="item.block_type =='Doc'" ></Doc>   
+    </div>   
+    <VPHomeContent v-if="frontmatter.markdownStyles !== false">
+      <Content />
+    </VPHomeContent>
+    <Content v-else />
+  </div>
+</template>
+<style>  
+@import 'blocks/Button.css';
+</style>
+<style scoped>
+.TKBlock {
+  margin-bottom: 96px;
+}
+
+@media (min-width: 768px) {
+  .TKBlock {
+    margin-bottom: 128px;
+  }
+}
+</style>
+
+
+
+
+ 
+

package/dist/client/theme-default/components/VPContent.vue

@@ -5,6 +5,7 @@ import { useSidebar } from '../composables/sidebar'
 import VPDoc from './VPDoc.vue'
 import VPHome from './VPHome.vue'
 import VPPage from './VPPage.vue'
+import TKBlock from './TKBlock.vue'
 
 const { page, frontmatter } = useData()
 const { hasSidebar } = useSidebar()
@@ -20,7 +21,11 @@ const { hasSidebar } = useSidebar()
     }"
   >
     <slot name="not-found" v-if="page.isNotFound"><NotFound /></slot>
-
+    <!--@seedun add TKBlock-->
+    <TKBlock v-else-if="frontmatter.layout === 'block'">
+      <template #block-top><slot name="block-top" /></template>
+      <template #block-bottom><slot name="block-bottom" /></template>
+    </TKBlock>
     <VPPage v-else-if="frontmatter.layout === 'page'">
       <template #page-top><slot name="page-top" /></template>
       <template #page-bottom><slot name="page-bottom" /></template>

package/dist/client/theme-default/components/blocks/Button.css

@@ -0,0 +1,87 @@
+.btn {
+    display: inline-block;
+    border: 1px solid transparent;
+    text-align: center;
+    font-weight: 600;
+    white-space: nowrap;
+    transition: color 0.25s, border-color 0.25s, background-color 0.25s;
+  }
+  a.btn{ 
+    text-decoration:none !important;
+    border-radius: 28px;
+    padding: 0 12px;
+    line-height: 28px;
+    font-size: 14px; 
+  }
+  a.btn .icon{ display: inline-flex; vertical-align: middle; margin-left: -6px; margin-right: 2px;margin-top: -2px; }
+  .btn:active {
+    transition: color 0.1s, border-color 0.1s, background-color 0.1s;
+  }
+  
+  .btn.medium {
+    border-radius: 20px;
+    padding: 0 20px;
+    line-height: 38px;
+    font-size: 14px;
+  }
+  
+  .btn.big {
+    border-radius: 24px;
+    padding: 0 24px;
+    line-height: 46px;
+    font-size: 16px;
+  }
+  
+  .btn.brand {
+    border-color: var(--vp-button-brand-border);
+    color: var(--vp-button-brand-text);
+    background-color: var(--vp-button-brand-bg);
+  }
+  
+  .btn.brand:hover {
+    border-color: var(--vp-button-brand-hover-border);
+    color: var(--vp-button-brand-hover-text);
+    background-color: var(--vp-button-brand-hover-bg);
+  }
+  
+  .btn.brand:active {
+    border-color: var(--vp-button-brand-active-border);
+    color: var(--vp-button-brand-active-text);
+    background-color: var(--vp-button-brand-active-bg);
+  }
+  
+  .btn.alt {
+    border-color: var(--vp-button-alt-border);
+    color: var(--vp-button-alt-text);
+    background-color: var(--vp-button-alt-bg);
+  }
+  
+  .btn.alt:hover {
+    border-color: var(--vp-button-alt-hover-border);
+    color: var(--vp-button-alt-hover-text);
+    background-color: var(--vp-button-alt-hover-bg);
+  }
+  
+  .btn.alt:active {
+    border-color: var(--vp-button-alt-active-border);
+    color: var(--vp-button-alt-active-text);
+    background-color: var(--vp-button-alt-active-bg);
+  }
+  
+  .btn.sponsor {
+    border-color: var(--vp-button-sponsor-border);
+    color: var(--vp-button-sponsor-text);
+    background-color: var(--vp-button-sponsor-bg);
+  }
+  
+  .btn.sponsor:hover {
+    border-color: var(--vp-button-sponsor-hover-border);
+    color: var(--vp-button-sponsor-hover-text);
+    background-color: var(--vp-button-sponsor-hover-bg);
+  }
+  
+  .btn.sponsor:active {
+    border-color: var(--vp-button-sponsor-active-border);
+    color: var(--vp-button-sponsor-active-text);
+    background-color: var(--vp-button-sponsor-active-bg);
+  } 

package/dist/client/theme-default/components/blocks/Button.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+   
+interface Props {
+  block?:any
+  tag?: string
+  size?: 'medium' | 'big'
+  theme?: 'brand' | 'alt' | 'sponsor' 
+  href?: string
+  target?: string;
+  rel?: string;
+  icon?:any;
+  baseClass?:string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 'medium' 
+})
+ 
+const component = computed(() => {
+  return props.tag || props.href ? 'a' : 'button'
+})
+
+const params = computed(() => { 
+    const pattern = /[?&]([^=#]+)=([^&#]*)/g;
+    let params:any = {};
+    let match; 
+    while ((match = pattern.exec(props.href==null?"?size=big":props.href)) !== null) {
+        params[match[1]] = match[2]
+    } 
+    return params
+    // return [params["theme"]==null?props.theme:params["theme"],params["size"]==null?props.size:params["size"],props.baseClass] 
+})
+
+ 
+</script>
+
+<template >
+  <component
+    :is="component"
+     class="btn"
+    :class="[params['theme']==null?props.theme:params['theme'],params['size']==null?props.size:params['size'],props.baseClass]"
+    :href="href ? href : undefined"
+    :target="props.target"
+    > 
+    <slot></slot> 
+    <template v-for="(item) in block.children" >{{item.content}}</template></component>
+</template> 

package/dist/client/theme-default/components/blocks/Doc.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { useWindowSize } from '@vueuse/core'
+import { computed } from 'vue' 
+const { width: vw } = useWindowSize({ includeScrollbar: false }) 
+const { block} =defineProps<{
+  block?: any
+}>()
+
+const docStyles= computed(() => { 
+
+    let styles:any=[ vw ? { '--vp-offset': "calc(50% - "+vw.value/2+"px)"} : {}];
+    if(block['background-color']){
+      styles.push({'padding':'1px 0','background-color':block['background-color']})
+    }
+    if(block['background-image']){
+      styles.push({'padding':'1px 0','background-image':block['background-image']})
+    }  
+    return styles
+})
+    
+ 
+</script> 
+<template> 
+ 
+<div class="vp-doc doc" :style="docStyles" >
+  <div class="container" v-html="block.content"></div>
+</div>
+</template> 
+ 
+<style>  
+.doc{  background-size: cover;background-position: center;} 
+</style>
+<style scoped>  
+ 
+.container {
+  margin: auto;
+  width: 100%;
+  max-width: 1280px;
+  padding: 0 24px;
+}
+
+@media (min-width: 640px) {
+  .container {
+    padding: 0 48px;
+  }
+}
+
+@media (min-width: 960px) {
+  .container {
+    width: 100%;
+    padding: 0 64px;
+  }
+}
+
+.vp-doc :deep(.VPHomeSponsors),
+.vp-doc :deep(.VPTeamPage) {
+  margin-left: var(--vp-offset, calc(50% - 50vw));
+  margin-right: var(--vp-offset, calc(50% - 50vw));
+}
+
+.vp-doc :deep(.VPHomeSponsors h2) {
+  border-top: none;
+  letter-spacing: normal;
+}
+
+.vp-doc :deep(.VPHomeSponsors a),
+.vp-doc :deep(.VPTeamPage a){
+  text-decoration: none;
+}
+
+
+</style>

package/dist/client/theme-default/components/blocks/Feature.vue

@@ -0,0 +1,114 @@
+<script setup lang="ts"> 
+import Image from './Image.vue' 
+import Button from './Button.vue' 
+
+const _blank:string="_blank"
+
+defineProps<{
+  block?: any
+}>()
+</script>
+
+<template>
+  <div  class="VPFeature"  >
+    <article class="box"> 
+       <template v-for="(item) in block.children" >
+                    <h1 class="title" v-if="item.block_type=='h1'">
+                       <span v-for="(h1) in item.children" class="clip">{{h1.content}}</span>
+                    </h1> 
+                    <h2 class="title" v-if="item.block_type=='h2'">
+                       <span v-for="(h2) in item.children" class="clip">{{h2.content}}</span>
+                    </h2>
+                    <h3 class="title" v-if="item.block_type=='h3'">
+                       <span v-for="(h3) in item.children" class="clip">{{h3.content}}</span>
+                    </h3>
+                    <p v-if="item.block_type=='p'" class="details"  >
+                       <template v-for="(subitem) in item.children"> 
+                              <template v-if="subitem.block_type=='text'">{{subitem.content}} </template>
+                              <Image  v-if="subitem.block_type=='img'"
+                                        :block="subitem"  
+                                      /> 
+                              <Button  v-if="subitem.block_type=='a'"
+                                    tag="a"
+                                    size="medium"
+                                    :block="subitem" 
+                                    :href="subitem.href"
+                                    :target="_blank" 
+                                ></Button> 
+                          
+                       </template>
+                    </p>
+                   
+        </template> 
+    </article>
+  </div>
+</template>
+
+<style scoped>
+.VPFeature {
+  display: block;
+  border: 1px solid var(--vp-c-bg-soft);
+  border-radius: 12px;
+  height: 100%;
+  background-color: var(--vp-c-bg-soft);
+  transition: border-color 0.25s, background-color 0.25s; 
+  position: relative;
+  overflow: hidden;
+}
+ 
+
+.VPFeature.link:hover {
+  border-color: var(--vp-c-brand-1);
+}
+
+.box {
+  display: flex;
+  flex-direction: column;
+  padding: 24px;
+  height: 100%;
+}
+
+.box > :deep(.VPImage) {
+  margin-bottom: 20px;
+}
+
+ 
+
+.title {
+  line-height: 24px;
+  font-size: 16px;
+  font-weight: 600;
+  z-index: 2;
+}
+h1.title{
+   font-size: 32px;
+   padding:16px 0;
+}
+.details {
+  flex-grow: 1; 
+  line-height: 24px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--vp-c-text-2);
+  z-index: 1;
+}
+ 
+
+
+
+.link-text {
+  padding-top: 8px;
+}
+
+.link-text-value {
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--vp-c-brand-1);
+}
+
+.link-text-icon {
+  margin-left: 6px;
+}
+</style>

package/dist/client/theme-default/components/blocks/Features.vue

@@ -0,0 +1,117 @@
+<script setup lang="ts"> 
+import { computed } from 'vue' 
+
+import Feature from './Feature.vue';
+export interface Feature { 
+  title: string
+  details: string
+  link?: string
+  linkText?: string
+  rel?: string
+  target?: string
+}
+
+const props = defineProps<{
+  block: any
+}>() 
+const grids = computed(() => {
+  const uls = props.block.children
+   let ret:any=[]
+   for(let i=0;i<uls.length;i++){
+      if(uls[i].block_type=="ul"){
+       const length=uls[i].children.length
+       if (!length) {
+        ret[i]=""
+      } else if (length === 2) {
+        ret[i]= 'grid-2'
+      } else if (length === 3) {
+        ret[i]= 'grid-3'
+      } else if (length % 3 === 0) {
+        ret[i]= 'grid-6'
+      } else if (length > 3) {
+        ret[i]= 'grid-4'
+      } 
+    }
+   }
+   return ret 
+})
+</script>
+
+<template  >
+  <template v-for="(ul,index) in block.children" >
+  <div v-if="ul.block_type=='ul'" class="VPFeatures">
+    <div class="container"> 
+      <div class="items">
+        <div
+          v-for="feature in ul.children" 
+          class="item"
+          :class="grids[index]"
+          >
+           <Feature :block="feature"></Feature>
+        </div>
+      </div>
+    </div>
+  </div>
+  </template>
+</template>
+
+<style scoped>
+.VPFeatures {
+  position: relative;
+  padding: 0 24px;
+}
+
+@media (min-width: 640px) {
+  .VPFeatures {
+    padding: 0 48px;
+  }
+}
+
+@media (min-width: 960px) {
+  .VPFeatures {
+    padding: 0 64px;
+  }
+}
+
+.container {
+  margin: 0 auto;
+  max-width: 1152px;
+}
+
+.items {
+  display: flex;
+  flex-wrap: wrap;
+  margin: -8px;
+}
+
+.item {
+  padding: 8px;
+  width: 100%;
+}
+
+@media (min-width: 640px) {
+  .item.grid-2,
+  .item.grid-4,
+  .item.grid-6 {
+    width: calc(100% / 2);
+  }
+}
+
+@media (min-width: 768px) {
+  .item.grid-2,
+  .item.grid-4 {
+    width: calc(100% / 2);
+  }
+
+  .item.grid-3,
+  .item.grid-6 {
+    width: calc(100% / 3);
+  }
+}
+
+@media (min-width: 960px) {
+  .item.grid-4 {
+    width: calc(100% / 4);
+  }
+}
+</style>

package/dist/client/theme-default/components/blocks/GithubCode._vue

@@ -0,0 +1,111 @@
+<script setup lang="ts">  
+import Button from './Button.vue';    
+interface Props {
+  block?:any 
+}
+const props = withDefaults(defineProps<Props>(), {})
+  
+import { Octokit } from "octokit"
+const octokit  = new Octokit({ 
+  //auth: 'YOUR-TOKEN'
+}); 
+
+function GetGithubUserClass(src:string){
+      const usernameRegex = /(?<=\.com\/).*?(?=\/)/g;
+      const username: any = usernameRegex.exec(src);
+      if (username == null) {
+        return "";
+      } else { 
+         const cla="github-user-"+username;
+         octokit.rest.users.getByUsername({ "username": username[0] }).then((v)=>{
+             console.log(v.data.avatar_url);
+             const eles= document.getElementsByClassName(cla)
+             for(let i=0;i<eles.length;i++){
+              if(eles[i].getAttribute("src")==null)
+                 eles[i].setAttribute("src",v.data.avatar_url)
+             }
+         })
+
+        return cla
+      }  
+}
+ 
+</script> 
+<template> 
+ <div  class="vp-doc container"> 
+       <template v-for="(item) in block.children" >   
+              <template v-if="item.block_type=='p'" v-for="(pItem) in item.children"  >   
+                         <template v-if="pItem.block_type=='a'">
+                            <Button tag="a"
+                                 size="medium" 
+                                 baseClass="github-user-button"
+                                :block="pItem" 
+                                :href="pItem.href"  
+                                >
+                                <i class="github-user"><img :class="GetGithubUserClass(pItem.href)" ></i>
+                            </Button> 
+                         </template>
+                         <template v-if="pItem.block_type=='text'">{{pItem.content}}</template>
+                         <template v-if="pItem.block_type=='img'&&pItem.src!=HeroImg.src"><img :src="pItem.src"></template>
+              
+              </template>
+              <template v-if="item.block_type=='div'" > 
+                  <div v-html="item.html"></div>
+              </template>
+       </template></div>
+</template>
+<style scoped>
+.container {
+  margin: auto;
+  width: 100%;
+  max-width: 1280px;
+  padding: 0 24px;
+}
+
+@media (min-width: 640px) {
+  .container {
+    padding: 0 48px;
+  }
+}
+
+@media (min-width: 960px) {
+  .container {
+    width: 100%;
+    padding: 0 64px;
+  }
+}
+
+.vp-doc :deep(.VPHomeSponsors),
+.vp-doc :deep(.VPTeamPage) {
+  margin-left: var(--vp-offset, calc(50% - 50vw));
+  margin-right: var(--vp-offset, calc(50% - 50vw));
+}
+
+.vp-doc :deep(.VPHomeSponsors h2) {
+  border-top: none;
+  letter-spacing: normal;
+}
+
+.vp-doc :deep(.VPHomeSponsors a),
+.vp-doc :deep(.VPTeamPage a){
+  text-decoration: none;
+}
+
+.github-user-button{ 
+    padding: 0!important;
+    line-height: 32px!important;
+}
+
+.github-user{ 
+    display: inline-flex; 
+    vertical-align: middle;
+    padding:2px;
+    height: 26px;
+    width: 32px;
+    background-color: #e2e2e2;
+    border-radius: 16px; 
+}
+.github-user img{
+     height: 22px;
+}
+</style>