├── src
    ├── public
    │   ├── robots.txt
    │   └── favicon.ico
    ├── components
    │   ├── sidebar
    │   │   ├── SidebarNewPost.vue
    │   │   ├── SidebarTools.vue
    │   │   ├── SidebarUserProfile.vue
    │   │   └── SidebarMenu.vue
    │   ├── Loading.vue
    │   ├── post
    │   │   ├── PostReason.vue
    │   │   ├── PostText.vue
    │   │   ├── PostReply.vue
    │   │   ├── PostHeader.vue
    │   │   ├── Post.vue
    │   │   └── PostActions.vue
    │   ├── Header.vue
    │   ├── Login.vue
    │   ├── Timeline.vue
    │   ├── Notifications.vue
    │   └── Notification.vue
    ├── pages
    │   ├── notifications.vue
    │   └── index.vue
    ├── plugins
    │   └── bsky-agent.ts
    ├── composables
    │   └── useRichText.ts
    ├── stores
    │   └── session.ts
    └── app.vue
├── .yarnrc.yml
├── tsconfig.json
├── .gitignore
├── nuxt.config.ts
├── package.json
├── README.md
└── .github
    └── workflows
        └── deploy.yml


/src/public/robots.txt:
--------------------------------------------------------------------------------
1 | 
2 | 


--------------------------------------------------------------------------------
/src/components/sidebar/SidebarNewPost.vue:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/components/Loading.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |     <span>Loading</span>
3 |   </template>


--------------------------------------------------------------------------------
/.yarnrc.yml:
--------------------------------------------------------------------------------
1 | nodeLinker: node-modules
2 | 
3 | yarnPath: .yarn/releases/yarn-4.5.1.cjs
4 | 


--------------------------------------------------------------------------------
/src/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JuanjoSalvador/sunset-bsky/HEAD/src/public/favicon.ico


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   // https://nuxt.com/docs/guide/concepts/typescript
3 |   "extends": "./.nuxt/tsconfig.json"
4 | }
5 | 


--------------------------------------------------------------------------------
/src/pages/notifications.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <h2 class="title is-2">Notifications</h2>
3 |   <Notifications />
4 | </template>


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Nuxt dev/build outputs
 2 | .output
 3 | .data
 4 | .nuxt
 5 | .nitro
 6 | .cache
 7 | .yarn
 8 | dist
 9 | 
10 | # Node dependencies
11 | node_modules
12 | 
13 | # Logs
14 | logs
15 | *.log
16 | 
17 | # Misc
18 | .DS_Store
19 | .fleet
20 | .idea
21 | 
22 | # Local env files
23 | .env
24 | .env.*
25 | !.env.example
26 | 


--------------------------------------------------------------------------------
/src/components/sidebar/SidebarTools.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import SidebarUserProfile from './SidebarUserProfile.vue';
 3 | </script>
 4 | 
 5 | <template>
 6 |     <div class="sidebar">
 7 |         <SidebarUserProfile />
 8 | 
 9 |         <textarea class="textarea" placeholder="What's up?"></textarea>
10 |         <br/>
11 |         <button class="button">
12 |             Post
13 |         </button>
14 |     </div>
15 | </template>
16 | 
17 | <style scoped>
18 | .sidebar {
19 |     position: fixed;
20 |     top: 4.75rem;
21 | }
22 | </style>


--------------------------------------------------------------------------------
/nuxt.config.ts:
--------------------------------------------------------------------------------
 1 | // https://nuxt.com/docs/api/configuration/nuxt-config
 2 | export default defineNuxtConfig({
 3 |   devtools: { enabled: true },
 4 |   css: ['bulma/css/bulma.min.css'],
 5 |   modules: [
 6 |     '@pinia/nuxt',
 7 |     '@vesp/nuxt-fontawesome'
 8 |   ],
 9 |   plugins: [
10 |     { src: '~/plugins/bsky-agent.ts', mode: 'client' },
11 |   ],
12 |   fontawesome: {
13 |     icons: {
14 |       solid: ['repeat', 'heart', 'bell', 'right-from-bracket', 'house', 'reply', 'book-open'],
15 |       regular: ['comment', 'heart']
16 |     }
17 |   },
18 |   srcDir: 'src',
19 | })


--------------------------------------------------------------------------------
/src/plugins/bsky-agent.ts:
--------------------------------------------------------------------------------
 1 | import { BskyAgent } from '@atproto/api'
 2 | 
 3 | import { useSessionStore } from '~/stores/session'
 4 | 
 5 | export default defineNuxtPlugin({
 6 |   name: 'bsky-agent',
 7 |   async setup() {
 8 |     const sessionStore = useSessionStore()
 9 | 
10 |     const agent = new BskyAgent({
11 |       service: 'https://bsky.social',
12 |       persistSession: (_evt, sess) => {
13 |         sessionStore.setSession(sess)
14 |       },
15 |     })
16 | 
17 |     return {
18 |       provide: {
19 |         bskyAgent: agent,
20 |       },
21 |     }
22 |   },
23 | })


--------------------------------------------------------------------------------
/src/pages/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <section class="hero is-small">
 3 |     <div class="hero-body">
 4 |       <p class="title">Home</p>
 5 |       <div class="tabs">
 6 |       <ul>
 7 |         <li class="is-active"><a>Following</a></li>
 8 |         <li><a>Custom Feed 1</a></li>
 9 |         <li><a>Custom Feed 2</a></li>
10 |         <li><a>Custom Feed 3</a></li>
11 |       </ul>
12 |     </div>
13 |     </div>
14 |   </section>
15 |   <Timeline />
16 | </template>
17 | 
18 | <style scoped>
19 | .is-fixed {
20 |   position: fixed;
21 | }
22 | .header {
23 |   z-index: 9999;
24 |   background-color: white;
25 | }
26 | </style>
27 | 


--------------------------------------------------------------------------------
/src/components/post/PostReason.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | defineProps({
 3 |   reason: Object,
 4 | })
 5 | </script>
 6 | 
 7 | <template>
 8 |     <div class="">
 9 |         <div v-if="reason" class="reason">
10 |             <font-awesome :icon="['fas', 'repeat']" class="post-icon" />
11 |             Reposted by <a :href="'profile/' + reason.by.handle">{{ reason.by.displayName }}</a>
12 |         </div>
13 |     </div>
14 | </template>
15 | 
16 | <style scoped>
17 | div.reason {
18 |   margin-left: 2.65rem;
19 |   margin-bottom: 0.25rem;
20 | }
21 | 
22 | .post-icon {
23 |     margin-right: 0.3rem;
24 |     font-size: small;
25 | }
26 | </style>


--------------------------------------------------------------------------------
/src/components/post/PostText.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { useRichText } from '~/composables/useRichText'
 3 | 
 4 | const props = defineProps({
 5 |   text: {
 6 |     type: String,
 7 |     required: true,
 8 |   },
 9 |   agent: {
10 |     type: Object as () => any,
11 |   },
12 |   reply: {
13 |     type: Object,
14 |   },
15 | })
16 | 
17 | const { htmlText } = useRichText(props.text, props.agent)
18 | </script>
19 | 
20 | <template>
21 |   <div v-if="htmlText" v-html="htmlText" class="postText" />
22 | </template>
23 | 
24 | <style scoped>
25 | div.postText {
26 |   margin-left: 4rem;
27 |   font-size: larger;
28 | }
29 | 
30 | div.postText > p + p {
31 |   margin-top: 1rem;
32 | }
33 | </style>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "nuxt-app",
 3 |   "private": true,
 4 |   "type": "module",
 5 |   "scripts": {
 6 |     "build": "nuxt build",
 7 |     "dev": "nuxt dev",
 8 |     "generate": "nuxt generate",
 9 |     "preview": "nuxt preview",
10 |     "postinstall": "nuxt prepare"
11 |   },
12 |   "dependencies": {
13 |     "@atproto/api": "^0.13.12",
14 |     "@nuxtjs/bulma": "^1.3.0",
15 |     "@pinia/nuxt": "^0.5.5",
16 |     "@vesp/nuxt-fontawesome": "^1.1.0",
17 |     "add": "^2.0.6",
18 |     "markdown-it": "^14.1.0",
19 |     "module": "^1.2.5",
20 |     "nuxi": "^3.15.0",
21 |     "nuxt": "^3.13.2",
22 |     "vue": "latest",
23 |     "vue-router": "latest"
24 |   },
25 |   "devDependencies": {
26 |     "@fortawesome/free-brands-svg-icons": "^6.6.0",
27 |     "@fortawesome/free-regular-svg-icons": "^6.6.0",
28 |     "@fortawesome/free-solid-svg-icons": "^6.6.0",
29 |     "@types/add": "^2",
30 |     "@types/markdown-it": "^14"
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/src/components/post/PostReply.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const props = defineProps({
 3 |     post: Object,
 4 |     reply: Object
 5 | })
 6 | 
 7 | const replyTo = props.reply?.parent?.author
 8 | const postAuthor = props.post?.post?.author
 9 | 
10 | const isReply = ref(Boolean(props.reply))
11 | const isThread = isReply && (props.reply?.parent?.author?.did == postAuthor?.did)
12 | 
13 | if (isThread) {
14 |     isReply.value = false
15 | }
16 | </script>
17 | 
18 | <template>
19 |     <div class="">
20 |         <div v-if="isReply" class="reason">
21 |             <font-awesome :icon="['fas', 'reply']" />
22 |             Reply to {{ replyTo?.displayName }}
23 |         </div>
24 |     </div>
25 | </template>
26 | 
27 | <style scoped>
28 | div.reason {
29 |   margin-left: 4.25rem;
30 |   margin-top: 0.25rem;
31 |   margin-bottom: 0.5rem;
32 | }
33 | 
34 | .post-icon {
35 |     margin-right: 0.3rem;
36 |     font-size: small;
37 | }
38 | </style>


--------------------------------------------------------------------------------
/src/composables/useRichText.ts:
--------------------------------------------------------------------------------
 1 | import { RichText } from '@atproto/api'
 2 | import MarkdownIt from 'markdown-it'
 3 | 
 4 | export function useRichText(text: string, agent?: any) {
 5 |   const htmlText = ref('')
 6 | 
 7 |   onMounted(async () => {
 8 |     const rt = new RichText({ text })
 9 |     await rt.detectFacets(agent)
10 | 
11 |     let markdown = ''
12 |     for (const segment of rt.segments()) {
13 |       if (segment.isMention()) {
14 |         // Check if the mention has a valid did (or whatever condition you want to use for validity)
15 |         if (segment.mention?.did) {
16 |           markdown += `[${segment.text}](https://bsky.app/profile/${segment.mention?.did})`
17 |         }
18 |         else {
19 |           // If not valid, just append the mention text without a link
20 |           markdown += segment.text
21 |         }
22 |       }
23 |       else {
24 |         markdown += segment.text
25 |       }
26 |     }
27 | 
28 |     const md = new MarkdownIt()
29 |     htmlText.value = md.render(markdown)
30 | 
31 |     console.log(htmlText.value)
32 |   })
33 | 
34 |   return {
35 |     htmlText,
36 |   }
37 | }


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Nuxt Minimal Starter
 2 | 
 3 | Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
 4 | 
 5 | ## Setup
 6 | 
 7 | Make sure to install dependencies:
 8 | 
 9 | ```bash
10 | # npm
11 | npm install
12 | 
13 | # pnpm
14 | pnpm install
15 | 
16 | # yarn
17 | yarn install
18 | 
19 | # bun
20 | bun install
21 | ```
22 | 
23 | ## Development Server
24 | 
25 | Start the development server on `http://localhost:3000`:
26 | 
27 | ```bash
28 | # npm
29 | npm run dev
30 | 
31 | # pnpm
32 | pnpm dev
33 | 
34 | # yarn
35 | yarn dev
36 | 
37 | # bun
38 | bun run dev
39 | ```
40 | 
41 | ## Production
42 | 
43 | Build the application for production:
44 | 
45 | ```bash
46 | # npm
47 | npm run build
48 | 
49 | # pnpm
50 | pnpm build
51 | 
52 | # yarn
53 | yarn build
54 | 
55 | # bun
56 | bun run build
57 | ```
58 | 
59 | Locally preview production build:
60 | 
61 | ```bash
62 | # npm
63 | npm run preview
64 | 
65 | # pnpm
66 | pnpm preview
67 | 
68 | # yarn
69 | yarn preview
70 | 
71 | # bun
72 | bun run preview
73 | ```
74 | 
75 | Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
76 | 


--------------------------------------------------------------------------------
/src/components/post/PostHeader.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const props = defineProps({
 3 |   author: Object,
 4 |   timestamp: String,
 5 |   post: Object,
 6 | })
 7 | 
 8 | const postId = props.post?.post?.uri.split('/').at(-1)
 9 | const postUri = 'https://bsky.app/profile/' + props.author?.handle + '/post/' + postId
10 | </script>
11 | 
12 | <template>
13 |   <div class="media">
14 |     <div class="media-left">
15 |       <figure class="image is-48x48 ">
16 |         <img :src="author?.avatar" class="is-rounded" />
17 |       </figure>
18 |     </div>
19 |     <div class="media-content">
20 |       <span class="subtitle is-4">
21 |         <span v-if="author?.displayName">
22 |           <a :href="'profile/' + author?.handle">{{ author?.displayName }}</a>
23 |         </span>
24 |         <span v-else>
25 |           <a :href="'profile/' + author?.handle">{{ author?.handle }}</a>
26 |         </span>
27 |       </span>
28 |       <span class="subtitle is-6 handle">@{{ author?.handle }}</span>    
29 |     </div>
30 |     <div class="media-right">
31 |       <a :href="postUri">{{ timestamp }}</a>
32 |     </div>
33 |   </div>
34 | </template>
35 | 
36 | <style scoped>
37 | span.handle {
38 |   margin-left: 0.25rem;
39 | }
40 | </style>


--------------------------------------------------------------------------------
/src/components/sidebar/SidebarUserProfile.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { useSessionStore } from '~/stores/session'
 3 | 
 4 | const nuxtApp = useNuxtApp()
 5 | const bskyAgent = nuxtApp.$bskyAgent
 6 | const sessionStore = useSessionStore()
 7 | 
 8 | const currentUserDid = sessionStore.getSession().did
 9 | const currentUser = await bskyAgent.getProfile({'actor': currentUserDid})
10 | </script>
11 | 
12 | <template>
13 |     <NuxtLink to="" class="media" id="user-profile">
14 |         <div class="media-left">
15 |             <figure class="image is-48x48">
16 |                 <img :src="currentUser.data.avatar" class="is-rounded" />
17 |             </figure>
18 |         </div>
19 |         <div class="media-content">
20 |             <p class="title is-4">
21 |                 <span>
22 |                     {{ currentUser.data.displayName }}
23 |                 </span>
24 |             
25 |             </p>
26 |             <p class="subtitle is-6">
27 |                 <span>
28 |                     @{{ currentUser.data.handle }}
29 |                 </span>
30 |             </p>
31 |         </div>
32 |   </NuxtLink>
33 | </template>
34 | 
35 | <style>
36 | #user-profile {
37 |     margin-bottom: 1rem;
38 | }
39 | </style>


--------------------------------------------------------------------------------
/src/stores/session.ts:
--------------------------------------------------------------------------------
 1 | import { defineStore } from 'pinia'
 2 | 
 3 | function getSessionFromLocalStorage() {
 4 |   if (typeof window !== 'undefined')
 5 |     return JSON.parse(localStorage.getItem('session') || 'null')
 6 | 
 7 |   return null
 8 | }
 9 | 
10 | function isSessionLoadedFromLocalStorage() {
11 |   if (typeof window !== 'undefined')
12 |     return !!localStorage.getItem('session')
13 | 
14 |   return false
15 | }
16 | 
17 | export const useSessionStore = defineStore({
18 |   id: 'session',
19 | 
20 |   // Store state
21 |   state: () => ({
22 |     session: getSessionFromLocalStorage(),
23 |     isSessionLoaded: isSessionLoadedFromLocalStorage(),
24 |   }),
25 | 
26 |   // Store actions and getters
27 |   actions: {
28 |     setSession(sessionData: any) {
29 |       if (typeof window !== 'undefined')
30 |         localStorage.setItem('session', JSON.stringify(sessionData))
31 | 
32 |       this.session = sessionData
33 |       this.isSessionLoaded = true
34 |     },
35 | 
36 |     getSession() {
37 |       return this.session
38 |     },
39 | 
40 |     clearSession() {
41 |       if (typeof window !== 'undefined')
42 |         localStorage.removeItem('session')
43 | 
44 |       this.session = null
45 |       this.isSessionLoaded = false
46 |     },
47 |   },
48 | })


--------------------------------------------------------------------------------
/src/app.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { useSessionStore } from '@/stores/session'
 3 | 
 4 | const isLoggedIn = ref(false)
 5 | const isLoading = ref(true)
 6 | const sessionStore = useSessionStore()
 7 | 
 8 | onMounted(() => {
 9 |   const storedSession = localStorage.getItem('session')
10 |   if (storedSession && storedSession !== 'undefined') {
11 |     try {
12 |       sessionStore.setSession(JSON.parse(storedSession))
13 |       isLoggedIn.value = true
14 |     }
15 |     catch (e) {
16 |       console.error('Error parsing stored session:', e)
17 |     }
18 |   }
19 | 
20 |   isLoading.value = false
21 | })
22 | 
23 | function onLoginSuccess() {
24 |   isLoggedIn.value = true
25 | }
26 | </script>
27 | 
28 | <template>
29 |   <div class="container" data-theme="dark">
30 |     <section class="section" v-if="isLoggedIn">
31 |       <div class="columns  is-flex is-centered is-vcentere">
32 |         <div class="column is-one-fifth">
33 |           <SidebarTools />
34 |         </div>
35 |         <div class="column is-three-fifths">
36 |           <RouterView />
37 |         </div>
38 |         <div class="column is-one-fifth">
39 |           <SidebarMenu />
40 |         </div>
41 |       </div>
42 |     </section>
43 |     <div v-else>
44 |       <Login v-if="!isLoggedIn" @login-success="onLoginSuccess" />
45 |     </div>
46 |   </div>
47 | </template>
48 | 


--------------------------------------------------------------------------------
/src/components/Header.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const emit = defineEmits(['loginSuccess'])
 3 | const nuxtApp = useNuxtApp()
 4 | const bskyAgent = nuxtApp.$bskyAgent
 5 | 
 6 | const identifier = ref('')
 7 | const password = ref('')
 8 | const loginError = ref(false)
 9 | 
10 | async function logout() {
11 |   try {
12 |     await bskyAgent.logout()
13 |   }
14 |   catch (error) {
15 |     console.error('Logout failed:', error)
16 |   }
17 | }
18 | </script>
19 | 
20 | <template>
21 |   <!-- <section class="section">
22 |     <div class="columns is-flex is-centered is-vcentered">
23 |       <div class="column is-one-third">
24 |         <div class="field">
25 |           <div class="control">
26 |             <input v-model="identifier" placeholder="Email" class="input">
27 |           </div>
28 |         </div>
29 |         <div class="field">
30 |           <div class="control">
31 |             <input v-model="password" type="password" placeholder="Password" class="input">
32 |           </div>
33 |         </div>
34 | 
35 |         <div class="field is-grouped is-grouped-centered">
36 |           <p class="control">
37 |             <button class="button is-primary" @click="logout">
38 |               <strong>Login</strong>
39 |             </button>
40 |           </p>
41 |         </div>
42 |       </div>
43 |     </div>
44 |   </section> -->
45 | </template>
46 | 
47 | <style scoped>
48 | </style>


--------------------------------------------------------------------------------
/.github/workflows/deploy.yml:
--------------------------------------------------------------------------------
 1 | # https://github.com/actions/deploy-pages#usage
 2 | name: Deploy to GitHub Pages
 3 | on:
 4 |   workflow_dispatch:
 5 |   push:
 6 |     branches:
 7 |       - main
 8 | jobs:
 9 |   build:
10 |     runs-on: ubuntu-latest
11 |     steps:
12 |       - uses: actions/checkout@v4
13 |       - run: corepack enable
14 |       - uses: actions/setup-node@v4
15 |         with:
16 |           node-version: "18"
17 |       # Pick your own package manager and build script
18 |       - run: yarn install
19 |       - run: npx nuxt build --preset github_pages
20 |       - name: Upload artifact
21 |         uses: actions/upload-pages-artifact@v3
22 |         with:
23 |           path: ./.output/public
24 |   # Deployment job
25 |   deploy:
26 |     # Add a dependency to the build job
27 |     needs: build
28 |     # Grant GITHUB_TOKEN the permissions required to make a Pages deployment
29 |     permissions:
30 |       pages: write      # to deploy to Pages
31 |       id-token: write   # to verify the deployment originates from an appropriate source
32 |     # Deploy to the github_pages environment
33 |     environment:
34 |       name: github_pages
35 |       url: ${{ steps.deployment.outputs.page_url }}
36 |     # Specify runner + deployment step
37 |     runs-on: ubuntu-latest
38 |     steps:
39 |       - name: Deploy to GitHub Pages
40 |         id: deployment
41 |         uses: actions/deploy-pages@v4
42 | 


--------------------------------------------------------------------------------
/src/components/sidebar/SidebarMenu.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | import { NuxtLink } from '#build/components';
 3 | import { useSessionStore } from '~/stores/session'
 4 | </script>
 5 | 
 6 | <template>
 7 |     <div class="sidebar">
 8 |         <ul>
 9 |             <li>
10 |                 <NuxtLink to="/" class="button is-text">
11 |                     <span class="icon is-small">
12 |                         <font-awesome :icon="['fas', 'house']" class="list-icon" /> 
13 |                     </span>
14 |                     <span>Home</span>
15 |                 </NuxtLink>
16 |             </li>
17 |             <li> 
18 |                 <NuxtLink to="/notifications" class="button is-text">
19 |                     <span class="icon is-small">
20 |                         <font-awesome :icon="['fas', 'bell']" class="list-icon" />
21 |                     </span>
22 |                     <span>Notifications</span>
23 |                 </NuxtLink>
24 |             </li>
25 |             <li>
26 |                 <button class="button is-text" @click="logout()">
27 |                     <span class="icon is-small">
28 |                         <font-awesome :icon="['fas', 'right-from-bracket']"  class="list-icon" />
29 |                     </span>
30 |                     <span>Logout</span>
31 |                 </button>
32 |             </li>
33 |         </ul>
34 |         <hr />
35 |         <h3 class="subtitle is-3">
36 |             Sunset
37 |         </h3>
38 |         <p>
39 |             An experimental Bluesky client, made by <a href="/@jsalvador.me">@jsalvador.me</a>.
40 |         </p>
41 |         <br/>
42 |         <ul>
43 |             <li>
44 |                 <a href="">GitHub</a> 
45 |             </li>
46 |         </ul>
47 |     </div>
48 | </template>
49 | 
50 | <style scoped>
51 | .list-icon {
52 |   margin-right: 1em;
53 | }
54 | .sidebar {
55 |     position: fixed;
56 |     top: 4.75rem;
57 | }
58 | </style>


--------------------------------------------------------------------------------
/src/components/Login.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const emit = defineEmits(['loginSuccess'])
 3 | const nuxtApp = useNuxtApp()
 4 | const bskyAgent = nuxtApp.$bskyAgent
 5 | 
 6 | const identifier = ref('')
 7 | const password = ref('')
 8 | const loginError = ref(false)
 9 | 
10 | async function login() {
11 |   try {
12 |     const result = await bskyAgent.login({ identifier: identifier.value, password: password.value })
13 |     // eslint-disable-next-line no-console
14 |     console.log(result)    
15 |     // eslint-disable-next-line no-console
16 |     console.log('Login successful')
17 |     emit('loginSuccess') // Emitting the success event
18 |   }
19 |   catch (error) {
20 |     console.error('Login failed:', error)
21 |     loginError.value = true
22 |   }
23 | }
24 | </script>
25 | 
26 | <template>
27 |   <section class="section is-vcentered">
28 |     <div class="columns is-flex is-centered">
29 |       <div class="column is-one-third has-text-centered">
30 |         <h1 class="title is-1">
31 |           Sunset
32 |         </h1>
33 |         <h2 class="subtitle">
34 |           An experimental Bluesky client.
35 |         </h2>
36 |         <div class="field">
37 |           <div class="control">
38 |             <input v-model="identifier" placeholder="Email or username" class="input">
39 |           </div>
40 |         </div>
41 |         <div class="field">
42 |           <div class="control">
43 |             <input v-model="password" type="password" placeholder="Password" class="input">
44 |           </div>
45 |         </div>
46 | 
47 |         <div class="field is-grouped is-grouped-centered">
48 |           <p class="control">
49 |             <button class="button is-primary" @click="login">
50 |               <strong>Login</strong>
51 |             </button>
52 |           </p>
53 |         </div>
54 |       </div>
55 |     </div>
56 |   </section>
57 | </template>
58 | 
59 | <style scoped>
60 | .columns.is-vcentered {
61 |   align-items: center;
62 |   -webkit-box-align: center;
63 |      -ms-flex-align: center;
64 | }
65 | </style>


--------------------------------------------------------------------------------
/src/components/post/Post.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import PostText from './PostText.vue';
 3 | import PostHeader from './PostHeader.vue';
 4 | import PostActions from './PostActions.vue';
 5 | import PostReply from './PostReply.vue';
 6 | import PostReason from './PostReason.vue';
 7 | 
 8 | const props = defineProps({
 9 |     post: Object,
10 |     agent: Object
11 | })
12 | 
13 | const nuxtApp = useNuxtApp()
14 | const bskyAgent = nuxtApp.$bskyAgent
15 | const currentPost = computed(() => props.post?.post)
16 | 
17 | const likeUri = ref(props.post?.post?.viewer?.like)
18 | const repostUri = ref(props.post?.post?.viewer?.repost)
19 | 
20 | function handleLikeToggled(newLikeUri: string | null) {
21 |   likeUri.value = newLikeUri
22 | }
23 | 
24 | function handleRepostToggled(newRepostUri: string | null) {
25 |   repostUri.value = newRepostUri
26 | }
27 | </script>
28 | 
29 | <template>
30 |     <div>
31 |         <PostReason :reason="post?.reason" :reply="post?.reply"/>
32 |         <PostHeader :author="currentPost?.author"  :post="post" :timestamp="currentPost?.record.createdAt" />
33 |         <PostReply :post="post" :reply="post?.reply"/>
34 |         <PostText :text="currentPost?.record?.text" :agent="bskyAgent" />
35 | 
36 |         <br />
37 | 
38 |         <div v-if="currentPost?.embed?.images" align="center">
39 |             <figure v-for="image in currentPost?.embed?.images" :key="image.thumb" class="image">
40 |                 <a :href="image.thumb">
41 |                     <img :src="image.thumb" :alt="image.alt">
42 |                 </a>
43 |             </figure>
44 |         </div>
45 | 
46 |         <PostActions
47 |             :post="currentPost"
48 |             :post-cid="currentPost?.cid"
49 |             :post-uri="currentPost?.uri"
50 |             :like-uri="likeUri"
51 |             :repost-uri="repostUri"
52 |             :agent="bskyAgent"
53 |             @likeToggled="handleLikeToggled"
54 |             @repostToggled="handleRepostToggled"
55 |             />
56 | 
57 |         <hr />
58 |     </div>
59 | </template>
60 | 
61 | <style scoped>
62 | .image img {
63 |     width: auto;
64 |     height: auto;
65 |     max-width: 80%;
66 |     max-height: 50%;
67 |     margin-left: 4rem;
68 |     border-radius: 1rem;
69 |     padding: 0.2rem;
70 |     border: 0.1rem solid rgb(238, 215, 182);
71 | }
72 | 
73 | </style>


--------------------------------------------------------------------------------
/src/components/Timeline.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { useSessionStore } from '~/stores/session'
 3 | import Post from './post/Post.vue';
 4 | 
 5 | const nuxtApp = useNuxtApp()
 6 | const bskyAgent = nuxtApp.$bskyAgent
 7 | const sessionStore = useSessionStore()
 8 | 
 9 | const loading = ref(false)
10 | const timelineData = ref<Array<any>>([])
11 | const cursor = ref<string | null>(null)
12 | const endReached = ref(false)
13 | const observer = ref<IntersectionObserver | null>(null)
14 | 
15 | const currentUserDid = sessionStore.getSession()
16 | 
17 | async function fetchData(cursorValue?: string | null) {
18 |   try {
19 |     loading.value = true
20 |     const savedSessionData = sessionStore.getSession()
21 | 
22 |     if (savedSessionData)
23 |       await bskyAgent.resumeSession(savedSessionData)
24 | 
25 |     const response = cursorValue === null
26 |       ? await bskyAgent.getTimeline({ limit: 50 })
27 |       : await bskyAgent.getTimeline({ cursor: cursorValue, limit: 50 })
28 | 
29 |     // Skip replies and reposts from current user
30 |     const filteredPosts = response.data.feed.filter(
31 |       post => !(post.post.record as any).reply || !(post.reason?.by?.did == currentUserDid?.did)
32 |     )
33 |     timelineData.value = [...timelineData.value, ...filteredPosts]
34 | 
35 |     if (response.data.cursor) {
36 |       cursor.value = response.data.cursor
37 |       endReached.value = false // There's more data to load
38 |     } else {
39 |       endReached.value = true // We've reached the end
40 |       if (observer.value)
41 |         observer.value.unobserve(document.querySelector('#endOfList')!)
42 |     }
43 |   }
44 | 
45 |   catch (error: unknown) {
46 |     if (error instanceof Error) {
47 |       console.error('Failed:', error.message)
48 |       if (error.message.includes('Authentication Required'))
49 |         sessionStore.clearSession()
50 |     }
51 |     else {
52 |       console.error('An unexpected error occurred:', error)
53 |     }
54 |   }
55 | 
56 |   finally {
57 |     loading.value = false
58 |   }
59 | }
60 | 
61 | onMounted(() => {
62 |     fetchData()
63 | 
64 |     // Infinite scroll, loads new posts when last one has been reached
65 |     observer.value = new IntersectionObserver(async (entries) => {
66 |     if (entries[0].isIntersecting && !loading.value)
67 |       await fetchData(cursor.value)
68 |     }, {
69 |         rootMargin: '200px 0px',
70 |     })
71 | 
72 |     observer.value.observe(document.querySelector('#endOfList')!)
73 | })
74 | </script>
75 | 
76 | <template>
77 |   <ul>
78 |     <Post v-for="post in timelineData" :key="post.post.record.cid" :post="post" :agent="bskyAgent" />
79 |   </ul>
80 |   <div id="endOfList" />
81 | </template>
82 | 
83 | <style scoped>
84 | </style>


--------------------------------------------------------------------------------
/src/components/Notifications.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { useSessionStore } from '~/stores/session'
 3 | import Post from './post/Post.vue';
 4 | import Notification from './Notification.vue';
 5 | 
 6 | const nuxtApp = useNuxtApp()
 7 | const bskyAgent = nuxtApp.$bskyAgent
 8 | const sessionStore = useSessionStore()
 9 | 
10 | const loading = ref(false)
11 | const timelineData = ref<Array<any>>([])
12 | const cursor = ref<string | null>(null)
13 | const endReached = ref(false)
14 | const observer = ref<IntersectionObserver | null>(null)
15 | 
16 | const currentUserDid = sessionStore.getSession()
17 | 
18 | async function fetchData(cursorValue?: string | null) {
19 |   try {
20 |     loading.value = true
21 |     const savedSessionData = sessionStore.getSession()
22 | 
23 |     if (savedSessionData)
24 |       await bskyAgent.resumeSession(savedSessionData)
25 | 
26 |     const response = cursorValue === null
27 |       ? await bskyAgent.listNotifications({ limit: 50 })
28 |       : await bskyAgent.listNotifications({ cursor: cursorValue, limit: 50 })
29 | 
30 | 
31 |     console.log(response)
32 | 
33 |     // Skip replies and reposts from current user
34 |     const notifications = response.data.notifications //.filter(
35 |       // post => !(post.post.record as any).reply || !(post.reason?.by?.did == currentUserDid?.did)
36 |     // )
37 |     timelineData.value = [...timelineData.value, ...notifications]
38 | 
39 |     if (response.data.cursor) {
40 |       cursor.value = response.data.cursor
41 |       endReached.value = false // There's more data to load
42 |     } else {
43 |       endReached.value = true // We've reached the end
44 |       if (observer.value)
45 |         observer.value.unobserve(document.querySelector('#endOfList')!)
46 |     }
47 |   }
48 | 
49 |   catch (error: unknown) {
50 |     if (error instanceof Error) {
51 |       console.error('Failed:', error.message)
52 |       if (error.message.includes('Authentication Required'))
53 |         sessionStore.clearSession()
54 |     }
55 |     else {
56 |       console.error('An unexpected error occurred:', error)
57 |     }
58 |   }
59 | 
60 |   finally {
61 |     loading.value = false
62 |   }
63 | }
64 | 
65 | onMounted(() => {
66 |     fetchData()
67 | 
68 |     // Infinite scroll, loads new posts when last one has been reached
69 |     observer.value = new IntersectionObserver(async (entries) => {
70 |     if (entries[0].isIntersecting && !loading.value)
71 |       await fetchData(cursor.value)
72 |     }, {
73 |         rootMargin: '200px 0px',
74 |     })
75 | 
76 |     observer.value.observe(document.querySelector('#endOfList')!)
77 | })
78 | </script>
79 | 
80 | <template>
81 |   <ul>
82 |     <Notification v-for="post in timelineData" :value="post" />
83 |   </ul>
84 |   <div id="endOfList" />
85 | </template>


--------------------------------------------------------------------------------
/src/components/post/PostActions.vue:
--------------------------------------------------------------------------------
  1 | <!-- eslint-disable no-console -->
  2 | <script setup lang="ts">
  3 | import { ref, watchEffect } from 'vue'
  4 | import { useSessionStore } from '@/stores/session'
  5 | 
  6 | const props = defineProps({
  7 |   postCid: {
  8 |     type: String,
  9 |     required: true,
 10 |   },
 11 |   likeUri: {
 12 |     type: String,
 13 |   },
 14 |   repostUri: {
 15 |     type: String,
 16 |   },
 17 |   postUri: {
 18 |     type: String,
 19 |     required: true,
 20 |   },
 21 | })
 22 | 
 23 | const emits = defineEmits(['likeToggled', 'repostToggled'])
 24 | 
 25 | const sessionStore = useSessionStore()
 26 | const nuxtApp = useNuxtApp()
 27 | const bskyAgent = nuxtApp.$bskyAgent
 28 | 
 29 | const localLikeUri = ref<string | null | undefined>(props.likeUri)
 30 | const localRepostUri = ref<string | null | undefined>(props.repostUri || null)
 31 | const isLiked = ref(!!props.likeUri)
 32 | const isReposted = ref(!!props.repostUri)
 33 | 
 34 | watchEffect(() => {
 35 |   if (sessionStore.isSessionLoaded)
 36 |     bskyAgent.resumeSession(sessionStore.session)
 37 | })
 38 | 
 39 | async function toggleLike() {
 40 |   if (!sessionStore.session)
 41 |     return
 42 | 
 43 |   if (isLiked.value && localLikeUri.value) {
 44 |     await bskyAgent.deleteLike(localLikeUri.value)
 45 |     console.log('Successfully deleted like.')
 46 |     localLikeUri.value = null
 47 |     isLiked.value = false
 48 |     emits('likeToggled', null)
 49 |   }
 50 |   else {
 51 |     const response = await bskyAgent.like(props.postUri, props.postCid)
 52 |     if (response && response.uri) {
 53 |       console.log('Successfully liked post.')
 54 |       localLikeUri.value = response.uri
 55 |       emits('likeToggled', response.uri)
 56 |       isLiked.value = true
 57 |     }
 58 |     else {
 59 |       console.error('Failed to retrieve the likeUri from the response.')
 60 |       emits('likeToggled', null)
 61 |     }
 62 |   }
 63 | }
 64 | 
 65 | async function toggleRepost() {
 66 |   if (!sessionStore.session)
 67 |     return
 68 | 
 69 |   if (isReposted.value && localRepostUri.value) {
 70 |     await bskyAgent.deleteRepost(localRepostUri.value)
 71 |     console.log('Successfully deleted repost.')
 72 |     localRepostUri.value = null
 73 |     isReposted.value = false
 74 |     emits('repostToggled', null)
 75 |   }
 76 |   else {
 77 |     const response = await bskyAgent.repost(props.postUri, props.postCid)
 78 |     if (response && response.uri) {
 79 |       console.log('Successfully reposted post.')
 80 |       localRepostUri.value = response.uri
 81 |       emits('repostToggled', response.uri)
 82 |       isReposted.value = true
 83 |     }
 84 |     else {
 85 |       console.error('Repost response does not contain the expected structure.')
 86 |       emits('repostToggled', null)
 87 |     }
 88 |   }
 89 | }
 90 | </script>
 91 | 
 92 | <template>
 93 |   <div class="columns is-centered action-buttons">
 94 |     <div class="column has-text-centered">
 95 |       <div>
 96 |         <button class="button is-white">
 97 |           <font-awesome :icon="['far', 'comment']" />
 98 |         </button>
 99 |       </div>
100 |     </div>
101 |     <div class="column has-text-centered">
102 |       <button class="button is-white" :class="{ 'text-green': isReposted }" @click="toggleRepost">
103 |         <font-awesome :icon="['fas', 'repeat']" />
104 |       </button>
105 |     </div>
106 |     <div class="column has-text-centered">
107 |       <button class="button is-white"  @click="toggleLike">
108 |         <font-awesome :icon="['far', 'heart']" v-if="!isLiked" />
109 |         <font-awesome :icon="['fas', 'heart']" class="text-red" v-if="isLiked" />
110 |       </button>
111 |     </div>
112 |   </div>
113 | </template>
114 | 
115 | <style scoped>
116 | .action-buttons {
117 |   margin-top: 0.05rem;
118 | }
119 | 
120 | .text-green {
121 |   color: green;
122 | }
123 | 
124 | .text-red {
125 |   color:brown;
126 | }
127 | </style>


--------------------------------------------------------------------------------
/src/components/Notification.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | defineProps({
  3 |     value: Object
  4 | })
  5 | 
  6 | const nuxtApp = useNuxtApp()
  7 | const bskyAgent = nuxtApp.$bskyAgent
  8 | </script>
  9 | 
 10 | <template>
 11 |     <div v-if="value?.reason == 'follow'">
 12 |         <div class="media">
 13 |             <div class="media-left">
 14 |                 <figure class="image is-32x32 ">
 15 |                     <img :src="value?.author?.avatar" class="is-rounded" />
 16 |                 </figure>
 17 |             </div>
 18 |             <div class="media-content">
 19 |                 <p class="subtitle is-6">
 20 |                     <span v-if="value?.author?.displayName">
 21 |                         <a :href="'profile/' + value?.author?.handle">{{ value?.author?.displayName }}</a>
 22 |                     </span>
 23 |                     <span v-else>
 24 |                         <a :href="'profile/' + value?.author?.handle">{{ value?.author?.handle }}</a>
 25 |                     </span>
 26 |                     is following you!
 27 |                 </p>
 28 |             </div>
 29 |         </div>
 30 |         <hr/>
 31 |     </div>
 32 |     <div v-if="value?.reason == 'like'">
 33 |         <div class="media">
 34 |             <div class="media-left">
 35 |                 <figure class="image is-32x32 ">
 36 |                     <img :src="value?.author?.avatar" class="is-rounded" />
 37 |                 </figure>
 38 |             </div>
 39 |             <div class="media-content">
 40 |                 <p class="title is-4">
 41 |                     
 42 |                 </p>
 43 |                 <p class="subtitle is-6">
 44 |                     <span v-if="value?.author?.displayName">
 45 |                         <a :href="'profile/' + value?.author?.handle">{{ value?.author?.displayName }}</a>
 46 |                     </span>
 47 |                     <span v-else>
 48 |                         <a :href="'profile/' + value?.author?.handle">{{ value?.author?.handle }}</a>
 49 |                     </span>
 50 |                     liked your post!
 51 |                 </p>
 52 |             </div>
 53 |         </div>
 54 |         <hr/>
 55 |     </div>
 56 |     <div v-if="value?.reason == 'repost'">
 57 |         <div class="media">
 58 |             <div class="media-left">
 59 |                 <figure class="image is-48x48 ">
 60 |                     <img :src="value?.author?.avatar" class="is-rounded" />
 61 |                 </figure>
 62 |             </div>
 63 |             <div class="media-content">
 64 |                 <p class="title is-4">
 65 |                     <span v-if="value?.author?.displayName">
 66 |                         <a :href="'profile/' + value?.author?.handle">{{ value?.author?.displayName }}</a>
 67 |                     </span>
 68 |                     <span v-else>
 69 |                         <a :href="'profile/' + value?.author?.handle">{{ value?.author?.handle }}</a>
 70 |                     </span>
 71 |                 </p>
 72 |                 <p class="subtitle is-6">
 73 |                     has started following you!
 74 |                 </p>
 75 |             </div>
 76 |         </div>
 77 |         <hr/>
 78 |     </div>
 79 |     <div v-if="value?.reason == 'reply'">
 80 |         <PostHeader :author="value?.author"  :post="value" :timestamp="value?.record.createdAt" />
 81 |         <PostReply :post="value" :reply="value?.record?.reply" />
 82 |         <br/>
 83 |         <PostText :text="value?.record?.text" :agent="bskyAgent" />
 84 | 
 85 |         <br />
 86 | 
 87 |         <div v-if="value?.embed?.images" align="center">
 88 |             <figure v-for="image in value?.embed?.images" :key="image.thumb" class="image">
 89 |                 <a :href="image.thumb">
 90 |                     <img :src="image.thumb" :alt="image.alt">
 91 |                 </a>
 92 |             </figure>
 93 |         </div>
 94 | 
 95 |         <PostActions
 96 |             :post="value"
 97 |             :post-cid="value?.cid"
 98 |             :post-uri="value?.uri"
 99 |             :like-uri="likeUri"
100 |             :repost-uri="repostUri"
101 |             :agent="bskyAgent"
102 |             @likeToggled="handleLikeToggled"
103 |             @repostToggled="handleRepostToggled"
104 |         />
105 |         <hr/>
106 |     </div>
107 | </template>


--------------------------------------------------------------------------------