delucis / astro-netlify-cms Goto Github PK

Hi, I'm facing an error which I couldn't solve it, I'm using astro getCollection() method then render multi MDXs in same page.

so when I'm using the method before adding the NetlifyCMS everything works fine

export const getContent = async ({
  pageName,
  locale,
}: {
  pageName: PageName;
  locale: string;
}): Promise<AstroComponentFactory[]> => {
  const allContent = (
    await getCollection(pageName, (entry) => entry.id.includes(locale))
  ).sort((a, b) => a.data.order - b.data.order) as CollectionEntry<PageName>[];

  const mdxComponents = await Promise.all(
    allContent.map(async (content) => {
      try {
        // will throw an error
        const { Content } = await content.render();
        return Content;
      } catch (e) {
        console.log(e);
        return null;
      }
    })
  );

  return mdxComponents.filter(
    (component) => component !== null
  ) as AstroComponentFactory[];
};

but when adding NetlifyCMS in integrations like this code below

// when commit this part all works fine
NetlifyCMS({
      config: {
        backend: {
          name: "github",
          branch: "main",
        },
        collections: [
          {
            name: "hero",
            label: "hero section",
            folder: "src/content/home/hero",
            create: true,
            delete: false,
            extension: "mdx",
            format: "frontmatter",
            fields: [
              { name: "title", widget: "string", label: "File Title" },
              {
                widget: "string",
                name: "firstLine",
                label: "First Line",
                required: true,
              },
            ],
          },
        ],
      },
    }),

I'm getting this error

Error: Parse error @:12:102
    at parse (file:///Users/my-user/Desktop/magical-main/node_modules/.pnpm/[email protected]/node_modules/es-module-lexer/dist/lexer.js:2:358)
    at TransformContext.transform (file:///Users/my-user/Desktop/magical-main/node_modules/.pnpm/@[email protected][email protected]/node_modules/@astrojs/mdx/dist/index.js:102:58)
    at Object.transform (file:///Users/my-user/Desktop/magical-main/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-3b8eb186.js:44240:62)
    at async loadAndTransform (file:///Users/my-user/Desktop/magical-main/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-3b8eb186.js:54896:29)
    at async instantiateModule (file:///Users/my-user/Desktop/magical-main/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-3b8eb186.js:55821:10) {
  idx: 464,
  plugin: '@astrojs/mdx-postprocess',
  id: '/Users/my-user/Desktop/magical-main/src/content/home/hero/en.mdx',
  pluginCode: '/*@jsxRuntime automatic @jsxImportSource astro*/\n' +
    'export const frontmatter = {\n' +
    '  "title": "Testing Hero",\n' +
    '  "firstLine": "Crafting softwares with astro and DecapCMS",\n' +
    '  "description": "Hero is a simple, extensible, drop-in replacement for the default Hugo theme.",\n' +
    '  "order": 1\n' +
    '};\n' +
    'export function getHeadings() {\n' +
    '  return [];\n' +
    '}\n' +
    'function _createMdxContent(props) {\n' +
    '  return <><h1>{" "}{frontmatter.title}{" "}</h1>{"\\n"}<h1>{" "}{frontmatter.firstLine}{" "}</h1></>;\n' +
    '}\n' +
    'function MDXContent(props = {}) {\n' +
    '  const {wrapper: MDXLayout} = props.components || ({});\n' +
    '  return MDXLayout ? <MDXLayout {...props}><_createMdxContent {...props} /></MDXLayout> : _createMdxContent(props);\n' +
    '}\n' +
    'export default MDXContent;\n'
}

So what could be the issue here and how to solve it?
*note: If I used.md files it will work fine

for full reff you can see this repo

Update:
I believe it could be astro version in astro-netlify-cms it's older then the one I'm using which is "astro": "^2.9.3",

I was wondering if it was possible to use this with i18n support. Is there an example? Would it be possible to combine with a multilingual front page? Or do you need a different package for multilanguage options for the front page like 18next?

I tried to deploy the Blog Starter to Netlify.
Even after configuring Netlify Identity and Git Gateway, the admin panel doesn't seem to log in with Netlify Identity.

Yesterday they've just released a new version: https://decapcms.org/blog/2023/08/decap-3
Also they changed package names.

I've just started playing with this integration today and I'm running into a bit of a project design issue. If I wanted to add a collection to NetlifyCMS to use as feature switches (e.g. "show author names on blog landing page"), how should I go about building that so I can read that value in my Astro file and change the page accordingly? I'm still exploring Astro, I don't have any pre-existing file structure to worry about so I'm open to any suggestions.

When I was using 11ty, I would just create a blogSettings.yml file and read directly from that since it gets supplied as global data. I'm not sure what the proper style here would be.

Thanks for your help, appreciate the work you're doing!

With Astro v4+, a warning pops up when the dev server is launched:

[WARN] The injected route "/admin" by netlify-cms specifies the entry point with the "entryPoint" property. This property is deprecated, please use "entrypoint" instead.

I've tested and this works by simply replacing entryPoint with entrypoint here:

This is a very useful starter. One thing which I am not able to figure out is how to integrate netlify-cms-widget-mdx

Being able to support mdx widget (in place of markdown) would be very useful.

Basically where and how to add the following lines:

import { MdxControl, MdxPreview } from 'netlify-cms-widget-mdx';

CMS.registerWidget('mdx', MdxControl, MdxPreview);

After installing astro-netlify-cms and adding a basic config entry in astro.config.mjs, Vue components failed to render as the Vue instance was seemingly not being properly mounted.

Fails to render Vue components

export default defineConfig({
  site: 'https://example.com',
  integrations: [
    mdx(),
    sitemap(),
    vue(),  // Vue integration declared before NetlifyCMS
    NetlifyCMS({
      config: {
        backend: {
          name: 'git-gateway',
          branch: 'master'
        },
        collections: [
          {
            name: 'posts',
            label: 'Blog Posts',
            folder: 'src/pages/blog',
            create: true,
            delete: true,
            fields: [
              { name: 'title', widget: 'string', label: 'Post Title' },
              { name: 'body', widget: 'markdown', label: 'Post Body' },
            ],
          },
        ]
      }
     }),
  ],
});

Properly renders Vue components

export default defineConfig({
  site: 'https://example.com',
  integrations: [
    mdx(),
    sitemap(),
    NetlifyCMS({
      config: {
        backend: {
          name: 'git-gateway',
          branch: 'master'
        },
        collections: [
          {
            name: 'posts',
            label: 'Blog Posts',
            folder: 'src/pages/blog',
            create: true,
            delete: true,
            fields: [
              { name: 'title', widget: 'string', label: 'Post Title' },
              { name: 'body', widget: 'markdown', label: 'Post Body' },
            ],
          },
        ]
      }
     }),
     vue(),
  ],
});

I'm not sure if this is an issue specific to the Astro-Netlify-CMS integration, or if it's on the Astro / Astro Vue integration side of things. However, it was difficult to figure out the cause other than that it having occurred after setting up Astro-Netlify-CMS.

In case it helps to identify the source, here's the error messages I was getting.

When rendering Vue components without a client directive:

[plugin:vite:vue] Attribute name cannot contain U+0022 ("), U+0027 ('), and U+003C (<)

When they are passed a client:only directive:

Vue warn: Component is missing template or render function

Perhaps it's worth mentioning in the installation / config instructions that this can be resolved by declaring the Astro-Netlify-CMS integration prior to Vue.

Directly reference the layout and code of the theme. What if you need to update the theme? It's a bigger problem for you to switch themes. Do you consider providing module references

At the moment the identity widget + the webpack://components/modal.css is served on every page.
those 2 are the biggest files on every page.

is there a way to bind the scripts and styles to the /admin only?

We then can just have a small function on the homepage that looks if there is a password reset #hash present and redirect to the admin.

https://www.my-website.com/#recovery_token=<token> => https://www.my-website.com/admin/#recovery_token=<token>

I am currently learning how to use astro-netlify-cms to create a sample blogging and I am having trouble implementing the layout for the blogs.

My folder structure looks like the following

-src
-layouts
-MarkdownPostLayout.astro
-pages
-posts
-blog1.md
astro.config.mjs

Here is my astro.config.mjs file:
https://github.com/Albertyhu/astro-blog-with-netlify-cms/blob/main/astro.config.mjs

In collections, I set the field layout to the following:

{
          name: "layout",
          widget: "hidden",
          label: "Layout",
          default: `import layout from '../../layouts/MarkdownPostLayout.astro'`,
        },

Here is the Github repository for the rest of the project: https://github.com/Albertyhu/astro-blog-with-netlify-cms/tree/main

I appreciate any help I can get here.

This is a feature request - the plugin is great to quickly add the Netlify CMS to an Astro project, but eliminates the ability to modify the /admin page (favicon, title, additional stylesheets, etc.) as it's bundled with the package.

It would be great to expose an optional admin-layout.astro file that could be used to customize the dashboard. Not sure what the best path forward is, but I may end up dropping the package and configuring everything manually so I can retain control over the admin.html page.

Is there an easy way to modify the admin page currently?

Currently if you don't set disableIdentityWidgetInjection to true then it add the Netlify Identity Widget to all page which can lead to unnecessary ressource being loaded in most case.

I would be nice to have a options to only inject it on admin routes.

Hi,
Where is the place to add custom widgets for netlify CMS to extend the cms?
thanks

Adding this package to my Astro installation will trigger npm audit without being able to fix it because some dependency packaging has an hard coded semantic version. Could you check it please?

You can check it on https://randomname123.netlify.app/posts/
The problem is only in header section.

Hello,

I have integrated the plugin correctly and works ok on localhost. Before using this plugin, I used the tutorial from Astro blog with Netlify CMS integration, and all worked well on prod.

Later on, I switched to this plugin, and seems that in prod I can see this ugly page :(.
The "pop-up" to login with Github doesn't show...

Hi!
Today StaticCMS has released its 1.0.0 version of the successor of NetlifyCMS, which it has been abandoned.
https://github.com/StaticJsCMS/static-cms/releases/tag/v1.0.0

It may be good switching ASAP to get better features and security in the future

Update to astro v4

Working on a Windows OS and running astro dev returns the following error.

node:events:368
      throw er; // Unhandled 'error' event
      ^

Error: spawn netlify-cms-proxy-server ENOENT
    at Process.ChildProcess._handle.onexit (node:internal/child_process:282:19)
    at onErrorNT (node:internal/child_process:477:16)
    at processTicksAndRejections (node:internal/process/task_queues:83:21)
Emitted 'error' event on ChildProcess instance at:
    at Process.ChildProcess._handle.onexit (node:internal/child_process:288:12)
    at onErrorNT (node:internal/child_process:477:16)
    at processTicksAndRejections (node:internal/process/task_queues:83:21) {
  errno: -4058,
  code: 'ENOENT',
  syscall: 'spawn netlify-cms-proxy-server',
  path: 'netlify-cms-proxy-server',
  spawnargs: []
}

when I manually start the proxy server and comment out:

/* 'astro:server:start': () => {
                const proxy = spawn('netlify-cms-proxy-server', { stdio: 'inherit' });
                process.on('exit', () => proxy.kill());
            }, */

it works.

Hey there!

I've just noticed that a script page.<hash>.js is injected into every page when using this integration with the default config from the Astro Netlify CMS Starter.

I'm unsure whether this is the desired behavior. I've read that the identity widget is used if you're hosting the blog+cms on Netlify and do not use a git hosting provider such as github. So backend: git-gateway, hosted on Netlify without github et al.

Steps to reproduce

• Clone the Astro-Netlify-CMS-Starter: https://github.com/delucis/astro-netlify-cms-starter
• Build the project
• `cat dist/index.html | grep 'src="/page.'``

I'm opening this issue because I'm not sure if this is a bug or desired.
Thank you!

Hi @delucis 👋

I am a complete newbie to Astro and Netlify CMS. I have a problem logging into the Netlify CMS administration.

I have installed astro-netlify-cms and edited the astro.config.mjs config as needed (see below).

import { defineConfig } from 'astro/config';
import NetlifyCMS from 'astro-netlify-cms';
import preact from "@astrojs/preact";

export default defineConfig({
  integrations: [
    NetlifyCMS({
      config: {
        backend: {
          name: 'git-gateway',
          branch: 'master',
        },
        collections:  [
          {
            name: 'posts',
            label: 'Blog posts',
            folder: 'src/pages/posts',
            create: true,
            delete: true,
            fields: [
            { name: 'title', widget: 'string', label: 'Post title' },
            { name: 'body', widget: 'markdown', label: 'Post body'},
            ],
          },
        ],
      },
    }),
    preact()]
});

I committed everything to the repository on GitHub. In the netlify app I added a new site with the following settings:

Base directory: Not set
Build command: npm run build
Publish directory: dist
Deploy log visibility: Logs are public
Build status: Active

I also enabled Identity and Git gateway. The first thing I noticed is that the site doesn't show the login widget. When I add /admin, it takes me to the Netlify CMS login page, but shouldn't the registration option pop up first?

You can check the site yourself - www.stpn.dev
Then here is my repo - stpn-astro

I don't really know where to look for the error and that's why I would like to ask for help.

Trying to build with Astro 1.4.4 and failing:

generating static routes error component is not defined ReferenceError: component is not defined atfile:///Users/psmith/Sites/nw-3-deploy-testing/test/.astro/entry.mjs?time=1665061500569:1780:25``

line 1780:

__astro_tag_component__(component, "@astrojs/react");

package.json:

{ "name": "@example/blog", "version": "0.0.1", "private": true, "scripts": { "dev": "astro dev", "start": "npm run dev", "build": "astro build", "preview": "astro preview" }, "devDependencies": { "astro": "^1.4.4", "astro-netlify-cms": "^0.2.2" } }

I'm getting the following error on astro dev.

Running Mac Os Ventura
PNPM is my package manager

  🚀  astro  v1.7.2 started in 333ms
  
  ┃ Local    http://localhost:3000/
  ┃ Network  use --host to expose
  
node:events:491
      throw er; // Unhandled 'error' event
      ^

Error: spawn netlify-cms-proxy-server ENOENT
    at ChildProcess._handle.onexit (node:internal/child_process:283:19)
    at onErrorNT (node:internal/child_process:476:16)
    at process.processTicksAndRejections (node:internal/process/task_queues:82:21)
Emitted 'error' event on ChildProcess instance at:
    at ChildProcess._handle.onexit (node:internal/child_process:289:12)
    at onErrorNT (node:internal/child_process:476:16)
    at process.processTicksAndRejections (node:internal/process/task_queues:82:21) {
  errno: -2,
  code: 'ENOENT',
  syscall: 'spawn netlify-cms-proxy-server',
  path: 'netlify-cms-proxy-server',
  spawnargs: []
}

Node.js v18.12.1
 ELIFECYCLE  Command failed with exit code 1.```

Kinda follow up of #18 , this time if I move vue() like this:

// https://astro.build/config
export default defineConfig({
  integrations: [NetlifyCMS({...}), vue()],
  site: `whatever`,
  output: 'static',
});

Instead of this:

// https://astro.build/config
export default defineConfig({
  integrations: [vue(), NetlifyCMS({...})],
  site: `whatever`,
  output: 'static',
});

like title, NetlifyCMS won't show up

Running into the following error:

Seems to be related to #34 , but with react() instead of vue() added as integration.
Makes no difference if putting it before or after NetlifyCMS() in the config.
The admin dashboard is working perfectly fine without the react integration and dependencies.

Will provide a cleaned repo to reproduce the issue later.

here is a working fork

https://github.com/advanced-astro/astro-decap-cms

I have seen numerous people attempt to use this as it is linked in the docs but only to be confused

If you're willing to keep this up to date, I am happy to update the demo

Hi there and thanks for this great integration :)

I have everything up and running and it worked great, until I turned on showDefaultLocale to true in my i18next config file.

What this does is that instead of having the urls for the default language on /, they are on /en. (i.e. /blog becomes /en/blog)

So for the homepage, as stated in Astro's docs, I just have this src/pages/index.astro:

<meta http-equiv="refresh" content="0;url=/en/" />

Which just redirects from / to /en.

But then the links in the emails sent by Netlify upon registration or forgotten email all point to /#invite_token=2EUz71D9siVlVLJjsPhj1w which then redirects to /en without the extra #invite_token.

Would there be a way to specify the URL in the emails to be /en ?

Or could we change src/pages/index.astro so that upon redirecting it preserves the #invite_token ?

Thank you so much :)

Hey, this feature could be great but not sure how difficult or feasible it is.

You could automatically generate DecapCMS config's collections based on the the Content Collections schemas.

This way we can have a single schema fields definition, and boilerplates a CMS really fast!

I get CORS Missing Allow Header
https://clever-stroopwafel-5cf68a.netlify.app
And the admin panel doesn't work because of it.
The repo is untouched thank you!

So far I installed the package, pasted the necessary code into astro.config.mjs. This is what I get when visiting /admin

config:

import { defineConfig } from 'astro/config';
import svelte from "@astrojs/svelte";
import NetlifyCMS from 'astro-netlify-cms';
import mdx from "@astrojs/mdx";

// https://astro.build/config
export default defineConfig({
  site: 'https://kodvet.gitlab-pages.liu.se/',
  base: '/sektionshemsidan',
  // Your public domain, e.g.: https://my-site.dev/. Used to generate sitemaps and canonical URLs.
  // base: 'kvit/',
  sitemap: true,
  // Generate sitemap (set to "false" to disable)
  // GitLab Pages requires exposed files to be located in a folder called "public".
  // So we're instructing Astro to put the static build output in a folder of that name.
  outDir: 'public',
  // The folder name Astro uses for static files (`public`) is already reserved
  // for the build output. So in deviation from the defaults we're using a folder
  // called `static` instead.
  publicDir: 'static',
  integrations: [NetlifyCMS({
      config: {
        backend: {
          name: 'git-gateway',
          branch: 'main',
        },
        media_folder: 'public/assets/blog',
        public_folder: '/assets/blog',
        collections: [
          // Content collections
          {
      name: 'posts',
      label: 'Blog Posts',
      folder: 'src/pages/posts',
      create: true,
      delete: true,
      fields: [
        { name: 'title', widget: 'string', label: 'Post Title' },
        { name: 'body', widget: 'markdown', label: 'Post Body' },
      ],
    }
        ],
      },
    }), svelte(), mdx()]
});

Hi,

is there a way to set a specific localization for my NetlifyCMS with this library?
I know you can set the locale with this code:
import CMS from 'netlify-cms-app'; import { de } from 'netlify-cms-locales'; CMS.registerLocale('de', de);
But I don't know of a way to pass this to the NetlifyCMS integration

Thanks in advance