Organize fonts,images,icon,sounds into 'assets' folder

app/application.ts

@@ -4,7 +4,7 @@ import loadPolyfills from './soapbox/load_polyfills';
 require('./soapbox/iframe');
 
 // @ts-ignore
-require.context('./images/', true);
+require.context('./assets/images/', true);
 
 // Load stylesheet
 require('react-datepicker/dist/react-datepicker.css');

app/soapbox/components/sidebar-navigation.tsx

@@ -97,7 +97,7 @@ const SidebarNavigation = () => {
     if (features.publicTimeline && features.federating) {
       menu.push({
         to: '/timeline/fediverse',
-        icon: require('icons/fediverse.svg'),
+        icon: require('assets/icons/fediverse.svg'),
         text: intl.formatMessage(messages.fediverse),
       });
     }

app/soapbox/components/sidebar_menu.tsx

@@ -228,7 +228,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
                   {features.federating && (
                     <SidebarLink
                       to='/timeline/fediverse'
-                      icon={require('icons/fediverse.svg')}
+                      icon={require('assets/icons/fediverse.svg')}
                       text={<FormattedMessage id='tabs_bar.fediverse' defaultMessage='Fediverse' />}
                       onClick={onClose}
                     />

app/soapbox/components/site-logo.tsx

@@ -18,8 +18,8 @@ const SiteLogo: React.FC<ISiteLogo> = ({ className, theme, ...rest }) => {
 
   /** Soapbox logo. */
   const soapboxLogo = darkMode
-    ? require('images/soapbox-logo-white.svg')
+    ? require('assets/images/soapbox-logo-white.svg')
-    : require('images/soapbox-logo.svg');
+    : require('assets/images/soapbox-logo.svg');
 
   // Use the right logo if provided, then use fallbacks.
   const getSrc = () => {

app/soapbox/components/verification_badge.tsx

@@ -18,7 +18,7 @@ const VerificationBadge: React.FC<IVerificationBadge> = ({ className }) => {
   const soapboxConfig = useSoapboxConfig();
 
   // Prefer a custom icon if found
-  const icon = soapboxConfig.verifiedIcon || require('icons/verified.svg');
+  const icon = soapboxConfig.verifiedIcon || require('assets/icons/verified.svg');
 
   // Render component based on file extension
   const Element = icon.endsWith('.svg') ? Icon : 'img';

app/soapbox/middleware/sounds.ts

@@ -39,21 +39,21 @@ export default function soundsMiddleware(): ThunkMiddleware {
   const soundCache: Record<string, HTMLAudioElement> = {
     boop: createAudio([
       {
-        src: require('../../sounds/boop.ogg'),
+        src: require('../../assets/sounds/boop.ogg'),
         type: 'audio/ogg',
       },
       {
-        src: require('../../sounds/boop.mp3'),
+        src: require('../../assets/sounds/boop.mp3'),
         type: 'audio/mpeg',
       },
     ]),
     chat: createAudio([
       {
-        src: require('../../sounds/chat.oga'),
+        src: require('../../assets/sounds/chat.oga'),
         type: 'audio/ogg',
       },
       {
-        src: require('../../sounds/chat.mp3'),
+        src: require('../../assets/sounds/chat.mp3'),
         type: 'audio/mpeg',
       },
     ]),

app/soapbox/normalizers/__tests__/account.test.ts

@@ -2,8 +2,8 @@ import { Record as ImmutableRecord, fromJS } from 'immutable';
 
 import { normalizeAccount } from '../account';
 
-const AVATAR_MISSING = require('images/avatar-missing.png');
+const AVATAR_MISSING = require('assets/images/avatar-missing.png');
-const HEADER_MISSING = require('images/header-missing.png');
+const HEADER_MISSING = require('assets/images/header-missing.png');
 
 describe('normalizeAccount()', () => {
   it('adds base fields', () => {

app/soapbox/normalizers/account.ts

@@ -98,7 +98,7 @@ const normalizePleromaLegacyFields = (account: ImmutableMap<string, any>) => {
 const normalizeAvatar = (account: ImmutableMap<string, any>) => {
   const avatar = account.get('avatar');
   const avatarStatic = account.get('avatar_static');
-  const missing = require('images/avatar-missing.png');
+  const missing = require('assets/images/avatar-missing.png');
 
   return account.withMutations(account => {
     account.set('avatar', avatar || avatarStatic || missing);
@@ -110,7 +110,7 @@ const normalizeAvatar = (account: ImmutableMap<string, any>) => {
 const normalizeHeader = (account: ImmutableMap<string, any>) => {
   const header = account.get('header');
   const headerStatic = account.get('header_static');
-  const missing = require('images/header-missing.png');
+  const missing = require('assets/images/header-missing.png');
 
   return account.withMutations(account => {
     account.set('header', header || headerStatic || missing);

app/soapbox/service_worker/web_push_notifications.ts

@@ -180,21 +180,21 @@ const handlePush = (event: PushEvent) => {
 /** Native action to open a status on the device. */
 const actionExpand = (preferred_locale: string) => ({
   action: 'expand',
-  icon: `/${require('../../images/web-push/web-push-icon_expand.png')}`,
+  icon: `/${require('../../assets/images/web-push/web-push-icon_expand.png')}`,
   title: formatMessage('status.show_more', preferred_locale),
 });
 
 /** Native action to repost status. */
 const actionReblog = (preferred_locale: string) => ({
   action: 'reblog',
-  icon: `/${require('../../images/web-push/web-push-icon_reblog.png')}`,
+  icon: `/${require('../../assets/images/web-push/web-push-icon_reblog.png')}`,
   title: formatMessage('status.reblog', preferred_locale),
 });
 
 /** Native action to like status. */
 const actionFavourite = (preferred_locale: string) => ({
   action: 'favourite',
-  icon: `/${require('../../images/web-push/web-push-icon_favourite.png')}`,
+  icon: `/${require('../../assets/images/web-push/web-push-icon_favourite.png')}`,
   title: formatMessage('status.favourite', preferred_locale),
 });
 

app/styles/components/compose-form.scss

@@ -135,12 +135,12 @@
       position: relative;
 
       &.video {
-        background-image: url('../images/video-placeholder.png');
+        background-image: url('../assets/images/video-placeholder.png');
         background-size: cover;
       }
 
       &.audio {
-        background-image: url('../images/audio-placeholder.png');
+        background-image: url('../assets/images/audio-placeholder.png');
         background-size: cover;
       }
     }

app/styles/fonts.scss

@@ -3,26 +3,26 @@
 // OpenDyslexic
 @font-face {
   font-family: 'OpenDyslexic';
-  src: url('../fonts/OpenDyslexic/OpenDyslexic-Regular.woff2') format('woff2');
+  src: url('../assets/fonts/OpenDyslexic/OpenDyslexic-Regular.woff2') format('woff2');
 }
 
 @font-face {
   font-family: 'OpenDyslexic';
   font-weight: bold;
-  src: url('../fonts/OpenDyslexic/OpenDyslexic-Bold.woff2') format('woff2');
+  src: url('../assets/fonts/OpenDyslexic/OpenDyslexic-Bold.woff2') format('woff2');
 }
 
 @font-face {
   font-family: 'OpenDyslexic';
   font-weight: bold;
   font-style: italic;
-  src: url('../fonts/OpenDyslexic/OpenDyslexic-Bold-Italic.woff2') format('woff2');
+  src: url('../assets/fonts/OpenDyslexic/OpenDyslexic-Bold-Italic.woff2') format('woff2');
 }
 
 @font-face {
   font-family: 'OpenDyslexic';
   font-style: italic;
-  src: url('../fonts/OpenDyslexic/OpenDyslexic-Italic.woff2') format('woff2');
+  src: url('../assets/fonts/OpenDyslexic/OpenDyslexic-Italic.woff2') format('woff2');
 }
 
 // TYPEOGRAPHY MIXINS
@@ -62,11 +62,11 @@
 // Soapbox icon font
 @font-face {
   font-family: 'soapbox';
-  src: url('../fonts/soapbox/soapbox.eot?pryg6i');
+  src: url('../assets/fonts/soapbox/soapbox.eot?pryg6i');
-  src: url('../fonts/soapbox/soapbox.eot?pryg6i#iefix') format('embedded-opentype'),
+  src: url('../assets/fonts/soapbox/soapbox.eot?pryg6i#iefix') format('embedded-opentype'),
-    url('../fonts/soapbox/soapbox.ttf?pryg6i') format('truetype'),
+    url('../assets/fonts/soapbox/soapbox.ttf?pryg6i') format('truetype'),
-    url('../fonts/soapbox/soapbox.woff?pryg6i') format('woff'),
+    url('../assets/fonts/soapbox/soapbox.woff?pryg6i') format('woff'),
-    url('../fonts/soapbox/soapbox.svg?pryg6i#soapbox') format('svg');
+    url('../assets/fonts/soapbox/soapbox.svg?pryg6i#soapbox') format('svg');
   font-weight: normal;
   font-style: normal;
 }

app/styles/ui.scss

@@ -232,7 +232,7 @@ article:last-child > .domain {
   .image-loader__preview-canvas {
     max-width: $media-modal-media-max-width;
     max-height: $media-modal-media-max-height;
-    background: url('../images/void.png') repeat;
+    background: url('../assets/images/void.png') repeat;
     object-fit: contain;
   }
 

webpack/rules/assets.ts

@@ -11,7 +11,7 @@ const rules: RuleSetRule[] = [{
   test: /\.(png|svg)/,
   type: 'asset/resource',
   include: [
-    resolve('app', 'images'),
+    resolve('app', 'assets', 'images'),
     resolve('node_modules', 'emoji-datasource'),
   ],
   generator: {
@@ -21,7 +21,7 @@ const rules: RuleSetRule[] = [{
   test: /\.(ttf|eot|svg|woff|woff2)/,
   type: 'asset/resource',
   include: [
-    resolve('app', 'fonts'),
+    resolve('app', 'assets', 'fonts'),
     resolve('node_modules', 'fork-awesome'),
     resolve('node_modules', 'line-awesome'),
     resolve('node_modules', '@fontsource'),
@@ -32,7 +32,7 @@ const rules: RuleSetRule[] = [{
 }, {
   test: /\.(ogg|oga|mp3)/,
   type: 'asset/resource',
-  include: resolve('app', 'sounds'),
+  include: resolve('app', 'assets', 'sounds'),
   generator: {
     filename: 'packs/sounds/[name]-[contenthash:8][ext]',
   },
@@ -46,7 +46,7 @@ const rules: RuleSetRule[] = [{
 }, {
   test: /\.svg$/,
   type: 'asset/resource',
-  include: resolve('app', 'icons'),
+  include: resolve('app', 'assets', 'icons'),
   generator: {
     filename: 'packs/icons/[name]-[contenthash:8][ext]',
   },