Fix types and clean up some rendering logic (#101)

* Cleaned up a lot, didn't break anything (yet)
* Finish making subpages work

Author: samtstern

frontend/pages/projects/_org/_repo/template.html

@@ -1,12 +1,14 @@
 <projects
   :env="env"
   :page_title="page_title"
-  :config="config"
   :header="header"
   :is_subpage="is_subpage"
   :not_found="not_found"
   :found="found"
   :sections="sections"
   :subheader_tabs="subheader_tabs"
-  :sidebar="sidebar">
+  :sidebar="sidebar",
+  :related_repos="related_repos",
+  :info="info",
+  :timestamps="timestamps">
 </projects>

frontend/src/components/Homepage/index.ts

@@ -22,17 +22,27 @@ import HeaderBar from "../HeaderBar";
 import { pickLogoLetter, daysAgo } from "../../utils";
 
 import { Util } from "../../../../shared/util";
-import { RepoRelease } from "../../../../shared/types";
-import { Config } from "../../types/config";
+import { RepoRelease, StoredProjectConfig } from "../../../../shared/types";
 
 type Category = {
   title: string;
   platform: string;
   icon: string;
-  projects: Config[];
-  featured: Config[];
+  projects: ProjectInfo[];
+  featured: ProjectInfo[];
 };
 
+type ProjectInfo = {
+  org: string;
+  repo: string;
+
+  name: string;
+  description: string;
+
+  letter: string;
+  color: string;
+}
+
 const COLORS = [
   "#039BE5",
   "#673AB7",
@@ -155,26 +165,36 @@ export default class Homepage extends Vue {
 
       snapshot.docs.forEach(
         (doc: firebase.firestore.QueryDocumentSnapshot, docIndex: number) => {
-          const config = doc.data() as Config;
-          config.letter = pickLogoLetter(config.name);
-          config.color = COLORS[(docIndex + categoryIndex) % COLORS.length];
+          const config = doc.data() as StoredProjectConfig;
+
+          const letter = pickLogoLetter(config.name);
+          const color = COLORS[(docIndex + categoryIndex) % COLORS.length];
 
           const parsedId = Util.parseProjectId(doc.id);
-          config.org = parsedId.owner;
-          config.repo = parsedId.repo;
+          const org = parsedId.owner;
+          const repo = parsedId.repo;
 
           const words = config.description.split(" ");
           let sentence = words.slice(0, 10).join(" ");
           if (words.length > 10) {
             sentence += "...";
           }
-          config.description = sentence;
+          const description = sentence;
+
+          const catProj: ProjectInfo = {
+            name: config.name,
+            description,
+            letter,
+            color,
+            org,
+            repo
+          }
 
           if (category.featured.length < 6) {
-            category.featured.push(config);
+            category.featured.push(catProj);
           }
 
-          category.projects.push(config);
+          category.projects.push(catProj);
         }
       );
     }

frontend/src/components/Homepage/template.html

@@ -65,6 +65,7 @@ <h1>Firebase ❤️ Open Source</h1>
               </a>
             </div>
             <div class="projects">
+              <!-- TODO: This is gnarly, move more of this to JS -->
               <div class="project" v-for="project in ($refs.header && $refs.header.subheader_tab_selection == 'all')? category.featured : category.projects">
 
                 <div class="grid">