Merge pull request #2 from ttelang/main

Merging changes from main branch to Patch-1

Author: ttelang

.devcontainer/devcontainer.json

@@ -0,0 +1,17 @@
+{
+  "name": "MicroProfile Tutorial UI",
+  "features": {
+    "ghcr.io/devcontainers/features/node:1": {
+      "version": "lts"
+    }
+  },
+  "customizations": {
+    "vscode": {
+      "extensions": [
+        "asciidoctor.asciidoctor-vscode",
+        "github.vscode-github-actions"
+      ]
+    }
+  },
+  "postCreateCommand": "npm install -g gulp-cli && npm install"
+}

.eslintrc.js

@@ -0,0 +1,16 @@
+module.exports = {
+  env: {
+    browser: true,
+    node: true,
+    es6: true
+  },
+  extends: 'eslint:recommended',
+  parserOptions: {
+    ecmaVersion: 2018,
+    sourceType: 'module'
+  },
+  rules: {
+    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'warn',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'warn'
+  }
+}

.github/pages.yml

@@ -0,0 +1,2 @@
+build:
+  artifact: "public"

.github/workflows/build.yml

@@ -60,11 +60,12 @@ jobs:
         tag_name: ${{ startsWith(github.ref, 'refs/tags/') && github.ref_name || 'latest' }}
 
     - name: If published, trigger redeployment of playbook
-      if: github.event_name == 'push'
+      if: github.event_name == 'push' && !failure() && !cancelled()
+      continue-on-error: true
       uses: convictional/[email protected]
       with:
         github_token: ${{ secrets.WORKFLOW_ACCESS_TOKEN }}
-        owner: ${{ github.repository_owner }}
+        owner: ttelang
         repo: microprofile-documentation
         workflow_file_name: build-and-deploy.yml
         wait_interval: 3

.github/workflows/github-pages.yml

@@ -0,0 +1,52 @@
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches: [ main ]
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18'
+          
+      - name: Install dependencies
+        run: npm install
+        
+      - name: Build site
+        run: npx gulp github-pages
+      
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+        
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: './public'
+  
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

.stylelintrc.json

@@ -0,0 +1,38 @@
+{
+  "extends": "stylelint-config-standard",
+  "rules": {
+    "indentation": 2,
+    "string-quotes": null,
+    "no-duplicate-selectors": true,
+    "color-hex-case": "lower",
+    "color-hex-length": "short",
+    "color-named": "never",
+    "selector-no-qualifying-type": null,
+    "selector-combinator-space-after": "always",
+    "selector-attribute-quotes": "always",
+    "selector-attribute-operator-space-before": "never",
+    "selector-attribute-operator-space-after": "never",
+    "selector-attribute-brackets-space-inside": "never",
+    "declaration-block-trailing-semicolon": "always",
+    "declaration-colon-space-before": "never",
+    "declaration-colon-space-after": "always",
+    "declaration-colon-newline-after": null,
+    "number-leading-zero": "always",
+    "function-url-quotes": null,
+    "font-weight-notation": null,
+    "font-family-name-quotes": "always-where-recommended",
+    "comment-whitespace-inside": "always",
+    "at-rule-no-vendor-prefix": true,
+    "rule-empty-line-before": null,
+    "selector-pseudo-element-colon-notation": "double",
+    "selector-pseudo-class-parentheses-space-inside": "never",
+    "media-feature-range-operator-space-before": "always",
+    "media-feature-range-operator-space-after": "always",
+    "media-feature-parentheses-space-inside": "never",
+    "media-feature-colon-space-before": "never",
+    "media-feature-colon-space-after": "always",
+    "no-descending-specificity": null,
+    "comment-empty-line-before": null,
+    "declaration-empty-line-before": null
+  }
+}

README.adoc

@@ -117,3 +117,55 @@ It will generate an UI bundle tagged `latest` which is available as {url-micropr
 This bundle is in turn already referenced as `ui.bundle.url` property in `antora-playbook.yml` configuration file of {url-microprofile-tutorial}[MicroProfile Tutorial Playbook].
 
 The live site can be found at {url-microprofile-tutorial-live}[{url-microprofile-tutorial-live}].
+
+== GitHub Pages Deployment
+
+This project can also be built and deployed directly to GitHub Pages, which allows you to host the UI documentation directly from this repository.
+
+=== Building for GitHub Pages
+
+To build the UI for GitHub Pages locally, run:
+
+ $ gulp github-pages
+
+This will generate the complete site in the `public` directory, ready for GitHub Pages deployment.
+
+=== Automatic Deployment
+
+The project includes a GitHub Actions workflow that automatically builds and deploys the site to GitHub Pages whenever changes are pushed to the main branch. The workflow:
+
+1. Checks out the repository
+2. Sets up Node.js
+3. Installs dependencies
+4. Builds the site using the `github-pages` task
+5. Deploys the built site to GitHub Pages
+
+To enable GitHub Pages for your fork of this repository:
+
+1. Go to your repository's Settings tab
+2. Navigate to Pages in the left sidebar
+3. Under "Source", select "GitHub Actions"
+
+Once deployed, your site will be available at `https://[username].github.io/microprofile-tutorial-ui/` or at a custom domain if you configure one in the GitHub Pages settings.
+
+This approach allows you to maintain both the UI bundle for Antora and a standalone documentation site from the same repository.
+
+== Development with Dev Containers / GitHub Codespaces
+
+This project includes Dev Container configuration, making it easy to develop using Visual Studio Code Dev Containers or GitHub Codespaces. The development environment comes pre-configured with:
+
+* Node.js LTS
+* Gulp CLI for build automation
+* GitHub Actions extension for workflow management
+* AsciiDoctor extension for documentation editing
+
+=== Using GitHub Codespaces
+
+To start developing using GitHub Codespaces:
+
+1. Go to your repository on GitHub
+2. Click the green "Code" button
+3. Select the "Codespaces" tab
+4. Click "Create codespace on main"
+
+This will create a cloud-based development environment with all dependencies pre-installed.

gulp.d/tasks/build-preview-pages.js

@@ -51,7 +51,7 @@ module.exports = (src, previewSrc, previewDest, sink = () => map()) => (done) =>
             } else {
               const doc = Asciidoctor.load(file.contents, { safe: 'safe', attributes: ASCIIDOC_ATTRIBUTES })
               uiModel.page.attributes = Object.entries(doc.getAttributes())
-                .filter(([name, val]) => name.startsWith('page-'))
+                .filter(([name]) => name.startsWith('page-'))
                 .reduce((accum, [name, val]) => {
                   accum[name.substr(5)] = val
                   return accum
@@ -122,11 +122,11 @@ function copyImages (src, dest) {
     .pipe(map((file, enc, next) => next()))
 }
 
-function resolvePage (spec, context = {}) {
+function resolvePage (spec) {
   if (spec) return { pub: { url: resolvePageURL(spec) } }
 }
 
-function resolvePageURL (spec, context = {}) {
+function resolvePageURL (spec) {
   if (spec) return '/' + (spec = spec.split(':').pop()).slice(0, spec.lastIndexOf('.')) + '.html'
 }
 

gulp.d/tasks/build.js

@@ -54,7 +54,7 @@ module.exports = (src, dest, preview) => () => {
     autoprefixer,
     preview
       ? () => {}
-      : (css, result) => cssnano({ preset: 'default' })(css, result).then(() => postcssPseudoElementFixer(css, result)),
+      : (css, result) => cssnano({ preset: 'default' })(css, result).then(() => postcssPseudoElementFixer(css)),
   ]
 
   return merge(
@@ -129,7 +129,7 @@ function bundle ({ base: basedir, ext: bundleExt = '.bundle.js' }) {
   })
 }
 
-function postcssPseudoElementFixer (css, result) {
+function postcssPseudoElementFixer (css) {
   css.walkRules(/(?:^|[^:]):(?:before|after)/, (rule) => {
     rule.selector = rule.selectors.map((it) => it.replace(/(^|[^:]):(before|after)$/, '$1::$2')).join(',')
   })

gulpfile.js

@@ -111,6 +111,19 @@ const previewTask = createTask({
   call: series(previewBuildTask, previewServeTask),
 })
 
+const githubPagesTask = createTask({
+  name: 'github-pages',
+  desc: 'Build the UI for GitHub Pages hosting',
+  call: series(
+    cleanTask,
+    previewBuildTask,
+    () => {
+      log('Site built for GitHub Pages in the public directory')
+      return Promise.resolve()
+    }
+  )
+})
+
 module.exports = exportTasks(
   bundleTask,
   cleanTask,
@@ -121,5 +134,6 @@ module.exports = exportTasks(
   bundlePackTask,
   previewTask,
   previewBuildTask,
-  packTask
+  packTask,
+  githubPagesTask
 )