panr / gatsby-starter-hello-friend Goto Github PK
View Code? Open in Web Editor NEWPretty basic starter for Gatsby that covers all of the essentials. All you have to do is start typing!
License: MIT License
Pretty basic starter for Gatsby that covers all of the essentials. All you have to do is start typing!
License: MIT License
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>
)
}
})
}
Great work porting this theme to gatsby, I've encountered a few issues so maybe you could help me.
gatsby-config.js
, but dark is still the default;<a>
tag in gatsby-config.js
for the footer, you have to manually edit the layout.js
file;gatsby-config.js
, the title won't appear anymore;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);<!-- more-->
, is there a reason to do so in the front matter?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 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.
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.
Are there installation instructions somewhere? I don't see them.
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.
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
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
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] 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:
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:
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 wanted to provide you the link in case you feel like chiming in
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 ... >.<
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.
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.
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.
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'
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)
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.