avitorio / outstatic

Outstatic - A static CMS for Next.js

Outstatic

outstatic-preview.mp4

Outstatic is a static site CMS that lives inside your Next.js install. No need for databases, external services, or complicated setups. It allows you to create, edit and save content that is automatically committed to your repository and deployed to your live website.

Key features

• 📝 Full-featured dashboard
• 🚀 Fast and easy setup
• 💾 No database
• 🏠 Host for free
• 🧩 Custom Fields
• 🤖 AI Completions

Getting started

Visit https://outstatic.com/docs/getting-started to get started with Outstatic.

Documentation

Visit https://outstatic.com/docs to view the full documentation.

Financial Contributors

With just $5 a month, you can keep the development and maintenance gears grinding! Every penny you pitch in fuels our mission to make Outstatic even more awesome.

👉 View options and contribute at GitHub Sponsors

🥈 Silver Sponsors

Stay up-to-date

The project is constantly improving with new changes being implemented on a daily basis. You can keep up by hitting the Star button! I really appreciate it.

Tech Stack

Outstatic is built on the following stack:

• Next.js – framework
• GitHub – content storage and auth
• Tiptap – text editor
• OpenAI - AI completions
• Vercel AI SDK – AI library
• TailwindCSS – styles
• Novel – AI completions and slash command

Community

The Outstatic community can be found on GitHub Discussions, where you can ask questions, voice ideas, and share your projects.

To chat with other community members you can join the Outstatic Discord. You can also follow us on X / Twitter.

Author

• Andre Vitorio (@andrevitorio)

Contributing

Please see our CONTRIBUTING.md.

outstatic's Issues

Metadata DB

Discussion: #53

Why

Right now, there are several "query"-like operations difficult to do in outstatic. Some examples:

• "get all documents, sorted by their publishedAt value"
• "get the first 5 documents in the posts collection, written by the user Jim"
• "get all the documents, across all the collections"

It would be unreasonable in even a moderate site (20 pieces of content) to do an FS read on every file, YAML parse the frontmatter, and then perform operations on the merged set of frontmatter data.

Proposed Solution

This issue is tracking the work on a Metadata DB; a file updated on edit/delete and via SWR which contains the most recent copy of metadata from every piece of outstatic content's frontmatter.

• The sync is unidirectional (files -> metadata db) and dirty data is acceptable, returning cached values
• A new metadata DB results in a new deployment, which allows getStaticProps / getServerSideProps to refresh their queries

Support for .mdx files

As mentioned by this comment, .mdx files are not being fetched.

To make this work we'd need to update:

• getDocumentBySlug to check for mdx files in case the md version is not available.
• list.tsx
• /edit-documet/index.tsx

I'm not entirely sure how the editor would handle .mdx files, so this might require some investigation.

Content and website code in different repos

Would it be possible to use a gitsubmodules or another strategy to have code and content in different repos?

Hsuky / Prettier Support

Following this discussion, we'll be moving on with enforcing code styles and formatting on commit.

This solution may not be final but it's better than nothing. We can always improve on it on future releases.

Thank you @DCzajkowski for kicking off the discussion and @jakobo for actively participating on it.

Localization support

What do you think about adding localization support? This would allow creating and editing collection items in multiple languages.

Assumptions

Setup

1. Add a new environment variable:

OST_LOCALES=en,pl # Specify supported locales with a comma-separated list. If empty, localization is not supported.

2. Add a locale to the file name between the slug and extension:

outstatic/
  content/
    posts/
      post-1.en.md
      post-1.pl.md
      post-2.en.md
      post-2.pl.md

Changes in the UI

1. Add a language switcher in the collection list. This would allow to preview the list with titles in specific locale.

2. Add a side-by-side editor, or a locale switcher in the editor, to allow editing in multiple languages. Notify before saving if one of the locales has no content.

PR

I can work on a PR and should have something ready by the end of the week. However, I would like to know if you are willing to add support for this, and are my assumptions correct.

No such file or directory — `.gitkeep.md`

Currently, the existence of files other than mdx? (ex: .gitkeep) within a collection folder results in an error:

Error: ENOENT: no such file or directory, open "blog/outstatic/content/posts/.gitkeep.md"

Once I add new collection, it doesn't show on the left sidebar

It doesn't show Projects on the left sidebar
I set all in the authorization

It shows this error

message

"Variable $input of type CreateCommitOnBranchInput! was provided invalid value for expectedHeadOid (Expected value to not be null)"

I am pushing to staging branch, and I test it on the localhost:3000

What did I do wrong?

Thanks

refactor: consistent constants

This issue covers the refactoring of our code base to utilise constants where it makes sense. As pointed out by @DCzajkowski here, there are possible improvements to be made by setting values as constants.

Current values which can be turned into constants:

• /images/ folder reference.

These constants could be specified under a /packages/outstatic/utils/constants.ts file.

Save button not working after upgrade to v1

Provide environment information

"dependencies": {
    "@radix-ui/react-dialog": "^1.0.5",
    "@radix-ui/react-dropdown-menu": "^2.0.6",
    "@radix-ui/react-navigation-menu": "^1.1.4",
    "@radix-ui/react-slot": "^1.0.2",
    "@radix-ui/react-tabs": "^1.0.4",
    "@types/node": "20.9.0",
    "@types/react": "18.2.37",
    "@types/react-dom": "18.2.15",
    "autoprefixer": "10.4.16",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.0.0",
    "cmdk": "^0.2.0",
    "eslint": "8.53.0",
    "eslint-config-next": "^14.0.2",
    "framer-motion": "^10.16.4",
    "gray-matter": "^4.0.3",
    "lucide-react": "^0.292.0",
    "next": "^14.0.2",
    "next-themes": "^0.2.1",
    "outstatic": "^1.0.2",
    "postcss": "^8.4.31",
    "react": "^18.2.0",
    "react-code-blocks": "^0.1.4",
    "react-dom": "^18.2.0",
    "react-markdown": "^9.0.0",
    "remark": "^15.0.1",
    "remark-gfm": "^4.0.0",
    "styled-components": "6.1.1",
    "tailwind-merge": "^2.0.0",
    "tailwindcss": "3.3.5",
    "tailwindcss-animate": "^1.0.7",
    "typescript": "5.2.2"
  }

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

Vercel

Describe the Bug

After migrating to v1.0.2 using npm install outstatic@latest and also use the app router setup, when creating post and clicking Save button doesn't have any reaction. Deleting post is still working.

Expected Behavior

Save should work as intended.

Link to reproduction - Issues with a link to complete (but minimal) reproduction code will be addressed faster

N/A

To Reproduce

Migrate to Outstatic 1.0.2, create a new post and click Save.

Feature Request: Image Compression

First off - I love what you've built, and I love the simplicity of it.

Some quick profiling on the front-end looks like images uploaded are not optimized, so I end up serving 2MB images. They're fast for me, but they're not fast in general.

I haven't gotten into your source to see what can be done, but I'm curious if you'd consider adding compressorjs for image compression before saving the file in the content editor. So far that's the only thing I would love to see!

I really appreciate how quick this is to set up, and how simple and content-focused the act of managing content becomes. Seriously - nice work!!

Can't create any blogs if the title is in another language

Provide environment information

nextjs 13, latest outstatic

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

I can't create any blogs if the title is in another language. For example, if I create a blog with this title: ( তৃণভোজী এই ডাইনোসর কত বড় ছিল? ) then the blog breaks..

The dashboard UI doesn't lets me edit it or it doesn't publish.

I think the issue might be related with the url slug & the language the title is in.

Whats the fix?

Expected Behavior

Should be able to create a blog if the title is in a different language

Link to reproduction - Issues with a link to complete (but minimal) reproduction code will be addressed faster

No link atm

To Reproduce

Just create a blog with this title: তৃণভোজী এই ডাইনোসর কত বড় ছিল?

React and React-DOM version requirements

Hey! I was on react / react-dom version 17.0.2 and was getting a "useHook" error when trying to load localhost:3000/outstatic. I upgraded to 18.2 on both and outstatic is loading. I know there's a lot of issues with dependencies right now but might be something to clarify upfront if possible what the requirements are to help with troubleshooting.

I'm up and running now though, thanks for making this!

Required Author name field not prompting when clicking Save

Provide environment information

"dependencies": {
"@radix-ui/react-dialog": "^1.0.5",
"@radix-ui/react-dropdown-menu": "^2.0.6",
"@radix-ui/react-navigation-menu": "^1.1.4",
"@radix-ui/react-slot": "^1.0.2",
"@radix-ui/react-tabs": "^1.0.4",
"@types/node": "20.9.0",
"@types/react": "18.2.37",
"@types/react-dom": "18.2.15",
"autoprefixer": "10.4.16",
"class-variance-authority": "^0.7.0",
"clsx": "^2.0.0",
"cmdk": "^0.2.0",
"eslint": "8.53.0",
"eslint-config-next": "^14.0.2",
"framer-motion": "^10.16.4",
"gray-matter": "^4.0.3",
"lucide-react": "^0.292.0",
"next": "^14.0.2",
"next-themes": "^0.2.1",
"outstatic": "^1.0.3",
"postcss": "^8.4.31",
"react": "^18.2.0",
"react-code-blocks": "^0.1.4",
"react-dom": "^18.2.0",
"react-markdown": "^9.0.0",
"remark": "^15.0.1",
"remark-gfm": "^4.0.0",
"styled-components": "6.1.1",
"tailwind-merge": "^2.0.0",
"tailwindcss": "3.3.5",
"tailwindcss-animate": "^1.0.7",
"typescript": "5.2.2"
}

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

When creating a post, Title and Content are working as intended (They must be filled to proceed save), however Author name field is not having prompt that it is required. One thing to note is it can be bypassed by filling in and clearing it then can proceed to save.

Expected Behavior

Either of these depending on which was the intended way initially:

• Author name field should always be required, entering values then clearing it shouldn't be able to bypass the required validation when clicking Save. (If the field is empty, it should show red text prompting that it's required)
  or
• Author name field is optional.

Link to reproduction - Issues with a link to complete (but minimal) reproduction code will be addressed faster

N/A

To Reproduce

1. Create new post -> fill in Title and Contents -> Type something into Author name field but remove them using backspace -> Click Save -> It will save the post

2. Create new post -> fill in Title and Contents ( leave Author name empty) -> Click Save -> No prompt is shown indicating Author name is required

Deleting a collection breaks vercel deployment

Hey, there! Nice project!

I was just trying this out. I started from the blog example and tried deleting the "projects" collection from the admin panel. That caused the vercel deployment to fail.

The reason for this is that the src/pages/projects/[slug].tsx file still exists. Plus, the src/pages/index.tsx also has a variable allProjects that reads the projects from the file.

Since this is a CMS, I would expect that deleting wouldn't break that, right? Or am I doing something wrong?

If it's just something that needs to be handled in the future, I'd look to hear how you plan to solve that. Maybe I can help a bit 😄

Incorrect Page Title Display on Detail Page

Provide environment information

Page: https://outstatic-dev-blog-8qilismfg-andrevitorio.vercel.app/posts/nothing-wrong

What browser are you using? (if relevant)

Chrome/114.0.0.0

How are you deploying your application? (if relevant)

Vercel

Describe the Bug

Actual Title: Outstatic

Expected Behavior

Expected Title: Nothing is wrong. Everything is perfect | Outstatic

Link to reproduction - Issues with a link to complete (but minimal) reproduction code will be addressed faster

https://github.com/avitorio/outstatic/tree/canary/examples/blog

To Reproduce

I have identified an issue while comparing the following two pages:

Link 1: https://outstatic-dev-blog-8qilismfg-andrevitorio.vercel.app/posts/nothing-wrong
Link 2: https://outstatic-example-blog.vercel.app/posts/nothing-wrong

To Reproduce:
To reproduce the issue, please follow the steps below:

• Open both links provided above in separate browser tabs.
• Carefully compare the content and layout of the pages.
• Observe the differences between the two pages.

Code highlight doesn't works on the deployed blogs

Provide environment information

Latest nextjs & outstatic

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

Vercel

Describe the Bug

Code highlight on the outstatic dashboard, but not on the deployed blog

Expected Behavior

Should highlight the code on the deployed blog

Link to reproduction - Issues with a link to complete (but minimal) reproduction code will be addressed faster

No link

To Reproduce

Just try creating a codesnippet & check the blog.

Trouble updating to 1.0.0 - Unsupported URL Type "link:": link:@tiptap/pm/view

Provide environment information

I'm currently on "outstatic": "^0.0.41",

What browser are you using? (if relevant)

Chrome

How are you deploying your application? (if relevant)

vercel

Describe the Bug

running npm install outstatic results in
➜
npm ERR! code EUNSUPPORTEDPROTOCOL
npm ERR! Unsupported URL Type "link:": link:@tiptap/pm/view

Expected Behavior

update succeeds

Link to reproduction - Issues with a link to complete (but minimal) reproduction code will be addressed faster

npm install outstatic

To Reproduce

npm install outstatic

Moblie version doest not allow editing

Provide environment information

Any environment

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

If shrink window to mobile screen size, block with page edit disappear

Expected Behavior

Ability to edit pages on moblie version of site

Link to reproduction - Issues with a link to complete (but minimal) reproduction code will be addressed faster

no link

To Reproduce

just shrink window

Screen.Recording.2024-01-31.at.14.03.16.mov

Creating a new collection doesn't creates something on the website

Provide environment information

Nextjs latest, Outstatic latest

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

I'm following the default get started guide on the documentation. Whenever I'm creating a new collection & adding blogs on that collection, nothing gets added to the site. The new collection & its content doesn't shows up. The website only shows Posts & Projects collecton & nothing else

Expected Behavior

Should show the collection

Link to reproduction - Issues with a link to complete (but minimal) reproduction code will be addressed faster

https://outstatic.com/docs/getting-started

To Reproduce

Follow the default getting started process as described in the documentation file

He

Dashboard doesn't show default demo collections

Provide environment information

Outstatic 1.0.3, Next 13.5.4, React 18

What browser are you using? (if relevant)

Chrome

How are you deploying your application? (if relevant)

Vercel

Describe the Bug

I deployed the demo in the docs, connected correctly with Github and filled out correctly the required environment variables. The problem is that the /outstatic dashboard is empty, doesn't recognize the existence of the "posts" and "projects" collections present in the demo. On the other hand, the blog itself renders the posts and projects correctly. Rebuilding metadata doesn't work, the button stays as "Rebuilding..." indefinitely.

Expected Behavior

I expected Posts and Projects to exist in the dashboard.

Link to reproduction - Issues with a link to complete (but minimal) reproduction code will be addressed faster

https://blog-seven-jade-88.vercel.app/

To Reproduce

Follow all docs instructions to connect with Github and deploy the demo on Vercel.

Could not resolve to a Repository with the name ...

Hi,
First, thanks for the tool which really hypes me and my team!
I don't know if I did something wrong or not but I got the following error:

Could not resolve to a Repository with the name 'qlereboursBS/traveledmap/traveledmap-outstatic-blog'
When my GitHub account is qlereboursBS, but the repository is under an organization I own called traveledmap.

My .env contains OST_REPO_SLUG=traveledmap/traveledmap-outstatic-blog.

I also transfered both the gh app and repository from qlereboursBS to traveledmap after I started to install outstatic (I revoked all tokens, deleted the ost_token in localstorage and cleared the next folder).

It's very likely that you use the GitHub acocunt name as a prefix for the repository, but what if the repository is under an organization?

Thanks

Build error

I have an error when building the project on Vercel

Outstatic fails to create a Collection if repository is empty

Hey Andre!

This is a cool product. FYI: as the title states, Outstatic will throw an error if your repository (OST_REPO_SLUG) is empty. The UI error message is also not very helpful. Here’s the console error, though:

Not sure if it’s possible to catch this specific error, but I do think it would be a great UX improvement regardless. For now, I think updating the docs should be more than enough.

💖

Issue building on vercel

Hey there. Works fine on localhost but on vercel I get thig error - ```

{

20:06:57.747 | getDocumentPaths: Error: ENOENT: no such file or directory, scandir '/vercel/path0/outstatic/content/posts'
20:06:57.747 | at Object.readdirSync (node:fs:1405:3)
20:06:57.747 | at _ (/vercel/path0/node_modules/outstatic/dist/utils/server.js:1:1483)
20:06:57.747 | at getStaticPaths (/vercel/path0/.next/server/pages/post/[slug].js:106:82)
20:06:57.747 | at buildStaticPaths (/vercel/path0/node_modules/next/dist/build/utils.js:586:37)
20:06:57.747 | at /vercel/path0/node_modules/next/dist/build/utils.js:721:121
20:06:57.747 | errno: -2,
20:06:57.747 | syscall: 'scandir',
20:06:57.747 | code: 'ENOENT',
20:06:57.747 | path: '/vercel/path0/outstatic/content/posts'
20:06:57.747 | }
20:06:57.748 | }

```

I have all the needed environment variables, any ideas?

Application error when i try to add new collection

Provide environment information

What browser are you using? (if relevant)

google chrome

How are you deploying your application? (if relevant)

vercel

Describe the Bug

with localhost everything works fine but when i tried with vercel live url it's give application error, and in console display the error "TypeError: Cannot read properties of undefined (reading 'refs')".

Expected Behavior

successfully i want to add new collection

Link to reproduction - Issues with a link to complete (but minimal) reproduction code will be addressed faster

https://sesire-blogs-kappa.vercel.app/outstatic/collections/new

To Reproduce

https://sesire-blogs-kappa.vercel.app/outstatic/collections/new

Alternative Authentication methods

Github is the default authentication provider. Is there support for other auth providers or any planned yet?

I am willing to contribute to help on this issue

'isMacOS' is not exported from '@tiptap/core'

Provide environment information

"outstatic": "^0.0.39",
"next": "^13.4.8",
"react": "^18.2.0",

Next App Router

What browser are you using? (if relevant)

Chrome

How are you deploying your application? (if relevant)

Vercel

Describe the Bug

I followed the steps in the doc to add Outstatic to a Next.js application. As soon as I visit localhost:3000/outstatic, I'm greeted with this error

- error ./node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@tiptap/extension-strike/dist/index.js
Attempted import error: 'isMacOS' is not exported from '@tiptap/core' (imported as 'isMacOS').

Import trace for requested module:
./node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@tiptap/extension-strike/dist/index.js
./node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@tiptap/starter-kit/dist/tiptap-starter-kit.esm.js
./node_modules/.pnpm/[email protected]_@[email protected]_@[email protected]_@[email protected]_nex_nbtnmmxkyd4lxbqngd5ca22z5i/node_modules/outstatic/dist/index.js
- wait compiling /_error (client and server)...
- error ./node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@tiptap/extension-strike/dist/index.js
Attempted import error: 'isMacOS' is not exported from '@tiptap/core' (imported as 'isMacOS').

Import trace for requested module:
./node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@tiptap/extension-strike/dist/index.js
./node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@tiptap/starter-kit/dist/tiptap-starter-kit.esm.js
./node_modules/.pnpm/[email protected]_@[email protected]_@[email protected]_@[email protected]_nex_nbtnmmxkyd4lxbqngd5ca22z5i/node_modules/outstatic/dist/index.js

Expected Behavior

I'd expect the admin panel to load as intended

Link to reproduction - Issues with a link to complete (but minimal) reproduction code will be addressed faster

/

To Reproduce

Install in a new Next application and visit /outstatic

Contributing guidelines

This issue should cover the creation of contributing guidelines for the project, for both development and documentation.

Future Contributing guidelines

• A section for contributing to docs.
• A section for contributing to the blog example.
  • A section for website (outstatic.com) updates.
  • Specify how to test, lint, type check.

Already completed by #65:

• Have a canary branch to merge all the pre-release updates.
• Create a guide on how to run the monorepo locally with:
  • A section for contributing to the library.
  • Reminder: when saving or updating collections or documents, users should point to a different branch from the PR branch.

Release Roadmap

This is a rough plan for Outstatic, as we continue on our Journey to 1.0 🎉

How this is Maintained

When issues are created for specific tasks, they'll be linked here for people who want to follow along. See something that should be in this roadmap? Starting a Discussion is the best way to get more eyes on the idea. All the Maintainers are looking at discussions, but may not always be triaging issues.

Finally, we try to only look 2-3 versions ahead at most.

Next (expected v0.0.37)

• Custom Metadata
  • Discussion: #22 , #60
  • Issue: -
  • PR: #80
• CI/CD with Github Actions (at least set up for tests and building), require to pass before merging
• Adding Changesets
• Metadata DB
  • Discussion: #53
  • Issue: #71
  • PR: -

Next +1

• CONTRIBUTING.md
  • Issue: #58
  • PR: #65
• Pull Request Template
  • Issue: #58
  • PR: #65

Getting error: NextRouter was not mounted.

Provide environment information

Tried using the 0.0.34-rc version which is what you get when you run yarn add outstatic right now.
And also tried downgrading to 0.0.33-rc.

Getting the same error with both.

My next version is 12.0.1

What browser are you using? (if relevant)

chrome

Describe the Bug

Would love to give more details, but unfortunately, the error doesn't give any line number or anything. :(

Expected Behavior

Would love to be able to get to this screen

Link to reproduction - Issues with a link to complete (but minimal) reproduction code will be addressed faster

To Reproduce

TypeError: Cannot read properties of null (reading 'query')

Hi, I've been trying to replace my current CMS on my website with Outstatic. I followed the documentation and was able to get to where I got the "sign in with GitHub" screen, but after I authorized the OAuth app, it redirected back to localhost and errored out with "TypeError: Cannot read properties of null (reading 'query')". Could you please help me on this? Thank you so much!

Add an explicit error message when the outstatic target branch does not exist

I tried to create my first collection, and nothing happened (loading forever). After opening the console, I found this message:
error: "Variable $input of type CreateCommitOnBranchInput! was provided invalid value for expectedHeadOid (Expected value to not be null)"

Finally, when going to the network, I discovered that the commit was being created on a main branch, that didn't exist on my brand new repository.

It would improve user experience if there was an detailed error message to explain that it's impossible to commit on the repository because the branch is not found.

Would it be possible?
Thanks

Module not found: Can't resolve 'fs'

I'm trying to add outstatic to an existing project. Which is somewhat working. I can access the editor and also the collection creation is running. Currently, I'm struggling with the following issue:

./node_modules/.pnpm/[email protected]_3591a07f5f6bd7e95d5c3230e32ada50/node_modules/outstatic/dist/utils/server.js:1:716
Module not found: Can't resolve 'fs'

Import trace for requested module:
./pages/offers/[slug].jsx

It is the copy of the [slug].tsx page of the blog example, so nothing new or special.

I can get rid of the error if I modify my next.config.js like that:

config.resolve.fallback = {
      ...config.resolve.fallback, 
      fs: false
};

But I get now paths or an empty array in the getStaticPaths method:

export async function getStaticPaths() {
  console.log(getDocumentPaths('offers')) // returns empty array
  return {
    paths: getDocumentPaths('offers'),
    fallback: false
  }
}

I'm pretty stuck cause with the empty array it is not dropping an error, but it is ending up constantly in 404 errors of existing pages.

Cannot read properties of null (reading 'query') on Next v13

on http://localhost:3000/outstatic

I double checked the getting started config & it is correct

Server Error

TypeError: Cannot read properties of null (reading 'query')
This error happened while generating the page. Any console logs will be displayed in the terminal window.

Cover Image upload does not work when using Safari as the browser.

Provide environment information

Next: 13.4.19

React: 18.2.0

Outstatic: Version 0.0.39

Safari: Version 15.3 (17612.4.9.1.8)

What browser are you using? (if relevant)

Safari 15.3 (17612.4.9.1.8)

How are you deploying your application? (if relevant)

With Vercel

Describe the Bug

Uploading an image using a link works fine. Uploading a file directly will trigger an error on the webpage for a split second: "The image failed to load, try submitting again."

Expected Behavior

I expect the image to be loaded for preview, and uploaded upon clicking on "Save".

Link to reproduction - Issues with a link to complete (but minimal) reproduction code will be addressed faster

https://github.com/ZiyadBoshima/minimal-blog-template

To Reproduce

Steps to reproduce the problem:

1. Pull the linked repo
2. Run npm i
3. Follow the Outstatic documentations to setup the environmental variables as well as GitHub authentication
4. Run npm run dev
5. On Safari go to http://localhost:3000/outstatic and sign in.
6. Go to the posts collection and create a new post
7. Click on Cover Image, and then add an image from a file.

When you do step 7, you should see an image preview, then a red text for a split second, and then the image and red text disappear.

Examples/blog while using Tailwind it does not react to system theme changes (light/dark)

Provide environment information

No matter what setting I include into Tailwind, I cannot get the UI to switch to dark mode. I'm on the latest version - "outstatic": "^0.0.33-rc"

What browser are you using? (if relevant)

Used with Chrome and Safari on MacOS and iOS,

How are you deploying your application? (if relevant)

Vercel

Describe the Bug

Despite writing all the "dark:" classes into the UI, and being on dark mode system wide, the example blog does not switch. Is there a setting anywhere in the code preventing dark mode from kicking in? I've checked the configs for Tailwind and the CSS files but couldn't see any issue there.

Expected Behavior

When a dark: class is inserted into a component, the default behaviour in Tailwind is that it will be applied if "prefers-dark-mode" is enabled. This does not happen with the Outstatic example/blog

Link to reproduction - Issues with a link to complete (but minimal) reproduction code will be addressed faster

https://github.com/avitorio/outstatic/tree/main/examples/blog

To Reproduce

Insert dark: class into UI components, enable dark mode system wide in MacOS and expect the example/blog to apply dark settings

Image is not show

Provide environment information

Version of available packages:

1. next: 13.5.6
2. outstatic 0.0.41
3. react 18.2.0
4. react-dom 18.2.0`
5. @tailwindcss/typography 0.5.10
6. @types/react-dom 18.2.14`
7. eslint 8.52.0
8. remark 15.0.1
9. typescript 5.2.2
10. @types/node 20.8.8
11. autoprefixer 10.4.16
12. eslint-config-next 13.5.6
13. remark-html 16.0.1
14. @types/react 18.2.31
15. dayjs 1.11.10
16. postcss 8.4.31
17. tailwindcss 3.3.4

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

When outstatic CMS convert markdown file in /outstatic/content/posts folder. It adds > in end of image URL.

![Follower](https://cdn.pixabay.com/photo/2023/10/27/17/04/dahlia-8345799_1280.jpg> "an-image-title")

https://github.com/officialrajdeepsingh/outstatic-demo

Expected Behavior

Remove the > in markdown image.

![Follower](https://cdn.pixabay.com/photo/2023/10/27/17/04/dahlia-8345799_1280.jpg "an-image-title")

Link to reproduction - Issues with a link to complete (but minimal) reproduction code will be addressed faster

https://github.com/officialrajdeepsingh/outstatic-demo

To Reproduce

https://github.com/officialrajdeepsingh/outstatic-demo/blob/main/outstatic/content/posts/15-facts-you-never-knew-about-photography.md?plain=1

Add lang="en" to <html> on new layout files

Custom fields as columns in collection table

I would like it if custom fields showed up in a collection's table.

Something like when creating a custom field, adding a boolean for "display in table"

If that boolean is checked, then when looking at a collection table, that field becomes a column.

I am happy to take a stab at this and create a PR if there is interest in this.

Originally posted by @city41 in #152

Uncaught RangeError: Adding different instances of a keyed plugin (plugin$)

Discussed in #75

<sup>Originally posted by mtaku3 November 25, 2022</sup>
Hi, I'm planning to adapt outstatic on my own portfolio project.
When I tried your example/blog application, I got RangeError: Adding different instances of a keyed plugin (plugin$) on new content page(/outstatic/projects/new, /outstatic/posts/new and /outstatic/pages/new)
Do you have any solution for this?

Code I have tried

https://github.com/avitorio/outstatic/tree/canary/examples/blog

Environment

node v18.11.0
npm 8.19.2

Whole of the error message

Uncaught RangeError: Adding different instances of a keyed plugin (plugin$)
    at eval (index.js?fff7:726:1)
    at Array.forEach (<anonymous>)
    at new Configuration (index.js?fff7:724:1)
    at EditorState.reconfigure (index.js?fff7:861:1)
    at Editor.createView (tiptap-core.esm.js?ab32:3471:1)
    at new Editor (tiptap-core.esm.js?ab32:3306:1)
    at new Editor (tiptap-react.mjs?05ef:34:1)
    at eval (tiptap-react.mjs?05ef:347:1)
    at commitHookEffectListMount (react-dom.development.js?ac89:23150:1)
    at commitPassiveMountOnFiber (react-dom.development.js?ac89:24926:1)
    at commitPassiveMountEffects_complete (react-dom.development.js?ac89:24891:1)
    at commitPassiveMountEffects_begin (react-dom.development.js?ac89:24878:1)
    at commitPassiveMountEffects (react-dom.development.js?ac89:24866:1)
    at flushPassiveEffectsImpl (react-dom.development.js?ac89:27039:1)
    at flushPassiveEffects (react-dom.development.js?ac89:26984:1)
    at performSyncWorkOnRoot (react-dom.development.js?ac89:26076:1)
    at flushSyncCallbacks (react-dom.development.js?ac89:12042:1)
    at commitRootImpl (react-dom.development.js?ac89:26959:1)
    at commitRoot (react-dom.development.js?ac89:26682:1)
    at finishConcurrentRender (react-dom.development.js?ac89:25981:1)
    at performConcurrentWorkOnRoot (react-dom.development.js?ac89:25809:1)
    at workLoop (scheduler.development.js?bcd2:266:1)
    at flushWork (scheduler.development.js?bcd2:239:1)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js?bcd2:533:1)

Additional Info:

This seems to have something to do with the TipTap's Placeholder extension, as removing it makes the page load correctly (but without the Placeholder)

Add an environment variable that reflects next.config.js basePath

Add an env var to get the basePath, so that if the site uses next.config.js basePath, Outstatic can still function properly.

The environment variable should be optional and named: OST_BASE_PATH

Ideally we’d be able to get that variable from next.config.js and not have the need for an additional env var. Not sure if that's possible.

This task is completed when

[ ] - basePath becomes part of the OutstaticContext.
[ ] - All the paths and routes have an optional basePath in front of them, ex: ${basePath || ''}/login

Is there an elegant way to update the version of outstatic?

Although it is possible to change package.json directly from the local repository to update the outstatic version, what is the reason to clone a local repository if all our content updates only need to be done in the dashboard?
Is it possible to add a button to update the outstatic version in the dashboard?

Configuration the alias in tsconfig and replace in the web app

Tsconfig file to configure the alias and replace in the web app

Example:

Change this: import '../styles/globals.css'

to this: '@/styles/globals.css'

Commits to main branch

I'm trying Outstatic locally in a feature branch, but my changes are automatically being committed to the main branch.

1. It should commit changes to the current branch
2. When working on localhost, maybe it shouldn't push commits at all?

Bug: Cover Image

Provide environment information

Package Versions:

"next": "14.1.0",
"outstatic": "^1.3.0",

What browser are you using? (if relevant)

Firefox

How are you deploying your application? (if relevant)

localhost:3000

Describe the Bug

Proceeded to follow "Add To Next.js" instructions from documentation. Everything ran perfectly until i added coverImage for products collections. Inconsistent behavior with coverImage

Expected Behavior

Whenever i edit a collection item [product / post] i expect the previously uploaded coverImage to show up. Feedback if there is an error uploading the image.

Link to reproduction - Issues with a link to complete (but minimal) reproduction code will be addressed faster

https://not-required.com

To Reproduce

1. add a product or post, add title, add description, add coverImage
2. set to published & save
3. git pull --rebae [to get content from github on localhost]
4. navigate around inside outstatic, here and there
5. go back to same product to add additional details in the editor [at this point the previously uploaded image is no longer present / shows up in editor]
6. save the document
7. git pull --rebase again, and we can clearly see that the coverImage from the markdown file was deleted cleared
8. at this point i tried uploading the exact same image and i got no feedback, but the image was not uploading [maybe github threw an error because it's the same image]

OST_REPO_OWNER is not used for /api/image

Provide environment information

ENV Flags Set:

• OST_GITHUB_ID
• OST_GITHUB_SECRET
• OST_TOKEN_SECRET
• OST_REPO_SLUG
• OST_REPO_BRANCH
• OST_REPO_OWNER

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

When a user who is not the owner of the repo (and OST_REPO_OWNER is set) is adding or viewing images in a post, a "Couldn't load image." error occurs.

Expected Behavior

OST_REPO_OWNER should be used when getting images from raw.githubusercontent.com if set rather than always using the current users username.

Link to reproduction - Issues with a link to complete (but minimal) reproduction code will be addressed faster

N/A - any deployment with OST_REPO_OWNER set will work to reproduce the issue

To Reproduce

• Log in to outstatic as a user who is not the owner of the repo
• Attach an image to a post

getDocuments errors with msg.startsWith is not a function when collection doesn't exist

Provide environment information

Environment: locally
NextJS version 13.4.12

What browser are you using? (if relevant)

Firefox 116.02

How are you deploying your application? (if relevant)

Vercel

Describe the Bug

Recently, I used getDocuments following the basic fetching data example.

The function continually errors with msg.startsWith is not a function.

After some debugging, I noticed the collection hadn't been populated yet in my outstatic/content folder.

Expected Behavior

Ideally, outstatic would return a more meaningful error message, perhaps something like "collection doesn't exist".

Link to reproduction - Issues with a link to complete (but minimal) reproduction code will be addressed faster

https://github.com/rinduggan/portfolio

To Reproduce

1. Use the getDocuments function, following the fetching data example.
2. For the first parameter, pass in a collection name that doesn't exist in the outstatic/content folder.

Conflict Between Outstatic and Next.js Starting from [email protected] Relating to swcMinify Setting

Provide environment information

next: ^13.1.7-canary.9
outstatic: ^0.0.35-rc

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

I'm encountering a conflict between Outstatic and Next.js starting from [email protected]. This issue only occurs during the build process and does not seem to be a problem during dev.

The error seems to be related to the swcMinify setting in Next.js. Currently, I can get Outstatic to work with any version of Next.js only if swcMinify is set to false inside next.config.js. When swcMinify is set to true, it appears the minification process is causing some issues with the variables from react-hook-form.

The issue happens when inside the Dashboard the user tries to either open or create a new document.
Basically, the error throws everywhere with a form input.

Sometimes it also just shows a blank dashboard and complains that a variable has already been declared.

I have attempted to get an install working without needing to set swcMinify: false, but I have been unsuccessful so far.

I'd appreciate it if anyone has any insights or potential solutions for this issue. Please let me know if there is any additional information needed to diagnose this problem.

Thanks for your assistance in this matter.

Expected Behavior

Outstatic can be installed on Next.js without the need to set swcMinify: false inside next.config.js

The Dashboard is completely accessible, users can edit and create new documents, collections and custom fields.

Link to reproduction - Issues with a link to complete (but minimal) reproduction code will be addressed faster

https://github.com/avitorio/outstatic

To Reproduce

Deploy an example blog with vercel by clicking here.

Change next.config.js and set swcMinify: true.

Log in to /outstatic/ and try to create a new document.

Storybook implementation

Description
Storybook
Ref: https://storybook.js.org/

Why Outstatic need this feature
It's common way to inspect and try component implement by leaders on the industry, look at IBM Carbon DS: https://react.carbondesignsystem.com/