zeikar/issueage

Create Blog/Github Pages with Github Issues.

Hi 👋, I'm Zeikar 😝

A software engineer who loves developing and challenging.

• 🌱 I’m currently learning Flutter, Svelte, Golang

• 📝 I regulary write articles on https://zeikar.github.io/

• 📄 And also practice competitive programming. Leetcode / Codeforces / Atcoder

• 📫 How to reach me [email protected]

Connect with me:

Languages and Tools:

 

Support:

issueage's Issues

test

Marked - Markdown Parser

Marked lets you convert Markdown into HTML. Markdown is a simple text format whose goal is to be very easy to read and write, even when not converted to HTML. This demo page will let you type anything you like and see how it gets converted. Live. No more waiting around.

How To Use The Demo

1. Type in stuff on the left.
2. See the live updates on the right.

That's it. Pretty simple. There's also a drop-down option in the upper right to switch between various views:

• Preview: A live display of the generated HTML as it would render in a browser.
• HTML Source: The generated HTML before your browser makes it pretty.
• Lexer Data: What marked uses internally, in case you like gory stuff like this.
• Quick Reference: A brief run-down of how to format things using markdown.

Why Markdown?

It's easy. It's not overly bloated, unlike HTML. Also, as the creator of markdown says,

The overriding design goal for Markdown's
formatting syntax is to make it as readable
as possible. The idea is that a
Markdown-formatted document should be
publishable as-is, as plain text, without
looking like it's been marked up with tags
or formatting instructions.

Ready to start writing? Either start changing stuff on the left or
clear everything with a simple click.

Handling 404 not found error

Add 404 not found page

Add Google Analytics

https://analytics.google.com/analytics/web/

Search issues

Search issues from Navbar

Search by issue title and content??

시각 표시 업데이트

좀 더 예쁘게 표시

• ago 를 써야할까?? (n일 전)
• 날짜까지만 표시할까??

Set the color of tags to the color of labels.

• Get color of the labels (label.color)

Add some Github files (contribute, readme ... )

• 라이센스 추가 (MIT)
• README 수정
• 기타 깃허브 관련 파일들 (contribute)

Add thumbnails

Extract the first image tag from markdown and use it as a thumbnail

프로필 가져오기

깃허브 프로필 가져와서 화면에 뿌리기

config.json 만들고 여기서 설정 가져오도록!

config.json에 페이지 이름, 레파지토리 주소 등 넣기

마크다운 -> html 변환

• article item 으로 미리보기
• article details 로 자세히 보기

=> html로 변환 필요.

marked

pre-commit 적용

https://www.npmjs.com/package/pre-commit

커밋 전에 포맷팅 돌려주도록 수정.

• eslint 도 필요할듯..

router 적용

게시글 리스트, 게시글 이동을 위해서 라우터가 필요한데...

1. 직접 개발?
2. svelte-routing (https://github.com/EmilTholin/svelte-routing)

아쉽게도 svelte 공식 라우터는 아직 없음.

전체 화면 디자인 및 레이아웃

다른 블로그 스킨 및 템플릿도 보면서 정하기로

Update to use await blocks

https://svelte.dev/tutorial/await-blocks

Much more concise!

Add articles header

• Show selected tags, search keyword in header.

Add utteranc.es as comments system

https://utteranc.es/

Uses Github issues as comments. It seems to fit the Issueage well.

Add table of contents side menu

• Add anchor links in main contents

• Add table of contents side menu

• Anchor links is not working on svelte-spa-router... so we have to implement anchor parser and navigate to anchor link manually.

태그 기능 구현

태그 별로 묶어보기 및 글의 태그 출력

태그는 이슈의 Labels 사용하면 됨.

Refactoring

• Use named-slots to show loaders. https://svelte.dev/tutorial/named-slots
• Project structures (components > views?)

Improve Marked renderer

• https://marked.js.org/using_pro#renderer
• Add anchor links, images ...

Improve navbar

• Use svelte-spa-router to go home.
• Add burger menu for mobile.

로딩 스크린

게시글 및 게시글 리스트 불러올 때 로딩 바

Change page title dynamically

Change page title dynamically.
Use svelte:head element?

<!-- MyPage.svelte -->
<svelte:head>
  <title>Page Title goes here</title>
</svelte:head>

Github Actions으로 배포

푸시하면 빌드해서 gh-pages 브랜치로 배포하기.

라이브 데모 가능

Add Discussions based blog system

• Add an option so that it uses Github Discussions instead of Github Issues.
• Inspired by giscus

Update libraries

• Svelte, Rollup ...

Pagination

• 무한 스크롤
• 더보기
• 페이지네이션

게시글은 페이지네이션으로 해야할듯 한데... 태그는 또 무한스크롤이나 더보기가 좋을듯 하고

게시글 상세 페이지

대부분은 일단 기존 내 블로그 (https://github.com/zeikar/Zeikar-blog) 스타일 그대로.

나중에 커스터마이징은 해야지
(lazy loading, css tweaks)

Show not found message when articles are empty

• Show not found message when articles are empty

Print out the number of comments of an issue

Print out the number of comments of an issue

Github API를 REST 로 변경

GraphQL 를 사용할 경우 auth 토큰이 반드시 필요.

https://github.community/t/api-v4-permit-access-without-token/13833

당분간 업데이트는 안될 듯 하다
그렇다고 개발을 너무 오래 중단했으니...아쉽지만 REST로 일단 개발.

Github REST 공식 라이브러리가 있으므로 그대로 사용.

https://github.com/octokit/rest.js