doc/website: migration to docosaurus v2 (#1384)

* WIP - migrating entgo.io to docosaurus v2 * organizing pages a bit to be better suited for v2 site structure * doc/website: finish migration to docusaurus v2 Co-authored-by: Rotem Tamir <rotemtamir@gmail.com>
2026-05-24 09:31:56 +03:00 · 2021-03-24 21:48:30 +02:00
parent 3773738fd5
commit d9faf21e05
52 changed files with 799 additions and 685 deletions
--- a/doc/md/crud.md
+++ b/doc/md/crud.md
@@ -308,7 +308,7 @@ _, err := client.File.

 Each generated node type has its own type of mutation. For example, all [`User` builders](crud.md#create-an-entity), share
 the same generated `UserMutation` object.
-However, all builder types implement the generic <a target="_blank" href="https://pkg.go.dev/entgo.io/ent?tab=doc#Mutation">`ent.Mutation`<a> interface.
+However, all builder types implement the generic <a target="_blank" href="https://pkg.go.dev/entgo.io/ent?tab=doc#Mutation">`ent.Mutation`</a> interface.

 For example, in order to write a generic code that apply a set of methods on both `ent.UserCreate`
 and `ent.UserUpdate`, use the `UserMutation` object:
--- a/doc/md/eager-load.md
+++ b/doc/md/eager-load.md
@@ -10,7 +10,7 @@ are populated to the `Edges` field in the returned object.

 Let's give an example hows does the API look like for the following schema:

-![er-group-users](https://entgo.io/assets/er_user_pets_groups.png)
+![er-group-users](https://entgo.io/images/assets/er_user_pets_groups.png)



--- a/doc/md/faq.md
+++ b/doc/md/faq.md
@@ -6,16 +6,16 @@ sidebar_label: FAQ

 ## Questions

-[How to create an entity from a struct `T`?](#how-to-create-an-entity-from-a-struct-t) \
-[How to create a struct (or a mutation) level validator?](#how-to-create-a-mutation-level-validator) \
-[How to write an audit-log extension?](#how-to-write-an-audit-log-extension) \
-[How to write custom predicates?](#how-to-write-custom-predicates) \
-[How to add custom predicates to the codegen assets?](#how-to-add-custom-predicates-to-the-codegen-assets) \
-[How to define a network address field in PostgreSQL?](#how-to-define-a-network-address-field-in-postgresql) \
-[How to customize time fields to type `DATETIME` in MySQL?](#how-to-customize-time-fields-to-type-datetime-in-mysql) \
-[How to use a custom generator of IDs?](#how-to-use-a-custom-generator-of-ids) \
-[How to define a spatial data type field in MySQL?](#how-to-define-a-spatial-data-type-field-in-mysql) \
-[How to extend the generated models?](#how-to-extend-the-generated-models) \
+[How to create an entity from a struct `T`?](#how-to-create-an-entity-from-a-struct-t)  
+[How to create a struct (or a mutation) level validator?](#how-to-create-a-mutation-level-validator)  
+[How to write an audit-log extension?](#how-to-write-an-audit-log-extension)  
+[How to write custom predicates?](#how-to-write-custom-predicates)  
+[How to add custom predicates to the codegen assets?](#how-to-add-custom-predicates-to-the-codegen-assets)  
+[How to define a network address field in PostgreSQL?](#how-to-define-a-network-address-field-in-postgresql)  
+[How to customize time fields to type `DATETIME` in MySQL?](#how-to-customize-time-fields-to-type-datetime-in-mysql)  
+[How to use a custom generator of IDs?](#how-to-use-a-custom-generator-of-ids)  
+[How to define a spatial data type field in MySQL?](#how-to-define-a-spatial-data-type-field-in-mysql)  
+[How to extend the generated models?](#how-to-extend-the-generated-models)  
 [How to extend the generated builders?](#how-to-extend-the-generated-builders)

 ## Answers
--- a/doc/md/getting-started.md
+++ b/doc/md/getting-started.md
@@ -15,7 +15,7 @@ and maintain applications with large data-models and sticks with the following p

 <br/>

-![gopher-schema-as-code](https://entgo.io/assets/gopher-schema-as-code.png)
+![gopher-schema-as-code](https://entgo.io/images/assets/gopher-schema-as-code.png)

 ## Installation

@@ -239,7 +239,7 @@ func (Group) Fields() []ent.Field {
 Let's define our first relation. An edge from `User` to `Car` defining that a user
 can **have 1 or more** cars, but a car **has only one** owner (one-to-many relation).

-![er-user-cars](https://entgo.io/assets/re_user_cars.png)
+![er-user-cars](https://entgo.io/images/assets/re_user_cars.png)

 Let's add the `"cars"` edge to the `User` schema, and run `go generate ./ent`:

@@ -331,7 +331,7 @@ Assume we have a `Car` object and we want to get its owner; the user that this c
 For this, we have another type of edge called "inverse edge" that is defined using the `edge.From`
 function.

-![er-cars-owner](https://entgo.io/assets/re_cars_owner.png)
+![er-cars-owner](https://entgo.io/images/assets/re_cars_owner.png)

 The new edge created in the diagram above is translucent, to emphasize that we don't create another
 edge in the database. It's just a back-reference to the real edge (relation).
@@ -392,7 +392,7 @@ func QueryCarUsers(ctx context.Context, a8m *ent.User) error {

 We'll continue our example by creating a M2M (many-to-many) relationship between users and groups.

-![er-group-users](https://entgo.io/assets/re_group_users.png)
+![er-group-users](https://entgo.io/images/assets/re_group_users.png)

 As you can see, each group entity can **have many** users, and a user can **be connected to many** groups;
 a simple "many-to-many" relationship. In the above illustration, the `Group` schema is the owner
@@ -449,7 +449,7 @@ go generate ./ent
 In order to run our first graph traversal, we need to generate some data (nodes and edges, or in other words, 
 entities and relations). Let's create the following graph using the framework:

-![re-graph](https://entgo.io/assets/re_graph_getting_started.png)
+![re-graph](https://entgo.io/images/assets/re_graph_getting_started.png)


 ```go
--- a/doc/md/hooks.md
+++ b/doc/md/hooks.md
@@ -20,11 +20,11 @@ There are 5 types of mutations:
 Each generated node type has its own type of mutation. For example, all [`User` builders](crud.md#create-an-entity), share
 the same generated `UserMutation` object.

-However, all builder types implement the generic <a target="_blank" href="https://pkg.go.dev/entgo.io/ent?tab=doc#Mutation">`ent.Mutation`<a> interface.
+However, all builder types implement the generic <a target="_blank" href="https://pkg.go.dev/entgo.io/ent?tab=doc#Mutation">`ent.Mutation`</a> interface.
 
 ## Hooks

-Hooks are functions that get an <a target="_blank" href="https://pkg.go.dev/entgo.io/ent?tab=doc#Mutator">`ent.Mutator`<a> and return a mutator back.
+Hooks are functions that get an <a target="_blank" href="https://pkg.go.dev/entgo.io/ent?tab=doc#Mutator">`ent.Mutator`</a> and return a mutator back.
 They function as middleware between mutators. It's similar to the popular HTTP middleware pattern.

 ```go
@@ -197,13 +197,15 @@ When using [**schema hooks**](#schema-hooks), there's a chance of a cyclic impor
 and the generated ent package. To avoid this scenario, ent generates an `ent/runtime` package which is responsible
 for registering the schema-hooks at runtime.

-> Users **MUST** import the `ent/runtime` in order to register the schema hooks.
-> The package can be imported in the `main` package (close to where the database driver is imported),
-> or in the package that creates the `ent.Client`.
->
-> ```go
-> import _ "<project>/ent/runtime"
-> ```
+:::important
+Users **MUST** import the `ent/runtime` in order to register the schema hooks.
+The package can be imported in the `main` package (close to where the database driver is imported),
+or in the package that creates the `ent.Client`.
+
+```go
+import _ "<project>/ent/runtime"
+```
+:::

 ## Evaluation order

--- a/doc/md/predicates.md
+++ b/doc/md/predicates.md
@@ -22,7 +22,7 @@ title: Predicates
  - =, !=
  - =, !=, >, <, >=, <= on nested values (JSON path).
  - Contains on nested values (JSON path).
-  - HasKey, Len<P>
+  - HasKey, Len&lt;P>
 - **Optional** fields:
  - IsNil, NotNil

--- a/doc/md/privacy.md
+++ b/doc/md/privacy.md
@@ -5,7 +5,7 @@ title: Privacy

 The `Policy` option in the schema allows configuring privacy policy for queries and mutations of entities in the database.

-![gopher-privacy](https://entgo.io/assets/gopher-privacy-opacity.png)
+![gopher-privacy](https://entgo.io/images/assets/gopher-privacy-opacity.png)

 The main advantage of the privacy layer is that, you write the privacy policy **once** (in the schema), and it is **always**
 evaluated. No matter where queries and mutations are performed in your codebase, it will always go through the privacy layer.
@@ -24,12 +24,12 @@ in the same order they are declared in the schema.
 If all rules are evaluated without returning an error, the evaluation finishes successfully, and the executed operation 
 gets access to the target nodes.

-![privacy-rules](https://entgo.io/assets/permission_1.png)
+![privacy-rules](https://entgo.io/images/assets/permission_1.png)

 However, if one of the evaluated rules returns an error or a `privacy.Deny` decision (see below), the executed operation
 returns an error, and it is cancelled. 

-![privacy-deny](https://entgo.io/assets/permission_2.png)
+![privacy-deny](https://entgo.io/images/assets/permission_2.png)

 ### Privacy Rules

@@ -55,7 +55,7 @@ There are three types of decision that can help you control the privacy rules ev
  
 - `privacy.Skip` - Skip the current rule, and jump to the next privacy rule. This equivalent to returning a `nil` error.

-![privacy-allow](https://entgo.io/assets/permission_3.png)
+![privacy-allow](https://entgo.io/images/assets/permission_3.png)

 Now, that we’ve covered the basic terms, let’s start writing some code.

@@ -107,13 +107,15 @@ func main() {
 }
 ```

-> You should notice that, similar to [schema hooks](hooks.md#hooks-registration), if you use the **`Policy`** option in your schema,
-> you **MUST** add the following import in the main package, because a circular import is possible between the schema package,
-> and the generated ent package:
->
-> ```go
-> import _ "<project>/ent/runtime"
-> ```
+:::important
+You should notice that, similar to [schema hooks](hooks.md#hooks-registration), if you use the **`Policy`** option in your schema,
+you **MUST** add the following import in the main package, because a circular import is possible between the schema package,
+and the generated ent package:
+
+```go
+import _ "<project>/ent/runtime"
+```
+:::

 ## Examples

@@ -271,7 +273,7 @@ The full example exists in [GitHub](https://github.com/ent/ent/tree/master/examp
 In this example, we're going to create a schema with 3 entity types - `Tenant`, `User` and `Group`.
 The helper packages `viewer` and `rule` (as mentioned above) also exist in this example to help us structure the application.

-![tenant-example](https://entgo.io/assets/tenant_medium.png)
+![tenant-example](https://entgo.io/images/assets/tenant_medium.png)

 Let's start building this application piece by piece. We begin by creating 3 different schemas (see the full code [here](https://github.com/ent/ent/tree/master/examples/privacytenant/ent/schema)),
 and since we want to share some logic between them, we create another [mixed-in schema](schema-mixin.md) and add it to all other schemas as follows:
--- a/doc/md/schema-edges.md
+++ b/doc/md/schema-edges.md
@@ -8,7 +8,7 @@ title: Edges
 Edges are the relations (or associations) of entities. For example, user's pets, or group's users.


-![er-group-users](https://entgo.io/assets/er_user_pets_groups.png)
+![er-group-users](https://entgo.io/images/assets/er_user_pets_groups.png)

 In the example above, you can see 2 relations declared using edges. Let's go over them.

@@ -177,7 +177,7 @@ Let's go over a few examples that show how to define different relation types us

 ## O2O Two Types

-![er-user-card](https://entgo.io/assets/er_user_card.png)
+![er-user-card](https://entgo.io/images/assets/er_user_card.png)

 In this example, a user **has only one** credit-card, and a card **has only one** owner.

@@ -256,7 +256,7 @@ The full example exists in [GitHub](https://github.com/ent/ent/tree/master/examp

 ## O2O Same Type

-![er-linked-list](https://entgo.io/assets/er_linked_list.png)
+![er-linked-list](https://entgo.io/images/assets/er_linked_list.png)

 In this linked-list example, we have a **recursive relation** named `next`/`prev`. Each node in the list can
 **have only one** `next` node. If a node A points (using `next`) to node B, B can get its pointer using `prev` (the back-reference edge).   
@@ -352,7 +352,7 @@ The full example exists in [GitHub](https://github.com/ent/ent/tree/master/examp

 ## O2O Bidirectional

-![er-user-spouse](https://entgo.io/assets/er_user_spouse.png)
+![er-user-spouse](https://entgo.io/images/assets/er_user_spouse.png)

 In this user-spouse example, we have a **symmetric O2O relation** named `spouse`. Each user can **have only one** spouse.
 If user A sets its spouse (using `spouse`) to B, B can get its spouse using the `spouse` edge.
@@ -426,7 +426,7 @@ The full example exists in [GitHub](https://github.com/ent/ent/tree/master/examp

 ## O2M Two Types

-![er-user-pets](https://entgo.io/assets/er_user_pets.png)
+![er-user-pets](https://entgo.io/images/assets/er_user_pets.png)

 In this user-pets example, we have a O2M relation between user and its pets.
 Each user **has many** pets, and a pet **has one** owner.
@@ -507,7 +507,7 @@ The full example exists in [GitHub](https://github.com/ent/ent/tree/master/examp

 ## O2M Same Type

-![er-tree](https://entgo.io/assets/er_tree.png)
+![er-tree](https://entgo.io/images/assets/er_tree.png)

 In this example, we have a recursive O2M relation between tree's nodes and their children (or their parent).  
 Each node in the tree **has many** children, and **has one** parent. If node A adds B to its children,
@@ -616,7 +616,7 @@ The full example exists in [GitHub](https://github.com/ent/ent/tree/master/examp

 ## M2M Two Types

-![er-user-groups](https://entgo.io/assets/er_user_groups.png)
+![er-user-groups](https://entgo.io/images/assets/er_user_groups.png)

 In this groups-users example, we have a M2M relation between groups and their users.
 Each group **has many** users, and each user can be joined to **many** groups.
@@ -708,7 +708,7 @@ The full example exists in [GitHub](https://github.com/ent/ent/tree/master/examp

 ## M2M Same Type

-![er-following-followers](https://entgo.io/assets/er_following_followers.png)
+![er-following-followers](https://entgo.io/images/assets/er_following_followers.png)

 In this following-followers example, we have a M2M relation between users to their followers. Each user 
 can follow **many** users, and can have **many** followers.
@@ -802,7 +802,7 @@ The full example exists in [GitHub](https://github.com/ent/ent/tree/master/examp

 ## M2M Bidirectional

-![er-user-friends](https://entgo.io/assets/er_user_friends.png)
+![er-user-friends](https://entgo.io/images/assets/er_user_friends.png)

 In this user-friends example, we have a **symmetric M2M relation** named `friends`.
 Each user can **have many** friends. If user A becomes a friend of B, B is also a friend of A.
--- a/doc/md/schema-fields.md
+++ b/doc/md/schema-fields.md
@@ -8,7 +8,7 @@ title: Fields
 Fields (or properties) in the schema are the attributes of the node. For example, a `User`
 with 4 fields: `age`, `name`, `username` and `created_at`:

-![re-fields-properties](https://entgo.io/assets/er_fields_properties.png)
+![re-fields-properties](https://entgo.io/images/assets/er_fields_properties.png)

 Fields are returned from the schema using the `Fields` method. For example:

--- a/doc/md/schema-indexes.md
+++ b/doc/md/schema-indexes.md
@@ -49,7 +49,7 @@ func (User) Fields() []ent.Field {
 Indexes can be configured on composition of fields and edges. The main use-case
 is setting uniqueness on fields under a specific relation. Let's take an example:

-![er-city-streets](https://entgo.io/assets/er_city_streets.png)
+![er-city-streets](https://entgo.io/images/assets/er_city_streets.png)

 In the example above, we have a `City` with many `Street`s, and we want to set the
 street name to be unique under each city.
--- a/doc/md/templates.md
+++ b/doc/md/templates.md
@@ -134,4 +134,4 @@ func (User) Fields() []ent.Field {
 ## Documentation

 Templates are executed on either a specific node-type or the entire schema graph. For API
-documentation, see the <a target="_blank" href="https://pkg.go.dev/entgo.io/ent/entc/gen?tab=doc">GoDoc<a>.
+documentation, see the <a target="_blank" href="https://pkg.go.dev/entgo.io/ent/entc/gen?tab=doc">GoDoc</a>.
--- a/doc/md/traversals.md
+++ b/doc/md/traversals.md
@@ -6,7 +6,7 @@ title: Graph Traversal
 For the purpose of the example, we'll generate the following graph:


-![er-traversal-graph](https://entgo.io/assets/er_traversal_graph.png)
+![er-traversal-graph](https://entgo.io/images/assets/er_traversal_graph.png)

 The first step is to generate the 3 schemas: `Pet`, `User`, `Group`.

@@ -157,7 +157,7 @@ func Gen(ctx context.Context, client *ent.Client) error {

 Let's go over a few traversals, and show the code for them:

-![er-traversal-graph-gopher](https://entgo.io/assets/er_traversal_graph_gopher.png)
+![er-traversal-graph-gopher](https://entgo.io/images/assets/er_traversal_graph_gopher.png)

 The traversal above starts from a `Group` entity, continues to its `admin` (edge),
 continues to its `friends` (edge), gets their `pets` (edge), gets each pet's `friends` (edge),
@@ -186,7 +186,7 @@ func Traverse(ctx context.Context, client *ent.Client) error {

 What about the following traversal?

-![er-traversal-graph-gopher-query](https://entgo.io/assets/er_traversal_graph_gopher_query.png)
+![er-traversal-graph-gopher-query](https://entgo.io/images/assets/er_traversal_graph_gopher_query.png)

 We want to get all pets (entities) that have an `owner` (`edge`) that is a `friend`
 (edge) of some group `admin` (edge).
--- a/doc/md/tutorial-todo-crud.md
+++ b/doc/md/tutorial-todo-crud.md
@@ -78,7 +78,7 @@ func Example_Todo() {
 Wonderful! We created a schema in the database with 5 columns (`id`, `text`, `created_at`, `status`, `priority`)
 and created 2 items in our todo list, by inserting 2 rows to the table.

-![tutorial-todo-create](https://entgo.io/assets/tutorial-todo-create-items.png)
+![tutorial-todo-create](https://entgo.io/images/assets/tutorial-todo-create-items.png)

 ## Add Edges To The Schema

@@ -109,7 +109,7 @@ go generate ./ent
 We continue our edges example, by updating the 2 todo items we just created. We define that item-2 (*"Add Tracing Example"*)
 depends on item-1 (*"Add GraphQL Example"*). 

-![tutorial-todo-create](https://entgo.io/assets/tutorial-todo-create-edges.png)
+![tutorial-todo-create](https://entgo.io/images/assets/tutorial-todo-create-edges.png)

 ```go
 func Example_Todo() {
--- a/doc/md/tutorial-todo-gql-field-collection.md
+++ b/doc/md/tutorial-todo-gql-field-collection.md
@@ -55,7 +55,7 @@ will execute a query for getting their photos (50 queries), and another query fo
 each user has exactly 10 posts. Therefore, For each post (of each user), the server will execute another query for getting
 its comments (500). That means, we have `1+50+50+500=601` queries in total.

-![gql-request-tree](https://entgo.io/assets/request-tree.png)
+![gql-request-tree](https://entgo.io/images/assets/request-tree.png)

 ## Ent Solution

--- a/doc/md/tutorial-todo-gql.md
+++ b/doc/md/tutorial-todo-gql.md
@@ -278,7 +278,7 @@ go run ./cmd/todo

 You should see the interactive playground:

-![tutorial-todo-playground](https://entgo.io/assets/tutorial-gql-playground.png)
+![tutorial-todo-playground](https://entgo.io/images/assets/tutorial-gql-playground.png)

 If you're having troubles with getting the playground to run, go to [first section](#clone-the-code-optional) and clone the
 example repository.
--- a/doc/website/.gitignore
+++ b/doc/website/.gitignore
@@ -0,0 +1,20 @@
+# dependencies
+/node_modules
+
+# production
+/build
+
+# generated files
+.docusaurus
+.cache-loader
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
--- a/doc/website/README.md
+++ b/doc/website/README.md
@@ -1,193 +0,0 @@
-This website was created with [Docusaurus](https://docusaurus.io/).
-
-# What's In This Document
-
-* [Get Started in 5 Minutes](#get-started-in-5-minutes)
-* [Directory Structure](#directory-structure)
-* [Editing Content](#editing-content)
-* [Adding Content](#adding-content)
-* [Full Documentation](#full-documentation)
-
-# Get Started in 5 Minutes
-
-1. Make sure all the dependencies for the website are installed:
-
-```sh
-# Install dependencies
-$ yarn
-```
-2. Run your dev server:
-
-```sh
-# Start the site
-$ yarn start
-```
-
-## Directory Structure
-
-Your project file structure should look something like this
-
-```
-my-docusaurus/
-  docs/
-    doc-1.md
-    doc-2.md
-    doc-3.md
-  website/
-    blog/
-      2016-3-11-oldest-post.md
-      2017-10-24-newest-post.md
-    core/
-    node_modules/
-    pages/
-    static/
-      css/
-      img/
-    package.json
-    sidebar.json
-    siteConfig.js
-```
-
-# Editing Content
-
-## Editing an existing docs page
-
-Edit docs by navigating to `docs/` and editing the corresponding document:
-
-`docs/doc-to-be-edited.md`
-
-```markdown
---
-id: page-needs-edit
-title: This Doc Needs To Be Edited
---
-
-Edit me...
-```
-
-For more information about docs, click [here](https://docusaurus.io/docs/en/navigation)
-
-## Editing an existing blog post
-
-Edit blog posts by navigating to `website/blog` and editing the corresponding post:
-
-`website/blog/post-to-be-edited.md`
-```markdown
---
-id: post-needs-edit
-title: This Blog Post Needs To Be Edited
---
-
-Edit me...
-```
-
-For more information about blog posts, click [here](https://docusaurus.io/docs/en/adding-blog)
-
-# Adding Content
-
-## Adding a new docs page to an existing sidebar
-
-1. Create the doc as a new markdown file in `/docs`, example `docs/newly-created-doc.md`:
-
-```md
---
-id: newly-created-doc
-title: This Doc Needs To Be Edited
---
-
-My new content here..
-```
-
-1. Refer to that doc's ID in an existing sidebar in `website/sidebar.json`:
-
-```javascript
-// Add newly-created-doc to the Getting Started category of docs
-{
-  "docs": {
-    "Getting Started": [
-      "quick-start",
-      "newly-created-doc" // new doc here
-    ],
-    ...
-  },
-  ...
-}
-```
-
-For more information about adding new docs, click [here](https://docusaurus.io/docs/en/navigation)
-
-## Adding a new blog post
-
-1. Make sure there is a header link to your blog in `website/siteConfig.js`:
-
-`website/siteConfig.js`
-```javascript
-headerLinks: [
-    ...
-    { blog: true, label: 'Blog' },
-    ...
-]
-```
-
-2. Create the blog post with the format `YYYY-MM-DD-My-Blog-Post-Title.md` in `website/blog`:
-
-`website/blog/2018-05-21-New-Blog-Post.md`
-
-```markdown
---
-author: Frank Li
-authorURL: https://twitter.com/foobarbaz
-authorFBID: 503283835
-title: New Blog Post
---
-
-Lorem Ipsum...
-```
-
-For more information about blog posts, click [here](https://docusaurus.io/docs/en/adding-blog)
-
-## Adding items to your site's top navigation bar
-
-1. Add links to docs, custom pages or external links by editing the headerLinks field of `website/siteConfig.js`:
-
-`website/siteConfig.js`
-```javascript
-{
-  headerLinks: [
-    ...
-    /* you can add docs */
-    { doc: 'my-examples', label: 'Examples' },
-    /* you can add custom pages */
-    { page: 'help', label: 'Help' },
-    /* you can add external links */
-    { href: 'https://entgo.io/Docusaurus', label: 'GitHub' },
-    ...
-  ],
-  ...
-}
-```
-
-For more information about the navigation bar, click [here](https://docusaurus.io/docs/en/navigation)
-
-## Adding custom pages
-
-1. Docusaurus uses React components to build pages. The components are saved as .js files in `website/pages/en`:
-1. If you want your page to show up in your navigation header, you will need to update `website/siteConfig.js` to add to the `headerLinks` element:
-
-`website/siteConfig.js`
-```javascript
-{
-  headerLinks: [
-    ...
-    { page: 'my-new-custom-page', label: 'My New Custom Page' },
-    ...
-  ],
-  ...
-}
-```
-
-For more information about custom pages, click [here](https://docusaurus.io/docs/en/custom-pages).
-
-# Full Documentation
-
-Full documentation can be found on the [website](https://docusaurus.io/).
--- a/doc/website/blog/2019-10-03-introducing-ent.md
+++ b/doc/website/blog/2019-10-03-introducing-ent.md
@@ -1,8 +1,8 @@
 ---
 title: Introducing ent
 author: Ariel Mashraki
-authorURL: https://github.com/a8m
-authorImageURL: https://avatars0.githubusercontent.com/u/7413593
+authorURL: "https://github.com/a8m"
+authorImageURL: "https://avatars0.githubusercontent.com/u/7413593"
 authorTwitter: arielmashraki
 ---
 ## The state of Go in Facebook Connectivity Tel Aviv
--- a/doc/website/blog/2021-03-12-announcing-edge-field-support.md
+++ b/doc/website/blog/2021-03-12-announcing-edge-field-support.md
@@ -1,8 +1,8 @@
 ---
 title: Announcing Edge-field Support in v0.7.0
 author: Rotem Tamir
-authorURL: https://github.com/rotemtam
-authorImageURL: https://s.gravatar.com/avatar/36b3739951a27d2e37251867b7d44b1a?s=80
+authorURL: "https://github.com/rotemtam"
+authorImageURL: "https://s.gravatar.com/avatar/36b3739951a27d2e37251867b7d44b1a?s=80"
 authorTwitter: _rtam
 ---
 Over the past few months, there has been much discussion in the Ent project [issues](https://github.com/ent/ent/issues) about adding support for the retrieval of the foreign key field when retrieving entities with One-to-One or One-to-Many edges.  We are happy to announce that as of [v0.7.0](https://github.com/ent/ent/releases/tag/v0.7.0) ent supports this feature.
--- a/doc/website/blog/2021-03-18-generating-a-grpc-server-with-ent.md
+++ b/doc/website/blog/2021-03-18-generating-a-grpc-server-with-ent.md
@@ -1,8 +1,8 @@
 ---
 title: Generate a fully-working Go gRPC server in two minutes with Ent
 author: Rotem Tamir
-authorURL: https://github.com/rotemtam
-authorImageURL: https://s.gravatar.com/avatar/36b3739951a27d2e37251867b7d44b1a?s=80
+authorURL: "https://github.com/rotemtam"
+authorImageURL: "https://s.gravatar.com/avatar/36b3739951a27d2e37251867b7d44b1a?s=80"
 authorTwitter: _rtam
 ---
 ![ent + gRPC](https://entgo.io/assets/ent-grpc.jpg)
--- a/doc/website/core/Footer.js
+++ b/doc/website/core/Footer.js
@@ -1,178 +0,0 @@
-/**
- * Copyright 2019-present Facebook Inc. All rights reserved.
- *
- * This source code is licensed under the Apache 2.0 license found
- * in the LICENSE file in the root directory of this source tree.
- *
- * @format
- */
-
-const PropTypes = require('prop-types');
-const React = require('react');
-
-function SocialFooter(props) {
-  const repoUrl = `https://github.com/${props.config.organizationName}/${props.config.projectName}`;
-  return (
-      <div className="footerSection">
-        <h5>Social</h5>
-        <div className="social">
-          <a
-              className="github-button"
-              href={repoUrl}
-              data-count-href={`${repoUrl}/stargazers`}
-              data-show-count="true"
-              data-count-aria-label="# stargazers on GitHub"
-              aria-label="Star this project on GitHub">
-            {props.config.projectName}
-          </a>
-        </div>
-        {props.config.twitterUsername && (
-            <div className="social">
-              <a
-                  href={`https://twitter.com/${props.config.twitterUsername}`}
-                  className="twitter-follow-button">
-                Follow @{props.config.twitterUsername}
-              </a>
-            </div>
-        )}
-        {props.config.facebookAppId && (
-            <div className="social">
-              <div
-                  className="fb-like"
-                  data-href={props.config.url}
-                  data-colorscheme="dark"
-                  data-layout="standard"
-                  data-share="true"
-                  data-width="225"
-                  data-show-faces="false"
-              />
-            </div>
-        )}
-      </div>
-  );
-}
-
-SocialFooter.propTypes = {
-  config: PropTypes.object,
-};
-
-class Footer extends React.Component {
-  render() {
-    const docsPart = `${
-        this.props.config.docsUrl ? `${this.props.config.docsUrl}/` : ''
-    }`;
-    return (
-        <footer className="nav-footer" id="footer">
-          <section className="sitemap">
-            {this.props.config.footerIcon && (
-                <a href={this.props.config.baseUrl} className="nav-home">
-                  <img
-                      src={`${this.props.config.baseUrl}${this.props.config.footerIcon}`}
-                      alt={this.props.config.title}
-                      width="66"
-                      height="58"
-                  />
-                </a>
-            )}
-            <div className="footerSection">
-              <h5>Docs</h5>
-              <a
-                  href={`
-                ${this.props.config.baseUrl}${docsPart}${this.props.language}/getting-started`}>
-                Getting Started
-              </a>
-              <a
-                  href={`
-                ${this.props.config.baseUrl}${docsPart}${this.props.language}/schema-def`}>
-                Schema Guide
-              </a>
-              <a
-                  href={`
-                ${this.props.config.baseUrl}${docsPart}${this.props.language}/code-gen`}>
-                Code Generation
-              </a>
-              <a
-                  href={`
-                ${this.props.config.baseUrl}${docsPart}${this.props.language}/graphql`}>
-                GraphQL Integration
-              </a>
-              <a
-                  href={`
-                ${this.props.config.baseUrl}${docsPart}${this.props.language}/migrate`}>
-                Schema Migration
-              </a>
-            </div>
-            <div className="footerSection">
-              <h5>Community</h5>
-              <a href={`${this.props.config.githubRepo}`} target="_blank">
-                GitHub
-              </a>
-              <a href={`${this.props.config.slackChannel}`} target="_blank">
-                Slack
-              </a>
-              <a href={`${this.props.config.newsletter}`} target="_blank">
-                Newsletter
-              </a>
-              <a href={`${this.props.config.githubRepo}/discussions`} target="_blank">
-                Discussions
-              </a>
-            </div>
-            <div className="footerSection">
-              <h5>Legal</h5>
-              <a
-                  href="https://opensource.facebook.com/legal/privacy/"
-                  target="_blank"
-                  rel="noreferrer noopener">
-                Privacy
-              </a>
-              <a
-                  href="https://opensource.facebook.com/legal/terms/"
-                  target="_blank"
-                  rel="noreferrer noopener">
-                Terms
-              </a>
-              <a
-                  href="https://opensource.facebook.com/legal/data-policy/"
-                  target="_blank"
-                  rel="noreferrer noopener">
-                Data Policy
-              </a>
-              <a
-                  href="https://opensource.facebook.com/legal/cookie-policy/"
-                  target="_blank"
-                  rel="noreferrer noopener">
-                Cookie Policy
-              </a>
-            </div>
-            <SocialFooter config={this.props.config} />
-          </section>
-          <a
-              href="https://opensource.facebook.com/"
-              target="_blank"
-              rel="noreferrer noopener"
-              className="fbOpenSource">
-            <img
-                src={`${this.props.config.baseUrl}img/oss_logo.png`}
-                alt="Facebook Open Source"
-                width="170"
-                height="45"
-            />
-          </a>
-          <section className="copyright">
-            {this.props.config.copyright && (
-                <span>{this.props.config.copyright}</span>
-            )}{' '}
-            <br/>
-            <br/>
-            The Go gopher was designed by <a href="http://reneefrench.blogspot.com/" style={{display: 'inline'}}> Renee French </a>.
-            The design is licensed under the Creative Commons 3.0 Attributions license. Read this{' '}
-            <a href="https://blog.golang.org/gopher" style={{display: 'inline'}}> article </a>{' '} for more details.
-            <br/>
-            Design by Moriah Rich, illustration by Ariel Mashraki.
-          </section>
-        </footer>
-    );
-  }
-}
-
-module.exports = Footer;
--- a/doc/website/docusaurus.config.js
+++ b/doc/website/docusaurus.config.js
@@ -0,0 +1,176 @@
+module.exports={
+  "title": "ent",
+  "tagline": "An entity framework for Go",
+  "url": "https://entgo.io",
+  "baseUrl": "/",
+  "organizationName": "ent",
+  "projectName": "ent",
+  "scripts": [
+    "https://buttons.github.io/buttons.js",
+    "https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js",
+    "/js/code-block-buttons.js",
+    "/js/custom.js"
+  ],
+  "favicon": "img/favicon.ico",
+  "customFields": {
+    "users": [
+      {
+        "caption": "User1",
+        "image": "/img/undraw_open_source.svg",
+        "infoLink": "https://www.facebook.com",
+        "pinned": true
+      }
+    ],
+    "slackChannel": "https://app.slack.com/client/T029RQSE6/C01FMSQDT53",
+    "newsletter": "https://www.getrevue.co/profile/ent",
+    "githubRepo": "https://github.com/ent/ent"
+  },
+  "onBrokenLinks": "log",
+  "onBrokenMarkdownLinks": "log",
+  "presets": [
+    [
+      "@docusaurus/preset-classic",
+      {
+        "docs": {
+          "path": "../md",
+          "showLastUpdateAuthor": false,
+          "showLastUpdateTime": false,
+          sidebarPath: require.resolve('./sidebars.js'),
+        },
+        "blog": {
+          "path": "blog"
+        },
+        "theme": {
+          "customCss": ["../src/css/custom.css"],
+        }
+      }
+    ]
+  ],
+  "plugins": [],
+  "themeConfig": {
+    prism: {
+      additionalLanguages: ['gotemplate'],
+    },
+    algolia: {
+      apiKey: "bfc8175da1bd5078f1c02e5c8a6fe782",
+      indexName: "entgo",
+    },
+    colorMode: {
+      disableSwitch: false,
+    },
+    googleAnalytics: {
+      trackingID: 'UA-189726777-1',
+    },
+    "navbar": {
+      "title": "",
+      "logo": {
+        "src": "img/logo.png"
+      },
+      "items": [
+        {
+          "to": "docs/getting-started",
+          "label": "Docs",
+          "position": "left"
+        },
+        {
+          "to": "docs/tutorial-setup",
+          "label": "Tutorials",
+          "position": "left"
+        },
+        {
+          "href": "https://pkg.go.dev/entgo.io/ent?tab=doc",
+          "label": "GoDoc",
+          "position": "left",
+          "className": "header-godoc-link",
+        },
+        {to: 'blog', label: 'Blog', position: 'left'},
+        {
+          href: 'https://twitter.com/entgo_io',
+          position: 'right',
+          className: 'header-twitter-link',
+          'aria-label': 'Twitter page',
+        },
+        {
+          href: 'https://github.com/ent/ent',
+          position: 'right',
+          className: 'header-github-link',
+          'aria-label': 'GitHub repository',
+        },
+      ]
+    },
+    "image": "img/undraw_online.svg",
+    ogImage: 'img/undraw_online.svg',
+    twitterImage: 'img/undraw_tweetstorm.svg',
+    "footer": {
+      "links": [
+        {
+          "title": "Docs",
+          "items": [
+            {"label": "Getting Started", "to": "/docs/getting-started"},
+            {"label": "Schema Guide", "to": "/docs/schema-def"},
+            {"label": "Code Generation", "to": "/docs/code-gen"},
+            {"label": "GraphQL Integration", "to": "/docs/graphql"},
+            {"label": "Schema Migration", "to": "/docs/migrate"},
+          ]
+        },
+        {
+          "title": "Community",
+          "items": [
+            {"label": "GitHub", "to": "https://github.com/ent/ent"},
+            {"label": "Slack", "to": "https://app.slack.com/client/T029RQSE6/C01FMSQDT53"},
+            {"label": "Newsletter", "to": "https://www.getrevue.co/profile/ent"},
+            {"label": "Discussions", "to": "https://github.com/ent/ent/discussions"},
+            {
+              "label": "Twitter",
+              "to": "https://twitter.com/entgo_io"
+            }
+          ]
+        },
+        {
+          "title": "Legal",
+          "items": [
+            {"label": "Privacy", "to": "https://opensource.facebook.com/legal/privacy/"},
+            {"label": "Terms", "to": "https://opensource.facebook.com/legal/terms/"},
+            {"label": "Data Policy", "to": "https://opensource.facebook.com/legal/data-policy/"},
+            {"label": "Cookie Policy", "to": "https://opensource.facebook.com/legal/cookie-policy/"},
+          ]
+        },
+        {
+          "title": "Social",
+          "items": [
+            {"html": `
+            <a href="https://github.com/ent/ent/stargazers">
+                <img src="https://img.shields.io/github/stars/ent/ent?style=social"/>
+            </a>`},
+            {"html": `
+            <a href="https://twitter.com/entgo_io">
+                <img src="https://img.shields.io/twitter/follow/entgo_io?style=social"/>
+            </a>`}
+          ]
+        }
+      ],
+      logo: {
+        alt: 'Facebook Open Source Logo',
+        src: 'https://docusaurus.io/img/oss_logo.png',
+        href: 'https://opensource.facebook.com/',
+      },
+      copyright: `
+      Copyright © ${new Date().getFullYear()} Facebook, Inc.
+      The Go gopher was designed by <a href="http://reneefrench.blogspot.com/">Renee French</a>.
+      <br/>
+      The design is licensed under the Creative Commons 3.0 Attributions license. Read this 
+      <a href="https://blog.golang.org/gopher">article</a> for more details.
+      <br/>
+      Design by Moriah Rich, illustration by Ariel Mashraki.
+      `,
+
+    },
+    "algolia": {
+      "apiKey": "bfc8175da1bd5078f1c02e5c8a6fe782",
+      "indexName": "entgo"
+    },
+    "gtag": {
+      "trackingID": "UA-189726777-1"
+    }
+  }
+}
--- a/doc/website/package.json
+++ b/doc/website/package.json
@@ -1,14 +1,22 @@
 {
  "scripts": {
    "examples": "docusaurus-examples",
-    "start": "docusaurus-start",
-    "build": "docusaurus-build",
+    "start": "docusaurus start",
+    "build": "docusaurus build",
    "publish-gh-pages": "docusaurus-publish",
    "write-translations": "docusaurus-write-translations",
    "version": "docusaurus-version",
-    "rename-version": "docusaurus-rename-version"
+    "rename-version": "docusaurus-rename-version",
+    "swizzle": "docusaurus swizzle",
+    "deploy": "docusaurus deploy",
+    "docusaurus": "docusaurus"
  },
-  "devDependencies": {
-    "docusaurus": "^1.14.6"
+  "dependencies": {
+    "@docusaurus/core": "2.0.0-alpha.72",
+    "@docusaurus/preset-classic": "2.0.0-alpha.72",
+    "clsx": "^1.1.1",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "react-github-btn": "^1.2.0"
  }
 }
--- a/doc/website/sidebars.js
+++ b/doc/website/sidebars.js
@@ -0,0 +1,87 @@
+module.exports = {
+  md: [
+    {
+      type: 'category',
+      label: 'Getting Started',
+      items: [
+          'getting-started',
+      ],
+      collapsed: false,
+    },
+    {
+      type: 'category',
+      label: 'Schema',
+      items: [
+        'schema-def',
+        'schema-fields',
+        'schema-edges',
+        'schema-indexes',
+        'schema-mixin',
+        'schema-annotations',
+      ],
+      collapsed: false,
+    },
+    {
+      type: 'category',
+      label: 'Code Generation',
+      items: [
+        'code-gen',
+        'crud',
+        'traversals',
+        'eager-load',
+        'hooks',
+        'privacy',
+        'transactions',
+        'predicates',
+        'aggregate',
+        'paging',
+      ],
+      collapsed: false,
+    },
+    {
+      type: 'category',
+      label: 'Migration',
+      items: [
+        'migrate',
+        'dialects',
+      ],
+      collapsed: false,
+    },
+    {
+      type: 'category',
+      label: 'Misc',
+      items: [
+        'templates',
+        'graphql',
+        'sql-integration',
+        'testing',
+        'faq',
+        'feature-flags',
+      ],
+      collapsed: false,
+    },
+  ],
+  tutorial: [
+    {
+      type: 'category',
+      label: 'First Steps',
+      items: [
+        'tutorial-setup',
+        'tutorial-todo-crud',
+      ],
+      collapsed: false,
+    },
+    {
+      type: 'category',
+      label: 'GraphQL Basics',
+      items: [
+        'tutorial-todo-gql',
+        'tutorial-todo-gql-node',
+        'tutorial-todo-gql-paginate',
+        'tutorial-todo-gql-field-collection',
+        'tutorial-todo-gql-tx-mutation',
+      ],
+      collapsed: false,
+    },
+  ]
+}
--- a/doc/website/sidebars.json
+++ b/doc/website/sidebars.json
@@ -37,7 +37,7 @@
    ]
  },
  "tutorial": {
-    "Tutorial": [
+    "First Steps": [
      "tutorial-setup",
      "tutorial-todo-crud"
    ],
--- a/doc/website/siteConfig.js
+++ b/doc/website/siteConfig.js
@@ -1,156 +0,0 @@
-
-/**
- * Copyright 2019-present Facebook Inc. All rights reserved.
- *
- * This source code is licensed under the Apache 2.0 license found
- * in the LICENSE file in the root directory of this source tree.
- *
- * @format
- */
-
-// See https://docusaurus.io/docs/site-config for all the possible
-// site configuration options.
-
-// List of projects/orgs using your project for the users page.
-const users = [
-    {
-        caption: 'User1',
-        // You will need to prepend the image path with your baseUrl
-        // if it is not '/', like: '/test-site/img/image.jpg'.
-        image: '/img/undraw_open_source.svg',
-        infoLink: 'https://www.facebook.com',
-        pinned: true,
-    },
-];
-
-const siteConfig = {
-    title: 'ent', // Title for your website.
-    tagline: 'An entity framework for Go',
-    url: 'https://entgo.io', // Your website URL
-    baseUrl: '/', // Base URL for your project */
-
-    // Used for publishing and more
-    projectName: 'ent',
-    organizationName: 'facebook',
-
-
-    customDocsPath: 'md',
-    // For no header links in the top nav bar -> headerLinks: [],
-    headerLinks: [
-        {doc: 'getting-started', label: 'Docs'},
-        {doc: 'tutorial-setup', label: 'Tutorial'},
-        {href: 'https://pkg.go.dev/entgo.io/ent?tab=doc', label: 'GoDoc', external: true },
-        {href: 'https://github.com/ent/ent', label: 'Github', external: true },
-        {blog: true, label: 'Blog' },
-    ],
-
-    // If you have users set above, you add it here:
-    users,
-
-    /* path to images for header/footer */
-    headerIcon: 'img/logo.png',
-    favicon: 'img/favicon.ico',
-
-    /* Colors for website */
-    colors: {
-        primaryColor: '#85daff',
-        secondaryColor: '#4d8eaa',
-    },
-
-    // This copyright info is used in /core/Footer.js and blog RSS/Atom feeds.
-    copyright: `Copyright ${new Date().getFullYear()} Facebook Inc.`,
-
-    highlight: {
-        // Highlight.js theme to use for syntax highlighting in code blocks.
-        theme: 'androidstudio',
-        hljs: function(hljs) {
-            hljs.registerLanguage('gotemplate', function(hljs) {
-                return {
-                    name: 'GoTemplate',
-                    aliases: ['gotmpl'],
-                    keywords: {
-                        keyword:
-                            'break default func interface select case map struct chan else goto package switch ' +
-                            'const fallthrough if range type continue for import return var go defer ' +
-                            'bool byte complex64 complex128 float32 float64 int8 int16 int32 int64 string uint8 ' +
-                            'uint16 uint32 uint64 int uint uintptr rune with define block end',
-                        literal:
-                            'true false iota nil',
-                        built_in: 'append cap close complex copy imag len make new panic print println real recover delete' +
-                            'printf fail slice dict list'
-                    },
-                    contains: [
-                        hljs.COMMENT('{{-* */\\*', '\\*/ *-*}}'),
-                        hljs.C_LINE_COMMENT_MODE,
-                        {
-                            className: 'string',
-                            variants: [
-                                hljs.QUOTE_STRING_MODE,
-                                hljs.APOS_STRING_MODE,
-                                {begin: '`', end: '`'},
-                            ]
-                        },
-                        {
-                            begin: /:=/
-                        },
-                    ]
-                };
-            });
-            hljs.registerLanguage('graphql', function(hljs) {
-                return {
-                    name: 'GraphQL',
-                    aliases: ['gql'],
-                    keywords: {
-                        literal: 'Boolean Cursor Float ID Int String Time false null true',
-                        keyword: '... enum fragment implements input interface mutation on query scalar schema type union',
-                    },
-                    contains: [
-                        hljs.HASH_COMMENT_MODE,
-                        hljs.QUOTE_STRING_MODE,
-                        hljs.NUMBER_MODE,
-                    ],
-                };
-            });
-        }
-    },
-
-    // Add custom scripts here that would be placed in <script> tags.
-    scripts: [
-        'https://buttons.github.io/buttons.js',
-        'https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js',
-        '/js/code-block-buttons.js',
-        '/js/custom.js',
-    ],
-
-    // On page navigation for the current documentation page.
-    onPageNav: 'separate',
-    // No .html extensions for paths.
-    cleanUrl: true,
-
-    // Open Graph and Twitter card images.
-    ogImage: 'img/undraw_online.svg',
-    twitterImage: 'img/undraw_tweetstorm.svg',
-    twitter: true,
-    twitterUsername: 'entgo_io',
-    slackChannel: 'https://app.slack.com/client/T029RQSE6/C01FMSQDT53',
-    newsletter: 'https://www.getrevue.co/profile/ent',
-    githubRepo: 'https://github.com/ent/ent',
-
-    // For sites with a sizable amount of content, set collapsible to true.
-    // Expand/collapse the links and subcategories under categories.
-    // docsSideNavCollapsible: true,
-
-    // Show documentation's last contributor's name.
-    // enableUpdateBy: true,
-
-    // Show documentation's last update time.
-    // enableUpdateTime: true,
-    gaTrackingId: 'UA-189726777-1',
-
-    algolia: {
-        apiKey: 'bfc8175da1bd5078f1c02e5c8a6fe782',
-        indexName: 'entgo',
-    }
-};
-
-module.exports = siteConfig;
--- a/doc/website/static/css/code-block-buttons.css
+++ b/doc/website/static/css/code-block-buttons.css
--- a/doc/website/static/css/custom.css
+++ b/doc/website/static/css/custom.css
@@ -23,7 +23,7 @@ in the LICENSE file in the root directory of this source tree.
  font-style: normal;
  font-weight: normal;
  src: local('Calibre Regular'),
-    url('../font/CalibreRegular.woff') format('woff');
+  url('../font/CalibreRegular.woff') format('woff');
 }

@font-face {
@@ -38,7 +38,7 @@ in the LICENSE file in the root directory of this source tree.
  font-style: normal;
  font-weight: normal;
  src: local('Calibre Thin Italic'),
-    url('../font/CalibreThinItalic.woff') format('woff');
+  url('../font/CalibreThinItalic.woff') format('woff');
 }

@font-face {
@@ -46,7 +46,7 @@ in the LICENSE file in the root directory of this source tree.
  font-style: normal;
  font-weight: normal;
  src: local('Calibre Light Italic'),
-    url('../font/CalibreLightItalic.woff') format('woff');
+  url('../font/CalibreLightItalic.woff') format('woff');
 }

@font-face {
@@ -54,7 +54,7 @@ in the LICENSE file in the root directory of this source tree.
  font-style: normal;
  font-weight: normal;
  src: local('Calibre Semibold'),
-    url('../font/CalibreSemibold.woff') format('woff');
+  url('../font/CalibreSemibold.woff') format('woff');
 }

@font-face {
@@ -69,7 +69,7 @@ in the LICENSE file in the root directory of this source tree.
  font-style: normal;
  font-weight: normal;
  src: local('Calibre Medium Italic'),
-    url('../font/CalibreMediumItalic.woff') format('woff');
+  url('../font/CalibreMediumItalic.woff') format('woff');
 }

@font-face {
@@ -77,7 +77,7 @@ in the LICENSE file in the root directory of this source tree.
  font-style: normal;
  font-weight: normal;
  src: local('Calibre Regular Italic'),
-    url('../font/CalibreRegularItalic.woff') format('woff');
+  url('../font/CalibreRegularItalic.woff') format('woff');
 }

@media only screen and (min-device-width: 360px) and (max-device-width: 736px) {
@@ -90,62 +90,48 @@ in the LICENSE file in the root directory of this source tree.
  .docsNavContainer {
    position: absolute;
  }
+  .home-nav {
+    padding-top: 40px!important;
+  }
 }

@media only screen and (min-width: 1400px) {
 }

-@media only screen and (max-width: 600px) {
-  .navigationSlider .slidingNav ul li:nth-child(3) {
-    display: none;
+@media only screen and (max-width: 800px) {
+  .gopherGraph {
+    margin-top: 25px;
+    display: block!important;
+  }
+  .features {
+    margin: 60px auto 0 !important;
  }
 }

-@media only screen and (max-width: 500px) {
-    .blog .headerWrapper.wrapper header > a,
-    .sideNavVisible .headerWrapper.wrapper header > a {
-        display: none!important;
-    }
-    .navigationSlider .slidingNav ul li {
-       min-width: 0!important;
-    }
-    .navigationSlider .slidingNav ul li a {
-      padding-right: 30px!important;
-    }
-}
-
-
-@media only screen and (max-width: 800px) {
-    .gopherGraph {
-        margin-top: 25px;
-        display: block!important;
-    }
-    .features {
-        margin: 60px auto 0 !important;
-    }
-}
-
@media only screen and (max-width: 400px) {
-    .gopherGraph {
-        margin-top: 40px;
-    }
-    .features {
-        margin: 30px auto 0!important;
-    }
+  .gopherGraph {
+    margin-top: 40px;
+  }
+  .features {
+    margin: 30px auto 0!important;
+  }
+  .home-nav {
+    padding-right: 5% !important;
+  }
 }

@media only screen and (max-width: 320px) {
-    .gettingStartedText {
-        font-size: 22px!important;
-    }
+  .gettingStartedText {
+    font-size: 22px!important;
+  }
 }

-body {
+.section_index {
  background: #3d3e3f;
 }

 body.blog {
-    background: white;
+  background: white;
 }

 .sideNavVisible {
@@ -164,7 +150,7 @@ body.blog {
 }

 .blog .wrapper {
-    max-width: 1400px;
+  max-width: 1400px;
 }

 .sideNavVisible.navigationSlider .slidingNav ul {
@@ -214,10 +200,6 @@ body.blog {
  }
 }

-.homeContainer {
-  padding: 0 15% 20px;
-}
-
 .features {
  display: flex;
  justify-content: space-between;
@@ -290,6 +272,7 @@ body.blog {
  font-size: 56px;
  margin-left: 15px;
  margin-bottom: 8px;
+  line-height: 1em;
 }

 .navigationSlider .slidingNav ul li {
@@ -306,8 +289,9 @@ body.blog {
  padding: 0;
 }

-.navigationSlider .slidingNav ul li > a {
-  background-color: transparent;
+.home-nav li a:hover {
+  text-decoration: none;
+  font-family: Calibre Light,sans-serif;
 }

 .navigationSlider .slidingNav ul li a:hover {
@@ -326,7 +310,6 @@ body .homeContainer .homeWrapper {

 .button {
  border: 1px solid #4d8eaa;
-  color: #4d8eaa;
 }

 .button:hover {
@@ -337,10 +320,6 @@ body .homeContainer .homeWrapper {
  padding: 3em 10px 0 10px;
 }

-a {
-  color: #4d8eaa;
-}
-
 #er-linked-list,
 #er-user-spouse,
 #er-tree,
@@ -432,12 +411,12 @@ a {
    width: 100vw;
  }

-  .navigationSlider .slidingNav ul li {
-    min-width: 100px;
+  .home-nav li {
+    min-width: 100px!important;
  }

  .projectTitle {
-     line-height: 1.3em;
+    line-height: 1.3em;
  }
 }

@@ -449,6 +428,41 @@ a {
  }
 }

+@media only screen and (max-width: 720px) {
+  .home-nav .header-godoc-link {
+    display: none;
+  }
+  .home-nav li {
+    min-width: 0!important;
+    padding-right: 25px;
+  }
+}
+
+@media only screen and (max-width: 500px) {
+  .blog .headerWrapper.wrapper header > a,
+  .sideNavVisible .headerWrapper.wrapper header > a {
+    display: none!important;
+  }
+  .navigationSlider .slidingNav ul li {
+    min-width: 0!important;
+  }
+  .navigationSlider .slidingNav ul li a {
+    padding-right: 30px!important;
+  }
+  .home-nav li {
+    min-width: 0!important;
+    padding-right: 25px;
+  }
+}
+
+
+@media only screen and (max-width: 996px) {
+  .row .col.col.col {
+    padding: 0 15% 20px;
+  }
+}
+
+
 body,
 html {
  margin: 0;
@@ -575,9 +589,7 @@ header ul, ol {

@media only screen and (min-width: 1425px) {
  .homeContainer {
-    max-width: 1100px;
-    margin: 0 auto;
-    padding: 0 0 50px;
+    padding: 0 19% 0px;
  }

  .fixedHeaderContainer {
@@ -588,11 +600,11 @@ header ul, ol {
 }

@media only screen and (min-width: 1000px) {
-    .blog .fixedHeaderContainer,
-    .sideNavVisible.separateOnPageNav .fixedHeaderContainer {
-        margin-top: 35px;
-        width: 100vw;
-    }
+  .blog .fixedHeaderContainer,
+  .sideNavVisible.separateOnPageNav .fixedHeaderContainer {
+    margin-top: 35px;
+    width: 100vw;
+  }
 }

 .blog .slidingNav ul li a,
@@ -617,43 +629,157 @@ header ul, ol {
 }

 .yellowArrow:hover {
-    color: #ffe800;
+  color: #ffe800;

-    -webkit-transform: translateX(5px);
-    -moz-transform: translateX(5px);
-    -ms-transform: translateX(5px);
-    -o-transform: translateX(5px);
-    transform: translateX(5px);
+  -webkit-transform: translateX(5px);
+  -moz-transform: translateX(5px);
+  -ms-transform: translateX(5px);
+  -o-transform: translateX(5px);
+  transform: translateX(5px);
 }
 .blockTitleText {
  display: inline;
  color: #ffe800;
 }

-.nav-footer .sitemap {
+.footer .sitemap {
  max-width: 1100px;
  font-family: 'Calibre Light', sans-serif;
  font-size: 18px;
 }

-.nav-footer .copyright {
+.footer .copyright {
  margin: 0 auto 10px;
 }

 input#search_input_react {
-    color: #3d3e3f;
-    background: white;
-    border: 1px solid #3d3e3f;
+  color: #3d3e3f;
+  background: white;
+  border: 1px solid #3d3e3f;
 }

 input#search_input_react:focus, input#search_input_react:active {
-    color: #3d3e3f;
+  color: #3d3e3f;
 }

 input#search_input_react::placeholder {
-    color: #cccccc;
+  color: #cccccc;
 }

 img#tutorial-todo-create {
  width: 600px;
+}
+
+.footer {
+  background: #20232a;
+}
+
+.footer h4.footer__title {
+  color: #fff;
+}
+
+.section_index .navbar {
+  background: #3d3e3f;
+}
+
+.section_index .navbar__brand {
+  display: none;
+}
+
+.section_index .navbar__link {
+  color: #fff;
+}
+
+.section_index .DocSearch-Button {
+  display: none;
+}
+
+.footer__copyright {
+  color: hsla(0,0%,100%,.4);
+}
+
+.homeContainer {
+  padding: 0 15% 20px;
+}
+
+.home-nav {
+  background: #3d3e3f;
+  margin: 0;
+  padding: 0 15% 20px;
+  padding-top: 110px;
+}
+
+.home-nav li{
+  list-style: none;
+  float: left;
+  min-width: 125px;
+}
+
+.home-nav li a {
+  color: #fff;
+  font-family: Calibre Thin,sans-serif;
+  font-size: 22px;
+  padding: 0;
+}
+
+.gettingStartedButton a:hover, .features a:hover, .footer a:hover, .blog-wrapper h2 a {
+  text-decoration: none;
+}
+
+.footer__copyright {
+  font-size: 13px;
+}
+
+article iframe, article p img {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 100%;
+}
+
+/* Override the default prism theme. */
+span.token.keyword {
+  color: rgb(199, 146, 234);
+}
+
+span.token.punctuation {
+  color: rgb(191, 199, 213)!important;
+}
+
+
+.header-github-link:hover {
+  opacity: 0.6;
+}
+
+.header-github-link:before {
+  content: '';
+  width: 24px;
+  height: 24px;
+  display: flex;
+  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
+  no-repeat;
+}
+
+html[data-theme='dark'] .header-github-link:before {
+  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
+  no-repeat;
+}
+
+
+.header-twitter-link:before {
+  content: '';
+  width: 24px;
+  height: 24px;
+  display: flex;
+  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22.46 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.38-.83.5-1.75.85-2.72 1.05C18.37 4.5 17.26 4 16 4c-2.35 0-4.27 1.92-4.27 4.29 0 .34.04.67.11.98C8.28 9.09 5.11 7.38 3 4.79c-.37.63-.58 1.37-.58 2.15 0 1.49.75 2.81 1.91 3.56-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21a4.22 4.22 0 0 1-1.93.07 4.28 4.28 0 0 0 4 2.98 8.521 8.521 0 0 1-5.33 1.84c-.34 0-.68-.02-1.02-.06C3.44 20.29 5.7 21 8.12 21 16 21 20.33 14.46 20.33 8.79c0-.19 0-.37-.01-.56.84-.6 1.56-1.36 2.14-2.23z'/%3E%3C/svg%3E")
+  no-repeat;
+}
+
+html[data-theme='dark'] .header-twitter-link:before {
+  content: '';
+  width: 24px;
+  height: 24px;
+  display: flex;
+  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M22.46 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.38-.83.5-1.75.85-2.72 1.05C18.37 4.5 17.26 4 16 4c-2.35 0-4.27 1.92-4.27 4.29 0 .34.04.67.11.98C8.28 9.09 5.11 7.38 3 4.79c-.37.63-.58 1.37-.58 2.15 0 1.49.75 2.81 1.91 3.56-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21a4.22 4.22 0 0 1-1.93.07 4.28 4.28 0 0 0 4 2.98 8.521 8.521 0 0 1-5.33 1.84c-.34 0-.68-.02-1.02-.06C3.44 20.29 5.7 21 8.12 21 16 21 20.33 14.46 20.33 8.79c0-.19 0-.37-.01-.56.84-.6 1.56-1.36 2.14-2.23z'/%3E%3C/svg%3E")
+  no-repeat;
 }
--- a/doc/website/src/font/CalibreBold.woff
+++ b/doc/website/src/font/CalibreBold.woff
--- a/doc/website/src/font/CalibreLight.woff
+++ b/doc/website/src/font/CalibreLight.woff
--- a/doc/website/src/font/CalibreLightItalic.woff
+++ b/doc/website/src/font/CalibreLightItalic.woff
--- a/doc/website/src/font/CalibreMedium.woff
+++ b/doc/website/src/font/CalibreMedium.woff
--- a/doc/website/src/font/CalibreMediumItalic.woff
+++ b/doc/website/src/font/CalibreMediumItalic.woff
--- a/doc/website/src/font/CalibreRegular.woff
+++ b/doc/website/src/font/CalibreRegular.woff
--- a/doc/website/src/font/CalibreRegularItalic.woff
+++ b/doc/website/src/font/CalibreRegularItalic.woff
--- a/doc/website/src/font/CalibreSemibold.woff
+++ b/doc/website/src/font/CalibreSemibold.woff
--- a/doc/website/src/font/CalibreThin.woff
+++ b/doc/website/src/font/CalibreThin.woff
--- a/doc/website/src/font/CalibreThinItalic.woff
+++ b/doc/website/src/font/CalibreThinItalic.woff
--- a/doc/website/src/img/favicon.ico
+++ b/doc/website/src/img/favicon.ico
--- a/doc/website/src/img/logo.png
+++ b/doc/website/src/img/logo.png
--- a/doc/website/src/img/oss_logo.png
+++ b/doc/website/src/img/oss_logo.png
--- a/doc/website/src/js/code-block-buttons.js
+++ b/doc/website/src/js/code-block-buttons.js
@@ -0,0 +1,47 @@
+// Turn off ESLint for this file because it's sent down to users as-is.
+/* eslint-disable */
+window.addEventListener('load', function() {
+    function button(label, ariaLabel, icon, className) {
+        const btn = document.createElement('button');
+        btn.classList.add('btnIcon', className);
+        btn.setAttribute('type', 'button');
+        btn.setAttribute('aria-label', ariaLabel);
+        btn.innerHTML =
+            '<div class="btnIcon__body">' +
+            icon +
+            '<strong class="btnIcon__label">' +
+            label +
+            '</strong>' +
+            '</div>';
+        return btn;
+    }
+
+    function addButtons(codeBlockSelector, btn) {
+        document.querySelectorAll(codeBlockSelector).forEach(function(code) {
+            code.parentNode.appendChild(btn.cloneNode(true));
+        });
+    }
+
+    const copyIcon =
+        '<svg width="12" height="12" viewBox="340 364 14 15" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M342 375.974h4v.998h-4v-.998zm5-5.987h-5v.998h5v-.998zm2 2.994v-1.995l-3 2.993 3 2.994v-1.996h5v-1.995h-5zm-4.5-.997H342v.998h2.5v-.997zm-2.5 2.993h2.5v-.998H342v.998zm9 .998h1v1.996c-.016.28-.11.514-.297.702-.187.187-.422.28-.703.296h-10c-.547 0-1-.452-1-.998v-10.976c0-.546.453-.998 1-.998h3c0-1.107.89-1.996 2-1.996 1.11 0 2 .89 2 1.996h3c.547 0 1 .452 1 .998v4.99h-1v-2.995h-10v8.98h10v-1.996zm-9-7.983h8c0-.544-.453-.996-1-.996h-1c-.547 0-1-.453-1-.998 0-.546-.453-.998-1-.998-.547 0-1 .452-1 .998 0 .545-.453.998-1 .998h-1c-.547 0-1 .452-1 .997z" fill-rule="evenodd"/></svg>';
+
+    addButtons(
+        '.hljs',
+        button('Copy', 'Copy code to clipboard', copyIcon, 'btnClipboard'),
+    );
+
+    const clipboard = new ClipboardJS('.btnClipboard', {
+        target: function(trigger) {
+            return trigger.parentNode.querySelector('code');
+},
+    });
+
+    clipboard.on('success', function(event) {
+        event.clearSelection();
+        const textEl = event.trigger.querySelector('.btnIcon__label');
+        textEl.textContent = 'Copied';
+        setTimeout(function() {
+            textEl.textContent = 'Copy';
+        }, 2000);
+    });
+});
--- a/doc/website/src/js/custom.js
+++ b/doc/website/src/js/custom.js
@@ -0,0 +1,17 @@
+
+/**
+ * Copyright 2019-present Facebook Inc. All rights reserved.
+ *
+ * This source code is licensed under the Apache 2.0 license found
+ * in the LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+/* eslint-disable */
+window.addEventListener('load', function() {
+    // add an id tag for images based on their alt attribute.
+    document.querySelectorAll('.container img').forEach(function(el) {
+        el.id = el.alt;
+    });
+});
--- a/doc/website/src/pages/index.js
+++ b/doc/website/src/pages/index.js
@@ -9,10 +9,19 @@
 */

 const React = require('react');
+import LayoutProviders from '@theme/LayoutProviders';
+import Footer from '@theme/Footer';
+import Navbar from '@theme/Navbar';

-const CompLibrary = require('../../core/CompLibrary.js');
+const CompLibrary = {
+  Container: props => <div {...props}></div>,
+  GridBlock: props => <div {...props}></div>,
+  MarkdownBlock: props => <div {...props}></div>
+};

-const MarkdownBlock = CompLibrary.MarkdownBlock; /* Used to read markdown */
+import Layout from "@theme/Layout";
+
+const MarkdownBlock = CompLibrary.MarkdownBlock;/* Used to read markdown */
 const Container = CompLibrary.Container;
 const GridBlock = CompLibrary.GridBlock;

@@ -75,7 +84,7 @@ class HomeSplash extends React.Component {
    const ProjectTitle = () => (
      <div>
        <div className="projectTitleContainer">
-          <img src="https://entgo.io/assets/logo.png" />
+          <img src="https://entgo.io/images/assets/logo.png" />
          <div className="projectTitle">
            <p>{siteConfig.tagline}</p>
          </div>
@@ -116,7 +125,7 @@ class HomeSplash extends React.Component {
            </a>
          </div>
          <div className="gopherGraph">
-            <img src="https://entgo.io/assets/gopher_graph.png" />
+            <img src="https://entgo.io/images/assets/gopher_graph.png" />
          </div>
          <Features />
        </div>
@@ -125,6 +134,18 @@ class HomeSplash extends React.Component {
  }
 }

+class HomeNav extends React.Component {
+    render() {
+        return <ul className="home-nav">
+            <li className=""><a href="/docs/getting-started" target="_self">Docs</a></li>
+            <li className=""><a href="/docs/tutorial-setup" target="_self">Tutorial</a></li>
+            <li className="header-godoc-link"><a href="https://pkg.go.dev/entgo.io/ent?tab=doc" target="_blank">GoDoc</a></li>
+            <li className=""><a href="https://github.com/ent/ent" target="_blank">Github</a></li>
+            <li className=""><a href="/blog/" target="_self">Blog</a></li>
+        </ul>
+    }
+}
+
 class Index extends React.Component {
  render() {
    const {config: siteConfig, language = ''} = this.props;
@@ -160,11 +181,20 @@ class Index extends React.Component {
    };

    return (
-      <div>
+      <div className={"home-splash-container section_index"}>
        <HomeSplash siteConfig={siteConfig} language={language} />
      </div>
    );
  }
 }

-module.exports = Index;
+export default function (props) {
+    return <LayoutProviders>
+        {/*<div className={"section_index"}>*/}
+        {/*    <Navbar/>*/}
+        {/*</div>*/}
+        <HomeNav />
+        <Index {...props} />
+        <Footer/>
+    </LayoutProviders>;
+};
--- a/doc/website/src/static/contrib/index.html
+++ b/doc/website/src/static/contrib/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+    <meta name="go-import" content="entgo.io/contrib git https://github.com/ent/contrib">
+    <meta name="go-source" content="entgo.io/contrib https://github.com/ent/contrib https://github.com/ent/contrib/tree/master{/dir} https://github.com/ent/contrib/blob/master{/dir}/{file}#L{line}">
+    <meta http-equiv="refresh" content="0; url=https://pkg.go.dev/entgo.io/contrib">
+</head>
+<body>
+Nothing to see here; <a href="https://pkg.go.dev/entgo.io/contrib">move along</a>.
+</body>
+</html>
--- a/doc/website/src/static/ent/cmd/ent/index.html
+++ b/doc/website/src/static/ent/cmd/ent/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+    <meta name="go-import" content="entgo.io/ent git https://github.com/ent/ent">
+    <meta name="go-source" content="entgo.io/ent https://github.com/ent/ent https://github.com/ent/ent/tree/master{/dir} https://github.com/ent/ent/blob/master{/dir}/{file}#L{line}">
+    <meta http-equiv="refresh" content="0; url=https://pkg.go.dev/entgo.io/ent/cmd/ent">
+</head>
+<body>
+Nothing to see here; <a href="https://pkg.go.dev/entgo.io/ent/cmd/ent">move along</a>.
+</body>
+</html>
--- a/doc/website/src/static/ent/entc/gen/index.html
+++ b/doc/website/src/static/ent/entc/gen/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+    <meta name="go-import" content="entgo.io/ent git https://github.com/ent/ent">
+    <meta name="go-source" content="entgo.io/ent https://github.com/ent/ent https://github.com/ent/ent/tree/master{/dir} https://github.com/ent/ent/blob/master{/dir}/{file}#L{line}">
+    <meta http-equiv="refresh" content="0; url=https://pkg.go.dev/entgo.io/ent/entc/gen">
+</head>
+<body>
+Nothing to see here; <a href="https://pkg.go.dev/entgo.io/ent/entc/gen">move along</a>.
+</body>
+</html>
--- a/doc/website/src/static/ent/entc/index.html
+++ b/doc/website/src/static/ent/entc/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+    <meta name="go-import" content="entgo.io/ent git https://github.com/ent/ent">
+    <meta name="go-source" content="entgo.io/ent https://github.com/ent/ent https://github.com/ent/ent/tree/master{/dir} https://github.com/ent/ent/blob/master{/dir}/{file}#L{line}">
+    <meta http-equiv="refresh" content="0; url=https://pkg.go.dev/entgo.io/ent/entc">
+</head>
+<body>
+Nothing to see here; <a href="https://pkg.go.dev/entgo.io/ent/entc">move along</a>.
+</body>
+</html>
--- a/doc/website/src/static/ent/index.html
+++ b/doc/website/src/static/ent/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+    <meta name="go-import" content="entgo.io/ent git https://github.com/ent/ent">
+    <meta name="go-source" content="entgo.io/ent https://github.com/ent/ent https://github.com/ent/ent/tree/master{/dir} https://github.com/ent/ent/blob/master{/dir}/{file}#L{line}">
+    <meta http-equiv="refresh" content="0; url=https://pkg.go.dev/entgo.io/ent">
+</head>
+<body>
+Nothing to see here; <a href="https://pkg.go.dev/entgo.io/ent">move along</a>.
+</body>
+</html>
--- a/doc/website/src/theme/prism-gotemplate.js
+++ b/doc/website/src/theme/prism-gotemplate.js
@@ -0,0 +1,29 @@
+
+/**
+ * Copyright 2019-present Facebook Inc. All rights reserved.
+ *
+ * This source code is licensed under the Apache 2.0 license found
+ * in the LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+
+import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
+import siteConfig from '@generated/docusaurus.config';
+
+const prismIncludeLanguages = (PrismObject) => {
+  if (ExecutionEnvironment.canUseDOM) {
+    const {
+      themeConfig: {prism: {additionalLanguages = []} = {}},
+    } = siteConfig;
+    window.Prism = PrismObject;
+    additionalLanguages.forEach((lang) => {
+      require(`prismjs/components/prism-${lang}`); // eslint-disable-line
+    });
+    delete window.Prism;
+  }
+};
+
+
+export default prismIncludeLanguages;
--- a/doc/website/src/theme/prism-include-languages.js
+++ b/doc/website/src/theme/prism-include-languages.js
@@ -0,0 +1,37 @@
+
+/**
+ * Copyright 2019-present Facebook Inc. All rights reserved.
+ *
+ * This source code is licensed under the Apache 2.0 license found
+ * in the LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+
+export default function(Prism) {
+  Prism.languages.gotemplate = {
+    'comment': [
+      {
+        pattern: /(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/,
+        lookbehind: true,
+        greedy: true
+      },
+      {
+        pattern: /(^|[^\\:])\/\/.*/,
+        lookbehind: true,
+        greedy: true
+      },
+      /{{\/\*[\s\S]*\*\/}}/
+    ],
+    'string': {
+      pattern: /(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,
+      greedy: true
+    },
+    'boolean': /\b(?:_|iota|nil|true|false)\b/,
+    'number': /(?:\b0x[a-f\d]+|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:e[-+]?\d+)?)i?/i,
+    'operator': /[*\/%^!=]=?|\+[=+]?|-[=-]?|\|[=|]?|&(?:=|&|\^=?)?|>(?:>=?|=)?|<(?:<=?|=|-)?|:=|\.\.\./,
+    'builtin': /\b(?:bool|byte|complex(?:64|128)|error|float(?:32|64)|rune|string|u?int(?:8|16|32|64)?|uintptr|append|cap|close|complex|copy|delete|imag|len|make|new|panic|print(?:ln)?|real|recover)\b/,
+    'keyword': /\b(?:break|default|func|interface|select|case|map|struct|chan|else|goto|package|switch|const|fallthrough|if|range|type|continue|for|import|return|var|go|defer|bool|byte|complex64|complex128|float32|float64|int8|int16|int32|int64|string|uint8|uint16|uint32|uint64|int|uint|uintptr|rune|with|define|block|end)\b/,
+  };
+}