Giter VIP home page Giter VIP logo

velog's Introduction

velog (v1, Archived)

This project is source code of velog v1. After v2 update, this project is now archived. For source code of v2, check out the links below:

velog is a blog platform for developers. It provides compfy markdown editor with syntax highlighter enabled. Currently, the service is only available in Korean.

https://velog.io

The whole process of project development is recorded in my Youtube Channel. Live stream is held at 11:00 PM KST everyday.

Project Stack

Client

Following items are core frontend technologies used in this project:

  • React
  • React Router v4
  • Sass
  • Flow
  • Redux
  • Redux-pender
  • Immer
  • Marked
  • Prismjs
  • CodeMirror

Server

Following items are core backend technologies used in this project:

  • Node.js
  • Koa
  • Sequelize
  • Sequelize-cockroachdb
  • Serverless (with AWS Lambda)
  • Flow (on Service API)
  • TypeScript (on SSR)

Project Architecture

(Image above is created with Cloudcraft)

This service heavily relies on AWS Lambda. Its server side rendering function and every service API are hosted on AWS Lambda.

Run on your machine

If you want to run velog on your machine, please check Guidelines document.

Contributions

Any kinds of contributions are welecomed. Since the test codes of the project is not completed yet, pull requests might take a while.

velog's People

Contributors

sq787 avatar velopert avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

velog's Issues

다른 포스트 영역 UX 개선

안녕하세요.
좋은 서비스 만들어주셔서 감사합니다.
사용해보면서 느꼈던 개선점 한가지 적어봅니다 :D

Summary

다른 포스트 영역에서 관련된 다른 글을 보고싶어서 넘기려 했는데 클릭 영역이 제목으로 한정되어 있어서, 이동하는 부분을 찾기가 조금 힘들었습니다. 클릭영역을 더 크게 잡으면 넘어가기 쉬울 것 같다는 생각이 들었습니다 :D

image

Improvement Proposal

As-Is

클릭영역이 제목으로 한정되어 있다.

To-Be

클릭영역을 카드템플릿 영역으로 확장한다.

감사합니다.

치명적인 문제점이 발견되었으니 빠른 수정 부탁합니다.

2018년 09월 03일 01시 발견된 문제점

  1. 프로필 사진에 Animated GIF를 그대로 설정할 수 있습니다. (velog 사이트에 글 쓴 테스트 계정 참고바람)
  2. 그리고 가장 중요한 것, 이미지 파일 외의 다른 파일도 첨부 가능한 문제가 있습니다. 확장자와 파일 헤더 체크하는 로직이 아예 구현이 안 되어 있네요.

Zero Width Space (U+200B)를 통해 공백 텍스트 입력 가능

여기에서 보이듯이 U+200B문자를 통해 공백 제목과 내용을 입력할 수 있네요 아마도 36번째 이슈랑 비슷하게 태그랑 댓글 필명도 입력할 수 있을거 같은데 이건 테스트를 안해봐서 모르겠네요. 저 이슈를 처리해준 것과 비슷하게 필터링 해주시면 될 것 같습니다. 언제나 수고하십니다!

shortcut icon

image

일부러 초기 상태로 유지하시는건지는 모르겠지만 velog 공식 로고로 바꾸는건 어떨까요?

기능 요청)

첫 포스팅 후기입니다 ㅎㅎ.

  1. 썸네일을 본문에 이미 사용한 이미지 중 선택할 수 있는 기능
    (현재는 썸네일을 다시 업로드 해야되더라구요)
  2. Tag를 공백으로 구분한다는 안내 (사소하지만...)
    (placeholder 정도 추가하면 될 것 같아요.)
  3. 포스트 작성 중 현재 포스트에 적용된 태그 확인
    (태그 인풋 위에 미리 보기 정도 있으면 좋을 것 같아요.)
  4. 포스트 자동 저장 시 토스트 메시지 (가 있으면 좋겠습니다. 언제 저장되는 지 알고 싶어요).
    (화면 중간 아래쯤에 저장중 ~ 메시지가 뜨면 좋을 것 같습니다.)

Velog 흥해라!

미등록 모드

예를 들어 테스트 글을 작성하거나, 리스트에 나타나는 것을 원하지 않을 때

최신 포스트와 트렌딩 리스트에 나타나지 않도록 미등록으로 게시하는 기능이 있었으면 합니다.
(이 경우 URL로 게시물을 공유할 수 있음)

추가로 비공개 포스트 기능(나만 보기 또는 암호 설정)도 있었으면 합니다.

포스트 에디터 HTML 구문강조 오류

image
image
위에서 보이듯이 HTML 태그의 속성의 변수 안에 공백이 들어가면 첫번째 태그의 강조가 사라집니다.
탭이나 한글채움 문자는 그렇지 않고 오로지 스페이스바 공백(U+0020)만 이런 현상이 발생합니다.

임시 저장을 작성하기 박스 안에 넣기

굳이 헤더로 나와있을 필요 없음.
이번 버전에서는 툴바는 포기해야겠다. 너무 공수생각보다 클듯 + 지금 UI 구성을 많이 뜯어고쳐야하는데
지금은 이미지 업로드버튼만 고려하면되니까
툴바는 다음버전에서

일단, 임시저장버튼 자리에 이미지업로드버튼 넣는걸로 해결하자.

유저 페이지 버그

태그 선택했을때 SSR 잘 안먹힘 ( 태그선택을 안하네?)
그리고 태그순서가 같은 수치일때 제각각임

아마 그걸해야할듯. 그... 날짜로 한번더 소팅해야될듯.

유저페이지 정렬이슈

image

이미지 없어서인지 굉장히 부자연스러움. 첫번째 아이템엔 상단 여백을 없애거나
맨위에 테두리 넣거나 해야겠다.

다른 탭에서 로그아웃 했을 때 예외처리

다른 탭에서 로그아웃 했을 때 예외처리가 필요할 것 같습니다.

Step

  1. Velog에 로그인 한다.
  2. 임의의 포스트로 이동한다.
  3. 우클릭을 통해 새로운 탭으로 창을 연다.
  4. 이전 탭으로 돌아와서 좋아요를 클릭하거나 댓글을 입력한다.

Improvement Proposal

As-Is

  • 좋아요를 누를 경우 0으로 숫자가 초기화 된다.
  • 댓글을 입력이 불가능하다.

To-Be

  • 로그인 페이지로 이동한다.

글 내의 썸네일 변경시 파일 이름에 따른 문제

처음에는 파일 크기나 사이즈 문제인가 싶어 코드를 찬찬히 보았습니다.
해당 문제는 아닌거 같고 보니

WriteActions.setThumbnail(`https://images.velog.io/${this.props.imagePath}`);

  if (!this.props.imagePath) return;
  WriteActions.setThumbnail(`https://images.velog.io/${this.props.imagePath}`);

파일이름을 그대로 쓰는거 같아 혹시나 해서 테스트 해보았습니다.

파일명 : photo (1).jpg
해당 파일은 업로드는 되나 실제 반영이 안됩니다.
파일명 : photo_1.jpg
해당 파일은 업로드 및 반영 잘 됩니다.

다중 태그 검색

현재는 단일 태그 검색만 가능한데요 태그를 여러개 선택해서 그 태그들이 있는 게시물만 검색할 수 있게 기능이 추가 됐으면 좋겠네요.

프로필 기능 추가 건의

image
위는 Keybase라는 곳의 프로필 사진인데 velog에도 자신의 페이스북, 인스타그램, 트위터 등의 SNS 계정을 프로필에 추가할 수 있으면 좋겠네요. 이왕이면 Keybase처럼 공개 PGP도 추가할 수 있으면 좋겠습니다 ㅎ..

short_description

short_description 이 있으면 그걸 보여줘야되는데 안보여주고 있음.
추가적으로 3줄이상이여서 짤릴때 ... 있는게 좋을듯.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.