@vue-lynx-example/hackernews 0.2.1

package/src/App.vue

@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import { RouterView } from 'vue-router';
+import { validFeeds } from './api';
+import NavLink from './components/NavLink.vue';
+import logoUrl from './assets/lynx-logo.png';
+
+import './App.css';
+
+const feedKeys = Object.keys(validFeeds);
+</script>
+
+<template>
+  <view class="w-full h-full bg-hn-bg flex flex-col">
+    <!-- Header: 55px, matching reference -->
+    <view
+      class="bg-hn-green flex flex-col"
+      :style="{ height: '55px' }"
+    >
+      <scroll-view
+        scroll-x
+        class="flex-1"
+        :style="{ height: '100%' }"
+        :content-container-style="{ display: 'flex', flexDirection: 'row', alignItems: 'center' }"
+      >
+        <!-- Logo: Lynx logo with thin white border (YC-style) -->
+        <view
+          :style="{ display: 'flex', alignItems: 'center', justifyContent: 'center', marginLeft: '15px', marginRight: '12px' }"
+        >
+          <view
+            class="flex-shrink-0"
+            :style="{ width: '26px', height: '26px', borderWidth: '1px', borderColor: '#fff', borderRadius: '0px', display: 'flex', alignItems: 'center', justifyContent: 'center' }"
+          >
+            <image
+              :src="logoUrl"
+              :style="{ width: '24px', height: '24px' }"
+              resize="cover"
+            />
+          </view>
+        </view>
+
+        <!-- Feed nav links -->
+        <NavLink
+          v-for="key in feedKeys"
+          :key="key"
+          :to="`/${key}`"
+          :label="validFeeds[key].title"
+        />
+
+        <!-- Built with VueLynx -->
+        <view
+          :style="{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            marginLeft: 'auto',
+            marginRight: '15px',
+          }"
+        >
+          <text
+            :style="{
+              color: '#fff',
+              fontSize: '14px',
+              fontWeight: '300',
+              letterSpacing: '0.075em',
+              whiteSpace: 'nowrap',
+              flexShrink: 0,
+            }"
+          >
+            Built with VueLynx
+          </text>
+        </view>
+      </scroll-view>
+    </view>
+
+    <!-- Route content: fade on route type change, NOT on pagination -->
+    <RouterView v-slot="{ Component, route }">
+      <Transition name="fade" mode="out-in" :duration="200">
+        <component
+          :is="Component"
+          :key="(route.params.feed as string) || route.name"
+        />
+      </Transition>
+    </RouterView>
+  </view>
+</template>
+
+<style>
+/* Fade: for switching between route types (feed→item, feed→user, news→ask) */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 200ms ease;
+}
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>

package/src/api.ts

@@ -0,0 +1,82 @@
+const _fetch: typeof fetch = globalThis.fetch ?? fetch;
+
+const BASE_URL = 'https://api.hackerwebapp.com';
+
+export interface FeedItem {
+  id: number;
+  title: string;
+  url: string;
+  user: string;
+  points: number;
+  time_ago: string;
+  comments_count: number;
+  type: string;
+}
+
+export interface ItemDetail {
+  id: number;
+  title: string;
+  url: string;
+  user: string;
+  points: number;
+  time_ago: string;
+  comments_count: number;
+  comments: CommentData[];
+  content: string;
+  type: string;
+}
+
+export interface CommentData {
+  id: number;
+  user: string;
+  time_ago: string;
+  content: string;
+  comments: CommentData[];
+}
+
+export interface UserData {
+  id: string;
+  created: string;
+  karma: number;
+  about: string;
+}
+
+export const validFeeds: Record<string, { title: string; pages: number }> = {
+  news: { title: 'News', pages: 10 },
+  newest: { title: 'Newest', pages: 12 },
+  ask: { title: 'Ask', pages: 2 },
+  show: { title: 'Show', pages: 2 },
+  jobs: { title: 'Jobs', pages: 1 },
+};
+
+export async function fetchFeed(
+  feed: string,
+  page: number,
+): Promise<FeedItem[]> {
+  const res = await _fetch(`${BASE_URL}/${feed}?page=${page}`);
+  if (!res.ok) throw new Error(`Failed to fetch ${feed} page ${page}`);
+  return res.json();
+}
+
+export async function fetchItem(id: number): Promise<ItemDetail> {
+  const res = await _fetch(`${BASE_URL}/item/${id}`);
+  if (!res.ok) throw new Error(`Failed to fetch item ${id}`);
+  return res.json();
+}
+
+export async function fetchUser(id: string): Promise<UserData> {
+  // The hackerwebapp API doesn't have a working user endpoint,
+  // so we use the official HN Firebase API and normalize the response.
+  const res = await _fetch(
+    `https://hacker-news.firebaseio.com/v0/user/${id}.json`,
+  );
+  if (!res.ok) throw new Error(`Failed to fetch user ${id}`);
+  const data = await res.json();
+  if (!data) throw new Error(`User ${id} not found`);
+  return {
+    id: data.id,
+    created: new Date(data.created * 1000).toLocaleDateString(),
+    karma: data.karma,
+    about: data.about || '',
+  };
+}

package/src/components/Comment.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { ref } from 'vue-lynx';
+import { useRouter } from 'vue-router';
+import type { CommentData } from '../api';
+import { pluralize, stripHtml } from '../utils';
+
+defineProps<{
+  comment: CommentData;
+  depth?: number;
+}>();
+
+const router = useRouter();
+const open = ref(true);
+
+function goToUser(userId: string) {
+  router.push(`/user/${userId}`);
+}
+</script>
+
+<template>
+  <view
+    v-if="comment && comment.user"
+    class="flex flex-col border-t border-hn-border"
+    :style="{ paddingLeft: `${(depth ?? 0) * 24}px` }"
+  >
+    <!-- Comment header -->
+    <view class="flex flex-row" :style="{ gap: '6px', paddingTop: '1em' }">
+      <text
+        :style="{ color: '#222', fontSize: '0.9em', textDecorationLine: 'underline' }"
+        @tap="goToUser(comment.user)"
+      >
+        {{ comment.user }}
+      </text>
+      <text :style="{ color: '#595959', fontSize: '0.9em' }">
+        {{ comment.time_ago }}
+      </text>
+    </view>
+
+    <!-- Comment body -->
+    <view :style="{ paddingTop: '0.5em', paddingBottom: '0.5em' }">
+      <text :style="{ color: '#2e495e', fontSize: '0.9em', lineHeight: '1.5em' }">
+        {{ stripHtml(comment.content) }}
+      </text>
+    </view>
+
+    <!-- Toggle children -->
+    <view v-if="comment.comments && comment.comments.length">
+      <view
+        :style="{
+          backgroundColor: open ? 'transparent' : '#fffbf2',
+          borderRadius: '4px',
+          padding: open ? '0' : '0.3em 0.5em',
+          alignSelf: 'flex-start',
+          marginBottom: open ? '0' : '0.5em',
+        }"
+        @tap="open = !open"
+      >
+        <text :style="{ color: '#222', fontSize: '0.9em' }">
+          {{
+            open
+              ? '[-]'
+              : '[+] ' + pluralize(comment.comments.length, 'reply', 'replies') + ' collapsed'
+          }}
+        </text>
+      </view>
+    </view>
+
+    <!-- Nested comments -->
+    <template v-if="open && comment.comments">
+      <Comment
+        v-for="child in comment.comments"
+        :key="child.id"
+        :comment="child"
+        :depth="(depth ?? 0) + 1"
+      />
+    </template>
+  </view>
+</template>

package/src/components/NavLink.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { RouterLink } from 'vue-router';
+
+defineProps<{
+  to: string;
+  label: string;
+}>();
+</script>
+
+<template>
+  <RouterLink :to="to" custom v-slot="{ navigate, isActive }">
+    <view
+      :style="{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }"
+    >
+      <text
+        @tap="navigate"
+        :style="{
+          color: '#fff',
+          fontSize: '15px',
+          fontWeight: isActive ? '600' : '300',
+          letterSpacing: '0.075em',
+          lineHeight: '24px',
+          marginRight: '1em',
+          whiteSpace: 'nowrap',
+        }"
+      >
+        {{ label }}
+      </text>
+    </view>
+  </RouterLink>
+</template>

package/src/components/NewsItem.vue

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import { useRouter } from 'vue-router';
+import type { FeedItem } from '../api';
+import { toHost, isAbsoluteUrl } from '../utils';
+
+const props = defineProps<{
+  item: FeedItem;
+}>();
+
+const router = useRouter();
+const host = toHost(props.item.url);
+
+function goToItem() {
+  router.push(`/item/${props.item.id}`);
+}
+
+function goToUser() {
+  router.push(`/user/${props.item.user}`);
+}
+</script>
+
+<template>
+  <view
+    class="bg-hn-card flex flex-row border-b border-hn-border"
+    :style="{ padding: '20px 16px 20px 0' }"
+  >
+    <!-- Score: 80px wide, centered -->
+    <view :style="{ width: '80px', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }">
+      <text :style="{ color: '#3eaf7c', fontSize: '1.1em', fontWeight: '700' }">
+        {{ item.points }}
+      </text>
+    </view>
+
+    <!-- Content -->
+    <view class="flex flex-col flex-1">
+      <!-- Title -->
+      <text
+        :style="{ color: '#2e495e', fontSize: '15px', lineHeight: '20px' }"
+        @tap="goToItem"
+      >
+        {{ item.title }}
+      </text>
+
+      <!-- Host -->
+      <text
+        v-if="isAbsoluteUrl(item.url)"
+        :style="{ color: '#595959', fontSize: '0.85em', marginTop: '2px' }"
+      >
+        ({{ host }})
+      </text>
+
+      <!-- Meta line -->
+      <view class="flex flex-row flex-wrap" :style="{ marginTop: '4px', gap: '4px' }">
+        <text v-if="item.type !== 'job'" :style="{ color: '#595959', fontSize: '0.85em' }">
+          by
+        </text>
+        <text
+          v-if="item.type !== 'job'"
+          :style="{ color: '#595959', fontSize: '0.85em', textDecorationLine: 'underline' }"
+          @tap="goToUser"
+        >
+          {{ item.user }}
+        </text>
+        <text :style="{ color: '#595959', fontSize: '0.85em' }">
+          {{ item.time_ago }}
+        </text>
+        <text v-if="item.type !== 'job'" :style="{ color: '#595959', fontSize: '0.85em' }">
+          |
+        </text>
+        <text
+          v-if="item.type !== 'job'"
+          :style="{ color: '#595959', fontSize: '0.85em', textDecorationLine: 'underline' }"
+          @tap="goToItem"
+        >
+          {{ item.comments_count }} comments
+        </text>
+      </view>
+    </view>
+  </view>
+</template>

package/src/components/Spinner.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+defineProps<{
+  show: boolean;
+}>();
+</script>
+
+<template>
+  <view
+    v-if="show"
+    :style="{
+      width: '28px',
+      height: '28px',
+      borderRadius: '14px',
+      borderWidth: '3px',
+      borderColor: '#eee',
+      borderTopColor: '#3eaf7c',
+      animationName: 'spin',
+      animationDuration: '0.8s',
+      animationTimingFunction: 'linear',
+      animationIterationCount: 'infinite',
+    }"
+  />
+</template>
+
+<style>
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+</style>

package/src/index.ts

@@ -0,0 +1,15 @@
+import { createApp } from 'vue-lynx';
+import { createPinia } from 'pinia';
+import { VueQueryPlugin } from '@tanstack/vue-query';
+
+import router from './router';
+import App from './App.vue';
+
+const app = createApp(App);
+app.use(createPinia());
+app.use(VueQueryPlugin);
+app.use(router);
+
+router.push('/');
+
+app.mount();

package/src/pages/FeedList.vue

@@ -0,0 +1,161 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue-lynx';
+import { useRouter } from 'vue-router';
+import { useQuery, useQueryClient, keepPreviousData } from '@tanstack/vue-query';
+import { fetchFeed } from '../api';
+import NewsItem from '../components/NewsItem.vue';
+import Spinner from '../components/Spinner.vue';
+
+const props = defineProps<{
+  feed: string;
+  page: number;
+  maxPage: number;
+}>();
+
+const router = useRouter();
+const queryClient = useQueryClient();
+
+const { data: items, isLoading, isFetching, isError } = useQuery({
+  queryKey: computed(() => ['feed', props.feed, props.page]),
+  queryFn: () => fetchFeed(props.feed, props.page),
+  staleTime: 5 * 60 * 1000,
+  placeholderData: keepPreviousData,
+});
+
+// Track slide direction: "next" slides left, "prev" slides right
+const slideDirection = ref<'slide-left' | 'slide-right'>('slide-left');
+
+// Prefetch adjacent pages + track direction
+watch(
+  () => [props.feed, props.page] as const,
+  ([feed, page], old) => {
+    // Determine slide direction from page change
+    if (old) {
+      const [oldFeed, oldPage] = old;
+      slideDirection.value = (feed !== oldFeed || page >= oldPage) ? 'slide-left' : 'slide-right';
+    }
+
+    if (page < props.maxPage) {
+      queryClient.prefetchQuery({
+        queryKey: ['feed', feed, page + 1],
+        queryFn: () => fetchFeed(feed, page + 1),
+        staleTime: 5 * 60 * 1000,
+      });
+    }
+    if (page > 1) {
+      queryClient.prefetchQuery({
+        queryKey: ['feed', feed, page - 1],
+        queryFn: () => fetchFeed(feed, page - 1),
+        staleTime: 5 * 60 * 1000,
+      });
+    }
+  },
+  { immediate: true },
+);
+
+const hasPrev = computed(() => props.page > 1);
+const hasNext = computed(() => props.page < props.maxPage);
+
+function goPrev() {
+  if (hasPrev.value) {
+    router.push(`/${props.feed}/${props.page - 1}`);
+  }
+}
+
+function goNext() {
+  if (hasNext.value) {
+    router.push(`/${props.feed}/${props.page + 1}`);
+  }
+}
+</script>
+
+<template>
+  <view class="flex flex-col flex-1">
+    <!-- Pagination nav -->
+    <view
+      class="bg-hn-card flex flex-row items-center justify-center border-b border-hn-border"
+      :style="{ padding: '15px 30px', gap: '1em' }"
+    >
+      <text
+        :style="{
+          fontSize: '15px',
+          color: hasPrev ? '#3eaf7c' : '#595959',
+          opacity: hasPrev ? 1 : 0.5,
+        }"
+        @tap="goPrev"
+      >
+        &lt; prev
+      </text>
+      <text :style="{ fontSize: '15px', color: '#2e495e' }">
+        {{ page }}/{{ maxPage }}
+      </text>
+      <text
+        :style="{
+          fontSize: '15px',
+          color: hasNext ? '#3eaf7c' : '#595959',
+          opacity: hasNext ? 1 : 0.5,
+        }"
+        @tap="goNext"
+      >
+        more &gt;
+      </text>
+    </view>
+
+    <!-- Item list -->
+    <scroll-view class="flex-1" scroll-orientation="vertical">
+      <!-- Full loading (no cached data) -->
+      <view v-if="isLoading" class="items-center" :style="{ padding: '40px' }">
+        <Spinner :show="true" />
+      </view>
+
+      <view v-else-if="isError" class="items-center" :style="{ padding: '40px' }">
+        <text :style="{ fontSize: '15px', color: '#e53e3e' }">Failed to load stories.</text>
+      </view>
+
+      <template v-else>
+        <!-- Background refetch indicator -->
+        <view v-if="isFetching && !isLoading" class="items-center" :style="{ paddingTop: '12px' }">
+          <Spinner :show="true" />
+        </view>
+
+        <!-- Slide transition: direction flips based on prev/next -->
+        <Transition :name="slideDirection" mode="out-in" :duration="300">
+          <view class="bg-hn-card" :key="feed + '-' + page" :style="{ marginTop: '10px' }">
+            <NewsItem
+              v-for="item in items"
+              :key="item.id"
+              :item="item"
+            />
+          </view>
+        </Transition>
+      </template>
+    </scroll-view>
+  </view>
+</template>
+
+<style>
+/* Slide left: next page (enter from right, leave to left) */
+.slide-left-enter-active,
+.slide-left-leave-active,
+.slide-right-enter-active,
+.slide-right-leave-active {
+  transition: opacity 300ms cubic-bezier(0.55, 0, 0.1, 1), transform 300ms cubic-bezier(0.55, 0, 0.1, 1);
+}
+.slide-left-enter-from {
+  opacity: 0;
+  transform: translateX(30px);
+}
+.slide-left-leave-to {
+  opacity: 0;
+  transform: translateX(-30px);
+}
+/* Slide right: prev page (enter from left, leave to right) */
+.slide-right-enter-from {
+  opacity: 0;
+  transform: translateX(-30px);
+}
+.slide-right-leave-to {
+  opacity: 0;
+  transform: translateX(30px);
+}
+</style>

package/src/pages/ItemPage.vue

@@ -0,0 +1,109 @@
+<script setup lang="ts">
+import { computed } from 'vue-lynx';
+import { useRoute, useRouter } from 'vue-router';
+import { useQuery } from '@tanstack/vue-query';
+import { fetchItem } from '../api';
+import { toHost, isAbsoluteUrl } from '../utils';
+import Comment from '../components/Comment.vue';
+import Spinner from '../components/Spinner.vue';
+
+const route = useRoute();
+const router = useRouter();
+
+const itemId = computed(() => Number(route.params.id));
+
+const { data: item, isLoading, isError } = useQuery({
+  queryKey: computed(() => ['item', itemId.value]),
+  queryFn: () => fetchItem(itemId.value),
+  staleTime: 60 * 1000,
+});
+
+const host = computed(() => item.value ? toHost(item.value.url) : '');
+
+function goToUser() {
+  if (item.value) {
+    router.push(`/user/${item.value.user}`);
+  }
+}
+
+function goBack() {
+  router.back();
+}
+</script>
+
+<template>
+  <scroll-view class="flex-1" scroll-orientation="vertical">
+    <!-- Loading -->
+    <view v-if="isLoading" class="items-center" :style="{ padding: '40px' }">
+      <Spinner :show="true" />
+    </view>
+
+    <!-- Error -->
+    <view v-else-if="isError" class="items-center" :style="{ padding: '40px' }">
+      <text :style="{ fontSize: '15px', color: '#e53e3e' }">Failed to load item.</text>
+    </view>
+
+    <template v-else-if="item">
+      <!-- Item header card -->
+      <view class="bg-hn-card flex flex-col" :style="{ padding: '1.8em 2em 1em' }">
+        <!-- Back link -->
+        <text
+          :style="{ color: '#3eaf7c', fontSize: '13px', marginBottom: '12px' }"
+          @tap="goBack"
+        >
+          &lt; Back
+        </text>
+
+        <!-- Title: 1.5em like reference h1 -->
+        <text :style="{ color: '#2e495e', fontSize: '1.5em', fontWeight: 'bold', lineHeight: '1.3em' }">
+          {{ item.title }}
+        </text>
+
+        <!-- Host -->
+        <text
+          v-if="isAbsoluteUrl(item.url)"
+          :style="{ color: '#595959', fontSize: '0.85em', marginTop: '4px' }"
+        >
+          {{ host }}
+        </text>
+
+        <!-- Meta -->
+        <view class="flex flex-row flex-wrap" :style="{ marginTop: '8px', gap: '4px' }">
+          <text :style="{ color: '#595959', fontSize: '0.85em' }">
+            {{ item.points }} points | by
+          </text>
+          <text
+            :style="{ color: '#595959', fontSize: '0.85em', textDecorationLine: 'underline' }"
+            @tap="goToUser"
+          >
+            {{ item.user }}
+          </text>
+          <text :style="{ color: '#595959', fontSize: '0.85em' }">
+            {{ item.time_ago }}
+          </text>
+        </view>
+      </view>
+
+      <!-- Comments section -->
+      <view class="bg-hn-card flex flex-col" :style="{ marginTop: '10px', padding: '0 2em 0.5em' }">
+        <!-- Comments header -->
+        <view class="flex flex-row items-center" :style="{ padding: '1em 0', gap: '8px' }">
+          <text :style="{ fontSize: '1.1em', color: '#2e495e' }">
+            {{
+              item.comments && item.comments.length
+                ? item.comments.length + ' comments'
+                : 'No comments yet'
+            }}
+          </text>
+        </view>
+
+        <Comment
+          v-for="comment in item.comments"
+          :key="comment.id"
+          :comment="comment"
+          :depth="0"
+        />
+      </view>
+    </template>
+  </scroll-view>
+</template>