scttcper / gatsby-casper Goto Github PK
View Code? Open in Web Editor NEWA Casper blog starter for Gatsby
Home Page: https://gatsby-casper.netlify.app
License: MIT License
A Casper blog starter for Gatsby
Home Page: https://gatsby-casper.netlify.app
License: MIT License
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
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 ?
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?
Is it possible to add dropdown menu button @scttcper ?
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
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.
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>
)}
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"
}
]
}
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.
Hi @scttcper
thank you for your work on this.
How to use unsplash image for post featuredImage?
is it only support local image?
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.
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 ?
The theme does not have any form of pagination of its index page. Without pagination, the theme is not entirely user friendly.
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.
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
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',
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.
When we click on the RSS link in the footer, we get the 404 page. If we reload, we can see the RSS flux
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.
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?
Folder src/components/subsribe
should be renamed along with all references to src/components/subscribe
For Predefined Tags Like Speeches with images , No of posts is not displayed
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?
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!
Need some sort of CMS to add new posts through UI.
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
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
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.
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
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.
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.
Need to support multiple language
I can't for the life of me get the compiled site to display a favicon.
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?
Need to upgrade to the latest version of Casper (v3.0.2). Thank you.
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 :)
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?
.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
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 ?
v3 brought a new set of styles, the pagination should match these styles
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.
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?
Can we implement a search option so that a user can search through the content.
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 :/
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!
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.
Profile picture for author & Background image for tags is not getting displayed @scttcper
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.