chore: update website

marcomontalbano · Mar 5, 2025 · cc1fc19 · cc1fc19
1 parent 334058a
commit cc1fc19
Show file tree

Hide file tree

Showing 9 changed files with 145 additions and 111 deletions.
diff --git a/packages/output-components-as-svgstore/global.d.ts b/packages/output-components-as-svgstore/global.d.ts
@@ -1,5 +1,5 @@
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-import type { Options, SvgStore } from './src/svgstore';
+import type { Options, SvgStore } from './src/svgstore.ts';
 
 declare global {
   export function svgstore(options: Options): SvgStore;

diff --git a/packages/output-components-as-svgstore/src/svgstore.ts b/packages/output-components-as-svgstore/src/svgstore.ts
@@ -1,17 +1,61 @@
 export type Options = {
+  /**
+   * Remove `style` attributes from SVG definitions, or a list of attributes to remove.
+   * @default false
+   */
   cleanDefs?: boolean | string[];
+  /**
+   * Remove `style` attributes from SVG objects, or a list of attributes to remove.
+   * @default false
+   */
   cleanSymbols?: boolean | string[];
+  /**
+   * A map of attributes to set on the root `<svg>` element.
+   * If you set an attribute's value to null, you remove that attribute. Values may be functions like jQuery.
+   * @default false
+   */
   svgAttrs?: boolean | { [key: string]: unknown };
+  /**
+   * A map of attributes to set on each `<symbol>` element.
+   * If you set an attribute's value to null, you remove that attribute. Values may be functions like jQuery.
+   * @default false
+   */
   symbolAttrs?: boolean | { [key: string]: unknown };
+  /**
+   * Attributes to have `svgstore` attempt to copy to the newly created `<symbol>` tag from it's source `<svg>` tag.
+   * The `viewBox`, `aria-labelledby`, and `role` attributes are always copied.
+   * @default false
+   */
   copyAttrs?: boolean | string[];
+  /**
+   * Rename `defs` content ids to make them inherit files' names so that it would help to avoid defs with same ids in the output file.
+   * @default false
+   */
   renameDefs?: boolean;
 };
 
 type ToStringOptions = {
+  /**
+   * Don't output `<?xml ?>`, `DOCTYPE`, and the `xmlns` attribute.
+   * @default false
+   */
   inline?: boolean;
 };
 
 export interface SvgStore {
+  /**
+   * Appends a file to the sprite with the given `id`.
+   * @param id Unique `id` for this SVG file.
+   * @param svg Raw source of the SVG file.
+   * @param options Same as the [options of svgstore()](https://github.com/svgstore/svgstore#svgstore-options),
+   * but will only apply to this SVG file's `<symbol>`.
+   * @returns The current `cheerio` instance.
+   */
   add: (id: string, svg: string, options?: Options) => SvgStore;
+  /**
+   * Outputs sprite as a string of XML.
+   * @param options
+   * @returns
+   */
   toString: (options: ToStringOptions) => string;
 }
diff --git a/packages/website/.figmaexportrc.mjs b/packages/website/.figmaexportrc.mjs
@@ -7,101 +7,98 @@ import outputComponentsAsSvg from '../output-components-as-svg/dist/index.js'
 import outputComponentsAsSvgr from '../output-components-as-svgr/dist/index.js'
 import outputComponentsAsSvgstore from '../output-components-as-svgstore/dist/index.js'
 import outputStylesAsSass from '../output-styles-as-sass/dist/index.js'
-import transformSvgWithSvgo from '../transform-svg-with-svgo/dist/index.js'
 
 export default {
+  commands: [
+    [
+      'styles',
+      {
+        fileId: 'fzYhvQpqwhZDUImRz431Qo',
+        outputters: [
+          outputStylesAsSass({
+            output: './output/figma-styles',
+          }),
+        ],
+      },
+    ],
 
-    commands: [
-        ['styles', {
-            fileId: 'fzYhvQpqwhZDUImRz431Qo',
-            outputters: [
-                outputStylesAsSass({
-                    output: './output/figma-styles'
-                }),
-            ]
-        }],
+    [
+      'components',
+      {
+        fileId: 'fzYhvQpqwhZDUImRz431Qo',
+        onlyFromPages: ['icons/octicons-by-github'],
+        outputters: [
+          outputComponentsAsEs6({
+            output: './output/es6-dataurl-octicons',
+            getVariableName: (options) =>
+              camelCase(`icon ${options.componentName}`),
+            useDataUrl: true,
+          }),
 
-        ['components', {
-            fileId: 'fzYhvQpqwhZDUImRz431Qo',
-            onlyFromPages: ['icons/octicons-by-github'],
-            outputters: [
-                outputComponentsAsEs6({
-                    output: './output/es6-dataurl-octicons',
-                    getVariableName: (options) => camelCase(`icon ${options.componentName}`),
-                    useDataUrl: true,
-                }),
+          outputComponentsAsSvgr({
+            output: './output/svgr-octicons',
+            getSvgrConfig: () => ({
+              plugins: ['@svgr/plugin-jsx'],
+              template: (
+                { componentName, props, jsx, exports },
+                { tpl },
+              ) => tpl`
+                const ${componentName} = (${props}) => (${jsx});
+                ${exports}
+              `,
+            }),
+          }),
+        ],
+      },
+    ],
 
-                outputComponentsAsSvgr({
-                    output: './output/svgr-octicons',
-                    getSvgrConfig: () => ({
-                        plugins: ['@svgr/plugin-jsx'],
-                        template: ({ componentName, props, jsx, exports }, { tpl }) => tpl`
-                            const ${componentName} = (${props}) => (${jsx});
-                            ${exports}
-                        `
-                    })
-                }),
-            ]
-        }],
+    [
+      'components',
+      {
+        fileId: 'fzYhvQpqwhZDUImRz431Qo',
+        onlyFromPages: ['icons', 'unit-test'],
+        transformers: [],
+        outputters: [
+          outputComponentsAsSvg({
+            output: './output/svg',
+          }),
 
-        ['components', {
-            fileId: 'fzYhvQpqwhZDUImRz431Qo',
-            onlyFromPages: ['icons', 'unit-test'],
-            transformers: [
-                transformSvgWithSvgo({
-                    plugins: [
-                        {
-                            name: 'preset-default',
-                            params: {
-                                overrides: {
-                                    removeViewBox: false,
-                                }
-                            }
-                        },
-                        {
-                            name: 'removeDimensions'
-                        }
-                    ]
-                })
-            ],
-            outputters: [
-                outputComponentsAsSvg({
-                    output: './output/svg',
-                }),
+          outputComponentsAsSvgr({
+            output: './output/svgr',
+            getSvgrConfig: () => ({
+              plugins: ['@svgr/plugin-jsx'],
+              template: (
+                { componentName, props, jsx, exports },
+                { tpl },
+              ) => tpl`
+                const ${componentName} = (${props}) => (${jsx});
+                ${exports}
+              `,
+            }),
+          }),
 
-                outputComponentsAsSvgr({
-                    output: './output/svgr',
-                    getSvgrConfig: () => ({
-                        plugins: ['@svgr/plugin-jsx'],
-                        template: ({ componentName, props, jsx, exports }, { tpl }) => tpl`
-                            const ${componentName} = (${props}) => (${jsx});
-                            ${exports}
-                        `
-                    })
-                }),
+          outputComponentsAsEs6({
+            output: './output/es6-base64',
+            useBase64: true,
+          }),
+          outputComponentsAsEs6({
+            output: './output/es6-dataurl',
+            useDataUrl: true,
+          }),
 
-                outputComponentsAsEs6({
-                    output: './output/es6-base64',
-                    useBase64: true,
-                }),
-                outputComponentsAsEs6({
-                    output: './output/es6-dataurl',
-                    useDataUrl: true,
-                }),
-
-                outputComponentsAsSvgstore({
-                    output: './output/svgstore',
-                }),
-
-                outputComponentsAsSvgstore({
-                    output: './output/svgstore-monochrome',
-                    getIconId: (options) => `[unfilled] ${options.pageName}/${options.componentName}`,
-                    svgstoreConfig: {
-                        cleanSymbols: ['fill']
-                    }
-                }),
-            ]
-        }]
-    ]
+          outputComponentsAsSvgstore({
+            output: './public/output/svgstore',
+          }),
 
+          outputComponentsAsSvgstore({
+            output: './public/output/svgstore-monochrome',
+            getIconId: (options) => `[unfilled] ${options.pageName}/${options.componentName}`,
+            svgstoreConfig: {
+              cleanSymbols: ['fill'],
+            },
+          }),
+        ],
+      },
+    ],
+  ],
 };
diff --git a/packages/website/.gitignore b/packages/website/.gitignore
@@ -1,5 +1,6 @@
 /.cache
 /dist
 /output
+/public/output
 /.next
 /out
diff --git a/packages/website/scss/index.scss b/packages/website/scss/index.scss
@@ -200,11 +200,13 @@ pre.Code {
     height: 35px;
     margin: 10px;
 
-    fill: $color-link;
-    transition: fill .2s;
+    &.with-hover {
+        fill: $color-link;
+        transition: fill .2s;
 
-    &:hover {
-        fill: $color-link-hover;
+        &:hover {
+            fill: $color-link-hover;
+        }
     }
 }
 

diff --git a/packages/website/src/app/page.tsx b/packages/website/src/app/page.tsx
@@ -1,22 +1,12 @@
-import { readFileSync } from 'fs'
-import { resolve } from 'path'
-
 import GitHubLink from '@/components/GitHubLink'
 import ReadyToStart from '@/components/ReadyToStart'
 import Title from '@/components/Title'
 import OutputComponents from '@/components/output-components'
 import OutputStyles from '@/components/output-styles'
 
 export default async function HomePage() {
-  const outputFolder = resolve(process.cwd(), 'output')
-  const icons = readFileSync(resolve(outputFolder, 'svgstore', 'icons.svg'), 'utf8')
-  const monochromeIcons = readFileSync(resolve(outputFolder, 'svgstore-monochrome', 'icons.svg'), 'utf8')
-
   return (
     <>
-      <div className="svgstore" dangerouslySetInnerHTML={{ __html: icons }} />
-      <div className="svgstore" dangerouslySetInnerHTML={{ __html: monochromeIcons }} />
-
       <Title />
       <GitHubLink />
 

diff --git a/packages/website/src/components/output-components/ComponentsAsSvgstore_default.tsx b/packages/website/src/components/output-components/ComponentsAsSvgstore_default.tsx
@@ -10,7 +10,7 @@ const props = {
     <>
       The .svg file contains all components as &lt;symbol&gt;
       so you can easly use an icon with
-      <code>&lt;svg&gt;&lt;use href=&quot;#icon-name&quot; /&gt;&lt;/svg&gt;</code>
+      <code>&lt;svg&gt;&lt;use href=&quot;/icons.svg#icon-name&quot; /&gt;&lt;/svg&gt;</code>
     </>
   ),
   code: `
@@ -35,8 +35,8 @@ const props = {
 const SvgAsSvgstoreComponent = () => (
   <CodeBlock {...props}>
     <>
-      <svg className="icon"><use href="#icons/figma-export" /></svg>
-      <svg className="icon"><use href="#icons/figma-logo" /></svg>
+      <svg className="icon"><use href="/output/svgstore/icons.svg#icons/figma-export" /></svg>
+      <svg className="icon"><use href="/output/svgstore/icons.svg#icons/figma-logo" /></svg>
     </>
   </CodeBlock>
 );

diff --git a/packages/website/src/components/output-components/ComponentsAsSvgstore_monochrome.tsx b/packages/website/src/components/output-components/ComponentsAsSvgstore_monochrome.tsx
@@ -37,8 +37,8 @@ const props = {
 const SvgAsSvgstoreMonochromeComponent = () => (
   <CodeBlock {...props}>
     <>
-      <svg className="icon"><use href="#[unfilled] icons/figma-export" /></svg>
-      <svg className="icon"><use href="#[unfilled] icons/figma-logo" /></svg>
+      <svg className="icon with-hover"><use href="/output/svgstore-monochrome/icons.svg#[unfilled] icons/figma-export" /></svg>
+      <svg className="icon with-hover"><use href="/output/svgstore-monochrome/icons.svg#[unfilled] icons/figma-logo" /></svg>
     </>
   </CodeBlock>
 );

diff --git a/yarn.lock b/yarn.lock
@@ -3687,9 +3687,9 @@ __metadata:
   linkType: hard
 
 "caniuse-lite@npm:^1.0.30001579, caniuse-lite@npm:^1.0.30001587":
-  version: 1.0.30001617
-  resolution: "caniuse-lite@npm:1.0.30001617"
-  checksum: 10/eac442b9ad12801086be19f6dc17056827fe398f1c05983357e2531c8183ee890ffc8fb973d54519ad7114a2fd47de8f33ec66d98565b995fef1c6ba02b5bc5b
+  version: 1.0.30001702
+  resolution: "caniuse-lite@npm:1.0.30001702"
+  checksum: 10/1f756953e5caf6c5b17562413cbbb7768b6b853620001b592aff07235ed98e84a1c169ad627d2cd77acd1524f482b5a9682edbd1b7b5cd3dae7753785d7b021d
   languageName: node
   linkType: hard