Style src pages (#5)
Co-authored-by: 317brian <53799971+317brian@users.noreply.github.com>
Co-authored-by: brian.le <brian.le@imply.io>
diff --git a/docs/latest/design/processes.md b/docs/latest/design/processes.md
index 7607ae4..d63926d 100644
--- a/docs/latest/design/processes.md
+++ b/docs/latest/design/processes.md
@@ -43,7 +43,7 @@
* **Query**
* **Data**
-
+
This section describes the Druid processes and the suggested Master/Query/Data server organization, as shown in the architecture diagram above.
diff --git a/src/pages/community/index.mdx b/src/pages/community/index.mdx
index 219f1b0..bff9b98 100644
--- a/src/pages/community/index.mdx
+++ b/src/pages/community/index.mdx
@@ -4,7 +4,11 @@
layout: simple_page
canonical: 'https://druid.apache.org/community/'
---
-# Apache Druid Community
+<div class="simple-header">
+ <div class="container">
+ <h1>Apache Druid Community</h1>
+ </div>
+</div>
## Community
diff --git a/src/pages/downloads.mdx b/src/pages/downloads.mdx
index 5d051a9..d7190bf 100644
--- a/src/pages/downloads.mdx
+++ b/src/pages/downloads.mdx
@@ -4,7 +4,11 @@
import { Releases } from "../../static/js/version";
-# Download
+<div class="simple-header">
+ <div class="container">
+ <h1>Download</h1>
+ </div>
+</div>
## Latest release
diff --git a/src/pages/druid-powered.md b/src/pages/druid-powered.md
index 712a3ff..3b9427e 100644
--- a/src/pages/druid-powered.md
+++ b/src/pages/druid-powered.md
@@ -2,7 +2,11 @@
title: Powered by Apache Druid
---
-# Powered by Apache Druid
+<div class="simple-header">
+ <div class="container">
+ <h1>Powered by Apache Druid</h1>
+ </div>
+</div>
:::tip
diff --git a/src/pages/technology.md b/src/pages/technology.md
index aefc842..951f0d9 100644
--- a/src/pages/technology.md
+++ b/src/pages/technology.md
@@ -3,19 +3,22 @@
canonical: 'https://druid.apache.org/technology'
---
-# Technology
+<div class="simple-header">
+ <div class="container">
+ <h1>Technology</h1>
+ </div>
+</div>
Apache Druid is used to power real-time analytics applications that require fast queries at scale and under load on streaming and batch data. Druid features a unique distributed architecture across its ingestion, storage, and query layer to handle the scale needed for large aggregations with the performance needed for applications.
-## Architecture
-
<div class="image-large">
<img src="img/diagram-7.png" />
</div>
-Druid is a services-based architecture that consists of independently scalable services for ingestion, querying, and orchestration, each of which can be fine-tuned to optimize cluster resources for mixed use cases and workloads. For example, more resources can be directed to Druid’s query service while providing less resources to ingestion as workloads change. Druid services can fail without impact on the operations of other services.
-A Druid deployment is a scalable cluster of commodity hardware with node types that serve specific functions. In a small configuration, all of these nodes can run together on a single server (or even a laptop). For larger deployments, one or more servers are dedicated to each node type and can scale to thousands of nodes for higher throughput requirements.
+Druid is a services-based architecture that consists of independently scalable services for ingestion, querying, and orchestration, each of which can be fine-tuned to optimize cluster resources for mixed use cases and workloads. For example, more resources can be directed to Druid’s query service while providing less resources to ingestion as workloads change. Druid services can fail without impact on the operations of other services.
+
+A Druid deployment is a scalable cluster of commodity hardware with node types that serve specific functions. In a small configuration, all of these nodes can run together on a single server (or even a laptop). For larger deployments, one or more servers are dedicated to each node type and can scale to thousands of nodes for higher throughput requirements.
<ul >
<li>Master Nodes govern data availability and ingestion</li>
@@ -27,6 +30,7 @@
For more information, please visit [our docs page](../../../docs/design).
+
## Ingestion Layer
In Druid, ingestion, sometimes called indexing, is loading data into tables. Druid reads data from source systems, whether files or streams, and stores the data in segments.
@@ -37,10 +41,12 @@
<img alt="Stream Ingestion Layer" src="img/ingestion_layer_stream_batch.png" />
</div>
-<h3>Stream Data</h3>
-Druid was designed from the outset for rapid ingestion and immediate querying of stream data upon delivery. No connectors are needed as Druid includes inherent exactly-once ingestion for data streams using Apache Kafka® and Amazon Kinesis APIs. Druid’s continuous backup into deep storage also ensures a zero RPO for stream data.
+### Stream Data
-<h3>Batch Data</h3>
+Druid was designed from the outset for rapid ingestion and immediate querying of stream data upon delivery. No connectors are needed as Druid includes inherent exactly-once ingestion for data streams using Apache Kafka® and Amazon Kinesis APIs. Druid’s continuous backup into deep storage also ensures a zero RPO for stream data.
+
+### Batch Data
+
Druid easily ingests data from object stores including HDFS, Amazon S3, Azure Blob, and Google Cloud Storage as well as data files from databases and other sources. The data files can be in a number of common formats, including JSON, CSV, TSV, Parquet, ORC, Avro, and Protobuf. Druid supports both SQL batch import and in-database transformations.
For more information, please visit [our docs page](/docs/latest/ingestion/index.html).
@@ -67,7 +73,7 @@
<img alt="Interactive Querying Scatter Gather Diagram" src="img/scatter_gather_diagram.png" />
</div>
-First, the query engine prunes the list of segments, creating a list of which segments are relevant to the query based on time-internals and other filters. Next, queries are divided into discrete pieces and sent in parallel to the data nodes that are managing each relevant segment or copy of that segment (“scatter”). On the data nodes, the sub-queries are processed and sent back to the query nodes to merge the final result set (“gather”).
+First, the query engine prunes the list of segments, creating a list of which segments are relevant to the query based on time-internals and other filters. Next, queries are divided into discrete pieces and sent in parallel to the data nodes that are managing each relevant segment or copy of that segment (“scatter”). On the data nodes, the sub-queries are processed and sent back to the query nodes to merge the final result set (“gather”).
Scatter/gather works from the smallest single server cluster (all of Druid on one server) to clusters with thousands of servers, enabling sub-second performance for most queries even with very large data sets of multiple petabytes.
diff --git a/src/pages/use-cases.md b/src/pages/use-cases.md
index fc36665..42f8ae1 100644
--- a/src/pages/use-cases.md
+++ b/src/pages/use-cases.md
@@ -3,7 +3,11 @@
canonical: 'https://druid.apache.org/use-cases'
---
-# Use cases
+<div class="simple-header">
+ <div class="container">
+ <h1>Use cases</h1>
+ </div>
+</div>
## Power real-time analytics, data applications, and more
@@ -12,17 +16,15 @@
Common application areas for Druid include:
<div class="fancy-list">
-
-{{"
-* Clickstream analytics (web and mobile analytics)
-* Risk/fraud analysis
-* Network telemetry analytics (network performance monitoring)
-* Server metrics storage
-* Supply chain analytics (manufacturing metrics)
-* Application performance metrics
-* Business intelligence / OLAP
-" | markdownify }}
-
+ <ui>
+ <li>Clickstream analytics (web and mobile analytics)</li>
+ <li>Risk/fraud analysis</li>
+ <li>Network telemetry analytics (network performance monitoring)</li>
+ <li>Server metrics storage</li>
+ <li>Supply chain analytics (manufacturing metrics)</li>
+ <li>Application performance metrics</li>
+ <li>Business intelligence / OLAP</li>
+ </ui>
</div>
Some of these use cases are described in more detail below. For an overview of technical differentiation, please see the [FAQ](./faq.md).
@@ -31,7 +33,6 @@
<div class="zigzag-feature">
<span class="fa fa-users fa"></span>
-{{"
## User activity and behavior
Druid is often used for clickstreams, viewstreams, and activity streams.
@@ -44,14 +45,12 @@
Druid’s search and filter capabilities enable rapid, easy drill-downs of users along any set of attributes.
Measure and compare user activity by age, gender, location, and much more.
-" | markdownify }}
</div>
<div class="zigzag-feature">
<span class="fa fa-project-diagram fa"></span>
-{{"
## Network flows
Druid is commonly used to collect and analyze network flows.
@@ -60,14 +59,13 @@
Druid helps with network flow analysis by being able to ingest large amounts of flow records, and by being able to group or rank across dozens of attributes at query time at interactive speeds.
These attributes often include core attributes like IP and port, as well as attributes added through enhancement such as geolocation, service, application, facility, and ASN.
Druid's ability to handle flexible schemas means that you can add any attributes you want.
-" | markdownify }}
</div>
<div class="zigzag-feature">
<span class="fa fa-comments-dollar fa"></span>
-{{"
+
## Digital marketing
Druid is commonly used to store and query online advertising data.
@@ -77,14 +75,12 @@
Druid has seen substantial production use for this type of data and the largest users in the world have petabytes of data stored on thousands of servers.
Druid can be used to compute impressions, clicks, eCPM, and key conversion metrics, filtered on publisher, campaign, user information, and dozens of other dimensions supporting full slice and dice capability.
-" | markdownify }}
</div>
<div class="zigzag-feature">
<span class="fa fa-tachometer-alt fa"></span>
-{{"
## Application performance management
Druid is often used to track the operational data generated by applications.
@@ -94,14 +90,13 @@
Unlike many traditional solutions, there are few limits to the volume, complexity, and throughput of the data.
Rapidly analyze application events with thousands of attributes, and compute complex metrics on load, performance, and usage.
For example, rank API endpoints based on 95th percentile query latency, and slice and dice how these metrics change based on any ad-hoc set of attributes such as time of day, user demographic, or datacenter location.
-" | markdownify }}
</div>
<div class="zigzag-feature">
<span class="fa fa-thermometer-three-quarters fa"></span>
-{{"
+
## IoT and device metrics
Druid can be used as a time series solution for server and device metrics.
@@ -115,14 +110,12 @@
You can include millions of unique dimension values with your metrics, and arbitrarily group and filter on any combination of dimensions (dimensions in Druid are similar to tags in TSDBs).
You can group and rank on tags, and compute a variety of complex metrics.
Furthermore, you search and filter on tag values orders of magnitude faster than in traditional timeseries databases.
-" | markdownify }}
</div>
<div class="zigzag-feature">
<span class="fa fa-chart-pie fa"></span>
-{{"
## OLAP and business intelligence
Druid is commonly used for BI use cases.
@@ -132,7 +125,6 @@
Druid is a great fit if you need a user-facing application and you want your users to be able to run their own self service drill-down queries.
You can either develop your own application using Druid's API or use one of the [many off the shelf applications](/libraries) that work with Druid.
-" | markdownify }}
</div>
-</div>
+</div>
\ No newline at end of file
diff --git a/static/css/base.css b/static/css/base.css
index d93e634..da8e7cf 100644
--- a/static/css/base.css
+++ b/static/css/base.css
@@ -180,3 +180,109 @@
.features .feature h5 {
margin-bottom: 0;
font-size: 1.2em; }
+
+.simple-header {
+ padding: 34px 0 34px;
+ margin-bottom: 24px;
+ color: #1c1c26;
+ text-align: center;
+ overflow: hidden; }
+ .simple-header h1 {
+ margin-top: 14px;
+ font-size: 2.8em; }
+
+.fancy-list {
+ margin-top: 22px;
+ margin-bottom: 22px;}
+ .fancy-list li {
+ list-style: none;
+ font-weight: 600;
+ margin-left: 0;
+ padding-left: 30px;
+ margin-bottom: 8px;}
+ .fancy-list li::before {
+ content: "";
+ position: absolute;
+ top: 5px;
+ left: 0;
+ width: 16px;
+ height: 16px;
+ border-radius: 50%;
+ background: #9caeff;
+ }
+
+
+.zigzag-features {
+ margin-bottom: 100px;
+ margin-top: 38px; }
+ .zigzag-features .zigzag-feature {
+ margin-top: 100px; }
+ .zigzag-features .zigzag-feature:nth-child(3n-2) .fa {
+ background: #cbd5ff;
+ color: #5062B4; }
+ .zigzag-features .zigzag-feature:nth-child(3n-1) .fa {
+ background: #a7f1d9;
+ color: #2C8265; }
+ .zigzag-features .zigzag-feature:nth-child(3n) .fa {
+ background: #ffd8a8;
+ color: #926226; }
+ .zigzag-features .zigzag-feature:nth-child(2n-1) {
+ padding-right: 300px;
+ }
+ .zigzag-features .zigzag-feature:nth-child(2n-1) .fa {
+ right: 0;
+ }
+ .zigzag-features .zigzag-feature:nth-child(2n) {
+ padding-left: 300px;
+ }
+ .zigzag-features .zigzag-feature:nth-child(2n) .fa {
+ left: 0;
+ }
+ .zigzag-features .zigzag-feature .fa {
+ top: 0;
+ position: absolute;
+ width: 220px;
+ height: 220px;
+ line-height: 220px;
+ border-radius: 50%;
+ text-align: center;
+ font-size: 70px;
+ background: #cbd5ff;
+ color: #5062B4; }
+
+
+
+@media (max-width: 840px) {
+ .zigzag-feature .fa {
+ display: none;
+ /* position: relative; */
+ /* margin-left: auto;
+ margin-right: auto;
+ margin-bottom: 40px; */
+ }
+
+ .zigzag-features .zigzag-feature:nth-child(2n-1) {
+ padding-right: 0;
+ }
+
+ .zigzag-features .zigzag-feature:nth-child(2n) {
+ padding-left: 0;
+ }
+}
+
+
+@media (max-width: 440px) {
+ .zigzag-features {
+ margin-bottom: 70px;
+ }
+ .zigzag-feature {
+ margin-top: 70px;
+ }
+ .zigzag-feature .fa {
+ /* width: 180px;
+ height: 180px;
+ line-height: 180px;
+ font-size: 60px; */
+ display: none;
+ }
+}
