chore(docs) (#1539)

* docs(docsWeb): update docs for consultancy and SPS

ISSUES CLOSED: #1462

* add .angular to gitIgnore

* docs(docsWeb): add pricing page

* docs(docsWeb): updates for pricing page

* docs(docsWeb): fix couple of typos

* fix(docsWeb): caps

.gitignore

@@ -61,4 +61,4 @@ consoleProxy.ts
 .angular
 *.tgz
 testCreate.sh
-scully/runtime
+scully/runtime

apps/scully-docs/src/app/app-routing.module.ts

@@ -20,7 +20,7 @@ const routes: Routes = [
     loadChildren: () => import('./pages/extraPages/extra-page.module').then((m) => m.ExtraPageModule),
   },
   {
-    path: 'consultancy',
+    path: 'support',
     loadChildren: () => import('./pages/extraPages/extra-page.module').then((m) => m.ExtraPageModule),
   },
   {

apps/scully-docs/src/app/components/footer/component/footer.component.ts

@@ -27,6 +27,14 @@ import { Component, ViewEncapsulation } from '@angular/core';
         <li><a href="https://github.com/scullyio/scully/tree/main/assets/logos">Press kit</a></li>
       </ul>
     </section>
+    <section>
+      <h2>Support</h2>
+      <ul>
+        <li><a href="https://herodevs.com/">About us</a></li>
+        <li><a href="mailto:[email protected]">Contact us</a></li>
+        <li><a href="/support">Support</a></li>
+      </ul>
+    </section>
   `,
 })
 export class FooterComponent {}

apps/scully-docs/src/app/components/header/component/nav-header/nav-header.component.css

@@ -1,3 +1,9 @@
+nav.scullyio-nav-header ul li a.pricing {
+  color: var(--scully-white);
+  font-size: 1.2em;
+  opacity: 1;
+}
+
 nav.scullyio-nav-header {
   position: fixed;
   display: flex;

apps/scully-docs/src/app/components/header/component/nav-header/nav-header.component.ts

@@ -6,13 +6,13 @@ import { Component, ViewEncapsulation, Input, HostBinding } from '@angular/core'
   template: `
     <ul class="persistent">
       <li class="logo"><a aria-label="go to home page" routerLink="/"></a></li>
-      <li class="text">#BlackLivesMatter</li>
       <li class="icon menu"><label for="mobile-toggle"></label></li>
     </ul>
     <ul class="mobile-hidden">
       <li class="feature"><a routerLink="/docs/learn/getting-started/overview">get started</a></li>
       <li><a routerLink="/docs/learn/overview">docs</a></li>
       <li><a routerLink="/docs/community/showcase">showcase</a></li>
+      <li><a class="Support" routerLink="/support">Support</a></li>
       <li class="icon github"><a aria-label="to our github page" href="https://github.com/scullyio/scully"></a></li>
     </ul>
   `,

apps/scully-docs/src/app/pages/docs/page/docs.page.component.ts

@@ -1,6 +1,6 @@
 import { Component, ViewEncapsulation } from '@angular/core';
 import { Title } from '@angular/platform-browser';
-import { EMPTY } from 'rxjs';
+import { EMPTY, filter } from 'rxjs';
 import { catchError, map, tap } from 'rxjs';
 import { NavListService } from '../../../components/nav-list/nav-list.service';
 
@@ -28,13 +28,14 @@ export class DocsPageComponent {
 
   currentPage$ = this.nav.currentDoc$.pipe(
     tap((cur) => {
-      const title = cur._route?.title as string;
+      const title = cur?._route?.title as string;
       if (title) {
         this.title.setTitle(title + ' - Scully');
       } else {
         this.title.setTitle('Scully Documentation');
       }
     }),
+    filter(cur => cur?._route !== undefined),
     map((cur) => ({ next: cur._next, prev: cur._prev, suggestEditLink: this.githubEditLink(cur?._route?.route) })),
     /** note, this is for testing only, as in the docs site _no_ code will not be there anyway! */
     catchError((e) => {

apps/scully-docs/src/app/pages/extraPages/extra-page.module.ts

@@ -1,9 +1,12 @@
 import { CommonModule } from '@angular/common';
-import { Component, NgModule } from '@angular/core';
+import { Component, NgModule, ViewEncapsulation } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { ScullyLibModule } from '@scullyio/ng-lib';
+import { FooterModule } from '../../components/footer';
+import { FooterComponent } from '../../components/footer/component/footer.component';
 
 @Component({
+  encapsulation: ViewEncapsulation.None,
   template: `
     <main>
       <scully-content></scully-content>
@@ -12,7 +15,7 @@ import { ScullyLibModule } from '@scullyio/ng-lib';
     <style>
       main {
         display:grid;
-        min-height: calc(100vh - 176px - 80px);
+        min-height: calc(100vh - 300px - 80px);
         padding: 24px;
         max-width: 80rem;
         margin: 0 auto;
@@ -31,6 +34,7 @@ export class ExtraPageComponent {}
   imports: [
     CommonModule,
     ScullyLibModule,
+    FooterModule,
     RouterModule.forChild([
       { path: '', component: ExtraPageComponent },
       { path: '**', component: ExtraPageComponent },

cleanCSStest.ts

@@ -993,7 +993,6 @@ function gethtml() {
             routerlink="/"
             href="/"
           ></a></li>
-        <li class="text">#BlackLivesMatter</li>
         <li class="icon menu"><label for="mobile-toggle"></label></li>
       </ul>
       <ul class="mobile-hidden">

docs/Reference/plugins/built-in-plugins/md.md

@@ -24,6 +24,7 @@ setPluginConfig('md', { enableSyntaxHighlighting: true });
 2.  Import any extra language support, if you require it:
 
 ```typescript
+/** this line goes into your scully.<app>.config.ts */
 import 'prismjs/components/prism-java.js';
 ```
 

docs/Reference/utilities/prism-js.md

@@ -9,6 +9,8 @@ position: 100
 
 ## Overview
 
+> ## NOTE: Scully supports Prism now natively, see [marked](../plugins/built-in-plugins/md.md)
+
 [Prism](https://prismjs.com/) is a lightweight, extensible syntax highlighter that can be used when working with code blocks in markdown files in blog posts.
 
 It is possible to define a language for the code to be used in the Scully code like this:

docs/concepts/handled-routes.md

@@ -77,6 +77,18 @@ export interface HandledRoute {
    */
   renderPlugin?: string | symbol;
 }
+
+
+/**
+ * The data that will be added to the route in scully.routes.json.
+ * The frontmatter data will be added here too.
+ */
+export interface RouteData {
+  title?: string;
+  author?: string;
+  [prop: string]: any;
+}
+
 ```
 
 ```typescript
@@ -88,8 +100,9 @@ export interface RouteConfig {
   /**
    * an optional function that will be executed on render.
    * Receives the route string, and the config of this route.
+   * When it returns false(not falsy), the route isn't rendered.
    */
-  preRenderer?: (route: HandledRoute) => Promise<void | false>;
+  preRenderer?: (route: HandledRoute) => Promise<unknown | false>;
   /** Allow in every other setting possible, depends on plugins */
   [key: string]: any;
 }

docs/learn/getting-started/manualInstallation.md

@@ -11,13 +11,13 @@ First, install the following packages `@scullyio/scully` and `@scullyio/ng-lib`
 
 Using NPM
 
-```sh
+```bash
 npm i @scullyio/scully @scullyio/ng-lib
 ```
 
 Using Yarn
 
-```sh
+```bash
 yarn add @scullyio/scully @scullyio/ng-lib
 ```
 

docs/learn/use-netlify-cms/use-netlify-cms.md

@@ -148,7 +148,7 @@ In this component, the `RendererFactory2` service creates an instance of a `rend
 
 The last part you need to do is to prepare the `config.yml` file that Netlify CMS needs. You can read about [the configuration in the docs](https://www.netlifycms.org/docs/add-to-your-site/#configuration), but here's a basic config file. It configures what branch to commit to, what type of authentication it's using, where to store uploaded files, and defines a collection. The collection in this example is the blog posts that will be written with the CMS.
 
-```yml
+```yaml
 backend:
   name: git-gateway
   branch: main # Branch to update (optional; defaults to main)

docs_extraPages/support.md

@@ -0,0 +1,106 @@
+---
+title: Scully Support
+published: true
+lang: en
+position: 2000
+---
+
+# Support
+
+How to get support. Scully is free to use, and will always be free. The support we will put in is on best effort, but limited to the resources currently available. When you want/need more, the team at HeroDevs is available for you.
+
+<div class="colhold">
+<div class="col">
+
+## Standard
+- community support
+  - [gitter](https://gitter.im/scullyio/community)
+  - [Angular discord Scully channel](https://discord.com/channels/748677963142135818/751266053673320508)
+  - [issues](https://github.com/scullyio/scully/issues)
+- running Scully on-prem
+- all modules under the `@scullyio` npm organization
+
+### always free
+</div>
+<div class="col">
+
+## Pro support
+- Everything from __Standard__
+- Custom OSS Plugins
+- CMS Integration Support
+- Email Support
+- Preferred pricing for custom development
+
+### Contact HeroDevs
+</div>
+<div class="col">
+
+## Enterprise support
+- everything from __pro__
+- custom private plugins
+- priority email support
+- guaranteed response times
+- fixed hourly fees
+
+### Contact HeroDevs
+</div>
+</div>
+
+<!-- The fees mentioned above are based on a yearly, pre-paid subscription. -->
+
+Contact the team at [HeroDevs](https://www.hero.dev)
+
+
+<style> 
+/** 
+   This is the styling for the above columns. Keep it local to this file for now.
+   we might want to move this into the app-styling? 
+*/
+.colhold {
+  display:grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1rem;
+}
+@media only screen and (max-width: 79rem) {
+  .colhold {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+@media only screen and (max-width: 49rem) {
+  .colhold {
+    grid-template-columns: 1fr;
+  }
+}
+
+.col {
+  position: relative;
+  border-radius: 12px 0 12px 0;
+  padding:0 0 2rem 0;
+  border: 2px solid var(--scully-green);
+}
+.col>*:first-child {
+  text-align:center;
+  border-radius: 12px 0 0 0;
+  background-color: var(--scully-green);  
+  margin:-2px;/** correct for column border **/
+}
+.col>*:last-child {
+  position: absolute;
+  text-align:right;
+  border-radius: 0 0 12px 0;
+  background-color: var(--scully-green);  
+  color: var(--scully-white);
+  padding: 8px;
+  padding-right:16px;
+  bottom: 0;
+  left:0;
+  right:0;
+  margin:-2px;/** correct for column border **/
+}
+.col ul {
+  list-style:none;
+  padding: 8px;
+  margin:0;
+}
+</style>
+

libs/plugins/scully-plugin-playwright/src/index.ts

@@ -22,19 +22,18 @@ const plugin = async () => {
     process.exit(0);
   });
   log(`  ${green('✔')} Playwright installation successfully`);
-}
+};
 
 registerPlugin('beforeAll', 'installPWDeps', plugin);
 /** enable as default routeRenderer */
 registerPlugin('scullySystem', routeRenderer, playwrightRenderer, undefined, { replaceExistingPlugin: true });
 /** also add as its own thing, perhaps we want to combine later, or use it differently */
 registerPlugin('enterprise', playwrightRender, playwrightRenderer);
-registerPlugin('enterprise', 'getPWLaunchedBrowser', async () => launchedBrowser$)
+registerPlugin('enterprise', 'getPWLaunchedBrowser', async () => launchedBrowser$);
 registerPlugin('beforeAll', 'startLaunching the browser', async () => {
-  logOk('Playwright is being launched')
+  logOk('Playwright is being launched');
   launchedBrowser();
-})
-
+});
 
 export { playwrightRender } from './lib/plugins-scully-plugin-playwright';
 export type BrowserLaunchOptions = LaunchOptions & { browser: string };

libs/plugins/scully-plugin-playwright/src/lib/plugins-scully-plugin-playwright-utils.ts

@@ -1,8 +1,22 @@
 import { loadConfig, logError, logWarn, white, yellow } from '@scullyio/scully';
 import { showBrowser } from '@scullyio/scully/src/lib/utils/cli-options';
-import * as playwright from "playwright";
-import { Browser, LaunchOptions } from "playwright";
-import { BehaviorSubject, catchError, delayWhen, filter, from, merge, Observable, of, shareReplay, switchMap, take, throttleTime, timer } from 'rxjs';
+import * as playwright from 'playwright';
+import { Browser, LaunchOptions } from 'playwright';
+import {
+  BehaviorSubject,
+  catchError,
+  delayWhen,
+  filter,
+  from,
+  merge,
+  Observable,
+  of,
+  shareReplay,
+  switchMap,
+  take,
+  throttleTime,
+  timer,
+} from 'rxjs';
 
 const defaultConfig: LaunchOptions = {
   headless: true,
@@ -11,7 +25,6 @@ const defaultConfig: LaunchOptions = {
 } as any;
 const options = { ...defaultConfig };
 
-
 const launches = new BehaviorSubject<void>(undefined);
 
 export let browser: Browser;
@@ -44,11 +57,11 @@ export const reLaunch = (reason?: string): Promise<Browser> => {
 };
 
 const launch = async (pluginConfig: any): Promise<Browser> => {
-  const browserType = pluginConfig.browser
+  const browserType = pluginConfig.browser;
   const playrightBrowser = playwright[browserType];
   const browser = await playrightBrowser.launch({ headless: pluginConfig.headless, channel: pluginConfig.channel });
   return browser;
-}
+};
 export const launchedBrowser$: Observable<Browser> = of('').pipe(
   /** load config only after a subscription is made */
   switchMap(() => loadConfig()),
@@ -153,4 +166,4 @@ https://playwright.dev/docs/troubleshooting
       `);
       process.exit(15);
     }) as unknown as Promise<Browser>;
-}
+}