mirror of https://github.com/nocodb/nocodb
navi
2 months ago
committed by
GitHub
45 changed files with 2937 additions and 269 deletions
|
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 460 B |
|
After Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 405 B After Width: | Height: | Size: 410 B |
|
After Width: | Height: | Size: 537 B |
|
After Width: | Height: | Size: 1.2 KiB |
@ -0,0 +1,110 @@
|
||||
<script setup lang="ts"> |
||||
import dayjs from 'dayjs' |
||||
|
||||
const workspaceStore = useWorkspace() |
||||
|
||||
const { navigateToFeed } = workspaceStore |
||||
|
||||
const { isFeedPageOpened } = storeToRefs(workspaceStore) |
||||
|
||||
const { appInfo } = useGlobal() |
||||
|
||||
const { loadFeed, socialFeed } = useProductFeed() |
||||
|
||||
const isNewFeedAvailable = ref(false) |
||||
|
||||
const checkNewFeed = async () => { |
||||
try { |
||||
await loadFeed({ type: 'all', loadMore: false }) |
||||
if (!socialFeed.value.length) return |
||||
|
||||
const [latestFeed] = socialFeed.value |
||||
const lastFeedTime = localStorage.getItem('lastFeedPublishedTime') |
||||
const lastFeed = dayjs(lastFeedTime) |
||||
|
||||
if (!lastFeed.isValid() || dayjs(latestFeed['Published Time']).isAfter(lastFeed)) { |
||||
isNewFeedAvailable.value = true |
||||
localStorage.setItem('lastFeedPublishedTime', latestFeed['Published Time']) |
||||
} |
||||
} catch (error) { |
||||
console.error('Error while checking new feed', error) |
||||
} |
||||
} |
||||
|
||||
const intervalId = ref() |
||||
|
||||
const checkFeedWithInterval = async () => { |
||||
await checkNewFeed() |
||||
intervalId.value = setTimeout(checkFeedWithInterval, 3 * 60 * 60 * 1000) |
||||
} |
||||
|
||||
onMounted(() => { |
||||
if (appInfo.value.feedEnabled) { |
||||
checkFeedWithInterval() |
||||
} |
||||
}) |
||||
|
||||
onUnmounted(() => { |
||||
if (intervalId.value) { |
||||
clearTimeout(intervalId.value) |
||||
intervalId.value = null |
||||
} |
||||
}) |
||||
|
||||
const gotoFeed = () => navigateToFeed() |
||||
</script> |
||||
|
||||
<template> |
||||
<NcButton |
||||
v-e="['c:product-feed']" |
||||
type="text" |
||||
full-width |
||||
size="xsmall" |
||||
class="n!xs:hidden my-0.5 !h-7 w-full !rounded-md !font-normal !px-3" |
||||
data-testid="nc-sidebar-product-feed" |
||||
:centered="false" |
||||
:class="{ |
||||
'!text-brand-600 !bg-brand-50 !hover:bg-brand-50': isFeedPageOpened, |
||||
'!hover:(bg-gray-200 text-gray-700)': !isFeedPageOpened, |
||||
}" |
||||
@click="gotoFeed" |
||||
> |
||||
<div |
||||
class="flex !w-full items-center gap-2" |
||||
:class="{ |
||||
'font-semibold': isFeedPageOpened, |
||||
}" |
||||
> |
||||
<div class="flex flex-1 w-full items-center gap-3"> |
||||
<GeneralIcon icon="megaPhone" class="!h-4" /> |
||||
<span class="">What’s New!</span> |
||||
</div> |
||||
<div v-if="isNewFeedAvailable" class="w-3 h-3 pulsing-dot bg-nc-fill-red-medium border-2 border-white rounded-full"></div> |
||||
</div> |
||||
</NcButton> |
||||
</template> |
||||
|
||||
<style scoped lang="scss"> |
||||
@keyframes pulse { |
||||
0% { |
||||
transform: scale(1); |
||||
opacity: 1; |
||||
} |
||||
50% { |
||||
transform: scale(1.1); |
||||
opacity: 0.7; |
||||
} |
||||
100% { |
||||
transform: scale(1); |
||||
opacity: 1; |
||||
} |
||||
} |
||||
|
||||
.pulsing-dot { |
||||
animation: pulse 1.5s infinite ease-in-out; |
||||
} |
||||
|
||||
:deep(.nc-btn-inner) { |
||||
@apply !w-full; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,194 @@
|
||||
<script setup lang="ts"> |
||||
import rehypeSanitize from 'rehype-sanitize' |
||||
import rehypeStringify from 'rehype-stringify' |
||||
import remarkParse from 'remark-parse' |
||||
import remarkRehype from 'remark-rehype' |
||||
import { unified } from 'unified' |
||||
import dayjs from 'dayjs' |
||||
import type { ProductFeedItem } from '../../../lib/types' |
||||
|
||||
const props = defineProps<{ |
||||
item: ProductFeedItem |
||||
index: number |
||||
}>() |
||||
|
||||
const { |
||||
item: { 'Published Time': CreatedAt, Description, Title, Tags, Images }, |
||||
} = props |
||||
|
||||
const iconColorMap = { |
||||
'Hotfix': { |
||||
icon: iconMap.ncTool, |
||||
color: 'red', |
||||
}, |
||||
'Feature': { |
||||
icon: iconMap.star, |
||||
color: 'purple', |
||||
}, |
||||
'Bug Fixes': { |
||||
icon: iconMap.ncTool, |
||||
color: 'green', |
||||
}, |
||||
} |
||||
|
||||
const tags = computed(() => [ |
||||
...(props.index === 0 |
||||
? [ |
||||
{ |
||||
text: 'Latest Release', |
||||
color: 'purple', |
||||
}, |
||||
] |
||||
: []), |
||||
...(Tags?.split(',').map((tag) => ({ |
||||
text: tag, |
||||
...(iconColorMap[tag] || {}), |
||||
})) || []), |
||||
]) |
||||
|
||||
const { getPossibleAttachmentSrc } = useAttachment() |
||||
|
||||
const renderMarkdown = async (markdown: string) => { |
||||
return await unified().use(remarkParse).use(remarkRehype).use(rehypeSanitize).use(rehypeStringify).process(markdown) |
||||
} |
||||
|
||||
const truncate = ref(true) |
||||
|
||||
const renderedText = computedAsync(async () => { |
||||
return await renderMarkdown( |
||||
truncate.value |
||||
? Description.replace(/[*_~]|\[.*?\]|<\/?[^>]+(>|$)/g, '') |
||||
.replace(/\(https?:\/\/[^\s)]+\)\]\(https?:\/\/[^\s)]+\)/g, '') |
||||
.replace(/^(\*\*)?#?\s*(\p{Emoji})\s*NocoDB\s*v[\d.]+(\s*-\s*|\*\*$)/u, '# ') |
||||
.replace(/(!?\(https?:\/\/[^\s)]+\)(?:\]\(https?:\/\/[^\s)]+(?:\s+"[^"]*")?\))?)/g, '') |
||||
.replace('-', '') |
||||
.substring(0, 100) |
||||
.concat('...') |
||||
: Description.replace(/^\[!\[.*?\]\(https?:\/\/.*?\)\]\(https?:\/\/.*?\)/m, '').replace( |
||||
/^(\*\*)?#?\s*(\p{Emoji})\s*NocoDB\s*v[\d.]+(\s*-\s*|\*\*$)/u, |
||||
'# ', |
||||
), |
||||
) |
||||
}) |
||||
|
||||
const { $e } = useNuxtApp() |
||||
|
||||
const expand = (e) => { |
||||
e.stopPropagation() |
||||
truncate.value = false |
||||
$e('c:nocodb:feed:changelog:expand', { |
||||
title: Title, |
||||
}) |
||||
} |
||||
</script> |
||||
|
||||
<template> |
||||
<div class="relative rounded-xl flex flex-col mt-6.25 bg-white changelog-card"> |
||||
<div |
||||
class="w-full relative border cursor-pointer border-black h-[334px] xl:h-[394px] w-[540px] xl:w-[638px] border-opacity-10 rounded-t-xl overflow-hidden" |
||||
@click="openLink(item.Url)" |
||||
> |
||||
<LazyCellAttachmentPreviewImage |
||||
:srcs="getPossibleAttachmentSrc(Images[0] ?? [], 'card_cover')" |
||||
class="absolute w-full h-full inset-0 object-cover transition-all ease-in-out transform hover:scale-105" |
||||
/> |
||||
</div> |
||||
<div class="flex my-4 px-4 items-center justify-between"> |
||||
<div class="flex items-center"> |
||||
<NcBadge :border="false" color="brand" class="font-semibold text-[13px] mr-3 nc-title-badge cursor-pointer"> |
||||
{{ Title }} |
||||
</NcBadge> |
||||
<span |
||||
v-for="tag in tags" |
||||
:key="tag.text" |
||||
:class="{ |
||||
'bg-red-50': tag.color === 'red', |
||||
'bg-purple-50': tag.color === 'purple', |
||||
'bg-green-50': tag.color === 'green', |
||||
}" |
||||
class="mr-3 flex gap-2 items-center px-1 rounded-md" |
||||
> |
||||
<component |
||||
:is="tag.icon" |
||||
:class="{ |
||||
'fill-red-700 text-transparent': tag.color === 'red', |
||||
'fill-purple-700 text-transparent': tag.color === 'purple', |
||||
'fill-green-700 text-transparent': tag.color === 'green', |
||||
}" |
||||
class="w-4 h-4" |
||||
/> |
||||
<span |
||||
:class="{ |
||||
'text-red-500': tag.color === 'red', |
||||
'text-purple-500': tag.color === 'purple', |
||||
'text-green-700': tag.color === 'green', |
||||
}" |
||||
class="leading-5 text-[13px]" |
||||
> |
||||
{{ tag.text }} |
||||
</span> |
||||
</span> |
||||
</div> |
||||
<span class="font-medium text-sm text-gray-500"> |
||||
{{ dayjs(CreatedAt).format('MMM DD, YYYY') }} |
||||
</span> |
||||
</div> |
||||
<div class="flex flex-1 px-4 pb-3 justify-between flex-col gap-2"> |
||||
<div class="prose max-w-none" v-html="renderedText"></div> |
||||
</div> |
||||
<NcButton v-if="truncate" size="small" class="w-29 mx-4 mb-3" type="text" @click="expand"> |
||||
<div class="gap-2 flex items-center"> |
||||
Show more |
||||
<GeneralIcon icon="arrowDown" /> |
||||
</div> |
||||
</NcButton> |
||||
</div> |
||||
</template> |
||||
|
||||
<style scoped lang="scss"> |
||||
.nc-title-badge { |
||||
width: fit-content; |
||||
} |
||||
|
||||
.changelog-card { |
||||
@apply transform transition-all ease-in-out; |
||||
box-shadow: 0px 4px 8px -2px rgba(0, 0, 0, 0.08), 0px 2px 4px -2px rgba(0, 0, 0, 0.04); |
||||
} |
||||
|
||||
a { |
||||
@apply !no-underline; |
||||
} |
||||
|
||||
:deep(.prose) { |
||||
@apply !max-w-auto; |
||||
a { |
||||
@apply text-gray-900; |
||||
} |
||||
|
||||
h1 { |
||||
@apply text-3xl text-nc-content-gray-emphasis leading-9 mb-0; |
||||
font-weight: 700; |
||||
} |
||||
|
||||
h2 { |
||||
@apply text-nc-content-gray-emphasis text-xl leading-6 !my-4; |
||||
} |
||||
p { |
||||
@apply text-nc-content-gray-emphasis leading-6; |
||||
font-size: 14px !important; |
||||
} |
||||
|
||||
li { |
||||
@apply text-nc-content-gray-emphasis leading-6; |
||||
font-size: 14px !important; |
||||
} |
||||
|
||||
h3 { |
||||
@apply text-nc-content-gray-emphasis text-lg leading-6 mb-0; |
||||
} |
||||
|
||||
img { |
||||
@apply !my-4; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,40 @@
|
||||
<script setup lang="ts"> |
||||
const { loadFeed, githubFeed, isErrorOccurred } = useProductFeed() |
||||
|
||||
const scrollContainer = ref<HTMLElement>() |
||||
|
||||
const { isLoading } = useInfiniteScroll( |
||||
scrollContainer, |
||||
async () => { |
||||
if (isLoading.value) return |
||||
await loadFeed({ |
||||
type: 'github', |
||||
loadMore: true, |
||||
}) |
||||
}, |
||||
{ distance: 4 }, |
||||
) |
||||
</script> |
||||
|
||||
<template> |
||||
<div |
||||
ref="scrollContainer" |
||||
:style="{ |
||||
height: 'calc(100dvh - var(--toolbar-height) - 3rem)', |
||||
}" |
||||
class="overflow-y-auto nc-scrollbar-md mx-auto w-full" |
||||
> |
||||
<div v-if="isErrorOccurred?.github && !githubFeed.length" class="h-full flex justify-center items-center"> |
||||
<FeedError page="github" /> |
||||
</div> |
||||
<div v-else-if="isLoading && !githubFeed.length" class="flex items-center justify-center h-full w-full"> |
||||
<GeneralLoader size="xlarge" /> |
||||
</div> |
||||
|
||||
<div v-else class="mx-auto max-w-[540px] xl:max-w-[638px] justify-around justify-items-center"> |
||||
<FeedChangelogItem v-for="(feed, index) in githubFeed" :key="feed.Id" :item="feed" :index="index" /> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<style scoped lang="scss"></style> |
||||
@ -0,0 +1,44 @@
|
||||
<script setup lang="ts"> |
||||
const props = defineProps<{ |
||||
page: 'all' | 'youtube' | 'github' |
||||
}>() |
||||
|
||||
const { loadFeed, socialFeed, youtubeFeed, githubFeed } = useProductFeed() |
||||
|
||||
const triggerReload = async () => { |
||||
const data = (await loadFeed({ |
||||
type: props.page, |
||||
loadMore: false, |
||||
}))!.filter((item) => item['Feed Source'] !== 'Twitter') |
||||
|
||||
if (props.page === 'all') { |
||||
socialFeed.value = data |
||||
} else if (props.page === 'youtube') { |
||||
youtubeFeed.value = data |
||||
} else if (props.page === 'github') { |
||||
githubFeed.value = data |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<template> |
||||
<div class="flex items-center justify-center"> |
||||
<div class="w-[696px] error-box gap-6 border-1 border-gray-200 py-6 rounded-xl flex flex-col items-center justify-center"> |
||||
<GeneralIcon icon="alertTriangle" class="text-gray-500 w-8 h-8" /> |
||||
<span class="text-gray-600 text-base font-semibold"> Unable to load feed </span> |
||||
|
||||
<NcButton type="secondary" size="small" @click="triggerReload"> |
||||
<div class="flex items-center text-gray-700 gap-2"> |
||||
<GeneralIcon icon="refreshCw" /> |
||||
<span class="text-sm"> Refresh </span> |
||||
</div> |
||||
</NcButton> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<style scoped lang="scss"> |
||||
.error-box { |
||||
box-shadow: 0px 4px 8px -2px rgba(0, 0, 0, 0.08), 0px 2px 4px -2px rgba(0, 0, 0, 0.04); |
||||
} |
||||
</style> |
||||
@ -0,0 +1,13 @@
|
||||
<script setup lang="ts"></script> |
||||
|
||||
<template> |
||||
<div class="w-full px-3 h-12 border-b-1 border-gray-200 py-2"> |
||||
<div class="flex items-center gap-3"> |
||||
<GeneralIcon icon="megaPhone" class="text-nc-content-brand" /> |
||||
|
||||
<span class="text-gray-800 text-xl font-medium"> What’s New! </span> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<style scoped lang="scss"></style> |
||||
@ -0,0 +1,138 @@
|
||||
<script setup lang="ts"> |
||||
import { unified } from 'unified' |
||||
import remarkParse from 'remark-parse' |
||||
import remarkRehype from 'remark-rehype' |
||||
import rehypeSanitize from 'rehype-sanitize' |
||||
import rehypeStringify from 'rehype-stringify' |
||||
import { YoutubeVue3 } from 'youtube-vue3' |
||||
import type { ProductFeedItem } from '../../../lib/types' |
||||
import { extractYoutubeVideoId } from '../../../utils/urlUtils' |
||||
import { timeAgo } from '~/utils/datetimeUtils' |
||||
const props = defineProps<{ |
||||
item: ProductFeedItem |
||||
}>() |
||||
|
||||
const { getPossibleAttachmentSrc } = useAttachment() |
||||
|
||||
const { |
||||
item: { 'Published Time': CreatedAt, Description, Url, Title, 'Feed Source': source, Images }, |
||||
} = props |
||||
|
||||
const feedIcon = { |
||||
Twitter: iconMap.twitter, |
||||
Youtube: iconMap.youtube, |
||||
Github: iconMap.githubSolid, |
||||
} |
||||
|
||||
const truncate = ref(true) |
||||
|
||||
const { $e } = useNuxtApp() |
||||
|
||||
const expand = () => { |
||||
truncate.value = false |
||||
$e('c:nocodb:feed:recents:expand', { |
||||
title: Title, |
||||
}) |
||||
} |
||||
|
||||
const renderedText = computedAsync(async () => { |
||||
return await unified() |
||||
.use(remarkParse) |
||||
.use(remarkRehype) |
||||
.use(rehypeSanitize) |
||||
.use(rehypeStringify) |
||||
.process( |
||||
truncate.value |
||||
? Description.replace(/!\[.*?\]\(.*?\)/g, '') |
||||
.substring(0, 250) |
||||
.concat('...') |
||||
: Description.replace(/^\[!\[.*?\]\(https?:\/\/.*?\)\]\(https?:\/\/.*?\)/m, ''), |
||||
) |
||||
}) |
||||
|
||||
const { width } = useWindowSize() |
||||
</script> |
||||
|
||||
<template> |
||||
<div class="bg-white recent-card border-gray-200 border-1 rounded-2xl max-w-[540px] xl:max-w-[640px]"> |
||||
<div class="flex items-center justify-between px-5 py-4"> |
||||
<div class="flex items-center gap-3"> |
||||
<component :is="feedIcon[source as any]" class="w-4 h-4 stroke-transparent" /> |
||||
<span class="font-weight-medium text-nc-content-gray leading-5 cursor-pointer" @click="openLink(Url)"> |
||||
{{ source }} |
||||
</span> |
||||
</div> |
||||
<div class="text-sm text-nc-content-gray-muted leading-5"> |
||||
{{ timeAgo(CreatedAt) }} |
||||
</div> |
||||
</div> |
||||
<template v-if="source === 'Github'"> |
||||
<div class="pb-5"> |
||||
<LazyCellAttachmentPreviewImage |
||||
v-if="Images?.length" |
||||
class="cursor-pointer" |
||||
:srcs="getPossibleAttachmentSrc(Images[0], 'card_cover')" |
||||
@click="openLink(Url)" |
||||
/> |
||||
<div class="prose px-5 mt-5" v-html="renderedText"></div> |
||||
|
||||
<NcButton v-if="truncate" size="small" class="w-29 mx-5" type="text" @click="expand"> |
||||
<div class="gap-2 flex items-center"> |
||||
Show more |
||||
<GeneralIcon icon="arrowDown" /> |
||||
</div> |
||||
</NcButton> |
||||
</div> |
||||
</template> |
||||
<template v-else-if="source === 'Youtube'"> |
||||
<YoutubeVue3 |
||||
:videoid="extractYoutubeVideoId(Url)" |
||||
:controls="1" |
||||
:height="width < 1280 ? 330 : 392" |
||||
:width="width < 1280 ? 538 : 638" |
||||
:autoplay="0" |
||||
/> |
||||
<div class="p-5 flex flex-col text-nc-content-gray-emphasis gap-4"> |
||||
<div class="text-2xl font-semibold truncate"> |
||||
{{ Title }} |
||||
</div> |
||||
|
||||
<div class="font-weight-base text-md"> |
||||
{{ Description.substring(0, 200).concat('...') }} |
||||
</div> |
||||
</div> |
||||
</template> |
||||
</div> |
||||
</template> |
||||
|
||||
<style scoped lang="scss"> |
||||
.recent-card { |
||||
box-shadow: 0px 4px 8px -2px rgba(0, 0, 0, 0.08), 0px 2px 4px -2px rgba(0, 0, 0, 0.04); |
||||
:deep(.prose) { |
||||
a { |
||||
@apply text-gray-900; |
||||
} |
||||
h1 { |
||||
@apply text-3xl text-nc-content-gray-emphasis truncate leading-9 mb-0; |
||||
font-weight: 700; |
||||
} |
||||
|
||||
h2 { |
||||
@apply text-nc-content-gray-emphasis text-xl leading-6 !mb-0; |
||||
} |
||||
p { |
||||
@apply text-nc-content-gray-emphasis leading-6; |
||||
font-size: 14px !important; |
||||
} |
||||
|
||||
li { |
||||
@apply text-nc-content-gray-emphasis leading-6; |
||||
font-size: 14px !important; |
||||
} |
||||
|
||||
h3 { |
||||
@apply text-nc-content-gray-emphasis text-lg leading-6 mb-0; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,37 @@
|
||||
<script setup lang="ts"> |
||||
const { socialFeed, loadFeed, isErrorOccurred } = useProductFeed() |
||||
|
||||
const scrollContainer = ref<HTMLElement>() |
||||
|
||||
const { isLoading } = useInfiniteScroll( |
||||
scrollContainer, |
||||
async () => { |
||||
if (isLoading.value) return |
||||
await loadFeed({ |
||||
type: 'all', |
||||
loadMore: true, |
||||
}) |
||||
}, |
||||
{ distance: 1, interval: 2000 }, |
||||
) |
||||
</script> |
||||
|
||||
<template> |
||||
<div |
||||
ref="scrollContainer" |
||||
:style="{ |
||||
height: 'calc(100dvh - var(--toolbar-height) - 3.1rem)', |
||||
}" |
||||
class="overflow-y-auto nc-scrollbar-md w-full" |
||||
> |
||||
<div v-if="isErrorOccurred?.social && !socialFeed.length" class="h-full flex justify-center items-center"> |
||||
<FeedError page="all" /> |
||||
</div> |
||||
<div v-else-if="isLoading && !socialFeed.length" class="flex items-center justify-center h-full w-full"> |
||||
<GeneralLoader size="xlarge" /> |
||||
</div> |
||||
<div v-else class="flex flex-col my-6 items-center gap-6"> |
||||
<FeedRecentsCard v-for="feed in socialFeed" :key="feed.Id" :item="feed" /> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
@ -0,0 +1,35 @@
|
||||
<script setup lang="ts"> |
||||
const iFrame = ref<HTMLIFrameElement | null>(null) |
||||
|
||||
const isLoaded = ref(false) |
||||
|
||||
const handleIframeLoad = () => { |
||||
isLoaded.value = true |
||||
} |
||||
</script> |
||||
|
||||
<template> |
||||
<div |
||||
:style="{ |
||||
height: 'calc(100dvh - var(--toolbar-height) + 4rem)', |
||||
}" |
||||
> |
||||
<div v-if="!isLoaded" class="flex items-center justify-center h-full w-full"> |
||||
<GeneralLoader size="xlarge" /> |
||||
</div> |
||||
<iframe |
||||
ref="iFrame" |
||||
src="https://w21dqb1x.nocodb.com/#/nc/kanban/d719962a-1666-464f-8789-054a13a747f7?disableTopbar=true&disableToolbar=true" |
||||
width="100%" |
||||
height="100%" |
||||
style="border: none" |
||||
@load="handleIframeLoad" |
||||
></iframe> |
||||
</div> |
||||
|
||||
<div v-if="!isLoaded" class="flex items-center justify-center h-full"> |
||||
<NcLoader /> |
||||
</div> |
||||
</template> |
||||
|
||||
<style scoped lang="scss"></style> |
||||
@ -0,0 +1,82 @@
|
||||
<script setup lang="ts"> |
||||
const { $e } = useNuxtApp() |
||||
|
||||
const socialIcons = [ |
||||
{ |
||||
name: '@nocodb', |
||||
icon: iconMap.iconTwitter, |
||||
link: 'https://twitter.com/nocodb', |
||||
e: 'c:feed::twitter-open', |
||||
}, |
||||
{ |
||||
name: 'NocoDB', |
||||
icon: iconMap.youtube, |
||||
e: 'c:feed:youtube-open', |
||||
link: 'https://www.youtube.com/@nocodb', |
||||
}, |
||||
{ |
||||
name: 'NocoDB', |
||||
icon: iconMap.iconDiscord, |
||||
e: 'c:feed:discord-open', |
||||
link: 'http://discord.nocodb.com', |
||||
}, |
||||
{ |
||||
name: 'r/NocoDB', |
||||
icon: iconMap.iconReddit, |
||||
e: 'c:feed:reddit-open', |
||||
link: 'https://www.reddit.com/r/NocoDB/', |
||||
}, |
||||
{ |
||||
name: 'Forum', |
||||
icon: iconMap.nocodb, |
||||
e: 'c:feed:forum-open', |
||||
link: 'https://community.nocodb.com/', |
||||
}, |
||||
] |
||||
|
||||
const openUrl = (url: string, e: string) => { |
||||
$e(e) |
||||
window.open(url, '_blank') |
||||
} |
||||
</script> |
||||
|
||||
<template> |
||||
<div style="width: 230px" class="flex flex-col bg-white border-gray-200 rounded-lg border-1"> |
||||
<div class="text-gray-800 font-semibold leading-6 border-b-1 border-gray-200 px-4 py-3">Stay tuned</div> |
||||
<div class="flex flex-col"> |
||||
<div |
||||
v-for="social in socialIcons" |
||||
:key="social.name" |
||||
class="flex items-center social-icon-wrapper cursor-pointer rounded-lg hover:bg-gray-100 py-3 px-4 gap-2 text-gray-800" |
||||
@click="openUrl(social.link, social.e)" |
||||
> |
||||
<component :is="social.icon" class="w-5 h-5 stroke-transparent social-icon" /> |
||||
<span class="font-semibold">{{ social.name }}</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<style scoped lang="scss"> |
||||
.social-icon { |
||||
// Make icon black and white |
||||
filter: grayscale(100%); |
||||
|
||||
// Make icon color on hover |
||||
&:hover { |
||||
filter: grayscale(100%) invert(100%); |
||||
} |
||||
} |
||||
|
||||
.social-icon-wrapper { |
||||
.nc-icon { |
||||
@apply mr-0.15; |
||||
} |
||||
|
||||
&:hover { |
||||
.social-icon { |
||||
filter: none !important; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,37 @@
|
||||
<script setup lang="ts"> |
||||
const isLoaded = ref(false) |
||||
|
||||
const scriptTag = ref() |
||||
|
||||
const handleIframeLoad = () => { |
||||
setTimeout(() => { |
||||
isLoaded.value = true |
||||
}, 2000) |
||||
} |
||||
|
||||
onMounted(() => { |
||||
scriptTag.value.src = 'https://platform.twitter.com/widgets.js' |
||||
}) |
||||
</script> |
||||
|
||||
<template> |
||||
<div |
||||
ref="scrollContainer" |
||||
:style="{ |
||||
height: 'calc(100dvh - var(--toolbar-height) - 3.25rem)', |
||||
}" |
||||
class="overflow-y-auto nc-scrollbar-md w-full" |
||||
> |
||||
<div v-if="!isLoaded" class="flex items-center justify-center h-full w-full"> |
||||
<GeneralLoader size="xlarge" /> |
||||
</div> |
||||
<div class="mx-auto flex flex-col my-6 items-center"> |
||||
<div style="min-width: 650px"> |
||||
<a class="twitter-timeline" href="https://twitter.com/nocodb?ref_src=twsrc%5Etfw"></a> |
||||
<Script ref="scriptTag" async charset="utf-8" @load="handleIframeLoad"></Script> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<style scoped lang="scss"></style> |
||||
@ -0,0 +1,111 @@
|
||||
<script setup lang="ts"> |
||||
import FeedRecents from './Recents/index.vue' |
||||
import FeedChangelog from './Changelog/index.vue' |
||||
import FeedYoutube from './Youtube/index.vue' |
||||
import FeedTwitter from './Twitter.vue' |
||||
// import FeedRoadmap from './Roadmap.vue' |
||||
const { activeTab } = useProductFeed() |
||||
|
||||
const { $e } = useNuxtApp() |
||||
|
||||
const tabs: Array<{ |
||||
key: string |
||||
icon: keyof typeof iconMap |
||||
title: string |
||||
container: any |
||||
}> = [ |
||||
{ |
||||
key: 'recents', |
||||
icon: 'ncClock', |
||||
title: 'Recents', |
||||
container: FeedRecents, |
||||
}, |
||||
{ |
||||
key: 'changelog', |
||||
icon: 'ncList', |
||||
title: 'Changelog', |
||||
container: FeedChangelog, |
||||
}, |
||||
/* { |
||||
key: 'roadmap', |
||||
icon: 'ncMapPin', |
||||
title: 'Roadmap', |
||||
container: FeedRoadmap, |
||||
}, */ |
||||
{ |
||||
key: 'youtube', |
||||
icon: 'ncYoutube', |
||||
title: 'Youtube', |
||||
container: FeedYoutube, |
||||
}, |
||||
{ |
||||
key: 'twitter', |
||||
icon: 'ncTwitter', |
||||
title: 'Twitter', |
||||
container: FeedTwitter, |
||||
}, |
||||
] |
||||
|
||||
const updateTab = (key: string) => { |
||||
$e(`c:nocodb:feed, tab:${key}`) |
||||
} |
||||
</script> |
||||
|
||||
<template> |
||||
<FeedHeader /> |
||||
|
||||
<div class="flex flex-col h-full"> |
||||
<NcTabs v-model:activeKey="activeTab" centered> |
||||
<a-tab-pane v-for="tab in tabs" :key="tab.key" class="bg-gray-50 !h-full"> |
||||
<template #tab> |
||||
<div class="flex gap-2 items-center" @click="updateTab(tab.key)"> |
||||
<GeneralIcon |
||||
:class="{ |
||||
'text-brand-500': activeTab === tab.key, |
||||
'text-gray-600': activeTab !== tab.key, |
||||
}" |
||||
:icon="tab.icon as any" |
||||
/> |
||||
<span |
||||
:class="{ |
||||
'text-brand-500 font-medium': activeTab === tab.key, |
||||
'text-gray-700': activeTab !== tab.key, |
||||
}" |
||||
class="text-sm" |
||||
>{{ tab.title }} |
||||
</span> |
||||
</div> |
||||
</template> |
||||
<div class="relative"> |
||||
<FeedSocial |
||||
:class="{ |
||||
'normal-left': tab.key === 'recents' || tab.key === 'youtube', |
||||
'changelog-left': tab.key === 'changelog', |
||||
'changelog-twitter': tab.key === 'twitter', |
||||
}" |
||||
class="absolute social-card" |
||||
/> |
||||
<component :is="tab.container" /> |
||||
</div> |
||||
</a-tab-pane> |
||||
</NcTabs> |
||||
</div> |
||||
</template> |
||||
|
||||
<style scoped lang="scss"> |
||||
.social-card { |
||||
top: 24px; |
||||
} |
||||
|
||||
.normal-left { |
||||
@apply xl:left-[calc(50%+350px)] left-[calc(50%+300px)]; |
||||
} |
||||
|
||||
.changelog-left { |
||||
@apply xl:left-[calc(50%+350px)] left-[calc(50%+300px)]; |
||||
} |
||||
|
||||
.changelog-twitter { |
||||
left: calc(50% + 350px); |
||||
} |
||||
</style> |
||||
@ -0,0 +1,44 @@
|
||||
<script setup lang="ts"> |
||||
import { YoutubeVue3 } from 'youtube-vue3' |
||||
import type { ProductFeedItem } from '../../../lib/types' |
||||
import { extractYoutubeVideoId } from '../../../utils/urlUtils' |
||||
|
||||
const props = defineProps<{ |
||||
item: ProductFeedItem |
||||
isRecent?: boolean |
||||
}>() |
||||
|
||||
const { |
||||
item: { Title, Description, Url }, |
||||
} = props |
||||
|
||||
const { width } = useWindowSize() |
||||
</script> |
||||
|
||||
<template> |
||||
<div class="mt-6 border-1 !bg-white recent-card !rounded-2xl border-gray-200"> |
||||
<YoutubeVue3 |
||||
:videoid="extractYoutubeVideoId(Url)" |
||||
class="!rounded-t-xl" |
||||
:height="width < 1280 ? 330 : 392" |
||||
:width="width < 1280 ? 538 : 638" |
||||
:autoplay="0" |
||||
:controls="1" |
||||
/> |
||||
|
||||
<div class="text-nc-content-gray-emphasis flex flex-col p-5 gap-4"> |
||||
<div class="font-bold leading-9 text-2xl"> |
||||
{{ Title }} |
||||
</div> |
||||
<div class="text-md leading-5"> |
||||
{{ Description.length > 200 ? `${Description.slice(0, 280)}...` : Description }} |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<style scoped lang="scss"> |
||||
.recent-card { |
||||
box-shadow: 0px 4px 8px -2px rgba(0, 0, 0, 0.08), 0px 2px 4px -2px rgba(0, 0, 0, 0.04); |
||||
} |
||||
</style> |
||||
@ -0,0 +1,49 @@
|
||||
<script setup lang="ts"> |
||||
const { youtubeFeed, loadFeed, isErrorOccurred } = useProductFeed() |
||||
|
||||
const scrollContainer = ref<HTMLElement>() |
||||
|
||||
const { isLoading } = useInfiniteScroll( |
||||
scrollContainer, |
||||
async () => { |
||||
if (isLoading.value) return |
||||
await loadFeed({ |
||||
type: 'youtube', |
||||
loadMore: true, |
||||
}) |
||||
}, |
||||
{ distance: 1, interval: 2000 }, |
||||
) |
||||
|
||||
const gotoChannel = () => { |
||||
window.open('https://www.youtube.com/@nocodb?ref=product_feed', '_blank') |
||||
} |
||||
</script> |
||||
|
||||
<template> |
||||
<div |
||||
ref="scrollContainer" |
||||
:style="{ |
||||
height: 'calc(100dvh - var(--toolbar-height) - 3rem)', |
||||
}" |
||||
class="overflow-y-auto nc-scrollbar-md mx-auto w-full" |
||||
> |
||||
<div v-if="isErrorOccurred?.youtube && !youtubeFeed.length" class="h-full flex justify-center items-center"> |
||||
<FeedError page="youtube" /> |
||||
</div> |
||||
<div v-else-if="isLoading && !youtubeFeed.length" class="flex items-center justify-center h-full w-full"> |
||||
<GeneralLoader size="xlarge" /> |
||||
</div> |
||||
<div v-else class="youtube-feed mx-auto"> |
||||
<div class="flex gap-2 flex-col"> |
||||
<FeedYoutubePlayer v-for="feed in youtubeFeed" :key="feed.Id" :item="feed" /> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<style scoped lang="scss"> |
||||
.youtube-feed { |
||||
@apply max-w-[540px] xl:max-w-[640px]; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,210 @@
|
||||
<script setup> |
||||
import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue' |
||||
import { useMotion } from '@vueuse/motion' |
||||
|
||||
const props = defineProps({ |
||||
modelValue: { |
||||
type: Boolean, |
||||
default: false, |
||||
}, |
||||
placement: { |
||||
type: String, |
||||
default: 'center', |
||||
validator: (value) => ['top', 'bottom', 'left', 'right', 'center'].includes(value), |
||||
}, |
||||
offset: { |
||||
type: Array, |
||||
default: () => [0, 10], |
||||
}, |
||||
width: { |
||||
type: String, |
||||
default: 'auto', |
||||
}, |
||||
zIndex: { |
||||
type: Number, |
||||
default: 1000, |
||||
}, |
||||
closeOnClickOutside: { |
||||
type: Boolean, |
||||
default: true, |
||||
}, |
||||
closeOnEsc: { |
||||
type: Boolean, |
||||
default: true, |
||||
}, |
||||
}) |
||||
|
||||
const emit = defineEmits(['update:modelValue']) |
||||
|
||||
const triggerRef = ref(null) |
||||
const popoverRef = ref(null) |
||||
|
||||
const isOpen = useVModel(props, 'modelValue', emit) |
||||
|
||||
const popoverStyle = computed(() => ({ |
||||
position: 'fixed', |
||||
zIndex: props.zIndex, |
||||
width: props.width, |
||||
})) |
||||
|
||||
const { variant } = useMotion(popoverRef, { |
||||
initial: { |
||||
opacity: 0, |
||||
scale: 0.1, |
||||
}, |
||||
enter: { |
||||
opacity: 1, |
||||
scale: 1, |
||||
transition: { |
||||
type: 'spring', |
||||
stiffness: 300, |
||||
damping: 20, |
||||
}, |
||||
}, |
||||
leave: { |
||||
opacity: 0, |
||||
scale: 0.1, |
||||
transition: { |
||||
type: 'spring', |
||||
stiffness: 300, |
||||
damping: 20, |
||||
}, |
||||
}, |
||||
}) |
||||
|
||||
const updatePopoverPosition = () => { |
||||
if (!triggerRef.value || !popoverRef.value) return |
||||
|
||||
const triggerRect = triggerRef.value.getBoundingClientRect() |
||||
const popoverRect = popoverRef.value.getBoundingClientRect() |
||||
|
||||
let top, left |
||||
|
||||
switch (props.placement) { |
||||
case 'top': |
||||
top = triggerRect.top - popoverRect.height - props.offset[1] |
||||
left = triggerRect.left + (triggerRect.width - popoverRect.width) / 2 + props.offset[0] |
||||
break |
||||
case 'bottom': |
||||
top = triggerRect.bottom + props.offset[1] |
||||
left = triggerRect.left + (triggerRect.width - popoverRect.width) / 2 + props.offset[0] |
||||
break |
||||
case 'left': |
||||
top = triggerRect.top + (triggerRect.height - popoverRect.height) / 2 + props.offset[1] |
||||
left = triggerRect.left - popoverRect.width - props.offset[0] |
||||
break |
||||
case 'right': |
||||
top = triggerRect.top + (triggerRect.height - popoverRect.height) / 2 + props.offset[1] |
||||
left = triggerRect.right + props.offset[0] |
||||
break |
||||
case 'center': |
||||
top = triggerRect.top + (triggerRect.height - popoverRect.height) / 2 + props.offset[1] |
||||
left = triggerRect.left + (triggerRect.width - popoverRect.width) / 2 + props.offset[0] |
||||
break |
||||
} |
||||
|
||||
// Ensure the popover stays within the viewport |
||||
const viewportWidth = window.innerWidth |
||||
const viewportHeight = window.innerHeight |
||||
|
||||
top = Math.max(0, Math.min(top, viewportHeight - popoverRect.height)) |
||||
left = Math.max(0, Math.min(left, viewportWidth - popoverRect.width)) |
||||
|
||||
Object.assign(popoverRef.value.style, { |
||||
top: `${top}px`, |
||||
left: `${left}px`, |
||||
}) |
||||
} |
||||
|
||||
const openPopover = () => { |
||||
isOpen.value = true |
||||
nextTick(() => { |
||||
updatePopoverPosition() |
||||
variant.value = 'enter' |
||||
}) |
||||
} |
||||
|
||||
const closePopover = () => { |
||||
variant.value = 'leave' |
||||
setTimeout(() => { |
||||
isOpen.value = false |
||||
}, 300) |
||||
} |
||||
|
||||
const handleClickOutside = (event) => { |
||||
if ( |
||||
props.closeOnClickOutside && |
||||
popoverRef.value && |
||||
!popoverRef.value.contains(event.target) && |
||||
!triggerRef.value.contains(event.target) |
||||
) { |
||||
closePopover() |
||||
} |
||||
} |
||||
|
||||
const handleKeyDown = (event) => { |
||||
if (props.closeOnEsc && event.key === 'Escape') { |
||||
closePopover() |
||||
} |
||||
} |
||||
|
||||
onMounted(() => { |
||||
if (props.closeOnClickOutside) document.addEventListener('mousedown', handleClickOutside) |
||||
if (props.closeOnEsc) document.addEventListener('keydown', handleKeyDown) |
||||
window.addEventListener('resize', updatePopoverPosition) |
||||
window.addEventListener('scroll', updatePopoverPosition) |
||||
}) |
||||
|
||||
onUnmounted(() => { |
||||
if (props.closeOnClickOutside) document.removeEventListener('mousedown', handleClickOutside) |
||||
if (props.closeOnEsc) document.removeEventListener('keydown', handleKeyDown) |
||||
window.removeEventListener('resize', updatePopoverPosition) |
||||
window.removeEventListener('scroll', updatePopoverPosition) |
||||
}) |
||||
|
||||
watch( |
||||
() => props.modelValue, |
||||
(newValue) => { |
||||
isOpen.value = newValue |
||||
if (newValue) { |
||||
nextTick(() => { |
||||
updatePopoverPosition() |
||||
variant.value = 'enter' |
||||
}) |
||||
} else { |
||||
variant.value = 'leave' |
||||
} |
||||
}, |
||||
) |
||||
</script> |
||||
|
||||
<template> |
||||
<div> |
||||
<div ref="triggerRef" @click="openPopover"> |
||||
<slot name="trigger" :open="openPopover" :close="closePopover" :is-open="isOpen"> |
||||
<button>Open Popover</button> |
||||
</slot> |
||||
</div> |
||||
|
||||
<Teleport to="body"> |
||||
<div v-if="isOpen" ref="popoverRef" v-motion :style="popoverStyle" class="popover-content"> |
||||
<slot name="content" :close="closePopover"> |
||||
<div class="p-4"> |
||||
<p>Default popover content</p> |
||||
<button @click="closePopover">Close</button> |
||||
</div> |
||||
</slot> |
||||
</div> |
||||
</Teleport> |
||||
</div> |
||||
</template> |
||||
|
||||
<style scoped> |
||||
.popover-content { |
||||
background-color: white; |
||||
border: 1px solid #ccc; |
||||
border-radius: 4px; |
||||
padding: 10px; |
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); |
||||
} |
||||
</style> |
||||
@ -0,0 +1,80 @@
|
||||
import type { ProductFeedItem } from '../lib/types' |
||||
|
||||
export const useProductFeed = createSharedComposable(() => { |
||||
const activeTab = ref('recents') |
||||
|
||||
const { $api } = useNuxtApp() |
||||
|
||||
const youtubeFeed = ref<ProductFeedItem[]>([]) |
||||
|
||||
const githubFeed = ref<ProductFeedItem[]>([]) |
||||
|
||||
const socialFeed = ref<ProductFeedItem[]>([]) |
||||
|
||||
const isErrorOccurred = reactive({ |
||||
youtube: false, |
||||
github: false, |
||||
social: false, |
||||
}) |
||||
|
||||
const loadFeed = async ({ loadMore, type }: { loadMore: boolean; type: 'youtube' | 'github' | 'all' }) => { |
||||
try { |
||||
let page = 1 |
||||
|
||||
if (loadMore) { |
||||
switch (type) { |
||||
case 'youtube': |
||||
page = Math.ceil(youtubeFeed.value.length / 10) + 1 |
||||
break |
||||
case 'github': |
||||
page = Math.ceil(githubFeed.value.length / 10) + 1 |
||||
break |
||||
case 'all': |
||||
page = Math.ceil(socialFeed.value.length / 10) + 1 |
||||
break |
||||
} |
||||
} |
||||
|
||||
const response = await $api.utils.feed({ page, per_page: 10, type }) |
||||
|
||||
if (type === 'all' && page === 1 && response.length) { |
||||
localStorage.setItem('last_published_at', response[0]['Published Time'] as string) |
||||
} |
||||
|
||||
switch (type) { |
||||
case 'youtube': |
||||
youtubeFeed.value = [...youtubeFeed.value, ...response] as ProductFeedItem[] |
||||
break |
||||
case 'github': |
||||
githubFeed.value = [...githubFeed.value, ...response] as ProductFeedItem[] |
||||
break |
||||
case 'all': |
||||
socialFeed.value = [...socialFeed.value, ...response] as ProductFeedItem[] |
||||
break |
||||
} |
||||
} catch (error) { |
||||
switch (type) { |
||||
case 'youtube': |
||||
isErrorOccurred.youtube = true |
||||
break |
||||
case 'github': |
||||
isErrorOccurred.github = true |
||||
break |
||||
case 'all': |
||||
isErrorOccurred.social = true |
||||
break |
||||
} |
||||
console.error(error) |
||||
return [] |
||||
} |
||||
} |
||||
|
||||
return { |
||||
isErrorOccurred, |
||||
activeTab, |
||||
youtubeFeed, |
||||
githubFeed, |
||||
socialFeed, |
||||
loadFeed, |
||||
} |
||||
}) |
||||
@ -0,0 +1,7 @@
|
||||
<script setup lang="ts"></script> |
||||
|
||||
<template> |
||||
<FeedView /> |
||||
</template> |
||||
|
||||
<style scoped lang="scss"></style> |
||||
@ -0,0 +1,5 @@
|
||||
import { MotionPlugin } from '@vueuse/motion' |
||||
|
||||
export default defineNuxtPlugin((nuxtApp) => { |
||||
nuxtApp.vueApp.use(MotionPlugin) |
||||
}) |
||||
Loading…
Reference in new issue