diff --git a/.github/workflows/analyze.yml b/.github/workflows/analyze.yml deleted file mode 100644 index 87dcfdc73..000000000 --- a/.github/workflows/analyze.yml +++ /dev/null @@ -1,91 +0,0 @@ -name: Analyze Bundle - -on: - pull_request: - push: - branches: - - main # change this if your default branch is named differently - workflow_dispatch: - -jobs: - analyze: - runs-on: ubuntu-latest - steps: - - uses: actions/checkout@v2 - - - name: Set up node - uses: actions/setup-node@v1 - with: - node-version: '20.x' - - - name: Install dependencies - uses: bahmutov/npm-install@v1.7.10 - - - name: Restore next build - uses: actions/cache@v2 - id: restore-build-cache - env: - cache-name: cache-next-build - with: - path: .next/cache - # change this if you prefer a more strict cache - key: ${{ runner.os }}-build-${{ env.cache-name }} - - - name: Build next.js app - # change this if your site requires a custom build command - run: ./node_modules/.bin/next build - - # Here's the first place where next-bundle-analysis' own script is used - # This step pulls the raw bundle stats for the current bundle - - name: Analyze bundle - run: npx -p nextjs-bundle-analysis@0.5.0 report - - - name: Upload bundle - uses: actions/upload-artifact@v2 - with: - path: .next/analyze/__bundle_analysis.json - name: bundle_analysis.json - - - name: Download base branch bundle stats - uses: dawidd6/action-download-artifact@v2 - if: success() && github.event.number - with: - workflow: analyze.yml - branch: ${{ github.event.pull_request.base.ref }} - name: bundle_analysis.json - path: .next/analyze/base/bundle - - # And here's the second place - this runs after we have both the current and - # base branch bundle stats, and will compare them to determine what changed. - # There are two configurable arguments that come from package.json: - # - # - budget: optional, set a budget (bytes) against which size changes are measured - # it's set to 350kb here by default, as informed by the following piece: - # https://infrequently.org/2021/03/the-performance-inequality-gap/ - # - # - red-status-percentage: sets the percent size increase where you get a red - # status indicator, defaults to 20% - # - # Either of these arguments can be changed or removed by editing the `nextBundleAnalysis` - # entry in your package.json file. - - name: Compare with base branch bundle - if: success() && github.event.number - run: ls -laR .next/analyze/base && npx -p nextjs-bundle-analysis compare - - - name: Upload analysis comment - uses: actions/upload-artifact@v2 - with: - name: analysis_comment.txt - path: .next/analyze/__bundle_analysis_comment.txt - - - name: Save PR number - run: echo ${{ github.event.number }} > ./pr_number - - - name: Upload PR number - uses: actions/upload-artifact@v2 - with: - name: pr_number - path: ./pr_number - - # The actual commenting happens in the other action, matching the guidance in - # https://securitylab.github.com/research/github-actions-preventing-pwn-requests/ diff --git a/.github/workflows/analyze_comment.yml b/.github/workflows/analyze_comment.yml deleted file mode 100644 index 5a3047cfc..000000000 --- a/.github/workflows/analyze_comment.yml +++ /dev/null @@ -1,55 +0,0 @@ -name: Analyze Bundle (Comment) - -on: - workflow_run: - workflows: ["Analyze Bundle"] - types: - - completed - -jobs: - comment: - runs-on: ubuntu-latest - if: > - ${{ github.event.workflow_run.event == 'pull_request' && - github.event.workflow_run.conclusion == 'success' }} - steps: - - name: Download base branch bundle stats - uses: dawidd6/action-download-artifact@v2 - with: - workflow: analyze.yml - run_id: ${{ github.event.workflow_run.id }} - name: analysis_comment.txt - path: analysis_comment.txt - - - name: Download PR number - uses: dawidd6/action-download-artifact@v2 - with: - workflow: analyze.yml - run_id: ${{ github.event.workflow_run.id }} - name: pr_number - path: pr_number - - - name: Get comment body - id: get-comment-body - if: success() - run: | - echo 'body<> $GITHUB_OUTPUT - echo '' >> $GITHUB_OUTPUT - echo '## Size changes' >> $GITHUB_OUTPUT - echo '' >> $GITHUB_OUTPUT - echo '
' >> $GITHUB_OUTPUT - echo '' >> $GITHUB_OUTPUT - cat analysis_comment.txt/__bundle_analysis_comment.txt >> $GITHUB_OUTPUT - echo '' >> $GITHUB_OUTPUT - echo '
' >> $GITHUB_OUTPUT - echo '' >> $GITHUB_OUTPUT - echo 'EOF' >> $GITHUB_OUTPUT - pr_number=$(cat pr_number/pr_number) - echo "pr-number=$pr_number" >> $GITHUB_OUTPUT - - - name: Comment - uses: marocchino/sticky-pull-request-comment@v2 - with: - header: next-bundle-analysis - number: ${{ steps.get-comment-body.outputs.pr-number }} - message: ${{ steps.get-comment-body.outputs.body }} diff --git a/.github/workflows/nextjs.yml b/.github/workflows/nextjs.yml new file mode 100644 index 000000000..90ff64636 --- /dev/null +++ b/.github/workflows/nextjs.yml @@ -0,0 +1,88 @@ +name: Deploy React Docs (Next.js) to GitHub Pages + +on: + push: + branches: ["main"] + workflow_dispatch: + +permissions: + contents: read + pages: write + id-token: write + +concurrency: + group: "pages" + cancel-in-progress: false + +jobs: + build: + runs-on: ubuntu-latest + + steps: + - name: Checkout + uses: actions/checkout@v4 + + - name: Setup Node.js 20 + uses: actions/setup-node@v4 + with: + node-version: "20" + cache: "yarn" + + - name: Setup Yarn Classic + run: npm i -g yarn@1.22.22 + + - name: Setup GitHub Pages (Next.js) + uses: actions/configure-pages@v5 + with: + static_site_generator: next + + - name: Restore Next.js cache + uses: actions/cache@v4 + with: + path: | + .next/cache + key: ${{ runner.os }}-nextjs-${{ hashFiles('**/yarn.lock') }}-${{ hashFiles('**/*.[jt]s', '**/*.[jt]sx', '**/*.md', '**/*.mdx') }} + restore-keys: | + ${{ runner.os }}-nextjs-${{ hashFiles('**/yarn.lock') }}- + + - name: Install dependencies + run: yarn install --frozen-lockfile + + - name: Build site + run: yarn build + + - name: Patch encoded dynamic chunk filename for GitHub Pages + run: | + set -e + PAGES_CHUNKS_DIR="out/_next/static/chunks/pages" + if [ -d "$PAGES_CHUNKS_DIR" ]; then + for f in "$PAGES_CHUNKS_DIR"/\[\[...markdownPath\]\]-*.js; do + if [ -f "$f" ]; then + base="$(basename "$f")" + encoded="${base//\[\[...markdownPath\]\]/%5B%5B...markdownPath%5D%5D}" + cp "$f" "$PAGES_CHUNKS_DIR/$encoded" + fi + done + fi + + - name: Verify output folder + run: | + ls -la + test -d out || (echo "ERROR: ./out not found after build" && exit 1) + + - name: Upload Pages artifact + uses: actions/upload-pages-artifact@v3 + with: + path: ./out + + deploy: + needs: build + runs-on: ubuntu-latest + environment: + name: github-pages + url: ${{ steps.deployment.outputs.page_url }} + + steps: + - name: Deploy to GitHub Pages + id: deployment + uses: actions/deploy-pages@v4 diff --git a/.github/workflows/site_lint.yml b/.github/workflows/site_lint.yml deleted file mode 100644 index 34ca6d7b8..000000000 --- a/.github/workflows/site_lint.yml +++ /dev/null @@ -1,27 +0,0 @@ -name: Site Lint / Heading ID check - -on: - push: - branches: - - main # change this if your default branch is named differently - pull_request: - types: [opened, synchronize, reopened] - -jobs: - lint: - runs-on: ubuntu-latest - - name: Lint on node 20.x and ubuntu-latest - - steps: - - uses: actions/checkout@v1 - - name: Use Node.js 20.x - uses: actions/setup-node@v3 - with: - node-version: 20.x - - - name: Install deps and build (with cache) - uses: bahmutov/npm-install@v1.8.32 - - - name: Lint codebase - run: yarn ci-check diff --git a/CONTRIBUTE.md b/CONTRIBUTE.md new file mode 100644 index 000000000..3dd4593fb --- /dev/null +++ b/CONTRIBUTE.md @@ -0,0 +1,94 @@ +# CONTRIBUTE + +מסמך זה מגדיר תהליך מלא לתרגום `he.react.dev` לעברית. + +## מטרה + +לתרגם את כל דפי התיעוד והתוכן באתר לעברית, תוך שמירה על קוד, API names, פונקציות, מזהים טכניים ושמות חבילות באנגלית. + +## עקרונות תרגום + +1. קוד נשאר באנגלית: + - בלוקי קוד (```) + - Inline code (טקסט בין `) + - שמות פונקציות, hooks, APIs, ספריות, נתיבים ופקודות +2. טקסט הסבר, כותרות ופסקאות מתורגמים לעברית מלאה. +3. שמירה על מבנה Markdown/MDX: + - אין למחוק Frontmatter + - אין לשנות `id`, `permalink`, anchors קיימים אלא אם יש החלטה מסודרת בפרויקט +4. קישורים: + - כתובות URL נשארות כפי שהן + - טקסט הקישור מתורגם לעברית כשאפשר +5. מונחים טכניים: + - React, JSX, Hooks, State, Props יכולים להישאר באנגלית אם התרגום פוגע בבהירות + - להשתמש במינוחים עקביים לאורך כל האתר + +## היקף קבצים לתרגום + +1. תוכן האתר: + - `src/content/**/*.md` +2. דפי קהילה ובלוג: + - `src/content/community/**/*.md` + - `src/content/blog/**/*.md` +3. דפי API ו-Reference: + - `src/content/reference/**/*.md` +4. קבצי מעטפת תיעוד: + - `README.md` + - `CONTRIBUTING.md` (או גרסה עברית ייעודית) + +## תהליך עבודה מומלץ + +1. יצירת ענף עבודה: + - `git checkout main` + - `git pull origin main` + - `git checkout -b docs/hebrew-full-translation` +2. תרגום לפי אצוות קטנות (batch): + - כל PR יכלול תחום אחד: `learn`, `reference`, `community` וכו' +3. בדיקה מקומית: + - `yarn` + - `yarn dev` + - פתיחה: `http://localhost:3000` +4. בדיקות איכות: + - `yarn check-all` +5. Commit ברור לכל אצווה: + - `git add -A` + - `git commit -m "Translate learn section to Hebrew (batch 1)"` + +## צ'ק ליסט לכל קובץ מתורגם + +1. הכותרת תורגמה לעברית ברורה. +2. הפסקאות תורגמו בלי לשנות משמעות טכנית. +3. קוד נשאר זהה למקור. +4. טבלאות, רשימות ובלוקי הערות מוצגים נכון. +5. קישורים תקינים. +6. אין שגיאות Markdown/MDX. + +## QA לפני PR + +1. מעבר ידני על הדפים ששונו (Desktop + Mobile). +2. בדיקת עקביות טרמינולוגית מול דפים סמוכים. +3. חיפוש מהיר למונחים שלא תורגמו בטעות: + - לדוגמה: משפטים ארוכים באנגלית מחוץ לבלוקי קוד. +4. וידוא שלא נשברו anchors של כותרות קיימות. + +## מדיניות PR + +1. PR קטן עד בינוני עדיף על PR ענק. +2. בכותרת PR לציין את האזור המתורגם. +3. בתיאור PR לכלול: + - רשימת קבצים + - סיכום החלטות טרמינולוגיה + - צילומי מסך במידת הצורך + +## סטטוס תרגום (תבנית לעדכון) + +- `learn`: in progress +- `reference`: pending +- `community`: pending +- `blog`: pending +- `warnings/errors`: pending +- `README/CONTRIBUTING`: in progress + +## הערה חשובה + +תרגום מלא לכל האתר הוא עבודה רחבה. מומלץ לבצע באצוות מסודרות ולשמור על איכות תרגום גבוהה ועקבית במקום שינוי חד-פעמי גדול מדי. diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 0e861af35..af4c9ad3f 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,135 +1,125 @@ # Contributing -Thank you for your interest in contributing to the React Docs! +תודה על הרצון לתרום לתיעוד של React. ## Code of Conduct -Facebook has adopted a Code of Conduct that we expect project -participants to adhere to. Please [read the full text](https://code.facebook.com/codeofconduct) -so that you can understand what actions will and will not be tolerated. +יש לפעול לפי קוד ההתנהגות של הפרויקט: +https://code.facebook.com/codeofconduct -## Technical Writing Tips +## הנחיות כתיבה -This is a [good summary](https://medium.com/@kvosswinkel/coding-like-a-journalist-ee52360a16bc) for things to keep in mind when writing technical docs. +לתיעוד יש אזורים שונים עם מטרות שונות, ולכן גם סגנון שונה. כשעורכים דף קיים, שומרים על הטון של אותו אזור. -## Guidelines for Text +1. `Learn React`: + - בנוי כלמידה הדרגתית + - יש להימנע מתלויות מחזוריות בין דפים + - קורא אמור להיות מסוגל לעבור מהדף הראשון לאחרון ללא "קפיצות קדימה" +2. `API Reference`: + - מאורגן לפי APIs + - צריך להיות מקיף ומדויק + - מקרי קצה והמלצות מפורטות צריכים להופיע כאן -**Different sections intentionally have different styles.** +## הנחיות לקוד בדוגמאות -The documentation is divided into sections to cater to different learning styles and use cases. When editing an article, try to match the surrounding text in tone and style. When creating a new article, try to match the tone of the other articles in the same section. Learn about the motivation behind each section below. +1. העדיפו JSX על `createElement` (אלא אם הדף עוסק ספציפית ב-`createElement`). +2. העדיפו `const`, ואם צריך אז `let`; לא להשתמש ב-`var`. +3. אם אין יתרון ברור ל-ES6 חדש, אפשר להשתמש ב-ES5 ברור ופשוט. +4. לדוגמאות ברמת top-level, לרוב עדיף `function` בשם מאשר arrow function. +5. אין להשתמש ביכולות לא סטנדרטיות בלי לציין במפורש שהן ניסיוניות. -**[Learn React](https://react.dev/learn)** is designed to introduce fundamental concepts in a step-by-step way. Each individual article in Learn React builds on the knowledge from the previous ones, so make sure not to add any "cyclical dependencies" between them. It is important that the reader can start with the first article and work their way to the last Learn React article without ever having to "look ahead" for a definition. This explains some ordering choices (e.g. that state is explained before events, or that "thinking in React" doesn't use refs). Learn React also serves as a reference manual for React concepts, so it is important to be very strict about their definitions and relationships between them. +## סגנון קוד -**[API Reference](https://react.dev/reference/react)** is organized by APIs rather than concepts. It is intended to be exhaustive. Any corner cases or recommendations that were skipped for brevity in Learn React should be mentioned in the reference documentation for the corresponding APIs. +1. להשתמש ב-`;` +2. אין רווח בין שם פונקציה לסוגריים +3. במקרה של ספק, להיצמד ל-Prettier -**Try to follow your own instructions.** +## הדגשת שורות בקוד Markdown -When writing step-by-step instructions (e.g. how to install something), try to forget everything you know about the topic, and actually follow the instructions you wrote, a single step at time. Often you will discover that there is implicit knowledge that you forgot to mention, or that there are missing or out-of-order steps in the instructions. Bonus points for getting *somebody else* to follow the steps and watching what they struggle with. Often it would be something very simple that you have not anticipated. +שפת הדגשה: -## Guidelines for Code Examples - -### Syntax - -#### Prefer JSX to `createElement`. - -Ignore this if you're specifically describing `createElement`. - -#### Use `const` where possible, otherwise `let`. Don't use `var`. - -Ignore this if you're specifically writing about ES5. - -#### Don't use ES6 features when equivalent ES5 features have no downsides. - -Remember that ES6 is still new to a lot of people. While we use it in many places (`const` / `let`, classes, arrow functions), if the equivalent ES5 code is just as straightforward and readable, consider using it. - -In particular, you should prefer named `function` declarations over `const myFunction = () => ...` arrows for top-level functions. However, you *should* use arrow functions where they provide a tangible improvement (such as preserving `this` context inside a component). Consider both sides of the tradeoff when deciding whether to use a new feature. - -#### Don't use features that aren't standardized yet. - -For example, **don't** write this: - -```js -class MyComponent extends React.Component { - state = {value: ''}; - handleChange = (e) => { - this.setState({value: e.target.value}); - }; -} -``` - -Instead, **do** write this: - -```js -class MyComponent extends React.Component { - constructor(props) { - super(props); - this.handleChange = this.handleChange.bind(this); - this.state = {value: ''}; - } - handleChange(e) { - this.setState({value: e.target.value}); - } -} -``` - -Ignore this rule if you're specifically describing an experimental proposal. Make sure to mention its experimental nature in the code and in the surrounding text. - -### Style - -- Use semicolons. -- No space between function names and parens (`method() {}` not `method () {}`). -- When in doubt, use the default style favored by [Prettier](https://prettier.io/playground/). - -### Highlighting - -Use `js` as the highlighting language in Markdown code blocks: - -```` +````md ```js // code ``` ```` -Sometimes you'll see blocks with numbers. -They tell the website to highlight specific lines. - -You can highlight a single line: +הדגשת שורה בודדת: -```` +````md ```js {2} function hello() { - // this line will get highlighted + // highlighted } ``` ```` -A range of lines: +טווח שורות: -```` +````md ```js {2-4} function hello() { - // these lines - // will get - // highlighted + // highlighted range } ``` ```` -Or even multiple ranges: +כמה טווחים: -```` +````md ```js {2-4,6} function hello() { - // these lines - // will get - // highlighted + // highlighted lines console.log('hello'); - // also this one + // also highlighted console.log('there'); } ``` ```` -Be mindful that if you move some code in an example with highlighting, you also need to update the highlighting. +אם מזיזים קוד בדוגמה, צריך לעדכן גם את שורות ההדגשה. + +## תהליך עבודה + +### יצירת branch + +1. עברו ל-`main` מכל תיקייה בריפו המקומי: + - `git checkout main` +2. משכו את העדכונים האחרונים: + - `git pull origin main` +3. צרו branch חדש עם שם מתאים: + - `git checkout -b the-name-of-my-branch` + +### ביצוע השינוי + +1. פעלו לפי הוראות `Running locally`. +2. שמרו את הקבצים ובדקו בדפדפן. +3. שינויים בקומפוננטות React תחת `src` ייטענו עם `hot-reload`. +4. שינויים בקובצי Markdown תחת `content` ייטענו עם `hot-reload`. +5. אם עובדים עם plugins, ייתכן שתצטרכו למחוק את תיקיית `.cache` ולהפעיל את השרת מחדש. + +### בדיקות + +1. אם אפשר, בדקו כל שינוי ויזואלי בגרסאות האחרונות של דפדפנים נפוצים, גם בדסקטופ וגם במובייל. +2. הריצו: + - `yarn check-all` +3. הפקודה מריצה `Prettier`, `ESLint` ובדיקת types. + +### Commit ו-Push + +1. בצעו stage ו-commit: + - `git add -A && git commit -m "My message"` +2. העלו את ה-branch: + - `git push my-fork-name the-name-of-my-branch` +3. היכנסו לריפו של `react.dev` ב-GitHub ותראו את ה-branches שהועלו לאחרונה. +4. המשיכו לפי ההנחיות של GitHub לפתיחת PR. +5. אם אפשר, צרפו צילומי מסך לשינויים ויזואליים. לאחר push ל-GitHub יופעל גם preview build. + +## תרגום לעברית + +בעת תרגום דפים: -Don't be afraid to often use highlighting! It is very valuable when you need to focus the reader's attention on a particular detail that's easy to miss. +1. משאירים קוד, שמות APIs, פונקציות ופקודות באנגלית. +2. מתרגמים כותרות, פסקאות והסברים לעברית. +3. שומרים על מבנה Markdown/MDX ועל Frontmatter תקין. +4. שומרים על עקביות מונחים בין דפים. diff --git a/README.md b/README.md index 966131db5..c57e78c64 100644 --- a/README.md +++ b/README.md @@ -1,63 +1,70 @@ # react.dev -This repo contains the source code and documentation powering [react.dev](https://react.dev/). +מאגר זה מכיל את קוד המקור והתיעוד שמפעילים את [react.dev](https://react.dev/). -## Getting started +## התחלה מהירה -### Prerequisites +### דרישות מקדימות 1. Git -1. Node: any 12.x version starting with v12.0.0 or greater -1. Yarn: See [Yarn website for installation instructions](https://yarnpkg.com/lang/en/docs/install/) -1. A fork of the repo (for any contributions) -1. A clone of the [react.dev repo](https://github.com/reactjs/react.dev) on your local machine +2. Node: כל גרסה מסדרת 12.x החל מ-`v12.0.0` ומעלה +3. Yarn: הוראות התקנה באתר של Yarn +4. Fork לריפו (אם מתכוונים לתרום) +5. Clone מקומי של מאגר `react.dev` -### Installation +### התקנה -1. `cd react.dev` to go into the project root -3. `yarn` to install the website's npm dependencies +1. היכנסו לשורש הפרויקט: + - `cd react.dev` +2. התקינו תלויות: + - `yarn` -### Running locally +### הרצה מקומית -1. `yarn dev` to start the development server (powered by [Next.js](https://nextjs.org/)) -1. `open http://localhost:3000` to open the site in your favorite browser +1. הפעלת שרת פיתוח (Next.js): + - `yarn dev` +2. פתיחה בדפדפן: + - `http://localhost:3000` -## Contributing +## תרומה -### Guidelines +### קווים מנחים -The documentation is divided into several sections with a different tone and purpose. If you plan to write more than a few sentences, you might find it helpful to get familiar with the [contributing guidelines](https://github.com/reactjs/react.dev/blob/main/CONTRIBUTING.md#guidelines-for-text) for the appropriate sections. +התיעוד מחולק למספר אזורים עם טון ומטרה שונים. אם אתם כותבים יותר מכמה משפטים, מומלץ לעבור על [הנחיות התרומה](https://github.com/reactjs/react.dev/blob/main/CONTRIBUTING.md#guidelines-for-text) של האזור המתאים. -### Create a branch +### יצירת ענף עבודה -1. `git checkout main` from any folder in your local `react.dev` repository -1. `git pull origin main` to ensure you have the latest main code -1. `git checkout -b the-name-of-my-branch` (replacing `the-name-of-my-branch` with a suitable name) to create a branch +1. `git checkout main` +2. `git pull origin main` +3. `git checkout -b the-name-of-my-branch` -### Make the change +### ביצוע השינוי -1. Follow the ["Running locally"](#running-locally) instructions -1. Save the files and check in the browser - 1. Changes to React components in `src` will hot-reload - 1. Changes to markdown files in `content` will hot-reload - 1. If working with plugins, you may need to remove the `.cache` directory and restart the server +1. עבדו לפי הוראות ההרצה המקומית +2. שמרו קבצים ובדקו בדפדפן +3. Hot reload: + - שינויים בקומפוננטות React תחת `src` + - שינויים בקבצי Markdown תחת `src/content` +4. אם עובדים עם plugins, ייתכן שתצטרכו למחוק `.cache` ולהפעיל מחדש את השרת -### Test the change +### בדיקות -1. If possible, test any visual changes in all latest versions of common browsers, on both desktop and mobile. -2. Run `yarn check-all`. (This will run Prettier, ESLint and validate types.) +1. מומלץ לבדוק שינויים ויזואליים בדפדפנים נפוצים (דסקטופ ומובייל) +2. הריצו: + - `yarn check-all` -### Push it +### העלאה ל-GitHub -1. `git add -A && git commit -m "My message"` (replacing `My message` with a commit message, such as `Fix header logo on Android`) to stage and commit your changes -1. `git push my-fork-name the-name-of-my-branch` -1. Go to the [react.dev repo](https://github.com/reactjs/react.dev) and you should see recently pushed branches. -1. Follow GitHub's instructions. -1. If possible, include screenshots of visual changes. A preview build is triggered after your changes are pushed to GitHub. +1. `git add -A && git commit -m "My message"` +2. `git push my-fork-name the-name-of-my-branch` +3. היכנסו ל-repo ב-GitHub והמשיכו לפי ההוראות לפתיחת PR +4. מומלץ לצרף צילומי מסך לשינויים ויזואליים -## Translation +## תרגום -If you are interested in translating `react.dev`, please see the current translation efforts [here](https://github.com/reactjs/react.dev/issues/4135). +אם אתם מעוניינים לתרגם את `react.dev`, אפשר לראות את מאמצי התרגום הפעילים כאן: +https://github.com/reactjs/react.dev/issues/4135 -## License -Content submitted to [react.dev](https://react.dev/) is CC-BY-4.0 licensed, as found in the [LICENSE-DOCS.md](https://github.com/reactjs/react.dev/blob/main/LICENSE-DOCS.md) file. +## רישיון + +תוכן שנשלח ל-`react.dev` מופץ תחת CC-BY-4.0 כפי שמוגדר ב-`LICENSE-DOCS.md`. diff --git a/next.config.js b/next.config.js index 61ff1944a..b59ea0245 100644 --- a/next.config.js +++ b/next.config.js @@ -5,7 +5,32 @@ /** * @type {import('next').NextConfig} **/ +// detect when we're building for GitHub Pages so we can set the +// correct base path. the workflow sets GITHUB_REPOSITORY which looks +// like "user/repo"; the repository name is used as the basePath. +const isGitHubActions = process.env.GITHUB_ACTIONS === 'true'; +const repoName = isGitHubActions + ? '/' + process.env.GITHUB_REPOSITORY.split('/')[1] + : ''; + const nextConfig = { + // when exporting we need to tell Next.js to write to `out` and also + // make sure all asset references are prefixed with the base path + output: 'export', + basePath: repoName, + assetPrefix: repoName, + trailingSlash: true, + images: { + // Required for static export (GitHub Pages). + unoptimized: true, + }, + env: { + // if we don't set this explicitly, the value would be empty at + // runtime in the browser. components that build their own + // `` paths rely on this to know the correct prefix. + NEXT_PUBLIC_BASE_PATH: repoName, + }, + pageExtensions: ['jsx', 'js', 'ts', 'tsx', 'mdx', 'md'], reactStrictMode: true, experimental: { @@ -14,7 +39,6 @@ const nextConfig = { scrollRestoration: true, legacyBrowsers: false, }, - env: {}, webpack: (config, {dev, isServer, ...options}) => { if (process.env.ANALYZE) { const {BundleAnalyzerPlugin} = require('webpack-bundle-analyzer'); diff --git a/package.json b/package.json index 274c2506e..cbddaadee 100644 --- a/package.json +++ b/package.json @@ -5,8 +5,9 @@ "license": "CC", "scripts": { "analyze": "ANALYZE=true next build", - "dev": "next-remote-watch ./src/content", - "build": "next build && node --experimental-modules ./scripts/downloadFonts.mjs", + "dev": "next dev", + "dev:remote-watch": "next-remote-watch ./src/content", + "build": "next build && next export -o out && node --experimental-modules ./scripts/downloadFonts.mjs", "lint": "next lint", "lint:fix": "next lint --fix", "format:source": "prettier --config .prettierrc --write \"{plugins,src}/**/*.{js,ts,jsx,tsx,css}\"", diff --git a/scripts/fix-learn-mdx.mjs b/scripts/fix-learn-mdx.mjs new file mode 100644 index 000000000..6aa5efd57 --- /dev/null +++ b/scripts/fix-learn-mdx.mjs @@ -0,0 +1,77 @@ +import fs from 'fs'; +import path from 'path'; + +const dir = 'src/content/learn'; +const files = fs.readdirSync(dir).filter((f) => f.endsWith('.md')); + +function slugifyId(raw) { + return raw + .normalize('NFKD') + .replace(/["'`]/g, '') + .replace(/\s+/g, '-') + .replace(/[^\p{L}\p{N}-]/gu, '-') + .replace(/-+/g, '-') + .replace(/^-|-$/g, '') + .toLowerCase(); +} + +for (const f of files) { + const p = path.join(dir, f); + let s = fs.readFileSync(p, 'utf8'); + const original = s; + + // Normalize malformed heading anchor comments. + s = s.replace(/\{\/\*([^*]*?)\*\/\}/g, (m, id) => `{/*${slugifyId(id)}*/}`); + + // Handle broken duplicated heading line fragments like "{/...* {/*...*/}". + s = s.replace(/\{\/[^{\n]*\{\/\*([^*]*?)\*\/\}/g, (_m, id) => `{/*${slugifyId(id)}*/}`); + + // Normalize all heading ids in comments everywhere. + s = s.replace(/\{\/\*([^*]+)\*\/\}/g, (_m, id) => `{/*${slugifyId(id)}*/}`); + + // In prose, raw html tag mentions should be inline-code, not actual HTML. + // Avoid touching real JSX/MDX component lines that start with < + const lines = s.split(/\r?\n/); + let inCode = false; + for (let i = 0; i < lines.length; i++) { + let line = lines[i]; + const t = line.trim(); + if (t.startsWith('```')) { + inCode = !inCode; + continue; + } + if (inCode) continue; + if (t.startsWith('<') || t.startsWith('/g, '`<$1>`') + .replace(/<\/(input|button|div|span|h1|h2|h3|p|li|ul|ol|section|nav|img)>/g, '``'); + + // Fix common broken quote pattern around inline tags after translation. + line = line.replace(/-`<(input|button)>`'/g, '-`<$1>`'); + line = line.replace(/-<(input|button)>'/g, '-`<$1>`'); + + // Avoid literal curly braces in prose that break MDX expressions. + if (/\*\*.*\{.*\*\*/.test(line) && !line.includes('`{`')) { + line = line.replace(/\{/g, '`{`').replace(/\}/g, '`}`'); + } + + lines[i] = line; + } + s = lines.join('\n'); + + // Targeted fix for known broken heading in reacting-to-input-with-state. + if (f === 'reacting-to-input-with-state.md') { + s = s.replace( + /^### .*set-state.*$/m, + '### שלב 5: חברו את מטפלי האירועים לעדכון מצב {/*step-5-connect-the-event-handlers-to-set-state*/}' + ); + } + + if (s !== original) { + fs.writeFileSync(p, s); + console.log('fixed', p); + } +} + +console.log('done'); diff --git a/scripts/translate-learn.mjs b/scripts/translate-learn.mjs new file mode 100644 index 000000000..30406aa4d --- /dev/null +++ b/scripts/translate-learn.mjs @@ -0,0 +1,113 @@ +import fs from 'fs'; +import path from 'path'; + +const dir = 'src/content/learn'; +const files = fs.readdirSync(dir).filter((f) => f.endsWith('.md')); + +const cachePath = 'scripts/.translate-cache-learn.json'; +const cache = new Map( + fs.existsSync(cachePath) + ? Object.entries(JSON.parse(fs.readFileSync(cachePath, 'utf8'))) + : [] +); +const sleep = (ms) => new Promise((r) => setTimeout(r, ms)); + +function hasEnglish(line) { + return /[A-Za-z]{2,}/.test(line); +} + +async function translateText(text) { + const input = text.trim(); + if (!input) return text; + if (cache.has(input)) return text.replace(input, cache.get(input)); + + const url = 'https://translate.googleapis.com/translate_a/single?client=gtx&sl=en&tl=he&dt=t&q=' + encodeURIComponent(input); + const res = await fetch(url, { + headers: { + 'User-Agent': 'Mozilla/5.0', + 'Accept': 'application/json,text/plain,*/*', + }, + }); + if (!res.ok) throw new Error('translate failed: ' + res.status); + const data = await res.json(); + const out = (data?.[0] || []).map((x) => x?.[0] || '').join(''); + cache.set(input, out || input); + await sleep(10); + return text.replace(input, out || input); +} + +for (const f of files) { + const p = path.join(dir, f); + const src = fs.readFileSync(p, 'utf8'); + const lines = src.split(/\r?\n/); + + let inCode = false; + let inFrontmatter = false; + let frontmatterSeen = false; + let changed = false; + + for (let i = 0; i < lines.length; i++) { + let line = lines[i]; + + if (line.trim() === '```' || line.trim().startsWith('```')) { + inCode = !inCode; + continue; + } + + if (!frontmatterSeen && line.trim() === '---') { + inFrontmatter = !inFrontmatter; + if (!inFrontmatter) frontmatterSeen = true; + continue; + } + + if (inCode) continue; + + // Frontmatter: translate title when contains English + if (inFrontmatter) { + const m = line.match(/^(title:\s*)(.+)$/); + if (m && hasEnglish(m[2])) { + const raw = m[2].trim(); + const unquoted = raw.replace(/^['\"]|['\"]$/g, ''); + const translated = await translateText(unquoted); + lines[i] = `${m[1]}${JSON.stringify(translated.trim())}`; + changed = true; + } + continue; + } + + const t = line.trim(); + if (!t) continue; + if (t.startsWith('<') || t.startsWith(' ')) { + // translate blockquotes too + } + + // avoid touching lines that are mostly syntax/code/table separators + if (/^\|?\s*[-:|`]+\s*$/.test(t)) continue; + if (t.includes('```')) continue; + + if (!hasEnglish(t)) continue; + + try { + const translatedLine = await translateText(line); + if (translatedLine !== line) { + lines[i] = translatedLine; + changed = true; + } + } catch (e) { + // keep going on per-line failure + } + } + + if (changed) { + fs.writeFileSync(p, lines.join('\n')); + console.log('updated', p); + } +} + +fs.writeFileSync( + cachePath, + JSON.stringify(Object.fromEntries(cache), null, 2) +); + +console.log('done'); diff --git a/src/components/Layout/Footer.tsx b/src/components/Layout/Footer.tsx index 26bdf6711..d014418d3 100644 --- a/src/components/Layout/Footer.tsx +++ b/src/components/Layout/Footer.tsx @@ -288,50 +288,46 @@ export function Footer() {
- Learn React - - Quick Start - Installation - - Describing the UI + לימוד React + התחלה מהירה + התקנה + תיאור ה-UI - Adding Interactivity + הוספת אינטראקטיביות - Managing State - Escape Hatches + ניהול State + דרכי מילוט
- API Reference + מדריך API React APIs React DOM APIs
- Community + קהילה - Code of Conduct + קוד התנהגות - Meet the Team + הכירו את הצוות - Docs Contributors - - - Acknowledgements + תורמי התיעוד + תודות
- More - Blog + עוד + בלוג React Native - Privacy + פרטיות - Terms + תנאים

- The library for web and native user interfaces + הספרייה לממשקי משתמש לווב ולנייטיב

- Learn React + label="לימוד React"> + לימוד React - API Reference + label="מדריך API"> + מדריך API
-
Create user interfaces from components
+
צרו ממשקי משתמש מקומפוננטות
- React lets you build user interfaces out of individual pieces - called components. Create your own React components like{' '} - Thumbnail, LikeButton, and{' '} - Video. Then combine them into entire screens, pages, - and apps. + React מאפשרת לכם לבנות ממשקי משתמש מחלקים נפרדים שנקראים + קומפוננטות. צרו קומפוננטות React משלכם כמו Thumbnail,{' '} + LikeButton ו-Video, ואז חברו אותן + למסכים, דפים ואפליקציות שלמים.
@@ -162,22 +161,20 @@ export function HomeContent() {
- Whether you work on your own or with thousands of other - developers, using React feels the same. It is designed to let you - seamlessly combine components written by independent people, - teams, and organizations. + בין אם אתם עובדים לבד או יחד עם אלפי מפתחים אחרים, העבודה עם React + מרגישה אותו דבר. היא תוכננה כך שתוכלו לשלב בצורה חלקה קומפוננטות + שנכתבו על ידי אנשים, צוותים וארגונים שונים.
-
Write components with code and markup
+
כתבו קומפוננטות עם קוד ו-Markup
- React components are JavaScript functions. Want to show some - content conditionally? Use an if statement. - Displaying a list? Try array map(). Learning React is - learning programming. + קומפוננטות React הן פונקציות JavaScript. רוצים להציג תוכן בצורה + מותנית? השתמשו במשפט if. רוצים להציג רשימה? נסו + להשתמש ב-map() על מערך. ללמוד React זה ללמוד תכנות.
@@ -185,22 +182,21 @@ export function HomeContent() {
- This markup syntax is called JSX. It is a JavaScript syntax - extension popularized by React. Putting JSX markup close to - related rendering logic makes React components easy to create, - maintain, and delete. + תחביר ה-Markup הזה נקרא JSX. זו הרחבת תחביר של JavaScript ש-React + הפכה לפופולרית. כשכותבים JSX קרוב ללוגיקת הרינדור הרלוונטית, + קומפוננטות React נעשות קלות יותר ליצירה, תחזוקה והסרה.
-
Add interactivity wherever you need it
+
הוסיפו אינטראקטיביות בכל מקום שצריך
- React components receive data and return what should appear on the - screen. You can pass them new data in response to an interaction, - like when the user types into an input. React will then update the - screen to match the new data. + קומפוננטות React מקבלות נתונים ומחזירות את מה שצריך להופיע על + המסך. אפשר להעביר להן נתונים חדשים בתגובה לאינטראקציה, למשל + כשהמשתמש מקליד בשדה קלט. אחר כך React מעדכנת את המסך כך שיתאים + לנתונים החדשים.
@@ -208,16 +204,15 @@ export function HomeContent() {
- You don’t have to build your whole page in React. Add React to - your existing HTML page, and render interactive React components - anywhere on it. + לא חייבים לבנות את כל הדף ב-React. אפשר להוסיף React לדף HTML + קיים, ולרנדר בו קומפוננטות React אינטראקטיביות בכל מקום.
- Add React to your page + הוסיפו React לעמוד שלכם
@@ -226,14 +221,14 @@ export function HomeContent() {
- Go full-stack
- with a framework + עברו ל-full-stack
+ עם פריימוורק
- React is a library. It lets you put components together, but it - doesn’t prescribe how to do routing and data fetching. To build an - entire app with React, we recommend a full-stack React framework - like Next.js or{' '} + React היא ספרייה. היא מאפשרת להרכיב קומפוננטות, אבל לא מכתיבה איך + לבצע ניתוב ושליפת נתונים. כדי לבנות אפליקציה שלמה עם React, אנחנו + ממליצים על פריימוורק React מלא כמו{' '} + Next.js או{' '} Remix.
@@ -242,17 +237,17 @@ export function HomeContent() {
- React is also an architecture. Frameworks that implement it let - you fetch data in asynchronous components that run on the server - or even during the build. Read data from a file or a database, and - pass it down to your interactive components. + React היא גם ארכיטקטורה. פריימוורקים שמממשים אותה מאפשרים שליפת + נתונים מתוך קומפוננטות אסינכרוניות שרצות בשרת או אפילו בזמן build. + אפשר לקרוא נתונים מקובץ או ממסד נתונים ולהעביר אותם לקומפוננטות + האינטראקטיביות שלכם.
- Get started with a framework + התחילו עם פריימוורק
@@ -260,12 +255,11 @@ export function HomeContent() {
-
Use the best from every platform
+
קחו את הטוב ביותר מכל פלטפורמה
- People love web and native apps for different reasons. React - lets you build both web apps and native apps using the same - skills. It leans upon each platform’s unique strengths to let - your interfaces feel just right on every platform. + אנשים אוהבים אפליקציות ווב ונייטיב מסיבות שונות. React מאפשרת + לבנות את שתיהן עם אותם כישורים. היא נשענת על החוזקות הייחודיות + של כל פלטפורמה כדי שממשקי המשתמש ירגישו נכון בכל מקום.
@@ -279,15 +273,14 @@ export function HomeContent() {

- Stay true to the web + נאמנים לווב

- People expect web app pages to load fast. On the server, - React lets you start streaming HTML while you’re still - fetching data, progressively filling in the remaining - content before any JavaScript code loads. On the client, - React can use standard web APIs to keep your UI - responsive even in the middle of rendering. + משתמשים מצפים שדפי ווב ייטענו מהר. בצד השרת, React + מאפשרת להתחיל להזרים HTML בזמן שעדיין שולפים נתונים, + ולמלא בהדרגה את שאר התוכן עוד לפני שקוד JavaScript נטען. + בצד הלקוח, React יכולה להשתמש ב-Web APIs סטנדרטיים כדי + לשמור על ממשק משתמש תגובתי גם באמצע רינדור.

@@ -365,21 +358,21 @@ export function HomeContent() {

- Go truly native + עברו לנייטיב אמיתי

- People expect native apps to look and feel like their - platform.{' '} + משתמשים מצפים שאפליקציות נייטיב ייראו וירגישו כמו + הפלטפורמה שלהן.{' '} React Native {' '} - and{' '} + ו-{' '} Expo{' '} - let you build apps in React for Android, iOS, and - more. They look and feel native because their UIs{' '} - are truly native. It’s not a web view—your - React components render real Android and iOS views - provided by the platform. + מאפשרות לבנות אפליקציות ב-React ל-Android, ל-iOS ולעוד + פלטפורמות. הן נראות ומרגישות נייטיב כי ה-UI שלהן + באמת נייטיב. זו לא תצוגת web view; קומפוננטות + React שלכם מרנדרות תצוגות אמיתיות של Android ו-iOS + שסופקו על ידי הפלטפורמה.

@@ -389,14 +382,14 @@ export function HomeContent() {
- With React, you can be a web and a native developer. Your - team can ship to many platforms without sacrificing the user - experience. Your organization can bridge the platform silos, and - form teams that own entire features end-to-end. + עם React אפשר להיות מפתחי ווב וגם נייטיב. הצוות שלכם יכול + לשלוח פיצ׳רים להרבה פלטפורמות בלי להתפשר על חוויית המשתמש. + הארגון שלכם יכול לגשר על הפערים בין פלטפורמות ולבנות צוותים + שלוקחים בעלות על יכולות מקצה לקצה.
- Build for native platforms + בנו לפלטפורמות נייטיב
@@ -407,23 +400,21 @@ export function HomeContent() {
-
Upgrade when the future is ready
+
שדרגו כשהעתיד מוכן
- React approaches changes with care. Every React commit is - tested on business-critical surfaces with over a billion - users. Over 100,000 React components at Meta help validate - every migration strategy. + React ניגשת לשינויים בזהירות. כל commit של React נבדק על + משטחים עסקיים קריטיים עם יותר ממיליארד משתמשים. מעל 100,000 + קומפוננטות React ב-Meta עוזרות לאמת כל אסטרטגיית מיגרציה.
- The React team is always researching how to improve React. - Some research takes years to pay off. React has a high bar - for taking a research idea into production. Only proven - approaches become a part of React. + צוות React תמיד חוקר איך לשפר את React. לפעמים לוקח שנים עד + שמחקר מבשיל. ל-React יש רף גבוה לפני שמעבירים רעיון מחקרי + לפרודקשן. רק גישות מוכחות הופכות לחלק מ-React.
- Read more React news + לקריאת חדשות React נוספות
@@ -431,7 +422,7 @@ export function HomeContent() {

- Latest React News + חדשות React האחרונות

@@ -449,7 +440,7 @@ export function HomeContent() {
- Read more React news + לקריאת חדשות React נוספות
@@ -462,13 +453,13 @@ export function HomeContent() {
- Join a community
- of millions + הצטרפו לקהילה
+ של מיליונים
- You’re not alone. Two million developers from all over the - world visit the React docs every month. React is something - that people and teams can agree on. + אתם לא לבד. שני מיליון מפתחים מכל העולם מבקרים בתיעוד של React + בכל חודש. React היא משהו שאנשים וצוותים יכולים להסכים עליו + יחד.
@@ -476,13 +467,11 @@ export function HomeContent() {
- This is why React is more than a library, an architecture, or - even an ecosystem. React is a community. It’s a place where - you can ask for help, find opportunities, and meet new - friends. You will meet both developers and designers, - beginners and experts, researchers and artists, teachers and - students. Our backgrounds may be very different, but React - lets us all create user interfaces together. + לכן React היא יותר מספרייה, ארכיטקטורה או אפילו אקו-סיסטם. + React היא קהילה. זה מקום שבו אפשר לבקש עזרה, למצוא הזדמנויות + ולהכיר חברים חדשים. תפגשו כאן מפתחים ומעצבים, מתחילים ומומחים, + חוקרים ואמנים, מורים ותלמידים. הרקע שלנו יכול להיות שונה מאוד, + אבל React מאפשרת לכולנו ליצור ממשקי משתמש יחד.
@@ -491,15 +480,12 @@ export function HomeContent() {
- Welcome to the
- React community + ברוכים הבאים ל- +
+ קהילת React
- - Get Started + + התחלה
@@ -646,40 +632,42 @@ function CTA({children, icon, href}) { ); } -const reactConf2021Cover = '/images/home/conf2021/cover.svg'; -const reactConf2019Cover = '/images/home/conf2019/cover.svg'; +const basePath = process.env.NEXT_PUBLIC_BASE_PATH || ''; + +const reactConf2021Cover = basePath + '/images/home/conf2021/cover.svg'; +const reactConf2019Cover = basePath + '/images/home/conf2019/cover.svg'; const communityImages = [ { - src: '/images/home/community/react_conf_fun.webp', - alt: 'People singing karaoke at React Conf', + src: basePath + '/images/home/community/react_conf_fun.webp', + alt: 'אנשים שרים קריוקי ב-React Conf', }, { - src: '/images/home/community/react_india_sunil.webp', - alt: 'Sunil Pai speaking at React India', + src: basePath + '/images/home/community/react_india_sunil.webp', + alt: 'Sunil Pai מרצה ב-React India', }, { - src: '/images/home/community/react_conf_hallway.webp', - alt: 'A hallway conversation between two people at React Conf', + src: basePath + '/images/home/community/react_conf_hallway.webp', + alt: 'שיחת מסדרון בין שני אנשים ב-React Conf', }, { - src: '/images/home/community/react_india_hallway.webp', - alt: 'A hallway conversation at React India', + src: basePath + '/images/home/community/react_india_hallway.webp', + alt: 'שיחת מסדרון ב-React India', }, { - src: '/images/home/community/react_conf_elizabet.webp', - alt: 'Elizabet Oliveira speaking at React Conf', + src: basePath + '/images/home/community/react_conf_elizabet.webp', + alt: 'Elizabet Oliveira מרצה ב-React Conf', }, { - src: '/images/home/community/react_india_selfie.webp', - alt: 'People taking a group selfie at React India', + src: basePath + '/images/home/community/react_india_selfie.webp', + alt: 'אנשים מצלמים סלפי קבוצתי ב-React India', }, { - src: '/images/home/community/react_conf_nat.webp', - alt: 'Nat Alison speaking at React Conf', + src: basePath + '/images/home/community/react_conf_nat.webp', + alt: 'Nat Alison מרצה ב-React Conf', }, { - src: '/images/home/community/react_india_team.webp', - alt: 'Organizers greeting attendees at React India', + src: basePath + '/images/home/community/react_india_team.webp', + alt: 'מארגנים שמברכים את המשתתפים ב-React India', }, ]; @@ -915,8 +903,8 @@ function Example1() {
@@ -1084,10 +1072,10 @@ function SearchableVideoList({ videos }) { contentMarginTop="72px" height="30rem">

- React Videos + סרטוני React

- A brief history of React + היסטוריה קצרה של React

@@ -1335,7 +1323,7 @@ function ConferencePage({slug}) { const conf = use(fetchConf(slug)); return ( -
+
}> @@ -1408,7 +1396,7 @@ function SearchableVideoList({videos}) {
); @@ -1434,7 +1422,7 @@ function VideoList({videos, emptyHeading}) { let heading = emptyHeading; const count = videos.length; if (count > 0) { - const noun = count > 1 ? 'Videos' : 'Video'; + const noun = count > 1 ? 'סרטונים' : 'סרטון'; heading = count + ' ' + noun; } return ( @@ -1461,7 +1449,7 @@ function SearchInput({value, onChange}) { data-hover="SearchInput" onSubmit={(e) => e.preventDefault()}>
@@ -1471,7 +1459,7 @@ function SearchInput({value, onChange}) { type="text" id={id} className="flex ps-11 py-4 h-10 w-full text-start bg-secondary-button outline-none betterhover:hover:bg-opacity-80 pointer items-center text-primary rounded-full align-middle text-base" - placeholder="Search" + placeholder="חיפוש" value={value} onChange={(e) => onChange(e.target.value)} /> @@ -2390,39 +2378,39 @@ function fetchTalks(confId) { resolve([ { id: 'conf-2021-0', - title: 'React 18 Keynote', - description: 'The React Team', + title: 'הרצאת פתיחה: React 18', + description: 'צוות React', url: 'https://www.youtube.com/watch?v=FZ0cG47msEk&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=1', image: { speakers: [ - '/images/home/conf2021/andrew.jpg', - '/images/home/conf2021/lauren.jpg', - '/images/home/conf2021/juan.jpg', - '/images/home/conf2021/rick.jpg', + basePath + '/images/home/conf2021/andrew.jpg', + basePath + '/images/home/conf2021/lauren.jpg', + basePath + '/images/home/conf2021/juan.jpg', + basePath + '/images/home/conf2021/rick.jpg', ], }, }, { id: 'conf-2021-1', - title: 'React 18 for App Developers', + title: 'React 18 למפתחי אפליקציות', description: 'Shruti Kapoor', url: 'https://www.youtube.com/watch?v=ytudH8je5ko&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=2', image: { - speakers: ['/images/home/conf2021/shruti.jpg'], + speakers: [basePath + '/images/home/conf2021/shruti.jpg'], }, }, { id: 'conf-2021-2', - title: 'Streaming Server Rendering with Suspense', + title: 'רינדור שרת בסטרימינג עם Suspense', description: 'Shaundai Person', url: 'https://www.youtube.com/watch?v=pj5N-Khihgc&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=3', image: { - speakers: ['/images/home/conf2021/shaundai.jpg'], + speakers: [basePath + '/images/home/conf2021/shaundai.jpg'], }, }, { id: 'conf-2021-3', - title: 'The First React Working Group', + title: 'קבוצת העבודה הראשונה של React', description: 'Aakansha Doshi', url: 'https://www.youtube.com/watch?v=qn7gRClrC9U&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=4', image: { @@ -2431,7 +2419,7 @@ function fetchTalks(confId) { }, { id: 'conf-2021-4', - title: 'React Developer Tooling', + title: 'כלי פיתוח ל-React', description: 'Brian Vaughn', url: 'https://www.youtube.com/watch?v=oxDfrke8rZg&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=5', image: { @@ -2440,7 +2428,7 @@ function fetchTalks(confId) { }, { id: 'conf-2021-5', - title: 'React without memo', + title: 'React בלי memo', description: 'Xuan Huang (黄玄)', url: 'https://www.youtube.com/watch?v=lGEMwh32soc&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=6', image: { @@ -2449,7 +2437,7 @@ function fetchTalks(confId) { }, { id: 'conf-2021-6', - title: 'React Docs Keynote', + title: 'הרצאת תיעוד React', description: 'Rachel Nabors', url: 'https://www.youtube.com/watch?v=mneDaMYOKP8&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=7', image: { @@ -2458,7 +2446,7 @@ function fetchTalks(confId) { }, { id: 'conf-2021-7', - title: 'Things I Learnt from the New React Docs', + title: 'מה למדתי מהתיעוד החדש של React', description: "Debbie O'Brien", url: 'https://www.youtube.com/watch?v=-7odLW_hG7s&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=8', image: { @@ -2467,7 +2455,7 @@ function fetchTalks(confId) { }, { id: 'conf-2021-8', - title: 'Learning in the Browser', + title: 'למידה בדפדפן', description: 'Sarah Rainsberger', url: 'https://www.youtube.com/watch?v=5X-WEQflCL0&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=9', image: { @@ -2476,7 +2464,7 @@ function fetchTalks(confId) { }, { id: 'conf-2021-9', - title: 'The ROI of Designing with React', + title: 'ה-ROI של עיצוב עם React', description: 'Linton Ye', url: 'https://www.youtube.com/watch?v=7cPWmID5XAk&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=10', image: { @@ -2485,7 +2473,7 @@ function fetchTalks(confId) { }, { id: 'conf-2021-10', - title: 'Interactive Playgrounds with React', + title: 'Playgrounds אינטראקטיביים עם React', description: 'Delba de Oliveira', url: 'https://www.youtube.com/watch?v=zL8cz2W0z34&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=11', image: { @@ -2494,7 +2482,7 @@ function fetchTalks(confId) { }, { id: 'conf-2021-11', - title: 'Re-introducing Relay', + title: 'הצגה מחדש של Relay', description: 'Robert Balicki', url: 'https://www.youtube.com/watch?v=lhVGdErZuN4&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=12', image: { @@ -2503,7 +2491,7 @@ function fetchTalks(confId) { }, { id: 'conf-2021-12', - title: 'React Native Desktop', + title: 'React Native למחשבים שולחניים', description: 'Eric Rozell and Steven Moyes', url: 'https://www.youtube.com/watch?v=9L4FFrvwJwY&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=13', image: { @@ -2515,7 +2503,7 @@ function fetchTalks(confId) { }, { id: 'conf-2021-13', - title: 'On-device Machine Learning for React Native', + title: 'למידת מכונה על המכשיר עבור React Native', description: 'Roman Rädle', url: 'https://www.youtube.com/watch?v=NLj73vrc2I8&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=14', image: { @@ -2524,7 +2512,7 @@ function fetchTalks(confId) { }, { id: 'conf-2021-14', - title: 'React 18 for External Store Libraries', + title: 'React 18 לספריות External Store', description: 'Daishi Kato', url: 'https://www.youtube.com/watch?v=oPfSC5bQPR8&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=15', image: { @@ -2533,7 +2521,7 @@ function fetchTalks(confId) { }, { id: 'conf-2021-15', - title: 'Building Accessible Components with React 18', + title: 'בניית קומפוננטות נגישות עם React 18', description: 'Diego Haz', url: 'https://www.youtube.com/watch?v=dcm8fjBfro8&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=16', image: { @@ -2542,7 +2530,7 @@ function fetchTalks(confId) { }, { id: 'conf-2021-16', - title: 'Accessible Japanese Form Components with React', + title: 'קומפוננטות טפסים יפניות נגישות עם React', description: 'Tafu Nakazaki', url: 'https://www.youtube.com/watch?v=S4a0QlsH0pU&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=17', image: { @@ -2551,7 +2539,7 @@ function fetchTalks(confId) { }, { id: 'conf-2021-17', - title: 'UI Tools for Artists', + title: 'כלי UI לאמנים', description: 'Lyle Troxell', url: 'https://www.youtube.com/watch?v=b3l4WxipFsE&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=18', image: { @@ -2560,7 +2548,7 @@ function fetchTalks(confId) { }, { id: 'conf-2021-18', - title: 'Hydrogen + React 18', + title: 'Hydrogen ו-React 18', description: 'Helen Lin', url: 'https://www.youtube.com/watch?v=HS6vIYkSNks&list=PLNG_1j3cPCaZZ7etkzWA7JfdmKWT0pMsa&index=19', image: { @@ -2572,7 +2560,7 @@ function fetchTalks(confId) { resolve([ { id: 'conf-2019-0', - title: 'Keynote (Part 1)', + title: 'הרצאת פתיחה (חלק 1)', description: 'Tom Occhino', url: 'https://www.youtube.com/watch?v=QnZHO7QvjaM&list=PLPxbbTqCLbGHPxZpw4xj_Wwg8-fdNxJRh', image: { @@ -2581,7 +2569,7 @@ function fetchTalks(confId) { }, { id: 'conf-2019-1', - title: 'Keynote (Part 2)', + title: 'הרצאת פתיחה (חלק 2)', description: 'Yuzhi Zheng', url: 'https://www.youtube.com/watch?v=uXEEL9mrkAQ&list=PLPxbbTqCLbGHPxZpw4xj_Wwg8-fdNxJRh&index=2', image: { @@ -2590,7 +2578,7 @@ function fetchTalks(confId) { }, { id: 'conf-2019-2', - title: 'Building The New Facebook With React and Relay (Part 1)', + title: 'בניית פייסבוק החדשה עם React ו-Relay (חלק 1)', description: 'Frank Yan', url: 'https://www.youtube.com/watch?v=9JZHodNR184&list=PLPxbbTqCLbGHPxZpw4xj_Wwg8-fdNxJRh&index=3', image: { @@ -2599,7 +2587,7 @@ function fetchTalks(confId) { }, { id: 'conf-2019-3', - title: 'Building The New Facebook With React and Relay (Part 2)', + title: 'בניית פייסבוק החדשה עם React ו-Relay (חלק 2)', description: 'Ashley Watkins', url: 'https://www.youtube.com/watch?v=KT3XKDBZW7M&list=PLPxbbTqCLbGHPxZpw4xj_Wwg8-fdNxJRh&index=4', image: { @@ -2608,7 +2596,7 @@ function fetchTalks(confId) { }, { id: 'conf-2019-4', - title: 'How Our Team Is Using React Native to Save The World', + title: 'איך הצוות שלנו משתמש ב-React Native כדי להציל את העולם', description: 'Tania Papazafeiropoulou', url: 'https://www.youtube.com/watch?v=zVHWugBPGBE&list=PLPxbbTqCLbGHPxZpw4xj_Wwg8-fdNxJRh&index=5', image: { @@ -2618,7 +2606,7 @@ function fetchTalks(confId) { { id: 'conf-2019-5', title: - 'Using Hooks and Codegen to Bring the Benefits of GraphQL to REST APIs', + 'שימוש ב-Hooks וב-Codegen כדי להביא את היתרונות של GraphQL אל REST APIs', description: 'Tejas Kumar', url: 'https://www.youtube.com/watch?v=cdsnzfJUqm0&list=PLPxbbTqCLbGHPxZpw4xj_Wwg8-fdNxJRh&index=6', image: { @@ -2627,7 +2615,7 @@ function fetchTalks(confId) { }, { id: 'conf-2019-6', - title: 'Building a Custom React Renderer', + title: 'בניית React Renderer מותאם אישית', description: 'Sophie Alpert', url: 'https://www.youtube.com/watch?v=CGpMlWVcHok&list=PLPxbbTqCLbGHPxZpw4xj_Wwg8-fdNxJRh&index=7', image: { @@ -2636,7 +2624,7 @@ function fetchTalks(confId) { }, { id: 'conf-2019-7', - title: 'Is React Translated Yet?', + title: 'האם React כבר מתורגמת?', description: 'Nat Alison', url: 'https://www.youtube.com/watch?v=lLE4Jqaek5k&list=PLPxbbTqCLbGHPxZpw4xj_Wwg8-fdNxJRh&index=12', image: { @@ -2645,7 +2633,7 @@ function fetchTalks(confId) { }, { id: 'conf-2019-8', - title: 'Building (And Re-Building) the Airbnb Design System', + title: 'בניית (ובנייה מחדש של) מערכת העיצוב של Airbnb', description: 'Maja Wichrowska and Tae Kim', url: 'https://www.youtube.com/watch?v=fHQ1WSx41CA&list=PLPxbbTqCLbGHPxZpw4xj_Wwg8-fdNxJRh&index=13', image: { @@ -2657,7 +2645,7 @@ function fetchTalks(confId) { }, { id: 'conf-2019-9', - title: 'Accessibility Is a Marathon, Not a Sprint', + title: 'נגישות היא מרתון, לא ספרינט', description: 'Brittany Feenstra', url: 'https://www.youtube.com/watch?v=ONSD-t4gBb8&list=PLPxbbTqCLbGHPxZpw4xj_Wwg8-fdNxJRh&index=14', image: { @@ -2666,7 +2654,7 @@ function fetchTalks(confId) { }, { id: 'conf-2019-10', - title: 'The State of React State in 2019', + title: 'מצב ה-State ב-React בשנת 2019', description: 'Becca Bailey', url: 'https://www.youtube.com/watch?v=wUMMUyQtMSg&list=PLPxbbTqCLbGHPxZpw4xj_Wwg8-fdNxJRh&index=15', image: { @@ -2675,7 +2663,7 @@ function fetchTalks(confId) { }, { id: 'conf-2019-11', - title: 'Let’s Program Like It’s 1999', + title: 'בואו נתכנת כאילו זו 1999', description: 'Lee Byron', url: 'https://www.youtube.com/watch?v=vG8WpLr6y_U&list=PLPxbbTqCLbGHPxZpw4xj_Wwg8-fdNxJRh&index=16', image: { @@ -2684,7 +2672,7 @@ function fetchTalks(confId) { }, { id: 'conf-2019-12', - title: 'React Developer Tooling', + title: 'כלי פיתוח ל-React', description: 'Brian Vaughn', url: 'https://www.youtube.com/watch?v=Mjrfb1r3XEM&list=PLPxbbTqCLbGHPxZpw4xj_Wwg8-fdNxJRh&index=17', image: { @@ -2693,7 +2681,7 @@ function fetchTalks(confId) { }, { id: 'conf-2019-13', - title: 'Data Fetching With Suspense In Relay', + title: 'שליפת נתונים עם Suspense ב-Relay', description: 'Joe Savona', url: 'https://www.youtube.com/watch?v=Tl0S7QkxFE4&list=PLPxbbTqCLbGHPxZpw4xj_Wwg8-fdNxJRh&index=18', image: { @@ -2702,7 +2690,7 @@ function fetchTalks(confId) { }, { id: 'conf-2019-14', - title: 'Automatic Visualizations of the Frontend', + title: 'ויזואליזציות אוטומטיות של ה-Frontend', description: 'Cameron Yick', url: 'https://www.youtube.com/watch?v=SbreAPNmZOk&list=PLPxbbTqCLbGHPxZpw4xj_Wwg8-fdNxJRh&index=19', image: { @@ -2711,7 +2699,7 @@ function fetchTalks(confId) { }, { id: 'conf-2019-15', - title: 'React Is Fiction', + title: 'React היא בדיון', description: 'Jenn Creighton', url: 'https://www.youtube.com/watch?v=kqh4lz2Lkzs&list=PLPxbbTqCLbGHPxZpw4xj_Wwg8-fdNxJRh&index=20', image: { @@ -2720,7 +2708,7 @@ function fetchTalks(confId) { }, { id: 'conf-2019-16', - title: 'Progressive Web Animations', + title: 'אנימציות ווב פרוגרסיביות', description: 'Alexandra Holachek', url: 'https://www.youtube.com/watch?v=laPsceJ4tTY&list=PLPxbbTqCLbGHPxZpw4xj_Wwg8-fdNxJRh&index=21', image: { @@ -2729,8 +2717,7 @@ function fetchTalks(confId) { }, { id: 'conf-2019-17', - title: - 'Creating Games, Animations and Interactions with the Wick Editor', + title: 'יצירת משחקים, אנימציות ואינטראקציות עם Wick Editor', description: 'Luca Damasco', url: 'https://www.youtube.com/watch?v=laPsceJ4tTY&list=PLPxbbTqCLbGHPxZpw4xj_Wwg8-fdNxJRh&index=21', image: { @@ -2739,7 +2726,7 @@ function fetchTalks(confId) { }, { id: 'conf-2019-18', - title: 'Building React-Select', + title: 'בניית React-Select', description: 'Jed Watson', url: 'https://www.youtube.com/watch?v=yS0jUnmBujE&list=PLPxbbTqCLbGHPxZpw4xj_Wwg8-fdNxJRh&index=25', image: { @@ -2748,7 +2735,7 @@ function fetchTalks(confId) { }, { id: 'conf-2019-19', - title: 'Promoting Transparency in Government Spending with React', + title: 'קידום שקיפות בהוצאות ממשלתיות עם React', description: 'Lizzie Salita', url: 'https://www.youtube.com/watch?v=CVfXICcNfHE&list=PLPxbbTqCLbGHPxZpw4xj_Wwg8-fdNxJRh&index=26', image: { @@ -2757,7 +2744,7 @@ function fetchTalks(confId) { }, { id: 'conf-2019-20', - title: 'Wonder-driven Development: Using React to Make a Spaceship', + title: 'פיתוח מונחה סקרנות: שימוש ב-React כדי לבנות חללית', description: 'Alex Anderson', url: 'https://www.youtube.com/watch?v=aV0uOPWHKt4&list=PLPxbbTqCLbGHPxZpw4xj_Wwg8-fdNxJRh&index=27', image: { diff --git a/src/components/Layout/Page.tsx b/src/components/Layout/Page.tsx index ee3c899d0..277e82156 100644 --- a/src/components/Layout/Page.tsx +++ b/src/components/Layout/Page.tsx @@ -114,7 +114,7 @@ export function Page({children, toc, routeTree, meta, section}: PageProps) { title={title} titleForTitleTag={meta.titleForTitleTag} isHomePage={isHomePage} - image={`/images/og-` + section + '.png'} + image={`${process.env.NEXT_PUBLIC_BASE_PATH || ''}/images/og-` + section + '.png'} searchOrder={searchOrder} /> diff --git a/src/components/Layout/TopNav/TopNav.tsx b/src/components/Layout/TopNav/TopNav.tsx index b6e276ff7..ea41cacae 100644 --- a/src/components/Layout/TopNav/TopNav.tsx +++ b/src/components/Layout/TopNav/TopNav.tsx @@ -110,7 +110,7 @@ function NavItem({url, isActive, children}: any) {