docs(v2): Add Datagit site to showcase page

[massoudmaboudi]

Motivation

The RTL documentation of Datagit.ir is using Docusaurus v2. It could be cool to add it to the showcase page as it uses an RTL context and it is the first RTL website up and running using this platform.

Have you read the Contributing Guidelines on pull requests?

Yes

Test Plan

Run yarn run start:v2 and check that the page http://localhost:3000/showcase is rendered properly.

Related PRs

No

[netlify]

✔️ Deploy preview for docusaurus-2 ready!
Built without sensitive environment variables

🔨 Explore the source changes: 3762997

🔍 Inspect the deploy logs: https://app.netlify.com/sites/docusaurus-2/deploys/5ff3d2162dec0600072284b2

😎 Browse the preview: https://deploy-preview-3997--docusaurus-2.netlify.app

[github-actions]

⚡️ Lighthouse report for the changes in this PR:

Category	Score
🟠 Performance	86
🟢 Accessibility	99
🟢 Best practices	100
🟢 SEO	100
🟢 PWA	95

Lighthouse ran on https://deploy-preview-3997--docusaurus-2.netlify.app/classic/

[github-actions]

Size Change: +11 B (0%)

Total Size: 154 kB

ℹ️ View Unchanged

Filename	Size	Change
website/build/blog/2017/12/14/introducing-docusaurus/index.html	20.7 kB	-2 B (0%)
website/build/docs/introduction/index.html	180 B	0 B
website/build/index.html	5.81 kB	0 B
website/build/main.********.js	110 kB	+13 B (0%)
website/build/styles.********.css	17.6 kB	0 B

_{compressed-size-action}

[slorber]

thanks @massoudmaboudi that's a great example.

Can you please document what you had to do to add i18n support?
Are there things we can do in Docusaurus core to make it easier to support?
(asking because it will likely be needed for i18n in some locales)

[slorber]

merging as the failing test is already fixed on master

[slorber]

btw @massoudmaboudi your site repo does not exist or is not public, can you please fix the URL?
https://github.com/massoudmaboudi/datagit_v2.docusaurus

We only showcase open-source websites

[massoudmaboudi]

thanks @massoudmaboudi that's a great example.

Can you please document what you had to do to add i18n support?
Are there things we can do in Docusaurus core to make it easier to support?
(asking because it will likely be needed for i18n in some locales)

@slorber Thank you for merging the changes. I should mention that I didn't use i18n.
I change the layout completely to RTL and I swizzled the components accordingly. i18n doesn't have support for Persian translation as of now.
You may check on the Persian support if possible.
Thank you

[massoudmaboudi]

merging as the failing test is already fixed on master

@slorber May I ask you to provide the details about the error? Because even now I cloned from master and still I have the error with me. I have a clean code from master.

Thanks

[massoudmaboudi]

btw @massoudmaboudi your site repo does not exist or is not public, can you please fix the URL?
https://github.com/massoudmaboudi/datagit_v2.docusaurus

We only showcase open-source websites

The repo is private. I will make it public.

[slorber]

@massoudmaboudi the error is due to a test that only works for the 2020 year, it broke with the new year.

It has been fixed already. If you already have a fork, to have to update your fork's master based on docusaurus master to make it up to date.

[slorber]

Thanks for making your repo public.

The only thing you need for RTL support was in this CSS file? or are there other places?

https://github.com/massoudmaboudi/datagit_v2.docusaurus/blob/master/src/css/custom.css

I see many swizzled components, is this for RTL support?

We'll make sure you don't need to swizzle so much components to add RTL support very soon

[massoudmaboudi]

Thanks for making your repo public.

The only thing you need for RTL support was in this CSS file? or are there other places?

https://github.com/massoudmaboudi/datagit_v2.docusaurus/blob/master/src/css/custom.css

I see many swizzled components, is this for RTL support?

We'll make sure you don't need to swizzle so much components to add RTL support very soon

I added some CSS changes to ./src/css/custom.css and inside the swizzled components, I added some CSS changes + some changes in the text. For example the next and previous article button inside the blog and document. The text is not English so I changed them inside the swizzed components.
I already asked for this feature in https://v2.docusaurus.io/feedback/p/rtl-website.

IDK it is possible or not, but same like versioning, if we can add this functionality that by changing the language to an RTL language, the CSS and the texts for different parts of the website can change dynamically, it would be really great.

Also, there is another way that the website can support multiple instances inside itself.
This means, if I change the language, it loads the CSS and React code for that language. it means, if I select Persian, language, the RTL CSS, React code, docs, and blog should be loaded.

The reason behind it is that translation doesn't work properly for many languages and Persian is not an exception too. So, it means I have to write the content for the blog and docs manually. For sure, the layout components should be different then. It is like we are embedding 2 websites inside each other.

[slorber]

About the labels such as Next/Previous etc, they will be editable thanks to the i18n feature as well (some labels remain to be supported currently, but the goal is to cover all of them in the end).

You will also be able to say "this locale is RTL" and the theme should support it well, will work on that soon (including support a way when Persian is your default locale and you don't plan to add other locales).

Also, there is another way that the website can support multiple instances inside itself.

This is actually how the i18n system will work somehow (see http://jest-v2.netlify.app/ja), it's just we don't support RTL yet in the theme, but we will.

The reason behind it is that translation doesn't work properly for many languages and Persian is not an exception too.

Not sure to understand 😅

[massoudmaboudi]

@slorber
I checked http://jest-v2.netlify.app/ja but as you said, the theme is LTR but in my case, it should be changed to RTL theme. For example, the docs TOC should go to the right side instead of the left side.

What I meant by

The reason behind it is that translation doesn't work properly for many languages and Persian is not an exception too.

is that, I don't like to use translation systems or services. I like to rewrite my content in different languages myself.
For example doc1-fa.md, doc1-en.md.

I hope I clarified it.