diff --git a/components/account/AccountBigCard.vue b/components/account/AccountBigCard.vue new file mode 100644 index 00000000..014a0b88 --- /dev/null +++ b/components/account/AccountBigCard.vue @@ -0,0 +1,61 @@ + + + diff --git a/components/account/AccountBigCardSkeleton.vue b/components/account/AccountBigCardSkeleton.vue new file mode 100644 index 00000000..9901e4a1 --- /dev/null +++ b/components/account/AccountBigCardSkeleton.vue @@ -0,0 +1,30 @@ + diff --git a/components/common/CommonAlert.vue b/components/common/CommonAlert.vue new file mode 100644 index 00000000..22851b11 --- /dev/null +++ b/components/common/CommonAlert.vue @@ -0,0 +1,31 @@ + + + diff --git a/components/common/CommonRouteTabs.vue b/components/common/CommonRouteTabs.vue new file mode 100644 index 00000000..643568e2 --- /dev/null +++ b/components/common/CommonRouteTabs.vue @@ -0,0 +1,44 @@ + + + diff --git a/components/common/CommonTrending.vue b/components/common/CommonTrending.vue new file mode 100644 index 00000000..b423bf86 --- /dev/null +++ b/components/common/CommonTrending.vue @@ -0,0 +1,23 @@ + + + diff --git a/components/common/CommonTrendingCharts.vue b/components/common/CommonTrendingCharts.vue new file mode 100644 index 00000000..43fbf05b --- /dev/null +++ b/components/common/CommonTrendingCharts.vue @@ -0,0 +1,28 @@ + + + diff --git a/components/status/StatusPreviewCard.vue b/components/status/StatusPreviewCard.vue index f4719f68..93afe5c2 100644 --- a/components/status/StatusPreviewCard.vue +++ b/components/status/StatusPreviewCard.vue @@ -10,7 +10,7 @@ const props = defineProps<{ }>() const alt = $computed(() => `${props.card.title} - ${props.card.title}`) const isSquare = $computed(() => props.smallPictureOnly || props.card.width === props.card.height) -const description = $computed(() => props.card.description ? props.card.description : new URL(props.card.url).hostname) +const providerName = $computed(() => props.card.providerName ? props.card.providerName : new URL(props.card.url).hostname) // TODO: handle card.type: 'photo' | 'video' | 'rich'; @@ -32,10 +32,9 @@ const description = $computed(() => props.card.description ? props.card.descript v-if="card.image" flex flex-col display-block of-hidden - border="base" :class="{ - 'min-w-32 w-32 h-32 border-r': isSquare, + 'sm:(min-w-32 w-32 h-32) min-w-22 w-22 h-22 border-r': isSquare, 'w-full aspect-[1.91] border-b': !isSquare, 'rounded-lg': root, }" @@ -49,19 +48,41 @@ const description = $computed(() => props.card.description ? props.card.descript w-full h-full object-cover /> -
+
-

- {{ card.providerName }} +

+ {{ providerName }}

- {{ card.title }} -

- {{ description }} + {{ card.title }} +

+ {{ card.description }}

diff --git a/components/status/StatusPreviewCardSkeleton.vue b/components/status/StatusPreviewCardSkeleton.vue new file mode 100644 index 00000000..33f69a81 --- /dev/null +++ b/components/status/StatusPreviewCardSkeleton.vue @@ -0,0 +1,46 @@ + + + diff --git a/components/tag/TagCard.vue b/components/tag/TagCard.vue new file mode 100644 index 00000000..cc01aef8 --- /dev/null +++ b/components/tag/TagCard.vue @@ -0,0 +1,26 @@ + + + diff --git a/components/tag/TagCardSkeleton.vue b/components/tag/TagCardSkeleton.vue new file mode 100644 index 00000000..2e8dcc7a --- /dev/null +++ b/components/tag/TagCardSkeleton.vue @@ -0,0 +1,11 @@ + diff --git a/components/timeline/TimelinePaginator.vue b/components/timeline/TimelinePaginator.vue index dcf03319..231935b5 100644 --- a/components/timeline/TimelinePaginator.vue +++ b/components/timeline/TimelinePaginator.vue @@ -1,6 +1,7 @@ + + diff --git a/pages/[[server]]/explore/links.vue b/pages/[[server]]/explore/links.vue new file mode 100644 index 00000000..0d7d0f49 --- /dev/null +++ b/pages/[[server]]/explore/links.vue @@ -0,0 +1,25 @@ + + + diff --git a/pages/[[server]]/explore/tags.vue b/pages/[[server]]/explore/tags.vue new file mode 100644 index 00000000..370d351e --- /dev/null +++ b/pages/[[server]]/explore/tags.vue @@ -0,0 +1,42 @@ + + + diff --git a/pages/[[server]]/explore/users.vue b/pages/[[server]]/explore/users.vue new file mode 100644 index 00000000..0ecfe918 --- /dev/null +++ b/pages/[[server]]/explore/users.vue @@ -0,0 +1,35 @@ + + + diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 6973d73b..d5856885 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -3,6 +3,7 @@ lockfileVersion: 5.4 specifiers: '@antfu/eslint-config': ^0.33.1 '@antfu/ni': ^0.18.8 + '@fnando/sparkline': ^0.3.10 '@iconify-json/carbon': ^1.1.11 '@iconify-json/logos': ^1.1.19 '@iconify-json/material-symbols': ^1.1.25 @@ -21,6 +22,7 @@ specifiers: '@tiptap/starter-kit': 2.0.0-beta.204 '@tiptap/suggestion': 2.0.0-beta.204 '@tiptap/vue-3': 2.0.0-beta.204 + '@types/fnando__sparkline': ^0.3.4 '@types/fs-extra': ^9.0.13 '@types/js-yaml': ^4.0.5 '@types/prettier': ^2.7.1 @@ -66,6 +68,9 @@ specifiers: vue-tsc: ^1.0.11 vue-virtual-scroller: 2.0.0-beta.4 +dependencies: + '@fnando/sparkline': 0.3.10 + devDependencies: '@antfu/eslint-config': 0.33.1_s5ps7njkmjlaqajutnox5ntcla '@antfu/ni': 0.18.8 @@ -87,6 +92,7 @@ devDependencies: '@tiptap/starter-kit': 2.0.0-beta.204 '@tiptap/suggestion': 2.0.0-beta.204 '@tiptap/vue-3': 2.0.0-beta.204 + '@types/fnando__sparkline': 0.3.4 '@types/fs-extra': 9.0.13 '@types/js-yaml': 4.0.5 '@types/prettier': 2.7.1 @@ -626,6 +632,10 @@ packages: '@floating-ui/core': 0.3.1 dev: true + /@fnando/sparkline/0.3.10: + resolution: {integrity: sha512-Rwz2swatdSU5F4sCOvYG8EOWdjtLgq5d8nmnqlZ3PXdWJI9Zq9BRUvJ/9ygjajJG8qOyNpMFX3GEVFjZIuB1Jg==} + dev: false + /@humanwhocodes/config-array/0.11.7: resolution: {integrity: sha512-kBbPWzN8oVMLb0hOUYXhmxggL/1cJE6ydvjDIGi9EnAGUyA7cLVKQg+d/Dsm+KZwx2czGHrCmMVLiyg8s5JPKw==} engines: {node: '>=10.10.0'} @@ -1617,6 +1627,10 @@ packages: resolution: {integrity: sha512-WulqXMDUTYAXCjZnk6JtIHPigp55cVtDgDrO2gHRwhyJto21+1zbVCtOYB2L1F9w4qCQ0rOGWBnBe0FNTiEJIQ==} dev: true + /@types/fnando__sparkline/0.3.4: + resolution: {integrity: sha512-FWU1zw7CVJYVeDk77FGphTUabfPims4F/Yq+WFB0Gh647lLtiXHWn8vpfT95Fl65IsNBDOhEbxJdhmERMGubNQ==} + dev: true + /@types/fs-extra/9.0.13: resolution: {integrity: sha512-nEnwB++1u5lVDM2UI4c1+5R+FYaKfaAzS4OococimjVm3nQw3TuzH5UNsocrcTBbhnerblyHj4A49qXbIiZdpA==} dependencies: diff --git a/styles/global.css b/styles/global.css index d44288a8..856cda29 100644 --- a/styles/global.css +++ b/styles/global.css @@ -64,6 +64,7 @@ /* Force vertical scrollbar to be always visible to avoid layout shift while loading the content */ body { overflow-y: scroll; + -webkit-tap-highlight-color: transparent; } .zen .zen-hide { @@ -164,3 +165,13 @@ body { /* Prevent arbitrary zooming on mobile devices */ touch-action: pan-x pan-y; } + +.sparkline--fill { + fill: var(--c-primary-active); + opacity: 0.2; +} + +.sparkline--line { + stroke: var(--c-primary); + stroke-width: 2; +} diff --git a/unocss.config.ts b/unocss.config.ts index b1de4263..7d1fe679 100644 --- a/unocss.config.ts +++ b/unocss.config.ts @@ -43,6 +43,7 @@ export default defineConfig({ 'flex-center': 'items-center justify-center', 'flex-v-center': 'items-center', 'flex-h-center': 'justify-center', + 'bg-hover-overflow': 'relative z-0 transition-colors duration-250 after-content-empty after:(absolute inset--2px bg-transparent rounded-lg z--1 transition-colors duration-250) hover:after:(bg-active)', }, ], presets: [