Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
    Manuel Bojato
    @KingDarBoja
    I am going to include it on my personal blog, just need to look at docs when I get the time
    Is there any schematic to setup PrismJS on Angular + Scully?
    s0l0c0ding
    @s0l0c0ding
    @SanderElias Hi, moving to prism.js from
    highlight.js broke my java code highlighting, java is a supported lang , so i dont know why this code is getting fired from the markdown plugin? highlight: (code, lang) => { if (!Prism.languages[lang]) { console.error(`Language '${lang}' is not available in Prism.js, ignoring syntax highlighting for this code block.`); return code; }
    7 replies
    urjathakkar
    @urjathakkar
    image.png
    8 replies
    etavener
    @etavener
    Hi I was wondering if someone could help me with an idea, not sure if it's possible.
    I have some global data ( a menu API that is the same on all pages) that i would like to not request each time a page is visited. Is it possible to to create a plugin that makes the api requests and creates / updates each data.json with the data (via transferState) before visiting each route in the list with puppeteer.
    Sander Elias
    @SanderElias
    @etavener easy way, request in using tranferstate in a service in your app, that you then use wherever you need the data.
    15 replies
    It is possible to inject transferstate with route-plugins. So you can do what you want by wrapping all the route plugins you use in some custom router-plugin
    3rth way is use the proccessRoute (or routeProccess) plugin, and add it to each and every route in there.
    4rth way, use the 'preRender' function on each route to inject this data.
    Preston Lamb
    @pjlamb12
    I'm having issues deploying to Netlify. The project runs perfectly on my local machine, and maybe takes a minute or two at most to build. But when I deploy to Netlify, the build just hangs. The Angular project successfully builds, and then Scully discovers the routes before no longer moving on. I'm setting the NODE_VERSION to 12 in the netlify.toml file as well, but that doesn't seem to have helped.
    1 reply
    Valentyn Vasylevskyy
    @valpioner

    Hello. I have a strange and annoying post list disappearing on my home page where I list all blog posts.
    Can someone explain why I have such behavior and how to fix it?

    1. When I load a page - a list is loaded and rendered.
    2. scully-routes.json starts to load and list of posts disappear
    3. When scully-routes.json finish loading - content is back again on a page

    in a component i have

    $blogPosts = this.scully.available$.pipe(
        map((routes) =>
          routes.filter(
            (route) =>
              route.route.startsWith('/blog/') && route.sourceFile.endsWith('.md')
          )
        )
      );

    in a template i have

    <div *ngFor="let post of $blogPosts | async">
    
                <div class="uk-card uk-card-default uk-card-hover uk-card-small" routerLink="/blog/{{post.slug}}">
                  <div class="uk-card-media-top">
                    <img src={{post.thumbnail}} alt="">
                  </div>
                  <div class="uk-card-body">
                    <h3 class="uk-card-title">{{post.title}}</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                  </div>
                </div>
    
              </div>
    Valentyn Vasylevskyy
    @valpioner
    1.gif
    Sander Elias
    @SanderElias
    Use the TransferStateService, that way, your list of blog-posts is there before the angular component destroy's the list and starts over.
    If you have anything async in your app's boot path, you will get a visible flash. Transferstate is sync on boot.
    @pjlamb12 We are looking into the netlify thing.
    Valentyn Vasylevskyy
    @valpioner
    @SanderElias thanks, will try
    Valentyn Vasylevskyy
    @valpioner

    @SanderElias I fixed my issue thanks to your suggestion.

    used this code instead of simple get data observable:

    this.blogPosts$ = this.transferStateService.useScullyTransferState(
          'allPosts',
          this.scully.available$.pipe(
            map((routes) =>
              routes.filter(
                (route) =>
                  route.route.startsWith('/blog/') &&
                  route.sourceFile.endsWith('.md')
              )
            )
          )
        );

    BTW useScullyTransferState is not included and described in the official documentation,
    I would suggest to add it there as well as a few examples of how to use it for async operations.

    etavener
    @etavener
    I've got a strange issue with fragments. When i visit a page like path/page#fragmentI get the correct static page displayed. However, it redirects to path/page/#fragment so when Angular loads there seems to be an issue with displaying the page. Was this feature intentional and is there a way to stop it redirecting / modifying the path with the additional / at the end?
    32 replies
    Valentyn Vasylevskyy
    @valpioner
    When I navigate to a specific blog post, the post itself has a delay to load ( inside <scully-content></scully-content>).
    Did I miss something or that is how it should behave?
    (Gif below is in slow 3g, but in online it is still blinking)
    3.gif
    I see it inside my index.html
    image.png
    Valentyn Vasylevskyy
    @valpioner
    is there a way to cache post content? (inside <scully-content></scully-content>)
    Sander Elias
    @SanderElias
    @valpioner We do already embed it in your HTML file, so yes, it is "cached". Try running your page with javascript disabled.
    Probably something in your app is removing the static version that is there when you load the page.
    18 replies
    s0l0c0ding
    @s0l0c0ding
    @SanderElias i noticed that the page: https://scully.io/docs/learn/plugins/built-in-plugins/md/ didn't get rendered correctly, did i miss something?
    Valentyn Vasylevskyy
    @valpioner
    image.png
    Sander Elias
    @SanderElias
    @valpioner #79
    Valentyn Vasylevskyy
    @valpioner
    thanks.
    Sander Elias
    @SanderElias
    Sorry, I was getting an old message
    etavener
    @etavener
    @SanderElias any news on the patch?
    13 replies
    Danny Koppenhagen
    @d-koppenhagen
    Hey guys, I created the plugin scully-plugin-toc already a while ago. No I just realized that the created toc links aren't working (a click on the link doesn't lead into a scroll to the anker). This is even the case when the Angular router option anchorScrolling is set to enabled. The plugin genertes the links in the list like this one: <li><a href="/blog/2020-08-my-development-setup/#graphics">Graphics</a></li>. But when performing a click on the link, neither the URL is changed nor the screen scrolls to the anker. So it seems that the Angular router is blocking the native behaviour and ignors the click on the link. When I disable Angular completely using the scully-plugin-disable-angular, the toc ankers are working burt that's not what I want. Any Ideas / hints how to solve this problem? PS: for investigation here is my personal blog repo that can be used for fork / play / investigation: https://github.com/d-koppenhagen/d-koppenhagen.de
    Sander Elias
    @SanderElias
    @d-koppenhagen Anchors are a bit of an outlier in an Angular app. I have done some code for them in our docs app. (also I wrote a TOC plugin there that uses the markdown instead fo the HTML (in reality, this doesn't matter that much)
    As I completely strip out angular in our docs, I did put in some code in place there to make sure anchors work, but that's more in the docs-link-update plugin iirc.
    Tiberiu Bucovei
    @btibia
    Hi, I just want to run a basic project to get used to it and I'm finding this problem
    using plugins from folder "./scully"
    Typescript error while compiling plugins. the error is:
    node_modules/@scullyio/scully/lib/utils/serverstuff/staticServer.d.ts(2,31): error TS2307: Cannot find module 'express-serve-static-core' or its corresponding type declarations.
    node_modules/@scullyio/scully/lib/utils/serverstuff/staticServer.d.ts(3,26): error TS2307: Cannot find module 'express-serve-static-core' or its corresponding type declarations.
    it's a angular project and I've used all the commands that I found in the basic "tutorial"
    Sander Elias
    @SanderElias
    @btibia you need node version 12+.
    Also, sometimes it helps to remove node_modules and reinstall. But if you are changing node versions, you need to do that anyway.
    Tiberiu Bucovei
    @btibia
    @SanderElias thank for the reply. I have node v12.16.1 installed. I've also deleted the node_modules and npm installed again. Still same error. Also in tsconfig.js from scully folder there is files property, which give an error. Changing to "include": ["*/.ts", "*.ts"] solve the issue, but I get the issue from my first post
    Jonathan Chen
    @Auha
    Is there a way to mix a scully and a regular Angular app together?
    Sander Elias
    @SanderElias
    @Auha When you use Scully on your Angular app, it stays 100% the same app but extended with a index.html for every route. It doesn't stop being an Angular app unless you decide that.
    @btibia You seem to have something different as what I initially interpreted. Is there a place where I can reproduce this? (I think I know the root cause, and I'm going to fix this today, but I'm not sure if that is your problem too)
    Sander Elias
    @SanderElias
    @btibia for now, if you want to run, remove the ./scully folder
    I fixed it in the schematics now, so new project don't have this issue anymore.
    sixbras
    @sixbras
    As @Auha asked a few hours ago. If an application mixes about fifty pages with fixed urls, and a part of the application which contains dynamic content and authentication, is it possible to mix the whole and how?Server Side Rendering offer this possibility to switch from server side rendered page to client side after the first click.
    Sander Elias
    @SanderElias
    Sander Elias @SanderElias 07:17
    @Auha When you use Scully on your Angular app, it stays 100% the same app but extended with a index.html for every route. It doesn't stop being an Angular app unless you decide that.
    so, yes.