Added scully mode detaction. (in scully/from generated)

blog/jorge.md

@@ -0,0 +1,42 @@
+---
+title: Deberías colaborar en proyectos open source
+published: true
+tags: community,developer,open-source
+description: ¿Qué Some spanish blog post?
+publish date: 2019-12-16
+---
+Hace algunas semanas en las oficinas de google de sunnyvale se hosteo el "Google Developer Expert Summit" y tuve la "gran idea" de hablar sobre porque deberíamos trabajar en proyectos open source en nuestro tiempo libre.
+Y toque varios puntos que me gustaría compartir con ustedes:
+### - Yo haciendo OSS?
+Claro, basicamente si sabes programar podes colaborar en OSS
+> ¿Qué te diferencia de la gente que lo hace? Que ellos simplemente lo hacen!
+Seguramente una persona que esta haciendo hace tiempo OSS sabra algunos trucos mas que vos a la hora de crear un PR o de entender y dialogar en los tickets abiertos… Pero no se nace sabiendo, se va aprendiendo todo…
+Así que a la primera pregunta es un SI, tu código en proyectos open source es posible, solo tenés que tener ganas, tiempo y hacerlo.
+### No es tan fácil!
+Bueno, claro que no, pero nunca te topaste con uno de esos issues bien difíciles hasta que lo sacaste?
+Bueno, es lo mismo, la diferencia es que posiblemente tenga el "síndrome del impostor"
+![](https://cdn-images-1.medium.com/max/926/0*yKQQUkVVSfR4H6rW)
+Claro que existe, lo dice wikipedia.
+La verdad que a veces uno piensa que no esta "al nivel" de los que hacen "open source" pero la verdad es que si no empezás a hacer aunque sea cambios SUPER chiquitos, no vas a empezar nunca.
+### ¿Por qué necesito contribuir en open source?
+![](https://cdn-images-1.medium.com/max/498/0*ssFA3EJN4f0ZyXRn)
+Esta es una de las preguntas que me hicieron varias veces… Y creo que es la más fácil de responder de todas.
+- Vas a entender mejor la libreria/framework
+- Vas a ayudar a otros desarrolladores
+- Vas a tener una mejor vision del potencial de utilizar ese proyecto
+- Vas a ayudar a las personas que te ayudan a vos (los mantainers)
+> ¡Aprendes una nueva forma de ayudar y mejorar tus habilidades!
+¿Cómo empiezo a colaborar?
+Esta es una pregunta tal vez un poco mas trabajosa (?) , bueno en realidad no, una vez que arrancas te vas a dar cuenta que es más fácil de lo que parece… pero para mí, las mejores formas de arrancar son:
+- Buscando en el proyecto los issues con label "good for first PR" / "community help"
+- Busca algún mentor que haga OSS
+- Busca la forma de comunicarte con el team que mantiene el proyecto
+- No te avergüences por preguntar o por lo que estas haciendo
+> Agradecer, no cuesta nada y alegra a muchos
+![](https://cdn-images-1.medium.com/max/480/0*5uhbsJVA1k2iKWg1)
+Cuando alguien te ayude o te de una mano, siempre tenes que ser agradecido, no te cuesta realmente nada… Y eso va a hablar bien de vos!
+#### Espero que estos pequeños tips te sirvan para arrancar a colaborar con proyecto open source y lleves tus skills a otro nivel !!
+Como siempre, espero que les guste lo compartido y cualquier duda dejo mis canales:
+- [Jorge Cano (@jorgeucano) | Twitter](https://twitter.com/@jorgeucano)
+- [Jorge Cano](https://www.youtube.com/channel/UCdp9sM22GW5uIOaU9eZ7n6w)
+Saludos

projects/sampleBlog/src/app/app.component.html

@@ -1,5 +1,5 @@
 <header>
-  <h1>Scully demo blog app!</h1>
+  <h1>Scully demo blog app! <small>{{currentState}}</small></h1>
   <a [routerLink]="['/home']">🏠</a>
 </header>
 

projects/sampleBlog/src/app/app.component.ts

@@ -1,12 +1,16 @@
 import {Component} from '@angular/core';
-import { IdleMonitorService } from '@scullyio/ng-lib';
+import {IdleMonitorService, isScullyGenerated, isScullyRunning} from '@scullyio/ng-lib';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css'],
 })
 export class AppComponent {
-  title = 'sampleBlog';
+  currentState = isScullyRunning()
+    ? 'rendering inside scully'
+    : isScullyGenerated()
+    ? 'Loaded from static HTML'
+    : 'SPA mode';
   constructor(private idle: IdleMonitorService) {}
 }

projects/scullyio/ng-lib/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scullyio/ng-lib",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "repository": {
     "type": "GIT",
     "url": "https://github.com/scullyio/scully/tree/master/projects/scullyio/ng-lib"

projects/scullyio/ng-lib/src/lib/utils/isScully.ts

@@ -0,0 +1,3 @@
+// tslint:disable: no-string-literal
+export const isScullyRunning = () => window && window['ScullyIO'] === 'running';
+export const isScullyGenerated = () => window && window['ScullyIO'] === 'generated';

projects/scullyio/ng-lib/src/public-api.ts

@@ -5,5 +5,6 @@
 export * from './lib/components.module';
 export * from './lib/idleMonitor/idle-monitor.service';
 export * from './lib/route-service/scully-routes.service';
-export * from './lib/scully-content/scully-content.component'
+export * from './lib/scully-content/scully-content.component';
+export * from './lib/utils/isScully'
 

scully/renderPlugins/puppeteerRenderPlugin.ts

@@ -1,3 +1,4 @@
+// tslint:disable: no-string-literal
 // const puppeteer = require('puppeteer');
 import {Browser, Page} from 'puppeteer';
 import {HandledRoute} from '../routerPlugins/addOptionalRoutesPlugin';
@@ -26,16 +27,21 @@ export const puppeteerRender = async (route: HandledRoute): Promise<string> => {
 
     /** Inject this into the running page, runs in browser*/
     await page.evaluateOnNewDocument(() => {
+      /** set "running" mode */
+      window['ScullyIO'] = 'running';
       window.addEventListener('AngularReady', () => {
-        // setTimeout(() => window['onCustomEvent'](),10000);
+        /** add a small script tag to set "generated" mode */
+        const d = document.createElement('script');
+        d.innerHTML = `window['ScullyIO']='generated';`;
+        document.head.appendChild(d);
         window['onCustomEvent']();
       });
     });
 
     // enter url in page
     await page.goto(path);
 
-    await Promise.race([pageReady, waitForIt(25 * 1000)] );
+    await Promise.race([pageReady, waitForIt(25 * 1000)]);
 
     /**
      * The stange notation is needed bcs typescript messes

scully/utils/validateConfig.ts

@@ -23,7 +23,7 @@ export async function validateConfig(config: ScullyConfig) {
     }
     result.projectRoot = config.projectRoot;
   } else {
-    error(`projectRoot missing in "${yellow('scully.json')}"`);
+    error(`projectRoot missing in "${yellow('scully.config.js')}"`);
   }
   if (config.routes) {
     await Promise.all(
@@ -50,7 +50,7 @@ export async function validateConfig(config: ScullyConfig) {
       })
     );
   } else {
-    logWarn('No routes defined in "scully.config"');
+    logWarn('No routes defined in "scully.config.js "');
   }
   if (hasErrors) {
     /** stop everthing if there are errors in the config. */