Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 15 additions & 19 deletions docs/blog.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,34 +4,32 @@ order: 600
lang: en
---

# Create a blog
# Creating a Blog

Scully is the best option for moving a blog to Angular!
Scully is the best option for moving a blog to Angular! It provides a schematic that enables Angular applications to use markdown files for blog's content.

It has a schematic that enables Angular applications to use markdown files for blog's content.
This guide covers the following topics:

1. [Adding Blog Support](#adding-blog-support)
2. [Generating New Blog Posts](#generating-new-blog-posts)

_IMPORTANT:_ You only need a Angular app with scully, if you don't have, please check first the [getting started](/docs/getting-started) docs.
_IMPORTANT:_ If you do not have an Angular app with Scully, please check the [getting started](/docs/getting-started) guide first.

## Adding Blog Support

To add blog support to your app, run the following command:
Add blog support by running the following command:

```bash
ng generate @scullyio/init:blog
```

This command adds the blog modules's routes to the Angular application. In addition, it creates a `./blog` folder for the blog's markdown files.

To create a folder with a different name, run the following command:
The above command adds the blog modules' routes to the Angular application. In addition, it creates a `./blog` folder for the blog's markdown files. In case you want to use a different folder name, run the following command:

```bash
ng generate @scullyio/init:markdown
```

and you need response some options
You will be prompted with the following questions;

```bash
? What name do you want to use for the module? blog
Expand All @@ -40,13 +38,7 @@ and you need response some options
? Under which route do you want your files to be requested? blog
```

or

```bash
ng generate @scullyio/init:markdown --name="blog" --slug="title" --source-dir="mdblog" --route="blog"
```

And the result is:
After adding the blog support, you should see the following message:

```bash
✅️ Update scully.{{yourApp}}.config.js
Expand All @@ -62,21 +54,25 @@ UPDATE src/app/blog/blog.module.ts (391 bytes)
CREATE mdblog/2020-03-24-blog.md (95 bytes)
```

**NOTE:** Slug is the name of the url matcher for search the file.
Alternatively, it is possible to run the `@scullyio/init:markdown` command with flags to avoid the prompts as follows:

```bash
ng generate @scullyio/init:markdown --name="blog" --slug="title" --source-dir="mdblog" --route="blog"
```

The following table shows all available options:

| Option | Description | Default |
| -------------- | --------------------------------------------------------- | ------------------------ |
| `name` | Defines the name for the created module | 'blog' |
| `slug` | Define the name for the `:slug` | 'id' |
| `slug` | Defines the name for the url matcher file. `:slug` | 'id' |
| `routingScope` | Sets a routing scope (`Root` or `Child`) | Child |
| `sourceDir` | Defines a source directory name (default: `name`) | value from `name` option |
| `route` | Defines a route path before the `:slug` (default: `name`) | value from `name` option |

Scully works well in combination with other tools and [utilities](utils.md).

For instance, if the markdown content includes code blocks, and you want to highlight it us the use a utility.
For instance, if the markdown content includes code blocks, and you want to highlight them; use a utility.

## Generating New Blog Posts

Expand Down
6 changes: 3 additions & 3 deletions docs/features.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ lang: en

# Scully's Features

Under the hood, Scully analyzes your Angular application and generates a static
Under the hood, Scully analyzes an Angular application and generates a static
version of it. It provides several Angular schematics to make
its usage AS EASY AS POSSIBLE!

Expand All @@ -29,7 +29,7 @@ its usage AS EASY AS POSSIBLE!
[Schematics](/docs/schematics):

- Install and create files for Scully (ng-add).
- Creating a blog config for scully & Angular.
- Generate a plugin skeleton.
- Creating a blog config for Scully & Angular.
- Generate a plugin's skeleton.
- Run the router discovery.
- Create markdown files and skeleton.
86 changes: 55 additions & 31 deletions docs/getting-started.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,21 +12,20 @@ Before getting started, please read the [Prerequisites](pre-requisites.md).

**_All about Scully in one video_** : [Building the Fastest Angular Apps Possible](https://thinkster.io/tutorials/scully-webinar-building-the-fastest-angular-apps-possible)

This getting started guide covers topics:
This getting started guide covers the following topics:

1. [Installation](#installation)
2. [Building](#build)

## Installation

First, open in your terminal in the path of your Angular application and run the following command:
First, open an Angular application's path in your terminal and run the following command:

```bash
ng add @scullyio/init
```

This scheme installs and generates everything you need to start using Scully.
Once the installation finishes the following message will be displayed:
After a successful installation the following message will be displayed:

```bash
Installing packages for tooling via npm.
Expand All @@ -43,23 +42,31 @@ CREATE scully.{{yourApp}}.config.js (109 bytes)
UPDATE package.json (1438 bytes)
```

## ng generate @scullyio/init:blog
## Generating a Blog

This command will generate a blog module. [more info here](blog.md)
Run the following command to generate a blog module.

Once it is generated remove all the content in the `app.component.html` file, and add only the router outlet tag `<router-outlet></router-outlet>`.
[more info here](blog.md)

### Home page
```bash
generate @scullyio/init:blog
```

Now, remove the `app.component.html` file's content just leave the `<router-outlet></router-outlet>` tag.

**It is necessary to create a _route entry point_ because the Angular CLI does not create one by default.**
[more info here](blog.md)

Create a _Home Module_ with a _Home Component_ and its routes already configured with the following command:
### Creating the Application's Entry Point (Home Page)

Create a _Home Module_ with routes configured and with a _Home Component_ with the following command:

```ts
ng generate module home --route=home --module=app-routing
```

### Configuring the home module as root
**Scully depends on the _route entry point_.**

### Configuring the Home Module as the Project's Root

Open the `app-routing.module.ts` file and set an empty path attribute for the home route as shown below:

Expand All @@ -73,9 +80,11 @@ const routes: Routes = [
];
```

### Inject the route service
### Injecting Scully's Route Service

Scully provides a service for accessing generated routes with ease.

Scully provides a service for accessing generated routes with ease. To use it, open the `home.component.ts` file and add the following code:
Open the `home.component.ts` file and add the following code:

```ts
import {ScullyRoutesService} from '@scullyio/ng-lib';
Expand Down Expand Up @@ -107,42 +116,57 @@ Now, it is possible to loop through the links inside the template by opening the
</ul>
```

**NOTE:** If you don't add any route, scully will pre-render 0 pages.
**NOTE:** If Scully's route service is not added, it does not pre-render pages.

## Build
## Building the Scully Application

At this point, you have your Angular project with Scully successfully installed.
At this point, the Angular project with Scully is ready.

#### IMPORTANT:

_Scully requires the distribution files in the `./dist/my-scully-app` folder._

**NOTE:** If the angular application outputs the distribution files directly into the root folder `./dist`. Scully is not able to copy all files. This is an OS file-system issue.

Build the application in order to generate the distribution files:
Fist, build the Angular application by running the following command:

```bash
ng build
```

Now, lets build Scully and turn your Angular app into a pre-rendered static site.
Now, build Scully and turn the Angular app into a pre-rendered static site.

```bash
npm run scully
```

Congratulations! You have turned your Angular application into a wicked fast pre-rendered one thanks to Scully.

The built version is in the `./dist/static` folder. This folder contains all the pages in the site.
The built version of the static site is located in the `./dist/static` folder. It contains all the static pages.

**NOTE:** In case of any errors or warnings during the build process, please follow the instructions in the errors/warnings section or [submit an issue](https://github.com/scullyio/scully/issues/new/choose).

#### Serving the content
## Serving the Static Site

Serve the content of the static site by running:

```bash
npm run scully serve
```

The above command creates two web servers, one for the Angular app and one for the Scully app.

### Disabling JS

**Extra**: While serving the Scully app, [disable JavaScript](https://developers.google.com/web/tools/chrome-devtools/javascript/disable)
and the site's navigation still works. More importantly, most parts of the site still work even though JS has been disabled.

### Debungging the Scully App

**Extra**: In order to debug the Scully application with ngServe, make sure to run:

Use `npm run scully serve` for serve your content.
Scully serve is an option for create two web servers, one for your angular app and the other for the scully build.
```bash
npm run scully
```

**Extra Credit**: While serving the static app, [disable JavaScript](https://developers.google.com/web/tools/chrome-devtools/javascript/disable)
and make sure that the site's navigation still works and most parts of it should still work without JS enabled.
Then, start the server:

```bash
npm run scully:serve
```

**Extra credits**: If you want to debug your blog page using ngServe, make sure you do a full run off `npm run scully` and then start `npm run scully:serve`. Then scully will use the generated HTML to fill in the content in your `ng serve` session.
Scully will use the generated HTML to fill in the `ng serve`'s session content.
4 changes: 2 additions & 2 deletions docs/issues.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@ lang: en

# Issues

To create a bug report go to [Scully Bug template](https://github.com/scullyio/scully/issues/new?assignees=&labels=bug&template=---bug-report.md&title=).
To create a bug report: Go to [Scully Bug template](https://github.com/scullyio/scully/issues/new?assignees=&labels=bug&template=---bug-report.md&title=).

To propose a new feature go to [Scully Feature request](https://github.com/scullyio/scully/issues/new?assignees=&labels=enhancement&template=---feature-request.md&title=)
To propose a new feature: Go to [Scully Feature request](https://github.com/scullyio/scully/issues/new?assignees=&labels=enhancement&template=---feature-request.md&title=)

The Scully team is working on better documentation for creating issues.
26 changes: 13 additions & 13 deletions docs/plugins.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ lang: en

# Plugins

Scully uses a plugin system that allows users to define new ways for Scully to pre-render an application. There are three main
Scully uses a plugin system that allows users to define new ways for Scully to pre-render an application. There are five main
types of plugins:

1. [Router Plugins](#router-plugin)
Expand All @@ -31,23 +31,23 @@ The `registerPlugin` function adds a new plugin to Scully. This function has 5 p

### type: string

`type` - Indicates the type of plugin. It can be `router`, `render`, `fileHandler`, `allDone`, or `routeDiscoveryDone`.
`type` - Indicates the plugin's type. The existing types are: `router`, `render`, `fileHandler`, `allDone`, or `routeDiscoveryDone`.

### name: string

`name` - The plugin's name. This must be unique for the type of plugin. To replace an existing plugin, you need to set the `replaceExistingPlugin` option.
`name` - The plugin's name. This must be unique for the type of plugin. To replace an existing plugin, set the `replaceExistingPlugin` option.

### plugin: any

`plugin` - The plugin's function. This holds the actual plugin. The plugin types are described in their own type descriptions
`plugin` - The plugin's function. It contains the plugin's logic. The plugin types are described in their own type descriptions

### validator: function optional
### validator: function (optional)

`validator` - A validations function. It should return an array of errors. if there are no errors, it should return a falsy value. When it returns an array of strings, those are displayed, and then the process is aborted.
`validator` - A validation function. It should return an array of errors. if there are no errors, it should return a `false` value. If it returns a `string<array>`, those strings are displayed as errors, and the process is aborted.

> Tip: Add color to the validator errors by using the colors exported from Scully.

##### Example validator:
##### Validator Example

```typescript
import {yellow} from '@scullyio/scully';
Expand All @@ -67,15 +67,15 @@ const validator = async options => {
};
```

### options
### Options

The optinal options object. This can be used to set the pluginOptions. For now the only option available is `replaceExistingPlugin`
The `optinal` object can be used to set the plugin options. At the moment, the only available option is `replaceExistingPlugin`.

## Router Plugins

Any route in the application that contains a router-parameter must be configured in a **router plugin**. The plugin teaches Scully how Scully how to get the required data to be pre-render in the web-pages from the route-params.
Any route in the application that contains a router-parameter must be configured in a **router plugin**. The plugin teaches Scully how to get the required data to be pre-render in the web-pages from the route-params.

Suppose your application has a route like this: `{path: 'user/:userId', component: UserComponent}`. In order for Scully to pre-render the website, it needs to know the complete list of User IDs that will be used in that route parameter `:userId`. If the app had 5 users with the IDs 1, 2, 3, 4, and 5; Scully would need to render the following routes:
Suppose the application has a route like this one: `{path: 'user/:userId', component: UserComponent}`. In order for Scully to pre-render the website, it needs to know the complete list of User IDs that will be used in that route parameter `:userId`. If the app had 5 users with the IDs 1, 2, 3, 4, and 5; Scully would need to render the following routes:

```
/user/1
Expand Down Expand Up @@ -325,8 +325,8 @@ Here are some links to built-in **render plugins** in Scully:

## RouteDiscoveryDone Plugin

Those plugins are called automatically when all routes are collected, and all router plugins are done. It will receive a shallow copy of the handledRoute array. It should return void.
This type of plugin is called automatically after all routes have been collected, and all router plugins have finished. It receives a shallow copy of the `handledRoute` array, and it returns `void`.

## AllDone Plugin

The `allDone` type of plugins are identical to `routeDiscoveryDone`, expect they are called _after_ scully is completely done with all processing.
An `allDone` plugin is like a `routeDiscoveryDone` plugin, expect it is called _after_ Scully finishes executing all its processes.
29 changes: 14 additions & 15 deletions docs/plugins/contentFolderPlugin.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,13 @@ order: 710
lang: en
---

# contentFolder plugin
# contentFolder Plugin

The contentFolder plugin set exist out of a route plugin, and a render plugin.
The route plugin takes a config in the form of:
The contentFolder plugin exists out from a route plugin and from render plugin.

## contentFolder route plugin
## contentFolder Route plugin

Takes a config with like this:
The route plugin takes a config in the form of:

```typescript
const contentFolderconfig = {
Expand All @@ -26,16 +25,16 @@ const contentFolderconfig = {
};
```

It only handles 1 parameter, and the parameter is mandatory. Inside the config for the parameter is 1 property called folder.
This takes a file location relative to the project root. It will traverse into this folder, and its subfolders and will make a `HandledRoute`
for each of known file-extension in there. out of the box `.md`(markdown) and '`adoc` (asciiDoc) are known.
That route will have the `templateFile` property set to the full path to the file, and the route will reflect the folder structure.
Also it will parse out the date in the front-matter part, and adds that to the `data` property of the handledRoute.
The config takes and handles only one parameter, called `folder` which is mandatory. It is a file's location relative to the project root.

Scully traverses this folder, and its subfolders in order to make a `HandledRoute` for each file-extension known in there.
`.md`(markdown) and '`adoc` (asciiDoc) are known out of the box. That route has a `templateFile` property with the full path to the file. The route reflects the folder structure.
Furthermore, it parses out the date in the front-matter part, and it is added to the handledRoutes `data` property.

## contentFolder render plugin.
## contentFolder Render Plugin.

this takes the prerendered HTML and a `HandlerRoute`, and will read in the file in the `templateFile` property.
It extracts the Angular `_ngcontent` id. For the file it looks up the extension in the fileHandler plugins, and use the plugin to convert the raw content to HTML.
Then it it adds the `_ngcontent` id to this HTML, so that the styling you did in the component works as expected.
This plugin takes the pre-rendered HTML and a `HandlerRoute` in order to read the file indicated by the `templateFile` property.
It extracts the Angular `_ngcontent` id. It looks for the file's extension in the fileHandler plugins, and it uses this plugin to convert the raw content into HTML.
Finally, it adds the `_ngcontent` id to the generated HTML, so that components' style works as expected.

It will then find the `<scully-content>` and injects the HTML as it's previous sibling(s).
This plugin finds the `<scully-content>` tag, and it injects the HTML as its previous sibling(s).
2 changes: 1 addition & 1 deletion docs/plugins/ingoredPlugin.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,4 @@ order: 720
lang: en
---

# contentFolder Plugin
# Ignored Plugin
Loading