dferber90 / gatsby-starter-help-center Goto Github PK

View Code? Open in Web Editor NEW

102.0 4.0 25.0 3.4 MB

📙A free self-hosted help center

Home Page: https://help.dferber.de/

License: MIT License

JavaScript 100.00%

helpcenter gatsby-starter gatsby knowledge-base help-center

gatsby-starter-help-center's Introduction

gatsby-starter-help-center

Kick off your project with this help center boilerplate. This starter ships with the main Gatsby configuration files you might need to get up and running blazing fast with the blazing fast app generator for React.

This README is a brief overview only. You can find the full documentation at help.dferber.de. That documentation site was built with this help center. Visit it to see what the help center looks like in production.

This project was archived in 2022. You can check out helpkit.so or any of the other alternative solutions.

🚀 Quick start

Clone the starter.

Use the Gatsby CLI to create a new site, specifying the help center starter.

# create a new Gatsby site using the help center starter
gatsby new help-center dferber90/gatsby-starter-help-center

Start developing.

Navigate into your new site’s directory and start it up.
```
cd help-center/
gatsby develop
```
Open the source code and start editing!

Your site is now running at http://localhost:8000!

Note: You'll also see a second link: http://localhost:8000/___graphql. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the Gatsby tutorial.

Open the help-center directory in your code editor of choice and edit content/articles/welcome/index.md. Save your changes and the browser will update in real time!

🧐 What's inside?

A quick look at the most important files and directories you'll need to edit.

.
|____README.md
|____gatsby-config.js
|____content
| |____welcome
| | |____index.md
| |____second-article
| | |____some-image.png
| | |____index.md
|____assets
| |____favicon.png
|____data
| |____collections.yml
| |____authors.yml
| |____avatars
| | |____dferber.png
| | |____amanda.jpg
| | |____bert.jpg

gatsby-config.js: This is the main configuration file for a Gatsby site. This is where you can specify information about your site (metadata) like the site title and description, which Gatsby plugins you’d like to include, etc. (Check out the config docs for more detail).
content/articles: This is the folder where you'll place your articles.
data/collections.yml: This file defines the collections of your help center. Each article will belong to one collection. A collection consists of many articles. A collection can have different sections which its articles may belong to.
data/authors.yml: This file is where you'll list your authors. Every author needs an id, a name and an avatar. You can add an author to each article.
data/avatars: Place the author's avatars in this folder and use them in authors.yml.

🎓 Learning Gatsby

Looking for more guidance? Full documentation for Gatsby lives on the website. Here are some places to start:

For most developers, we recommend starting with our in-depth tutorial for creating a site with Gatsby. It starts with zero assumptions about your level of ability and walks through every step of the process.
To dive straight into code samples, head to our documentation. In particular, check out the Guides, API Reference, and Advanced Tutorials sections in the sidebar.

💫 Examples

Projects built with gatsby-starter-help-center:

This repositorys docs itself at help.dferber.de
katakata.my
help.tugify.com
help.simplimail.co
support.bikecomparator.com
world-help.netlify.app

...you can open a PR and add your project to this list once you're up and running

gatsby-starter-help-center's People

Contributors

Stargazers

Watchers

gatsby-starter-help-center's Issues

Add IDs to content articles

Hi,
I tried out the site but out of the box there were a lot of errors. Finally figured out that I needed to add an id to all the articles for it to load correctly. Did I miss something? Thanks for all the work on this, its perfect for what I need

mix .md and .js articles

Hi!

I totally love your Help Desk starter and would like to use it for a website. However, I have some content that I have to provide in .js and cannot change in .md. Is it possible to mix articles written in .md and .js? Which changes would I have to introduce and where? I am new to gatsby and still a bit confused about slugs, nodes and so on. I would definitely appreciate some help to get started with the required changes.

Thanks a lot!

Article translations

Hi! Just checking out this project, and I did not see anything about translations. Does this project support translations? If not, are there plans to do it?

Thanks!

Comments on "Feature List"

Hi!

I've got some comments on your feature comparison. You can take this as an inspiration for a TODO list or feel free to ignore it :)

Quoting from: https://help.dferber.de/articles/comparison-to-saas/

No WYSIWYG-editor
The free help center is based on markdown-files

You can use something like TinaCMS (https://tinacms.org/) to have such an experience. If you convert the starter to a theme with generic GraphQL interfaces other people could implement the data from another data source, e.g. Sanity.io which has real-time previews. Or people can use "Preview" from Gatsby Cloud: https://www.gatsbyjs.com/cloud/

No automated “last modified” dates

You can access via the parent on markdown nodes the File node which has this information. See: https://www.lekoarts.de/en/blog/tips-and-tricks-for-gatsby#date-of-last-modification

Greetings from Germany 👋

How could I load contents remotely

As the title, I wanna load collections and articles remotely, such as github blob, how cloud I do to make it work? thanks!

Convert to gatsby-theme-help-center

Converting this starter to a Gatsby theme would have some advantages:

updates and bug-fixes are distributed to consumers automatically
less setup needs to be done by users

On the other hand, it would make customization a bit harder. People need to customize it a lot could use the starter instead.

To convert this starter to a theme, we'd at least need to:

deal with the logo
offer a way to overwrite
- src/utils/typography.js
- src/gatsby-plugin-theme-ui/index.js
- src/components/logo.js

We'd further need to:

find a way for people to add defaults to siteMetadata.texts (or maybe we can just keep them in our own gatsby-config.js and it will "just work"?)

And we'd need to mingle with the file paths in order to find the content from the root folder, instead of from node_modules/gatsby-theme-help-center where they'd end up (this is mentioned in the guide).

Search

hi thx,
How to make the search engine find the headers and not just the titles?

[breadcrumb and search] don't work

Hi,

I tried using this great starter-gatsby but the bread crumb and search don't work.

I don't know why.

This is my console:

I am a user and your package is very nice

Hi Dominik,
Ask asked in the documentation I am opening an issue to inform you that I am using your package:

https://support.bikecomparator.com

It is very nice and very simple to use!
I have of course some suggestions (like being able to customize the main icon and title, or remove the search field for instance), but it is already very good and usable.

I really encourage you to continue the development!

best regards!

CMS Integration

First off, this package looks amazing and is a huge $ saver for my startup. It saves me from having to go with a $120/month intercom solution just for help docs.

I am curious if there are any tutorials I could follow to integrate this with a popular cms (prismic, contentful, sanity, etc..) Ideally I would like to have my non-developer co-founder be able to edit docs in a more user-friendly way. I can work around it if needed though.

GitHub pages

When trying to use PathPrefix and host through GitHub pages most subpages won't load since they won't pick up the prefix, not sure if there are additional lines I have to edit so it inherits the PathPrefix, any help would be greatly appreciated!