janosh / blog

My blog.

My Blog

I write about things I learned in machine learning, data visualization, web development and coding best practices.

blog's Issues

Blog Site offline and Gatsby versions bad

Had the same issues with Gatsby 2.24.73 where if your clear Application storage and update the service worker site goes blank and stay's that way through all links.

And if I go browser back to home page its dead also, same issue I was having before I updated Gatsby to 2.28.0

You removed Gatsby plugin offline and all you needed to do was update it and Gatsby and then get workbox config from CDN to fix it.

And Content-Security-Policy is being looked for and enforced and can cause loading issues in all chromium browsers.

Check out my headers in my netlify.toml file at netlify.toml

You use different APIs and links than me so update the headers and view console messages for a heads up on missing links and where to put them.

TypeError: null is not an object (evaluating 'data.mdx')

After the development build I'm getting the error:

TypeError: null is not an object (evaluating 'data.mdx')

After viewing the page local the following syntax is highlighted:

export default function IndexPage({ data })

which is located in src/pages/index.js.

Unknown field 'fields' on type 'File!'.

hi,

i just downloaded your site after reading your article about Modal in React.

i followed the instructions, and when i run it as a fresh install i get:

error GraphQL Error Encountered 1 error(s):
- Unknown field 'fields' on type 'File!'.

      file: /usr/local/projects/aa_working/Active/janosh.io/src/pages/nature.js

certainly not a big deal on this end, but if you think of what i might be, let me know.

Thanks,
m

Confused user

I am an older man ( 50 ) who is trying to understand coding and Gatsby. I saw your site and I have to say thanks for putting the source code online. I am trying to reverse engineer things but first I wanted to get a copy to run.
I am having trouble with some things and I wanted to know if you could suggest a fix.
Here is the error I get when I try to post it to Amazon Amplify.

2020-01-17T16:34:33.192Z [WARNING]: error "gatsby-plugin-mdx" threw an error while running the onCreateNode lifecycle: JSON5: invalid end of input at 1:1 2020-01-17T16:34:33.220Z [INFO]: �[0m �[0m �[0m�[97m�[41mSyntaxError�[0m�[37m�[41m:�[0m�[37m�[41m �[0m�[97m�[41mJSON5: invalid end of input at 1:1�[0m �[0m �[0m �[0m �[0m�[90m-�[0m �[0m�[93mparse.js�[0m�[90m:�[0m�[93m1083�[0m�[37m �[0m�[37msyntaxError�[0m �[0m �[0m �[0m�[90m[omg-pleasework]/[json5]/lib/parse.js:1083:17�[0m �[0m �[0m �[0m �[0m�[90m-�[0m �[0m�[93mparse.js�[0m�[90m:�[0m�[93m1032�[0m�[37m �[0m�[37minvalidEOF�[0m �[0m �[0m �[0m�[90m[omg-pleasework]/[json5]/lib/parse.js:1032:12�[0m �[0m �[0m �[0m �[0m�[90m-�[0m �[0m�[93mparse.js�[0m�[90m:�[0m�[93m821�[0m�[37m �[0m�[37mObject.start�[0m �[0m �[0m �[0m�[90m[omg-pleasework]/[json5]/lib/parse.js:821:19�[0m �[0m �[0m �[0m �[0m�[90m-�[0m �[0m�[93mparse.js�[0m�[90m:�[0m�[93m32�[0m�[37m �[0m�[37mObject.parse�[0m �[0m �[0m �[0m�[90m[omg-pleasework]/[json5]/lib/parse.js:32:32�[0m �[0m �[0m �[0m �[0m�[90m-�[0m �[0m�[93mutils.js�[0m�[90m:�[0m�[93m78�[0m�[37m �[0m�[37mrequireJson�[0m �[0m �[0m �[0m�[90m[omg-pleasework]/[gatsby-remark-vscode]/src/utils.js:78:71�[0m �[0m �[0m �[0m �[0m�[90m-�[0m �[0m�[93mprocessExtension.js�[0m�[90m:�[0m�[93m6�[0m�[37m �[0m�[37mprocessExtension�[0m �[0m �[0m �[0m�[90m[omg-pleasework]/[gatsby-remark-vscode]/src/processExtension.js:6:23�[0m �[0m �[0m �[0m �[0m�[90m-�[0m �[0m�[93mdownloadExtension.js�[0m�[90m:�[0m�[93m30�[0m�[37m �[0m�[37msyncExtensionData�[0m �[0m �[0m �[0m�[90m[omg-pleasework]/[gatsby-remark-vscode]/src/downloadExtension.js:30:38�[0m �[0m �[0m �[0m �[0m�[90m-�[0m �[0m�[93mdownloadExtension.js�[0m�[90m:�[0m�[93m88�[0m�[37m �[0m�[37mdownloadExtensionsIfNeeded�[0m �[0m �[0m �[0m�[90m[omg-pleasework]/[gatsby-remark-vscode]/src/downloadExtension.js:88:11�[0m �[0m �[0m �[0m �[0m�[90m-�[0m �[0m�[93mindex.js�[0m�[90m:�[0m�[93m77�[0m�[37m �[0m�[37masync textmateHighlight�[0m �[0m �[0m �[0m�[90m[omg-pleasework]/[gatsby-remark-vscode]/src/index.js:77:7�[0m �[0m �[0m �[0m �[0m�[90m-�[0m �[0m�[93mget-source-plugins-as-remark-plugins.js�[0m�[90m:�[0m�[93m57�[0m�[37m �[0m�[37masync transformer�[0m �[0m �[0m �[0m�[90m[omg-pleasework]/[gatsby-plugin-mdx]/utils/get-source-plugins-as-remark-plug�[0m �[0m �[0m�[90mins.js:57:11�[0m �[0m �[0m �[0m 2020-01-17T16:34:33.288Z [INFO]: not finished source and transform nodes - 15.105s 2020-01-17T16:34:33.308Z [INFO]: not finished Generating image thumbnails - 10.986s 2020-01-17T16:34:33.496Z [ERROR]: !!! Build failed 2020-01-17T16:34:33.497Z [ERROR]: !!! Non-Zero Exit Code detected 2020-01-17T16:34:33.497Z [INFO]: # Starting environment caching... 2020-01-17T16:34:33.497Z [INFO]: # Environment caching completed Terminating logging...

I can get it to deploy on Netlify only if I remove the 'Gatsby-remark-vscode' code from gatsby-config.js I was getting an error about Microsoft's rate limit. But as you know the fancy code boxes don't appear if vs-code is removed.

Maybe you can make sense of the error. I appreciate any help you can provide.
Attached is a screenshot because I can't make the code above look good.
Paul

How do I change the font?

Hi, I am new to web development and I am unsure on how to change the font.
Great project btw!

Thanks,
Jonathan

Building Error (weird)

After successfully developing the blog, if tried to rebuild it on Netlify - without success.

I retried to develop local but now the following strange error occurs:

Error: /Users/noir/blog/gatsby-node.js:52
      const nextSlug = arr[index - 1]?.frontmatter.slug || ``
                                      ^
  SyntaxError: Unexpected token '.'

It's also kinda strange that the develop is working without problem, but the build fails.

Has anyone had a similar issue?

Problem with installation

Author extension for blog

Hi Janosh,

I was wondering if it is possible to easily implement in your personal blog a feature that you use in your other websites. Strictly speaking, the possibility to add an author to blog entries with a small picture of the author. As far as I've seen,
./src/components/PostMeta and ./src/templates/post.js
needs to be adjusted.
Is there more to consider here or do you even need a plugin?

Best, Nathanael

How to make SVG Images

Hi Janosh,

I really like the svg title pictures you have made for the blog. An example is

I would be very grateful to learn how to make something similar myself.

Many Thanks

netlify deployment failing

Hi, I was wondering if you can help me with this. I was building a ML research website for my own startup & this was a great beginning point to start with. It had everything that I was looking for

• Way to integrate JS code(MDX) ...to show tweak paper code on the blog itself ...add buttons...sliders etc
• a labelled Blog
• Algolia search to search content
• Github project showcase
• a starter theme (which I will change once I have a UI developer...I'm looking for something minimal and fun)

Also I'm new to GraphQL, Gatsby & Netlify so I can't really do much right now. Thanks for a great project :)

7:46:15 AM: Build ready to start
7:46:17 AM: build-image version: 9cade8af58c2cf3a17a1e9433d2e979149488837
7:46:17 AM: build-image tag: v3.3.5
7:46:17 AM: buildbot version: 6067c60f3bc043bb6b9ee9b57c85b10029c65bfd
7:46:17 AM: Fetching cached dependencies
7:46:18 AM: Failed to fetch cache, continuing with build
7:46:18 AM: Starting to prepare the repo for build
7:46:18 AM: No cached dependencies found. Cloning fresh repo
7:46:18 AM: git clone [email protected]:flickscapital/janosh.io
7:46:19 AM: Preparing Git Reference refs/heads/master
7:46:20 AM: Found Netlify configuration file netlify.toml in site root
7:46:20 AM: Found Netlify configuration file(s). Overriding site configuration
7:46:20 AM: No build command found, continuing to publishing
7:46:20 AM: failed during stage 'building site': Deploy directory 'public' does not exist
7:46:20 AM: Failing build: Failed to build site

I saw .netlify config file & it had mentioned

[build]
  publish = "public"

which seems correct what's wrong?

How to load a background image like your home page? And just fit the screen size?

How to load a background image like your home page? And just fit the screen size?
https://janosh.io/

Problem during gatbsy develop

Hi, thank you for this great project!
When running gatsby develop, I get this error
- resolve-module-exports.ts:191 resolveModuleExports Error: C:\Users\betin\Documents\Blog\blog-master\gatsby-node.js:5291:26 const nextSlug = arr[index - 1]?.frontmatter.slug || `` ^ SyntaxError: Unexpected token '.'strap/load-plugins/validate.ts:193:31