Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
@wisdomstar94/torytis
Advanced tools
Changelog
1.2.0
Readme
@wisdomstar94/torytis 는 티스토리 블로그 스킨의 개발을 여러 파일로 나눠서 개발하는 방식으로 할 수 있도록 도와주는 빌드툴이자 프레임워크 입니다.
torytis 의 변경사항은 CHANGELOG.md 파일을 확인해주세요.
npm uninstall torytis
npm install -D torytis
{
"scripts": {
...
"torytis": "torytis"
...
}
}
npm run torytis -- migrate
티스토리 스킨을 개발 할 때 아래 사항들이 불편하게 다가왔습니다.
이러한 불편한 점들을 해소하기 위해 직접 티스토리 스킨 개발만을 위한 기능이 준비되어 있는 빌드툴겸 프레임워크를 만들어보고자 생각하게 되었습니다.
*.module.css
와 같이 파일명을 작성하고 import styles from "./*.module.scss"
) 와 같이 import 하여 styles['클래스명']
으로 사용할 경우 캡슐화가 지원됩니다.npx @wisdomstar94/torytis new --name=프로젝트명
(ex. guestbook.component.tsx)
(ex. guestbook.module.scss)
(ex. guestbook.script.tsx)
{ version }
으로 작성하시면 build 될 때 해당 부분이 package.json 에 작성된 version 으로 치환됩니다.npm run build:variable
명령어를 이용해 생성 및 덮어쓰기 가능합니다. (이 파일에 어떠한 코드를 직접 작성하였다면 그 코드는 유실될 수 있습니다.)티스토리에서 요구하는 치환자 중에서도 일부 치환자를 그대로 리액트 컴포넌트 내에 작성할 경우 문법 에러가 발생합니다. 이를 해결하기 위해 torytis 만의 별도 문법을 준비하였습니다.
<!--카테고리-->
을 작성해야 할때는 <tt_html_comment>카테고리</tt_html_comment>
와 같이 작성하면 빌드 될 때 html 주석문으로 치환됩니다.<a [##_prev_page_##]>◀ PREV </a>
와 같이 작성해야 할때는 <a tt-onlyattr="[##_prev_page_##]">◀ PREV </a>
와 같이 작성하면 빌드 될 때 치환됩니다.<input onkeydown="if (event.keyCode == 13)[##_article_dissolve_##]" />
와 같이 작성해야 할 때는 <input tt-onkeydown="if (event.keyCode == 13)[##_article_dissolve_##]" />
와 같이 작성하면 빌드 될 때 치환됩니다.npm run dev
위 명령어를 실행한 후 터미널에 표시되는 url 로 접속하면 로컬에서 스킨 개발 결과물 미리보기가 가능합니다.
npm run dev
명령어가 실행중인 터미널에서 해당 프로세스를 종료 후(ctrl + c) 다시 npm run dev
를 실행해주셔야 합니다. 즉, 현재 핫리로드 기능은 제공되지 않으며 추후 지원 계획입니다.npm run build
위 명령어를 실행하면, .torytis/
폴더 밑에 index.xml, script.js, skin.html ... 등등의 파일들이 생성됩니다. .torytis/
폴더 밑에 생성된 파일들을 그대로 티스토리 스킨 파일로 첨부하시고 스킨을 등록하실 수 있습니다.
src/components/my-compomnent/my-compomnent.component.tsx
import styles from './my-component.module.scss';
export function MyComponent() {
return (
<div className={styles['my-class']}>
Hello World!
</div>
);
}
src/components/my-compomnent/my-compomnent.module.scss
.my-class {
font-size: 12px;
}
src/components/my-compomnent/my-compomnent.component.tsx
import './my-component.scss';
export function MyComponent() {
return (
<div className='my-class'>
Hello World!
</div>
);
}
src/components/my-compomnent/my-compomnent.scss
.my-class {
font-size: 12px;
}
export function MyComponent() {
return (
<div>
<img src="./images/icon.png" />
</div>
);
}
src/components/guestbook/guestbook.component.tsx
export function Guestbook() {
return (
<div>
This is guestbook component!
</div>
);
}
src/index.component.tsx
import React from "react";
import './index.scss';
import { Guestbook } from './components/guestbook/guestbook.component';
export default function App() {
return (
<html lang="ko">
<head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scale=1.0, user-scalable=no" />
<title>...</title>
</head>
<body>
<Guestbook />
</body>
</html>
);
}
@wisdomstar94/torytis 는 MIT 라이선스가 적용됩니다.
FAQs
티스토리 블로그 스킨 개발 프레임워크
The npm package @wisdomstar94/torytis receives a total of 46 weekly downloads. As such, @wisdomstar94/torytis popularity was classified as not popular.
We found that @wisdomstar94/torytis demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.