Merge pull request #271 from jaredh159/spanish-screentime

gertrude-app · Nov 8, 2023 · 88f5cd3 · 88f5cd3
2 parents d78f117 + 3a9465d
commit 88f5cd3
Show file tree

Hide file tree

Showing 47 changed files with 636 additions and 25 deletions.
diff --git a/site/app/docs/ArticleFeedbackForm.tsx b/site/app/docs/ArticleFeedbackForm.tsx
@@ -2,17 +2,20 @@ import React from 'react';
 
 interface Props {
   name: string;
+  lang: 'en' | 'es';
 }
 
-const ArticleFeedbackForm: React.FC<Props> = ({ name }) => (
+const ArticleFeedbackForm: React.FC<Props> = ({ name, lang }) => (
   <div className="mt-16">
     <div className="flex gap-4">
       <span className="text-4xl" role="img" aria-label="thinking emoji">
         🤔
       </span>
       <p className="mb-3 mt-0 italic leading-snug">
-        Questions? Comments? Stuck trying to do some step of this tutorial? Let us know by
-        submitting the form below, and we'll try to help!
+        {lang === `en`
+          ? `Questions? Comments? Stuck trying to do some step of this tutorial? Let us know by
+        submitting the form below, and we'll try to help!`
+          : `¿Preguntas? ¿Comentarios? ¿Te quedaste atascado intentando realizar algún paso de este tutorial? Háznoslo saber enviando el siguiente formulario y ¡haremos lo posible por ayudarte!`}
       </p>
     </div>
     <form
@@ -25,7 +28,7 @@ const ArticleFeedbackForm: React.FC<Props> = ({ name }) => (
       <div className="lg:flex lg:space-x-4">
         <fieldset className="lg:w-1/2">
           <label className="block text-slate-300" htmlFor="name">
-            Name:
+            {lang === `en` ? `Name:` : `Nombre:`}
           </label>
           <input
             className="bg-slate-600 text-white rounded-md w-full max-w-sm"
@@ -37,7 +40,7 @@ const ArticleFeedbackForm: React.FC<Props> = ({ name }) => (
         </fieldset>
         <fieldset className="lg:w-1/2 mt-4 lg:mt-0">
           <label className="block text-slate-300" htmlFor="email">
-            Email:
+            {lang === `en` ? `Email:` : `Correo electrónico:`}
           </label>
           <input
             className="bg-slate-600 text-white rounded-md w-full max-w-sm"
@@ -51,7 +54,7 @@ const ArticleFeedbackForm: React.FC<Props> = ({ name }) => (
       </div>
       <fieldset>
         <label className="block text-slate-300" htmlFor="message">
-          Message:
+          {lang === `en` ? `Message:` : `Mensaje:`}
         </label>
         <textarea
           className="bg-slate-600 text-white rounded-md w-full"
@@ -63,7 +66,7 @@ const ArticleFeedbackForm: React.FC<Props> = ({ name }) => (
       </fieldset>
       <fieldset>
         <button className="bg-slate-600 rounded-lg px-5 py-0.5" type="submit">
-          Submit &rarr;
+          {lang === `en` ? `Submit` : `Enviar`} →
         </button>
       </fieldset>
     </form>

diff --git a/site/app/docs/Callout.tsx b/site/app/docs/Callout.tsx
@@ -4,7 +4,7 @@ import Icon from './Icon';
 const styles = {
   note: {
     title: `text-violet-400`,
-    body: `[--tw-prose-background:theme(colors.violet.50)] prose-a:text-violet-900 text-slate-300 prose-code:text-slate-300 prose-strong:text-white prose-em:text-slate-100`,
+    body: `[--tw-prose-background:theme(colors.violet.50)] prose-a:text-violet-500 text-slate-300 prose-code:text-slate-300 prose-strong:text-white prose-em:text-slate-100`,
   },
   warning: {
     title: `text-amber-500`,

diff --git a/site/app/docs/Layout.tsx b/site/app/docs/Layout.tsx
@@ -65,9 +65,10 @@ interface Props {
   children: React.ReactNode;
   tableOfContents: Array<Section>;
   title: string;
+  lang: 'en' | 'es';
 }
 
-const Layout: React.FC<Props> = ({ children, title, tableOfContents }) => {
+const Layout: React.FC<Props> = ({ children, title, tableOfContents, lang }) => {
   const router = useRouter();
   const allLinks = navigation.flatMap((section) => section.links);
   const linkIndex = allLinks.findIndex((link) => link.href === router.pathname);
@@ -104,7 +105,12 @@ const Layout: React.FC<Props> = ({ children, title, tableOfContents }) => {
             {(title || section) && (
               <header className="mb-9 space-y-1">
                 {section && (
-                  <p className="font-lexend text-sm font-medium text-violet-400">
+                  <p
+                    className={cx(
+                      `font-lexend text-sm font-medium text-violet-400`,
+                      lang === `es` && `hidden`,
+                    )}
+                  >
                     {section.title}
                   </p>
                 )}
@@ -155,7 +161,7 @@ const Layout: React.FC<Props> = ({ children, title, tableOfContents }) => {
                   id="on-this-page-title"
                   className="font-lexend text-sm font-medium text-white"
                 >
-                  On this page
+                  {lang === `en` ? `On this page` : `En esta página`}
                 </h2>
                 <ol className="mt-4 space-y-3 text-sm leading-snug">
                   {tableOfContents.map((section) => (

diff --git a/site/app/docs/Navigation.tsx b/site/app/docs/Navigation.tsx
@@ -21,6 +21,7 @@ const Navigation: React.FC<Props> = ({ navigation, className }) => {
                 <li key={link.href} className="relative">
                   <Link
                     href={link.href}
+                    locale={link.href.includes(`bloquear`) ? `es` : `en`}
                     className={cx(
                       `block w-full pl-3.5 before:pointer-events-none before:absolute before:-left-1 before:top-1/2 before:h-1.5 before:w-1.5 before:-translate-y-1/2 before:rounded-full`,
                       link.href === router.pathname

diff --git a/site/app/docs/navigation-list.ts b/site/app/docs/navigation-list.ts
@@ -32,6 +32,10 @@ const navigation = [
         title: `No Removing Images GIF search in iOS 17`,
         href: `/docs/ios-17-cant-delete-messages-images`,
       },
+      {
+        title: `Guía Definitiva para Bloquear un iPhone`,
+        href: `/docs/guia-definitiva-para-bloquear-un-iphone`,
+      },
     ],
   },
   {

diff --git a/site/app/markdoc/tags.tsx b/site/app/markdoc/tags.tsx
@@ -46,6 +46,12 @@ const tags = {
   'article-feedback-form': {
     attributes: {
       name: { type: String },
+      lang: {
+        type: String,
+        default: `en`,
+        matches: [`en`, `es`],
+        errorLevel: `critical`,
+      },
     },
     render: ArticleFeedbackForm,
   },

diff --git a/site/app/pages/_app.tsx b/site/app/pages/_app.tsx
@@ -16,20 +16,26 @@ const App: React.FC<AppProps<{ markdoc?: MarkDoc }>> = ({ Component, pageProps }
   const ogImage = pageProps.markdoc?.frontmatter.image ?? OgImage.src;
   const path = router.asPath === `/` ? `` : router.asPath;
   const canonicalUrl = (`https://gertrude.app` + path).split(`?`)[0];
+  let lang: `en` | `es` = `en`;
   let pageTitle = `Gertrude | Mac Internet Filter, Parental Controls and Activity Monitoring`;
   let description = `Protect your kids online with easy-to-use Mac internet filtering, internet blocking, and mac keylogging.`;
 
   // docs markdown pages
   if (pageProps.markdoc) {
     const title = pageProps.markdoc.frontmatter.title;
     if (!title) throw new Error(`Missing title in frontmatter for ${path}`);
-    pageTitle = `${title} | Gertrude Internet Filter & Parental Controls`;
+    lang = title.includes(`Bloquear`) ? `es` : `en`;
+    const gertrude =
+      lang === `en`
+        ? `Gertrude Internet Filter & Parental Controls`
+        : `Gertrude Filtro de Internet y Controles Parentales`;
+    pageTitle = `${title} | ${gertrude}`;
     description = pageProps.markdoc?.frontmatter.description;
     const tableOfContents = pageProps.markdoc?.content
       ? collectHeadings(pageProps.markdoc.content)
       : [];
     Main = (
-      <DocsLayout title={title} tableOfContents={tableOfContents}>
+      <DocsLayout lang={lang} title={title} tableOfContents={tableOfContents}>
         {Main}
       </DocsLayout>
     );
@@ -41,6 +47,7 @@ const App: React.FC<AppProps<{ markdoc?: MarkDoc }>> = ({ Component, pageProps }
         <title>{pageTitle}</title>
         <meta name="description" content={description} />
         <meta name="og:image" content={ogImage} />
+        <meta httpEquiv="content-language" content={lang} />
         <link rel="icon" type="image/png" href={Favicon.src} />
         <link rel="canonical" href={canonicalUrl} />
       </Head>

diff --git a/site/app/pages/_document.tsx b/site/app/pages/_document.tsx
@@ -1,13 +1,18 @@
 import { Html, Head, Main, NextScript } from 'next/document';
+import type { DocumentContext } from 'next/document';
 
-const Document: React.FC = () => (
-  <Html lang="en" className="[font-feature-settings:'ss01'] js-focus-visible">
-    <Head />
-    <body>
-      <Main />
-      <NextScript />
-    </body>
-  </Html>
-);
+const Document: React.FC<{ ctx: DocumentContext }> = (ctx) => {
+  const pagePath: string = (ctx as any)?.__NEXT_DATA__?.page ?? ``;
+  const lang = pagePath.includes(`bloquear`) ? `es` : `en`;
+  return (
+    <Html lang={lang} className="[font-feature-settings:'ss01'] js-focus-visible">
+      <Head />
+      <body>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  );
+};
 
 export default Document;
diff --git a/site/app/pages/blog/index.tsx b/site/app/pages/blog/index.tsx
@@ -38,7 +38,7 @@ export const getStaticProps: GetStaticProps = async () => {
 };
 
 const BlogPosts: React.FC<{ posts: Post[] }> = ({ posts }) => (
-  <DocsLayout title="Gertrude Engineering Blog" tableOfContents={[]}>
+  <DocsLayout lang="en" title="Gertrude Engineering Blog" tableOfContents={[]}>
     {posts
       .sort((a, b) => (a.date < b.date ? 1 : -1))
       .map((post) => (

diff --git a/site/app/pages/docs/definitive-guide-to-locking-down-an-iphone.md b/site/app/pages/docs/definitive-guide-to-locking-down-an-iphone.md
@@ -540,4 +540,4 @@ We also recommend you check the items in our article about
 
 {% /callout %}
 
-{% article-feedback-form name="lockdown-iphone-guide" /%}
+{% article-feedback-form name="lockdown-iphone-guide" lang="en" /%}
diff --git a/site/app/pages/docs/five-things-you-forgot-when-locking-down-your-kids-iphone.md b/site/app/pages/docs/five-things-you-forgot-when-locking-down-your-kids-iphone.md
@@ -370,4 +370,4 @@ If you haven't taken the time to carefully lock down your child's iPhone, we hav
 
 {% /callout %}
 
-{% article-feedback-form name="five-things" /%}
+{% article-feedback-form name="five-things" lang="en" /%}
Original file line number	Diff line number	Diff line change
Expand Up		@@ -540,4 +540,4 @@ We also recommend you check the items in our article about

		{% /callout %}

		{% article-feedback-form name="lockdown-iphone-guide" /%}
		{% article-feedback-form name="lockdown-iphone-guide" lang="en" /%}
Original file line number	Diff line number	Diff line change
Expand Up		@@ -370,4 +370,4 @@ If you haven't taken the time to carefully lock down your child's iPhone, we hav

		{% /callout %}

		{% article-feedback-form name="five-things" /%}
		{% article-feedback-form name="five-things" lang="en" /%}