[feat] Dockerを使用したSlidevの環境構築とスライド生成の自動化

以下の変更を行いました：

- Dockerfileを追加し、Node.js、Python、Slidevをインストールする環境を構築
- docker-compose.ymlを追加し、Slidevコンテナの設定を定義
- run_slidev.pyスクリプトを追加し、Slidevコマンドを実行してスライドを生成する処理を自動化
- slides/demo.mdにサンプルのスライド内容を追加
- .gitignoreにSourceSageAssetsディレクトリを追加して無視するように設定
- .gitattributesに画像ファイルの設定を追加
- README.mdにSlidevの実行コマンドを追加

これらの変更により、Dockerを使用してSlidevの環境を簡単に構築し、スライドの生成を自動化することができるようになりました。また、サンプルのスライドを追加し、README.mdにSlidevの実行コマンドを記載することで、プロジェクトの使用方法がわかりやすくなりました。

[feat] Streamlitを使用したMarpスライド生成アプリの実装

以下の変更を行いました：

- app.pyを追加し、Streamlitを使用してMarpスライド生成アプリを実装
- ユーザーがマークダウンテキストを入力し、「Generate Slides」ボタンをクリックするとスライドが生成される
- 生成されたスライドは画像として表示され、各スライドの画像はダウンロード可能なリンクとして提供される
- .streamlit/config.tomlを追加し、Streamlitのテーマを設定

これらの変更により、ユーザーがマークダウンテキストを入力するだけで簡単にMarpスライドを生成できるWebアプリケーションが作成されました。生成されたスライドは画像として表示され、ダウンロードすることも可能です。

.gitattributes

@@ -0,0 +1,3 @@
+*.png filter=lfs diff=lfs merge=lfs -text
+*.gif filter=lfs diff=lfs merge=lfs -text
+*.jpg filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -158,3 +158,4 @@ cython_debug/
 #  and can be added to the global gitignore or merged into this file.  For a more nuclear
 #  option (not recommended) you can uncomment the following to ignore the entire idea folder.
 #.idea/
+SourceSageAssets

.streamlit/config.toml

@@ -0,0 +1,2 @@
+[theme]
+base="light"

Dockerfile

@@ -0,0 +1,19 @@
+# Dockerfile
+FROM node:18
+
+# Pythonのインストール
+RUN apt-get update && apt-get install -y python3 python3-pip
+
+# 作業ディレクトリの設定
+WORKDIR /app
+
+# Slidevのインストール
+RUN npm install -g @slidev/cli@latest
+RUN npm install -D playwright-chromium
+RUN npx playwright install-deps
+
+# Pythonスクリプトのコピー
+COPY run_slidev.py .
+
+# スライドディレクトリの作成
+RUN mkdir slides

README.md

@@ -1 +1,11 @@
-# SlideNova
+# SlideNova
+
+
+```bash
+npx slidev slides/demo.md --remote 
+```
+
+```bash
+npx slidev export slides/demo.md --format png --output slides/out/ --dark
+```
+

app.py

@@ -0,0 +1,38 @@
+import streamlit as st
+from marp import Marp
+import base64
+from io import BytesIO
+
+def main():
+    st.title("Marp Slide Generator")
+    
+    # マークダウン入力欄
+    markdown_text = st.text_area("Enter your markdown text here:", height=400)
+    
+    if st.button("Generate Slides"):
+        # Marpオブジェクトの作成
+        marp = Marp()
+        
+        # マークダウンからスライドを生成
+        slides = marp.convert(markdown_text)
+        
+        # スライドを画像に変換
+        images = []
+        for slide in slides:
+            image_data = slide.render(format="png")
+            images.append(image_data)
+        
+        # 画像を表示
+        st.subheader("Generated Slides")
+        for i, image in enumerate(images):
+            st.image(image, caption=f"Slide {i+1}", use_column_width=True)
+            
+            # 画像をダウンロード可能なリンクとして提供
+            buffered = BytesIO()
+            image.save(buffered, format="PNG")
+            img_str = base64.b64encode(buffered.getvalue()).decode()
+            href = f'<a href="data:file/png;base64,{img_str}" download="slide_{i+1}.png">Download Slide {i+1}</a>'
+            st.markdown(href, unsafe_allow_html=True)
+
+if __name__ == "__main__":
+    main()

docker-compose.yml

@@ -0,0 +1,13 @@
+# docker-compose.yml
+version: '3'
+services:
+  slidev:
+    build:
+      context: .
+      dockerfile: Dockerfile
+    volumes:
+      - ./slides:/app/slides
+    ports:
+      - "3030:3030"
+    # command: python3 run_slidev.py
+    tty: true

run_slidev.py

@@ -0,0 +1,15 @@
+# run_slidev.py
+import os
+import subprocess
+
+# Slideを格納するディレクトリを指定
+slide_dir = "./slides"
+
+# Slideのエントリーポイントを指定
+slide_entry = "slides.md"
+
+# slidevコマンドを実行してスライドを開発モードで起動
+# subprocess.run(["npx", "slidev", slide_entry])
+
+# slidevコマンドを実行してスライドをビルド
+subprocess.run(["npx", "slidev", "build", slide_entry])

slides/demo.md

@@ -0,0 +1,17 @@
+# Slidev
+
+Hello World
+
+---
+
+# Page 2
+
+Directly use code blocks for highlighting
+
+```ts
+console.log('Hello, World!')
+```
+
+---
+
+# Page 3