Skip to content

Commit 187b2ef

Browse files
NathanWalkerNathanWalker
committed
feat: canvas docs
1 parent 61eec6b commit 187b2ef

17 files changed

Lines changed: 915 additions & 118 deletions

‎.github/workflows/deploy.yml‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
name: Deploy to Cloudflare Pages
22

33
on:
4+
workflow_dispatch:
45
push:
56
branches:
67
- main
@@ -9,12 +10,14 @@ on:
910
- main
1011

1112
jobs:
12-
deploy:
13+
build-and-deploy:
1314
runs-on: ubuntu-latest
1415
permissions:
1516
contents: read
1617
deployments: write
1718
name: Deploy to Cloudflare Pages
19+
env:
20+
CLOUDFLARE_PAGES_PROJECT: canvas-nativescript-org
1821

1922
steps:
2023
- name: Checkout
@@ -32,9 +35,18 @@ jobs:
3235
- name: Build VitePress site
3336
run: npm run build
3437

35-
- name: Deploy to Cloudflare Pages
38+
- name: Deploy production to Cloudflare Pages
39+
if: github.event_name != 'pull_request'
3640
uses: cloudflare/wrangler-action@v3
3741
with:
3842
apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
3943
accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
40-
command: pages deploy .vitepress/dist --project-name=plugins-nstudio-io
44+
command: pages deploy .vitepress/dist --project-name=${{ env.CLOUDFLARE_PAGES_PROJECT }} --branch=main
45+
46+
- name: Deploy preview to Cloudflare Pages
47+
if: github.event_name == 'pull_request' && github.event.pull_request.head.repo.full_name == github.repository
48+
uses: cloudflare/wrangler-action@v3
49+
with:
50+
apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
51+
accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
52+
command: pages deploy .vitepress/dist --project-name=${{ env.CLOUDFLARE_PAGES_PROJECT }} --branch=pr-${{ github.event.pull_request.number }}

‎.vitepress/config.ts‎

Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@ import { defineConfig } from 'vitepress';
33
// https://vitepress.dev/reference/site-config
44
export default defineConfig({
55
lang: 'en-US',
6-
title: 'NativeScript Packages',
7-
description: 'Documentation for NativeScript canvas ecosystem packages, including @nativescript/canvas and @nativescript/audio-context.',
6+
title: 'NativeScript Canvas',
7+
description: 'Canvas APIs, WebGL/WebGPU examples, and NativeScript rendering guides for @nativescript/canvas.',
88

99
srcDir: './content',
1010
cleanUrls: true,
@@ -22,24 +22,28 @@ export default defineConfig({
2222
['link', { rel: 'icon', type: 'image/svg+xml', href: '/logo.svg' }],
2323
['meta', { name: 'theme-color', content: '#F75930' }],
2424
['meta', { property: 'og:type', content: 'website' }],
25-
['meta', { property: 'og:site_name', content: 'NativeScript Canvas Packages' }],
26-
['meta', { property: 'og:title', content: 'NativeScript Canvas Packages' }],
27-
['meta', { property: 'og:description', content: 'Documentation for @nativescript/canvas, @nativescript/audio-context, and related NativeScript canvas ecosystem packages.' }],
28-
['meta', { property: 'og:image', content: 'https://plugins.nstudio.io/nstudio-plugins-meta.png' }],
25+
['meta', { property: 'og:site_name', content: 'NativeScript Canvas' }],
26+
['meta', { property: 'og:title', content: 'NativeScript Canvas' }],
27+
['meta', { property: 'og:description', content: 'Canvas APIs, WebGL/WebGPU examples, and NativeScript rendering guides for @nativescript/canvas.' }],
28+
['meta', { property: 'og:url', content: 'https://canvas.nativescript.org' }],
29+
['meta', { property: 'og:image', content: 'https://canvas.nativescript.org/og/canvas-social.png' }],
30+
['meta', { property: 'og:image:secure_url', content: 'https://canvas.nativescript.org/og/canvas-social.png' }],
2931
['meta', { property: 'og:image:width', content: '1200' }],
3032
['meta', { property: 'og:image:height', content: '630' }],
31-
['meta', { property: 'og:url', content: 'https://plugins.nstudio.io' }],
33+
['meta', { property: 'og:image:alt', content: 'NativeScript Canvas - Native Canvas. Real pixels.' }],
3234
['meta', { name: 'twitter:card', content: 'summary_large_image' }],
33-
['meta', { name: 'twitter:title', content: 'NativeScript Canvas Packages' }],
34-
['meta', { name: 'twitter:description', content: 'Documentation for @nativescript/canvas, @nativescript/audio-context, and related NativeScript canvas ecosystem packages.' }],
35-
['meta', { name: 'twitter:image', content: 'https://plugins.nstudio.io/nstudio-plugins-meta.png' }],
35+
['meta', { name: 'twitter:title', content: 'NativeScript Canvas' }],
36+
['meta', { name: 'twitter:description', content: 'Canvas APIs, WebGL/WebGPU examples, and NativeScript rendering guides for @nativescript/canvas.' }],
37+
['meta', { name: 'twitter:image', content: 'https://canvas.nativescript.org/og/canvas-social.png' }],
38+
['meta', { name: 'twitter:image:alt', content: 'NativeScript Canvas - Native Canvas. Real pixels.' }],
39+
['link', { rel: 'canonical', href: 'https://canvas.nativescript.org' }],
3640
['link', { rel: 'preconnect', href: 'https://fonts.googleapis.com' }],
3741
['link', { rel: 'preconnect', href: 'https://fonts.gstatic.com', crossorigin: '' }],
3842
['link', { href: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap', rel: 'stylesheet' }],
3943
],
4044

4145
themeConfig: {
42-
logo: '/logo.svg',
46+
siteTitle: false,
4347

4448
nav: [
4549
{ text: 'Home', link: '/' },
@@ -53,7 +57,7 @@ export default defineConfig({
5357
sidebar: {
5458
'/plugins/': [
5559
{
56-
text: 'Canvas Repository Packages',
60+
text: 'Packages',
5761
items: [
5862
{ text: 'Overview', link: '/plugins/' },
5963
{ text: '@nativescript/canvas', link: '/canvas/' },

‎.vitepress/theme/components/AudioDocsHome.vue‎

Lines changed: 1 addition & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -38,57 +38,6 @@ const rootRef = ref<HTMLElement | null>(null);
3838
</div>
3939
</section>
4040

41-
<section class="audio-docs-stats">
42-
<div>
43-
<strong>2</strong>
44-
<span>core contexts for real-time and offline audio work</span>
45-
</div>
46-
<div>
47-
<strong>Many</strong>
48-
<span>common node types for generation, filtering, panning, dynamics, and timing</span>
49-
</div>
50-
<div>
51-
<strong>1</strong>
52-
<span>mental model if you already understand Web Audio graph construction</span>
53-
</div>
54-
</section>
55-
56-
<section>
57-
<h2>What you can build</h2>
58-
<div class="audio-docs-feature-grid">
59-
<div class="feature-item audio-docs-feature-item">
60-
<div class="audio-docs-feature-icon audio-docs-feature-icon--rose">FX</div>
61-
<h3>Effects pipelines</h3>
62-
<p>Chain gain, compression, convolution, delay, panning, and filtering nodes into reusable audio flows.</p>
63-
</div>
64-
<div class="feature-item audio-docs-feature-item">
65-
<div class="audio-docs-feature-icon audio-docs-feature-icon--sky">OSC</div>
66-
<h3>Synthesis and interactive sound</h3>
67-
<p>Drive oscillators, envelopes, and event-based playback for apps, games, and instruments.</p>
68-
</div>
69-
<div class="feature-item audio-docs-feature-item">
70-
<div class="audio-docs-feature-icon audio-docs-feature-icon--emerald">OFF</div>
71-
<h3>Offline rendering and analysis</h3>
72-
<p>Render ahead of time, inspect output, and generate assets or previews without tying work to live playback.</p>
73-
</div>
74-
</div>
75-
</section>
76-
77-
<section class="audio-docs-band">
78-
<div>
79-
<p class="audio-docs-kicker">Typical use cases</p>
80-
<h2>From synth apps to playback pipelines</h2>
81-
<p>
82-
The package fits interactive sound effects, music tools, audio visualization, and custom playback systems where the default media stack is too rigid.
83-
</p>
84-
</div>
85-
<ul class="audio-docs-stack">
86-
<li><strong>Music apps</strong><span>Sequencers, synths, and reactive instruments</span></li>
87-
<li><strong>Games</strong><span>Interactive sound design and event-driven playback</span></li>
88-
<li><strong>Media tools</strong><span>Analysis, effects processing, and render pipelines</span></li>
89-
</ul>
90-
</section>
91-
9241
<section>
9342
<h2>Choose your next node</h2>
9443
<div class="audio-docs-link-grid">
@@ -131,4 +80,4 @@ const rootRef = ref<HTMLElement | null>(null);
13180
</div>
13281
</section>
13382
</div>
134-
</template>
83+
</template>

‎.vitepress/theme/components/CanvasDocsHome.vue‎

Lines changed: 1 addition & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -50,42 +50,6 @@ const rootRef = ref<HTMLElement | null>(null);
5050
</div>
5151
</section>
5252

53-
<section class="canvas-docs-stats">
54-
<div>
55-
<strong>4</strong>
56-
<span>rendering contexts in one package</span>
57-
</div>
58-
<div>
59-
<strong>1</strong>
60-
<span>API surface that feels familiar if you already know the web</span>
61-
</div>
62-
<div>
63-
<strong>0</strong>
64-
<span>need to split 2D, WebGL, and GPU docs across separate packages</span>
65-
</div>
66-
</section>
67-
68-
<section>
69-
<h2>Why teams reach for it</h2>
70-
<div class="canvas-docs-feature-grid">
71-
<div class="feature-item canvas-docs-feature-item">
72-
<div class="canvas-docs-feature-icon canvas-docs-feature-icon--orange">2D</div>
73-
<h3>Immediate-mode UI drawing</h3>
74-
<p>Build charts, overlays, signatures, image editing tools, and custom controls with a fast 2D context.</p>
75-
</div>
76-
<div class="feature-item canvas-docs-feature-item">
77-
<div class="canvas-docs-feature-icon canvas-docs-feature-icon--blue">3D</div>
78-
<h3>WebGL workflows that transfer cleanly</h3>
79-
<p>Bring existing rendering knowledge across with WebGL and WebGL2 contexts that map to familiar browser patterns.</p>
80-
</div>
81-
<div class="feature-item canvas-docs-feature-item">
82-
<div class="canvas-docs-feature-icon canvas-docs-feature-icon--green">GPU</div>
83-
<h3>WebGPU when you need more headroom</h3>
84-
<p>Push into newer GPU-driven pipelines without abandoning the rest of the NativeScript canvas ecosystem.</p>
85-
</div>
86-
</div>
87-
</section>
88-
8953
<section>
9054
<h2>Start where your project is headed</h2>
9155
<div class="canvas-docs-link-grid">
@@ -132,4 +96,4 @@ const rootRef = ref<HTMLElement | null>(null);
13296
</div>
13397
</section>
13498
</div>
135-
</template>
99+
</template>

0 commit comments

Comments
 (0)