Skip to content

Commit bc532c3

Browse files
committed
docs first push finished. attempting to run quickstart now
1 parent 7d9a081 commit bc532c3

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

64 files changed

+16033
-4723
lines changed

docs/.gitignore

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
# Dependencies
2+
/node_modules
3+
4+
# Production
5+
/build
6+
7+
# Generated files
8+
.docusaurus
9+
.cache-loader
10+
11+
# Misc
12+
.DS_Store
13+
.env.local
14+
.env.development.local
15+
.env.test.local
16+
.env.production.local
17+
18+
npm-debug.log*
19+
yarn-debug.log*
20+
yarn-error.log*

docs/README.md

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
# Website
2+
3+
This website is built using [Docusaurus](https://docusaurus.io/), a modern static website generator.
4+
5+
### Installation
6+
7+
```
8+
$ yarn
9+
```
10+
11+
### Local Development
12+
13+
```
14+
$ yarn start
15+
```
16+
17+
This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
18+
19+
### Build
20+
21+
```
22+
$ yarn build
23+
```
24+
25+
This command generates static content into the `build` directory and can be served using any static contents hosting service.
26+
27+
### Deployment
28+
29+
Using SSH:
30+
31+
```
32+
$ USE_SSH=true yarn deploy
33+
```
34+
35+
Not using SSH:
36+
37+
```
38+
$ GIT_USER=<Your GitHub username> yarn deploy
39+
```
40+
41+
If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.
Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
---
2+
slug: first-blog-post
3+
title: First Blog Post
4+
authors: [slorber, yangshun]
5+
tags: [hola, docusaurus]
6+
---
7+
8+
Lorem ipsum dolor sit amet...
9+
10+
<!-- truncate -->
11+
12+
...consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
---
2+
slug: long-blog-post
3+
title: Long Blog Post
4+
authors: yangshun
5+
tags: [hello, docusaurus]
6+
---
7+
8+
This is the summary of a very long blog post,
9+
10+
Use a `<!--` `truncate` `-->` comment to limit blog post size in the list view.
11+
12+
<!-- truncate -->
13+
14+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
15+
16+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
17+
18+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
19+
20+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
21+
22+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
23+
24+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
25+
26+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
27+
28+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
29+
30+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
31+
32+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
33+
34+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
35+
36+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
37+
38+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
39+
40+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
41+
42+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
43+
44+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
---
2+
slug: mdx-blog-post
3+
title: MDX Blog Post
4+
authors: [slorber]
5+
tags: [docusaurus]
6+
---
7+
8+
Blog posts support [Docusaurus Markdown features](https://docusaurus.io/docs/markdown-features), such as [MDX](https://mdxjs.com/).
9+
10+
:::tip
11+
12+
Use the power of React to create interactive blog posts.
13+
14+
:::
15+
16+
{/* truncate */}
17+
18+
For example, use JSX to create an interactive button:
19+
20+
```js
21+
<button onClick={() => alert('button clicked!')}>Click me!</button>
22+
```
23+
24+
<button onClick={() => alert('button clicked!')}>Click me!</button>
93.9 KB
Loading
Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
---
2+
slug: welcome
3+
title: Welcome
4+
authors: [slorber, yangshun]
5+
tags: [facebook, hello, docusaurus]
6+
---
7+
8+
[Docusaurus blogging features](https://docusaurus.io/docs/blog) are powered by the [blog plugin](https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-content-blog).
9+
10+
Here are a few tips you might find useful.
11+
12+
<!-- truncate -->
13+
14+
Simply add Markdown files (or folders) to the `blog` directory.
15+
16+
Regular blog authors can be added to `authors.yml`.
17+
18+
The blog post date can be extracted from filenames, such as:
19+
20+
- `2019-05-30-welcome.md`
21+
- `2019-05-30-welcome/index.md`
22+
23+
A blog post folder can be convenient to co-locate blog post images:
24+
25+
![Docusaurus Plushie](./docusaurus-plushie-banner.jpeg)
26+
27+
The blog supports tags as well!
28+
29+
**And if you don't want a blog**: just delete this directory, and use `blog: false` in your Docusaurus config.

docs/blog/authors.yml

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
yangshun:
2+
name: Yangshun Tay
3+
title: Front End Engineer @ Facebook
4+
url: https://github.com/yangshun
5+
image_url: https://github.com/yangshun.png
6+
page: true
7+
socials:
8+
x: yangshunz
9+
github: yangshun
10+
11+
slorber:
12+
name: Sébastien Lorber
13+
title: Docusaurus maintainer
14+
url: https://sebastienlorber.com
15+
image_url: https://github.com/slorber.png
16+
page:
17+
# customize the url of the author page at /blog/authors/<permalink>
18+
permalink: '/all-sebastien-lorber-articles'
19+
socials:
20+
x: sebastienlorber
21+
linkedin: sebastienlorber
22+
github: slorber
23+
newsletter: https://thisweekinreact.com

docs/blog/tags.yml

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
facebook:
2+
label: Facebook
3+
permalink: /facebook
4+
description: Facebook tag description
5+
6+
hello:
7+
label: Hello
8+
permalink: /hello
9+
description: Hello tag description
10+
11+
docusaurus:
12+
label: Docusaurus
13+
permalink: /docusaurus
14+
description: Docusaurus tag description
15+
16+
hola:
17+
label: Hola
18+
permalink: /hola
19+
description: Hola tag description

docs/docs-context.md

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
# Hypergraph Docs Scope
2+
3+
1. What does Hypergraph do, and who is it for?
4+
1. Pablo
5+
1. Hypergraph is a full-stack application framework. It allows developers to build applications where users collaborate around public and private data/information/content. When building with Hypergraph, developers only need to write client-side software - the framework takes care of the infrastructure, including privacy (E2EE) by default and storing public content in an interoperable, interconnected Knowledge Graph.
6+
7+
Hypergraph is for developers that want to build consumer applications, and that care about one or some of the following:
8+
9+
1. Not having to host any infrastructure
10+
2. Having real-time sync of private data across users and user devices
11+
3. Ensuring user privacy is preserved
12+
4. Storing data in public knowledge graphs
13+
5. Building network effects in synergy with other applications, by making them interoperable
14+
15+
This makes Hypergraph particularly suitable for devs working on multiplayer/social/collaborative applications.
16+
17+
2. Nik:
18+
2. What problems does this Hypergraph solve?
19+
1. Pablo:
20+
1. As mentioned above, Hypergraph solves:
21+
1. Real-time sync of private data across users and devices
22+
2. Ensuring privacy while doing so, by applying E2EE everywhere
23+
3. Publishing data to public knowledge graphs
24+
4. Using information from public knowledge graphs
25+
5. All the infrastructure for the above, allowing to build an app writing only client-side software
26+
6. User authentication and access control for data
27+
7. (Once we have sufficient apps and users already on the knowledge graph) Building network effects by reusing the existing data, users and content from other apps on the knowledge graph
28+
2. Nik
29+
3. How do I get started quickly? (Quickstart or Hello World)
30+
1. Pablo:
31+
1. We don’t have this yet… right now it sort of relies on cloning the repo and copying/modifying the example app. I think it would be good to have a tutorial where you start from Chris’ TypeSync app, this generates the scaffolding for you, and then you modify it and run it
32+
2. Nik:
33+
4. What assumptions are we making about developers who are introduced to Hypergraph?
34+
1. Pablo:
35+
1. Probably that they can write React apps (maybe with AI help?) and TypeScript.
36+
2. Nik:
37+
5. What are the core concepts devs need to understand that are new?
38+
1. Pablo:
39+
1. Using the sync server / CRDTs instead of a database for private data. For this they create a schema with the types/models for their app. Users probably don’t need to understand the details about how it works, but know how to store and read private entities and how to define the schema.
40+
2. Knowledge Graphs for public data instead of a DB - this is abstracted away by a “mappings” file, and ideally automated by the TypeSync app. Devs would just need to know that data has to be “published” to live in the public graph, and that they can reuse existing data from there.
41+
3. “Spaces” as the core grouping of users and information. Spaces are both a) a group of people and b) a topic of information/content. Users are invited to spaces to collaborate on both private and public data. Devs can use the underlying concept of a space to build different groups of users (e.g. company, organization, club, community) and also to organize different aspects of the application’s content (e.g. a space for information about each city, a space for information about different kinds of food, etc…)
42+
2. Nik:
43+
6. What are the core concepts that we assume people already know? E.g. a “Framework” or “Inboxes” are known concepts.
44+
1. Pablo:
45+
1. Framework and inboxes are indeed assumed to be known, but there might be particularities of how we implemented Inboxes that could be worth talking about in docs, e.g. the fact that inboxes can either be for an account or for a space
46+
2. Nik:
47+
7. What do you think will be confusing for new developers using this Hypergraph?
48+
1. Pablo:
49+
1. For users that are used to the typical ways of building apps (backend server with a SQL DB, API that is consumed by a frontend) it may take a while to wrap their heads around the fact that there’s “no backend” and “no database” in apps built with Hypergraph. It might be useful to make the analogy that the knowledge graph API and sync server infra replace the “backend” and then the knowledge graph itself and sync server storage replace the “database”.
50+
2. Knowing what types / data on the knowledge graph to reuse vs start from scratch could also be tricky - TypeSync is meant to help with this challenge (and also to encourage as much reuse as possible)
51+
2. Nik:
52+
8. How do I integrate this into my app or system?
53+
1. Pablo:
54+
1. Right now it’s more geared towards new apps or systems… I think for an existing app it could be integrated to add collaboration features, e.g. for apps that are more web3-specific / interacting with smart contracts, it could make sense to describe Hypergraph as adding a “user content / collaboration layer” while keeping the blockchain as the “incentives” layer. Another alternative is if you want to add “privacy features” to an app, you could integrate Hypergraph to solve the end to end encryption.
55+
2. Nik:
56+
9. What are common errors and how do I fix them?
57+
1. Pablo:
58+
1. We don’t know yet…
59+
2. Nik:
60+
10. How is data handled — are there any security or privacy concerns?
61+
1. Pablo:
62+
1. Private data is stored encrypted on the sync servers. Only users that are members of a space can decrypt the data of that space, so the sync server does not have access to private data.
63+
2. Public data is stored on the knowledge graph (IPFS+blockchain). It is public so anyone can read it, but writing is protected by the access control / governance smart contract for each space.
64+
3. (This is WIP) End users will sign up through a “Geo Connect” app, and will be able to give each app permissions to access specific spaces (public or private). Each app will get a set of keys that allow signing/encrypting private data and also publishing public data in those specific spaces. Ideally these keys should never leave the user’s client/browser.
65+
2. Nik:
66+
11. Where can I find more examples, references, or support?
67+
1. Pablo:
68+
1. We don’t have any yet
69+
2. Nik:
70+
12. Key smart contract addresses?
71+
1. Pablo
72+
1. Users are not expected to interact directly with the smart contracts… each space has its own contract though, maybe Byron can point to relevant addresses
73+
2. Nik:
74+
13. How can feedback be shared?
75+
1. Pablo
76+
1. Good question, maybe we could set up a feedback form?
77+
2. Nik:
78+
79+
# Hypergraph Docs Development
80+
81+
1. @Marcus Rein would like to use Docusaurus for these docs (It’s Markdown-first, lightweight, and dev-friendly.)
82+
1. Example [websites](https://docusaurus.io/showcase?tags=favorite) using Docusaurus
83+
2. Should we deploy via GitHub Pages with a custom domain like [docs.ourproject.dev](http://docs.ourproject.dev) or should we use another hosting service?
84+
3. Do we want versioning support now or keep it simple at first?
85+
4. Can we organize the current .md files into sidebar sections by topic (e.g. Identity, Sync, Invites)? Most important topics?
86+
5. Should we auto-deploy on merge to main using GitHub Actions?
87+

0 commit comments

Comments
 (0)