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.

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:

• Improved Image Context: Image captions allow writers to elaborate on the content of an image, enhancing reader understanding and engagement.
• Proper Attribution: Captions offer a dedicated space to credit image creators, promoting ethical content creation practices.
• Accessibility: Captions can improve accessibility for visually impaired users who rely on screen readers.

Implementation Details:

• A new field or toggle switch could be introduced during image upload or editing, allowing users to add captions alongside alt text.
• The caption should be displayed below the image within the published content.
• Ideally, the caption formatting should be customizable (font size, color, etc.) to match the overall post aesthetics.

Benefits:

• Richer Content: Captions contribute to a more informative and engaging reading experience.
• Ethical Content Creation: Captions facilitate proper image attribution, fostering a culture of respect for creators.
• Accessibility Compliance: Captions improve accessibility for users with visual impairments.

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.

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

• Deployed Enterprise blog

• Added the environment variables

i saw https://sandeep.dev/blog, but it doesn't have pagination, how to implement pagination?

I'm unsure whether it's a bug or not, but the new [Advanced analytics (beta)] feature is publicly accessible.

Add the Hover effect to Buttons so that they look 🤔 good.

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.

how users can like a blog post single times.

First read how many topics are there in javasscript

# then start with each topic everyday and practice a lot

# start contributing in open source related to javascript

# work on real projects

# use topics in real world.

eventually you brcome master in javascript

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.

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

.

Flashing: Fast Refresh had to perform a full reload.

If using hashnode as the main project and assign the other nextjs app to use subpath. It will not have this flashing problem.

Hello team,

I tried to access my website on mobile. but the Hamburger icon for the mobile menu doesn't show up.

Thanks

Both the enterprise and the personal blog templates don't have the read time displayed. It will be good to have it shown in the PostHeader.

Before

After

[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! 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?

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

If there's a title written but the body is empty, accessing the draft preview URL results in a 500 internal server error.

when npm install
i get this erorr:

61 error code EUNSUPPORTEDPROTOCOL
62 error Unsupported URL Type "workspace:": workspace:*

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)

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:

1. Check GraphQL Queries/Mutations:

   • Ensure that your GraphQL queries or mutations are correctly formed.
   • Confirm that the queries or mutations match the schema defined in your GraphQL server.

2. 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);

3. 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)
     }

4. Check Network Requests:

   • Ensure that network requests to your GraphQL server are successful.
   • Check the network tab in your browser's developer tools for any failed GraphQL requests.

5. Verify Server-Side Rendering (SSR) in Next.js:

   • If you're using Next.js for server-side rendering, make sure that your GraphQL queries are properly handled on the server side.
   • Verify that your components or pages with GraphQL queries are wrapped with the withApollo HOC (Higher Order Component) from @apollo/client.

6. Update Apollo Client:

   • Ensure that you are using a compatible version of @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.

The build doesn't fail for any other templates except for the hashnode theme....

Hashnode theme is the only build thats failing here. Every other theme is working..

Am I doing something wrong here?

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.

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

Tried deploying to cloudflare & ran into issues.

Build settings

Build command: npm run build
Build output directory: /public
Root directory: /packages/blog-starter-kit/themes/personal

Error

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.

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.