Compare commits
23 Commits
b2fa06d5fa
...
v0.1.1
| Author | SHA1 | Date | |
|---|---|---|---|
4ad1d3edf6
|
|||
|
55bf725491
|
|||
|
13f1785081
|
|||
|
bb6d51a602
|
|||
|
a4114c5be3
|
|||
|
5c13dc0a1c
|
|||
|
cef0675a88
|
|||
|
fd223290df
|
|||
|
5f4382911b
|
|||
|
95cee69482
|
|||
|
33c166fa0c
|
|||
|
36863e4d9f
|
|||
|
fb0e5107cf
|
|||
|
962017f922
|
|||
|
5ce03098bd
|
|||
|
acce1d5af3
|
|||
|
bf0b72a52d
|
|||
|
6e6c6e2f53
|
|||
|
eb5aa0a2be
|
|||
|
ad45b151b1
|
|||
|
4775fa7034
|
|||
|
d396dbd052
|
|||
|
ec3e3d1f89
|
@@ -33,7 +33,19 @@
|
||||
"Bash(./scripts/test-oauth.sh:*)",
|
||||
"Bash(./run.zsh:*)",
|
||||
"Bash(npm run dev:*)",
|
||||
"Bash(./target/release/ailog:*)"
|
||||
"Bash(./target/release/ailog:*)",
|
||||
"Bash(rg:*)",
|
||||
"Bash(../target/release/ailog build)",
|
||||
"Bash(zsh run.zsh:*)",
|
||||
"Bash(hugo:*)",
|
||||
"WebFetch(domain:docs.bsky.app)",
|
||||
"WebFetch(domain:syui.ai)",
|
||||
"Bash(rustup target list:*)",
|
||||
"Bash(rustup target:*)",
|
||||
"Bash(git add:*)",
|
||||
"Bash(git commit:*)",
|
||||
"Bash(git push:*)",
|
||||
"Bash(git tag:*)"
|
||||
],
|
||||
"deny": []
|
||||
}
|
||||
|
||||
53
.gitea/workflows/deploy.yml
Normal file
53
.gitea/workflows/deploy.yml
Normal file
@@ -0,0 +1,53 @@
|
||||
name: Deploy to Cloudflare Pages
|
||||
|
||||
on:
|
||||
push:
|
||||
branches: [main]
|
||||
pull_request:
|
||||
branches: [main]
|
||||
|
||||
jobs:
|
||||
build-and-deploy:
|
||||
runs-on: ubuntu-latest
|
||||
|
||||
steps:
|
||||
- name: Checkout
|
||||
uses: actions/checkout@v4
|
||||
|
||||
- name: Setup Rust
|
||||
uses: actions-rs/toolchain@v1
|
||||
with:
|
||||
toolchain: stable
|
||||
override: true
|
||||
|
||||
- name: Setup Node.js
|
||||
uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: '20'
|
||||
|
||||
- name: Build ailog
|
||||
run: |
|
||||
cargo build --release
|
||||
|
||||
- name: Build OAuth app
|
||||
run: |
|
||||
cd oauth
|
||||
npm install
|
||||
npm run build
|
||||
|
||||
- name: Copy OAuth assets
|
||||
run: |
|
||||
cp -r oauth/dist/* my-blog/static/
|
||||
|
||||
- name: Generate site with ailog
|
||||
run: |
|
||||
./target/release/ailog generate --input content --output my-blog/public
|
||||
|
||||
- name: Deploy to Cloudflare Pages
|
||||
uses: cloudflare/pages-action@v1
|
||||
with:
|
||||
apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
|
||||
accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
|
||||
projectName: syui-ai
|
||||
directory: my-blog/public
|
||||
gitHubToken: ${{ secrets.GITHUB_TOKEN }}
|
||||
28
.gitea/workflows/example-usage.yml
Normal file
28
.gitea/workflows/example-usage.yml
Normal file
@@ -0,0 +1,28 @@
|
||||
name: Example ailog usage
|
||||
|
||||
on:
|
||||
workflow_dispatch: # Manual trigger for testing
|
||||
|
||||
jobs:
|
||||
build-with-ailog-action:
|
||||
runs-on: ubuntu-latest
|
||||
|
||||
steps:
|
||||
- name: Checkout
|
||||
uses: actions/checkout@v4
|
||||
|
||||
- name: Build with ailog action
|
||||
uses: ai/log@v1 # This will reference this repository
|
||||
with:
|
||||
content-dir: 'content'
|
||||
output-dir: 'public'
|
||||
ai-integration: true
|
||||
atproto-integration: true
|
||||
|
||||
- name: Deploy to Cloudflare Pages
|
||||
uses: cloudflare/pages-action@v1
|
||||
with:
|
||||
apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
|
||||
accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
|
||||
projectName: my-blog
|
||||
directory: public
|
||||
51
.github/workflows/build-binary.yml
vendored
Normal file
51
.github/workflows/build-binary.yml
vendored
Normal file
@@ -0,0 +1,51 @@
|
||||
name: Build Binary
|
||||
|
||||
on:
|
||||
workflow_dispatch: # Manual trigger
|
||||
push:
|
||||
branches: [ main ]
|
||||
paths:
|
||||
- 'src/**'
|
||||
- 'Cargo.toml'
|
||||
- 'Cargo.lock'
|
||||
|
||||
jobs:
|
||||
build:
|
||||
runs-on: ubuntu-latest
|
||||
|
||||
steps:
|
||||
- uses: actions/checkout@v4
|
||||
|
||||
- name: Setup Rust
|
||||
uses: actions-rs/toolchain@v1
|
||||
with:
|
||||
toolchain: stable
|
||||
override: true
|
||||
|
||||
- name: Cache cargo registry
|
||||
uses: actions/cache@v4
|
||||
with:
|
||||
path: ~/.cargo/registry
|
||||
key: ${{ runner.os }}-cargo-registry-${{ hashFiles('**/Cargo.lock') }}
|
||||
|
||||
- name: Cache cargo index
|
||||
uses: actions/cache@v4
|
||||
with:
|
||||
path: ~/.cargo/git
|
||||
key: ${{ runner.os }}-cargo-index-${{ hashFiles('**/Cargo.lock') }}
|
||||
|
||||
- name: Cache target directory
|
||||
uses: actions/cache@v4
|
||||
with:
|
||||
path: target
|
||||
key: ${{ runner.os }}-cargo-build-target-${{ hashFiles('**/Cargo.lock') }}
|
||||
|
||||
- name: Build binary
|
||||
run: cargo build --release
|
||||
|
||||
- name: Upload binary
|
||||
uses: actions/upload-artifact@v4
|
||||
with:
|
||||
name: ailog-linux
|
||||
path: target/release/ailog
|
||||
retention-days: 30
|
||||
66
.github/workflows/cloudflare-pages.yml
vendored
Normal file
66
.github/workflows/cloudflare-pages.yml
vendored
Normal file
@@ -0,0 +1,66 @@
|
||||
name: Deploy to Cloudflare Pages
|
||||
|
||||
on:
|
||||
push:
|
||||
branches:
|
||||
- main
|
||||
workflow_dispatch:
|
||||
|
||||
jobs:
|
||||
deploy:
|
||||
runs-on: ubuntu-latest
|
||||
permissions:
|
||||
contents: read
|
||||
deployments: write
|
||||
|
||||
steps:
|
||||
- name: Checkout
|
||||
uses: actions/checkout@v4
|
||||
|
||||
- name: Setup Node.js
|
||||
uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: '21'
|
||||
|
||||
- name: Install dependencies
|
||||
run: |
|
||||
cd oauth
|
||||
npm install
|
||||
|
||||
- name: Build OAuth app
|
||||
run: |
|
||||
cd oauth
|
||||
npm run build
|
||||
|
||||
- name: Copy OAuth build to static
|
||||
run: |
|
||||
mkdir -p my-blog/static/assets
|
||||
cp -r oauth/dist/assets/* my-blog/static/assets/
|
||||
cp oauth/dist/index.html my-blog/static/oauth/index.html || true
|
||||
|
||||
- name: Setup Rust
|
||||
uses: actions-rs/toolchain@v1
|
||||
with:
|
||||
toolchain: stable
|
||||
|
||||
- name: Build ailog
|
||||
run: cargo build --release
|
||||
|
||||
- name: Build site with ailog
|
||||
run: |
|
||||
cd my-blog
|
||||
../target/release/ailog build
|
||||
|
||||
- name: List public directory
|
||||
run: |
|
||||
ls -la my-blog/public/
|
||||
|
||||
- name: Deploy to Cloudflare Pages
|
||||
uses: cloudflare/pages-action@v1
|
||||
with:
|
||||
apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
|
||||
accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
|
||||
projectName: ${{ secrets.CLOUDFLARE_PROJECT_NAME }}
|
||||
directory: my-blog/public
|
||||
gitHubToken: ${{ secrets.GITHUB_TOKEN }}
|
||||
wranglerVersion: '3'
|
||||
62
.github/workflows/deploy.yml
vendored
62
.github/workflows/deploy.yml
vendored
@@ -1,62 +0,0 @@
|
||||
name: Deploy ailog
|
||||
|
||||
on:
|
||||
push:
|
||||
branches: [ main ]
|
||||
pull_request:
|
||||
branches: [ main ]
|
||||
|
||||
jobs:
|
||||
build-and-deploy:
|
||||
runs-on: ubuntu-latest
|
||||
|
||||
steps:
|
||||
- uses: actions/checkout@v4
|
||||
|
||||
- name: Install Rust
|
||||
uses: actions-rs/toolchain@v1
|
||||
with:
|
||||
toolchain: stable
|
||||
profile: minimal
|
||||
override: true
|
||||
|
||||
- name: Cache cargo registry
|
||||
uses: actions/cache@v3
|
||||
with:
|
||||
path: ~/.cargo/registry
|
||||
key: ${{ runner.os }}-cargo-registry-${{ hashFiles('**/Cargo.lock') }}
|
||||
|
||||
- name: Cache cargo index
|
||||
uses: actions/cache@v3
|
||||
with:
|
||||
path: ~/.cargo/git
|
||||
key: ${{ runner.os }}-cargo-index-${{ hashFiles('**/Cargo.lock') }}
|
||||
|
||||
- name: Cache cargo build
|
||||
uses: actions/cache@v3
|
||||
with:
|
||||
path: target
|
||||
key: ${{ runner.os }}-cargo-build-target-${{ hashFiles('**/Cargo.lock') }}
|
||||
|
||||
- name: Build ailog
|
||||
run: cargo build --release
|
||||
|
||||
- name: Generate static site
|
||||
run: |
|
||||
./target/release/ailog build my-blog
|
||||
touch my-blog/public/.nojekyll
|
||||
|
||||
- name: Setup Cloudflare Pages
|
||||
run: |
|
||||
# Cloudflare Pages用の設定
|
||||
echo '/* /index.html 200' > my-blog/public/_redirects
|
||||
echo 'X-Frame-Options: DENY' > my-blog/public/_headers
|
||||
echo 'X-Content-Type-Options: nosniff' >> my-blog/public/_headers
|
||||
|
||||
- name: Deploy to GitHub Pages
|
||||
uses: peaceiris/actions-gh-pages@v3
|
||||
if: github.ref == 'refs/heads/main'
|
||||
with:
|
||||
github_token: ${{ secrets.GITHUB_TOKEN }}
|
||||
publish_dir: ./my-blog/public
|
||||
publish_branch: gh-pages
|
||||
77
.github/workflows/gh-pages-fast.yml
vendored
Normal file
77
.github/workflows/gh-pages-fast.yml
vendored
Normal file
@@ -0,0 +1,77 @@
|
||||
name: github pages (fast)
|
||||
|
||||
on:
|
||||
push:
|
||||
branches:
|
||||
- main
|
||||
paths-ignore:
|
||||
- 'src/**'
|
||||
- 'Cargo.toml'
|
||||
- 'Cargo.lock'
|
||||
|
||||
jobs:
|
||||
build-deploy:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v4
|
||||
|
||||
- name: Cache ailog binary
|
||||
uses: actions/cache@v4
|
||||
with:
|
||||
path: ./bin
|
||||
key: ailog-bin-${{ runner.os }}
|
||||
restore-keys: |
|
||||
ailog-bin-${{ runner.os }}
|
||||
|
||||
- name: Check and update ailog binary
|
||||
env:
|
||||
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
||||
run: |
|
||||
# Get latest release version
|
||||
LATEST_VERSION=$(curl -s -H "Authorization: Bearer $GITHUB_TOKEN" \
|
||||
https://api.github.com/repos/${{ github.repository }}/releases/latest | jq -r .tag_name)
|
||||
echo "Latest version: $LATEST_VERSION"
|
||||
|
||||
# Check current binary version if exists
|
||||
mkdir -p ./bin
|
||||
if [ -f "./bin/ailog" ]; then
|
||||
CURRENT_VERSION=$(./bin/ailog --version | awk '{print $2}' || echo "unknown")
|
||||
echo "Current version: $CURRENT_VERSION"
|
||||
else
|
||||
CURRENT_VERSION="none"
|
||||
echo "No binary found"
|
||||
fi
|
||||
|
||||
# Download if version is different or binary doesn't exist
|
||||
if [ "$CURRENT_VERSION" != "${LATEST_VERSION#v}" ]; then
|
||||
echo "Downloading ailog $LATEST_VERSION..."
|
||||
curl -sL -H "Authorization: Bearer $GITHUB_TOKEN" \
|
||||
https://github.com/${{ github.repository }}/releases/download/$LATEST_VERSION/ailog-linux-x86_64.tar.gz | tar -xzf -
|
||||
mv ailog ./bin/ailog
|
||||
chmod +x ./bin/ailog
|
||||
echo "Updated to version: $(./bin/ailog --version)"
|
||||
else
|
||||
echo "Binary is up to date"
|
||||
chmod +x ./bin/ailog
|
||||
fi
|
||||
|
||||
- name: Setup Hugo
|
||||
uses: peaceiris/actions-hugo@v3
|
||||
with:
|
||||
hugo-version: "0.139.2"
|
||||
extended: true
|
||||
|
||||
- name: Build with ailog
|
||||
env:
|
||||
TZ: "Asia/Tokyo"
|
||||
run: |
|
||||
# Use pre-built ailog binary instead of cargo build
|
||||
./bin/ailog build --output ./public
|
||||
touch ./public/.nojekyll
|
||||
|
||||
- name: Deploy
|
||||
uses: peaceiris/actions-gh-pages@v3
|
||||
with:
|
||||
github_token: ${{ secrets.GITHUB_TOKEN }}
|
||||
publish_dir: ./public
|
||||
publish_branch: gh-pages
|
||||
176
.github/workflows/release.yml
vendored
Normal file
176
.github/workflows/release.yml
vendored
Normal file
@@ -0,0 +1,176 @@
|
||||
name: Release
|
||||
|
||||
on:
|
||||
push:
|
||||
tags:
|
||||
- 'v*'
|
||||
workflow_dispatch:
|
||||
inputs:
|
||||
tag:
|
||||
description: 'Release tag (e.g., v1.0.0)'
|
||||
required: true
|
||||
default: 'v0.1.0'
|
||||
|
||||
env:
|
||||
CARGO_TERM_COLOR: always
|
||||
OPENSSL_STATIC: true
|
||||
OPENSSL_VENDOR: true
|
||||
|
||||
jobs:
|
||||
build:
|
||||
name: Build ${{ matrix.target }}
|
||||
runs-on: ${{ matrix.os }}
|
||||
strategy:
|
||||
matrix:
|
||||
include:
|
||||
- target: x86_64-unknown-linux-gnu
|
||||
os: ubuntu-latest
|
||||
artifact_name: ailog
|
||||
asset_name: ailog-linux-x86_64
|
||||
- target: x86_64-unknown-linux-musl
|
||||
os: ubuntu-latest
|
||||
artifact_name: ailog
|
||||
asset_name: ailog-linux-x86_64-musl
|
||||
- target: aarch64-unknown-linux-gnu
|
||||
os: ubuntu-latest
|
||||
artifact_name: ailog
|
||||
asset_name: ailog-linux-aarch64
|
||||
- target: x86_64-apple-darwin
|
||||
os: macos-latest
|
||||
artifact_name: ailog
|
||||
asset_name: ailog-macos-x86_64
|
||||
- target: aarch64-apple-darwin
|
||||
os: macos-latest
|
||||
artifact_name: ailog
|
||||
asset_name: ailog-macos-aarch64
|
||||
- target: x86_64-pc-windows-msvc
|
||||
os: windows-latest
|
||||
artifact_name: ailog.exe
|
||||
asset_name: ailog-windows-x86_64.exe
|
||||
|
||||
steps:
|
||||
- uses: actions/checkout@v4
|
||||
|
||||
- name: Setup Rust
|
||||
uses: dtolnay/rust-toolchain@stable
|
||||
with:
|
||||
targets: ${{ matrix.target }}
|
||||
|
||||
- name: Install cross-compilation tools (Linux)
|
||||
if: matrix.os == 'ubuntu-latest'
|
||||
run: |
|
||||
sudo apt-get update
|
||||
sudo apt-get install -y gcc-multilib
|
||||
if [[ "${{ matrix.target }}" == "aarch64-unknown-linux-gnu" ]]; then
|
||||
sudo apt-get install -y gcc-aarch64-linux-gnu
|
||||
fi
|
||||
if [[ "${{ matrix.target }}" == "x86_64-unknown-linux-musl" ]]; then
|
||||
sudo apt-get install -y musl-tools
|
||||
fi
|
||||
|
||||
- name: Configure cross-compilation (Linux ARM64)
|
||||
if: matrix.target == 'aarch64-unknown-linux-gnu'
|
||||
run: |
|
||||
echo '[target.aarch64-unknown-linux-gnu]' >> ~/.cargo/config.toml
|
||||
echo 'linker = "aarch64-linux-gnu-gcc"' >> ~/.cargo/config.toml
|
||||
|
||||
- name: Cache cargo registry
|
||||
uses: actions/cache@v4
|
||||
with:
|
||||
path: |
|
||||
~/.cargo/registry
|
||||
~/.cargo/git
|
||||
key: ${{ runner.os }}-${{ matrix.target }}-cargo-${{ hashFiles('**/Cargo.lock') }}
|
||||
|
||||
- name: Cache target directory
|
||||
uses: actions/cache@v4
|
||||
with:
|
||||
path: target
|
||||
key: ${{ runner.os }}-${{ matrix.target }}-target-${{ hashFiles('**/Cargo.lock') }}
|
||||
|
||||
- name: Build
|
||||
run: cargo build --release --target ${{ matrix.target }}
|
||||
|
||||
- name: Prepare binary
|
||||
shell: bash
|
||||
run: |
|
||||
cd target/${{ matrix.target }}/release
|
||||
if [[ "${{ matrix.os }}" == "windows-latest" ]]; then
|
||||
strip ${{ matrix.artifact_name }} || true
|
||||
else
|
||||
strip ${{ matrix.artifact_name }}
|
||||
fi
|
||||
if [[ "${{ matrix.target }}" == *"windows"* ]]; then
|
||||
7z a ../../../${{ matrix.asset_name }}.zip ${{ matrix.artifact_name }}
|
||||
else
|
||||
tar czvf ../../../${{ matrix.asset_name }}.tar.gz ${{ matrix.artifact_name }}
|
||||
fi
|
||||
|
||||
- name: Upload binary
|
||||
uses: actions/upload-artifact@v4
|
||||
with:
|
||||
name: ${{ matrix.asset_name }}
|
||||
path: |
|
||||
${{ matrix.asset_name }}.tar.gz
|
||||
${{ matrix.asset_name }}.zip
|
||||
|
||||
release:
|
||||
name: Create Release
|
||||
needs: build
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v4
|
||||
|
||||
- name: Download all artifacts
|
||||
uses: actions/download-artifact@v4
|
||||
with:
|
||||
path: artifacts
|
||||
|
||||
- name: Generate release notes
|
||||
run: |
|
||||
echo "## What's Changed" > release_notes.md
|
||||
echo "" >> release_notes.md
|
||||
echo "### Features" >> release_notes.md
|
||||
echo "- AI-powered static blog generator" >> release_notes.md
|
||||
echo "- AtProto OAuth integration" >> release_notes.md
|
||||
echo "- Automatic translation support" >> release_notes.md
|
||||
echo "- AI comment system" >> release_notes.md
|
||||
echo "" >> release_notes.md
|
||||
echo "### Platforms" >> release_notes.md
|
||||
echo "- Linux (x86_64, aarch64, musl)" >> release_notes.md
|
||||
echo "- macOS (Intel, Apple Silicon)" >> release_notes.md
|
||||
echo "- Windows (x86_64)" >> release_notes.md
|
||||
echo "" >> release_notes.md
|
||||
echo "### Installation" >> release_notes.md
|
||||
echo "\`\`\`bash" >> release_notes.md
|
||||
echo "# Linux/macOS" >> release_notes.md
|
||||
echo "tar -xzf ailog-linux-x86_64.tar.gz" >> release_notes.md
|
||||
echo "chmod +x ailog" >> release_notes.md
|
||||
echo "sudo mv ailog /usr/local/bin/" >> release_notes.md
|
||||
echo "" >> release_notes.md
|
||||
echo "# Windows" >> release_notes.md
|
||||
echo "# Extract ailog-windows-x86_64.zip and add to PATH" >> release_notes.md
|
||||
echo "\`\`\`" >> release_notes.md
|
||||
|
||||
- name: Get tag name
|
||||
id: tag_name
|
||||
run: |
|
||||
if [[ "${{ github.event_name }}" == "workflow_dispatch" ]]; then
|
||||
echo "tag=${{ github.event.inputs.tag }}" >> $GITHUB_OUTPUT
|
||||
else
|
||||
echo "tag=${GITHUB_REF#refs/tags/}" >> $GITHUB_OUTPUT
|
||||
fi
|
||||
|
||||
- name: Create Release
|
||||
uses: softprops/action-gh-release@v1
|
||||
with:
|
||||
tag_name: ${{ steps.tag_name.outputs.tag }}
|
||||
name: ailog ${{ steps.tag_name.outputs.tag }}
|
||||
body_path: release_notes.md
|
||||
draft: false
|
||||
prerelease: ${{ contains(steps.tag_name.outputs.tag, 'alpha') || contains(steps.tag_name.outputs.tag, 'beta') || contains(steps.tag_name.outputs.tag, 'rc') }}
|
||||
files: |
|
||||
artifacts/*/ailog-*.tar.gz
|
||||
artifacts/*/ailog-*.zip
|
||||
env:
|
||||
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
||||
7
.gitignore
vendored
7
.gitignore
vendored
@@ -5,8 +5,9 @@
|
||||
*.swo
|
||||
*~
|
||||
.DS_Store
|
||||
cloudflare*
|
||||
my-blog
|
||||
cloudflare-config.yml
|
||||
my-blog/public/
|
||||
dist
|
||||
package-lock.json
|
||||
node_modules
|
||||
package-lock.json
|
||||
my-blog/static/assets/comment-atproto-*
|
||||
|
||||
38
Cargo.toml
38
Cargo.toml
@@ -15,7 +15,7 @@ clap = { version = "4.5", features = ["derive"] }
|
||||
pulldown-cmark = "0.11"
|
||||
serde = { version = "1.0", features = ["derive"] }
|
||||
serde_json = "1.0"
|
||||
tokio = { version = "1.40", features = ["full"] }
|
||||
tokio = { version = "1.40", features = ["rt-multi-thread", "macros", "fs", "net", "io-util", "sync", "time", "process", "signal"] }
|
||||
anyhow = "1.0"
|
||||
toml = "0.8"
|
||||
chrono = "0.4"
|
||||
@@ -26,7 +26,7 @@ fs_extra = "1.3"
|
||||
colored = "2.1"
|
||||
serde_yaml = "0.9"
|
||||
syntect = "5.2"
|
||||
reqwest = { version = "0.12", features = ["json"] }
|
||||
reqwest = { version = "0.12", features = ["json", "rustls-tls"], default-features = false }
|
||||
rand = "0.8"
|
||||
sha2 = "0.10"
|
||||
base64 = "0.22"
|
||||
@@ -43,12 +43,38 @@ cookie = "0.18"
|
||||
syn = { version = "2.0", features = ["full", "parsing", "visit"] }
|
||||
quote = "1.0"
|
||||
ignore = "0.4"
|
||||
git2 = "0.18"
|
||||
git2 = { version = "0.18", features = ["vendored-openssl", "vendored-libgit2", "ssh"], default-features = false }
|
||||
regex = "1.0"
|
||||
# ATProto and stream monitoring dependencies
|
||||
tokio-tungstenite = { version = "0.21", features = ["native-tls"] }
|
||||
tokio-tungstenite = { version = "0.21", features = ["rustls-tls-webpki-roots", "connect"], default-features = false }
|
||||
futures-util = "0.3"
|
||||
tungstenite = { version = "0.21", features = ["native-tls"] }
|
||||
tungstenite = { version = "0.21", features = ["rustls-tls-webpki-roots"], default-features = false }
|
||||
|
||||
[dev-dependencies]
|
||||
tempfile = "3.14"
|
||||
tempfile = "3.14"
|
||||
|
||||
[profile.dev]
|
||||
# Speed up development builds
|
||||
opt-level = 0
|
||||
debug = true
|
||||
debug-assertions = true
|
||||
overflow-checks = true
|
||||
lto = false
|
||||
panic = 'unwind'
|
||||
incremental = true
|
||||
codegen-units = 256
|
||||
|
||||
[profile.release]
|
||||
# Optimize release builds for speed and size
|
||||
opt-level = 3
|
||||
debug = false
|
||||
debug-assertions = false
|
||||
overflow-checks = false
|
||||
lto = true
|
||||
panic = 'abort'
|
||||
incremental = false
|
||||
codegen-units = 1
|
||||
|
||||
[profile.dev.package."*"]
|
||||
# Optimize dependencies in dev builds
|
||||
opt-level = 3
|
||||
150
DEPLOYMENT.md
150
DEPLOYMENT.md
@@ -1,150 +0,0 @@
|
||||
# ai.log Deployment Guide
|
||||
|
||||
## 🌐 Cloudflare Tunnel Setup
|
||||
|
||||
ATProto OAuth requires HTTPS for proper CORS handling. Use Cloudflare Tunnel for secure deployment.
|
||||
|
||||
### Prerequisites
|
||||
|
||||
1. **Install cloudflared**:
|
||||
```bash
|
||||
brew install cloudflared
|
||||
```
|
||||
|
||||
2. **Login and create tunnel** (if not already done):
|
||||
```bash
|
||||
cloudflared tunnel login
|
||||
cloudflared tunnel create ailog
|
||||
```
|
||||
|
||||
3. **Configure DNS**:
|
||||
- Add a CNAME record: `log.syui.ai` → `[tunnel-id].cfargotunnel.com`
|
||||
|
||||
### Configuration Files
|
||||
|
||||
#### `cloudflared-config.yml`
|
||||
```yaml
|
||||
tunnel: a6813327-f880-485d-a9d1-376e6e3df8ad
|
||||
credentials-file: /Users/syui/.cloudflared/a6813327-f880-485d-a9d1-376e6e3df8ad.json
|
||||
|
||||
ingress:
|
||||
- hostname: log.syui.ai
|
||||
service: http://localhost:8080
|
||||
originRequest:
|
||||
noHappyEyeballs: true
|
||||
- service: http_status:404
|
||||
```
|
||||
|
||||
#### Production Client Metadata
|
||||
`static/client-metadata-prod.json`:
|
||||
```json
|
||||
{
|
||||
"client_id": "https://log.syui.ai/client-metadata.json",
|
||||
"client_name": "ai.log Blog Comment System",
|
||||
"client_uri": "https://log.syui.ai",
|
||||
"redirect_uris": ["https://log.syui.ai/"],
|
||||
"grant_types": ["authorization_code"],
|
||||
"response_types": ["code"],
|
||||
"token_endpoint_auth_method": "none",
|
||||
"application_type": "web"
|
||||
}
|
||||
```
|
||||
|
||||
### Deployment Commands
|
||||
|
||||
#### Quick Start
|
||||
```bash
|
||||
# All-in-one deployment
|
||||
./scripts/tunnel.sh
|
||||
```
|
||||
|
||||
#### Manual Steps
|
||||
```bash
|
||||
# 1. Build for production
|
||||
PRODUCTION=true cargo run -- build
|
||||
|
||||
# 2. Start local server
|
||||
cargo run -- serve --port 8080 &
|
||||
|
||||
# 3. Start tunnel
|
||||
cloudflared tunnel --config cloudflared-config.yml run
|
||||
```
|
||||
|
||||
### Environment Detection
|
||||
|
||||
The system automatically detects environment:
|
||||
|
||||
- **Development** (`localhost:8080`): Uses local client-metadata.json
|
||||
- **Production** (`log.syui.ai`): Uses HTTPS client-metadata.json
|
||||
|
||||
### CORS Resolution
|
||||
|
||||
✅ **With Cloudflare Tunnel**:
|
||||
- HTTPS domain: `https://log.syui.ai`
|
||||
- Valid SSL certificate
|
||||
- Proper CORS headers
|
||||
- ATProto OAuth works correctly
|
||||
|
||||
❌ **With localhost**:
|
||||
- HTTP only: `http://localhost:8080`
|
||||
- CORS restrictions
|
||||
- ATProto OAuth may fail
|
||||
|
||||
### Troubleshooting
|
||||
|
||||
#### ATProto OAuth Errors
|
||||
```javascript
|
||||
// Check client metadata URL in browser console
|
||||
console.log('Environment:', window.location.hostname);
|
||||
console.log('Client ID:', clientId);
|
||||
```
|
||||
|
||||
#### Tunnel Connection Issues
|
||||
```bash
|
||||
# Check tunnel status
|
||||
cloudflared tunnel info ailog
|
||||
|
||||
# Test local server
|
||||
curl http://localhost:8080/client-metadata.json
|
||||
```
|
||||
|
||||
#### DNS Propagation
|
||||
```bash
|
||||
# Check DNS resolution
|
||||
dig log.syui.ai
|
||||
nslookup log.syui.ai
|
||||
```
|
||||
|
||||
### Security Notes
|
||||
|
||||
- **Client metadata** is publicly accessible (required by ATProto)
|
||||
- **Credentials file** contains tunnel secrets (keep secure)
|
||||
- **HTTPS only** for production OAuth
|
||||
- **Domain validation** by ATProto servers
|
||||
|
||||
### Integration with ai.ai Ecosystem
|
||||
|
||||
This deployment enables:
|
||||
- **ai.log**: Comment system with ATProto authentication
|
||||
- **ai.card**: Shared OAuth widget
|
||||
- **ai.gpt**: Memory synchronization via ATProto
|
||||
- **ai.verse**: Future 3D world integration
|
||||
|
||||
### Monitoring
|
||||
|
||||
```bash
|
||||
# Monitor tunnel logs
|
||||
cloudflared tunnel --config cloudflared-config.yml run --loglevel debug
|
||||
|
||||
# Monitor blog server
|
||||
tail -f /path/to/blog/logs
|
||||
|
||||
# Check ATProto connectivity
|
||||
curl -I https://log.syui.ai/client-metadata.json
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
**🔗 Live URL**: https://log.syui.ai
|
||||
**📊 Status**: Production Ready
|
||||
**🌐 ATProto**: OAuth Enabled
|
||||
174
README.md
174
README.md
@@ -2,22 +2,117 @@
|
||||
|
||||
AI-powered static blog generator with ATProto integration, part of the ai.ai ecosystem.
|
||||
|
||||
## 🎯 Gitea Action Usage
|
||||
|
||||
Use ailog in your Gitea Actions workflow:
|
||||
|
||||
```yaml
|
||||
name: Deploy Blog
|
||||
on:
|
||||
push:
|
||||
branches: [main]
|
||||
|
||||
jobs:
|
||||
deploy:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v4
|
||||
- uses: ai/log@v1
|
||||
with:
|
||||
content-dir: 'content'
|
||||
output-dir: 'public'
|
||||
ai-integration: true
|
||||
atproto-integration: true
|
||||
- uses: cloudflare/pages-action@v1
|
||||
with:
|
||||
apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
|
||||
accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
|
||||
projectName: my-blog
|
||||
directory: public
|
||||
```
|
||||
|
||||
## 🚀 Quick Start
|
||||
|
||||
### Development Setup
|
||||
|
||||
```bash
|
||||
# 1. Clone and setup
|
||||
git clone https://git.syui.ai/ai/log
|
||||
cd log
|
||||
|
||||
# 2. Start development services
|
||||
./run.zsh serve # Blog development server
|
||||
./run.zsh c # Cloudflare tunnel (example.com)
|
||||
./run.zsh o # OAuth web server
|
||||
./run.zsh co # Comment system monitor
|
||||
|
||||
# 3. Start Ollama (for Ask AI)
|
||||
brew install ollama
|
||||
ollama pull gemma2:2b
|
||||
OLLAMA_ORIGINS="https://example.com" ollama serve
|
||||
```
|
||||
|
||||
### Production Deployment
|
||||
|
||||
```bash
|
||||
# 1. Build static site
|
||||
hugo
|
||||
|
||||
# 2. Deploy to GitHub Pages
|
||||
git add .
|
||||
git commit -m "Update blog"
|
||||
git push origin main
|
||||
|
||||
# 3. Automatic deployment via GitHub Actions
|
||||
# Site available at: https://yourusername.github.io/repo-name
|
||||
```
|
||||
|
||||
### ATProto Integration
|
||||
|
||||
```bash
|
||||
# 1. OAuth Client Setup (oauth/client-metadata.json)
|
||||
{
|
||||
"client_id": "https://example.com/client-metadata.json",
|
||||
"client_name": "ai.log Blog System",
|
||||
"redirect_uris": ["https://example.com/oauth/callback"],
|
||||
"scope": "atproto",
|
||||
"grant_types": ["authorization_code", "refresh_token"],
|
||||
"response_types": ["code"],
|
||||
"application_type": "web",
|
||||
"dpop_bound_access_tokens": true
|
||||
}
|
||||
|
||||
# 2. Comment System Configuration
|
||||
# Collection: ai.syui.log (comments)
|
||||
# User Management: ai.syui.log.user (registered users)
|
||||
|
||||
# 3. Services
|
||||
./run.zsh o # OAuth authentication server
|
||||
./run.zsh co # ATProto Jetstream comment monitor
|
||||
```
|
||||
|
||||
### Development with run.zsh
|
||||
|
||||
```bash
|
||||
# Development
|
||||
./run.zsh serve
|
||||
|
||||
# Production (with Cloudflare Tunnel)
|
||||
./run.zsh tunnel
|
||||
|
||||
# OAuth app development
|
||||
./run.zsh o
|
||||
|
||||
# Comment system monitoring
|
||||
./run.zsh co
|
||||
```
|
||||
|
||||
## 📋 Commands
|
||||
|
||||
| Command | Description |
|
||||
|---------|-------------|
|
||||
| `./run.zsh c` | Enable Cloudflare tunnel (log.syui.ai) for OAuth |
|
||||
| `./run.zsh o` | Start OAuth web server (port:4173 = log.syui.ai) |
|
||||
| `./run.zsh c` | Enable Cloudflare tunnel (example.com) for OAuth |
|
||||
| `./run.zsh o` | Start OAuth web server (port:4173 = example.com) |
|
||||
| `./run.zsh co` | Start comment system (ATProto stream monitor) |
|
||||
|
||||
## 🏗️ Architecture (Pure Rust + HTML + JS)
|
||||
@@ -66,11 +161,30 @@ ai.logは、[Anthropic Docs](https://docs.anthropic.com/)にインスパイア
|
||||
- **自動TOC**: 右サイドバーに目次を自動生成
|
||||
- **レスポンシブ**: モバイル・デスクトップ対応
|
||||
|
||||
### 🤖 AI統合機能
|
||||
- **Ask AI**: ローカルLLM(Ollama)による質問応答
|
||||
- **自動翻訳**: 日本語↔英語の自動生成
|
||||
- **AI記事強化**: コンテンツの自動改善
|
||||
- **AIコメント**: 記事への一言コメント生成
|
||||
### 🤖 Ask AI機能 ✅
|
||||
- **ローカルAI**: Ollama(gemma2:2b)による質問応答
|
||||
- **認証必須**: ATProto OAuth認証でアクセス制御
|
||||
- **トップページ限定**: ブログコンテンツに特化した回答
|
||||
- **CORS解決済み**: OLLAMA_ORIGINS設定でクロスオリジン問題解消
|
||||
- **プロフィール連携**: AIアバターとしてATProtoプロフィール画像表示
|
||||
- **レスポンス最適化**: 80文字制限+高いtemperatureで多様な回答
|
||||
- **ローディング表示**: Font Awesomeアイコンによる一行ローディング
|
||||
|
||||
### 🔧 Ask AI設定方法
|
||||
```bash
|
||||
# 1. Ollama設定
|
||||
brew install ollama
|
||||
ollama pull gemma2:2b
|
||||
|
||||
# 2. CORS設定で起動
|
||||
OLLAMA_ORIGINS="https://example.com" ollama serve
|
||||
|
||||
# 3. AI DID設定 (my-blog/templates/base.html)
|
||||
const aiConfig = {
|
||||
systemPrompt: 'You are a helpful AI assistant.',
|
||||
aiDid: 'did:plc:your-ai-bot-did'
|
||||
};
|
||||
```
|
||||
|
||||
### 🌐 分散SNS連携
|
||||
- **atproto OAuth**: Blueskyアカウントでログイン
|
||||
@@ -283,6 +397,10 @@ Generate comprehensive documentation and translate content:
|
||||
- **💬 ATProto comment system with Jetstream monitoring**
|
||||
- **🔄 Real-time comment collection and user management**
|
||||
- **🔐 OAuth 2.1 integration with Cloudflare tunnel**
|
||||
- **🤖 Ask AI feature with Ollama integration**
|
||||
- **⚡ CORS resolution via OLLAMA_ORIGINS**
|
||||
- **🔒 Authentication-gated AI chat**
|
||||
- **📱 Top-page-only AI access pattern**
|
||||
- Test blog with sample content and styling
|
||||
|
||||
### 🚧 In Progress
|
||||
@@ -514,6 +632,48 @@ translation = true
|
||||
- Check AI provider configuration
|
||||
- Ensure sufficient context in memory system
|
||||
|
||||
## systemd
|
||||
|
||||
```sh
|
||||
$ sudo vim /usr/lib/systemd/system/ollama.service
|
||||
[Service]
|
||||
Environment="OLLAMA_ORIGINS=https://example.com"
|
||||
```
|
||||
|
||||
```sh
|
||||
# ファイルをsystemdディレクトリにコピー
|
||||
sudo cp ./systemd/system/ailog-stream.service /etc/systemd/system/
|
||||
sudo cp ./systemd/system/cloudflared-log.service /etc/systemd/system/
|
||||
|
||||
# 権限設定
|
||||
sudo chmod 644 /etc/systemd/system/ailog-stream.service
|
||||
sudo chmod 644 /etc/systemd/system/cloudflared-log.service
|
||||
|
||||
# systemd設定reload
|
||||
sudo systemctl daemon-reload
|
||||
|
||||
# サービス有効化・開始
|
||||
sudo systemctl enable ailog-stream.service
|
||||
sudo systemctl enable cloudflared-log.service
|
||||
|
||||
sudo systemctl start ailog-stream.service
|
||||
sudo systemctl start cloudflared-log.service
|
||||
|
||||
# 状態確認
|
||||
sudo systemctl status ailog-stream.service
|
||||
sudo systemctl status cloudflared-log.service
|
||||
|
||||
# ログ確認
|
||||
journalctl -u ailog-stream.service -f
|
||||
journalctl -u cloudflared-log.service -f
|
||||
|
||||
設定のポイント：
|
||||
- User=syui でユーザー権限で実行
|
||||
- Restart=always で異常終了時自動再起動
|
||||
- After=network.target でネットワーク起動後に実行
|
||||
- StandardOutput=journal でログをjournalctlで確認可能
|
||||
```
|
||||
|
||||
## License
|
||||
|
||||
© syui
|
||||
|
||||
108
action.yml
Normal file
108
action.yml
Normal file
@@ -0,0 +1,108 @@
|
||||
name: 'ailog Static Site Generator'
|
||||
description: 'AI-powered static blog generator with atproto integration'
|
||||
author: 'syui'
|
||||
|
||||
branding:
|
||||
icon: 'book-open'
|
||||
color: 'orange'
|
||||
|
||||
inputs:
|
||||
content-dir:
|
||||
description: 'Content directory containing markdown files'
|
||||
required: false
|
||||
default: 'content'
|
||||
output-dir:
|
||||
description: 'Output directory for generated site'
|
||||
required: false
|
||||
default: 'public'
|
||||
template-dir:
|
||||
description: 'Template directory'
|
||||
required: false
|
||||
default: 'templates'
|
||||
static-dir:
|
||||
description: 'Static assets directory'
|
||||
required: false
|
||||
default: 'static'
|
||||
config-file:
|
||||
description: 'Configuration file path'
|
||||
required: false
|
||||
default: 'ailog.toml'
|
||||
ai-integration:
|
||||
description: 'Enable AI features'
|
||||
required: false
|
||||
default: 'true'
|
||||
atproto-integration:
|
||||
description: 'Enable atproto/OAuth features'
|
||||
required: false
|
||||
default: 'true'
|
||||
|
||||
outputs:
|
||||
site-url:
|
||||
description: 'Generated site URL'
|
||||
value: ${{ steps.generate.outputs.site-url }}
|
||||
build-time:
|
||||
description: 'Build time in seconds'
|
||||
value: ${{ steps.generate.outputs.build-time }}
|
||||
|
||||
runs:
|
||||
using: 'composite'
|
||||
steps:
|
||||
- name: Setup Rust
|
||||
uses: actions-rs/toolchain@v1
|
||||
with:
|
||||
toolchain: stable
|
||||
override: true
|
||||
|
||||
- name: Install ailog
|
||||
shell: bash
|
||||
run: |
|
||||
if [ ! -f "./target/release/ailog" ]; then
|
||||
cargo build --release
|
||||
fi
|
||||
|
||||
- name: Setup Node.js for OAuth app
|
||||
if: ${{ inputs.atproto-integration == 'true' }}
|
||||
uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: '20'
|
||||
|
||||
- name: Build OAuth app
|
||||
if: ${{ inputs.atproto-integration == 'true' }}
|
||||
shell: bash
|
||||
run: |
|
||||
if [ -d "oauth" ]; then
|
||||
cd oauth
|
||||
npm install
|
||||
npm run build
|
||||
cp -r dist/* ../${{ inputs.static-dir }}/
|
||||
fi
|
||||
|
||||
- name: Generate site
|
||||
id: generate
|
||||
shell: bash
|
||||
run: |
|
||||
start_time=$(date +%s)
|
||||
|
||||
./target/release/ailog generate \
|
||||
--input ${{ inputs.content-dir }} \
|
||||
--output ${{ inputs.output-dir }} \
|
||||
--templates ${{ inputs.template-dir }} \
|
||||
--static ${{ inputs.static-dir }} \
|
||||
--config ${{ inputs.config-file }}
|
||||
|
||||
end_time=$(date +%s)
|
||||
build_time=$((end_time - start_time))
|
||||
|
||||
echo "build-time=${build_time}" >> $GITHUB_OUTPUT
|
||||
echo "site-url=file://$(pwd)/${{ inputs.output-dir }}" >> $GITHUB_OUTPUT
|
||||
|
||||
- name: Display build summary
|
||||
shell: bash
|
||||
run: |
|
||||
echo "✅ ailog build completed successfully"
|
||||
echo "📁 Output directory: ${{ inputs.output-dir }}"
|
||||
echo "⏱️ Build time: ${{ steps.generate.outputs.build-time }}s"
|
||||
if [ -d "${{ inputs.output-dir }}" ]; then
|
||||
echo "📄 Generated files:"
|
||||
find ${{ inputs.output-dir }} -type f | head -10
|
||||
fi
|
||||
@@ -1,4 +0,0 @@
|
||||
# Default environment variables (fallback)
|
||||
VITE_APP_HOST=https://log.syui.ai
|
||||
VITE_OAUTH_CLIENT_ID=https://log.syui.ai/client-metadata.json
|
||||
VITE_OAUTH_REDIRECT_URI=https://log.syui.ai/oauth/callback
|
||||
@@ -1,4 +0,0 @@
|
||||
# Development environment variables
|
||||
VITE_APP_HOST=http://localhost:4173
|
||||
VITE_OAUTH_CLIENT_ID=http://localhost:4173/client-metadata.json
|
||||
VITE_OAUTH_REDIRECT_URI=http://localhost:4173/oauth/callback
|
||||
@@ -1,4 +0,0 @@
|
||||
# Production environment variables
|
||||
VITE_APP_HOST=https://log.syui.ai
|
||||
VITE_OAUTH_CLIENT_ID=https://log.syui.ai/client-metadata.json
|
||||
VITE_OAUTH_REDIRECT_URI=https://log.syui.ai/oauth/callback
|
||||
@@ -1,23 +0,0 @@
|
||||
import React from 'react'
|
||||
import ReactDOM from 'react-dom/client'
|
||||
import { BrowserRouter, Routes, Route } from 'react-router-dom'
|
||||
import App from './App'
|
||||
import { OAuthCallbackPage } from './components/OAuthCallbackPage'
|
||||
import { CardList } from './components/CardList'
|
||||
import { OAuthEndpointHandler } from './utils/oauth-endpoints'
|
||||
|
||||
// Initialize OAuth endpoint handlers for dynamic client metadata and JWKS
|
||||
// DISABLED: This may interfere with BrowserOAuthClient
|
||||
// OAuthEndpointHandler.init()
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('comment-atproto')!).render(
|
||||
<React.StrictMode>
|
||||
<BrowserRouter>
|
||||
<Routes>
|
||||
<Route path="/oauth/callback" element={<OAuthCallbackPage />} />
|
||||
<Route path="/list" element={<CardList />} />
|
||||
<Route path="*" element={<App />} />
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
</React.StrictMode>,
|
||||
)
|
||||
18
cloudflared-config.yml
Normal file
18
cloudflared-config.yml
Normal file
@@ -0,0 +1,18 @@
|
||||
tunnel: ec5a422d-7678-4e73-bf38-6105ffd4766a
|
||||
credentials-file: /Users/syui/.cloudflared/ec5a422d-7678-4e73-bf38-6105ffd4766a.json
|
||||
|
||||
ingress:
|
||||
- hostname: log.syui.ai
|
||||
service: http://localhost:4173
|
||||
originRequest:
|
||||
noHappyEyeballs: true
|
||||
|
||||
- hostname: ollama.syui.ai
|
||||
service: http://localhost:11434
|
||||
originRequest:
|
||||
noHappyEyeballs: true
|
||||
httpHostHeader: "localhost:11434"
|
||||
# Cloudflare Accessを無効化する場合は以下をコメントアウト
|
||||
# accessPolicy: bypass
|
||||
|
||||
- service: http_status:404
|
||||
31
my-blog/config.toml
Normal file
31
my-blog/config.toml
Normal file
@@ -0,0 +1,31 @@
|
||||
[site]
|
||||
title = "syui.ai"
|
||||
description = "a blog powered by ailog"
|
||||
base_url = "https://syui.ai"
|
||||
language = "ja"
|
||||
author = "syui"
|
||||
|
||||
[build]
|
||||
highlight_code = true
|
||||
highlight_theme = "Monokai"
|
||||
minify = false
|
||||
|
||||
[ai]
|
||||
enabled = true
|
||||
auto_translate = false
|
||||
comment_moderation = false
|
||||
ask_ai = true
|
||||
provider = "ollama"
|
||||
model = "gemma3:2b"
|
||||
host = "https://ollama.syui.ai"
|
||||
system_prompt = "you are a helpful ai assistant trained on this blog's content. you can answer questions about the articles, provide insights, and help users understand the topics discussed."
|
||||
ai_did = "did:plc:4hqjfn7m6n5hno3doamuhgef"
|
||||
|
||||
[oauth]
|
||||
json = "client-metadata.json"
|
||||
redirect = "oauth/callback"
|
||||
admin = "did:plc:uqzpqmrjnptsxezjx4xuh2mn"
|
||||
collection_comment = "ai.syui.log"
|
||||
collection_user = "ai.syui.log.user"
|
||||
collection_chat = "ai.syui.log.chat"
|
||||
bsky_api = "https://public.api.bsky.app"
|
||||
159
my-blog/content/posts/2025-06-06-ailog.md
Normal file
159
my-blog/content/posts/2025-06-06-ailog.md
Normal file
@@ -0,0 +1,159 @@
|
||||
---
|
||||
title: "静的サイトジェネレータを作った"
|
||||
slug: "ailog"
|
||||
date: "2025-06-12"
|
||||
tags: ["blog", "rust", "mcp", "atp"]
|
||||
language: ["ja", "en"]
|
||||
---
|
||||
|
||||
rustで静的サイトジェネレータを作りました。。[ailog](https://git.syui.ai/ai/log)といいます。`hugo`からの移行になります。
|
||||
|
||||
`ailog`は、最初にatproto-comment-system(oauth)とask-AIという機能をつけました。
|
||||
|
||||
## quick start
|
||||
|
||||
```sh
|
||||
$ git clone https://git.syui.ai/ai/log
|
||||
$ cd log
|
||||
$ cargo build
|
||||
$ ./target/debug/ailog init my-blog
|
||||
$ ./target/debug/ailog server my-blog
|
||||
```
|
||||
|
||||
## install
|
||||
|
||||
```sh
|
||||
$ cargo install --path .
|
||||
---
|
||||
$ export CARGO_HOME="$HOME/.cargo"
|
||||
$ export RUSTUP_HOME="$HOME/.rustup"
|
||||
$ export PATH="$HOME/.cargo/bin:$PATH"
|
||||
---
|
||||
$ which ailog
|
||||
$ ailog
|
||||
```
|
||||
|
||||
## build deploy
|
||||
|
||||
```sh
|
||||
$ cd my-blog
|
||||
$ vim config.toml
|
||||
$ ailog new test
|
||||
$ vim content/posts/`date +"%Y-%m-%d"`.md
|
||||
$ ailog build
|
||||
|
||||
# publicの中身をweb-serverにdeploy
|
||||
$ cp -rf ./public/* ./web-server/root/
|
||||
```
|
||||
|
||||
## atproto-comment-system
|
||||
|
||||
### example
|
||||
|
||||
```sh
|
||||
$ cd ./oauth
|
||||
$ npm i
|
||||
$ npm run build
|
||||
$ npm run preview
|
||||
```
|
||||
|
||||
```sh
|
||||
# Production environment variables
|
||||
VITE_APP_HOST=https://example.com
|
||||
VITE_OAUTH_CLIENT_ID=https://example.com/client-metadata.json
|
||||
VITE_OAUTH_REDIRECT_URI=https://example.com/oauth/callback
|
||||
VITE_ADMIN_DID=did:plc:uqzpqmrjnptsxezjx4xuh2mn
|
||||
|
||||
# Collection names for OAuth app
|
||||
VITE_COLLECTION_COMMENT=ai.syui.log
|
||||
VITE_COLLECTION_USER=ai.syui.log.user
|
||||
VITE_COLLECTION_CHAT=ai.syui.log.chat
|
||||
|
||||
# Collection names for ailog (backward compatibility)
|
||||
AILOG_COLLECTION_COMMENT=ai.syui.log
|
||||
AILOG_COLLECTION_USER=ai.syui.log.user
|
||||
|
||||
# API Configuration
|
||||
VITE_BSKY_PUBLIC_API=https://public.api.bsky.app
|
||||
```
|
||||
|
||||
これは`ailog oauth build my-blog`で`./my-blog/config.toml`から`./oauth/.env.production`が生成されます。
|
||||
|
||||
```sh
|
||||
$ ailog oauth build my-blog
|
||||
```
|
||||
|
||||
### use
|
||||
|
||||
簡単に説明すると、`./oauth`で生成するのが`atproto-comment-system`です。
|
||||
|
||||
```html
|
||||
<script type="module" crossorigin src="/assets/comment-atproto-${hash}}.js"></script>
|
||||
<link rel="stylesheet" crossorigin href="/assets/comment-atproto-${hash}.css">
|
||||
<section class="comment-section"> <div id="comment-atproto"></div> </section>
|
||||
```
|
||||
|
||||
ただし、oauthであるため、色々と大変です。本番環境(もしくは近い形)でテストを行いましょう。cf, tailscale, ngrokなど。
|
||||
|
||||
```yml:cloudflared-config.yml
|
||||
tunnel: ${hash}
|
||||
credentials-file: ${path}.json
|
||||
|
||||
ingress:
|
||||
- hostname: example.com
|
||||
service: http://localhost:4173
|
||||
originRequest:
|
||||
noHappyEyeballs: true
|
||||
|
||||
- service: http_status:404
|
||||
```
|
||||
|
||||
```sh
|
||||
# tunnel list, dnsに登録が必要です
|
||||
$ cloudflared tunnel list
|
||||
$ cloudflared tunnel --config cloudflared-config.yml run
|
||||
$ cloudflared tunnel route dns ${uuid} example.com
|
||||
```
|
||||
|
||||
以下の2つのcollection recordを生成します。ユーザーには`ai.syui.log`が生成され、ここにコメントが記録されます。それを取得して表示しています。`ai.syui.log.user`は管理者である`VITE_ADMIN_DID`用です。
|
||||
|
||||
```sh
|
||||
VITE_COLLECTION_COMMENT=ai.syui.log
|
||||
VITE_COLLECTION_USER=ai.syui.log.user
|
||||
```
|
||||
|
||||
```sh
|
||||
$ ailog auth login
|
||||
$ ailog stream server
|
||||
```
|
||||
|
||||
このコマンドで`ai.syui.log`を`jetstream`から監視して、書き込みがあれば、管理者の`ai.syui.log.user`に記録され、そのuser-listに基づいて、コメント一覧を取得します。
|
||||
|
||||
つまり、コメント表示のアカウントを手動で設定するか、自動化するか。自動化するならserverで`ailog stream server`を動かさなければいけません。
|
||||
|
||||
## ask-AI
|
||||
|
||||
`ask-AI`の仕組みは割愛します。後に変更される可能性が高いと思います。
|
||||
|
||||
local llm, mcp, atprotoと組み合わせです。
|
||||
|
||||
|
||||
## code syntax
|
||||
|
||||
```zsh:/path/to/test.zsh
|
||||
# comment
|
||||
d=${0:a:h}
|
||||
```
|
||||
|
||||
```rust:/path/to/test.rs
|
||||
// This is a comment
|
||||
fn main() {
|
||||
println!("Hello, world!");
|
||||
}
|
||||
```
|
||||
|
||||
```js:/path/to/test.js
|
||||
// This is a comment
|
||||
console.log("Hello, world!");
|
||||
```
|
||||
|
||||
62
my-blog/content/posts/2025-06-14-blog.md
Normal file
62
my-blog/content/posts/2025-06-14-blog.md
Normal file
@@ -0,0 +1,62 @@
|
||||
---
|
||||
title: "ブログを移行した"
|
||||
slug: "blog"
|
||||
date: 2025-06-14
|
||||
tags: ["blog", "cloudflare", "github"]
|
||||
draft: false
|
||||
---
|
||||
|
||||
ブログを移行しました。
|
||||
|
||||
1. `gh-pages`から`cf-pages`への移行になります。
|
||||
2. `hugo`からの移行で、自作の`ailog`でbuildしています。
|
||||
3. 特徴としては、`atproto`, `AI`との連携です。
|
||||
|
||||
```yml:.github/workflows/cloudflare-pages.yml
|
||||
name: Deploy to Cloudflare Pages
|
||||
|
||||
on:
|
||||
push:
|
||||
branches:
|
||||
- main
|
||||
workflow_dispatch:
|
||||
|
||||
jobs:
|
||||
deploy:
|
||||
runs-on: ubuntu-latest
|
||||
permissions:
|
||||
contents: read
|
||||
deployments: write
|
||||
|
||||
steps:
|
||||
- name: Checkout
|
||||
uses: actions/checkout@v4
|
||||
|
||||
- name: Setup Rust
|
||||
uses: actions-rs/toolchain@v1
|
||||
with:
|
||||
toolchain: stable
|
||||
|
||||
- name: Build ailog
|
||||
run: cargo build --release
|
||||
|
||||
- name: Build site with ailog
|
||||
run: |
|
||||
cd my-blog
|
||||
../target/release/ailog build
|
||||
|
||||
- name: List public directory
|
||||
run: |
|
||||
ls -la my-blog/public/
|
||||
|
||||
- name: Deploy to Cloudflare Pages
|
||||
uses: cloudflare/pages-action@v1
|
||||
with:
|
||||
apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
|
||||
accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
|
||||
projectName: ${{ secrets.CLOUDFLARE_PROJECT_NAME }}
|
||||
directory: my-blog/public
|
||||
gitHubToken: ${{ secrets.GITHUB_TOKEN }}
|
||||
wranglerVersion: '3'
|
||||
```
|
||||
|
||||
51
my-blog/static/_headers
Normal file
51
my-blog/static/_headers
Normal file
@@ -0,0 +1,51 @@
|
||||
/*
|
||||
X-Frame-Options: DENY
|
||||
X-Content-Type-Options: nosniff
|
||||
Referrer-Policy: strict-origin-when-cross-origin
|
||||
X-XSS-Protection: 1; mode=block
|
||||
Permissions-Policy: camera=(), microphone=(), geolocation=()
|
||||
|
||||
# OAuth specific headers
|
||||
/oauth/*
|
||||
Access-Control-Allow-Origin: https://bsky.social
|
||||
Access-Control-Allow-Methods: GET, POST, OPTIONS
|
||||
Access-Control-Allow-Headers: Content-Type, Authorization
|
||||
|
||||
# Static assets caching
|
||||
/assets/*
|
||||
Cache-Control: public, max-age=31536000, immutable
|
||||
|
||||
/css/*
|
||||
Content-Type: text/css
|
||||
Cache-Control: public, max-age=60
|
||||
|
||||
/*.js
|
||||
Content-Type: application/javascript
|
||||
Cache-Control: public, max-age=31536000, immutable
|
||||
|
||||
/assets/*.js
|
||||
Content-Type: application/javascript
|
||||
Cache-Control: public, max-age=31536000, immutable
|
||||
|
||||
# Ensure ES6 modules are served correctly
|
||||
/assets/comment-atproto-*.js
|
||||
Content-Type: text/javascript; charset=utf-8
|
||||
Cache-Control: public, max-age=31536000, immutable
|
||||
|
||||
# All JS assets
|
||||
/assets/*-*.js
|
||||
Content-Type: text/javascript; charset=utf-8
|
||||
Cache-Control: public, max-age=31536000, immutable
|
||||
|
||||
# CSS assets
|
||||
/assets/*.css
|
||||
Content-Type: text/css
|
||||
Cache-Control: public, max-age=60
|
||||
|
||||
/posts/*
|
||||
Cache-Control: public, max-age=3600
|
||||
|
||||
# Client metadata for OAuth
|
||||
/client-metadata.json
|
||||
Content-Type: application/json
|
||||
Cache-Control: public, max-age=3600
|
||||
11
my-blog/static/_redirects
Normal file
11
my-blog/static/_redirects
Normal file
@@ -0,0 +1,11 @@
|
||||
# AI機能をai.gpt MCP serverにリダイレクト
|
||||
/api/ask https://ai-gpt-mcp.syui.ai/ask 200
|
||||
|
||||
# Ollama API proxy (Cloudflare Workers)
|
||||
/api/ollama-proxy https://ollama-proxy.YOUR-SUBDOMAIN.workers.dev/:splat 200
|
||||
|
||||
# OAuth routes
|
||||
/oauth/* /oauth/index.html 200
|
||||
|
||||
# SPA routing support
|
||||
/* /index.html 200
|
||||
BIN
my-blog/static/apple-touch-icon.png
Normal file
BIN
my-blog/static/apple-touch-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
24
my-blog/static/client-metadata.json
Normal file
24
my-blog/static/client-metadata.json
Normal file
@@ -0,0 +1,24 @@
|
||||
{
|
||||
"client_id": "https://syui.ai/client-metadata.json",
|
||||
"client_name": "ai.card",
|
||||
"client_uri": "https://syui.ai",
|
||||
"logo_uri": "https://syui.ai/favicon.ico",
|
||||
"tos_uri": "https://syui.ai/terms",
|
||||
"policy_uri": "https://syui.ai/privacy",
|
||||
"redirect_uris": [
|
||||
"https://syui.ai/oauth/callback",
|
||||
"https://syui.ai/"
|
||||
],
|
||||
"response_types": [
|
||||
"code"
|
||||
],
|
||||
"grant_types": [
|
||||
"authorization_code",
|
||||
"refresh_token"
|
||||
],
|
||||
"token_endpoint_auth_method": "none",
|
||||
"scope": "atproto transition:generic",
|
||||
"subject_type": "public",
|
||||
"application_type": "web",
|
||||
"dpop_bound_access_tokens": true
|
||||
}
|
||||
894
my-blog/static/css/style.css
Normal file
894
my-blog/static/css/style.css
Normal file
@@ -0,0 +1,894 @@
|
||||
/* Theme Colors */
|
||||
:root {
|
||||
--theme-color: #f40;
|
||||
--ai-color: #ff7;
|
||||
--white: #fff;
|
||||
--light-white: #f5f5f5;
|
||||
--dark-white: #d1d9e0;
|
||||
--light-gray: #f6f8fa;
|
||||
--dark-gray: #666;
|
||||
--background: #fff;
|
||||
}
|
||||
|
||||
/* Base styles */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
line-height: 1.6;
|
||||
color: #1f2328;
|
||||
background-color: #ffffff;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
button {
|
||||
background: linear-gradient(135deg, #667eea, #764ba2);
|
||||
color: #fff;
|
||||
border: none;
|
||||
padding: 10px 20px;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
/* Links */
|
||||
a:any-link {
|
||||
color: var(--theme-color);
|
||||
text-decoration-line: unset;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--theme-color);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* Override link color for specific buttons */
|
||||
a.view-markdown,
|
||||
a.view-markdown:any-link {
|
||||
color: #ffffff !important;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
/* Layout */
|
||||
.container {
|
||||
min-height: 100vh;
|
||||
display: grid;
|
||||
grid-template-rows: auto auto 1fr auto;
|
||||
grid-template-areas:
|
||||
"header"
|
||||
"ask-ai"
|
||||
"main"
|
||||
"footer";
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.main-header {
|
||||
grid-area: header;
|
||||
background: #ffffff;
|
||||
border-bottom: 1px solid #d1d9e0;
|
||||
padding: 16px 24px;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.site-title {
|
||||
color: var(--theme-color);
|
||||
text-decoration: none;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.logo {
|
||||
grid-column: 2;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.logo .likeButton {
|
||||
height: 60px;
|
||||
width: auto;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
grid-column: 3;
|
||||
justify-self: end;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* Ask AI Button */
|
||||
.ask-ai-btn {
|
||||
background: var(--theme-color);
|
||||
color: var(--white);
|
||||
padding: 8px 16px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
transition: background-color 0.2s;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.ask-ai-btn:hover {
|
||||
filter: brightness(1.1);
|
||||
}
|
||||
|
||||
.ai-icon {
|
||||
font-size: 16px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
color: var(--ai-color);
|
||||
display: inline-block;
|
||||
font-family: 'icomoon' !important;
|
||||
speak: none;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
line-height: 1;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
|
||||
/* Ask AI Panel */
|
||||
.ask-ai-panel {
|
||||
grid-area: ask-ai;
|
||||
background: #f6f8fa;
|
||||
border-bottom: 1px solid #d1d9e0;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.ask-ai-content {
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.ask-ai-form {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.ask-ai-form input {
|
||||
flex: 1;
|
||||
padding: 8px 12px;
|
||||
border: 1px solid #d1d9e0;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.auth-check {
|
||||
background: #f6f8fa;
|
||||
border: 1px solid #d1d9e0;
|
||||
border-radius: 6px;
|
||||
padding: 16px;
|
||||
text-align: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
/* Main Content */
|
||||
.main-content {
|
||||
grid-area: main;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
padding: 24px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
.main-content {
|
||||
padding: 20px;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Timeline */
|
||||
.timeline-container {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.timeline-header h2 {
|
||||
color: #1f2328;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.timeline-feed {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.timeline-post {
|
||||
background: #ffffff;
|
||||
border: 1px solid #d1d9e0;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
transition: box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.timeline-post:hover {
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.post-title a {
|
||||
color: #1f2328;
|
||||
text-decoration: none;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.post-title a:hover {
|
||||
color: var(--theme-color);
|
||||
}
|
||||
|
||||
.post-date {
|
||||
color: #656d76;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.post-excerpt {
|
||||
color: #656d76;
|
||||
margin: 16px 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.post-actions {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.read-more {
|
||||
color: var(--theme-color);
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.read-more:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.view-markdown, .view-translation {
|
||||
color: #656d76;
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.view-markdown {
|
||||
background: var(--theme-color) !important;
|
||||
color: #ffffff !important;
|
||||
border: 1px solid var(--theme-color);
|
||||
}
|
||||
|
||||
.view-markdown:hover {
|
||||
filter: brightness(1.1);
|
||||
color: #ffffff !important;
|
||||
background: var(--theme-color) !important;
|
||||
}
|
||||
|
||||
.view-translation:hover {
|
||||
background: #f6f8fa;
|
||||
}
|
||||
|
||||
.post-meta {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.post-lang {
|
||||
background: #f6f8fa;
|
||||
color: #656d76;
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Article */
|
||||
.article-container {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 240px;
|
||||
gap: 40px;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.article-meta {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.article-date {
|
||||
color: #656d76;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.article-lang {
|
||||
background: #f6f8fa;
|
||||
color: #656d76;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.article-actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
color: var(--theme-color);
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
padding: 6px 12px;
|
||||
border: 1px solid #d1d9e0;
|
||||
border-radius: 6px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.action-btn:hover {
|
||||
background: #f6f8fa;
|
||||
border-color: var(--theme-color);
|
||||
}
|
||||
|
||||
.markdown-btn {
|
||||
background: var(--dark-white);
|
||||
color: var(--white);
|
||||
border-color: var(--white);
|
||||
}
|
||||
|
||||
.markdown-btn:link,
|
||||
.markdown-btn:visited {
|
||||
color: var(--white) !important;
|
||||
}
|
||||
|
||||
.markdown-btn:hover {
|
||||
filter: brightness(0.9);
|
||||
color: var(--theme-color) !important;
|
||||
border-color: var(--white);
|
||||
}
|
||||
|
||||
/* Sidebar styles */
|
||||
.article-sidebar {
|
||||
position: sticky;
|
||||
top: 100px;
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
.toc {
|
||||
background: #f6f8fa;
|
||||
border: 1px solid #d1d9e0;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.toc h3 {
|
||||
color: #1f2328;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.toc-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.toc-item {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
/* Hierarchy indentation for TOC */
|
||||
.toc-item.toc-h1 .toc-link {
|
||||
padding-left: 0;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.toc-item.toc-h2 .toc-link {
|
||||
padding-left: 0;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.toc-item.toc-h3 .toc-link {
|
||||
padding-left: 16px;
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.toc-item.toc-h4 .toc-link {
|
||||
padding-left: 32px;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.toc-item.toc-h5 .toc-link {
|
||||
padding-left: 48px;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.toc-item.toc-h6 .toc-link {
|
||||
padding-left: 64px;
|
||||
font-weight: 400;
|
||||
font-size: 11px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.toc-link {
|
||||
color: #656d76;
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
line-height: 1.4;
|
||||
display: block;
|
||||
padding: 4px 0;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.toc-link:hover {
|
||||
color: var(--theme-color);
|
||||
}
|
||||
|
||||
.article-title {
|
||||
color: #1f2328;
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 16px;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.article-body {
|
||||
color: #1f2328;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.article-body h1, .article-body h2, .article-body h3 {
|
||||
color: #1f2328;
|
||||
margin-top: 24px;
|
||||
margin-bottom: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.article-body p {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.article-body ol, .article-body ul {
|
||||
margin: 16px 0;
|
||||
padding-left: 24px;
|
||||
}
|
||||
|
||||
.article-body li {
|
||||
margin-bottom: 8px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.article-body ol li {
|
||||
list-style-type: decimal;
|
||||
}
|
||||
|
||||
.article-body ul li {
|
||||
list-style-type: disc;
|
||||
}
|
||||
|
||||
.article-body pre {
|
||||
background: #1B1D1E !important;
|
||||
border: 1px solid #3E3D32;
|
||||
border-radius: 8px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
margin: 16px 0;
|
||||
font-size: 14px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* File name display for code blocks */
|
||||
.article-body pre[data-filename]::before {
|
||||
content: attr(data-filename);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
background: #2D2D30;
|
||||
color: #CCCCCC;
|
||||
padding: 4px 12px;
|
||||
font-size: 12px;
|
||||
font-family: 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', monospace;
|
||||
border-bottom-left-radius: 4px;
|
||||
border: 1px solid #3E3D32;
|
||||
border-top: none;
|
||||
border-right: none;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.article-body pre code {
|
||||
display: block;
|
||||
background: none !important;
|
||||
padding: 30px 16px;
|
||||
color: #F8F8F2 !important;
|
||||
font-family: 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', monospace;
|
||||
overflow-x: auto;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* Inline code (not in pre blocks) */
|
||||
.article-body code {
|
||||
background: var(--light-white);
|
||||
color: var(--dark-gray);
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
font-family: 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', monospace;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/* Molokai syntax highlighting */
|
||||
.article-body pre code .hljs-keyword { color: #F92672; }
|
||||
.article-body pre code .hljs-string { color: #E6DB74; }
|
||||
.article-body pre code .hljs-comment { color: #88846F; font-style: italic; }
|
||||
.article-body pre code .hljs-number { color: #AE81FF; }
|
||||
.article-body pre code .hljs-variable { color: #FD971F; }
|
||||
.article-body pre code .hljs-function { color: #A6E22E; }
|
||||
.article-body pre code .hljs-tag { color: #F92672; }
|
||||
.article-body pre code .hljs-attr { color: #A6E22E; }
|
||||
.article-body pre code .hljs-value { color: #E6DB74; }
|
||||
|
||||
/* Fix inline span colors in code blocks */
|
||||
.article-body pre code span[style*="color:#8fa1b3"] { color: #AE81FF !important; } /* $ prompt */
|
||||
.article-body pre code span[style*="color:#c0c5ce"] { color: #F8F8F2 !important; } /* commands */
|
||||
.article-body pre code span[style*="color:#75715E"] { color: #88846F !important; } /* real comments */
|
||||
|
||||
/* Shell/Bash specific fixes */
|
||||
.article-body pre code span[style*="color:#65737e"] {
|
||||
color: #F8F8F2 !important; /* Default to white for variables and code */
|
||||
}
|
||||
|
||||
/* Comments in shell scripts - lines that contain # followed by text */
|
||||
.article-body pre code span[style*="color:#65737e"]:has-text("#") {
|
||||
color: #88846F !important;
|
||||
}
|
||||
|
||||
/* Alternative approach - check content */
|
||||
.article-body pre code {
|
||||
/* Reset all gray colored text to white by default */
|
||||
}
|
||||
|
||||
.article-body pre code span[style*="color:#65737e"] {
|
||||
/* Check if the content starts with # */
|
||||
color: #F8F8F2 !important;
|
||||
}
|
||||
|
||||
/* Override for actual comments - this is a workaround */
|
||||
.article-body pre code span[style*="color:#65737e"]:first-child:before {
|
||||
content: attr(data-comment);
|
||||
}
|
||||
|
||||
/* Detect comments by position and content pattern */
|
||||
.article-body pre code span[style*="color:#65737e"] {
|
||||
color: #F8F8F2 !important; /* Environment variables = white */
|
||||
}
|
||||
|
||||
/* Only style as comment if the line actually starts with # */
|
||||
.article-body pre code > span:first-child[style*="color:#65737e"] {
|
||||
color: #88846F !important; /* Real comments = gray */
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
.main-footer {
|
||||
grid-area: footer;
|
||||
background: var(--light-white);
|
||||
border-top: 1px solid #d1d9e0;
|
||||
padding: 32px 24px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.footer-social {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 24px;
|
||||
margin: 40px;
|
||||
}
|
||||
|
||||
.footer-social a {
|
||||
color: var(--dark-gray) !important;
|
||||
text-decoration: none !important;
|
||||
font-size: 16px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.footer-social a:hover {
|
||||
color: var(--theme-color) !important;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.main-footer p {
|
||||
color: #656d76;
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Chat Messages */
|
||||
.chat-message.comment-style {
|
||||
background: #ffffff;
|
||||
border: 1px solid #d1d9e0;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.chat-message.ai-message.comment-style {
|
||||
border-left: 4px solid var(--ai-color);
|
||||
background: #faf8ff;
|
||||
}
|
||||
|
||||
.message-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.message-header .avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background: #f6f8fa;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 20px;
|
||||
border: 1px solid #d1d9e0;
|
||||
}
|
||||
|
||||
.display-name {
|
||||
font-weight: 600;
|
||||
color: #1f2328;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.handle {
|
||||
color: #656d76;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.timestamp {
|
||||
color: #656d76;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.message-content {
|
||||
color: #1f2328;
|
||||
line-height: 1.5;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.profile-avatar {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
/* Loading Animation */
|
||||
.ai-loading-simple {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 10px 15px;
|
||||
background: linear-gradient(90deg, #f8f9fa 0%, #e9ecef 100%);
|
||||
border-radius: 20px;
|
||||
margin: 8px 0;
|
||||
font-size: 14px;
|
||||
color: #495057;
|
||||
border: 1px solid #dee2e6;
|
||||
animation: slideIn 0.3s ease-out;
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Comment System Styles */
|
||||
.comment-section {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
margin-top: 48px;
|
||||
padding-top: 32px;
|
||||
}
|
||||
|
||||
.comment-container {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.comment-section h3 {
|
||||
color: #1f2328;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 32px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* OAuth Comment System - Hide on homepage by default, show on post pages */
|
||||
.timeline-container .comment-section {
|
||||
display: block; /* Show on homepage */
|
||||
}
|
||||
|
||||
.timeline-container .comment-section .comments-list > :nth-child(n+6) {
|
||||
display: none; /* Hide comments after the 5th one */
|
||||
}
|
||||
|
||||
.article-container .comment-section,
|
||||
.article-content + .comment-section {
|
||||
display: block; /* Show all comments on post pages */
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 1000px) {
|
||||
.article-container {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 24px;
|
||||
max-width: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
.main-header {
|
||||
padding: 12px 0;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
max-width: 100%;
|
||||
padding: 0 20px;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
/* Hide site title text on mobile */
|
||||
.site-title {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Left align logo on mobile */
|
||||
.logo {
|
||||
grid-column: 1;
|
||||
justify-self: left;
|
||||
padding: 5px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* Reduce logo size on mobile */
|
||||
.logo .likeButton {
|
||||
width: 40pt;
|
||||
height: 40pt;
|
||||
}
|
||||
|
||||
/* Position AI button on the right */
|
||||
.header-actions {
|
||||
grid-column: 3;
|
||||
justify-self: end;
|
||||
}
|
||||
|
||||
/* Ask AI button mobile style */
|
||||
.ask-ai-btn {
|
||||
padding: 8px;
|
||||
min-width: 40px;
|
||||
justify-content: center;
|
||||
font-size: 0;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.ask-ai-btn .ai-icon {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.ask-ai-panel {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
/* Article content mobile optimization */
|
||||
.article-body {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.article-body pre {
|
||||
margin: 16px 0;
|
||||
border-radius: 4px;
|
||||
max-width: 100%;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.article-body pre code {
|
||||
padding: 20px 12px;
|
||||
word-wrap: break-word;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.article-body code {
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.ask-ai-form {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.timeline-container {
|
||||
max-width: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.timeline-post {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.article-title {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
|
||||
.message-header .avatar {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* Center content on mobile */
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
342
my-blog/static/css/svg-animation-package.css
Normal file
342
my-blog/static/css/svg-animation-package.css
Normal file
@@ -0,0 +1,342 @@
|
||||
/* SVG Animation Package - Dependency-free standalone package
|
||||
* Based on svg-animation-particle-circle.css
|
||||
* Theme color integration with CSS variables
|
||||
*/
|
||||
|
||||
/* Theme-based color variables for particles */
|
||||
:root {
|
||||
--particle-color-1: #f40; /* theme-color base */
|
||||
--particle-color-2: #f50; /* theme-color +0.1 brightness */
|
||||
--particle-color-3: #f60; /* theme-color +0.2 brightness */
|
||||
--particle-color-4: #f70; /* theme-color +0.3 brightness */
|
||||
--particle-color-5: #f80; /* theme-color +0.4 brightness */
|
||||
--explosion-color: #f30; /* theme-color -0.1 brightness */
|
||||
--syui-color: #f40; /* main theme color */
|
||||
}
|
||||
|
||||
/* Core SVG button setup */
|
||||
.likeButton {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* Remove debug animation and restore hover functionality */
|
||||
|
||||
.likeButton .border {
|
||||
fill: white;
|
||||
}
|
||||
|
||||
/* Explosion circle - initially hidden */
|
||||
.likeButton .explosion {
|
||||
transform-origin: center center;
|
||||
transform: scale(1);
|
||||
stroke: var(--explosion-color);
|
||||
fill: none;
|
||||
opacity: 0;
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
/* Particle layer - initially hidden */
|
||||
.likeButton .particleLayer {
|
||||
opacity: 0;
|
||||
transform: scale(0); /* Ensure particles start hidden */
|
||||
}
|
||||
|
||||
.likeButton .particleLayer circle {
|
||||
opacity: 0;
|
||||
transform-origin: center center; /* Fixed from 250px 250px */
|
||||
transform: scale(0);
|
||||
}
|
||||
|
||||
/* Syui logo - main animation target */
|
||||
.likeButton .syui {
|
||||
fill: var(--syui-color);
|
||||
transform: scale(1);
|
||||
transform-origin: center center;
|
||||
}
|
||||
|
||||
/* Hover trigger - replaces jQuery */
|
||||
.likeButton:hover .explosion {
|
||||
animation: explosionAnime 800ms forwards;
|
||||
}
|
||||
|
||||
.likeButton:hover .particleLayer {
|
||||
animation: particleLayerAnime 800ms forwards;
|
||||
}
|
||||
|
||||
.likeButton:hover .syui,
|
||||
.likeButton:hover path.syui {
|
||||
animation: syuiDeluxeAnime 400ms forwards;
|
||||
}
|
||||
|
||||
/* Individual particle animations */
|
||||
.likeButton:hover .particleLayer circle:nth-child(1) {
|
||||
animation: particleAnimate1 800ms;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
||||
.likeButton:hover .particleLayer circle:nth-child(2) {
|
||||
animation: particleAnimate2 800ms;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
||||
.likeButton:hover .particleLayer circle:nth-child(3) {
|
||||
animation: particleAnimate3 800ms;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
||||
.likeButton:hover .particleLayer circle:nth-child(4) {
|
||||
animation: particleAnimate4 800ms;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
||||
.likeButton:hover .particleLayer circle:nth-child(5) {
|
||||
animation: particleAnimate5 800ms;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
||||
.likeButton:hover .particleLayer circle:nth-child(6) {
|
||||
animation: particleAnimate6 800ms;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
||||
.likeButton:hover .particleLayer circle:nth-child(7) {
|
||||
animation: particleAnimate7 800ms;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
||||
.likeButton:hover .particleLayer circle:nth-child(8) {
|
||||
animation: particleAnimate8 800ms;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
||||
.likeButton:hover .particleLayer circle:nth-child(9) {
|
||||
animation: particleAnimate9 800ms;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
||||
.likeButton:hover .particleLayer circle:nth-child(10) {
|
||||
animation: particleAnimate10 800ms;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
||||
.likeButton:hover .particleLayer circle:nth-child(11) {
|
||||
animation: particleAnimate11 800ms;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
||||
.likeButton:hover .particleLayer circle:nth-child(12) {
|
||||
animation: particleAnimate12 800ms;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
||||
.likeButton:hover .particleLayer circle:nth-child(13) {
|
||||
animation: particleAnimate13 800ms;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
||||
.likeButton:hover .particleLayer circle:nth-child(14) {
|
||||
animation: particleAnimate14 800ms;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
||||
/* Keyframe animations */
|
||||
@keyframes explosionAnime {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(0.01);
|
||||
}
|
||||
1% {
|
||||
opacity: 1;
|
||||
transform: scale(0.01);
|
||||
}
|
||||
5% {
|
||||
stroke-width: 200;
|
||||
}
|
||||
20% {
|
||||
stroke-width: 300;
|
||||
}
|
||||
50% {
|
||||
stroke: var(--particle-color-3);
|
||||
transform: scale(1.1);
|
||||
stroke-width: 1;
|
||||
}
|
||||
50.1% {
|
||||
stroke-width: 0;
|
||||
}
|
||||
100% {
|
||||
stroke: var(--particle-color-3);
|
||||
transform: scale(1.1);
|
||||
stroke-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes particleLayerAnime {
|
||||
0% {
|
||||
transform: translate(0, 0);
|
||||
opacity: 0;
|
||||
}
|
||||
30% {
|
||||
opacity: 0;
|
||||
}
|
||||
31% {
|
||||
opacity: 1;
|
||||
}
|
||||
60% {
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
70% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translate(0, -20px);
|
||||
}
|
||||
}
|
||||
|
||||
/* Syui Deluxe Animation - Based on 2019 blog post */
|
||||
@keyframes syuiDeluxeAnime {
|
||||
0% {
|
||||
fill: var(--syui-color);
|
||||
transform: scale(1) translate(0%, 0%);
|
||||
}
|
||||
40% {
|
||||
fill: color-mix(in srgb, var(--syui-color) 40%, transparent);
|
||||
transform: scale(1, 0.9) translate(-9%, 9%);
|
||||
}
|
||||
50% {
|
||||
fill: color-mix(in srgb, var(--syui-color) 70%, transparent);
|
||||
transform: scale(1, 0.9) translate(-7%, 7%);
|
||||
}
|
||||
60% {
|
||||
transform: scale(1) translate(-7%, 7%);
|
||||
}
|
||||
70% {
|
||||
transform: scale(1.04) translate(-5%, 5%);
|
||||
}
|
||||
80% {
|
||||
fill: color-mix(in srgb, var(--syui-color) 60%, transparent);
|
||||
transform: scale(1.04) translate(-5%, 5%);
|
||||
}
|
||||
90% {
|
||||
fill: var(--particle-color-5); /* 爆発の閃光 */
|
||||
transform: scale(1) translate(0%);
|
||||
}
|
||||
100% {
|
||||
fill: var(--syui-color);
|
||||
transform: scale(1, 1) translate(0%, 0%);
|
||||
}
|
||||
}
|
||||
|
||||
/* Individual particle animations */
|
||||
@keyframes particleAnimate1 {
|
||||
0% { transform: translate(0, 0); }
|
||||
30% { opacity: 1; transform: translate(0, 0); }
|
||||
80% { transform: translate(-16px, -59px); }
|
||||
90% { transform: translate(-16px, -59px); }
|
||||
100% { opacity: 1; transform: translate(-16px, -59px); }
|
||||
}
|
||||
|
||||
@keyframes particleAnimate2 {
|
||||
0% { transform: translate(0, 0); }
|
||||
30% { opacity: 1; transform: translate(0, 0); }
|
||||
80% { transform: translate(41px, 43px); }
|
||||
90% { transform: translate(41px, 43px); }
|
||||
100% { opacity: 1; transform: translate(41px, 43px); }
|
||||
}
|
||||
|
||||
@keyframes particleAnimate3 {
|
||||
0% { transform: translate(0, 0); }
|
||||
30% { opacity: 1; transform: translate(0, 0); }
|
||||
80% { transform: translate(50px, -48px); }
|
||||
90% { transform: translate(50px, -48px); }
|
||||
100% { opacity: 1; transform: translate(50px, -48px); }
|
||||
}
|
||||
|
||||
@keyframes particleAnimate4 {
|
||||
0% { transform: translate(0, 0); }
|
||||
30% { opacity: 1; transform: translate(0, 0); }
|
||||
80% { transform: translate(-39px, 36px); }
|
||||
90% { transform: translate(-39px, 36px); }
|
||||
100% { opacity: 1; transform: translate(-39px, 36px); }
|
||||
}
|
||||
|
||||
@keyframes particleAnimate5 {
|
||||
0% { transform: translate(0, 0); }
|
||||
30% { opacity: 1; transform: translate(0, 0); }
|
||||
80% { transform: translate(-39px, 32px); }
|
||||
90% { transform: translate(-39px, 32px); }
|
||||
100% { opacity: 1; transform: translate(-39px, 32px); }
|
||||
}
|
||||
|
||||
@keyframes particleAnimate6 {
|
||||
0% { transform: translate(0, 0); }
|
||||
30% { opacity: 1; transform: translate(0, 0); }
|
||||
80% { transform: translate(48px, 6px); }
|
||||
90% { transform: translate(48px, 6px); }
|
||||
100% { opacity: 1; transform: translate(48px, 6px); }
|
||||
}
|
||||
|
||||
@keyframes particleAnimate7 {
|
||||
0% { transform: translate(0, 0); }
|
||||
30% { opacity: 1; transform: translate(0, 0); }
|
||||
80% { transform: translate(-69px, -36px); }
|
||||
90% { transform: translate(-69px, -36px); }
|
||||
100% { opacity: 1; transform: translate(-69px, -36px); }
|
||||
}
|
||||
|
||||
@keyframes particleAnimate8 {
|
||||
0% { transform: translate(0, 0); }
|
||||
30% { opacity: 1; transform: translate(0, 0); }
|
||||
80% { transform: translate(-12px, -52px); }
|
||||
90% { transform: translate(-12px, -52px); }
|
||||
100% { opacity: 1; transform: translate(-12px, -52px); }
|
||||
}
|
||||
|
||||
@keyframes particleAnimate9 {
|
||||
0% { transform: translate(0, 0); }
|
||||
30% { opacity: 1; transform: translate(0, 0); }
|
||||
80% { transform: translate(-43px, -21px); }
|
||||
90% { transform: translate(-43px, -21px); }
|
||||
100% { opacity: 1; transform: translate(-43px, -21px); }
|
||||
}
|
||||
|
||||
@keyframes particleAnimate10 {
|
||||
0% { transform: translate(0, 0); }
|
||||
30% { opacity: 1; transform: translate(0, 0); }
|
||||
80% { transform: translate(-10px, 47px); }
|
||||
90% { transform: translate(-10px, 47px); }
|
||||
100% { opacity: 1; transform: translate(-10px, 47px); }
|
||||
}
|
||||
|
||||
@keyframes particleAnimate11 {
|
||||
0% { transform: translate(0, 0); }
|
||||
30% { opacity: 1; transform: translate(0, 0); }
|
||||
80% { transform: translate(66px, -9px); }
|
||||
90% { transform: translate(66px, -9px); }
|
||||
100% { opacity: 1; transform: translate(66px, -9px); }
|
||||
}
|
||||
|
||||
@keyframes particleAnimate12 {
|
||||
0% { transform: translate(0, 0); }
|
||||
30% { opacity: 1; transform: translate(0, 0); }
|
||||
80% { transform: translate(40px, -45px); }
|
||||
90% { transform: translate(40px, -45px); }
|
||||
100% { opacity: 1; transform: translate(40px, -45px); }
|
||||
}
|
||||
|
||||
@keyframes particleAnimate13 {
|
||||
0% { transform: translate(0, 0); }
|
||||
30% { opacity: 1; transform: translate(0, 0); }
|
||||
80% { transform: translate(29px, 24px); }
|
||||
90% { transform: translate(29px, 24px); }
|
||||
100% { opacity: 1; transform: translate(29px, 24px); }
|
||||
}
|
||||
|
||||
@keyframes particleAnimate14 {
|
||||
0% { transform: translate(0, 0); }
|
||||
30% { opacity: 1; transform: translate(0, 0); }
|
||||
80% { transform: translate(-10px, 50px); }
|
||||
90% { transform: translate(-10px, 50px); }
|
||||
100% { opacity: 1; transform: translate(-10px, 50px); }
|
||||
}
|
||||
BIN
my-blog/static/favicon.ico
Normal file
BIN
my-blog/static/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 84 KiB |
BIN
my-blog/static/favicon.png
Normal file
BIN
my-blog/static/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
22
my-blog/static/favicon.svg
Normal file
22
my-blog/static/favicon.svg
Normal file
@@ -0,0 +1,22 @@
|
||||
<svg width="77pt" height="77pt" viewBox="0 0 512 512" class="likeButton" >
|
||||
<circle class="explosion" r="150" cx="250" cy="250"></circle>
|
||||
<g class="particleLayer">
|
||||
<circle fill="#ef454aba" cx="130" cy="126.5" r="12.5"/>
|
||||
<circle fill="#ef454acc" cx="411" cy="313.5" r="12.5"/>
|
||||
<circle fill="#ef454aba" cx="279" cy="86.5" r="12.5"/>
|
||||
<circle fill="#ef454aba" cx="155" cy="390.5" r="12.5"/>
|
||||
<circle fill="#ef454aba" cx="89" cy="292.5" r="10.5"/>
|
||||
<circle fill="#ef454aba" cx="414" cy="282.5" r="10.5"/>
|
||||
<circle fill="#ef454a91" cx="115" cy="149.5" r="10.5"/>
|
||||
<circle fill="#ef454aba" cx="250" cy="80.5" r="10.5"/>
|
||||
<circle fill="#ef454aba" cx="78" cy="261.5" r="10.5"/>
|
||||
<circle fill="#ef454a91" cx="182" cy="402.5" r="10.5"/>
|
||||
<circle fill="#ef454aba" cx="401.5" cy="166" r="13"/>
|
||||
<circle fill="#ef454aba" cx="379" cy="141.5" r="10.5"/>
|
||||
<circle fill="#ef454a91" cx="327" cy="397.5" r="10.5"/>
|
||||
<circle fill="#ef454aba" cx="296" cy="392.5" r="10.5"/>
|
||||
</g>
|
||||
<g transform="translate(0,512) scale(0.1,-0.1)" fill="#000000" class="icon_syui">
|
||||
<path class="syui" d="M3660 4460 c-11 -11 -33 -47 -48 -80 l-29 -60 -12 38 c-27 88 -58 92 -98 11 -35 -70 -73 -159 -73 -169 0 -6 -5 -10 -10 -10 -6 0 -15 -10 -21 -22 -33 -73 -52 -92 -47 -48 2 26 -1 35 -14 38 -16 3 -168 -121 -168 -138 0 -5 -13 -16 -28 -24 -24 -13 -35 -12 -87 0 -221 55 -231 56 -480 56 -219 1 -247 -1 -320 -22 -44 -12 -96 -26 -115 -30 -57 -13 -122 -39 -200 -82 -8 -4 -31 -14 -50 -23 -41 -17 -34 -13 -146 -90 -87 -59 -292 -252 -351 -330 -63 -83 -143 -209 -143 -225 0 -10 -7 -23 -15 -30 -8 -7 -15 -17 -15 -22 0 -5 -13 -37 -28 -71 -16 -34 -36 -93 -45 -132 -9 -38 -24 -104 -34 -145 -13 -60 -17 -121 -17 -300 1 -224 1 -225 36 -365 24 -94 53 -175 87 -247 28 -58 51 -108 51 -112 0 -3 13 -24 28 -48 42 -63 46 -79 22 -85 -11 -3 -20 -9 -20 -14 0 -5 -4 -9 -10 -9 -5 0 -22 -11 -37 -25 -16 -13 -75 -59 -133 -100 -58 -42 -113 -82 -123 -90 -9 -8 -22 -15 -27 -15 -6 0 -10 -6 -10 -13 0 -8 -11 -20 -25 -27 -34 -18 -34 -54 0 -48 14 3 25 2 25 -1 0 -3 -43 -31 -95 -61 -52 -30 -95 -58 -95 -62 0 -5 -5 -8 -11 -8 -19 0 -84 -33 -92 -47 -4 -7 -15 -13 -22 -13 -14 0 -17 -4 -19 -32 -1 -8 15 -15 37 -18 l38 -5 -47 -48 c-56 -59 -54 -81 9 -75 30 3 45 0 54 -11 9 -13 16 -14 43 -4 29 11 30 10 18 -5 -7 -9 -19 -23 -25 -30 -7 -7 -13 -20 -13 -29 0 -12 8 -14 38 -9 20 4 57 8 82 9 25 2 54 8 66 15 18 10 23 8 32 -13 17 -38 86 -35 152 6 27 17 50 34 50 38 0 16 62 30 85 19 33 -15 72 -2 89 30 8 15 31 43 51 62 35 34 38 35 118 35 77 0 85 2 126 33 24 17 52 32 61 32 9 0 42 18 73 40 30 22 61 40 69 40 21 0 88 -26 100 -38 7 -7 17 -12 24 -12 7 0 35 -11 62 -25 66 -33 263 -84 387 -101 189 -25 372 -12 574 41 106 27 130 37 261 97 41 20 80 37 85 39 6 2 51 31 100 64 166 111 405 372 489 534 10 20 22 43 27 51 5 8 12 22 15 30 3 8 17 40 31 70 54 115 95 313 108 520 13 200 -43 480 -134 672 -28 58 -51 108 -51 112 0 3 -13 24 -29 48 -15 24 -34 60 -40 80 -19 57 3 142 50 193 10 11 22 49 28 85 6 36 16 67 21 68 18 6 31 53 25 83 -4 18 -17 33 -36 41 -16 7 -29 15 -29 18 1 10 38 50 47 50 5 0 20 11 33 25 18 19 22 31 17 61 -3 20 -14 45 -23 55 -16 18 -16 20 6 44 15 16 21 32 18 49 -3 15 1 34 8 43 32 43 7 73 -46 55 l-30 -11 0 85 c0 74 -2 84 -18 84 -21 0 -53 -33 -103 -104 l-34 -48 -5 74 c-7 102 -35 133 -80 88z m-870 -740 c36 -7 75 -14 88 -16 21 -4 23 -9 16 -37 -3 -18 -14 -43 -24 -57 -10 -14 -20 -35 -24 -46 -4 -12 -16 -32 -27 -45 -12 -13 -37 -49 -56 -79 -20 -30 -52 -73 -72 -96 -53 -60 -114 -133 -156 -189 -21 -27 -44 -54 -52 -58 -7 -4 -13 -14 -13 -22 0 -7 -18 -33 -40 -57 -22 -23 -40 -46 -40 -50 0 -5 -19 -21 -42 -38 -47 -35 -85 -38 -188 -15 -115 25 -173 20 -264 -23 -45 -22 -106 -46 -136 -56 -48 -15 -77 -25 -140 -50 -70 -28 -100 -77 -51 -84 14 -2 34 -10 45 -17 12 -7 53 -16 91 -20 90 -9 131 -22 178 -57 20 -16 52 -35 70 -43 18 -7 40 -22 49 -32 16 -18 15 -22 -24 -88 -23 -39 -47 -74 -53 -80 -7 -5 -23 -26 -36 -45 -26 -39 -92 -113 -207 -232 -4 -4 -37 -36 -73 -71 l-66 -64 -20 41 c-58 119 -105 240 -115 301 -40 244 -35 409 20 595 8 30 21 66 28 80 7 14 24 54 38 89 15 35 35 75 46 89 11 13 20 31 20 38 0 8 3 14 8 14 4 0 16 16 27 36 24 45 221 245 278 281 23 15 44 30 47 33 20 20 138 78 250 123 61 24 167 50 250 61 60 7 302 -1 370 -14z m837 -661 c52 -101 102 -279 106 -379 2 -42 0 -45 -28 -51 -16 -4 -101 -7 -187 -8 -166 -1 -229 10 -271 49 -19 19 -19 19 14 49 22 21 44 31 65 31 41 0 84 34 84 66 0 30 12 55 56 112 19 25 37 65 44 95 11 51 53 111 74 104 6 -2 25 -32 43 -68z m-662 -810 c17 -10 40 -24 53 -30 12 -7 22 -16 22 -20 0 -4 17 -13 38 -19 20 -7 44 -18 52 -24 8 -7 33 -21 55 -31 22 -11 42 -23 45 -26 11 -14 109 -49 164 -58 62 -11 101 -7 126 14 15 14 38 18 78 16 39 -2 26 -41 -49 -146 -78 -109 -85 -118 -186 -219 -61 -61 -239 -189 -281 -203 -17 -5 -73 -29 -104 -44 -187 -92 -605 -103 -791 -21 -42 19 -47 24 -37 41 5 11 28 32 51 48 22 15 51 38 64 51 13 12 28 22 33 22 17 0 242 233 242 250 0 6 5 10 10 10 6 0 10 6 10 14 0 25 50 55 100 62 59 8 56 6 115 83 50 66 74 117 75 162 0 14 7 40 16 57 18 38 52 41 99 11z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.8 KiB |
3
my-blog/static/index.html
Normal file
3
my-blog/static/index.html
Normal file
@@ -0,0 +1,3 @@
|
||||
<!-- OAuth Comment System - Load globally for session management -->
|
||||
<script type="module" crossorigin src="/assets/comment-atproto-Do1JWJCw.js"></script>
|
||||
<link rel="stylesheet" crossorigin href="/assets/comment-atproto-CPKYAM8U.css">
|
||||
360
my-blog/static/js/ask-ai.js
Normal file
360
my-blog/static/js/ask-ai.js
Normal file
@@ -0,0 +1,360 @@
|
||||
/**
|
||||
* Ask AI functionality - Pure JavaScript, no jQuery dependency
|
||||
*/
|
||||
class AskAI {
|
||||
constructor() {
|
||||
this.isReady = false;
|
||||
this.aiProfile = null;
|
||||
this.init();
|
||||
}
|
||||
|
||||
init() {
|
||||
this.setupEventListeners();
|
||||
this.checkAuthOnLoad();
|
||||
}
|
||||
|
||||
setupEventListeners() {
|
||||
// Listen for AI ready signal
|
||||
window.addEventListener('aiChatReady', () => {
|
||||
this.isReady = true;
|
||||
console.log('AI Chat is ready');
|
||||
});
|
||||
|
||||
// Listen for AI profile updates
|
||||
window.addEventListener('aiProfileLoaded', (event) => {
|
||||
this.aiProfile = event.detail;
|
||||
console.log('AI profile loaded:', this.aiProfile);
|
||||
this.updateButton();
|
||||
});
|
||||
|
||||
// Listen for AI responses
|
||||
window.addEventListener('aiResponseReceived', (event) => {
|
||||
this.handleAIResponse(event.detail);
|
||||
});
|
||||
|
||||
// Keyboard shortcuts
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape') {
|
||||
this.hide();
|
||||
}
|
||||
if (e.key === 'Enter' && e.target.id === 'aiQuestion' && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
this.ask();
|
||||
}
|
||||
});
|
||||
|
||||
// Monitor authentication changes
|
||||
this.observeAuth();
|
||||
}
|
||||
|
||||
toggle() {
|
||||
const panel = document.getElementById('askAiPanel');
|
||||
const isVisible = panel.style.display !== 'none';
|
||||
|
||||
if (isVisible) {
|
||||
this.hide();
|
||||
} else {
|
||||
this.show();
|
||||
}
|
||||
}
|
||||
|
||||
show() {
|
||||
const panel = document.getElementById('askAiPanel');
|
||||
panel.style.display = 'block';
|
||||
this.checkAuth();
|
||||
}
|
||||
|
||||
hide() {
|
||||
const panel = document.getElementById('askAiPanel');
|
||||
panel.style.display = 'none';
|
||||
}
|
||||
|
||||
checkAuth() {
|
||||
const userSections = document.querySelectorAll('.user-section');
|
||||
const isAuthenticated = userSections.length > 0;
|
||||
|
||||
const authCheck = document.getElementById('authCheck');
|
||||
const chatForm = document.getElementById('chatForm');
|
||||
const chatHistory = document.getElementById('chatHistory');
|
||||
|
||||
if (isAuthenticated) {
|
||||
authCheck.style.display = 'none';
|
||||
chatForm.style.display = 'block';
|
||||
chatHistory.style.display = 'block';
|
||||
|
||||
if (chatHistory.children.length === 0) {
|
||||
this.showGreeting();
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
document.getElementById('aiQuestion').focus();
|
||||
}, 50);
|
||||
} else {
|
||||
authCheck.style.display = 'block';
|
||||
chatForm.style.display = 'none';
|
||||
chatHistory.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
checkAuthOnLoad() {
|
||||
setTimeout(() => {
|
||||
this.checkAuth();
|
||||
}, 500);
|
||||
}
|
||||
|
||||
observeAuth() {
|
||||
const observer = new MutationObserver(() => {
|
||||
const userSections = document.querySelectorAll('.user-section');
|
||||
if (userSections.length > 0) {
|
||||
this.checkAuth();
|
||||
observer.disconnect();
|
||||
}
|
||||
});
|
||||
|
||||
observer.observe(document.body, {
|
||||
childList: true,
|
||||
subtree: true
|
||||
});
|
||||
}
|
||||
|
||||
updateButton() {
|
||||
const button = document.getElementById('askAiButton');
|
||||
if (this.aiProfile && this.aiProfile.displayName) {
|
||||
const textNode = button.childNodes[2];
|
||||
if (textNode) {
|
||||
textNode.textContent = this.aiProfile.displayName;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
showGreeting() {
|
||||
if (!this.aiProfile) return;
|
||||
|
||||
const chatHistory = document.getElementById('chatHistory');
|
||||
const greetingDiv = document.createElement('div');
|
||||
greetingDiv.className = 'chat-message ai-message comment-style initial-greeting';
|
||||
|
||||
const avatarElement = this.aiProfile.avatar
|
||||
? `<img src="${this.aiProfile.avatar}" alt="${this.aiProfile.displayName}" class="profile-avatar">`
|
||||
: '🤖';
|
||||
|
||||
greetingDiv.innerHTML = `
|
||||
<div class="message-header">
|
||||
<div class="avatar">${avatarElement}</div>
|
||||
<div class="user-info">
|
||||
<div class="display-name">${this.aiProfile.displayName}</div>
|
||||
<div class="handle">@${this.aiProfile.handle}</div>
|
||||
<div class="timestamp">${new Date().toLocaleString()}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="message-content">
|
||||
Hello! I'm an AI assistant trained on this blog's content. I can answer questions about the articles, provide insights, and help you understand the topics discussed here. What would you like to know?
|
||||
</div>
|
||||
`;
|
||||
chatHistory.appendChild(greetingDiv);
|
||||
}
|
||||
|
||||
async ask() {
|
||||
const question = document.getElementById('aiQuestion').value;
|
||||
const chatHistory = document.getElementById('chatHistory');
|
||||
const askButton = document.getElementById('askButton');
|
||||
|
||||
if (!question.trim()) return;
|
||||
|
||||
// Wait for AI to be ready
|
||||
if (!this.isReady) {
|
||||
await this.waitForReady();
|
||||
}
|
||||
|
||||
// Disable button
|
||||
askButton.disabled = true;
|
||||
askButton.textContent = 'Posting...';
|
||||
|
||||
try {
|
||||
// Add user message
|
||||
this.addUserMessage(question);
|
||||
|
||||
// Clear input
|
||||
document.getElementById('aiQuestion').value = '';
|
||||
|
||||
// Show loading
|
||||
this.showLoading();
|
||||
|
||||
// Post question
|
||||
const event = new CustomEvent('postAIQuestion', {
|
||||
detail: { question: question }
|
||||
});
|
||||
window.dispatchEvent(event);
|
||||
|
||||
} catch (error) {
|
||||
this.showError('Sorry, I encountered an error. Please try again.');
|
||||
} finally {
|
||||
askButton.disabled = false;
|
||||
askButton.textContent = 'Ask';
|
||||
}
|
||||
}
|
||||
|
||||
waitForReady() {
|
||||
return new Promise(resolve => {
|
||||
const checkReady = setInterval(() => {
|
||||
if (this.isReady) {
|
||||
clearInterval(checkReady);
|
||||
resolve();
|
||||
}
|
||||
}, 100);
|
||||
});
|
||||
}
|
||||
|
||||
addUserMessage(question) {
|
||||
const chatHistory = document.getElementById('chatHistory');
|
||||
const userSection = document.querySelector('.user-section');
|
||||
|
||||
let userAvatar = '👤';
|
||||
let userDisplay = 'You';
|
||||
let userHandle = 'user';
|
||||
|
||||
if (userSection) {
|
||||
const avatarImg = userSection.querySelector('.user-avatar');
|
||||
const displayName = userSection.querySelector('.user-display-name');
|
||||
const handle = userSection.querySelector('.user-handle');
|
||||
|
||||
if (avatarImg && avatarImg.src) {
|
||||
userAvatar = `<img src="${avatarImg.src}" alt="${displayName?.textContent || 'User'}" class="profile-avatar">`;
|
||||
}
|
||||
if (displayName?.textContent) {
|
||||
userDisplay = displayName.textContent;
|
||||
}
|
||||
if (handle?.textContent) {
|
||||
userHandle = handle.textContent.replace('@', '');
|
||||
}
|
||||
}
|
||||
|
||||
const questionDiv = document.createElement('div');
|
||||
questionDiv.className = 'chat-message user-message comment-style';
|
||||
questionDiv.innerHTML = `
|
||||
<div class="message-header">
|
||||
<div class="avatar">${userAvatar}</div>
|
||||
<div class="user-info">
|
||||
<div class="display-name">${userDisplay}</div>
|
||||
<div class="handle">@${userHandle}</div>
|
||||
<div class="timestamp">${new Date().toLocaleString()}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="message-content">${question}</div>
|
||||
`;
|
||||
chatHistory.appendChild(questionDiv);
|
||||
}
|
||||
|
||||
showLoading() {
|
||||
const chatHistory = document.getElementById('chatHistory');
|
||||
const loadingDiv = document.createElement('div');
|
||||
loadingDiv.className = 'ai-loading-simple';
|
||||
loadingDiv.innerHTML = `
|
||||
<i class="fas fa-robot"></i>
|
||||
<span>考えています</span>
|
||||
<i class="fas fa-spinner fa-spin"></i>
|
||||
`;
|
||||
chatHistory.appendChild(loadingDiv);
|
||||
}
|
||||
|
||||
showError(message) {
|
||||
const chatHistory = document.getElementById('chatHistory');
|
||||
this.removeLoading();
|
||||
|
||||
const errorDiv = document.createElement('div');
|
||||
errorDiv.className = 'chat-message error-message comment-style';
|
||||
errorDiv.innerHTML = `
|
||||
<div class="message-header">
|
||||
<div class="avatar">⚠️</div>
|
||||
<div class="user-info">
|
||||
<div class="display-name">System</div>
|
||||
<div class="handle">@system</div>
|
||||
<div class="timestamp">${new Date().toLocaleString()}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="message-content">${message}</div>
|
||||
`;
|
||||
chatHistory.appendChild(errorDiv);
|
||||
}
|
||||
|
||||
removeLoading() {
|
||||
const loadingMsg = document.querySelector('.ai-loading-simple');
|
||||
if (loadingMsg) {
|
||||
loadingMsg.remove();
|
||||
}
|
||||
}
|
||||
|
||||
handleAIResponse(responseData) {
|
||||
const chatHistory = document.getElementById('chatHistory');
|
||||
this.removeLoading();
|
||||
|
||||
const aiProfile = responseData.aiProfile;
|
||||
if (!aiProfile || !aiProfile.handle || !aiProfile.displayName) {
|
||||
console.error('AI profile data is missing');
|
||||
return;
|
||||
}
|
||||
|
||||
const timestamp = new Date(responseData.timestamp || Date.now());
|
||||
const avatarElement = aiProfile.avatar
|
||||
? `<img src="${aiProfile.avatar}" alt="${aiProfile.displayName}" class="profile-avatar">`
|
||||
: '🤖';
|
||||
|
||||
const answerDiv = document.createElement('div');
|
||||
answerDiv.className = 'chat-message ai-message comment-style';
|
||||
answerDiv.innerHTML = `
|
||||
<div class="message-header">
|
||||
<div class="avatar">${avatarElement}</div>
|
||||
<div class="user-info">
|
||||
<div class="display-name">${aiProfile.displayName}</div>
|
||||
<div class="handle">@${aiProfile.handle}</div>
|
||||
<div class="timestamp">${timestamp.toLocaleString()}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="message-content">${responseData.answer}</div>
|
||||
`;
|
||||
chatHistory.appendChild(answerDiv);
|
||||
|
||||
// Limit chat history
|
||||
this.limitChatHistory();
|
||||
}
|
||||
|
||||
limitChatHistory() {
|
||||
const chatHistory = document.getElementById('chatHistory');
|
||||
if (chatHistory.children.length > 10) {
|
||||
chatHistory.removeChild(chatHistory.children[0]);
|
||||
if (chatHistory.children.length > 0) {
|
||||
chatHistory.removeChild(chatHistory.children[0]);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize Ask AI when DOM is loaded
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
try {
|
||||
window.askAIInstance = new AskAI();
|
||||
console.log('Ask AI initialized successfully');
|
||||
} catch (error) {
|
||||
console.error('Failed to initialize Ask AI:', error);
|
||||
}
|
||||
});
|
||||
|
||||
// Global function for onclick
|
||||
window.AskAI = {
|
||||
toggle: function() {
|
||||
console.log('AskAI.toggle called');
|
||||
if (window.askAIInstance) {
|
||||
window.askAIInstance.toggle();
|
||||
} else {
|
||||
console.error('Ask AI instance not available');
|
||||
}
|
||||
},
|
||||
ask: function() {
|
||||
console.log('AskAI.ask called');
|
||||
if (window.askAIInstance) {
|
||||
window.askAIInstance.ask();
|
||||
} else {
|
||||
console.error('Ask AI instance not available');
|
||||
}
|
||||
}
|
||||
};
|
||||
94
my-blog/static/js/theme.js
Normal file
94
my-blog/static/js/theme.js
Normal file
@@ -0,0 +1,94 @@
|
||||
/**
|
||||
* Theme and visual effects - Pure CSS animations, no jQuery
|
||||
*/
|
||||
class Theme {
|
||||
constructor() {
|
||||
this.init();
|
||||
}
|
||||
|
||||
init() {
|
||||
this.setupParticleColors();
|
||||
this.setupLogoAnimations();
|
||||
}
|
||||
|
||||
setupParticleColors() {
|
||||
// Dynamic particle colors based on theme
|
||||
const style = document.createElement('style');
|
||||
style.textContent = `
|
||||
/* Dynamic particle colors based on theme */
|
||||
.likeButton .particleLayer circle:nth-child(1),
|
||||
.likeButton .particleLayer circle:nth-child(2) {
|
||||
fill: var(--particle-color-1) !important;
|
||||
}
|
||||
|
||||
.likeButton .particleLayer circle:nth-child(3),
|
||||
.likeButton .particleLayer circle:nth-child(4) {
|
||||
fill: var(--particle-color-2) !important;
|
||||
}
|
||||
|
||||
.likeButton .particleLayer circle:nth-child(5),
|
||||
.likeButton .particleLayer circle:nth-child(6),
|
||||
.likeButton .particleLayer circle:nth-child(7) {
|
||||
fill: var(--particle-color-3) !important;
|
||||
}
|
||||
|
||||
.likeButton .particleLayer circle:nth-child(8),
|
||||
.likeButton .particleLayer circle:nth-child(9),
|
||||
.likeButton .particleLayer circle:nth-child(10) {
|
||||
fill: var(--particle-color-4) !important;
|
||||
}
|
||||
|
||||
.likeButton .particleLayer circle:nth-child(11),
|
||||
.likeButton .particleLayer circle:nth-child(12),
|
||||
.likeButton .particleLayer circle:nth-child(13),
|
||||
.likeButton .particleLayer circle:nth-child(14) {
|
||||
fill: var(--particle-color-5) !important;
|
||||
}
|
||||
|
||||
/* Reset initial animations but allow hover */
|
||||
.likeButton .syui {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.likeButton .particleLayer {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.likeButton .explosion {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
/* Enable hover animations from package */
|
||||
.likeButton:hover .syui,
|
||||
.likeButton:hover path.syui {
|
||||
animation: syuiDeluxeAnime 400ms forwards !important;
|
||||
}
|
||||
|
||||
.likeButton:hover .particleLayer {
|
||||
animation: particleLayerAnime 800ms forwards !important;
|
||||
}
|
||||
|
||||
.likeButton:hover .explosion {
|
||||
animation: explosionAnime 800ms forwards !important;
|
||||
}
|
||||
|
||||
/* Logo positioning */
|
||||
.logo .likeButton {
|
||||
background: transparent !important;
|
||||
display: block;
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
}
|
||||
|
||||
setupLogoAnimations() {
|
||||
// Pure CSS animations are handled by the svg-animation-package.css
|
||||
// This method is reserved for any future JavaScript-based enhancements
|
||||
console.log('Logo animations initialized (CSS-based)');
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize theme when DOM is loaded
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
new Theme();
|
||||
});
|
||||
165
my-blog/static/pkg/font-awesome/LICENSE.txt
Normal file
165
my-blog/static/pkg/font-awesome/LICENSE.txt
Normal file
@@ -0,0 +1,165 @@
|
||||
Fonticons, Inc. (https://fontawesome.com)
|
||||
|
||||
--------------------------------------------------------------------------------
|
||||
|
||||
Font Awesome Free License
|
||||
|
||||
Font Awesome Free is free, open source, and GPL friendly. You can use it for
|
||||
commercial projects, open source projects, or really almost whatever you want.
|
||||
Full Font Awesome Free license: https://fontawesome.com/license/free.
|
||||
|
||||
--------------------------------------------------------------------------------
|
||||
|
||||
# Icons: CC BY 4.0 License (https://creativecommons.org/licenses/by/4.0/)
|
||||
|
||||
The Font Awesome Free download is licensed under a Creative Commons
|
||||
Attribution 4.0 International License and applies to all icons packaged
|
||||
as SVG and JS file types.
|
||||
|
||||
--------------------------------------------------------------------------------
|
||||
|
||||
# Fonts: SIL OFL 1.1 License
|
||||
|
||||
In the Font Awesome Free download, the SIL OFL license applies to all icons
|
||||
packaged as web and desktop font files.
|
||||
|
||||
Copyright (c) 2024 Fonticons, Inc. (https://fontawesome.com)
|
||||
with Reserved Font Name: "Font Awesome".
|
||||
|
||||
This Font Software is licensed under the SIL Open Font License, Version 1.1.
|
||||
This license is copied below, and is also available with a FAQ at:
|
||||
http://scripts.sil.org/OFL
|
||||
|
||||
SIL OPEN FONT LICENSE
|
||||
Version 1.1 - 26 February 2007
|
||||
|
||||
PREAMBLE
|
||||
The goals of the Open Font License (OFL) are to stimulate worldwide
|
||||
development of collaborative font projects, to support the font creation
|
||||
efforts of academic and linguistic communities, and to provide a free and
|
||||
open framework in which fonts may be shared and improved in partnership
|
||||
with others.
|
||||
|
||||
The OFL allows the licensed fonts to be used, studied, modified and
|
||||
redistributed freely as long as they are not sold by themselves. The
|
||||
fonts, including any derivative works, can be bundled, embedded,
|
||||
redistributed and/or sold with any software provided that any reserved
|
||||
names are not used by derivative works. The fonts and derivatives,
|
||||
however, cannot be released under any other type of license. The
|
||||
requirement for fonts to remain under this license does not apply
|
||||
to any document created using the fonts or their derivatives.
|
||||
|
||||
DEFINITIONS
|
||||
"Font Software" refers to the set of files released by the Copyright
|
||||
Holder(s) under this license and clearly marked as such. This may
|
||||
include source files, build scripts and documentation.
|
||||
|
||||
"Reserved Font Name" refers to any names specified as such after the
|
||||
copyright statement(s).
|
||||
|
||||
"Original Version" refers to the collection of Font Software components as
|
||||
distributed by the Copyright Holder(s).
|
||||
|
||||
"Modified Version" refers to any derivative made by adding to, deleting,
|
||||
or substituting — in part or in whole — any of the components of the
|
||||
Original Version, by changing formats or by porting the Font Software to a
|
||||
new environment.
|
||||
|
||||
"Author" refers to any designer, engineer, programmer, technical
|
||||
writer or other person who contributed to the Font Software.
|
||||
|
||||
PERMISSION & CONDITIONS
|
||||
Permission is hereby granted, free of charge, to any person obtaining
|
||||
a copy of the Font Software, to use, study, copy, merge, embed, modify,
|
||||
redistribute, and sell modified and unmodified copies of the Font
|
||||
Software, subject to the following conditions:
|
||||
|
||||
1) Neither the Font Software nor any of its individual components,
|
||||
in Original or Modified Versions, may be sold by itself.
|
||||
|
||||
2) Original or Modified Versions of the Font Software may be bundled,
|
||||
redistributed and/or sold with any software, provided that each copy
|
||||
contains the above copyright notice and this license. These can be
|
||||
included either as stand-alone text files, human-readable headers or
|
||||
in the appropriate machine-readable metadata fields within text or
|
||||
binary files as long as those fields can be easily viewed by the user.
|
||||
|
||||
3) No Modified Version of the Font Software may use the Reserved Font
|
||||
Name(s) unless explicit written permission is granted by the corresponding
|
||||
Copyright Holder. This restriction only applies to the primary font name as
|
||||
presented to the users.
|
||||
|
||||
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
|
||||
Software shall not be used to promote, endorse or advertise any
|
||||
Modified Version, except to acknowledge the contribution(s) of the
|
||||
Copyright Holder(s) and the Author(s) or with their explicit written
|
||||
permission.
|
||||
|
||||
5) The Font Software, modified or unmodified, in part or in whole,
|
||||
must be distributed entirely under this license, and must not be
|
||||
distributed under any other license. The requirement for fonts to
|
||||
remain under this license does not apply to any document created
|
||||
using the Font Software.
|
||||
|
||||
TERMINATION
|
||||
This license becomes null and void if any of the above conditions are
|
||||
not met.
|
||||
|
||||
DISCLAIMER
|
||||
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
|
||||
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
|
||||
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
|
||||
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
|
||||
OTHER DEALINGS IN THE FONT SOFTWARE.
|
||||
|
||||
--------------------------------------------------------------------------------
|
||||
|
||||
# Code: MIT License (https://opensource.org/licenses/MIT)
|
||||
|
||||
In the Font Awesome Free download, the MIT license applies to all non-font and
|
||||
non-icon files.
|
||||
|
||||
Copyright 2024 Fonticons, Inc.
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy of
|
||||
this software and associated documentation files (the "Software"), to deal in the
|
||||
Software without restriction, including without limitation the rights to use, copy,
|
||||
modify, merge, publish, distribute, sublicense, and/or sell copies of the Software,
|
||||
and to permit persons to whom the Software is furnished to do so, subject to the
|
||||
following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
|
||||
INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A
|
||||
PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
|
||||
HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
|
||||
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
|
||||
SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
|
||||
--------------------------------------------------------------------------------
|
||||
|
||||
# Attribution
|
||||
|
||||
Attribution is required by MIT, SIL OFL, and CC BY licenses. Downloaded Font
|
||||
Awesome Free files already contain embedded comments with sufficient
|
||||
attribution, so you shouldn't need to do anything additional when using these
|
||||
files normally.
|
||||
|
||||
We've kept attribution comments terse, so we ask that you do not actively work
|
||||
to remove them from files, especially code. They're a great way for folks to
|
||||
learn about Font Awesome.
|
||||
|
||||
--------------------------------------------------------------------------------
|
||||
|
||||
# Brand Icons
|
||||
|
||||
All brand icons are trademarks of their respective owners. The use of these
|
||||
trademarks does not indicate endorsement of the trademark holder by Font
|
||||
Awesome, nor vice versa. **Please do not use brand logos for any purpose except
|
||||
to represent the company, product, or service to which they refer.**
|
||||
9
my-blog/static/pkg/font-awesome/css/all.min.css
vendored
Normal file
9
my-blog/static/pkg/font-awesome/css/all.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
6
my-blog/static/pkg/font-awesome/css/brands.min.css
vendored
Normal file
6
my-blog/static/pkg/font-awesome/css/brands.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
9
my-blog/static/pkg/font-awesome/css/fontawesome.min.css
vendored
Normal file
9
my-blog/static/pkg/font-awesome/css/fontawesome.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
6
my-blog/static/pkg/font-awesome/css/regular.min.css
vendored
Normal file
6
my-blog/static/pkg/font-awesome/css/regular.min.css
vendored
Normal file
@@ -0,0 +1,6 @@
|
||||
/*!
|
||||
* Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
|
||||
* Copyright 2024 Fonticons, Inc.
|
||||
*/
|
||||
:host,:root{--fa-style-family-classic:"Font Awesome 6 Free";--fa-font-regular:normal 400 1em/1 "Font Awesome 6 Free"}@font-face{font-family:"Font Awesome 6 Free";font-style:normal;font-weight:400;font-display:block;src:url(../webfonts/fa-regular-400.woff2) format("woff2"),url(../webfonts/fa-regular-400.ttf) format("truetype")}.fa-regular,.far{font-weight:400}
|
||||
6
my-blog/static/pkg/font-awesome/css/solid.min.css
vendored
Normal file
6
my-blog/static/pkg/font-awesome/css/solid.min.css
vendored
Normal file
@@ -0,0 +1,6 @@
|
||||
/*!
|
||||
* Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com
|
||||
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
|
||||
* Copyright 2024 Fonticons, Inc.
|
||||
*/
|
||||
:host,:root{--fa-style-family-classic:"Font Awesome 6 Free";--fa-font-solid:normal 900 1em/1 "Font Awesome 6 Free"}@font-face{font-family:"Font Awesome 6 Free";font-style:normal;font-weight:900;font-display:block;src:url(../webfonts/fa-solid-900.woff2) format("woff2"),url(../webfonts/fa-solid-900.ttf) format("truetype")}.fa-solid,.fas{font-weight:900}
|
||||
BIN
my-blog/static/pkg/font-awesome/webfonts/fa-brands-400.ttf
Normal file
BIN
my-blog/static/pkg/font-awesome/webfonts/fa-brands-400.ttf
Normal file
Binary file not shown.
BIN
my-blog/static/pkg/font-awesome/webfonts/fa-brands-400.woff2
Normal file
BIN
my-blog/static/pkg/font-awesome/webfonts/fa-brands-400.woff2
Normal file
Binary file not shown.
BIN
my-blog/static/pkg/font-awesome/webfonts/fa-regular-400.ttf
Normal file
BIN
my-blog/static/pkg/font-awesome/webfonts/fa-regular-400.ttf
Normal file
Binary file not shown.
BIN
my-blog/static/pkg/font-awesome/webfonts/fa-regular-400.woff2
Normal file
BIN
my-blog/static/pkg/font-awesome/webfonts/fa-regular-400.woff2
Normal file
Binary file not shown.
BIN
my-blog/static/pkg/font-awesome/webfonts/fa-solid-900.ttf
Normal file
BIN
my-blog/static/pkg/font-awesome/webfonts/fa-solid-900.ttf
Normal file
Binary file not shown.
BIN
my-blog/static/pkg/font-awesome/webfonts/fa-solid-900.woff2
Normal file
BIN
my-blog/static/pkg/font-awesome/webfonts/fa-solid-900.woff2
Normal file
Binary file not shown.
BIN
my-blog/static/pkg/font-awesome/webfonts/fa-v4compatibility.ttf
Normal file
BIN
my-blog/static/pkg/font-awesome/webfonts/fa-v4compatibility.ttf
Normal file
Binary file not shown.
Binary file not shown.
BIN
my-blog/static/pkg/icomoon/fonts/icomoon.eot
Normal file
BIN
my-blog/static/pkg/icomoon/fonts/icomoon.eot
Normal file
Binary file not shown.
34
my-blog/static/pkg/icomoon/fonts/icomoon.svg
Normal file
34
my-blog/static/pkg/icomoon/fonts/icomoon.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 58 KiB |
BIN
my-blog/static/pkg/icomoon/fonts/icomoon.ttf
Normal file
BIN
my-blog/static/pkg/icomoon/fonts/icomoon.ttf
Normal file
Binary file not shown.
BIN
my-blog/static/pkg/icomoon/fonts/icomoon.woff
Normal file
BIN
my-blog/static/pkg/icomoon/fonts/icomoon.woff
Normal file
Binary file not shown.
99
my-blog/static/pkg/icomoon/style.css
Normal file
99
my-blog/static/pkg/icomoon/style.css
Normal file
@@ -0,0 +1,99 @@
|
||||
@font-face {
|
||||
font-family: 'icomoon';
|
||||
src: url('fonts/icomoon.eot?mxezzh');
|
||||
src: url('fonts/icomoon.eot?mxezzh#iefix') format('embedded-opentype'),
|
||||
url('fonts/icomoon.ttf?mxezzh') format('truetype'),
|
||||
url('fonts/icomoon.woff?mxezzh') format('woff'),
|
||||
url('fonts/icomoon.svg?mxezzh#icomoon') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: block;
|
||||
}
|
||||
|
||||
[class^="icon-"], [class*=" icon-"] {
|
||||
/* use !important to prevent issues with browser extensions that change fonts */
|
||||
font-family: 'icomoon' !important;
|
||||
speak: never;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
line-height: 1;
|
||||
|
||||
/* Better Font Rendering =========== */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-git:before {
|
||||
content: "\e901";
|
||||
}
|
||||
.icon-cube:before {
|
||||
content: "\e900";
|
||||
}
|
||||
.icon-game:before {
|
||||
content: "\e9d5";
|
||||
}
|
||||
.icon-card:before {
|
||||
content: "\e9d6";
|
||||
}
|
||||
.icon-book:before {
|
||||
content: "\e9d7";
|
||||
}
|
||||
.icon-git1:before {
|
||||
content: "\e9d3";
|
||||
}
|
||||
.icon-moji_a:before {
|
||||
content: "\e9c3";
|
||||
}
|
||||
.icon-archlinux:before {
|
||||
content: "\e9c4";
|
||||
}
|
||||
.icon-archlinuxjp:before {
|
||||
content: "\e9c5";
|
||||
}
|
||||
.icon-syui:before {
|
||||
content: "\e9c6";
|
||||
}
|
||||
.icon-phoenix-power:before {
|
||||
content: "\e9c7";
|
||||
}
|
||||
.icon-phoenix-world:before {
|
||||
content: "\e9c8";
|
||||
}
|
||||
.icon-power:before {
|
||||
content: "\e9c9";
|
||||
}
|
||||
.icon-phoenix:before {
|
||||
content: "\e9ca";
|
||||
}
|
||||
.icon-honeycomb:before {
|
||||
content: "\e9cb";
|
||||
}
|
||||
.icon-ai:before {
|
||||
content: "\e9cc";
|
||||
}
|
||||
.icon-robot:before {
|
||||
content: "\e9cd";
|
||||
}
|
||||
.icon-sandar:before {
|
||||
content: "\e9ce";
|
||||
}
|
||||
.icon-moon:before {
|
||||
content: "\e9cf";
|
||||
}
|
||||
.icon-home:before {
|
||||
content: "\e9d0";
|
||||
}
|
||||
.icon-cloud:before {
|
||||
content: "\e9d1";
|
||||
}
|
||||
.icon-api:before {
|
||||
content: "\e9d2";
|
||||
}
|
||||
.icon-aibadge:before {
|
||||
content: "\ebf8";
|
||||
}
|
||||
.icon-aiterm:before {
|
||||
content: "\ebf7";
|
||||
}
|
||||
24
my-blog/static/syui.svg
Normal file
24
my-blog/static/syui.svg
Normal file
@@ -0,0 +1,24 @@
|
||||
<svg width="77pt" height="77pt" viewBox="0 0 512 512" class="likeButton" >
|
||||
<circle class="explosion" r="150" cx="250" cy="250"></circle>
|
||||
<g class="particleLayer">
|
||||
<circle fill="#ef454aba" cx="130" cy="126.5" r="12.5"/>
|
||||
<circle fill="#ef454acc" cx="411" cy="313.5" r="12.5"/>
|
||||
<circle fill="#ef454aba" cx="279" cy="86.5" r="12.5"/>
|
||||
<circle fill="#ef454aba" cx="155" cy="390.5" r="12.5"/>
|
||||
<circle fill="#ef454aba" cx="89" cy="292.5" r="10.5"/>
|
||||
<circle fill="#ef454aba" cx="414" cy="282.5" r="10.5"/>
|
||||
<circle fill="#ef454a91" cx="115" cy="149.5" r="10.5"/>
|
||||
<circle fill="#ef454aba" cx="250" cy="80.5" r="10.5"/>
|
||||
<circle fill="#ef454aba" cx="78" cy="261.5" r="10.5"/>
|
||||
<circle fill="#ef454a91" cx="182" cy="402.5" r="10.5"/>
|
||||
<circle fill="#ef454aba" cx="401.5" cy="166" r="13"/>
|
||||
<circle fill="#ef454aba" cx="379" cy="141.5" r="10.5"/>
|
||||
<circle fill="#ef454a91" cx="327" cy="397.5" r="10.5"/>
|
||||
<circle fill="#ef454aba" cx="296" cy="392.5" r="10.5"/>
|
||||
</g>
|
||||
<g transform="translate(0,512) scale(0.1,-0.1)" fill="#000000" class="icon_syui">
|
||||
|
||||
<path class="syui" d="M3660 4460 c-11 -11 -33 -47 -48 -80 l-29 -60 -12 38 c-27 88 -58 92 -98 11 -35 -70 -73 -159 -73 -169 0 -6 -5 -10 -10 -10 -6 0 -15 -10 -21 -22 -33 -73 -52 -92 -47 -48 2 26 -1 35 -14 38 -16 3 -168 -121 -168 -138 0 -5 -13 -16 -28 -24 -24 -13 -35 -12 -87 0 -221 55 -231 56 -480 56 -219 1 -247 -1 -320 -22 -44 -12 -96 -26 -115 -30 -57 -13 -122 -39 -200 -82 -8 -4 -31 -14 -50 -23 -41 -17 -34 -13 -146 -90 -87 -59 -292 -252 -351 -330 -63 -83 -143 -209 -143 -225 0 -10 -7 -23 -15 -30 -8 -7 -15 -17 -15 -22 0 -5 -13 -37 -28 -71 -16 -34 -36 -93 -45 -132 -9 -38 -24 -104 -34 -145 -13 -60 -17 -121 -17 -300 1 -224 1 -225 36 -365 24 -94 53 -175 87 -247 28 -58 51 -108 51 -112 0 -3 13 -24 28 -48 42 -63 46 -79 22 -85 -11 -3 -20 -9 -20 -14 0 -5 -4 -9 -10 -9 -5 0 -22 -11 -37 -25 -16 -13 -75 -59 -133 -100 -58 -42 -113 -82 -123 -90 -9 -8 -22 -15 -27 -15 -6 0 -10 -6 -10 -13 0 -8 -11 -20 -25 -27 -34 -18 -34 -54 0 -48 14 3 25 2 25 -1 0 -3 -43 -31 -95 -61 -52 -30 -95 -58 -95 -62 0 -5 -5 -8 -11 -8 -19 0 -84 -33 -92 -47 -4 -7 -15 -13 -22 -13 -14 0 -17 -4 -19 -32 -1 -8 15 -15 37 -18 l38 -5 -47 -48 c-56 -59 -54 -81 9 -75 30 3 45 0 54 -11 9 -13 16 -14 43 -4 29 11 30 10 18 -5 -7 -9 -19 -23 -25 -30 -7 -7 -13 -20 -13 -29 0 -12 8 -14 38 -9 20 4 57 8 82 9 25 2 54 8 66 15 18 10 23 8 32 -13 17 -38 86 -35 152 6 27 17 50 34 50 38 0 16 62 30 85 19 33 -15 72 -2 89 30 8 15 31 43 51 62 35 34 38 35 118 35 77 0 85 2 126 33 24 17 52 32 61 32 9 0 42 18 73 40 30 22 61 40 69 40 21 0 88 -26 100 -38 7 -7 17 -12 24 -12 7 0 35 -11 62 -25 66 -33 263 -84 387 -101 189 -25 372 -12 574 41 106 27 130 37 261 97 41 20 80 37 85 39 6 2 51 31 100 64 166 111 405 372 489 534 10 20 22 43 27 51 5 8 12 22 15 30 3 8 17 40 31 70 54 115 95 313 108 520 13 200 -43 480 -134 672 -28 58 -51 108 -51 112 0 3 -13 24 -29 48 -15 24 -34 60 -40 80 -19 57 3 142 50 193 10 11 22 49 28 85 6 36 16 67 21 68 18 6 31 53 25 83 -4 18 -17 33 -36 41 -16 7 -29 15 -29 18 1 10 38 50 47 50 5 0 20 11 33 25 18 19 22 31 17 61 -3 20 -14 45 -23 55 -16 18 -16 20 6 44 15 16 21 32 18 49 -3 15 1 34 8 43 32 43 7 73 -46 55 l-30 -11 0 85 c0 74 -2 84 -18 84 -21 0 -53 -33 -103 -104 l-34 -48 -5 74 c-7 102 -35 133 -80 88z m-870 -740 c36 -7 75 -14 88 -16 21 -4 23 -9 16 -37 -3 -18 -14 -43 -24 -57 -10 -14 -20 -35 -24 -46 -4 -12 -16 -32 -27 -45 -12 -13 -37 -49 -56 -79 -20 -30 -52 -73 -72 -96 -53 -60 -114 -133 -156 -189 -21 -27 -44 -54 -52 -58 -7 -4 -13 -14 -13 -22 0 -7 -18 -33 -40 -57 -22 -23 -40 -46 -40 -50 0 -5 -19 -21 -42 -38 -47 -35 -85 -38 -188 -15 -115 25 -173 20 -264 -23 -45 -22 -106 -46 -136 -56 -48 -15 -77 -25 -140 -50 -70 -28 -100 -77 -51 -84 14 -2 34 -10 45 -17 12 -7 53 -16 91 -20 90 -9 131 -22 178 -57 20 -16 52 -35 70 -43 18 -7 40 -22 49 -32 16 -18 15 -22 -24 -88 -23 -39 -47 -74 -53 -80 -7 -5 -23 -26 -36 -45 -26 -39 -92 -113 -207 -232 -4 -4 -37 -36 -73 -71 l-66 -64 -20 41 c-58 119 -105 240 -115 301 -40 244 -35 409 20 595 8 30 21 66 28 80 7 14 24 54 38 89 15 35 35 75 46 89 11 13 20 31 20 38 0 8 3 14 8 14 4 0 16 16 27 36 24 45 221 245 278 281 23 15 44 30 47 33 20 20 138 78 250 123 61 24 167 50 250 61 60 7 302 -1 370 -14z m837 -661 c52 -101 102 -279 106 -379 2 -42 0 -45 -28 -51 -16 -4 -101 -7 -187 -8 -166 -1 -229 10 -271 49 -19 19 -19 19 14 49 22 21 44 31 65 31 41 0 84 34 84 66 0 30 12 55 56 112 19 25 37 65 44 95 11 51 53 111 74 104 6 -2 25 -32 43 -68z m-662 -810 c17 -10 40 -24 53 -30 12 -7 22 -16 22 -20 0 -4 17 -13 38 -19 20 -7 44 -18 52 -24 8 -7 33 -21 55 -31 22 -11 42 -23 45 -26 11 -14 109 -49 164 -58 62 -11 101 -7 126 14 15 14 38 18 78 16 39 -2 26 -41 -49 -146 -78 -109 -85 -118 -186 -219 -61 -61 -239 -189 -281 -203 -17 -5 -73 -29 -104 -44 -187 -92 -605 -103 -791 -21 -42 19 -47 24 -37 41 5 11 28 32 51 48 22 15 51 38 64 51 13 12 28 22 33 22 17 0 242 233 242 250 0 6 5 10 10 10 6 0 10 6 10 14 0 25 50 55 100 62 59 8 56 6 115 83 50 66 74 117 75 162 0 14 7 40 16 57 18 38 52 41 99 11z"/>
|
||||
</g>
|
||||
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.8 KiB |
96
my-blog/templates/base.html
Normal file
96
my-blog/templates/base.html
Normal file
@@ -0,0 +1,96 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="{{ config.language }}">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{% block title %}{{ config.title }}{% endblock %}</title>
|
||||
|
||||
<!-- Favicon -->
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
|
||||
|
||||
<!-- Stylesheets -->
|
||||
<link rel="stylesheet" href="/css/style.css">
|
||||
<link rel="stylesheet" href="/css/svg-animation-package.css">
|
||||
<link rel="stylesheet" href="/pkg/icomoon/style.css">
|
||||
<link rel="stylesheet" href="/pkg/font-awesome/css/all.min.css">
|
||||
|
||||
{% include "oauth-assets.html" %}
|
||||
{% block head %}{% endblock %}
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<header class="main-header">
|
||||
<div class="header-content">
|
||||
<h1><a href="/" class="site-title">{{ config.title }}</a></h1>
|
||||
<div class="logo">
|
||||
<a href="/">
|
||||
<svg width="77pt" height="77pt" viewBox="0 0 512 512" class="likeButton">
|
||||
<circle class="explosion" r="150" cx="250" cy="250"></circle>
|
||||
<g class="particleLayer">
|
||||
<circle fill="#8CE8C3" cx="130" cy="126.5" r="12.5"></circle>
|
||||
<circle fill="#8CE8C3" cx="411" cy="313.5" r="12.5"></circle>
|
||||
<circle fill="#91D2FA" cx="279" cy="86.5" r="12.5"></circle>
|
||||
<circle fill="#91D2FA" cx="155" cy="390.5" r="12.5"></circle>
|
||||
<circle fill="#CC8EF5" cx="89" cy="292.5" r="10.5"></circle>
|
||||
<circle fill="#9BDFBA" cx="414" cy="282.5" r="10.5"></circle>
|
||||
<circle fill="#9BDFBA" cx="115" cy="149.5" r="10.5"></circle>
|
||||
<circle fill="#9FC7FA" cx="250" cy="80.5" r="10.5"></circle>
|
||||
<circle fill="#9FC7FA" cx="78" cy="261.5" r="10.5"></circle>
|
||||
<circle fill="#96D8E9" cx="182" cy="402.5" r="10.5"></circle>
|
||||
<circle fill="#CC8EF5" cx="401.5" cy="166" r="13"></circle>
|
||||
<circle fill="#DB92D0" cx="379" cy="141.5" r="10.5"></circle>
|
||||
<circle fill="#DB92D0" cx="327" cy="397.5" r="10.5"></circle>
|
||||
<circle fill="#DD99B8" cx="296" cy="392.5" r="10.5"></circle>
|
||||
</g>
|
||||
<g transform="translate(0,512) scale(0.1,-0.1)" fill="#000000" class="icon_syui">
|
||||
<path class="syui" d="M3660 4460 c-11 -11 -33 -47 -48 -80 l-29 -60 -12 38 c-27 88 -58 92 -98 11 -35 -70 -73 -159 -73 -169 0 -6 -5 -10 -10 -10 -6 0 -15 -10 -21 -22 -33 -73 -52 -92 -47 -48 2 26 -1 35 -14 38 -16 3 -168 -121 -168 -138 0 -5 -13 -16 -28 -24 -24 -13 -35 -12 -87 0 -221 55 -231 56 -480 56 -219 1 -247 -1 -320 -22 -44 -12 -96 -26 -115 -30 -57 -13 -122 -39 -200 -82 -8 -4 -31 -14 -50 -23 -41 -17 -34 -13 -146 -90 -87 -59 -292 -252 -351 -330 -63 -83 -143 -209 -143 -225 0 -10 -7 -23 -15 -30 -8 -7 -15 -17 -15 -22 0 -5 -13 -37 -28 -71 -16 -34 -36 -93 -45 -132 -9 -38 -24 -104 -34 -145 -13 -60 -17 -121 -17 -300 1 -224 1 -225 36 -365 24 -94 53 -175 87 -247 28 -58 51 -108 51 -112 0 -3 13 -24 28 -48 42 -63 46 -79 22 -85 -11 -3 -20 -9 -20 -14 0 -5 -4 -9 -10 -9 -5 0 -22 -11 -37 -25 -16 -13 -75 -59 -133 -100 -58 -42 -113 -82 -123 -90 -9 -8 -22 -15 -27 -15 -6 0 -10 -6 -10 -13 0 -8 -11 -20 -25 -27 -34 -18 -34 -54 0 -48 14 3 25 2 25 -1 0 -3 -43 -31 -95 -61 -52 -30 -95 -58 -95 -62 0 -5 -5 -8 -11 -8 -19 0 -84 -33 -92 -47 -4 -7 -15 -13 -22 -13 -14 0 -17 -4 -19 -32 -1 -8 15 -15 37 -18 l38 -5 -47 -48 c-56 -59 -54 -81 9 -75 30 3 45 0 54 -11 9 -13 16 -14 43 -4 29 11 30 10 18 -5 -7 -9 -19 -23 -25 -30 -7 -7 -13 -20 -13 -29 0 -12 8 -14 38 -9 20 4 57 8 82 9 25 2 54 8 66 15 18 10 23 8 32 -13 17 -38 86 -35 152 6 27 17 50 34 50 38 0 16 62 30 85 19 33 -15 72 -2 89 30 8 15 31 43 51 62 35 34 38 35 118 35 77 0 85 2 126 33 24 17 52 32 61 32 9 0 42 18 73 40 30 22 61 40 69 40 21 0 88 -26 100 -38 7 -7 17 -12 24 -12 7 0 35 -11 62 -25 66 -33 263 -84 387 -101 189 -25 372 -12 574 41 106 27 130 37 261 97 41 20 80 37 85 39 6 2 51 31 100 64 166 111 405 372 489 534 10 20 22 43 27 51 5 8 12 22 15 30 3 8 17 40 31 70 54 115 95 313 108 520 13 200 -43 480 -134 672 -28 58 -51 108 -51 112 0 3 -13 24 -29 48 -15 24 -34 60 -40 80 -19 57 3 142 50 193 10 11 22 49 28 85 6 36 16 67 21 68 18 6 31 53 25 83 -4 18 -17 33 -36 41 -16 7 -29 15 -29 18 1 10 38 50 47 50 5 0 20 11 33 25 18 19 22 31 17 61 -3 20 -14 45 -23 55 -16 18 -16 20 6 44 15 16 21 32 18 49 -3 15 1 34 8 43 32 43 7 73 -46 55 l-30 -11 0 85 c0 74 -2 84 -18 84 -21 0 -53 -33 -103 -104 l-34 -48 -5 74 c-7 102 -35 133 -80 88z m-870 -740 c36 -7 75 -14 88 -16 21 -4 23 -9 16 -37 -3 -18 -14 -43 -24 -57 -10 -14 -20 -35 -24 -46 -4 -12 -16 -32 -27 -45 -12 -13 -37 -49 -56 -79 -20 -30 -52 -73 -72 -96 -53 -60 -114 -133 -156 -189 -21 -27 -44 -54 -52 -58 -7 -4 -13 -14 -13 -22 0 -7 -18 -33 -40 -57 -22 -23 -40 -46 -40 -50 0 -5 -19 -21 -42 -38 -47 -35 -85 -38 -188 -15 -115 25 -173 20 -264 -23 -45 -22 -106 -46 -136 -56 -48 -15 -77 -25 -140 -50 -70 -28 -100 -77 -51 -84 14 -2 34 -10 45 -17 12 -7 53 -16 91 -20 90 -9 131 -22 178 -57 20 -16 52 -35 70 -43 18 -7 40 -22 49 -32 16 -18 15 -22 -24 -88 -23 -39 -47 -74 -53 -80 -7 -5 -23 -26 -36 -45 -26 -39 -92 -113 -207 -232 -4 -4 -37 -36 -73 -71 l-66 -64 -20 41 c-58 119 -105 240 -115 301 -40 244 -35 409 20 595 8 30 21 66 28 80 7 14 24 54 38 89 15 35 35 75 46 89 11 13 20 31 20 38 0 8 3 14 8 14 4 0 16 16 27 36 24 45 221 245 278 281 23 15 44 30 47 33 20 20 138 78 250 123 61 24 167 50 250 61 60 7 302 -1 370 -14z m837 -661 c52 -101 102 -279 106 -379 2 -42 0 -45 -28 -51 -16 -4 -101 -7 -187 -8 -166 -1 -229 10 -271 49 -19 19 -19 19 14 49 22 21 44 31 65 31 41 0 84 34 84 66 0 30 12 55 56 112 19 25 37 65 44 95 11 51 53 111 74 104 6 -2 25 -32 43 -68z m-662 -810 c17 -10 40 -24 53 -30 12 -7 22 -16 22 -20 0 -4 17 -13 38 -19 20 -7 44 -18 52 -24 8 -7 33 -21 55 -31 22 -11 42 -23 45 -26 11 -14 109 -49 164 -58 62 -11 101 -7 126 14 15 14 38 18 78 16 39 -2 26 -41 -49 -146 -78 -109 -85 -118 -186 -219 -61 -61 -239 -189 -281 -203 -17 -5 -73 -29 -104 -44 -187 -92 -605 -103 -791 -21 -42 19 -47 24 -37 41 5 11 28 32 51 48 22 15 51 38 64 51 13 12 28 22 33 22 17 0 242 233 242 250 0 6 5 10 10 10 6 0 10 6 10 14 0 25 50 55 100 62 59 8 56 6 115 83 50 66 74 117 75 162 0 14 7 40 16 57 18 38 52 41 99 11z"></path>
|
||||
</g>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
<div class="header-actions">
|
||||
<button class="ask-ai-btn" onclick="AskAI.toggle()" id="askAiButton">
|
||||
<span class="ai-icon icon-ai"></span>
|
||||
ai
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Ask AI Panel -->
|
||||
<div class="ask-ai-panel" id="askAiPanel" style="display: none;">
|
||||
<div class="ask-ai-content">
|
||||
<div id="authCheck" class="auth-check">
|
||||
<p>🔒 Please login with ATProto to use Ask AI feature</p>
|
||||
</div>
|
||||
|
||||
<div id="chatForm" class="ask-ai-form" style="display: none;">
|
||||
<input type="text" id="aiQuestion" placeholder="What would you like to know?" />
|
||||
<button onclick="AskAI.ask()" id="askButton">Ask</button>
|
||||
</div>
|
||||
|
||||
<div id="chatHistory" class="chat-history" style="display: none;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<main class="main-content">
|
||||
{% block content %}{% endblock %}
|
||||
</main>
|
||||
|
||||
{% block sidebar %}{% endblock %}
|
||||
</div>
|
||||
|
||||
<footer class="main-footer">
|
||||
<div class="footer-social">
|
||||
<a href="https://web.syu.is/@syui" target="_blank"><i class="fab fa-bluesky"></i></a>
|
||||
<a href="https://git.syui.ai/ai" target="_blank"><span class="icon-ai"></span></a>
|
||||
<a href="https://git.syui.ai/syui" target="_blank"><span class="icon-git"></span></a>
|
||||
</div>
|
||||
<p>© {{ config.author }}</p>
|
||||
</footer>
|
||||
|
||||
<script src="/js/ask-ai.js"></script>
|
||||
<script src="/js/theme.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
52
my-blog/templates/index.html
Normal file
52
my-blog/templates/index.html
Normal file
@@ -0,0 +1,52 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block content %}
|
||||
<div class="timeline-container">
|
||||
|
||||
<div class="timeline-feed">
|
||||
{% for post in posts %}
|
||||
<article class="timeline-post">
|
||||
<div class="post-header">
|
||||
<div class="post-meta">
|
||||
<time class="post-date">{{ post.date }}</time>
|
||||
{% if post.language %}
|
||||
<span class="post-lang">{{ post.language }}</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="post-content">
|
||||
<h3 class="post-title">
|
||||
<a href="{{ post.url }}">{{ post.title }}</a>
|
||||
</h3>
|
||||
|
||||
{% if post.excerpt %}
|
||||
<p class="post-excerpt">{{ post.excerpt }}</p>
|
||||
{% endif %}
|
||||
|
||||
<div class="post-actions">
|
||||
<a href="{{ post.url }}" class="read-more">Read more</a>
|
||||
{% if post.markdown_url %}
|
||||
<a href="{{ post.markdown_url }}" class="view-markdown" title="View Markdown">.md</a>
|
||||
{% endif %}
|
||||
{% if post.translation_url %}
|
||||
<a href="{{ post.translation_url }}" class="view-translation" title="View Translation">🌐</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<!-- OAuth Comment System -->
|
||||
<section class="comment-section">
|
||||
<div id="comment-atproto"></div>
|
||||
</section>
|
||||
|
||||
{% if posts|length == 0 %}
|
||||
<div class="empty-state">
|
||||
<p>No posts yet. Start writing!</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
3
my-blog/templates/oauth-assets.html
Normal file
3
my-blog/templates/oauth-assets.html
Normal file
@@ -0,0 +1,3 @@
|
||||
<!-- OAuth Comment System - Load globally for session management -->
|
||||
<script type="module" crossorigin src="/assets/comment-atproto-Do1JWJCw.js"></script>
|
||||
<link rel="stylesheet" crossorigin href="/assets/comment-atproto-CPKYAM8U.css">
|
||||
71
my-blog/templates/partials/oauth-widget.html
Normal file
71
my-blog/templates/partials/oauth-widget.html
Normal file
@@ -0,0 +1,71 @@
|
||||
<!-- OAuth authentication widget for ailog -->
|
||||
<div id="oauth-widget">
|
||||
<div id="status" class="status">
|
||||
Login with your Bluesky account
|
||||
</div>
|
||||
|
||||
<!-- Login form -->
|
||||
<div id="login-form">
|
||||
<input type="text" id="handle-input" placeholder="Enter your handle (e.g., user.bsky.social)" style="width: 300px; padding: 10px; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;">
|
||||
<br>
|
||||
<button id="login-btn">🦋 Login with Bluesky</button>
|
||||
</div>
|
||||
|
||||
<!-- Authenticated state -->
|
||||
<div id="authenticated-state" style="display: none;">
|
||||
<div id="user-info"></div>
|
||||
<button id="logout-btn">Logout</button>
|
||||
<button id="test-profile-btn">Get Profile</button>
|
||||
</div>
|
||||
|
||||
<div id="console-log" class="log"></div>
|
||||
</div>
|
||||
|
||||
<script src="/oauth-widget-simple.js"></script>
|
||||
|
||||
<style>
|
||||
.status {
|
||||
margin: 20px 0;
|
||||
padding: 15px;
|
||||
border-radius: 8px;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
.user-info {
|
||||
background: #e8f5e8;
|
||||
border: 1px solid #4caf50;
|
||||
}
|
||||
.error {
|
||||
background: #ffeaea;
|
||||
border: 1px solid #f44336;
|
||||
color: #d32f2f;
|
||||
}
|
||||
#oauth-widget button {
|
||||
background: #1185fe;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 12px 24px;
|
||||
border-radius: 6px;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
margin: 10px;
|
||||
}
|
||||
#oauth-widget button:hover {
|
||||
background: #0d6efd;
|
||||
}
|
||||
#oauth-widget button:disabled {
|
||||
background: #6c757d;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.log {
|
||||
text-align: left;
|
||||
background: #f8f9fa;
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 6px;
|
||||
padding: 15px;
|
||||
margin: 20px 0;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
font-family: monospace;
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
373
my-blog/templates/post-complex.html
Normal file
373
my-blog/templates/post-complex.html
Normal file
@@ -0,0 +1,373 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}{{ post.title }} - {{ config.title }}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="article-container">
|
||||
<article class="article-content">
|
||||
<header class="article-header">
|
||||
<h1 class="article-title">{{ post.title }}</h1>
|
||||
<div class="article-meta">
|
||||
<time class="article-date">{{ post.date }}</time>
|
||||
{% if post.language %}
|
||||
<span class="article-lang">{{ post.language }}</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="article-actions">
|
||||
{% if post.markdown_url %}
|
||||
<a href="{{ post.markdown_url }}" class="action-btn markdown-btn" title="View Markdown">
|
||||
.md
|
||||
</a>
|
||||
{% endif %}
|
||||
{% if post.translation_url %}
|
||||
<a href="{{ post.translation_url }}" class="action-btn translation-btn" title="View Translation">
|
||||
🌐 {% if post.language == 'ja' %}English{% else %}日本語{% endif %}
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="article-body">
|
||||
{{ post.content | safe }}
|
||||
</div>
|
||||
|
||||
<!-- Comment Section -->
|
||||
<section class="comment-section">
|
||||
<div class="comment-container">
|
||||
<h3>Comments</h3>
|
||||
|
||||
<!-- ATProto Auth Widget Container -->
|
||||
<div id="atproto-auth-widget" class="comment-auth"></div>
|
||||
|
||||
<div id="commentForm" class="comment-form" style="display: none;">
|
||||
<textarea id="commentText" placeholder="Share your thoughts..." rows="4"></textarea>
|
||||
<button onclick="submitComment()" class="submit-btn">Post Comment</button>
|
||||
</div>
|
||||
|
||||
<div id="commentsList" class="comments-list">
|
||||
<!-- Comments will be loaded here -->
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
|
||||
<aside class="article-sidebar">
|
||||
<nav class="toc">
|
||||
<h3>Contents</h3>
|
||||
<div id="toc-content">
|
||||
<!-- TOC will be generated by JavaScript -->
|
||||
</div>
|
||||
</nav>
|
||||
</aside>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block sidebar %}
|
||||
<!-- Include ATProto Libraries via script tags (more reliable than dynamic imports) -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/@atproto/oauth-client-browser@latest/dist/index.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@atproto/api@latest/dist/index.js"></script>
|
||||
|
||||
<!-- Fallback: Try multiple CDNs -->
|
||||
<script>
|
||||
console.log('Checking ATProto library availability...');
|
||||
|
||||
// Check if libraries loaded successfully
|
||||
if (typeof ATProto === 'undefined' && typeof window.ATProto === 'undefined') {
|
||||
console.log('Primary CDN failed, trying fallback...');
|
||||
|
||||
// Create fallback script elements
|
||||
const fallbackScripts = [
|
||||
'https://unpkg.com/@atproto/oauth-client-browser@latest/dist/index.js',
|
||||
'https://esm.sh/@atproto/oauth-client-browser',
|
||||
'https://cdn.skypack.dev/@atproto/oauth-client-browser'
|
||||
];
|
||||
|
||||
// Load fallback scripts sequentially
|
||||
let scriptIndex = 0;
|
||||
function loadNextScript() {
|
||||
if (scriptIndex < fallbackScripts.length) {
|
||||
const script = document.createElement('script');
|
||||
script.src = fallbackScripts[scriptIndex];
|
||||
script.onload = () => {
|
||||
console.log(`Loaded from fallback CDN: ${fallbackScripts[scriptIndex]}`);
|
||||
window.atprotoLibrariesReady = true;
|
||||
};
|
||||
script.onerror = () => {
|
||||
console.log(`Failed to load from: ${fallbackScripts[scriptIndex]}`);
|
||||
scriptIndex++;
|
||||
loadNextScript();
|
||||
};
|
||||
document.head.appendChild(script);
|
||||
} else {
|
||||
console.error('All CDN fallbacks failed');
|
||||
window.atprotoLibrariesReady = false;
|
||||
}
|
||||
}
|
||||
|
||||
loadNextScript();
|
||||
} else {
|
||||
console.log('✅ ATProto libraries loaded from primary CDN');
|
||||
window.atprotoLibrariesReady = true;
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Simple ATProto Widget (no external dependency) -->
|
||||
<link rel="stylesheet" href="/atproto-auth-widget/dist/atproto-auth.min.css">
|
||||
|
||||
<script>
|
||||
// Initialize auth widget
|
||||
let authWidget = null;
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
generateTableOfContents();
|
||||
initializeAuthWidget();
|
||||
loadComments();
|
||||
});
|
||||
|
||||
function generateTableOfContents() {
|
||||
const tocContainer = document.getElementById('toc-content');
|
||||
const headings = document.querySelectorAll('.article-body h1, .article-body h2, .article-body h3, .article-body h4, .article-body h5, .article-body h6');
|
||||
|
||||
if (headings.length === 0) {
|
||||
tocContainer.innerHTML = '<p class="no-toc">No headings found</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
const tocList = document.createElement('ul');
|
||||
tocList.className = 'toc-list';
|
||||
|
||||
headings.forEach((heading, index) => {
|
||||
const id = `heading-${index}`;
|
||||
heading.id = id;
|
||||
|
||||
const listItem = document.createElement('li');
|
||||
listItem.className = `toc-item toc-${heading.tagName.toLowerCase()}`;
|
||||
|
||||
const link = document.createElement('a');
|
||||
link.href = `#${id}`;
|
||||
link.textContent = heading.textContent;
|
||||
link.className = 'toc-link';
|
||||
|
||||
// Smooth scroll behavior
|
||||
link.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
heading.scrollIntoView({ behavior: 'smooth' });
|
||||
});
|
||||
|
||||
listItem.appendChild(link);
|
||||
tocList.appendChild(listItem);
|
||||
});
|
||||
|
||||
tocContainer.appendChild(tocList);
|
||||
}
|
||||
|
||||
// Initialize ATProto Auth Widget
|
||||
async function initializeAuthWidget() {
|
||||
try {
|
||||
// Check WebCrypto API availability
|
||||
console.log('WebCrypto check:', {
|
||||
available: !!window.crypto && !!window.crypto.subtle,
|
||||
secureContext: window.isSecureContext,
|
||||
protocol: window.location.protocol,
|
||||
hostname: window.location.hostname
|
||||
});
|
||||
|
||||
if (!window.crypto || !window.crypto.subtle) {
|
||||
throw new Error('WebCrypto API is not available. This requires HTTPS or localhost.');
|
||||
}
|
||||
|
||||
if (!window.isSecureContext) {
|
||||
console.warn('Not in secure context - WebCrypto may not work properly');
|
||||
}
|
||||
|
||||
// Simplified approach: Show manual OAuth form
|
||||
console.log('Using simplified OAuth approach...');
|
||||
showSimpleOAuthForm();
|
||||
// Fallback to widget initialization
|
||||
authWidget = await window.initATProtoWidget('#atproto-auth-widget', {
|
||||
clientId: clientId,
|
||||
onLogin: (session) => {
|
||||
console.log('User logged in:', session.handle);
|
||||
document.getElementById('commentForm').style.display = 'block';
|
||||
},
|
||||
onLogout: () => {
|
||||
console.log('User logged out');
|
||||
document.getElementById('commentForm').style.display = 'none';
|
||||
},
|
||||
onError: (error) => {
|
||||
console.error('ATProto Auth Error:', error);
|
||||
// Show user-friendly error message
|
||||
const authContainer = document.getElementById('atproto-auth-widget');
|
||||
if (authContainer) {
|
||||
let errorMessage = 'Authentication service is temporarily unavailable.';
|
||||
let suggestion = 'Please try refreshing the page.';
|
||||
|
||||
if (error.message && error.message.includes('WebCrypto')) {
|
||||
errorMessage = 'This feature requires a secure HTTPS connection.';
|
||||
suggestion = 'Please ensure you are accessing via https://log.syui.ai';
|
||||
}
|
||||
|
||||
authContainer.innerHTML = `
|
||||
<div class="atproto-auth__fallback">
|
||||
<p>${errorMessage}</p>
|
||||
<p>${suggestion}</p>
|
||||
<details style="margin-top: 10px; font-size: 0.8em; color: #666;">
|
||||
<summary>Technical details</summary>
|
||||
<pre>${error.message || 'Unknown error'}</pre>
|
||||
</details>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
},
|
||||
theme: 'default'
|
||||
});
|
||||
} else if (typeof window.ATProtoAuthWidget === 'function') {
|
||||
// Fallback to direct widget initialization
|
||||
authWidget = new window.ATProtoAuthWidget({
|
||||
containerSelector: '#atproto-auth-widget',
|
||||
clientId: clientId,
|
||||
onLogin: (session) => {
|
||||
console.log('User logged in:', session.handle);
|
||||
document.getElementById('commentForm').style.display = 'block';
|
||||
},
|
||||
onLogout: () => {
|
||||
console.log('User logged out');
|
||||
document.getElementById('commentForm').style.display = 'none';
|
||||
},
|
||||
onError: (error) => {
|
||||
console.error('ATProto Auth Error:', error);
|
||||
const authContainer = document.getElementById('atproto-auth-widget');
|
||||
if (authContainer) {
|
||||
authContainer.innerHTML = `
|
||||
<div class="atproto-auth__fallback">
|
||||
<p>Authentication service is temporarily unavailable.</p>
|
||||
<p>Please try refreshing the page.</p>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
},
|
||||
theme: 'default'
|
||||
});
|
||||
await authWidget.init();
|
||||
} else {
|
||||
throw new Error('ATProto widget not available');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to initialize auth widget:', error);
|
||||
// Show fallback UI
|
||||
const authContainer = document.getElementById('atproto-auth-widget');
|
||||
if (authContainer) {
|
||||
authContainer.innerHTML = `
|
||||
<div class="atproto-auth__fallback">
|
||||
<p>Authentication widget failed to load.</p>
|
||||
<p>Please check your internet connection and refresh the page.</p>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function submitComment() {
|
||||
const commentText = document.getElementById('commentText').value.trim();
|
||||
if (!commentText || !authWidget.isLoggedIn()) {
|
||||
alert('Please login and enter a comment');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const postSlug = '{{ post.slug }}';
|
||||
const postUrl = window.location.href;
|
||||
const createdAt = new Date().toISOString();
|
||||
|
||||
// Create comment record using the auth widget
|
||||
const response = await authWidget.createRecord('ai.log.comment', {
|
||||
$type: 'ai.log.comment',
|
||||
text: commentText,
|
||||
post_slug: postSlug,
|
||||
post_url: postUrl,
|
||||
createdAt: createdAt
|
||||
});
|
||||
|
||||
console.log('Comment posted:', response);
|
||||
document.getElementById('commentText').value = '';
|
||||
loadComments();
|
||||
} catch (error) {
|
||||
console.error('Comment submission failed:', error);
|
||||
alert('Failed to post comment: ' + error.message);
|
||||
}
|
||||
}
|
||||
|
||||
function showAuthenticatedState(session) {
|
||||
const authContainer = document.getElementById('atproto-auth-widget');
|
||||
const agent = new window.ATProtoAgent(session);
|
||||
|
||||
authContainer.innerHTML = `
|
||||
<div class="atproto-auth__authenticated">
|
||||
<p>✅ Authenticated as: <strong>${session.did}</strong></p>
|
||||
<button id="logout-btn" class="atproto-auth__button">Logout</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
document.getElementById('logout-btn').onclick = async () => {
|
||||
await session.signOut();
|
||||
window.location.reload();
|
||||
};
|
||||
|
||||
// Show comment form
|
||||
document.getElementById('commentForm').style.display = 'block';
|
||||
window.currentSession = session;
|
||||
window.currentAgent = agent;
|
||||
}
|
||||
|
||||
function showLoginForm(oauthClient) {
|
||||
const authContainer = document.getElementById('atproto-auth-widget');
|
||||
|
||||
authContainer.innerHTML = `
|
||||
<div class="atproto-auth__login">
|
||||
<h4>Login with ATProto</h4>
|
||||
<input type="text" id="handle-input" placeholder="user.bsky.social" />
|
||||
<button id="login-btn" class="atproto-auth__button">Connect</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
document.getElementById('login-btn').onclick = async () => {
|
||||
const handle = document.getElementById('handle-input').value.trim();
|
||||
if (!handle) {
|
||||
alert('Please enter your handle');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const url = await oauthClient.authorize(handle);
|
||||
window.open(url, '_self', 'noopener');
|
||||
} catch (error) {
|
||||
console.error('OAuth authorization failed:', error);
|
||||
alert('Authentication failed: ' + error.message);
|
||||
}
|
||||
};
|
||||
|
||||
// Enter key support
|
||||
document.getElementById('handle-input').onkeypress = (e) => {
|
||||
if (e.key === 'Enter') {
|
||||
document.getElementById('login-btn').click();
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
async function loadComments() {
|
||||
try {
|
||||
const commentsList = document.getElementById('commentsList');
|
||||
commentsList.innerHTML = '<p class="loading">Loading comments from ATProto network...</p>';
|
||||
|
||||
// In a real implementation, you would query an aggregation service
|
||||
// For demo, show empty state
|
||||
setTimeout(() => {
|
||||
commentsList.innerHTML = '<p class="no-comments">Comments will appear here when posted via ATProto.</p>';
|
||||
}, 1000);
|
||||
} catch (error) {
|
||||
console.error('Failed to load comments:', error);
|
||||
document.getElementById('commentsList').innerHTML = '<p class="error">Failed to load comments</p>';
|
||||
}
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
196
my-blog/templates/post-simple.html
Normal file
196
my-blog/templates/post-simple.html
Normal file
@@ -0,0 +1,196 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}{{ post.title }} - {{ config.title }}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="article-container">
|
||||
<article class="article-content">
|
||||
<header class="article-header">
|
||||
<h1 class="article-title">{{ post.title }}</h1>
|
||||
<div class="article-meta">
|
||||
<time class="article-date">{{ post.date }}</time>
|
||||
{% if post.language %}
|
||||
<span class="article-lang">{{ post.language }}</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="article-actions">
|
||||
{% if post.markdown_url %}
|
||||
<a href="{{ post.markdown_url }}" class="action-btn markdown-btn" title="View Markdown">
|
||||
.md
|
||||
</a>
|
||||
{% endif %}
|
||||
{% if post.translation_url %}
|
||||
<a href="{{ post.translation_url }}" class="action-btn translation-btn" title="View Translation">
|
||||
🌐 {% if post.language == 'ja' %}English{% else %}日本語{% endif %}
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="article-body">
|
||||
{{ post.content | safe }}
|
||||
</div>
|
||||
|
||||
<!-- Simple Comment Section -->
|
||||
<section class="comment-section">
|
||||
<div class="comment-container">
|
||||
<h3>Comments</h3>
|
||||
|
||||
<!-- Simple OAuth Button -->
|
||||
<div class="simple-oauth">
|
||||
<p>📝 To comment, authenticate with Bluesky:</p>
|
||||
<button id="bluesky-auth" class="oauth-button">
|
||||
🦋 Login with Bluesky
|
||||
</button>
|
||||
<p class="oauth-note">
|
||||
<small>After authentication, you can post comments that will be stored in your ATProto PDS.</small>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="comments-list" class="comments-list">
|
||||
<p class="no-comments">Comments will appear here when posted via ATProto.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
|
||||
<aside class="article-sidebar">
|
||||
<nav class="toc">
|
||||
<h3>Contents</h3>
|
||||
<div id="toc-content">
|
||||
<!-- TOC will be generated by JavaScript -->
|
||||
</div>
|
||||
</nav>
|
||||
</aside>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block sidebar %}
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
generateTableOfContents();
|
||||
initializeSimpleAuth();
|
||||
});
|
||||
|
||||
function generateTableOfContents() {
|
||||
const tocContainer = document.getElementById('toc-content');
|
||||
const headings = document.querySelectorAll('.article-body h1, .article-body h2, .article-body h3, .article-body h4, .article-body h5, .article-body h6');
|
||||
|
||||
if (headings.length === 0) {
|
||||
tocContainer.innerHTML = '<p class="no-toc">No headings found</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
const tocList = document.createElement('ul');
|
||||
tocList.className = 'toc-list';
|
||||
|
||||
headings.forEach((heading, index) => {
|
||||
const id = `heading-${index}`;
|
||||
heading.id = id;
|
||||
|
||||
const listItem = document.createElement('li');
|
||||
listItem.className = `toc-item toc-${heading.tagName.toLowerCase()}`;
|
||||
|
||||
const link = document.createElement('a');
|
||||
link.href = `#${id}`;
|
||||
link.textContent = heading.textContent;
|
||||
link.className = 'toc-link';
|
||||
|
||||
link.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
heading.scrollIntoView({ behavior: 'smooth' });
|
||||
});
|
||||
|
||||
listItem.appendChild(link);
|
||||
tocList.appendChild(listItem);
|
||||
});
|
||||
|
||||
tocContainer.appendChild(tocList);
|
||||
}
|
||||
|
||||
function initializeSimpleAuth() {
|
||||
const authButton = document.getElementById('bluesky-auth');
|
||||
|
||||
authButton.addEventListener('click', function() {
|
||||
// Simple approach: Direct redirect to Bluesky OAuth
|
||||
const isProduction = window.location.hostname === 'log.syui.ai';
|
||||
const clientId = isProduction
|
||||
? 'https://log.syui.ai/client-metadata.json'
|
||||
: window.location.origin + '/client-metadata.json';
|
||||
|
||||
const authUrl = `https://bsky.social/oauth/authorize?` +
|
||||
`client_id=${encodeURIComponent(clientId)}&` +
|
||||
`redirect_uri=${encodeURIComponent(window.location.href)}&` +
|
||||
`response_type=code&` +
|
||||
`scope=atproto%20transition:generic&` +
|
||||
`state=demo-state`;
|
||||
|
||||
console.log('Redirecting to:', authUrl);
|
||||
|
||||
// Open in new tab for now (safer for testing)
|
||||
window.open(authUrl, '_blank');
|
||||
|
||||
// Show status message
|
||||
authButton.innerHTML = '✅ Check the new tab for authentication';
|
||||
authButton.disabled = true;
|
||||
});
|
||||
|
||||
// Check if we're returning from OAuth
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
if (urlParams.has('code')) {
|
||||
console.log('OAuth callback detected:', urlParams.get('code'));
|
||||
document.querySelector('.simple-oauth').innerHTML = `
|
||||
<div class="oauth-success">
|
||||
✅ OAuth callback received!<br>
|
||||
<small>Code: ${urlParams.get('code')}</small><br>
|
||||
<small>In a full implementation, this would exchange the code for tokens.</small>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.simple-oauth {
|
||||
background: #f8f9fa;
|
||||
border: 1px solid #e9ecef;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
margin: 20px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.oauth-button {
|
||||
background: #1185fe;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 12px 24px;
|
||||
border-radius: 6px;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.oauth-button:hover {
|
||||
background: #0d6efd;
|
||||
}
|
||||
|
||||
.oauth-button:disabled {
|
||||
background: #6c757d;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.oauth-note {
|
||||
color: #6c757d;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.oauth-success {
|
||||
background: #d1edff;
|
||||
border: 1px solid #b6d7ff;
|
||||
border-radius: 4px;
|
||||
padding: 15px;
|
||||
color: #0c5460;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
93
my-blog/templates/post.html
Normal file
93
my-blog/templates/post.html
Normal file
@@ -0,0 +1,93 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}{{ post.title }} - {{ config.title }}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="article-container">
|
||||
<article class="article-content">
|
||||
<header class="article-header">
|
||||
<h1 class="article-title">{{ post.title }}</h1>
|
||||
<div class="article-meta">
|
||||
<time class="article-date">{{ post.date }}</time>
|
||||
{% if post.language %}
|
||||
<span class="article-lang">{{ post.language }}</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="article-actions">
|
||||
{% if post.markdown_url %}
|
||||
<a href="{{ post.markdown_url }}" class="action-btn markdown-btn" title="View Markdown">
|
||||
.md
|
||||
</a>
|
||||
{% endif %}
|
||||
{% if post.translation_url %}
|
||||
<a href="{{ post.translation_url }}" class="action-btn translation-btn" title="View Translation">
|
||||
🌐 {% if post.language == 'ja' %}English{% else %}日本語{% endif %}
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="article-body">
|
||||
{{ post.content | safe }}
|
||||
</div>
|
||||
|
||||
<div id="comment-atproto"></div>
|
||||
</article>
|
||||
|
||||
<aside class="article-sidebar">
|
||||
<nav class="toc">
|
||||
<h3>Contents</h3>
|
||||
<div id="toc-content">
|
||||
<!-- TOC will be generated by JavaScript -->
|
||||
</div>
|
||||
</nav>
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Generate table of contents
|
||||
function generateTableOfContents() {
|
||||
const tocContainer = document.getElementById('toc-content');
|
||||
const headings = document.querySelectorAll('.article-body h1, .article-body h2, .article-body h3, .article-body h4, .article-body h5, .article-body h6');
|
||||
|
||||
if (headings.length === 0) {
|
||||
tocContainer.innerHTML = '<p class="no-toc">No headings found</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
const tocList = document.createElement('ul');
|
||||
tocList.className = 'toc-list';
|
||||
|
||||
headings.forEach((heading, index) => {
|
||||
const id = `heading-${index}`;
|
||||
heading.id = id;
|
||||
|
||||
const listItem = document.createElement('li');
|
||||
listItem.className = `toc-item toc-${heading.tagName.toLowerCase()}`;
|
||||
|
||||
const link = document.createElement('a');
|
||||
link.href = `#${id}`;
|
||||
link.textContent = heading.textContent;
|
||||
link.className = 'toc-link';
|
||||
|
||||
link.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
heading.scrollIntoView({ behavior: 'smooth' });
|
||||
});
|
||||
|
||||
listItem.appendChild(link);
|
||||
tocList.appendChild(listItem);
|
||||
});
|
||||
|
||||
tocContainer.appendChild(tocList);
|
||||
}
|
||||
|
||||
// Initialize on page load
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
generateTableOfContents();
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
{% block sidebar %}
|
||||
{% endblock %}
|
||||
27
oauth/.env.production
Normal file
27
oauth/.env.production
Normal file
@@ -0,0 +1,27 @@
|
||||
# Production environment variables
|
||||
VITE_APP_HOST=https://syui.ai
|
||||
VITE_OAUTH_CLIENT_ID=https://syui.ai/client-metadata.json
|
||||
VITE_OAUTH_REDIRECT_URI=https://syui.ai/oauth/callback
|
||||
VITE_ADMIN_DID=did:plc:uqzpqmrjnptsxezjx4xuh2mn
|
||||
|
||||
# Collection names for OAuth app
|
||||
VITE_COLLECTION_COMMENT=ai.syui.log
|
||||
VITE_COLLECTION_USER=ai.syui.log.user
|
||||
VITE_COLLECTION_CHAT=ai.syui.log.chat
|
||||
|
||||
# Collection names for ailog (backward compatibility)
|
||||
AILOG_COLLECTION_COMMENT=ai.syui.log
|
||||
AILOG_COLLECTION_USER=ai.syui.log.user
|
||||
AILOG_COLLECTION_CHAT=ai.syui.log.chat
|
||||
|
||||
# AI Configuration
|
||||
VITE_AI_ENABLED=true
|
||||
VITE_AI_ASK_AI=true
|
||||
VITE_AI_PROVIDER=ollama
|
||||
VITE_AI_MODEL=gemma3:2b
|
||||
VITE_AI_HOST=https://ollama.syui.ai
|
||||
VITE_AI_SYSTEM_PROMPT="you are a helpful ai assistant trained on this blog's content. you can answer questions about the articles, provide insights, and help users understand the topics discussed."
|
||||
VITE_AI_DID=did:plc:4hqjfn7m6n5hno3doamuhgef
|
||||
|
||||
# API Configuration
|
||||
VITE_BSKY_PUBLIC_API=https://public.api.bsky.app
|
||||
14
oauth/public/.well-known/jwks.json
Normal file
14
oauth/public/.well-known/jwks.json
Normal file
@@ -0,0 +1,14 @@
|
||||
{
|
||||
"keys": [
|
||||
{
|
||||
"kty": "EC",
|
||||
"crv": "P-256",
|
||||
"x": "mock_x_coordinate_base64url",
|
||||
"y": "mock_y_coordinate_base64url",
|
||||
"d": "mock_private_key_base64url",
|
||||
"use": "sig",
|
||||
"kid": "ai-card-oauth-key-1",
|
||||
"alg": "ES256"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -1,7 +1,16 @@
|
||||
/* Theme Colors */
|
||||
:root {
|
||||
--theme-color: #FF4500;
|
||||
--white: #fff;
|
||||
--light-gray: #aaa;
|
||||
--dark-gray: #666;
|
||||
--background: #fff;
|
||||
}
|
||||
|
||||
.app {
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);
|
||||
color: #333333;
|
||||
background: linear-gradient(180deg, #f8f9fa 0%, var(--background) 100%);
|
||||
color: var(--dark-gray);
|
||||
}
|
||||
|
||||
.app-header {
|
||||
@@ -41,15 +50,15 @@
|
||||
}
|
||||
|
||||
.nav-button.active {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
border: 1px solid #667eea;
|
||||
box-shadow: 0 4px 16px rgba(102, 126, 234, 0.4);
|
||||
background: var(--theme-color);
|
||||
color: var(--white);
|
||||
border: 1px solid var(--theme-color);
|
||||
box-shadow: 0 4px 16px rgba(255, 69, 0, 0.4);
|
||||
}
|
||||
|
||||
.nav-button.active:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5);
|
||||
box-shadow: 0 6px 20px rgba(255, 69, 0, 0.5);
|
||||
}
|
||||
|
||||
.app-header h1 {
|
||||
@@ -99,9 +108,9 @@
|
||||
}
|
||||
|
||||
.login-button {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
border: 1px solid #667eea;
|
||||
background: var(--theme-color);
|
||||
color: var(--white);
|
||||
border: 1px solid var(--theme-color);
|
||||
}
|
||||
|
||||
.backup-button {
|
||||
@@ -124,7 +133,7 @@
|
||||
|
||||
.login-button:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
|
||||
box-shadow: 0 4px 12px rgba(255, 69, 0, 0.4);
|
||||
}
|
||||
|
||||
.backup-button:hover {
|
||||
@@ -153,11 +162,17 @@
|
||||
}
|
||||
|
||||
.app-main {
|
||||
max-width: 1200px;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
padding: 40px 20px;
|
||||
}
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
.app .app-main {
|
||||
padding: 0px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.gacha-section {
|
||||
text-align: center;
|
||||
margin-bottom: 60px;
|
||||
@@ -255,7 +270,7 @@
|
||||
.comment-section {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
/* padding: 20px; - removed to avoid double padding */
|
||||
}
|
||||
|
||||
.auth-section {
|
||||
@@ -268,8 +283,8 @@
|
||||
}
|
||||
|
||||
.atproto-button {
|
||||
background: #1185fe;
|
||||
color: white;
|
||||
background: var(--theme-color);
|
||||
color: var(--white);
|
||||
border: none;
|
||||
padding: 12px 24px;
|
||||
border-radius: 6px;
|
||||
@@ -281,9 +296,9 @@
|
||||
}
|
||||
|
||||
.atproto-button:hover {
|
||||
background: #0d6efd;
|
||||
filter: brightness(1.1);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(17, 133, 254, 0.4);
|
||||
box-shadow: 0 4px 12px rgba(255, 69, 0, 0.4);
|
||||
}
|
||||
|
||||
.username-input-section {
|
||||
@@ -407,8 +422,8 @@
|
||||
}
|
||||
|
||||
.post-button {
|
||||
background: #28a745;
|
||||
color: white;
|
||||
background: var(--theme-color);
|
||||
color: var(--white);
|
||||
border: none;
|
||||
padding: 10px 20px;
|
||||
border-radius: 6px;
|
||||
@@ -419,9 +434,9 @@
|
||||
}
|
||||
|
||||
.post-button:hover:not(:disabled) {
|
||||
background: #218838;
|
||||
filter: brightness(1.1);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(40, 167, 69, 0.4);
|
||||
box-shadow: 0 4px 12px rgba(255, 69, 0, 0.4);
|
||||
}
|
||||
|
||||
.post-button:disabled {
|
||||
@@ -455,8 +470,8 @@
|
||||
}
|
||||
|
||||
.comments-toggle-button {
|
||||
background: #1185fe;
|
||||
color: white;
|
||||
background: var(--theme-color);
|
||||
color: var(--white);
|
||||
border: none;
|
||||
padding: 8px 16px;
|
||||
border-radius: 6px;
|
||||
@@ -467,9 +482,9 @@
|
||||
}
|
||||
|
||||
.comments-toggle-button:hover {
|
||||
background: #0d6efd;
|
||||
filter: brightness(1.1);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(17, 133, 254, 0.4);
|
||||
box-shadow: 0 4px 12px rgba(255, 69, 0, 0.4);
|
||||
}
|
||||
|
||||
.comment-item {
|
||||
@@ -524,10 +539,12 @@
|
||||
}
|
||||
|
||||
.delete-button {
|
||||
background: none;
|
||||
background: #dc3545;
|
||||
color: white;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
transition: all 0.3s ease;
|
||||
@@ -535,8 +552,8 @@
|
||||
}
|
||||
|
||||
.delete-button:hover {
|
||||
background: rgba(220, 53, 69, 0.1);
|
||||
transform: scale(1.1);
|
||||
background: #c82333;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.comment-content {
|
||||
@@ -712,8 +729,8 @@
|
||||
|
||||
/* JSON Display Styles */
|
||||
.json-button {
|
||||
background: #4caf50;
|
||||
color: white;
|
||||
background: var(--theme-color);
|
||||
color: var(--white);
|
||||
border: none;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
@@ -724,7 +741,7 @@
|
||||
}
|
||||
|
||||
.json-button:hover {
|
||||
background: #45a049;
|
||||
filter: brightness(1.1);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
@@ -757,4 +774,108 @@
|
||||
color: #333;
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* Tab Navigation */
|
||||
.tab-navigation {
|
||||
display: flex;
|
||||
border-bottom: 2px solid #e1e5e9;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.tab-button {
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 12px 20px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #656d76;
|
||||
border-bottom: 2px solid transparent;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.tab-button:hover {
|
||||
color: var(--theme-color);
|
||||
background: #f6f8fa;
|
||||
}
|
||||
|
||||
.tab-button.active {
|
||||
color: var(--theme-color);
|
||||
border-bottom-color: var(--theme-color);
|
||||
background: #f6f8fa;
|
||||
}
|
||||
|
||||
/* AI Chat History */
|
||||
.ai-chat-list {
|
||||
max-width: 100%;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.chat-item {
|
||||
border: 1px solid #d1d9e0;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
margin-bottom: 16px;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.chat-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.chat-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.chat-type-button {
|
||||
background: var(--theme-color);
|
||||
color: var(--white);
|
||||
border: none;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
cursor: default;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.chat-type-text {
|
||||
font-size: 16px;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
|
||||
.chat-date {
|
||||
color: #656d76;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.chat-content {
|
||||
background: #f6f8fa;
|
||||
padding: 12px;
|
||||
border-radius: 6px;
|
||||
border-left: 4px solid #d1d9e0;
|
||||
margin-bottom: 8px;
|
||||
white-space: pre-wrap;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.chat-meta {
|
||||
font-size: 11px;
|
||||
color: #656d76;
|
||||
}
|
||||
|
||||
.no-chat {
|
||||
text-align: center;
|
||||
padding: 40px 20px;
|
||||
color: #656d76;
|
||||
font-style: italic;
|
||||
}
|
||||
@@ -1,7 +1,9 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { OAuthCallback } from './components/OAuthCallback';
|
||||
import { AIChat } from './components/AIChat';
|
||||
import { authService, User } from './services/auth';
|
||||
import { atprotoOAuthService } from './services/atproto-oauth';
|
||||
import { appConfig } from './config/app';
|
||||
import './App.css';
|
||||
|
||||
function App() {
|
||||
@@ -44,6 +46,8 @@ function App() {
|
||||
const [isPostingUserList, setIsPostingUserList] = useState(false);
|
||||
const [userListRecords, setUserListRecords] = useState<any[]>([]);
|
||||
const [showJsonFor, setShowJsonFor] = useState<string | null>(null);
|
||||
const [activeTab, setActiveTab] = useState<'comments' | 'ai-chat'>('comments');
|
||||
const [aiChatHistory, setAiChatHistory] = useState<any[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
// Setup Jetstream WebSocket for real-time comments (optional)
|
||||
@@ -54,14 +58,14 @@ function App() {
|
||||
ws.onopen = () => {
|
||||
console.log('Jetstream connected');
|
||||
ws.send(JSON.stringify({
|
||||
wantedCollections: ['ai.syui.log']
|
||||
wantedCollections: [appConfig.collections.comment]
|
||||
}));
|
||||
};
|
||||
|
||||
ws.onmessage = (event) => {
|
||||
try {
|
||||
const data = JSON.parse(event.data);
|
||||
if (data.collection === 'ai.syui.log' && data.commit?.operation === 'create') {
|
||||
if (data.collection === appConfig.collections.comment && data.commit?.operation === 'create') {
|
||||
console.log('New comment detected via Jetstream:', data);
|
||||
// Optionally reload comments
|
||||
// loadAllComments(window.location.href);
|
||||
@@ -82,8 +86,8 @@ function App() {
|
||||
}
|
||||
};
|
||||
|
||||
// Jetstream + Cache example
|
||||
const jetstream = setupJetstream();
|
||||
// Jetstream + Cache example (disabled for now)
|
||||
// const jetstream = setupJetstream();
|
||||
|
||||
// キャッシュからコメント読み込み
|
||||
const loadCachedComments = () => {
|
||||
@@ -101,7 +105,10 @@ function App() {
|
||||
|
||||
// キャッシュがなければ、ATProtoから取得（認証状態に関係なく）
|
||||
if (!loadCachedComments()) {
|
||||
console.log('No cached comments found, loading from ATProto...');
|
||||
loadAllComments(); // URLフィルタリングを無効にして全コメント表示
|
||||
} else {
|
||||
console.log('Cached comments loaded successfully');
|
||||
}
|
||||
|
||||
// Handle popstate events for mock OAuth flow
|
||||
@@ -143,10 +150,14 @@ function App() {
|
||||
|
||||
// Load all comments for display (this will be the default view)
|
||||
// Temporarily disable URL filtering to see all comments
|
||||
console.log('OAuth session found, loading all comments...');
|
||||
loadAllComments();
|
||||
|
||||
// Load AI chat history
|
||||
loadAiChatHistory(userProfile.did);
|
||||
|
||||
// Load user list records if admin
|
||||
if (userProfile.did === 'did:plc:uqzpqmrjnptsxezjx4xuh2mn') {
|
||||
if (userProfile.did === appConfig.adminDid) {
|
||||
loadUserListRecords();
|
||||
}
|
||||
|
||||
@@ -163,16 +174,18 @@ function App() {
|
||||
|
||||
// Load all comments for display (this will be the default view)
|
||||
// Temporarily disable URL filtering to see all comments
|
||||
console.log('Legacy auth session found, loading all comments...');
|
||||
loadAllComments();
|
||||
|
||||
// Load user list records if admin
|
||||
if (verifiedUser.did === 'did:plc:uqzpqmrjnptsxezjx4xuh2mn') {
|
||||
if (verifiedUser.did === appConfig.adminDid) {
|
||||
loadUserListRecords();
|
||||
}
|
||||
}
|
||||
setIsLoading(false);
|
||||
|
||||
// 認証状態に関係なく、コメントを読み込む
|
||||
console.log('No auth session found, loading all comments anyway...');
|
||||
loadAllComments();
|
||||
};
|
||||
|
||||
@@ -210,7 +223,55 @@ function App() {
|
||||
|
||||
const generatePlaceholderAvatar = (handle: string): string => {
|
||||
const initial = handle ? handle.charAt(0).toUpperCase() : 'U';
|
||||
return `https://via.placeholder.com/48x48/1185fe/ffffff?text=${initial}`;
|
||||
const svg = `<svg width="48" height="48" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="48" height="48" fill="#1185fe"/>
|
||||
<text x="24" y="32" font-family="Arial, sans-serif" font-size="20" font-weight="bold" fill="white" text-anchor="middle">${initial}</text>
|
||||
</svg>`;
|
||||
return `data:image/svg+xml;base64,${btoa(svg)}`;
|
||||
};
|
||||
|
||||
const loadAiChatHistory = async (did: string) => {
|
||||
try {
|
||||
console.log('Loading AI chat history for DID:', did);
|
||||
const agent = atprotoOAuthService.getAgent();
|
||||
if (!agent) {
|
||||
console.log('No agent available');
|
||||
return;
|
||||
}
|
||||
|
||||
// Get AI chat records from current user
|
||||
const response = await agent.api.com.atproto.repo.listRecords({
|
||||
repo: did,
|
||||
collection: appConfig.collections.chat,
|
||||
limit: 100,
|
||||
});
|
||||
|
||||
console.log('AI chat history loaded:', response.data);
|
||||
const chatRecords = response.data.records || [];
|
||||
|
||||
// Filter out old records with invalid AI profile data (temporary fix for migration)
|
||||
const validRecords = chatRecords.filter(record => {
|
||||
if (record.value.answer) {
|
||||
// This is an AI answer - check if it has valid AI profile
|
||||
return record.value.author?.handle &&
|
||||
record.value.author?.handle !== 'ai-assistant' &&
|
||||
record.value.author?.displayName !== 'AI Assistant';
|
||||
}
|
||||
return true; // Keep all questions
|
||||
});
|
||||
|
||||
console.log(`Filtered ${chatRecords.length} records to ${validRecords.length} valid records`);
|
||||
|
||||
// Sort by creation time and group question-answer pairs
|
||||
const sortedRecords = validRecords.sort((a, b) =>
|
||||
new Date(a.value.createdAt).getTime() - new Date(b.value.createdAt).getTime()
|
||||
);
|
||||
|
||||
setAiChatHistory(sortedRecords);
|
||||
} catch (err) {
|
||||
console.error('Failed to load AI chat history:', err);
|
||||
setAiChatHistory([]);
|
||||
}
|
||||
};
|
||||
|
||||
const loadUserComments = async (did: string) => {
|
||||
@@ -225,7 +286,7 @@ function App() {
|
||||
// Get comments from current user
|
||||
const response = await agent.api.com.atproto.repo.listRecords({
|
||||
repo: did,
|
||||
collection: 'ai.syui.log',
|
||||
collection: appConfig.collections.comment,
|
||||
limit: 100,
|
||||
});
|
||||
|
||||
@@ -268,10 +329,10 @@ function App() {
|
||||
// JSONからユーザーリストを取得
|
||||
const loadUsersFromRecord = async () => {
|
||||
try {
|
||||
// 管理者のユーザーリストを取得 (ai.syui.log.user collection)
|
||||
const adminDid = 'did:plc:uqzpqmrjnptsxezjx4xuh2mn'; // syui.ai
|
||||
// 管理者のユーザーリストを取得
|
||||
const adminDid = appConfig.adminDid;
|
||||
console.log('Fetching user list from admin DID:', adminDid);
|
||||
const response = await fetch(`https://bsky.social/xrpc/com.atproto.repo.listRecords?repo=${encodeURIComponent(adminDid)}&collection=ai.syui.log.user&limit=100`);
|
||||
const response = await fetch(`https://bsky.social/xrpc/com.atproto.repo.listRecords?repo=${encodeURIComponent(adminDid)}&collection=${encodeURIComponent(appConfig.collections.user)}&limit=100`);
|
||||
|
||||
if (!response.ok) {
|
||||
console.warn('Failed to fetch user list from admin, using default users. Status:', response.status);
|
||||
@@ -297,7 +358,7 @@ function App() {
|
||||
if (user.did && user.did.includes('-placeholder')) {
|
||||
console.log(`Resolving placeholder DID for ${user.handle}`);
|
||||
try {
|
||||
const profileResponse = await fetch(`https://public.api.bsky.app/xrpc/app.bsky.actor.getProfile?actor=${encodeURIComponent(user.handle)}`);
|
||||
const profileResponse = await fetch(`${appConfig.bskyPublicApi}/xrpc/app.bsky.actor.getProfile?actor=${encodeURIComponent(user.handle)}`);
|
||||
if (profileResponse.ok) {
|
||||
const profileData = await profileResponse.json();
|
||||
if (profileData.did) {
|
||||
@@ -331,8 +392,8 @@ function App() {
|
||||
const loadUserListRecords = async () => {
|
||||
try {
|
||||
console.log('Loading user list records...');
|
||||
const adminDid = 'did:plc:uqzpqmrjnptsxezjx4xuh2mn'; // syui.ai
|
||||
const response = await fetch(`https://bsky.social/xrpc/com.atproto.repo.listRecords?repo=${encodeURIComponent(adminDid)}&collection=ai.syui.log.user&limit=100`);
|
||||
const adminDid = appConfig.adminDid;
|
||||
const response = await fetch(`https://bsky.social/xrpc/com.atproto.repo.listRecords?repo=${encodeURIComponent(adminDid)}&collection=${encodeURIComponent(appConfig.collections.user)}&limit=100`);
|
||||
|
||||
if (!response.ok) {
|
||||
console.warn('Failed to fetch user list records');
|
||||
@@ -358,8 +419,8 @@ function App() {
|
||||
|
||||
const getDefaultUsers = () => {
|
||||
const defaultUsers = [
|
||||
// bsky.social - 実際のDIDを使用
|
||||
{ did: 'did:plc:uqzpqmrjnptsxezjx4xuh2mn', handle: 'syui.ai', pds: 'https://bsky.social' },
|
||||
// Default admin user
|
||||
{ did: appConfig.adminDid, handle: 'syui.ai', pds: 'https://bsky.social' },
|
||||
];
|
||||
|
||||
// 現在ログインしているユーザーも追加（重複チェック）
|
||||
@@ -393,7 +454,7 @@ function App() {
|
||||
console.log(`Fetching comments from user: ${user.handle} (${user.did}) at ${user.pds}`);
|
||||
|
||||
// Public API使用（認証不要）
|
||||
const response = await fetch(`${user.pds}/xrpc/com.atproto.repo.listRecords?repo=${encodeURIComponent(user.did)}&collection=ai.syui.log&limit=100`);
|
||||
const response = await fetch(`${user.pds}/xrpc/com.atproto.repo.listRecords?repo=${encodeURIComponent(user.did)}&collection=${encodeURIComponent(appConfig.collections.comment)}&limit=100`);
|
||||
|
||||
if (!response.ok) {
|
||||
console.warn(`Failed to fetch from ${user.handle} (${response.status}): ${response.statusText}`);
|
||||
@@ -401,8 +462,28 @@ function App() {
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
const userComments = data.records || [];
|
||||
console.log(`Found ${userComments.length} comments from ${user.handle}`);
|
||||
const userRecords = data.records || [];
|
||||
console.log(`Found ${userRecords.length} comment records from ${user.handle}`);
|
||||
|
||||
// Flatten comments from new array format
|
||||
const userComments = [];
|
||||
for (const record of userRecords) {
|
||||
if (record.value.comments && Array.isArray(record.value.comments)) {
|
||||
// New format: array of comments
|
||||
for (const comment of record.value.comments) {
|
||||
userComments.push({
|
||||
...record,
|
||||
value: comment,
|
||||
originalRecord: record // Keep reference to original record
|
||||
});
|
||||
}
|
||||
} else if (record.value.text) {
|
||||
// Old format: single comment
|
||||
userComments.push(record);
|
||||
}
|
||||
}
|
||||
|
||||
console.log(`Flattened to ${userComments.length} individual comments from ${user.handle}`);
|
||||
|
||||
// ページURLでフィルタリング（指定された場合）
|
||||
const filteredComments = pageUrl
|
||||
@@ -428,7 +509,7 @@ function App() {
|
||||
if (!record.value.author?.avatar && record.value.author?.handle) {
|
||||
try {
|
||||
// Public API でプロフィール取得
|
||||
const profileResponse = await fetch(`https://public.api.bsky.app/xrpc/app.bsky.actor.getProfile?actor=${encodeURIComponent(record.value.author.handle)}`);
|
||||
const profileResponse = await fetch(`${appConfig.bskyPublicApi}/xrpc/app.bsky.actor.getProfile?actor=${encodeURIComponent(record.value.author.handle)}`);
|
||||
|
||||
if (profileResponse.ok) {
|
||||
const profileData = await profileResponse.json();
|
||||
@@ -459,6 +540,7 @@ function App() {
|
||||
console.log('Known users used:', knownUsers);
|
||||
|
||||
setComments(enhancedComments);
|
||||
console.log('Comments state updated with', enhancedComments.length, 'comments');
|
||||
|
||||
// キャッシュに保存（5分間有効）
|
||||
if (pageUrl) {
|
||||
@@ -490,12 +572,12 @@ function App() {
|
||||
throw new Error('No agent available');
|
||||
}
|
||||
|
||||
// Create comment record with ISO datetime rkey
|
||||
// Create comment record with post-specific rkey
|
||||
const now = new Date();
|
||||
const rkey = now.toISOString().replace(/[:.]/g, '-'); // Replace : and . with - for valid rkey
|
||||
// Use post rkey if on post page, otherwise use timestamp-based rkey
|
||||
const rkey = appConfig.rkey || now.toISOString().replace(/[:.]/g, '-');
|
||||
|
||||
const record = {
|
||||
$type: 'ai.syui.log',
|
||||
const newComment = {
|
||||
text: commentText,
|
||||
url: window.location.href,
|
||||
createdAt: now.toISOString(),
|
||||
@@ -507,10 +589,48 @@ function App() {
|
||||
},
|
||||
};
|
||||
|
||||
// Check if record with this rkey already exists
|
||||
let existingComments = [];
|
||||
try {
|
||||
const existingResponse = await agent.api.com.atproto.repo.getRecord({
|
||||
repo: user.did,
|
||||
collection: appConfig.collections.comment,
|
||||
rkey: rkey,
|
||||
});
|
||||
|
||||
// Handle both old single comment format and new array format
|
||||
if (existingResponse.data.value.comments) {
|
||||
// New format: array of comments
|
||||
existingComments = existingResponse.data.value.comments;
|
||||
} else if (existingResponse.data.value.text) {
|
||||
// Old format: single comment, convert to array
|
||||
existingComments = [{
|
||||
text: existingResponse.data.value.text,
|
||||
url: existingResponse.data.value.url,
|
||||
createdAt: existingResponse.data.value.createdAt,
|
||||
author: existingResponse.data.value.author,
|
||||
}];
|
||||
}
|
||||
} catch (err) {
|
||||
// Record doesn't exist yet, that's fine
|
||||
console.log('No existing record found, creating new one');
|
||||
}
|
||||
|
||||
// Add new comment to the array
|
||||
existingComments.push(newComment);
|
||||
|
||||
// Create the record with comments array
|
||||
const record = {
|
||||
$type: appConfig.collections.comment,
|
||||
comments: existingComments,
|
||||
url: window.location.href,
|
||||
createdAt: now.toISOString(), // Latest update time
|
||||
};
|
||||
|
||||
// Post to ATProto with rkey
|
||||
const response = await agent.api.com.atproto.repo.putRecord({
|
||||
repo: user.did,
|
||||
collection: 'ai.syui.log',
|
||||
collection: appConfig.collections.comment,
|
||||
rkey: rkey,
|
||||
record: record,
|
||||
});
|
||||
@@ -553,7 +673,7 @@ function App() {
|
||||
// Delete the record
|
||||
await agent.api.com.atproto.repo.deleteRecord({
|
||||
repo: user.did,
|
||||
collection: 'ai.syui.log',
|
||||
collection: appConfig.collections.comment,
|
||||
rkey: rkey,
|
||||
});
|
||||
|
||||
@@ -578,7 +698,7 @@ function App() {
|
||||
|
||||
// 管理者チェック
|
||||
const isAdmin = (user: User | null): boolean => {
|
||||
return user?.did === 'did:plc:uqzpqmrjnptsxezjx4xuh2mn'; // syui.ai
|
||||
return user?.did === appConfig.adminDid;
|
||||
};
|
||||
|
||||
// ユーザーリスト投稿
|
||||
@@ -616,7 +736,7 @@ function App() {
|
||||
|
||||
try {
|
||||
// Public APIでプロフィールを取得してDIDを解決
|
||||
const profileResponse = await fetch(`https://public.api.bsky.app/xrpc/app.bsky.actor.getProfile?actor=${encodeURIComponent(handle)}`);
|
||||
const profileResponse = await fetch(`${appConfig.bskyPublicApi}/xrpc/app.bsky.actor.getProfile?actor=${encodeURIComponent(handle)}`);
|
||||
if (profileResponse.ok) {
|
||||
const profileData = await profileResponse.json();
|
||||
if (profileData.did) {
|
||||
@@ -640,7 +760,7 @@ function App() {
|
||||
const rkey = now.toISOString().replace(/[:.]/g, '-');
|
||||
|
||||
const record = {
|
||||
$type: 'ai.syui.log.user',
|
||||
$type: appConfig.collections.user,
|
||||
users: users,
|
||||
createdAt: now.toISOString(),
|
||||
updatedBy: {
|
||||
@@ -652,7 +772,7 @@ function App() {
|
||||
// Post to ATProto with rkey
|
||||
const response = await agent.api.com.atproto.repo.putRecord({
|
||||
repo: user.did,
|
||||
collection: 'ai.syui.log.user',
|
||||
collection: appConfig.collections.user,
|
||||
rkey: rkey,
|
||||
record: record,
|
||||
});
|
||||
@@ -697,7 +817,7 @@ function App() {
|
||||
// Delete the record
|
||||
await agent.api.com.atproto.repo.deleteRecord({
|
||||
repo: user.did,
|
||||
collection: 'ai.syui.log.user',
|
||||
collection: appConfig.collections.user,
|
||||
rkey: rkey,
|
||||
});
|
||||
|
||||
@@ -720,6 +840,45 @@ function App() {
|
||||
}
|
||||
};
|
||||
|
||||
// OAuth実行関数
|
||||
const executeOAuth = async () => {
|
||||
if (!handleInput.trim()) {
|
||||
alert('Please enter your Bluesky handle first');
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await atprotoOAuthService.initiateOAuthFlow(handleInput);
|
||||
} catch (err) {
|
||||
console.error('OAuth failed:', err);
|
||||
alert('認証の開始に失敗しました。再度お試しください。');
|
||||
}
|
||||
};
|
||||
|
||||
// ユーザーハンドルからプロフィールURLを生成
|
||||
const generateProfileUrl = (handle: string, did: string): string => {
|
||||
if (handle.endsWith('.syu.is')) {
|
||||
return `https://web.syu.is/profile/${did}`;
|
||||
} else {
|
||||
return `https://bsky.app/profile/${did}`;
|
||||
}
|
||||
};
|
||||
|
||||
// Rkey-based comment filtering
|
||||
// If on post page (/posts/xxx.html), only show comments with rkey=xxx
|
||||
const shouldShowComment = (record: any): boolean => {
|
||||
// If not on a post page, show all comments
|
||||
if (!appConfig.rkey) {
|
||||
return true;
|
||||
}
|
||||
|
||||
// Extract rkey from comment URI: at://did:plc:xxx/collection/rkey
|
||||
const uriParts = record.uri.split('/');
|
||||
const commentRkey = uriParts[uriParts.length - 1];
|
||||
|
||||
// Show comment only if rkey matches current post
|
||||
return commentRkey === appConfig.rkey;
|
||||
};
|
||||
|
||||
// OAuth callback is now handled by React Router in main.tsx
|
||||
console.log('=== APP.TSX URL CHECK ===');
|
||||
console.log('Full URL:', window.location.href);
|
||||
@@ -737,18 +896,7 @@ function App() {
|
||||
{!user ? (
|
||||
<div className="auth-section">
|
||||
<button
|
||||
onClick={async () => {
|
||||
if (!handleInput.trim()) {
|
||||
alert('Please enter your Bluesky handle first');
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await atprotoOAuthService.initiateOAuthFlow(handleInput);
|
||||
} catch (err) {
|
||||
console.error('OAuth failed:', err);
|
||||
alert('認証の開始に失敗しました。再度お試しください。');
|
||||
}
|
||||
}}
|
||||
onClick={executeOAuth}
|
||||
className="atproto-button"
|
||||
>
|
||||
atproto
|
||||
@@ -760,6 +908,12 @@ function App() {
|
||||
className="handle-input"
|
||||
value={handleInput}
|
||||
onChange={(e) => setHandleInput(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') {
|
||||
e.preventDefault();
|
||||
executeOAuth();
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -775,7 +929,7 @@ function App() {
|
||||
<div className="user-details">
|
||||
<h3>{user.displayName || user.handle}</h3>
|
||||
<p className="user-handle">@{user.handle}</p>
|
||||
<p className="user-did">DID: {user.did}</p>
|
||||
<p className="user-did">{user.did}</p>
|
||||
</div>
|
||||
</div>
|
||||
<button onClick={handleLogout} className="logout-button">
|
||||
@@ -827,14 +981,14 @@ function App() {
|
||||
className="json-button"
|
||||
title="Show/Hide JSON"
|
||||
>
|
||||
{showJsonFor === record.uri ? '📄 Hide JSON' : '📄 Show JSON'}
|
||||
{showJsonFor === record.uri ? 'Hide JSON' : 'Show JSON'}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDeleteUserList(record.uri)}
|
||||
className="delete-button"
|
||||
title="Delete user list"
|
||||
>
|
||||
🗑️
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -873,71 +1027,203 @@ function App() {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Tab Navigation */}
|
||||
<div className="tab-navigation">
|
||||
<button
|
||||
className={`tab-button ${activeTab === 'comments' ? 'active' : ''}`}
|
||||
onClick={() => setActiveTab('comments')}
|
||||
>
|
||||
Comments ({comments.filter(shouldShowComment).length})
|
||||
</button>
|
||||
{user && (
|
||||
<button
|
||||
className={`tab-button ${activeTab === 'ai-chat' ? 'active' : ''}`}
|
||||
onClick={() => setActiveTab('ai-chat')}
|
||||
>
|
||||
AI Chat History ({aiChatHistory.length})
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Comments List */}
|
||||
<div className="comments-list">
|
||||
<div className="comments-header">
|
||||
<h3>Comments</h3>
|
||||
<div className="comments-controls">
|
||||
<button
|
||||
onClick={() => user && loadUserComments(user.did)}
|
||||
className="comments-toggle-button"
|
||||
disabled={!user}
|
||||
title={!user ? "Login required to view your comments" : ""}
|
||||
>
|
||||
My Comments {!user && "(Login Required)"}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => loadAllComments()}
|
||||
className="comments-toggle-button"
|
||||
>
|
||||
All Comments (No Filter)
|
||||
</button>
|
||||
{activeTab === 'comments' && (
|
||||
<div className="comments-list">
|
||||
<div className="comments-header">
|
||||
<h3>Comments</h3>
|
||||
</div>
|
||||
</div>
|
||||
{comments.length === 0 ? (
|
||||
<p className="no-comments">No comments yet</p>
|
||||
{comments.filter(shouldShowComment).length === 0 ? (
|
||||
<p className="no-comments">
|
||||
{appConfig.rkey ? `No comments for this post yet` : `No comments yet`}
|
||||
</p>
|
||||
) : (
|
||||
comments.map((record, index) => (
|
||||
comments.filter(shouldShowComment).map((record, index) => (
|
||||
<div key={index} className="comment-item">
|
||||
<div className="comment-header">
|
||||
<img
|
||||
src={record.value.author?.avatar || generatePlaceholderAvatar(record.value.author?.handle || 'unknown')}
|
||||
src={generatePlaceholderAvatar(record.value.author?.handle || 'unknown')}
|
||||
alt="User Avatar"
|
||||
className="comment-avatar"
|
||||
ref={(img) => {
|
||||
// Fetch fresh avatar from API when component mounts
|
||||
if (img && record.value.author?.did) {
|
||||
fetch(`${appConfig.bskyPublicApi}/xrpc/app.bsky.actor.getProfile?actor=${encodeURIComponent(record.value.author.did)}`)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
if (data.avatar && img) {
|
||||
img.src = data.avatar;
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
console.warn('Failed to fetch fresh avatar:', err);
|
||||
// Keep placeholder on error
|
||||
});
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<div className="comment-author-info">
|
||||
<span className="comment-author">
|
||||
{record.value.author?.displayName || record.value.author?.handle || 'unknown'}
|
||||
</span>
|
||||
<span className="comment-handle">@{record.value.author?.handle || 'unknown'}</span>
|
||||
<a
|
||||
href={generateProfileUrl(record.value.author?.handle || '', record.value.author?.did || '')}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="comment-handle"
|
||||
>
|
||||
@{record.value.author?.handle || 'unknown'}
|
||||
</a>
|
||||
</div>
|
||||
<span className="comment-date">
|
||||
{new Date(record.value.createdAt).toLocaleString()}
|
||||
</span>
|
||||
{/* Show delete button only for current user's comments */}
|
||||
{user && record.value.author?.did === user.did && (
|
||||
<div className="comment-actions">
|
||||
<button
|
||||
onClick={() => handleDeleteComment(record.uri)}
|
||||
className="delete-button"
|
||||
title="Delete comment"
|
||||
onClick={() => toggleJsonDisplay(record.uri)}
|
||||
className="json-button"
|
||||
title="Show/Hide JSON"
|
||||
>
|
||||
🗑️
|
||||
{showJsonFor === record.uri ? 'Hide' : 'JSON'}
|
||||
</button>
|
||||
)}
|
||||
{/* Show delete button only for current user's comments */}
|
||||
{user && record.value.author?.did === user.did && (
|
||||
<button
|
||||
onClick={() => handleDeleteComment(record.uri)}
|
||||
className="delete-button"
|
||||
title="Delete comment"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="comment-content">
|
||||
{record.value.text}
|
||||
</div>
|
||||
<div className="comment-meta">
|
||||
<small>URI: {record.uri}</small>
|
||||
<small>{record.uri}</small>
|
||||
</div>
|
||||
|
||||
{/* JSON Display */}
|
||||
{showJsonFor === record.uri && (
|
||||
<div className="json-display">
|
||||
<h5>JSON Record:</h5>
|
||||
<pre className="json-content">
|
||||
{JSON.stringify(record, null, 2)}
|
||||
</pre>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Comment Form - Outside user section, after comments list */}
|
||||
{user && (
|
||||
{/* AI Chat History List */}
|
||||
{activeTab === 'ai-chat' && user && (
|
||||
<div className="ai-chat-list">
|
||||
<div className="chat-header">
|
||||
<h3>AI Chat History</h3>
|
||||
</div>
|
||||
{aiChatHistory.length === 0 ? (
|
||||
<p className="no-chat">No AI conversations yet. Start chatting with Ask AI!</p>
|
||||
) : (
|
||||
aiChatHistory.map((record, index) => (
|
||||
<div key={index} className="chat-item">
|
||||
<div className="chat-header">
|
||||
<img
|
||||
src={generatePlaceholderAvatar(record.value.author?.handle || 'unknown')}
|
||||
alt="User Avatar"
|
||||
className="comment-avatar"
|
||||
ref={(img) => {
|
||||
// Fetch fresh avatar from API when component mounts
|
||||
if (img && record.value.author?.did) {
|
||||
fetch(`${appConfig.bskyPublicApi}/xrpc/app.bsky.actor.getProfile?actor=${encodeURIComponent(record.value.author.did)}`)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
if (data.avatar && img) {
|
||||
img.src = data.avatar;
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
console.warn('Failed to fetch fresh avatar:', err);
|
||||
// Keep placeholder on error
|
||||
});
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<div className="comment-author-info">
|
||||
<span className="comment-author">
|
||||
{record.value.author?.displayName || record.value.author?.handle || 'unknown'}
|
||||
</span>
|
||||
<a
|
||||
href={generateProfileUrl(record.value.author?.handle || '', record.value.author?.did || '')}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="comment-handle"
|
||||
>
|
||||
@{record.value.author?.handle || 'unknown'}
|
||||
</a>
|
||||
</div>
|
||||
<span className="comment-date">
|
||||
{new Date(record.value.createdAt).toLocaleString()}
|
||||
</span>
|
||||
<div className="comment-actions">
|
||||
<button
|
||||
onClick={() => toggleJsonDisplay(record.uri)}
|
||||
className="json-button"
|
||||
title="Show/Hide JSON"
|
||||
>
|
||||
{showJsonFor === record.uri ? 'Hide' : 'JSON'}
|
||||
</button>
|
||||
<button className="chat-type-button">
|
||||
{record.value.question ? 'Question' : 'Answer'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="comment-content">
|
||||
{record.value.question || record.value.answer}
|
||||
</div>
|
||||
<div className="comment-meta">
|
||||
<small>{record.uri}</small>
|
||||
</div>
|
||||
|
||||
{/* JSON Display */}
|
||||
{showJsonFor === record.uri && (
|
||||
<div className="json-display">
|
||||
<h5>JSON Record:</h5>
|
||||
<pre className="json-content">
|
||||
{JSON.stringify(record, null, 2)}
|
||||
</pre>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Comment Form - Only show on post pages */}
|
||||
{user && appConfig.rkey && (
|
||||
<div className="comment-form">
|
||||
<h3>Post a Comment</h3>
|
||||
<textarea
|
||||
@@ -960,9 +1246,19 @@ function App() {
|
||||
{error && <p className="error">{error}</p>}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Show authentication status on non-post pages */}
|
||||
{user && !appConfig.rkey && (
|
||||
<div className="auth-status">
|
||||
<p>✅ Authenticated as @{user.handle}</p>
|
||||
<p><small>Visit a post page to comment</small></p>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
</main>
|
||||
|
||||
{/* AI Chat Component - handles all AI functionality */}
|
||||
<AIChat user={user} isEnabled={appConfig.aiEnabled && appConfig.aiAskAi} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
21
oauth/src/components/AIChat-access.tsx
Normal file
21
oauth/src/components/AIChat-access.tsx
Normal file
@@ -0,0 +1,21 @@
|
||||
// Cloudflare Access対応版の例
|
||||
const response = await fetch(`${aiConfig.host}/api/generate`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
// Cloudflare Access Service Token
|
||||
'CF-Access-Client-Id': import.meta.env.VITE_CF_ACCESS_CLIENT_ID,
|
||||
'CF-Access-Client-Secret': import.meta.env.VITE_CF_ACCESS_CLIENT_SECRET,
|
||||
},
|
||||
body: JSON.stringify({
|
||||
model: aiConfig.model,
|
||||
prompt: prompt,
|
||||
stream: false,
|
||||
options: {
|
||||
temperature: 0.9,
|
||||
top_p: 0.9,
|
||||
num_predict: 80,
|
||||
repeat_penalty: 1.1,
|
||||
}
|
||||
}),
|
||||
});
|
||||
279
oauth/src/components/AIChat.tsx
Normal file
279
oauth/src/components/AIChat.tsx
Normal file
@@ -0,0 +1,279 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { User } from '../services/auth';
|
||||
import { atprotoOAuthService } from '../services/atproto-oauth';
|
||||
import { appConfig } from '../config/app';
|
||||
|
||||
interface AIChatProps {
|
||||
user: User | null;
|
||||
isEnabled: boolean;
|
||||
}
|
||||
|
||||
export const AIChat: React.FC<AIChatProps> = ({ user, isEnabled }) => {
|
||||
const [chatHistory, setChatHistory] = useState<any[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [isProcessing, setIsProcessing] = useState(false);
|
||||
const [aiProfile, setAiProfile] = useState<any>(null);
|
||||
|
||||
// Get AI settings from environment variables
|
||||
const aiConfig = {
|
||||
enabled: import.meta.env.VITE_AI_ENABLED === 'true',
|
||||
askAi: import.meta.env.VITE_AI_ASK_AI === 'true',
|
||||
provider: import.meta.env.VITE_AI_PROVIDER || 'ollama',
|
||||
model: import.meta.env.VITE_AI_MODEL || 'gemma3:4b',
|
||||
host: import.meta.env.VITE_AI_HOST || 'https://ollama.syui.ai',
|
||||
systemPrompt: import.meta.env.VITE_AI_SYSTEM_PROMPT || 'You are a helpful AI assistant trained on this blog\'s content.',
|
||||
aiDid: import.meta.env.VITE_AI_DID || 'did:plc:uqzpqmrjnptsxezjx4xuh2mn',
|
||||
bskyPublicApi: import.meta.env.VITE_BSKY_PUBLIC_API || 'https://public.api.bsky.app',
|
||||
};
|
||||
|
||||
// Fetch AI profile on load
|
||||
useEffect(() => {
|
||||
const fetchAIProfile = async () => {
|
||||
console.log('=== AI PROFILE FETCH START ===');
|
||||
console.log('AI DID:', aiConfig.aiDid);
|
||||
|
||||
if (!aiConfig.aiDid) {
|
||||
console.log('No AI DID configured');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
// Try with agent first
|
||||
const agent = atprotoOAuthService.getAgent();
|
||||
if (agent) {
|
||||
console.log('Fetching AI profile with agent for DID:', aiConfig.aiDid);
|
||||
const profile = await agent.getProfile({ actor: aiConfig.aiDid });
|
||||
console.log('AI profile fetched successfully:', profile.data);
|
||||
const profileData = {
|
||||
did: aiConfig.aiDid,
|
||||
handle: profile.data.handle,
|
||||
displayName: profile.data.displayName,
|
||||
avatar: profile.data.avatar,
|
||||
description: profile.data.description
|
||||
};
|
||||
console.log('Setting aiProfile to:', profileData);
|
||||
setAiProfile(profileData);
|
||||
|
||||
// Dispatch event to update Ask AI button
|
||||
window.dispatchEvent(new CustomEvent('aiProfileLoaded', { detail: profileData }));
|
||||
console.log('=== AI PROFILE FETCH SUCCESS (AGENT) ===');
|
||||
return;
|
||||
}
|
||||
|
||||
// Fallback to public API
|
||||
console.log('No agent available, trying public API for AI profile');
|
||||
const response = await fetch(`${aiConfig.bskyPublicApi}/xrpc/app.bsky.actor.getProfile?actor=${encodeURIComponent(aiConfig.aiDid)}`);
|
||||
if (response.ok) {
|
||||
const profileData = await response.json();
|
||||
console.log('AI profile fetched via public API:', profileData);
|
||||
const profile = {
|
||||
did: aiConfig.aiDid,
|
||||
handle: profileData.handle,
|
||||
displayName: profileData.displayName,
|
||||
avatar: profileData.avatar,
|
||||
description: profileData.description
|
||||
};
|
||||
console.log('Setting aiProfile to:', profile);
|
||||
setAiProfile(profile);
|
||||
|
||||
// Dispatch event to update Ask AI button
|
||||
window.dispatchEvent(new CustomEvent('aiProfileLoaded', { detail: profile }));
|
||||
console.log('=== AI PROFILE FETCH SUCCESS (PUBLIC API) ===');
|
||||
return;
|
||||
} else {
|
||||
console.error('Public API failed with status:', response.status);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch AI profile:', error);
|
||||
setAiProfile(null);
|
||||
}
|
||||
console.log('=== AI PROFILE FETCH FAILED ===');
|
||||
};
|
||||
|
||||
fetchAIProfile();
|
||||
}, [aiConfig.aiDid]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isEnabled || !aiConfig.askAi) return;
|
||||
|
||||
// Listen for AI question posts from base.html
|
||||
const handleAIQuestion = async (event: any) => {
|
||||
if (!user || !event.detail || !event.detail.question || isProcessing || !aiProfile) return;
|
||||
|
||||
console.log('AIChat received question:', event.detail.question);
|
||||
console.log('Current aiProfile state:', aiProfile);
|
||||
|
||||
setIsProcessing(true);
|
||||
try {
|
||||
await postQuestionAndGenerateResponse(event.detail.question);
|
||||
} finally {
|
||||
setIsProcessing(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Add listener with a small delay to ensure it's ready
|
||||
setTimeout(() => {
|
||||
window.addEventListener('postAIQuestion', handleAIQuestion);
|
||||
console.log('AIChat event listener registered');
|
||||
|
||||
// Notify that AI is ready
|
||||
window.dispatchEvent(new CustomEvent('aiChatReady'));
|
||||
}, 100);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('postAIQuestion', handleAIQuestion);
|
||||
};
|
||||
}, [user, isEnabled, isProcessing, aiProfile]);
|
||||
|
||||
const postQuestionAndGenerateResponse = async (question: string) => {
|
||||
if (!user || !aiConfig.askAi || !aiProfile) return;
|
||||
|
||||
setIsLoading(true);
|
||||
|
||||
try {
|
||||
const agent = atprotoOAuthService.getAgent();
|
||||
if (!agent) throw new Error('No agent available');
|
||||
|
||||
// 1. Post question to ATProto
|
||||
const now = new Date();
|
||||
const rkey = now.toISOString().replace(/[:.]/g, '-');
|
||||
|
||||
const questionRecord = {
|
||||
$type: appConfig.collections.chat,
|
||||
question: question,
|
||||
url: window.location.href,
|
||||
createdAt: now.toISOString(),
|
||||
author: {
|
||||
did: user.did,
|
||||
handle: user.handle,
|
||||
avatar: user.avatar,
|
||||
displayName: user.displayName || user.handle,
|
||||
},
|
||||
context: {
|
||||
page_title: document.title,
|
||||
page_url: window.location.href,
|
||||
},
|
||||
};
|
||||
|
||||
await agent.api.com.atproto.repo.putRecord({
|
||||
repo: user.did,
|
||||
collection: appConfig.collections.chat,
|
||||
rkey: rkey,
|
||||
record: questionRecord,
|
||||
});
|
||||
|
||||
console.log('Question posted to ATProto');
|
||||
|
||||
// 2. Get chat history
|
||||
const chatRecords = await agent.api.com.atproto.repo.listRecords({
|
||||
repo: user.did,
|
||||
collection: appConfig.collections.chat,
|
||||
limit: 10,
|
||||
});
|
||||
|
||||
let chatHistoryText = '';
|
||||
if (chatRecords.data.records) {
|
||||
chatHistoryText = chatRecords.data.records
|
||||
.map((r: any) => {
|
||||
if (r.value.question) {
|
||||
return `User: ${r.value.question}`;
|
||||
} else if (r.value.answer) {
|
||||
return `AI: ${r.value.answer}`;
|
||||
}
|
||||
return '';
|
||||
})
|
||||
.filter(Boolean)
|
||||
.join('\n');
|
||||
}
|
||||
|
||||
// 3. Generate AI response based on provider
|
||||
let aiAnswer = '';
|
||||
|
||||
// 3. Generate AI response using Ollama via proxy
|
||||
if (aiConfig.provider === 'ollama') {
|
||||
const prompt = `${aiConfig.systemPrompt}
|
||||
|
||||
Question: ${question}
|
||||
|
||||
Answer:`;
|
||||
|
||||
const response = await fetch(`${aiConfig.host}/api/generate`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
model: aiConfig.model,
|
||||
prompt: prompt,
|
||||
stream: false,
|
||||
options: {
|
||||
temperature: 0.9,
|
||||
top_p: 0.9,
|
||||
num_predict: 80, // Shorter responses for faster generation
|
||||
repeat_penalty: 1.1,
|
||||
}
|
||||
}),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('AI API request failed');
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
aiAnswer = data.response;
|
||||
}
|
||||
|
||||
// 4. Immediately dispatch event to update UI
|
||||
window.dispatchEvent(new CustomEvent('aiResponseReceived', {
|
||||
detail: {
|
||||
answer: aiAnswer,
|
||||
aiProfile: aiProfile,
|
||||
timestamp: now.toISOString()
|
||||
}
|
||||
}));
|
||||
|
||||
// 5. Save AI response in background
|
||||
const answerRkey = now.toISOString().replace(/[:.]/g, '-') + '-answer';
|
||||
|
||||
console.log('=== SAVING AI ANSWER ===');
|
||||
console.log('Current aiProfile:', aiProfile);
|
||||
|
||||
const answerRecord = {
|
||||
$type: appConfig.collections.chat,
|
||||
answer: aiAnswer,
|
||||
question_rkey: rkey,
|
||||
url: window.location.href,
|
||||
createdAt: now.toISOString(),
|
||||
author: {
|
||||
did: aiProfile.did,
|
||||
handle: aiProfile.handle,
|
||||
displayName: aiProfile.displayName,
|
||||
avatar: aiProfile.avatar,
|
||||
},
|
||||
};
|
||||
|
||||
console.log('Answer record to save:', answerRecord);
|
||||
|
||||
// Save to ATProto asynchronously (don't wait for it)
|
||||
agent.api.com.atproto.repo.putRecord({
|
||||
repo: user.did,
|
||||
collection: appConfig.collections.chat,
|
||||
rkey: answerRkey,
|
||||
record: answerRecord,
|
||||
}).catch(err => {
|
||||
console.error('Failed to save AI response to ATProto:', err);
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
console.error('Failed to generate AI response:', error);
|
||||
window.dispatchEvent(new CustomEvent('aiResponseError', {
|
||||
detail: { error: 'AI応答の生成に失敗しました' }
|
||||
}));
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// This component doesn't render anything - it just handles the logic
|
||||
return null;
|
||||
};
|
||||
79
oauth/src/components/AIProfile.tsx
Normal file
79
oauth/src/components/AIProfile.tsx
Normal file
@@ -0,0 +1,79 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { AtprotoAgent } from '@atproto/api';
|
||||
|
||||
interface AIProfile {
|
||||
did: string;
|
||||
handle: string;
|
||||
displayName?: string;
|
||||
avatar?: string;
|
||||
description?: string;
|
||||
}
|
||||
|
||||
interface AIProfileProps {
|
||||
aiDid: string;
|
||||
}
|
||||
|
||||
export const AIProfile: React.FC<AIProfileProps> = ({ aiDid }) => {
|
||||
const [profile, setProfile] = useState<AIProfile | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchAIProfile = async () => {
|
||||
try {
|
||||
// Use public API to get profile information
|
||||
const agent = new AtprotoAgent({ service: 'https://bsky.social' });
|
||||
const response = await agent.getProfile({ actor: aiDid });
|
||||
|
||||
setProfile({
|
||||
did: response.data.did,
|
||||
handle: response.data.handle,
|
||||
displayName: response.data.displayName,
|
||||
avatar: response.data.avatar,
|
||||
description: response.data.description,
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch AI profile:', error);
|
||||
// Fallback to basic info
|
||||
setProfile({
|
||||
did: aiDid,
|
||||
handle: 'ai-assistant',
|
||||
displayName: 'AI Assistant',
|
||||
description: 'AI assistant for this blog',
|
||||
});
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (aiDid) {
|
||||
fetchAIProfile();
|
||||
}
|
||||
}, [aiDid]);
|
||||
|
||||
if (loading) {
|
||||
return <div className="ai-profile-loading">Loading AI profile...</div>;
|
||||
}
|
||||
|
||||
if (!profile) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="ai-profile">
|
||||
<div className="ai-avatar">
|
||||
{profile.avatar ? (
|
||||
<img src={profile.avatar} alt={profile.displayName || profile.handle} />
|
||||
) : (
|
||||
<div className="ai-avatar-placeholder">🤖</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="ai-info">
|
||||
<div className="ai-name">{profile.displayName || profile.handle}</div>
|
||||
<div className="ai-handle">@{profile.handle}</div>
|
||||
{profile.description && (
|
||||
<div className="ai-description">{profile.description}</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
110
oauth/src/config/app.ts
Normal file
110
oauth/src/config/app.ts
Normal file
@@ -0,0 +1,110 @@
|
||||
// Application configuration
|
||||
export interface AppConfig {
|
||||
adminDid: string;
|
||||
collections: {
|
||||
comment: string;
|
||||
user: string;
|
||||
chat: string;
|
||||
};
|
||||
host: string;
|
||||
rkey?: string; // Current post rkey if on post page
|
||||
aiEnabled: boolean;
|
||||
aiAskAi: boolean;
|
||||
aiProvider: string;
|
||||
aiModel: string;
|
||||
aiHost: string;
|
||||
bskyPublicApi: string;
|
||||
}
|
||||
|
||||
// Generate collection names from host
|
||||
// Format: ${reg}.${name}.${sub}
|
||||
// Example: log.syui.ai -> ai.syui.log
|
||||
function generateCollectionNames(host: string): { comment: string; user: string; chat: string } {
|
||||
try {
|
||||
// Remove protocol if present
|
||||
const cleanHost = host.replace(/^https?:\/\//, '');
|
||||
|
||||
// Split host into parts
|
||||
const parts = cleanHost.split('.');
|
||||
|
||||
if (parts.length < 2) {
|
||||
throw new Error('Invalid host format');
|
||||
}
|
||||
|
||||
// Reverse the parts for collection naming
|
||||
// log.syui.ai -> ai.syui.log
|
||||
const reversedParts = parts.reverse();
|
||||
const collectionBase = reversedParts.join('.');
|
||||
|
||||
return {
|
||||
comment: collectionBase,
|
||||
user: `${collectionBase}.user`,
|
||||
chat: `${collectionBase}.chat`
|
||||
};
|
||||
} catch (error) {
|
||||
console.warn('Failed to generate collection names from host:', host, error);
|
||||
// Fallback to default collections
|
||||
return {
|
||||
comment: 'ai.syui.log',
|
||||
user: 'ai.syui.log.user',
|
||||
chat: 'ai.syui.log.chat'
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
// Extract rkey from current URL
|
||||
// /posts/xxx.html -> xxx
|
||||
function extractRkeyFromUrl(): string | undefined {
|
||||
const pathname = window.location.pathname;
|
||||
const match = pathname.match(/\/posts\/([^/]+)\.html$/);
|
||||
return match ? match[1] : undefined;
|
||||
}
|
||||
|
||||
// Get application configuration from environment variables
|
||||
export function getAppConfig(): AppConfig {
|
||||
const host = import.meta.env.VITE_APP_HOST || 'https://log.syui.ai';
|
||||
const adminDid = import.meta.env.VITE_ADMIN_DID || 'did:plc:uqzpqmrjnptsxezjx4xuh2mn';
|
||||
|
||||
// Priority: Environment variables > Auto-generated from host
|
||||
const autoGeneratedCollections = generateCollectionNames(host);
|
||||
const collections = {
|
||||
comment: import.meta.env.VITE_COLLECTION_COMMENT || autoGeneratedCollections.comment,
|
||||
user: import.meta.env.VITE_COLLECTION_USER || autoGeneratedCollections.user,
|
||||
chat: import.meta.env.VITE_COLLECTION_CHAT || autoGeneratedCollections.chat,
|
||||
};
|
||||
|
||||
const rkey = extractRkeyFromUrl();
|
||||
|
||||
// AI configuration
|
||||
const aiEnabled = import.meta.env.VITE_AI_ENABLED === 'true';
|
||||
const aiAskAi = import.meta.env.VITE_AI_ASK_AI === 'true';
|
||||
const aiProvider = import.meta.env.VITE_AI_PROVIDER || 'ollama';
|
||||
const aiModel = import.meta.env.VITE_AI_MODEL || 'gemma2:2b';
|
||||
const aiHost = import.meta.env.VITE_AI_HOST || 'https://ollama.syui.ai';
|
||||
const bskyPublicApi = import.meta.env.VITE_BSKY_PUBLIC_API || 'https://public.api.bsky.app';
|
||||
|
||||
console.log('App configuration:', {
|
||||
host,
|
||||
adminDid,
|
||||
collections,
|
||||
rkey: rkey || 'none (not on post page)',
|
||||
ai: { enabled: aiEnabled, askAi: aiAskAi, provider: aiProvider, model: aiModel, host: aiHost },
|
||||
bskyPublicApi
|
||||
});
|
||||
|
||||
return {
|
||||
adminDid,
|
||||
collections,
|
||||
host,
|
||||
rkey,
|
||||
aiEnabled,
|
||||
aiAskAi,
|
||||
aiProvider,
|
||||
aiModel,
|
||||
aiHost,
|
||||
bskyPublicApi
|
||||
};
|
||||
}
|
||||
|
||||
// Export singleton instance
|
||||
export const appConfig = getAppConfig();
|
||||
30
oauth/src/main.tsx
Normal file
30
oauth/src/main.tsx
Normal file
@@ -0,0 +1,30 @@
|
||||
import React from 'react'
|
||||
import ReactDOM from 'react-dom/client'
|
||||
import { BrowserRouter, Routes, Route } from 'react-router-dom'
|
||||
import App from './App'
|
||||
import { OAuthCallbackPage } from './components/OAuthCallbackPage'
|
||||
import { CardList } from './components/CardList'
|
||||
import { OAuthEndpointHandler } from './utils/oauth-endpoints'
|
||||
|
||||
// Initialize OAuth endpoint handlers for dynamic client metadata and JWKS
|
||||
// DISABLED: This may interfere with BrowserOAuthClient
|
||||
// OAuthEndpointHandler.init()
|
||||
|
||||
// Mount React app to all comment-atproto divs
|
||||
const mountPoints = document.querySelectorAll('#comment-atproto');
|
||||
console.log(`Found ${mountPoints.length} comment-atproto mount points`);
|
||||
|
||||
mountPoints.forEach((mountPoint, index) => {
|
||||
console.log(`Mounting React app to comment-atproto #${index + 1}`);
|
||||
ReactDOM.createRoot(mountPoint as HTMLElement).render(
|
||||
<React.StrictMode>
|
||||
<BrowserRouter>
|
||||
<Routes>
|
||||
<Route path="/oauth/callback" element={<OAuthCallbackPage />} />
|
||||
<Route path="/list" element={<CardList />} />
|
||||
<Route path="*" element={<App />} />
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
</React.StrictMode>,
|
||||
);
|
||||
});
|
||||
@@ -31,32 +31,18 @@ export default defineConfig(({ mode }) => {
|
||||
// Generate standalone index.html for testing
|
||||
{
|
||||
name: 'generate-standalone-html',
|
||||
writeBundle() {
|
||||
// Generate standalone index.html for testing
|
||||
writeBundle(options, bundle) {
|
||||
// Find actual generated filenames
|
||||
const jsFile = Object.keys(bundle).find(fileName => fileName.startsWith('assets/comment-atproto') && fileName.endsWith('.js'))
|
||||
const cssFile = Object.keys(bundle).find(fileName => fileName.startsWith('assets/comment-atproto') && fileName.endsWith('.css'))
|
||||
|
||||
// Generate minimal index.html with just asset references
|
||||
const indexHtmlPath = path.resolve(__dirname, 'dist/index.html')
|
||||
const indexHtmlContent = `<!DOCTYPE html>
|
||||
<html lang="ja">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>ai.card OAuth Test</title>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
background-color: #0a0a0a;
|
||||
color: #ffffff;
|
||||
}
|
||||
</style>
|
||||
<script type="module" crossorigin src="/assets/comment-atproto.js"></script>
|
||||
<link rel="stylesheet" crossorigin href="/assets/comment-atproto.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="comment-atproto"></div>
|
||||
</body>
|
||||
</html>`
|
||||
const indexHtmlContent = `<!-- OAuth Comment System - Load globally for session management -->
|
||||
<script type="module" crossorigin src="/${jsFile}"></script>
|
||||
<link rel="stylesheet" crossorigin href="/${cssFile}">`
|
||||
fs.writeFileSync(indexHtmlPath, indexHtmlContent)
|
||||
console.log('Generated standalone index.html for testing')
|
||||
console.log('Generated minimal index.html with asset references')
|
||||
}
|
||||
}
|
||||
],
|
||||
@@ -65,14 +51,14 @@ export default defineConfig(({ mode }) => {
|
||||
minify: 'esbuild',
|
||||
rollupOptions: {
|
||||
output: {
|
||||
// Fixed filenames for ailog integration
|
||||
entryFileNames: 'assets/comment-atproto.js',
|
||||
chunkFileNames: 'assets/comment-atproto-[name].js',
|
||||
// Hash-based filenames to bust cache
|
||||
entryFileNames: 'assets/comment-atproto-[hash].js',
|
||||
chunkFileNames: 'assets/comment-atproto-[name]-[hash].js',
|
||||
assetFileNames: (assetInfo) => {
|
||||
if (assetInfo.name && assetInfo.name.endsWith('.css')) {
|
||||
return 'assets/comment-atproto.css';
|
||||
return 'assets/comment-atproto-[hash].css';
|
||||
}
|
||||
return 'assets/[name].[ext]';
|
||||
return 'assets/[name]-[hash].[ext]';
|
||||
}
|
||||
}
|
||||
}
|
||||
55
run.zsh
55
run.zsh
@@ -1,51 +1,57 @@
|
||||
#!/bin/zsh
|
||||
|
||||
# Simple build script for ai.log
|
||||
# Usage: ./run.zsh [serve|build|oauth|clean|tunnel|all]
|
||||
|
||||
function _env() {
|
||||
d=${0:a:h}
|
||||
ailog=$d/target/release/ailog
|
||||
oauth=$d/oauth
|
||||
myblog=$d/my-blog
|
||||
port=4173
|
||||
source $oauth/.env.production
|
||||
case $OSTYPE in
|
||||
darwin*)
|
||||
export NVM_DIR="$HOME/.nvm"
|
||||
[ -s "/opt/homebrew/opt/nvm/nvm.sh" ] && \. "/opt/homebrew/opt/nvm/nvm.sh"
|
||||
[ -s "/opt/homebrew/opt/nvm/etc/bash_completion.d/nvm" ] && \. "/opt/homebrew/opt/nvm/etc/bash_completion.d/nvm"
|
||||
;;
|
||||
esac
|
||||
}
|
||||
|
||||
function _server() {
|
||||
_env
|
||||
lsof -ti:8080 | xargs kill -9 2>/dev/null || true
|
||||
lsof -ti:$port | xargs kill -9 2>/dev/null || true
|
||||
cd $d/my-blog
|
||||
$ailog build --release
|
||||
$ailog serve --port 8080
|
||||
cargo build --release
|
||||
$ailog build
|
||||
$ailog serve --port $port
|
||||
}
|
||||
|
||||
function _server_public() {
|
||||
_env
|
||||
#cloudflared tunnel --config $d/aicard-web-oauth/cloudflared-config.yml run
|
||||
cloudflared tunnel --config $d/cloudflared-config.yml run
|
||||
}
|
||||
|
||||
function _oauth_build() {
|
||||
_env
|
||||
cd $d/aicard-web-oauth
|
||||
export NVM_DIR="$HOME/.nvm"
|
||||
[ -s "/opt/homebrew/opt/nvm/nvm.sh" ] && \. "/opt/homebrew/opt/nvm/nvm.sh" # This loads nvm
|
||||
[ -s "/opt/homebrew/opt/nvm/etc/bash_completion.d/nvm" ] && \. "/opt/homebrew/opt/nvm/etc/bash_completion.d/nvm" # This loads nvm bash_completion
|
||||
cd $oauth
|
||||
nvm use 21
|
||||
npm i
|
||||
|
||||
# Build with production environment variables
|
||||
export VITE_APP_HOST="https://log.syui.ai"
|
||||
export VITE_OAUTH_CLIENT_ID="https://log.syui.ai/client-metadata.json"
|
||||
export VITE_OAUTH_REDIRECT_URI="https://log.syui.ai/oauth/callback"
|
||||
|
||||
npm run build
|
||||
npm run preview
|
||||
rm -rf $myblog/static/assets
|
||||
cp -rf dist/* $myblog/static/
|
||||
cp $oauth/dist/index.html $myblog/templates/oauth-assets.html
|
||||
#npm run preview
|
||||
}
|
||||
|
||||
function _server_comment() {
|
||||
_env
|
||||
cargo build --release
|
||||
AILOG_DEBUG_ALL=1 $ailog stream start
|
||||
AILOG_DEBUG_ALL=1 $ailog stream start my-blog
|
||||
}
|
||||
|
||||
function _server_ollama(){
|
||||
lsof -ti:11434 | xargs kill -9 2>/dev/null || true
|
||||
brew services stop ollama
|
||||
OLLAMA_ORIGINS="https://log.syui.ai" ollama serve
|
||||
}
|
||||
|
||||
_env
|
||||
|
||||
case "${1:-serve}" in
|
||||
tunnel|c)
|
||||
_server_public
|
||||
@@ -56,6 +62,9 @@ case "${1:-serve}" in
|
||||
comment|co)
|
||||
_server_comment
|
||||
;;
|
||||
ollama|ol)
|
||||
_server_ollama
|
||||
;;
|
||||
serve|s|*)
|
||||
_server
|
||||
;;
|
||||
|
||||
@@ -28,6 +28,7 @@ Only return the enhanced content without explanations.";
|
||||
self.client.chat(system_prompt, &user_prompt).await
|
||||
}
|
||||
|
||||
#[allow(dead_code)]
|
||||
pub async fn suggest_improvements(&self, content: &str) -> Result<Vec<String>> {
|
||||
let system_prompt = "You are a content analyzer. Analyze the given content and provide:
|
||||
1. Suggestions for improving the content
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user