Compare commits
17 Commits
721c9b4e71
...
v0.1.4
| Author | SHA1 | Date | |
|---|---|---|---|
2838e494d6
|
|||
|
5838adf5a6
|
|||
|
f52249c292
|
|||
|
aa70183d75
|
|||
|
4ad1d3edf6
|
|||
|
55bf725491
|
|||
|
13f1785081
|
|||
|
bb6d51a602
|
|||
|
a4114c5be3
|
|||
|
5c13dc0a1c
|
|||
|
cef0675a88
|
|||
|
fd223290df
|
|||
|
5f4382911b
|
|||
|
95cee69482
|
|||
|
33c166fa0c
|
|||
|
36863e4d9f
|
|||
|
fb0e5107cf
|
@@ -34,7 +34,18 @@
|
||||
"Bash(./run.zsh:*)",
|
||||
"Bash(npm run dev:*)",
|
||||
"Bash(./target/release/ailog:*)",
|
||||
"Bash(rg:*)"
|
||||
"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 2>/dev/null || 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 2>/dev/null)"
|
||||
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
|
||||
169
.github/workflows/release.yml
vendored
Normal file
169
.github/workflows/release.yml
vendored
Normal file
@@ -0,0 +1,169 @@
|
||||
name: Release
|
||||
|
||||
on:
|
||||
push:
|
||||
tags:
|
||||
- 'v*'
|
||||
workflow_dispatch:
|
||||
inputs:
|
||||
tag:
|
||||
description: 'Release tag (e.g., v1.0.0)'
|
||||
required: true
|
||||
default: 'v0.1.0'
|
||||
|
||||
permissions:
|
||||
contents: write
|
||||
actions: read
|
||||
|
||||
env:
|
||||
CARGO_TERM_COLOR: always
|
||||
OPENSSL_STATIC: true
|
||||
OPENSSL_VENDOR: true
|
||||
|
||||
jobs:
|
||||
build:
|
||||
name: Build ${{ matrix.target }}
|
||||
runs-on: ${{ matrix.os }}
|
||||
timeout-minutes: 60
|
||||
strategy:
|
||||
matrix:
|
||||
include:
|
||||
- target: x86_64-unknown-linux-gnu
|
||||
os: ubuntu-latest
|
||||
artifact_name: ailog
|
||||
asset_name: ailog-linux-x86_64
|
||||
- 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
|
||||
|
||||
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' && matrix.target == 'aarch64-unknown-linux-gnu'
|
||||
run: |
|
||||
sudo apt-get update
|
||||
sudo apt-get install -y gcc-aarch64-linux-gnu binutils-aarch64-linux-gnu
|
||||
|
||||
- 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
|
||||
|
||||
# Use appropriate strip command for cross-compilation
|
||||
if [[ "${{ matrix.target }}" == "aarch64-unknown-linux-gnu" ]]; then
|
||||
aarch64-linux-gnu-strip ${{ matrix.artifact_name }} || echo "Strip failed, continuing..."
|
||||
elif [[ "${{ matrix.os }}" == "windows-latest" ]]; then
|
||||
strip ${{ matrix.artifact_name }} || echo "Strip failed, continuing..."
|
||||
else
|
||||
strip ${{ matrix.artifact_name }} || echo "Strip failed, continuing..."
|
||||
fi
|
||||
|
||||
# Create archive
|
||||
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
|
||||
|
||||
release:
|
||||
name: Create Release
|
||||
needs: build
|
||||
runs-on: ubuntu-latest
|
||||
permissions:
|
||||
contents: write
|
||||
actions: read
|
||||
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)" >> release_notes.md
|
||||
echo "- macOS (Intel, Apple Silicon)" >> 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 "\`\`\`" >> 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
|
||||
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-*
|
||||
|
||||
40
Cargo.toml
40
Cargo.toml
@@ -1,6 +1,6 @@
|
||||
[package]
|
||||
name = "ailog"
|
||||
version = "0.1.0"
|
||||
version = "0.1.3"
|
||||
edition = "2021"
|
||||
authors = ["syui"]
|
||||
description = "A static blog generator with AI features"
|
||||
@@ -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
|
||||
@@ -1,205 +0,0 @@
|
||||
# OAuth Integration Changes for ai.log
|
||||
|
||||
## 概要
|
||||
ailogブログシステムにATProto/Bluesky OAuth認証を使用したコメントシステムを統合しました。
|
||||
|
||||
## 実装された機能
|
||||
|
||||
### 1. OAuth認証システム
|
||||
- **ATProto BrowserOAuthClient** を使用した完全なOAuth 2.1フロー
|
||||
- Blueskyアカウントでのワンクリック認証
|
||||
- セッション永続化とリフレッシュトークン対応
|
||||
|
||||
### 2. コメントシステム
|
||||
- 認証済みユーザーによるコメント投稿
|
||||
- ATProto collection (`ai.syui.log`) への直接保存
|
||||
- リアルタイムコメント表示と削除機能
|
||||
- 複数PDS対応のコメント取得
|
||||
|
||||
### 3. 管理機能
|
||||
- 管理者用ユーザーリスト管理
|
||||
- DID解決とプロフィール情報の自動取得
|
||||
- JSON形式でのレコード表示・編集
|
||||
|
||||
## 技術的変更点
|
||||
|
||||
### aicard-web-oauth (React OAuth App)
|
||||
|
||||
#### 新規ファイル
|
||||
```
|
||||
aicard-web-oauth/
|
||||
├── src/
|
||||
│ ├── services/
|
||||
│ │ ├── atproto-oauth.ts # BrowserOAuthClient wrapper
|
||||
│ │ └── auth.ts # Legacy auth service
|
||||
│ ├── components/
|
||||
│ │ ├── OAuthCallback.tsx # OAuth callback handler
|
||||
│ │ └── OAuthCallbackPage.tsx
|
||||
│ └── utils/
|
||||
│ ├── oauth-endpoints.ts # OAuth endpoint utilities
|
||||
│ └── oauth-keys.ts # OAuth configuration
|
||||
```
|
||||
|
||||
#### 主要な変更
|
||||
- **App.tsx**: URL parameter/hash detection, 詳細デバッグログ追加
|
||||
- **vite.config.ts**: 固定ファイル名出力 (`comment-atproto.js/css`)
|
||||
- **main.tsx**: React mount点を `comment-atproto` に変更
|
||||
|
||||
#### OAuthCallback.tsx の機能
|
||||
- Query parameters と hash parameters の両方を検出
|
||||
- 認証完了後の自動URL cleanup (`window.history.replaceState`)
|
||||
- Popup/direct navigation 両対応
|
||||
- Fallback認証とエラーハンドリング
|
||||
|
||||
### ailog (Rust Static Site Generator)
|
||||
|
||||
#### OAuth Callback Route
|
||||
**src/commands/serve.rs**:
|
||||
```rust
|
||||
} else if path.starts_with("/oauth/callback") {
|
||||
// Handle OAuth callback - serve the callback HTML page
|
||||
match serve_oauth_callback().await {
|
||||
Ok((ct, data, cc)) => ("200 OK", ct, data, cc),
|
||||
Err(e) => // Error handling
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### OAuth Callback HTML
|
||||
- ATProto認証パラメータの検出・処理
|
||||
- Hash parameters でのリダイレクト (`#code=...&state=...`)
|
||||
- Popup/window間通信対応
|
||||
- localStorage を使った一時的なデータ保存
|
||||
|
||||
### Template Integration
|
||||
|
||||
#### base.html (ailog templates)
|
||||
```html
|
||||
<!-- OAuth Comment System - Load in head for early initialization -->
|
||||
<script type="module" crossorigin src="/assets/comment-atproto.js"></script>
|
||||
<link rel="stylesheet" crossorigin href="/assets/comment-atproto.css">
|
||||
```
|
||||
|
||||
#### index.html / post.html
|
||||
```html
|
||||
<!-- OAuth Comment System -->
|
||||
<div id="comment-atproto"></div>
|
||||
```
|
||||
|
||||
### OAuth Configuration
|
||||
|
||||
#### client-metadata.json
|
||||
```json
|
||||
{
|
||||
"client_id": "https://log.syui.ai/client-metadata.json",
|
||||
"redirect_uris": [
|
||||
"https://log.syui.ai/oauth/callback",
|
||||
"https://log.syui.ai/"
|
||||
],
|
||||
"scope": "atproto transition:generic",
|
||||
"dpop_bound_access_tokens": true
|
||||
}
|
||||
```
|
||||
|
||||
## インフラストラクチャ
|
||||
|
||||
### Cloudflare Tunnel
|
||||
```yaml
|
||||
# cloudflared-config.yml
|
||||
ingress:
|
||||
- hostname: log.syui.ai
|
||||
service: http://localhost:4173 # ailog serve
|
||||
```
|
||||
|
||||
### Build Process
|
||||
1. **aicard-web-oauth**: `npm run build` → `dist/assets/`
|
||||
2. **Asset copy**: `dist/assets/*` → `my-blog/public/assets/`
|
||||
3. **ailog build**: Template processing + static file serving
|
||||
|
||||
## データフロー
|
||||
|
||||
### OAuth認証フロー
|
||||
```
|
||||
1. User clicks "atproto" button
|
||||
2. BrowserOAuthClient initiates OAuth flow
|
||||
3. Redirect to Bluesky authorization server
|
||||
4. Callback to https://log.syui.ai/oauth/callback
|
||||
5. ailog serves OAuth callback HTML
|
||||
6. JavaScript processes parameters and redirects with hash
|
||||
7. React app detects hash parameters and completes authentication
|
||||
8. URL cleanup removes OAuth parameters
|
||||
```
|
||||
|
||||
### コメント投稿フロー
|
||||
```
|
||||
1. Authenticated user writes comment
|
||||
2. React app calls ATProto API
|
||||
3. Record saved to ai.syui.log collection
|
||||
4. Comments reloaded from all configured PDS endpoints
|
||||
5. Real-time display update
|
||||
```
|
||||
|
||||
## 設定ファイル
|
||||
|
||||
### 必須ファイル
|
||||
- `my-blog/static/client-metadata.json` - OAuth client configuration
|
||||
- `aicard-web-oauth/.env.production` - Production environment variables
|
||||
- `cloudflared-config.yml` - Tunnel routing configuration
|
||||
|
||||
### 開発用ファイル
|
||||
- `aicard-web-oauth/.env.development` - Development settings
|
||||
- `aicard-web-oauth/public/client-metadata.json` - Local OAuth metadata
|
||||
|
||||
## 主要な修正点
|
||||
|
||||
### 1. Build System
|
||||
- Vite output ファイル名を固定 (`comment-atproto.js/css`)
|
||||
- Build時のclient-metadata.json更新自動化
|
||||
|
||||
### 2. OAuth Callback処理
|
||||
- Hash parameters 対応でSPA architectureに最適化
|
||||
- URL cleanup でクリーンなユーザー体験
|
||||
- Popup/direct navigation 両対応
|
||||
|
||||
### 3. Error Handling
|
||||
- Network エラー時のfallback認証
|
||||
- セッション期限切れ時の再認証
|
||||
- OAuth parameter不足時の適切なエラー表示
|
||||
|
||||
### 4. Session Management
|
||||
- localStorage + sessionStorage 併用
|
||||
- OAuth state/code verifier の適切な管理
|
||||
- Cross-tab session sharing
|
||||
|
||||
## テスト済み機能
|
||||
|
||||
✅ **動作確認済み**
|
||||
- OAuth認証 (Bluesky)
|
||||
- コメント投稿・削除
|
||||
- セッション永続化
|
||||
- URL parameter cleanup
|
||||
- 複数PDS対応
|
||||
- 管理者機能
|
||||
|
||||
⏳ **今後のテスト項目**
|
||||
- Incognito/private mode での動作
|
||||
- 複数タブでの同時使用
|
||||
- Long-term session の動作確認
|
||||
|
||||
## 運用メモ
|
||||
|
||||
### デプロイ手順
|
||||
1. `cd aicard-web-oauth && npm run build`
|
||||
2. `cp -r dist/assets/* ../my-blog/public/assets/`
|
||||
3. `cd my-blog && cargo build --release`
|
||||
4. ailog serve でテスト確認
|
||||
|
||||
### トラブルシューティング
|
||||
- OAuth エラー: client-metadata.json のredirect_uris確認
|
||||
- コメント表示されない: Network tab でAPI response確認
|
||||
- Build エラー: Node.js/npm version, dependencies確認
|
||||
|
||||
## 関連リンク
|
||||
- [ATProto OAuth Specification](https://atproto.com/specs/oauth)
|
||||
- [Bluesky OAuth Documentation](https://github.com/bluesky-social/atproto/blob/main/packages/api/OAUTH.md)
|
||||
- [BrowserOAuthClient API](https://github.com/bluesky-social/atproto/tree/main/packages/oauth-client-browser)
|
||||
195
README.md
195
README.md
@@ -2,56 +2,93 @@
|
||||
|
||||
AI-powered static blog generator with ATProto integration, part of the ai.ai ecosystem.
|
||||
|
||||
## 🚀 Quick Start
|
||||
## 🎯 Gitea Action Usage
|
||||
|
||||
### Basic Blog Setup
|
||||
Use ailog in your Gitea Actions workflow:
|
||||
|
||||
```bash
|
||||
# 1. Initialize a new blog
|
||||
ailog init my-blog
|
||||
```yaml
|
||||
name: Deploy Blog
|
||||
on:
|
||||
push:
|
||||
branches: [main]
|
||||
|
||||
# 2. Configure your blog (edit my-blog/config.toml)
|
||||
[site]
|
||||
title = "My Blog"
|
||||
description = "A blog powered by ailog"
|
||||
base_url = "https://yourdomain.com"
|
||||
language = "ja"
|
||||
|
||||
[build]
|
||||
highlight_code = true
|
||||
minify = false
|
||||
|
||||
[ai]
|
||||
enabled = false
|
||||
auto_translate = false
|
||||
comment_moderation = false
|
||||
|
||||
# 3. Build your blog
|
||||
ailog build
|
||||
|
||||
# 4. Serve locally
|
||||
ailog serve
|
||||
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
|
||||
```
|
||||
|
||||
### ATProto Comment System
|
||||
## 🚀 Quick Start
|
||||
|
||||
### Development Setup
|
||||
|
||||
```bash
|
||||
# 1. Add OAuth configuration to my-blog/config.toml
|
||||
[oauth]
|
||||
json = "client-metadata.json"
|
||||
redirect = "oauth/callback"
|
||||
admin = "your-did-here"
|
||||
collection_comment = "ai.syui.log"
|
||||
collection_user = "ai.syui.log.user"
|
||||
# 1. Clone and setup
|
||||
git clone https://git.syui.ai/ai/log
|
||||
cd log
|
||||
|
||||
# 2. Build OAuth app
|
||||
ailog oauth build my-blog
|
||||
# 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. Authenticate with ATProto
|
||||
ailog auth init
|
||||
# 3. Start Ollama (for Ask AI)
|
||||
brew install ollama
|
||||
ollama pull gemma2:2b
|
||||
OLLAMA_ORIGINS="https://example.com" ollama serve
|
||||
```
|
||||
|
||||
# 4. Start stream monitoring
|
||||
ailog stream start my-blog
|
||||
### 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
|
||||
@@ -74,8 +111,8 @@ ailog stream start my-blog
|
||||
|
||||
| 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)
|
||||
@@ -124,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アカウントでログイン
|
||||
@@ -341,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
|
||||
@@ -572,6 +632,47 @@ 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
|
||||
|
||||
|
||||
148
action.yml
Normal file
148
action.yml
Normal file
@@ -0,0 +1,148 @@
|
||||
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: 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
|
||||
shell: bash
|
||||
run: |
|
||||
# Get latest release version (for Gitea, adjust API endpoint if needed)
|
||||
if command -v curl >/dev/null 2>&1; then
|
||||
LATEST_VERSION=$(curl -s https://api.github.com/repos/syui/ailog/releases/latest | jq -r .tag_name 2>/dev/null || echo "v0.1.1")
|
||||
else
|
||||
LATEST_VERSION="v0.1.1" # fallback version
|
||||
fi
|
||||
echo "Target version: $LATEST_VERSION"
|
||||
|
||||
# Check current binary version if exists
|
||||
mkdir -p ./bin
|
||||
if [ -f "./bin/ailog" ]; then
|
||||
CURRENT_VERSION=$(./bin/ailog --version 2>/dev/null || 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..."
|
||||
# Try GitHub first, then fallback to local build
|
||||
if curl -sL https://github.com/syui/ailog/releases/download/$LATEST_VERSION/ailog-linux-x86_64.tar.gz | tar -xzf - 2>/dev/null; then
|
||||
mv ailog ./bin/ailog
|
||||
chmod +x ./bin/ailog
|
||||
echo "Downloaded binary: $(./bin/ailog --version 2>/dev/null)"
|
||||
else
|
||||
echo "Download failed, building from source..."
|
||||
if command -v cargo >/dev/null 2>&1; then
|
||||
cargo build --release
|
||||
cp ./target/release/ailog ./bin/ailog
|
||||
echo "Built from source: $(./bin/ailog --version 2>/dev/null)"
|
||||
else
|
||||
echo "Error: Neither download nor cargo build available"
|
||||
exit 1
|
||||
fi
|
||||
fi
|
||||
else
|
||||
echo "Binary is up to date"
|
||||
chmod +x ./bin/ailog
|
||||
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)
|
||||
|
||||
./bin/ailog build \
|
||||
--content ${{ 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
|
||||
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'
|
||||
```
|
||||
|
||||
14
my-blog/static/.well-known/jwks.json
Normal file
14
my-blog/static/.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"
|
||||
}
|
||||
]
|
||||
}
|
||||
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
|
||||
}
|
||||
905
my-blog/static/css/style.css
Normal file
905
my-blog/static/css/style.css
Normal file
@@ -0,0 +1,905 @@
|
||||
/* 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);
|
||||
}
|
||||
|
||||
/* File name display for code blocks - top bar style */
|
||||
.article-body pre[data-filename]::before {
|
||||
content: attr(data-filename);
|
||||
display: block;
|
||||
background: #2D2D30;
|
||||
color: #AE81FF;
|
||||
padding: 8px 16px;
|
||||
font-size: 12px;
|
||||
font-family: 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', monospace;
|
||||
border-bottom: 1px solid #3E3D32;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
/* Adjust padding when filename is present */
|
||||
.article-body pre[data-filename] code {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
|
||||
/* Mobile filename display */
|
||||
.article-body pre[data-filename]::before {
|
||||
padding: 6px 12px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.article-body pre[data-filename] code {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.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 %}
|
||||
@@ -1,13 +1,27 @@
|
||||
# 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
|
||||
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
|
||||
|
||||
@@ -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 {
|
||||
@@ -714,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;
|
||||
@@ -726,7 +741,7 @@
|
||||
}
|
||||
|
||||
.json-button:hover {
|
||||
background: #45a049;
|
||||
filter: brightness(1.1);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
@@ -759,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,5 +1,6 @@
|
||||
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';
|
||||
@@ -45,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)
|
||||
@@ -83,8 +86,8 @@ function App() {
|
||||
}
|
||||
};
|
||||
|
||||
// Jetstream + Cache example
|
||||
const jetstream = setupJetstream();
|
||||
// Jetstream + Cache example (disabled for now)
|
||||
// const jetstream = setupJetstream();
|
||||
|
||||
// キャッシュからコメント読み込み
|
||||
const loadCachedComments = () => {
|
||||
@@ -102,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
|
||||
@@ -144,8 +150,12 @@ 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 === appConfig.adminDid) {
|
||||
loadUserListRecords();
|
||||
@@ -164,6 +174,7 @@ 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
|
||||
@@ -174,6 +185,7 @@ function App() {
|
||||
setIsLoading(false);
|
||||
|
||||
// 認証状態に関係なく、コメントを読み込む
|
||||
console.log('No auth session found, loading all comments anyway...');
|
||||
loadAllComments();
|
||||
};
|
||||
|
||||
@@ -211,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) => {
|
||||
@@ -298,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) {
|
||||
@@ -449,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();
|
||||
@@ -480,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) {
|
||||
@@ -675,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) {
|
||||
@@ -966,11 +1027,30 @@ 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>
|
||||
{activeTab === 'comments' && (
|
||||
<div className="comments-list">
|
||||
<div className="comments-header">
|
||||
<h3>Comments</h3>
|
||||
</div>
|
||||
{comments.filter(shouldShowComment).length === 0 ? (
|
||||
<p className="no-comments">
|
||||
{appConfig.rkey ? `No comments for this post yet` : `No comments yet`}
|
||||
@@ -980,9 +1060,25 @@ function App() {
|
||||
<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">
|
||||
@@ -1039,7 +1135,92 @@ function App() {
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 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 && (
|
||||
@@ -1076,6 +1257,8 @@ function App() {
|
||||
</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>
|
||||
);
|
||||
};
|
||||
@@ -4,15 +4,22 @@ export interface AppConfig {
|
||||
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 } {
|
||||
function generateCollectionNames(host: string): { comment: string; user: string; chat: string } {
|
||||
try {
|
||||
// Remove protocol if present
|
||||
const cleanHost = host.replace(/^https?:\/\//, '');
|
||||
@@ -31,14 +38,16 @@ function generateCollectionNames(host: string): { comment: string; user: string
|
||||
|
||||
return {
|
||||
comment: collectionBase,
|
||||
user: `${collectionBase}.user`
|
||||
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'
|
||||
user: 'ai.syui.log.user',
|
||||
chat: 'ai.syui.log.chat'
|
||||
};
|
||||
}
|
||||
}
|
||||
@@ -61,22 +70,39 @@ export function getAppConfig(): AppConfig {
|
||||
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)'
|
||||
rkey: rkey || 'none (not on post page)',
|
||||
ai: { enabled: aiEnabled, askAi: aiAskAi, provider: aiProvider, model: aiModel, host: aiHost },
|
||||
bskyPublicApi
|
||||
});
|
||||
|
||||
return {
|
||||
adminDid,
|
||||
collections,
|
||||
host,
|
||||
rkey
|
||||
rkey,
|
||||
aiEnabled,
|
||||
aiAskAi,
|
||||
aiProvider,
|
||||
aiModel,
|
||||
aiHost,
|
||||
bskyPublicApi
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
@@ -10,14 +10,21 @@ import { OAuthEndpointHandler } from './utils/oauth-endpoints'
|
||||
// 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>,
|
||||
)
|
||||
// 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>,
|
||||
);
|
||||
});
|
||||
17
run.zsh
17
run.zsh
@@ -17,7 +17,6 @@ function _env() {
|
||||
}
|
||||
|
||||
function _server() {
|
||||
_env
|
||||
lsof -ti:$port | xargs kill -9 2>/dev/null || true
|
||||
cd $d/my-blog
|
||||
cargo build --release
|
||||
@@ -26,12 +25,10 @@ function _server() {
|
||||
}
|
||||
|
||||
function _server_public() {
|
||||
_env
|
||||
cloudflared tunnel --config $d/cloudflared-config.yml run
|
||||
}
|
||||
|
||||
function _oauth_build() {
|
||||
_env
|
||||
cd $oauth
|
||||
nvm use 21
|
||||
npm i
|
||||
@@ -43,11 +40,18 @@ function _oauth_build() {
|
||||
}
|
||||
|
||||
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
|
||||
@@ -58,6 +62,9 @@ case "${1:-serve}" in
|
||||
comment|co)
|
||||
_server_comment
|
||||
;;
|
||||
ollama|ol)
|
||||
_server_ollama
|
||||
;;
|
||||
serve|s|*)
|
||||
_server
|
||||
;;
|
||||
|
||||
@@ -30,6 +30,7 @@ title = "My Blog"
|
||||
description = "A blog powered by ailog"
|
||||
base_url = "https://example.com"
|
||||
language = "ja"
|
||||
author = "Your Name"
|
||||
|
||||
[build]
|
||||
highlight_code = true
|
||||
@@ -88,7 +89,7 @@ comment_moderation = false
|
||||
</div>
|
||||
|
||||
<footer class="main-footer">
|
||||
<p>© 2025 {{ config.title }}</p>
|
||||
<p>© {{ config.author | default(value=config.title) }}</p>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -4,20 +4,32 @@ use colored::Colorize;
|
||||
use std::fs;
|
||||
use std::path::PathBuf;
|
||||
|
||||
pub async fn execute(title: String, format: String) -> Result<()> {
|
||||
pub async fn execute(title: String, slug: Option<String>, format: String) -> Result<()> {
|
||||
println!("{} {}", "Creating new post:".green(), title);
|
||||
|
||||
let date = Local::now();
|
||||
|
||||
// Use provided slug or generate from title
|
||||
let slug_part = slug.unwrap_or_else(|| {
|
||||
title
|
||||
.to_lowercase()
|
||||
.replace(' ', "-")
|
||||
.chars()
|
||||
.filter(|c| c.is_alphanumeric() || *c == '-')
|
||||
.collect()
|
||||
});
|
||||
|
||||
let filename = format!(
|
||||
"{}-{}.{}",
|
||||
date.format("%Y-%m-%d"),
|
||||
title.to_lowercase().replace(' ', "-"),
|
||||
slug_part,
|
||||
format
|
||||
);
|
||||
|
||||
let content = format!(
|
||||
r#"---
|
||||
title: "{}"
|
||||
slug: "{}"
|
||||
date: {}
|
||||
tags: []
|
||||
draft: false
|
||||
@@ -28,6 +40,7 @@ draft: false
|
||||
Write your content here...
|
||||
"#,
|
||||
title,
|
||||
slug_part,
|
||||
date.format("%Y-%m-%d"),
|
||||
title
|
||||
);
|
||||
|
||||
@@ -53,6 +53,54 @@ pub async fn build(project_dir: PathBuf) -> Result<()> {
|
||||
.and_then(|v| v.as_str())
|
||||
.unwrap_or("ai.syui.log.user");
|
||||
|
||||
let collection_chat = oauth_config.get("collection_chat")
|
||||
.and_then(|v| v.as_str())
|
||||
.unwrap_or("ai.syui.log.chat");
|
||||
|
||||
// Extract AI config if present
|
||||
let ai_config = config.get("ai")
|
||||
.and_then(|v| v.as_table());
|
||||
|
||||
let ai_enabled = ai_config
|
||||
.and_then(|ai| ai.get("enabled"))
|
||||
.and_then(|v| v.as_bool())
|
||||
.unwrap_or(false);
|
||||
|
||||
let ai_ask_ai = ai_config
|
||||
.and_then(|ai| ai.get("ask_ai"))
|
||||
.and_then(|v| v.as_bool())
|
||||
.unwrap_or(false);
|
||||
|
||||
let ai_provider = ai_config
|
||||
.and_then(|ai| ai.get("provider"))
|
||||
.and_then(|v| v.as_str())
|
||||
.unwrap_or("ollama");
|
||||
|
||||
let ai_model = ai_config
|
||||
.and_then(|ai| ai.get("model"))
|
||||
.and_then(|v| v.as_str())
|
||||
.unwrap_or("gemma2:2b");
|
||||
|
||||
let ai_host = ai_config
|
||||
.and_then(|ai| ai.get("host"))
|
||||
.and_then(|v| v.as_str())
|
||||
.unwrap_or("https://ollama.syui.ai");
|
||||
|
||||
let ai_system_prompt = ai_config
|
||||
.and_then(|ai| ai.get("system_prompt"))
|
||||
.and_then(|v| v.as_str())
|
||||
.unwrap_or("you are a helpful ai assistant");
|
||||
|
||||
let ai_did = ai_config
|
||||
.and_then(|ai| ai.get("ai_did"))
|
||||
.and_then(|v| v.as_str())
|
||||
.unwrap_or("did:plc:4hqjfn7m6n5hno3doamuhgef");
|
||||
|
||||
// Extract bsky_api from oauth config
|
||||
let bsky_api = oauth_config.get("bsky_api")
|
||||
.and_then(|v| v.as_str())
|
||||
.unwrap_or("https://public.api.bsky.app");
|
||||
|
||||
// 4. Create .env.production content
|
||||
let env_content = format!(
|
||||
r#"# Production environment variables
|
||||
@@ -64,10 +112,24 @@ VITE_ADMIN_DID={}
|
||||
# Collection names for OAuth app
|
||||
VITE_COLLECTION_COMMENT={}
|
||||
VITE_COLLECTION_USER={}
|
||||
VITE_COLLECTION_CHAT={}
|
||||
|
||||
# Collection names for ailog (backward compatibility)
|
||||
AILOG_COLLECTION_COMMENT={}
|
||||
AILOG_COLLECTION_USER={}
|
||||
AILOG_COLLECTION_CHAT={}
|
||||
|
||||
# AI Configuration
|
||||
VITE_AI_ENABLED={}
|
||||
VITE_AI_ASK_AI={}
|
||||
VITE_AI_PROVIDER={}
|
||||
VITE_AI_MODEL={}
|
||||
VITE_AI_HOST={}
|
||||
VITE_AI_SYSTEM_PROMPT="{}"
|
||||
VITE_AI_DID={}
|
||||
|
||||
# API Configuration
|
||||
VITE_BSKY_PUBLIC_API={}
|
||||
"#,
|
||||
base_url,
|
||||
base_url, client_id_path,
|
||||
@@ -75,8 +137,18 @@ AILOG_COLLECTION_USER={}
|
||||
admin_did,
|
||||
collection_comment,
|
||||
collection_user,
|
||||
collection_chat,
|
||||
collection_comment,
|
||||
collection_user
|
||||
collection_user,
|
||||
collection_chat,
|
||||
ai_enabled,
|
||||
ai_ask_ai,
|
||||
ai_provider,
|
||||
ai_model,
|
||||
ai_host,
|
||||
ai_system_prompt,
|
||||
ai_did,
|
||||
bsky_api
|
||||
);
|
||||
|
||||
// 5. Find oauth directory (relative to current working directory)
|
||||
|
||||
@@ -17,11 +17,13 @@ pub struct SiteConfig {
|
||||
pub description: String,
|
||||
pub base_url: String,
|
||||
pub language: String,
|
||||
pub author: Option<String>,
|
||||
}
|
||||
|
||||
#[derive(Debug, Serialize, Deserialize, Clone)]
|
||||
pub struct BuildConfig {
|
||||
pub highlight_code: bool,
|
||||
pub highlight_theme: Option<String>,
|
||||
pub minify: bool,
|
||||
}
|
||||
|
||||
@@ -30,6 +32,12 @@ pub struct AiConfig {
|
||||
pub enabled: bool,
|
||||
pub auto_translate: bool,
|
||||
pub comment_moderation: bool,
|
||||
pub ask_ai: Option<bool>,
|
||||
pub provider: Option<String>,
|
||||
pub model: Option<String>,
|
||||
pub host: Option<String>,
|
||||
pub system_prompt: Option<String>,
|
||||
pub ai_did: Option<String>,
|
||||
pub api_key: Option<String>,
|
||||
pub gpt_endpoint: Option<String>,
|
||||
pub atproto_config: Option<AtprotoConfig>,
|
||||
@@ -135,15 +143,23 @@ impl Default for Config {
|
||||
description: "A blog powered by ailog".to_string(),
|
||||
base_url: "https://example.com".to_string(),
|
||||
language: "ja".to_string(),
|
||||
author: None,
|
||||
},
|
||||
build: BuildConfig {
|
||||
highlight_code: true,
|
||||
highlight_theme: Some("Monokai".to_string()),
|
||||
minify: false,
|
||||
},
|
||||
ai: Some(AiConfig {
|
||||
enabled: false,
|
||||
auto_translate: false,
|
||||
comment_moderation: false,
|
||||
ask_ai: Some(false),
|
||||
provider: Some("ollama".to_string()),
|
||||
model: Some("gemma3:4b".to_string()),
|
||||
host: None,
|
||||
system_prompt: Some("You are a helpful AI assistant trained on this blog's content.".to_string()),
|
||||
ai_did: None,
|
||||
api_key: None,
|
||||
gpt_endpoint: None,
|
||||
atproto_config: None,
|
||||
|
||||
@@ -18,7 +18,7 @@ pub struct Generator {
|
||||
|
||||
impl Generator {
|
||||
pub fn new(base_path: PathBuf, config: Config) -> Result<Self> {
|
||||
let markdown_processor = MarkdownProcessor::new(config.build.highlight_code);
|
||||
let markdown_processor = MarkdownProcessor::new(config.build.highlight_code, config.build.highlight_theme.clone());
|
||||
let template_engine = TemplateEngine::new(base_path.join("templates"))?;
|
||||
|
||||
let ai_manager = if let Some(ref ai_config) = config.ai {
|
||||
@@ -39,6 +39,20 @@ impl Generator {
|
||||
ai_manager,
|
||||
})
|
||||
}
|
||||
|
||||
fn create_config_with_timestamp(&self) -> Result<serde_json::Value> {
|
||||
let mut config_with_timestamp = serde_json::to_value(&self.config.site)?;
|
||||
if let Some(config_obj) = config_with_timestamp.as_object_mut() {
|
||||
config_obj.insert("build_timestamp".to_string(), serde_json::Value::String(
|
||||
std::time::SystemTime::now()
|
||||
.duration_since(std::time::UNIX_EPOCH)
|
||||
.unwrap()
|
||||
.as_secs()
|
||||
.to_string()
|
||||
));
|
||||
}
|
||||
Ok(config_with_timestamp)
|
||||
}
|
||||
|
||||
pub async fn build(&self) -> Result<()> {
|
||||
// Clean public directory
|
||||
@@ -184,16 +198,17 @@ impl Generator {
|
||||
|
||||
let html_content = self.markdown_processor.render(&content)?;
|
||||
|
||||
// Use slug from frontmatter if available, otherwise derive from filename
|
||||
let slug = frontmatter.get("slug")
|
||||
// Use filename (without extension) as URL slug to include date
|
||||
let filename_slug = path.file_stem()
|
||||
.and_then(|s| s.to_str())
|
||||
.unwrap_or("post")
|
||||
.to_string();
|
||||
|
||||
// Still keep the slug field from frontmatter for other purposes
|
||||
let frontmatter_slug = frontmatter.get("slug")
|
||||
.and_then(|v| v.as_str())
|
||||
.map(|s| s.to_string())
|
||||
.unwrap_or_else(|| {
|
||||
path.file_stem()
|
||||
.and_then(|s| s.to_str())
|
||||
.unwrap_or("post")
|
||||
.to_string()
|
||||
});
|
||||
.unwrap_or_else(|| filename_slug.clone());
|
||||
|
||||
let mut post = Post {
|
||||
title: frontmatter.get("title")
|
||||
@@ -205,8 +220,9 @@ impl Generator {
|
||||
.unwrap_or("")
|
||||
.to_string(),
|
||||
content: html_content,
|
||||
slug: slug.clone(),
|
||||
url: format!("/posts/{}.html", slug),
|
||||
slug: frontmatter_slug.clone(),
|
||||
filename_slug: filename_slug.clone(),
|
||||
url: format!("/posts/{}.html", filename_slug),
|
||||
tags: frontmatter.get("tags")
|
||||
.and_then(|v| v.as_array())
|
||||
.map(|arr| arr.iter()
|
||||
@@ -233,7 +249,7 @@ impl Generator {
|
||||
lang: "en".to_string(),
|
||||
title: translated_title,
|
||||
content: translated_html,
|
||||
url: format!("/posts/{}-en.html", post.slug),
|
||||
url: format!("/posts/{}-en.html", post.filename_slug),
|
||||
}]);
|
||||
}
|
||||
Err(e) => eprintln!("Translation failed: {}", e),
|
||||
@@ -259,7 +275,7 @@ impl Generator {
|
||||
// Enhance posts with additional metadata for timeline view
|
||||
let enhanced_posts: Vec<serde_json::Value> = posts.iter().map(|post| {
|
||||
let excerpt = self.extract_excerpt(&post.content);
|
||||
let markdown_url = format!("/posts/{}.md", post.slug);
|
||||
let markdown_url = format!("/posts/{}.md", post.filename_slug);
|
||||
let translation_url = if let Some(ref translations) = post.translations {
|
||||
translations.first().map(|t| t.url.clone())
|
||||
} else {
|
||||
@@ -281,7 +297,8 @@ impl Generator {
|
||||
}).collect();
|
||||
|
||||
let mut context = tera::Context::new();
|
||||
context.insert("config", &self.config.site);
|
||||
let config_with_timestamp = self.create_config_with_timestamp()?;
|
||||
context.insert("config", &config_with_timestamp);
|
||||
context.insert("posts", &enhanced_posts);
|
||||
|
||||
let html = self.template_engine.render("index.html", &context)?;
|
||||
@@ -294,14 +311,15 @@ impl Generator {
|
||||
|
||||
async fn generate_post_page(&self, post: &Post) -> Result<()> {
|
||||
let mut context = tera::Context::new();
|
||||
context.insert("config", &self.config.site);
|
||||
let config_with_timestamp = self.create_config_with_timestamp()?;
|
||||
context.insert("config", &config_with_timestamp);
|
||||
|
||||
// Create enhanced post with additional URLs
|
||||
let mut enhanced_post = post.clone();
|
||||
enhanced_post.url = format!("/posts/{}.html", post.slug);
|
||||
enhanced_post.url = format!("/posts/{}.html", post.filename_slug);
|
||||
|
||||
// Add markdown view URL
|
||||
let markdown_url = format!("/posts/{}.md", post.slug);
|
||||
let markdown_url = format!("/posts/{}.md", post.filename_slug);
|
||||
|
||||
// Add translation URLs if available
|
||||
let translation_urls: Vec<String> = if let Some(ref translations) = post.translations {
|
||||
@@ -328,7 +346,7 @@ impl Generator {
|
||||
let output_dir = self.base_path.join("public/posts");
|
||||
fs::create_dir_all(&output_dir)?;
|
||||
|
||||
let output_path = output_dir.join(format!("{}.html", post.slug));
|
||||
let output_path = output_dir.join(format!("{}.html", post.filename_slug));
|
||||
fs::write(output_path, html)?;
|
||||
|
||||
// Generate markdown view
|
||||
@@ -339,7 +357,8 @@ impl Generator {
|
||||
|
||||
async fn generate_translation_page(&self, post: &Post, translation: &Translation) -> Result<()> {
|
||||
let mut context = tera::Context::new();
|
||||
context.insert("config", &self.config.site);
|
||||
let config_with_timestamp = self.create_config_with_timestamp()?;
|
||||
context.insert("config", &config_with_timestamp);
|
||||
context.insert("post", &TranslatedPost {
|
||||
title: translation.title.clone(),
|
||||
date: post.date.clone(),
|
||||
@@ -356,7 +375,7 @@ impl Generator {
|
||||
let output_dir = self.base_path.join("public/posts");
|
||||
fs::create_dir_all(&output_dir)?;
|
||||
|
||||
let output_path = output_dir.join(format!("{}-{}.html", post.slug, translation.lang));
|
||||
let output_path = output_dir.join(format!("{}-{}.html", post.filename_slug, translation.lang));
|
||||
fs::write(output_path, html)?;
|
||||
|
||||
Ok(())
|
||||
@@ -413,11 +432,11 @@ impl Generator {
|
||||
.unwrap_or("")
|
||||
});
|
||||
|
||||
if file_slug == post.slug {
|
||||
if file_slug == post.slug || path.file_stem().and_then(|s| s.to_str()).unwrap_or("") == post.filename_slug {
|
||||
let output_dir = self.base_path.join("public/posts");
|
||||
fs::create_dir_all(&output_dir)?;
|
||||
|
||||
let output_path = output_dir.join(format!("{}.md", post.slug));
|
||||
let output_path = output_dir.join(format!("{}.md", post.filename_slug));
|
||||
fs::write(output_path, content)?;
|
||||
break;
|
||||
}
|
||||
@@ -447,6 +466,7 @@ pub struct Post {
|
||||
pub date: String,
|
||||
pub content: String,
|
||||
pub slug: String,
|
||||
pub filename_slug: String, // Added for URL generation
|
||||
pub url: String,
|
||||
pub tags: Vec<String>,
|
||||
pub translations: Option<Vec<Translation>>,
|
||||
|
||||
28
src/main.rs
28
src/main.rs
@@ -18,10 +18,14 @@ mod mcp;
|
||||
#[derive(Parser)]
|
||||
#[command(name = "ailog")]
|
||||
#[command(about = "A static blog generator with AI features")]
|
||||
#[command(version)]
|
||||
#[command(disable_version_flag = true)]
|
||||
struct Cli {
|
||||
/// Print version information
|
||||
#[arg(short = 'V', long = "version")]
|
||||
version: bool,
|
||||
|
||||
#[command(subcommand)]
|
||||
command: Commands,
|
||||
command: Option<Commands>,
|
||||
}
|
||||
|
||||
#[derive(Subcommand)]
|
||||
@@ -42,6 +46,9 @@ enum Commands {
|
||||
New {
|
||||
/// Title of the post
|
||||
title: String,
|
||||
/// Slug for the post (optional, derived from title if not provided)
|
||||
#[arg(short, long)]
|
||||
slug: Option<String>,
|
||||
/// Post format
|
||||
#[arg(short, long, default_value = "md")]
|
||||
format: String,
|
||||
@@ -132,17 +139,28 @@ enum OauthCommands {
|
||||
#[tokio::main]
|
||||
async fn main() -> Result<()> {
|
||||
let cli = Cli::parse();
|
||||
|
||||
// Handle version flag
|
||||
if cli.version {
|
||||
println!("{}", env!("CARGO_PKG_VERSION"));
|
||||
return Ok(());
|
||||
}
|
||||
|
||||
// Require subcommand if no version flag
|
||||
let command = cli.command.ok_or_else(|| {
|
||||
anyhow::anyhow!("No subcommand provided. Use --help for usage information.")
|
||||
})?;
|
||||
|
||||
match cli.command {
|
||||
match command {
|
||||
Commands::Init { path } => {
|
||||
commands::init::execute(path).await?;
|
||||
}
|
||||
Commands::Build { path } => {
|
||||
commands::build::execute(path).await?;
|
||||
}
|
||||
Commands::New { title, format, path } => {
|
||||
Commands::New { title, slug, format, path } => {
|
||||
std::env::set_current_dir(path)?;
|
||||
commands::new::execute(title, format).await?;
|
||||
commands::new::execute(title, slug, format).await?;
|
||||
}
|
||||
Commands::Serve { port, path } => {
|
||||
std::env::set_current_dir(path)?;
|
||||
|
||||
@@ -9,14 +9,16 @@ use serde_json::Value;
|
||||
|
||||
pub struct MarkdownProcessor {
|
||||
highlight_code: bool,
|
||||
highlight_theme: String,
|
||||
syntax_set: SyntaxSet,
|
||||
theme_set: ThemeSet,
|
||||
}
|
||||
|
||||
impl MarkdownProcessor {
|
||||
pub fn new(highlight_code: bool) -> Self {
|
||||
pub fn new(highlight_code: bool, highlight_theme: Option<String>) -> Self {
|
||||
Self {
|
||||
highlight_code,
|
||||
highlight_theme: highlight_theme.unwrap_or_else(|| "Monokai".to_string()),
|
||||
syntax_set: SyntaxSet::load_defaults_newlines(),
|
||||
theme_set: ThemeSet::load_defaults(),
|
||||
}
|
||||
@@ -86,14 +88,19 @@ impl MarkdownProcessor {
|
||||
let parser = Parser::new_ext(content, options);
|
||||
let mut html_output = String::new();
|
||||
let mut code_block = None;
|
||||
let theme = &self.theme_set.themes["base16-ocean.dark"];
|
||||
// Force use dark theme for better visibility on dark background
|
||||
let theme = self.theme_set.themes.get("base16-monokai.dark")
|
||||
.or_else(|| self.theme_set.themes.get("base16-ocean.dark"))
|
||||
.or_else(|| self.theme_set.themes.get("Solarized (dark)"))
|
||||
.or_else(|| self.theme_set.themes.get(&self.highlight_theme))
|
||||
.unwrap_or_else(|| self.theme_set.themes.values().next().unwrap());
|
||||
|
||||
let mut events = Vec::new();
|
||||
for event in parser {
|
||||
match event {
|
||||
pulldown_cmark::Event::Start(pulldown_cmark::Tag::CodeBlock(kind)) => {
|
||||
if let CodeBlockKind::Fenced(lang) = &kind {
|
||||
code_block = Some((String::new(), lang.to_string()));
|
||||
if let CodeBlockKind::Fenced(lang_info) = &kind {
|
||||
code_block = Some((String::new(), lang_info.to_string()));
|
||||
}
|
||||
}
|
||||
pulldown_cmark::Event::Text(text) => {
|
||||
@@ -104,8 +111,8 @@ impl MarkdownProcessor {
|
||||
}
|
||||
}
|
||||
pulldown_cmark::Event::End(pulldown_cmark::TagEnd::CodeBlock) => {
|
||||
if let Some((code, lang)) = code_block.take() {
|
||||
let highlighted = self.highlight_code_block(&code, &lang, theme);
|
||||
if let Some((code, lang_info)) = code_block.take() {
|
||||
let highlighted = self.highlight_code_block(&code, &lang_info, theme);
|
||||
events.push(pulldown_cmark::Event::Html(highlighted.into()));
|
||||
}
|
||||
}
|
||||
@@ -117,13 +124,41 @@ impl MarkdownProcessor {
|
||||
Ok(html_output)
|
||||
}
|
||||
|
||||
fn highlight_code_block(&self, code: &str, lang: &str, theme: &syntect::highlighting::Theme) -> String {
|
||||
fn highlight_code_block(&self, code: &str, lang_info: &str, theme: &syntect::highlighting::Theme) -> String {
|
||||
// Parse language and filename from lang_info (e.g., "sh:/path/to/file" or "rust:main.rs")
|
||||
let (lang, filename) = if lang_info.contains(':') {
|
||||
let parts: Vec<&str> = lang_info.splitn(2, ':').collect();
|
||||
(parts[0], Some(parts[1]))
|
||||
} else {
|
||||
(lang_info, None)
|
||||
};
|
||||
|
||||
// Map short language names to full names
|
||||
let lang = match lang {
|
||||
"rs" => "rust",
|
||||
"js" => "javascript",
|
||||
"ts" => "typescript",
|
||||
"sh" => "bash",
|
||||
"yml" => "yaml",
|
||||
"md" => "markdown",
|
||||
"py" => "python",
|
||||
_ => lang,
|
||||
};
|
||||
|
||||
let syntax = self.syntax_set
|
||||
.find_syntax_by_token(lang)
|
||||
.unwrap_or_else(|| self.syntax_set.find_syntax_plain_text());
|
||||
|
||||
let mut highlighter = syntect::easy::HighlightLines::new(syntax, theme);
|
||||
let mut output = String::from("<pre><code>");
|
||||
|
||||
// Create pre tag with optional filename attribute
|
||||
let pre_tag = if let Some(filename) = filename {
|
||||
format!("<pre data-filename=\"{}\">", filename)
|
||||
} else {
|
||||
"<pre>".to_string()
|
||||
};
|
||||
|
||||
let mut output = format!("{}<code>", pre_tag);
|
||||
|
||||
for line in code.lines() {
|
||||
let ranges = highlighter.highlight_line(line, &self.syntax_set).unwrap();
|
||||
|
||||
96
src/ollama_proxy.rs
Normal file
96
src/ollama_proxy.rs
Normal file
@@ -0,0 +1,96 @@
|
||||
use actix_web::{web, App, HttpResponse, HttpServer, middleware};
|
||||
use serde::{Deserialize, Serialize};
|
||||
use std::collections::HashMap;
|
||||
use std::sync::Mutex;
|
||||
use chrono::{DateTime, Utc};
|
||||
|
||||
#[derive(Clone)]
|
||||
struct RateLimiter {
|
||||
requests: Arc<Mutex<HashMap<String, Vec<DateTime<Utc>>>>>,
|
||||
limit_per_hour: usize,
|
||||
}
|
||||
|
||||
impl RateLimiter {
|
||||
fn new(limit: usize) -> Self {
|
||||
Self {
|
||||
requests: Arc::new(Mutex::new(HashMap::new())),
|
||||
limit_per_hour: limit,
|
||||
}
|
||||
}
|
||||
|
||||
fn check_limit(&self, user_id: &str) -> bool {
|
||||
let mut requests = self.requests.lock().unwrap();
|
||||
let now = Utc::now();
|
||||
let hour_ago = now - chrono::Duration::hours(1);
|
||||
|
||||
let user_requests = requests.entry(user_id.to_string()).or_insert(Vec::new());
|
||||
user_requests.retain(|&time| time > hour_ago);
|
||||
|
||||
if user_requests.len() < self.limit_per_hour {
|
||||
user_requests.push(now);
|
||||
true
|
||||
} else {
|
||||
false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#[derive(Deserialize)]
|
||||
struct GenerateRequest {
|
||||
model: String,
|
||||
prompt: String,
|
||||
stream: bool,
|
||||
options: Option<serde_json::Value>,
|
||||
}
|
||||
|
||||
async fn proxy_generate(
|
||||
req: web::Json<GenerateRequest>,
|
||||
data: web::Data<AppState>,
|
||||
user_info: web::ReqData<UserInfo>, // ATProto認証から取得
|
||||
) -> Result<HttpResponse, actix_web::Error> {
|
||||
// レート制限チェック
|
||||
if !data.rate_limiter.check_limit(&user_info.did) {
|
||||
return Ok(HttpResponse::TooManyRequests()
|
||||
.json(serde_json::json!({
|
||||
"error": "Rate limit exceeded. Please try again later."
|
||||
})));
|
||||
}
|
||||
|
||||
// プロンプトサイズ制限
|
||||
if req.prompt.len() > 500 {
|
||||
return Ok(HttpResponse::BadRequest()
|
||||
.json(serde_json::json!({
|
||||
"error": "Prompt too long. Maximum 500 characters."
|
||||
})));
|
||||
}
|
||||
|
||||
// Ollamaへのリクエスト転送
|
||||
let client = reqwest::Client::new();
|
||||
let response = client
|
||||
.post("http://localhost:11434/api/generate")
|
||||
.json(&req.into_inner())
|
||||
.send()
|
||||
.await?;
|
||||
|
||||
let body = response.bytes().await?;
|
||||
Ok(HttpResponse::Ok()
|
||||
.content_type("application/json")
|
||||
.body(body))
|
||||
}
|
||||
|
||||
#[actix_web::main]
|
||||
async fn main() -> std::io::Result<()> {
|
||||
let rate_limiter = RateLimiter::new(20); // 1時間に20リクエスト
|
||||
|
||||
HttpServer::new(move || {
|
||||
App::new()
|
||||
.app_data(web::Data::new(AppState {
|
||||
rate_limiter: rate_limiter.clone(),
|
||||
}))
|
||||
.wrap(middleware::Logger::default())
|
||||
.route("/api/generate", web::post().to(proxy_generate))
|
||||
})
|
||||
.bind("127.0.0.1:8080")?
|
||||
.run()
|
||||
.await
|
||||
}
|
||||
22
systemd/system/ailog-stream.service
Normal file
22
systemd/system/ailog-stream.service
Normal file
@@ -0,0 +1,22 @@
|
||||
[Unit]
|
||||
Description=ailog stream monitoring service
|
||||
After=network.target
|
||||
Wants=network.target
|
||||
|
||||
[Service]
|
||||
Type=simple
|
||||
User=syui
|
||||
Group=syui
|
||||
WorkingDirectory=/home/syui/git/log
|
||||
ExecStart=/home/syui/.cargo/bin/ailog stream start my-blog
|
||||
Restart=always
|
||||
RestartSec=5
|
||||
StandardOutput=journal
|
||||
StandardError=journal
|
||||
|
||||
# Environment variables if needed
|
||||
Environment=RUST_LOG=info
|
||||
Environment=AILOG_DEBUG_ALL=1
|
||||
|
||||
[Install]
|
||||
WantedBy=multi-user.target
|
||||
25
systemd/system/cloudflared-log.service
Normal file
25
systemd/system/cloudflared-log.service
Normal file
@@ -0,0 +1,25 @@
|
||||
[Unit]
|
||||
Description=Cloudflared tunnel for log.syui.ai
|
||||
After=network.target
|
||||
Wants=network.target
|
||||
|
||||
[Service]
|
||||
Type=simple
|
||||
User=syui
|
||||
Group=syui
|
||||
WorkingDirectory=/home/syui/git/log
|
||||
ExecStart=/usr/bin/cloudflared tunnel --config /home/syui/git/log/cloudflared-config.yml run
|
||||
Restart=always
|
||||
RestartSec=5
|
||||
StandardOutput=journal
|
||||
StandardError=journal
|
||||
|
||||
# Security hardening
|
||||
NoNewPrivileges=true
|
||||
ProtectSystem=strict
|
||||
ProtectHome=read-only
|
||||
ReadWritePaths=/home/syui/git/log
|
||||
PrivateTmp=true
|
||||
|
||||
[Install]
|
||||
WantedBy=multi-user.target
|
||||
93
workers/ollama-proxy.js
Normal file
93
workers/ollama-proxy.js
Normal file
@@ -0,0 +1,93 @@
|
||||
// Cloudflare Worker for secure Ollama proxy
|
||||
export default {
|
||||
async fetch(request, env, ctx) {
|
||||
// CORS preflight
|
||||
if (request.method === 'OPTIONS') {
|
||||
return new Response(null, {
|
||||
headers: {
|
||||
'Access-Control-Allow-Origin': 'https://log.syui.ai',
|
||||
'Access-Control-Allow-Methods': 'POST, OPTIONS',
|
||||
'Access-Control-Allow-Headers': 'Content-Type, X-User-Token',
|
||||
'Access-Control-Max-Age': '86400',
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Verify origin
|
||||
const origin = request.headers.get('Origin');
|
||||
const referer = request.headers.get('Referer');
|
||||
|
||||
// 許可されたオリジンのみ
|
||||
const allowedOrigins = [
|
||||
'https://log.syui.ai',
|
||||
'https://log.pages.dev' // Cloudflare Pages preview
|
||||
];
|
||||
|
||||
if (!origin || !allowedOrigins.some(allowed => origin.startsWith(allowed))) {
|
||||
return new Response('Forbidden', { status: 403 });
|
||||
}
|
||||
|
||||
// ユーザー認証トークン検証（オプション）
|
||||
const userToken = request.headers.get('X-User-Token');
|
||||
if (env.REQUIRE_AUTH && !userToken) {
|
||||
return new Response('Unauthorized', { status: 401 });
|
||||
}
|
||||
|
||||
// リクエストボディを取得
|
||||
const body = await request.json();
|
||||
|
||||
// プロンプトサイズ制限
|
||||
if (body.prompt && body.prompt.length > 1000) {
|
||||
return new Response(JSON.stringify({
|
||||
error: 'Prompt too long. Maximum 1000 characters.'
|
||||
}), {
|
||||
status: 400,
|
||||
headers: { 'Content-Type': 'application/json' }
|
||||
});
|
||||
}
|
||||
|
||||
// レート制限（CF Workers KV使用）
|
||||
if (env.RATE_LIMITER) {
|
||||
const clientIP = request.headers.get('CF-Connecting-IP');
|
||||
const rateLimitKey = `rate:${clientIP}`;
|
||||
const currentCount = await env.RATE_LIMITER.get(rateLimitKey) || 0;
|
||||
|
||||
if (currentCount >= 20) {
|
||||
return new Response(JSON.stringify({
|
||||
error: 'Rate limit exceeded. Try again later.'
|
||||
}), {
|
||||
status: 429,
|
||||
headers: { 'Content-Type': 'application/json' }
|
||||
});
|
||||
}
|
||||
|
||||
// カウント増加（1時間TTL）
|
||||
await env.RATE_LIMITER.put(rateLimitKey, currentCount + 1, {
|
||||
expirationTtl: 3600
|
||||
});
|
||||
}
|
||||
|
||||
// Ollamaへプロキシ
|
||||
const ollamaResponse = await fetch(env.OLLAMA_API_URL || 'https://ollama.syui.ai/api/generate', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
// 内部認証ヘッダー（必要に応じて）
|
||||
'X-Internal-Token': env.OLLAMA_INTERNAL_TOKEN || ''
|
||||
},
|
||||
body: JSON.stringify(body)
|
||||
});
|
||||
|
||||
// レスポンスを返す
|
||||
const responseData = await ollamaResponse.text();
|
||||
|
||||
return new Response(responseData, {
|
||||
status: ollamaResponse.status,
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Access-Control-Allow-Origin': origin,
|
||||
'Cache-Control': 'no-store'
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
20
workers/wrangler.toml
Normal file
20
workers/wrangler.toml
Normal file
@@ -0,0 +1,20 @@
|
||||
name = "ollama-proxy"
|
||||
main = "ollama-proxy.js"
|
||||
compatibility_date = "2024-01-01"
|
||||
|
||||
# 環境変数
|
||||
[vars]
|
||||
REQUIRE_AUTH = false
|
||||
|
||||
# 本番環境
|
||||
[env.production.vars]
|
||||
OLLAMA_API_URL = "https://ollama.syui.ai/api/generate"
|
||||
REQUIRE_AUTH = true
|
||||
|
||||
# KVネームスペース（レート制限用）
|
||||
[[kv_namespaces]]
|
||||
binding = "RATE_LIMITER"
|
||||
id = "your-kv-namespace-id"
|
||||
|
||||
# シークレット（wrangler secret putで設定）
|
||||
# OLLAMA_INTERNAL_TOKEN = "your-internal-token"
|
||||
Reference in New Issue
Block a user