chore: docs update block component (#2047)

farm-fe · Jan 8, 2025 · a30ba66 · a30ba66
1 parent 67f305f
commit a30ba66
Show file tree

Hide file tree

Showing 16 changed files with 41 additions and 234 deletions.
diff --git a/docs/docs/features/css.md b/docs/docs/features/css.md
@@ -11,7 +11,6 @@ Then farm will auto enable HMR for css module, and generating bundled resources
 Farm support css modules out of box, the modules end with `.module.css|less|scss|sass` will be treated as css modules by default.
 
 ```tsx title="comp.tsx"
-// ...
 import styles from './index.module.css'
 
 export function Comp() {

diff --git a/docs/i18n/zh/docusaurus-plugin-content-docs/current/features/css.md b/docs/i18n/zh/docusaurus-plugin-content-docs/current/features/css.md
@@ -11,7 +11,6 @@ import './index.css';
 Farm 默认支持 css modules，以 `.module.css|less|scss|sass` 结尾的模块默认将被视为 `Css Modules`。
 
 ```tsx title="comp.tsx"
-// ...
 import styles from './index.module.css'
 
 export function Comp() {

diff --git a/docs/src/css/custom.scss b/docs/src/css/custom.scss
@@ -360,11 +360,10 @@ html[data-theme="dark"] {
 }
 
 .file-icon {
-  display: inline-block;
   width: 16px;
   height: 16px;
-  margin-right: 8px;
-  vertical-align: middle;
+  display: flex;
+  align-items: center;
 }
 
 .file-icon svg {

diff --git a/docs/src/theme/CodeBlock/index.module.css b/docs/src/theme/CodeBlock/index.module.css
@@ -14,7 +14,7 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 0.5em 1em;
+  padding: 0.3em 1em;
   border-bottom: var(--code-block-border);
   background-color: var(--code-block);
 }
@@ -24,7 +24,7 @@
   font-size: 0.9em;
   display: flex;
   align-items: center;
-  gap: 6px;
+  gap: 10px;
   svg {
     width: 22px;
   }
@@ -46,13 +46,6 @@
   border-color: #adb5bd;
 }
 
-.copy-icon {
-  width: 1em;
-  height: 1em;
-  margin-right: 0.5em;
-  fill: currentColor;
-}
-
 .copy-button span {
   transition: opacity 0.2s ease;
 }
@@ -99,8 +92,8 @@
 }
 
 .copy-icon {
-  width: 1.5em;
-  height: 1.5em;
+  width: 1.2em;
+  height: 1.2em;
   margin-right: 0.5em;
   fill: currentColor;
   transition: transform 0.2s ease;

diff --git a/docs/src/theme/CodeBlock/index.tsx b/docs/src/theme/CodeBlock/index.tsx
@@ -1,10 +1,8 @@
-import CodeBlock from '@theme-original/CodeBlock';
 import type CodeBlockType from '@theme/CodeBlock';
 import type { WrapperProps } from '@docusaurus/types';
 import React, { useEffect, useState } from 'react';
 import styles from './index.module.css'
 import { codeToHtml } from 'shiki';
-import useIsBrowser from '@docusaurus/useIsBrowser';
 import { useColorMode } from '@docusaurus/theme-common';
 import { svgs } from './svg';
 type Props = WrapperProps<typeof CodeBlockType>;
@@ -19,7 +17,9 @@ export default function CodeBlockWrapper(props: Props): JSX.Element {
   const { colorMode } = useColorMode();
   const iconMap = {
     ts: svgs.find(svg => svg.name === "ts")?.content,
+    tsx: svgs.find(svg => svg.name === "ts")?.content,
     js: svgs.find(svg => svg.name === "js")?.content,
+    jsx: svgs.find(svg => svg.name === "js")?.content,
     css: svgs.find(svg => svg.name === "css")?.content,
     json: svgs.find(svg => svg.name === "json")?.content,
     txt: svgs.find(svg => svg.name === "text")?.content,
@@ -32,7 +32,8 @@ export default function CodeBlockWrapper(props: Props): JSX.Element {
     return svgContent ? renderSvg(svgContent, styles['file-icon']) : null;
   };
   const renderSvg = (content, className) => (
-    <span
+    <div
+      style={{ display: 'flex' }}
       className={className}
       dangerouslySetInnerHTML={{ __html: content }}
     />
@@ -83,25 +84,14 @@ export default function CodeBlockWrapper(props: Props): JSX.Element {
     <>
       <div className={styles['shiki-wrapper']}>
         {!hiddenCopy && <div className={styles['code-header']}>
-          {fileName && (
+          {fileName ? (
             <div className={styles['code-title']}>
               {getFileIcon(fileName)}
-              {fileName}
+              <span>
+                {fileName}
+              </span>
             </div>
-          )}
-          {/* <button className={styles['copy-button']} onClick={copyCode}>
-            {copied ? (
-              <svg className={`${styles['copy-icon']} ${styles['copy-success']}`} viewBox="0 0 24 24">
-                <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z" />
-              </svg>
-            ) : (
-              <svg className={styles['copy-icon']} viewBox="0 0 24 24">
-                <path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z" />
-              </svg>
-            )}
-          </button> */}
-        </div>}
-        <div className={styles['hover-button']}>
+          ) : <div />}
           <button className={styles['copy-button']} onClick={copyCode}>
             {copied ? (
               <svg className={`${styles['copy-icon']} ${styles['copy-success']}`} viewBox="0 0 24 24">
@@ -113,6 +103,8 @@ export default function CodeBlockWrapper(props: Props): JSX.Element {
               </svg>
             )}
           </button>
+        </div>}
+        <div className={styles['hover-button']}>
           <div className={styles['code-content']} dangerouslySetInnerHTML={{ __html: highlightedCode }} />
         </div>
       </div>

diff --git a/docs/src/theme/CodeBlock/svg.ts b/docs/src/theme/CodeBlock/svg.ts
@@ -3,10 +3,18 @@ export const svgs = [
     name: 'ts',
     content: `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 256 256"><path fill="#3178C6" d="M20 0h216c11.046 0 20 8.954 20 20v216c0 11.046-8.954 20-20 20H20c-11.046 0-20-8.954-20-20V20C0 8.954 8.954 0 20 0Z"/><path fill="#FFF" d="M150.518 200.475v27.62c4.492 2.302 9.805 4.028 15.938 5.179c6.133 1.151 12.597 1.726 19.393 1.726c6.622 0 12.914-.633 18.874-1.899c5.96-1.266 11.187-3.352 15.678-6.257c4.492-2.906 8.048-6.704 10.669-11.394c2.62-4.689 3.93-10.486 3.93-17.391c0-5.006-.749-9.394-2.246-13.163a30.748 30.748 0 0 0-6.479-10.055c-2.821-2.935-6.205-5.567-10.149-7.898c-3.945-2.33-8.394-4.531-13.347-6.602c-3.628-1.497-6.881-2.949-9.761-4.359c-2.879-1.41-5.327-2.848-7.342-4.316c-2.016-1.467-3.571-3.021-4.665-4.661c-1.094-1.64-1.641-3.495-1.641-5.567c0-1.899.489-3.61 1.468-5.135s2.362-2.834 4.147-3.927c1.785-1.094 3.973-1.942 6.565-2.547c2.591-.604 5.471-.906 8.638-.906c2.304 0 4.737.173 7.299.518c2.563.345 5.14.877 7.732 1.597a53.669 53.669 0 0 1 7.558 2.719a41.7 41.7 0 0 1 6.781 3.797v-25.807c-4.204-1.611-8.797-2.805-13.778-3.582c-4.981-.777-10.697-1.165-17.147-1.165c-6.565 0-12.784.705-18.658 2.115c-5.874 1.409-11.043 3.61-15.506 6.602c-4.463 2.993-7.99 6.805-10.582 11.437c-2.591 4.632-3.887 10.17-3.887 16.615c0 8.228 2.375 15.248 7.127 21.06c4.751 5.811 11.963 10.731 21.638 14.759a291.458 291.458 0 0 1 10.625 4.575c3.283 1.496 6.119 3.049 8.509 4.66c2.39 1.611 4.276 3.366 5.658 5.265c1.382 1.899 2.073 4.057 2.073 6.474a9.901 9.901 0 0 1-1.296 4.963c-.863 1.524-2.174 2.848-3.93 3.97c-1.756 1.122-3.945 1.999-6.565 2.632c-2.62.633-5.687.95-9.2.95c-5.989 0-11.92-1.05-17.794-3.151c-5.875-2.1-11.317-5.25-16.327-9.451Zm-46.036-68.733H140V109H41v22.742h35.345V233h28.137V131.742Z"/></svg>`
   },
+  {
+    name: 'tsx',
+    content: `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 256 256"><path fill="#3178C6" d="M20 0h216c11.046 0 20 8.954 20 20v216c0 11.046-8.954 20-20 20H20c-11.046 0-20-8.954-20-20V20C0 8.954 8.954 0 20 0Z"/><path fill="#FFF" d="M150.518 200.475v27.62c4.492 2.302 9.805 4.028 15.938 5.179c6.133 1.151 12.597 1.726 19.393 1.726c6.622 0 12.914-.633 18.874-1.899c5.96-1.266 11.187-3.352 15.678-6.257c4.492-2.906 8.048-6.704 10.669-11.394c2.62-4.689 3.93-10.486 3.93-17.391c0-5.006-.749-9.394-2.246-13.163a30.748 30.748 0 0 0-6.479-10.055c-2.821-2.935-6.205-5.567-10.149-7.898c-3.945-2.33-8.394-4.531-13.347-6.602c-3.628-1.497-6.881-2.949-9.761-4.359c-2.879-1.41-5.327-2.848-7.342-4.316c-2.016-1.467-3.571-3.021-4.665-4.661c-1.094-1.64-1.641-3.495-1.641-5.567c0-1.899.489-3.61 1.468-5.135s2.362-2.834 4.147-3.927c1.785-1.094 3.973-1.942 6.565-2.547c2.591-.604 5.471-.906 8.638-.906c2.304 0 4.737.173 7.299.518c2.563.345 5.14.877 7.732 1.597a53.669 53.669 0 0 1 7.558 2.719a41.7 41.7 0 0 1 6.781 3.797v-25.807c-4.204-1.611-8.797-2.805-13.778-3.582c-4.981-.777-10.697-1.165-17.147-1.165c-6.565 0-12.784.705-18.658 2.115c-5.874 1.409-11.043 3.61-15.506 6.602c-4.463 2.993-7.99 6.805-10.582 11.437c-2.591 4.632-3.887 10.17-3.887 16.615c0 8.228 2.375 15.248 7.127 21.06c4.751 5.811 11.963 10.731 21.638 14.759a291.458 291.458 0 0 1 10.625 4.575c3.283 1.496 6.119 3.049 8.509 4.66c2.39 1.611 4.276 3.366 5.658 5.265c1.382 1.899 2.073 4.057 2.073 6.474a9.901 9.901 0 0 1-1.296 4.963c-.863 1.524-2.174 2.848-3.93 3.97c-1.756 1.122-3.945 1.999-6.565 2.632c-2.62.633-5.687.95-9.2.95c-5.989 0-11.92-1.05-17.794-3.151c-5.875-2.1-11.317-5.25-16.327-9.451Zm-46.036-68.733H140V109H41v22.742h35.345V233h28.137V131.742Z"/></svg>`
+  },
   {
     name: 'js',
     content: `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 256 256"><path fill="#F7DF1E" d="M0 0h256v256H0V0Z"/><path d="m67.312 213.932l19.59-11.856c3.78 6.701 7.218 12.371 15.465 12.371c7.905 0 12.89-3.092 12.89-15.12v-81.798h24.057v82.138c0 24.917-14.606 36.259-35.916 36.259c-19.245 0-30.416-9.967-36.087-21.996m85.07-2.576l19.588-11.341c5.157 8.421 11.859 14.607 23.715 14.607c9.969 0 16.325-4.984 16.325-11.858c0-8.248-6.53-11.17-17.528-15.98l-6.013-2.58c-17.357-7.387-28.87-16.667-28.87-36.257c0-18.044 13.747-31.792 35.228-31.792c15.294 0 26.292 5.328 34.196 19.247l-18.732 12.03c-4.125-7.389-8.591-10.31-15.465-10.31c-7.046 0-11.514 4.468-11.514 10.31c0 7.217 4.468 10.14 14.778 14.608l6.014 2.577c20.45 8.765 31.963 17.7 31.963 37.804c0 21.654-17.012 33.51-39.867 33.51c-22.339 0-36.774-10.654-43.819-24.574"/></svg>`
   },
+  {
+    name: 'jsx',
+    content: `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 256 256"><path fill="#F7DF1E" d="M0 0h256v256H0V0Z"/><path d="m67.312 213.932l19.59-11.856c3.78 6.701 7.218 12.371 15.465 12.371c7.905 0 12.89-3.092 12.89-15.12v-81.798h24.057v82.138c0 24.917-14.606 36.259-35.916 36.259c-19.245 0-30.416-9.967-36.087-21.996m85.07-2.576l19.588-11.341c5.157 8.421 11.859 14.607 23.715 14.607c9.969 0 16.325-4.984 16.325-11.858c0-8.248-6.53-11.17-17.528-15.98l-6.013-2.58c-17.357-7.387-28.87-16.667-28.87-36.257c0-18.044 13.747-31.792 35.228-31.792c15.294 0 26.292 5.328 34.196 19.247l-18.732 12.03c-4.125-7.389-8.591-10.31-15.465-10.31c-7.046 0-11.514 4.468-11.514 10.31c0 7.217 4.468 10.14 14.778 14.608l6.014 2.577c20.45 8.765 31.963 17.7 31.963 37.804c0 21.654-17.012 33.51-39.867 33.51c-22.339 0-36.774-10.654-43.819-24.574"/></svg>`
+  },
   {
     name: 'css',
     content: `<svg xmlns="http://www.w3.org/2000/svg" width="29.37" height="32" viewBox="0 0 256 279"><defs><linearGradient id="logosWindiCss0" x1="16.639%" x2="137.275%" y1="36.186%" y2="175.371%"><stop offset="7.822%" stop-color="#54C8F1"/><stop offset="57.292%" stop-color="#41A2EF"/><stop offset="100%" stop-color="#3386EE"/></linearGradient><linearGradient id="logosWindiCss1" x1="-22.099%" x2="91.451%" y1="-49.621%" y2="73.695%"><stop offset="7.822%" stop-color="#54C8F1"/><stop offset="57.292%" stop-color="#41A2EF"/><stop offset="100%" stop-color="#3386EE"/></linearGradient><linearGradient id="logosWindiCss2" x1="8.696%" x2="71.739%" y1="37.461%" y2="80.271%"><stop offset="7.822%" stop-color="#54C8F1"/><stop offset="57.292%" stop-color="#41A2EF"/><stop offset="100%" stop-color="#3386EE"/></linearGradient><linearGradient id="logosWindiCss3" x1="60.744%" x2="501.135%" y1="-308.636%" y2="225.788%"><stop offset="7.822%" stop-color="#54C8F1"/><stop offset="57.292%" stop-color="#41A2EF"/><stop offset="100%" stop-color="#3386EE"/></linearGradient></defs><path fill="url(#logosWindiCss0)" d="M133.784 48.922C133.784 21.945 111.84 0 84.863 0c-28.43 0-45.428 21.316-45.428 41.933h27.956c0-5.8 5.423-13.978 17.472-13.978c11.56 0 20.966 9.407 20.966 20.967c0 11.56-8.438 20.966-29.715 20.966H0v27.955h76.114c35.911 0 57.67-21.944 57.67-48.921Zm0 0C133.784 21.945 111.84 0 84.863 0c-28.43 0-45.428 21.316-45.428 41.933h27.956c0-5.8 5.423-13.978 17.472-13.978c11.56 0 20.966 9.407 20.966 20.967c0 11.56-8.438 20.966-29.715 20.966H0v27.955h76.114c35.911 0 57.67-21.944 57.67-48.921Z"/><path fill="url(#logosWindiCss1)" d="M195.803 229.339c0 26.978-21.945 48.922-48.922 48.922c-28.43 0-45.427-21.315-45.427-41.933h27.955c0 5.8 5.423 13.979 17.472 13.979c11.56 0 20.967-9.408 20.967-20.968s-10.63-20.966-29.716-20.966H53.671v-27.956h84.461c35.912 0 57.671 21.945 57.671 48.922Zm0 0c0 26.978-21.945 48.922-48.922 48.922c-28.43 0-45.427-21.315-45.427-41.933h27.955c0 5.8 5.423 13.979 17.472 13.979c11.56 0 20.967-9.408 20.967-20.968s-10.63-20.966-29.716-20.966H53.671v-27.956h84.461c35.912 0 57.671 21.945 57.671 48.922Z"/><path fill="url(#logosWindiCss2)" d="M203.13 43.13c-30.834 0-52.585 23.45-52.585 54.284h24.76c0-15.327 11.13-26.457 27.825-26.457c16.696 0 25.044 11.13 25.044 26.457s-10.842 27.955-40.348 27.955H0v27.956h192c43.695 0 64-28.085 64-55.911c0-30.835-20.87-54.284-52.87-54.284Z"/><path fill="url(#logosWindiCss3)" d="M36.647 180.417H0v28.19h36.647z"/></svg>`

diff --git a/docs/src/theme/CodeBlockShiki/index.module.css b/docs/src/theme/CodeBlockShiki/index.module.css
diff --git a/docs/src/theme/CodeBlockShiki/index.tsx b/docs/src/theme/CodeBlockShiki/index.tsx
diff --git a/packages/core/src/config/mergeConfig.ts b/packages/core/src/config/mergeConfig.ts
@@ -1,7 +1,6 @@
 import path, { isAbsolute } from 'node:path';
 
-import { isString } from '../plugin/js/utils.js';
-import { isArray, isObject } from '../utils/share.js';
+import { isArray, isObject, isString } from '../utils/share.js';
 import { CompilationMode } from './env.js';
 import { FarmCliOptions, UserConfig } from './types.js';
 

diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
@@ -2,6 +2,7 @@ export * from './compiler/index.js';
 export * from './config/index.js';
 export * from './server/index.js';
 export * from './plugin/type.js';
+export * from './plugin/index.js';
 export * from './utils/index.js';
 
 export { defineFarmConfig as defineConfig } from './config/index.js';

diff --git a/packages/core/src/plugin/js/farm-to-vite-context.ts b/packages/core/src/plugin/js/farm-to-vite-context.ts
@@ -2,8 +2,9 @@ import { Logger } from '../../utils/logger.js';
 
 import type { PluginContext } from 'rollup';
 import type { UserConfig } from '../../config/types.js';
+import { normalizePath } from '../../utils/share.js';
 import type { CompilationContext } from '../type.js';
-import { normalizePath, revertNormalizePath } from './utils.js';
+import { revertNormalizePath } from './utils.js';
 
 const contextCache = new Map<string, PluginContext>();
 

diff --git a/packages/core/src/plugin/js/index.ts b/packages/core/src/plugin/js/index.ts
@@ -43,6 +43,7 @@ import { VitePluginAdapter } from './vite-plugin-adapter.js';
 
 export { VitePluginAdapter } from './vite-plugin-adapter.js';
 export * from './js-plugin-schema.js';
+export * from './utils.js';
 
 type VitePluginType = object | (() => { vitePlugin: any; filters: string[] });
 type VitePluginsType = VitePluginType[];

diff --git a/packages/core/src/plugin/js/utils.ts b/packages/core/src/plugin/js/utils.ts
@@ -1,4 +1,3 @@
-import path from 'node:path';
 import * as querystring from 'node:querystring';
 import fse from 'fs-extra';
 import type {
@@ -16,6 +15,7 @@ import { VITE_ADAPTER_VIRTUAL_MODULE } from './constants.js';
 import { readFile } from 'node:fs/promises';
 import { ModuleContext, ModuleNode } from '../../config/types.js';
 import type { Config } from '../../types/binding.js';
+import { normalizePath } from '../../utils/share.js';
 import type {
   JsPlugin,
   JsResourcePotInfoData,
@@ -54,14 +54,6 @@ export function getContentValue(content: any): string {
   return encodeStr(typeof content === 'string' ? content : content!.code);
 }
 
-export function isString(variable: unknown): variable is string {
-  return typeof variable === 'string';
-}
-
-export function isObject(variable: unknown): variable is object {
-  return typeof variable === 'object' && variable !== null;
-}
-
 export function customParseQueryString(url: string | null) {
   if (!url) {
     return [];
@@ -152,13 +144,6 @@ export function normalizeAdapterVirtualModule(id: string) {
   return id;
 }
 
-// normalize path for windows the same as Vite
-export function normalizePath(p: string): string {
-  return path.posix.normalize(
-    process.platform === 'win32' ? p.replace(/\\/g, '/') : p
-  );
-}
-
 export const removeQuery = (path: string) => {
   const queryIndex = path.indexOf('?');
   if (queryIndex !== -1) {