web3privacy/explorer-app
1
0
Fork 0
mirror of https://github.com/web3privacy/explorer-app.git synced 2024-10-15 16:46:26 +02:00
Code Issues Projects Releases Packages Wiki Activity

chore(eslint): update eslint rules

Browse source 
fix(lint): resolve lint errors
This commit is contained in:
Daniel Klein 2024-09-02 15:13:43 +02:00
parent 57b8a1e055
commit 3b553f551d
40 changed files with 2281 additions and 418 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
components/Badge.vue
View file

@ -10,7 +10,15 @@ const emits = defineEmits(['selected'])
<div
border-2px
:class="[inverted ? 'border-app-black bg-app-white hover:bg-app-black text-app-black hover:text-app-white' : 'bg-app-black border-app-white hover:bg-app-white text-app-white hover:text-app-black']"
flex items-center justify-center px-24px py-16px font-700 leading-40px cursor-pointer @click="emits('selected')"
flex
items-center
justify-center
px-24px
py-16px
font-700
leading-40px
cursor-pointer
@click="emits('selected')"
>
{{ text }}
</div>

24
components/Button.vue
View file

@ -5,13 +5,31 @@ defineProps<{
</script>
<template>
<div flex items-center gap-12px px-12px py-6px cursor-pointer text-app-white :class="[border ? 'border-2px border-app-white' : 'border-0']" hover:text-app-black hover:bg-app-white>
<div
flex
items-center
gap-12px
px-12px
py-6px
cursor-pointer
text-app-white
:class="[border ? 'border-2px border-app-white' : 'border-0']"
hover:text-app-black
hover:bg-app-white
>
<template v-if="!!$slots.prefix">
<div text-24px>
<slot v-if="!!$slots.prefix" name="prefix" />
<slot
v-if="!!$slots.prefix"
name="prefix"
/>
</div>
</template>
<div text="14px" leading-32px font-700>
<div
text="14px"
leading-32px
font-700
>
<slot />
</div>
</div>

214
components/Card.vue
View file

@ -11,63 +11,175 @@ const { switcher } = storeToRefs(useData())
<NuxtLink
:to="`/project/${project.id}`"
:class="switcher ? 'flex-row' : 'lg:flex-col'"
flex w-full gap-16px hover:bg="#121212" transition-all
flex
w-full
gap-16px
hover:bg="#121212"
transition-all
>
<div relative max-w="96px lg:200px" w-full h="96px lg:200px" :class="switcher ? '' : 'lg:max-w-full! lg:w-full '">
<div flex items-center justify-center w-full my-auto h-full>
<NuxtImg :src="project?.image || '/no-image-1-1.svg'" class="w-full h-auto" max-h="md:196px 96px" self-center z-10 object-fit bg="#121212" />
<div
relative
max-w="96px lg:200px"
w-full
h="96px lg:200px"
:class="switcher ? '' : 'lg:max-w-full! lg:w-full '"
>
<div
flex
items-center
justify-center
w-full
my-auto
h-full
>
<NuxtImg
:src="project?.image || '/no-image-1-1.svg'"
class="w-full h-auto"
max-h="md:196px 96px"
self-center
z-10
object-fit
bg="#121212"
/>
</div>
<ClientOnly>
<Badge
v-if="project.percentage"
absolute bottom-0.5 lg:bottom-0 right-0.5 lg:right-0 mr-2px mb-2px
absolute
bottom-0.5
lg:bottom-0
right-0.5
lg:right-0
mr-2px
mb-2px
:text="`${project.percentage}%`"
class="leading-12px! text-12px! lg:text-18px! border-0!" px="4px! lg:16px!" py="4px! lg:8px!"
class="leading-12px! text-12px! lg:text-18px! border-0!"
px="4px! lg:16px!"
py="4px! lg:8px!"
/>
</ClientOnly>
</div>
<div h="96px lg:200px" lg:py-24px lg:pr-24px flex flex-col justify-center lg:justify-between lg:gap-24px w-full text-white :class="switcher ? '' : 'lg:p-16px! lg:py-16px!'">
<div w-full h-fit flex flex-col gap-8px>
<div w-fit flex items-center gap-8px @click.prevent="navigateTo(project.website, { external: true, open: { target: '_blank' } })">
<h1 text="18px lg:24px app-white" font-700 line-clamp-1 hover:underline underline-offset-3>
<div
h="96px lg:200px"
lg:py-24px
lg:pr-24px
flex
flex-col
justify-center
lg:justify-between
lg:gap-24px
w-full
text-white
:class="switcher ? '' : 'lg:p-16px! lg:py-16px!'"
>
<div
w-full
h-fit
flex
flex-col
gap-8px
>
<div
w-fit
flex
items-center
gap-8px
@click.prevent="navigateTo(project.website, { external: true, open: { target: '_blank' } })"
>
<h1
text="18px lg:24px app-white"
font-700
line-clamp-1
hover:underline
underline-offset-3
>
{{ project.title1 }}
</h1>
<UnoIcon i-web-open text-16px />
<UnoIcon
i-web-open
text-16px
/>
</div>
<h2 text="14px app-text-grey" overflow-hidden text-ellipsis line-clamp-2 lg:line-clamp-2>
<h2
text="14px app-text-grey"
overflow-hidden
text-ellipsis
line-clamp-2
lg:line-clamp-2
>
{{ project.description }}
</h2>
</div>
<div w-full flex justify-between>
<div w-full max-w-692px grid whitespace-nowrap :class="switcher ? 'grid-cols-5' : 'grid-cols-3'" gap-24px lg:grid hidden>
<div
w-full
flex
justify-between
>
<div
w-full
max-w-692px
grid
whitespace-nowrap
:class="switcher ? 'grid-cols-5' : 'grid-cols-3'"
gap-24px
lg:grid
hidden
>
<ProjectInfoItem
:check-undefined="project?.github"
:link="project?.github"
title="Github" bold text-size="18px"
title="Github"
bold
text-size="18px"
>
<div flex items-center gap-8px>
<UnoIcon i-web-github text-16px />
<div
flex
items-center
gap-8px
>
<UnoIcon
i-web-github
text-16px
/>
<span>{{ project?.github ? 'YES' : 'NO' }}</span>
</div>
</ProjectInfoItem>
<ProjectInfoItem
:check-undefined="project.readyness"
title="Readyness" text-size="18px"
title="Readyness"
text-size="18px"
>
<div flex items-center gap-12px>
<UnoIcon i-web-live text-10px :class="(project.readyness === 'Mainnet') ? 'color-#18FF2F' : (project.readyness === 'Testnet') ? 'color-#FFA800' : (project.readyness === 'Alpha') ? 'color-#FF0000' : ''" />
<div
flex
items-center
gap-12px
>
<UnoIcon
i-web-live
text-10px
:class="(project.readyness === 'Mainnet') ? 'color-#18FF2F' : (project.readyness === 'Testnet') ? 'color-#FFA800' : (project.readyness === 'Alpha') ? 'color-#FF0000' : ''"
/>
<span :class="(project.readyness === 'Alpha') ? 'color-#FFA800' : 'color-white'">{{ project.readyness }}</span>
</div>
</ProjectInfoItem>
<ProjectInfoItem :check-undefined="true" title="Team" text-size="18px">
<ProjectInfoItem
:check-undefined="true"
title="Team"
text-size="18px"
>
<span v-if="project.team?.length">{{ `${project.team?.length} members` }}</span>
<span v-else color="#FF0000">{{ 'Anonymous' }}</span>
<span
v-else
color="#FF0000"
>{{ 'Anonymous' }}</span>
</ProjectInfoItem>
<ProjectInfoItem
:check-undefined="project?.docs"
:link="project?.docs"
:color="project?.docs ? '#18FF2F' : '#FF0000'"
title="Docs" bold text-size="18px"
title="Docs"
bold
text-size="18px"
>
{{ project?.docs ? 'YES' : 'NO' }}
</ProjectInfoItem>
@ -75,17 +187,59 @@ const { switcher } = storeToRefs(useData())
:check-undefined="project.audits"
:link="project?.audits?.[0]?.link ?? undefined"
:color="project?.audits ? '#18FF2F' : '#FF0000'"
title="Audit" bold text-size="18px"
title="Audit"
bold
text-size="18px"
>
{{ project.audits ? 'YES' : 'NO' }}
</ProjectInfoItem>
</div>
<div hidden lg:flex items-center gap-16px>
<UnoIcon v-if="project.forum" i-web-forum text-28px opacity-50 hover:opacity-100 @click.prevent="navigateTo(project.forum, { external: true, open: { target: '_blank' } })" />
<UnoIcon v-if="project.explorer" i-web-explorer text-32px opacity-50 hover:opacity-100 @click.prevent="navigateTo(project.explorer, { external: true, open: { target: '_blank' } })" />
<UnoIcon v-if="project.twitter" i-web-twitter_x text-22px opacity-50 hover:opacity-100 @click.prevent="navigateTo(project.twitter, { external: true, open: { target: '_blank' } })" />
<UnoIcon v-if="project.coingecko" i-web-coingecko text-24px opacity-50 hover:opacity-100 @click.prevent="navigateTo(project.coingecko, { external: true, open: { target: '_blank' } })" />
<UnoIcon v-if="project.newsletter" i-web-news text-28px opacity-50 hover:opacity-100 @click.prevent="navigateTo(project.newsletter, { external: true, open: { target: '_blank' } })" />
<div
hidden
lg:flex
items-center
gap-16px
>
<UnoIcon
v-if="project.forum"
i-web-forum
text-28px
opacity-50
hover:opacity-100
@click.prevent="navigateTo(project.forum, { external: true, open: { target: '_blank' } })"
/>
<UnoIcon
v-if="project.explorer"
i-web-explorer
text-32px
opacity-50
hover:opacity-100
@click.prevent="navigateTo(project.explorer, { external: true, open: { target: '_blank' } })"
/>
<UnoIcon
v-if="project.twitter"
i-web-twitter_x
text-22px
opacity-50
hover:opacity-100
@click.prevent="navigateTo(project.twitter, { external: true, open: { target: '_blank' } })"
/>
<UnoIcon
v-if="project.coingecko"
i-web-coingecko
text-24px
opacity-50
hover:opacity-100
@click.prevent="navigateTo(project.coingecko, { external: true, open: { target: '_blank' } })"
/>
<UnoIcon
v-if="project.newsletter"
i-web-news
text-28px
opacity-50
hover:opacity-100
@click.prevent="navigateTo(project.newsletter, { external: true, open: { target: '_blank' } })"
/>
</div>
</div>
</div>

15
components/Category.vue
View file

@ -10,9 +10,20 @@ defineProps<{
<div
hover:bg-app-bg-grey
:class="[selected ? 'bg-app-white' : 'bg-transparent']"
flex items-center gap-8px py-10px px-16px text-18px font-400 leading-24px cursor-pointer
flex
items-center
gap-8px
py-10px
px-16px
text-18px
font-400
leading-24px
cursor-pointer
>
<h1 hover:text-app-white :class="[selected ? 'text-app-black font-700 opacity-100' : 'text-app-white opacity-50']">
<h1
hover:text-app-white
:class="[selected ? 'text-app-black font-700 opacity-100' : 'text-app-white opacity-50']"
>
{{ title }}
</h1>
<p text-app-text-grey>

25
components/CategorySelectBox.vue
View file

@ -19,19 +19,26 @@ function onOptionSelected(value: string) {
</script>
<template>
<HeadlessListbox v-model="selectedValue" as="div">
<HeadlessListbox
v-model="selectedValue"
as="div"
>
<div class="relative mt-2 font-700 font-24px">
<HeadlessListboxButton
class="relative w-full cursor-pointer py-8px p-16px text-left border-2px text-app-white sm:text-sm sm:leading-6"
>
<span class="block truncate mr-8px">{{ isOptionSelected?.label }} <span opacity-50>({{ isOptionSelected?.count }})</span></span>
<span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
<UnoIcon i-heroicons-solid-chevron-down text-app-white />
<UnoIcon
i-heroicons-solid-chevron-down
text-app-white
/>
</span>
</HeadlessListboxButton>
<transition
leave-active-class="transition ease-in duration-100" leave-from-class="opacity-100"
leave-active-class="transition ease-in duration-100"
leave-from-class="opacity-100"
leave-to-class="opacity-0"
>
<HeadlessListboxOptions
@ -39,14 +46,20 @@ function onOptionSelected(value: string) {
>
<HeadlessListboxOption
v-for="option in props.options"
:key="option.value" v-slot="{ active, selected }" as="template"
:value="option.value" @click="onOptionSelected(option.value)"
:key="option.value"
v-slot="{ active, selected }"
as="template"
:value="option.value"
@click="onOptionSelected(option.value)"
>
<li
class="w-full relative cursor-pointer select-none py-8px p-16px"
:class="[active ? 'bg-#ffffff1a' : 'text-white']"
>
<span class="block truncate" :class="[selected ? 'font-semibold' : 'font-normal']">
<span
class="block truncate"
:class="[selected ? 'font-semibold' : 'font-normal']"
>
{{ option.label }}
<span opacity-50>({{ option.count }})</span>
</span>

12
components/EditButton.vue
View file

@ -5,8 +5,16 @@ defineProps<{
</script>
<template>
<NuxtLink :to="to" flex gap-12px target="_blank">
<UnoIcon i-heroicons-solid-pencil text-24px />
<NuxtLink
:to="to"
flex
gap-12px
target="_blank"
>
<UnoIcon
i-heroicons-solid-pencil
text-24px
/>
<slot />
</NuxtLink>
</template>

239
components/Footer.vue
View file

@ -4,66 +4,239 @@
<template>
<div app-container>
<div mt-48px>
<hr border-t-2px border-white opacity-10 w-full>
<hr
border-t-2px
border-white
opacity-10
w-full
>
</div>
<div p-24px flex items-center>
<div shrink-0 flex gap-32px justify-start>
<NuxtImg src="/logo.svg" max-w-120px sm:w-160px cursor-pointer @click="navigateTo('/')" />
<div
p-24px
flex
items-center
>
<div
shrink-0
flex
gap-32px
justify-start
>
<NuxtImg
src="/logo.svg"
max-w-120px
sm:w-160px
cursor-pointer
@click="navigateTo('/')"
/>
</div>
<div w-full h-fit flex justify-end items-center gap-16px sm:gap-32px mt-0>
<NuxtLink to="https://twitter.com/web3privacy" target="_blank" flex items-center gap-12px>
<UnoIcon i-web-twitter_x opacity-50 text-22px />
<span hover:underline hidden lg:block text-16px>{{ '@web3privacy' }}</span>
<div
w-full
h-fit
flex
justify-end
items-center
gap-16px
sm:gap-32px
mt-0
>
<NuxtLink
to="https://twitter.com/web3privacy"
target="_blank"
flex
items-center
gap-12px
>
<UnoIcon
i-web-twitter_x
opacity-50
text-22px
/>
<span
hover:underline
hidden
lg:block
text-16px
>{{ '@web3privacy' }}</span>
</NuxtLink>
<NuxtLink to="https://t.me/web3privacynow" target="_blank" flex items-center gap-12px>
<UnoIcon i-web-telegram1 opacity-50 text-24px />
<span hover:underline hidden lg:block text-16px>{{ 'Telegram' }}</span>
<NuxtLink
to="https://t.me/web3privacynow"
target="_blank"
flex
items-center
gap-12px
>
<UnoIcon
i-web-telegram1
opacity-50
text-24px
/>
<span
hover:underline
hidden
lg:block
text-16px
>{{ 'Telegram' }}</span>
</NuxtLink>
<NuxtLink to="https://matrix.web3privacy.info/" target="_blank" flex items-center gap-12px>
<UnoIcon i-web-matrix opacity-50 text-24px />
<span hover:underline hidden lg:block text-16px>{{ 'Matrix' }}</span>
<NuxtLink
to="https://matrix.web3privacy.info/"
target="_blank"
flex
items-center
gap-12px
>
<UnoIcon
i-web-matrix
opacity-50
text-24px
/>
<span
hover:underline
hidden
lg:block
text-16px
>{{ 'Matrix' }}</span>
</NuxtLink>
<NuxtLink to="https://github.com/web3privacy" target="_blank" flex items-center gap-12px>
<UnoIcon i-web-github opacity-50 text-24px />
<span hover:underline hidden lg:block text-16px>{{ 'GitHub' }}</span>
<NuxtLink
to="https://github.com/web3privacy"
target="_blank"
flex
items-center
gap-12px
>
<UnoIcon
i-web-github
opacity-50
text-24px
/>
<span
hover:underline
hidden
lg:block
text-16px
>{{ 'GitHub' }}</span>
</NuxtLink>
</div>
</div>
<div text="14px sm:16px" px-24px grid grid-cols-2 sm:grid-cols-3 gap-16px mt-32px mb-16px>
<NuxtLink to="https://docs.web3privacy.info/manifesto" opacity-50 hover:underline>
<div
text="14px sm:16px"
px-24px
grid
grid-cols-2
sm:grid-cols-3
gap-16px
mt-32px
mb-16px
>
<NuxtLink
to="https://docs.web3privacy.info/manifesto"
opacity-50
hover:underline
>
{{ 'Manifesto' }}
</NuxtLink>
<NuxtLink to="https://docs.web3privacy.info/get-involved" opacity-50 hover:underline>
<NuxtLink
to="https://docs.web3privacy.info/get-involved"
opacity-50
hover:underline
>
{{ 'How to get involved' }}
</NuxtLink>
<NuxtLink to="https://github.com/web3privacy/grants" opacity-50 hover:underline>
<NuxtLink
to="https://github.com/web3privacy/grants"
opacity-50
hover:underline
>
{{ 'Grants / Support Us' }}
</NuxtLink>
<NuxtLink to="https://web3privacy.info/events" opacity-50 hover:underline>
<NuxtLink
to="https://web3privacy.info/events"
opacity-50
hover:underline
>
{{ 'Events' }}
</NuxtLink>
<NuxtLink to="https://mirror.xyz/0x0f1F3DAf416B74DB3DE55Eb4D7513a80F4841073/" opacity-50 hover:underline>
<NuxtLink
to="https://mirror.xyz/0x0f1F3DAf416B74DB3DE55Eb4D7513a80F4841073/"
opacity-50
hover:underline
>
{{ 'Articles' }}
</NuxtLink>
<NuxtLink to="https://docs.web3privacy.info/events/" opacity-50 hover:underline>
<NuxtLink
to="https://docs.web3privacy.info/events/"
opacity-50
hover:underline
>
{{ 'Talks' }}
</NuxtLink>
<NuxtLink to="https://docs.web3privacy.info/projects/privacy-explorer/" opacity-50 hover:underline>
<NuxtLink
to="https://docs.web3privacy.info/projects/privacy-explorer/"
opacity-50
hover:underline
>
{{ 'Privacy Explorer' }}
</NuxtLink>
<NuxtLink to="https://github.com/web3privacy/web3privacy" opacity-50 hover:underline>
<NuxtLink
to="https://github.com/web3privacy/web3privacy"
opacity-50
hover:underline
>
{{ 'Privacy database' }}
</NuxtLink>
</div>
<hr block sm:hidden border-t-2px border-white opacity-10 w-full>
<div px-24px my-16px sm:mt-32px flex flex-col sm:flex-row w-full items-center justify-between gap-18px>
<a w-full opacity-50 text-14px leading-24px font-400>{{ 'All rights not reserved, Creative commons 2024 - Web3Privacy z.s.' }}</a>
<div w-full sm:w-fit sm:justify-end items-center flex flex-row gap-6px>
<span text-14px text-app-text-grey whitespace-nowrap>{{ 'Developed by' }}</span>
<hr
block
sm:hidden
border-t-2px
border-white
opacity-10
w-full
>
<div
px-24px
my-16px
sm:mt-32px
flex
flex-col
sm:flex-row
w-full
items-center
justify-between
gap-18px
>
<a
w-full
opacity-50
text-14px
leading-24px
font-400
>{{ 'All rights not reserved, Creative commons 2024 - Web3Privacy z.s.' }}</a>
<div
w-full
sm:w-fit
sm:justify-end
items-center
flex
flex-row
gap-6px
>
<span
text-14px
text-app-text-grey
whitespace-nowrap
>{{ 'Developed by' }}</span>
<div
shrink-0
bg="[url(/develit-logo-white.svg)]" duration-300 bg-no-repeat bg-center
cursor-pointer w-full max-w-104px h-32px hover:bg="[url(/develit-logo-color.svg)]"
bg="[url(/develit-logo-white.svg)]"
duration-300
bg-no-repeat
bg-center
cursor-pointer
w-full
max-w-104px
h-32px
hover:bg="[url(/develit-logo-color.svg)]"
@click="navigateTo('https://develit.io/', { external: true })"
/>
</div>

10
components/Helper.vue
View file

@ -6,8 +6,14 @@ defineProps<{
<template>
<div relative>
<button class="peer" type="button">
<UnoIcon i-heroicons-solid-information-circle class="w-20px h-20px opacity-50 hover:opacity-100 text-app-white" />
<button
class="peer"
type="button"
>
<UnoIcon
i-heroicons-solid-information-circle
class="w-20px h-20px opacity-50 hover:opacity-100 text-app-white"
/>
</button>
<div
class="peer-hover:visible top-20px left-20px absolute invisible z-100 inline-block px-3 py-2 text-sm font-medium text-app-black bg-app-white"

9
components/MenuItem.vue
View file

@ -6,7 +6,14 @@ defineProps<{
</script>
<template>
<NuxtLink text-14px hover:text-app-white leading-32px uppercase cursor-pointer :class="[selected ? 'text-app-white font-700 underline underline-offset-4px hover:no-underline' : 'text-app-text-grey font-500']">
<NuxtLink
text-14px
hover:text-app-white
leading-32px
uppercase
cursor-pointer
:class="[selected ? 'text-app-white font-700 underline underline-offset-4px hover:no-underline' : 'text-app-text-grey font-500']"
>
{{ title }}
</NuxtLink>
</template>

391
components/Navigation.vue
View file

@ -19,89 +19,391 @@ watch(y, (newY, oldY) => {
</script>
<template>
<div v-if="showMenu" w-full flex flex-col items-center>
<NuxtLink to="https://web3privacy.info/" bg-black hover:bg-white w-full text-center justify-center py-14px cursor-pointer text-app-text-grey class="hover:text-black" hover:underline underline-offset-1 text-16px font-400 uppercase>
<div
v-if="showMenu"
w-full
flex
flex-col
items-center
>
<NuxtLink
to="https://web3privacy.info/"
bg-black
hover:bg-white
w-full
text-center
justify-center
py-14px
cursor-pointer
text-app-text-grey
class="hover:text-black"
hover:underline
underline-offset-1
text-16px
font-400
uppercase
>
HOME
</NuxtLink>
<NuxtLink bg-black hover:bg-white w-full text-center justify-center py-14px cursor-pointer text-white class="hover:text-black" hover:underline underline-offset-1 text-16px font-400 to="/">
<NuxtLink
bg-black
hover:bg-white
w-full
text-center
justify-center
py-14px
cursor-pointer
text-white
class="hover:text-black"
hover:underline
underline-offset-1
text-16px
font-400
to="/"
>
PROJECTS
</NuxtLink>
<NuxtLink to="https://web3privacy.info/events/" bg-black hover:bg-white w-full text-center justify-center py-14px cursor-pointer text-app-text-grey class="hover:text-black" hover:underline underline-offset-1 text-16px font-400 uppercase>
<NuxtLink
to="https://web3privacy.info/events/"
bg-black
hover:bg-white
w-full
text-center
justify-center
py-14px
cursor-pointer
text-app-text-grey
class="hover:text-black"
hover:underline
underline-offset-1
text-16px
font-400
uppercase
>
EVENTS
</NuxtLink>
<NuxtLink bg-black hover:bg-white w-full justify-center to="https://mirror.xyz/0x0f1F3DAf416B74DB3DE55Eb4D7513a80F4841073/" flex items-center py-14px cursor-pointer text-app-text-grey class="hover:text-black" hover:underline underline-offset-1 text-16px font-400 uppercase>
<NuxtLink
bg-black
hover:bg-white
w-full
justify-center
to="https://mirror.xyz/0x0f1F3DAf416B74DB3DE55Eb4D7513a80F4841073/"
flex
items-center
py-14px
cursor-pointer
text-app-text-grey
class="hover:text-black"
hover:underline
underline-offset-1
text-16px
font-400
uppercase
>
ARTICLES
<UnoIcon ml-10px i-web-open1 text-11px />
<UnoIcon
ml-10px
i-web-open1
text-11px
/>
</NuxtLink>
<NuxtLink bg-black hover:bg-white w-full justify-center to="https://docs.web3privacy.info/" flex items-center py-14px cursor-pointer text-app-text-grey class="hover:text-black" hover:underline underline-offset-1 text-16px font-400 uppercase>
<NuxtLink
bg-black
hover:bg-white
w-full
justify-center
to="https://docs.web3privacy.info/"
flex
items-center
py-14px
cursor-pointer
text-app-text-grey
class="hover:text-black"
hover:underline
underline-offset-1
text-16px
font-400
uppercase
>
DOCS
<UnoIcon ml-10px i-web-open1 text-11px />
<UnoIcon
ml-10px
i-web-open1
text-11px
/>
</NuxtLink>
</div>
<div w-full sticky md:relative top-0 z-100 bg-black lg:bg-app-bg-dark_grey>
<div v-if="!isProjectRoute" relative app-container w-full h-full>
<div
w-full
sticky
md:relative
top-0
z-100
bg-black
lg:bg-app-bg-dark_grey
>
<div
v-if="!isProjectRoute"
relative
app-container
w-full
h-full
>
<img
absolute w-full h-167px sm:h-207px md:h-303px object-cover src="/web3privacy_eye.webp" z-101
absolute
w-full
h-167px
sm:h-207px
md:h-303px
object-cover
src="/web3privacy_eye.webp"
z-101
class="object-pos-custom left--11% top-0 max-w-250px sm:max-w-335px md:max-w-588px"
:class="[(!showText && width < 768) ? 'opacity-0' : 'opacity-10', (!showText && width < 768) ? 'translate-y--128px' : 'translate-y-0px']" duration-200ms
:class="[(!showText && width < 768) ? 'opacity-0' : 'opacity-10', (!showText && width < 768) ? 'translate-y--128px' : 'translate-y-0px']"
duration-200ms
>
</div>
<div app-container flex items-center justify-between h-80px py-6 gap-24px>
<div flex gap-16px w-full relative z-105>
<UnoIcon shrink-0 i-web-hamburger text-24px lg:hidden @click="showMenu ? showMenu = false : showMenu = true" />
<NuxtImg max-w-160px w-full src="/logo.svg" cursor-pointer @click="navigateTo('/')" />
<div
app-container
flex
items-center
justify-between
h-80px
py-6
gap-24px
>
<div
flex
gap-16px
w-full
relative
z-105
>
<UnoIcon
shrink-0
i-web-hamburger
text-24px
lg:hidden
@click="showMenu ? showMenu = false : showMenu = true"
/>
<NuxtImg
max-w-160px
w-full
src="/logo.svg"
cursor-pointer
@click="navigateTo('/')"
/>
</div>
<div hidden lg:flex items-center justify-center>
<NuxtLink to="https://web3privacy.info/" py-2 px-4 cursor-pointer text-app-text-grey class="hover:text-[#c2c2c2]" hover:underline underline-offset-1 text-16px font-400 uppercase>
<div
hidden
lg:flex
items-center
justify-center
>
<NuxtLink
to="https://web3privacy.info/"
py-2
px-4
cursor-pointer
text-app-text-grey
class="hover:text-[#c2c2c2]"
hover:underline
underline-offset-1
text-16px
font-400
uppercase
>
HOME
</NuxtLink>
<NuxtLink py-2 px-4 cursor-pointer text-white class="hover:text-[#c2c2c2]" hover:underline underline-offset-1 text-16px font-400 to="/">
<NuxtLink
py-2
px-4
cursor-pointer
text-white
class="hover:text-[#c2c2c2]"
hover:underline
underline-offset-1
text-16px
font-400
to="/"
>
DASHBOARD
</NuxtLink>
<NuxtLink to="https://web3privacy.info/events/" py-2 px-4 cursor-pointer text-app-text-grey class="hover:text-[#c2c2c2]" hover:underline underline-offset-1 text-16px font-400 uppercase>
<NuxtLink
to="https://web3privacy.info/events/"
py-2
px-4
cursor-pointer
text-app-text-grey
class="hover:text-[#c2c2c2]"
hover:underline
underline-offset-1
text-16px
font-400
uppercase
>
EVENTS
</NuxtLink>
<NuxtLink to="https://mirror.xyz/0x0f1F3DAf416B74DB3DE55Eb4D7513a80F4841073/" flex items-center py-2 px-4 cursor-pointer text-app-text-grey class="hover:text-[#c2c2c2]" hover:underline underline-offset-1 text-16px font-400 uppercase>
<NuxtLink
to="https://mirror.xyz/0x0f1F3DAf416B74DB3DE55Eb4D7513a80F4841073/"
flex
items-center
py-2
px-4
cursor-pointer
text-app-text-grey
class="hover:text-[#c2c2c2]"
hover:underline
underline-offset-1
text-16px
font-400
uppercase
>
ARTICLES
<UnoIcon ml-10px i-web-open1 text-11px />
<UnoIcon
ml-10px
i-web-open1
text-11px
/>
</NuxtLink>
<NuxtLink to="https://docs.web3privacy.info/" flex items-center py-2 px-4 cursor-pointer text-app-text-grey class="hover:text-[#c2c2c2]" hover:underline underline-offset-1 text-16px font-400 uppercase>
<NuxtLink
to="https://docs.web3privacy.info/"
flex
items-center
py-2
px-4
cursor-pointer
text-app-text-grey
class="hover:text-[#c2c2c2]"
hover:underline
underline-offset-1
text-16px
font-400
uppercase
>
DOCS
<UnoIcon ml-10px i-web-open1 text-11px />
<UnoIcon
ml-10px
i-web-open1
text-11px
/>
</NuxtLink>
</div>
<div w-full h-full flex justify-end items-start lg:grow-0 gap-3 lg:gap-6 pt-1 lg:pt-2.5>
<div
w-full
h-full
flex
justify-end
items-start
lg:grow-0
gap-3
lg:gap-6
pt-1
lg:pt-2.5
>
<NuxtLink to="https://twitter.com/web3privacy">
<UnoIcon target="_blank" i-web-twitter_x text-18px sm:text-24px opacity-50 hover:opacity-100 />
<UnoIcon
target="_blank"
i-web-twitter_x
text-18px
sm:text-24px
opacity-50
hover:opacity-100
/>
</NuxtLink>
<NuxtLink to="https://t.me/web3privacynow">
<UnoIcon target="_blank" i-web-telegram1 text-20px sm:text-24px opacity-50 hover:opacity-100 />
<UnoIcon
target="_blank"
i-web-telegram1
text-20px
sm:text-24px
opacity-50
hover:opacity-100
/>
</NuxtLink>
<NuxtLink to="https://matrix.to/#/#web3privacy:gwei.cz">
<UnoIcon target="_blank" i-web-matrix text-20px sm:text-24px opacity-50 hover:opacity-100 />
<UnoIcon
target="_blank"
i-web-matrix
text-20px
sm:text-24px
opacity-50
hover:opacity-100
/>
</NuxtLink>
<NuxtLink to="https://github.com/web3privacy" target="_blank">
<UnoIcon i-web-github text-20px sm:text-24px opacity-50 hover:opacity-100 />
<NuxtLink
to="https://github.com/web3privacy"
target="_blank"
>
<UnoIcon
i-web-github
text-20px
sm:text-24px
opacity-50
hover:opacity-100
/>
</NuxtLink>
</div>
</div>
</div>
<div
v-if="isProjectRoute" top-96px z-99 sticky md:static
:class="[(!showBar && width < 768) ? 'translate-y--128px' : 'translate-y-0px']" duration-200ms
v-if="isProjectRoute"
top-96px
z-99
sticky
md:static
:class="[(!showBar && width < 768) ? 'translate-y--128px' : 'translate-y-0px']"
duration-200ms
>
<ProjectNavigation md:mt-16px />
</div>
<div v-else bg-black lg:bg-app-bg-dark_grey>
<div
v-else
bg-black
lg:bg-app-bg-dark_grey
>
<div
app-container flex items-center gap-32px pb-16px pt-16px sm:pb-32px
app-container
flex
items-center
gap-32px
pb-16px
pt-16px
sm:pb-32px
>
<div w-full flex flex-col items-center :class="[!showText && width < 768 ? 'opacity-0' : 'opacity-100']" duration-200ms relative z-101>
<img src="/explorer.webp" max-w-155px sm:max-w-342px>
<p mt-24px hidden md:block text-14px text-center font-400 leading-24px text-app-text-grey>
<div
w-full
flex
flex-col
items-center
:class="[!showText && width < 768 ? 'opacity-0' : 'opacity-100']"
duration-200ms
relative
z-101
>
<img
src="/explorer.webp"
max-w-155px
sm:max-w-342px
>
<p
mt-24px
hidden
md:block
text-14px
text-center
font-400
leading-24px
text-app-text-grey
>
{{ 'There are challenges in finding crucial technical details and comparing various privacy-focused projects.' }}<br>
{{ 'To address this, we created a platform that standardizes and expands the current ' }}
<NuxtLink to="https://web3privacy.info/" target="_blank" underline text-white>
<NuxtLink
to="https://web3privacy.info/"
target="_blank"
underline
text-white
>
{{ 'Web3Privacy ecosystem research.' }}
</NuxtLink><br>
{{ 'Our goal is to make this valuable information accessible to the wider Web3 community.' }}
@ -109,10 +411,19 @@ watch(y, (newY, oldY) => {
<NuxtLink
to="https://github.com/web3privacy/privacy-projects-db"
target="_blank"
mt-12px flex text-14px items-center gap-8px sm:text-16px hover:underline
mt-12px
flex
text-14px
items-center
gap-8px
sm:text-16px
hover:underline
>
{{ 'Learn how to contribute' }}
<UnoIcon i-heroicons-solid-arrow-right text-24px />
<UnoIcon
i-heroicons-solid-arrow-right
text-24px
/>
</NuxtLink>
</div>
</div>

25
components/NavigationButton.vue
View file

@ -3,9 +3,28 @@
</script>
<template>
<NuxtLink w-fit px-16px py-8px flex items-center gap-12px text-app-white hover:text-app-black hover:bg-app-white uppercase cursor-pointer>
<UnoIcon i-heroicons-solid-arrow-left text-24px />
<div text="16px" leading-24px font-400>
<NuxtLink
w-fit
px-16px
py-8px
flex
items-center
gap-12px
text-app-white
hover:text-app-black
hover:bg-app-white
uppercase
cursor-pointer
>
<UnoIcon
i-heroicons-solid-arrow-left
text-24px
/>
<div
text="16px"
leading-24px
font-400
>
<slot />
</div>
</NuxtLink>

34
components/Project/ProjectActivity.vue
View file

@ -7,11 +7,20 @@ defineProps<{
</script>
<template>
<ProjectDetailCategoryDivider title="ACTIVITY" badge-text="3/10">
<UnoIcon i-web-code_v2 text-24px />
<ProjectDetailCategoryDivider
title="ACTIVITY"
badge-text="3/10"
>
<UnoIcon
i-web-code_v2
text-24px
/>
</ProjectDetailCategoryDivider>
<ProjectDetailContainer>
<div lg:flex lg:justify-between>
<div
lg:flex
lg:justify-between
>
<div mt-32px>
<ProjectActivityLaunch
v-if="project.history"
@ -21,9 +30,22 @@ defineProps<{
:to="project.history?.link"
/>
</div>
<div flex flex-col gap-24px mt-16px>
<ProjectActivityGithub :active-devs="13" last-commit="26/11/2022" :stars="45" />
<ProjectActivityTwitter :followers="13" posts="26/11/202" :retweets="1654" />
<div
flex
flex-col
gap-24px
mt-16px
>
<ProjectActivityGithub
:active-devs="13"
last-commit="26/11/2022"
:stars="45"
/>
<ProjectActivityTwitter
:followers="13"
posts="26/11/202"
:retweets="1654"
/>
</div>
</div>
</ProjectDetailContainer>

88
components/Project/ProjectActivityGithub.vue
View file

@ -7,23 +7,85 @@ defineProps<{
</script>
<template>
<div relative grid grid-cols-2 border-2px gap-y-8px gap-x-32px p-24px lg:grid-cols-3>
<h1 px-8px text-14px font-700 bg-black absolute top--10px left-16px>
<div
relative
grid
grid-cols-2
border-2px
gap-y-8px
gap-x-32px
p-24px
lg:grid-cols-3
>
<h1
px-8px
text-14px
font-700
bg-black
absolute
top--10px
left-16px
>
{{ 'GITHUB ACTIVITY' }}
</h1>
<div flex flex-col>
<span text-14px font-400 text-app-text-grey leading-24px>{{ 'Active Developers' }}</span>
<span text-14px font-700 leading-24px>{{ activeDevs }}</span>
<div
flex
flex-col
>
<span
text-14px
font-400
text-app-text-grey
leading-24px
>{{ 'Active Developers' }}</span>
<span
text-14px
font-700
leading-24px
>{{ activeDevs }}</span>
</div>
<div flex flex-col>
<span text-14px font-400 text-app-text-grey leading-24px>{{ 'Last commit' }}</span>
<span text-14px font-700 leading-24px>{{ lastCommit }}</span>
<div
flex
flex-col
>
<span
text-14px
font-400
text-app-text-grey
leading-24px
>{{ 'Last commit' }}</span>
<span
text-14px
font-700
leading-24px
>{{ lastCommit }}</span>
</div>
<div flex gap-6px lg:flex-col lg:gap-0>
<span text-14px font-400 text-app-text-grey leading-24px>{{ 'Github stars' }}</span>
<div flex items-center gap-4px>
<UnoIcon i-web-star text-16px />
<span text-14px font-400 leading-24px>{{ stars }}</span>
<div
flex
gap-6px
lg:flex-col
lg:gap-0
>
<span
text-14px
font-400
text-app-text-grey
leading-24px
>{{ 'Github stars' }}</span>
<div
flex
items-center
gap-4px
>
<UnoIcon
i-web-star
text-16px
/>
<span
text-14px
font-400
leading-24px
>{{ stars }}</span>
</div>
</div>
</div>

86
components/Project/ProjectActivityLaunch.vue
View file

@ -8,28 +8,86 @@ defineProps<{
</script>
<template>
<div flex items-start gap-18px>
<svg width="30" height="153" viewBox="0 0 30 153" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.5002 5.01788L12.5012 149.5" stroke="white" stroke-dasharray="1 4" />
<circle cx="13" cy="6" r="6" fill="white" />
<rect y="129" width="30" height="24" fill="url(#paint0_linear_558_22)" />
<div
flex
items-start
gap-18px
>
<svg
width="30"
height="153"
viewBox="0 0 30 153"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12.5002 5.01788L12.5012 149.5"
stroke="white"
stroke-dasharray="1 4"
/>
<circle
cx="13"
cy="6"
r="6"
fill="white"
/>
<rect
y="129"
width="30"
height="24"
fill="url(#paint0_linear_558_22)"
/>
<defs>
<linearGradient id="paint0_linear_558_22" x1="15" y1="129" x2="15" y2="150.5" gradientUnits="userSpaceOnUse">
<linearGradient
id="paint0_linear_558_22"
x1="15"
y1="129"
x2="15"
y2="150.5"
gradientUnits="userSpaceOnUse"
>
<stop stop-opacity="0" />
<stop offset="1" />
</linearGradient>
</defs>
</svg>
<div flex flex-col gap-8px>
<div flex flex-col>
<span text-14px font-700>{{ network }}</span>
<span text-14px font-400>{{ date }}</span>
<div
flex
flex-col
gap-8px
>
<div
flex
flex-col
>
<span
text-14px
font-700
>{{ network }}</span>
<span
text-14px
font-400
>{{ date }}</span>
</div>
<div flex flex-col>
<span text-14px font-400>{{ 'Launch' }}</span>
<span text-14px font-400 text-app-text-grey>{{ launchType }}</span>
<div
flex
flex-col
>
<span
text-14px
font-400
>{{ 'Launch' }}</span>
<span
text-14px
font-400
text-app-text-grey
>{{ launchType }}</span>
</div>
<NuxtLink underline underline-offset-4 :to="to">
<NuxtLink
underline
underline-offset-4
:to="to"
>
{{ 'Learn more' }}
</NuxtLink>
</div>

83
components/Project/ProjectActivityTwitter.vue
View file

@ -7,22 +7,81 @@ defineProps<{
</script>
<template>
<div relative grid grid-cols-2 border-2px gap-y-8px gap-x-32px p-24px lg-grid-cols-3>
<h1 px-8px text-14px font-700 bg-black absolute top--10px left-16px>
<div
relative
grid
grid-cols-2
border-2px
gap-y-8px
gap-x-32px
p-24px
lg-grid-cols-3
>
<h1
px-8px
text-14px
font-700
bg-black
absolute
top--10px
left-16px
>
{{ 'TWITTER ACTIVITY' }}
</h1>
<div flex flex-col>
<span text-14px font-400 text-app-text-grey leading-24px>{{ 'Followers #' }}</span>
<span text-14px font-700 leading-24px>{{ followers }}</span>
<div
flex
flex-col
>
<span
text-14px
font-400
text-app-text-grey
leading-24px
>{{ 'Followers #' }}</span>
<span
text-14px
font-700
leading-24px
>{{ followers }}</span>
</div>
<div flex flex-col>
<span text-14px font-400 text-app-text-grey leading-24px>{{ 'Posts' }}</span>
<span text-14px font-700 leading-24px>{{ posts }}</span>
<div
flex
flex-col
>
<span
text-14px
font-400
text-app-text-grey
leading-24px
>{{ 'Posts' }}</span>
<span
text-14px
font-700
leading-24px
>{{ posts }}</span>
</div>
<div flex gap-6px lg:flex-col lg:gap-0>
<span text-14px font-400 text-app-text-grey leading-24px>{{ 'Retweets' }}</span>
<div flex items-center gap-4px>
<span text-14px font-400 leading-24px>{{ retweets }}x</span>
<div
flex
gap-6px
lg:flex-col
lg:gap-0
>
<span
text-14px
font-400
text-app-text-grey
leading-24px
>{{ 'Retweets' }}</span>
<div
flex
items-center
gap-4px
>
<span
text-14px
font-400
leading-24px
>{{ retweets }}x</span>
</div>
</div>
</div>

32
components/Project/ProjectDetailCategoryDivider.vue
View file

@ -6,13 +6,37 @@ defineProps<{
</script>
<template>
<div w-full flex justify-between gap-8px lg:gap-32px mt-36px>
<div flex items-center gap-8px text-16px font-700 lg:max-w-320px lg:w-full lg:justify-end>
<div
w-full
flex
justify-between
gap-8px
lg:gap-32px
mt-36px
>
<div
flex
items-center
gap-8px
text-16px
font-700
lg:max-w-320px
lg:w-full
lg:justify-end
>
<slot />
{{ title }}
</div>
<div w-full flex items-center>
<hr border-t-2px border-white w-full>
<div
w-full
flex
items-center
>
<hr
border-t-2px
border-white
w-full
>
<!-- <Badge text-16px h-32px :text="badgeText" /> -->
</div>
</div>

12
components/Project/ProjectDetailContainer.vue
View file

@ -1,6 +1,14 @@
<template>
<div lg:flex gap-32px>
<div hidden w-full max-w-320px lg:block />
<div
lg:flex
gap-32px
>
<div
hidden
w-full
max-w-320px
lg:block
/>
<div w-full>
<slot />
</div>

28
components/Project/ProjectGrid.vue
View file

@ -14,11 +14,23 @@ function showMoreProjects() {
</script>
<template>
<div flex flex-col items-start>
<div v-if="displayedProjects.length" grid :class="switcher ? 'grid-cols-1 lg:grid-cols-1' : 'xl:grid-cols-3 lg:grid-cols-3 sm:grid-cols-2 grid-cols-1'" gap-16px text-white w-full>
<div
flex
flex-col
items-start
>
<div
v-if="displayedProjects.length"
grid
:class="switcher ? 'grid-cols-1 lg:grid-cols-1' : 'xl:grid-cols-3 lg:grid-cols-3 sm:grid-cols-2 grid-cols-1'"
gap-16px
text-white
w-full
>
<Card
v-for="project in displayedProjects"
:key="project.id" :project="project"
:key="project.id"
:project="project"
/>
</div>
<div v-else>
@ -26,8 +38,14 @@ function showMoreProjects() {
</div>
<button
v-if="displayedProjects.length < projects.length"
mt-29px text="14px" leading-24px font-700 px-12px
py-4px border-2px border-app-white
mt-29px
text="14px"
leading-24px
font-700
px-12px
py-4px
border-2px
border-app-white
@click="showMoreProjects"
>
Load more projects

144
components/Project/ProjectHeading.vue
View file

@ -22,7 +22,7 @@ const availableSupport = computed(() => {
- audit: yes / no
*/
const calculateScore = computed(() => {
const criterias: { value: string; key: string }[] = [
const criterias: { value: keyof ProjectIndexable, key: keyof ProjectIndexable | '' }[] = [
{ value: 'product_readiness', key: '' },
{ value: 'github', key: 'links' },
{ value: 'docs', key: 'links' },
@ -35,9 +35,9 @@ const calculateScore = computed(() => {
let value
// value = ((criterias[i].key ?? props.project[criterias[i].value as keyof typeof props.project]) ?? null === null) ? null : (props.project as ProjectIndexable)[criterias[i].key][criterias[i].value]
const indexableProject = (props.project as ProjectIndexable)
const indexableProject = props.project as ProjectIndexable
if (criterias[i].key !== '')
value = indexableProject?.[criterias[i].key]?.[criterias[i].value]
value = (indexableProject[criterias[i].key] as any)?.[criterias[i].value]
else
value = indexableProject?.[criterias[i].value]
@ -61,7 +61,7 @@ function fulfilled(value: any): boolean {
return true
break
case 'object':
if (Object.keys(value).length > 0)
if (Object.keys(value!).length > 0)
return true
break
default:
@ -74,43 +74,94 @@ const logo = props.project?.logos?.at(0)?.url
</script>
<template>
<div lg:flex lg:gap-32px>
<div
lg:flex
lg:gap-32px
>
<NuxtImg
lg:max-w-320px lg:max-h-320px shrink :src="logo ?? '/no-image-1-1.svg'"
lg:max-w-320px
lg:max-h-320px
shrink
:src="logo ?? '/no-image-1-1.svg'"
class="bg-app-bg-grey object-cover max-w-full h-full vertical-align[middle] block border-0 w-full h-[300px]"
/>
<div grow>
<div flex flex-col justify-between gap-32px lg:flex-row lg:items-center>
<div
flex
flex-col
justify-between
gap-32px
lg:flex-row
lg:items-center
>
<div mt-24px>
<NuxtLink
:to="project.links?.web" target="_blank" flex items-center gap-12px hover:underline
:to="project.links?.web"
target="_blank"
flex
items-center
gap-12px
hover:underline
underline-offset-3
>
<h1 text="24px sm:32px app-white" leading-32px font-700>
<h1
text="24px sm:32px app-white"
leading-32px
font-700
>
{{ project.name }}
</h1>
<UnoIcon i-web-openinnew text-16px />
<UnoIcon
i-web-openinnew
text-16px
/>
</NuxtLink>
<h2 text="16px app-text-grey" leading-24px mt-8px>
<h2
text="16px app-text-grey"
leading-24px
mt-8px
>
{{ project.project_type ?? '---' }}
</h2>
</div>
<div
border-2px class="border-app-black bg-app-white text-app-black" flex items-center justify-center px-32px
py-16px text-32px font-700 leading-40px cursor-pointer
border-2px
class="border-app-black bg-app-white text-app-black"
flex
items-center
justify-center
px-32px
py-16px
text-32px
font-700
leading-40px
cursor-pointer
>
{{ `${calculateScore}%` }}
</div>
</div>
<div grid grid-cols-2 gap-16px my-32px lg:grid-cols-4>
<ProjectInfoItem :check-undefined="project.links?.github" title="Github" bold text-size="18px">
<div
grid
grid-cols-2
gap-16px
my-32px
lg:grid-cols-4
>
<ProjectInfoItem
:check-undefined="project.links?.github"
title="Github"
bold
text-size="18px"
>
<template #prefix>
<UnoIcon i-web-code />
</template>
{{ project.links?.github ? 'YES' : 'NO' }}
</ProjectInfoItem>
<ProjectInfoItem
:check-undefined="project.project_status?.version" title="Product readyness" bold
:check-undefined="project.project_status?.version"
title="Product readyness"
bold
text-size="18px"
>
<template #prefix>
@ -118,39 +169,80 @@ const logo = props.project?.logos?.at(0)?.url
</template>
{{ project.project_status?.version }}
</ProjectInfoItem>
<ProjectInfoItem :check-undefined="project.team?.length" title="Team" bold text-size="18px">
<ProjectInfoItem
:check-undefined="project.team?.length"
title="Team"
bold
text-size="18px"
>
<template #prefix>
<UnoIcon i-web-team />
</template>
{{ `${project.team?.length} members` }}
</ProjectInfoItem>
<ProjectInfoItem :check-undefined="project.links?.docs" title="Docs" bold text-size="18px">
<ProjectInfoItem
:check-undefined="project.links?.docs"
title="Docs"
bold
text-size="18px"
>
<template #prefix>
<UnoIcon i-web-docs text-28px />
<UnoIcon
i-web-docs
text-28px
/>
</template>
{{ project.links?.docs ? 'YES' : 'NO' }}
</ProjectInfoItem>
<ProjectInfoItem :check-undefined="project.audits" title="Audit" bold text-size="18px">
<ProjectInfoItem
:check-undefined="project.audits"
title="Audit"
bold
text-size="18px"
>
<template #prefix>
<UnoIcon i-web-audit text-28px />
<UnoIcon
i-web-audit
text-28px
/>
</template>
{{ project.audits ? 'YES' : 'NO' }}
</ProjectInfoItem>
<ProjectInfoItem :check-undefined="project.links" title="Available support" bold text-size="18px">
<ProjectInfoItem
:check-undefined="project.links"
title="Available support"
bold
text-size="18px"
>
<template #prefix>
<UnoIcon i-web-support text-28px />
<UnoIcon
i-web-support
text-28px
/>
</template>
{{ `${availableSupport} channels` }}
</ProjectInfoItem>
</div>
<div grid grid-cols-2 gap-16px my-32px lg:grid-cols-4>
<div
grid
grid-cols-2
gap-16px
my-32px
lg:grid-cols-4
>
<ProjectInfoItem
:check-undefined="project.blockchain_features?.network" tooltip-link="/" title="Ecosystem"
:check-undefined="project.blockchain_features?.network"
tooltip-link="/"
title="Ecosystem"
bold
>
{{ project.blockchain_features?.network }}
</ProjectInfoItem>
<ProjectInfoItem invisible title="Last update" bold>
<ProjectInfoItem
invisible
title="Last update"
bold
>
17/11/2023 – 23:22
</ProjectInfoItem>
</div>

76
components/Project/ProjectInfoItem.vue
View file

@ -33,15 +33,34 @@ function tooltipMouseOut() {
</script>
<template>
<div flex items-start relative>
<div h-full flex items-center text-32px gap-12px>
<div
flex
items-start
relative
>
<div
h-full
flex
items-center
text-32px
gap-12px
>
<slot name="prefix" />
<div />
</div>
<div class="peer" flex flex-col justify-center w-full>
<div
class="peer"
flex
flex-col
justify-center
w-full
>
<h3
v-if="title"
ref="heading" w-fit text="14px sm:16px app-text-grey" leading-24px
ref="heading"
w-fit
text="14px sm:16px app-text-grey"
leading-24px
:class="[tooltip ? 'cursor-pointer underline underline-offset-5 decoration-dotted hover:decoration-solid hover:text-app-white' : '']"
@mouseover="showTooltip = true"
@mouseout="headingMouseOut()"
@ -49,23 +68,47 @@ function tooltipMouseOut() {
{{ title }}
</h3>
<template v-if="checkUndefined === undefined || checkUndefined === null">
<span opacity-50 leading-24px font-700 text-14px :class="`sm:text-${textSize ?? '16px'}`">{{ 'N/A' }}</span>
<span
opacity-50
leading-24px
font-700
text-14px
:class="`sm:text-${textSize ?? '16px'}`"
>{{ 'N/A' }}</span>
</template>
<template v-else>
<template v-if="link">
<div
flex gap-6px items-center justify-start hover:underline hover:text-white text-14px
flex
gap-6px
items-center
justify-start
hover:underline
hover:text-white
text-14px
:color="color ?? '#FFF'"
class="hoverEl"
:class="`sm:text-${textSize ?? '16px'} font-${bold ? '700' : '400'} opacity-${opacity}`"
leading-24px @click.prevent="navigateTo(link, { external: true, open: { target: '_blank' } })"
leading-24px
@click.prevent="navigateTo(link, { external: true, open: { target: '_blank' } })"
>
<slot />
<UnoIcon i-web-openinnew text-16px text-app-text-grey class="customHover" />
<UnoIcon
i-web-openinnew
text-16px
text-app-text-grey
class="customHover"
/>
</div>
</template>
<div v-else :color="color ?? '#FFF'" text-14px :class="`sm:text-${textSize ?? '16px'} font-${bold ? '700' : '400'} opacity-${opacity}`" leading-24px>
<div
v-else
:color="color ?? '#FFF'"
text-14px
:class="`sm:text-${textSize ?? '16px'} font-${bold ? '700' : '400'} opacity-${opacity}`"
leading-24px
>
<slot />
</div>
</template>
@ -82,12 +125,23 @@ function tooltipMouseOut() {
{{ tooltip }}
<NuxtLink
v-if="tooltipLink"
mt-12px text-14px font-400 leading-20px underline underline-offset-2
mt-12px
text-14px
font-400
leading-20px
underline
underline-offset-2
:to="tooltipLink"
>
{{ 'Learn More' }}
</NuxtLink>
<div w-16px h-16px absolute bg-white class="top--8px left-50% translate-x--50% rotate-45 z-99" />
<div
w-16px
h-16px
absolute
bg-white
class="top--8px left-50% translate-x--50% rotate-45 z-99"
/>
</div>
</div>
</template>

17
components/Project/ProjectMarket.vue
View file

@ -2,10 +2,21 @@
</script>
<template>
<ProjectDetailCategoryDivider title="MARKET" badge-text="3/10">
<UnoIcon i-web-code_v2 text-24px />
<ProjectDetailCategoryDivider
title="MARKET"
badge-text="3/10"
>
<UnoIcon
i-web-code_v2
text-24px
/>
</ProjectDetailCategoryDivider>
<ProjectDetailContainer>
<div mt-32px w-full h-500px bg-dark />
<div
mt-32px
w-full
h-500px
bg-dark
/>
</ProjectDetailContainer>
</template>

65
components/Project/ProjectNavigation.vue
View file

@ -9,16 +9,63 @@ const githubProjectUrl = computed(() => {
</script>
<template>
<div app-container w-full flex items-center justify-between md:bg-transparent px-8px>
<NavigationButton w-230px @click="$router.back()">
<span block md:hidden>{{ 'BACK' }}</span>
<span hidden whitespace-nowrap md:block>{{ 'BACK TO LIST' }}</span>
<div
app-container
w-full
flex
items-center
justify-between
md:bg-transparent
px-8px
>
<NavigationButton
w-230px
@click="$router.back()"
>
<span
block
md:hidden
>{{ 'BACK' }}</span>
<span
hidden
whitespace-nowrap
md:block
>{{ 'BACK TO LIST' }}</span>
</NavigationButton>
<hr hidden md:block border-t-2px border-white w-full>
<div flex gap-16px>
<EditButton px-16px py-8px hover:bg-white hover:text-black :to="githubProjectUrl">
<span text-16px whitespace-nowrap font-400 leading-24px hidden md:block>{{ 'EDIT RESEARCH' }}</span>
<span text-16px whitespace-nowrap font-400 leading-24px block md:hidden>{{ 'EDIT' }}</span>
<hr
hidden
md:block
border-t-2px
border-white
w-full
>
<div
flex
gap-16px
>
<EditButton
px-16px
py-8px
hover:bg-white
hover:text-black
:to="githubProjectUrl"
>
<span
text-16px
whitespace-nowrap
font-400
leading-24px
hidden
md:block
>{{ 'EDIT RESEARCH' }}</span>
<span
text-16px
whitespace-nowrap
font-400
leading-24px
block
md:hidden
>{{ 'EDIT' }}</span>
</EditButton>
<!-- <ShareButton>
<span text-16px font-400 hidden md:block>{{ 'SHARE' }}</span>

236
components/Project/ProjectOpeness.vue
View file

@ -7,109 +7,224 @@ defineProps<{
</script>
<template>
<ProjectDetailCategoryDivider title="OPENESS" badge-text="3/10">
<UnoIcon i-web-code_v2 text-24px />
<ProjectDetailCategoryDivider
title="OPENESS"
badge-text="3/10"
>
<UnoIcon
i-web-code_v2
text-24px
/>
</ProjectDetailCategoryDivider>
<ProjectDetailContainer>
<div mt-32px text="14px sm:16px" leading-24px font-400>
<div
mt-32px
text="14px sm:16px"
leading-24px
font-400
>
<h3 text-app-text-grey>
{{ 'Project Description' }}
</h3>
<span text="14px sm:16px" leading-20px>{{ project.description ?? '---' }}</span>
<span
text="14px sm:16px"
leading-20px
>{{ project.description ?? '---' }}</span>
</div>
<div mt-24px>
<h3 text="14px sm:16px app-text-grey" leading-20px>
<h3
text="14px sm:16px app-text-grey"
leading-20px
>
{{ 'Infrastructure links' }}
</h3>
<div grid grid-cols-2 gap-16px mt-8px lg:grid-cols-4>
<ProjectOpenessLink v-if="project.links?.web" :to="project.links?.web">
<div
grid
grid-cols-2
gap-16px
mt-8px
lg:grid-cols-4
>
<ProjectOpenessLink
v-if="project.links?.web"
:to="project.links?.web"
>
<template #prefix>
<UnoIcon i-web-website />
</template>
{{ 'Website' }}
</ProjectOpenessLink>
<ProjectOpenessLink v-if="project.links?.blog" :to="project.links.blog">
<ProjectOpenessLink
v-if="project.links?.blog"
:to="project.links.blog"
>
<template #prefix>
<UnoIcon i-web-website />
</template>
{{ 'Blog' }}
</ProjectOpenessLink>
<ProjectOpenessLink v-if="project.links?.github" :to="project.links?.github">
<ProjectOpenessLink
v-if="project.links?.github"
:to="project.links?.github"
>
<template #prefix>
<UnoIcon i-web-github opacity-30 text-27px />
<UnoIcon
i-web-github
opacity-30
text-27px
/>
</template>
{{ 'Github' }}
</ProjectOpenessLink>
<ProjectOpenessLink v-if="project.links?.docs" :to="project.links?.docs">
<ProjectOpenessLink
v-if="project.links?.docs"
:to="project.links?.docs"
>
<template #prefix>
<UnoIcon i-web-documents text-24px />
<UnoIcon
i-web-documents
text-24px
/>
</template>
{{ 'Docs' }}
</ProjectOpenessLink>
<ProjectOpenessLink v-if="project.links?.block_explorer" :to="project.links.block_explorer">
<ProjectOpenessLink
v-if="project.links?.block_explorer"
:to="project.links.block_explorer"
>
<template #prefix>
<UnoIcon i-web-explorer opacity-30 />
<UnoIcon
i-web-explorer
opacity-30
/>
</template>
{{ 'Explorer' }}
</ProjectOpenessLink>
<ProjectOpenessLink v-if="project.links?.snapshot" :to="project.links.snapshot">
<ProjectOpenessLink
v-if="project.links?.snapshot"
:to="project.links.snapshot"
>
<template #prefix>
<UnoIcon i-web-snapshot text-32px />
<UnoIcon
i-web-snapshot
text-32px
/>
</template>
{{ 'Snapshot' }}
</ProjectOpenessLink>
<ProjectOpenessLink v-if="project.links?.token" :to="project.links.token">
<ProjectOpenessLink
v-if="project.links?.token"
:to="project.links.token"
>
<template #prefix>
<UnoIcon i-web-token text-28px />
<UnoIcon
i-web-token
text-28px
/>
</template>
{{ 'Token' }}
</ProjectOpenessLink>
<ProjectOpenessLink v-if="project.links?.coingecko" :to="project.links.coingecko">
<ProjectOpenessLink
v-if="project.links?.coingecko"
:to="project.links.coingecko"
>
<template #prefix>
<UnoIcon i-web-coingecko opacity-30 text-24px />
<UnoIcon
i-web-coingecko
opacity-30
text-24px
/>
</template>
{{ 'Coingecko' }}
</ProjectOpenessLink>
</div>
</div>
<div mt-24px>
<h3 text="14px sm:16px app-text-grey" leading-20px>
<h3
text="14px sm:16px app-text-grey"
leading-20px
>
{{ 'Socials' }}
</h3>
<div grid grid-cols-2 gap-16px mt-8px lg:grid-cols-4>
<ProjectOpenessLink v-if="project.links?.forum" :to="project.links.forum">
<div
grid
grid-cols-2
gap-16px
mt-8px
lg:grid-cols-4
>
<ProjectOpenessLink
v-if="project.links?.forum"
:to="project.links.forum"
>
<template #prefix>
<UnoIcon i-web-forum opacity-30 text-28px />
<UnoIcon
i-web-forum
opacity-30
text-28px
/>
</template>
{{ 'Forum' }}
</ProjectOpenessLink>
<ProjectOpenessLink v-if="project.links?.discord" :to="project.links.discord">
<ProjectOpenessLink
v-if="project.links?.discord"
:to="project.links.discord"
>
<template #prefix>
<UnoIcon i-web-discord text-27px />
<UnoIcon
i-web-discord
text-27px
/>
</template>
{{ 'Discord' }}
</ProjectOpenessLink>
<ProjectOpenessLink v-if="project.links?.twitter" :to="project.links.twitter">
<ProjectOpenessLink
v-if="project.links?.twitter"
:to="project.links.twitter"
>
<template #prefix>
<UnoIcon i-web-twitter_x opacity-30 text-22px />
<UnoIcon
i-web-twitter_x
opacity-30
text-22px
/>
</template>
{{ 'Twitter' }}
</ProjectOpenessLink>
<ProjectOpenessLink v-if="project.links?.lens" :to="project.links.lens">
<ProjectOpenessLink
v-if="project.links?.lens"
:to="project.links.lens"
>
<template #prefix>
<UnoIcon i-web-lens text-32px />
<UnoIcon
i-web-lens
text-32px
/>
</template>
{{ 'Lens' }}
</ProjectOpenessLink>
<ProjectOpenessLink v-if="project.links?.farcaster" :to="project.links.farcaster">
<ProjectOpenessLink
v-if="project.links?.farcaster"
:to="project.links.farcaster"
>
<template #prefix>
<UnoIcon i-web-farcaster text-26px />
<UnoIcon
i-web-farcaster
text-26px
/>
</template>
{{ 'Farcaster' }}
</ProjectOpenessLink>
<ProjectOpenessLink v-if="project.links?.telegram" :to="project.links.telegram">
<ProjectOpenessLink
v-if="project.links?.telegram"
:to="project.links.telegram"
>
<template #prefix>
<UnoIcon i-web-telegram opacity-30 text-22px />
<UnoIcon
i-web-telegram
opacity-30
text-22px
/>
</template>
{{ 'Telegram' }}
</ProjectOpenessLink>
@ -118,30 +233,63 @@ defineProps<{
<div mt-24px>
<ProjectOpenessTeamMembers :members="project.team" />
</div>
<div grid grid-cols-2 items-start mt-32px gap-y-26px lg:grid-cols-4>
<ProjectInfoItem :check-undefined="project.product_launch_day" title="Product launch day">
<div
grid
grid-cols-2
items-start
mt-32px
gap-y-26px
lg:grid-cols-4
>
<ProjectInfoItem
:check-undefined="project.product_launch_day"
title="Product launch day"
>
{{ project.product_launch_day }}
</ProjectInfoItem>
<ProjectInfoItem
title="Opensource" bold
title="Opensource"
bold
:check-undefined="project.blockchain_features?.opensource"
:color=" project.blockchain_features?.opensource ? '#A8FF18' : '#FF0000'"
>
{{ project.blockchain_features?.opensource ? 'Yes' : 'No' }}
</ProjectInfoItem>
</div>
<div mt-32px w-full>
<div
mt-32px
w-full
>
<ProjectInfoItem
:check-undefined="project.funding"
title="Funding" bold
title="Funding"
bold
w-full
>
<template v-for="fund in project.funding" :key="fund.name">
<div mt-16px grid grid-cols-2 sm:grid-cols-4>
<template
v-for="fund in project.funding"
:key="fund.name"
>
<div
mt-16px
grid
grid-cols-2
sm:grid-cols-4
>
<span v-if="fund.name">{{ fund.name }}</span>
<span v-if="fund.time" font-400>{{ fund.time }}</span>
<span v-if="fund.time" font-400 text-app-text-grey>{{ fund.type }}</span>
<span v-if="fund.time" font-400>{{ fund.value }}</span>
<span
v-if="fund.time"
font-400
>{{ fund.time }}</span>
<span
v-if="fund.time"
font-400
text-app-text-grey
>{{ fund.type }}</span>
<span
v-if="fund.time"
font-400
>{{ fund.value }}</span>
</div>
</template>
</ProjectInfoItem>

29
components/Project/ProjectOpenessLink.vue
View file

@ -5,12 +5,33 @@ defineProps<{
</script>
<template>
<NuxtLink :to="to" flex items-center gap-12px>
<div flex justify-center items-center w-32px h-32px text-32px>
<NuxtLink
:to="to"
flex
items-center
gap-12px
>
<div
flex
justify-center
items-center
w-32px
h-32px
text-32px
>
<slot name="prefix" />
</div>
<div flex flex-col justify-center>
<div text="14px sm:16px app-white" font-400 leading-24px hover:underline>
<div
flex
flex-col
justify-center
>
<div
text="14px sm:16px app-white"
font-400
leading-24px
hover:underline
>
<slot />
</div>
</div>

55
components/Project/ProjectOpenessMember.vue
View file

File diff suppressed because one or more lines are too long

91
components/Project/ProjectOpenessTeamMembers.vue
View file

@ -10,38 +10,101 @@ const props = defineProps<{
<template>
<div>
<h3 text="14px sm:16px app-text-grey" leading-24px>
<h3
text="14px sm:16px app-text-grey"
leading-24px
>
{{ 'Team members' }}
</h3>
<div grid grid-cols-1 gap-16px mt-12px sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4>
<div
grid
grid-cols-1
gap-16px
mt-12px
sm:grid-cols-2
md:grid-cols-3
lg:grid-cols-4
>
<template v-if="props.members?.length">
<template v-for="member in members" :key="member.name">
<div flex gap-12px>
<template
v-for="member in members"
:key="member.name"
>
<div
flex
gap-12px
>
<template v-if="member.link">
<NuxtImg :src="member.link" width="48" height="48" :alt="member.name" />
<NuxtImg
:src="member.link"
width="48"
height="48"
:alt="member.name"
/>
</template>
<template v-else>
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle opacity="0.2" cx="24" cy="24" r="23.5" stroke="white" />
<svg
width="48"
height="48"
viewBox="0 0 48 48"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle
opacity="0.2"
cx="24"
cy="24"
r="23.5"
stroke="white"
/>
<g opacity="0.2">
<mask id="mask0_2200_7716" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="12" y="12" width="24" height="24">
<rect x="12" y="12" width="24" height="24" fill="#D9D9D9" />
<mask
id="mask0_2200_7716"
style="mask-type:alpha"
maskUnits="userSpaceOnUse"
x="12"
y="12"
width="24"
height="24"
>
<rect
x="12"
y="12"
width="24"
height="24"
fill="#D9D9D9"
/>
</mask>
<g mask="url(#mask0_2200_7716)">
<path d="M24 24C22.9 24 21.9583 23.6083 21.175 22.825C20.3917 22.0417 20 21.1 20 20C20 18.9 20.3917 17.9583 21.175 17.175C21.9583 16.3917 22.9 16 24 16C25.1 16 26.0417 16.3917 26.825 17.175C27.6083 17.9583 28 18.9 28 20C28 21.1 27.6083 22.0417 26.825 22.825C26.0417 23.6083 25.1 24 24 24ZM16 32V29.2C16 28.6333 16.1458 28.1125 16.4375 27.6375C16.7292 27.1625 17.1167 26.8 17.6 26.55C18.6333 26.0333 19.6833 25.6458 20.75 25.3875C21.8167 25.1292 22.9 25 24 25C25.1 25 26.1833 25.1292 27.25 25.3875C28.3167 25.6458 29.3667 26.0333 30.4 26.55C30.8833 26.8 31.2708 27.1625 31.5625 27.6375C31.8542 28.1125 32 28.6333 32 29.2V32H16Z" fill="white" />
<path
d="M24 24C22.9 24 21.9583 23.6083 21.175 22.825C20.3917 22.0417 20 21.1 20 20C20 18.9 20.3917 17.9583 21.175 17.175C21.9583 16.3917 22.9 16 24 16C25.1 16 26.0417 16.3917 26.825 17.175C27.6083 17.9583 28 18.9 28 20C28 21.1 27.6083 22.0417 26.825 22.825C26.0417 23.6083 25.1 24 24 24ZM16 32V29.2C16 28.6333 16.1458 28.1125 16.4375 27.6375C16.7292 27.1625 17.1167 26.8 17.6 26.55C18.6333 26.0333 19.6833 25.6458 20.75 25.3875C21.8167 25.1292 22.9 25 24 25C25.1 25 26.1833 25.1292 27.25 25.3875C28.3167 25.6458 29.3667 26.0333 30.4 26.55C30.8833 26.8 31.2708 27.1625 31.5625 27.6375C31.8542 28.1125 32 28.6333 32 29.2V32H16Z"
fill="white"
/>
</g>
</g>
</svg>
</template>
<div flex flex-col>
<span text="14px sm:16px" font-700>{{ member.name }}</span>
<span text="14px sm:16px app-text-grey" font-400>{{ member.role ?? 'N/A' }}</span>
<div
flex
flex-col
>
<span
text="14px sm:16px"
font-700
>{{ member.name }}</span>
<span
text="14px sm:16px app-text-grey"
font-400
>{{ member.role ?? 'N/A' }}</span>
</div>
</div>
</template>
</template>
<template v-else>
<span text-14px opacity-50>{{ 'N/A' }}</span>
<span
text-14px
opacity-50
>{{ 'N/A' }}</span>
</template>
</div>
</div>

145
components/Project/ProjectPrivacy.vue
View file

@ -7,27 +7,43 @@ defineProps<{
</script>
<template>
<ProjectDetailCategoryDivider title="PRIVACY" badge-text="3/10">
<UnoIcon i-web-code_v2 text-24px />
<ProjectDetailCategoryDivider
title="PRIVACY"
badge-text="3/10"
>
<UnoIcon
i-web-code_v2
text-24px
/>
</ProjectDetailCategoryDivider>
<ProjectDetailContainer>
<div grid grid-cols-2 items-start mt-32px gap-y-16px lg:grid-cols-4>
<div
grid
grid-cols-2
items-start
mt-32px
gap-y-16px
lg:grid-cols-4
>
<ProjectInfoItem
:check-undefined="project.blockchain_features?.p2p"
bold title="Peer to Peer (P2P)"
bold
title="Peer to Peer (P2P)"
>
{{ project.blockchain_features?.p2p ? 'YES' : 'NO' }}
</ProjectInfoItem>
<ProjectInfoItem
:check-undefined="project.tracebility?.kyc"
bold :color="project.tracebility?.kyc ? '#FF0000' : '#18FF2F'"
bold
:color="project.tracebility?.kyc ? '#FF0000' : '#18FF2F'"
title="Know Your Customer (KYC)"
>
{{ project.tracebility?.kyc ? 'YES' : 'NO' }}
</ProjectInfoItem>
<ProjectInfoItem
:check-undefined="project.storage"
bold title="Decentralized storage"
bold
title="Decentralized storage"
:color="project.storage?.decentralized ? '#18FF2F' : '#FF0000'"
>
{{ project.storage?.decentralized ? 'YES' : 'NO' }}
@ -40,88 +56,163 @@ defineProps<{
{{ project.default_privacy ? 'YES' : 'NO' }}
</ProjectInfoItem>
</div>
<div grid grid-cols-2 items-start mt-32px gap-y-16px lg:grid-cols-4>
<div
grid
grid-cols-2
items-start
mt-32px
gap-y-16px
lg:grid-cols-4
>
<ProjectInfoItem
:check-undefined="project.blockchain_features?.revealed_recipient"
:color="project.blockchain_features?.revealed_recipient ? '#FF0000' : '#18FF2F'"
bold title="Revealed recipient"
bold
title="Revealed recipient"
>
{{ project.blockchain_features?.revealed_recipient ? 'YES' : 'NO' }}
</ProjectInfoItem>
<ProjectInfoItem
:check-undefined="project.blockchain_features?.revealed_sender"
:color="project.blockchain_features?.revealed_sender ? '#FF0000' : '#18FF2F'"
bold title="Revealed sender"
bold
title="Revealed sender"
>
{{ project.blockchain_features?.revealed_sender ? 'YES' : 'NO' }}
</ProjectInfoItem>
<ProjectInfoItem
:check-undefined="project.blockchain_features?.revealed_ammount"
:color="project.blockchain_features?.revealed_ammount ? '#FF0000' : '#18FF2F'"
bold title="Revealed amount"
bold
title="Revealed amount"
>
{{ project.blockchain_features?.revealed_ammount ? 'YES' : 'NO' }}
</ProjectInfoItem>
<ProjectInfoItem
:check-undefined="project.blockchain_features?.reversability_condition"
bold title="Reversability"
bold
title="Reversability"
>
{{ project.blockchain_features?.reversability_condition }}
</ProjectInfoItem>
</div>
<div grid grid-cols-2 items-start mt-32px gap-y-16px lg:grid-cols-4>
<div
grid
grid-cols-2
items-start
mt-32px
gap-y-16px
lg:grid-cols-4
>
<ProjectInfoItem
:check-undefined="project.blockchain_features?.connected_tx"
:color="project.blockchain_features?.connected_tx ? '#FF0000' : '#18FF2F'"
bold title="Connected Txs"
bold
title="Connected Txs"
>
{{ project.blockchain_features?.connected_tx ? 'YES' : 'NO' }}
</ProjectInfoItem>
<ProjectInfoItem :check-undefined="project.blockchain_features?.data_masking" bold title="Data masking">
<ProjectInfoItem
:check-undefined="project.blockchain_features?.data_masking"
bold
title="Data masking"
>
{{ project.blockchain_features?.data_masking }}
</ProjectInfoItem>
<ProjectInfoItem :check-undefined="project.blockchain_features?.tx_history" bold title="Tx history">
<ProjectInfoItem
:check-undefined="project.blockchain_features?.tx_history"
bold
title="Tx history"
>
{{ project.blockchain_features?.tx_history ? 'YES' : 'NO' }}
</ProjectInfoItem>
</div>
<div my-24px>
<hr border-t-2px border-white opacity-20 w-80px>
<hr
border-t-2px
border-white
opacity-20
w-80px
>
</div>
<div grid grid-cols-2 items-start mt-32px gap-y-16px lg:grid-cols-4>
<div
grid
grid-cols-2
items-start
mt-32px
gap-y-16px
lg:grid-cols-4
>
<ProjectInfoItem
:check-undefined="project.privacy_policy"
:color="project.privacy_policy?.defined ? '#18FF2F' : '#FF0000'"
bold title="Privacy Policy"
bold
title="Privacy Policy"
>
{{ project.privacy_policy?.defined ? 'YES' : 'NO' }}
</ProjectInfoItem>
<ProjectInfoItem :check-undefined="project.tracebility?.tracked_data" title="Collected data">
<ProjectInfoItem
:check-undefined="project.tracebility?.tracked_data"
title="Collected data"
>
{{ project.tracebility?.tracked_data }}
</ProjectInfoItem>
<ProjectInfoItem :check-undefined="project.privacy_policy?.data_usage" title="Data usage">
<ProjectInfoItem
:check-undefined="project.privacy_policy?.data_usage"
title="Data usage"
>
{{ project.privacy_policy?.data_usage }}
</ProjectInfoItem>
<ProjectInfoItem :check-undefined="project.blockchain_features?.frontend_anonymity" bold title="Frontend anonymity">
<ProjectInfoItem
:check-undefined="project.blockchain_features?.frontend_anonymity"
bold
title="Frontend anonymity"
>
{{ project.blockchain_features?.frontend_anonymity }}
</ProjectInfoItem>
</div>
<div my-24px>
<hr border-t-2px border-white opacity-20 w-80px>
<hr
border-t-2px
border-white
opacity-20
w-80px
>
</div>
<div grid grid-cols-2 items-start mt-32px gap-y-16px>
<div
grid
grid-cols-2
items-start
mt-32px
gap-y-16px
>
<ProjectInfoItem
:check-undefined="project.compliance"
:color="project.compliance ? '#FF0000' : '#18FF2F'"
bold title="Compliance"
bold
title="Compliance"
>
{{ project.compliance ? 'YES' : 'NO' }}
</ProjectInfoItem>
</div>
<div grid grid-cols-2 items-start mt-32px gap-y-16px>
<ProjectInfoItem :check-undefined="project.tracebility?.sign_in_type_requirments" bold title="Sign-in requirements">
<div
grid
grid-cols-2
items-start
mt-32px
gap-y-16px
>
<ProjectInfoItem
:check-undefined="project.tracebility?.sign_in_type_requirments"
bold
title="Sign-in requirements"
>
{{ project.tracebility?.sign_in_type_requirments }}
</ProjectInfoItem>
<ProjectInfoItem :check-undefined="project.blockchain_features?.identity_integration" title="Identity integrations">
<ProjectInfoItem
:check-undefined="project.blockchain_features?.identity_integration"
title="Identity integrations"
>
{{ project.blockchain_features?.identity_integration }}
</ProjectInfoItem>
</div>

56
components/Project/ProjectSecurity.vue
View file

@ -7,14 +7,28 @@ defineProps<{
</script>
<template>
<ProjectDetailCategoryDivider title="SECURITY" badge-text="3/10">
<UnoIcon i-web-code_v2 text-24px />
<ProjectDetailCategoryDivider
title="SECURITY"
badge-text="3/10"
>
<UnoIcon
i-web-code_v2
text-24px
/>
</ProjectDetailCategoryDivider>
<ProjectDetailContainer>
<div grid grid-cols-2 items-start mt-32px gap-y-16px lg:grid-cols-4>
<div
grid
grid-cols-2
items-start
mt-32px
gap-y-16px
lg:grid-cols-4
>
<ProjectInfoItem
:check-undefined="project.blockchain_features?.asset_custody_type"
bold title="Asset custody"
bold
title="Asset custody"
>
{{ project.blockchain_features?.asset_custody_type }}
</ProjectInfoItem>
@ -27,12 +41,17 @@ defineProps<{
</b>
{{ ` – ${project.blockchain_features?.upgradability?.type}` }}
</ProjectInfoItem>
<ProjectInfoItem :check-undefined="project.social_trust" title="Social dependency">
<ProjectInfoItem
:check-undefined="project.social_trust"
title="Social dependency"
>
{{ project.social_trust }}
</ProjectInfoItem>
<ProjectInfoItem
:check-undefined="project.third_party_dependency"
bold :color="project.third_party_dependency ? '#FF0000' : '#18FF2F'" title="Third-party dependency"
bold
:color="project.third_party_dependency ? '#FF0000' : '#18FF2F'"
title="Third-party dependency"
>
{{ project.third_party_dependency ? 'YES' : 'NO' }}
</ProjectInfoItem>
@ -45,19 +64,36 @@ defineProps<{
</ProjectInfoItem>
</div>
<div my-24px>
<hr border-t-2px border-white opacity-20 w-80px>
<hr
border-t-2px
border-white
opacity-20
w-80px
>
</div>
<div v-if="project.audits">
<h2 text-18px text-app-text-grey my-24px>
<h2
text-18px
text-app-text-grey
my-24px
>
Audits
</h2>
<template v-for="audit in project.audits" :key="audit.name">
<template
v-for="audit in project.audits"
:key="audit.name"
>
<ProjectSecurityAudit
:audit-name="audit.name"
:audit-url="audit.link"
:date="audit.time"
>
<NuxtImg :src="audit.logo ?? '/no-image-1-1.svg'" w-64px h-64px object-cover />
<NuxtImg
:src="audit.logo ?? '/no-image-1-1.svg'"
w-64px
h-64px
object-cover
/>
</ProjectSecurityAudit>
</template>
</div>

34
components/Project/ProjectSecurityAudit.vue
View file

@ -7,14 +7,38 @@ defineProps<{
</script>
<template>
<div flex items-center gap-16px>
<div
flex
items-center
gap-16px
>
<slot />
<div flex flex-col text-14px font-700 leading-24px>
<NuxtLink hover:underline flex items-center gap-8px :to="auditUrl">
<div
flex
flex-col
text-14px
font-700
leading-24px
>
<NuxtLink
hover:underline
flex
items-center
gap-8px
:to="auditUrl"
>
{{ auditName }}
<UnoIcon v-if="auditUrl" i-web-openinnew text-16px />
<UnoIcon
v-if="auditUrl"
i-web-openinnew
text-16px
/>
</NuxtLink>
<span text-14px font-400 leading-24px>{{ date }}</span>
<span
text-14px
font-400
leading-24px
>{{ date }}</span>
</div>
</div>
</template>

72
components/Project/ProjectTechnology.vue
View file

@ -7,14 +7,28 @@ defineProps<{
</script>
<template>
<ProjectDetailCategoryDivider title="TECHNOLOGY" badge-text="3/10">
<UnoIcon i-web-code_v2 text-24px />
<ProjectDetailCategoryDivider
title="TECHNOLOGY"
badge-text="3/10"
>
<UnoIcon
i-web-code_v2
text-24px
/>
</ProjectDetailCategoryDivider>
<ProjectDetailContainer>
<div grid grid-cols-2 items-start mt-32px gap-y-16px lg:grid-cols-4>
<div
grid
grid-cols-2
items-start
mt-32px
gap-y-16px
lg:grid-cols-4
>
<ProjectInfoItem
:check-undefined="project.technology?.type"
title="Technology type" bold
title="Technology type"
bold
>
{{ project.technology?.type }}
</ProjectInfoItem>
@ -32,22 +46,52 @@ defineProps<{
>
{{ project.licences }}
</ProjectInfoItem>
<ProjectInfoItem :check-undefined="project.links?.whitepaper" title="Whitepaper" bold :link="project.links?.whitepaper">
<ProjectInfoItem
:check-undefined="project.links?.whitepaper"
title="Whitepaper"
bold
:link="project.links?.whitepaper"
>
{{ project.links?.whitepaper ? 'YES' : 'NO' }}
</ProjectInfoItem>
</div>
<div grid grid-cols-1 items-start mt-16px gap-y-16px lg:grid-cols-4>
<div
grid
grid-cols-1
items-start
mt-16px
gap-y-16px
lg:grid-cols-4
>
<ProjectInfoItem
:check-undefined="project.project_status"
title="Version"
bold
>
<div v-if="project.project_status?.live_status" flex items-center gap-12px>
<UnoIcon i-web-live text-10px class="color-#B5E26B" />
<div
v-if="project.project_status?.live_status"
flex
items-center
gap-12px
>
<UnoIcon
i-web-live
text-10px
class="color-#B5E26B"
/>
<span>{{ `Live on ${project.project_status.version}` }}</span>
</div>
<div v-else flex items-center gap-12px>
<UnoIcon i-web-live text-10px class="color-#e26b6b" />
<div
v-else
flex
items-center
gap-12px
>
<UnoIcon
i-web-live
text-10px
class="color-#e26b6b"
/>
<span>{{ 'Offline' }}</span>
</div>
</ProjectInfoItem>
@ -60,9 +104,13 @@ defineProps<{
</ProjectInfoItem>
<ProjectInfoItem
:check-undefined="project.client_diversability"
title="Client diversability" bold
title="Client diversability"
bold
>
<template v-for="item in project.client_diversability" :key="item.name">
<template
v-for="item in project.client_diversability"
:key="item.name"
>
<NuxtLink :to="item.link">
{{ item.name }}
</NuxtLink><br>

100
components/SearchBox.vue
View file

@ -12,33 +12,103 @@ const isSearchFocused = ref(false)
</script>
<template>
<div flex justify-between gap-16px items-centeer>
<div border-2px flex items-center max-w-320px w-full hover:opacity-100 :class="isSearchFocused ? 'opacity-100' : 'opacity-25'">
<div px-12px py-0px flex w-fit>
<div
flex
justify-between
gap-16px
items-centeer
>
<div
border-2px
flex
items-center
max-w-320px
w-full
hover:opacity-100
:class="isSearchFocused ? 'opacity-100' : 'opacity-25'"
>
<div
px-12px
py-0px
flex
w-fit
>
<UnoIcon
i-web-search text-16px
i-web-search
text-16px
:class="isSearchFocused ? 'opacity-100' : 'opacity-50' "
class="uno-icon"
/>
</div>
<input
v-model="filter.query" type="text"
bg-transparent border-transparent
focus:border-transparent focus:ring-0
h-full w-full outline-none @focus="isSearchFocused = true" @blur="isSearchFocused = false"
v-model="filter.query"
type="text"
bg-transparent
border-transparent
focus:border-transparent
focus:ring-0
h-full
w-full
outline-none
@focus="isSearchFocused = true"
@blur="isSearchFocused = false"
>
</div>
<div>
<div flex gap-24px items-center w-full>
<div gap-12px items-center xl:flex hidden invisible>
<UnoIcon i-web-list text-16px cursor-pointer hover:opacity-100 :class="switcher ? 'opacity-100' : 'opacity-50'" @click="switcher = true" />
<UnoIcon i-web-blocks text-16px cursor-pointer hover:opacity-100 :class="!switcher ? 'opacity-100' : 'opacity-50'" @click="switcher = false" />
<div
flex
gap-24px
items-center
w-full
>
<div
gap-12px
items-center
xl:flex
hidden
invisible
>
<UnoIcon
i-web-list
text-16px
cursor-pointer
hover:opacity-100
:class="switcher ? 'opacity-100' : 'opacity-50'"
@click="switcher = true"
/>
<UnoIcon
i-web-blocks
text-16px
cursor-pointer
hover:opacity-100
:class="!switcher ? 'opacity-100' : 'opacity-50'"
@click="switcher = false"
/>
</div>
<div flex gap-12px items-center w-full>
<h4 xl:block hidden text-16px opacity-50 w-fit>
<div
flex
gap-12px
items-center
w-full
>
<h4
xl:block
hidden
text-16px
opacity-50
w-fit
>
Sort by
</h4>
<SelectBox v-model="filter.sortby" :black-and-white="false" :options="options" w-99px sm:w-162px text-black :is-margin-top="false" />
<SelectBox
v-model="filter.sortby"
:black-and-white="false"
:options="options"
w-99px
sm:w-162px
text-black
:is-margin-top="false"
/>
</div>
</div>
</div>

33
components/SelectBox.vue
View file

@ -18,33 +18,50 @@ const selectedValue = useVModel(props, 'modelValue', emits)
</script>
<template>
<HeadlessListbox v-model="selectedValue" as="div">
<div class="relative font-700" :class="[isMarginTop ? 'mt-2' : 'mt-0', blackAndWhite ? 'bg-app-black' : 'bg-app-white']">
<HeadlessListbox
v-model="selectedValue"
as="div"
>
<div
class="relative font-700"
:class="[isMarginTop ? 'mt-2' : 'mt-0', blackAndWhite ? 'bg-app-black' : 'bg-app-white']"
>
<HeadlessListboxButton
class="relative w-full cursor-pointer py-8px p-16px text-left border-2px sm:text-sm sm:leading-6" :class="[blackAndWhite ? ' text-app-white' : 'text-app-black']"
class="relative w-full cursor-pointer py-8px p-16px text-left border-2px sm:text-sm sm:leading-6"
:class="[blackAndWhite ? ' text-app-white' : 'text-app-black']"
>
<span class="block truncate mr-8px">{{ props.options.find(option => option.value === selectedValue)?.label }}</span>
<span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
<UnoIcon i-heroicons-solid-chevron-down :class="[blackAndWhite ? ' text-app-white' : 'text-app-black']" />
<UnoIcon
i-heroicons-solid-chevron-down
:class="[blackAndWhite ? ' text-app-white' : 'text-app-black']"
/>
</span>
</HeadlessListboxButton>
<transition
leave-active-class="transition ease-in duration-100" leave-from-class="opacity-100"
leave-active-class="transition ease-in duration-100"
leave-from-class="opacity-100"
leave-to-class="opacity-0"
>
<HeadlessListboxOptions
class="absolute z-100 max-h-60 w-full divide-y-2px border-2px border-t-0 overflow-auto bg-app-black text-app-white focus:outline-none sm:text-sm"
>
<HeadlessListboxOption
v-for="option in props.options" :key="option.value" v-slot="{ active, selected }"
as="template" :value="option.value"
v-for="option in props.options"
:key="option.value"
v-slot="{ active, selected }"
as="template"
:value="option.value"
>
<li
class="w-full relative cursor-pointer select-none py-8px p-16px"
:class="[active ? 'bg-#ffffff1a' : 'text-white']"
>
<span class="block truncate" :class="[selected ? 'font-semibold' : 'font-normal']">{{ option.label }}</span>
<span
class="block truncate"
:class="[selected ? 'font-semibold' : 'font-normal']"
>{{ option.label }}</span>
</li>
</HeadlessListboxOption>
</HeadlessListboxOptions>

10
components/ShareButton.vue
View file

@ -2,8 +2,14 @@
</script>
<template>
<div flex gap-12px>
<UnoIcon i-heroicons-solid-share text-24px />
<div
flex
gap-12px
>
<UnoIcon
i-heroicons-solid-share
text-24px
/>
<slot />
</div>
</template>

19
components/Tabs.vue
View file

@ -12,8 +12,23 @@ const selectedValue = useVModel(props, 'modelValue', emits)
</script>
<template>
<div flex items-center gap-16px>
<div v-for="option in options" :key="option.value" :class="[selectedValue === option.value ? 'font-700 text-app-black bg-app-white' : 'font-400 text-app-white border-app-white']" text-24px leading-32px px-16px py-8px border-2px cursor-pointer @click="selectedValue = option.value">
<div
flex
items-center
gap-16px
>
<div
v-for="option in options"
:key="option.value"
:class="[selectedValue === option.value ? 'font-700 text-app-black bg-app-white' : 'font-400 text-app-white border-app-white']"
text-24px
leading-32px
px-16px
py-8px
border-2px
cursor-pointer
@click="selectedValue = option.value"
>
{{ option.label }}
</div>
</div>

6
eslint.config.mjs
View file

@ -3,4 +3,10 @@ import withNuxt from './.nuxt/eslint.config.mjs'
export default withNuxt(
// Your custom configs here
{
rules: {
'@typescript-eslint/no-explicit-any': 'off',
'vue/multi-word-component-names': 'off',
},
},
)

84
layouts/default.vue
View file

@ -14,7 +14,7 @@ const selectedCategory = computed(() => {
const sortedFilteredCategories = computed(() => ([
categories.value.find(c => c.id === 'defi')!,
...categories.value.sort((a, b) => a.name.localeCompare(b.name)).filter(c => c.id !== 'defi'),
...[...categories.value].sort((a, b) => a.name.localeCompare(b.name)).filter(c => c.id !== 'defi'),
]))
const { showBar } = storeToRefs(useNavigaiton())
@ -38,39 +38,95 @@ watch([scrollY, top, y], (newValues, oldValues) => {
</script>
<template>
<div ref="swipeEl" flex flex-col min-h-100vh h-full w-full>
<div
ref="swipeEl"
flex
flex-col
min-h-100vh
h-full
w-full
>
<Navigation />
<div app-container mt-32px>
<div flex w-full xl:gap-32px>
<div
app-container
mt-32px
>
<div
flex
w-full
xl:gap-32px
>
<div w-fit>
<div
ref="scrollEl"
class="no-scrollbar"
h-100vh overflow-y-auto sticky top-32px hidden xl:block min-w-234px pb-48px
h-100vh
overflow-y-auto
sticky
top-32px
hidden
xl:block
min-w-234px
pb-48px
>
<Category
v-for="category in sortedFilteredCategories"
:key="category.id" :title="category.name"
:count="category.projectsCount" :selected="selectedCategoryId === category.id"
:key="category.id"
:title="category.name"
:count="category.projectsCount"
:selected="selectedCategoryId === category.id"
@click="[navigateTo(`/category/${category.id}`), selectedCategoryId = category.id]"
/>
</div>
</div>
<div w-full>
<div flex flex-col gap-16px w-full>
<div xl:hidden block>
<h2 text-14px font-700>
<div
flex
flex-col
gap-16px
w-full
>
<div
xl:hidden
block
>
<h2
text-14px
font-700
>
Choose category
</h2>
<CategorySelectBox v-model="selectedCategoryId" :options="extendedOptions" w-full @selected="selectedCategoryId === 'all' ? navigateTo(`/`) : navigateTo(`/category/${selectedCategoryId}`)" />
<CategorySelectBox
v-model="selectedCategoryId"
:options="extendedOptions"
w-full
@selected="selectedCategoryId === 'all' ? navigateTo(`/`) : navigateTo(`/category/${selectedCategoryId}`)"
/>
</div>
<SearchBox />
</div>
<div flex gap-28px items-center my-24px mt-28px>
<h2 v-if="selectedCategoryId" w-max font-700 text-18px sm:text-28px whitespace-nowrap>
<div
flex
gap-28px
items-center
my-24px
mt-28px
>
<h2
v-if="selectedCategoryId"
w-max
font-700
text-18px
sm:text-28px
whitespace-nowrap
>
{{ selectedCategoryId === 'all' ? `${filteredProjectsCount} All Projects` : `${filteredProjectsCount ?? 0} ${selectedCategory?.name}` }}
</h2>
<div h-2px w="full" bg-white />
<div
h-2px
w="full"
bg-white
/>
</div>
<slot />
</div>

6
layouts/detail.vue
View file

@ -12,7 +12,11 @@ watch(y, (newY, oldY) => {
</script>
<template>
<div ref="swipeEl" h-full w-full>
<div
ref="swipeEl"
h-full
w-full
>
<Navigation />
<slot />
</div>

7
pages/project/[id].vue
View file

@ -33,7 +33,12 @@ useSeoMeta({
<template>
<div v-if="project">
<div app-container>
<div flex flex-col gap-48px mt-54px>
<div
flex
flex-col
gap-48px
mt-54px
>
<div>
<div>
<ProjectHeading :project="project" />

75
pages/styleguide.vue
View file

@ -7,26 +7,39 @@ const options: InputOption[] = [
const loremIpsum: string = 'Description just text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tempus nulla quis enim vulputate semper. Duis varius nibh sed magna tincidunt pellentesque.'
const cardData = {
image: 'https://ctrlv.cz/Epud',
title1: 'title1',
title2: 'title2',
percentage: 84,
anonymity: true,
decentralized: true,
opensource: true,
license: 'MIT',
datatracking: true,
compliance: true,
}
// const cardData = {
// image: 'https://ctrlv.cz/Epud',
// title1: 'title1',
// title2: 'title2',
// percentage: 84,
// anonymity: true,
// decentralized: true,
// opensource: true,
// license: 'MIT',
// datatracking: true,
// compliance: true,
// }
const selectedOption = ref('all')
</script>
<template>
<div flex flex-col items-start justify-start gap-8px>
<Category title="All Projects" :count="503" />
<Category title="All Projects" :count="503" selected />
<div
flex
flex-col
items-start
justify-start
gap-8px
>
<Category
title="All Projects"
:count="503"
/>
<Category
title="All Projects"
:count="503"
selected
/>
<Button mt-16px>
<template #prefix>
<UnoIcon i-heroicons-solid-pencil />
@ -36,19 +49,39 @@ const selectedOption = ref('all')
<Button>
Save Research
</Button>
<MenuItem title="Dashboard" mt-16px />
<MenuItem title="Dashboard" selected />
<MenuItem
title="Dashboard"
mt-16px
/>
<MenuItem
title="Dashboard"
selected
/>
<Badge text="84%" />
<Badge text="84%" inverted />
<SelectBox v-model="selectedOption" mt-16px :options="options" />
<h1 custom-link mt-16px>
<Badge
text="84%"
inverted
/>
<SelectBox
v-model="selectedOption"
mt-16px
:options="options"
/>
<h1
custom-link
mt-16px
>
Custom Link
</h1>
<Helper :info="loremIpsum" />
<NavigationButton @click="$router.back()">
Back
</NavigationButton>
<Tabs v-model="selectedOption" mt-16px :options="options" />
<Tabs
v-model="selectedOption"
mt-16px
:options="options"
/>
<!-- <Card
v-if="cardData"
id="test"

2
types/project.ts
View file

@ -145,5 +145,5 @@ export interface ProjectShallow {
}
export interface ProjectIndexable extends Project {
[key: string]: any
[key: string]: unknown
}