@vue-lynx-example/hackernews-css 0.2.1

package/src/pages/FeedList.vue

@@ -0,0 +1,243 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue-lynx';
+import { useRouter } from 'vue-router';
+import {
+  keepPreviousData,
+  useQuery,
+  useQueryClient,
+} 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 slideDirection = ref<'slide-left' | 'slide-right'>('slide-left');
+
+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,
+});
+
+watch(
+  () => [props.feed, props.page] as const,
+  ([feed, page], oldValue) => {
+    if (oldValue) {
+      const [oldFeed, oldPage] = oldValue;
+      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>
+  <scroll-view class="view feed-view" scroll-orientation="vertical">
+    <view class="news-list-nav">
+      <text class="nav-button" :class="{ disabled: !hasPrev }" @tap="goPrev">
+        &lt; prev
+      </text>
+      <text class="nav-page">{{ page }}/{{ maxPage }}</text>
+      <text class="nav-button" :class="{ disabled: !hasNext }" @tap="goNext">
+        more &gt;
+      </text>
+    </view>
+
+    <view class="feed-content">
+      <view v-if="isLoading" class="status-card">
+        <Spinner :show="true" />
+      </view>
+
+      <view v-else-if="isError" class="status-card">
+        <text class="status-error">Failed to load stories.</text>
+      </view>
+
+      <template v-else>
+        <view v-if="isFetching" class="status-inline">
+          <Spinner :show="true" />
+        </view>
+
+        <Transition :name="slideDirection" mode="out-in" :duration="300">
+          <view :key="`${feed}-${page}`" class="news-list">
+            <TransitionGroup name="item" tag="view" :duration="500">
+              <NewsItem v-for="item in items" :key="item.id" :item="item" />
+            </TransitionGroup>
+          </view>
+        </Transition>
+      </template>
+    </view>
+  </scroll-view>
+</template>
+
+<style lang="scss">
+.feed-view {
+  height: 100%;
+}
+
+.feed-content {
+  padding-top: 56px;
+  padding-bottom: 30px;
+}
+
+.news-list-nav {
+  position: fixed;
+  top: 55px;
+  z-index: 998;
+  left: 0;
+  right: 0;
+  width: 100%;
+  padding: 15px 30px;
+  text-align: center;
+  background-color: #fff;
+  border-radius: 2px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+
+.nav-button {
+  margin: 0 1em;
+  color: #2e495e;
+}
+
+.nav-button.disabled {
+  opacity: 0.8;
+}
+
+.nav-page {
+  color: #2e495e;
+}
+
+.news-list {
+  background-color: #fff;
+  border-radius: 2px;
+  max-width: 800px;
+  margin: 30px auto;
+  width: 100%;
+  transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
+}
+
+.status-card {
+  background-color: #fff;
+  border-radius: 2px;
+  max-width: 800px;
+  margin: 30px auto;
+  padding: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.status-inline {
+  display: flex;
+  justify-content: center;
+  padding-top: 12px;
+}
+
+.status-error {
+  color: #c53030;
+}
+
+.slide-left-enter-active,
+.slide-left-leave-active,
+.slide-right-enter-active,
+.slide-right-leave-active {
+  transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
+}
+
+.slide-left-enter-from,
+.slide-right-leave-to {
+  opacity: 0;
+  transform: translate(30px, 0);
+}
+
+.slide-left-leave-to,
+.slide-right-enter-from {
+  opacity: 0;
+  transform: translate(-30px, 0);
+}
+
+.item-move,
+.item-enter-active,
+.item-leave-active {
+  transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
+}
+
+.item-enter-from {
+  opacity: 0;
+  transform: translate(30px, 0);
+}
+
+.item-leave-to {
+  position: absolute;
+  opacity: 0;
+  transform: translate(30px, 0);
+}
+
+@media (max-width: 860px) {
+  .news-list-nav {
+    max-width: calc(100% - 60px);
+  }
+}
+
+@media (max-width: 600px) {
+  .news-list {
+    margin: 10px auto;
+  }
+
+  .news-list-nav {
+    max-width: calc(100% - 30px);
+    padding: 15px;
+  }
+
+  .status-card {
+    margin: 10px auto;
+  }
+
+  .feed-content {
+    padding-top: 52px;
+  }
+}
+</style>

package/src/pages/ItemPage.vue

@@ -0,0 +1,183 @@
+<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 Comment from '../components/Comment.vue';
+import Spinner from '../components/Spinner.vue';
+import { isAbsoluteUrl, openExternalUrl, toHost } from '../utils';
+
+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 itemUrl = computed(() => (item.value ? toHost(item.value.url) : ''));
+
+function goBack() {
+  router.back();
+}
+
+function goToUser() {
+  if (item.value) {
+    router.push(`/user/${item.value.user}`);
+  }
+}
+
+function openItemLink() {
+  if (item.value && isAbsoluteUrl(item.value.url)) {
+    openExternalUrl(item.value.url);
+  }
+}
+</script>
+
+<template>
+  <scroll-view class="view item-view" scroll-orientation="vertical">
+    <view v-if="isLoading" class="status-card">
+      <Spinner :show="true" />
+    </view>
+
+    <view v-else-if="isError" class="status-card">
+      <text class="status-error">Failed to load item.</text>
+    </view>
+
+    <template v-else-if="item">
+      <view class="item-view-header">
+        <text class="back-link" @tap="goBack">&lt; Back</text>
+
+        <view class="item-title-row">
+          <text class="item-title" @tap="openItemLink">{{ item.title }}</text>
+          <text v-if="isAbsoluteUrl(item.url)" class="host">{{ itemUrl }}</text>
+        </view>
+
+        <view class="meta">
+          <text>{{ item.points }} points | by </text>
+          <text class="meta-link" @tap="goToUser">{{ item.user }}</text>
+          <text> {{ item.time_ago }}</text>
+        </view>
+      </view>
+
+      <view class="item-view-comments">
+        <view class="item-view-comments-header">
+          <text>
+            {{
+              item.comments && item.comments.length
+                ? item.comments.length + ' comments'
+                : 'No comments yet'
+            }}
+          </text>
+        </view>
+
+        <view class="comment-children">
+          <Comment
+            v-for="comment in item.comments"
+            :key="comment.id"
+            :comment="comment"
+          />
+        </view>
+      </view>
+    </template>
+  </scroll-view>
+</template>
+
+<style lang="scss">
+.item-view {
+  height: 100%;
+  padding-bottom: 30px;
+}
+
+.item-view-header {
+  background-color: #fff;
+  padding: 1.8em 2em 1em;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.back-link {
+  color: #3eaf7c;
+  font-size: 0.85em;
+  text-decoration: underline;
+  margin-bottom: 12px;
+}
+
+.item-title-row {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 0.5em;
+}
+
+.item-title {
+  font-size: 1.5em;
+  margin-right: 0.5em;
+}
+
+.item-view-header {
+  .host,
+  .meta,
+  .meta-link {
+    color: #595959;
+  }
+
+  .meta {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    margin-top: 8px;
+  }
+
+  .meta-link {
+    text-decoration: underline;
+  }
+}
+
+.item-view-comments {
+  background-color: #fff;
+  margin-top: 10px;
+  padding: 0 2em 0.5em;
+  max-width: 800px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.item-view-comments-header {
+  margin: 0;
+  font-size: 1.1em;
+  padding: 1em 0;
+  position: relative;
+}
+
+.comment-children {
+  padding: 0;
+  margin: 0;
+}
+
+.status-card {
+  background-color: #fff;
+  margin-top: 30px;
+  padding: 40px;
+  max-width: 800px;
+  margin-left: auto;
+  margin-right: auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.status-error {
+  color: #c53030;
+}
+
+@media (max-width: 600px) {
+  .item-title {
+    font-size: 1.25em;
+  }
+}
+</style>

package/src/pages/UserPage.vue

@@ -0,0 +1,146 @@
+<script setup lang="ts">
+import { computed } from 'vue-lynx';
+import { useRoute, useRouter } from 'vue-router';
+import { useQuery } from '@tanstack/vue-query';
+import { fetchUser } from '../api';
+import Spinner from '../components/Spinner.vue';
+import { openExternalUrl, stripHtml } from '../utils';
+
+const route = useRoute();
+const router = useRouter();
+
+const userId = computed(() => String(route.params.id ?? ''));
+
+const { data: user, isLoading, isError } = useQuery({
+  queryKey: computed(() => ['user', userId.value]),
+  queryFn: () => fetchUser(userId.value),
+  staleTime: 60 * 1000,
+});
+
+function goBack() {
+  router.back();
+}
+
+function openSubmissions() {
+  if (user.value) {
+    openExternalUrl(`https://news.ycombinator.com/submitted?id=${user.value.id}`);
+  }
+}
+
+function openComments() {
+  if (user.value) {
+    openExternalUrl(`https://news.ycombinator.com/threads?id=${user.value.id}`);
+  }
+}
+</script>
+
+<template>
+  <scroll-view class="view page-scroll" scroll-orientation="vertical">
+    <view v-if="isLoading" class="status-card">
+      <Spinner :show="true" />
+    </view>
+
+    <view v-else-if="isError" class="status-card">
+      <text class="status-title">User not found.</text>
+      <text class="back-link" @tap="goBack">&lt; Back</text>
+    </view>
+
+    <view v-else-if="user" class="user-view">
+      <text class="back-link" @tap="goBack">&lt; Back</text>
+      <text class="user-title">User : {{ user.id }}</text>
+
+      <view class="meta">
+        <view class="meta-row">
+          <text class="label">Created:</text>
+          <text>{{ user.created }}</text>
+        </view>
+        <view class="meta-row">
+          <text class="label">Karma:</text>
+          <text>{{ user.karma }}</text>
+        </view>
+      </view>
+
+      <text v-if="user.about" class="about">{{ stripHtml(user.about) }}</text>
+
+      <view class="links">
+        <text class="links-link" @tap="openSubmissions">submissions</text>
+        <text>|</text>
+        <text class="links-link" @tap="openComments">comments</text>
+      </view>
+    </view>
+  </scroll-view>
+</template>
+
+<style lang="scss">
+.page-scroll {
+  height: 100%;
+  padding-bottom: 30px;
+}
+
+.user-view {
+  background-color: #fff;
+  box-sizing: border-box;
+  padding: 2em 3em;
+  margin: 30px auto 0;
+  max-width: 800px;
+}
+
+.user-title {
+  margin: 0;
+  font-size: 1.5em;
+}
+
+.meta {
+  padding: 0;
+  margin-top: 1em;
+}
+
+.meta-row {
+  display: flex;
+  flex-direction: row;
+  margin-bottom: 4px;
+}
+
+.label {
+  display: inline-block;
+  min-width: 4em;
+  color: #595959;
+}
+
+.about {
+  margin: 1em 0;
+  white-space: pre-wrap;
+  line-height: 1.5em;
+}
+
+.links {
+  display: flex;
+  flex-direction: row;
+  gap: 6px;
+}
+
+.links-link {
+  text-decoration: underline;
+}
+
+.back-link {
+  color: #3eaf7c;
+  font-size: 0.85em;
+  text-decoration: underline;
+  margin-bottom: 12px;
+}
+
+.status-card {
+  background-color: #fff;
+  margin: 30px auto 0;
+  max-width: 800px;
+  padding: 2em 3em;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.status-title {
+  font-size: 1.5em;
+}
+</style>

package/src/router.ts

@@ -0,0 +1,37 @@
+import { createRouter, createMemoryHistory } from 'vue-router';
+import { validFeeds } from './api';
+import FeedList from './pages/FeedList.vue';
+import ItemPage from './pages/ItemPage.vue';
+import UserPage from './pages/UserPage.vue';
+
+const router = createRouter({
+  history: createMemoryHistory(),
+  routes: [
+    {
+      path: '/',
+      redirect: '/news',
+    },
+    {
+      path: '/:feed/:page?',
+      name: 'feed-page',
+      component: FeedList,
+      props: (route) => ({
+        feed: route.params.feed as string,
+        page: Number(route.params.page) || 1,
+        maxPage: validFeeds[route.params.feed as string]?.pages ?? 1,
+      }),
+    },
+    {
+      path: '/item/:id',
+      name: 'item-id',
+      component: ItemPage,
+    },
+    {
+      path: '/user/:id',
+      name: 'user-id',
+      component: UserPage,
+    },
+  ],
+});
+
+export default router;

package/src/shims-vue.d.ts

@@ -0,0 +1,5 @@
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue-lynx';
+  const component: DefineComponent;
+  export default component;
+}

package/src/utils.ts

@@ -0,0 +1,55 @@
+export function toHost(url: string): string {
+  if (!url) return '';
+  const host = url.replace(/^https?:\/\//, '').replace(/\/.*$/, '');
+  const parts = host.split('.').slice(-3);
+  if (parts[0] === 'www') parts.shift();
+  return parts.join('.');
+}
+
+export function isAbsoluteUrl(url: string): boolean {
+  return /^https?:\/\//.test(url);
+}
+
+export function pluralize(n: number, singular: string, plural?: string): string {
+  return n === 1 ? `${n} ${singular}` : `${n} ${plural ?? singular + 's'}`;
+}
+
+const entityMap: Record<string, string> = {
+  '&amp;': '&',
+  '&lt;': '<',
+  '&gt;': '>',
+  '&quot;': '"',
+  '&#39;': "'",
+  '&#x27;': "'",
+  '&#x2F;': '/',
+  '&nbsp;': ' ',
+};
+
+export function stripHtml(html: string): string {
+  return html
+    .replace(/<br\s*\/?>/gi, '\n')
+    .replace(/<\/p>\s*<p>/gi, '\n\n')
+    .replace(/<\/li>/gi, '\n')
+    .replace(/<li>/gi, '• ')
+    .replace(/<[^>]*>/g, '')
+    .replace(/&[#\w]+;/g, (m) => entityMap[m] ?? m)
+    .trim();
+}
+
+export function openExternalUrl(url: string): void {
+  if (!url) return;
+
+  const scope = globalThis as typeof globalThis & {
+    open?: (url: string, target?: string) => unknown;
+    location?: { href?: string };
+  };
+
+  if (typeof scope.open === 'function') {
+    scope.open(url, '_blank');
+    return;
+  }
+
+  if (scope.location) {
+    scope.location.href = url;
+  }
+}

package/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": ".",
+    "noEmit": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false
+  },
+  "include": ["src", "lynx.config.ts"]
+}