eugelogic / hlcchl-gatsby Goto Github PK

https://github.com/neptunian/react-photo-gallery

See how Kyle added tags to his blog here https://github.com/KyleAMathews/blog/blob/9e7ae0daedc1180af92543d8900517ad8ef661f4/gatsby-node.js

I wanted to do the following
className="name-of-the-class__{bg}"
but it didn't work so I'm wondering if there is a way around.

Remove all style.css imports except from the ones in the layout files. No child components should need an import, and unlikely any pages need imports for the style.css file

Find out why it does not display but it does on any other pages

I could not get an image to render as background, then I bumped into the following
gatsbyjs/gatsby#5479
but despite re-installing the node modules I had no luck until I changed path from ./path to ../../path

https://kyleamathews.github.io/react-headroom/

I'd like to be able to create a news post in the project without being visible on the front end

Use https://developers.google.com/web/tools/lighthouse/#devtools rather than GTMEtrix as the former is more suitable for js websites

Kyle placed all his posts in dedicated folders, see https://github.com/KyleAMathews/blog/tree/master/src/pages
I'm wondering why.
I guess they are easily arranged by dates + they might contain media like images strictly related to their posts.

• menu.js page
• page-2.js page
• ...

Run it against https://wave.webaim.org/

If I remove the import of the style file from both layout.js and pagelayout.js, nothing seem to change on the front end.
Read this up https://spectrum.chat/gatsby-js/general/disable-cache-in-dev~cc3f6e83-3d9f-4a37-8de8-1de63b7b9de1
more reading here https://www.google.com/search?q=gatsby+clear+cache&oq=gatsby+clear&aqs=chrome.0.0j69i57j0l4.2728j0j1&sourceid=chrome&ie=UTF-8

If I simply rename the style.css to style.scss I get the following:

Failed to compile with 1 errors
Module build failed (from ./node_modules/postcss-loader/lib/index.js):
Error: ENOENT: no such file or directory
...

That is for:

• footer
• header
• ...

warning Anchors must have content and the content must be accessible by a screen reader jsx-a11y/anchor-has-content
https://www.google.com/search?q=Anchors+must+have+content+and+the+content+must+be+accessible+by+a+screen+reader&oq=Anchors+must+have+content+and+the+content+must+be+accessible+by+a+screen+reader&aqs=chrome..69i57.505j0j1&sourceid=chrome&ie=UTF-8

Sometime a News post would not load the cs style as per other pages.
Do I need to add import './layout.css' to the /news-post.js file

CG put together a quick solution at the following
https://github.com/crgeary/hlcchl-gatsby/tree/master/static
with some inf from https://www.netlify.com/docs/headers-and-basic-auth/#custom-headers
but after trying to replicate it, when I click on the link (<Button link="/Holly-Lodge-Community-Centre-donation-form.docx" color="white">Download Form</Button>) it leads to the "ugly" 404 page 👎

Before all the above, I put together something gathered from the following documentation
https://www.gatsbyjs.org/docs/adding-images-fonts-files/#using-the-static-folder
but I had the same result as above, ie "ugly" 404 page

Why are the layouts files living under the Components folder and not in the Templates one?

Most of the internal links currently feature just a # particularly among the News posts.
They should be replaced accordingly.

See for instance the maxWidth of the images on the About Us page.
Their actual max width is greater than the one I set in the query, is it because the <img> style is width: 100%?
And if that's the case, how can I make the actual max width win over?
Or am I just over thinking it?

https://www.gatsbyjs.org/tutorial/part-eight/

https://www.google.com/search?q=react+js+lightbox&oq=react+js+light&aqs=chrome.0.0j69i57j0l2.7392j0j1&sourceid=chrome&ie=UTF-8

Add https://www.gatsbyjs.org/packages/gatsby-image/ but have a look how it could be implemented on https://spectrum.chat/gatsby-js/general/using-variables-in-a-staticquery~abee4d1d-6bc4-4202-afb2-38326d91bd05

Ideally I would use SCSS but the main stylesheet uses only CSS.
Alternatively, I could create a dedicate style file for the single events pages but how and where?

in the button.js use the following

const Button = ({ children, link, color }) => (
    <Link to={link} className={color}>
      {children}
    </Link>
)

and this is how it should be used
<Button link="/hall-hire/" color="green">Hall Hire</Button>

I mean the event cards featured on https://hlcchl-gatsby.netlify.com/whats-on/