mrmartineau / gatsby-theme-code-notes Goto Github PK

Thanks for the work on this theme, it's really excellent and I'm enjoying it so far.

I tried two ways to insert an image into a note but neither worked. Any tips?

![image](images/image.png)

<img src=images/image.png>

The markdown down syntax results in a 404. How are the paths rendered? I tried a few permutations but didn't find the right one yet.

The HTML version just straight up causes gatsby to not compile.

For completeness, here is the file layout.

hello. first, thanks for your great work.

i'm migrating my wordpress blog to gatsby with your theme.

sadly, sorting not working.

as far as i can check, duplication of react component key is the problem (as you can see below screenshot)

then i found that, the post with only korean characters title (as you can see below screenshot)

doesn't have proper slug (= the key) for it.

related code i found: here

is it possible to fix this issue? like making another string for the NoteListItem key? (base64 of title for example)

is there any other side-effect that i cannot guess right now?

thanks!

edited 2021/10/06 10:06:52 PM

and above screenshot is my current blog project structure FYI 🙏

Hey, looking at v1.7.2...v1.8.0 I can't see any obvious breaking changes from 1.7.2 to 1.8.0 but building on multiple projects now fails with the below error message.

failed Building static HTML for pages - 1.601s

 ERROR #95313

Building static HTML failed for path "/"

See our docs page for more info on this error: https://gatsby.dev/debug-html

  WebpackError: ReferenceError: name is not defined

  - build-html.js:107 doBuildPages
    /[gatsby]/dist/commands/build-html.js:107:24

  - build-html.js:121 async buildHTML
    /[gatsby]/dist/commands/build-html.js:121:3

  - build.js:206 async build
    /[gatsby]/dist/commands/build.js:206:5

Where there any breaking changes that I overlooked that would cause this?

The date for each note is based on when the file was modified, not by using frontmatter data. This modified date works fine when working locally but is broken when hosted.

Hey,

Since this theme appears to come out-of-the-box with both a light and dark mode, what about adding some sort of automatic theme selector based on prefers-color-scheme? From my experience, all you need is @media (prefers-color-scheme: dark) { ... } to automatically select this. I don't know how that'll interact with the theme toggler though.

e.g. /search?query=prop

This page could be reached when a user hits [enter] while searching

• Create page that is based on the query param
• When user hits [enter] on a search, come to this page
• Add opensearch so that the site can be searched from the browser

The example front matter is:

---
title: Note frontmatter
emoji: 😃
tags:
  - metadata
link: https://zander.wtf
---

And so long as at least one note in the directory structure has an emoji or tags or link specified then the site builds just fine. But I'm not super keen on emoji in this use case so I deleted it from all my notes and the site fails to build. Error below:

There was an error in your GraphQL query:

Cannot query field "emoji" on type "MdxFrontmatter".

If you don't expect "emoji" to exist on the type "MdxFrontmatter" it is most likely a typo.
However, if you expect "emoji" to exist there are a couple of solutions to common problems:

- 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
- 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
- You want to optionally use your field "emoji" 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 a least one entry with that field ("dummy content")

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 "MdxFrontmatter":
https://www.gatsbyjs.org/docs/schema-customization/#creating-type-definitions

File: /Users/alex/git/ib/code-notes/node_modules/gatsby-theme-code-notes/src/templates/Note.js

Therefore I'm requesting that the requirement of specifying these front matter keys is dropped. Not every note needs a link, or an emoji.

Thanks!

Hi, this theme is very cool, i love it

But I don't want to use emoji, How to remove it?
I filled in emoji: '' in frontmatter but left an empty area. Look like this:

Thank you

Hi

After running

gatsby new code-notes https://github.com/MrMartineau/gatsby-starter-code-notes cd code-notes yarn dev

I got these blocking errors in the CLI :

Cannot query field "dateModified" on type "MdxFields".
The fragment "AllPages" does not exist.

I got :

% yarn --version
1.3.2
% node --version
v12.5.0

Did I miss something ?
Thanks !

When attempting to click on a tag on the site it leads to 404 error. Am I supposed to manually create a page for each tag that I make while in the front matter while creating a md/mdx file? I have attached an example screen shot of the error. I am coming from Jekyll and I am very new to React and Gatsby so I apologize if this is a dumb question.

On some mobile browsers the font-sizing in code blocks is not consistent..

It'd be great to be able to stop code blocks for some longer commands from going off the side of the screen using wordwrap. Is this possible?

Example:

https://openshift.ktz.cloud/etcd-member-table

How do I change the language?

Here is my config of basePath.

module.exports = {
  siteMetadata: {
    ...
  },
  plugins: [
    {
      resolve: 'gatsby-theme-code-notes',
      options: {
        contentPath: 'notes',
        basePath: '/notes/',
        showThemeInfo: false,
        showDescriptionInSidebar: true,
        logo: ''
      },
    },
  ],
}

When I set basePath to /notes/, It's works and totally fine, but when I click the note whose URL is todo. It doesn't link to /notes/todo but todo.

I really don't know is this a bug or just my mistake of using. I'm totally rookie in gatsby.

and the other question is how can I get basePath settings through graphql, I couldn't find a way :(

Looking forward to your reply！plz..

For example, how to hightlight dart code? The default configuration does not include the dart language.

It is great to see people using my theme, are you? If so, can you share the link to your code notes site?

Sites such as https://notes.apiscp.com/ or https://openshift.ktz.cloud/ where you need to scroll the tag list doesn't allow you to select the latest ones as the theme selector overlays them.

It'd be useful to have a parameter either in the frontmatter or in the theme config to set the page TOC to auto expand.

Thanks!

Beyond my original posts on Hacker News and reddit there have been a few other mentions of the theme by other people. Please post any that you find 😄

Using it on my mobile, and realised that it breaks the layout when i open the menu and scroll. It scrolls down below the last post and a lot of unnecessary space get added thus making the page scrollable to a point where there's no content.

It also gets automatically readjusted sometimes when i close the menu, and sometimes it does not.

Attaching an image for reference here.

New to Gatsby, so I might be missing something obvious. Steps I've taken:

sudo npm install -g gatsby-cli
mkdir kb && cd kb
gatsby new . https://github.com/MrMartineau/gatsby-starter-code-notes
gastby develop

I chose to use npm as a package manager when asked by running gatsby new.

Result:

useColorMode
src/index.js:89

  86 | const { colorMode, setColorMode } = useThemeUI()
  87 | 
  88 | if (typeof setColorMode !== 'function') {
> 89 |   throw new Error(`[useColorMode] requires the ColorModeProvider component`)
  90 | }
  91 | 
  92 | return [colorMode, setColorMode]

Hi! Thanks for your theme, it's very cool!

I see that you added a new "link" field.

May I ask you to make it optional? Otherwise, I'll have to add this field ("link") to every document.

And without this "link" field, I get an error:

ERROR #85923  GRAPHQL

There was an error in your GraphQL query:

Cannot query field "link" on type "MdxFrontmatter".

Thanks!

I have been working on an update for Code Notes that tightens the design and adds some sorting to the notes list.

Notes can now be sorted (by the user) alphabetically or by date (providing you include some extra frontmatter in your notes)

Note typography has been improved a bit as well and so has the left-hand navigation:

My own site, notes.zander.wtf has the latest version, and I have been using that for testing. There are a few minor things that I need to improve, but I think it is nearly ready to be released.

If you would like to try these updates yourself, please install the latest beta of the code-notes package. At the time of writing it is 2.0.0-9 like so:

yarn add gatsby-theme-code-notes@next

See all the updates in this PR: #91

If you try and structure your notes in sub-folders then links are incorrect.

eg.
notes/react/topic1.md will be linked ass notes/topic1. Navigating directly to /react/topic1 still works.

Hey man,

Love this theme.

Ran into an issue on hot reload after editing the gatsby-config.js file and changing a setting (set showThemeInfo to true, though it seems to happen on any change, like editing the description):

 ERROR #85925  GRAPHQL

There was an error in your GraphQL query:

Cannot return null for non-nullable field SiteSiteMetadata.gitRepoContentPath.

The field "SiteSiteMetadata.gitRepoContentPath." was explicitly defined as non-nullable via the schema customization API (by yourself or a plugin/theme). This means that this field is not optional and you have to define a value. If this is not your desired behavior and you defined the schema yourself, go to "createTypes" in gatsby-node.js. If you're using a plugin/theme, you can learn more here on how to fix field types:
https://www.gatsbyjs.org/docs/schema-customization/#fixing-field-types

   1 | query usersalexeylerDevelopmentwebmyNotesnodeModulesgatsbyThemeCodeNotessrcuseSiteMetadataTs1322576299 {
   2 |   site {
   3 |     siteMetadata {
   4 |       title
   5 |       description
>  6 |       gitRepoContentPath
     |       ^
   7 |       showThemeInfo
   8 |       showDescriptionInSidebar
   9 |       logo
  10 |     }
  11 |   }
  12 | }
  13 |

File path: /Users/alexeyler/Development/web/my-notes/node_modules/gatsby-theme-code-notes/src/use-site-metadata.ts
Plugin: none

When reloading the web page, I see this error:

TypeError: Cannot read property 'gitRepoContentPath' of null
NotePage
node_modules/gatsby-theme-code-notes/src/components/NotePage/NotePage.tsx:46
  43 |   data,
  44 |   pageContext,
  45 |   location,
> 46 | }) => {
  47 |   if (!data) {
  48 |     return null
  49 |   }

I'm a backend developer by trade (first time using react, gatsby, etc.), but I can take a swing and see if I can find the root cause.

It would be nice to have an 'about'/'more info' section where you can explain what is the purpose of the site, authors, etc. without 'about' being a tag.

The above error message results in a build failure when we try to get query for the 'fields' column in graphQL:

6:10:31 PM: error There was an error in your GraphQL query:
6:10:31 PM: Cannot query field "fields" on type "Mdx".
6:10:31 PM: If you don't expect "fields" to exist on the type "Mdx" it is most likely a typo.
However, if you expect "fields" to exist there are a couple of solutions to common problems:
6:10:31 PM: - 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
6:10:31 PM: - 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
6:10:31 PM: - You want to optionally use your field "fields" 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 a least one entry with that field ("dummy content")
6:10:31 PM: 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 "Mdx":

I believe the fix is to activate gatsby-source-filesystem before activating gatsby-plugin-mdx (see gatsbyjs/gatsby#15594). Here's a change in my repo I made to fix the issue: AlexEyler/my-notes@936385f

I'll create a PR for this fix.

Now images are overflowing. Can you please set the width on image max-width: 100%

Currently users have to click on the "All notes" label to go to the homepage.

Having to click this far down isn't ideal since users usually click on the top left of the screen (where the logo is) to go to the homepage.

Since the logo is optional, my suggestion is to make both the logo and description take the user to the homepage.

It looks like the lock files are hiding some requirements for the package, such that installing without the yarn.lock (in an attempt to use the standard package-lock.json) doesn't work.

Steps to reproduce:

• Clone https://github.com/MrMartineau/gatsby-starter-code-notes
• npm install
• npm run build fails

If installed via yarn (replacing npm install with yarn install), it works as expected.

Errors

failed Building static HTML for pages - 3.641s

 ERROR #95313

Building static HTML failed for path "/example-note/"

See our docs page for more info on this error: https://gatsby.dev/debug-html


  11 |   const theme = preset.default || preset
  12 |
> 13 |   const themeWithPrism = merge(theme, {
     |                                ^
  14 |     styles: {
  15 |       pre: prismPreset,
  16 |     },


  WebpackError: TypeError: Object(...) is not a function

  - provider.js:13
    node_modules/gatsby-plugin-theme-ui/src/provider.js:13:32

I've had a number of errors, but this seems to be the main one. It's hard to track down exactly which it would be