Update site homepage (#10)

* Update testimonials

* Update homepage

* Add get started to navbar, re-order

* Add initial content to getting-started; Add success stories

config/site/README.md

@@ -6,7 +6,7 @@ To build the site and documentation locally, run `bundle exec rake -T | grep sit
 
 ## CSS Styling
 
-CSS Styling is powerd by [Tailwind CSS](https://tailwindcss.com/) via the `package.json` script: `npm run build:css`.
+CSS Styling is powered by [Tailwind CSS](https://tailwindcss.com/) via the `package.json` script: `npm run build:css`.
 
 Tip: most LLM's do a good job of generating Tailwind CSS classes.
 

config/site/src/_config.yaml

@@ -7,6 +7,8 @@ github_url: https://github.com/block/elasticgraph
 x_url: https://x.com/elasticgraph
 x_username: "@ElasticGraph"
 support_email: [email protected]
+description: ElasticGraph is an open-source framework for indexing, searching, grouping, and aggregating data
+
 
 # Reusable CSS styling for the site, available via the `site.style` variable, ex: `{{ site.style.body }}`
 style:

config/site/src/_includes/navbar.html

@@ -3,8 +3,10 @@
   <div class="container mx-auto flex justify-between items-center px-4">
     <div class="text-xl flex items-center space-x-4">
       <a href="{{ '/' | relative_url }}" class="font-bold hover:underline">ElasticGraph</a>
-      <a href="{{ '/docs/main' | relative_url }}" class="{{ site.style.link }}">Docs</a>
+      <a href="{{ '/getting-started' | relative_url }}" class="{{ site.style.link }}">Get Started</a>
       <a href="{{ '/query-api' | relative_url }}" class="{{ site.style.link }}">Query API</a>
+      <a href="{{ '/docs/main' | relative_url }}" class="{{ site.style.link }}">Docs</a>
+
     </div>
     <div>
       <a href="{{ site.github_url }}" target="_blank"

config/site/src/_includes/success_stories.html

@@ -0,0 +1,66 @@
+<!-- Success Stories Section -->
+<section class="py-12">
+  <div class="container mx-auto px-4">
+    <h2
+      class="text-4xl font-bold text-gray-900 dark:text-gray-100 text-center mb-12">
+      Success Stories
+    </h2>
+    <div class="max-w-4xl mx-auto">
+      <div class="p-8 rounded-lg shadow-lg text-center">
+        <h3 class="text-3xl font-semibold mb-6">
+          Scaling to support Square's Dashboard Reports
+        </h3>
+        <p class="text-lg mb-8">
+          ElasticGraph powers Square's new Dashboard reports. Switching to
+          ElasticGraph shaved multiple seconds off every page load, ultimately
+          giving businesses time back that was previously spent waiting for
+          reports to load.
+        </p>
+        <div class="flex flex-col md:flex-row justify-between gap-6">
+          <!-- Dataset Card -->
+          <div class="bg-gray-100 dark:bg-gray-700 p-6 rounded-lg md:w-1/3">
+            <h4 class="text-xl font-bold mb-4">Dataset</h4>
+            <p
+              class="text-3xl font-extrabold text-blue-600 dark:text-blue-400 mb-2">
+              ~100TB</p>
+            <p class="text-sm text-gray-700 dark:text-gray-300">of data</p>
+            <p
+              class="text-3xl font-extrabold text-blue-600 dark:text-blue-400 mt-4">
+              100's B</p>
+            <p class="text-sm text-gray-700 dark:text-gray-300">documents</p>
+            <p
+              class="text-3xl font-extrabold text-blue-600 dark:text-blue-400 mt-4">
+              &gt; 100's</p>
+            <p class="text-sm text-gray-700 dark:text-gray-300">of QPS</p>
+          </div>
+          <!-- Ingestion Performance Card -->
+          <div class="bg-gray-100 dark:bg-gray-700 p-6 rounded-lg md:w-1/3">
+            <h4 class="text-xl font-bold mb-4">Ingestion Latency</h4>
+            <p
+              class="text-3xl font-extrabold text-blue-600 dark:text-blue-400 mb-2">
+              &lt; 400ms</p>
+            <p class="text-sm text-gray-700 dark:text-gray-300">p99 latency</p>
+            <p
+              class="text-3xl font-extrabold text-blue-600 dark:text-blue-400 mt-4">
+              &lt; 1s</p>
+            <p class="text-sm text-gray-700 dark:text-gray-300">p99.99 latency
+            </p>
+          </div>
+          <!-- GraphQL API Latency Card -->
+          <div class="bg-gray-100 dark:bg-gray-700 p-6 rounded-lg md:w-1/3">
+            <h4 class="text-xl font-bold mb-4">Query Latency</h4>
+            <p
+              class="text-3xl font-extrabold text-blue-600 dark:text-blue-400 mb-2">
+              &lt; 350ms</p>
+            <p class="text-sm text-gray-700 dark:text-gray-300">p99 latency</p>
+            <p
+              class="text-3xl font-extrabold text-blue-600 dark:text-blue-400 mt-4">
+              &lt; 2.5s</p>
+            <p class="text-sm text-gray-700 dark:text-gray-300">p99.99 latency
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>

config/site/src/_includes/testimonials.html

@@ -7,27 +7,28 @@ <h2 class="text-3xl font-bold text-gray-900 dark:text-gray-100 mb-8">
     <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
       <div class="bg-gray-100 dark:bg-gray-700 p-6 rounded-lg shadow">
         <p class="text-lg italic mb-4">
-          "ElasticGraph has revolutionized the way we manage and analyze our
-          data."
+          Just about everything has been thought of and you can go from prototype to fully
+          configured OpenSearch and GraphQL infra in a matter of days.
         </p>
         <div class="font-bold">
-          - John Doe, CTO at TechCorp
+          - Nicole W, Software Engineer at Block
         </div>
       </div>
       <div class="bg-gray-100 dark:bg-gray-700 p-6 rounded-lg shadow">
         <p class="text-lg italic mb-4">
-          "A must-have tool for any data-driven organization."
+          ElasticGraph enabled me to build a complex GraphQL API for our Payouts data in
+          days. It would have taken me months without it!
         </p>
         <div class="font-bold">
-          - Jane Smith, Data Scientist
+          - Max N, Software Engineer at Block
         </div>
       </div>
       <div class="bg-gray-100 dark:bg-gray-700 p-6 rounded-lg shadow">
         <p class="text-lg italic mb-4">
-          "ElasticGraph makes complex data operations simple and efficient."
+          Use ElasticGraph and love it? We'd love to hear from you! Send us a testimonial.
         </p>
         <div class="font-bold">
-          - Gandalf Skywalker, Software Engineer
+
         </div>
       </div>
     </div>

config/site/src/_layouts/default.html

@@ -5,6 +5,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>{{ page.title }}</title>
+  <meta name="description" content="{{ site.description }}">
   <link rel="stylesheet" href="{{ '/assets/css/main.css' | relative_url }}">
   <link rel="stylesheet" href="{{ '/assets/css/highlight.css' | relative_url }}">
 </head>

config/site/src/getting-started.md

@@ -0,0 +1,244 @@
+---
+layout: markdown
+title: Getting Started with ElasticGraph
+permalink: /getting-started/
+---
+
+Welcome to ElasticGraph! This guide will help you set up ElasticGraph locally, run queries using GraphiQL, and verify the datastore using the OpenSearch Dashboard. By the end of this tutorial, you'll have a working ElasticGraph instance running on your machine.
+
+**Estimated Time to Complete**: Approximately 2 hours
+
+## Prerequisites
+
+Before you begin, ensure you have the following installed on your system:
+
+- **Git**: For cloning repositories.
+- **Docker**: For running services locally.
+- **Ruby (version 3.2 or higher)** and **Bundler**: For running ElasticGraph scripts.
+- **OpenSearch and Kibana**: Included in the Docker setup.
+
+## Step 1: Clone the ElasticGraph Repository
+
+Begin by cloning the ElasticGraph project template from GitHub:
+
+```bash
+git clone <COMING SOON>!
+cd elasticgraph-project-template
+```
+
+## Step 2: Run the Initialization Script
+
+We have an initialization script that sets up your ElasticGraph project with necessary configurations.
+
+Run the following command in your terminal:
+
+```bash
+curl -sL https://raw.githubusercontent.com/<COMING-SOON>/elasticgraph-project-template/main/script/init_eg | bash -s
+```
+
+This script will prompt you for some inputs:
+
+- **Application Name**: Choose a name for your ElasticGraph application.
+- **Dataset Name**: Decide on a name for your dataset (e.g., `customers`).
+
+The script will:
+
+- Set up directory structures.
+- Copy templated files.
+- Install necessary dependencies.
+
+## Step 3: Define Your Schema
+
+ElasticGraph uses schemas to define the structure of your data.
+
+You can skip this part for now if you want to play with the sample schema. Otherwise, follow these steps to define your own schema:
+
+1. **Remove Sample Schema**:
+
+   Delete the sample schema file:
+
+   ```bash
+   rm config/schema/people.rb
+   ```
+
+2. **Create Your Schema**:
+
+   Create a new file in `config/schema/` named after your dataset, for example, `config/schema/customers.rb`.
+
+   Define your schema in this file. Here's a basic example:
+
+   ```ruby
+   module Schema
+     module Customers
+       extend ElasticGraph::Schema
+
+       type :customer do
+         field :id, :string
+         field :name, :string
+         field :email, :string
+       end
+     end
+   end
+   ```
+
+3. **Update Configuration**:
+
+   Ensure that your dataset is correctly referenced in your configuration files.
+
+   - **config/settings/lambda.yaml**:
+
+     Update or add your dataset name under the `datasets` section.
+
+## Step 4: Build and Test Your Project
+
+1. **Install Dependencies**:
+
+   ```bash
+   bundle install
+   ```
+
+2. **Run Rake Tasks**:
+
+   Test your setup by running:
+
+   ```bash
+   bundle exec rake
+   ```
+
+   This command runs all the default tasks to ensure everything is configured correctly.
+
+3. **Fix Any Issues**:
+
+   If you encounter errors, follow the error message prompts to fix anything that isn't set up correctly.
+
+## Step 5: Start ElasticGraph Locally
+
+With Docker running, start your local ElasticGraph instance:
+
+```bash
+bundle exec rake boot_locally
+```
+
+This command will:
+
+- Build Docker images for ElasticGraph and OpenSearch.
+- Start the services using Docker Compose.
+- Populate your dataset with fake data.
+- Launch GraphiQL in your default web browser.
+
+## Step 6: Use GraphiQL to Run Queries
+
+GraphiQL is a graphical interactive in-browser GraphQL IDE.
+
+Once GraphiQL opens in your browser, you can start running queries against your local ElasticGraph instance.
+
+### Example Query
+
+Replace `customers` and fields with those relevant to your schema.
+
+```graphql
+query Test {
+  customers {
+    totalEdgeCount
+    nodes {
+      id
+      name
+      email
+    }
+  }
+}
+```
+
+**Explanation**:
+
+- **customers**: The dataset you defined.
+- **totalEdgeCount**: Returns the total number of records.
+- **nodes**: An array of data nodes.
+- **fields inside nodes**: The fields you've defined in your schema.
+
+Learn more about ElasticGraph queries in the [Query API documentation]({{ '/query-api' | relative_url }}).
+
+## Step 7: Access the OpenSearch Dashboard (aka Elasticsearch Kibana)
+
+With `bundle exec rake boot_locally` still running:
+
+1. **Open Dashboard**:
+
+   Navigate to [http://localhost:5601](http://localhost:5601) in your web browser.
+
+2. **Explore Your Data**:
+
+   - Click on **"Dev Tools"** in the Kibana sidebar.
+   - Run the following commands to explore your indices:
+
+     ```elasticsearch
+     GET /_cat/indices?v
+     GET /_cat/shards?v
+     GET /_cat/templates?v
+     ```
+
+3. **Search Your Data**:
+
+   Replace `your-index-name` with the name of your index (usually your dataset name).
+
+   ```elasticsearch
+   GET /your-index-name/_search
+   ```
+
+   This will return all documents in your index. Normally you'll query via GraphiQL, but this is useful for debugging.
+
+
+## Troubleshooting
+
+- **Docker Issues**:
+
+  - Ensure Docker is running.
+  - If ports are already in use, stop other services or adjust the port settings in `docker-compose.yml`.
+
+- **GraphiQL Not Loading**:
+
+  - Verify that the local server is running.
+  - Check for errors in the terminal where `boot_locally` is running.
+
+- **Schema Errors**:
+
+  - Ensure your schema files are correctly formatted.
+  - Check for typos in field names and types.
+
+- **Kibana Not Accessible**:
+
+  - Confirm that Kibana is running (`docker ps` to see running containers).
+  - Check if another service is using port `5601`.
+
+## Next Steps
+
+Congratulations! You've set up ElasticGraph locally and run your first queries.
+
+- **Explore Advanced Features**:
+
+  - Learn about custom resolvers.
+  - Implement complex queries and mutations.
+
+- **Connect to Real Data Sources**:
+
+  - Replace fake data with real data ingestion pipelines.
+  - Integrate with databases or APIs.
+
+- **Contribute to ElasticGraph**:
+
+  - Report issues or suggest features on GitHub.
+  - Submit pull requests to improve the project.
+
+## Resources
+
+- **ElasticGraph Documentation**: [{{ '/docs/main' | absolute_url }}]({{ '/docs/main' | relative_url }})
+- **GraphQL Introduction**: [https://graphql.org/learn/](https://graphql.org/learn/)
+- **OpenSearch Documentation**: [https://opensearch.org/docs/latest/](https://opensearch.org/docs/latest/)
+
+## Feedback
+
+We'd love to hear your feedback. If you encounter any issues or have suggestions, please open an issue on our GitHub repository.
+
+---
+
+*Happy coding with ElasticGraph!*