@ncukondo/slide-generation 0.1.0 → 0.2.0

package/icons/registry.yaml

@@ -3,20 +3,33 @@
 
 # Icon source definitions
 sources:
-  # Material Icons (Web Font)
+  # Material Icons (Web Font) - Classic Google icons
   - name: material-icons
     type: web-font
     prefix: mi
     url: "https://fonts.googleapis.com/icon?family=Material+Icons"
     render: '<span class="material-icons" style="{{ style }}">{{ name }}</span>'
 
-  # Heroicons (SVG CDN)
+  # Material Symbols (SVG via Iconify) - New Google icons with more variants
+  - name: material-symbols
+    type: svg-inline
+    prefix: ms
+    url: "https://api.iconify.design/material-symbols/{name}.svg"
+
+  # Health Icons - Medical and health-focused icons
+  # Source: https://healthicons.org/
+  - name: healthicons
+    type: svg-inline
+    prefix: health
+    url: "https://api.iconify.design/healthicons/{name}.svg"
+
+  # Heroicons (SVG CDN) - Beautiful hand-crafted icons
   - name: heroicons
     type: svg-inline
     prefix: hero
     url: "https://unpkg.com/heroicons@2.0.0/24/outline/{name}.svg"
 
-  # Iconify (Universal SVG CDN)
+  # Iconify (Universal SVG CDN) - Access to 100+ icon sets
   - name: iconify
     type: svg-inline
     prefix: iconify
@@ -28,50 +41,292 @@ sources:
     prefix: custom
     path: "./icons/custom/"
 
+  # Fetched icons (auto-saved from external sources)
+  # Icons are saved locally for offline use and reproducibility
+  - name: fetched
+    type: local-svg
+    prefix: fetched
+    path: "./icons/fetched/"
+
 # Semantic aliases - map meaningful names to actual icons
+# AIはこれらのエイリアスを使用してアイコンを選択します
 aliases:
-  # Actions
+  # === アクション系 ===
   planning: "mi:event_note"
   action: "mi:play_arrow"
   analysis: "mi:analytics"
   improvement: "mi:trending_up"
+  start: "mi:play_circle"
+  stop: "mi:stop_circle"
+  pause: "mi:pause_circle"
+  restart: "mi:replay"
+  save: "mi:save"
+  edit: "mi:edit"
+  delete: "mi:delete"
+  add: "mi:add_circle"
+  remove: "mi:remove_circle"
+  search: "mi:search"
+  filter: "mi:filter_list"
+  sort: "mi:sort"
+  refresh: "mi:refresh"
+  sync: "mi:sync"
+  upload: "mi:upload"
+  download: "mi:download"
+  share: "mi:share"
+  copy: "mi:content_copy"
+  paste: "mi:content_paste"
+  print: "mi:print"
+  export: "mi:file_download"
+  import: "mi:file_upload"
 
-  # Status
+  # === ステータス系 ===
   success: "mi:check_circle"
   warning: "mi:warning"
   error: "mi:error"
   info: "mi:info"
+  question: "mi:help"
+  pending: "mi:hourglass_empty"
+  in-progress: "mi:autorenew"
+  completed: "mi:task_alt"
+  cancelled: "mi:cancel"
+  approved: "mi:verified"
+  rejected: "mi:block"
 
-  # Objects
+  # === オブジェクト系 ===
   document: "mi:description"
   folder: "mi:folder"
+  file: "mi:insert_drive_file"
   database: "mi:storage"
   settings: "mi:settings"
+  config: "mi:tune"
+  calendar: "mi:calendar_today"
+  clock: "mi:schedule"
+  timer: "mi:timer"
+  alarm: "mi:alarm"
+  bookmark: "mi:bookmark"
+  star: "mi:star"
+  heart: "mi:favorite"
+  flag: "mi:flag"
+  tag: "mi:label"
+  link: "mi:link"
+  attachment: "mi:attach_file"
+  image: "mi:image"
+  video: "mi:videocam"
+  audio: "mi:audiotrack"
+  code: "mi:code"
+  terminal: "mi:terminal"
+  cloud: "mi:cloud"
+  server: "mi:dns"
+  network: "mi:lan"
+  security: "mi:security"
+  lock: "mi:lock"
+  unlock: "mi:lock_open"
+  key: "mi:vpn_key"
 
-  # Navigation
+  # === ナビゲーション系 ===
   home: "mi:home"
   back: "mi:arrow_back"
   forward: "mi:arrow_forward"
   up: "mi:arrow_upward"
   down: "mi:arrow_downward"
+  left: "mi:chevron_left"
+  right: "mi:chevron_right"
+  expand: "mi:expand_more"
+  collapse: "mi:expand_less"
+  menu: "mi:menu"
+  close: "mi:close"
+  fullscreen: "mi:fullscreen"
+  minimize: "mi:minimize"
+  maximize: "mi:crop_square"
 
-  # Communication
+  # === コミュニケーション系 ===
   email: "mi:email"
   phone: "mi:phone"
   chat: "mi:chat"
+  message: "mi:message"
   notification: "mi:notifications"
+  announcement: "mi:campaign"
+  feedback: "mi:feedback"
+  comment: "mi:comment"
+  forum: "mi:forum"
+  support: "mi:support_agent"
+
+  # === 人物・組織系 ===
+  person: "mi:person"
+  people: "mi:people"
+  group: "mi:group"
+  team: "mi:groups"
+  organization: "mi:business"
+  company: "mi:domain"
+  department: "mi:account_tree"
+  leader: "mi:supervisor_account"
+  meeting: "mi:event"
+  presentation: "mi:slideshow"
+
+  # === ビジネス・プロセス系 ===
+  workflow: "mi:account_tree"
+  process: "mi:linear_scale"
+  cycle: "mi:autorenew"
+  flowchart: "mi:schema"
+  hierarchy: "mi:account_tree"
+  milestone: "mi:flag"
+  target: "mi:gps_fixed"
+  goal: "mi:emoji_events"
+  kpi: "mi:speed"
+  metric: "mi:bar_chart"
+  report: "mi:assessment"
+  dashboard: "mi:dashboard"
+  chart: "mi:insert_chart"
+  graph: "mi:show_chart"
+  table: "mi:table_chart"
+  list: "mi:list"
+  grid: "mi:grid_view"
+  kanban: "mi:view_kanban"
+  timeline: "mi:timeline"
+  roadmap: "mi:map"
+  strategy: "mi:lightbulb"
+  idea: "mi:lightbulb"
+  innovation: "mi:auto_awesome"
+  research: "mi:science"
+  experiment: "mi:biotech"
+  development: "mi:developer_mode"
+  launch: "mi:rocket_launch"
+  growth: "mi:trending_up"
+  profit: "mi:attach_money"
+  cost: "mi:money_off"
+  budget: "mi:account_balance_wallet"
+  investment: "mi:savings"
+  risk: "mi:warning"
+  opportunity: "mi:lightbulb"
+
+  # === 教育・学習系 ===
+  education: "mi:school"
+  learning: "mi:menu_book"
+  training: "mi:fitness_center"
+  course: "mi:class"
+  lesson: "mi:book"
+  quiz: "mi:quiz"
+  exam: "mi:assignment"
+  certificate: "mi:workspace_premium"
+  graduation: "mi:school"
+  knowledge: "mi:psychology"
+  skill: "mi:construction"
+
+  # === 医療・健康系（Health Icons） ===
+  # 一般医療
+  medical: "health:health"
+  hospital: "health:hospital"
+  clinic: "health:clinic"
+  ambulance: "health:ambulance"
+  emergency: "health:emergency"
+  first-aid: "health:first-aid-kit"
+
+  # 人体・臓器
+  body: "health:body"
+  heart-organ: "health:heart-organ"
+  lungs: "health:lungs"
+  brain: "health:brain"
+  liver: "health:liver"
+  kidney: "health:kidneys"
+  stomach: "health:stomach"
+  intestine: "health:intestine"
+  bones: "health:bone"
+  blood: "health:blood-drop"
+  dna: "health:dna"
+  cells: "health:cells"
+  virus: "health:virus"
+  bacteria: "health:bacteria"
+
+  # 医療行為
+  diagnosis: "health:stethoscope"
+  stethoscope: "health:stethoscope"
+  syringe: "health:syringe"
+  injection: "health:syringe"
+  vaccine: "health:vaccines"
+  pill: "health:medicines"
+  medicine: "health:medicines"
+  prescription: "health:pharmacy"
+  pharmacy: "health:pharmacy"
+  surgery: "health:surgery"
+  operation: "health:surgery"
+  bandage: "health:bandage"
+  wheelchair: "health:wheelchair"
+  crutches: "health:crutches"
+
+  # 医療機器
+  xray: "health:x-ray"
+  ct-scan: "health:ct-scan"
+  mri: "health:mri"
+  ultrasound: "health:ultrasound"
+  ecg: "health:electrocardiogram"
+  microscope: "health:microscope"
+  lab: "health:laboratory"
+  test-tube: "health:test-tube"
+
+  # 医療従事者
+  doctor: "health:doctor-male"
+  nurse: "health:nurse"
+  dentist: "health:tooth"
+  patient: "health:patient"
+
+  # 健康・ウェルネス
+  health: "health:health"
+  wellness: "health:exercise"
+  exercise: "health:exercise"
+  nutrition: "health:fruit"
+  sleep: "health:sleep"
+  mental-health: "health:mental-health"
+  meditation: "health:meditation"
+
+  # 公衆衛生
+  mask: "health:face-mask"
+  sanitizer: "health:hand-sanitizer"
+  social-distance: "health:social-distance"
+  quarantine: "health:quarantine"
+  testing: "health:covid-test"
+
+  # === Material Symbols（新しいスタイル） ===
+  # Material Symbolsは ms: プレフィックスで直接指定も可能
+  # 例: ms:home, ms:settings, ms:person
 
 # Color palette for icons
+# テーマから継承可能、またはここで定義
 colors:
+  # プライマリカラー
   primary: "#1976D2"
   secondary: "#424242"
   accent: "#FF4081"
+
+  # セマンティックカラー
   success: "#4CAF50"
   warning: "#FF9800"
   danger: "#F44336"
   info: "#2196F3"
 
+  # ニュートラル
+  light: "#FAFAFA"
+  dark: "#212121"
+  muted: "#9E9E9E"
+
+  # 医療系カラー
+  medical-primary: "#0277BD"
+  medical-secondary: "#00838F"
+  medical-accent: "#00BCD4"
+  medical-emergency: "#D32F2F"
+  medical-success: "#388E3C"
+
 # Default icon settings
 defaults:
   size: "24px"
   color: "currentColor"
+
+# テーマ連携設定
+theme_integration:
+  # テーマカラーを自動的に継承
+  inherit_colors: true
+
+  # カラーマッピング（テーマ変数 → アイコンカラー）
+  color_mapping:
+    "--theme-primary": "primary"
+    "--theme-secondary": "secondary"
+    "--theme-accent": "accent"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ncukondo/slide-generation",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "A CLI tool to generate Marp-compatible Markdown from YAML source files",
   "type": "module",
   "main": "./dist/index.js",
@@ -64,21 +64,27 @@
   "packageManager": "pnpm@9.15.4",
   "dependencies": {
     "chalk": "^5.4.1",
-    "chokidar": "^4.0.3",
+    "chokidar": "^3.6.0",
     "commander": "^13.1.0",
     "globby": "^14.0.2",
+    "image-size": "^2.0.2",
     "nunjucks": "^3.2.4",
     "ora": "^8.1.1",
+    "sharp": "^0.34.5",
     "yaml": "^2.7.0",
     "zod": "^3.24.1"
   },
   "devDependencies": {
     "@types/node": "^22.10.7",
     "@types/nunjucks": "^3.2.6",
+    "@types/sharp": "^0.32.0",
     "oxfmt": "^0.23.0",
     "oxlint": "^0.16.6",
     "tsup": "^8.3.5",
     "typescript": "^5.7.3",
     "vitest": "^3.0.4"
+  },
+  "optionalDependencies": {
+    "@marp-team/marp-cli": "^4.1.0"
   }
 }

package/templates/layouts/before-after.yaml

@@ -0,0 +1,139 @@
+name: before-after
+description: "ビフォー・アフター比較レイアウト"
+category: layouts
+
+schema:
+  type: object
+  required:
+    - title
+    - before
+    - after
+  properties:
+    title:
+      type: string
+      description: "スライドタイトル"
+    before:
+      type: object
+      required:
+        - image
+      properties:
+        image:
+          type: string
+          description: "ビフォー画像パス"
+        label:
+          type: string
+          default: "Before"
+          description: "ラベル"
+        caption:
+          type: string
+          description: "キャプション"
+    after:
+      type: object
+      required:
+        - image
+      properties:
+        image:
+          type: string
+          description: "アフター画像パス"
+        label:
+          type: string
+          default: "After"
+          description: "ラベル"
+        caption:
+          type: string
+          description: "キャプション"
+    layout:
+      type: string
+      enum:
+        - horizontal
+        - vertical
+        - overlay
+      default: horizontal
+      description: "レイアウト方向"
+
+example:
+  title: "リノベーション結果"
+  before:
+    image: "images/photos/before.jpg"
+    caption: "改修前 (2023年1月)"
+  after:
+    image: "images/photos/after.jpg"
+    caption: "改修後 (2024年3月)"
+
+output: |
+  <!-- _class: before-after-slide layout-{{ content.layout | default('horizontal') }} -->
+
+  # {{ content.title }}
+
+  <div class="before-after-container">
+    <div class="before-section">
+      <span class="comparison-label">{{ content.before.label | default('Before') }}</span>
+      <img src="{{ content.before.image }}" alt="{{ content.before.label | default('Before') }}">
+      {%- if content.before.caption %}
+      <p class="comparison-caption">{{ content.before.caption }}</p>
+      {%- endif %}
+    </div>
+    <div class="after-section">
+      <span class="comparison-label">{{ content.after.label | default('After') }}</span>
+      <img src="{{ content.after.image }}" alt="{{ content.after.label | default('After') }}">
+      {%- if content.after.caption %}
+      <p class="comparison-caption">{{ content.after.caption }}</p>
+      {%- endif %}
+    </div>
+  </div>
+
+css: |
+  .before-after-slide .before-after-container {
+    display: flex;
+    gap: 2em;
+    justify-content: center;
+    align-items: flex-start;
+    width: 100%;
+  }
+  .before-after-slide.layout-horizontal .before-after-container {
+    flex-direction: row;
+  }
+  .before-after-slide.layout-vertical .before-after-container {
+    flex-direction: column;
+    align-items: center;
+  }
+  .before-after-slide .before-section,
+  .before-after-slide .after-section {
+    flex: 1;
+    text-align: center;
+    position: relative;
+  }
+  .before-after-slide.layout-vertical .before-section,
+  .before-after-slide.layout-vertical .after-section {
+    width: 80%;
+    flex: none;
+  }
+  .before-after-slide .comparison-label {
+    display: inline-block;
+    padding: 0.3em 1em;
+    background: #333;
+    color: white;
+    font-size: 0.9em;
+    font-weight: bold;
+    border-radius: 4px;
+    margin-bottom: 0.5em;
+  }
+  .before-after-slide .before-section .comparison-label {
+    background: #666;
+  }
+  .before-after-slide .after-section .comparison-label {
+    background: #2196F3;
+  }
+  .before-after-slide .before-section img,
+  .before-after-slide .after-section img {
+    max-width: 100%;
+    max-height: 300px;
+    object-fit: contain;
+    border-radius: 4px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  }
+  .before-after-slide .comparison-caption {
+    font-size: 0.85em;
+    color: #666;
+    margin-top: 0.5em;
+  }

package/templates/layouts/image-caption.yaml

@@ -0,0 +1,78 @@
+name: image-caption
+description: "画像と詳細キャプションレイアウト"
+category: layouts
+
+schema:
+  type: object
+  required:
+    - image
+    - caption
+  properties:
+    title:
+      type: string
+      description: "スライドタイトル（オプション）"
+    image:
+      type: string
+      description: "画像ファイルパス"
+    caption:
+      type: string
+      description: "画像の説明（キャプション）"
+    source:
+      type: string
+      description: "出典・クレジット"
+
+example:
+  title: "実験結果"
+  image: "images/figures/experiment-result.png"
+  caption: "図1: 温度変化による材料特性の変化。青線が提案手法、赤線が従来手法。"
+  source: "社内実験データ (2024)"
+
+output: |
+  <!-- _class: image-caption-slide -->
+
+  {%- if content.title %}
+  # {{ content.title }}
+
+  {%- endif %}
+  <figure class="image-caption-container">
+    <img src="{{ content.image }}" alt="{{ content.caption }}">
+    <figcaption>
+      <p class="caption-text">{{ content.caption }}</p>
+      {%- if content.source %}
+      <p class="caption-source">{{ content.source }}</p>
+      {%- endif %}
+    </figcaption>
+  </figure>
+
+css: |
+  .image-caption-slide .image-caption-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: 0 auto;
+    max-width: 90%;
+  }
+  .image-caption-slide .image-caption-container img {
+    max-width: 100%;
+    max-height: 400px;
+    object-fit: contain;
+    border-radius: 4px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  }
+  .image-caption-slide figcaption {
+    width: 100%;
+    margin-top: 1em;
+    text-align: left;
+  }
+  .image-caption-slide .caption-text {
+    font-size: 0.95em;
+    color: #333;
+    line-height: 1.5;
+    margin: 0;
+  }
+  .image-caption-slide .caption-source {
+    font-size: 0.85em;
+    color: #666;
+    font-style: italic;
+    margin: 0.5em 0 0 0;
+  }

package/templates/layouts/image-full.yaml

@@ -0,0 +1,106 @@
+name: image-full
+description: "フルスクリーン画像（タイトルオーバーレイ付き）"
+category: layouts
+
+schema:
+  type: object
+  required:
+    - image
+  properties:
+    image:
+      type: string
+      description: "画像ファイルパス"
+    title:
+      type: string
+      description: "オーバーレイタイトル（オプション）"
+    caption:
+      type: string
+      description: "キャプション（オプション）"
+    position:
+      type: string
+      enum:
+        - center
+        - top
+        - bottom
+        - left
+        - right
+      default: center
+      description: "画像の位置"
+    overlay:
+      type: string
+      enum:
+        - none
+        - dark
+        - light
+        - gradient
+      default: none
+      description: "オーバーレイ効果"
+
+example:
+  image: "images/photos/site-overview.jpg"
+  title: "Project Site"
+  overlay: dark
+
+output: |
+  <!-- _class: image-full-slide -->
+
+  <div class="image-full" style="background-image: url('{{ content.image }}'); background-position: {{ content.position | default('center') }};">
+    {%- if content.overlay and content.overlay != 'none' %}
+    <div class="overlay overlay-{{ content.overlay }}"></div>
+    {%- endif %}
+    {%- if content.title %}
+    <h1 class="image-title">{{ content.title }}</h1>
+    {%- endif %}
+    {%- if content.caption %}
+    <p class="image-caption">{{ content.caption }}</p>
+    {%- endif %}
+  </div>
+
+css: |
+  .image-full-slide {
+    padding: 0;
+  }
+  .image-full-slide .image-full {
+    width: 100%;
+    height: 100%;
+    background-size: cover;
+    background-repeat: no-repeat;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+  }
+  .image-full-slide .overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+  }
+  .image-full-slide .overlay-dark {
+    background: rgba(0, 0, 0, 0.5);
+  }
+  .image-full-slide .overlay-light {
+    background: rgba(255, 255, 255, 0.5);
+  }
+  .image-full-slide .overlay-gradient {
+    background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, 0.7));
+  }
+  .image-full-slide .image-title {
+    position: relative;
+    z-index: 2;
+    color: white;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+    font-size: 2.5em;
+    margin: 0;
+  }
+  .image-full-slide .image-caption {
+    position: relative;
+    z-index: 2;
+    color: white;
+    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
+    font-size: 1.2em;
+    margin-top: 0.5em;
+  }