timlrx / tailwind-nextjs-starter-blog Goto Github PK

Curious if anyone can get this to deploy to Netlify. When we tried deploying the current master with no changes at all we get the error below. Any ideas? What is the module 'pnpapi'?

(PS vercel deploys without any problems)

12:32:51 AM:   Dependencies installation error                               
12:32:51 AM: ────────────────────────────────────────────────────────────────
12:32:51 AM: ​
12:32:51 AM:   Error message
12:32:51 AM:   A Netlify Function failed to require one of its dependencies.
12:32:51 AM:   Please make sure it is present in the site's top-level "package.json".
​
12:32:51 AM:   In file "/opt/build/repo/netlify/functions/next_blog/next_blog.js"
12:32:51 AM:   Cannot find module 'pnpapi'
12:32:51 AM:   Require stack:
12:32:51 AM:   - /opt/buildhome/.netlify-build-nvm/versions/node/v12.16.3/lib/node_modules/@netlify/build/node_modules/@netlify/zip-it-and-ship-it/src/node_dependencies/resolve.js
12:32:51 AM:   - /opt/buildhome/.netlify-build-nvm/versions/node/v12.16.3/lib/node_modules/@netlify/build/node_modules/@netlify/zip-it-and-ship-it/src/node_dependencies/index.js
12:32:51 AM:   - /opt/buildhome/.netlify-build-nvm/versions/node/v12.16.3/lib/node_modules/@netlify/build/node_modules/@netlify/zip-it-and-ship-it/src/main.js
12:32:51 AM:   - /opt/buildhome/.netlify-build-nvm/versions/node/v12.16.3/lib/node_modules/@netlify/build/src/plugins_core/functions/index.js
12:32:51 AM:   - /opt/buildhome/.netlify-build-nvm/versions/node/v12.16.3/lib/node_modules/@netlify/build/src/commands/get.js
12:32:51 AM:   - /opt/buildhome/.netlify-build-nvm/versions/node/v12.16.3/lib/node_modules/@netlify/build/src/core/main.js
12:32:51 AM:   - /opt/buildhome/.netlify-build-nvm/versions/node/v12.16.3/lib/node_modules/@netlify/build/src/core/bin.js

Hi,

I'm trying to change the font family of this theme. How do I do it? I tried changing it in tailwind.config.js to -

      fontFamily: {
        //sans: ['Inter', ...defaultTheme.fontFamily.sans],
        serif: ['Literata', 'Georgia', 'Times New Roman', 'serif', ...defaultTheme.fontFamily.serif],
      },

and running npm run dev that does not seem to have any effect.

Thanks.

Thanks for the amazing work on this. Any chance you can add pagination to the: layouts/ListLayout.js. - If we have alot of posts, it just shows all the posts on that page, which is not ideal (we have 100 posts). Would be better to have pagination, and 20 posts per page. Or infinite scrolling also would be a good idea. Thanks.

PS add a tip jar to this repo.

Following the link to 'Introducing Multi-part Posts with Nested Routing' throws error 404.
I downloaded the repo. Built it and launched the site. Navigating to the nested-route entry does not work

Hi there,

Thanks for the template, it looks really good!

I've got a suggestion, have you thought about adding support for comments? If not, I'm currently building giscus, a comments system powered by GitHub Discussions. If you'd accept a PR, I could look into adding giscus integration as an optional feature to this template.

Hi there,
There is a small bug in the code, in that it expects every MD post to have tags. Ocassionally, a post doesn't have a tag yet, or the tags array is empty. As the code has tags.map in several places, this throws an error. The fix that worked for us, was just to do: tags?.map in the code (adding the ?). Might be something you may want to fix in the core. Hope this helps.

I would like to mimic what Tags does in pages/tags/[tag.js] but for authors,
How can I go about to modify the files and achieve something like that?

Also looking to add multiple authors not just one, so exactly like how tags work.

Hello,

A quick message to thanks timlrx and all contributors for the work done here. I used this template as a base for a cookbook aimed to my family: https://tambouille.vercel.app/

The code lives over there: https://github.com/aloisdg/tambouille

Have a nice day everyone

Hello. I have built my blog and it works great. There is one thing i want to do but i don't know how. My english is limited to search the issue. I could make this in hugo with a single permalinks parameter.

My blog posts publishing under /blog directory and when i called a page, it shows like https://url/blog/sample-page so i would like to change this like https://url/sample-page.

How do i do this? Any help would be appreciated.

When i get to one of my posts i get this:

1 of 1 unhandled error
Server Error

TypeError: Cannot read property 'replace' of undefined
This error happened while generating the page. Any console logs will be displayed in the terminal window.
Source

layouts/PostLayout.js (60:55) @ PostLayout

58 | className="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400"
59 | >

60 | {siteMetadata.twitter.replace('https://twitter.com/', '@')}
| ^
61 |
62 |
63 |

Please anyone help!

To support people setting up for the first time if they delete the template files then the application breaks. as there are hardcoded references to the first item in the posts array.

from memory its to access the date property on the first blog post. post[0].date

would be good to have a fallback render thats safe for the 0 length posts array.

anyway its a small thing, should be a easy PR for any of the people watching

thanx

For example, the following code block,

```js
export const MDXLayoutRenderer = ({ layout, mdxSource, ...rest }) => {
  const LayoutComponent = require(`../layouts/${layout}`).default
  
  return (
    <LayoutComponent {...rest}>
      <MDXRemote {...mdxSource} components={MDXComponents} />
    </LayoutComponent>
  )
}
```

renders by removing the new line

export const MDXLayoutRenderer = ({ layout, mdxSource, ...rest }) => {
  const LayoutComponent = require(`../layouts/${layout}`).default
  return (
    <LayoutComponent {...rest}>
      <MDXRemote {...mdxSource} components={MDXComponents} />
    </LayoutComponent>
  )
}

Hey @timlrx ,
Do you think it's better to include instructions on using husky or to remove it as a dependency?

I went to commit locally after cloning the template, but I couldn't because husky not being configured threw an error.

That meant I had to pause what I was doing to npm uninstall husky -- then commit the package.json & package-lock.json files -- and then commit my actual changes.

I'm happy to update your template for whichever solution you think is best.

Hello -

Just found your starter blog. It's definitely the best looking one out there! I am trying to run the blog but running into errors when using your build directions.

NPM Version: 6.14.11
Node Version: v14.16.0

To reproduce

$ git clone https://github.com/timlrx/tailwind-nextjs-starter-blog.git
$ cd tailwind-nextjs-starter-blog/
$ npm run dev

sh: next: command not found
npm ERR! code ELIFECYCLE
npm ERR! syscall spawn
npm ERR! file sh
npm ERR! errno ENOENT
npm ERR! [email protected] dev: `next dev`
npm ERR! spawn ENOENT
npm ERR! 
npm ERR! Failed at the [email protected] dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?

However I'm able to start the app successfully by running

yarn dev

Yarn version: 1.22.10

Maybe we can update the docs to use yarn? Or should we use a specific version of NPM/Node?

Describe the Bug

When package.json updated to the latest version the console prints:

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /node_modules/unist-util-visit/index.js

What version are you using?

next": "10.1.3
unist-util-visit": "3.0.0

npm 7.10.0

Hey @timlrx ,

Just curious what you'd think about enabling this:
"React's Strict Mode is a development mode only feature for highlighting potential problems in an application. It helps to identify unsafe lifecycles, legacy API usage, and a number of other features."
https://nextjs.org/docs/api-reference/next.config.js/react-strict-mode

I found this quote:
"However, writing code resilient to occasional re-running of useEffect is a good practice even without Fast Refresh. It will make it easier for you to introduce new dependencies to it later on and it's enforced by React Strict Mode, which we highly recommend enabling." -- https://nextjs.org/docs/basic-features/fast-refresh

I'm happy to submit the PR if you think it's a good idea.

If you check the Nested Routes post, you'll see that at the bottom, both Discuss on Twitter and View on GitHub don't work properly.

In the PostLayout, a comma , is introduced in both filename and slug instead of a slash /.

Example: nested-route,introducing-multi-part-posts-with-nested-routing

Don't think this belongs in this project: https://github.com/timlrx/tailwind-nextjs-starter-blog/blob/master/.Rhistory.

Title. Sometime when I deploy to vercel and go to the main page, I got the rss feed instead of my homepage. This is because the feed is named index.xml. Rename it to something else E.G feed.xml fixes the issue for me.

I'd like to get HTML outputs when running npm run build so I could deploy this static site to AWS S3. I noticed that the build output is XML which I'm guessing is what Vercel wants. Is there a way this can build to HTML output?

I had my automatic font optimization go out on my projects (as detailed in https://dev.to/ekafyi/first-impressions-on-next-js-automatic-font-optimization-32a1 ), which I'm in the process of fixing tonight.

Huh???

So anyway I was looking at my configuration, and I noticed something.

Shouldn't this preconnect match the domain currently used?

I discovered a possible mistake with sharing posts. If you copy and paste the post link, there is no error. But if you try to share a post from a mobile device, then two pictures are substituted.

The example is on the screenshot for the post: https://www.timlrx.com/blog/growth-hacking-github-how-to-get-github-stars

The first variant where the copied link was used. The second variant where the post was shared on mobile devices (iPhone).

I am getting some strange errors when I try to import the site to Vercel. I use the default values. I had the site up until a few days ago when it would fail to build. I am not a developer am not sure where to start. Here is the Vercel log file.

I made a gist for a more readable format. Not sure why it looks bad in a preview.

https://gist.github.com/theapplegates/e3d2d065ec51b8531ce13631cfaaf0e4

01:17:37 Cloning github.com/theapplegates/crispy-parakeet-tailwind (Branch: main, Commit: 0e615ee) 01:17:38 Cloning completed: 652.690ms 01:17:38 Analyzing source code... 01:17:40 Installing build runtime... 01:17:45 Build runtime installed: 5222.614ms 01:17:49 Looking up build cache... 01:17:49 Build cache not found 01:17:51 Installing dependencies... 01:17:51 yarn install v1.22.10 01:17:51 warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json. 01:17:51 [1/4] Resolving packages... 01:17:51 [2/4] Fetching packages... 01:18:04 info [email protected]: The platform "linux" is incompatible with this module. 01:18:04 info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation. 01:18:04 [3/4] Linking dependencies... 01:18:04 warning " > [email protected]" has incorrect peer dependency "react@>=16.13.1 <=17.0.1". 01:18:04 warning " > [email protected]" has incorrect peer dependency "react-dom@>=16.13.1 <=17.0.1". 01:18:04 warning " > [email protected]" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0". 01:18:15 [4/4] Building fresh packages... 01:18:16 Done in 24.48s. 01:18:16 Detected Next.js version: 10.1.3 01:18:16 Running "yarn run build" 01:18:16 yarn run v1.22.10 01:18:16 $ next build && node ./scripts/generate-sitemap 01:18:17 info - Using webpack 5. Reason: future.webpack5 option enabled https://nextjs.org/docs/messages/webpack5 01:18:17 info - Checking validity of types... 01:18:17 Attention: Next.js now collects completely anonymous telemetry regarding usage. 01:18:17 This information is used to shape Next.js' roadmap and prioritize features. 01:18:17 You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL: 01:18:17 https://nextjs.org/telemetry 01:18:17 info - Creating an optimized production build... 01:18:22 warn - You have enabled the JIT engine which is currently in preview. 01:18:22 warn - Preview features are not covered by semver, may introduce breaking changes, and can change at any time. 01:18:32 info - Compiled successfully 01:18:32 info - Collecting page data... 01:18:33 info - Generating static pages (0/30) 01:18:34 info - Generating static pages (7/30) 01:18:34 info - Generating static pages (14/30) 01:18:35 info - Generating static pages (22/30) 01:18:36 Error occurred prerendering page "/blog/introducing-tailwind-nextjs-starter-blog". Read more: https://nextjs.org/docs/messages/prerender-error 01:18:36 TypeError: unsupported file type: undefined (file: /vercel/path0/public/static/images/twitter-card.png) 01:18:36 at lookup (/vercel/path0/node_modules/image-size/dist/index.js:51:11) 01:18:36 at imageSize (/vercel/path0/node_modules/image-size/dist/index.js:118:16) 01:18:36 at /vercel/path0/.next/server/pages/tags/[tag].js:551:26 01:18:36 at overload (/vercel/path0/node_modules/unist-util-visit/index.js:27:12) 01:18:36 at node (paragraph) (/vercel/path0/node_modules/unist-util-visit-parents/index.js:56:27) 01:18:36 at node (root) (/vercel/path0/node_modules/unist-util-visit-parents/index.js:67:75) 01:18:36 at visitParents (/vercel/path0/node_modules/unist-util-visit-parents/index.js:29:26) 01:18:36 at visit (/vercel/path0/node_modules/unist-util-visit/index.js:22:3) 01:18:36 at /vercel/path0/.next/server/pages/tags/[tag].js:546:3 01:18:36 at wrapped (/vercel/path0/node_modules/trough/wrap.js:25:19) 01:18:40 info - Generating static pages (30/30) 01:18:40 > Build error occurred 01:18:40 Error: Export encountered errors on following paths: 01:18:40 /blog/introducing-tailwind-nextjs-starter-blog 01:18:40 at /vercel/path0/node_modules/next/dist/export/index.js:31:1106 01:18:40 at async Span.traceAsyncFn (/vercel/path0/node_modules/next/dist/telemetry/trace/trace.js:5:584) 01:18:40 at async /vercel/path0/node_modules/next/dist/build/index.js:43:49 01:18:40 at async Span.traceAsyncFn (/vercel/path0/node_modules/next/dist/telemetry/trace/trace.js:5:584) 01:18:40 at async /vercel/path0/node_modules/next/dist/build/index.js:25:1475 01:18:40 at async Span.traceAsyncFn (/vercel/path0/node_modules/next/dist/telemetry/trace/trace.js:5:584) 01:18:40 error Command failed with exit code 1. 01:18:40 info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command. 01:18:40 Error: Command "yarn run build" exited with 1

First of all let me start of with saying what an amazing starter template this is. I've set it up with docker and deployed it on my own server. It was a breeze, so good job!

Just now i wanted to upload a new version of my site and the build started failing. Next to that the compose file does not generate the correct post file.

Steps to reproduce

• node ./scripts/compose.js "My fancy title" md
• Generated my-fancy title.md (notice the first dash is only present
  After editing the post title to be kebab case again, writing the actual post and having the draft set to true i wanted to build so i ran npm run build
• That resulted in TypeError: Cannot read property 'date' of undefined

Whenever i switched the draft to false and ran npm run build again, all things were fine again.

TypeError: allRules.flat is not a function

I am getting this error when I try to run it on codesandbox

I couldn't understand how to change the sort by date with the sort by the post in the nested folder any help would awsome

Is it possible to implement some sort of WebRTC video playback to share the bandwidth among users?

• To keep bandwidth cost extremely low
• Allow many people to watch hosted video content at the same time with fast loading speeds (even if the site is hosted on a home server)
• *(mostly) negate the need for a CDN (even when hosting lots of large videos)
• More users means even better performance (not the other way around)
• No reliance on third party video delivery services
• Works natively on all modern browsers
• Supports VOD and LIVE* video (*depending on implementation)

Method 1:
Using a HLS.js player such as Clappr with P2P Media Loader or CNDBye.
Demo example
Simple implementation tutorial

Method 2:
Using IPFS-JS implementation of IPFS protocol.
Demo example

Method 3:
Using WebTorrentPlayer which is built on WebTorrent which a lot of projects use.
How WebTorrent works.
Demo example

Hi there,

I'd like to move my current weblog to tailwind-nextjs-starter-blog preserving URL structure. The problem that I need [website]/[id] instead of [website]/blog/[id]. For example:

http://localhost:3000/guide-to-using-images-in-nextjs

As I am a newbie in Next.js, I don't know what should I change exactly in source code. Can you help me? Thanks.

It would be great if you could pick a hero image for each blog post that could be shown to the left of the Title where thers is currently a lot of dead space.

I think its this:

class="prose text-gray-500 max-w-none dark:text-gray-400"

Text is shown as one line breaking the container. I had a go to fix but only just started with tailwind.

See related issue: vercel/next.js#26130

It's supposedly fixed in the canary branch, but I will wait until 11.0.1 is out before trying to patch things up.

Posting this in case anyone is getting upgrade problems..

Google fonts don't have onLoad="this.media='all'"

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&amp;display=swap" media="print">

Firefox Dev Tools:

Looks like there may be an issue with with timlrx.com

Can you add localization option like i18n?

Hi, thanks for the awesome work.

I was wondering if you tried an integration with https://github.com/vinissimus/next-translate or maybe someone have tried? I can't get to work any next.config.js with the provided config of the template and the next-translate package.

If someone has done something similar please let me now, thanks!

Originally posted by @timlrx in #60 (comment)

Thanks for your feedback. Sorry for re-opening this but I do think I am implementing the redux store correctly. I have done it the same way in another nextjs project before and it works fine. Furthermore, if I use the exact same component in a nextjs page, I don't get any error. But if I use it in an mdx page, it gives me the error above. So, I do think there needs to be some additional configuration to pass the store to the MDX @components but I'm not sure what it is.

For implementing redux, I had used the redux-toolkit example from nextjs
Any suggestions will be appreciated

This is my component
This is where I use it in a page and it's fine
And this is where it's added to an mdx data and I get the error

I'm getting the following error message:
error - ./node_modules/next/dist/compiled/css-loader/cjs.js??ruleSet[1].rules[2].oneOf[6].use[1]!./node_modules/next/dist/compiled/postcss-loader/cjs.js??ruleSet[1].rules[2].oneOf[6].use[2]!./css/tailwind.css
TypeError: Object.fromEntries is not a function

Hi!
I'am getting a Segmentation Fault error while in dev, after going to the about page. The about page has an image and I guess that's the problem.

event - compiled successfully
zsh: segmentation fault  npm run dev

I've read somewhere that this is related to next/image but cannot find the source.

This happens on an M1 without Rosetta2 installed.

Any idea?

Running on Windows 10 npm run build fails with the output below:

10 silly lifecycle [email protected] buildArgs: [ /d /s /c', 'next build && node ./scripts/generate-sitemap]
11silly lifecycle [email protected] build: Returned: code: 1 signal: null
12 info lifecycle [email protected]~build: Failed to exec build script
13 verbose stack Error: [email protected] build: next build && node ./scripts/generate-sitemap
13 verbose stack Exit status 1
13 verbose stack at EventEmitter. (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\index.js:332:16)
13 verbose stack at EventEmitter.emit (events.js:315:20)
13 verbose stack at ChildProcess. (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
13 verbose stack at ChildProcess.emit (events.js:315:20)
13 verbose stack at maybeClose (internal/child_process.js:1048:16)
13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:288:5)
14 verbose pkgid [email protected]
15 verbose cwd C:\Users\PWSys\Documents\Projects\nexts_va_v07\nextjs_va_07
16 verbose Windows_NT 10.0.19042
17 verbose argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "run" "build"
18 verbose node v14.16.1
19 verbose npm v6.14.12
20 error code ELIFECYCLE
21 error errno 1
22 error [email protected] build: next build && node ./scripts/generate-sitemap
22 error Exit status 1
23 error Failed at the [email protected] build script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

Steps to reproduce
npm install
npm run build

This works in Linux. Using the same directory through WSL V2, npm run build works without issue. Any suggestions for why this may be failing on Windows?
Thanks!

Hi, and thanks for this project. I am trying to understand how this project works so I am doing some research. I am quite new to Next.js and many of the tools that this project uses.

I stumbled upon a package called next-compose-plugins and I was wondering if this is still being used.

I also saw there is another issue here regarding some features for the v1 of this project. I can +1 on Documentation, especially on how all the packages work together and maybe even how did you come up with this solution? As I said I am very new to all this so I am looking forward to understand and learn more about how it's done.

After running node .\scripts\generate-sitemap.js.
It creates few XML blocks which doesn't have any significance.

 <url>
    <loc>https://anksus.medata/authors/default</loc>
  </url>

  <url>
    <loc>https://anksus.medata/authors/sparrowhawk</loc>
  </url>

Hi all,

I am thinking of improving the template by adding some new features. What would you like to see in the next major release? Feel free to add a comment with a new feature request and upvote (👍 ) the ones that you want!

Will add things that are being worked on or completed over here:

Progress Tracker

• Support for multiple authors
• Copy button for code sections
• Layout templates
• Easier theming of tailwind config
• Documentation

Problem

Sometimes the tailwind jit engine breaks in dev mode and new styles added is not reflected in the application. See related issue in: tailwindlabs/tailwindcss#4081

Possible solutions

1. As a temporary patch, try modifying the tailwind config file or deleting the .next folder and restart the dev server
2. If you are looking for a more permanent fix, downgrading to webpack v4 supposedly helps. In next.config.js:

future: {
    webpack5: false,
},

3. Another fix would be to opt-out of jit mode, by deleting this line in tailwind.config.js

We will update to the newest version of tailwind css when the problem is fixed, but otherwise, there are no further plans to update the template for now.

Hi
I using your template and it's working really great. Thanks so much
However, I've hit a wall related to make a redux toolkit store available to a component that's placed inside an mdx file.
I have wrapped my whole app with the store provider as usual but on the page that loads the mdx file that has a component that needs to load data from the store, I get this error

Error: Could not find "store" in the context of "Connect(NameofComponent)". Either wrap the root component in a <Provider>, or pass a custom React context provider to <Provider> and the corresponding React context consumer to Connect(NameofComponent) in connect options.

Do you have any suggestions how I would make the store available to a component inside an mdx file. I've had a similar issue with trying to load data asynchronously in an MDX component and I've had to use a different strategy that was not too convenient.

Hey, I like the blog template a lot, thanks.

But I have an issue with getting the 404 "Sorry we couldn't find this page." when opening the homepage at http://localhost:3000/. It works fine after building and then starting it, but not in development mode. What could be causing this?

Hi, I really love the template, thank you so much. One thing: with the newest version (from May 4,2021, 0.3.0, commit 69a4193) it still breaks when deleting posts. To reproduce: I just deleted the blog files. I got

I found a similar closed issue posted by mrhut10 here, but noticed that this happens in the newest version as well..

I plan on doing a either a series blog post or dividing a post into bite size chunks so wanted to support nested routing of the blog route.

I've got a local branch that already supports it,

would anyone else benefit from this, should I open a PR??

Is it possible to add the correct react component to include Google Analytics? It would be great if we can enable it only adding the ID in siteMetaDatajs.

I would try to add it and send a pull. If anyone is interested on this, could you vote?

References:
https://thetombomb.com/posts/google-analytics-nextjs
https://stackoverflow.com/questions/45848142/how-to-set-up-google-analytics-through-google-tag-manager-for-next-js

I have a problem with change port on production:
I added to package.json:
"start": "cross-env TAILWIND_MODE=watch next-remote-watch -p 3011 ./data",
But it is not working, also not working npm run start -- -p 3011, the app still running in localhost:3000.

Can anyone help me?