create-pugkit 1.0.0-beta.1

package/README.md

@@ -0,0 +1,44 @@
+# create-pugkit
+
+## About
+
+[pugkit](https://github.com/a_tokuhara/pugkit) を使用した静的サイト制作のスターターキットです。
+
+## Usage
+
+### Interactive
+
+```sh
+npm create pugkit@latest
+```
+
+### With project name
+
+プロジェクト名を指定して作成します。
+
+```sh
+npm create pugkit@latest my-pugkit-project
+```
+
+### Current directory
+
+カレントディレクトリに作成します。
+
+```sh
+npm create pugkit@latest .
+```
+
+## Next Steps
+
+プロジェクト作成後の手順：
+
+```sh
+cd my-pugkit-project
+npm install
+npm build
+npm run dev
+```
+
+## License
+
+MIT

package/cli/index.mjs

@@ -0,0 +1,113 @@
+#!/usr/bin/env node
+
+import { readFileSync } from 'node:fs'
+import { fileURLToPath } from 'node:url'
+import path from 'node:path'
+import fs from 'fs-extra'
+import pc from 'picocolors'
+import { cac } from 'cac'
+import prompts from 'prompts'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+
+function pkgVersion() {
+  const pkgPath = path.join(__dirname, '../package.json')
+  const pkg = JSON.parse(readFileSync(pkgPath, 'utf8'))
+  return pkg.version
+}
+
+function log(message) {
+  console.log(`${pc.cyan(pc.bold('CREATE-PUGKIT'))} ${pc.dim(`v${pkgVersion()}`)} ${message}`)
+}
+
+function mkdirp(dir) {
+  try {
+    fs.mkdirSync(dir, { recursive: true })
+  } catch (err) {
+    if (err.code === 'EEXIST') return
+    throw err
+  }
+}
+
+async function main(root, options) {
+  const cwd = path.resolve(process.cwd(), root || '.')
+  const current = root === '.'
+  const projectName = current ? path.basename(process.cwd()) : root
+
+  const questions = {
+    overwrite: {
+      type: 'confirm',
+      name: 'overwrite',
+      message: 'Directory not empty. Continue [force overwrite]?',
+      initial: false
+    }
+  }
+
+  if (fs.existsSync(cwd)) {
+    if (fs.readdirSync(cwd).length > 0) {
+      const { overwrite } = await prompts(questions.overwrite)
+      if (!overwrite) {
+        process.exit(1)
+      }
+      !current && mkdirp(cwd)
+    }
+  } else {
+    !current && mkdirp(cwd)
+  }
+
+  try {
+    log('copying project files...')
+
+    // Copy template files from the package
+    const templateDir = path.join(__dirname, '../template')
+    await fs.copy(templateDir, cwd, {
+      overwrite: true,
+      filter: src => {
+        // Skip node_modules and dist directories
+        return !src.includes('node_modules') && !src.includes('dist')
+      }
+    })
+
+    // Update package.json with project name
+    const pkgPath = path.join(cwd, 'package.json')
+    if (fs.existsSync(pkgPath)) {
+      const pkg = await fs.readJson(pkgPath)
+      pkg.name = projectName
+      await fs.writeJson(pkgPath, pkg, { spaces: 2 })
+    }
+  } catch (err) {
+    console.error(`${pc.cyan(pc.bold('CREATE-PUGKIT'))} ${pc.dim(`v${pkgVersion()}`)} ${pc.red(err.message)}`)
+    process.exit(1)
+  }
+
+  log('done!')
+  console.log('\nNext steps:')
+
+  let step = 1
+
+  const relative = path.relative(process.cwd(), cwd)
+  if (relative !== '') {
+    console.log(`  ${step++}: ${pc.bold(pc.cyan(`cd ${relative}`))}`)
+  }
+
+  console.log(`  ${step++}: ${pc.bold(pc.cyan('npm install'))}`)
+  console.log(`  ${step++}: ${pc.bold(pc.cyan('npm run build'))}`)
+  console.log(`  ${step++}: ${pc.bold(pc.cyan('npm run dev'))}`)
+  console.log(`\nTo close the dev server, hit ${pc.bold(pc.cyan('Ctrl + C'))}`)
+}
+
+const cli = cac('create-pugkit')
+
+cli.command('[root]', 'Scaffolding for pugkit projects').action(async (root, options) => {
+  try {
+    await main(root, options)
+  } catch (err) {
+    console.error(err)
+    process.exit(1)
+  }
+})
+
+cli.help()
+cli.version(pkgVersion())
+cli.parse()

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "create-pugkit",
+  "version": "1.0.0-beta.1",
+  "description": "Scaffolding for pugkit projects",
+  "type": "module",
+  "license": "MIT",
+  "author": "mfxgu2i <mfxgu2i@gmail.com>",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mfxgu2i/pugkit.git",
+    "directory": "packages/create-pugkit"
+  },
+  "bugs": "https://github.com/mfxgu2i/pugkit/issues",
+  "homepage": "https://github.com/mfxgu2i/pugkit#readme",
+  "publishConfig": {
+    "access": "public"
+  },
+  "bin": {
+    "create-pugkit": "./cli/index.mjs"
+  },
+  "files": [
+    "cli",
+    "template"
+  ],
+  "keywords": [
+    "pugkit",
+    "pug",
+    "sass",
+    "static-site-generator",
+    "scaffold"
+  ],
+  "dependencies": {
+    "cac": "^6.7.14",
+    "fs-extra": "^11.2.0",
+    "picocolors": "^1.1.1",
+    "prompts": "^2.4.2"
+  },
+  "devDependencies": {
+    "@types/fs-extra": "^11.0.4",
+    "@types/prompts": "^2.4.9"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  }
+}

package/template/.browserslistrc

@@ -0,0 +1,20 @@
+# Browsers that we support
+
+# Windows 10 and later
+
+last 2 Edge versions
+last 2 Chrome versions
+
+# MAC with the latest Mac OS
+
+last 2 Safari versions
+
+# Android 11 and later
+
+last 2 ChromeAndroid versions
+
+# iPhone with the latest iOS
+
+last 2 iOS versions
+
+not dead

package/template/.prettierrc.mjs

@@ -0,0 +1,48 @@
+export default {
+  // ========================================
+  // 基本設定
+  // ========================================
+
+  // 1行の最大文字数
+  printWidth: 120,
+
+  // インデント幅
+  tabWidth: 2,
+
+  // タブを使用しない（スペース推奨）
+  useTabs: false,
+
+  // セミコロンなし
+  semi: false,
+
+  // シングルクォート優先
+  singleQuote: true,
+
+  // オブジェクトリテラルの括弧内にスペース
+  bracketSpacing: true,
+
+  // 末尾カンマなし
+  trailingComma: 'none',
+
+  // アロー関数の括弧（必要時のみ）
+  arrowParens: 'avoid',
+
+  // 改行コード（LF統一）
+  endOfLine: 'lf',
+
+  // ========================================
+  // ファイル別設定
+  // ========================================
+
+  overrides: [
+    // CSS / SCSS（ダブルクォート統一）
+    {
+      files: '*.{css,scss}',
+      options: {
+        singleQuote: true,
+        printWidth: 120,
+        tabWidth: 2
+      }
+    }
+  ]
+}

package/template/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "test-project",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "pugkit dev",
+    "build": "pugkit build",
+    "sprite": "pugkit sprite",
+    "lint": "npm run lint:js && npm run lint:scss",
+    "lint:js": "eslint 'src/**/*.js'",
+    "lint:scss": "stylelint 'src/**/*.scss'",
+    "format": "npm run format:js && npm run format:scss",
+    "format:js": "prettier --write 'src/**/*.js'",
+    "format:scss": "stylelint 'src/**/*.scss' --fix"
+  },
+  "devDependencies": {
+    "prettier": "^3.8.1",
+    "pugkit": "^1.0.0-beta.2",
+    "stylelint": "^16.12.0",
+    "stylelint-config-recess-order": "^5.1.1",
+    "stylelint-config-standard-scss": "^14.0.0"
+  }
+}

package/template/pugkit.config.mjs

@@ -0,0 +1,38 @@
+import { defineConfig } from 'pugkit'
+
+// See: https://github.com/mfxgu2i/pugkit#configuration
+export default defineConfig({
+  siteUrl: 'https://example.com/',
+  subdir: '',
+  debug: false,
+  server: {
+    port: 5555,
+    host: 'localhost',
+    startPath: '/'
+  },
+  build: {
+    imageOptimization: 'webp',
+    imageOptions: {
+      webp: {
+        quality: 90,
+        effort: 6,
+        smartSubsample: true,
+        method: 6,
+        reductionEffort: 6,
+        alphaQuality: 100,
+        lossless: false
+      },
+      jpeg: {
+        quality: 75,
+        progressive: true,
+        mozjpeg: false
+      },
+      png: {
+        quality: 85,
+        compressionLevel: 6,
+        adaptiveFiltering: true,
+        palette: true
+      }
+    }
+  }
+})

package/template/src/_templates/_constants.pug

@@ -0,0 +1,14 @@
+-
+  const META_DATA = {
+    siteTitle: 'pugkit',
+    siteDescription: '__サイトの説明__',
+    pageTitle: '__ページタイトル__',
+    pageDescription: '__ページの説明__',
+    pageType: 'article'
+  }
+
+  const BREAK_POINTS = {
+    sm: '(max-width: 575px)',
+    md: '(max-width: 767.98px)',
+    lg: '(max-width: 889.98px)',
+  }

package/template/src/_templates/_layout.pug

@@ -0,0 +1,42 @@
+include /_templates/_constants
+include  /_templates/mixins/_Meta
+include  /_templates/mixins/_Image
+
+block vars
+  - const metaData = META_DATA
+
+doctype html
+html(lang='ja')
+  head
+    +Meta(metaData)
+
+    //- 計測タグ
+    block analytics
+
+    //- 構造化データ
+    block structuredData
+
+    //- 外部リソース
+    block externalResources
+
+    //- サイトリソース
+    block styles
+      link(rel='stylesheet' href=`${Builder.dir}assets/css/style.css`)
+
+    block scripts
+      script(src=`${Builder.dir}assets/js/main.js` type='module')
+
+  body
+    block bodyAnalytics
+
+    //- ヘッダー
+    block header
+      include /_templates/components/_header
+
+    //- コンテンツ
+    main
+      block contents
+
+    //- フッター
+    block footer
+      include /_templates/components/_footer

package/template/src/_templates/components/_footer.pug

@@ -0,0 +1,2 @@
+footer.c-footer
+  p.c-footer__copyright

package/template/src/_templates/components/_header.pug

@@ -0,0 +1,9 @@
+header.c-header
+  #{Builder.url.pathname === '/' ? 'h1' : 'div'}.c-header__logo
+    a.c-header__logo-link(href=Builder.dir)= metaData.siteTitle
+  nav.c-header__nav
+    ul.c-header__nav-list
+      li.c-header__nav-item
+        a.c-header__nav-link(href=Builder.dir) Home
+      li.c-header__nav-item
+        a.c-header__nav-link(href=`${Builder.dir}about/`) About

package/template/src/_templates/mixins/_Image.pug

@@ -0,0 +1,103 @@
+//- ============================================================
+//- Image mixin 
+//- ============================================================
+//- 引数
+//-   path  {string}  img/ 以下の画像パス（必須）
+//-   args  {object}  オプション
+//-     alt           {string}  代替テキスト（デフォルト: ''）
+//-     lazy          {boolean} 遅延読み込み（デフォルト: true）
+//-     webp          {boolean} WebP source を出力するか（デフォルト: true）
+//-     class         {string}  picture 要素のクラス
+
+//- 使用例
+//-   +Image('hero.jpg')
+//-   +Image('hero.jpg', { alt: 'ヒーロー画像', lazy: false })
+mixin Image(path, args = {})
+  -
+    const src   = `${Builder.dir}assets/img/${path}`;
+    const ext   = src.slice(src.lastIndexOf('.'));
+    const isSvg = ext === '.svg';
+
+    const base = src.substring(0, src.lastIndexOf('.'));
+    const webpPath   = `${base}.webp`;
+    const retinaWebp = `${base}@2x.webp 2x`;
+
+    const alt           = args.alt || '';
+    const loading       = args.lazy !== false ? 'lazy' : undefined;
+    const fetchpriority = args.lazy === false ? 'high' : undefined;
+    const width  = imageSize(src).width;
+    const height = imageSize(src).height;
+
+    // SVG は retina 不要のため 1x のみ。ラスター画像は 1x + 2x
+    const webpSrcset = isSvg ? webpPath : `${webpPath} 1x, ${retinaWebp}`;
+
+  picture(class=args.class)
+    if !isSvg && args.webp !== false
+      source(type='image/webp' srcset=webpSrcset)
+    img(
+      src=isSvg ? src : webpPath
+      alt=alt
+      width=width
+      height=height
+      loading=loading
+      fetchpriority=fetchpriority
+    )
+
+//- ============================================================
+//- ResponsiveImage mixin — レスポンシブ対応画像
+//- ============================================================
+//- 引数 ※ SVG は非対応。ラスター画像（jpg / png / webp 等）のみ使用可
+//-   path  {string}  img/ 以下の画像パス（必須）。SP 画像は `basename_sp.ext` を自動参照
+//-   args  {object}  オプション
+//-     alt           {string}  代替テキスト（デフォルト: ''）
+//-     media         {string}  SP 用ブレークポイントキー 'sm' | 'md' | 'lg'（デフォルト: 'md'）
+//-     lazy          {boolean} 遅延読み込み（デフォルト: true）
+//-     webp          {boolean} WebP source を出力するか（デフォルト: true）
+//-     class         {string}  picture 要素のクラス
+
+//- 使用例
+//-   +ResponsiveImage('hero.jpg')
+//-   +ResponsiveImage('hero.jpg', { media: 'sm', alt: 'ヒーロー画像' })
+mixin ResponsiveImage(path, args = {})
+  -
+    const src  = `${Builder.dir}assets/img/${path}`;
+    const ext  = src.slice(src.lastIndexOf('.'));
+
+    const base       = src.substring(0, src.lastIndexOf('.'));
+    const webpPath   = `${base}.webp`;
+    const retinaWebp = `${base}@2x.webp 2x`;
+    const spWebp     = `${base}_sp.webp`;
+    const spPath     = `${base}_sp${ext}`;
+
+    const alt           = args.alt || '';
+    const media         = BREAK_POINTS[args.media] || BREAK_POINTS.md;
+    const loading       = args.lazy !== false ? 'lazy' : undefined;
+    const fetchpriority = args.lazy === false ? 'high' : undefined;
+    const webpSrcset    = `${webpPath} 1x, ${retinaWebp}`;
+
+    const width    = imageSize(src).width;
+    const height   = imageSize(src).height;
+    const spWidth  = imageSize(spPath).width;
+    const spHeight = imageSize(spPath).height;
+
+  picture(class=args.class)
+    //- SP 用 source（メディアクエリ付き）
+    if args.webp !== false
+      source(
+        type='image/webp'
+        media=media
+        srcset=spWebp
+        width=spWidth
+        height=spHeight
+      )
+    //- PC 用 source
+    if args.webp !== false
+      source(type='image/webp' srcset=webpSrcset)
+    img(
+      src=webpPath
+      alt=alt
+      width=width
+      height=height
+      loading=loading
+      fetchpriority=fetchpriority
+    )

package/template/src/_templates/mixins/_Meta.pug

@@ -0,0 +1,38 @@
+mixin Meta(meta = {})
+  -
+    const site = {
+      title: meta.siteTitle || '__サイトタイトル__',
+      description: meta.siteDescription || '__サイト説明文__',
+    }
+
+    const page = {
+      title: meta.pageTitle || '',
+      description: meta.pageDescription || '',
+      type: meta.pageType || 'article'
+    }
+
+    const title = Builder.pathname === '/' || !page.title ? site.title : `${page.title}｜${site.title}`
+    const description = page.description || site.description
+    const ogImage = `${Builder.url.base}/assets/img/common/ogp.jpg`
+
+  //- 基本メタ情報
+  meta(charset='UTF-8')
+  meta(name='viewport' content='width=device-width,initial-scale=1,viewport-fit=cover')
+  meta(name='format-detection' content='telephone=no')
+  meta(name='mobile-web-app-capable' content='yes')
+
+  //- アイコン
+  link(rel='icon' href='/favicon.ico')
+
+  //- タイトルと説明
+  title !{title}
+  meta(name='description' content=description)
+
+  //- OGP
+  meta(property='og:title' content!=title)
+  meta(property='og:url' content=Builder.url.href)
+  meta(property='og:description' content=description)
+  meta(property='og:type' content=page.type)
+  meta(property='og:image' content=ogImage)
+  meta(property='og:site_name' content=site.title)
+  meta(name='twitter:card' content='summary_large_image')

package/template/src/about/index.pug

@@ -0,0 +1,26 @@
+
+extends /_templates/_layout
+
+block append vars
+  - 
+    metaData.pageTitle = 'About'
+    metaData.pageDescription = ''
+    metaData.pageType = 'article'
+
+block contents
+  section.page
+    .page__inner
+      h2.page__title About
+      .page__content
+        p.page__text pugkitは静的サイト制作に特化したビルドツールです。PugテンプレートとSassを中心としたシンプルな構成で、納品向きの綺麗なHTMLと、構成に制約のないアセット出力が可能です。
+        h3.page__heading Tech Stack
+        ul.page__list
+          li.page__list-item Pug — HTMLテンプレートエンジン
+          li.page__list-item Sass — CSSプリプロセッサー
+          li.page__list-item esbuild — TypeScript / JavaScriptバンドラー
+          li.page__list-item Sharp — 画像最適化（WebP変換）
+        h3.page__heading Quick Start
+        pre.page__code.
+          npm create pugkit@latest
+        .page__buttons
+          a.page__button(href=Builder.dir) トップに戻る