web3templates / stablo Goto Github PK

Hi, I found the issue when trying to setup the project. But I have already handled it. I write this issue just for feedback.

So I was trying to import the demo data just like in the given instruction to import data, but I got this error:

$ sanity dataset import .sanity-template/data/production.tar.gz production

Error: Command "dataset" is not available outside of a Sanity project context.
Run the command again within a Sanity project directory, where "sanity"
is installed as a dependency.
    at CommandRunner.runCommand (/usr/local/share/.config/yarn/global/node_modules/@sanity/cli/lib/_chunks/cli-519443c4.js:17742:33506)
    at Object.runCli (/usr/local/share/.config/yarn/global/node_modules/@sanity/cli/lib/_chunks/cli-519443c4.js:17745:2460)

I managed to handle that issue by modifying the import script in package.json:

From:

"import": "sanity dataset import .sanity-template/data/production.tar.gz production",

To:

"import": "cd studio && sanity dataset import ../.sanity-template/data/production.tar.gz production",

After that, I got another error message saying:

$ cd studio && sanity dataset import ../.sanity-template/data/production.tar.gz production
✔ [100%] Fetching available datasets
✔ [100%] Reading/validating data file (45ms)
✖ [  0%] Importing documents (960ms)

Error: Mutation(s) failed with 1 error(s)
You probably want either:
 --replace (replace existing documents with same IDs)
 --missing (only import documents that do not already exist)
    at Object.action (~/Development/manhajsalaf/studio/node_modules/@sanity/core/lib/commands/dataset/importDatasetCommand.js:181:21)
error Command failed with exit code 1.

It seems by default, the sanity won't allow us to import the data to the existing dataset, in this case, production. So we have to add the --replace argument when executing the import script, like this: npm run import --replace.

After that, It ran as expected.

I'm so happy using this template, the theme is so beautiful, easy to manage, and has good performance. Thank you so much for providing this template. Love it!

Describe the bug

When I add "Code" snippet in text editor, I get "Unrecognized extension value in extension set ([object Object])."

To Reproduce

Steps to reproduce the behavior:

Create a New Post
Go to "Body"
Add "Code"
See error
Error: Unrecognized extension value in extension set ([object Object]). This sometimes happens because multiple instances of @codemirror/state are loaded, breaking instanceof checks.
Error: Unrecognized extension value in extension set ([object Object]). This sometimes happens because multiple instances of @codemirror/state are loaded, breaking instanceof checks.
at inner (http://localhost:3333/node_modules/.sanity/vite/deps/chunk-LRCCG7IE.js?v=2a0fbecc:1854:15)
at inner (http://localhost:3333/node_modules/.sanity/vite/deps/chunk-LRCCG7IE.js?v=2a0fbecc:1834:9)
at inner (http://localhost:3333/node_modules/.sanity/vite/deps/chunk-LRCCG7IE.js?v=2a0fbecc:1834:9)
at inner (http://localhost:3333/node_modules/.sanity/vite/deps/chunk-LRCCG7IE.js?v=2a0fbecc:1834:9)
at inner (http://localhost:3333/node_modules/.sanity/vite/deps/chunk-LRCCG7IE.js?v=2a0fbecc:1834:9)
at flatten (http://localhost:3333/node_modules/.sanity/vite/deps/chunk-LRCCG7IE.js?v=2a0fbecc:1858:3)
at Configuration.resolve (http://localhost:3333/node_modules/.sanity/vite/deps/chunk-LRCCG7IE.js?v=2a0fbecc:1771:21)
at EditorState.create (http://localhost:3333/node_modules/.sanity/vite/deps/chunk-LRCCG7IE.js?v=2a0fbecc:2414:39)
at EditorState.fromJSON (http://localhost:3333/node_modules/.sanity/vite/deps/chunk-LRCCG7IE.js?v=2a0fbecc:2402:24)
at http://localhost:3333/node_modules/.sanity/vite/deps/CodeMirrorProxy-e83d4d37-IEJNSFB2.js?v=2a0fbecc:1812:53

Expected behavior

It should add code snippet

Which versions of Sanity are you using?

My package.json file

{
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"postbuild": "next-sitemap",
"start": "next start",
"sanity": "sanity dev",
"sanity-import": "sanity dataset import lib/sanity/data/production.tar.gz production",
"sanity-export": "sanity dataset export production lib/sanity/data/production.tar.gz",
"lint": "next lint"
},
"dependencies": {
"@headlessui/react": "^1.7.13",
"@heroicons/react": "^2.0.17",
"@portabletext/react": "^2.0.2",
"@sanity/code-input": "^4.1.0",
"@sanity/icons": "^2.2.2",
"@sanity/image-url": "^1.0.2",
"@sanity/table": "^1.0.1",
"@sanity/types": "^3.8.3",
"@sanity/ui": "^1.3.1",
"@sanity/vision": "^3.8.3",
"@tailwindcss/typography": "^0.5.9",
"@vercel/og": "^0.5.1",
"@web3forms/react": "^1.1.3",
"clsx": "^1.2.1",
"date-fns": "^2.29.3",
"get-video-id": "^3.6.5",
"next": "^13.3.0",
"next-sanity": "^5.1.1",
"next-seo": "^5.15.0",
"next-sitemap": "^4.0.6",
"next-themes": "^0.2.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-hook-form": "^7.43.9",
"react-iframe": "^1.8.5",
"react-refractor": "^2.1.7",
"sanity": "^3.9.0",
"sanity-plugin-asset-source-unsplash": "^1.0.6",
"styled-components": "^5.3.9",
"swr": "^2.1.2",
"typescript": "^5.0.4"
},
"devDependencies": {
"autoprefixer": "^10.4.14",
"eslint": "^8.38.0",
"eslint-config-next": "^13.3.0",
"eslint-config-sanity": "^6.0.0",
"postcss": "^8.4.21",
"prettier": "^2.8.7",
"prettier-plugin-tailwindcss": "^0.2.7",
"sharp": "^0.32.0",
"tailwindcss": "^3.3.1"
}
}

What operating system are you using?

Which versions of Node.js / npm are you running?

Run npm -v && node -v in the terminal and copy-paste the result here.

9.6.7
v20.3.0

Hi, I just deployed Stablo Free version to Vercel (on-click deploy).

When I try to edit de Site Config, every field is read-only. I don't understand why... Did I miss something?

Thanks!

Error: It looks like you're using options meant for '@sanity/preview-kit/client', such as 'encodeSourceMapAtPath', 'encodeSourceMap', 'studioUrl' and 'logger'. Make sure you're using the right import.

Hi :)

I am wondering how you could get your metadata solution to work? Basically, I am using the same approach to generate dynamic metadata inside the layout.tsx file as my metadata content is saved inside a cms. To fetch the the metadata settings, I need the current page route path as you do in your example, but the "params" for the function generateMetadata are always empty on my end.

Your example looks like this:

export async function sharedMetaData(params) {
  const settings = await getSettings();

  return {
    // metadataBase: new URL(settings.url),
    title: {
      default:
        settings?.title ||
        "Stablo - Blog Template for Next.js & Sanity CMS",
      template: "%s | Stablo"
    },
    description:
      settings?.description ||
      "Stablo - popular open-source next.js and sanity blog template",
    keywords: ["Next.js", "Sanity", "Tailwind CSS"],
    authors: [{ name: "Surjith" }],
    canonical: settings?.url,
    openGraph: {
      images: [
        {
          url:
            urlForImage(settings?.openGraphImage)?.src ||
            "/img/opengraph.jpg",
          width: 800,
          height: 600
        }
      ]
    },
    twitter: {
      title: settings?.title || "Stablo Template",
      card: "summary_large_image"
    },
    robots: {
      index: true,
      follow: true
    }
  };
}

export async function generateMetadata({ params }) {
  return await sharedMetaData(params);
}

export default async function Layout({ children, params }) {
  const settings = await getSettings();
  return (
    <>
      <Navbar {...settings} />

      <div>{children}</div>

      <Footer {...settings} />
    </>
  );
}

How did you get this to work? As I said, it is basically the exact same approach as mine...
Would appreciate your feedback :)

how to change in that section?

For example there is this code:

 siteUrl:
    process.env.SITE_URL || "https://stablo-pro.web3templates.com",
  generateRobotsTxt: true // (optional)

but there is nothing about the env var used here int he readme.

Another example: web3forms is used for form submission but adding the key is not mentioned in readme at all.

it would be very helpful fro free and PRO version if there was info regarding all the props or customizations that can be done.

The change reflects locally but seems due to cdn the production data does update. is it possible to purge cdn cache on change in studio?

I have changed post/[slug]/page.tsx to this.

export async function generateMetadata({ params }) {
  const post = await getPostBySlug(params.slug);
  const ogimage = urlForImage(post?.mainImage) ?? "";
  return {
    title: post.title,
    description: post.description,
    canonical: post.canonical,
    openGraph: {
      url: post.url,
      title: post.title,
      description: post.description,
      images: [
        {
          url: ogimage.src,
          width: 800,
          height: 600,
          alt: post.title
        }
      ],
      site_name: post.title
    },
    twitter: {
      handle: "@suhara_ponta",
      site: "@suhara_ponta",
      cardType: "summary_large_image"
    }
  };
}

↑This seems to work but are there any other anticipated best practice implementations?
Also, the metadata of twitter:card will be <meta name="twitter:card" content="summary"> even if I set cardType: "summary_large_image" . Any Idea why this is happening?

Got this running npm install

PS C:\dev\stablo-blog> npm install
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: undefined@undefined
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"^18.2.0" from the root project
npm ERR!   peer react@"^17.0.2 || ^18.0.0-0" from [email protected]
npm ERR!   node_modules/next
npm ERR!     next@"^12.1.6" from the root project
npm ERR!     peer next@"^11.0.0 || ^12.0.0" from [email protected]
npm ERR!     node_modules/next-sanity-image
npm ERR!       next-sanity-image@"^3.2.1" from the root project
npm ERR!   1 more (react-dom)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^17.0.2" from [email protected]
npm ERR! node_modules/next-sanity-image
npm ERR!   next-sanity-image@"^3.2.1" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR!
npm ERR! For a full report see:
npm ERR! C:\Users\gutoc\AppData\Local\npm-cache\_logs\2023-02-08T11_57_04_775Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\gutoc\AppData\Local\npm-cache\_logs\2023-02-08T11_57_04_775Z-debug-0.log

You can see that next-sanity-image requires next to be > 11.0.0 and < 12.0.0
And next 12.1.6 requires react to be > 17.0.2 and < 18.0.0-0

Fresh install on Vercel produces the following error:

Error: Configuration must contain `projectId`
    at t.initConfig (/studio/static/js/app.bundle.js?6cea117ad1f1fb7fee4a:109:4401)
    at x.config (/studio/static/js/app.bundle.js?6cea117ad1f1fb7fee4a:92:186312)
    at new x (/studio/static/js/app.bundle.js?6cea117ad1f1fb7fee4a:92:185648)
    at x (/studio/static/js/app.bundle.js?6cea117ad1f1fb7fee4a:92:185631)
    at Object. (/studio/static/js/app.bundle.js?6cea117ad1f1fb7fee4a:92:183290)
    at l (/studio/static/js/vendor.bundle.js?570c84d697b0399dba05:1:410)
    at Object. (/studio/static/js/app.bundle.js?6cea117ad1f1fb7fee4a:26:10206)
    at l (/studio/static/js/vendor.bundle.js?570c84d697b0399dba05:1:410)
    at Object. (/studio/static/js/app.bundle.js?6cea117ad1f1fb7fee4a:33:234749)
    at l (/studio/static/js/vendor.bundle.js?570c84d697b0399dba05:1:410)

Seems like the project gets deployed with this sanity.json:

{
  "root": true,
  "project": {
    "name": "Stablo Template",
    "basePath": "/studio"
  },
  "api": {
    "projectId": "",
    "dataset": "production"
  },
  "plugins": [
    "@sanity/base",
    "@sanity/default-layout",
    "@sanity/default-login",
    "@sanity/desk-tool",
    "asset-source-unsplash"
  ],
  "env": {
    "development": {
      "plugins": [
        "@sanity/vision"
      ]
    }
  },
  "parts": [{
      "name": "part:@sanity/base/schema",
      "path": "./schemas/schema"
    },
    {
      "implements": "part:@sanity/desk-tool/structure",
      "path": "./src/deskStructure"
    }
  ]
}

I'm not familiar with Sanity and just helping a friend out, but presumably that should be filled in with the appropriate projectId at build time? I tried manually replacing it and it works fine.

Hello,

Noticed a bug, the categories URL is outputting a 404 page :).

Many Thanks,

The images are not loading on my production server.

My blog post url is
https://finexo.in/blog/post/gst-on-sales-of-fixed-assets

The image url is coming as https://finexo.in/blog/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Ftb3xbyw3%2Fproduction%2Fc12fa2166c7f5cfe3b595deb7dcc11a455d521dd-1200x800.png%3Fw%3D1200%26auto%3Dformat&w=3840&q=75

And when I open this url in brower, error came - "url" parameter is not allowed

It is working fine in my local and also when I do npm run build and then npm run start.
Not getting why error is coming on server.

Great work:)

Just a heads up that the links aren't hooked up in Portable text. Ex: https://stablo-template.vercel.app/post/5-effective-brain-recharging-activities-no-one-is-talking-about

I also noticed that the other marks mentioned in lib/sanity.js aren't being used in the blockContent schema. (center / highlight)

I created a new project using the Sanity Vercel Integration Starter options in Vercel. The frontend works fine but when I try to access the Sanity Studio, it is giving me this error "Error: Unknown handler: filter"

Thank you

Can I please work on a cool UI Theme toggle that has a sun and moon icon to toggle between dark and light mode?
I can get it done in a few minutes.

I deployed the template as per the instructions but I see no blogs being reflected on the hosted version

When I cloned the repo locally i see this error

I guess this is related to env variables not being properly set.

I have used .env.local.example and also tried fetching variables from vercel. Both of them arent working

Please add sanity code-input support

Please Add Related Post/ You Might Also Like / more post from autor .....

Every Blog Need Related Post widgets ..... hope you will add this in next update

Hello! I can't change headings font to my custom one, I'd like to keep inter as Sans, but override serif and use it only for headings. But I can't find where font for headings is defined as sans - this I'd like to change to serif and enjoy my custom local font in the headings on the site.

Hi @surjithctly,

First of all, thank you for building this awesome template! I wanted to ask about the license attached to this template. https://web3templates.com/templates/stablo-minimal-blog-website-template it mentions that it's free to download/use & it comes with no additional support.

Does this mean we're able to freely use this template as long as we don't expect any support?

Derrick

May I ask which file should the Google statistics buried point code be placed in?

After following the installation instructions I had to enter the Sanity project dashboard and allow manually the CORS origin by entering my published URL. The instructions are saying that it was going to happen automatically but it didn't.

When I am running it in local then below error is coming

metadata.metadataBase is not set for resolving social open graph or twitter images, using "http://localhost:3000". See https://nextjs.org/docs/app/api-reference/functions/generate-metadata#metadatabase

When I am running npm run build then this error is coming -

Type error: Layout "app/(website)/layout.tsx" does not match the required types of a Next.js Layout. "sharedMetaData" is not a valid Layout export field.

When I am seeing app/(website)/layout.tsx then this line is commented. Do I need to enter something here?
// metadataBase: new URL(settings.url),

Also, I am getting this warning - Sanity returns empty array. Are you sure the dataset is public? I have double checked and my dataset is public. So I should not get this warning.

Hello guy! I have a problem related to CMS on production!

I make a tutorial step-by-step and on localhost I don't have any problem (frontend/CMS) but when I deploy it (vercel) CMS is not accessible

any hint for this ?

hey,

lovely blog template. when installing i'm getting an npm resolution error on npm install I was able to resolve by using npm install --legacy-peer-deps so I wanted to put it on y'alls radar that this happening with the template.

npm log output:

# npm resolution error report

While resolving: undefined@undefined
Found: [email protected]
node_modules/react
  react@"^18.2.0" from the root project
  peer react@"^17.0.2 || ^18.0.0-0" from [email protected]
  node_modules/next
    next@"^12.1.6" from the root project
    peer next@"^11.0.0 || ^12.0.0" from [email protected]
    node_modules/next-sanity-image
      next-sanity-image@"^3.2.1" from the root project
  peer react@"^18.2.0" from [email protected]
  node_modules/react-dom
    react-dom@"^18.2.0" from the root project
    peer react-dom@"^17.0.2 || ^18.0.0-0" from [email protected]
    node_modules/next
      next@"^12.1.6" from the root project
      peer next@"^11.0.0 || ^12.0.0" from [email protected]
      node_modules/next-sanity-image
        next-sanity-image@"^3.2.1" from the root project

Could not resolve dependency:
peer react@"^17.0.2" from [email protected]
node_modules/next-sanity-image
  next-sanity-image@"^3.2.1" from the root project

Fix the upstream dependency conflict, or retry
this command with --force or --legacy-peer-deps
to accept an incorrect (and potentially broken) dependency resolution.