nitro-web 0.0.7 → 0.0.9

package/components/partials/element/sidebar.jsx

@@ -1,5 +1,6 @@
 // Component: https://tailwindui.com/components/application-ui/application-shells/sidebar#component-a69d85b6237ea2ad506c00ef1cd39a38
 import { Dialog, DialogBackdrop, DialogPanel, TransitionChild } from '@headlessui/react'
+import avatarImg from '../../../client/imgs/avatar.jpg'
 import {
   Bars3Icon,
   HomeIcon,
@@ -15,7 +16,7 @@ function classNames(...classes) {
   return classes.filter(Boolean).join(' ')
 }
 
-export function Sidebar({ Logo }) {
+export function Sidebar({ Logo, menu, links }) {
   const [sidebarOpen, setSidebarOpen] = useState(false)
   return (
     <>
@@ -38,14 +39,14 @@ export function Sidebar({ Logo }) {
                 </button>
               </div>
             </TransitionChild>
-            <SidebarContents Logo={Logo} />
+            <SidebarContents Logo={Logo} menu={menu} links={links} />
           </DialogPanel>
         </div>
       </Dialog>
 
       {/* Static sidebar for desktop */}
       <div className={`hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:flex-col ${sidebarWidth}`}>
-        <SidebarContents Logo={Logo} />
+        <SidebarContents Logo={Logo} menu={menu} links={links} />
       </div>
       
       {/* mobile sidebar closed */}
@@ -55,7 +56,7 @@ export function Sidebar({ Logo }) {
         </button>
         <div className="flex-1 text-sm/6 font-semibold text-gray-900">Dashboard</div>
         <Link to="#">
-          <img alt="" src="/assets/imgs/user.jpg" className="size-8 rounded-full bg-gray-50" />
+          <img alt="" src={avatarImg} className="size-8 rounded-full bg-gray-50" />
         </Link>
       </div>
       
@@ -64,7 +65,7 @@ export function Sidebar({ Logo }) {
   )
 }
 
-function SidebarContents ({ Logo }) {
+function SidebarContents ({ Logo, menu, links }) {
   const location = useLocation()
   const [{ user }] = sharedStore.useTracked()
 
@@ -74,45 +75,49 @@ function SidebarContents ({ Logo }) {
     else return ''
   }
 
-  const navigation = [
-    { name: 'Dashboard', href: '/', icon: HomeIcon },
-    { name: 'Pricing (example)', href: '/pricing', icon: UsersIcon },
-    { name: 'Styleguide', href: '/styleguide', icon: PaintBrushIcon },
-    { name: 'Signout', href: '/signout', icon: ArrowLeftCircleIcon },
+  const _menu = menu || [
+    { name: 'Dashboard', to: '/', Icon: HomeIcon },
+    { name: 'Styleguide', to: '/styleguide', Icon: PaintBrushIcon },
+    { name: 'Pricing (example)', to: '/pricing', Icon: UsersIcon },
+    { name: 'Signout', to: '/signout', Icon: ArrowLeftCircleIcon },
   ]
 
-  const teams = [
-    { id: 1, name: 'Team 1', href: '#', initial: 'T' },
-    { id: 2, name: 'Team 2', href: '#', initial: 'H' },
+  const _links = links || [
+    { name: 'Team 1', to: '#', initial: 'T' },
+    { name: 'Team 2', to: '#', initial: 'H' },
   ]
 
   // Sidebar component, swap this element with another sidebar if you like
   return (
     <div className="flex grow flex-col gap-y-8 overflow-y-auto bg-white py-5 px-10 lg:border-r lg:border-gray-200">
       <div className="flex h-16 shrink-0 items-center">
-        <Logo alt="Nitro" width="70" />
+        <Link to="/">
+          <Logo alt="Nitro" width="70" height={undefined} />
+        </Link>
       </div>
       <nav className="flex flex-1 flex-col">
         <ul role="list" className="flex flex-1 flex-col gap-y-7">
           <li>
             <ul role="list" className="-mx-2 space-y-1">
-              {navigation.map((item) => (
+              {_menu.map((item) => (
                 <li key={item.name}>
                   <Link
-                    to={item.href}
+                    to={item.to}
                     className={classNames(
-                      isActive(item.href)
+                      isActive(item.to)
                         ? 'bg-gray-50 text-indigo-600'
                         : 'text-gray-700 hover:bg-gray-50 hover:text-indigo-600',
                       'group flex gap-x-3 items-center rounded-md p-2 text-sm/6 font-semibold'
                     )}
                   >
-                    <item.icon
-                      className={classNames(
-                        isActive(item.href) ? 'text-indigo-600' : 'text-gray-400 group-hover:text-indigo-600',
-                        'size-5 shrink-0'
-                      )}
-                    />
+                    { item.Icon && 
+                      <item.Icon
+                        className={classNames(
+                          isActive(item.to) ? 'text-indigo-600' : 'text-gray-400 group-hover:text-indigo-600',
+                          'size-5 shrink-0'
+                        )}
+                      />
+                    }
                     {item.name}
                   </Link>
                 </li>
@@ -120,14 +125,14 @@ function SidebarContents ({ Logo }) {
             </ul>
           </li>
           <li>
-            <div className="text-xs/6 font-semibold text-gray-400">Your teams</div>
+            <div className="text-xs/6 font-semibold text-gray-400">Other Links</div>
             <ul role="list" className="-mx-2 mt-2 space-y-1">
-              {teams.map((team) => (
+              {_links.map((team) => (
                 <li key={team.name}>
                   <Link
-                    to={team.href}
+                    to={team.to}
                     className={classNames(
-                      isActive(team.href)
+                      isActive(team.to)
                         ? 'bg-gray-50 text-indigo-600'
                         : 'text-gray-700 hover:bg-gray-50 hover:text-indigo-600',
                       'group flex gap-x-3 rounded-md p-2 text-sm/6 font-semibold'
@@ -135,7 +140,7 @@ function SidebarContents ({ Logo }) {
                   >
                     <span
                       className={classNames(
-                        isActive(team.href)
+                        isActive(team.to)
                           ? 'border-indigo-600 text-indigo-600'
                           : 'border-gray-200 text-gray-400 group-hover:border-indigo-600 group-hover:text-indigo-600',
                         'flex size-6 shrink-0 items-center justify-center rounded-lg border bg-white text-[0.625rem] font-medium'
@@ -155,7 +160,7 @@ function SidebarContents ({ Logo }) {
               to="#"
               className="flex items-center gap-x-4 px-6 py-3 text-sm/6 font-semibold text-gray-900 hover:bg-gray-50"
             >
-              <img alt="" src="/assets/imgs/user.jpg" className="size-8 rounded-full bg-gray-50" />
+              <img alt="" src={avatarImg} className="size-8 rounded-full bg-gray-50" />
               <span aria-hidden="true" class="truncate1">{user?.name || 'Guest'}</span>
             </Link>
           </li>

package/components/partials/form/drop.jsx

@@ -1,5 +1,6 @@
 import { isRegex, deepFind, s3Image } from '../../../util.js'
 import { DropHandler } from './drop-handler.jsx'
+import noImage from '../../../client/imgs/no-image.svg'
 
 export function Drop({ awsUrl, className, id, name, onChange, multiple, state, ...props }) {
   /**
@@ -108,7 +109,7 @@ export function Drop({ awsUrl, className, id, name, onChange, multiple, state, .
             {
               urls.map((url, i) => (
                 <div key={i} class="flex align-items-center gap-1">
-                  <img src={url} width="100%" />
+                  <img src={url || noImage} width="100%" />
                 </div>
               ))
             }

package/components/partials/form/select.jsx

@@ -261,9 +261,7 @@ function Option(props) {
 const DropdownIndicator = (props) => {
   return (
     <components.DropdownIndicator {...props}>
-      {/* <img src="/assets/imgs/icons/v.svg" /> */}
       <ChevronDownIcon className="size-6 -my-0.5 -mx-1" />
-      {/* <ChevronDownIcon /> */}
     </components.DropdownIndicator>
   )
 }
@@ -287,8 +285,10 @@ const MultiValueRemove = (props) => {
 
 function Flag({ flag }) {
   if (!flag) return null
+  // todo: public needs to come from webpack
+  const publicPath = '/'
   return (
-    <span class="flag" style={{ backgroundImage: `url(/assets/imgs/flags/${flag}.svg)` }} />
+    <span class="flag" style={{ backgroundImage: `url(${publicPath}assets/imgs/flags/${flag}.svg)` }} />
   )
 }
 
@@ -324,36 +324,6 @@ const style = () => css`
   } */
 
   /*
-  todo: not yet accounted for (maybe remove)
-
-  .bb:not(:last-child) {
-    // option border
-    position: relative;
-    margin-bottom: 6px;
-    &:after {
-      content: "";
-      position: absolute;
-      bottom: -4px;
-      left: 0;
-      height: 2px;
-      width: 100%;
-      background-color: $border-color;
-    }
-  }
-  .bt:not(:first-child) {
-    // option border
-    position: relative;
-    margin-top: 6px;
-    &:after {
-      content: "";
-      position: absolute;
-      top: -4px;
-      left: 0;
-      height: 2px;
-      width: 100%;
-      background-color: $border-color;
-    }
-  }
   .flag {
     // https://github.com/lipis/flag-icons
     flex-shrink: 0;

package/components/partials/layout/layout1.jsx

@@ -3,8 +3,14 @@ import { Outlet } from 'react-router-dom'
 import { Message } from '../element/message.jsx'
 import { Sidebar } from '../element/sidebar.jsx'
 
-// Dashboard, app screens (only the <Outlet/> receives `params` and `location`)
-export function Layout1({ Logo }) {
+/**
+ * Dashboard, app screens (only the <Outlet/> receives `params` and `location`)
+ * @param {object} props 
+ * @param {JSX.Element} props.Logo
+ * @param {array} [props.menu] - [{name, to, Icon}]
+ * @param {array} [props.links] - [{name, to, initial}]
+ */
+export function Layout1({ Logo, menu, links }) {
   const [store] = sharedStore.useTracked()
 
   return (
@@ -12,7 +18,7 @@ export function Layout1({ Logo }) {
       <Message />
       <div class="flex-1">
         <div class="wrapper lg:flex min-h-[100%] w-[100%] bg-[#FDFDFD] shadow-[0_0_40px_0_rgb(237_237_237)]">
-          <Sidebar Logo={Logo} />
+          <Sidebar Logo={Logo} menu={menu} links={links} />
           <div class="py-10 px-14 flex-1" key={store?.company?._id}>
             <Outlet />
           </div>

package/components/partials/layout/layout2.jsx

@@ -20,8 +20,8 @@ export function Layout2({ Logo }) {
         <div class="wrapper-2 w-full px-5 pb-4 flex items-center text-sm text-[#1F1F1F]">
           <ul class="flex-1 flex gap-4 list-style-none">
             <li><Link class="underline1" to="/">Home</Link></li>
-            <li><Link class="underline1" to="/signin">About</Link></li>
-            <li><Link class="underline1" to="/signin">Support</Link></li>
+            <li><Link class="underline1" to="/about">About</Link></li>
+            <li><Link class="underline1" to="/support">Support</Link></li>
           </ul>
           <div>
             2025 © Nitro

package/components/partials/styleguide.jsx

@@ -142,8 +142,9 @@ export function Styleguide({ config }) {
             name="multi"
             isMulti={true}
             options={[
-              { value: 'edit', label: 'Edit' },
-              { value: 'delete', label: 'Delete' },
+              { value: 'blue', label: 'Blue' },
+              { value: 'green', label: 'Green' },
+              { value: 'yellow', label: 'Yellow' },
             ]}
           />
         </div>

package/package.json

@@ -2,7 +2,8 @@
   "name": "nitro-web",
   "description": "Nitro is a battle-tested, modular base project to turbocharge your projects, styled using Tailwind 🚀",
   "repository": "github:boycce/nitro-web",
-  "version": "0.0.7",
+  "homepage": "https://boycce.github.io/nitro-web/",
+  "version": "0.0.9",
   "main": "./client/index.js",
   "types": "./types/client/index.d.ts",
   "type": "module",
@@ -40,11 +41,13 @@
   "scripts": {
     "dev": "npm run dev -w example",
     "dev:client": "npm run dev:client -w example",
+    "dev:client-only": "isDemo=true npm run dev:client -w example",
     "dev:server": "npm run dev:server -w example",
-    "build": "npm run build -w example",
+    "build": "isDemo=true npm run build -w example",
     "major": "standard-version --release-as major && npm publish",
     "minor": "standard-version --release-as minor && npm publish",
     "patch": "standard-version --release-as patch && npm publish",
+    "start": "npm run start -w example",
     "types": "tsc client/*.js components/**/*.jsx --declaration --declarationMap --allowJs --emitDeclarationOnly --jsx react-jsx --esModuleInterop --outDir types"
   },
   "dependencies": {
@@ -85,26 +88,18 @@
     "monastery": "^3.5.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "stripe": "^9.16.0"
+    "stripe": "^9.16.0",
+    "tailwindcss": "^3.4.17",
+    "twin.macro": "^3.4.1"
   },
   "devDependencies": {
     "@emotion/eslint-plugin": "^11.11.0",
-    "@emotion/react": "^11.11.4",
-    "@emotion/styled": "^11.11.4",
-    "@types/react": "^19.0.2",
-    "@types/react-dom": "^19.0.2",
-    "@typescript-eslint/eslint-plugin": "^8.18.1",
-    "@typescript-eslint/parser": "^8.18.1",
     "babel-eslint": "^10.0.3",
     "eslint": "^8.57.1",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-react": "^7.19.0",
     "eslint-plugin-react-hooks": "^4.0.0",
-    "eslint-webpack-plugin": "^2.7.0",
-    "standard-version": "^9.3.2",
-    "tailwindcss": "^3.4.17",
-    "twin.macro": "^3.4.1",
-    "typescript": "^5.7.3"
+    "standard-version": "^9.3.2"
   },
   "engines": {
     "node": "^18"
@@ -125,9 +120,6 @@
       }
     ]
   },
-  "jest": {
-    "transform": {}
-  },
   "author": "",
   "license": "ISC"
 }

package/readme.md

@@ -11,7 +11,7 @@ npm i nitro-web
 ### Install
 
 1. Copy ./_example into your project
-2. In package.json, replace `"nitro-web": "file:.."` with `"nitro-web": "^0.0.7"`
+2. In package.json, replace `"nitro-web": "file:.."` with `"nitro-web": "~0.0.9"`
 3. In package.json, replace `"../.eslintrc.json"` with `"./node_modules/nitro-web/.eslintrc.json"`
 4. Run `npm i`
 
@@ -66,5 +66,5 @@ npm run start
 
 ### Package notes
 
-- Added twin.macro is required as a dev dependency to ./. Note that this may cause errors when npm linking nitro-web, since dev deps are not installed.
-- Added tailwindcss^3 as a dev dependency to ./ to stop tailwind^4.0.0 from being installed
+- Added twin.macro is required as a peer dependency to ./. 
+- Added tailwindcss^3 as a peer dependency to ./ to stop tailwind^4.0.0 from being installed

package/types/client/app.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"app.d.ts","sourceRoot":"","sources":["../../client/app.js"],"names":[],"mappings":"AAKA,mEAcC"}
+{"version":3,"file":"app.d.ts","sourceRoot":"","sources":["../../client/app.js"],"names":[],"mappings":"AAKA,mEAeC"}

package/types/client/index.d.ts

@@ -3,6 +3,9 @@ export * from "../util.js";
 export * as util from "../util.js";
 export { Signin } from "../components/auth/signin.jsx";
 export { Signup } from "../components/auth/signup.jsx";
+export { Dashboard } from "../components/dashboard/dashboard.jsx";
+export { NotFound } from "../components/partials/not-found.jsx";
+export { Styleguide } from "../components/partials/styleguide.jsx";
 export { Accordion } from "../components/partials/element/accordion.jsx";
 export { Avatar } from "../components/partials/element/avatar.jsx";
 export { Button } from "../components/partials/element/button.jsx";
@@ -22,7 +25,5 @@ export { Toggle } from "../components/partials/form/toggle.jsx";
 export { Layout1 } from "../components/partials/layout/layout1.jsx";
 export { Layout2 } from "../components/partials/layout/layout2.jsx";
 export { IsFirstRender } from "../components/partials/is-first-render.js";
-export { NotFound } from "../components/partials/not-found.jsx";
-export { Styleguide } from "../components/partials/styleguide.jsx";
 export { ResetInstructions, ResetPassword } from "../components/auth/reset.jsx";
 //# sourceMappingURL=index.d.ts.map

package/types/components/auth/signin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"signin.d.ts","sourceRoot":"","sources":["../../../components/auth/signin.jsx"],"names":[],"mappings":"AAOA;;4CAoEC"}
+{"version":3,"file":"signin.d.ts","sourceRoot":"","sources":["../../../components/auth/signin.jsx"],"names":[],"mappings":"AAMA;;4CAmEC"}

package/types/components/dashboard/dashboard.d.ts

@@ -0,0 +1,4 @@
+export function Dashboard({ config }: {
+    config: any;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=dashboard.d.ts.map

package/types/components/dashboard/dashboard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dashboard.d.ts","sourceRoot":"","sources":["../../../components/dashboard/dashboard.jsx"],"names":[],"mappings":"AAEA;;4CAsBC"}

package/types/components/partials/element/avatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../../components/partials/element/avatar.jsx"],"names":[],"mappings":"AAGA;;;;;;4CAwBC"}
+{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../../components/partials/element/avatar.jsx"],"names":[],"mappings":"AAKA;;;;;;4CAwBC"}

package/types/components/partials/element/sidebar.d.ts

@@ -1,4 +1,6 @@
-export function Sidebar({ Logo }: {
+export function Sidebar({ Logo, menu, links }: {
     Logo: any;
+    menu: any;
+    links: any;
 }): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=sidebar.d.ts.map

package/types/components/partials/element/sidebar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../../../components/partials/element/sidebar.jsx"],"names":[],"mappings":"AAiBA;;4CA+CC"}
+{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../../../components/partials/element/sidebar.jsx"],"names":[],"mappings":"AAkBA;;;;4CA+CC"}

package/types/components/partials/form/drop.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"drop.d.ts","sourceRoot":"","sources":["../../../../components/partials/form/drop.jsx"],"names":[],"mappings":"AAGA;;;;;;;;;4CAyHC"}
+{"version":3,"file":"drop.d.ts","sourceRoot":"","sources":["../../../../components/partials/form/drop.jsx"],"names":[],"mappings":"AAIA;;;;;;;;;4CAyHC"}

package/types/components/partials/layout/layout1.d.ts

@@ -1,4 +1,13 @@
-export function Layout1({ Logo }: {
-    Logo: any;
+/**
+ * Dashboard, app screens (only the <Outlet/> receives `params` and `location`)
+ * @param {object} props
+ * @param {JSX.Element} props.Logo
+ * @param {array} [props.menu] - [{name, to, Icon}]
+ * @param {array} [props.links] - [{name, to, initial}]
+ */
+export function Layout1({ Logo, menu, links }: {
+    Logo: JSX.Element;
+    menu?: any[];
+    links?: any[];
 }): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=layout1.d.ts.map

package/types/components/partials/layout/layout1.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"layout1.d.ts","sourceRoot":"","sources":["../../../../components/partials/layout/layout1.jsx"],"names":[],"mappings":"AAMA;;4CAgBC"}
+{"version":3,"file":"layout1.d.ts","sourceRoot":"","sources":["../../../../components/partials/layout/layout1.jsx"],"names":[],"mappings":"AAKA;;;;;;GAMG;AACH,+CAJG;IAA2B,IAAI,EAAvB,GAAG,CAAC,OAAO;IACG,IAAI;IACJ,KAAK;CAC7B,2CAiBA"}

package/types/components/partials/styleguide.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styleguide.d.ts","sourceRoot":"","sources":["../../../components/partials/styleguide.jsx"],"names":[],"mappings":"AASA;;4CAiPC"}
+{"version":3,"file":"styleguide.d.ts","sourceRoot":"","sources":["../../../components/partials/styleguide.jsx"],"names":[],"mappings":"AASA;;4CAkPC"}

package/types/util.d.ts

@@ -84,11 +84,11 @@ export function getDirectories(path: any, pwd: any): {
     componentsDir: any;
     distDir: any;
     emailTemplateDir: any;
-    fontsDir: any;
     imgsDir: any;
     tmpDir: any;
 };
 export function getLink(obj: any, query: any): string;
+export function getPublicPath(env: any, homepage: any, publicPath: any): string;
 export function getStripeClientPromise(stripePublishableKey: any): any;
 export function getResponseErrors(errs: any): any;
 export function inArray(array: any, key: any, value: any): any;

package/types/util.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../util.js"],"names":[],"mappings":"AAMA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8BC;AAED,6DAaC;AAED,4DAQC;AAED,iFAaC;AAED,0EAIC;AAED,gDAEC;AAED,0CAEC;AAED,qFAQC;AAED,uDAIC;AAED,iEAoBC;AAED;;;;EAgIC;AAED,wCASC;AAED,mDAYC;AAED,+DAyBC;AAED,iEAeC;AAED,kFA2BC;AAED,gEAIC;AAED,6CASC;AAED,qEAsEC;AAED,8CAGC;AAED,kDAQC;AAED;;;;IAOC;AAED;;;IAOC;AAED,mFAUC;AAED;;;;;;;;EAWC;AAED,sDAYC;AAED,uEAEC;AAED,kDAsBC;AAED,+DAaC;AAED,0DAEC;AAED,+CAEC;AAED,kDAEC;AAED,6CAIC;AAED,kEAOC;AAED,mDAEC;AAED,6CAiBC;AAED,iDAEC;AAED,iDAGC;AAED,gDAEC;AAED,iDAEC;AAED,0CAEC;AAED,yEAWC;AAED,mFAwCC;AAED;;;;;;;;;;;;;;;;;;;;;;;;EA0CC;AAED,uEAmBC;AAED,oDAKC;AAED,iDAOC;AAED,8EAqDC;AAED,kEAQC;AAED,8CAeC;AAED,+DAiCC;AAED,8CAcC;AAED,yFAiDC;AAED,oDAYC;AAED,4EAmBC;AAED,kDAUC;AAED,mFAiDC;AAED,oEAaC;AAED,8EAIC;AAED,0DAQC;AAED,uDAMC;AAED,mFAwBC;AAED;;;;EAyBC;AAED,8CAIC;AAED,uCAGC;AAED,0CAGC;AAjoCD,6BAAoC"}
+{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../util.js"],"names":[],"mappings":"AAMA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8BC;AAED,6DAaC;AAED,4DAQC;AAED,iFAaC;AAED,0EAIC;AAED,gDAEC;AAED,0CAEC;AAED,qFAQC;AAED,uDAIC;AAED,iEAoBC;AAED;;;;EAgIC;AAED,wCASC;AAED,mDAYC;AAED,+DAyBC;AAED,iEAeC;AAED,kFA2BC;AAED,gEAIC;AAED,6CASC;AAED,qEAsEC;AAED,8CAGC;AAED,kDAQC;AAED;;;;IAOC;AAED;;;IAOC;AAED,mFAUC;AAED;;;;;;;EAUC;AAED,sDAYC;AAED,gFAmBC;AAED,uEAEC;AAED,kDAsBC;AAED,+DAaC;AAED,0DAEC;AAED,+CAEC;AAED,kDAEC;AAED,6CAIC;AAED,kEAOC;AAED,mDAEC;AAED,6CAiBC;AAED,iDAEC;AAED,iDAGC;AAED,gDAEC;AAED,iDAEC;AAED,0CAEC;AAED,yEAWC;AAED,mFAwCC;AAED;;;;;;;;;;;;;;;;;;;;;;;;EA0CC;AAED,uEAmBC;AAED,oDAKC;AAED,iDAOC;AAED,8EAqDC;AAED,kEAQC;AAED,8CAeC;AAED,+DAiCC;AAED,8CAcC;AAED,yFAiDC;AAED,oDAYC;AAED,4EAmBC;AAED,kDAUC;AAED,mFAiDC;AAED,oEAaC;AAED,8EAIC;AAED,0DAQC;AAED,uDAMC;AAED,mFAwBC;AAED;;;;EAyBC;AAED,8CAIC;AAED,uCAGC;AAED,0CAGC;AArpCD,6BAAoC"}

package/util.js

@@ -497,7 +497,6 @@ export function getDirectories (path, pwd) {
     componentsDir: path.join(_pwd, process.env.componentsDir || 'components', '/'),
     distDir: path.join(_pwd, process.env.distDir || ((process.env.clientDir || 'client') + '/dist'), '/'),
     emailTemplateDir: path.join(_pwd, process.env.emailTemplateDir || 'server/email', '/'),
-    fontsDir: path.join(_pwd, (process.env.clientDir || 'client'), 'fonts', '/'),
     imgsDir: path.join(_pwd, (process.env.clientDir || 'client'), 'imgs', '/'),
     tmpDir: path.join(_pwd, process.env.tmpDir || 'tmp', '/'),
   }
@@ -517,6 +516,27 @@ export function getLink (obj, query) {
   return queryString(newQueryObj) || '?'
 }
 
+export function getPublicPath(env, homepage, publicPath) {
+  /**
+   * Returns public path used for webapck (we can't use relative paths)
+   * @param {string} env - 'development', 'staging', 'production'
+   * @param {string} publicPath - proces.env.publicPath
+   * @param {string} homepage - package.json homepage
+   */
+  if (publicPath) {
+    const publicPathObj = new URL(publicPath, 'https://domain.com')
+    return publicPathObj.pathname
+
+  } else if (homepage) {
+    const homepageObj = new URL(homepage, 'https://domain.com')
+    if (env === 'development') return '/'
+    else return homepageObj.pathname
+
+  } else {
+    return '/'
+  }
+}
+
 export function getStripeClientPromise (stripePublishableKey) {
   return global.stripeClientPromise || (global.stripeClientPromise = loadStripe(stripePublishableKey))
 }
@@ -977,7 +997,7 @@ export function s3Image (awsUrl, image, size='full', i) {
   let usingMilliseconds = true
 
   if (!isObject(image)) image = (image && image[i]) ? image[i] : null
-  if (!image) return '/assets/imgs/no-image.jpg'
+  if (!image) return ''
   // Alway use preview if available
   if (image.base64) return image.base64
   // Wait a moment before the different sizes are generated by lambda
@@ -1155,4 +1175,4 @@ export function trim (string) {
 export function ucFirst (string) {
   if (!string) return ''
   return string.charAt(0).toUpperCase() + string.slice(1)
-}
+}

package/webpack.config.js

@@ -2,6 +2,7 @@ import axios from '@hokify/axios'
 import axiosRetry from 'axios-retry'
 import autoprefixer from 'autoprefixer'
 import CleanTerminalPlugin from 'clean-terminal-webpack-plugin'
+import { CleanWebpackPlugin } from 'clean-webpack-plugin'
 import CopyWebpackPlugin from 'copy-webpack-plugin'
 import HtmlWebpackPlugin from 'html-webpack-plugin'
 import MiniCssExtractPlugin from 'mini-css-extract-plugin'
@@ -15,7 +16,7 @@ import postcssImport from 'postcss-import'
 import postcssNested from 'postcss-nested'
 import postcssFor from 'postcss-for'
 import { createRequire } from 'module'
-import { getDirectories } from './util.js'
+import { getDirectories, getPublicPath } from './util.js'
 
 const _require = createRequire(import.meta.url)
 const pick = (object, list) => list.reduce((o, e) => ((o[e] = object[e]), o), {})
@@ -29,7 +30,8 @@ axiosRetry(axios, {
 
 // process.traceDeprecation = true
 export const getConfig = (config) => {
-  const { clientDir, componentsDir, distDir, imgsDir, fontsDir } = getDirectories(path, config.pwd)
+  const { clientDir, componentsDir, distDir, imgsDir } = getDirectories(path, config.pwd)
+  const publicPath = getPublicPath(config.env, config.homepage, config.publicPath)
 
   return (env, argv) => [{
     devtool: isBuild ? false : 'source-map',
@@ -177,6 +179,13 @@ export const getConfig = (config) => {
             },
           ],
         },
+        {
+          test: /\.(png|jpe?g|gif|woff|woff2|ttf|eot)$/i,
+          type: 'asset/resource',
+          generator: {
+            filename: 'assets/images/[name].[ext][query]',//[hash][ext][query]
+          },
+        },
         {
           test: /\.svg$/,
           use: [
@@ -196,6 +205,7 @@ export const getConfig = (config) => {
                         },
                       },
                     },
+                    // 'removeDimensions', (dont need this, just use width/height={undefined} if required)
                     // {
                     //   name: 'addClassesToSVGElement',
                     //   params: {
@@ -237,7 +247,7 @@ export const getConfig = (config) => {
       // Because of this we manually need to prefix all output filenames with `assets/`.
       filename: `assets/bundle.[name]${isBuild ? '.[contenthash]' : ''}.js`,
       path: distDir,
-      publicPath: '/',
+      publicPath: publicPath,
     },
     performance: {
       hints: false,
@@ -257,16 +267,17 @@ export const getConfig = (config) => {
     },
     plugins: [
       // new (require('webpack-bundle-analyzer').BundleAnalyzerPlugin)(),
+      new CleanWebpackPlugin(),
       new CopyWebpackPlugin({
         patterns: [
           { from: imgsDir + 'favicon.png', to: './favicon.png' },
           { from: imgsDir, to: './assets/imgs' },
-          { from: fontsDir, to: './assets/fonts' },
         ],
       }),
       new webpack.DefinePlugin({
         CONFIG: JSON.stringify({
           ...pick(config, config.inject ? config.inject.split(' ') : []),
+          isDemo: process.env.isDemo,
           version: config.version,
         }),
       }),
@@ -276,6 +287,7 @@ export const getConfig = (config) => {
       }),
       new MiniCssExtractPlugin({ filename: `assets/bundle.[name]${isBuild ? '.[contenthash]' : ''}.css` }),
       new HtmlWebpackPlugin({ template: clientDir + 'index.html', filename: distDir + 'index.html' }),
+      new InterpolateHtmlPlugin(HtmlWebpackPlugin, { PUBLIC_PATH: publicPath }),
       new CleanTerminalPlugin({ skipFirstRun: true }),
       // !isBuild && new ReactRefreshWebpackPlugin({ overlay: false }),
     ].filter(Boolean),
@@ -301,3 +313,26 @@ export const getConfig = (config) => {
     },
   }]
 }
+
+class InterpolateHtmlPlugin {
+  constructor(htmlWebpackPlugin, replacements) {
+    this.htmlWebpackPlugin = htmlWebpackPlugin
+    this.replacements = replacements
+  }
+  apply(compiler) {
+    compiler.hooks.compilation.tap('InterpolateHtmlPlugin', compilation => {
+      this.htmlWebpackPlugin
+        .getHooks(compilation)
+        .afterTemplateExecution.tap('InterpolateHtmlPlugin', data => {
+          // Run HTML through a series of user-specified string replacements.
+          for (const key in this.replacements) {
+            const value = this.replacements[key]
+            data.html = data.html.replace(
+              new RegExp('{' + key + '}', 'g'),
+              value
+            )
+          }
+        })
+    })
+  }
+}