Add app gallery

Author: marcprux

.github/ISSUE_TEMPLATE/suggest-app.yml

@@ -0,0 +1,113 @@
+name: Suggest an app for the gallery
+description: Tell us about an app built with Skip that's published on both the App Store and the Play Store, and we'll consider adding it to skip.dev/gallery.
+title: "[Gallery] <App name>"
+labels: ["gallery"]
+assignees: []
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Thanks for suggesting an app! The Skip gallery features apps that are
+        **publicly available on both the Apple App Store and the Google Play
+        Store**, and that are built — at least in part — with Skip. Apps that
+        are only on one store, in beta, or unreleased can be suggested here as
+        well; we'll add them once they're live on both stores.
+
+        Please fill in as much as you can. The fields marked required are the
+        minimum we need to evaluate the suggestion.
+
+  - type: input
+    id: app-name
+    attributes:
+      label: App name
+      description: The name as it appears in the App Store / Play Store.
+      placeholder: e.g. "exhivision" or "UHD Radio"
+    validations:
+      required: true
+
+  - type: input
+    id: developer
+    attributes:
+      label: Developer / publisher
+      description: The legal entity or person publishing the app.
+      placeholder: e.g. "Areo Info LLC" or "Kazuya Ueoka"
+    validations:
+      required: true
+
+  - type: input
+    id: app-store-url
+    attributes:
+      label: App Store URL
+      description: Full https://apps.apple.com/... URL.
+      placeholder: https://apps.apple.com/us/app/example/id1234567890
+    validations:
+      required: true
+
+  - type: input
+    id: play-store-url
+    attributes:
+      label: Play Store URL
+      description: Full https://play.google.com/store/apps/details?id=... URL.
+      placeholder: https://play.google.com/store/apps/details?id=com.example.app
+    validations:
+      required: true
+
+  - type: textarea
+    id: description
+    attributes:
+      label: One- or two-sentence description
+      description: What does the app do? We'll use this as a starting point for the gallery card text.
+      placeholder: |
+        e.g. "A free internet radio app streaming high-fidelity xHE-AAC audio. Available on iOS and Android, with a 13 MB Android footprint."
+    validations:
+      required: true
+
+  - type: dropdown
+    id: skip-mode
+    attributes:
+      label: Skip mode
+      description: Which Skip mode does the app use? If you're not sure, choose "I'm not sure".
+      options:
+        - SkipFuse (Swift compiled natively for Android)
+        - SkipLite (Swift transpiled to Kotlin)
+        - SkipBridge (mixed transpiled UI + native model)
+        - partial (Skip used only for shared business logic, native UI on each platform)
+        - I'm not sure
+    validations:
+      required: true
+
+  - type: input
+    id: source-url
+    attributes:
+      label: Source repository (optional)
+      description: If the app is open source, the GitHub / GitLab / etc URL.
+      placeholder: e.g. https://github.com/example/example-app
+
+  - type: textarea
+    id: skip-evidence
+    attributes:
+      label: Evidence the app is built with Skip
+      description: |
+        A link, quote, or screenshot showing the app uses Skip. Examples:
+        - A line in the project's README or Package.swift referencing skip.dev or skiptools
+        - A tweet, blog post, or talk where the developer mentions Skip
+        - Bundle ID conventions (e.g. `*.skip` suffix on the Play Store package)
+        If the app is open source, the README is usually enough.
+    validations:
+      required: true
+
+  - type: input
+    id: developer-website
+    attributes:
+      label: Developer website (optional)
+      description: Marketing site, blog, or company page.
+
+  - type: checkboxes
+    id: confirmations
+    attributes:
+      label: Confirmations
+      options:
+        - label: The app is **currently live** on both the App Store and the Play Store (or I've noted in the description that one or both listings are pending).
+          required: true
+        - label: I have permission to suggest this app for the gallery (developer, employee of the publishing company, or the suggestion comes from a publicly available source like a community announcement).
+          required: true

public/icons/android.svg

@@ -38,6 +38,11 @@ const links: Link[] = [
     value: '/docs/',
     transfer: true,
   },
+  {
+    title: Astro.locals.t('header.link.gallery'),
+    value: '/gallery/',
+    transfer: false,
+  },
   {
     title: Astro.locals.t('header.link.blog'),
     value: '/blog/',

public/icons/arrow_back.svg

@@ -0,0 +1,32 @@
+---
+import type { CollectionEntry } from 'astro:content';
+
+interface Props {
+  app: CollectionEntry<'gallery'>;
+}
+
+const { app } = Astro.props;
+const data = app.data;
+const slug = app.id;
+const initial = data.name.replace(/[^A-Za-z]/, '').slice(0, 1).toUpperCase() || 'S';
+---
+
+<a class="gallery-card" href={`/gallery/${slug}/`}>
+  <div class="gallery-card-iconwrap">
+    {data.icon ? (
+      <img class="gallery-card-icon" src={data.icon} alt="" loading="lazy" />
+    ) : (
+      <div class="gallery-card-icon gallery-card-icon-placeholder">{initial}</div>
+    )}
+    {data.featured && <span class="gallery-card-featured">Featured</span>}
+  </div>
+
+  <h3 class="gallery-card-name">{data.name}</h3>
+  {data.tagline && <p class="gallery-card-tagline">{data.tagline}</p>}
+
+  {data.mode && (
+    <span class="gallery-card-mode" data-mode={data.mode}>
+      {data.mode}
+    </span>
+  )}
+</a>

public/icons/download.svg

@@ -21,6 +21,11 @@ const links: Link[] = [
     value: '/docs/',
     transfer: true,
   },
+  {
+    title: Astro.locals.t('header.link.gallery'),
+    value: '/gallery/',
+    transfer: false,
+  },
   {
     title: Astro.locals.t('header.link.blog'),
     value: '/blog/',

public/icons/phone_iphone.svg

@@ -16,39 +16,69 @@ const docs = defineCollection({
 /* FIXME: doesn't create a talks/ index */
 const talks = defineCollection({
   loader: glob({ pattern: "**/*.md", base: "./src/content/docs/talks" }),
-  //schema: 
+  //schema:
 });
 
 const i18n = defineCollection({
   loader: i18nLoader(),
   schema: i18nSchema({
     extend: z.object({
       'header.link.docs': z.string().optional(),
+      'header.link.gallery': z.string().optional(),
       'header.link.blog': z.string().optional(),
       'header.link.sponsor': z.string().optional(),
       'banner.message': z.string().optional(),
     }),
   }),
 });
 
-/*
-const tour = defineCollection({
-  type: 'content',
+const ratingSchema = z.object({
+  score: z.number().min(0).max(5).optional(),
+  count: z.number().int().nonnegative().optional(),
+  downloads: z.string().optional(),
+}).optional();
+
+const screenshotSchema = z.object({
+  url: z.string().url(),
+  caption: z.string().optional(),
+});
+
+const gallery = defineCollection({
+  loader: glob({ pattern: "*.yaml", base: "./src/content/gallery" }),
   schema: z.object({
-    title: z.string(),
-    duration: z.string(),
-    video: z.string().url(),
-    poster: z.string().url(),
-    yt: z.string().url().optional(),
+    name: z.string(),
+    developer: z.string(),
+    tagline: z.string().optional(),
     description: z.string(),
+    category: z.string().optional(),
+    mode: z.enum(['SkipFuse', 'SkipLite', 'SkipBridge', 'partial']).optional(),
+    featured: z.boolean().default(false),
+    icon: z.string().url().optional(),
+    releaseYear: z.number().int().optional(),
+    tags: z.array(z.string()).default([]),
+    links: z.object({
+      appStore: z.string().url().optional(),
+      playStore: z.string().url().optional(),
+      website: z.string().url().optional(),
+      source: z.string().url().optional(),
+      article: z.string().url().optional(),
+    }).default({}),
+    ratings: z.object({
+      appStore: ratingSchema,
+      playStore: ratingSchema,
+    }).default({}),
+    screenshots: z.object({
+      ios: z.array(screenshotSchema).default([]),
+      android: z.array(screenshotSchema).default([]),
+    }).default({}),
+    available: z.boolean().default(true),
+    notes: z.string().optional(),
   }),
 });
-*/
-
 
 export const collections = {
     docs: docs,
     talks: talks,
     i18n: i18n,
-    //tour: tour,
+    gallery: gallery,
 };