Feature/multisite per slug (#868)

.changeset/perfect-cobras-knock.md

@@ -0,0 +1,6 @@
+---
+"@headstartwp/core": minor
+"@headstartwp/next": minor
+---
+
+Add the ability to add aliases/slug to sites in the multisite setup

.github/workflows/esm-build-test.yml → .github/workflows/build-test.yml

@@ -1,9 +1,9 @@
-name: ESM Build Test
+name: Build Test
 
 on: [pull_request]
 
 jobs:
-  esm-build-test:
+  build-test:
     runs-on: ubuntu-latest
 
     strategy:
@@ -28,5 +28,5 @@ jobs:
             ${{ runner.os }}-node-
       - name: Install dependencies
         run: npm install
-      - name: Build Vite Test Project
-        run: npm run build -- --filter=@headstartwp/vite-react-test
+      - name: Build Projects
+        run: npm run build

.github/workflows/nextjs_bundle_analysis-app-router.yml

@@ -0,0 +1,113 @@
+name: '(App Router) Next.js Bundle Analysis'
+
+on:
+  pull_request:
+  push:
+    branches:
+      - develop # change this if your default branch is named differently
+  workflow_dispatch:
+
+defaults:
+  run:
+    # change this if your nextjs app does not live at the root of the repo
+    working-directory: ./
+
+jobs:
+  analyze:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Set up node
+        uses: actions/setup-node@v3
+        with:
+          node-version: '20.x'
+
+      - name: Install dependencies
+        uses: bahmutov/npm-install@v1
+
+      - name: Restore next build
+        uses: actions/cache@v2
+        id: restore-build-cache
+        env:
+          cache-name: cache-next-build
+        with:
+          # if you use a custom build directory, replace all instances of `.next` in this file with your build directory
+          # ex: if your app builds to `dist`, replace `.next` with `dist`
+          path: ./projects/wp-nextjs/.next/cache
+          # change this if you prefer a more strict cache
+          key: ${{ runner.os }}-build-${{ env.cache-name }}
+
+      - name: Build next.js app
+        # change this if your site requires a custom build command
+        run: npm run build -- --filter=@10up/wp-nextjs-app
+
+      # Here's the first place where next-bundle-analysis' own script is used
+      # This step pulls the raw bundle stats for the current bundle
+      - name: Analyze bundle
+        run: npx -p nextjs-bundle-analysis report
+
+      - name: Upload bundle
+        uses: actions/upload-artifact@v4
+        with:
+          name: bundle
+          path: ./projects/wp-nextjs/.next/analyze/__bundle_analysis.json
+
+      - name: Download base branch bundle stats
+        uses: dawidd6/action-download-artifact@v2
+        if: success() && github.event.number
+        with:
+          workflow: nextjs_bundle_analysis.yml
+          branch: ${{ github.event.pull_request.base.ref }}
+          path: ./projects/wp-nextjs/.next/analyze/base
+
+      # And here's the second place - this runs after we have both the current and
+      # base branch bundle stats, and will compare them to determine what changed.
+      # There are two configurable arguments that come from package.json:
+      #
+      # - budget: optional, set a budget (bytes) against which size changes are measured
+      #           it's set to 350kb here by default, as informed by the following piece:
+      #           https://infrequently.org/2021/03/the-performance-inequality-gap/
+      #
+      # - red-status-percentage: sets the percent size increase where you get a red
+      #                          status indicator, defaults to 20%
+      #
+      # Either of these arguments can be changed or removed by editing the `nextBundleAnalysis`
+      # entry in your package.json file.
+      - name: Compare with base branch bundle
+        if: success() && github.event.number
+        run: ls -laR ./projects/wp-nextjs/.next/analyze/base && npx -p nextjs-bundle-analysis compare
+
+      - name: Get comment body
+        id: get-comment-body
+        if: success() && github.event.number
+        run: |
+          body=$(cat ./projects/wp-nextjs/.next/analyze/__bundle_analysis_comment.txt)
+          body="${body//'%'/'%25'}"
+          body="${body//$'\n'/'%0A'}"
+          body="${body//$'\r'/'%0D'}"
+          echo ::set-output name=body::$body
+
+      - name: Find Comment
+        uses: peter-evans/find-comment@v1
+        if: success() && github.event.number
+        id: fc
+        with:
+          issue-number: ${{ github.event.number }}
+          body-includes: '<!-- __NEXTJS_BUNDLE -->'
+
+      - name: Create Comment
+        uses: peter-evans/[email protected]
+        if: success() && github.event.number && steps.fc.outputs.comment-id == 0
+        with:
+          issue-number: ${{ github.event.number }}
+          body: ${{ steps.get-comment-body.outputs.body }}
+
+      - name: Update Comment
+        uses: peter-evans/[email protected]
+        if: success() && github.event.number && steps.fc.outputs.comment-id != 0
+        with:
+          issue-number: ${{ github.event.number }}
+          body: ${{ steps.get-comment-body.outputs.body }}
+          comment-id: ${{ steps.fc.outputs.comment-id }}
+          edit-mode: replace

.github/workflows/nextjs_bundle_analysis.yml

@@ -1,4 +1,4 @@
-name: 'Next.js Bundle Analysis'
+name: '(Pages Router) Next.js Bundle Analysis'
 
 on:
   pull_request:
@@ -40,15 +40,15 @@ jobs:
 
       - name: Build next.js app
         # change this if your site requires a custom build command
-        run: npm run build
+        run: npm run build -- --filter=@10up/wp-nextjs
 
       # Here's the first place where next-bundle-analysis' own script is used
       # This step pulls the raw bundle stats for the current bundle
       - name: Analyze bundle
         run: npx -p nextjs-bundle-analysis report
 
       - name: Upload bundle
-        uses: actions/upload-artifact@v2
+        uses: actions/upload-artifact@v4
         with:
           name: bundle
           path: ./projects/wp-nextjs/.next/analyze/__bundle_analysis.json

.gitignore

@@ -4,5 +4,4 @@ node_modules
 .turbo
 .vercel
 .DS_Store
-.vscode
 coverage

.vscode/launch.json

@@ -0,0 +1,17 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "name": "Listen for Xdebug",
+            "type": "php",
+            "request": "launch",
+            "port": 9003,
+            "pathMappings": {
+                "/var/www/html/wp-content/plugins/headless-wp": "${workspaceFolder}/wp/headless-wp"
+              }
+        },
+    ]
+}

.vscode/settings.json

@@ -0,0 +1,9 @@
+{
+    "phpsab.composerJsonPath": "wp/headless-wp/composer.json",
+    "phpsab.fixerEnable": true,
+    "phpsab.snifferEnable": true,
+    "phpsab.snifferShowSources": true,
+    "[php]": {
+        "editor.defaultFormatter": "valeryanm.vscode-phpsab"
+    }
+}

package.json

@@ -15,6 +15,7 @@
     "build": "turbo run build",
     "build:packages": "turbo run build --filter=./packages/*",
     "build:wpnextjs": "turbo run build --filter=./projects/wp-nextjs",
+    "build:wpnextjs:app": "turbo run build --filter=./projects/wp-nextjs-app",
     "test": "turbo run test",
     "test:watch": "turbo run test:watch",
     "lint": "turbo run lint",

packages/core/src/types.ts

@@ -150,6 +150,10 @@ export type I18NConfig = {
 };
 
 export type HeadlessConfig = {
+	/**
+	 * The slug of the site, this is only used for the multisite feature and it acts as an alias for the site host
+	 */
+	slug?: string;
 	host?: string;
 	locale?: string;
 	sourceUrl?: string;

packages/core/src/utils/__tests__/config.ts

@@ -144,13 +144,15 @@ describe('getSiteByHost', () => {
 			{
 				sourceUrl: 'https://sourceurl.com/site1',
 				hostUrl: 'https://site1.com',
+				slug: 'site1',
 				locale: 'en',
 			},
 			{
 				sourceUrl: 'https://sourceurl.com/site2',
 				host: 'site2.com',
 				hostUrl: 'https://site2.com',
 				locale: 'es',
+				slug: 'site2',
 			},
 		],
 	};
@@ -179,4 +181,9 @@ describe('getSiteByHost', () => {
 		expect(getSiteByHost('site2.com', 'en')).toBeNull();
 		expect(getSiteByHost('site1.com', 'es')).toBeNull();
 	});
+
+	it('find sites by slug', () => {
+		expect(getSiteByHost('site1', 'en')?.sourceUrl).toBe('https://sourceurl.com/site1');
+		expect(getSiteByHost('site2', 'es')?.sourceUrl).toBe('https://sourceurl.com/site2');
+	});
 });

packages/core/src/utils/config.ts

@@ -34,6 +34,7 @@ export function getHeadstartWPConfig(): HeadlessConfig {
 		cache,
 		locale,
 		i18n,
+		slug,
 	} = __10up__HEADLESS_CONFIG;
 
 	const defaultTaxonomies: CustomTaxonomies = [
@@ -75,6 +76,7 @@ export function getHeadstartWPConfig(): HeadlessConfig {
 			: [...(customPostTypes || []), ...defaultPostTypes];
 
 	const headlessConfig = {
+		slug,
 		locale,
 		sourceUrl,
 		hostUrl: hostUrl || '',
@@ -119,6 +121,7 @@ export const getHeadlessConfig = getHeadstartWPConfig;
 export function getSite(site?: HeadlessConfig) {
 	const settings = getHeadstartWPConfig();
 	const headlessConfig: HeadlessConfig = {
+		slug: site?.slug,
 		sourceUrl: site?.sourceUrl || settings.sourceUrl,
 		hostUrl: site?.hostUrl,
 		host: site?.host,
@@ -158,7 +161,7 @@ export function getSiteByHost(hostOrUrl: string, locale?: string) {
 	const site =
 		settings.sites &&
 		settings.sites.find((site) => {
-			const isHost = site.host === normalizedHost;
+			const isHost = site.host === normalizedHost || site.slug === normalizedHost;
 
 			if (typeof locale !== 'undefined' && locale) {
 				return isHost && site.locale === locale;

packages/next/src/components/HeadlessApp.tsx

@@ -101,7 +101,12 @@ export function HeadlessApp({
 	useYoastHtml = false,
 	handleYoast = true,
 }: HeadlessAppProps) {
-	const { fallback = {}, seo = {}, themeJSON = { settings: {}, styles: {} } } = pageProps;
+	const {
+		fallback = {},
+		seo = {},
+		themeJSON = { settings: {}, styles: {} },
+		__headstartwp_site = '',
+	} = pageProps;
 	const router = useRouter();
 
 	// if preview mode disable revalidating
@@ -116,12 +121,15 @@ export function HeadlessApp({
 	}
 
 	const currentSite = useMemo(() => {
+		if (__headstartwp_site) {
+			return getSiteByHost(__headstartwp_site, router.locale);
+		}
 		if (router.query?.site && !Array.isArray(router.query.site)) {
 			return getSiteByHost(router.query.site, router.locale);
 		}
 
 		return {};
-	}, [router]);
+	}, [router, __headstartwp_site]);
 
 	const siteSettings = useMemo(() => ({ ...settings, ...currentSite }), [settings, currentSite]);