Merge branch 'main' into sync-7b6c3ceb

Author: anilcanboga

package.json

@@ -36,7 +36,7 @@
     "classnames": "^2.2.6",
     "debounce": "^1.2.1",
     "github-slugger": "^1.3.0",
-    "next": "15.5.18",
+    "next": "15.5.21",
     "next-remote-watch": "^1.0.0",
     "parse-numeric-range": "^1.2.0",
     "raw-loader": "^4.0.2",
@@ -47,12 +47,11 @@
     "remark-gfm": "^3.0.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.9",
-    "@babel/plugin-transform-modules-commonjs": "^7.18.6",
-    "@babel/preset-react": "^7.18.6",
+    "@babel/core": "7.29.6",
+    "@babel/plugin-transform-modules-commonjs": "7.28.6",
+    "@babel/preset-react": "7.28.5",
     "@mdx-js/mdx": "^2.1.3",
     "@resvg/resvg-js": "^2.6.2",
-    "@shuding/opentype.js": "1.4.0-beta.0",
     "@types/body-scroll-lock": "^2.6.1",
     "@types/classnames": "^2.2.10",
     "@types/debounce": "^1.2.1",
@@ -123,4 +122,4 @@
     "src/**/*.md": "yarn fix-headings"
   },
   "packageManager": "yarn@1.22.22"
-}
+}

scripts/generateOgImages.mjs

@@ -14,7 +14,6 @@ import path from 'path';
 import satori from 'satori';
 import {Resvg} from '@resvg/resvg-js';
 import matter from 'gray-matter';
-import opentype from '@shuding/opentype.js';
 
 const ROOT = process.cwd();
 const CONTENT_DIR = path.join(ROOT, 'src', 'content');
@@ -35,33 +34,6 @@ const medium = fs.readFileSync(
   path.join(ROOT, 'public', 'fonts', 'Optimistic_Display_W_Md.ttf')
 );
 
-// Title area width: card width minus the horizontal padding (80px per side).
-const TITLE_MAX_WIDTH = 1200 - 80 * 2;
-const TITLE_MAX_FONT = 96;
-const TITLE_MIN_FONT = 56;
-// Small margin so borderline titles don't wrap and orphan a single trailing
-// character (e.g. the "p" in "renderToStaticMarkup", which is 1px too wide
-// to fit on one line at 96px).
-const TITLE_SAFETY = 8;
-
-const boldFont = opentype.parse(
-  bold.buffer.slice(bold.byteOffset, bold.byteOffset + bold.byteLength)
-);
-
-// Multi-word titles wrap cleanly at spaces, so a length bucket is fine for
-// them. Single-word titles (most API names) can only break mid-word, which
-// leaves an orphaned letter on its own line, so instead shrink them just
-// enough to fit on a single line.
-function titleFontSize(title) {
-  const trimmed = title.trim();
-  if (/\s/.test(trimmed)) {
-    return trimmed.length > 24 ? 72 : 96;
-  }
-  const widthPerPx = boldFont.getAdvanceWidth(trimmed, 1);
-  const fit = Math.floor((TITLE_MAX_WIDTH - TITLE_SAFETY) / widthPerPx);
-  return Math.max(TITLE_MIN_FONT, Math.min(TITLE_MAX_FONT, fit));
-}
-
 function el(type, style, children) {
   return {type, props: {style, children}};
 }
@@ -131,7 +103,7 @@ function card(title, pagePath) {
           flexGrow: 1,
           display: 'flex',
           alignItems: 'center',
-          fontSize: titleFontSize(title),
+          fontSize: title.length > 24 ? 72 : 96,
           fontFamily: 'Optimistic Display Bold',
           color: '#f6f7f9',
           lineHeight: 1.1,

src/content/learn/tutorial-tic-tac-toe.md

@@ -901,11 +901,11 @@ body {
 
 React Developer Tools, React component’lerinizin props ve state’ini kontrol etmenizi sağlar. [Chrome](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en), [Firefox](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/) ve [Edge](https://microsoftedge.microsoft.com/addons/detail/react-developer-tools/gpphkfbcpidddadnkolkpfckpihlkkil) browser extension olarak kullanılabilir.
 
-Yükledikten sonra, React kullanan siteler için browser Developer Tools içinde yeni bir **Components** tab’ı görünür. CodeSandbox’ta takip ediyorsanız, önce sandbox preview’unuzu yeni bir tab’da açmanız gerekir:
+Yükledikten sonra, React kullanan siteler için browser Developer Tools içinde yeni bir *Components* tab’ı görünür. CodeSandbox’ta takip ediyorsanız, önce sandbox preview’unuzu yeni bir tab’da açmanız gerekir:
 
 ![yeni tab’da açma](../images/tutorial/sandbox-new-tab.png)
 
-Ardından preview sayfasında browser’ınızın DevTools’unu açın ve **Components** tab’ını bulun:
+Ardından preview sayfasında browser’ınızın DevTools’unu açın ve *Components* tab’ını bulun:
 
 ![components tab](../images/tutorial/components-tab.png)
 

src/content/reference/react-dom/server/renderToPipeableStream.md

@@ -68,7 +68,7 @@ const { pipe } = renderToPipeableStream(<App />, {
 
   * **optional** `onShellReady`: [Initial shell](#specifying-what-goes-into-the-shell) render edildikten hemen sonra tetiklenen bir callback. Burada [status code’u ayarlayabilir](#setting-the-status-code) ve streaming’i başlatmak için `pipe` çağırabilirsiniz. React, shell’den sonra ek [content’i stream eder](#streaming-more-content-as-it-loads) ve HTML loading fallback’lerini content ile değiştiren inline `<script>` tag’lerini de beraberinde gönderir.
 
-  * **optional** `onShellError`: Initial shell render edilirken bir error oluşursa tetiklenen bir callback. Error’ı argüman olarak alır. Stream’den henüz hiç byte emit edilmemiştir ve ne `onShellReady` ne de `onAllReady` çağrılır; bu yüzden [fallback HTML shell output edebilirsiniz](#recovering-from-errors-inside-the-shell).
+  * **optional** `onShellError`: Initial shell render edilirken bir hata oluşursa tetiklenen bir callback. Error’ı argüman olarak alır. Stream’den henüz hiç byte emit edilmemiştir ve ne `onShellReady` ne de `onAllReady` çağrılır; bu yüzden [fallback HTML shell output edebilirsiniz](#recovering-from-errors-inside-the-shell).
 
   * **optional** `progressiveChunkSize`: Bir chunk içindeki byte sayısı. [Default heuristic hakkında daha fazla okuyun.](https://github.com/react/react/blob/14c2be8dac2d5482fda8a0906a31d239df8551fc/packages/react-server/src/ReactFizzServer.js#L210-L225)
 

src/content/reference/react/Component.md

@@ -1009,7 +1009,7 @@ State türetmek ayrıntılı koda yol açar ve bileşenlerinizi düşünmeyi zor
 
 #### Uyarılar {/*static-getderivedstatefromprops-caveats*/}
 
-- Bu method, nedeni ne olursa olsun **her** render’da tetiklenir. Bu, yalnızca parent bir re-render’a neden olduğunda tetiklenen ve local `setState` sonucu tetiklenmeyen [`UNSAFE_componentWillReceiveProps`](#unsafe_componentwillreceiveprops)’tan farklıdır.
+- Bu method, nedeni ne olursa olsun *her* render’da tetiklenir. Bu, yalnızca parent bir re-render’a neden olduğunda tetiklenen ve local `setState` sonucu tetiklenmeyen [`UNSAFE_componentWillReceiveProps`](#unsafe_componentwillreceiveprops)’tan farklıdır.
 
 - Bu metod, bileşen örneğine erişime sahip değildir. İsterseniz, `static getDerivedStateFromProps` ve diğer sınıf metodları arasında, bileşen prop'larının ve state'inin saf fonksiyonlarını sınıf tanımının dışında çıkararak bazı kodları yeniden kullanabilirsiniz.