Merge pull request #29 from bzr-sys/content

Update content, add benefits and apps

src/components/FeatureGrid.astro

@@ -0,0 +1,39 @@
+---
+import { getCollection } from "astro:content";
+import LogoOutlineSVG from "./LogoOutlineSVG.astro";
+
+let { collection, limit } = Astro.props;
+const allFeatures = await getCollection(collection);
+const orderedFeatures = allFeatures.sort((a, b) =>
+  a.data.order < b.data.order ? -1 : 1
+);
+if (!limit) {
+  limit = orderedFeatures.length;
+}
+---
+
+<div class="mx-auto grid max-w-screen-2xl gap-4 px-4 py-8 lg:grid-cols-3">
+  {
+    orderedFeatures.map(
+      (f, i) =>
+        i < limit && (
+          <div class="card w-full bg-base-200 shadow-xl">
+            <div class="card-body">
+              <div class="mx-auto">
+                <LogoOutlineSVG width="200px" />
+              </div>
+              <h2 class="card-title">
+                <a href={`/${f.collection}/${f.slug}`}>{f.data.title}</a>
+              </h2>
+              <p>{f.data.summary}</p>
+              <div class="card-actions justify-end">
+                <a href={`/${f.collection}/${f.slug}`} class="btn btn-primary">
+                  Learn More
+                </a>
+              </div>
+            </div>
+          </div>
+        )
+    )
+  }
+</div>

src/components/Header.astro

@@ -6,7 +6,7 @@ import FeaturesLinkItems from "./FeaturesLinkItems.astro";
 
 <header class="sticky top-0 z-10">
   <div class="navbar bg-base-100">
-    <div class="navbar-start">
+    <div class="navbar-start w-4/6">
       <div class="dropdown">
         <div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
           <svg
@@ -27,13 +27,14 @@ import FeaturesLinkItems from "./FeaturesLinkItems.astro";
           class="menu dropdown-content menu-sm z-[1] mt-3 w-52 rounded-box bg-base-100 p-2 shadow"
         >
           <li>
-            <a>Features</a>
+            <a href="/features">Features</a>
             <ul class="p-2">
               <FeaturesLinkItems />
             </ul>
           </li>
+          <li><a href="/benefits">Benefits</a></li>
           <li><a href="/pricing">Pricing</a></li>
-          <li><a href="/docs">Docs</a></li>
+          <li><a href="/apps">Apps</a></li>
           <li><a href="/blog">Blog</a></li>
         </ul>
       </div>
@@ -50,12 +51,13 @@ import FeaturesLinkItems from "./FeaturesLinkItems.astro";
             </ul>
           </details>
         </li>
+        <li><a href="/benefits">Benefits</a></li>
         <li><a href="/pricing">Pricing</a></li>
-        <li><a href="/docs">Docs</a></li>
+        <li><a href="/apps">Apps</a></li>
         <li><a href="/blog">Blog</a></li>
       </ul>
     </div>
-    <div class="navbar-end">
+    <div class="navbar-end  w-2/6">
       <NavBarEnd />
     </div>
   </div>

src/content/apps/chat.md

@@ -0,0 +1,19 @@
+---
+title: Bazaar-Chat
+summary: A simple messaging app that allows you to chat with your friends, colleagues, and contacts.
+order: 1
+---
+
+Not sure what we should write here.
+
+TODO: figure out a template for presenting apps.
+
+## Main features maybe
+
+Just a simple individual chat.
+
+All messages are yours, i.e., if you delete them, they are gone.
+
+## Try for yourself
+
+[Visit the app](https://bzr-sys.github.io/bazaar-chat/)

src/content/docs/docs/guides/javascript.md

@@ -0,0 +1,5 @@
+---
+title: Pure JavaScript
+---
+
+Get started with plain JavaScript, no framework.

src/content/docs/docs/guides/vue.md

@@ -1,5 +1,5 @@
 ---
-title: Vue.js
+title: Vue
 ---
 
-Get started with Bazaar and Vue.js.
+Get started with Bazaar and Vue.js.

src/content/features/permissions.md

@@ -36,9 +36,9 @@ bzr.permissions.granted.subscribe(
       // Granted permission added
     }
     if (oldDoc && newDoc === null) {
-      // Granted permission removed 
+      // Granted permission removed
     }
-  }
+  },
 );
 ```
 
@@ -72,4 +72,4 @@ const permissionTemplate = {
 bzr.permissions.openModal(permissionTemplate);
 ```
 
-TODO screenshot modal.
+TODO screenshot modal.

src/content/features/privacy-and-data-protection.md

@@ -1,7 +1,7 @@
 ---
 title: Privacy and Data Protection
 summary: Bazaar protects user privacy by separating user data from the actual app. This gives users total visibility & control over the data that was provided to any Bazaar app. This also benefits app developers, as they no longer have to handle any regulatory requirements such as GDPR.
-order: 2
+order: 1
 ---
 
 Bazaar is basically an identity provider on steroids. In addition to your identity, it also provides data storage that can be used within the context of an app. This means, a user's data is stored in their Bazaar account instead of an app's backend.

src/content/features/social.md

@@ -0,0 +1,36 @@
+---
+title: Powerful Social Fabric
+summary: Bazaar has social features built-in and any app can use them to create a more meaningful experience.
+order: 4
+---
+
+Bazaar is social from the ground up. It has a built-in notion of users and contacts which is akin to people you add to your address book. Contacts can then be connected, requiring both sides to acknowledged the status. Connected contacts can have extra permissions.
+
+## One social graph for all apps
+
+Contacts and connected contacts can be queried by any app. This allows for meaningful features where you can share and interact with the people you care about. Since Bazaar apps only run in your Browser, your social information is not used for anything other then the apps functionality.
+
+## You are in control
+
+Managing your contacts can only be done via the Bazaar dashboard. This means no Bazaar app can tamper with your social network.
+
+## A simple API
+
+The social API is as simple as it gets.
+
+```ts
+// Get user info for a given handle
+const user = await bzr.social.getUser({ handle: "somebody" });
+// List all contacts
+const contacts = await bzr.social.contacts.list();
+```
+
+All advanced social features like searching for users, adding or connecting a contact can only be done via a modal:
+
+```ts
+bzr.social.openModal((userId) => {
+  /**do something */
+});
+```
+
+TODO screenshot modal.

src/content/features/subscriptions.md

@@ -0,0 +1,23 @@
+---
+title: Subscriptions (Coming Soon)
+summary: Bazaar subscriptions make it trivial to monetize your app or let your user monetize their content.
+order: 8
+---
+
+Bazaar introduces the simplest way to monetize your app and allow your users to monetize their content.
+
+## How It Works
+
+The subscription API is simple. The app developer or users may create plans which other users can subscribe to. Bazaar's permission API then allows users to give access to data based on whether a user has subscribed to a certain plan.
+
+## Benefits for Developers
+
+- **Simple Setup:** The Subscription API is simple to use. There is no need for backend configuration or webhook setup.
+- **Paid App Features:** Easily set up app features that require a subscription. Multiple tiers and plans are possible.
+- **Earn with your users:** Get a cut from all subscriptions in your app, including for plans created by your users.
+
+## Benefits for Users
+
+- **Overview Over Costs:** See & manage all subscriptions from all Bazaar apps you are using in one place.
+- **Earnings Dashboard:** Get an overview of all plans you offer in all your Bazaar apps. See all your earnings across all plans you offer.
+- **Simple Control** End subscriptions anytime, without hoops or endless "are you sure you don't want to stay for a discount" screens.

src/content/features/truly-backendless.md

@@ -1,7 +1,7 @@
 ---
 title: Truly Backendless
 summary: Setting up your Bazaar app is as simple as any Identity Provider. Traditional backendless solutions like Firebase and Supabase, require you to configure the backend's data access policy. In contrast, Bazaar's novel way of scoping data to a user makes any configuration obsolete.
-order: 1
+order: 2
 ---
 
 In recent years, Backend-as-a-service providers such as Firebase and Supabase have become popular. One of their main innovation was to allow direct access to the database from the frontend. This makes the development of apps feel backend-less, as all logic to access data resides in the frontend. However, since all users using the app share the same database, the developer has to set access policies in order to determine which user can access what data. With Bazaar, the backend database is not only scoped to the app, but also to the user. This makes data access policies obsolete.

src/pages/apps.astro

@@ -0,0 +1,12 @@
+---
+import BaseLayout from "../layouts/BaseLayout.astro";
+import BigTitle from "../components/BigTitle.astro";
+import FeatureGrid from "../components/FeatureGrid.astro";
+
+const title = "Highlighted Apps";
+---
+
+<BaseLayout title={title}>
+  <BigTitle>{title}</BigTitle>
+  <FeatureGrid collection="apps" />
+</BaseLayout>

src/pages/apps/[slug].astro

@@ -0,0 +1,21 @@
+---
+import type { GetStaticPaths } from "astro";
+import { getCollection } from "astro:content";
+import PageLayout from "../../layouts/PageLayout.astro";
+
+export const getStaticPaths = (async () => {
+  const entries = await getCollection("apps");
+  return entries.map((entry) => ({
+    params: { slug: entry.slug },
+    props: { entry },
+  }));
+}) satisfies GetStaticPaths;
+
+const { entry } = Astro.props;
+const { Content } = await entry.render();
+---
+
+<PageLayout title={entry.data.title}>
+  <h1>{entry.data.title}</h1>
+  <Content />
+</PageLayout>