web3templates / stablo Goto Github PK

View Code? Open in Web Editor NEW

451.0 8.0 185.0 185.89 MB

Stablo is a minimal blog website template built with Next.js, TailwindCSS & Sanity CMS

Home Page: https://stablo.web3templates.com/

License: Other

JavaScript 86.10% CSS 1.45% TypeScript 12.45%

free nextjs react sanitycms tailwindcss website-template

stablo's Introduction

Stablo Blog Template - Next.js & Sanity CMS

Stablo is a JAMStack Blog template built with Next.js, Tailwind CSS & Sanity CMS by Web3Templates. It comes with free & pro version.

Installation ↓

Live Demo

Free Version Demo →

Pro Version Demo →

Features

Feature	Free Version	Pro Version
Next.js v13	✅	✅
/app Directory	✅	✅
Tailwind CSS	✅	✅
Sanity CMS (v3)	✅	✅
On-demand Revalidation	❌	✅
Auto-Update New Posts	Time-Based	✅
Mobile Responsive	✅	✅
Dark & Light Mode	✅	✅
Working Contact Page	✅	✅
Archive (Pagination)	✅	✅
Category Pages	❌	✅
Author Pages	❌	✅
Search Page	❌	✅
Homepage - Default	✅	✅
Homepage - Alternate	❌	✅
Homepage - Minimal	❌	✅
Homepage - Lifestlye	❌	✅
Homepage - Two Column	❌	✅
Blog Post - Default	✅	✅
Blog Post - Minimal	❌	✅
Blog Post - Lifestlye	❌	✅
Blog Post - with Sidebar	❌	✅
6 Months Support	❌	✅
Free Updates	✅	✅
License	GPL-2.0	Commercial

Pricing	Free	$49
	Deploy for free	Purchase Pro

Click the above button for one-click clone & deploy for this template. Read quick start guide below.

Template Preview

Sanity CMS Preview

Installation

Step 1: Deploy to Vercel

Use the Deploy Button below. It will let you deploy the starter using Vercel as well as connect it to your Sanity Studio using the Sanity Vercel Integration.

The above deploy will automatically configure the following:

Create new Repository in Github
Create a Sanity Project
Install Sanity Integration in Vercel
Add required CORS & API settings in the project
Deploy Frontend to Vercel

Alternatively, you can deploy to other services such as Netlify or Cloudflare Pages or AWS Amplify.

Step 2: Set up the project locally.

Once you have deployed the website, it will look like empty or not configured properly. This is expected. We need to do few more steps to make it as seen on the demo.

First, clone the github repository vercel created into your local machine. Use the following command structure. Make sure the terminal is on the right folder before executing this command.

git clone https://github.com/<usename>/<repo>.git your-project-name

Once cloned, run the following command from the project's root directory. This will link your vercel project.

npx vercel link

Now, run the following command to pull the .env variables to your local system.

npx vercel env pull

Now you can see that a new .env.local file has been created. If this doesn't work, you can also rename the .env.local.example to .env.local and add the Sanity Project ID manually.

Now, you can open your code editor (if not already) we prefer VSCode. The run the command in the integrated terminal inside the code editor.

npm install
# or
yarn install
# or
pnpm install

We prefer pnpm to save your disk space.

Step 3: Import Demo Data (Optional)

To look like what you have seen in the demo, with all the content and images, follow the below steps:

if you have not installed @sanity/cli install it globally first.

npm install -g @sanity/cli
# or
pnpm install -g @sanity/cli

Then login to sanity using sanity login command

sanity login

Now, you will be able to import demo content by running the sanity-import command. The files are located at /lib/sanity/data/production.tar.gz and will load automatically by running the below command.

npm run sanity-import
# or
pnpm sanity-import

Step 4: Finish it up!

Now, run your project using the below command.

npm run dev
# or
pnpm dev

Now your project should be up and the Next.js frontend will be running on http://localhost:3000.

Sanity Studio can be accessed using http://localhost:3000/studio or you can run it on a separate https://localhost:3333 server using the following command.

npm run sanity
# or
pnpm sanity

Step 5. Redploy

Once all of the above changes is made, make sure to redeploy to vercel once again to see all of your changes in production.

You can git push the changes and it should automatically trigger a new deployment. If not, you can also deploy to vercel using the following command.

npx vercel --prod

Manual Installation

We recommend you to use the one-click deploy option above. For some reason, if you cannot, use the following steps to install it manually.

Step 1. Clone the Repo

Clone the github repo or use the downloaded files in your local machine.

Step 2. Setup `.env` Variables.

Open the project folder and rename .env.local.example placed in the root folder into .env.local and add your sanity project ID. You can create a new project by visiting this link: https://www.sanity.io/get-started/create-project

If you already have a project, copy the project ID from https://sanity.io/manage

NEXT_PUBLIC_SANITY_PROJECT_ID=xxyyzz

Step 3. Allow CORS Origins

To make the studio work properly, you must add CORS origin in Sanity. This is usually setup automatically if you are using the Vercel Deploy. Visit https://www.sanity.io/manage/personal/project/<project-id>/api in your browser to add CORS origin.

Click Add CORS origin button and enter the URL as http://localhost:3000 and check the Allow credentials checkbox.

Step 4 Continue from above steps

Now, you will be able continue from the above instructions to import the demo data and running the project locally.

Help and Support

Something's not working as expected? Raise a github issue. If you need personalized support or help, please consider purchasing the Pro version and we will assist you over email.

Sponsor

stablo's People

Contributors

Stargazers

Watchers

Forkers

devrsi0n dharmveer97 surjithctly snowmanstudio 3200pro mejustdev rahulcn rashid2003 thappatan kavitasalotra kingbotss belgattitude paulweezydesign samansayar anansi-digital tvudev yuhanaz sowgenius afikri tramleit inzamamahmad3 menaheero kothariji sarribou prasad123-hub khaleel737 pizchy-wachida bumkailashkumar remote-software-dev gadgetboy27 kicaj mhikmal03 lukazambuca tux7p adicore gabfiocchi mariogilezan lalman888 koltukutsu oneeyed1366 yuangezhizao peteryang1756 ahonn calebyeboah27 alejosilvalau nikbhintade azemchap tohidshabanloo ekaji zfeofantov2020 polly3d isma3lmb ohyaya05 https-github-com-openthecode dmtaijul9 nabily4e-dev tsaoc098 bathazarepaige johnxie99 nhat416 margulie songchez shahriarsohan novenopatch kantord coderboi4 suryatmodulus rwmsousa thammasok jenzinha buildrealone seongnoe achambok bieui thusithawijethunga railwaycenter nickdotht rpocklin bagobob elvisdev187 awais882s truong11t2 gactuary jiangdonganxia szriru shuyue426 likuan123 chisomprince farhanatfunkarahdotpk eziskpsy05 fabiomezzo siempay bowenmichael abdanzamzam virendra-wki district3developers schmuecker phucvh77 simran-momi nickgallick

stablo's Issues

What is the license assigned to this template?

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

How to Change the OGP Image for Each Post?

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?

Unrecognized extension value in extension set ([object Object])

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:

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

Blogs not reflecting

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

Error: Configuration must contain `projectId`

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.

Issue in Build

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.

Error on running npm run dev

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.

Unable to import demo data

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!

/studio/desk error on production

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 ?

how to change the title

how to change in that section?

Can't change headings font - how to do that?

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.

Category 404ing

Hello,

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

Many Thanks,

Feature Request: Related Post / more post from this author

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

sanity code-input

Please add sanity code-input support

generateMetadata inside Layout - empty params

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 :)

Portable Text Links Aren't Hooked Up

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)

is there a detailed guide available on this starter?

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.

made a change in sanity blog title, change not reflecting in production

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?

Theme Toggle

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.

Unable to update Site Config from Sanity Studio

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!

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

CORS origin was not allowed in Sanity

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.

Error while trying to open the Sanity Studio

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

Image loading issue on production

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.

Unable to resolve dependency tree

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

npm resolution error

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.