Setup website with Jekyll (#306)

JuulLabs · Jan 3, 2024 · 7a5d5e2 · 7a5d5e2
1 parent 6e047e3
commit 7a5d5e2
Show file tree

Hide file tree

Showing 41 changed files with 2,513 additions and 80 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -11,3 +11,10 @@ ktlint_standard_property-naming = disabled
 # `string-template-indent` is disabled because it depends on `multiline-expression-wrapping`.
 ktlint_standard_multiline-expression-wrapping = disabled
 ktlint_standard_string-template-indent = disabled
+
+[sample/**/*.{kt,kts}]
+ktlint_standard_no-multi-spaces = disabled
+
+# `if-else-wrapping` is disabled because it depends on `discouraged-comment-location`.
+ktlint_standard_discouraged-comment-location = disabled
+ktlint_standard_if-else-wrapping = disabled
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -13,11 +13,17 @@ jobs:
     steps:
       - uses: actions/checkout@v4
       - uses: gradle/wrapper-validation-action@v1
+
       - uses: actions/setup-java@v4
         with:
           distribution: 'temurin'
           java-version: '17'
 
+      - uses: ruby/setup-ruby@v1
+        with:
+          ruby-version: '3.2'
+          bundler-cache: true
+
       - name: assemble
         uses: gradle/gradle-build-action@v2
         with:
@@ -44,3 +50,8 @@ jobs:
             -PsigningInMemoryKey=${{ secrets.SIGNING_KEY }}
             -PsigningInMemoryKeyPassword=${{ secrets.SIGNING_PASSWORD }}
             publishToMavenLocal
+
+      - name: Website
+        uses: gradle/gradle-build-action@v2
+        with:
+          arguments: :website:browserBuild
diff --git a/.github/workflows/gh-pages.yml b/.github/workflows/gh-pages.yml
@@ -2,28 +2,45 @@ name: GitHub Pages
 on:
   push:
     branches:
-      - main
+      - $default-branch
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
 
 env:
   GRADLE_OPTS: -Dorg.gradle.daemon=false
+  JEKYLL_ENV: production
 
 jobs:
   deploy:
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
       - uses: gradle/wrapper-validation-action@v1
+
+      - uses: actions/configure-pages@v4
+        id: pages
+
       - uses: actions/setup-java@v4
         with:
           distribution: 'temurin'
           java-version: '17'
 
-      - name: dokkaHtmlMultiModule
+      - uses: ruby/setup-ruby@v1
+        with:
+          ruby-version: '3.2'
+          bundler-cache: true
+
+      - name: Website
         uses: gradle/gradle-build-action@v2
         with:
           cache-read-only: true
-          arguments: dokkaHtmlMultiModule
+          arguments: |
+            -Pbaseurl=${{ steps.pages.outputs.base_path }}
+            :website:browserBuild
 
       - uses: JamesIves/github-pages-deploy-action@v4
         with:
-          folder: build/gh-pages
+          folder: website/_site
diff --git a/README.md b/README.md
@@ -1,4 +1,5 @@
 ![badge][badge-android]
+![badge][badge-ios]
 ![badge][badge-js]
 ![badge][badge-jvm]
 [![codecov](https://codecov.io/gh/JuulLabs/krayon/branch/main/graph/badge.svg?token=y8btx3pTlr)](https://codecov.io/gh/JuulLabs/krayon)
@@ -7,42 +8,7 @@
 
 Multiplatform drawing library. Provides a multiplatform canvas and chart rendering framework.
 
-## Modules
-
-### Aggregate Modules
-
-| Module                           | Description                                                                                                                                                                                   |
-|----------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
-| [`box`](box)                     | Module exporting all other published modules (except `compose`). Useful for getting started quickly if your builds include dead-code elimination. Also includes some cross-module extensions. |
-| [`sample`](sample) (unpublished) | Sample application showing use of the library with common drawing code and logic across Android and JS targets.                                                                               |
-
-### Low Level Modules
-
-These modules provide an unopinionated multiplatform experience with simple, low-level primitives. Drawing with a Krayon
-`Kanvas` should feel very similar to drawing directly to an Android `Canvas` or HTML/JS `CanvasRenderingContext2D`.
-
-| Module             | Description                                                                                        |
-|--------------------|----------------------------------------------------------------------------------------------------|
-| [`color`](color)   | Multiplatform color representation and operations.                                                 |
-| [`kanvas`](kanvas) | `Kanvas` interface with platform specific (Android, HTML) and multiplatform (SVG) implementations. |
-
-### High Level Modules
-
-These modules provide functionality heavily inspired by, and often directly translated from, D3. Many of the modules aim
-to provide a 1-to-1 mapping with a D3 library, such as `axis` or `selection`. Other modules, like `element`, attempt to
-fill in gaps required to support this, like `Element` being used instead of the DOM to enable non-web targets.
-
-| Module                         | Description                                                                                  |
-|--------------------------------|----------------------------------------------------------------------------------------------|
-| [`axis`](axis)                 | Component for rendering reference marks as part of a chart.                                  |
-| [`color`](color)               | Multiplatform color representation and operations.                                           |
-| [`compose`](compose)           | Compose Multiplatform `Kanvas` and `ElementView` composables. Not included in `box`.         |
-| [`element`](element)           | `Element` class used to provide an mutable object-tree of drawing operation.                 |
-| [`element-view`](element-view) | Android specific `View` for rendering an `Element` off the main thread.                      |
-| [`interpolate`](interpolate)   | Functionality for blending/picking values between start and stop values.                     |
-| [`kanvas`](kanvas)             | Unopinionated canvas with platform specific (Android, HTML) and multiplatform (SVG) targets. |
-| [`selection`](selection)       | Data-driven transformation of the `Element`-tree.                                            |
-| [`shape`](shape)               | Visualization support for generating complex shapes from data, such as line charts.          |
+See the [project website](https://juullabs.github.io/krayon/) for documentation and APIs.
 
 # License
 

diff --git a/build.gradle.kts b/build.gradle.kts
@@ -38,10 +38,6 @@ allprojects {
     }
 }
 
-tasks.dokkaHtmlMultiModule.configure {
-    outputDirectory.set(buildDir.resolve("gh-pages"))
-}
-
 // Remove this when we can update Kotlin/Compose to something that doesn't need the M1 workaround.
 rootProject.plugins.withType<org.jetbrains.kotlin.gradle.targets.js.nodejs.NodeJsRootPlugin> {
     rootProject.the<org.jetbrains.kotlin.gradle.targets.js.nodejs.NodeJsRootExtension>().nodeVersion = "16.0.0"

diff --git a/sample/src/androidMain/kotlin/com/juul/krayon/sample/ComposeLineActivity.kt b/sample/src/androidMain/kotlin/com/juul/krayon/sample/ComposeLineActivity.kt
@@ -8,6 +8,8 @@ import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
 import com.juul.krayon.compose.ElementView
+import com.juul.krayon.sample.data.movingSineWave
+import com.juul.krayon.sample.updaters.lineChart
 
 class ComposeLineActivity : AppCompatActivity() {
 

diff --git a/sample/src/androidMain/kotlin/com/juul/krayon/sample/LineActivity.kt b/sample/src/androidMain/kotlin/com/juul/krayon/sample/LineActivity.kt
@@ -3,7 +3,9 @@ package com.juul.krayon.sample
 import android.os.Bundle
 import androidx.appcompat.app.AppCompatActivity
 import com.juul.krayon.element.view.ElementViewAdapter
+import com.juul.krayon.sample.data.movingSineWave
 import com.juul.krayon.sample.databinding.ActivityLineBinding
+import com.juul.krayon.sample.updaters.lineChart
 
 class LineActivity : AppCompatActivity() {
 

diff --git a/sample/src/commonMain/kotlin/Point.kt b/sample/src/commonMain/kotlin/Point.kt
@@ -1,6 +1,6 @@
 package com.juul.krayon.sample
 
-internal data class Point(
+data class Point(
     val x: Float,
     val y: Float,
 )
diff --git a/sample/src/commonMain/kotlin/SineWave.kt → ...le/src/commonMain/kotlin/data/SineWave.kt b/sample/src/commonMain/kotlin/SineWave.kt → ...le/src/commonMain/kotlin/data/SineWave.kt
@@ -1,5 +1,6 @@
-package com.juul.krayon.sample
+package com.juul.krayon.sample.data
 
+import com.juul.krayon.sample.Point
 import kotlinx.coroutines.currentCoroutineContext
 import kotlinx.coroutines.flow.Flow
 import kotlinx.coroutines.flow.flow
@@ -8,11 +9,9 @@ import kotlin.math.PI
 import kotlin.math.sin
 import kotlin.time.Duration
 import kotlin.time.Duration.Companion.seconds
-import kotlin.time.ExperimentalTime
 import kotlin.time.TimeSource
 
 /** A flow that emits data for a continuously rolling sine wave. By default, completes a full cycle in 10 seconds. */
-@OptIn(ExperimentalTime::class)
 internal fun movingSineWave(
     period: Duration = 10.seconds,
     samples: Int = 50,

diff --git a/sample/src/commonMain/kotlin/LineChart.kt → ...c/commonMain/kotlin/updaters/LineChart.kt b/sample/src/commonMain/kotlin/LineChart.kt → ...c/commonMain/kotlin/updaters/LineChart.kt
@@ -1,4 +1,4 @@
-package com.juul.krayon.sample
+package com.juul.krayon.sample.updaters
 
 import com.juul.krayon.axis.axisBottom
 import com.juul.krayon.axis.axisLeft
@@ -14,6 +14,7 @@ import com.juul.krayon.element.TransformElement
 import com.juul.krayon.element.withKind
 import com.juul.krayon.kanvas.Paint
 import com.juul.krayon.kanvas.Transform
+import com.juul.krayon.sample.Point
 import com.juul.krayon.scale.domain
 import com.juul.krayon.scale.extent
 import com.juul.krayon.scale.range

diff --git a/sample/src/desktopMain/kotlin/Main.kt b/sample/src/desktopMain/kotlin/Main.kt
@@ -23,10 +23,10 @@ import androidx.compose.ui.unit.dp
 import androidx.compose.ui.window.singleWindowApplication
 import com.juul.krayon.compose.ElementView
 import com.juul.krayon.sample.PieChart
+import com.juul.krayon.sample.data.movingSineWave
 import com.juul.krayon.sample.interactiveTreeChart
-import com.juul.krayon.sample.lineChart
-import com.juul.krayon.sample.movingSineWave
 import com.juul.krayon.sample.pieChart
+import com.juul.krayon.sample.updaters.lineChart
 import kotlin.math.PI
 
 fun main() = singleWindowApplication {

diff --git a/sample/src/jsMain/kotlin/SetupInteractiveChart.kt b/sample/src/jsMain/kotlin/SetupInteractiveChart.kt
@@ -0,0 +1,10 @@
+import com.juul.krayon.element.view.ElementViewAdapter
+import com.juul.krayon.element.view.attachAdapter
+import com.juul.krayon.sample.interactiveTreeChart
+import org.w3c.dom.HTMLCanvasElement
+
+@JsExport
+fun setupInteractiveChart(element: HTMLCanvasElement) {
+    val (flow, update) = interactiveTreeChart()
+    element.attachAdapter(ElementViewAdapter(flow, update))
+}
diff --git a/sample/src/jsMain/kotlin/SetupMovingSineWave.kt b/sample/src/jsMain/kotlin/SetupMovingSineWave.kt
@@ -0,0 +1,15 @@
+import com.juul.krayon.element.view.ElementViewAdapter
+import com.juul.krayon.element.view.attachAdapter
+import com.juul.krayon.sample.data.movingSineWave
+import com.juul.krayon.sample.updaters.lineChart
+import org.w3c.dom.HTMLCanvasElement
+
+@JsExport
+fun setupMovingSineWave(element: HTMLCanvasElement) {
+    element.attachAdapter(
+        ElementViewAdapter(
+            dataSource = movingSineWave(),
+            updater = ::lineChart,
+        ),
+    )
+}
diff --git a/sample/src/jsMain/kotlin/Main.kt → sample/src/jsMain/kotlin/SetupPieChart.kt b/sample/src/jsMain/kotlin/Main.kt → sample/src/jsMain/kotlin/SetupPieChart.kt
@@ -1,7 +1,7 @@
-package com.juul.krayon.sample
-
 import com.juul.krayon.element.view.ElementViewAdapter
 import com.juul.krayon.element.view.attachAdapter
+import com.juul.krayon.sample.PieChart
+import com.juul.krayon.sample.pieChart
 import kotlinx.browser.document
 import kotlinx.coroutines.flow.MutableStateFlow
 import kotlinx.coroutines.flow.combine
@@ -11,23 +11,8 @@ import kotlin.math.PI
 
 private val arcs = listOf(1f, 2f, 3f, 4f, 5f, 6f)
 
-fun main() {
-    setupLineChart()
-    setupPieChart()
-    setupInteractiveChart()
-}
-
-private fun setupLineChart() {
-    (document.getElementById("line-canvas") as HTMLCanvasElement)
-        .attachAdapter(
-            ElementViewAdapter(
-                dataSource = movingSineWave(),
-                updater = ::lineChart,
-            ),
-        )
-}
-
-private fun setupPieChart() {
+@JsExport
+fun setupPieChart(element: HTMLCanvasElement) {
     fun configure(id: String, min: Float, max: Float, state: MutableStateFlow<Float>) {
         val input = document.getElementById(id) as HTMLInputElement
         input.min = min.toString()
@@ -64,16 +49,10 @@ private fun setupPieChart() {
             PieChart(arcs, startAngle, endAngle, cornerRadius, paddingAngle, innerRadius)
         }
 
-    (document.getElementById("pie-canvas") as HTMLCanvasElement).attachAdapter(
+    element.attachAdapter(
         ElementViewAdapter(
             dataSource = charts,
             updater = ::pieChart,
         ),
     )
 }
-
-private fun setupInteractiveChart() {
-    val canvasElement = document.getElementById("interaction-canvas") as HTMLCanvasElement
-    val (flow, update) = interactiveTreeChart()
-    canvasElement.attachAdapter(ElementViewAdapter(flow, update))
-}
diff --git a/sample/src/jsMain/kotlin/tutorial/BarChart.kt b/sample/src/jsMain/kotlin/tutorial/BarChart.kt
@@ -0,0 +1,52 @@
+package tutorial
+
+import com.juul.krayon.color.blue
+import com.juul.krayon.element.LineElement
+import com.juul.krayon.element.RootElement
+import com.juul.krayon.kanvas.HtmlKanvas
+import com.juul.krayon.kanvas.Paint
+import com.juul.krayon.scale.domain
+import com.juul.krayon.scale.range
+import com.juul.krayon.scale.scale
+import com.juul.krayon.selection.asSelection
+import com.juul.krayon.selection.data
+import com.juul.krayon.selection.each
+import com.juul.krayon.selection.join
+import com.juul.krayon.selection.selectAll
+import org.w3c.dom.HTMLCanvasElement
+
+@JsExport
+fun setupBarChart(element: HTMLCanvasElement) {
+    val (width, height) = element.size // 1
+    val data = (1..10).toList()        // 2
+
+    val x = scale()                    // 3
+        .domain(0, data.count() - 1)   // 3
+        .range(0f, width)              // 3
+
+    val y = scale()                    // 4
+        .domain(0, data.max())         // 4
+        .range(height, 0f)             // 4
+
+    val barPaint = Paint.Stroke(       // 5
+        color = blue,                  // 5
+        width = x.scale(1),            // 5
+    )
+
+    val root = RootElement()           // 6
+    root.asSelection()                 // 7
+        .selectAll(LineElement)        // 8
+        .data(data)                    // 9
+        .join(LineElement)             // 10
+        .each { (data, index) ->       // 11
+            startX = x.scale(index)    // 12
+            startY = y.scale(0)        // 12
+            endX = x.scale(index)      // 12
+            endY = y.scale(data)       // 12
+            paint = barPaint           // 13
+        }
+    root.draw(HtmlKanvas(element))     // 14
+}
+
+private val HTMLCanvasElement.size
+    get() = width.toFloat() to height.toFloat()
diff --git a/sample/src/jsMain/kotlin/tutorial/Line1.kt b/sample/src/jsMain/kotlin/tutorial/Line1.kt
@@ -0,0 +1,23 @@
+package tutorial
+
+import com.juul.krayon.element.LineElement
+import com.juul.krayon.element.RootElement
+import com.juul.krayon.kanvas.HtmlKanvas
+import com.juul.krayon.selection.append
+import com.juul.krayon.selection.asSelection
+import com.juul.krayon.selection.each
+import org.w3c.dom.HTMLCanvasElement
+
+@JsExport
+fun setupLine1(element: HTMLCanvasElement) {
+    val root = RootElement()       // 1
+    root.asSelection()             // 2
+        .append(LineElement)       // 3
+        .each {
+            startX = 10f           // 4
+            startY = 10f           // 4
+            endX = 90f             // 4
+            endY = 90f             // 4
+        }
+    root.draw(HtmlKanvas(element)) // 5
+}