panr / gatsby-starter-hello-friend Goto Github PK

I wanted to provide you the link in case you feel like chiming in

https://stackoverflow.com/questions/59792722/can-someone-help-me-understand-the-logic-of-gatsby-blog-template-content-types

Hi, this starter looks really nice! Unfortunately I'm running into this error when I try to get it running. I've tried:

gatsby new gatsby-starter-hello-friend https://github.com/panr/gatsby-starter-hello-friend
cd gatsby-starter-hello-friend
npm run dev

but I get the following GraphQL error from src/templates/tags.js:

Unknown argument 'formatString'

Screenshot

I did a small change to support it in my case, but I want to understand why is not supported

const MainMenu = ({ mainMenu, mainMenuItems, isMobileMenu }) => {
  const menu = mainMenu.slice(0)
  !isMobileMenu && menu.splice(mainMenuItems)

  return menu.map((menuItem, index) => {
    const urlRegex = /^(https?:\/\/)?([\da-z\.-]+\.[a-z\.]{2,6}|[\d\.]+)([\/:?=&#]{1}[\da-z\.-]+)*[\/\?]?$/im
    const isAbsoluteUrl = menuItem.path.match(urlRegex);
    if (isAbsoluteUrl) {
      return (
        <li key={index}>
          <a href={menuItem.path} target='_top'>{menuItem.title}</a>
        </li>
      )
    } else {
      return (
        <li key={index}>
          <Link to={menuItem.path}>{menuItem.title}</Link>
        </li>
      )
    }
  })
}

Hi there. It seems that your starter doesn't support RSS feed. I tried to (merely) add 'gatsby-plugin-feed' plugin and it doesn't work out of the box so I wonder if this starter needs some manual work to do. Can you help to advise? Thanks :D.

Great work porting this theme to gatsby, I've encountered a few issues so maybe you could help me.

• I selected default theme light in gatsby-config.js, but dark is still the default;
• If there is no post with a coverImage, GraphQL throws out an error, if there is even one post with a coverImage, it works flawlessly;
• You cannot insert an <a> tag in gatsby-config.js for the footer, you have to manually edit the layout.js file;
• If you insert a logo in gatsby-config.js, the title won't appear anymore;
• I modified SEO.js file in order for it to have the lang-meta-keywords attribute, but it doesn't seem to work (it's not recognized in the final build);
• Remark (gatsby markdown parser), offers options for the excerpt to be specified just like any other markdown parser with <!-- more-->, is there a reason to do so in the front matter?
• Lack of blog features (tags, categories, search and comments)?
• If you use line numbers in prismjs, you will notice that line numbers two digits and beyond are being cut by the margins;

There are many things in the list I'm aware, but I think your theme has a very minimal yet elegant design, but unfortunately as I'm busy with my university exams, I'll not be able to help till next month at least. Thank you for your great work anyway.

Hi

I'm not sure what I'm doing wrong, but I can't seem to add additional menu options in gatsby-config.js

I added:

{
        title: 'Design',
        path: '/design',
      },

with corresponding design.md in /src/pages

But it doesn't recognize it or create page-data.json in /public/page-data/design

Am I missing something? Thanks

Are there installation instructions somewhere? I don't see them.

Hi, I've been using your starter for my Gatsby blog. I hadn't updated it in about 5 months, but I wanted to push some new content today, tried to run the development server using gatsby develop and got this invalid hook call warning, failed to start.

Error logs:

`npm WARN [email protected] requires a peer of acorn@^6.0.0 but none is installed. You must install peer dependencies yourself.

• [email protected]
  added 993 packages from 691 contributors in 34.65s
  avery@pengui:~/node/gatsby-hello-friend-upgraded$ npm run dev

[email protected] dev /home/avery/node/gatsby-hello-friend-upgraded
gatsby clean && gatsby develop

The above error occurred in the component:
in StoreStateProvider
in App

React will try to recreate this component tree from scratch using the error boundary you provided, App.
Warning: App: Error boundaries should implement getDerivedStateFromError(). In that method, return a state update to display an error message or fallback UI.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] dev: gatsby clean && gatsby develop
npm ERR! Exit status 1
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 ERR! A complete log of this run can be found in:
npm ERR! /home/avery/.npm/_logs/2020-06-18T21_42_35_657Z-debug.log
avery@pengui:~/node/gatsby-hello-friend-upgraded$ gatsby develop

ERROR

The above error occurred in the component:
in StoreStateProvider
in App

React will try to recreate this component tree from scratch using the error boundary you provided, App.

ERROR

Warning: App: Error boundaries should implement getDerivedStateFromError(). In that method, return a state update to display an error message or fallback UI.

ERROR

UNHANDLED REJECTION Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
   See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.

Error: Invalid hook call. Hooks can only be called inside of the body of a function c omponent. This could happen for one of the following reasons:

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
   See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this pr oblem.

• react.development.js:1590 resolveDispatcher
  [gatsby-hello-friend-upgraded]/[gatsby]/[react]/cjs/react.development.js:1590:13

• react.development.js:1618 useState
  [gatsby-hello-friend-upgraded]/[gatsby]/[react]/cjs/react.development.js:1618:20

• context.js:17 StoreStateProvider
  [gatsby-hello-friend-upgraded]/[gatsby]/[gatsby-cli]/lib/reporter/loggers/ink/conte xt.js:17:41

• react-reconciler.development.js:6036 renderWithHooks
  [gatsby-hello-friend-upgraded]/[react-reconciler]/cjs/react-reconciler.development. js:6036:18

• react-reconciler.development.js:8570 mountIndeterminateComponent
  [gatsby-hello-friend-upgraded]/[react-reconciler]/cjs/react-reconciler.development. js:8570:13

• react-reconciler.development.js:9938 beginWork$1
  [gatsby-hello-friend-upgraded]/[react-reconciler]/cjs/react-reconciler.development. js:9938:16

• react-reconciler.development.js:11563 Object.invokeGuardedCallbackImpl
  [gatsby-hello-friend-upgraded]/[react-reconciler]/cjs/react-reconciler.development. js:11563:10

• react-reconciler.development.js:11740 invokeGuardedCallback
  [gatsby-hello-friend-upgraded]/[react-reconciler]/cjs/react-reconciler.development. js:11740:31

• react-reconciler.development.js:15778 beginWork$$1
  [gatsby-hello-friend-upgraded]/[react-reconciler]/cjs/react-reconciler.development. js:15778:7

• react-reconciler.development.js:14696 performUnitOfWork
  [gatsby-hello-friend-upgraded]/[react-reconciler]/cjs/react-reconciler.development. js:14696:12

`

package.json:

{ "name": "gatsby-starter-hello-friend", "description": "A simple starter for Gatsby. That's it.", "version": "0.2.0", "author": "Radek Kozieł <[email protected]>", "keywords": [ "gatsby", "minimal", "starter", "blog", "theme", "dark", "light", "personal site" ], "license": "MIT", "scripts": { "build": "gatsby build", "dev": "gatsby clean && gatsby develop", "format": "prettier --write \"src/**/*.js\"", "test": "echo \"Write tests! -> https://gatsby.app/unit-testing\"" }, "dependencies": { "@babel/core": "^7.8.3", "@browniebroke/gatsby-image-gallery": "^2.0.1", "@mdx-js/mdx": "^1.5.5", "@mdx-js/react": "^1.5.5", "@types/react": "^16.9.19", "core-js": "^3.6.4", "gatsby": "^2.19.5", "gatsby-awesome-pagination": "^0.3.5", "gatsby-image": "^2.2.39", "gatsby-plugin-manifest": "^2.2.38", "gatsby-plugin-mdx": "^1.0.67", "gatsby-plugin-offline": "^3.0.32", "gatsby-plugin-postcss": "^2.1.19", "gatsby-plugin-react-helmet": "^3.1.21", "gatsby-plugin-sharp": "^2.4.0", "gatsby-plugin-sitemap": "^2.2.26", "gatsby-remark-images": "^3.1.42", "gatsby-remark-prismjs": "^3.3.30", "gatsby-source-filesystem": "^2.1.46", "gatsby-transformer-remark": "^2.6.48", "gatsby-transformer-sharp": "^2.3.13", "prismjs": "^1.19.0", "prop-types": "^15.7.2", "react": "^16.12.0", "react-dom": "^16.12.0", "react-helmet": "^5.2.1", "react-image-lightbox": "^5.1.1", "tailwindcss": "^1.1.4", "typescript": "^3.7.5" }, "devDependencies": { "@babel/plugin-proposal-nullish-coalescing-operator": "^7.8.3", "@babel/plugin-proposal-optional-chaining": "^7.8.3", "babel-eslint": "^10.0.3", "babel-preset-gatsby": "^0.2.27", "cssnano": "^4.1.10", "eslint": "^6.8.0", "eslint-config-airbnb": "^18.0.1", "eslint-config-prettier": "^6.9.0", "eslint-plugin-import": "^2.20.0", "eslint-plugin-jsx-a11y": "^6.2.3", "eslint-plugin-react": "^7.18.0", "eslint-plugin-react-hooks": "^2.3.0", "gatsby-remark-embed-video": "^2.0.1", "postcss-import": "^12.0.1", "postcss-loader": "^3.0.0", "postcss-mixins": "^6.2.3", "postcss-nested": "^4.2.1", "postcss-preset-env": "^6.7.0", "postcss-url": "^8.0.0", "prettier": "^1.19.1", "rambdax": "^3.5.0" }, "repository": { "type": "git", "url": "https://github.com/panr/gatsby-starter-hello-friend" }, "bugs": { "url": "https://github.com/panr/gatsby-starter-hello-friend/issues" } }

node version 12.18.1

Thanks :)

I observe that there will be this error when in /src/posts/ folder you have more posts than config.postsPerPage value. What I have tried to reproduce this:

Run below to load your starter unmodified,

gatsby new test-hello-friend https://github.com/panr/gatsby-starter-hello-friend.git

Then copying the file /src/posts/hello.md to hello-2.md, hello-3.md etc (also change its path value to make sure each has different path), then run yarn build for each copy.

When the total number of posts in /src/posts exceeds 5 (default postPerpage), yarn build will fail with the error below:

error
The GraphQL query from /Users/<masked>/<masked>/<masked>/test-hello-friend/src/templates/tags.js failed.

Errors:
  Cannot read property 'node' of undefined

  GraphQL request (6:3)
  5: ) {
  6:   allMarkdownRemark(filter: {frontmatter: {tags: {in: [$tag]}}}, sort: {fields: [frontmatter___date], order: DESC}, limit: $limit, skip: $skip) {
       ^
  7:     edges {

URL path:
  /tag/hello-friend/2
Context:
  {
    "tag": "hello friend",
    "pageNumber": 1,
    "humanPageNumber": 2,
    "skip": 5,
    "limit": 5,
    "numberOfPages": 2,
    "previousPagePath": "/tag/hello-friend",
    "nextPagePath": ""
  }
Plugin:
  none
Query:
  query <masked>(
    $limit: Int!
    $skip: Int!
    $tag: String!
  ) {
    allMarkdownRemark(filter: {frontmatter: {tags: {in: [$tag]}}}, sort: {fields: [frontmatter___date], order: DESC}, limit: $limit, skip: $skip) {
      edges {
        node {
          id
          excerpt
          frontmatter {
            title
            date(formatString: "DD MMMM YYYY")
            path
            author
            excerpt
            tags
            coverImage {
              childImageSharp {
                fluid(maxWidth: 800) {
                  ...GatsbyImageSharpFluid
                }
              }
            }
          }
        }
      }
    }
  }

  fragment GatsbyImageSharpFluid on ImageSharpFluid {
    base64
    aspectRatio
    src
    srcSet
    sizes
  }

error Command failed with exit code 1.

If I change the postPerPage to be equal to or greater than total number of posts, it is Ok. Please take a look when you have time. Thanks.

Hi there, I know it sounds silly, but can you port this to vuepress and/or hexo? I'm not super good at front end but I really like your theme. Though I'm not fan of hugo, and I just can code vuejs at the moment ... >.<

Recently, the dependency, rambdax of this starter was updated to version 4 (from 3 that was used in this starter). This included a breaking change and after clearing it out with the creator of the dependency, I found out that, in gatsby-node.js, flatMap has to be replaced with chain. It has 2 occurrences in the file and that fixes it.

I have opened this issue just to let others know if anyone updates their dependencies manually and finds themselves in trouble.

You can check out my discussion here: selfrefactor/rambdax#55

The website speed checked on Google PageSpeed Insights is very low.

Any plans on improving them?

Also, there are many missing SEO practices leading to poor SEO score too.

From what I can see in the configuration data in gatsby-config.js there doesn't seem to be a way to adjust the project's entry-point. I might want to design a different page as the "homepage" for the project instead of just showing the user a list of my blog posts. Is there a way to configure this? Could this functionality be added (I'm still learning Gatsby, but could work on this as a PR with some guidance)

What's the bug

In mobile screens, If you have posts with titles 2-3 words long, the left-right navigation buttons at the end of post pages hide the overflowing text. As a result, the text on each button is visible for barely 4-5 characters conveying absolutely no useful information. So even though there are buttons for navigation, the text on them doesn't properly tell title.

Screenshot

Why is it happening

I checked out the html, the title text on buttons is loading completely, but css is hiding the overflow. If i set to be visible, the two buttons collides when both left-right posts have long titles.

Possible solution

The simplest solution is to stack the buttons in top-down method, whenever they are being used on the mobile screens.

I'm not well versed with css to stack them as desired. So if you'd be kind enough to help me out here and resolve this.