App Hosting adapters, fix -staging links (in dev)

config/additional_projects.json

@@ -1,5 +1,11 @@
 {
   "projects": [
+    "FirebaseExtended::firebase-framework-tools::docs::angular",
+    "FirebaseExtended::firebase-framework-tools::docs::nextjs",
+    "FirebaseExtended::firebase-framework-tools::docs::astro",
+    "FirebaseExtended::firebase-framework-tools::docs::nitro",
+    "FirebaseExtended::firebase-framework-tools::docs::nuxt",
+    "angular::angularfire2",
     "angular::angularfire2",
     "googlesamples::easypermissions",
     "tylermcginnis::re-base",

firebase.json

@@ -13,7 +13,7 @@
       },
       {
         "source": "**",
-        "destination": "/404.html"
+        "destination": "/index.html"
       }
     ]
   },

frontend/components/HeaderBar.vue

@@ -15,7 +15,11 @@
               to="/"
               class="logo"
             >
-              <img src="@/assets/img/firebase-icon.svg" width="32" height="32">
+              <img
+                src="@/assets/img/firebase-icon.svg"
+                width="32"
+                height="32"
+              >
               <span><strong>Firebase</strong> Open Source</span>
             </NuxtLink>
           </div>

frontend/components/HomePage.vue

@@ -61,6 +61,7 @@ const subheaderTabs = [
   { title: 'Web', href: '/platform/web' },
   { title: 'Admin', href: '/platform/admin' },
   { title: 'Games', href: '/platform/games' },
+  { title: 'App Hosting', href: '/platform/app_hosting' },
 ] as const
 
 const {

frontend/components/Project/Detail.vue

@@ -98,9 +98,8 @@ const info = {
   stars: projectConfig.stars,
 }
 
-const projectPath = `/projects/${org}/${repo}`.toLowerCase()
-
 const isStaging = env === Env.STAGING
+const projectPath = `/projects${isStaging ? '-staging' : ''}/${org}/${repo}`.toLowerCase()
 
 function getSubheaderTabs() {
   const tabs = [

frontend/components/SearchInput.vue

@@ -1,10 +1,26 @@
 <template>
   <span ref="search">
-    <button type="button" aria-label="Search (Command+K)" class="DocSearch DocSearch-Button">
+    <button
+      type="button"
+      aria-label="Search (Command+K)"
+      class="DocSearch DocSearch-Button"
+    >
       <span class="DocSearch-Button-Container">
-        <svg width="20" height="20" viewBox="0 0 20 20" aria-hidden="true" class="DocSearch-Search-Icon">
-          <path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
-          </path>
+        <svg
+          width="20"
+          height="20"
+          viewBox="0 0 20 20"
+          aria-hidden="true"
+          class="DocSearch-Search-Icon"
+        >
+          <path
+            d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z"
+            stroke="currentColor"
+            fill="none"
+            fill-rule="evenodd"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
         </svg>
         <span class="DocSearch-Button-Placeholder">Search</span>
       </span>
@@ -19,7 +35,7 @@
 <script setup lang="ts">
 import docsearch from '@docsearch/js'
 
-const search = ref("search");
+const search = ref('search')
 
 onMounted(() => {
   docsearch({
@@ -29,9 +45,9 @@ onMounted(() => {
     indexName: 'firebaseopensource',
     placeholder: 'Find a project',
   })
-});
+})
 </script>
 
 <style lang="scss">
 @use "../node_modules/@docsearch/css/dist/style.scss";
-</style>
+</style>

frontend/components/WelcomeCard.vue

@@ -8,7 +8,11 @@
       class="content welcomeCard"
     >
       <div class="image">
-        <img src="@/assets/img/firebase-github.png" width="213" height="160">
+        <img
+          src="@/assets/img/firebase-github.png"
+          width="213"
+          height="160"
+        >
       </div>
       <div class="body">
         <h1>Firebase ❤️ Open Source</h1>

frontend/nuxt.config.ts

@@ -35,11 +35,11 @@ export default async () => {
           type: 'image/x-icon',
           href: '/favicon.ico',
         }, {
-          rel: "shortcut icon",
-          href: "https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/firebase/images/favicon.png",
+          rel: 'shortcut icon',
+          href: 'https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/firebase/images/favicon.png',
         }, {
-          rel: "apple-touch-icon",
-          href: "https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/firebase/images/touchicon-180.png",
+          rel: 'apple-touch-icon',
+          href: 'https://www.gstatic.com/devrel-devsite/prod/v38a693baeb774512feb42f10aac8f755d8791ed41119b5be7a531f8e16f8279f/firebase/images/touchicon-180.png',
         }, {
           rel: 'preconnect',
           href: 'https://www.google-analytics.com',
@@ -62,8 +62,8 @@ gtag('config', 'UA-110728272-1');`,
           name: 'viewport',
           content: 'width=device-width, initial-scale=1',
         }, {
-          content: "https://firebase.google.com/images/social.png",
-          name: "image"
+          content: 'https://firebase.google.com/images/social.png',
+          name: 'image',
         }, {
           hid: 'description',
           name: 'description',

frontend/pages/projects/[org]/[repo]/[...parts].vue

@@ -10,18 +10,41 @@
 </template>
 
 <script setup lang="ts">
+definePageMeta({
+  alias: ['/projects-staging/:org/:repo/:parts*'],
+})
+
 const route = useRoute('projects-org-repo-parts')
 const org = route.params.org
 const repo = route.params.repo
-const subpageId = route.params.parts!.join('::')
+const subpageId = route.params.parts?.join?.('::')
 
 const id = [org, repo].join('::')
 
 const env = route.path.includes('-staging') ? Env.STAGING : Env.PROD
+const isStaging = env === Env.STAGING
+
+if (isStaging) {
+  useHead({
+    meta: [
+      { 'http-equiv': 'Cache-Control', 'content': 'no-store' },
+      { name: 'robots', content: 'noindex, nofollow' },
+    ],
+  })
+  onMounted(() => {
+    refreshConfig()
+    refreshContent()
+  })
+}
 
-const [{ data: config }, { data: content }] = await Promise.all([
-  useAsyncData(`projects/${org}/${repo}`, () => getProjectConfig(id, env)),
-  useAsyncData(`projects/${org}/${repo}/${route.params.parts!.join('/')}`, () => getSubpage(id, env, subpageId)),
+const [
+  { data: config, refresh: refreshConfig },
+  { data: content, refresh: refreshContent },
+] = await Promise.all([
+  useAsyncData(`projects${isStaging ? '-staging' : ''}/${org}/${repo}`, () => getProjectConfig(id, env)),
+  useAsyncData(`projects${isStaging ? '-staging' : ''}/${org}/${repo}/${subpageId || ':README'}`, () =>
+    subpageId ? getSubpage(id, env, subpageId) : getProjectContent(id, env),
+  ),
 ])
 
 let pageTitle = ''
@@ -31,6 +54,7 @@ if (config.value && content.value) {
   pageTitle = calculatePageTitle(content.value, config.value, repo)
 }
 else {
+  // TODO do something better
   redirectTo = `http://github.com/${org}/${repo}`
   navigateTo(redirectTo, { external: true })
 }

frontend/utils/db.ts

@@ -79,6 +79,13 @@ export class Util {
 
 // Categories used for the subheader
 const ALL_CATEGORIES = [
+  {
+    title: 'App Hosting',
+    icon: 'web',
+    platform: 'app_hosting',
+    projects: [],
+    featured: [],
+  },
   {
     title: 'Android',
     icon: 'android',

functions/src/index.ts

@@ -42,23 +42,29 @@ const DEFAULT_PARAMS: GetParams = {
 exports.stageProject = functions
   .runWith(RUNTIME_OPTS)
   .https.onRequest(async (request, response) => {
-    const org = request.params.org;
-    const repo = request.params.repo;
-    const branch = request.params.branch || "master";
-    console.log(`stageProject(${org}, ${repo}, ${branch})`);
+    const org = request.query.org as string;
+    const repo = request.query.repo as string;
+    const branch = (request.query.branch as string | undefined) || "master";
+    const path = request.query.path as string | undefined;
+    console.log(`stageProject(${org}, ${repo}, ${branch}, ${path || "/"})`);
 
     const p = new Project({
       env: Env.STAGING,
       branch
     });
 
-    const id = Util.normalizeId(`${org}::${repo}`);
+    const pathParts = path?.split("/");
+    const id = Util.normalizeId(
+      `${org}::${repo}${pathParts ? "::" + pathParts.join("::") : ""}`
+    );
     try {
       await p.recursiveStoreProject(id);
       response
         .status(200)
         .send(
-          `Visit https://firebaseopensource.com/projects-staging/${org}/${repo}`
+          `Visit https://firebaseopensource.com/projects-staging/${org}/${repo}${
+            path ? `::${pathParts.join("::")}` : ""
+          } to see the staged project.\n`
         );
     } catch (e) {
       console.warn(e);

functions/src/project.ts

@@ -28,6 +28,7 @@ import {
 } from "../../shared/types";
 
 import * as admin from "firebase-admin";
+import { Timestamp } from "firebase-admin/firestore";
 
 const cjson = require("comment-json");
 
@@ -199,7 +200,7 @@ export class Project {
         return this.github
           .getRepoMetadata(idParsed.owner, idParsed.repo)
           .then(meta => {
-            if (meta.description) {
+            if (meta.description && !config.description) {
               config.description = meta.description;
             }
 
@@ -223,7 +224,7 @@ export class Project {
     const docId = Util.normalizeId(id);
 
     // Add server timestamp
-    data.last_fetched = admin.firestore.FieldValue.serverTimestamp();
+    data.last_fetched = Timestamp.now();
 
     // Get path to the config document in the database
     const configPath = Util.configPath(docId, this.params.env);