Add SSG for the docs app -- ready to deploy

Author: NullVoxPopuli

docs/app/app-ssr.js

@@ -0,0 +1,30 @@
+import Application from 'ember-strict-application-resolver';
+import { settled } from '@ember/test-helpers';
+import { entries } from 'ember-page-title/service-registry';
+
+export default class SsrApp extends Application {
+  modules = {
+    ...entries(),
+    ...import.meta.glob('./router.js', { eager: true }),
+    ...import.meta.glob('./routes/**/*.js', { eager: true }),
+    ...import.meta.glob('./templates/**/*.{gts,gjs}', { eager: true }),
+  };
+}
+
+export function createSsrApp() {
+  const app = SsrApp.create({ autoboot: false });
+
+  const originalVisit = app.visit.bind(app);
+
+  Object.assign(app, {
+    visit: async (...args) => {
+      const instance = await originalVisit(...args);
+
+      await settled();
+
+      return instance;
+    },
+  });
+
+  return app;
+}

docs/app/config/environment.ts

@@ -1,5 +1,3 @@
-import { setTesting } from '@embroider/macros';
-
 const config = {
   environment: import.meta.env.DEV ? 'development' : 'production',
   rootURL: '/',
@@ -11,8 +9,6 @@ const config = {
 export default config;
 
 export function enterTestMode() {
-  setTesting(true);
-
   config.locationType = 'none';
   config.APP.rootElement = '#ember-testing';
   config.APP.autoboot = false;

docs/app/styles/app.scss

@@ -1,16 +1,17 @@
-@import 'fonts';
-@import 'colors';
-@import 'code';
-@import 'grid';
+@import './fonts.scss';
+@import './colors.scss';
+@import './code.scss';
+@import './grid.scss';
 
-@import 'components';
-@import './routes/docs';
+@import './components.scss';
+@import './routes/docs.scss';
 
 * {
   box-sizing: border-box;
 }
 
-html, body {
+html,
+body {
   margin: 0;
   padding: 0;
   font-family: OfficeCodePro, Consolas, Inconsolata, monspace;
@@ -37,17 +38,19 @@ textarea {
   max-width: 100%;
   transition: box-shadow 120ms;
   -webkit-appearance: textfield;
-     -moz-appearance: textfield;
-      -ms-appearance: textfield;
-          appearance: textfield;
+  -moz-appearance: textfield;
+  -ms-appearance: textfield;
+  appearance: textfield;
 
   background: $transparent;
   box-shadow: none;
+
   &:hover {
     box-shadow: 0 0 0 3px rgba($black, 0.1);
   }
 
-  &:focus, &:active {
+  &:focus,
+  &:active {
     outline: none;
     box-shadow: 0 0 0 3px rgba($black, 0.25);
   }
@@ -84,7 +87,7 @@ header {
 
   svg {
     -webkit-filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
-            filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
+    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
   }
 
   nav {
@@ -107,7 +110,7 @@ header {
   }
 }
 
-section > h2 {
+section>h2 {
   padding: 30px 0;
   margin: 40px 0;
 }
@@ -134,7 +137,8 @@ hr {
 }
 
 
-pre, pre.hljs {
+pre,
+pre.hljs {
   font-family: 'OfficeCodePro';
   font-size: 14px;
   background: #FAFAFA;
@@ -146,6 +150,7 @@ pre, pre.hljs {
 ::selection {
   background: #DEDDED;
 }
+
 ::-moz-selection {
   background: #DEDDED;
 }
@@ -180,14 +185,14 @@ pre, pre.hljs {
       width: 100%;
       height: 39px;
       display: -webkit-flex;
-      display:         flex;
+      display: flex;
       display: flex;
       border-bottom: 1px solid rgba(255, 255, 255, 0.5);
 
       a {
         margin: 0;
         -webkit-flex: 1;
-                flex: 1;
+        flex: 1;
         text-align: center;
         line-height: 38px;
         background: rgba(0, 0, 0, 0.4);

docs/tests/test-helper.js

@@ -2,8 +2,10 @@ import Application from 'docs/app';
 import config, { enterTestMode } from 'docs/config/environment';
 import { setApplication } from '@ember/test-helpers';
 import { start as qunitStart, setupEmberOnerrorValidation } from 'ember-qunit';
+import { setTesting } from '@embroider/macros';
 
 export function start() {
+  setTesting(true);
   enterTestMode();
   setApplication(Application.create(config.APP));
 

docs/vite.config.mjs

@@ -1,6 +1,7 @@
 import { defineConfig } from 'vite';
 import { extensions, ember } from '@embroider/vite';
 import { babel } from '@rollup/plugin-babel';
+import { emberSsg } from 'vite-ember-ssr/vite-plugin';
 
 export default defineConfig({
   plugins: [
@@ -9,5 +10,15 @@ export default defineConfig({
       babelHelpers: 'runtime',
       extensions,
     }),
+    emberSsg({
+      // weierdness: '', because we renamed
+      // "docs" to "/" in the router
+      routes: [''],
+      ssrEntry: 'app/app-ssr.js',
+      rehydrate: true,
+    }),
   ],
+  ssr: {
+    noExternal: [/./],
+  },
 });