refactor(init): promote good practices; use site alias (#6481)

packages/create-docusaurus/templates/classic-typescript/src/components/HomepageFeatures.module.css

@@ -1 +0,0 @@
-../../../classic/src/components/HomepageFeatures.module.css

packages/create-docusaurus/templates/classic-typescript/src/components/HomepageFeatures/index.tsx

@@ -1,7 +1,6 @@
-import useBaseUrl from '@docusaurus/useBaseUrl';
 import React from 'react';
 import clsx from 'clsx';
-import styles from './HomepageFeatures.module.css';
+import styles from './styles.module.css';
 
 type FeatureItem = {
   title: string;
@@ -12,7 +11,7 @@ type FeatureItem = {
 const FeatureList: FeatureItem[] = [
   {
     title: 'Easy to Use',
-    image: '/img/undraw_docusaurus_mountain.svg',
+    image: require('@site/src/static/img/undraw_docusaurus_mountain.svg'),
     description: (
       <>
         Docusaurus was designed from the ground up to be easily installed and
@@ -22,7 +21,7 @@ const FeatureList: FeatureItem[] = [
   },
   {
     title: 'Focus on What Matters',
-    image: '/img/undraw_docusaurus_tree.svg',
+    image: require('@site/src/static/img/undraw_docusaurus_tree.svg'),
     description: (
       <>
         Docusaurus lets you focus on your docs, and we&apos;ll do the chores. Go
@@ -32,7 +31,7 @@ const FeatureList: FeatureItem[] = [
   },
   {
     title: 'Powered by React',
-    image: '/img/undraw_docusaurus_react.svg',
+    image: require('@site/src/static/img/undraw_docusaurus_react.svg'),
     description: (
       <>
         Extend or customize your website layout by reusing React. Docusaurus can
@@ -46,11 +45,7 @@ function Feature({title, image, description}: FeatureItem) {
   return (
     <div className={clsx('col col--4')}>
       <div className="text--center">
-        <img
+        <img className={styles.featureSvg} alt={title} src={image} />
-          className={styles.featureSvg}
-          alt={title}
-          src={useBaseUrl(image)}
-        />
       </div>
       <div className="text--center padding-horiz--md">
         <h3>{title}</h3>

packages/create-docusaurus/templates/classic-typescript/src/components/HomepageFeatures/styles.module.css

@@ -0,0 +1 @@
+../../../../classic/src/components/HomepageFeatures/styles.module.css

packages/create-docusaurus/templates/classic-typescript/src/pages/index.tsx

@@ -4,7 +4,7 @@ import Layout from '@theme/Layout';
 import Link from '@docusaurus/Link';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import styles from './index.module.css';
-import HomepageFeatures from '../components/HomepageFeatures';
+import HomepageFeatures from '@site/src/components/HomepageFeatures';
 
 function HomepageHeader() {
   const {siteConfig} = useDocusaurusContext();

packages/create-docusaurus/templates/classic/src/components/HomepageFeatures/index.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import clsx from 'clsx';
-import styles from './HomepageFeatures.module.css';
+import styles from './styles.module.css';
 
 const FeatureList = [
   {
     title: 'Easy to Use',
-    Svg: require('../../static/img/undraw_docusaurus_mountain.svg').default,
+    Svg: require('@site/static/img/undraw_docusaurus_mountain.svg').default,
     description: (
       <>
         Docusaurus was designed from the ground up to be easily installed and
@@ -15,7 +15,7 @@ const FeatureList = [
   },
   {
     title: 'Focus on What Matters',
-    Svg: require('../../static/img/undraw_docusaurus_tree.svg').default,
+    Svg: require('@site/static/img/undraw_docusaurus_tree.svg').default,
     description: (
       <>
         Docusaurus lets you focus on your docs, and we&apos;ll do the chores. Go
@@ -25,7 +25,7 @@ const FeatureList = [
   },
   {
     title: 'Powered by React',
-    Svg: require('../../static/img/undraw_docusaurus_react.svg').default,
+    Svg: require('@site/static/img/undraw_docusaurus_react.svg').default,
     description: (
       <>
         Extend or customize your website layout by reusing React. Docusaurus can

packages/create-docusaurus/templates/classic/src/pages/index.js

@@ -4,7 +4,7 @@ import Layout from '@theme/Layout';
 import Link from '@docusaurus/Link';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import styles from './index.module.css';
-import HomepageFeatures from '../components/HomepageFeatures';
+import HomepageFeatures from '@site/src/components/HomepageFeatures';
 
 function HomepageHeader() {
   const {siteConfig} = useDocusaurusContext();