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

[מד]

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

אז כרגע אני לומד vue.
הורדתי את הdocs והרצתי אותה, אך לא עובד אופליין...
כי הוא צריך להוריד את הספרייה של vue מ-CDN חיצוני.

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

אבל זה:

• לא יציב. (נמחק מהר מאיליו)
• לא שלם, יש עוד הרבה קבצי JS וCSS ועוד ספציפיים לכל דף. (ואני לא יכנס בכל דף כל פעם שאני הולך אופליין)

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

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

תודה.

[dovid]

אני חושב שספציפית עבור VUE כל הצורך מיותר, אני חושב שאפשר לשנות את ההפניה מהCDN לתיקיית הספריה שהותקנה על ידי מנהל החבילות.
אגב שווה לך להכיר כלי שהייתי משתמש בו הרבה:
https://devdocs.io/
הכל שמה ניתן להתקנה אופליין לגמרי.

[מד]

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

אני חושב שספציפית עבור VUE כל הצורך מיותר, אני חושב שאפשר לשנות את ההפניה מהCDN לתיקיית הספריה שהותקנה על ידי מנהל החבילות.

לא מצאתי הפניה נורמלי, רק כמו:
https://unpkg.com/vue@${vueVersion.value || defaultVersion}/dist/vue.esm-browser.js
במקרה הקודם (כשהקאש נמחק) ערכתי קובץ הHOSTS לשרת לוקלי שהגשתי דרכו את הקובץ, אבל אחר כמה דקות זה לא עבד, כי כל כמה דפים משתמשים בגירסה אחרת של VUE (כלומר vue@3.5.28 / vue@3.5.30).
הגשתי אז אותו קובץ דרך כמה קישורים... אבל כנ"ל זה מאוד לא יציב ומאוד לא נוח, וזה הכל רק לגבי הספרייה המרכזית. ציינתי למעלה שמדובר בעוד הרבה קבצים שונים.

אגב שווה לך להכיר כלי שהייתי משתמש בו הרבה:
https://devdocs.io/
הכל שמה ניתן להתקנה אופליין לגמרי.

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

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

אם אני לא ימצא, אני יעשה משהו בעצמי, אני רק רוצה לחסוך את העבודה במדה שיש.

[צדיק תמים]

תנסה את 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 ועוד שכולם דורשים קבצים חיצונים מעוד מעוד מקורות והפיתוח אין סופית.

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