From e861ada67d412ae7d0785bd69e64d18b1c2e17fd Mon Sep 17 00:00:00 2001 From: Edaz Date: Mon, 8 Mar 2021 06:08:35 +1300 Subject: [PATCH 1/2] Add deploy with Vercel button to api-routes-apollo-server-and-client example (#22841) --- examples/api-routes-apollo-server-and-client/README.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/examples/api-routes-apollo-server-and-client/README.md b/examples/api-routes-apollo-server-and-client/README.md index 2d51269818307..193136027c813 100644 --- a/examples/api-routes-apollo-server-and-client/README.md +++ b/examples/api-routes-apollo-server-and-client/README.md @@ -4,6 +4,12 @@ In this simple example, we integrate Apollo seamlessly with [Next.js data fetching methods](https://nextjs.org/docs/basic-features/data-fetching) to fetch queries in the server and hydrate them in the browser. +## Deploy your own + +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example): + +[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/api-routes-apollo-server-and-client&project-name=api-routes-apollo-server-and-client&repository-name=api-routes-apollo-server-and-client) + ## How to use Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example: From 3f9c469bca080ddf296def4e38a6cf8f9a3c31ad Mon Sep 17 00:00:00 2001 From: Laith Younes <66997668+laithyounes@users.noreply.github.com> Date: Sun, 7 Mar 2021 19:33:42 -0500 Subject: [PATCH 2/2] Add RTL to with-next-translate example (#22808) ### Arabic/Hebrew RTL to `with-next-translate` Example Added a simple example to change HTML direction based on the currently selected language ### References: - [#19049](https://github.com/vercel/next.js/discussions/19049) - [#18667](https://github.com/vercel/next.js/issues/18667) --- examples/with-next-translate/i18n.json | 2 +- .../locales/ar/common.json | 5 +++ .../with-next-translate/locales/ar/home.json | 14 +++++++++ .../with-next-translate/locales/ca/home.json | 4 +++ .../with-next-translate/locales/en/home.json | 4 +++ .../locales/he/common.json | 5 +++ .../with-next-translate/locales/he/home.json | 14 +++++++++ examples/with-next-translate/pages/index.js | 31 ++++++++++++++++--- 8 files changed, 73 insertions(+), 6 deletions(-) create mode 100644 examples/with-next-translate/locales/ar/common.json create mode 100644 examples/with-next-translate/locales/ar/home.json create mode 100644 examples/with-next-translate/locales/he/common.json create mode 100644 examples/with-next-translate/locales/he/home.json diff --git a/examples/with-next-translate/i18n.json b/examples/with-next-translate/i18n.json index b5ee98d9407ee..11cf7b6954c0f 100644 --- a/examples/with-next-translate/i18n.json +++ b/examples/with-next-translate/i18n.json @@ -1,5 +1,5 @@ { - "locales": ["en", "ca"], + "locales": ["en", "ca", "ar", "he"], "defaultLocale": "en", "pages": { "*": ["common"], diff --git a/examples/with-next-translate/locales/ar/common.json b/examples/with-next-translate/locales/ar/common.json new file mode 100644 index 0000000000000..2ec022cdd7f8d --- /dev/null +++ b/examples/with-next-translate/locales/ar/common.json @@ -0,0 +1,5 @@ +{ + "title": "مثال with-next-translate", + "powered": "Powered by", + "alt": "Vercel logo" +} diff --git a/examples/with-next-translate/locales/ar/home.json b/examples/with-next-translate/locales/ar/home.json new file mode 100644 index 0000000000000..4543b416dda30 --- /dev/null +++ b/examples/with-next-translate/locales/ar/home.json @@ -0,0 +1,14 @@ +{ + "arabic": "العربية", + "catalan": "الكاتالونية", + "change-arabic": "تغيير اللغة إلى العربية ", + "change-catalan": "تغيير اللغة إلى الكتالانية", + "change-english": "تغيير اللغة إلى اللغة الإنجليزية ", + "change-hebrew": "تغيير اللغة إلى العبرية", + "description": "ابدأ بالتعديل", + "english": "الإنجليزية", + "hebrew": "العبرية", + "next-docs": "اعثر على معلومات متعمقة حول ميزات Next.js وواجهة برمجة التطبيقات. ", + "plugin-docs": "اقرأ المزيد عن استخدام الترجمة التالية. ", + "title": "<0>مرحبا بك في <1>" +} diff --git a/examples/with-next-translate/locales/ca/home.json b/examples/with-next-translate/locales/ca/home.json index cf013f1f575b5..f7ec8cf75f401 100644 --- a/examples/with-next-translate/locales/ca/home.json +++ b/examples/with-next-translate/locales/ca/home.json @@ -1,9 +1,13 @@ { + "arabic": "Àrab", "catalan": "Català", + "change-arabic": "Canvia a la versió en àrab", "change-catalan": "Canvia a la versió en català", "change-english": "Canvia a la versió en anglès", + "change-hebrew": "Canvieu a la versió hebrea", "description": "Comença editant", "english": "Anglès", + "hebrew": "Hebreu", "next-docs": "Troba informació detallada sobre l'API de Next.js.", "plugin-docs": "Llegeix més sobre com fer servir next-translate.", "title": "<0>Benvingut a <1>" diff --git a/examples/with-next-translate/locales/en/home.json b/examples/with-next-translate/locales/en/home.json index 362ffc12d36a3..264dd02f23d99 100644 --- a/examples/with-next-translate/locales/en/home.json +++ b/examples/with-next-translate/locales/en/home.json @@ -1,9 +1,13 @@ { + "arabic": "Arabic", "catalan": "Catalan", + "change-arabic": "Change language to Arabic", "change-catalan": "Change language to Catalan", "change-english": "Change language to English", + "change-hebrew": "Change language to Hebrew", "description": "Get started by editing", "english": "English", + "hebrew": "Hebrew", "next-docs": "Find in-depth information about Next.js features and API.", "plugin-docs": "Read more about next-translation usage.", "title": "<0>Welcome to <1>" diff --git a/examples/with-next-translate/locales/he/common.json b/examples/with-next-translate/locales/he/common.json new file mode 100644 index 0000000000000..05996f30bf81d --- /dev/null +++ b/examples/with-next-translate/locales/he/common.json @@ -0,0 +1,5 @@ +{ + "title": "דוגמא with-next-translate", + "powered": "Powered by", + "alt": "Vercel logo" +} diff --git a/examples/with-next-translate/locales/he/home.json b/examples/with-next-translate/locales/he/home.json new file mode 100644 index 0000000000000..3b5a275c66a26 --- /dev/null +++ b/examples/with-next-translate/locales/he/home.json @@ -0,0 +1,14 @@ +{ + "arabic": "עֲרָבִית", + "catalan": "קטלאנית", + "change-arabic": "שנה שפה לערבית", + "change-catalan": "שנה שפה לקטלונית", + "change-english": "שנה שפה לאנגלית", + "change-hebrew": "שנה את השפה לעברית", + "description": "התחל על ידי עריכה", + "english": "אנגלית", + "hebrew": "עִברִית", + "next-docs": "מצא מידע מעמיק על התכונות וה- API של Next.js.", + "plugin-docs": "קרא עוד על השימוש בתרגום הבא.", + "title": "<0>ברוך הבא ל <1>" +} diff --git a/examples/with-next-translate/pages/index.js b/examples/with-next-translate/pages/index.js index 95e5bc831cb2e..ed065164e734d 100644 --- a/examples/with-next-translate/pages/index.js +++ b/examples/with-next-translate/pages/index.js @@ -4,11 +4,13 @@ import useTranslation from 'next-translate/useTranslation' import Layout from '../components/Layout' export default function Home() { - const { t } = useTranslation() + const { t, lang } = useTranslation() + const isRTL = lang === 'ar' || lang === 'he' + const arrow = isRTL ? String.fromCharCode(8592) : String.fromCharCode(8594) return ( -
+
+ +
+

{t('home:arabic')}

+

{t('home:change-arabic')}

+
+ + + +
+

{t('home:hebrew')}

+

{t('home:change-hebrew')}

+
+ + -

Next.js →

+

Next.{`js ${arrow}`}

{t('home:next-docs')}

 @@ -45,7 +61,7 @@ export default function Home() { href="https://github.com/vinissimus/next-translate" className="card" > -

Learn →

+

{`Learn ${arrow}`}

{t('home:plugin-docs')}

@@ -119,8 +135,9 @@ export default function Home() { } .card h3 { - margin: 0 0 1rem 0; + display: flex; font-size: 1.5rem; + margin: 0 0 1rem 0; } .card p { @@ -129,6 +146,10 @@ export default function Home() { line-height: 1.5; } + [dir='rtl'] p { + text-align: right; + } + @media (max-width: 600px) { .grid { width: 100%;