Docusaurus LTR cleanup by slorber · Pull Request #5 · massoudmaboudi/datagit

slorber · 2021-02-23T13:46:11Z

Trying to remove what can be removed :)

You can override the default fa translations provided by docusaurus by editing i18n/fa_IR/code.json.

You can "regenerate" this file by running npm run translate:fa (it may write other files to translate as well but they are not necessary in your case as your homepage has hardcoded Farsi text that you don't need to translate.

Note, you can use custom.css to target css module classes (with a generated classname) without swizzling, by using this trick:

.blog-wrapper [class^="sidebarItem"] {
    padding-right: 0;
}

I think it's better because you won't have to duplicate/maintain the full JS version and can just provide CSS overrrides

Note: Docusaurus currently does not translate some "dynamic/interpolated strings" (will be implemented later):

BlogPostItem reading time:

BlogTagsPostPage:

DocItem lastUpdated (does not seem used on your site anyway):

slorber · 2021-02-23T15:02:23Z

src/theme/BlogListPaginator/index.js

-  return <nav className="pagination-nav" aria-label="Blog list page navigation">
-      <div className="pagination-nav__item pagination-nav__item--next">
-        {nextPage && <Link className="pagination-nav__link" to={nextPage}>
-            <div className="pagination-nav__label">&laquo; مطالب قدیمی تر</div>


now translated by docusaurus

slorber · 2021-02-23T15:02:28Z

src/theme/BlogListPaginator/index.js

-      </div>
-      <div className="pagination-nav__item">
-        {previousPage && <Link className="pagination-nav__link" to={previousPage}>
-            <div className="pagination-nav__label">مطالب جدید تر &raquo;</div>


now translated by docusaurus

slorber · 2021-02-23T15:02:36Z

src/theme/BlogPostPaginator/index.js

-  return <nav className="pagination-nav" aria-label="Blog post page navigation">
-      <div className="pagination-nav__item">
-        {prevItem && <Link className="pagination-nav__link" to={prevItem.permalink}>
-            <div className="pagination-nav__sublabel">پست بعدی</div>


now translated by docusaurus

slorber · 2021-02-23T15:02:44Z

src/theme/BlogPostPaginator/index.js

-      </div>
-      <div className="pagination-nav__item pagination-nav__item--next">
-        {nextItem && <Link className="pagination-nav__link" to={nextItem.permalink}>
-            <div className="pagination-nav__sublabel">پست قبلی</div>


now translated by docusaurus

slorber · 2021-02-23T15:03:17Z

src/theme/BlogTagsListPage/index.js

-            <BlogSidebar sidebar={sidebar} />
-          </div>
-          <main className="col col--8">
-            <h1>برچسب ها</h1>


now translated by docusaurus

slorber · 2021-02-23T15:04:02Z

src/theme/DocPaginator/index.js

-  return <nav className="pagination-nav" aria-label="Blog list page navigation">
-      <div className="pagination-nav__item">
-        {metadata.previous && <Link className="pagination-nav__link" to={metadata.previous.permalink}>
-            <div className="pagination-nav__sublabel">قبلی</div>


now translated by docusaurus

slorber · 2021-02-23T16:17:35Z

i18n/fa_IR/code.json

@@ -0,0 +1,150 @@
+{


Use this file to override default Docusaurus labels without swizzling the components

slorber · 2021-02-23T16:19:12Z

src/theme/BlogPostItem/index.js

-import useBaseUrl from '@docusaurus/useBaseUrl';
+import Seo from '@theme/Seo';
 import styles from './styles.module.css';
-const MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];


FYI I "reswizzled" the component to update it to latest Docusaurus code (which is using prettier for better js code formatting now)

So most of the changes here are related to formatting and updated Docusaurus code

slorber · 2021-02-23T16:21:27Z

src/theme/BlogPostItem/index.js

@@ -58,54 +61,81 @@ function BlogPostItem(props) {
          </time>


Not yet translated by Docusaurus, so kept your translated label here

slorber · 2021-02-23T16:21:56Z

src/theme/BlogTagsPostsPage/index.js

@@ -36,18 +34,29 @@ function BlogTagsPostPage(props) {
              {count} پست با برچسب &quot;{tagName}


not yet translated, so kept it in Farsi

slorber · 2021-02-23T16:22:12Z

src/theme/BlogTagsPostsPage/index.js

 import BlogPostItem from '@theme/BlogPostItem';
 import Link from '@docusaurus/Link';
 import BlogSidebar from '@theme/BlogSidebar';
+import Translate from '@docusaurus/Translate';


Component also reswizzled to update it and format it

slorber · 2021-02-23T16:22:34Z

src/theme/BlogTagsPostsPage/index.js

+              <Translate
+                id="theme.tags.tagsPageLink"
+                description="The label of the link targeting the tag list page">
+                View All Tags


now correctly translated by docusaurus

slorber · 2021-02-23T16:22:49Z

src/theme/BlogPostItem/index.js

+                    <Translate
+                      id="theme.blog.post.readMore"
+                      description="The label used in blog post item excerpts to link to full blog posts">
+                      Read More


correctly translated by docusaurus

slorber · 2021-02-23T16:22:55Z

src/theme/BlogPostItem/index.js

+                  <Translate
+                    id="theme.tags.tagsListLabel"
+                    description="The label alongside a tag list">
+                    Tags:


correctly translated by docusaurus

slorber · 2021-02-23T16:23:29Z

src/theme/DocItem/index.js

 * LICENSE file in the root directory of this source tree.
 */
 import React from 'react';
-import Head from '@docusaurus/Head';


also reswizzled comp

slorber · 2021-02-23T16:23:50Z

src/theme/DocItem/index.js

+                    <div className="col text--right">
                      <em>
                        <small>
+                          {/* TODO: wait for using interpolation in translation function */}


not translated yet (but unused?)

slorber · 2021-02-23T16:29:47Z

@massoudmaboudi ready for a first review

I think if you could move the DocItem CSS changes to the custom.css file using the technique I mentioned in this PR, we could delete the DocItem comp entirely?

slorber · 2021-02-23T16:34:47Z

Here's an example of customizing the CSS of the doc title on the doc page:

[class^="docPage"] [class^="docTitle"] {
    color: red;
}

slorber · 2021-02-23T17:57:28Z

src/css/custom.css

-
-.codeBlockContent {
-  direction: ltr !important;
-}


can be removed, forced LTR by default for code blocks

slorber · 2021-03-08T16:11:58Z

sweet

is this deployed live?

slorber · 2021-03-08T18:36:56Z

@massoudmaboudi can you please talk to me on discord asap? Would like to feature your site for the i18n release tomorrow!

slorber added 2 commits February 23, 2021 14:41

update docusaurus.config.js

ae873e4

remove some uselessly swizzled components

7fa12ab

slorber mentioned this pull request Feb 23, 2021

polish(v2): Add more tags translations facebook/docusaurus#4275

Merged

slorber commented Feb 23, 2021

View reviewed changes

slorber added 4 commits February 23, 2021 16:56

update docusaurus

15aca2c

update BlogTagsPostPage

6124b42

swizzle update

b7c1970

remove blog sidebar CSS

e4488c5

slorber commented Feb 23, 2021

View reviewed changes

restore docitem css

d3ff5c3

slorber marked this pull request as ready for review February 23, 2021 16:27

LTR code blocks

d5371e5

slorber commented Feb 23, 2021

View reviewed changes

ignore yarn.lock as you are using npm

af76e90

massoudmaboudi merged commit 19fb386 into master Mar 7, 2021

massoudmaboudi deleted the docusaurus-ltr branch March 7, 2021 11:26

		@@ -36,18 +34,29 @@ function BlogTagsPostPage(props) {
		{count} پست با برچسب "{tagName}

Conversation

slorber commented Feb 23, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

slorber Feb 23, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

slorber commented Feb 23, 2021

Uh oh!

slorber commented Feb 23, 2021

Uh oh!

Choose a reason for hiding this comment

Uh oh!

slorber commented Mar 8, 2021

Uh oh!

slorber commented Mar 8, 2021

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

slorber commented Feb 23, 2021 •

edited

Loading

slorber Feb 23, 2021 •

edited

Loading