hashnode / starter-kit Goto Github PK
View Code? Open in Web Editor NEWA blog starter kit to use Hashnode as a Headless CMS using GraphQL APIs.
Home Page: https://hashnode.com/headless
License: MIT License
A blog starter kit to use Hashnode as a Headless CMS using GraphQL APIs.
Home Page: https://hashnode.com/headless
License: MIT License
We should add a Contributing Guide with the steps required to locally setup and needed to be followed by a contributor. This will help contributors know the requirements and contribute better.
The error message you provided seems to be related to GraphQL, specifically with Next.js. The error object indicates a "CombinedError." Here's a general approach to address this issue:
Check GraphQL Queries/Mutations:
Inspect the CombinedError
Object:
Look into the details of the CombinedError
object to understand the specific GraphQL error(s) that occurred.
Log or print the error details to the console for more information:
console.error("GraphQL Error:", error);
Handle Errors in Your Code:
Implement proper error handling in your code to gracefully handle GraphQL errors.
You can use try...catch
blocks to catch and handle errors:
try {
// Your GraphQL query or mutation code here
} catch (error) {
console.error("Error occurred:", error);
// Handle the error appropriately (e.g., show a user-friendly message)
}
Check Network Requests:
Verify Server-Side Rendering (SSR) in Next.js:
withApollo
HOC (Higher Order Component) from @apollo/client
.Update Apollo Client:
@apollo/client
. Check for any updates to the Apollo Client library and upgrade if necessary.If you provide more specific details about the GraphQL query, the structure of your components/pages, and how you are using Apollo Client with Next.js, I can provide more targeted assistance.
when npm install
i get this erorr:
61 error code EUNSUPPORTEDPROTOCOL
62 error Unsupported URL Type "workspace:": workspace:*
I'm unsure whether it's a bug or not, but the new [Advanced analytics (beta)] feature is publicly accessible.
Greetings,
I hope this message finds you well. I wanted to bring a minor concern to your attention regarding the Hashnode profile button in the UI of packages/blog-starter-kit/themes/enterprise.
It has come to my notice that the button continues to reference my old username, "ssoumyakanta" despite it being updated quite some time ago. My current username is "s-soumyakanta"
Thanks for the awesome Headless Hashnode Starter Kit themes! It's been a great experience.
Best regards
S Soumyakanta
This feature request proposes adding image captions to the Hashnode content creation experience. Currently, Hashnode only offers alt text for images, which limits the ability to provide additional context or image credits.
Motivation:
Implementation Details:
Benefits:
We hope the Hashnode dev team will consider implementing image captions as a valuable addition to the content creation platform. This feature will empower writers to provide a more comprehensive and professional experience for their readers.
Thank you for your time and consideration.
[next] /bin/sh: next: command not found [next] next start exited with code 127
The above is the error message I get on my terminal
codegen concurrently runs successfully, but next never spins off the project, so no port is assigned.
I deleted my node_modules several times, and the issue still persists. Also, the issue happens for all the packages
Hi,
please help me figure out what's wrong with my starter kit project.
I am running it on windows 10 machine, I first ran npm install -g pnpm
inside the enterprise folder then I ran npm run dev
and it runs and shows a bunch of terminal logs - > success' but it never reaches the terminal log showing the host and port its running on "localhost:3001"
I also assumed its many the configs - but the configs in the .env file are the same as the ones on vercel and its working the but not locally -> this is what I have in the .env file:
NEXT_PUBLIC_HASHNODE_GQL_ENDPOINT=https://gql.hashnode.com
NEXT_PUBLIC_HASHNODE_PUBLICATION_HOST=vukanig.hashnode.com
NEXT_PUBLIC_MODE=development
If any one has suggestion on what could be blocking me please assist.
Highly appreciate it
If there's a title written but the body is empty, accessing the draft preview URL results in a 500 internal server error.
Hi.
The personal theme demo (https://sandeep.dev/blog) and the code (https://github.com/Hashnode/starter-kit/tree/main/packages/blog-starter-kit/themes/personal) output does not match.
I went with the personal ones because of the live demo output. I was disappointed that the production was different, and there was no information on achieving the look. The Live demo's code is also not available on GitHub.
how users can like a blog post single times.
Hi @fazlerocks @panda-sandeep,
I found a bug in the Hashnode Theme, that the links in the single blog page are redirecting me back to the home page of my website. For example, I have my website setup at https://www.akshatarora.in/. If I click on any blog under the "More Articles" sections from any single blog page, I'm redirected back to the home page with url https://www.akshatarora.in/[blog-slug].
My main website is build using create-react-app, and I'm configuring rewrites using vercel.json. I don't have any 404 page, hence the redirection.
I've identified (and tested) that the problem can be fixed by removing the first-ever slash in the links mentioned above. For example, right now a blog-link says href="/[blog-slug]", can be fixed by href="[blog-slug]".
Please assign me this, so I can make a contribution quickly.
I am getting 404 for my blog.
Deployed on vercel.
Deployed url -> https://blog-starter-kit-lyart-gamma.vercel.app/blog
Actual Blog -> https://mentis.hashnode.dev/
I followed all the steps given in the documentation
It seems like the wrong canonical URL gets added to the blog post.
I set a canonical URL in the Hashnode draft editor and published the article.
However, when I open the blog article and check the canonical URL I find the current URL of the article, instead of the given canonical URL.
Hi @Harsh062,
Thank you for choosing to feature this theme in Hashnode's Repo. It's been such an honor. Here's the details of the repo and live demo.
Live Demo : https://pravinreacts.vercel.app/
Repo : https://github.com/pravintargaryen/starter-kit
Regards,
Pravin
.
Currently we are lacking a Code of Conduct. We can add an org-wide CoC to ensure a safe and welcoming environment for all contributors.
Hi! I am just starting with the starter-kit for enterprise, and I am a bit confused of how to implement the comments, since I can see that there are files dedicated for comments, but when I am creating an article, it doesn't show the comment section (even though it is not disabled when publishing).
What should I do to enable it?
Disclaimer: I am not sure how important this issue is 😅
Currently, in the packages/utils/renderer/services/embed.ts
the script src is constant that is, /js/iframe-resizer.js
which do not work if NEXT_PUBLIC_BASE_URL
is defined.
Make the script.src
dynamic with NEXT_PUBLIC_BASE_URL
const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL || '';
script.src = BASE_URL == '' ? `/js/iframe-resizer.js` : `${BASE_URL}/js/iframe-resizer.js`;
i saw https://sandeep.dev/blog, but it doesn't have pagination, how to implement pagination?
Hi @panda-sandeep @panda-sandeep,
I've noticed that both the profile pictures and user names in blogs under More Articles section have undefined as username in links, as shown in the bottom left corner of the image.
Please assign me this this, so I can fix it by modifying the graphQL query.
Tried deploying to cloudflare & ran into issues.
Build command: npm run build
Build output directory: /public
Root directory: /packages/blog-starter-kit/themes/personal
2023-10-17T15:58:11.433883Z Cloning repository...
2023-10-17T15:58:12.482752Z From https://github.com/maheshrjl/starter-kit
2023-10-17T15:58:12.483383Z * branch 39fbe4c2707c7fa119377735c50e74d1694e6c25 -> FETCH_HEAD
2023-10-17T15:58:12.483548Z
2023-10-17T15:58:12.568478Z HEAD is now at 39fbe4c Add links to demo videos on YouTube
2023-10-17T15:58:12.569178Z
2023-10-17T15:58:12.692253Z
2023-10-17T15:58:12.731877Z Success: Finished cloning repository files
2023-10-17T15:58:13.659212Z Detected the following tools from environment: [email protected], [email protected]
2023-10-17T15:58:14.735509Z Installing project dependencies: pnpm install
2023-10-17T15:58:15.660693Z ERR_PNPM_OUTDATED_LOCKFILE Cannot install with "frozen-lockfile" because pnpm-lock.yaml is not up to date with package.json
2023-10-17T15:58:15.661138Z
2023-10-17T15:58:15.661352Z Note that in CI environments this setting is true by default. If you still need to run install in such cases, use "pnpm install --no-frozen-lockfile"
2023-10-17T15:58:15.661536Z
2023-10-17T15:58:15.661724Z Failure reason:
2023-10-17T15:58:15.661923Z specifiers in the lockfile ({"@graphql-typed-document-node/core":"^3.2.0","@tailwindcss/typography":"^0.5.10","classnames":"^2.3.1","date-fns":"^2.28.0","graphql-request":"^6.1.0","gray-matter":"^4.0.3","next":"latest","react":"^18.2.0","react-dom":"^18.2.0","remark":"^14.0.2","remark-html":"^15.0.1","typescript":"^4.7.4","@graphql-codegen/cli":"^5.0.0","@graphql-codegen/typed-document-node":"^5.0.1","@graphql-codegen/typescript":"^4.0.1","@graphql-codegen/typescript-operations":"^4.0.1","@parcel/watcher":"^2.3.0","@types/node":"^18.0.3","@types/react":"^18.0.15","@types/react-dom":"^18.0.6","autoprefixer":"^10.4.7","concurrently":"^8.2.1","postcss":"^8.4.14","tailwindcss":"^3.1.4"}) don't match specs in package.json ({"@graphql-codegen/cli":"^5.0.0","@graphql-codegen/typed-document-node":"^5.0.1","@graphql-codegen/typescript":"^4.0.1","@graphql-codegen/typescript-operations":"^4.0.1","@parcel/watcher":"^2.3.0","@starter-kit/eslint-config-custom":"workspace:*","@starter-kit/tsconfig":"workspace:*","@types/js-cookie":"^3.0.4","@types/node":"^18.0.3","@types/react":"^18.0.15","@types/react-dom":"^18.0.6","@types/uuid":"^9.0.5","autoprefixer":"^10.4.7","concurrently":"^8.2.1","eslint":"^8.51.0","postcss":"^8.4.14","@graphql-typed-document-node/core":"^3.2.0","@radix-ui/react-dropdown-menu":"^2.0.6","@radix-ui/react-popover":"^1.0.7","@starter-kit/utils":"workspace:*","@tailwindcss/typography":"^0.5.10","@vercel/og":"^0.5.18","date-fns":"^2.30.0","graphql-request":"^6.1.0","gray-matter":"^4.0.3","html-react-parser":"^4.2.2","js-cookie":"^3.0.5","react-waypoint":"^10.3.0","remark":"^14.0.2","remark-html":"^15.0.1","uuid":"^9.0.1"})
2023-10-17T15:58:15.713562Z Error: Exit with error code: 1
2023-10-17T15:58:15.713945Z at ChildProcess.<anonymous> (/snapshot/dist/run-build.js)
2023-10-17T15:58:15.714202Z at Object.onceWrapper (node:events:652:26)
2023-10-17T15:58:15.714345Z at ChildProcess.emit (node:events:537:28)
2023-10-17T15:58:15.714459Z at ChildProcess._handle.onexit (node:internal/child_process:291:12)
2023-10-17T15:58:15.726708Z Failed: build command exited with code: 1
2023-10-17T15:58:16.864919Z Failed: error occurred while running build command
Some generic comments from my side. They may not be crucial but I think they should at least be pointed out. I have not implemented them right away because they would require more changes and may only reflect my opinion.
We can close and delete this issue afterwards.
There are quite some TS errors that are ignored due to strict: false
.
I have temporarily changed it to strict: true
and fixed some of the errors. There are quite some errors that could cause exception (e.g. accessing a property of undefined
). I think it is best practice to at least use strict: true
(IMO the setting should be even stricter than that).
We should favor named exports if possible (not for pages).
There is a reason why highly respected people (like Kent C. Dodds) hate default exports. The DX is just way worse with them.
Formatting is inconsistent.
I have just saved files without formattting because otherwise it would change the whole formatting of the file. IMO we should have a prettier setup that makes it easy for contributors (also internal) to contribute code in a consistent manner.
It doesn't feel right to include the copied highlight.js
code here.
IMO it is something that we should get rid of. It is huge, not type-safe, badly maintainable etc.
We should not use the >7 years unmaintained rss
package.
I don't think it is a good idea to ship a new project with a dependency that is abandoned for more than 7 years.
Hello team,
I tried to access my website on mobile. but the Hamburger icon for the mobile menu doesn't show up.
Thanks
Add the Hover effect to Buttons so that they look 🤔 good.
Version of Node.js:
21.5.0
pnpm version
8.14.1
Operating System
Windows 11
Issue
When running pnpm dev
after pnpm install
in the /personal
theme, I am getting this error:
Console:
[next] TypeError: Cannot read properties of undefined (reading 'document')
[next] at parseRequestExtendedArgs (E:\GitHub\starter-kit\node_modules\.pnpm\[email protected][email protected]\node_modules\graphql-request\build\cjs\parseArgs.js:38:25)
[next] at request (E:\GitHub\starter-kit\node_modules\.pnpm\[email protected][email protected]\node_modules\graphql-request\build\cjs\index.js:330:72)
[next] at getRedirectionRules (E:\GitHub\starter-kit\packages\blog-starter-kit\themes\personal\next.config.js:31:21)
[next] at Object.redirects (E:\GitHub\starter-kit\packages\blog-starter-kit\themes\personal\next.config.js:92:16)
[next] at loadRedirects (E:\GitHub\starter-kit\node_modules\.pnpm\[email protected][email protected][email protected]\node_modules\next\dist\lib\load-custom-routes.js:360:34)
[next] at loadCustomRoutes (E:\GitHub\starter-kit\node_modules\.pnpm\[email protected][email protected][email protected]\node_modules\next\dist\lib\load-custom-routes.js:438:9)
[next] at setupFsCheck (E:\GitHub\starter-kit\node_modules\.pnpm\[email protected][email protected][email protected]\node_modules\next\dist\server\lib\router-utils\filesystem.js:235:60)
[next] at initialize (E:\GitHub\starter-kit\node_modules\.pnpm\[email protected][email protected][email protected]\node_modules\next\dist\server\lib\router-server.js:56:58)
[next] at async Server.<anonymous> (E:\GitHub\starter-kit\node_modules\.pnpm\[email protected][email protected][email protected]\node_modules\next\dist\server\lib\start-server.js:221:36)
Browser:
TypeError: The "path" argument must be of type string. Received undefined
at Object.join (node:path:433:7)
at noopServiceWorkerMiddleware (D:\Downloads\status\node_modules\react-dev-utils\noopServiceWorkerMiddleware.js:14:26)
at Layer.handle [as handle_request] (D:\Downloads\status\node_modules\express\lib\router\layer.js:95:5)
at trim_prefix (D:\Downloads\status\node_modules\express\lib\router\index.js:328:13)
at D:\Downloads\status\node_modules\express\lib\router\index.js:286:9
at Function.process_params (D:\Downloads\status\node_modules\express\lib\router\index.js:346:12)
at next (D:\Downloads\status\node_modules\express\lib\router\index.js:280:10)
at launchEditorMiddleware (D:\Downloads\status\node_modules\react-dev-utils\errorOverlayMiddleware.js:20:7)
at Layer.handle [as handle_request] (D:\Downloads\status\node_modules\express\lib\router\layer.js:95:5)
at trim_prefix (D:\Downloads\status\node_modules\express\lib\router\index.js:328:13)
at D:\Downloads\status\node_modules\express\lib\router\index.js:286:9
at Function.process_params (D:\Downloads\status\node_modules\express\lib\router\index.js:346:12)
at next (D:\Downloads\status\node_modules\express\lib\router\index.js:280:10)
at handleWebpackInternalMiddleware (D:\Downloads\status\node_modules\react-dev-utils\evalSourceMapMiddleware.js:42:7)
at Layer.handle [as handle_request] (D:\Downloads\status\node_modules\express\lib\router\layer.js:95:5)
at trim_prefix (D:\Downloads\status\node_modules\express\lib\router\index.js:328:13)
at D:\Downloads\status\node_modules\express\lib\router\index.js:286:9
at Function.process_params (D:\Downloads\status\node_modules\express\lib\router\index.js:346:12)
at next (D:\Downloads\status\node_modules\express\lib\router\index.js:280:10)
at compression (D:\Downloads\status\node_modules\compression\index.js:220:5)
at Layer.handle [as handle_request] (D:\Downloads\status\node_modules\express\lib\router\layer.js:95:5)
at trim_prefix (D:\Downloads\status\node_modules\express\lib\router\index.js:328:13)
at D:\Downloads\status\node_modules\express\lib\router\index.js:286:9
at Function.process_params (D:\Downloads\status\node_modules\express\lib\router\index.js:346:12)
at next (D:\Downloads\status\node_modules\express\lib\router\index.js:280:10)
at next (D:\Downloads\status\node_modules\express\lib\router\route.js:136:14)
at next (D:\Downloads\status\node_modules\express\lib\router\route.js:140:7)
at next (D:\Downloads\status\node_modules\express\lib\router\route.js:140:7)
at next (D:\Downloads\status\node_modules\express\lib\router\route.js:140:7)
at next (D:\Downloads\status\node_modules\express\lib\router\route.js:140:7)
at next (D:\Downloads\status\node_modules\express\lib\router\route.js:140:7)
at next (D:\Downloads\status\node_modules\express\lib\router\route.js:140:7)
at next (D:\Downloads\status\node_modules\express\lib\router\route.js:140:7)
at next (D:\Downloads\status\node_modules\express\lib\router\route.js:140:7)
at next (D:\Downloads\status\node_modules\express\lib\router\route.js:140:7)
at next (D:\Downloads\status\node_modules\express\lib\router\route.js:140:7)
at next (D:\Downloads\status\node_modules\express\lib\router\route.js:140:7)
at next (D:\Downloads\status\node_modules\express\lib\router\route.js:140:7)
at next (D:\Downloads\status\node_modules\express\lib\router\route.js:140:7)
at next (D:\Downloads\status\node_modules\express\lib\router\route.js:140:7)
at next (D:\Downloads\status\node_modules\express\lib\router\route.js:140:7)
at next (D:\Downloads\status\node_modules\express\lib\router\route.js:140:7)
at next (D:\Downloads\status\node_modules\express\lib\router\route.js:140:7)
at next (D:\Downloads\status\node_modules\express\lib\router\route.js:140:7)
at next (D:\Downloads\status\node_modules\express\lib\router\route.js:140:7)
at next (D:\Downloads\status\node_modules\express\lib\router\route.js:140:7)
at next (D:\Downloads\status\node_modules\express\lib\router\route.js:140:7)
at next (D:\Downloads\status\node_modules\express\lib\router\route.js:140:7)
at next (D:\Downloads\status\node_modules\express\lib\router\route.js:140:7)
at next (D:\Downloads\status\node_modules\express\lib\router\route.js:140:7)
I'm using this starter-kit for my website https://giolaq.dev.
I've got a page https://giolaq.dev/series/talks loading all the articles of a series but when I click "Load More" the older articles are not loading and there's the GraphQL error below:
GQL error occurred
Object { error: CombinedError }
[talks:13024:25](https://giolaq.dev/series/talks)
overrideMethod https://giolaq.dev/series/talks:13024
NextJS 86
It seems this line renders React Components in the wrong way.
Is this intended or did I miss some context?! 🤔
Should be something like this
{post ? <Post publication={publication} post={post /> : <Page page={page} />}
The problem is explained in this video: https://youtu.be/QuLfCUh-iwI?t=25
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.