@bluenyang/create-tistory-skin 1.0.0

package/README.md

@@ -0,0 +1,121 @@
+# create-tistory-skin
+
+**Astro**와 **Tistory Skin Previewer** 기반의 티스토리 스킨 개발 환경을 단 1초 만에 구축해 주는 공식 스캐폴딩(Scaffolding) CLI 도구입니다.
+
+복잡한 빌드 설정이나 티스토리 전용 상대경로 매핑, 레이아웃 보일러플레이트 작성에 시간을 쏟지 마세요. 명령어 한 줄이면 즉시 스킨 디자인과 개발에만 집중할 수 있는 완벽한 프로젝트가 생성됩니다.
+
+## 주요 기능
+
+- **단 한 줄의 명령어로 시작**: `npm create` 명령어를 통해 최적화된 초기 스킨 템플릿을 즉시 생성합니다.
+- **Tailwind CSS 선택 지원**: 프로젝트 생성 시 Tailwind CSS 사용 여부를 선택할 수 있습니다. (사용하지 않을 경우 관련 설정과 의존성이 완벽하게 제거된 순수 HTML/CSS 환경을 제공합니다.)
+- **제로 컨피그(Zero-Config) 빌드**: Rollup이나 Vite를 직접 설정할 필요가 없습니다. 티스토리 업로드 규격(`skin.html`, `style.css`, `images/`)에 맞춘 완벽한 후처리를 기본 제공합니다.
+- **실시간 미리보기 (HMR)**: 코드를 수정할 때마다 브라우저 새로고침 없이 로컬 개발 서버에서 즉시 변경 사항을 확인하세요.
+- **구조화된 템플릿**: 티스토리 치환자에 대응하는 기본 레이아웃과 방명록, 페이징 등의 컴포넌트 구조가 미리 잡혀 있습니다.
+
+---
+
+## 빠른 시작 (Quick Start)
+
+터미널을 열고 아래 명령어 중 하나를 실행하세요:
+
+```bash
+# npm 사용 시
+npm create tistory-skin@latest
+
+# npx 사용 시
+npx create-tistory-skin@latest
+
+# yarn 사용 시
+yarn create tistory-skin
+
+# pnpm 사용 시
+pnpm create tistory-skin
+
+```
+
+명령어를 실행하면 인터랙티브 프롬프트가 실행되며 다음 항목을 설정하게 됩니다.
+
+1. **프로젝트(스킨) 이름 설정**: 생성될 폴더의 이름을 입력합니다.
+2. **Tailwind CSS 사용 여부**: `Y/n` 로 최신 Tailwind CSS 환경을 포함할지 순수 환경으로 갈지 결정합니다.
+
+프로젝트 생성이 완료되면 안내에 따라 디렉토리로 이동하여 개발을 시작하세요!
+
+```bash
+cd my-tistory-skin
+npm install
+npm run dev
+
+```
+
+---
+
+## 📂 디렉토리 구조 (Directory Structure)
+
+생성된 프로젝트는 스킨 개발에 최적화된 직관적인 구조를 가집니다.
+
+```text
+my-tistory-skin/
+ ├── src/
+ │    ├── components/    # 헤더, 푸터, 스킨 치환자(s_list 등) 컴포넌트
+ │    ├── layouts/       # 스킨 전체 레이아웃 (Layout.astro)
+ │    ├── pages/
+ │    │    └── index.astro # 스킨의 메인 진입점 (여기서 스킨 구조를 잡습니다)
+ │    ├── scripts/       # 클라이언트 단 JavaScript/TypeScript 로직 (common.ts)
+ │    └── styles/        # 글로벌 CSS (Tailwind 지시어 등 포함)
+ ├── astro.config.mjs    # 프리뷰어 Integration이 포함된 핵심 설정 파일
+ ├── package.json
+ └── tailwind.config.mjs # (Tailwind 선택 시 포함됨)
+
+```
+
+---
+
+## 💻 사용법 (Commands)
+
+프로젝트 내부에서 다음 스크립트들을 사용할 수 있습니다.
+
+### 개발 서버 실행 (로컬 프리뷰)
+
+```bash
+npm run dev
+
+```
+
+`http://localhost:4321`에 접속하여 실시간으로 스킨을 확인하며 개발하세요. `/category`, `/guestbook` 등의 티스토리 경로도 모두 자동으로 대응됩니다.
+
+### 티스토리 스킨 빌드 (배포용)
+
+```bash
+npm run build
+
+```
+
+모든 개발이 끝난 후 이 명령어를 실행하면 `dist/` 폴더에 결과물이 생성됩니다.
+Astro 컴포넌트와 스크립트가 티스토리 업로드용 규격으로 완벽하게 컴파일 및 상대경로 변환됩니다.
+
+---
+
+## 📦 티스토리에 스킨 적용하기
+
+`npm run build`를 통해 생성된 `dist/` 폴더의 구조는 다음과 같습니다.
+
+```text
+dist/
+ ├── skin.html    (완성된 마크업)
+ ├── style.css    (컴파일된 메인 CSS)
+ └── images/      (스크립트 및 기타 에셋)
+      └── common-xxxxxx.js
+
+```
+
+1. `dist` 폴더 내부의 **모든 파일과 폴더를 선택하여 하나의 `.zip` 파일로 압축**합니다.
+2. 티스토리 관리자 페이지 > [꾸미기] > [스킨 변경] > **[스킨 등록]** 버튼을 클릭합니다.
+3. 압축한 `.zip` 파일을 업로드하고 저장하면 스킨 적용이 완료됩니다! 🎉
+
+---
+
+## 📝 License
+
+이 프로젝트는 MIT 라이선스를 따릅니다.
+
+> Powered by **@tistory-skin-previewer/astro** | Created & Maintained by **BlueNyang**

package/index.js

@@ -0,0 +1,115 @@
+import fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import prompts from "prompts";
+import pc from "picocolors";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+async function init() {
+  console.log(pc.cyan("🚀 Tistory Skin 프로젝트를 생성합니다.\n"));
+
+  // 프로젝트 이름 입력받기
+  const response = await prompts(
+    {
+      type: "text",
+      name: "projectName",
+      message: "프로젝트(스킨) 이름을 입력하세요:",
+      initial: "tistory-skin",
+    },
+    {
+      type: "confirm",
+      name: "useTailwind",
+      message: "Tailwind CSS를 사용하시겠습니까?",
+      initial: true,
+    },
+  );
+
+  if (!response.projectName) {
+    console.log(pc.red("프로젝트 생성이 취소되었습니다."));
+    process.exit(1);
+  }
+
+  const targetDir = path.join(process.cwd(), response.projectName);
+
+  // 디렉토리 생성
+  if (!fs.existsSync(targetDir)) {
+    fs.mkdirSync(targetDir, { recursive: true });
+  } else {
+    console.error(pc.red(`이미 ${response.projectName} 폴더가 존재합니다.`));
+    process.exit(1);
+  }
+
+  // 템플릿 복사
+  const templateDir = path.join(__dirname, "template");
+
+  function copyRecursiveSync(src, dest) {
+    const exists = fs.existsSync(src);
+    const stats = exists && fs.statSync(src);
+    const isDirectory = exists && stats.isDirectory();
+
+    if (isDirectory) {
+      fs.mkdirSync(dest);
+      fs.readdirSync(src).forEach((childItemName) => {
+        // npm 발매 시 .gitignore가 누락되는 이슈 방지용 트릭 (gitignore -> .gitignore로 복사)
+        const destName = childItemName === "gitignore" ? ".gitignore" : childItemName;
+        copyRecursiveSync(path.join(src, childItemName), path.join(dest, destName));
+      });
+    } else {
+      fs.copyFileSync(src, dest);
+    }
+  }
+
+  console.log(pc.blue("템플릿 파일들을 복사하는 중..."));
+  copyRecursiveSync(templateDir, targetDir);
+
+  // Tailwind CSS 사용하지 않는 경우
+  if (!response.useTailwind) {
+    console.log(pc.yellow("Tailwind CSS 설정을 제거하는 중..."));
+
+    // package.json 수정 (의존성 제거)
+    const pkgPath = path.join(targetDir, "package.json");
+    if (fs.existsSync(pkgPath)) {
+      const pkg = JSON.parse(fs.readFileSync(pkgPath, "utf-8"));
+      if (pkg.devDependencies) {
+        delete pkg.devDependencies["tailwindcss"];
+        delete pkg.devDependencies["@tailwindcss/vite"];
+        delete pkg.devDependencies["@tailwindcss/postcss"];
+        delete pkg.devDependencies["prettier-plugin-tailwindcss"];
+      }
+      fs.writeFileSync(pkgPath, JSON.stringify(pkg, null, 2), "utf-8");
+    }
+
+    // astro.config.mjs 수정 (플러그인 제거)
+    const astroConfigPath = path.join(targetDir, "astro.config.mjs");
+    if (fs.existsSync(astroConfigPath)) {
+      let astroConfig = fs.readFileSync(astroConfigPath, "utf-8");
+      // import 구문 제거
+      astroConfig = astroConfig.replace(/import tailwindcss from '@tailwindcss\/vite';\r?\n/, "");
+      // plugins 배열 안의 tailwindcss() 제거 (쉼표 포함 처리)
+      astroConfig = astroConfig.replace(/\s*tailwindcss\(\),?/, "");
+      fs.writeFileSync(astroConfigPath, astroConfig, "utf-8");
+    }
+
+    // src/styles/global.css 수정 (Tailwind 지시어 제거)
+    const globalCssPath = path.join(targetDir, "src", "styles", "global.css");
+    if (fs.existsSync(globalCssPath)) {
+      let globalCss = fs.readFileSync(globalCssPath, "utf-8");
+      globalCss = globalCss.replace(/@import "tailwindcss";\r?\n/, "");
+      fs.writeFileSync(globalCssPath, globalCss, "utf-8");
+    }
+  }
+
+  // 완료 메시지
+  console.log(pc.green("\n🎉 스킨 프로젝트 생성이 성공적으로 완료되었습니다!\n"));
+  console.log("다음 명령어를 실행하여 개발을 시작하세요:\n");
+  console.log(pc.cyan(`  cd ${response.projectName}`));
+  console.log(pc.cyan("  npm install") + "  (또는 pnpm install / yarn)");
+  console.log(pc.cyan("  npm run dev\n"));
+}
+
+init().catch((err) => {
+  console.error(pc.red("실행 중 오류가 발생했습니다:"), err);
+  process.exit(1);
+});

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@bluenyang/create-tistory-skin",
+  "version": "1.0.0",
+  "description": "Tistory Skin Previewer 템플릿 생성기",
+  "license": "MIT",
+  "type": "module",
+  "author": {
+    "name": "Bluenyang",
+    "email": "contact@bluenyang.kr",
+    "url": "https://github.com/bluenyang"
+  },
+  "bin": {
+    "create-tistory-skin": "./index.js"
+  },
+  "files": [
+    "index.js",
+    "template"
+  ],
+  "dependencies": {
+    "prompts": "^2.4.2",
+    "picocolors": "^1.1.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/template/astro.config.mjs

@@ -0,0 +1,18 @@
+// @ts-check
+import { defineConfig } from "astro/config";
+import tailwindcss from "@tailwindcss/vite";
+import tistoryPreviewer from "@tistory-skin-previewer/astro";
+
+// https://astro.build/config
+export default defineConfig({
+  integrations: [tistoryPreviewer()],
+  vite: {
+    plugins: [
+      // @ts-ignore
+      tailwindcss(),
+    ],
+  },
+  build: {
+    format: "file",
+  },
+});

package/template/gitignore

@@ -0,0 +1,16 @@
+# build output
+dist/
+# generated types
+.astro/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# macOS-specific files
+.DS_Store

package/template/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "tistory-skin",
+  "type": "module",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview",
+    "astro": "astro"
+  },
+  "dependencies": {
+    "astro": "^5.18.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4.1.11",
+    "@tailwindcss/vite": "^4.1.11",
+    "@tistory-skin-previewer/astro": "^0.7.0",
+    "@typescript-eslint/parser": "^8.36.0",
+    "eslint": "^9.30.1",
+    "eslint-config-prettier": "^10.1.5",
+    "eslint-plugin-astro": "^1.3.1",
+    "eslint-plugin-prettier": "^5.5.1",
+    "prettier": "^3.6.2",
+    "prettier-plugin-astro": "^0.14.1",
+    "prettier-plugin-tailwindcss": "^0.6.14",
+    "tailwindcss": "^4.1.11",
+    "typescript": "^5.8.3",
+    "typescript-eslint": "^8.36.0"
+  }
+}

package/template/src/components/common/Footer.astro

@@ -0,0 +1,7 @@
+---
+
+---
+
+<footer>
+  <!-- 블로그의 푸터 영역을 만들어주세요. -->
+</footer>

package/template/src/components/common/Header.astro

@@ -0,0 +1,8 @@
+---
+---
+
+<nav
+  id="navbar"
+>
+  <!-- 헤더 네비게이션을 만들어주세요. -->
+</nav>

package/template/src/components/common/Paging.astro

@@ -0,0 +1,22 @@
+<s_paging>
+  <!-- 페이지네이션 -->
+  <div>
+    <!-- 이전 페이지 -->
+    <a [##_prev_page_##] class="[##_no_more_prev_##]"> 이전 </a>
+    <!-- 페이지 번호들 -->
+    <div>
+      <s_paging_rep>
+        <!-- 페이지 번호 -->
+        <a [##_paging_rep_link_##]>[##_paging_rep_link_num_##]</a>
+      </s_paging_rep>
+    </div>
+    <!-- 다음 페이지 -->
+    <a [##_next_page_##] class="[##_no_more_next_##]">다음</a>
+  </div>
+  <!-- 더보기 -->
+  <div>
+    <a [##_more_link_##]>
+      <p>더보기</p>
+    </a>
+  </div>
+</s_paging>

package/template/src/components/reps/Article.astro

@@ -0,0 +1,83 @@
+---
+---
+
+<s_article_rep>
+  <s_permalink_article_rep>
+    <!-- 글 뷰어의 모양을 만들어주세요. -->
+
+    <div id="article-footer">
+      <s_tag_label>
+        <!-- 글의 태그 부분입니다. 태그들이 들어갈 박스를 만들어주세요. -->
+        <div>
+          <h3>Tags</h3>
+          <div id="article-tag-box">[##_tag_label_rep_##]</div>
+        </div>
+      </s_tag_label>
+
+      <!-- 이전글, 현재글, 다음글을 만들어주세요. -->
+      <div>
+        <s_article_prev>
+          <!-- 이전글 -->
+          <div>
+            <a href="[##_article_prev_link_##]">
+              <h3>
+                [##_article_prev_title_##]
+              </h3>
+            </a>
+          </div>
+        </s_article_prev>
+        <div>
+          <!-- 현재글 -->
+          <div>
+            <h3>
+              [##_article_rep_title_##]
+            </h3>
+          </div>
+        </div>
+        <s_article_prev>
+          <!-- 다음글 -->
+          <div>
+            <a href="[##_article_next_link_##]">
+              <h3>
+                [##_article_next_title_##]
+              </h3>
+            </a>
+          </div>
+        </s_article_prev>
+      </div>
+
+      <s_article_related>
+        <!-- 관련글이 나오는 부분입니다. -->
+        <div title="관련글">
+          <s_article_related_rep>
+            <div>
+              <a href="[##_article_related_rep_link_##]">
+                <span>
+                  <s_article_related_rep_thumbnail>
+                    <img
+                      alt=""
+                      src="[##_article_related_rep_thumbnail_link_##]"
+                    />
+                  </s_article_related_rep_thumbnail>
+                </span>
+                <div>
+                  <h3>
+                    [##_article_next_title_##]
+                  </h3>
+                </div>
+                <span>
+                  [##_article_related_rep_date_##]
+                </span>
+              </a>
+            </div>
+          </s_article_related_rep>
+        </div>
+      </s_article_related>
+
+      <!-- 댓글 부분입니다. -->
+      <div>
+        <s_rp> [##_comment_group_##] </s_rp>
+      </div>
+    </div>
+  </s_permalink_article_rep>
+</s_article_rep>

package/template/src/components/reps/ArticleProtect.astro

@@ -0,0 +1,27 @@
+---
+---
+
+<!-- 보호된 글의 대체 화면압니다. -->
+<s_article_protected>
+  <s_permalink_article_rep>
+    <p>
+      보호되어 있는 글입니다.
+      <br />
+      내용을 보시려면 비밀번호를 입력하세요.
+    </p>
+
+    <!-- 보호된 글을 보기위한 비밀번호 입력 폼입니다. -->
+    <form onsubmit=`[##_article_dissolve_##]`>
+      <div>
+        <input
+          type="password"
+          id="[##_article_password_##]"
+          name="[##_article_password_##]"
+          value=""
+          placeholder="비밀번호"
+        />
+        <button type="submit">확인</button>
+      </div>
+    </form>
+  </s_permalink_article_rep>
+</s_article_protected>

package/template/src/components/reps/Guestbook.astro

@@ -0,0 +1,8 @@
+---
+
+---
+
+<!-- 게스트북 영역입니다. -->
+<div>
+  <s_guest> [##_guestbook_group_##] </s_guest>
+</div>

package/template/src/components/reps/SList.astro

@@ -0,0 +1,35 @@
+---
+
+---
+
+<!-- 검색 결과 리스트를 보여주는 영역입니다. -->
+<s_list>
+  <div>
+    <!-- 리스트의 아이템 -->
+    <s_list_rep>
+      <div>
+        <a href="[##_article_prev_link_##]">
+          <div>
+            <s_list_rep_thumbnail>
+              <img
+                loading="lazy"
+                src="[##_list_rep_thumbnail_##]"
+              />
+            </s_list_rep_thumbnail>
+          </div>
+          <div>
+            <h3>
+              [##_list_rep_title_text_##]
+            </h3>
+            <span>
+              [##_list_rep_summary_##]
+            </span>
+            <span>
+              [##_list_rep_regdate_##]
+            </span>
+          </div>
+        </a>
+      </div>
+    </s_list_rep>
+  </div>
+</s_list>

package/template/src/layouts/Layout.astro

@@ -0,0 +1,26 @@
+---
+import Header from '@/components/common/Header.astro';
+import SList from '@/components/reps/SList.astro';
+import Article from '@/components/reps/Article.astro';
+import ArticleProtect from '@/components/reps/ArticleProtect.astro';
+import Guestbook from '@/components/reps/Guestbook.astro';
+import Paging from '@/components/common/Paging.astro';
+import Footer from '@/components/common/Footer.astro';
+import '@/styles/global.css';
+---
+<Header />
+<main>
+  <article>
+    <s_cover_group>
+      <s_cover_rep>
+        <!-- 홈 화면에 들어갈 커버 항목들을 만들어 넣어주세요. -->
+      </s_cover_rep>
+    </s_cover_group>
+    <SList />
+    <Article />
+    <ArticleProtect />
+    <Guestbook />
+    <Paging />
+  </article>
+</main>
+<Footer />

package/template/src/pages/index.astro

@@ -0,0 +1,15 @@
+---
+import TistorySkinHead from "@tistory-skin-previewer/astro/components/TistorySkinHead.astro";
+import TistorySkinBody from "@tistory-skin-previewer/astro/components/TistorySkinBody.astro";
+import Layout from "@/layouts/Layout.astro";
+---
+
+<!doctype html>
+<html lang="ko">
+  <TistorySkinHead>
+    <!-- HTML의 <head>에 들어갈 내용을 넣어주세요 -->
+  </TistorySkinHead>
+  <TistorySkinBody>
+    <Layout />
+  </TistorySkinBody>
+</html>

package/template/src/scripts/common.ts

@@ -0,0 +1 @@
+// 공통으로 사용할 함수들을 정의합니다.

package/template/src/styles/global.css

@@ -0,0 +1,5 @@
+@import "tailwindcss";
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+// 공통으로 사용할 CSS를 정의합니다.

package/template/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "include": [".astro/types.d.ts", "**/*"],
+  "exclude": ["dist", "node_modules"],
+  "compilerOptions": {
+    "baseUrl": ".",
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "sourceMap": false,
+    "inlineSources": false,
+    "strict": true,
+    "noEmit": true,
+    "noImplicitAny": true,
+    "noImplicitThis": true,
+    "strictNullChecks": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  }
+}