Mikec/visual examples

README.md

@@ -7,6 +7,8 @@
 This Convex component calculates count and sums of values for efficient
 aggregation.
 
+[![Efficient COUNT, SUM, MAX with the Aggregate Component](https://thumbs.video-to-markdown.com/9c06ce06.jpg)](https://youtu.be/YD3nW_PtHWA)
+
 Suppose you have a leaderboard of game scores. These are some operations
 that the Aggregate component makes easy and efficient:
 
@@ -307,9 +309,7 @@ const randomize = new TableAggregate<{
   Key: null;
   DataModel: DataModel;
   TableName: "mytable";
-}>(components.aggregate, {
-  sortKey: (doc) => null,
-});
+}>(components.aggregate, { sortKey: (doc) => null });
 ```
 
 Without sorting, all documents are ordered by their `_id` which is generally
@@ -331,10 +331,10 @@ For this example, imagine you have a table of photo albums.
 ```ts
 // convex/schema.ts
 defineSchema({
-  photos: defineTable({
-    album: v.string(),
-    url: v.string(),
-  }).index("by_album_creation_time", ["album"]),
+  photos: defineTable({ album: v.string(), url: v.string() }).index(
+    "by_album_creation_time",
+    ["album"]
+  ),
 });
 ```
 
@@ -390,10 +390,9 @@ import { DataModel } from "./_generated/dataModel";
 import { DirectAggregate } from "@convex-dev/aggregate";
 // Note the `id` should be unique to be a tie-breaker in case two data points
 // have the same key.
-const aggregate = new DirectAggregate<{
-  Key: number;
-  Id: string;
-}>(components.aggregate);
+const aggregate = new DirectAggregate<{ Key: number; Id: string }>(
+  components.aggregate
+);
 
 // within a mutation, add values to be aggregated
 await aggregate.insert(ctx, { key, id });

example/.gitignore

@@ -1,16 +1,24 @@
-!**/glob-import/dir/node_modules
-.DS_Store
-.idea
-*.cpuprofile
-*.local
+# Logs
+logs
 *.log
-/.vscode/
-/docs/.vitepress/cache
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
 dist
 dist-ssr
-explorations
-node_modules
-playground-temp
-temp
-TODOs.md
-.eslintcache
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

example/README.md

@@ -1,4 +1,11 @@
-# Example app
+# Example App
 
-See convex/config.ts and convex/leaderboard.ts for example usages of the
-Aggregate component.
+## To run the examples
+
+Once you have cloned this repo, **from the root of the repo**:
+
+```bash
+npm run setup
+```
+
+You will need to follow the instructions to setup a Convex project. Once done you should be able to open the example at `http://localhost:5173/`