@modern-js/main-doc 2.8.0 → 2.10.0

package/src/components/ListCard/index.module.css

@@ -0,0 +1,58 @@
+
+.card{
+  display: flex;
+  max-width: 32%;
+  flex: 1 1 32%;
+  align-items: center;
+  margin-left: 16px;
+  margin-bottom: 16px;
+  height: 135px;
+  padding: 0 35.4px;
+  color: #FFFFFF;
+  background: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  box-sizing: border-box;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.card:hover{
+  transition: all 0.3s ease;
+  background: rgba(78, 202, 255, 0.2);
+}
+.desc{
+  display: inline-block;
+  margin-left: 20px;
+  color: #fff;
+}
+
+.icon{
+  width: 48px;
+  height: 48px;
+  fill: #fff;
+  flex: 0 0 48px;
+}
+
+@media screen and (min-width: 966px) and (max-width: 1300px) {
+  .card{
+    max-width: 48%;
+    flex: 1 1 48%;
+  }
+}
+
+@media screen and (max-width: 966px) {
+  .card{
+    width: 100%;
+    height: 70px;
+    margin: 0;
+    margin-bottom: 12px;
+    padding: 0 31px;
+    max-width: none;
+    flex: none;
+  }
+  .icon{
+    width: 20px;
+    height: 20px;
+  }
+}

package/src/components/ListCard/index.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { withBase } from '@modern-js/doc-tools/runtime';
+import styles from './index.module.css';
+
+export interface ICardProps {
+  desc: string;
+  icon: string;
+  href: string;
+}
+
+const ListCard: React.FC<ICardProps> = ({ desc, icon: Icon, href }) => (
+  <a
+    className={styles.card}
+    href={withBase(href)}
+    style={{ textDecoration: 'none' }}
+  >
+    {typeof Icon === 'function' ? (
+      <Icon className={styles.icon} />
+    ) : (
+      <img src={Icon} className={styles.icon} />
+    )}
+    <span className={styles.desc}>{desc}</span>
+  </a>
+);
+
+export default ListCard;

package/src/components/SecondaryTitle/index.module.css

@@ -0,0 +1,14 @@
+.titleWrap {
+  display: flex;
+  justify-content: space-between;
+  background-image: url(https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/text-bg.png);
+  background-size: 374px 32.7px;
+  background-repeat: no-repeat;
+}
+.title {
+  padding-top: 32px;
+  color: #fff;
+  font-size: 48px;
+  font-weight: bold;
+  margin-bottom: 48px;
+}

package/src/components/SecondaryTitle/index.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import styles from './index.module.css';
+
+interface ITitleProps {
+  seqNum?: number;
+  children: React.ReactNode;
+}
+
+const SecondaryTitle: React.FC<ITitleProps> = ({ children }) => (
+  <div className={styles.titleWrap}>
+    <h2 className={styles.title}>{children}</h2>
+  </div>
+);
+
+export default SecondaryTitle;

package/src/global.d.ts

@@ -0,0 +1,28 @@
+declare module '*.module.css' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.module.scss' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.module.sass' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.module.less' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.svg' {
+  export const ReactComponent: React.FunctionComponent<
+    React.SVGProps<SVGSVGElement>
+  >;
+
+  const content: string;
+  export default content;
+}

package/src/i18n/enUS.ts

@@ -0,0 +1,50 @@
+export const EN_US = {
+  introduction: 'Introduction',
+  quickStart: 'Quick Start',
+
+  // Slogans
+  slogan: 'A Progressive React Framework for modern web development',
+  secondSlogan1: 'Enjoy the development experience.',
+  secondSlogan2: 'Make innovation happen faster.',
+
+  // Features
+  feature1: 'Rust Bundler',
+  featureDesc1: 'Easily switch to Rspack bundler with faster build speed.',
+  feature2: 'Integrated BFF',
+  featureDesc2:
+    'Develop BFF code in the same project, enjoy simple function calls.',
+  feature3: 'Nested Routes',
+  featureDesc3: 'File-as-route, comes with lots performance optimizations.',
+  feature4: 'Multi-Rendering Mode',
+  featureDesc4: 'SSR, SSG, SPR, all out of the box for you.',
+  feature5: 'CSS Solutions',
+  featureDesc5: 'CSS Modules, CSS-in-JS, TailwindCSS, take your pick.',
+  feature6: 'Easy to Configure',
+  featureDesc6:
+    'Launch with zero configuration, then everything is configurable.',
+
+  // Solutions
+  solutions: 'Solutions',
+  solutionsDesc1: 'A progressive React framework for web development.',
+  solutionsDesc2: 'A powerful solution for npm package development.',
+  solutionsDesc3: 'A documentation site solution with modern tech stack.',
+  solutionsDesc4: 'A Build Engine for web development.',
+
+  // Footer
+  guide: 'Guide',
+  topic: 'Topic',
+  help: 'Help',
+  coreConcept: 'Core Concept',
+  basicFeatures: 'Basic Features',
+  advancedFeatures: 'Advanced Features',
+  configuration: 'Configuration',
+  command: 'Command',
+  runtime: 'Runtime',
+  conventions: 'Conventions',
+  microFrontend: 'Micro Frontend',
+  stateManagement: 'State Management',
+  pluginSystem: 'Plugin System',
+  projectGenerator: 'Project Generator',
+  githubDiscussion: 'Github Discussion',
+  changelog: 'Changelog',
+} as const;

package/src/i18n/index.ts

@@ -0,0 +1,18 @@
+import { withBase, useLang } from '@modern-js/doc-tools/runtime';
+import { EN_US } from './enUS';
+import { ZH_CN } from './zhCN';
+
+const translations = {
+  en: EN_US,
+  zh: ZH_CN,
+} as const;
+
+export function useUrl(url: string) {
+  const lang = useLang();
+  return withBase(lang === 'zh' ? url : `/en${url}`);
+}
+
+export function useI18n() {
+  const lang = useLang() as keyof typeof translations;
+  return (key: keyof typeof EN_US) => translations[lang][key];
+}

package/src/i18n/zhCN.ts

@@ -0,0 +1,50 @@
+import { EN_US } from './enUS';
+
+export const ZH_CN: Record<keyof typeof EN_US, string> = {
+  introduction: '介绍',
+  quickStart: '快速上手',
+
+  // Slogans
+  slogan: '基于 React 的渐进式 Web 开发框架',
+  secondSlogan1: '享受愉悦的开发体验，',
+  secondSlogan2: '让创新更快发生。',
+
+  // Features
+  feature1: 'Rust 构建',
+  featureDesc1: '轻松切换到 Rspack 构建工具，编译飞快。',
+  feature2: '一体化开发',
+  featureDesc2: '在同一项目中完成 BFF 开发，享受简洁的函数调用。',
+  feature3: '嵌套路由',
+  featureDesc3: '文件系统即路由，附赠全套性能优化。',
+  feature4: '多渲染模式',
+  featureDesc4: 'SSR、SSG、SPR 等多种渲染模式，通通开箱即用。',
+  feature5: 'CSS 方案',
+  featureDesc5: 'CSS Modules、CSS-in-JS、TailwindCSS，任你挑选。',
+  feature6: '易于配置',
+  featureDesc6: '以零配置启动，然后一切皆可配置。',
+
+  // Solutions
+  solutions: '解决方案',
+  solutionsDesc1: '基于 React 的渐进式 Web 开发框架。',
+  solutionsDesc2: '简单、高性能的 npm 包开发方案。',
+  solutionsDesc3: '现代文档站解决方案。',
+  solutionsDesc4: '面向 Web 开发场景的构建引擎。',
+
+  // Footer
+  guide: '指南',
+  topic: '专题',
+  help: '帮助',
+  coreConcept: '核心概念',
+  basicFeatures: '基础功能',
+  advancedFeatures: '进阶功能',
+  configuration: '配置',
+  command: '命令',
+  runtime: '运行时',
+  conventions: '目录约定',
+  microFrontend: '微前端',
+  stateManagement: '状态管理',
+  pluginSystem: '插件系统',
+  projectGenerator: '项目生成器',
+  githubDiscussion: 'Github 讨论区',
+  changelog: '更新日志',
+};

package/src/index.ts

@@ -0,0 +1,9 @@
+import Theme from '@modern-js/doc-tools/theme';
+import HomeLayout from './pages';
+
+export default {
+  ...Theme,
+  HomeLayout,
+};
+
+export * from '@modern-js/doc-tools/theme';

package/src/pages/index.module.scss

@@ -0,0 +1,238 @@
+/**
+ * CSS files with the .module.css suffix will be treated as CSS modules
+ * and scoped locally.
+ */
+
+/* === Header Start === */
+.header {
+  display: flex;
+  justify-content: center;
+  background-color: #000;
+  background-image: url(https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/homepage-bg-0209.png);
+  background-size: cover;
+  background-position: center bottom;
+  background-origin: border-box;
+  height: 100vh;
+  min-height: 700px;
+  max-height: 900px;
+}
+
+.heroBanner {
+  display: flex;
+  width: 80vw;
+  max-width: 1200px;
+  margin-top: 56px;
+  flex-direction: column;
+  justify-content: flex-start;
+  position: relative;
+  overflow: hidden;
+  box-sizing: border-box;
+  align-items: flex-start;
+  padding-top: 20vh;
+}
+
+.title {
+  font-style: normal;
+  font-weight: bold;
+  font-size: 3.4rem;
+  line-height: 1.6;
+  color: hsl(198deg 100% 90%);
+}
+
+.titleGradient {
+  background: -webkit-linear-gradient(
+    305deg,
+    hsl(166deg 77% 53%) 10%,
+    hsl(198deg, 100%, 60%)
+  );
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.buttons {
+  display: flex;
+  justify-content: center;
+  margin-top: 8vh;
+}
+
+.leftButton,
+.rightButton {
+  width: 168px;
+
+  &:hover {
+    text-decoration: none;
+  }
+}
+
+.startArrow {
+  margin-left: 8px;
+  margin-top: 1px;
+}
+
+.leftButton {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  line-height: 48px;
+  height: 48px;
+  background: linear-gradient(274.85deg, #4ecaff 3%, #64cfde 97.17%);
+  box-shadow: 0px 1px 8px rgba(133, 250, 202, 0.34);
+  border-radius: 39px;
+  color: #000000;
+  cursor: pointer;
+  opacity: 0.9;
+  transition: opacity 0.3s ease;
+
+  &:hover {
+    opacity: 1;
+    color: #000;
+  }
+}
+
+.rightButton {
+  display: flex;
+  height: 49px;
+  justify-content: center;
+  align-items: center;
+  background: #0d0d0d;
+  border: 1px solid #4ecaff;
+  box-sizing: border-box;
+  border-radius: 39px;
+  margin-left: 32px;
+  cursor: pointer;
+  color: #4ecaff;
+  transition: all 0.3s ease;
+
+  &:hover {
+    color: rgba(132, 218, 255, 1);
+    border: 1px solid #84daff;
+  }
+}
+
+@media (max-width: 1600px) {
+  .logo {
+    width: 420px;
+  }
+
+  .title {
+    font-size: 3.1rem;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .header {
+    background-image: url(https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/homepage-mobile-bg-0209.png);
+  }
+  .heroBanner {
+    align-items: center;
+  }
+  .title {
+    font-size: 7vw;
+    text-align: center;
+  }
+  .buttons {
+    width: 65%;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    margin-top: 50px;
+  }
+  .leftButton,
+  .rightButton {
+    width: 100%;
+  }
+  .rightButton {
+    margin-left: 0;
+    margin-top: 32px;
+  }
+  .singleImg {
+    max-width: 100%;
+  }
+}
+
+@media screen and (max-width: 540px) {
+  .title {
+    font-size: 9vw;
+  }
+}
+
+/* === Header End === */
+
+.cardContainer {
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: 16px;
+}
+
+.homepage-main {
+  background-color: #0d0d0d;
+}
+
+.flowContainer {
+  position: relative;
+  width: 1021px;
+  max-width: 100%;
+  margin: 0 auto;
+  height: 1261px;
+  overflow-y: hidden;
+}
+
+.flowLine {
+  position: absolute;
+  width: 95px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.flowLineMobile {
+  left: 30px;
+  width: 37.5px;
+}
+
+.singleImgWrap {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  margin-top: 48px;
+  border: 1px solid #6f6f6f;
+  border-radius: 8px;
+}
+
+.singleImg {
+  max-width: 910px;
+  object-fit: contain;
+}
+
+.singleImgCard {
+  margin-bottom: 16px;
+  transition: all 0.3s ease;
+}
+
+.singleImgCard:hover {
+  background: rgba(78, 202, 255, 0.2);
+  transition: all 0.3s ease;
+}
+
+@media screen and (max-width: 700px) {
+  .section-title {
+    font-size: 1rem;
+    font-size: 4vw;
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+  }
+  .singleImg {
+    max-width: 100%;
+  }
+}
+
+@media screen and (max-width: 1100px) {
+  .flowContainer {
+    height: auto;
+    overflow: visible;
+  }
+}
+
+:global(.modern-doc-logo) {
+  width: auto !important;
+}

package/src/pages/index.tsx

@@ -0,0 +1,167 @@
+import clsx from 'clsx';
+import { useLang, Helmet, useLocation } from '@modern-js/doc-tools/runtime';
+import { useEffect } from 'react';
+import ContentCard from '../components/ContentCard';
+import SecondaryTitle from '../components/SecondaryTitle';
+import { FeatureLayout } from '../components/FeatureLayout';
+import Footer from '../components/Footer';
+import { useI18n, useUrl } from '../i18n';
+import styles from './index.module.scss';
+
+const HomepageHeader = () => {
+  const t = useI18n();
+
+  return (
+    <div className={styles.header}>
+      <header className={clsx('hero hero--primary', styles.heroBanner)}>
+        <h1 className={styles.title}>
+          <div>Inspire Creativity in</div>
+          <div className={styles.titleGradient}>Modern Web Development</div>
+        </h1>
+        <div className={styles.buttons}>
+          <a
+            href={useUrl('/guides/get-started/introduction')}
+            className={styles.leftButton}
+          >
+            {t('introduction')}
+            <img
+              width="20"
+              height="20"
+              className={styles.startArrow}
+              src="https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/right-arrow.svg?url"
+            />
+          </a>
+          <a
+            href={useUrl('/guides/get-started/quick-start')}
+            className={styles.rightButton}
+          >
+            {t('quickStart')}
+          </a>
+        </div>
+      </header>
+    </div>
+  );
+};
+
+export default function Home() {
+  const t = useI18n();
+  const { pathname } = useLocation();
+  useEffect(() => {
+    window.MODERN_THEME = 'dark';
+    return () => {
+      window.MODERN_THEME = undefined;
+    };
+  }, [pathname]);
+
+  const features = [
+    {
+      title: t('feature1'),
+      href: useUrl('/guides/concept/builder'),
+      desc: t('featureDesc1'),
+    },
+    {
+      title: t('feature2'),
+      href: useUrl('/guides/advanced-features/bff/index'),
+      desc: t('featureDesc2'),
+    },
+    {
+      title: t('feature3'),
+      href: useUrl('/guides/basic-features/routes'),
+      desc: t('featureDesc3'),
+    },
+    {
+      title: t('feature4'),
+      href: useUrl('/guides/advanced-features/ssr'),
+      desc: t('featureDesc4'),
+    },
+    {
+      title: t('feature5'),
+      href: useUrl('/guides/basic-features/css'),
+      desc: t('featureDesc5'),
+    },
+    {
+      title: t('feature6'),
+      href: useUrl('/configure/app/usage'),
+      desc: t('featureDesc6'),
+    },
+  ];
+
+  const lang = useLang();
+  const solutions = [
+    {
+      title: 'Modern.js Framework',
+      href: useUrl('/guides/get-started/introduction'),
+      desc: t('solutionsDesc1'),
+    },
+    {
+      title: 'Modern.js Module',
+      href: `https://modernjs.dev/module-tools${lang === 'en' ? '/en' : ''}`,
+      desc: t('solutionsDesc2'),
+    },
+    {
+      title: 'Modern.js Doc',
+      href: `https://modernjs.dev/doc-tools${lang === 'en' ? '' : '/zh'}`,
+      desc: t('solutionsDesc3'),
+    },
+    {
+      title: 'Modern.js Builder',
+      href: `https://modernjs.dev/builder${lang === 'en' ? '/en' : ''}`,
+      desc: t('solutionsDesc4'),
+    },
+  ];
+
+  return (
+    <div>
+      <Helmet>
+        <html className="dark"></html>
+        <script>window.MODERN_THEME = 'dark';</script>
+        <style type="text/css">{`
+          .modern-doc-appearance {
+            display: none!important;
+          }
+        `}</style>
+      </Helmet>
+      <HomepageHeader />
+      <main className={styles['homepage-main']}>
+        <FeatureLayout>
+          <SecondaryTitle>{t('solutions')}</SecondaryTitle>
+          <div className={styles.cardContainer}>
+            {solutions.map((card, cardIndex) => (
+              <ContentCard
+                key={cardIndex}
+                title={card.title}
+                desc={card.desc}
+                href={card.href}
+              />
+            ))}
+          </div>
+        </FeatureLayout>
+
+        <FeatureLayout>
+          <h1
+            className={clsx([styles.title, styles.titleGradient])}
+            style={{ textAlign: 'left', marginBottom: 32 }}
+          >
+            <div>{t('secondSlogan1')}</div>
+            <div>{t('secondSlogan2')}</div>
+          </h1>
+        </FeatureLayout>
+
+        <FeatureLayout>
+          <SecondaryTitle>Modern.js Framework</SecondaryTitle>
+          <div className={styles.cardContainer}>
+            {features.map((card, cardIndex) => (
+              <ContentCard
+                key={cardIndex}
+                title={card.title}
+                desc={card.desc}
+                href={card.href}
+              />
+            ))}
+          </div>
+        </FeatureLayout>
+        <Footer />
+      </main>
+    </div>
+  );
+}

package/static/img/features/ai.svg

@@ -0,0 +1 @@
+<svg height='100px' width='100px'  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 60 60" version="1.1" x="0px" y="0px"><title>012 - Computer Thoughts</title><desc>Created with Sketch.</desc><g stroke="none" stroke-width="1" fill-rule="evenodd"><g fill-rule="nonzero"><path d="M0.36,33.859 C-0.0644455646,34.4700348 -0.114638064,35.2661705 0.229706222,35.9256738 C0.574050508,36.5851771 1.256013,36.999035 2,37 L3.5,37 C3.84480965,37.6090457 4.01763407,38.3003434 4,39 C4.00832504,39.5708401 3.89551058,40.1369574 3.669,40.661 C3.44824771,41.1785027 3.46468621,41.7666357 3.714,42.271 C3.96338828,42.7714899 4.42007781,43.137134 4.963,43.271 L5.579,43.421 C5.14242368,43.7839315 4.88992898,44.3222693 4.89,44.89 C4.88443005,45.6177159 5.29869331,46.2834962 5.954,46.6 C6.09022168,46.6659754 6.23964257,46.7001678 6.391,46.7 C6.47390786,46.7005316 6.54841728,46.7507147 6.58007291,46.8273431 C6.61172853,46.9039715 6.59436038,46.9921097 6.536,47.051 L5.536,48.051 C4.63859869,48.9528838 4.14792073,50.1818065 4.17736489,51.4537564 C4.20680905,52.7257063 4.75382719,53.9306076 5.692,54.79 C6.5850442,55.5883037 7.74633528,56.0203954 8.944,56 L16.66,56 C17.5757531,56.0018118 18.3740304,56.6235628 18.6,57.511 L19.029,59.241 C19.1397719,59.6870872 19.5403652,60.0002183 20,60 L49,60 C49.5522847,60 50,59.5522847 50,59 L50,48.922 C49.9896216,48.3582781 50.2246235,47.8178468 50.644,47.441 C59.3937487,39.8795169 62.3564822,27.5854205 58.0116633,16.8682997 C53.6668444,6.1511789 42.9793391,-0.608985674 31.4341999,0.0572645803 C19.8890606,0.723514834 10.0501485,8.66822387 6.967,19.814 C6.73213687,20.6750315 6.88167151,21.5955813 7.377,22.338 C7.49978882,22.5265547 7.56670111,22.7460131 7.57,22.971 C7.56981616,23.2019959 7.49821275,23.4272846 7.365,23.616 L0.36,33.859 Z M9.053,21.246 C8.87131435,20.9835158 8.8135842,20.6546731 8.895,20.346 C11.7439001,10.020168 20.8533359,2.65586434 31.5468792,2.03363446 C42.2404225,1.41140458 52.1425093,7.66947646 56.1697956,17.5952008 C60.1970819,27.5209251 57.4549085,38.9093084 49.351,45.914 L49.346,45.914 C48.1525251,46.9462055 46.8648887,47.8642239 45.5,48.656 C45.1091084,48.882748 44.9188594,49.3434704 45.0358789,49.7799534 C45.1528985,50.2164363 45.5481037,50.5202005 46,50.521 C46.1756138,50.5215641 46.3482044,50.4753098 46.5,50.387 C47.013,50.087 47.5,49.754 48,49.423 L48,58 L20.782,58 L20.539,57.021 C20.4434042,56.6623167 20.2983456,56.3186861 20.108,56 L28.528,56 C31.6526075,56.0126664 34.5122323,54.2465416 35.9,51.447 C36.1468713,50.9527051 35.9462949,50.3518713 35.452,50.105 C34.9577051,49.8581287 34.3568713,50.0587051 34.11,50.553 C33.059452,52.6729515 30.8939547,54.0101907 28.528,54 L17,54 C16.964,54 16.934,54.017 16.9,54.02 C16.819,54.015 16.742,54 16.66,54 L8.944,54 C8.24792803,54.0210532 7.56949661,53.7789603 7.044,53.322 C6.50509389,52.8323355 6.18964109,52.1437525 6.17075919,51.4158551 C6.15187728,50.6879578 6.43120571,49.983946 6.944,49.467 L7.944,48.467 C8.4905816,47.9237635 8.71422939,47.1347696 8.53401629,46.3855163 C8.35380319,45.6362629 7.79583012,45.0352673 7.062,44.8 C7.59086127,44.3301842 7.81619984,43.6062167 7.64739352,42.9192484 C7.47858719,42.23228 6.94337578,41.6951998 6.257,41.524 L5.548,41.352 C5.85389443,40.6059538 6.00757186,39.8062872 6,39 C6.00368008,38.3201389 5.89487824,37.6443512 5.678,37 L5.76,37 C6.28990234,37.0020592 6.79762077,37.2129797 7.173,37.587 L7.293,37.707 C7.68537889,38.0859722 8.30908478,38.0805524 8.69481858,37.6948186 C9.08055237,37.3090848 9.08597221,36.6853789 8.707,36.293 L8.587,36.173 C7.83583306,35.425083 6.82000884,35.0035896 5.76,35 L4,35 L2,34.995 L9.012,24.751 C9.37563739,24.2286835 9.57038906,23.6074326 9.57,22.971 C9.56690983,22.3582808 9.38742373,21.7594152 9.053,21.246 Z"></path><path d="M30,33 L38,33 C39.6568542,33 41,31.6568542 41,30 L41,22 C41,20.3431458 39.6568542,19 38,19 L30,19 C28.3431458,19 27,20.3431458 27,22 L27,30 C27,31.6568542 28.3431458,33 30,33 Z M29,22 C29,21.4477153 29.4477153,21 30,21 L38,21 C38.5522847,21 39,21.4477153 39,22 L39,30 C39,30.5522847 38.5522847,31 38,31 L30,31 C29.4477153,31 29,30.5522847 29,30 L29,22 Z"></path><path d="M19,33 C18.4477153,33 18,33.4477153 18,34 C18,34.5522847 18.4477153,35 19,35 L22.142,35 C22.5061725,36.4002987 23.5997013,37.4938275 25,37.858 L25,41 C25,41.5522847 25.4477153,42 26,42 C26.5522847,42 27,41.5522847 27,41 L27,38 L29,38 L29,41 C29,41.5522847 29.4477153,42 30,42 C30.5522847,42 31,41.5522847 31,41 L31,38 L33,38 L33,41 C33,41.5522847 33.4477153,42 34,42 C34.5522847,42 35,41.5522847 35,41 L35,38 L37,38 L37,41 C37,41.5522847 37.4477153,42 38,42 C38.5522847,42 39,41.5522847 39,41 L39,38 L41,38 L41,41 C41,41.5522847 41.4477153,42 42,42 C42.5522847,42 43,41.5522847 43,41 L43,37.858 C44.4002987,37.4938275 45.4938275,36.4002987 45.858,35 L49,35 C49.5522847,35 50,34.5522847 50,34 C50,33.4477153 49.5522847,33 49,33 L46,33 L46,31 L49,31 C49.5522847,31 50,30.5522847 50,30 C50,29.4477153 49.5522847,29 49,29 L46,29 L46,27 L49,27 C49.5522847,27 50,26.5522847 50,26 C50,25.4477153 49.5522847,25 49,25 L46,25 L46,23 L49,23 C49.5522847,23 50,22.5522847 50,22 C50,21.4477153 49.5522847,21 49,21 L46,21 L46,19 L49,19 C49.5522847,19 50,18.5522847 50,18 C50,17.4477153 49.5522847,17 49,17 L45.858,17 C45.4938275,15.5997013 44.4002987,14.5061725 43,14.142 L43,11 C43,10.4477153 42.5522847,10 42,10 C41.4477153,10 41,10.4477153 41,11 L41,14 L39,14 L39,11 C39,10.4477153 38.5522847,10 38,10 C37.4477153,10 37,10.4477153 37,11 L37,14 L35,14 L35,11 C35,10.4477153 34.5522847,10 34,10 C33.4477153,10 33,10.4477153 33,11 L33,14 L31,14 L31,11 C31,10.4477153 30.5522847,10 30,10 C29.4477153,10 29,10.4477153 29,11 L29,14 L27,14 L27,11 C27,10.4477153 26.5522847,10 26,10 C25.4477153,10 25,10.4477153 25,11 L25,14.142 C23.5997013,14.5061725 22.5061725,15.5997013 22.142,17 L19,17 C18.4477153,17 18,17.4477153 18,18 C18,18.5522847 18.4477153,19 19,19 L22,19 L22,21 L19,21 C18.4477153,21 18,21.4477153 18,22 C18,22.5522847 18.4477153,23 19,23 L22,23 L22,25 L19,25 C18.4477153,25 18,25.4477153 18,26 C18,26.5522847 18.4477153,27 19,27 L22,27 L22,29 L19,29 C18.4477153,29 18,29.4477153 18,30 C18,30.5522847 18.4477153,31 19,31 L22,31 L22,33 L19,33 Z M26,16 L42,16 C43.1045695,16 44,16.8954305 44,18 L44,34 C44,35.1045695 43.1045695,36 42,36 L26,36 C24.8954305,36 24,35.1045695 24,34 L24,18 C24,16.8954305 24.8954305,16 26,16 Z"></path><path d="M32,25 L33,25 C33.5522847,25 34,24.5522847 34,24 C34,23.4477153 33.5522847,23 33,23 L32,23 C31.4477153,23 31,23.4477153 31,24 C31,24.5522847 31.4477153,25 32,25 Z"></path><path d="M35,29 L36,29 C36.5522847,29 37,28.5522847 37,28 C37,27.4477153 36.5522847,27 36,27 L35,27 C34.4477153,27 34,27.4477153 34,28 C34,28.5522847 34.4477153,29 35,29 Z"></path></g></g></svg>