feat: add podlove page (#1159)

- adds podlove page
- adds webvtt parser

apps/docs/package.json

@@ -14,8 +14,8 @@
     "@podlove/subscribe-button": "workspace:*",
     "@podlove/types": "workspace:*",
     "@podlove/utils": "workspace:*",
-    "farbraum": "0.1.4",
-    "vue": "3.2.41"
+    "farbraum": "0.2.1",
+    "vue": "3.4.31"
   },
   "devDependencies": {
     "@histoire/app": "0.16.1",

apps/docs/src/stories/components/chapter-progress.story.vue

@@ -28,7 +28,7 @@ const progressColor = ref(persianGreen);
 const ghostColor = ref(sandyBrown);
 const style = ref({
   '--podlove-component--chapter-progress--background': progressColor,
-  '--podlove-component--chapter-progress--ghost-background': ghostColor
+  '--podlove-component--chapter-progress--ghost--background': ghostColor
 });
 </script>
 

apps/page/README.md

@@ -0,0 +1,54 @@
+# Astro Starter Kit: Basics
+
+```sh
+npm create astro@latest -- --template basics
+```
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/basics)
+[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/basics)
+[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/basics/devcontainer.json)
+
+> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
+
+![just-the-basics](https://github.com/withastro/astro/assets/2244813/a0a5533c-a856-4198-8470-2d67b1d7c554)
+
+## 🚀 Project Structure
+
+Inside of your Astro project, you'll see the following folders and files:
+
+```text
+/
+├── public/
+│   └── favicon.svg
+├── src/
+│   ├── components/
+│   │   └── Card.astro
+│   ├── layouts/
+│   │   └── Layout.astro
+│   └── pages/
+│       └── index.astro
+└── package.json
+```
+
+Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
+
+There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
+
+Any static assets, like images, can be placed in the `public/` directory.
+
+## 🧞 Commands
+
+All commands are run from the root of the project, from a terminal:
+
+| Command                   | Action                                           |
+| :------------------------ | :----------------------------------------------- |
+| `npm install`             | Installs dependencies                            |
+| `npm run dev`             | Starts local dev server at `localhost:4321`      |
+| `npm run build`           | Build your production site to `./dist/`          |
+| `npm run preview`         | Preview your build locally, before deploying     |
+| `npm run astro ...`       | Run CLI commands like `astro add`, `astro check` |
+| `npm run astro -- --help` | Get help using the Astro CLI                     |
+
+## 👀 Want to learn more?
+
+Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).

apps/page/astro.config.mjs

@@ -0,0 +1,20 @@
+import { defineConfig } from 'astro/config';
+import cloudflare from '@astrojs/cloudflare';
+// import node from '@astrojs/node';
+import vue from '@astrojs/vue';
+
+import tailwind from '@astrojs/tailwind';
+
+// https://astro.build/config
+export default defineConfig({
+  output: 'server',
+  // adapter: node({
+  //   mode: 'standalone'
+  // }),
+  adapter: cloudflare({
+    platformProxy: {
+      enabled: true
+    }
+  }),
+  integrations: [vue({ appEntrypoint: '/src/app' }), tailwind()]
+});

apps/page/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@podlove/page",
+  "type": "module",
+  "version": "0.0.1",
+  "scripts": {
+    "serve": "astro dev",
+    "build": "astro check && astro build",
+    "preview": "astro preview",
+    "astro": "astro"
+  },
+  "dependencies": {
+    "@podlove/player-sagas": "workspace:*",
+    "@podlove/utils": "workspace:*",
+    "@podlove/player-actions": "workspace:*",
+    "@podlove/player-state": "workspace:*",
+    "@podlove/components": "workspace:*",
+    "@podlove/types": "workspace:*",
+    "@podlove/clients": "workspace:*",
+    "@podlove/webvtt-parser": "workspace:*",
+    "@astrojs/check": "0.8.1",
+    "@astrojs/node": "8.3.2",
+    "@astrojs/tailwind": "5.1.0",
+    "@astrojs/vue": "4.5.0",
+    "@astrojs/cloudflare": "11.0.1",
+    "astro": "4.11.5",
+    "vue": "3.4.31",
+    "fast-xml-parser": "4.3.2",
+    "lodash-es": "4.17.21",
+    "redux": "4.2.1",
+    "redux-vuex": "3.1.2",
+    "redux-actions": "3.0.0",
+    "redux-saga": "1.2.3",
+    "reselect": "4.1.8",
+    "vue-i18n": "9.13.1",
+    "scroll-into-view-if-needed": "3.1.0",
+    "multimatch": "7.0.0",
+    "@m31coding/fuzzy-search": "1.0.1",
+    "color.js": "1.2.0",
+    "farbraum": "0.2.1"
+  },
+  "devDependencies": {
+    "tailwindcss": "3.0.24",
+    "typescript": "5.3.2",
+    "@types/lodash-es": "4.17.12",
+    "@types/redux-actions": "2.6.5"
+  }
+}

apps/page/service-worker.ts

@@ -0,0 +1,104 @@
+/// <reference no-default-lib="true"/>
+/// <reference lib="webworker" />
+const sw: ServiceWorkerGlobalScope & typeof globalThis = self as any;
+
+let CACHE: Cache | null = null;
+
+const getFeed = (): string | null => new URLSearchParams(sw.location.search).get('feed');
+const getCacheKey = (): string | null => new URLSearchParams(sw.location.search).get('cacheKey');
+
+const getCache = async (): Promise<Cache | null> => {
+  if (CACHE) {
+    return CACHE;
+  }
+
+  const feed = getFeed();
+
+  if (!feed) {
+    return null;
+  }
+
+  return caches.open(feed);
+};
+
+const handleRequest = async (request: Request) => {
+  const cache = await getCache();
+  const cacheKey = getCacheKey();
+
+  if (!cache || !cacheKey) {
+    return fetch(request);
+  }
+
+  const cachedUrl = new URL(request.url);
+  cachedUrl.searchParams.set('cacheKey', cacheKey);
+
+  // First try to get the resource from the cache
+  const responseFromCache = await cache.match(cachedUrl.toString());
+
+  if (responseFromCache) {
+    return responseFromCache;
+  }
+
+  // Next try to get the resource from the network
+  const responseFromNetwork = await fetch(cachedUrl.toString(), { mode: 'no-cors' });
+  if (responseFromNetwork.status <= 300) {
+    cache.put(cachedUrl.toString(), responseFromNetwork.clone());
+  }
+
+  return responseFromNetwork;
+};
+
+const getCacheKeyFromRequest = (request: Request) =>
+  new URL(request.url).searchParams.get('cacheKey');
+
+sw.addEventListener('fetch', (event: any) => {
+  const { request } = event;
+  const supportedDestinations = ['image', ''];
+
+  // Bypass navigation requests.
+  if (request.mode === 'navigate') {
+    return;
+  }
+
+  // Opening the DevTools triggers the "only-if-cached" request
+  // that cannot be handled by the worker. Bypass such requests.
+  if (request.cache === 'only-if-cached' && request.mode !== 'same-origin') {
+    return;
+  }
+
+  if (request.method !== 'GET') {
+    return;
+  }
+
+  if (!supportedDestinations.includes(request.destination)) {
+    return;
+  }
+
+  event.respondWith(handleRequest(request));
+});
+
+const cleanCache = async (cacheKey: string) => {
+  const cache = await getCache();
+
+  if (!cache) {
+    return;
+  }
+
+  const requests = await cache.keys();
+
+  requests
+    ?.filter((request) => getCacheKeyFromRequest(request) !== cacheKey)
+    .forEach((request) => {
+      CACHE?.delete(request);
+    });
+};
+
+sw.addEventListener('initialize', async (event: any) => {
+  const cacheKey = getCacheKey();
+
+  if (!cacheKey) {
+    return;
+  }
+
+  event.waitUntil(cleanCache(cacheKey));
+});

apps/page/src/app.ts

@@ -0,0 +1,17 @@
+import { provideStore } from 'redux-vuex';
+import { createI18n } from 'vue-i18n';
+import type { App } from 'vue';
+import { messages, defaultLang, getLanguage } from './i18n';
+import { store } from './logic';
+
+export default (app: App) => {
+  const i18n = createI18n({
+    legacy: false,
+    locale: getLanguage(), // set locale
+    fallbackLocale: defaultLang,
+    messages
+  });
+
+  app.use(i18n);
+  provideStore({ app, store });
+};

apps/page/src/components/Contributor.vue

@@ -0,0 +1,25 @@
+<template>
+  <span class="relative">
+    <div v-if="avatar" class="rounded bg-cover w-full h-full bg-center" :style="{ 'background-image': `url(${avatar})` }" />
+    <user-icon v-else :width="48" :height="48" />
+    <popover v-if="name" >
+      <div class="text-sm text-gray-600 p-1 text-center whitespace-nowrap">
+        <h3 class="font-bold">{{ name }}</h3>
+        <span v-if="role">{{ role }}</span>
+      </div>
+    </popover>
+  </span>
+</template>
+
+<script setup lang="ts">
+import Popover from './Popover.vue';
+import { UserIcon } from '@podlove/components';
+
+defineProps<{
+  name: string;
+  avatar: string;
+  id?: string;
+  role?: string;
+  slug?: string;
+}>();
+</script>

apps/page/src/components/CustomTransition.vue

@@ -0,0 +1,44 @@
+<template>
+  <transition :name="type">
+    <slot />
+  </transition>
+</template>
+
+<script lang="ts" setup>
+defineProps<{
+  type: 'playbar' | 'fade' | 'chapters'
+}>()
+</script>
+
+<style>
+/* Fade */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.5s;
+}
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+/* Playbar */
+.playbar-enter-active,
+.playbar-leave-active {
+  transition: margin 0.5s, opacity 0.5s;
+}
+.playbar-enter-from,
+.playbar-leave-to {
+  opacity: 0;
+  margin-bottom: -70px;
+}
+
+/* Chapters */
+.chapters-enter-active,
+.chapters-leave-active {
+  transition: right 0.5s;
+}
+.chapters-enter-from,
+.chapters-leave-to {
+  right: -1000px !important;
+}
+</style>

apps/page/src/components/HeaderContainer.vue

@@ -0,0 +1,10 @@
+<template>
+  <header
+    class="w-full px-8 pt-20 pb-32 bg-primary-900 flex items-center justify-center relative shadow"
+  >
+    <slot></slot>
+  </header>
+</template>
+
+<script lang="ts" setup>
+</script>