diff --git a/components.d.ts b/components.d.ts new file mode 100644 index 0000000..0dbdb14 --- /dev/null +++ b/components.d.ts @@ -0,0 +1,22 @@ +/* eslint-disable */ +/* prettier-ignore */ +// @ts-nocheck +// Generated by unplugin-vue-components +// Read more: https://github.com/vuejs/core/pull/3399 +export {} + +declare module 'vue' { + export interface GlobalComponents { + ACarousel: typeof import('ant-design-vue/es')['Carousel'] + HelloWorld: typeof import('./src/components/HelloWorld.vue')['default'] + IconCommunity: typeof import('./src/components/icons/IconCommunity.vue')['default'] + IconDocumentation: typeof import('./src/components/icons/IconDocumentation.vue')['default'] + IconEcosystem: typeof import('./src/components/icons/IconEcosystem.vue')['default'] + IconSupport: typeof import('./src/components/icons/IconSupport.vue')['default'] + IconTooling: typeof import('./src/components/icons/IconTooling.vue')['default'] + RouterLink: typeof import('vue-router')['RouterLink'] + RouterView: typeof import('vue-router')['RouterView'] + TheWelcome: typeof import('./src/components/TheWelcome.vue')['default'] + WelcomeItem: typeof import('./src/components/WelcomeItem.vue')['default'] + } +} diff --git a/package.json b/package.json index 5762cc1..e4d728d 100644 --- a/package.json +++ b/package.json @@ -16,8 +16,10 @@ "dependencies": { "monaco-editor": "^0.47.0", "monaco-editor-vue3": "^0.1.10", + "tw-elements": "^2.0.0", "vue": "^3.4.21", - "vue-router": "^4.3.0" + "vue-router": "^4.3.0", + "vue3-carousel": "^0.3.1" }, "devDependencies": { "@rushstack/eslint-patch": "^1.3.3", @@ -38,6 +40,7 @@ "sass": "^1.72.0", "tailwindcss": "^3.4.1", "typescript": "~5.4.0", + "unplugin-vue-components": "^0.26.0", "vite": "^5.1.5", "vite-plugin-vue-devtools": "^7.0.16", "vue-tsc": "^2.0.6" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c71b77c..cce983e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -11,12 +11,18 @@ dependencies: monaco-editor-vue3: specifier: ^0.1.10 version: 0.1.10(typescript@5.4.2) + tw-elements: + specifier: ^2.0.0 + version: 2.0.0 vue: specifier: ^3.4.21 version: 3.4.21(typescript@5.4.2) vue-router: specifier: ^4.3.0 version: 4.3.0(vue@3.4.21) + vue3-carousel: + specifier: ^0.3.1 + version: 0.3.1(vue@3.4.21) devDependencies: '@rushstack/eslint-patch': @@ -73,6 +79,9 @@ devDependencies: typescript: specifier: ~5.4.0 version: 5.4.2 + unplugin-vue-components: + specifier: ^0.26.0 + version: 0.26.0(vue@3.4.21) vite: specifier: ^5.1.5 version: 5.1.6(@types/node@20.11.28)(sass@1.72.0) @@ -2345,6 +2354,11 @@ packages: resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==} dev: true + /local-pkg@0.4.3: + resolution: {integrity: sha512-SFppqq5p42fe2qcZQqqEOiVRXl+WCP1MdT6k7BDEW1j++sp5fIY+/fdRQitvKgB5BrBcmrs5m/L0v2FrU5MY1g==} + engines: {node: '>=14'} + dev: true + /locate-path@5.0.0: resolution: {integrity: sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==} engines: {node: '>=8'} @@ -3148,6 +3162,10 @@ packages: resolution: {integrity: sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==} dev: true + /tw-elements@2.0.0: + resolution: {integrity: sha512-aiitkqzmCZIZ9zJr3V6ErVzU/CrKoAkptpv94t0pEKnVn2Ah4jOplXOO/v6Fo9jr3PoTA5dxvlyS4w8rnW/iag==} + dev: false + /type-check@0.4.0: resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==} engines: {node: '>= 0.8.0'} @@ -3174,6 +3192,45 @@ packages: engines: {node: '>= 10.0.0'} dev: true + /unplugin-vue-components@0.26.0(vue@3.4.21): + resolution: {integrity: sha512-s7IdPDlnOvPamjunVxw8kNgKNK8A5KM1YpK5j/p97jEKTjlPNrA0nZBiSfAKKlK1gWZuyWXlKL5dk3EDw874LQ==} + engines: {node: '>=14'} + peerDependencies: + '@babel/parser': ^7.15.8 + '@nuxt/kit': ^3.2.2 + vue: 2 || 3 + peerDependenciesMeta: + '@babel/parser': + optional: true + '@nuxt/kit': + optional: true + dependencies: + '@antfu/utils': 0.7.7 + '@rollup/pluginutils': 5.1.0 + chokidar: 3.6.0 + debug: 4.3.4 + fast-glob: 3.3.2 + local-pkg: 0.4.3 + magic-string: 0.30.8 + minimatch: 9.0.3 + resolve: 1.22.8 + unplugin: 1.10.0 + vue: 3.4.21(typescript@5.4.2) + transitivePeerDependencies: + - rollup + - supports-color + dev: true + + /unplugin@1.10.0: + resolution: {integrity: sha512-CuZtvvO8ua2Wl+9q2jEaqH6m3DoQ38N7pvBYQbbaeNlWGvK2l6GHiKi29aIHDPoSxdUzQ7Unevf1/ugil5X6Pg==} + engines: {node: '>=14.0.0'} + dependencies: + acorn: 8.11.3 + chokidar: 3.6.0 + webpack-sources: 3.2.3 + webpack-virtual-modules: 0.6.1 + dev: true + /update-browserslist-db@1.0.13(browserslist@4.23.0): resolution: {integrity: sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==} hasBin: true @@ -3359,6 +3416,14 @@ packages: typescript: 5.4.2 dev: true + /vue3-carousel@0.3.1(vue@3.4.21): + resolution: {integrity: sha512-86vUkNPBzL2PVuR9w6hUsI90ccFjLp+K8cSFpRTISf+SjUQY3fMHc5CFF5MUL62v1xYYm27zEBmQupO9VQx9Kw==} + peerDependencies: + vue: ^3.2.0 + dependencies: + vue: 3.4.21(typescript@5.4.2) + dev: false + /vue@3.4.21(typescript@5.4.2): resolution: {integrity: sha512-5hjyV/jLEIKD/jYl4cavMcnzKwjMKohureP8ejn3hhEjwhWIhWeuzL2kJAjzl/WyVsgPY56Sy4Z40C3lVshxXA==} peerDependencies: @@ -3374,6 +3439,15 @@ packages: '@vue/shared': 3.4.21 typescript: 5.4.2 + /webpack-sources@3.2.3: + resolution: {integrity: sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==} + engines: {node: '>=10.13.0'} + dev: true + + /webpack-virtual-modules@0.6.1: + resolution: {integrity: sha512-poXpCylU7ExuvZK8z+On3kX+S8o/2dQ/SVYueKA0D4WEMXROXgY8Ez50/bQEUmvoSMMrWcrJqCHuhAbsiwg7Dg==} + dev: true + /which@2.0.2: resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==} engines: {node: '>= 8'} diff --git a/src/assets/main.css b/src/assets/main.css index d56e195..d66d14e 100644 --- a/src/assets/main.css +++ b/src/assets/main.css @@ -2,8 +2,21 @@ @import './icon.css'; @tailwind base; +@layer base { + html { + @apply text-surface; + @apply bg-white; + } + html.dark { + @apply text-neutral-50; + @apply bg-body-dark; + } +} @tailwind components; @tailwind utilities; +p { + @apply leading-[1.6]; +} #app { margin: 0 auto; diff --git a/src/assets/video/cross-id/0.mp4 b/src/assets/video/cross-id/0.mp4 index 3f19527..150f704 100644 Binary files a/src/assets/video/cross-id/0.mp4 and b/src/assets/video/cross-id/0.mp4 differ diff --git a/src/assets/video/cross-id/1.mp4 b/src/assets/video/cross-id/1.mp4 index 56ce842..b6ee91c 100644 Binary files a/src/assets/video/cross-id/1.mp4 and b/src/assets/video/cross-id/1.mp4 differ diff --git a/src/assets/video/cross-id/2.mp4 b/src/assets/video/cross-id/2.mp4 index 435cb2b..2bebd28 100644 Binary files a/src/assets/video/cross-id/2.mp4 and b/src/assets/video/cross-id/2.mp4 differ diff --git a/src/assets/video/main_video.mp4 b/src/assets/video/main_video.mp4 index 1e98429..bac66c5 100644 Binary files a/src/assets/video/main_video.mp4 and b/src/assets/video/main_video.mp4 differ diff --git a/src/components/AnimateHumanVideos.vue b/src/components/AnimateHumanVideos.vue new file mode 100644 index 0000000..7645b89 --- /dev/null +++ b/src/components/AnimateHumanVideos.vue @@ -0,0 +1,125 @@ + + + \ No newline at end of file diff --git a/src/components/ComparisionVideos.vue b/src/components/ComparisionVideos.vue new file mode 100644 index 0000000..73f147f --- /dev/null +++ b/src/components/ComparisionVideos.vue @@ -0,0 +1,106 @@ + + + \ No newline at end of file diff --git a/src/components/CrossIdVideos.vue b/src/components/CrossIdVideos.vue new file mode 100644 index 0000000..346627d --- /dev/null +++ b/src/components/CrossIdVideos.vue @@ -0,0 +1,98 @@ + + + + + \ No newline at end of file diff --git a/src/components/T2IVideos.vue b/src/components/T2IVideos.vue new file mode 100644 index 0000000..48fc4ab --- /dev/null +++ b/src/components/T2IVideos.vue @@ -0,0 +1,116 @@ + + + + + \ No newline at end of file diff --git a/src/components/UnseenVideos.vue b/src/components/UnseenVideos.vue new file mode 100644 index 0000000..d17bbef --- /dev/null +++ b/src/components/UnseenVideos.vue @@ -0,0 +1,118 @@ + + + \ No newline at end of file diff --git a/src/config.json b/src/config.json index 3d33690..ae246b8 100644 --- a/src/config.json +++ b/src/config.json @@ -14,7 +14,7 @@ }, { "name": "Zuozhuo Dai", - "homepage": "" + "homepage": "https://github.com/daizuozhuo" }, { "name": "Yinghui Xu", diff --git a/src/directives/video-lazy.ts b/src/directives/video-lazy.ts index 9a3605e..a443eaf 100644 --- a/src/directives/video-lazy.ts +++ b/src/directives/video-lazy.ts @@ -1,46 +1,42 @@ - -const videos = new Map(); - +const videos = new Map() function playOrPause(video: HTMLVideoElement) { - const { top, bottom } = video.getBoundingClientRect(); + const { left, right, top, bottom } = video.getBoundingClientRect() if (bottom < 0 || top > window.innerHeight) { - video.pause(); - } else { - video.play(); + video.pause() + } else if (left != 0 && right != 0) { + video.play() } } const onscroll = (evt: Event) => { for (const video of videos.keys()) { - playOrPause(video); + playOrPause(video) } -}; +} export default { name: 'lazy', option: { mounted: (el: HTMLElement) => { if (el instanceof HTMLVideoElement) { - videos.set(el, el.getBoundingClientRect()); + videos.set(el, el.getBoundingClientRect()) el.oncanplay = () => { - videos.set(el, el.getBoundingClientRect()); - playOrPause(el); + videos.set(el, el.getBoundingClientRect()) + playOrPause(el) } } if (videos.size) { - !window.onscroll && (window.onscroll = onscroll); + !window.onscroll && (window.onscroll = onscroll) } }, unmounted: (el: HTMLElement) => { if (el instanceof HTMLVideoElement) { - videos.delete(el); + videos.delete(el) } if (!videos.size) { - window.onscroll = null; + window.onscroll = null } - }, + } } } - - diff --git a/src/main.ts b/src/main.ts index 40c96ef..89bbe4a 100644 --- a/src/main.ts +++ b/src/main.ts @@ -3,35 +3,11 @@ import '@/assets/main.css' import { createApp } from 'vue' import App from './App.vue' import router from './router' - -import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker' -import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker' -import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker' -import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker' -import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker' -;import videoLazy from './directives/video-lazy' -(self as any).MonacoEnvironment = { - getWorker(_: any, label: string) { - if (label === 'json') { - return new jsonWorker() - } - if (label === 'css' || label === 'scss' || label === 'less') { - return new cssWorker() - } - if (label === 'html' || label === 'handlebars' || label === 'razor') { - return new htmlWorker() - } - if (label === 'typescript' || label === 'javascript') { - return new tsWorker() - } - return new editorWorker() - } -} +import videoLazy from './directives/video-lazy' const app = createApp(App) - app.use(router) -app.directive(videoLazy.name, videoLazy.option); +app.directive(videoLazy.name, videoLazy.option) app.mount('#app') diff --git a/src/views/AboutView.vue b/src/views/AboutView.vue deleted file mode 100644 index 756ad2a..0000000 --- a/src/views/AboutView.vue +++ /dev/null @@ -1,15 +0,0 @@ - - - diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue index 23fce4e..8e399b4 100644 --- a/src/views/HomeView.vue +++ b/src/views/HomeView.vue @@ -1,7 +1,11 @@