Light

im-d-team / im-d.dev Goto Github PK

View Code? Open in Web Editor NEW

5.0 1.0 2.0 30.92 MB

📫 Im-D's Blog

JavaScript 15.50% TypeScript 46.67% SCSS 37.84%

im-d tech blog

im-d.dev's Introduction

Im-D Blog

MockUp Design

Page

index : 메인 페이지
blog : blog 페이지
tag : tag 검색 페이지
blog post : 블로그 Post 페이지

Component

AuthorCard
Card
Header
NextCard
Pagination
Post
PostList
Tag
TagList

Data

Avatar Image(추후 URL로 변경 예정)
Author
Blog Post Markdown

Feature

🔒 Post Rule

새로운 포스트는 data/blog/ 하위에 YYYY-MM-DD--Title의 형태의 디렉토리를 만들어 작성한다.
- 디렉토리의 Title에는 영문만 작성한다.
- 해당 디렉토리 안에 index.md를 만들어 글을 작성한다.
index의 최상위에 적어야하는 내용은 아래와 같다.
```
title: 'test 문서입니다.'
createdDate: '2019-03-16'
updatedDate: '2019-03-17'
author: Jinseong
tags:

- rendering
- optimization
- browser
- html
- css
- http

image: test.jpg
draft: false

## markdown 올바르게 작성하기
```
- 글 작성시 사용되는 resources는 모두 같은 디렉토리에 담는다.
- title은 글 내부의 제목이며 외부에 노출되는 제목이기도 하다.
- 게시글은 createdDate를 기준으로 정렬된다.
- author는 data/author.json에 미리 입력해둔 정보를 이용한다.
- tag는 검색에도 이용되니 최대한 자세히 적고 camelCase를 이용한다.
- image는 thumnail과 게시글 최상위의 사진이다.
- draft를 통해 작성하고 있는 글은 숨길 수 있다.
- title을 적기 때문에 h1의 내용은 따로 작성하지 않는다.
prettier를 적용하여 문서작성 스타일을 통일시킬 것. (vscode 플러그인)

im-d.dev's People

Contributors

Stargazers

Watchers

im-d.dev's Issues

blog/2020-12-31--2020.log/

Im-D | 기술 블로그

http://localhost:8001/blog/2020-12-31--2020.log/

블로그내 검색기능

원하는 블로그를 검색할 수 있는 검색기능

현재 tag로 검색을 하고 있지만 post가 많아지게 되면 최신글 외의 글을 보는데 어려움이 생김. 이에 검색기능으로 개선이 가능할 것으로 보임

태그 리스트를 사이드바로 옮기기

태그 리스트를 사이드바로 옮기기
기존 태그 리스트는 제거하기

상단 이미지 제거

헤더 아래에 있는 이미지 공간 제거

리스트 사진 클릭시 개인 깃헙 이동

글 리스트에서 작성자 사진을 클릭할 경우 해당 작성자 깃헙페이지로 이동하기

댓글기능 추가하기

댓글기능 추가하기

글 리스트에서 Read more 제거하기

글 리스트에서 Read more 제거하기

블로그 메인 Example

jbee님의 블로그를 벤치마킹하면 좋을 것 같은데 어떻게 생각하시나요?

Detail

헤더: 우리는 로고만 들어갈 듯 합니다.(검색 기능이 생길 수 있으면 검색창 정도 들어갈 수 있겠네요)
프로필 부분: 우리 스터디에 관련된 여러 링크나 Dev-Docs 링크 등이 있으면 좋겠네여
컨텐츠: 글 목록은 현재 우리와 거의 비슷한 것 같긴한데 해당 글을 작성하는데 참여한 contributor들도 같이 표시해주면 좋을 듯 합니다. (관련 이슈)
푸터: 없애도 될 것 같은데 어떠신가요?
태그: 태그는 저희 현재 방식을 유지하면 좋을 듯 합니다.(추후 검색 기능이 생기면 빼더라도)

글 리스트에서 하단에 Tag를 보여주기

글 리스트에서 하단에 Tag를 보여주기

글 목록에 contributor 표출

지난 번 얘기가 나왔듯이 글 목록에 contributor가 표출되면 좋을 것 같습니다 :)

글 리스트 모바일 화면 사이즈 조정하기

글 리스트 모바일 화면 사이즈 조정하기

Contributor 메인에 나오도록 만들기

Contributor 메인에 나오도록 만들기

헤더 왼쪽 상단으로 이동시키기, Logo는 우측 상단 또는 제거하기

헤더 왼쪽 상단으로 이동시키기, Logo는 우측 상단 또는 제거하기

작성자를 글 리스트 우측 하단으로 이동시키기

작성자를 글 리스트 우측 하단으로 이동시키기

Logo 폰트 색상 변경하기 (39,39,39)

Logo 폰트 색상 변경하기 (39,39,39)

Recommend Projects

React

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

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

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

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
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.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

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

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.