Is it possible to add dropdown menu button @scttcper ?

Hi there, I'm getting the error

{
"resource": "/c:/Users/owenm/Desktop/blog_casper/src/components/ReadNextCard.tsx",
"owner": "typescript",
"code": "2345",
"severity": 8,
"message": "Argument of type '(props: ReadNextCardStylesProps) => string' is not assignable to parameter of type 'Interpolation<Pick<DetailedHTMLProps<HTMLAttributes, HTMLElement>, "color" | "hidden" | "style" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | ... 247 more ... | "css"> & { ...; }>'.\n Type '(props: ReadNextCardStylesProps) => string' is not assignable to type 'FunctionInterpolation<Pick<DetailedHTMLProps<HTMLAttributes, HTMLElement>, "color" | "hidden" | "style" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | ... 247 more ... | "css"> & { ...; }>'.\n Types of parameters 'props' and 'mergedProps' are incompatible.\n Property 'coverImage' is missing in type 'Pick<DetailedHTMLProps<HTMLAttributes, HTMLElement>, "color" | "hidden" | "style" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | ... 247 more ... | "css"> & { ...; }' but required in type 'ReadNextCardStylesProps'.",
"source": "ts",
"startLineNumber": 27,
"startColumn": 27,
"endLineNumber": 27,
"endColumn": 79,
"relatedInformation": [
{
"startLineNumber": 11,
"startColumn": 3,
"endLineNumber": 11,
"endColumn": 13,
"message": "'coverImage' is declared here.",
"resource": "/c:/Users/owenm/Desktop/blog_casper/src/components/ReadNextCard.tsx"
},
{
"startLineNumber": 27,
"startColumn": 27,
"endLineNumber": 27,
"endColumn": 79,
"message": "Did you mean to call this expression?",
"resource": "/c:/Users/owenm/Desktop/blog_casper/src/components/ReadNextCard.tsx"
}
]
}

When editing in Gatsby Develop mode, when I change the NavLogo reference in SiteNavLogo.tsx to
another image, the NavLogo doesn't update.

I have also edited the website-config.ts file to point to the same image, but this doesn't work either.

Hi @scttcper

thank you for your work on this.

How to use unsplash image for post featuredImage?

is it only support local image?

It's possible to list all tags on the post? if there is more than one tag the post only show the first.

{post.frontmatter.tags && post.frontmatter.tags.length > 0 && (
                    <Link to={`/tags/${_.kebabCase(post.frontmatter.tags[0])}/`}>
                      {post.frontmatter.tags[0]}
                    </Link>
                  )}

For Predefined Tags Like Speeches with images , No of posts is not displayed

Can we limit post counts on home page ? Currently if I have a total 30 posts, all are showing. I need to show 10 posts with a page number buttons below.

Not sure if this has been asked already but is there an easy way to add disqus comments? (or a guide on how to do so). Thanks

How can we categorize different posts or a search by category feature ?
Should we use tags for categorizing ? How can i list it on homepage ?

Issue installing sharp dependencies - tried suggested mitigation on gatsby site (delete node_modules and re-install)
https://www.gatsbyjs.org/docs/troubleshooting-common-errors/#problems-installing-sharp-with-gatsby-plugin-sharp---gyp-err-build-error

sharp build-from-source fails because of libvips library compatibility with latest node version

upgrading versions of sharp and sharp-transform have fixed this issue for me

ERRORS below

[email protected] /home/scott/.nvm/versions/node/v13.11.0/lib/node_modules/npm

> [email protected] install /home/scott/Documents/coding/open-source/gatsby-casper/node_modules/sharp
> (node install/libvips && node install/dll-copy && prebuild-install) || (node-gyp rebuild && node install/dll-copy)

info sharp Using cached /home/scott/.npm/_libvips/libvips-8.7.4-linux-x64.tar.gz
prebuild-install WARN install No prebuilt binaries found (target=13.11.0 runtime=node arch=x64 libc= platform=linux)
make: Entering directory '/home/scott/Documents/coding/open-source/gatsby-casper/node_modules/sharp/build'
  TOUCH Release/obj.target/libvips-cpp.stamp
  CXX(target) Release/obj.target/sharp/src/common.o
  CXX(target) Release/obj.target/sharp/src/metadata.o
  CXX(target) Release/obj.target/sharp/src/stats.o
../src/stats.cc: In member function ‘virtual void StatsWorker::HandleOKCallback()’:
../src/stats.cc:130:37: error: no matching function for call to ‘v8::Array::Set(int&, v8::Local<v8::Object>&)’
         channels->Set(i, channelStat);
                                     ^
In file included from /home/scott/.cache/node-gyp/13.11.0/include/node/node.h:67:0,
                 from ../src/stats.cc:19:
/home/scott/.cache/node-gyp/13.11.0/include/node/v8.h:3547:37: note: candidate: v8::Maybe<bool> v8::Object::Set(v8::Local<v8::Context>, v8::Local<v8::Value>, v8::Local<v8::Value>)
   V8_WARN_UNUSED_RESULT Maybe<bool> Set(Local<Context> context,
                                     ^~~
/home/scott/.cache/node-gyp/13.11.0/include/node/v8.h:3547:37: note:   candidate expects 3 arguments, 2 provided
/home/scott/.cache/node-gyp/13.11.0/include/node/v8.h:3550:37: note: candidate: v8::Maybe<bool> v8::Object::Set(v8::Local<v8::Context>, uint32_t, v8::Local<v8::Value>)
   V8_WARN_UNUSED_RESULT Maybe<bool> Set(Local<Context> context, uint32_t index,
                                     ^~~
/home/scott/.cache/node-gyp/13.11.0/include/node/v8.h:3550:37: note:   candidate expects 3 arguments, 2 provided
At global scope:
cc1plus: warning: unrecognized command line option ‘-Wno-cast-function-type’
sharp.target.mk:138: recipe for target 'Release/obj.target/sharp/src/stats.o' failed
make: *** [Release/obj.target/sharp/src/stats.o] Error 1
make: Leaving directory '/home/scott/Documents/coding/open-source/gatsby-casper/node_modules/sharp/build'
gyp ERR! build error 
gyp ERR! stack Error: `make` failed with exit code: 2
gyp ERR! stack     at ChildProcess.onExit (/home/scott/.nvm/versions/node/v13.11.0/lib/node_modules/npm/node_modules/node-gyp/lib/build.js:194:23)
gyp ERR! stack     at ChildProcess.emit (events.js:315:20)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:275:12)
gyp ERR! System Linux 5.3.0-42-generic
gyp ERR! command "/home/scott/.nvm/versions/node/v13.11.0/bin/node" "/home/scott/.nvm/versions/node/v13.11.0/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /home/scott/Documents/coding/open-source/gatsby-casper/node_modules/sharp
gyp ERR! node -v v13.11.0
gyp ERR! node-gyp -v v5.0.7
gyp ERR! not ok 
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] install: `(node install/libvips && node install/dll-copy && prebuild-install) || (node-gyp rebuild && node install/dll-copy)`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] install 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/scott/.npm/_logs/2020-03-21T15_46_25_225Z-debug.log

When we click on the RSS link in the footer, we get the 404 page. If we reload, we can see the RSS flux

A dark theme with a switcher would be really nice. It's not an important feature, but would be nice to have.

The template is very well done, great job!

Gatsby Themes are still pre-release, but I think this would work really nice as a theme rather than a starter. I think in an ideal world, most of the project here would be encapsulated in a theme. Then you could have a separate starter that uses the theme with the example content folder.

I downloaded the theme, ran npm install and gatsby build and then deployed to Netlify. Got the below error. Did not change anything in the code yet. I made another copy and customized it with my own posts, got Mailchimp connected etc, however, I still got this same error:

This error happens immediately when you land on the URL of the site, but if you click around, the resources load. However, if you go back

I've been trying to fix this by reading everything I can for a few days about Gatsby/Netlify errors or wht might be the fix, but no luck so far. Sadly this issue only happens on this particular theme, while other themes seem to build and deploy just fine. Any help would be greatly appreciated!

Profile picture for author & Background image for tags is not getting displayed @scttcper

7:28:21 AM: error There was an error in your GraphQL query:
7:28:21 AM: Cannot query field "excerpt" on type "MarkdownRemarkFrontmatter".
7:28:21 AM: If you don't expect "excerpt" to exist on the type "MarkdownRemarkFrontmatter" it is most likely a typo.
However, if you expect "excerpt" to exist there are a couple of solutions to common problems:
7:28:21 AM: - If you added a new data source and/or changed something inside gatsby-node.js/gatsby-config.js, please try a restart of your development server
7:28:21 AM: - The field might be accessible in another subfield, please try your query in GraphiQL and use the GraphiQL explorer to see which fields you can query and what shape they have
7:28:21 AM: - You want to optionally use your field "excerpt" and right now it is not used anywhere. Therefore Gatsby can't infer the type and add it to the GraphQL schema. A quick fix is to add at least one entry with that field ("dummy content")
7:28:21 AM: It is recommended to explicitly type your GraphQL schema if you want to use optional fields. This way you don't have to add the mentioned "dummy content". Visit our docs to learn how you can define the schema for "MarkdownRemarkFrontmatter":
https://www.gatsbyjs.org/docs/schema-customization/#creating-type-definitions
7:28:21 AM: not finished createPages - 0.085s
7:28:21 AM: ​
7:28:21 AM: ────────────────────────────────────────────────────────────────
7:28:21 AM: "build.command" failed
7:28:21 AM: ────────────────────────────────────────────────────────────────
7:28:21 AM: ​
7:28:21 AM: Error message
7:28:21 AM: Command failed with exit code 1: gatsby build
7:28:21 AM: ​
7:28:21 AM: Error location
7:28:21 AM: In Build command from Netlify app:
7:28:21 AM: gatsby build
7:28:21 AM: ​
7:28:21 AM: Resolved config
7:28:21 AM: build:
7:28:21 AM: command: gatsby build
7:28:21 AM: commandOrigin: ui
7:28:21 AM: publish: /opt/build/repo/public

The subscribe modal only opens the top of the modal on iOS Safari (and therefor Chrome). I haven't tested other browsers or Android.

The above screenshot is from my iPhone XS on iOS Chrome. I turned it landscape so that the subscribe button would show up. That's the open modal--only part of it shows up.

When defining an excerpt for a given post:

---
layout: post
title: My title
excerpt: My excerpt
---
My post content

the twitter card description (and other social cards as well) is made from post content. I'm expecting the excerpt to be used.

To fix this I think it should be :

<meta name="twitter:description" content={post.frontmatter.excerpt || post.excerpt} />

instead of:

<meta name="twitter:description" content={post.excerpt} />

in src/templates/post.tsx

What do you think ?

Hi @scttcper

Firstoff, thank you for your work on this. I've been building my blog using this and am just about ready to go live.

Before I do so though, I was really hoping to use some sort of "Share on Social" plugin/function.

Do you have any plans to add something or have any suggestions for what to add?

As stated above:
Is it possible to make it so I can make the logo an SVG instead of a raster image? I think this would be great since SVGs are lightweight and scale well. I don't know if Gatsby has SVG optimizations like they do for raster images, but it would be awesome if they do and that could be incorporated here.

I can't for the life of me get the compiled site to display a favicon.

The theme does not have any form of pagination of its index page. Without pagination, the theme is not entirely user friendly.

Can we implement a search option so that a user can search through the content.

I can see that all the dependencies for gatsby-remark-prismjs are already installed in the default built however I cant see where you have configured it or pulled in the styles?

I moved from the ghost official gatsby stater repo (all worked fine with netlify and my custom domain etc.)

With is one, I can't seem to get it to display my content. I updated the siteMetadata section with my url. Netlify is setup correctly - webhook rebuilds are successful without errors.

With the ghost gatsby starter, I had to add my content api in the package.json file, but I can't see/find an equivalent in this repo? is this my issue? Or what/where do I need to edit to pull content from my db instead of using the repo default content?

Folder src/components/subsribe should be renamed along with all references to src/components/subscribe

The website does not have a loader and when the user tries to navigate to other links it takes milliseconds or seconds to load them and the user is given no indication if the page is actually being loaded or not. Is there anyway to solve this?

Hi there,

First of all, I want to say that this starter is one of the best starters of gatsby out there, with that being said there are some issues I encounter from the first use:

1- The scrolling is not smooth and feels like the theme is going to crash or freeze which gives a totally uncomfortable user experience, I found out the issue is originated from Casper https://github.com/TryGhost/Casper

2- The animations of the posts containers, every time I experienced a delay when I move over with the mouse.

3- Performance Audit I have been doing a lot of audits on this starter and the main issue I found is the images, for some reason all the tools I have used state that the theme needs to serve scaled images.

Hope I will get some useful insights here
@scttcper

in PostContent.tsx

export const PostFullContent = styled.section`
	max-width: 1040px;
	...

   ...
	 .gatsby-resp-image-wrapper {
    	// For Full size images
    	max-width: none !important;
  	}

	img[alt$='full'] {
    max-width: none;
    position: absolute !important;
    width: 100vw !important;
    margin-left: calc((-100vw + 1040px) / 2) !important;
  	}
	...
`

and remove inner outer style from post.tsx wrapper div.

Need some sort of CMS to add new posts through UI.

v3 brought a new set of styles, the pagination should match these styles

Subscription form covered

This is a styling issue.

When clicking on the subscribe button on the top of the page

the subscription form is covered by content.

This can be fixed by removing src/styles/shared.ts z-index.

export const SiteMain = css`
- z-index: 100;
  flex-grow: 1;

  @media (prefers-color-scheme: dark) {
    background: ${colors.darkmode};
  }
`;

What do you think?

When you run on gatsby develop mode the site does not flicker. However, if you run the output of gatsby build you will see it flicker while the styles are being applied.

It could be related to this issue gatsbyjs/gatsby#5667 . Although we are already using the gatsby-plugin-emotion , it doesn't seem to do anything for SSR of emotion

Need to upgrade to the latest version of Casper (v3.0.2). Thank you.

https://github.com/TryGhost/Casper/releases

• post should not list itself in related posts
• should only show related posts component if there are more than 2

I am trying to add an author and it isn't working. When I am in dev, the site errors out. When I try a build, I get an error that it can't find the id.

I've even tried just modifying the existing Author name from Ghost to Chris and then modifying an existing .md file Author from Ghost to Chris. This too fails.

Need to support multiple language

I'm having an issue with this starter. Just after starting the project with
gatsby new gatsby-casper https://github.com/scttcper/gatsby-casper
and running npm run dev when I go and edit any markdown files in the content directory, the dev process will spit out the following error:

ERROR 

[ { TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type undefined
      at validateString (internal/validators.js:125:11)
      at Object.resolve (path.js:1080:7)
      at findLinkedFileNode (/home/tuomas/Code/gatsby-casper/node_modules/gatsby/dist/schema/resolvers.js:207:47)
      at resolveValue (/home/tuomas/Code/gatsby-casper/node_modules/gatsby/dist/schema/resolvers.js:222:108)
      at /home/tuomas/Code/gatsby-casper/node_modules/gatsby/dist/schema/resolvers.js:219:10
      at process._tickCallback (internal/process/next_tick.js:68:7)
    message:
     'The "path" argument must be of type string. Received type undefined',
    locations: [ [Object] ],
    path:
     [ 'allMarkdownRemark', 'edges', 1, 'node', 'frontmatter', 'image' ] } ]


 ERROR #11321  PLUGIN

"gatsby-node.js" threw an error while running the createPages lifecycle:

The "path" argument must be of type string. Received type undefined

GraphQL request:17:15
16 |               draft
17 |               image {
   |               ^
18 |                 childImageSharp {



  Error: The "path" argument must be of type string. Received type undefined
  GraphQL request:17:15
  16 |               draft
  17 |               image {
     |               ^
  18 |                 childImageSharp {
  
  - gatsby-node.js:108 Object.exports.createPages
    /home/tuomas/Code/gatsby-casper/gatsby-node.js:108:11

Looks like something is off with the graphql query in the gatsby-node.js with childImageSharp ? However since this is my first project with Gatsby/Graphql I have no idea yet what is the root cause here.

If I rerun the npm run dev it will build fine but this is very annoying when editing the posts.

gatsby build

success open and validate gatsby-configs - 0.236s
success load plugins - 1.514s
success onPreInit - 0.020s
success delete html and css files from previous builds - 0.019s
success initialize cache - 0.007s
success copy gatsby files - 0.098s
warn gatsby-plugin-feed was initialized in gatsby-config.js without a feeds option.
This means that the plugin will use the internal RSS feed creation, which may not match your use case.
This behavior will be removed in the next major release of gatsby-plugin-feed.
For more info, check out: https://gatsby.dev/adding-rss-feed
success onPreBootstrap - 0.017s
success createSchemaCustomization - 0.288s
success source and transform nodes - 0.155s
success building schema - 0.388s

ERROR #11321 PLUGIN

"gatsby-node.js" threw an error while running the createPages lifecycle:

Reducers may not dispatch actions.

Error: Reducers may not dispatch actions.

• redux.js:214 dispatch
  [portfolio]/[redux]/lib/redux.js:214:13

• index.js:66
  [portfolio]/[gatsby]/dist/redux/index.js:66:88

• index.js:14 Object.dispatch
  [portfolio]/[redux-thunk]/lib/index.js:14:16

• index.js:45 dispatch
  [portfolio]/[gatsby-cli]/lib/reporter/redux/index.js:45:9

• redux.js:483 Object.createLog
  [portfolio]/[redux]/lib/redux.js:483:12

• reporter.js:168 Reporter.warn
  [portfolio]/[gatsby-cli]/lib/reporter/reporter.js:168:41

• patch-console.js:22 Object.console.warn
  [portfolio]/[gatsby-cli]/lib/reporter/patch-console.js:22:14

• utils.js:449 Object.warn
  [portfolio]/[xstate]/lib/utils.js:449:26

• StateNode.js:1313
  [portfolio]/[xstate]/lib/StateNode.js:1313:29

• Array.map

• StateNode.js:1311 StateNode.formatTransitions
  [portfolio]/[xstate]/lib/StateNode.js:1311:18

• StateNode.js:321 StateNode.get [as transitions]
  [portfolio]/[xstate]/lib/StateNode.js:321:51

• StateNode.js:296 StateNode.get [as on]
  [portfolio]/[xstate]/lib/StateNode.js:296:36

• StateNode.js:230
  [portfolio]/[xstate]/lib/StateNode.js:230:93

• Array.forEach

• StateNode.js:230 StateNode._init
  [portfolio]/[xstate]/lib/StateNode.js:230:45

failed createPages - 0.190s

Hello folks

Getting a weird link text decoration under an image. Trying to figure out if this is something specific about this starter kit or whether I should research Gatsby stuff to debug.

The markdown is simple enough ![Test Image](img/icon.jpg)

I've added full-width images without this text decoration showing up, so the small width might be a factor in replication.

I've tried directly editing the text-decoration in the browser, to no avail. Searched the repo for gatsby-resp-image-link styling rules, didn't find any and tried to add my own (again, around text-decoration: none edits)

Any pointers would be appreciated and thanks for creating such a nice TypeScript, Gatsby, Emotion play-pen :)

.site-header-background:not(.responsive-header-img) .site-nav-left-wrapper:after,
.site-nav-main .site-nav-left-wrapper:after {
    content: "";
    position: absolute;
    top: 0;
    z-index: 1000;
    width: 40px;
    height: 100%;
}

.site-header-background:not(.responsive-header-img) .site-nav-left-wrapper:after,
.site-nav-main .site-nav-left-wrapper:after {
    right: 0;
    background: linear-gradient(to right, color(var(--darkgrey) l(-5%) a(0)) 0%,color(var(--darkgrey) l(-5%)) 100%);
}

need to dynamically add the above code when on mobile

The title is kind of self-explanatory. Currently, even if I set draft to true for a post, it still shows up in the ReadNextFeed section of the page. Is there a quick way to get around this?

Me again :)
When I click on "subscribe" in the top navbar, a nice popup should appear like on the demo https://gatsby-casper.netlify.com/ but nothing happen when I run it locally :/

When I open any of the author's page, the post count shows the total number of posts, instead of just the author's posts.

Hi,
is it normal that 'gatsby-transformer-sharp' is inserted two times in gatsby-config.js file (lines 54-56) ?

'gatsby-transformer-sharp',
   'gatsby-plugin-react-helmet',
   'gatsby-transformer-sharp',

Problem

The inline code has colour "white" as specified in the CSS for generic code blocks. When in light mode, the inline code is therefore not visible.

Possible Fix

src/components/PostContent.tsx:588

  :not(pre) > code[class*="language-"] {
    border-radius: 0.3em;
    background: var(--inlineCode-bg);
    color: var(--inlineCode-text);
    padding: 0.15em 0.2em 0.05em;
    white-space: normal;
  }

This produces the CSS selector: .css-4cns0r-PostFullContent:not(pre) > code[class*="language-"] - note the lack of space between the generated class and the :not(pre). I presume emotion is thinking that the :not(pre) is a pseudo-selector like :hover or :active and deciding to combine the initial class with the :not(pre). I've not used emotion before so I don't know how to fix this.

Screenshot:

This problem exists for og:url and twitter:url meta tags.

I fixed it for my site by replacing it with kebabCase on both tag id author id.

https://www.gatsbyjs.org/blog/2019-12-20-integrate-tinacms-with-your-gatsby-website/

Can we add this @scttcper

Hello,
in the website-config file, you say

/**
   * this is the hidden input field name
   */
  mailchimpName?: string;

but what is it exactly ?
When I search for this on mailchimp doc (https://mailchimp.com/help/host-your-own-signup-forms/), I can see that there is two hidden input:

<form action="http://mailchimp.us8.list-manage.com/subscribe/post" method="POST">
<input type="hidden" name="u" value="a123cd45678ef90g7h1j7k9lm">
<input type="hidden" name="id" value="ab2c468d10">

So do I have to use the first input value ?