스타일 매뉴얼 Gener 스타일의 물건을 만들었기 때문에 소개해 드릴게요.

Geek-Inc Advent Calendar 2017 18일째 보도다.
정의를 잘 모르기 때문에 스타일 매뉴얼의 발생기로 먼저 사용한다.

메타데이터

창고.
https://github.com/nju33/yosuga
데모
https://nju33.github.io/yosuga/

모티프

여러 AltCSS(sass, less, stylus...)대응하다

클라이언트에서 지정한 AltCSS를 사용해야 하는 경우가 있습니다.예를 들어 Less, 자신이 Sass에 강하고 모듈 관리까지 잘하는 팀이라면 이런 은혜를 쓰지 않았을 것이다.또 Less에서 같은 모듈을 만들더라도 이를 지켜갈 수는 없다.(역시 의식하지 못하면 곧 폐지된다)
다만 문법이 다르기 때문에 만만치 않은 시간을 소비하고 그 시간을 낭비했다고 생각해서 어느 Alt든 사용할 수 있는 모듈군, 관리할 수 있는 도구를 원한다.
또 일부 사소한 사건에서도 한 사람이 처리해 무엇이든 쓸 수 있는 경우도 있다.그 사람이 좋아하는 AltCSS를 써도 은혜를 받을 수 있다는 생각도 들고요.
이것은 완전한 프로젝트에 포함되는 것이 아니라 모듈 관리용으로 준비된 단일 프로젝트로 여러 개의 (Alt) CSS 이미지를 관리합니다.(npm 승급 등에 사용)
아니면 css 프레임워크가 가깝다든가.

오프라인에서도 볼 수 있도록.

이것은 개인적으로 이미 여러 번 보았고 오프라인에서도 볼 수 있다고 생각하는 가장 강한 문서다.(오프라인 > 온라인 > 파일 전송 문서)
그나저나 lodash 문서 사이트 등도 어느새 오프라인으로 열람하고 있다.

사용된 기술

좋은 것 같은 거.

NuxtJS

몇 분만 있으면 간단한 스파 사이트의 폐품을 만들 수 있다.이번 문서 페이지 생성에도 NuxtJS가 사용되었습니다.오프라인에서도 볼 수 있다고 하지만 조금 어려워 잘 모르겠을 수도 있지만, 단순히 pwa-module라는 모듈을 사용해 이 30초 정도면 달성할 수 있다.아래 설정에 추가하기만 하면 최소한의 오프라인 대응이 가능해 간단하다.

{
  modules: [
    '@nuxtjs/pwa',
  ]
}

NuxtJS에서는 잘 모르겠지만 문제는 한 페이지에 대량으로 설정<iframe src="/sections/foo"/>하고 같은nuxt로 과장된 페이지를 사용하면 페이지의 반응이 사라진다는 것이다.결국 해결 방법을 몰라...😇

flow-runtime

Flow의 유형은 코드 내에서 유효하지만 외부 입력 값을 검사하지 않기 때문에 검증에 사용됩니다.부딪히면 던지고 오류 메시지를 직접 표시하면 그곳 모양으로 만들 수 있어 편리하다.

t.string().assert('foo') // OK
t.string().assert(1) // throw

fast-memoize

lodash.memoize에 비해 첫 번째 파라미터를 제외하고는 대부분의 경우 볼 수 있고 캐시할 수 있다.
repl

// _.memoze
fn = _memoize((a, b) => {
  console.log('called');
  return [a, b];
});

fn(1, 2)
// called
// => [1, 2]

fn(1, 3)
// => [1, 2]

fn = fastMemoize((a, b) => {
  console.log('called');
  return [a, b];
});

fn(1, 2)
// called
// => [1, 2]

fn(1, 3)
// called
// => [1, 3]

fn(1, 3)
// => [1, 3]

gray-matter

지킬 등 익숙한 안내데스크에 존재하는 내용으로 해석되는 대단한 것들.

소개하다.

기능

AltCSS 출력이 동일한지 각각 확인

Yosuga에서 이러한 디렉터리 구조를 구상했습니다.

.
├── css
│   └── button.css
├── example.js
├── less
│   ├── button.less
│   └── button.yosuga.less
├── postcss
│   ├── button.css
│   └── button.yosuga.css
├── sass
│   ├── button.scss
│   ├── button.yosuga.scss
│   ├── nav.scss
│   └── nav.yosuga.scss
├── stylus
│   ├── button.styl
│   └── button.yosuga.styl
└── yosuga
    ├── button.html
    └── nav.html

css만 그대로 있고 다른 AltCSS*.yosuga.* 파일은 비교 대상이 됩니다.그리고 서류를 검사한 결과button.css === button.yosuga.less === button.yosuga.css === button.yosuga.scss button-yosuga.styl입니다.기본값main의 경우css가 대상이고 button가 대상이면 sass과button가 대상이다.그때는 nav 하나밖에 없었으니까 꼭 검사를 통과해야 돼요.
그런 다음 페이지에 검사를 통과한 내용만 표시됩니다.nav 구성 요소의 태그와 메타 정보를 설정합니다.예를 들면 이렇게 된 느낌.선행 재료용toml에 기술하다.
yaml로 하려고 했는데 nodejs의 yaml Perser가 여러 줄 문자열에 대응하는 *.html이 없어서 Toml로 바뀌었어요...
button.html

---
title = "Button"
summary = "ボタンの概要"
description = """
  ## ボタン

  詳しい説明
"""
---

<!-- 以下のボタンのための補足説明 -->
<button>...</button>

또한 실제 검사 시 cssnano와postcss-sorting의 출력 결과를 비교하면 속성 배열의 차이 등 다른 각(AltCSS) 간에 발생할 수 있는 미묘한 차이를 무시할 수 있다.
그나저나 검사할 때 이런 느낌으로 일지에 나와요.(색상이 다름)

사용자 정의

①
데이텀 디렉토리(기본 현재 디렉토리)에 배치| 아이콘을 설정할 수 있습니다.
②icon.png 설정 시 new Yosuga 설정할 수 있습니다.

new Yosuga({name: 'Yosuga DEMO'});

③
마찬가지로 name 색상과 글꼴 크기를 변경할 수 있습니다.

new Yosuga({
  style: {
    accentColor: '#...',
    fontSize: '15px',
  }
});

사용 방법 소개

최초의 것 같습니다.

설치하다.

API

yarn add -D yosuga
npm i -D yosuga

const yosuga = new Yosuga({...});
(async () => {
  await yosuga.prepare({name: '...'});
  // 開発時
  yosuga.serve();

　// ビルド時
  // baseは`<base/>`のhref属性の値
  yosuga.generate(base?)
})();

style면 기본적으로 serve시작하기 때문에 css를 많이 씁니다.한 번localhost:3333의 css 파일 등이 변경되면 자동으로 반영됩니다.

CLI

npm i -g yosuga-cli
yosuga init
yosuga server # or generate

QuickStart

git clone [email protected]:nju33/yosuga-quickstart.git
cd yosuga-quickstart
yarn
yarn dev

감상

...이렇게 많이 했지만 아직 미묘한 점이 많을 거예요(^o^)/
만드는 과정도 달달하고 내 능력이 아직 멀었다고 생각해~😇
당분간 회사에서 사용하시면 됩니다.
NuxtJS를 사용하면 바로 사이트를 원하는 도구를 만들고 다양한 것을 시도할 수 있습니다.
내일 19일에 디자이너 R 씨!잘 부탁드립니다!