refactor: 2.x

.gitignore

@@ -1,4 +1,6 @@
 node_modules
 dist
 mock.ts
-build
+build
+.vscode
+.idea

auto-imports.d.ts

@@ -0,0 +1,5 @@
+// Generated by 'unplugin-auto-import'
+export {}
+declare global {
+
+}

components.d.ts

@@ -0,0 +1,20 @@
+// generated by unplugin-vue-components
+// We suggest you to commit this file into source control
+// Read more: https://github.com/vuejs/core/pull/3399
+import '@vue/runtime-core'
+
+export {}
+
+declare module '@vue/runtime-core' {
+  export interface GlobalComponents {
+    Config: typeof import('./src/components/Config.vue')['default']
+    DisplaySVG: typeof import('./src/components/DisplaySVG.vue')['default']
+    ElMenu: typeof import('element-plus/es')['ElMenu']
+    ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
+    ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
+    Footer: typeof import('./src/components/Footer.vue')['default']
+  }
+  export interface ComponentCustomProperties {
+    vLoading: typeof import('element-plus/es')['ElLoadingDirective']
+  }
+}

config.ts

@@ -1,4 +1,4 @@
-import { ConfigItem } from "./src/core/types"
+import { ConfigItem } from "./src/types"
 
 /**
  * Github user custom contributors svg here
@@ -12,7 +12,7 @@ const config: ConfigItem =
 {
   // https://github.com/veaba/contributors
   'veaba/contributors': {
-    ignore: [], // 
+    ignore: [], //
     size: 64,
     height: 200,
     width: 800,
@@ -35,4 +35,4 @@ const config: ConfigItem =
   }
 }
 
-export default config
+export default config

package.json

@@ -9,9 +9,13 @@
     "test-ui": "vitest  --ui"
   },
   "dependencies": {
+    "@element-plus/icons-vue": "^2.0.6",
     "axios": "^0.27.2",
+    "element-plus": "^2.2.9",
     "esbuild": "^0.14.49",
     "lodash": "^4.17.21",
+    "unplugin-auto-import": "^0.9.3",
+    "unplugin-vue-components": "^0.21.1",
     "vite": "^3.0.0",
     "vite-svg-loader": "^3.4.0",
     "vitest": "^0.18.0",

src/App.vue

@@ -1,15 +1,10 @@
-<!-- 
-  @TODO: preview repo contributors svg page
- -->
 <script setup lang="ts">
-import DisplaySVG from './pages/DisplaySVG.vue'
+import Home from './pages/Home.vue'
 </script>
 
 <template>
-  <DisplaySVG></DisplaySVG>
-  <footer>
-    <p>Copyright @ 2022 <a href="https://github.com/veaba/" target="_blank" rel="noopener noreferrer">Veaba</a></p>
-  </footer>
+
+  <Home></Home>
 </template>
 
 <style>

src/components/Config.vue

@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+export default {
+  name: "Config.vue"
+};
+</script>
+
+<style scoped>
+
+</style>

src/components/DisplaySVG.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import {ref} from 'vue'
+import {ElButton, ElInput, ElNotification} from 'element-plus'
+import axios from 'axios'
+import {sortBy} from 'lodash'
+import {BottomRight} from '@element-plus/icons-vue'
+import {getOwnerRepo, getTotalList} from '@/utils'
+import {mockData} from '../mock'
+
+import veabaSvg from '../../repos/veaba/contributors.svg'
+import docsZhCN from '../../repos/vuejs-translations/docs-zh-cn.svg'
+import circleSVG from '../assets/circle.svg'
+
+const veabaSvgData = veabaSvg
+const docsZhCNData = docsZhCN
+const circleSVGData = circleSVG
+
+const defaultSort = sortBy(mockData, (o) => -o.total) || []
+const sortList = getTotalList(defaultSort, {ignoreTotal: 0, ignore: []})
+/* ******************** ref ******************* */
+const repo = ref('vuejs-translations/docs-zh-cn')
+const loading = ref(false)
+const originData = ref(sortList || [])
+
+const onSearch = () => {
+  const {owner, repo: repoName} = getOwnerRepo(repo.value)
+  if (!owner || !repoName) {
+    ElNotification({
+      title: 'Please check it',
+      type: 'error',
+      message: 'it\'s a legal Github repo, it should be link: vuejs-translations/docs-zh-cn'
+    })
+    return
+  }
+  getGithubContributors(`${owner}/${repoName}`)
+}
+
+const onChange = (t: string) => {
+  console.info('t=>', t);
+}
+
+
+const getGithubContributors = async (repoKey: string) => {
+  let repData = []
+  try {
+    loading.value = true
+    const resp = await axios.get(`http://api.github.com/repos/${repoKey}/stats/contributors`)
+    if (resp?.data) {
+      repData = resp.data || []
+      // console.log('sort totalList=>', _.sortBy(totalList, function (o) { return o.total }))
+      originData.value = sortBy(repData, (o) => o.total);
+      // const cleanData = getTotalList(repData)
+    }
+    loading.value = false
+    console.log('res data==>', resp)
+  } catch (err) {
+    console.error('get repo stats contributors err=>', err)
+  }
+}
+</script>
+<template>
+  <div class="searchBody">
+    <el-input v-loading.fullscreen.lock="loading" size="large" v-model="repo"
+              placeholder="Please input a repo: {owner}/{repo}"
+              @change="onChange">
+      <template #append>
+        <ElButton type="primary" :disabled="loading" :loading="loading" @click="onSearch">Go</ElButton>
+      </template>
+    </el-input>
+  </div>
+
+  <h1> SVG veaba/contributor demo</h1>
+  <!--  <div v-html="veabaSvgData" class="divSVG"></div>-->
+
+  <!--  <h1> SVG vuejs-translations/docs-zh-cn demo</h1>-->
+  <!--  <div v-html="docsZhCNData" class="divSVG"></div>-->
+
+  <!--  <h1> SVG border-radius 1</h1>-->
+  <!--  <div v-html="circleSVGData" class="divSVG"></div>-->
+
+</template>
+
+
+<style lang="scss" scoped>
+.searchBody {
+  width: 400px;
+  margin: 100px auto;
+
+}
+</style>

src/components/Footer.vue

@@ -0,0 +1,15 @@
+<template>
+  <footer>
+    Copyright @ 2022 <a href="https://github.com/veaba/" rel="noreferrer" target="_blank">veaba</a>
+  </footer>
+</template>
+
+<script>
+export default {
+  name: "Footer"
+};
+</script>
+
+<style scoped>
+
+</style>

src/core/app.ts

@@ -10,8 +10,8 @@ import { writeFile } from 'node:fs/promises';
 import { chunk } from 'lodash';
 import { svgStart, svgEnd, asyncHandleUsersSVG, asyncHandlerUserDefsSVG } from './svg';
 import { listTen } from '../../tests/mock'
-import { UserConfig, UserItem } from './types';
-import { getOwnerRepo } from './utils';
+import { UserConfig, UserItem } from '../types';
+import { getOwnerRepo } from '../utils';
 
 import config from '../../config'
 import console from 'node:console';
@@ -24,7 +24,7 @@ const BASE_SIZE = 100
 
 const generateUserListSVG = async (userList: UserItem[], config: UserConfig) => {
 
-  // split => two dimensional array 
+  // split => two dimensional array
   let splitList: UserItem[] | UserItem[][] = userList
 
   const svgWidth = config.width || SVG_WIDTH
@@ -51,7 +51,7 @@ const generateUserListSVG = async (userList: UserItem[], config: UserConfig) =>
     isRadius,
   }
 
-  // radius 
+  // radius
   if (config.isRadius === undefined || config.isRadius === true) {
     return `${svgStart(svgWidth, svgHeight)}
   <defs>
@@ -92,4 +92,4 @@ export const saveSVG = async (ownerRepo: string, repoUserList: UserItem[]) => {
 }
 
 // saveSVG('veaba/contributors',listTen)
-// saveSVG('vuejs-translations/docs-zh-cn',listTen)
+// saveSVG('vuejs-translations/docs-zh-cn',listTen)

src/core/github.ts

@@ -2,27 +2,27 @@ import axios from "axios"
 
 import { createWriteStream } from 'node:fs'
 import { resolve } from 'path'
-import { MD5Item, UserConfig, UserItem } from "./types"
+import { MD5Item, UserConfig, UserItem } from "../types"
 import { sortBy } from 'lodash'
 import { data } from '../../tests/mock'
-import { getTotalList, getOwnerRepo, readMD5 } from "./utils"
+import { getTotalList, getOwnerRepo } from "../utils"
 
 
 
 
 /**
  * get contributors avatar to public/avatars
- * 
+ *
  * 1、TODO check local has been save ?
- * 
+ *
  * 2、TODO 通过存在，则通过 md5 判断，一致则略过
- * 
+ *
  * 3、TODO 不一致则拉取
- * 
+ *
  * 4、TODO if not, get remote data and save to public/avatars
- * 
+ *
  * 5、TODO 存储一份本地 avatars 映射的 md5 list
- * 
+ *
 */
 export const getRepoData = async (repoKey: string, repoConfig: UserConfig): Promise<UserItem[]> => {
   const { owner, repo } = getOwnerRepo(repoKey)

src/core/index.ts

@@ -3,8 +3,8 @@ import { resolve } from 'path'
 import { saveSVG } from './app';
 import { writeFile, access } from "node:fs/promises" // access
 import { downloadAvatar, getRepoData } from './github';
-import { MD5Item, UserItem } from './types';
-import { isHasFile, readMD5 } from "./utils"
+import { MD5Item, UserItem } from '../types';
+// import { isHasFile, readMD5 } from "../utils"
 
 import md5JSON from '../../public/avatars/avatarsMD5.json'
 
@@ -70,4 +70,4 @@ export const serverStart = async () => {
 
 }
 
-serverStart()
+// serverStart()

src/core/svg.ts

@@ -1,6 +1,6 @@
 import { imagePathToBase64 } from "./image"
-import { ImageXYItem, SvgConfig, UserItem, XYItem } from "./types"
-import { autoCenter, getImageX, getImageY, getTextX, getTextY } from "./utils"
+import { ImageXYItem, SvgConfig, UserItem, XYItem } from "../types"
+import { autoCenter, getImageX, getImageY, getTextX, getTextY } from "../utils"
 
 export const svgStart = (width: number, height: number) => {
   return `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 ${width} ${height}" width="${width}" height="${height}">`
@@ -17,7 +17,7 @@ export const svgNoFound = () => {
 /**
  * generate svg block string
  * @param {UserItem} userItem
- * @param {number} xyItem 
+ * @param {number} xyItem
  * @param {number} svgConfig
 */
 export const svgBlockANode = async (userItem: UserItem, xyItem: XYItem, childrenLen: number, svgConfig: SvgConfig): Promise<string> => {
@@ -122,4 +122,4 @@ export const asyncHandlerUserDefsSVG = async (splitList: (UserItem | UserItem[])
     }
   }))
   return userBlockData
-}
+}

src/main.ts

@@ -1,4 +1,5 @@
 import { createApp } from "vue";
+import 'element-plus/dist/index.css'
 import App from './App.vue'
 
-createApp(App).mount('#app')
+createApp(App).mount('#app')