yinkakun / gatsby-starter-glass Goto Github PK

View Code? Open in Web Editor NEW

167.0 4.0 85.0 4.91 MB

A Minimal & Beautiful Gatsby Personal Blog Starter With Nice Glassmorphism UI

Home Page: https://gatsbyglass.netlify.app

License: MIT License

JavaScript 87.11% CSS 12.89%

jamstack starter glassmorphism netlify-cms gatsby hacktoberfest

gatsby-starter-glass's Introduction

Gatsby Starter Glass

A Minimal & Beautiful Gatsby Personal Blog Starter With Nice Glassmorphism UI.

View Live Demo

Features

Fully responsive
SEO metadata and Open Graph tags
Maximized lighthouse score
Contact form with Netlify Form
Edit Content with Netlify CMS
Easy to deploy
Syntax highlighting via PrismJS

Local Install

# 1. Clone the repository
git clone https://github.com/yinkakun/gatsby-starter-glass

# 2. Navigate into repository
cd gatsby-starter-glass

# 3. Install the dependencies
yarn install

# 4. Start the development server
yarn start

# 5. Start the build mode
yarn  build

Configuration

Within gatsby-config.js, you can specify information about your site (metadata) like the site title and description to properly generate meta tags.

// gatsby-config.js

module.exports = {
  siteMetadata: {
    title: `Gatsby Starter Glass`,
    author: {
      name: `Yinka Adedire`,
      summary: `self-taught front-end dev. jamstack enthusaist.`,
    },
    description: `A Minimal & Beautiful Gatsby Personal Blog Starter With Nice Glassmorphism Ui.`,
    siteUrl: `https://gatsbyglass.netlify.app`,
    social: {
      twitter: `yinkakun`,
    },
  },

  // ...
};

Deployment

Netlify is a great way to easily deploy sites plus this starter uses Netlify Form for the Contact form.

Generate a new repo from this repo which will copy all files from this repo to your newly created repo.
Go to https://app.netlify.com. Once you’ve logged in, click the 'New site from Git' button on your dashboard and choose your newly created repo.
Follow the prompts, it will build and deploy the new site on Netlify, bringing you to the site dashboard when the build is complete.

Manually Editing contents

Blog Posts

Blog contents can be updated in markdown format at content/blog. Delete placeholder posts and start blogging.

---
title: Hello World
date: '2021-05-01'
description: 'Hello World'
---

This top portion is the beginning of the post and will show up as the excerpt on the homepage.

Pages

Homepage intro, Contact, and About page content can be updated in Markdown format at content/pages.

Editing Contents with Netlify CMS

This project is preconfigured to work with Netlify CMS. When Netlify CMS makes commits to your repo, Netlify will auto-trigger a rebuild / deploy when new commits are made. You’ll need to set up Netlify’s Identity service to authorize users to log in to the CMS.

Go to https://app.netlify.com > select your website from the list.
Go to Identity and click Enable Identity.
Click on Invite Users and invite yourself. You will receive an email and you need to accept the invitation to set the password.
Now headover to Settings > Identity > Services and Enable Git Gateway.
You can also manage who can register and log in to your CMS. Go to Settings > Identity > Registration Registration Preferences. I would prefer to keep it to Invite Only if I am the only one using it.
Now, go to to site-name.netlify.app/admin/, and login with your credentials.

Once you are in your Netlify CMS, you can navigate to Posts and Pages. Here you will find a list of existing pages and posts.

Built with

Gatsby for Static Site Generation
Netlify CMS for content management
Styled Component for styling

gatsby-starter-glass's People

Contributors

Stargazers

Watchers

Forkers

0xferit sgdwn test-denar rizvve ggennrich pengantar deeonis rizafr ed-c137 miliariadnane ayoubkasmi slimooo henry88lay coolboyhy1607 web-dev-a tenebreux yanze-yang oopsshri ashtron msm74588 iamavneetsk finben an1ndra heyaender imdazui sivakar12 alwaterloo rec55 sakanosita udbhavc jitusd9 gincoinc movindu-tb mu-ab fbnne derektr tiredsteam marouaneat95 jamstack-dev infinitbility usmankh07 geddings minjijeong rainmana usamalodhi cjroberts2013 iashraful diarreola marikullom liferacer333 surajkumar240 kasunsankalpa tropnikov yampml ratanpanjwani cinnamonxi ibnhabib atifhasnain aoi-ue drawablex86 team-epilogue imranext anish274 sfo-initiative doc-jones hyunjaesung abilalameen pienteger digowsws callumwalterwhite trooper5010 vkfiros glivercouto dansholds maneeshjha13 ye-muath ampil abaso007 vlkozl octavian-one vishnu-narayanan readmejin theruchirshah shubham-hk2

gatsby-starter-glass's Issues

Contact page causing build failure

Wrong directory in step 2

Just wanted to clarify on your step #2, directions should be cd gatsby-starter-glass

Thanks for the starter!

Upgrade dependencies

Posts not being placed in numeric tags

This post has three tags: two that start with letters and one that starts with numbers.

Upon looking at all the tags in the blog, it shows that there is one post marked 2020.

When clicking 2020 however, it shows that there are no posts marked under 2020.

Does it not support tags that start with numbers, and if so, could you possibly add the functionality?

EDIT: This seems to be a graphql problem and I've developed a workaround to make the number be recognized as a string; however, I'd still like to know if a numeral value is possible to implement.

URL color not changing even on global styles?

After changing the colors on the global-styles.js file, most of the links change color to the font like this:

But for certain pages, such as tags.js and the contact page, they do not change color. How would I implement this change?

I cannot find where to change the colors of these links. Even changing after changing the heading color directly where the text is at does not change the color of the hyperlink.

Feature Request: Dark Theme

Hello.
I'm a beginner just starting to learn Gatsby.

I'm glad to meet a very nice theme.
A dark theme is ideal, so I'm looking forward to an early implementation.

when tags is Chinese ， TypeError: Cannot read properties of null (reading 'map')

title: 寒潮来袭这些生活小常识你记住了吗？
date: 2021-11-07
tags: [吃饭]

ERROR #11321 PLUGIN

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

Cannot read properties of null (reading 'map')

5 | return str
6 |
.match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]|\b)|[A-Z]?[a-z]+[0-9]|[A-Z]|[0-9]+/g)

7 | .map((x) => x.toLowerCase())
| ^
8 | .join('-');
9 | };
10 |

File: gatsby-node.js:7:5

TypeError: Cannot read properties of null (reading 'map')

Feature Request: Search

I loved your site. It's great 👏. I think adding a search option would be nice.

Feature Request: Internationalization

Great design, I loved it and forked it already.

But it would be really nice if it was supporting internationalization. If you consider doing visual design work of internationalization, I can contribute by implementing the logic, if you need a hand.

Tags and Previos post should align left

yarn build error

I am total new to reactjs so please ignore my naivety.

I cloned the repo and tried to follow yarn build and I get below error.

success onPreExtractQueries - 0.001s

 ERROR #85922  GRAPHQL

There was an error in your GraphQL query:

      Field "profile_image" must not have a selection since type "String" has no subfields.

      This can happen if you e.g. accidentally added { } to the field "profile_image". If you didn't expect        
"profile_image" to be of type "String" make sure that your input source and/or plugin is correct.
      However, if you expect "value" to exist, 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.        

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

File: src\templates\about-template.js:64:23


 ERROR #85922  GRAPHQL

There was an error in your GraphQL query:

      Field "social_image" must not have a selection since type "String" has no subfields.

      This can happen if you e.g. accidentally added { } to the field "social_image". If you didn't expect
"social_image" to be of type "String" make sure that your input source and/or plugin is correct.
      However, if you expect "value" to exist, 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.        

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

File: src\templates\post-template.js:187:22

failed extract queries from components - 1.613s

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

When I do yarn start I get below error


 ERROR 

(node:1576) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./" in the "exports" field module resolution of the package at D:\cms\gatsby-starter-glass\node_modules\css-loader\node_modules\postcss\package.json.
Update this package.json to use a subpath pattern like "./*".
(Use `node --trace-deprecation ...` to show where the warning was created)


 ERROR 

(node:1576) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./" in the "exports" field module resolution of the package at D:\cms\gatsby-starter-glass\node_modules\gatsby\node_modules\postcss\package.json.
Update this package.json to use a subpath pattern like "./*".

and below errror in browser.

ERROR #85922
Open in Editor
D:/cms/gatsby-starter-glass/src/templates/about-template.js:64:23
There was an error in your GraphQL query:

      Field "profile_image" must not have a selection since type "String" has no subfields.

      This can happen if you e.g. accidentally added { } to the field "profile_image". If you didn't expect "profile_image" to be of type "String" make sure that your input source and/or plugin is correct.
      However, if you expect "value" to exist, 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.

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

Can you please help?

All tags‘s page should change to Nice Glassmorphism UI

Deprecated

10:59:31 PM: Please install `gatsby-plugin-netlify` and enable it in your gatsby-config.js. https://www.gatsbyjs.com/plugins/gatsby-plugin-netlify/
10:59:31 PM: The plugin 'netlify-plugin-gatsby-cache' is no longer required and should be removed.

Flickering issue when moving page

Hi there. Thank you for the great theme.
I've installed this on my Github and deployed via Netlify. The theme begins in a dark mode, and when I click on a post the background turns to light mode all of a sudden and goes back to dark. This does not happen on Safari but on Edge. Any hints?

Sorry I am not a professional developer.

Automatic conversion to PNG

Hello,

Great job, great design !

I don't understand one thing. Why do you convert your picture form JPG to PNG ? (https://gatsbyglass.netlify.app/about)

How it's possible to disable it ? Or to convert images to webp format ?

Thank you