1

Live demo

Changes are automatically rendered as you type.

Table of Contents

• Implements GitHub Flavored Markdown
• Renders actual, "native" React DOM elements
• Allows you to escape or skip HTML (try toggling the checkboxes above)
• If you escape or skip the HTML, no dangerouslySetInnerHTML is used! Yay!

HTML block below

This blockquote will change based on the HTML settings above.

How about some code?

var React = require('react');
var Markdown = require('react-markdown');

React.render(
  <Markdown source="# Your markdown here" />,
  document.getElementById('content')
);

Pretty neat, eh?

More info?

Read usage information and more on Github. These tell git to add all the work that you’ve done so far into one tidy package called a “commit.” Then, it names your commit to represent the changes that you’ve made. For my first commit, I always call it “initial commit.” However, if you just built your header HTML, you might call your commit “header HTML.” You should see something like this:

A component by Saad Pasta

TINAIB Is Not An Issue Blog!

Does it really works?
I say yes!

Looking forward to seeing this finished. I had plans to develop a similar blogging system for a forum section on an upcoming project. Would love to implement this in my platform !

Also a suggestion :

You could use repository or gists as storage for the blogs instead of issues since they can get tedious to maintain pretty fast for long term.

Currently, the user needs to comment on the Github Issue on the repo to view its comment on the blog.
We need a input on the blog so user can post comment on the blog using the blog itself just like reactions.

Todo ✔️
Check if the user is logged in then show comment input.
Create a GraphQL query to post a comment on Github Issue

On clicking the back button on Blog that doesn't work. It shows a loading sreen and then again comes to the same page. Please check it out.

Welcome to StackEdit!

Hi! I'm your first Markdown file in StackEdit. If you want to learn about StackEdit, you can read me. If you want to play with Markdown, you can edit me. Once you have finished with me, you can create new files by opening the file explorer on the left corner of the navigation bar.

Files

StackEdit stores your files in your browser, which means all your files are automatically saved locally and are accessible offline!

Create files and folders

The file explorer is accessible using the button in left corner of the navigation bar. You can create a new file by clicking the New file button in the file explorer. You can also create folders by clicking the New folder button.

Switch to another file

All your files and folders are presented as a tree in the file explorer. You can switch from one to another by clicking a file in the tree.

Rename a file

You can rename the current file by clicking the file name in the navigation bar or by clicking the Rename button in the file explorer.

Delete a file

You can delete the current file by clicking the Remove button in the file explorer. The file will be moved into the Trash folder and automatically deleted after 7 days of inactivity.

Export a file

You can export the current file by clicking Export to disk in the menu. You can choose to export the file as plain Markdown, as HTML using a Handlebars template or as a PDF.

Synchronization

Synchronization is one of the biggest features of StackEdit. It enables you to synchronize any file in your workspace with other files stored in your Google Drive, your Dropbox and your GitHub accounts. This allows you to keep writing on other devices, collaborate with people you share the file with, integrate easily into your workflow... The synchronization mechanism takes place every minute in the background, downloading, merging, and uploading file modifications.

There are two types of synchronization and they can complement each other:

• The workspace synchronization will sync all your files, folders and settings automatically. This will allow you to fetch your workspace on any other device.

  To start syncing your workspace, just sign in with Google in the menu.

• The file synchronization will keep one file of the workspace synced with one or multiple files in Google Drive, Dropbox or GitHub.

  Before starting to sync files, you must link an account in the Synchronize sub-menu.

Open a file

You can open a file from Google Drive, Dropbox or GitHub by opening the Synchronize sub-menu and clicking Open from. Once opened in the workspace, any modification in the file will be automatically synced.

Save a file

You can save any file of the workspace to Google Drive, Dropbox or GitHub by opening the Synchronize sub-menu and clicking Save on. Even if a file in the workspace is already synced, you can save it to another location. StackEdit can sync one file with multiple locations and accounts.

Synchronize a file

Once your file is linked to a synchronized location, StackEdit will periodically synchronize it by downloading/uploading any modification. A merge will be performed if necessary and conflicts will be resolved.

If you just have modified your file and you want to force syncing, click the Synchronize now button in the navigation bar.

Note: The Synchronize now button is disabled if you have no file to synchronize.

Manage file synchronization

Since one file can be synced with multiple locations, you can list and manage synchronized locations by clicking File synchronization in the Synchronize sub-menu. This allows you to list and remove synchronized locations that are linked to your file.

Publication

Publishing in StackEdit makes it simple for you to publish online your files. Once you're happy with a file, you can publish it to different hosting platforms like Blogger, Dropbox, Gist, GitHub, Google Drive, WordPress and Zendesk. With Handlebars templates, you have full control over what you export.

Before starting to publish, you must link an account in the Publish sub-menu.

Publish a File

You can publish your file by opening the Publish sub-menu and by clicking Publish to. For some locations, you can choose between the following formats:

• Markdown: publish the Markdown text on a website that can interpret it (GitHub for instance),
• HTML: publish the file converted to HTML via a Handlebars template (on a blog for example).

Update a publication

After publishing, StackEdit keeps your file linked to that publication which makes it easy for you to re-publish it. Once you have modified your file and you want to update your publication, click on the Publish now button in the navigation bar.

Note: The Publish now button is disabled if your file has not been published yet.

Manage file publication

Since one file can be published to multiple locations, you can list and manage publish locations by clicking File publication in the Publish sub-menu. This allows you to list and remove publication locations that are linked to your file.

Markdown extensions

StackEdit extends the standard Markdown syntax by adding extra Markdown extensions, providing you with some nice features.

ProTip: You can disable any Markdown extension in the File properties dialog.

SmartyPants

SmartyPants converts ASCII punctuation characters into "smart" typographic punctuation HTML entities. For example:

KaTeX

You can render LaTeX mathematical expressions using KaTeX:

The Gamma function satisfying $\Gamma(n) = (n-1)!\quad\forall n\in\mathbb N$ is via the Euler integral

$$ \Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt,. $$

You can find more information about LaTeX mathematical expressions here.

UML diagrams

You can render UML diagrams using Mermaid. For example, this will produce a sequence diagram:

sequenceDiagram
Alice ->> Bob: Hello Bob, how are you?
Bob-->>John: How about you John?
Bob--x Alice: I am good thanks!
Bob-x John: I am good thanks!
Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.

Bob-->Alice: Checking with John...
Alice->John: Yes... John, how are you?

And this will produce a flow chart:

graph LR
A[Square Rect] -- Link text --> B((Circle))
A --> C(Round Rect)
B --> D{Rhombus}
C --> D

The idea here would be to have an issue tagged "about" and retrieve it in the blog (add an "About" link in the navbar).
It will provides more details about the author.

If a blog has a lot of articles, we need to set up some pagination to avoid infinite scrolling

It's a title

Some code here

Bold hereeeee

1. ABC
2. DEF
3. GRF

Currently, react-blog-github uses GitHub Personal Access Token to fetch the GitHub issues related to it. I have removed my own token from the code as it can be dangerous. We need to find a better way of fetching the GitHub issues and keeping the token saved in some secret maybe.

Solution 1 :
Could be saved the token as a GitHub secret and fetched it at build time from the secrets and use it maybe.

We can also find another alternative to fetching the public GitHub issue without using any of the token

It does not work on the example website link

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lacus nibh, feugiat facilisis nulla vulputate, dictum vehicula ligula. Sed pellentesque orci magna, nec ultricies leo cursus ut. Nullam augue neque, egestas ac cursus eget, aliquet sed lacus. Aenean auctor feugiat dolor ut pretium. Aliquam placerat eleifend nulla, eget semper nisi. Etiam sit amet tortor ultrices, laoreet nunc eget, tempor purus. Donec ligula sem, vulputate nec nibh a, aliquam mollis risus.

Sed vehicula tempor ex, ut tincidunt nisl lobortis sit amet. Etiam scelerisque nisl lacus, eget volutpat augue scelerisque rhoncus. Proin non vulputate est. Fusce enim metus, ornare sed nunc eu, vulputate aliquam velit. Nulla at maximus dolor. Etiam mattis tincidunt est et feugiat. Donec a consectetur velit. Nullam consequat ut dolor viverra pharetra. Integer imperdiet dictum felis, vel dignissim nibh accumsan at.

Maecenas arcu ex, ultricies sed urna in, euismod hendrerit arcu. In efficitur ligula ac nisi scelerisque, et sagittis mauris consequat. Aliquam luctus, sapien eu fringilla tincidunt, ante dolor commodo mi, suscipit semper ante odio id ex. Cras eget dui interdum, egestas neque a, semper enim. Fusce eget tortor at massa porta sagittis. Pellentesque nec neque mattis, tristique magna a, hendrerit dolor. Fusce fermentum libero felis, non cursus nulla facilisis sed.

Nulla porta sapien iaculis sodales ultricies. Duis in fermentum leo. Morbi euismod nisi sed quam consectetur viverra. Phasellus in aliquam tortor, vel consectetur arcu. Etiam elementum faucibus mi, sed varius diam consectetur eu. Proin commodo tellus in ipsum pretium, ut vestibulum purus feugiat. Sed sed eleifend erat, non tristique leo. Aenean feugiat, lacus eu ultricies fringilla, tortor tellus luctus nunc, eu viverra ipsum nisi ut ex. Nam interdum dictum lorem, vitae viverra purus laoreet sed. Aliquam justo tellus, aliquet id velit nec, posuere dignissim nisl. Praesent a tempus libero. Suspendisse nisi erat, cursus ut libero sed, maximus egestas purus. Vivamus nunc ipsum, bibendum id libero vel, ornare dapibus justo. Donec rutrum tortor vitae suscipit posuere.

Suspendisse ac quam fringilla, elementum velit eu, interdum diam. Cras quam erat, porta non efficitur sed, venenatis blandit velit. In ac metus mi. Nulla ornare lectus diam, ac pharetra eros suscipit eget. Donec tempus quam at dictum imperdiet. Sed vel blandit nibh. Integer eleifend nulla in ex sagittis, quis suscipit nisl feugiat. Nullam nec placerat turpis, id sollicitudin nibh. Integer ut ultricies magna. Donec eget orci mollis, scelerisque lorem in, lacinia dolor. Etiam egestas blandit nulla, vestibulum sagittis turpis malesuada at. Pellentesque ut urna dolor.

Intro Blog #61

Most applications nowadays have dark mode and it is commonly used in Blog for reader to read with more ease. I guess we should implement Dark Model in react-blog-github.

When I edit the portfolio.js file on my github, the change is not seen in the github page even after waiting 2hours. Please help I am newbie

FIRST TEST

it is not fetching blogs from issue.... (please help me as I am a newbee)

something

Live demo

Changes are automatically rendered as you type.

Table of Contents

• Implements GitHub Flavored Markdown
• Renders actual, "native" React DOM elements
• Allows you to escape or skip HTML (try toggling the checkboxes above)
• If you escape or skip the HTML, no dangerouslySetInnerHTML is used! Yay!

HTML block below

This blockquote will change based on the HTML settings above.

How about some code?

var React = require('react');
var Markdown = require('react-markdown');

React.render(
  <Markdown source="# Your markdown here" />,
  document.getElementById('content')
);

Pretty neat, eh?

More info?

Read usage information and more on Github. These tell git to add all the work that you’ve done so far into one tidy package called a “commit.” Then, it names your commit to represent the changes that you’ve made. For my first commit, I always call it “initial commit.” However, if you just built your header HTML, you might call your commit “header HTML.” You should see something like this:

A component by Saad Pasta

Hi! I'm your first Markdown file in StackEdit. If you want to learn about StackEdit, you can read me. If you want to play with Markdown, you can edit me. Once you have finished with me, you can create new files by opening the file explorer on the left corner of the navigation bar.

Files

StackEdit stores your files in your browser, which means all your files are automatically saved locally and are accessible offline!

Create files and folders

The file explorer is accessible using the button in left corner of the navigation bar. You can create a new file by clicking the New file button in the file explorer. You can also create folders by clicking the New folder button.

Switch to another file

All your files and folders are presented as a tree in the file explorer. You can switch from one to another by clicking a file in the tree.

Rename a file

You can rename the current file by clicking the file name in the navigation bar or by clicking the Rename button in the file explorer.

Delete a file

You can delete the current file by clicking the Remove button in the file explorer. The file will be moved into the Trash folder and automatically deleted after 7 days of inactivity.

Export a file

You can export the current file by clicking Export to disk in the menu. You can choose to export the file as plain Markdown, as HTML using a Handlebars template or as a PDF.

Synchronization

Synchronization is one of the biggest features of StackEdit. It enables you to synchronize any file in your workspace with other files stored in your Google Drive, your Dropbox and your GitHub accounts. This allows you to keep writing on other devices, collaborate with people you share the file with, integrate easily into your workflow... The synchronization mechanism takes place every minute in the background, downloading, merging, and uploading file modifications.

There are two types of synchronization and they can complement each other:

• The workspace synchronization will sync all your files, folders and settings automatically. This will allow you to fetch your workspace on any other device.

  To start syncing your workspace, just sign in with Google in the menu.

• The file synchronization will keep one file of the workspace synced with one or multiple files in Google Drive, Dropbox or GitHub.

  Before starting to sync files, you must link an account in the Synchronize sub-menu.

Open a file

You can open a file from Google Drive, Dropbox or GitHub by opening the Synchronize sub-menu and clicking Open from. Once opened in the workspace, any modification in the file will be automatically synced.

Save a file

You can save any file of the workspace to Google Drive, Dropbox or GitHub by opening the Synchronize sub-menu and clicking Save on. Even if a file in the workspace is already synced, you can save it to another location. StackEdit can sync one file with multiple locations and accounts.

Synchronize a file

Once your file is linked to a synchronized location, StackEdit will periodically synchronize it by downloading/uploading any modification. A merge will be performed if necessary and conflicts will be resolved.

If you just have modified your file and you want to force syncing, click the Synchronize now button in the navigation bar.

Note: The Synchronize now button is disabled if you have no file to synchronize.

Manage file synchronization

Since one file can be synced with multiple locations, you can list and manage synchronized locations by clicking File synchronization in the Synchronize sub-menu. This allows you to list and remove synchronized locations that are linked to your file.

Publication

Publishing in StackEdit makes it simple for you to publish online your files. Once you're happy with a file, you can publish it to different hosting platforms like Blogger, Dropbox, Gist, GitHub, Google Drive, WordPress and Zendesk. With Handlebars templates, you have full control over what you export.

Before starting to publish, you must link an account in the Publish sub-menu.

Publish a File

You can publish your file by opening the Publish sub-menu and by clicking Publish to. For some locations, you can choose between the following formats:

• Markdown: publish the Markdown text on a website that can interpret it (GitHub for instance),
• HTML: publish the file converted to HTML via a Handlebars template (on a blog for example).

Update a publication

After publishing, StackEdit keeps your file linked to that publication which makes it easy for you to re-publish it. Once you have modified your file and you want to update your publication, click on the Publish now button in the navigation bar.

Note: The Publish now button is disabled if your file has not been published yet.

Manage file publication

Since one file can be published to multiple locations, you can list and manage publish locations by clicking File publication in the Publish sub-menu. This allows you to list and remove publication locations that are linked to your file.

Markdown extensions

StackEdit extends the standard Markdown syntax by adding extra Markdown extensions, providing you with some nice features.

ProTip: You can disable any Markdown extension in the File properties dialog.

SmartyPants

SmartyPants converts ASCII punctuation characters into "smart" typographic punctuation HTML entities. For example:

KaTeX

You can render LaTeX mathematical expressions using KaTeX:

The Gamma function satisfying $\Gamma(n) = (n-1)!\quad\forall n\in\mathbb N$ is via the Euler integral

$$ \Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt,. $$

You can find more information about LaTeX mathematical expressions here.

UML diagrams

You can render UML diagrams using Mermaid. For example, this will produce a sequence diagram:

sequenceDiagram
Alice ->> Bob: Hello Bob, how are you?
Bob-->>John: How about you John?
Bob--x Alice: I am good thanks!
Bob-x John: I am good thanks!
Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.

Bob-->Alice: Checking with John...
Alice->John: Yes... John, how are you?

And this will produce a flow chart:

graph LR
A[Square Rect] -- Link text --> B((Circle))
A --> C(Round Rect)
B --> D{Rhombus}
C --> D

As it's a blog system we need SEO and for that, we need to use React Helmet for SEO.
If there some other thing we can use for SEO, please suggest

The page is no more working please check it.

It would be great to choose which fonts to load from Google Fonts in config.js.

e.g.:

{
   titleFont: 'Open Sans',
   contentFont: 'Roboto',
}

Test Issue

when blog open from a demo link in github, back button redirect to github page where the Link is open not the main blog page.

window.referrer does not go to the index page

I noticed when I change the repository visibility to public then the app runs. When it was private it throws a map error. Am I doing something wrong?

Currently, we are having breaking security vulnerabilities that we need to fix.

Steps to reproduce :

run npm audit you would see a list of vulnerabilities and you can fix that one by one.

Summary
Currently, the complete react-blog-github is being rendered client side which results in low performance and no SEO.

My plan is to move the complete project to Static Site Generation in a short move the client side to a static site. We might have problems with rendering real-time comments

I have NextJs in mind with ISR.

We can also move to Gatsby but I am not sure about the support currently I have built two projects next and it's a lot more stable.

What's new?
We will be moving to static sites nothing would change in jsx. The API call to GitHub for GitHub issues and other things might change. This would be a pretty big change and I am not sure how we would do it without affecting our current code. We will keep building a new version of it moving one piece one by one and then when it's done we will make it live.

Motivation
First, static sites are much faster and more performant than client-side rendered applications. This is because the content is pre-rendered and served directly from the server, rather than being generated on the client side. This means that the pages will load much faster for users, which is especially important for a project like developerFolio which may be used by developers for their portfolios.

Second, static sites are more secure than client-side rendered applications. Since the content is pre-rendered, there is no risk of user input being injected into the page and potentially causing security vulnerabilities. This is an important consideration for any open-source project that may have a large user base.

Overall, moving react-blog-github to a static site using Next.js would likely provide numerous benefits for users

I'm just trying to check if it's possible for everyone to create an issue

test

How to reproduce

1. Open an article
2. Go to the bottom and move the mouse over the reaction emojis
   
3. Click on the blue smiley on the right to open the GitHub react card

Expected

Able to close the card

Actual

No way to close the card

Hint

• That could be solved with an event on a button and/or Esc key
• Another solution is to close when the mouse leaves the react card or when a touch event is triggered outside of the react card (which implies that the react card is positioned under the mouse/touch point)

Demo

Add this according to README.md.

Cool thing we'll be able to do with this:

• Add reactions
• View Comments
• Add comments
• Edit comments
• Add reactions on comments
• Add new articles (if user = owner)
• Edit an article (if user = owner)

All of this, directly on the website.

I clone and publish my blog based on your source code. https://tuanhv.dev

I don't know why my second and the third post did not show content detail, although the first one showed.

Can you help me?

How can I fork this project and publish as a github page? Thanks a lot!

Hello world this is a new post

More detail: https://stackoverflow.com/questions/58597594/github-api-token-use-in-github-pages

We need to add a loader when getting data from Github.

When clicking an article, there is currently no way to return to the home list. A good UX improvement would be to add this back button to prevent the user from having to press the browser's back button.

Just testing this quickly. Sorry for the inconvenience