Merge pull request #18 from BristolMyersSquibb/feat/videos-and-workflows

Feat/videos and workflows

Author: christophsax

.github/workflows/deploy.yml

@@ -0,0 +1,31 @@
+name: Deploy
+
+on:
+  push:
+    branches: [main]
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: npm
+      - run: npm ci
+      - run: npx vitepress build
+      - name: Generate app token
+        id: app-token
+        uses: actions/create-github-app-token@v1
+        with:
+          app-id: ${{ secrets.APP_ID }}
+          private-key: ${{ secrets.APP_PRIVATE_KEY }}
+          owner: BristolMyersSquibb
+          repositories: blockr
+      - uses: JamesIves/github-pages-deploy-action@v4
+        with:
+          repository-name: BristolMyersSquibb/blockr
+          branch: gh-pages
+          folder: .vitepress/dist
+          token: ${{ steps.app-token.outputs.token }}

.github/workflows/trigger-deploy.yml

@@ -1,3 +1,3 @@
-/.quarto/
-
-**/*.quarto_ipynb
+node_modules/
+.vitepress/cache/
+.vitepress/dist/

.gitignore

@@ -0,0 +1,75 @@
+const base = '/blockr/'
+
+module.exports = {
+  base,
+  title: 'blockr',
+  description: 'A visual, no-code framework for R',
+  head: [
+    ['link', { rel: 'icon', type: 'image/svg+xml', href: `${base}logos/logo-e4-light.svg` }]
+  ],
+  themeConfig: {
+    logo: { light: '/logos/logo-e4-light.svg', dark: '/logos/logo-e4-dark.svg' },
+    siteTitle: 'blockr',
+    nav: [
+      { text: 'Learn', link: '/learn/01-build-your-first-app' },
+      { text: 'Docs', link: '/docs/concepts/01-reactivity' },
+      { text: 'Videos', link: '/videos/getting-started' },
+      { text: 'Examples', link: '/examples/' },
+      { text: 'Playground', link: 'https://blockr.cloud/app/empty' }
+    ],
+    sidebar: {
+      '/learn/': [{
+        text: 'Learn',
+        items: [
+          { text: 'Build your first app', link: '/learn/01-build-your-first-app' },
+          { text: 'Build a dashboard', link: '/learn/02-build-a-dashboard' },
+          { text: 'Create a custom block', link: '/learn/03-create-a-block' }
+        ]
+      }],
+      '/docs/': [
+        {
+          text: 'Concepts',
+          items: [
+            { text: 'Reactivity', link: '/docs/concepts/01-reactivity' }
+          ]
+        },
+        {
+          text: 'Block Reference',
+          items: [
+            { text: 'Wrangling', link: '/docs/blocks/01-wrangling' },
+            { text: 'Visualisation', link: '/docs/blocks/02-visualisation' },
+            { text: 'I/O', link: '/docs/blocks/03-io' }
+          ]
+        },
+        {
+          text: 'Developer',
+          items: [
+            { text: 'Create a block', link: '/docs/dev/create-block' },
+            { text: 'Extend blockr', link: '/docs/dev/extend-blockr' },
+            { text: 'Testing blocks', link: '/docs/dev/testing-blocks' }
+          ]
+        }
+      ],
+      '/videos/': [{
+        text: 'Videos',
+        items: [
+          { text: 'Getting Started', link: '/videos/getting-started' },
+          { text: 'Filtering and Selecting', link: '/videos/filtering-and-selecting' },
+          { text: 'Transforming Data', link: '/videos/transforming-data' },
+          { text: 'Joining Data', link: '/videos/joining-data' },
+          { text: 'Visualising Data', link: '/videos/visualising-data' },
+          { text: 'Exporting Data', link: '/videos/exporting-data' },
+          { text: 'Creating Custom Blocks', link: '/videos/creating-blocks' },
+          { text: 'Testing Blocks', link: '/videos/testing-blocks' }
+        ]
+      }]
+    },
+    socialLinks: [
+      { icon: 'github', link: 'https://github.com/BristolMyersSquibb/blockr' }
+    ],
+    footer: {
+      message: `Developed by <a href="https://cynkra.com" target="_blank"><img src="${base}logos/logo-cynkra.png" alt="cynkra" style="height:36px;vertical-align:middle"></a> and <a href="https://www.bms.com" target="_blank"><img src="${base}logos/logo-bms.png" alt="BMS" style="height:24px;vertical-align:middle"></a>`,
+      copyright: ''
+    },
+  }
+}

.nojekyll

@@ -0,0 +1,40 @@
+<script setup>
+const props = defineProps({
+  id: { type: String, required: true },
+  title: { type: String, default: 'YouTube video' }
+})
+</script>
+
+<template>
+  <div class="video-embed">
+    <iframe
+      :src="`https://www.youtube.com/embed/${id}`"
+      :title="title"
+      frameborder="0"
+      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+      allowfullscreen
+    ></iframe>
+  </div>
+</template>
+
+<style scoped>
+.video-embed {
+  position: relative;
+  width: 100%;
+  padding-bottom: 56.25%;
+  height: 0;
+  overflow: hidden;
+  border-radius: 12px;
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
+  margin: 16px 0;
+}
+.video-embed iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: 0;
+  border-radius: 12px;
+}
+</style>

.vitepress/config.js

@@ -0,0 +1,23 @@
+.VPFooter .message {
+  text-align: left !important;
+  display: flex !important;
+  align-items: center;
+  gap: 8px;
+  color: #999;
+  font-size: 0.85em;
+}
+
+.VPFooter .copyright {
+  display: none;
+}
+
+/* Let no-sidebar pages (Examples, Videos index) use full width.
+   VitePress scoped styles require !important to override. */
+@media (min-width: 960px) {
+  .VPDoc:not(.has-sidebar) .container {
+    max-width: 1152px !important;
+  }
+  .VPDoc:not(.has-sidebar) .content {
+    max-width: 1152px !important;
+  }
+}

.vitepress/theme/components/VideoEmbed.vue

@@ -0,0 +1,10 @@
+import DefaultTheme from 'vitepress/theme'
+import './custom.css'
+import VideoEmbed from './components/VideoEmbed.vue'
+
+export default {
+  extends: DefaultTheme,
+  enhanceApp({ app }) {
+    app.component('VideoEmbed', VideoEmbed)
+  }
+}