akzhy / gatsby-starter-elemental Goto Github PK

I've searched everywhere for a solution but I can't seem to track down what is happening.

When using gatsby develop and viewing in the browser, I get this error:

TypeError: Cannot read property 'fluid' of undefined

All I've done was remove a couple things from gatsby-config.js and add my own images to the static folder.

If you can take a look at my repo I'd appreciate it. It's a great starter, just need to track this down.

Build Blog

Hello.

This isn't really an issue, but, more of a personal preference. I was wondering, if I could store all the images (and videos) used in the blog and/or portfolio in their respective directories in the static folder for better organization of all media files in just one folder. I tried doing it and it works correctly for media inside the Markdown content, however, the images in Frontmatter work only when they're in the same folder as the index.md.

I tried using the following paths in Frontmatter after storing the files in correct folder inside static:

image: /images/cover.png - hoping it would load the image from root of the domain. This didn't work.

image: ../../../static/images/cover.png - a complete relative path of the image according to the location of index.md. This didn't work either.

In both the cases, I get TypeError: Cannot read property 'childImageSharp' of null in browser.

Further, it points to the file src/components/items-portfolio.js:13

<div className="item col s12">
  11 | 	<div className="row flex">
  12 | 		<div className="col m6 image">
> 13 | 			<Img fluid=
  14 | 				{
  15 | 					this.props.data.node.frontmatter.image.childImageSharp.fluid
  16 | 				}/>

Currently, my website and everything is working fine, so, this can be safely ignored if it's not considered worth thinking upon. It currently just bugs me a little that it's not all in one folder. 😉

First off, thanks for this great theme! I think I will contribute in due time.
My only problem is that the light mode flickers when I first load the page in production, but dark mode is enabled by default. Any ways around this or am I just doing something wrong?

Hello!

I just noticed that v2.0.0 was released and it looks even better. More importantly, it already has fixed the issue described here. However, I've now customised v1.1.1 a lot and I am happy with the result. So, merging with v2.0.0 will be a big task for me.

The problem is, I just noticed that the Submit button of contact form on the contact page isn't working in the mobile version. I've narrowed the problem down to the point that it stops working at the 800px breakpoint, that is, when the sidebar navigation appears instead of the default desktop navigation.

Can this be considered for fixing? It'd be a great help.

I'm using Firefox on Ubuntu 18.04 and the dark mode switch is being displayed as follows on the footer:

Also, out of curiosity - how does this not happen on Chrome? I couldn't find any code that turns off the switch on the footer.

Thanks :D

is there a way to hook up the contact form to netlify? When I try to set the following things on the form the form still tries to make a post request to /contact which fails with a 404

    <form
        method="post"
        data-netlify="true"
        name="contact-form"
    >

Hi, I'd like to use this as a basis for a personal project but dont know which version of node to use to get everything running stably. Once I have this and have the project building, I also intend to update everything to the most recent versions and will create a PR so that others can keep using this lovely theme.

Hi I was wondering if anyone perhaps knows how to fix the loading issue happening here:https://elemental.netlify.com/
If you point me in the right direction I would be more than happy to fix it but I have no idea why its happening

Everything is fine when developing i.e., gatsby develop

But, the same after building for production results in elements with bad paths i.e., gatsby build

Except the homepage, all the paths do not contain their path prefixes

Also tried using gatsby build --prefix-paths while building, did not work.

Problems

currently there is no way to add comments in a blog post, it would be nice to add that kind of feature. Since it maybe would attract more people to user's site, and also interactivity of the sites.

Solution

Maybe we can add this plugin so that there will be support for comments

Let me know what you think 😄

Hello. I'd like to change the fonts used in this starter. I tried a lot now, but, all I could do was remove the default font, but, couldn't replace it with my custom font.

I removed <link href="https://fonts.googleapis.com/css?family=Work+Sans:800|Poppins&display=swap" rel="stylesheet"/> from src/components/head.js and added <link rel="stylesheet" type="text/css" href="css/fonts.css"/> instead of it. Then, I created a folder named css in my static folder and created the fonts.css file in that folder. I added this code to the file:

@font-face
	{
		font-family: 'Custom Font';
		font-style: normal;
		font-weight: normal;
		font-display: swap;
		src: url('../fonts/CustomFont.ttf') format('truetype');
	}

and added the CustomFont.ttf file in the fonts folder inside my static folder.

Then, in the src/style/theme.less, I changed the value @fontNormal: variable to match the name of the custom font. I tried various other ways in the past 3 hours, nothing worked. This was my first attempt and was the most expected to work, but, this does nothing. The browser is loading the fonts.css file and the contents are even shwoing the correct URL for the font file, however, the font isn't working. The system default font is being shown.

This is my current project file structure:

├── Project
│   ├── contents
│   │   ├── basepages
│   │   ├── blog
│   │   ├── portfolio
│   ├── node_modules
│   ├── src
│   │   ├── components
│   │   │   ├── page-components
│   │   │   │   ├── grid.js
│   │   │   ├── blogposts-latest.js
│   │   │   ├── contact.js
│   │   │   ├── date.js
│   │   │   ├── footer-links.js
│   │   │   ├── footer.js
│   │   │   ├── head.js
│   │   │   ├── icons.js
│   │   │   ├── items-blog.js
│   │   │   ├── items-portfolio.js
│   │   │   ├── layout.js
│   │   │   ├── link.js
│   │   │   ├── list-blog.js
│   │   │   ├── list.portfolio.js
│   │   │   ├── logo.js
│   │   │   ├── navbar.js
│   │   │   ├── navlinks.js
│   │   │   ├── pagination.js
│   │   │   ├── sectiontitle.js
│   │   │   ├── seo.js
│   │   │   ├── sociallinks.js
│   │   ├── pages
│   │   │   ├── 404.js
│   │   │   ├── contact.js
│   │   │   ├── index.js
│   │   ├── style
│   │   │   ├── basepage.less
│   │   │   ├── blog-singlepage.less
│   │   │   ├── contact.less
│   │   │   ├── footer.less
│   │   │   ├── list-blog.less
│   │   │   ├── list-portfolio.less
│   │   │   ├── navbar.less
│   │   │   ├── pagination.less
│   │   │   ├── portfolio-singlepage.less
│   │   │   ├── theme.less
│   │   │   ├── wall.less
│   │   ├── templates
│   │   │   ├── basepage.js
│   │   │   ├── blog-list.js
│   │   │   ├── blog.js
│   │   │   ├── portfolio-list.js
│   │   │   ├── portfolio.js
│   │   │   ├── single-page.js
│   │   ├── sw.js
│   ├── static
│   │   ├── css
│   │   │   ├── fonts.css
│   │   ├── fonts
│   │   │   ├── CustomFont.ttf
│   │   ├── images
│   │   │   ├── icon.png
│   │   │   ├── logo.png
│   │   ├── netlify.toml
│   ├── gatsby-config.js
│   ├── gatsby-node.js
│   ├── package-lock.json
│   ├── package.json

Hello @akzhy

This repo is great starter, far best I ever seen.
Also it uses tailwind which is super cool!
The code looks neat and clean!

I was thinking what is the best way to thank you for this awesome theme.
Would you be interested to add typescript support to it ?
This is the area I feel comfortable with.

Would you be interested in this kind of contribution ?

Commands Run

1. gatsby new folder-name https://github.com/akzhy/gatsby-starter-elemental
2. cd folder-name
3. gatsby develop

Environment

Node version: 14.17.0
Gatsby versions:

Gatsby CLI version: 4.21.0
Gatsby version: 2.32.13 (version used in folder name)

Error

Error in "/node_modules/gatsby-plugin-codegen/gatsby-node.js": Cannot find module
'graphql/validation/rules/KnownArgumentNamesRule'
Require stack:
- /node_modules/@apollo/federation/dist/composition/validate/preNormalization/tagDirective.js
- /node_modules/@apollo/federation/dist/composition/validate/preNormalization/index.js
- /node_modules/@apollo/federation/dist/composition/validate/index.js
- /node_modules/@apollo/federation/dist/composition/composeAndValidate.js
- /node_modules/@apollo/federation/dist/composition/index.js
- /node_modules/@apollo/federation/dist/index.js
- /node_modules/apollo-language-server/lib/providers/schema/file.js
- /node_modules/apollo-language-server/lib/providers/schema/index.js
- /node_modules/apollo-language-server/lib/project/base.js
- /node_modules/apollo-language-server/lib/index.js
- /node_modules/apollo/lib/Command.js
- /node_modules/apollo/lib/index.js
- /node_modules/gatsby-plugin-codegen/gatsby-node.js
- /node_modules/gatsby/dist/bootstrap/resolve-module-exports.js
- /node_modules/gatsby/dist/bootstrap/load-plugins/validate.js
- /node_modules/gatsby/dist/bootstrap/load-plugins/load.js
- /node_modules/gatsby/dist/bootstrap/load-plugins/index.js
- /node_modules/gatsby/dist/services/initialize.js
- /node_modules/gatsby/dist/services/index.js
- /node_modules/gatsby/dist/state-machines/develop/services.js
- /node_modules/gatsby/dist/state-machines/develop/index.js
- /node_modules/gatsby/dist/commands/develop-process.js
- /.cache/tmp-94599-kzjc7K6RFZCZ

I'm happy to open a PR for this 😄

What files would I have to change the URL for each of the NavLinks?

Browser: Chrome

TypeError on resizing window:

TypeError: this.setState is not a function. (In 'this.setState({
winHeight: window.innerHeight
})', 'this.setState' is undefined)

Was looking at preview site. Had to go to Google to find this repo again... Maybe add a link back here in the about section? Otherwise, nice design! Cheers!

Is it possible to add the fluid plugin image on the title image? Right now, it just puts the source image as is, but it seems like having it as an image that degrades would be useful.

I was trying out this starter and updated all my packages in package.json. Thus, I ended up updating react-helment to 6.0.0. Doing this breaks the build. However, I searched on Google and found this: gatsbyjs/gatsby#10578 (comment). The solution is to change Line 2 in src/components/head.js and Line 3 in src/components/seo.js from import Helmet from "react-helmet"; to import { Helmet } from "react-helmet";

It appears not possible to install this starter in its current form. This has been attempted on multiple devices, with multiple people. When 'gatsby develop' is run, this error is shown:

Steps to Reproduce:

Given Node.js and Git are installed...

npm install -g gatsby-cli
gatsby new project-name https://github.com/akzhy/gatsby-starter-elemental
cd project-name
gatsby develop

Gatsby’s component enables linking to internal pages as well as a powerful performance feature called preloading. https://www.gatsbyjs.org/docs/gatsby-link/