scullyio / scully

The Static Site Generator for Angular apps
https://scully.io/
MIT License
2.55k stars 256 forks source link

Fragment links in .md files directing to `/` instead of `/current-page` #520

Closed donmckenna closed 4 years ago

donmckenna commented 4 years ago

🐞 Bug report

Description

When Scully renders my .md files into html files, the resulting markup looks to be correct, however fragment links don't seem to be taking the current route into consideration.

For example my page looks like this:

image

And viewing the source looks like this:

image

..which looks correct as far as the markup goes.

However, hovering over and navigating to the link seems to show the fragment is not being "applied" to the current route:

image

Even when I'm not using http-server and just open the html file itself from dist/static, the incorrect route remains:

image

I've also included index-sanity_check.html which is a simplified version of the above page. Its view source html looks like this.. similar to the Scully markup:

image

..but its fragment link is correct:

image

🔬 Minimal Reproduction

Test repo here: https://github.com/donmckenna/scully-md-bug-test

A blank Angular app and the Scully initialization steps in https://scully.io/docs/getting-started and https://scully.io/docs/blog to create a Scully "blog".

ng new scully-md-bug-test
routing: y
ng add @scullyio/init
ng generate module home --route=home --module=app-routing
ng generate @scullyio/init:blog
ng generate @scullyio/init:post --name="This is my post"

Change home route path to be ''

const routes: Routes = [
  { path: '', loadChildren: () => import('./home/home.module').then(m => m.HomeModule) },
  { path: 'blog', loadChildren: () => import('./blog/blog.module').then(m => m.BlogModule) }
];

Remove boilerplate in app.component.html and replace with only

<router-outlet></router-outlet>

Within blog/this-is-my-post.md change published to true

---
title: This is my post
description: blog description
published: true
---

and make a fragment link to the heading

[link to post](#this-is-my-post)
# This is my post

Build the app and run Scully on the build

ng build
npm run scully

Mimicking something I watched Aaron do on a livestream, cd into dist/static and run http-server there. The default port for me is :8080 Navigate to localhost:8080/blog/this-is-my-post This is what I see: image

Note: I find the same issue when simply opening the Scully generated static html files in a browser.

💻Your Environment

Angular Version:

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/

Angular CLI: 9.1.3
Node: 12.16.3
OS: win32 x64

Angular: 9.1.3
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.901.3
@angular-devkit/build-angular     0.901.3
@angular-devkit/build-optimizer   0.901.3
@angular-devkit/build-webpack     0.901.3
@angular-devkit/core              9.1.3
@angular-devkit/schematics        9.1.3
@ngtools/webpack                  9.1.3
@schematics/angular               9.1.3
@schematics/update                0.901.3
rxjs                              6.5.5
typescript                        3.8.3
webpack                           4.42.0

Scully Version:

From package.json

"@scullyio/init": "0.0.26",
"@scullyio/ng-lib": "latest",
"@scullyio/scully": "latest",

However the issue persists even explicitly installing Scully with npm i @scullyio/scully which results in

"@scullyio/init": "0.0.26",
"@scullyio/ng-lib": "latest",
"@scullyio/scully": "0.0.90",

🔥 Exception or Error

This error doesn't seem to affect any builds from finishing, and the output files all look to be correct, however at the end of every npm run scully there is a little error which changes its "process" every error. I'm not sure it's directly related, but it says ERROR so I'm including it. I don't get this error with any other command.

For example:

image

But again, every build has the same "process" error, but with a different number as the "process". Building a few in a row gives me something like this:

ERROR: The process "19620" not found.
ERROR: The process "16576" not found.
ERROR: The process "9324" not found.
etc..
SanderElias commented 4 years ago

There is a docsLinkRewrite plugin in the demos/plugins folder that takes care of this. For usage now I would refer to the scully-docs config, as it is used there. I have an active todo to move this to our plugins folder, and to document it

donmckenna commented 4 years ago

Thanks Sander :)