From 68a55f0d11fec82a1dfff796fdcdaeafb4acd046 Mon Sep 17 00:00:00 2001 From: Alex Nicholls Date: Sat, 26 Feb 2022 15:44:50 -0800 Subject: [PATCH] fix(create): update broken SVG paths in templates (#6762) * fix: Update broken URL in typescript template example * fix SVG images; improve a11y * format Co-authored-by: Joshua Chen --- .../src/components/HomepageFeatures/index.tsx | 6 +-- .../src/components/HomepageFeatures/index.tsx | 12 +++--- .../src/components/HomepageFeatures/index.js | 2 +- .../static/img/undraw_docusaurus_mountain.svg | 1 + .../static/img/undraw_docusaurus_react.svg | 1 + .../static/img/undraw_docusaurus_tree.svg | 41 ++++++++++++++++++- 6 files changed, 52 insertions(+), 11 deletions(-) diff --git a/examples/classic-typescript/src/components/HomepageFeatures/index.tsx b/examples/classic-typescript/src/components/HomepageFeatures/index.tsx index 1240cd6a16..4539a53519 100644 --- a/examples/classic-typescript/src/components/HomepageFeatures/index.tsx +++ b/examples/classic-typescript/src/components/HomepageFeatures/index.tsx @@ -11,7 +11,7 @@ type FeatureItem = { const FeatureList: FeatureItem[] = [ { title: 'Easy to Use', - image: require('@site/src/static/img/undraw_docusaurus_mountain.svg'), + image: require('@site/static/img/undraw_docusaurus_mountain.svg'), description: ( <> Docusaurus was designed from the ground up to be easily installed and @@ -21,7 +21,7 @@ const FeatureList: FeatureItem[] = [ }, { title: 'Focus on What Matters', - image: require('@site/src/static/img/undraw_docusaurus_tree.svg'), + image: require('@site/static/img/undraw_docusaurus_tree.svg'), description: ( <> Docusaurus lets you focus on your docs, and we'll do the chores. Go @@ -31,7 +31,7 @@ const FeatureList: FeatureItem[] = [ }, { title: 'Powered by React', - image: require('@site/src/static/img/undraw_docusaurus_react.svg'), + image: require('@site/static/img/undraw_docusaurus_react.svg'), description: ( <> Extend or customize your website layout by reusing React. Docusaurus can diff --git a/packages/create-docusaurus/templates/classic-typescript/src/components/HomepageFeatures/index.tsx b/packages/create-docusaurus/templates/classic-typescript/src/components/HomepageFeatures/index.tsx index 1240cd6a16..91ef4601d2 100644 --- a/packages/create-docusaurus/templates/classic-typescript/src/components/HomepageFeatures/index.tsx +++ b/packages/create-docusaurus/templates/classic-typescript/src/components/HomepageFeatures/index.tsx @@ -4,14 +4,14 @@ import styles from './styles.module.css'; type FeatureItem = { title: string; - image: string; + Svg: React.ComponentType>; description: JSX.Element; }; const FeatureList: FeatureItem[] = [ { title: 'Easy to Use', - image: require('@site/src/static/img/undraw_docusaurus_mountain.svg'), + Svg: require('@site/static/img/undraw_docusaurus_mountain.svg').default, description: ( <> Docusaurus was designed from the ground up to be easily installed and @@ -21,7 +21,7 @@ const FeatureList: FeatureItem[] = [ }, { title: 'Focus on What Matters', - image: require('@site/src/static/img/undraw_docusaurus_tree.svg'), + Svg: require('@site/static/img/undraw_docusaurus_tree.svg').default, description: ( <> Docusaurus lets you focus on your docs, and we'll do the chores. Go @@ -31,7 +31,7 @@ const FeatureList: FeatureItem[] = [ }, { title: 'Powered by React', - image: require('@site/src/static/img/undraw_docusaurus_react.svg'), + Svg: require('@site/static/img/undraw_docusaurus_react.svg').default, description: ( <> Extend or customize your website layout by reusing React. Docusaurus can @@ -41,11 +41,11 @@ const FeatureList: FeatureItem[] = [ }, ]; -function Feature({title, image, description}: FeatureItem) { +function Feature({title, Svg, description}: FeatureItem) { return (
- {title} +

{title}

diff --git a/packages/create-docusaurus/templates/classic/src/components/HomepageFeatures/index.js b/packages/create-docusaurus/templates/classic/src/components/HomepageFeatures/index.js index 0529f8a0e7..78f410ba68 100644 --- a/packages/create-docusaurus/templates/classic/src/components/HomepageFeatures/index.js +++ b/packages/create-docusaurus/templates/classic/src/components/HomepageFeatures/index.js @@ -39,7 +39,7 @@ function Feature({Svg, title, description}) { return (
- +

{title}

diff --git a/packages/create-docusaurus/templates/shared/static/img/undraw_docusaurus_mountain.svg b/packages/create-docusaurus/templates/shared/static/img/undraw_docusaurus_mountain.svg index 431cef2f7f..af961c49a8 100644 --- a/packages/create-docusaurus/templates/shared/static/img/undraw_docusaurus_mountain.svg +++ b/packages/create-docusaurus/templates/shared/static/img/undraw_docusaurus_mountain.svg @@ -1,4 +1,5 @@ + Easy to Use diff --git a/packages/create-docusaurus/templates/shared/static/img/undraw_docusaurus_react.svg b/packages/create-docusaurus/templates/shared/static/img/undraw_docusaurus_react.svg index e417050433..94b5cf08f8 100644 --- a/packages/create-docusaurus/templates/shared/static/img/undraw_docusaurus_react.svg +++ b/packages/create-docusaurus/templates/shared/static/img/undraw_docusaurus_react.svg @@ -1,4 +1,5 @@ + Powered by React diff --git a/packages/create-docusaurus/templates/shared/static/img/undraw_docusaurus_tree.svg b/packages/create-docusaurus/templates/shared/static/img/undraw_docusaurus_tree.svg index a05cc03dda..d9161d3392 100644 --- a/packages/create-docusaurus/templates/shared/static/img/undraw_docusaurus_tree.svg +++ b/packages/create-docusaurus/templates/shared/static/img/undraw_docusaurus_tree.svg @@ -1 +1,40 @@ -docu_tree \ No newline at end of file + + Focus on What Matters + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +