Add support for GitHub Pages

Author: skirtles-code

src/index.ts

@@ -18,7 +18,10 @@ type Config = {
   githubUrl: string
   githubIssues: string
   githubRepository: string
+  githubPagesOrigin: string
+  docsBase: string
   includeDocs: boolean
+  includeGithubPages: boolean
   includePlayground: boolean
   includeExamples: boolean
 }
@@ -27,9 +30,10 @@ async function init() {
   const cwd = process.cwd()
 
   let result: {
-    packageName?: string
-    githubPath?: string
+    packageName: string
+    githubPath: string
     includeDocs: boolean
+    includeGithubPages?: boolean
     includePlayground: boolean
     includeExamples: boolean
   } = {}
@@ -54,6 +58,13 @@ async function init() {
           initial: true,
           active: 'Yes',
           inactive: 'No'
+        }, {
+          name: 'includeGithubPages',
+          type: (prev) => prev ? 'toggle' : null,
+          message: 'Include GitHub Pages config for documentation?',
+          initial: false,
+          active: 'Yes',
+          inactive: 'No'
         }, {
           name: 'includePlayground',
           type: 'toggle',
@@ -102,9 +113,12 @@ async function init() {
   const globalVariableName = projectName.replace(/ /g, '')
   const targetDirName = unscopedPackageName
 
+  const [githubUserName, githubRepoName] = (githubPath || '/').split('/')
   const githubUrl = githubPath ? `https://github.com/${githubPath}` : ''
   const githubIssues = githubPath ? `${githubUrl}/issues` : ''
   const githubRepository = githubPath ? `git+${githubUrl}.git` : ''
+  const githubPagesOrigin = githubUserName && result.includeGithubPages ? `https://${githubUserName}.github.io` : ''
+  const docsBase = githubRepoName && result.includeGithubPages ? `/${githubRepoName}/` : '/'
 
   const targetDirPath = path.join(cwd, targetDirName)
 
@@ -130,7 +144,10 @@ async function init() {
     githubUrl,
     githubIssues,
     githubRepository,
+    githubPagesOrigin,
+    docsBase,
     includeDocs: result.includeDocs,
+    includeGithubPages: !!result.includeGithubPages,
     includePlayground: result.includePlayground,
     includeExamples: result.includeExamples
   }
@@ -141,6 +158,10 @@ async function init() {
     copyTemplate('vitepress', config)
   }
 
+  if (config.includeGithubPages) {
+    copyTemplate('gh-pages', config)
+  }
+
   if (config.includePlayground) {
     copyTemplate('playground', config)
   }
@@ -162,10 +183,14 @@ function copyTemplate(templateName: string, config: Config) {
   }
 
   for (const dir of dirs) {
-    copyFiles('', {
-      ...config,
-      templateDirPath: path.join(config.templateDirPath, templateName, dir)
-    })
+    const templateDirPath = path.join(config.templateDirPath, templateName, dir)
+
+    if (fs.existsSync(templateDirPath)) {
+      copyFiles('', {
+        ...config,
+        templateDirPath
+      })
+    }
   }
 }
 

src/template/gh-pages/config/.github/workflows/pages.yml

@@ -0,0 +1,55 @@
+# Simple workflow for deploying static content to GitHub Pages
+name: Deploy to GitHub Pages
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ['main']
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment
+concurrency:
+  group: 'pages'
+  cancel-in-progress: false
+
+jobs:
+  # Single deploy job since we're just deploying
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9
+      - name: Set up Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'pnpm'
+      - name: Install dependencies
+        run: pnpm install
+      - name: Build
+        run: pnpm run docs:build
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          # Upload docs dist directory
+          path: './packages/docs/dist'
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

…nfig/packages/docs/.vitepress/config.mts …/packages/docs/.vitepress/config.mts.ejssrc/template/vitepress/config/packages/docs/.vitepress/config.mts renamed to src/template/vitepress/config/packages/docs/.vitepress/config.mts.ejs src/template/vitepress/config/packages/docs/.vitepress/config.mts renamed to src/template/vitepress/config/packages/docs/.vitepress/config.mts.ejs

@@ -5,30 +5,32 @@ import { defineConfigWithTheme } from 'vitepress'
 export default ({ mode }: { mode: string }) => defineConfigWithTheme({
   srcDir: './src',
   outDir: './dist',
-  base: '/@unscopedPackageName@',
-  title: '@scopedPackageName@',
+  base: '<%- config.docsBase %>',
+  title: '<%- config.scopedPackageName %>',
   lang: 'en-US',
   description: 'Description',
   cleanUrls: true,
 
-  // sitemap: {
-  //   hostname: 'https://???.github.io'
-  // },
+  <%_ if (config.githubPagesOrigin) { _%>
+  sitemap: {
+    hostname: '<%- config.githubPagesOrigin  %><%- config.docsBase %>'
+  },
+
+  transformHead({ page}) {
+    if (page !== '404.md') {
+      const canonicalUrl = `<%- config.githubPagesOrigin  %><%- config.docsBase %>${page}`
+        .replace(/index\.md$/, '')
+        .replace(/\.md$/, '')
 
-  // transformHead({ page}) {
-  //   if (page !== '404.md') {
-  //     const canonicalUrl = `https://???.github.io/${page}`
-  //       .replace(/index\.md$/, '')
-  //       .replace(/\.md$/, '')
-  //
-  //     return [['link', { rel: 'canonical', href: canonicalUrl }]]
-  //   }
-  // },
+      return [['link', { rel: 'canonical', href: canonicalUrl }]]
+    }
+  },
 
+  <%_ } _%>
   vite: {
     resolve: {
       alias: {
-        '@scopedPackageName@': resolve(__dirname, '../../@projectName@/src/index.ts')
+        '<%- config.scopedPackageName %>': resolve(__dirname, '../../<%- config.shortUnscopedPackageName %>/src/index.ts')
       }
     },
 
@@ -40,7 +42,7 @@ export default ({ mode }: { mode: string }) => defineConfigWithTheme({
       fs: {
         allow: [
           '..',
-          '../../@projectName@/src'
+          '../../<%- config.shortUnscopedPackageName %>/src'
         ]
       }
     }
@@ -55,10 +57,12 @@ export default ({ mode }: { mode: string }) => defineConfigWithTheme({
       { text: 'Guide', link: '/introduction' }
     ],
 
+    <%_ if (config.githubUrl) { _%>
     socialLinks: [
-      { icon: 'github', link: '@githubUrl@' }
+      { icon: 'github', link: '<%- config.githubUrl %>' }
     ],
 
+    <%_ } _%>
     sidebar: [
       {
         text: 'Getting started',