docs: enable github pages deployment

starknet-io · Aug 25, 2024 · 9526f26 · 9526f26
1 parent 53d8e14
commit 9526f26
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 6 deletions.
diff --git a/.github/workflows/manual-docs-deploy-pages.yml b/.github/workflows/manual-docs-deploy-pages.yml
@@ -0,0 +1,52 @@
+name: '[Manual] Documentation Deploy Pages'
+on: workflow_dispatch
+
+# populate the following environment variables for the "github-pages" environment
+# - default:
+#     ORGANIZATION_NAME
+#     PROJECT_NAME
+#     DEPLOYMENT_BRANCH
+# - custom:
+#     DOCS_BASE_URL
+
+jobs:
+  build:
+    name: Documentation build
+    runs-on: ubuntu-latest
+    environment: github-pages
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+          cache: 'npm'
+      - name: Setup
+        run: |
+          npm ci --ignore-scripts
+          cd www/
+          npm ci --ignore-scripts
+      - name: Build
+        run: |
+          rm -rf www/docs/API/
+          npm run docs:build
+        env:
+          DOCS_BASE_URL: ${{ vars.DOCS_BASE_URL || '/starknet.js/' }}
+      - name: Upload
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: www/build
+
+  deploy:
+    name: documentation deploy
+    runs-on: ubuntu-latest
+    needs: [build]
+    permissions:
+      pages: write # to deploy to pages
+      id-token: write # to verify the deployment originates from an appropriate source
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    steps:
+      - name: deploy
+        id: deployment
+        uses: actions/deploy-pages@v4
diff --git a/www/docusaurus.config.js b/www/docusaurus.config.js
@@ -4,6 +4,8 @@
 const lightCodeTheme = require('prism-react-renderer/themes/github');
 const darkCodeTheme = require('prism-react-renderer/themes/dracula');
 
+const generateBaseUrl = (baseUrl = '') => `/${baseUrl.trim()}/`.replace(/\/+/g, '/');
+
 const generateSourceLinkTemplate = (gitRevision) =>
   `https://github.com/starknet-io/starknet.js/blob/${
     gitRevision || '{gitRevision}'
@@ -17,7 +19,7 @@ const config = {
   title: 'Starknet.js',
   tagline: 'JavaScript library for Starknet',
   url: 'https://starknetjs.com',
-  baseUrl: '/',
+  baseUrl: generateBaseUrl(process.env.DOCS_BASE_URL),
   onBrokenLinks: 'warn',
   onBrokenMarkdownLinks: 'warn',
   favicon: 'img/favicon.ico',

diff --git a/www/src/components/HomepageFeatures/index.tsx b/www/src/components/HomepageFeatures/index.tsx
@@ -1,5 +1,7 @@
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import React from 'react';
 import clsx from 'clsx';
+
 import styles from './styles.module.css';
 
 type FeatureItem = {
@@ -11,7 +13,7 @@ type FeatureItem = {
 const FeatureList: FeatureItem[] = [
   {
     title: 'Scalability and Integrity',
-    image: '/img/starknet-3.png',
+    image: 'img/starknet-3.png',
     description: (
       <>
         Starknet supports scale, while preserving the security of L1 Ethereum by producing STARK proofs off-chain, and then verifying those proofs on-chain.
@@ -20,7 +22,7 @@ const FeatureList: FeatureItem[] = [
   },
   {
     title: 'General Purpose',
-    image: '/img/starknet-2.png',
+    image: 'img/starknet-2.png',
     description: (
       <>
         On Starknet, developers can easily deploy any business logic using Starknet Contracts.
@@ -29,7 +31,7 @@ const FeatureList: FeatureItem[] = [
   },
   {
     title: 'Composability',
-    image: '/img/starknet-1.png',
+    image: 'img/starknet-1.png',
     description: (
       <>
         Starknet provides Ethereum-level composability – facilitating easy development and innovation.
@@ -39,10 +41,11 @@ const FeatureList: FeatureItem[] = [
 ];
 
 function Feature({title, image, description}: FeatureItem) {
+  const { siteConfig } = useDocusaurusContext();
   return (
     <div className={clsx('col col--4')}>
       <div className="text--center">
-        <img className={styles.featureSvg} alt={title} src={image} />
+        <img className={styles.featureSvg} alt={title} src={`${siteConfig.baseUrl}${image}`} />
       </div>
       <div className="text--center padding-horiz--md" style={{marginTop: "15px"}}>
         <h3>{title}</h3>

diff --git a/www/src/pages/index.tsx b/www/src/pages/index.tsx
@@ -12,7 +12,7 @@ function HomepageHeader() {
   return (
     <header className={clsx('hero hero--primary', styles.heroBanner)}>
       <div className="container">
-        <img src="/img/Starknet-JS_logo.png" />
+        <img src={`${siteConfig.baseUrl}img/Starknet-JS_logo.png`} />
         <p className="hero__subtitle">{siteConfig.tagline}</p>
         <div className={styles.buttons}>
           <Link className="button button--secondary button--lg" to="/docs/guides/intro">