@vue-lynx-example/hackernews-css 0.2.1

package/src/App.vue

@@ -0,0 +1,164 @@
+<script setup lang="ts">
+import { computed } from 'vue-lynx';
+import { RouterView, useRoute, useRouter } from 'vue-router';
+import { validFeeds } from './api';
+import NavLink from './components/NavLink.vue';
+import { openExternalUrl } from './utils';
+import logoUrl from './assets/lynx-logo.png';
+
+const router = useRouter();
+const route = useRoute();
+
+const feedKeys = Object.keys(validFeeds);
+const activeFeed = computed(() =>
+  route.name === 'feed-page' && typeof route.params.feed === 'string'
+    ? route.params.feed
+    : '',
+);
+const transitionKey = computed(
+  () => activeFeed.value || String(route.name ?? 'route'),
+);
+
+function goHome() {
+  router.push('/');
+}
+
+function openVueReference() {
+  openExternalUrl('https://github.com/Huxpro/vue-lynx');
+}
+</script>
+
+<template>
+  <page class="page">
+    <view class="header">
+      <view class="inner">
+        <view class="logo" @tap="goHome">
+          <image class="logo-image" :src="logoUrl" resize="cover" />
+        </view>
+
+        <NavLink
+          v-for="key in feedKeys"
+          :key="key"
+          :to="`/${key}`"
+          :label="validFeeds[key].title"
+          :active="activeFeed === key"
+        />
+
+        <text class="github" @tap="openVueReference">Built with VueLynx</text>
+      </view>
+    </view>
+
+    <view class="route-shell">
+      <RouterView v-slot="{ Component }">
+        <Transition name="fade" mode="out-in" :duration="200">
+          <component :is="Component" :key="transitionKey" />
+        </Transition>
+      </RouterView>
+    </view>
+  </page>
+</template>
+
+<style lang="scss">
+.page {
+  height: 100%;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
+    Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  font-size: 15px;
+  background-color: #f2f3f5;
+  color: #2e495e;
+}
+
+.header {
+  background-color: #3eaf7c;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 999;
+  height: 55px;
+
+  .inner {
+    max-width: 800px;
+    box-sizing: border-box;
+    margin: 0 auto;
+    padding: 15px 5px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+
+  .nav-link,
+  .github {
+    color: #fff;
+    line-height: 24px;
+    transition: color 0.15s ease;
+    font-weight: 300;
+    letter-spacing: 0.075em;
+    margin-right: 1.8em;
+    white-space: nowrap;
+  }
+
+  .nav-link.router-link-active {
+    font-weight: 600;
+  }
+
+  .github {
+    font-size: 0.9em;
+    margin-left: auto;
+    margin-right: 0;
+  }
+}
+
+.route-shell {
+  padding-top: 55px;
+}
+
+.logo {
+  width: 26px;
+  height: 26px;
+  margin-right: 12px;
+  border-width: 1px;
+  border-color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.logo-image {
+  width: 24px;
+  height: 24px;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: all 0.2s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+@media (max-width: 860px) {
+  .header .inner {
+    padding: 15px 30px;
+  }
+}
+
+@media (max-width: 600px) {
+  .header {
+    .inner {
+      padding: 15px;
+    }
+
+    .nav-link {
+      margin-right: 1em;
+    }
+
+    .github {
+      display: none;
+    }
+  }
+}
+</style>

package/src/api.ts

@@ -0,0 +1,88 @@
+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> {
+  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,107 @@
+<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;
+}>();
+
+const router = useRouter();
+const open = ref(true);
+
+function goToUser(userId: string) {
+  router.push(`/user/${userId}`);
+}
+</script>
+
+<template>
+  <view v-if="comment && comment.user" class="comment">
+    <view class="by">
+      <text class="by-link" @tap="goToUser(comment.user)">{{ comment.user }}</text>
+      <text>{{ comment.time_ago }}</text>
+    </view>
+
+    <text class="text">{{ stripHtml(comment.content) }}</text>
+
+    <view
+      v-if="comment.comments && comment.comments.length"
+      class="toggle"
+      :class="{ open }"
+      @tap="open = !open"
+    >
+      <text class="toggle-label">
+        {{
+          open
+            ? '[-]'
+            : '[+] ' + pluralize(comment.comments.length, 'reply', 'replies') + ' collapsed'
+        }}
+      </text>
+    </view>
+
+    <view v-if="open && comment.comments && comment.comments.length" class="comment-children">
+      <Comment
+        v-for="childComment in comment.comments"
+        :key="childComment.id"
+        :comment="childComment"
+      />
+    </view>
+  </view>
+</template>
+
+<style lang="scss">
+.comment-children {
+  .comment-children {
+    margin-left: 1.5em;
+  }
+}
+
+.comment {
+  border-top: 1px solid #eee;
+  position: relative;
+
+  .by,
+  .text,
+  .toggle {
+    font-size: 0.9em;
+    margin: 1em 0;
+  }
+
+  .by {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    color: #222;
+    gap: 0.4em;
+  }
+
+  .by-link {
+    color: #222;
+    text-decoration: underline;
+  }
+
+  .text {
+    overflow-wrap: break-word;
+    white-space: pre-wrap;
+    line-height: 1.4em;
+  }
+
+  .toggle {
+    background-color: #fffbf2;
+    padding: 0.3em 0.5em;
+    border-radius: 4px;
+    align-self: flex-start;
+
+    &.open {
+      padding: 0;
+      background-color: transparent;
+      margin-bottom: -0.5em;
+    }
+  }
+
+  .toggle-label {
+    color: #222;
+  }
+}
+</style>

package/src/components/NavLink.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { RouterLink } from 'vue-router';
+
+defineProps<{
+  to: string;
+  label: string;
+  active?: boolean;
+}>();
+</script>
+
+<template>
+  <RouterLink :to="to" custom v-slot="{ navigate }">
+    <text
+      class="nav-link"
+      :class="{ 'router-link-active': active }"
+      @tap="navigate"
+    >
+      {{ label }}
+    </text>
+  </RouterLink>
+</template>

package/src/components/NewsItem.vue

@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import { useRouter } from 'vue-router';
+import type { FeedItem } from '../api';
+import { isAbsoluteUrl, openExternalUrl, toHost } from '../utils';
+
+const props = defineProps<{
+  item: FeedItem;
+}>();
+
+const router = useRouter();
+const itemUrl = toHost(props.item.url);
+
+function goToItem() {
+  router.push(`/item/${props.item.id}`);
+}
+
+function goToUser() {
+  router.push(`/user/${props.item.user}`);
+}
+
+function handleTitleTap() {
+  if (isAbsoluteUrl(props.item.url)) {
+    openExternalUrl(props.item.url);
+    return;
+  }
+
+  goToItem();
+}
+</script>
+
+<template>
+  <view class="news-item">
+    <text class="score">{{ item.points }}</text>
+
+    <view class="title">
+      <text class="news-link" @tap="handleTitleTap">{{ item.title }}</text>
+      <text v-if="isAbsoluteUrl(item.url)" class="host">({{ itemUrl }})</text>
+    </view>
+
+    <view class="meta">
+      <text v-if="item.type !== 'job'">by </text>
+      <text v-if="item.type !== 'job'" class="meta-link" @tap="goToUser">
+        {{ item.user }}
+      </text>
+      <text class="time">{{ item.time_ago }}</text>
+      <text v-if="item.type !== 'job'">|</text>
+      <text v-if="item.type !== 'job'" class="meta-link" @tap="goToItem">
+        {{ item.comments_count }} comments
+      </text>
+    </view>
+  </view>
+</template>
+
+<style lang="scss">
+.news-item {
+  background-color: #fff;
+  padding: 20px 30px 20px 80px;
+  border-bottom: 1px solid #eee;
+  position: relative;
+  line-height: 20px;
+
+  .title {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 0.25em;
+  }
+
+  .news-link {
+    color: #2e495e;
+  }
+
+  .score {
+    color: #3eaf7c;
+    font-size: 1.1em;
+    font-weight: 700;
+    position: absolute;
+    top: 50%;
+    left: 0;
+    width: 80px;
+    text-align: center;
+    margin-top: -10px;
+  }
+
+  .meta,
+  .host,
+  .meta-link {
+    font-size: 0.85em;
+    color: #595959;
+  }
+
+  .meta {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 0.35em;
+    margin-top: 4px;
+  }
+
+  .meta-link {
+    text-decoration: underline;
+  }
+}
+</style>

package/src/components/Spinner.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+defineProps<{
+  show: boolean;
+}>();
+</script>
+
+<template>
+  <view v-if="show" class="spinner" />
+</template>
+
+<style lang="scss">
+.spinner {
+  width: 28px;
+  height: 28px;
+  border-radius: 14px;
+  border-width: 3px;
+  border-style: solid;
+  border-color: #eee;
+  border-top-color: #3eaf7c;
+  animation: spin 0.8s linear infinite;
+}
+
+@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();