Joining the Social Network

PreviousGetting Started with Beaker NextWhy use Beaker?

Last updated 4 years ago

Was this helpful?

Joining the Social Network

Beaker includes a social network of personal websites. We call these websites the Your profile drive acts as your personal space and your identity on the network. It's also used by applications to publish your content.

Every user has a "Profile Hyperdrive" which represents them on the network. .

In this guide, we're going to personalize your profile drive, find some other users to add to your address book, get you listed in Beaker's User Directory, and say hello on your social media feed.

Customizing your profile drive

During Beaker's setup, you filled out a name, picture, and bio for your profile. You can visit your profile drive by clicking your picture at the top right of the browser.

You will find your profile drive is very plain. That's because we want you to build it! (Frankly it was a cost-cutting measure but don't tell anyone.)

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="icon" type="image/png" sizes="32x32" href="/thumb">
  </head>
  <body>
    <main>
      <header>
        <img src="/thumb">
        <h1>Your Name</h1>
      </header>
      <p>Your Bio</p>
    </main>
  </body>
  <style>
    body {
      margin: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, Cantarell, "Oxygen Sans", "Helvetica Neue", sans-serif;
    }
    main {
      margin: 0 auto;
      padding: 20px;
      box-sizing: border-box;
      max-width: 800px;
    }
    header {
      display: flex;
      align-items: center;
      height: 80px;
    }
    header img {
      border-radius: 4px;
      height: 80px;
      margin-right: 20px;
    }
  </style>
</html>

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="icon" type="image/png" sizes="32x32" href="/thumb">
  </head>
  <body>
    <main>
      <header>
        <img src="/thumb">
        <h1>Your Name</h1>
      </header>
      <p>Your Bio</p>
      <button id="addContact">Add to Address Book</button>
    </main>
  </body>
  <script>
    addContact.onclick = function () {
      beaker.contacts.requestAddContact(location.toString())
    }
  </script>
  <style>
    body {
      margin: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, Cantarell, "Oxygen Sans", "Helvetica Neue", sans-serif;
    }
    main {
      margin: 0 auto;
      padding: 20px;
      box-sizing: border-box;
      max-width: 800px;
    }
    header {
      display: flex;
      align-items: center;
      height: 80px;
    }
    header img {
      border-radius: 4px;
      height: 80px;
      margin-right: 20px;
    }
  </style>
</html>

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="icon" type="image/png" sizes="32x32" href="/thumb">
  </head>
  <body>
    <main>
      <header>
        <img src="/thumb">
        <h1 id="title"></h1>
      </header>
      <p id="description"></p>
      <button id="addContact">Add to Address Book</button>
    </main>
  </body>
  <script>
    addContact.onclick = function () {
      beaker.contacts.requestAddContact(location.toString())
    }
    async function setup () {
      var info = await beaker.hyperdrive.getInfo()
      title.textContent = info.title
      description.textContent = info.description
    }
    setup()
  </script>
  <style>
    body {
      margin: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, Cantarell, "Oxygen Sans", "Helvetica Neue", sans-serif;
    }
    main {
      margin: 0 auto;
      padding: 20px;
      box-sizing: border-box;
      max-width: 800px;
    }
    header {
      display: flex;
      align-items: center;
      height: 80px;
    }
    header img {
      border-radius: 4px;
      height: 80px;
      margin-right: 20px;
    }
  </style>
</html>

Finding other users

Currently, the directory uses Twitter usernames to list profile drives, so you can find people by looking up their Twitter handle. (We'll add more ways to list drives soon!)

You can visit the profiles by clicking on their names. If you find somebody you want to follow, click on the "Add to Address Book" button next to their name.

Adding yourself to the user directory

To add yourself to the directory, click "Sign in via Twitter." You'll be directed to sign in and authorize our directory to see your Twitter profile. (Again: we'll add more ways to sign in soon!)

After you've signed in, click "Add Your Listing." You'll be prompted to select your profile drive. Do that and your profile will be added!

Say hello on your feed

This feed app will be another hyperdrive which reads and writes posts from your profile drive. It lives separately from your profile.

Visit the "Blahbity Blog" app at this URL:

hyper://a8e9bd0f4df60ed5246a1b1f53d51a1feaeb1315266f769ac218436f12fda830/

You'll see the following screen:

After you select your profile, you'll see posts from people in your address book. Any posts you create will be written to your profile drive under the /microblog folder. Posts are Markdown by default (.md) but you can posts .txt, HTML, images, video, and audio. (The HTML goes in an <iframe> just to be safe.)

You're now hooked in!

What next?

PreviousGetting Started with Beaker NextWhy use Beaker?

Last updated 4 years ago

Was this helpful?