Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mdvanes/mdworld-jackson
mdworld theme "Jackson"
https://github.com/mdvanes/mdworld-jackson
gatsby react
Last synced: 3 days ago
JSON representation
mdworld theme "Jackson"
- Host: GitHub
- URL: https://github.com/mdvanes/mdworld-jackson
- Owner: mdvanes
- License: mit
- Created: 2018-04-26T10:58:18.000Z (over 6 years ago)
- Default Branch: main
- Last Pushed: 2023-05-20T19:02:34.000Z (over 1 year ago)
- Last Synced: 2023-08-05T01:26:09.330Z (over 1 year ago)
- Topics: gatsby, react
- Language: JavaScript
- Homepage: https://mdvanes.github.io/mdworld-jackson
- Size: 22 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 20
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# mdworld theme "Jackson"
Modern stack for mdworld.nl. Uses JAMstack with [GatsbyJS](https://www.gatsbyjs.org/docs/) (PWA traits), React, TypeScript and API calls to medium.com. Hosting on Github Pages and SSL with Cloudflare.
* Material Design theme https://github.com/Vagr9K/gatsby-material-starter
* Material Design colors https://react-md.mlaursen.com/customization/colors
* fix min-height with flexbox (see about page)
* disable twitter etc plugins
* Disabled because Medium endpoint is disabled: Get overview of all Medium.com publications with https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-source-medium
* Get specific Medium.com post (maybe https://github.com/jondubin/gatsby-source-rss)
* Merge Medium.com publications with Markdown/React posts
* Cache API calls (service worker)
* SSL with Cloudflare, instructions https://hackernoon.com/set-up-ssl-on-github-pages-with-custom-domains-for-free-a576bdf51bc
* Hosting on Github Pages mdworld.github.io
* CI/CD with Travis ?.travis.org
## Naming theme
http://nl.wikipedia.org/wiki/USA_for_Africa
## Adding React components to Markdown posts
Add to render function in src/templates/post.jsx
See also https://github.com/gatsbyjs/gatsby/blob/master/examples/using-remark/src/pages/2018-01-27---custom-components/index.md
# Readme
[](https://codeclimate.com/github/Vagr9K/gatsby-material-starter)
[](https://codeclimate.com/github/Vagr9K/gatsby-material-starter)
[](https://www.codacy.com/app/Vagr9K/gatsby-material-starter?utm_source=github.com&utm_medium=referral&utm_content=Vagr9K/gatsby-material-starter&utm_campaign=Badge_Grade)
# Gatsby Material Starter
A blog starter with Material design in mind for [Gatsby](https://github.com/gatsbyjs/gatsby/).
[Demo website.](https://vagr9k.github.io/gatsby-material-starter/)
## GatsbyJS V1
This starter is based on GatsbyJS V1, which brings progressive web app features such as automatic code and data splitting (by route), prefetching, with service worker/offline-first support and PRPL pattern.
More information in the [announcement](https://www.gatsbyjs.org/blog/gatsby-first-beta-release/).
## Features
* Blazing fast loading times thanks to pre-rendered HTML and automatic chunk loading of JS files
* [React-MD](https://github.com/mlaursen/react-md) for Material design
* Integrated FontAwesome support
* Integrated Material Icons support
* SASS/SCSS styling
* Separate components for everything
* High configurability:
* User information
* User social profiles
* Copyright information
* More!
* Author segment
* Name
* Location
* Description
* Links
* Follow Me button
* Posts in Markdown
* Code syntax highlighting
* Embedded YouTube videos
* Embedded Tweets
* Tags
* Seprate page for posts under each tag
* Categories
* Separate page for posts under each category
* Suggested posts segment
* Disqus support
* Notifications about new disqus comments
* Google Analytics support
* Responsive design
* On mobile, Disqus is loaded only after expanding comments for better performance
* Social features
* Twitter tweet button
* Facebook share/share count
* Reddit share/share count
* Google+ share button
* LinkedIn share button
* Telegram share button
* SEO
* Sitemap generation
* robots.txt
* General description tags
* Schema.org JSONLD (Google Rich Snippets)
* OpenGraph Tags (Facebook/Google+/Pinterest)
* Twitter Tags (Twitter Cards)
* RSS feeds
* Loading progress for slow networks
* Offline support
* Web App Manifest support
* Development tools
* ESLint for linting
* Prettier for code style
* Remark-Lint for linting Markdown
* write-good for linting English prose
* gh-pages for deploying to GitHub pages
* CodeClimate configuration file and badge
NOTE: Take a look at [gatsby-advanced-starter](https://github.com/Vagr9K/gatsby-advanced-starter) if you prefer building UI from scratch and/or only interested in fundamental features.
You can also visit [my personal blog](https://vagr9k.me) if you want to see a fully implemented blog based on this starter.
## Getting Started
Install this starter (assuming [Gatsby](https://github.com/gatsbyjs/gatsby/) is installed and updated) by running from your CLI:
```sh
gatsby new YourProjectName https://github.com/Vagr9K/gatsby-material-starter
npm install # or yarn install
npm run develop # or gatsby develop
```
Or you can fork the project, make your changes there and merge new features when needed.
Alternatively:
```sh
git clone https://github.com/Vagr9K/gatsby-material-starter YourProjectName # Clone the project
cd YourProjectname
rm -rf .git # So you can have your own changes stored in VCS.
npm install # or yarn install
npm run develop # or gatsby develop
```
## Configuration
Edit the export object in `data/SiteConfig`:
```js
module.exports = {
blogPostDir: "sample-posts", // The name of directory that contains your posts.
siteTitle: "Gatsby Material Starter", // Site title.
siteTitleAlt: "GatsbyJS Material Starter", // Alternative site title for SEO.
siteLogo: "/logos/logo-1024.png", // Logo used for SEO and manifest.
siteUrl: "https://vagr9k.github.io", // Domain of your website without pathPrefix.
pathPrefix: "/gatsby-material-starter", // Prefixes all links. For cases when deployed to example.github.io/gatsby-material-starter/.
siteDescription: "A GatsbyJS stater with Material design in mind.", // Website description used for RSS feeds/meta description tag.
siteRss: "/rss.xml", // Path to the RSS file.
siteFBAppID: "1825356251115265", // FB Application ID for using app insights
siteGATrackingID: "UA-47311644-4", // Tracking code ID for google analytics.
disqusShortname: "https-vagr9k-github-io-gatsby-material-starter", // Disqus shortname.
postDefaultCategoryID: "Tech", // Default category for posts.
userName: "Material User", // Username to display in the author segment.
userTwitter: "", // Optionally renders "Follow Me" in the UserInfo segment.
userLocation: "North Pole, Earth", // User location to display in the author segment.
userAvatar: "https://api.adorable.io/avatars/150/test.png", // User avatar to display in the author segment.
userDescription:
"Yeah, I like animals better than people sometimes... Especially dogs. Dogs are the best. Every time you come home, they act like they haven't seen you in a year. And the good thing about dogs... is they got different dogs for different people.", // User description to display in the author segment.
// Links to social profiles/projects you want to display in the author segment/navigation bar.
userLinks: [
{
label: "GitHub",
url: "https://github.com/Vagr9K/gatsby-material-starter",
iconClassName: "fa fa-github"
},
{
label: "Twitter",
url: "https://twitter.com/Vagr9K",
iconClassName: "fa fa-twitter"
},
{
label: "Email",
url: "mailto:[email protected]",
iconClassName: "fa fa-envelope"
}
],
copyright: "Copyright © 2017. Material User" // Copyright string for the footer of the website and RSS feed.
};
```
You can also optionally set `pathPrefix`:
```js
module.exports = {
// Note: it must *not* have a trailing slash.
pathPrefix: "/gatsby-material-starter" // Prefixes all links. For cases when deployed to example.github.io/gatsby-material-starter/.
};
```
NOTE: `user*`, `disqusShortname` and `copyright` are optional and won't render if omitted.
WARNING: Make sure to edit `static/robots.txt` to include your domain for the sitemap!
## Theming
Edit `src/layouts/theme.scss` to suit your needs.
You can use [Material color palette](https://react-md.mlaursen.com/customization/colors) provided by React-MD.
```css
@import "~react-md/src/scss/react-md";
$md-primary-color: $md-grey-400;
$md-secondary-color: $md-red-800;
$md-tertiary-color: $md-grey-300;
```