@ncukondo/slide-generation 0.1.0

package/templates/diagrams/timeline.yaml

@@ -0,0 +1,167 @@
+name: timeline
+description: "タイムライン"
+category: diagrams
+
+schema:
+  type: object
+  required:
+    - title
+    - events
+  properties:
+    title:
+      type: string
+      description: "スライドタイトル"
+    events:
+      type: array
+      minItems: 2
+      description: "タイムラインのイベント"
+      items:
+        type: object
+        required:
+          - date
+          - label
+        properties:
+          date:
+            type: string
+            description: "日付や時期"
+          label:
+            type: string
+            description: "イベントのラベル"
+          description:
+            type: string
+            description: "イベントの説明"
+          icon:
+            type: string
+            description: "アイコン参照"
+          color:
+            type: string
+            pattern: "^#[0-9A-Fa-f]{6}$"
+            default: "#2196F3"
+            description: "イベントの色"
+    direction:
+      type: string
+      enum:
+        - horizontal
+        - vertical
+      default: horizontal
+      description: "タイムラインの方向"
+
+example:
+  title: "プロジェクト計画"
+  direction: horizontal
+  events:
+    - date: "Q1"
+      label: "企画"
+      description: "要件定義・設計"
+      color: "#4CAF50"
+    - date: "Q2"
+      label: "開発"
+      description: "実装・単体テスト"
+      color: "#2196F3"
+    - date: "Q3"
+      label: "テスト"
+      description: "結合・システムテスト"
+      color: "#FF9800"
+    - date: "Q4"
+      label: "リリース"
+      description: "本番展開・運用開始"
+      color: "#9C27B0"
+
+output: |
+  <!-- _class: diagram-slide timeline-slide -->
+
+  # {{ content.title }}
+
+  <div class="timeline-container timeline-{{ content.direction | default('horizontal') }}">
+    <div class="timeline-line"></div>
+    {%- for event in content.events %}
+    <div class="timeline-event" style="--event-color: {{ event.color | default('#2196F3') }};">
+      <div class="event-marker">
+        {%- if event.icon %}
+        {{ icons.render(event.icon) }}
+        {%- endif %}
+      </div>
+      <div class="event-content">
+        <span class="event-date">{{ event.date }}</span>
+        <span class="event-label">{{ event.label }}</span>
+        {%- if event.description %}
+        <span class="event-description">{{ event.description }}</span>
+        {%- endif %}
+      </div>
+    </div>
+    {%- endfor %}
+  </div>
+
+css: |
+  .timeline-container {
+    position: relative;
+    display: flex;
+    padding: 2em;
+  }
+  .timeline-container.timeline-horizontal {
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: flex-start;
+  }
+  .timeline-container.timeline-vertical {
+    flex-direction: column;
+    gap: 2em;
+  }
+  .timeline-line {
+    position: absolute;
+    background: #ccc;
+  }
+  .timeline-horizontal .timeline-line {
+    top: 3em;
+    left: 2em;
+    right: 2em;
+    height: 2px;
+  }
+  .timeline-vertical .timeline-line {
+    left: 3em;
+    top: 2em;
+    bottom: 2em;
+    width: 2px;
+  }
+  .timeline-event {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    position: relative;
+    z-index: 1;
+  }
+  .timeline-vertical .timeline-event {
+    flex-direction: row;
+    gap: 1em;
+  }
+  .event-marker {
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background: var(--event-color);
+    border: 2px solid white;
+    box-shadow: 0 0 0 2px var(--event-color);
+  }
+  .event-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    margin-top: 1em;
+  }
+  .timeline-vertical .event-content {
+    align-items: flex-start;
+    text-align: left;
+    margin-top: 0;
+  }
+  .event-date {
+    font-weight: bold;
+    color: var(--event-color);
+  }
+  .event-label {
+    font-size: 1.1em;
+  }
+  .event-description {
+    font-size: 0.85em;
+    color: #666;
+  }

package/templates/layouts/gallery.yaml

@@ -0,0 +1,94 @@
+name: gallery
+description: "画像ギャラリー"
+category: layouts
+
+schema:
+  type: object
+  required:
+    - title
+    - images
+  properties:
+    title:
+      type: string
+      description: "スライドタイトル"
+    images:
+      type: array
+      minItems: 1
+      description: "画像配列"
+      items:
+        type: object
+        required:
+          - src
+        properties:
+          src:
+            type: string
+            description: "画像パス"
+          alt:
+            type: string
+            description: "代替テキスト"
+          caption:
+            type: string
+            description: "キャプション"
+    columns:
+      type: integer
+      minimum: 2
+      maximum: 6
+      default: 3
+      description: "列数"
+
+example:
+  title: "製品ラインナップ"
+  columns: 3
+  images:
+    - src: "product1.png"
+      alt: "製品A"
+      caption: "スタンダードモデル"
+    - src: "product2.png"
+      alt: "製品B"
+      caption: "プロフェッショナルモデル"
+    - src: "product3.png"
+      alt: "製品C"
+      caption: "エンタープライズモデル"
+
+output: |
+  <!-- _class: gallery-slide -->
+
+  # {{ content.title }}
+
+  <div class="gallery-container gallery-cols-{{ content.columns | default(3) }}">
+    {%- for image in content.images %}
+    <figure class="gallery-item">
+      ![{{ image.alt | default('') }}]({{ image.src }})
+      {%- if image.caption %}
+      <figcaption>{{ image.caption }}</figcaption>
+      {%- endif %}
+    </figure>
+    {%- endfor %}
+  </div>
+
+css: |
+  .gallery-slide .gallery-container {
+    display: grid;
+    gap: 1em;
+    width: 100%;
+    justify-items: center;
+  }
+  .gallery-slide .gallery-cols-2 { grid-template-columns: repeat(2, 1fr); }
+  .gallery-slide .gallery-cols-3 { grid-template-columns: repeat(3, 1fr); }
+  .gallery-slide .gallery-cols-4 { grid-template-columns: repeat(4, 1fr); }
+  .gallery-slide .gallery-cols-5 { grid-template-columns: repeat(5, 1fr); }
+  .gallery-slide .gallery-cols-6 { grid-template-columns: repeat(6, 1fr); }
+  .gallery-slide .gallery-item {
+    text-align: center;
+    margin: 0;
+  }
+  .gallery-slide .gallery-item img {
+    max-width: 100%;
+    height: auto;
+    border-radius: 4px;
+  }
+  .gallery-slide .gallery-item figcaption {
+    font-size: 0.85em;
+    color: #666;
+    margin-top: 0.5em;
+  }

package/templates/layouts/image-text.yaml

@@ -0,0 +1,105 @@
+name: image-text
+description: "画像＋テキストレイアウト"
+category: layouts
+
+schema:
+  type: object
+  required:
+    - title
+    - image
+    - text
+  properties:
+    title:
+      type: string
+      description: "スライドタイトル"
+    image:
+      type: string
+      description: "画像パス"
+    alt:
+      type: string
+      description: "画像の代替テキスト（アクセシビリティ用）"
+    caption:
+      type: string
+      description: "画像キャプション"
+    text:
+      oneOf:
+        - type: string
+        - type: array
+          items:
+            type: string
+      description: "テキストコンテンツ"
+    imagePosition:
+      type: string
+      enum:
+        - left
+        - right
+      default: left
+      description: "画像の位置"
+    ratio:
+      type: string
+      pattern: "^\\d+:\\d+$"
+      default: "50:50"
+      description: "画像とテキストの幅比率"
+
+example:
+  title: "製品紹介"
+  image: "product-photo.png"
+  alt: "製品の外観写真"
+  caption: "新製品のデザイン"
+  text:
+    - "高品質な素材を使用"
+    - "エルゴノミクスデザイン"
+    - "3年保証付き"
+  imagePosition: left
+
+output: |
+  <!-- _class: image-text-slide image-{{ content.imagePosition | default('left') }} -->
+
+  # {{ content.title }}
+
+  <div class="image-text-container">
+    <div class="image-section">
+      ![{{ content.alt | default(content.title) }}]({{ content.image }})
+      {%- if content.caption %}
+      <p class="image-caption">{{ content.caption }}</p>
+      {%- endif %}
+    </div>
+    <div class="text-section">
+      {%- if content.text is iterable and content.text is not string %}
+      {%- for item in content.text %}
+      - {{ item }}
+      {%- endfor %}
+      {%- else %}
+      {{ content.text }}
+      {%- endif %}
+    </div>
+  </div>
+
+css: |
+  .image-text-slide .image-text-container {
+    display: flex;
+    gap: 2em;
+    align-items: center;
+    height: 80%;
+  }
+  .image-text-slide.image-right .image-text-container {
+    flex-direction: row-reverse;
+  }
+  .image-text-slide .image-section {
+    flex: 1;
+    text-align: center;
+  }
+  .image-text-slide .image-section img {
+    max-width: 100%;
+    max-height: 400px;
+    object-fit: contain;
+  }
+  .image-text-slide .image-caption {
+    font-style: italic;
+    color: #666;
+    margin-top: 0.5em;
+    font-size: 0.9em;
+  }
+  .image-text-slide .text-section {
+    flex: 1;
+  }

package/templates/layouts/three-column.yaml

@@ -0,0 +1,101 @@
+name: three-column
+description: "3カラムレイアウト"
+category: layouts
+
+schema:
+  type: object
+  required:
+    - title
+    - columns
+  properties:
+    title:
+      type: string
+      description: "スライドタイトル"
+    columns:
+      type: array
+      minItems: 2
+      maxItems: 4
+      description: "カラム配列"
+      items:
+        type: object
+        required:
+          - content
+        properties:
+          title:
+            type: string
+            description: "カラムタイトル（オプション）"
+          icon:
+            type: string
+            description: "アイコン参照（オプション）"
+          content:
+            oneOf:
+              - type: string
+              - type: array
+                items:
+                  type: string
+            description: "カラムのコンテンツ"
+
+example:
+  title: "3つのポイント"
+  columns:
+    - title: "ポイント1"
+      icon: "idea"
+      content: "最初のポイントの説明"
+    - title: "ポイント2"
+      icon: "growth"
+      content: "2番目のポイントの説明"
+    - title: "ポイント3"
+      icon: "success"
+      content: "3番目のポイントの説明"
+
+output: |
+  <!-- _class: three-column-slide -->
+
+  # {{ content.title }}
+
+  <div class="column-container column-count-{{ content.columns | length }}">
+    {%- for column in content.columns %}
+    <div class="column">
+      {%- if column.icon %}
+      <span class="column-icon">{{ icons.render(column.icon) }}</span>
+      {%- endif %}
+      {%- if column.title %}
+      <h3 class="column-title">{{ column.title }}</h3>
+      {%- endif %}
+      <div class="column-content">
+        {%- if column.content is iterable and column.content is not string %}
+        {%- for item in column.content %}
+        - {{ item }}
+        {%- endfor %}
+        {%- else %}
+        {{ column.content }}
+        {%- endif %}
+      </div>
+    </div>
+    {%- endfor %}
+  </div>
+
+css: |
+  .three-column-slide .column-container {
+    display: flex;
+    gap: 1.5em;
+    width: 100%;
+    justify-content: space-between;
+  }
+  .three-column-slide .column {
+    flex: 1;
+    text-align: center;
+    padding: 1em;
+  }
+  .three-column-slide .column-icon {
+    font-size: 2em;
+    display: block;
+    margin-bottom: 0.5em;
+  }
+  .three-column-slide .column-title {
+    font-weight: bold;
+    margin-bottom: 0.5em;
+  }
+  .three-column-slide .column-content {
+    text-align: left;
+  }

package/templates/layouts/two-column.yaml

@@ -0,0 +1,85 @@
+name: two-column
+description: "2カラムレイアウト"
+category: layouts
+
+schema:
+  type: object
+  required:
+    - title
+    - left
+    - right
+  properties:
+    title:
+      type: string
+      description: "スライドタイトル"
+    left:
+      oneOf:
+        - type: string
+        - type: array
+          items:
+            type: string
+      description: "左カラムのコンテンツ（文字列または配列）"
+    right:
+      oneOf:
+        - type: string
+        - type: array
+          items:
+            type: string
+      description: "右カラムのコンテンツ（文字列または配列）"
+    ratio:
+      type: string
+      pattern: "^\\d+:\\d+$"
+      default: "50:50"
+      description: "左右の幅比率（例: 60:40）"
+
+example:
+  title: "2カラム比較"
+  left:
+    - "左側のポイント1"
+    - "左側のポイント2"
+  right:
+    - "右側のポイント1"
+    - "右側のポイント2"
+  ratio: "50:50"
+
+output: |
+  <!-- _class: two-column-slide -->
+
+  # {{ content.title }}
+
+  {% set leftRatio = content.ratio.split(':')[0] if content.ratio else '50' %}
+  {% set rightRatio = content.ratio.split(':')[1] if content.ratio else '50' %}
+  <div class="two-column-container" style="--left-ratio: {{ leftRatio }}; --right-ratio: {{ rightRatio }};">
+    <div class="column-left">
+      {%- if content.left is iterable and content.left is not string %}
+      {%- for item in content.left %}
+      - {{ item }}
+      {%- endfor %}
+      {%- else %}
+      {{ content.left }}
+      {%- endif %}
+    </div>
+    <div class="column-right">
+      {%- if content.right is iterable and content.right is not string %}
+      {%- for item in content.right %}
+      - {{ item }}
+      {%- endfor %}
+      {%- else %}
+      {{ content.right }}
+      {%- endif %}
+    </div>
+  </div>
+
+css: |
+  .two-column-slide .two-column-container {
+    display: flex;
+    gap: 2em;
+    width: 100%;
+    height: 80%;
+  }
+  .two-column-slide .column-left {
+    flex: var(--left-ratio, 50);
+  }
+  .two-column-slide .column-right {
+    flex: var(--right-ratio, 50);
+  }

package/templates/special/bibliography.yaml

@@ -0,0 +1,132 @@
+name: bibliography
+description: "参考文献スライド"
+category: special
+
+schema:
+  type: object
+  required:
+    - title
+  properties:
+    title:
+      type: string
+      description: "スライドタイトル"
+    references:
+      type: array
+      description: "参考文献リスト"
+      items:
+        type: object
+        required:
+          - id
+          - title
+        properties:
+          id:
+            type: string
+            description: "引用ID"
+          authors:
+            type: array
+            items:
+              type: string
+            description: "著者リスト"
+          title:
+            type: string
+            description: "タイトル"
+          year:
+            type: integer
+            description: "出版年"
+          journal:
+            type: string
+            description: "ジャーナル名"
+          publisher:
+            type: string
+            description: "出版社"
+          volume:
+            type: string
+            description: "巻号"
+          pages:
+            type: string
+            description: "ページ"
+          url:
+            type: string
+            description: "URL"
+          doi:
+            type: string
+            description: "DOI"
+    autoGenerate:
+      type: boolean
+      default: false
+      description: "プレゼンテーション内の引用から自動生成"
+    sortBy:
+      type: string
+      enum:
+        - author
+        - year
+        - title
+      default: author
+      description: "ソート順"
+
+example:
+  title: "参考文献"
+  sortBy: author
+  references:
+    - id: knuth1984
+      authors:
+        - "Knuth, D. E."
+      title: "Literate Programming"
+      year: 1984
+      journal: "The Computer Journal"
+      volume: "27(2)"
+      pages: "97-111"
+    - id: martin2008
+      authors:
+        - "Martin, R. C."
+      title: "Clean Code: A Handbook of Agile Software Craftsmanship"
+      year: 2008
+      publisher: "Prentice Hall"
+
+output: |
+  <!-- _class: bibliography-slide -->
+
+  # {{ content.title }}
+
+  <div class="references-list">
+    {%- for ref in content.references %}
+    <div class="reference-item" id="ref-{{ ref.id }}">
+      <span class="reference-marker">[{{ loop.index }}]</span>
+      <span class="reference-content">
+        {%- if ref.authors %}{{ ref.authors | join(', ') }}{% endif %}
+        {%- if ref.year %} ({{ ref.year }}).{% endif %}
+        <em>{{ ref.title }}</em>.
+        {%- if ref.journal %} {{ ref.journal }}.{% endif %}
+        {%- if ref.volume %} {{ ref.volume }}{% endif %}
+        {%- if ref.pages %}, pp. {{ ref.pages }}{% endif %}
+        {%- if ref.publisher %} {{ ref.publisher }}.{% endif %}
+        {%- if ref.doi %} DOI: {{ ref.doi }}{% endif %}
+        {%- if ref.url %} <{{ ref.url }}>{% endif %}
+      </span>
+    </div>
+    {%- endfor %}
+  </div>
+
+css: |
+  .bibliography-slide .references-list {
+    font-size: 0.85em;
+    line-height: 1.6;
+  }
+  .bibliography-slide .reference-item {
+    display: flex;
+    margin-bottom: 0.8em;
+    padding-left: 1em;
+    text-indent: -1em;
+  }
+  .bibliography-slide .reference-marker {
+    font-weight: bold;
+    color: #333;
+    min-width: 2em;
+    margin-right: 0.5em;
+  }
+  .bibliography-slide .reference-content {
+    flex: 1;
+  }
+  .bibliography-slide .reference-content em {
+    font-style: italic;
+  }