פרוקסי בשביל הרצת אתר אופליין

[צדיק תמים]

תנסה את httrack תוכנה מיושנת אבל עובדת מעולה לאתרים שלא תלויים ברנדור בצד לקוח עם JS

[מד]

@צדיק-תמים אני צריך את זה לאתר שכן צריך רינדור בצד לקוח בגדול.
לא נראה לי ששייך לפתור את הבעיה באופן מושלם בלי פרוקסי.

[A0533057932]

@מד https://github.com/EliShteinman/vue-docs-offline/tree/feature/offline-docker
תבדוק את זה
או מדוקר האב
https://hub.docker.com/r/a0533057932/vue-docs-offline

באם אתה רוצה אתה יכול להשוות למיין ולראות את השיוניים שנעשו ולהבין מה לעשות בפרוייקטים אחרים מהסוג הזה

[מד]

@A0533057932 כתב בפרוקסי בשביל הרצת אתר אופליין:

באם אתה רוצה אתה יכול להשוות למיין ולראות את השיוניים שנעשו ולהבין מה לעשות בפרוייקטים אחרים מהסוג הזה

בדקתי באמצעות winmerge ולא מצא שום חילוק לבד מקבצי הדוקר והreadme
אין לי דוקר ואני לא הולך להתקין אותו על מחשב החלש שלי, אז לא נראה שפתרת את הבעיה.
לדוגמא, ראה אם ה-preview שבדף הזה vuejs.org/tutorial/#step-1 (כלומר localhost:8080/tutorial/#step-1) עובד אצלך.

[מד]

טוב חברים, אני כבר התחלתי לעשות משהו. אני אעדכן בל"נ.

[A0533057932]

@מד עובד לי חלק
למה החלטת שזה לא יעבוד??

[מד]

@A0533057932 ה-preview שבדף localhost:8080/tutorial/#step-1 עובד אצלך חלק? בלי אינטרנט? מוזר מאוד. כתבתי למעלה למה.

[A0533057932]

@מד לא התייחסת לזה כמובן

#!/bin/bash
set -euo pipefail

# =============================================================================
# patch-offline.sh
# Patches the Vue.js docs for fully offline operation:
#   - Downloads CDN libraries locally
#   - Removes analytics, ads, external search
#   - Adds VitePress local search
# =============================================================================

PROJECT_DIR="${1:-.}"
PUBLIC_DIR="${PROJECT_DIR}/src/public"
OFFLINE_LIBS_DIR="${PUBLIC_DIR}/offline-libs"

echo "==> Patching project for offline mode..."

# -----------------------------------------------------------------------------
# 1. Download CDN libraries used in REPL import-maps
# -----------------------------------------------------------------------------
echo "==> Downloading CDN libraries for offline REPL..."
mkdir -p "${OFFLINE_LIBS_DIR}"

download_cdn() {
  local url="$1"
  local dest="$2"
  echo "    Downloading: ${url}"
  curl -sL --fail --retry 3 "${url}" -o "${dest}" || {
    echo "    WARNING: Failed to download ${url}"
    return 1
  }
}

download_cdn \
  "https://cdn.jsdelivr.net/npm/marked/+esm" \
  "${OFFLINE_LIBS_DIR}/marked.esm.js"

download_cdn \
  "https://cdn.jsdelivr.net/npm/lodash-es/+esm" \
  "${OFFLINE_LIBS_DIR}/lodash-es.esm.js"

download_cdn \
  "https://cdn.jsdelivr.net/npm/js-confetti/+esm" \
  "${OFFLINE_LIBS_DIR}/js-confetti.esm.js"

VUE_VERSION=$(node -e "
const pkg = require('${PROJECT_DIR}/node_modules/vue/package.json');
console.log(pkg.version);
")
echo "    Vue version detected: ${VUE_VERSION}"

download_cdn \
  "https://unpkg.com/vue@${VUE_VERSION}/dist/vue.esm-browser.js" \
  "${OFFLINE_LIBS_DIR}/vue.esm-browser.js"

# -----------------------------------------------------------------------------
# 2. Patch import-map.json files to use local paths
# -----------------------------------------------------------------------------
echo "==> Patching import-map.json files..."

cat > "${PROJECT_DIR}/src/examples/src/markdown/import-map.json" << 'EOF'
{
  "imports": {
    "marked": "/offline-libs/marked.esm.js",
    "lodash-es": "/offline-libs/lodash-es.esm.js"
  }
}
EOF

cat > "${PROJECT_DIR}/src/examples/src/list-transition/import-map.json" << 'EOF'
{
  "imports": {
    "lodash-es": "/offline-libs/lodash-es.esm.js"
  }
}
EOF

cat > "${PROJECT_DIR}/src/tutorial/src/step-15/import-map.json" << 'EOF'
{
  "imports": {
    "js-confetti": "/offline-libs/js-confetti.esm.js"
  }
}
EOF

# -----------------------------------------------------------------------------
# 3. Patch REPL components to use local Vue build
# -----------------------------------------------------------------------------
echo "==> Patching REPL components to use local Vue..."

sed -i 's|`https://unpkg.com/vue@${[^}]*}/dist/vue.esm-browser.js`|`/offline-libs/vue.esm-browser.js`|g' \
  "${PROJECT_DIR}/src/examples/ExampleRepl.vue" \
  "${PROJECT_DIR}/src/tutorial/TutorialRepl.vue"

# -----------------------------------------------------------------------------
# 4. Patch .vitepress/config.ts
# -----------------------------------------------------------------------------
echo "==> Patching VitePress config..."

CONFIG_FILE="${PROJECT_DIR}/.vitepress/config.ts"

node -e "
const fs = require('fs');
let c = fs.readFileSync('${CONFIG_FILE}', 'utf-8');

// Remove Fathom Analytics script block
c = c.replace(/,?\s*\[\s*'script',\s*\{[^}]*cdn\.usefathom\.com[^}]*\}\s*\]/s, '');

// Remove Bitterbrains ad script block
c = c.replace(/,?\s*\[\s*'script',\s*\{[^}]*media\.bitterbrains\.com[^}]*\}\s*\]/s, '');

// Remove preconnect to automation.vuejs.org
c = c.replace(/,?\s*\[\s*'link',\s*\{[^}]*automation\.vuejs\.org[^}]*\}\s*\]/s, '');

// Remove carbonAds config
c = c.replace(/,?\s*carbonAds:\s*\{[^}]*\}/s, '');

// Remove algolia config (multiline with nested object)
c = c.replace(/,?\s*algolia:\s*\{[^}]*searchParameters:\s*\{[^}]*\}\s*\}/s, '');

// Add local search provider (insert after extends: baseConfig,)
if (!c.includes(\"search:\")) {
  c = c.replace(
    'extends: baseConfig,',
    'extends: baseConfig,\\n\\n  search: {\\n    provider: \\'local\\'\\n  },'
  );
}

fs.writeFileSync('${CONFIG_FILE}', c, 'utf-8');
console.log('    Config patched successfully');
"

# -----------------------------------------------------------------------------
# 5. Patch sponsors.ts to disable external fetch
# -----------------------------------------------------------------------------
echo "==> Patching sponsors to disable external fetch..."

SPONSORS_FILE="${PROJECT_DIR}/.vitepress/theme/components/sponsors.ts"
sed -i 's|`https://automation.vuejs.org`|`/sponsors-stub`|g' "${SPONSORS_FILE}"

# Create a local stub data.json for sponsors
mkdir -p "${PUBLIC_DIR}/sponsors-stub"
cat > "${PUBLIC_DIR}/sponsors-stub/data.json" << 'SPONSOREOF'
{
  "special": [],
  "platinum": [],
  "platinum_china": [],
  "gold": [],
  "silver": [],
  "bronze": []
}
SPONSOREOF

echo "==> Offline patching complete!"

[מד]

@A0533057932 חמוד (קלוד אפוס 4.6 זה אכן חיה מטורפת )
אבל זה פתרון בשביל רק אתר אחד, וגם אני חושב שלא עברת על כל פרטיו, יש את ה-examples ועוד שכולם דורשים קבצים חיצונים מעוד מעוד מקורות והפיתוח אין סופית.

החיה שלך עובד אצלי גם כן מצד השני ליצור פרוקסי משוכללת שישמש כפתרון בשביל כל האתרים כאלו בלי התעסקות יתירה בס"ד.

[מד]

נגמר בעז"ה.
החיה עשתה עבודה טובה...

https://github.com/MDD72/offline-server

זה שילוב של שרת+פרוקסי ששומר הכל בקאש משלה כך שאתרים סטטיים (כמו docs וכדומה) יעבוד אופליין בצורה מושלמת.

בעצם אפשר פשוט להתחבר להפרוקסי ואח"כ לגלוש לכל אתר סטטי, ואח"כ האתר יהיה זמין אופליין.
אבל באופן זה, רק הדפים שבקרנו שם במצב אונליין יהיו זמינים אח"כ אופליין.

אז כאן בא גם חלק ה'שרת'.
דהיינו שיש כמה אתרים שהקוד שלהם זמין בגיטהוב, אז אפשר להוריד את כל הקוד, ולהמיר לקבצי web (בדר"כ יש על זה הוראות בגיטהוב) ולהכניס אותם לתיקיית public, אח"כ יש להריץ את הפרוקסי+שרת שלנו (offline-server) ולגלוש דרכו כך שאם יש צורך בקבצים חיצוניים נוספים (כמו ספריות/דוגמאות/ועוד/ועוד) הכל ישמר בקאש, ואח"כ האתר יהיה זמין אופליין בצורה מושלמת בעז"ה.

---

לדוגמא לגבי הדוקמנציה של vue.

1. קודם כל יש להוריד את המאגר של הקוד מ-https://github.com/vuejs/docs

2. לקמפל/לבנות ולהמיר לקבצי web כפי ההוראות שם.

3. להעתיק את הקבצים שנוצרו בתוך תיקיית docs/.vitepress/dist של המאגר, לתוך תיקיית offline-server/public שלנו.

4. ולהריץ את ה-offline-server (שרת+פרוקסי)

node server.js -b

יפתח לכם חלון מיוחד בדפדפן שבו תוכלו לגלוש גם אופליין, אבל:

• רק באתרים שגלשתם קודם במצב אונליין.
• רק באתרים סטטיים.

בהצלחה רבה!