Merge branch 'main' into sync-c7d6b700

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)