From 7b6c3ceb9dd97249e9dce4a8a94e61aed6424698 Mon Sep 17 00:00:00 2001 From: Aurora Scharff <66901228+aurorascharff@users.noreply.github.com> Date: Mon, 20 Jul 2026 15:31:48 +0200 Subject: [PATCH 1/4] [og images] Resize long og image text (#8543) * Resize long og image text * address feedback --- package.json | 1 + scripts/generateOgImages.mjs | 30 +++++++++++++++++++++++++++++- 2 files changed, 30 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 97bc1432c..567102e04 100644 --- a/package.json +++ b/package.json @@ -52,6 +52,7 @@ "@babel/preset-react": "^7.18.6", "@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", diff --git a/scripts/generateOgImages.mjs b/scripts/generateOgImages.mjs index 937727a1c..bc805d386 100644 --- a/scripts/generateOgImages.mjs +++ b/scripts/generateOgImages.mjs @@ -14,6 +14,7 @@ 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'); @@ -34,6 +35,33 @@ 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}}; } @@ -103,7 +131,7 @@ function card(title, pagePath) { flexGrow: 1, display: 'flex', alignItems: 'center', - fontSize: title.length > 24 ? 72 : 96, + fontSize: titleFontSize(title), fontFamily: 'Optimistic Display Bold', color: '#f6f7f9', lineHeight: 1.1, From 2be6bca72b4abd53b3eecb363b1532374a80012b Mon Sep 17 00:00:00 2001 From: anilcanboga Date: Tue, 8 Sep 2026 22:49:03 +0300 Subject: [PATCH 2/4] sync-7b6c3ceb --- src/components/Layout/Footer.tsx | 7 +- src/content/blog/index.md | 6 +- src/content/community/index.md | 6 +- src/content/learn/tutorial-tic-tac-toe.md | 26 +- .../reference/react-dom/components/common.md | 6 +- .../server/renderToPipeableStream.md | 16 +- .../server/renderToReadableStream.md | 58 ++--- src/content/reference/react/Component.md | 6 +- src/content/reference/react/Suspense.md | 70 ++---- src/content/reference/react/use.md | 234 ++---------------- .../reference/react/useDeferredValue.md | 10 +- .../reference/react/useLayoutEffect.md | 6 +- yarn.lock | 8 - 13 files changed, 79 insertions(+), 380 deletions(-) diff --git a/src/components/Layout/Footer.tsx b/src/components/Layout/Footer.tsx index 117f8b82a..8413d76aa 100644 --- a/src/components/Layout/Footer.tsx +++ b/src/components/Layout/Footer.tsx @@ -346,13 +346,8 @@ export function Footer() { Topluluk -<<<<<<< HEAD - - Davranış Kuralları -======= - Code of Conduct ->>>>>>> 7b6c3ceb9dd97249e9dce4a8a94e61aed6424698 + Davranış Kuralları Takımla Tanışın diff --git a/src/content/blog/index.md b/src/content/blog/index.md index 10b4d577c..cf5051c6a 100644 --- a/src/content/blog/index.md +++ b/src/content/blog/index.md @@ -150,11 +150,7 @@ React ekibi birkaç güncellemeyi paylaşmaktan heyecan duyuyor: ### Tüm sürüm notları {/*all-release-notes*/} -<<<<<<< HEAD -Her React sürümü kendi blog yazısını hak etmez, ancak React deposundaki [`CHANGELOG.md`](https://github.com/facebook/react/blob/main/CHANGELOG.md) dosyasında ve [Releases](https://github.com/facebook/react/releases) sayfasında her sürüm için ayrıntılı bir değişiklik günlüğü bulabilirsiniz. -======= -Not every React release deserves its own blog post, but you can find a detailed changelog for every release in the [`CHANGELOG.md`](https://github.com/react/react/blob/main/CHANGELOG.md) file in the React repository, as well as on the [Releases](https://github.com/react/react/releases) page. ->>>>>>> 7b6c3ceb9dd97249e9dce4a8a94e61aed6424698 +Her React release’i kendi blog post’unu hak etmeyebilir, ancak her release için detaylı changelog’u React repository’sindeki [`CHANGELOG.md`](https://github.com/react/react/blob/main/CHANGELOG.md) dosyasında ve [Releases](https://github.com/react/react/releases) sayfasında bulabilirsiniz. --- diff --git a/src/content/community/index.md b/src/content/community/index.md index 7b4c61b82..7bba112c4 100644 --- a/src/content/community/index.md +++ b/src/content/community/index.md @@ -10,11 +10,7 @@ React milyonlarca geliştiriciden oluşan bir topluluğa sahiptir. Bu sayfada bi ## Davranış Kuralları {/*code-of-conduct*/} -<<<<<<< HEAD -React topluluklarına katılmadan önce, [lütfen Davranış Kurallarımızı okuyun.](https://github.com/facebook/react/blob/main/CODE_OF_CONDUCT.md) Biz, [Katkı Sağlayıcı Tüzüğünü](https://www.contributor-covenant.org/) benimsedik ve tüm topluluk üyelerinin bu kurallara uymasını bekliyoruz. -======= -Before participating in React's communities, [please read our Code of Conduct.](https://github.com/react/react/blob/main/CODE_OF_CONDUCT.md) We have adopted the [Contributor Covenant](https://www.contributor-covenant.org/) and we expect that all community members adhere to the guidelines within. ->>>>>>> 7b6c3ceb9dd97249e9dce4a8a94e61aed6424698 +React topluluklarına katılmadan önce, [lütfen Code of Conduct’ımızı okuyun.](https://github.com/react/react/blob/main/CODE_OF_CONDUCT.md) [Contributor Covenant](https://www.contributor-covenant.org/)’ı benimsedik ve tüm community üyelerinin buradaki guideline’lara uymasını bekliyoruz. ## Stack Overflow {/*stack-overflow*/} diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md index 5a0c1188f..ee26ecafb 100644 --- a/src/content/learn/tutorial-tic-tac-toe.md +++ b/src/content/learn/tutorial-tic-tac-toe.md @@ -899,33 +899,19 @@ body { ### React Geliştirici Araçları {/*react-developer-tools*/} -<<<<<<< HEAD -React DevTools, React bileşenlerinizin prop'larını ve state'ini kontrol etmenize olanak sağlar. React DevTools sekmesini CodeSandbox'ın _browser_ bölümünün en altında bulabilirsiniz: +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. -![CodeSandbox'ta React DevTools](../images/tutorial/codesandbox-devtools.png) +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: -Ekrandaki herhangi bir bileşeni incelemek için, React DevTools'un sol üst köşesindeki butonu kullanın: +![yeni tab’da açma](../images/tutorial/sandbox-new-tab.png) -![React DevTools kullanarak ekrandaki bileşenleri seçmek](../images/tutorial/devtools-select.gif) -======= -React Developer Tools let you check the props and the state of your React components. It is available as a [Chrome](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en), [Firefox](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/), and [Edge](https://microsoftedge.microsoft.com/addons/detail/react-developer-tools/gpphkfbcpidddadnkolkpfckpihlkkil) browser extension. - -After you install it, a new *Components* tab will appear in your browser Developer Tools for sites using React. If you're following along in CodeSandbox, you'd need to first open your sandbox preview in a new tab: - -![opening in new tab](../images/tutorial/sandbox-new-tab.png) - -Then, on the preview page, open your browser's DevTools and find the *Components* tab: ->>>>>>> 7b6c3ceb9dd97249e9dce4a8a94e61aed6424698 +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) -<<<<<<< HEAD -Yerel geliştirme için, React DevTools, [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) tarayıcılarında eklentiye sahiptir. Eklentiyi kurun ve React kullanan sitelerde tarayıcınızın Geliştirici Araçlarında *Components(bileşenler)* sekmesi gözükecektir. -======= -To inspect a particular component on the screen, use the button in the top left corner of the Components tab: +Ekrandaki belirli bir component’i inspect etmek için Components tab’ının sol üst köşesindeki button’u kullanın: -![inspecting with devtools](../images/tutorial/devtools-inspect.gif) ->>>>>>> 7b6c3ceb9dd97249e9dce4a8a94e61aed6424698 +![devtools ile inspect etme](../images/tutorial/devtools-inspect.gif) ## Oyunu tamamlama {/*completing-the-game*/} diff --git a/src/content/reference/react-dom/components/common.md b/src/content/reference/react-dom/components/common.md index 4545494e1..98569ae2a 100644 --- a/src/content/reference/react-dom/components/common.md +++ b/src/content/reference/react-dom/components/common.md @@ -36,11 +36,7 @@ title: "Ortak bileşenler (örn.
)" * `suppressHydrationWarning`: Bir boolean. Eğer [sunucu taraflı render'lama](/reference/react-dom/server) kullanıyorsanız, sunucu ve istemci farklı içerikleri render ettiğinde normalde bir uyarı görürsünüz. Bazı ender durumlarda (zaman damgası gibi) ise birebir eşleşmeyi sağlamak çok zor veya imkansızdır. Eğer `suppressHydrationWarning`'i `true` olarak ayarlarsanız, React o elemanın içeriği ve niteliklerindeki yanlış eşleşmelerle ilgili bir uyarı vermeyecektir. Yalnızca bir kademe derinde çalışır ve bir kaçış yolu olarak kullanılması amaçlanmıştır. Gereğinden fazla kullanmayınız. [Hydration hatalarını baskılamayla ilgili daha fazlasını okuyun.](/reference/react-dom/client/hydrateRoot#suppressing-unavoidable-hydration-mismatch-errors) -<<<<<<< HEAD -* `style`: CSS biçimlerini taşıyan bir nesne, örneğin `{ fontWeight: 'bold', margin: 20 }`. DOM'un [`style`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) özelliğine benzer olarak, CSS özellik isimleri `camelCase` olarak yazılmalıdır, örneğin `font-weight` yerine `fontWeight`. Değerleri string veya sayı olarak verebilirsiniz. `width: 100` şeklinde bir sayı verdiğinizde, eğer [birimsiz özellik](https://github.com/facebook/react/blob/81d4ee9ca5c405dce62f64e61506b8e155f38d8d/packages/react-dom-bindings/src/shared/CSSProperty.js#L8-L57) değilse, React bu sayıya otomatik olarak `px` ("piksel")'i ekler. `style`'ı yalnızca, biçim değerlerini önceden bilmediğiniz dinamik biçimler için kullanmanızı tavsiye ediyoruz. Diğer durumlarda ise `className` ile düz CSS sınıfları uygulamak daha verimli. [`className` and `style` ile ilgili daha fazlasını okuyun.](#applying-css-styles) -======= -* `style`: An object with CSS styles, for example `{ fontWeight: 'bold', margin: 20 }`. Similarly to the DOM [`style`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) property, the CSS property names need to be written as `camelCase`, for example `fontWeight` instead of `font-weight`. You can pass strings or numbers as values. If you pass a number, like `width: 100`, React will automatically append `px` ("pixels") to the value unless it's a [unitless property.](https://github.com/react/react/blob/81d4ee9ca5c405dce62f64e61506b8e155f38d8d/packages/react-dom-bindings/src/shared/CSSProperty.js#L8-L57) We recommend using `style` only for dynamic styles where you don't know the style values ahead of time. In other cases, applying plain CSS classes with `className` is more efficient. [Read more about `className` and `style`.](#applying-css-styles) ->>>>>>> 7b6c3ceb9dd97249e9dce4a8a94e61aed6424698 +* `style`: CSS style’larını içeren bir object, örneğin `{ fontWeight: 'bold', margin: 20 }`. DOM [`style`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) property’sine benzer şekilde, CSS property adlarının `camelCase` olarak yazılması gerekir; örneğin `font-weight` yerine `fontWeight`. Value olarak string veya number geçebilirsiniz. `width: 100` gibi bir number geçirirseniz, unitless bir [property](https://github.com/react/react/blob/81d4ee9ca5c405dce62f64e61506b8e155f38d8d/packages/react-dom-bindings/src/shared/CSSProperty.js#L8-L57) olmadığı sürece React value’ya otomatik olarak `px` ("pixels") ekler. `style`’ı yalnızca style value’larını önceden bilmediğiniz dynamic style’lar için kullanmanızı öneririz. Diğer durumlarda, plain CSS class’larını `className` ile uygulamak daha verimlidir. [`className` ve `style` hakkında daha fazla okuyun.](#applying-css-styles) Şu standart DOM prop'ları da tüm yerleşik bileşenlerde desteklenir: diff --git a/src/content/reference/react-dom/server/renderToPipeableStream.md b/src/content/reference/react-dom/server/renderToPipeableStream.md index 7a5dd9fa0..2ae9b5dd1 100644 --- a/src/content/reference/react-dom/server/renderToPipeableStream.md +++ b/src/content/reference/react-dom/server/renderToPipeableStream.md @@ -299,21 +299,7 @@ Stream işleminin, React'ın tarayıcıya yüklenmesini veya uygulamanızın etk -<<<<<<< HEAD -**Sadece Suspense özelliğine sahip veri kaynakları Suspense bileşenini etkinleştirir.** Şunları içerir: - -- [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/) ve [Next.js](https://nextjs.org/docs/getting-started/react-essentials) gibi Suspense özelliği etkin framework'lerde veri getirme -- [`lazy`](/reference/react/lazy) ile bileşen kodunu temvel yükleme (lazy-loading). -- [`use`](/reference/react/use) ile bir Promise'in değerini okuma. - -Effect veya olay yöneticisi içinde veri alınırken Suspense **tespit edilmez**. - -Yukarıdaki `Posts` bileşenininde veri getirmenin tam yolu framework'ünüze bağlıdır. Suspense özelliği etkin bir framework kullanırsanız, detayları framework'ünüzün veri getirme dokümantasyonunun içinde bulabilirsiniz. - -Opinionated bir framework kullanmadan Suspense-enabled data fetching henüz desteklenmemektedir. Suspense-enabled bir data source implement etmek için gereken requirement’lar unstable ve undocumented durumdadır. Data source’ları Suspense ile integrate etmek için resmi bir API, React’in gelecekteki bir version’ında yayınlanacaktır. -======= -Only data read from a source that [activates a Suspense boundary](/reference/react/Suspense#what-activates-a-suspense-boundary), such as a Promise read with [`use`](/reference/react/use), will suspend during rendering. Suspense does not detect data fetched inside an Effect or event handler. ->>>>>>> 7b6c3ceb9dd97249e9dce4a8a94e61aed6424698 +Yalnızca [`use`](/reference/react/use) ile okunan bir Promise gibi, [Suspense boundary’yi aktive eden](/reference/react/Suspense#what-activates-a-suspense-boundary) bir kaynaktan okunan data rendering sırasında suspend olur. Suspense, bir Effect veya event handler içinde fetch edilen data’yı detect etmez. diff --git a/src/content/reference/react-dom/server/renderToReadableStream.md b/src/content/reference/react-dom/server/renderToReadableStream.md index 005311fc5..b0c312968 100644 --- a/src/content/reference/react-dom/server/renderToReadableStream.md +++ b/src/content/reference/react-dom/server/renderToReadableStream.md @@ -49,29 +49,25 @@ Client tarafında, server tarafından oluşturulan HTML’i interaktif hale geti * `reactNode`: HTML’e render etmek istediğiniz bir React node. Örneğin `` gibi bir JSX element’i. Bunun tüm dokümanı temsil etmesi beklenir, bu yüzden `App` component’i `` etiketini render etmelidir. -<<<<<<< HEAD -* **opsiyonel** `options`: Stream için yapılandırma seçeneklerini içeren bir obje. - * **opsiyonel** `bootstrapScriptContent`: Belirtilirse, bu string inline bir `