feat: Add i18n docs and light and dark theme styles

This commit is contained in:
Alireza 2021-06-21 19:35:41 -04:00
parent 22656307ea
commit d5769be291
11 changed files with 180 additions and 164 deletions

1
docs/.gitignore vendored
View File

@ -1 +0,0 @@
./_book/*

View File

@ -1 +0,0 @@
docs.ohif.org

View File

@ -1,47 +0,0 @@
# How To: Documentation Step-by-Step
We use [GitBook](https://www.gitbook.com/) to create our documentation. It primarily uses markdown, html, css, js, misc. plugins, and configuration to generate high quality, easy to read, and easy to maintain documentation.
## Getting Started
_Requirements:_
Make sure you have the [`gitbook-cli`](https://www.npmjs.com/package/gitbook-cli) installed globally:
(Note that gitbook 3.2.3 works with node 10.19.0 and node 10.24.0, but not with node 14.x.)
> `npm install -g gitbook-cli`
### Editing and Previewing Changes
Currently, you can only edit and preview a single "book" at a time. We maintain one "book" per API major version. You can find each version's book at:
_Past Versions:_
- Template:
- `<project-root>/docs/v<versionNumber>`
- Examples:
- `/docs/v1`
- `/docs/v2`
_Latest Version:_
The latest version will always be located in `/docs/latest`
_Live Preview:_
In your terminal / command prompt:
```bash
cd /docs/latest
gitbook install
gitbook serve
```
Which should generate output like:
> starting server...
> serving book on http://localhost:4000
Navigating to the the provided URL will show a preview of what the generated book should look like. Any edits you make to the book's markdown files should automatically update in your browser.
### Publishing

View File

@ -1,3 +0,0 @@
# Netlify redirects
# SPA rules for our docs
/* /index.html 200

View File

@ -1 +0,0 @@
_book/

View File

View File

View File

@ -1,13 +0,0 @@
:: REQUIRES GLOBAL INSTALL OF GITBOOK and GITBOOK-CLI
::
:: Call this script from the command line while in the directory of the book
:: you want to actively edit + preview
::
:: `gitbook serve` can break with permission issues on Windows for misc.
:: machines. This script is a workaround. When `gitbook serve` fails, it silently
:: restarts it.
:: https://github.com/GitbookIO/gitbook/issues/1379#issuecomment-288048275
@Echo off
:Start
call gitbook serve
goto Start

View File

@ -327,7 +327,59 @@ Run the project as following to get full debug information:
REACT_APP_I18N_DEBUG=true yarn run dev
```
### Contributing with new languages
## Contributing with new languages
Contributions of any kind are welcome! Please check the
[instructions](../development/contributing.md).
We have integrated `i18next` into the OHIF Viewer and hooked it up with Locize for translation management. Now we need your help to get the app translated into as many languages as possible, and ensure that we haven't missed pieces of the app that need translation. Locize has graciously offered to provide us with free usage of their product.
Once each crowd-sourcing project is completed, we can approve it and merge the changes into the main project. At that point, the language will be immediately available on https://viewer.ohif.org/ for testing, and can be used in any OHIF project. We will support usage through both the Locize CDN and by copying the language directly into the `@ohif/i18n` package, so that end users can serve the content from their own domains.
Here are a couple examples:
Spanish:
https://viewer.ohif.org/viewer/1.2.840.113619.2.5.1762583153.215519.978957063.78?lng=es
Chinese:
https://viewer.ohif.org/viewer/1.2.840.113619.2.5.1762583153.215519.978957063.78?lng=zh
Portugese:
https://viewer.ohif.org/viewer/1.2.840.113619.2.5.1762583153.215519.978957063.78?lng=pt-BR
Here are some links you can use to sign up to help translate. All you have to do is sign up, translate the strings, and click Save. On our side, we have a dashboard to see how many strings are translated and by whom.
This is a pretty random set of languages, so please post below if you'd like a new language link to be added:
Languages:
[French](https://www.locize.io/register?invitation=Nj8jRPaFKYwtIfNZ6Y5GVOJOpeiXNAdVuSiOg9ceaiveP6uF6y1wVXM9lgfKoYZX)
[German](https://www.locize.io/register?invitation=gChNiVi66YINTPpbKESVAVYPapwg3DkpvMSSomLTvVqBJTXrdmPvxi0WZYHER11q)
[Dutch](https://www.locize.io/register?invitation=2PGe7I184aN0cazM4GXMhzeLtGTf9Zen5uyOEFhHQ8vYkfKHkgR0mJ8dwbNlIeCG)
[Turkish](https://www.locize.io/register?invitation=NOMIXsfneqPbFDqjce5wI7Z6p2swXSjc0rHOH4KLcM6qXSNA4LGyJaLxS7nqWAe3)
[Chinese](https://www.locize.io/register?invitation=lrcUbt7DvV4aJmQeEA4SMAj5xNWr3rltOcaZW1cFc6eod0nvzSPFU4V383tDHGGn)
[Japanese](https://www.locize.io/register?invitation=AaRq2S22o5FsxArwgVuw1gZcQjoe2ffyxarqlAXOpN7JnR2sf2mfamc5qV6LG1Mn)
[Arabic](https://www.locize.io/register?invitation=BiqI6fOm1sC84N3YJLbImXmaOCk8Hc3TMGpXg7NH2R0b0OKuPCp9wlCHLoqMRpfQ)
[Hindi](https://www.locize.io/register?invitation=ph7JmOGTV95DF3EFaI1kvK5Hx98dV9w2wj9h9UhUCWnkBNAwWEdWMcyjnF94zkWb)
[Malay](https://www.locize.io/register?invitation=HsV9F5mKZyeUZYrC3XFRzNI2l0EsIh6hK0MUIKP8IYZA3GxuzfgkvWBLCFwCpDik)
[Russian](https://www.locize.io/register?invitation=da4V9Q8DVO3M1FIlvfT50ZiS8NDNgvC0dE5hHUEAp47FXy6pLXmf1cp2lgLBfLmb)
[Swedish](https://www.locize.io/register?invitation=uR4kzBZC1vhJe6jyMwYXgGPj84QDMulQRlt2s6rONU6ljUh5dgwuUyhJEtZ4REA3)
[Italian](https://www.locize.io/register?invitation=viAS1NC5q342OxtuIv3JFX9DJ3KoR4SmGoElkBlRMphsDKt4hy9bW8JfBjHlfnd7)
[Spanish](https://www.locize.io/register?invitation=ZikXW3KI4w4eo5Cf6L1aQMWaR69XAQ0a9Va3NGorH7mAPvEPXp8w8NLkPNLs5nG8)
[Ukrainian](https://www.locize.io/register?invitation=TY0s6onqH3Asl05Bh1qB44SNSABL2pTYoturwxAmcNKRnzBZFK7bGfn7kVi23Vpg)
[Vietnamese](https://www.locize.io/register?invitation=eqfHDm0vaqxGfQ5TGt6SeV0dx9b2dCp1RrMRdIRavqzOCOAfD3IElzUsyIT689cK)
[Portugese-Brazil](https://www.locize.io/register?invitation=Qc5Dq449xbblQqLTpWeMfsyFiu3gACcgpj0EIucQjjs9Ph9pzPLpq3MnZupF9t6N)
Don't see your language in the above list? Add a request [here](https://github.com/OHIF/Viewers/issues/618) so that we can create the language for your translation contribution.

View File

@ -224,11 +224,11 @@ const isI18nStaging = process.env.I18N_STAGING === 'true';
liveCodeBlock: {
playgroundPosition: 'bottom',
},
hideableSidebar: true,
hideableSidebar: false,
colorMode: {
defaultMode: 'light',
defaultMode: 'dark',
disableSwitch: false,
respectPrefersColorScheme: true,
// respectPrefersColorScheme: true,
},
// announcementBar: {
// id: 'v1-new-domain',
@ -298,98 +298,71 @@ const isI18nStaging = process.env.I18N_STAGING === 'true';
},
footer: {
style: 'dark',
// links: [
// {
// title: 'Learn',
// items: [
// {
// label: 'Introduction',
// to: 'docs',
// },
// {
// label: 'Installation',
// to: 'docs/installation',
// },
// {
// label: 'Migration from v1 to v2',
// to: 'docs/migration',
// },
// ],
// },
// {
// title: 'Community',
// items: [
// {
// label: 'Stack Overflow',
// href: 'https://stackoverflow.com/questions/tagged/docusaurus',
// },
// {
// label: 'Feedback',
// to: 'feedback',
// },
// {
// label: 'Discord',
// href: 'https://discordapp.com/invite/docusaurus',
// },
// {
// label: 'Help',
// to: '/community/support',
// },
// ],
// },
// {
// title: 'More',
// items: [
// {
// label: 'Blog',
// to: 'blog',
// },
// {
// label: 'GitHub',
// href: 'https://github.com/OHIF/Viewers',
// },
// {
// label: 'Twitter',
// href: 'https://twitter.com/docusaurus',
// },
// {
// html: `
// <a href="https://www.netlify.com" target="_blank" rel="noreferrer noopener" aria-label="Deploys by Netlify">
// <img src="https://www.netlify.com/img/global/badges/netlify-color-accent.svg" alt="Deploys by Netlify" />
// </a>
// `,
// },
// ],
// },
// {
// title: 'Legal',
// // Please do not remove the privacy and terms, it's a legal requirement.
// items: [
// {
// label: 'Privacy',
// href: 'https://opensource.facebook.com/legal/privacy/',
// },
// {
// label: 'Terms',
// href: 'https://opensource.facebook.com/legal/terms/',
// },
// {
// label: 'Data Policy',
// href: 'https://opensource.facebook.com/legal/data-policy/',
// },
// {
// label: 'Cookie Policy',
// href: 'https://opensource.facebook.com/legal/cookie-policy/',
// },
// ],
// },
// ],
links: [
{
title: 'Learn',
items: [
{
label: 'Introduction',
to: '/',
},
{
label: 'Installation',
to: 'development/getting-started',
},
],
},
{
title: 'Community',
items: [
{
label: 'Feedback',
to: 'https://community.ohif.com/',
},
{
label: 'Discourse Forum',
href: 'https://community.ohif.com/',
},
{
label: 'Help',
to: '/help',
},
],
},
{
title: 'More',
items: [
{
label: 'GitHub',
href: 'https://github.com/OHIF/Viewers',
},
{
label: 'Twitter',
href: 'https://twitter.com/OHIFviewer',
},
{
html: `
<a href="https://viewer.ohif.org/" target="_blank" rel="noreferrer noopener" aria-label="Deploys by Netlify">
<img src="https://www.netlify.com/img/global/badges/netlify-color-accent.svg" alt="Deploys by Netlify" />
</a>
`,
},
],
},
{
title: 'Legal',
// Please do not remove the privacy and terms, it's a legal requirement.
items: [
],
},
],
logo: {
alt: 'OHIF ',
src: 'img/ohif.svg',
src: 'img/logo-ohif.svg',
href: 'https://ohif.org',
},
copyright: `Copyright © OHIF`,
copyright: `MIT © OHIF`,
},
},
});

View File

@ -1,25 +1,82 @@
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap");
/* stylelint-disable docusaurus/copyright-header */
/**
* Any CSS included here will be global. The classic template
* bundles Infima by default. Infima is a CSS framework designed to
* work well for content-centric websites.
*/
/* You can override the default Infima variables here. */
/* https://infima.dev/docs/utilities/colors */
/* https://docs.theochu.com/docusaurus/styling/ */
:root {
--ifm-color-primary: #25c2a0;
/*--ifm-color-primary: #25c2a0;
--ifm-color-primary-dark: rgb(33, 175, 144);
--ifm-color-primary-darker: rgb(31, 165, 136);
--ifm-color-primary-darkest: rgb(26, 136, 112);
--ifm-color-primary-light: rgb(70, 203, 174);
--ifm-color-primary-lighter: rgb(102, 212, 189);
--ifm-color-primary-lightest: rgb(146, 224, 208);
--ifm-color-primary-lightest: rgb(146, 224, 208);*/
--ifm-color-primary: #1c296d;
--ifm-color-primary-dark: #192562;
--ifm-color-primary-darker: #18235d;
--ifm-color-primary-darkest: #141d4c;
--ifm-color-primary-light: #1f2d78;
--ifm-color-primary-lighter: #202f7d;
--ifm-color-primary-lightest: #24358e;
--ifm-code-font-size: 95%;
--ifm-background-color: #f5ffff;
--ifm-background-surface-color: #f5ffff;
--ifm-menu-color: #002e85;
}
html[data-theme="dark"] {
--ifm-color-primary: #5acce6;
--ifm-color-primary-dark: #3ec3e2;
--ifm-color-primary-darker: #30bfe0;
--ifm-color-primary-darkest: #1da4c3;
--ifm-color-primary-light: #76d5ea;
--ifm-color-primary-lighter: #84d9ec;
--ifm-color-primary-lightest: #ade6f3;
--ifm-background-color: #080b2b;
--ifm-background-surface-color: #080b2b;
--ifm-menu-color: #7bb2ce;
}
.docusaurus-highlight-code-line {
background-color: rgb(72, 77, 91);
display: block;
margin: 0 calc(-1 * var(--ifm-pre-padding));
padding: 0 var(--ifm-pre-padding);
}
html {
font-size: 18px;
}
body {
font-family: "Inter", sans-serif;
}
h1,
h2,
h3,
h4,
h5 {
color: var(--ifm-color-primary);
font-weight: 400;
font-family: "Inter", sans-serif;
}
.menu {
font-weight: 400;
font-size: 1.0rem;
}
.menu__list-item .menu__list{
font-weight: 400;
font-size: 0.9rem;
}
.table-of-contents {
font-size: 0.8rem;
}