Same starter, but with typescript instead

I tried to add a bootstrap dropdown on the navbar with clean repository but it doesnt works, any idea?

Thanks for the amazing work. There are some libraries that are in the deprecated or non-maitained state. Please have a look and

import 'animate.css/animate.css'
import 'font-awesome/css/font-awesome.css'
import 'prismjs/themes/prism.css'
import 'devicon/devicon.min.css'

at gatsby-starter-bootstrap/src/layouts/index.js

is missing

Error: Invalid hook call. Hooks can only be called inside of the body of a fun ction component. This could happen for one of the following reasons:

1. You might have mismatching versions of React and the renderer (such as Reac t DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
   See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.

I tried using the boilerplate gatsby template and installing bootstrap via npm, and it didn't seem to load the package. How does this project include bootstrap?

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Error type: undefined. Note: this is a nested preset so please contact the preset author if you are unable to fix it yourself.

Description

Trying to build fresh project as per "Get Started" docs

Environment

Gatsby version: 1.1.37
Node.js version: 9.4.0
Operating System: Windows 10 Enterprise

File contents (if changed):

No changes to contents.

Actual result

What happened.

`$ gatsby build
success delete html files from previous builds — 0.017 s
success open and validate gatsby-config.js — 0.005 s
success copy gatsby files — 0.047 s
success onPreBootstrap — 0.012 s
success source and transform nodes — 0.116 s
success building schema — 0.372 s
success createLayouts — 0.014 s
success createPages — 0.024 s
success createPagesStatefully — 0.028 s
success onPreExtractQueries — 0.004 s
success update schema — 0.122 s
success extract queries from components — 0.074 s
success run graphql queries — 0.067 s
success write out page data — 0.013 s
success write out redirect data — 0.002 s
success onPostBootstrap — 0.001 s

info bootstrap finished - 4.937 s

success Building CSS — 7.212 s

error Generating JavaScript bundles failed

Error: component---src-templates-blog-post-js-b29bd044b77c466ea753.js from UglifyJs
SyntaxError: Unexpected token: name (context) [./~/striptags/src/striptags.js:26,0]`

What should happen?

Steps to reproduce

1.

2.

3.

...

How can i use bootstrap's dropdown menus with gatsby?

When I tested the home page performance, I saw this scene. I do not know what's going on.

Do you know why?

In order to build the project (at least on ubuntu 18.04 with the minimal install option) you need to manually install libpng-dev. Otherwise you get the following error:

yarn install v1.9.4
[1/4] Resolving packages...
[2/4] Fetching packages...
info [email protected]: The platform "linux" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning " > [email protected]" has incorrect peer dependency "gatsby@^1.0.0".
warning "gatsby-plugin-sass > [email protected]" has unmet peer dependency "webpack@^3.0.0 || ^4.0.0".
warning " > [email protected]" has incorrect peer dependency "gatsby-plugin-sharp@^2.0.0-beta.5".
warning " > [email protected]" has incorrect peer dependency "gatsby-plugin-sharp@^2.0.0-beta.3".
warning " > [email protected]" has unmet peer dependency "[email protected] - 3".
warning " > [email protected]" has unmet peer dependency "popper.js@^1.14.3".
[4/4] Building fresh packages...
[1/5] ⡀ sharp
[2/5] ⡀ node-sass
[3/5] ⡀ pngquant-bin
[4/5] ⡀ cwebp-bin
error /home/stefan/Projects/gatstrap/node_modules/pngquant-bin: Command failed.
Exit code: 1
Command: node lib/install.js
Arguments: 
Directory: /home/stefan/Projects/gatstrap/node_modules/pngquant-bin
Output:
⚠ The `/home/stefan/Projects/gatstrap/node_modules/pngquant-bin/vendor/pngquant` binary doesn't seem to work correctly
  ⚠ pngquant pre-build test failed
  ℹ compiling from source
  ✔ pngquant pre-build test passed successfully
  ✖ Error: pngquant failed to build, make sure that libpng-dev is installed
    at Promise.all.then.arr (/home/stefan/Projects/gatstrap/node_modules/pngquant-bin/node_modules/bin-build/node_modules/execa/index.js:231

Hi,
I'm Trying to use the Dropdown menu in SiteNavi/Index.jsx and it doesn't seem to be working.

render() {
    const pathPrefix =
      process.env.NODE_ENV === 'development' ? '' : __PATH_PREFIX__
    const { location, title } = this.props
    return (
      <nav className="navbar navbar-toggleable-md navbar-light bg-faded">
  <button className="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span className="navbar-toggler-icon"></span>
  </button>
  <a className="navbar-brand" href="#">Navbar</a>
  <div className="collapse navbar-collapse" id="navbarNavDropdown">
    <ul className="navbar-nav">
      <li className="nav-item active">
        <a className="nav-link" href="#">Home <span className="sr-only">(current)</span></a>
      </li>
      <li className="nav-item">
        <a className="nav-link" href="#">Features</a>
      </li>
      <li className="nav-item">
        <a className="nav-link" href="#">Pricing</a>
      </li>
      <li className="nav-item dropdown">
        <a className="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>
        <div className="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a className="dropdown-item" href="#">Action</a>
          <a className="dropdown-item" href="#">Another action</a>
          <a className="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
  </div>
</nav>
    )
  }
}

Hello,

for the v2 branch, do you want a PR to upgrade react-fontawesome to 0.1.0 (and related modules)?

For reference:

https://github.com/millette/gatsby-starter-location-github/blob/a7d88d0ff0b7870fe0359e09d525c4403a66f63a/src/components/Icon/index.js

and in package.json:

"devDependencies": {
  "@fortawesome/fontawesome-svg-core": "^1.2.0",
  "@fortawesome/free-brands-svg-icons": "^5.1.0",
  "@fortawesome/react-fontawesome": "0.1.0"
}

When i make new page or component and make scss file and import it, so if i write style for ex. h1 it is applied to every page,component but i imported it just in page.js or jsx.

Typo with profile link

There is a typo with the profile link. It should be either Profile in the link or profile.js for the file name.

Ok, I really hope this doesn't come off as offensive in anyway, and thank you for this great template.

However, I believe this does way too much for a bootstrap template.

• All the adsense logic and components is completely unrelated to bootstrap or gatsby, when I setup the template I had to remove all of that logic manually.
• All the animations are unrelated to bootstrap, also had to remove those.

In the end I ended up giving up on this template due to this.

To be properly named this should be gatsby-starter-bootstrap-blog-adsense

GraphQLParser: Unknown field description on type frontmatter_2.

Lets say i whant to change just h1 on profile page to some other font and i add in scss #h1id {font-family: Merriweather;} and it works in develop and netlify host but just on my pc (because i have Merriweather installed on my pc) when i try to load ex. mysite.netlify.com it in other pc or my phone font is default system font.
i added it to fonts.scss and did !default but it makes every text that font.
How do i import custom fonts that i have installed on my pc, and to load on other devices?
How do i change font for just one text ex h1?

development works great but gatsby build consistently fails with the below error:

Generating CSS
Compiling production bundle.js
Generating static HTML for pages

Error: TypeError: Cannot read property 'jquery' of undefined
at render-page.js:52224:22
at Object. (render-page.js:52228:3)
at Object. (render-page.js:55749:31)
at webpack_require (render-page.js:30:30)
at Object. (render-page.js:51165:2)
at webpack_require (render-page.js:30:30)
at Object.defineProperty.value (render-page.js:42784:27)
at webpack_require (render-page.js:30:30)
at Object.exports.__esModule (render-page.js:81:22)
at webpack_require (render-page.js:30:30)

Generating static HTML for pages failed
See our docs page on debugging HTML builds for help https://goo.gl/yL9lND

debugging in the public folder's render-page.js shows an error in the following:

+function ($) {
  var version = $.fn.jquery.split(' ')[0].split('.')
  if ((version[0] < 2 && version[1] < 9) || (version[0] == 1 && version[1] == 9 && version[2] < 1) || (version[0] >= 4)) {
    throw new Error('Bootstrap\'s JavaScript requires at least jQuery v1.9.1 but less than v4.0.0')
  }
}(jQuery);

i'm guessing there's an assumption at this point in the build that jquery's been imported but the render-page.js doesn't seem to show that. any ideas where this might be fixed?

Hi,

so if you open the frontpage https://gatstrap.netlify.com/ in a mobile phone (or just pick mobile device like IPhone 5 from Chrome devtools), you'll notice that the image does not resize to fit the screen.

Just so you know =)

Thanks for this cool template. I'm trying to make the navbar toggler work, I don't see jquery loading anywhere, which I think is necessary. Is there a way to add that in or check if its working? Seems to be so in yarn when I installed all dependencies. Just doesn't seem to be doing anything in the browser. Thanks for any pointers.

I would really like to differentiate the homepage from an actual blog post (there's no visual difference between the homepage in the viewport and opening the first article in the viewport).

It basically means I'm kinda new to Gatsby, but since I went through the entire package, I was unable to figure out - where to add content to the main page only?

How to change theme color in this web app easiliy

Hi, love this starter and I'm trying to use it as the base for a new starter but I'm finding it difficult to implement pagination on blog posts without totally rewriting the way pages and posts are created. It would be extremely useful to see pagination implemented on this starter if anyone is able to do so?

When I run yarn build and look at the .html files generated, the entire bootstrap library is served on every page.

See:

This seems undesirable.

When I view the source of the demo project on Netlify, I don't see any css served in the actual page being served (https://gatstrap.netlify.com/).

Can you explain how the CSS is being served exactly?

SideNote: I installed the gatsby-plugin-purgecss plugin in an attempt to remove some of the css bloat, but now that I see no css in the netlify markup, I'm wondering if that is even needed / advised.

when i gatsby develop
I get:
Cannot find module 'core-js/library/fn/symbol/iterator'
@ (webpack)-require/lib/webpackRequireEntrypoint.js 1:20-41

I think it is babel related

any ideas?

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

• Replace dependency babel-eslint with @babel/eslint-parser 7.11.0
• Update dependency bootstrap to v4.6.2
• Update Node.js to v12.22.12
• Update dependency gatsby-plugin-netlify to v3.14.0
• Update dependency jquery to v3.7.1
• Update dependency modern-normalize to v1.1.0
• Update Font Awesome to v6 (major) (@fortawesome/fontawesome-svg-core, @fortawesome/free-brands-svg-icons, @fortawesome/free-solid-svg-icons)
• Update dependency bootstrap to v5
• Update dependency gatsby-plugin-netlify to v5
• Update dependency gatsby-plugin-typegen to v3
• Update dependency modern-normalize to v2
• Update dependency node to v20
• Update react monorepo to v18 (major) (react, react-dom)
• 🔐 Create all rate-limited PRs at once 🔐

Edited/Blocked

These updates have been manually edited so Renovate will no longer make changes. To discard all commits and start over, click on a checkbox.

• Update dependency prismjs to v1.27.0 [SECURITY]
• Update react monorepo to v17.0.2 (react, react-dom)
• Update gatsby monorepo (major) (gatsby-link, gatsby-plugin-catch-links, gatsby-plugin-manifest, gatsby-plugin-offline, gatsby-plugin-react-helmet, gatsby-plugin-sass, gatsby-plugin-sitemap, gatsby-plugin-twitter, gatsby-plugin-typescript, gatsby-remark-copy-linked-files, gatsby-remark-images, gatsby-remark-prismjs, gatsby-remark-responsive-iframe, gatsby-remark-smartypants, gatsby-source-filesystem, gatsby-transformer-sharp)

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• Update dependency gatsby to v4 [SECURITY]
• Update dependency gatsby-plugin-sharp to v4 [SECURITY]
• Update dependency gatsby-transformer-remark to v5 [SECURITY]
• Update dependency gh-pages to v5 [SECURITY]
• Update Font Awesome (@fortawesome/fontawesome-svg-core, @fortawesome/free-brands-svg-icons, @fortawesome/free-solid-svg-icons, @fortawesome/react-fontawesome)
• Update devDependencies (@types/react-helmet, @typescript-eslint/eslint-plugin, @typescript-eslint/parser, eslint, eslint-config-prettier, eslint-plugin-prettier, eslint-plugin-react, eslint-plugin-react-hooks, husky, prettier, textlint, textlint-rule-preset-ja-spacing, typescript)
• Update dependency node to v14.21.3
• Update dependency sass to v1.77.4
• Update gatsby monorepo (gatsby-image, gatsby-link, gatsby-plugin-catch-links, gatsby-plugin-manifest, gatsby-plugin-offline, gatsby-plugin-react-helmet, gatsby-plugin-sass, gatsby-plugin-sitemap, gatsby-plugin-twitter, gatsby-plugin-typescript, gatsby-remark-copy-linked-files, gatsby-remark-images, gatsby-remark-prismjs, gatsby-remark-responsive-iframe, gatsby-remark-smartypants, gatsby-source-filesystem, gatsby-transformer-sharp)
• Update devDependencies (major) (@typescript-eslint/eslint-plugin, @typescript-eslint/parser, eslint, eslint-config-prettier, eslint-plugin-prettier, husky, lint-staged, prettier, textlint, textlint-rule-preset-japanese, typescript)
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

In gatsby develop when i put in all articles in index.md this (i dont want categories to display):

categories:
  - 

Only show navbar and page is empty

In gatsby build

error GraphQL Error Unknown field `categories` on type `frontmatter_2`

  file: C:/gatsby-starter-bootstrap/src/pages/index.js

  10 |         adsense
  11 |       }
  12 |     }
  13 |     remark: allMarkdownRemark {
  14 |       posts: edges {
  15 |         post: node {
  16 |           html
  17 |           frontmatter {
  18 |             layout
  19 |             title
> 20 |             categories
     |             ^
  21 |             path
  22 |             date(formatString: "YYYY/MM/DD")
  23 |           }
  24 |         }
  25 |       }
  26 |     }
  27 |   }
  28 |

/src/layouts/gatstrap.css no found.

Expected from your one page guide.

Once under Pages folder and once under the templates folder. Is there a reason for that? The same file twice?