Scully: Static route question

[davthu]

How would you go about to create a static route with no child routes (slugs) and still have it to render content from a markdown file? Valid use case for this would be Static Pages like Home or About Us.

[msacket]

You can use the extraRoutes configuration:

exports.config = {
  projectRoot: "./src",
  projectName: "gammastream-web",
  outDir: './dist/static',
  extraRoutes: [
    '/',
    '/services',
    '/customers',
    '/pricing'
  ]
};

Edit -- I'm sorry, I missed the "render content from a markdown file" part of your question. extraRoutes may not apply.

[davthu]

@msacket What I’m trying to do is to use the Netlify CMS ”File Collections” configuration to edit single files rather than entire folders.

https://www.netlifycms.org/docs/collection-types/#file-collections

[SanderElias]

That can be done by a plugin. I created one with Aaron and Jorge in one of our calls. Perhaps we should pull it in.

import { registerPlugin, scullyConfig, ScullyConfig } from '@scullyio/scully';
import { join } from 'path';

const tadaaPlugin = registerPlugin('router', 'tadaa', async (route, config) => {
  console.log(join(scullyConfig.homeFolder, config.file));
  return [
    {
      route,
      templateFile: join(scullyConfig.homeFolder, config.file),
      postRenderers: ['contentFolder'],
    },
  ];
});

export const config: ScullyConfig = {
  projectRoot: './src',
  projectName: 'directmarkdownpage',
  outDir: './dist/static',
  routes: {
    '/bar': {
      type: 'tadaa',
      file: './content/bar.md',      
    },
  },
};

[geromegrignon]

That can be done by a plugin. I created one with Aaron and Jorge in one of our calls. Perhaps we should pull it in.

It would be a great idea !

[belamrani]

Hi ! I have the same usecase with Netlify CMS. @SanderElias could you please share the plugin you made in your exemple ?
Thank you very much :)

[SanderElias]

@belamrani The entire code for the plugin is in the message above. I would call it something different as tadaa tho ;)

[belamrani]

@SanderElias ^^ ok I thought there was something else that I missed because I tried several time on my project and it doesn't work for me :( .

If you have any idea that could help me :) ?

My config.ts file :

import { registerPlugin, scullyConfig, ScullyConfig } from '@scullyio/scully';
import { join } from 'path';

registerPlugin('router', 'static',  (route, config) => {
  console.log(join(scullyConfig.homeFolder, config.file));
  return [
    {
      route,
      templateFile: join(scullyConfig.homeFolder, config.file),
      postRenderers: ['contentFolder'],
    },
  ];
});

export const config: ScullyConfig = {
  projectRoot: './projects/slk/src',
  projectName: 'slk',
  outDir: './dist/static',
  routes: {
    '/home': {
      type: 'static',
      file: './contents/pages/home.md',
    }
  }
};

In scully-routes.json I have only this {"route":"/home"}

PS: I have other .md blog files in this project and it works perfectly.

Thank you

[belamrani]

If I add data, like in the following exemple, the data are well added : {"route":"/home","title":"Hello","test":"test"}

import {registerPlugin, scullyConfig, ScullyConfig} from '@scullyio/scully';
import {join} from 'path';

const staticPlugin = registerPlugin('router', 'static', async (route, config) => {
  console.log(join(scullyConfig.homeFolder, config.file));
  return [
    {
      route,
      templateFile: join(scullyConfig.homeFolder, config.file),
      postRenderers: ['contentFolder'],
      title: 'Hello',
      data : {
        test: 'test'
      }
    },
  ];
});

export const config: ScullyConfig = {
  projectRoot: './projects/slk-automobile/src',
  projectName: 'slk-automobile',
  outDir: './dist/static',
  routes: {
    '/home': {
      type: 'static',
      file: './contents/pages/home.md',
    },

  },
};

I can't find why the content of the .md file is not added in the scully-routes.json.

[SanderElias]

@belamrani I just double-checked. here is my updated branch of the repo where we did test this. I updated t to the latest of angular and Scully, and it still works as expected.

[adrian-ub]

I tried add meta

import { readFileAndCheckPrePublishSlug } from '@scullyio/scully/src/lib/renderPlugins/content-render-utils/readFileAndCheckPrePublishSlug';

const templateFile = join(scullyConfig.homeFolder, config.file);
const { meta } = await readFileAndCheckPrePublishSlug(templateFile);
return [
    {
      route,
      templateFile,
      data: meta,
      postRenderers: ['contentFolder'],
    },
  ];

and return warning:

The plugin 'staticFile' needs to return handledRoutes with a route that starts with '/'. The route {"route":"","templateFile":"G:\\projects\\adrianub\\website\\libs\\content\\src\\lib\\pages\\index.md","data":{"title":"Este es el titulo"},"postRenderers":["contentFolder"]} is invalid.

any solution?