see https://www.npmjs.com/package/@google/model-viewer

• connect
• disconnect
• remember auth on page load
• handle events
  • disconnect
  • wallet change

• has required string prop address

For now this is essentially a wrapper component around v-avatar that takes an address as a prop string and asks the art by city sdk to fetch the avatar image source if it exists. we'll also want a normal variant and an optional prop small which renders a smaller size.

• use v-avatar component from vuetify
• add required string prop address
• useLazyAsyncData to fetch avatar with abc sdk
• show placeholder image if avatar is null
  • create a placeholder image (png) in the public/logo folder from the logo using the same X used in the favicon
• add optional boolean prop small
  • if small is true show a smaller avatar (small = 32, normal = 128)

to fetch avatar with abc sdk:

const abc = useArtByCity()

const avatar = await abc.legacy.fetchAvatar(address)

• just have avatar when logged in
• put address into the menu
• no horizontal scroll on any page
• can make discover button smaller if needed

• should be white
• should be visible any screen size

• research liteweight qr code generator

This is a weird one but maybe make a favicon of just one of the Xs from the art by city logo?

• first/second/third names
  • if profile.displayName use that as first
  • otherwise, if they have a username, use that
  • otherwise, use address
  • always show address
  • always show username
• social links
• expandable bio
  • when bio too long
  • when bio too short

load more button should be
elevation 2
variant outlined
color primary

• takes required string prop address
• fetch likes in useLazyAsyncData() with abc sdk
• loop on likesFeed.likes, show 3 per row FeedItemCard with :id="like.liked"

to fetch likes with sdk:

const abc = useArtByCity()
const likesFeed = await abc.legacy.queryLikes(address, 'sent')

• touching feed item card on mobile should show the overlay and not navigate
• touching the overlay on mobile should navigate

check out v-touch component which might trigger on just mobile touches and not clicks? https://vuetifyjs.com/en/api/v-touch

basic default app layout based on what's there on https://artby.city
don't worry about content of header or footer for these tasks, placeholders or nothing is fine

• header (static)
• footer

• invite to collaborate on curation from profile page
• view collaborators when viewing curation

allow users to edit curation state.title

• add disabled to the v-btn for now
• label should be Edit Profile

edit profile and tip button under avatar on profile page should be
elevation 2
variant outlined
color primary
density compact
size x-small

• vuetify
• layout
• theme - don't have to go crazy for now, keep very basic or just set it up to be easily overridden later, but can reference https://artby.city or https://gitlab.com/art-by-city/art-by-city
  • keep light/dark toggle

Don't worry about any content for now, will describe those in other tasks.

• takes a manifest txid
• shows loader while fetching tx data
• should show some kind of 404 if fetching fails
• src of image is from manifest json (should show preview 1080p image)
• done loading when manifest is loaded and image is ready
• always square, aspect-ratio: 1
• on hover, fade transition in a dark overlay with title / artist text on bottom left
• if the asset is animated, should show a play icon
• don't actually do any click handling :)
• use v-hover to handle hovering logic: https://vuetifyjs.com/en/components/hover/
• use https://vuetifyjs.com/en/styles/transitions/ for transitions
• make sure no errors with npm run lint 😄

see original artworkcard component from previous dapp: https://github.com/art-by-city/Art-By-City/blob/master/components/artwork/ArtworkCard.component.vue

• on feeditemcard component on the discover feed @click should navigate to that artwork
• feeditemcard should have style cursor: pointer; but through a scoped class
• route should be /[address]/[slugOrId]
• get slugOrId param from route and ask abc sdk for that thing (see below)
• <v-divider> separating top image section and bottom metadata section
• title / artist / description section
  • large bold title
  • italic, underlined link of creator address / username
  • description
• metadata section
  • created
  • medium
  • genre
  • published
  • transaction id (link opens in new tab to viewblock)
• image publications
  • on click opens in new tab directly the image source, cursor should be pointer to indicate this on the v-img images[0].image
• audio publications
  • show the image preview4k, when clicked opens in new tab of the source
  • add html audio player below the image with audio source
• 3d model publications
  • show an overlay with 3d icon in middle, when clicked swaps to model displayer (can just leave placeholder for now)
• make sure everything looks good on diff mobile sizerinos on just artwork page

to fetch artist publications:

const publication = await abc.legacy.fetchPublicationBySlugOrId(slugOrId)

previous metadata component:
https://github.com/art-by-city/Art-By-City/blob/master/components/artwork/ArtworkMetadata.component.vue

when authenticated on home page, the text for the logged in user address is black, it should be white

recreate the top artist gallery hero component from landing page on https://artby.city

can pull image files from https://github.com/art-by-city/Art-By-City/tree/master/static/gallery-images and place in public dir

here's the original component -> https://github.com/art-by-city/Art-By-City/blob/master/components/pitch/HeroSection.component.vue

just keep these image static for now, we'll probably update them from time to time. the idea is this will eventually be powered by a "curation contract" (smart contract) that we administer/curate, but fall back on these or other static images in case the source of the eventual curation contract is not available at any given time (i.e. we don't want our website to look blank when it can't connect to DRE nodes or arweave.net)

there's a slight css animation "slightlyzoom" or something which makes it a little more interesting in contrast with the logo

blocked by usernames contract redeployment on L2

• usernames contract has been redeployed on L2 at NKj42L1tJ6SfAitwg3Qt3SZ2Us64IsPSTSCaJEzTunI
• new interface, usernames are no longer under legacy: use abc.usernames

• links should have class text-primary
• put @ in front of all social handles
• arweave address should link to that address on viewblock in new tab

allow users to edit state.metadata.description

• add disabled to the v-btn for now
• label should be Tip

• if screen size doesn't have gutters, art should be full width while still allowing title to be visible
• art should be centered

• path should be /[profile]/index.vue
• general layout
• resolve [profile] route param with abc sdk into address & username
• Avatar placeholder component that takes address as prop
• BioCard placeholder component that takes address as prop
• LikesFeed placeholder component that takes address as prop
• TipsFeed placeholder component that takes address as prop
• ProfileEditButton placeholder component
• TipButton placeholder component that takes address as prop
• Profile edit and tip buttons swap out depending on:
  • Show the ProfileEditButton if the current authenticated user address matches the profile address
  • Otherwise, show the TipButton

to get authed address:

import { useAuthStore } from '~/stores/auth'

const auth = useAuthStore()
const address = auth.address // will be null if not logged in