├── app
    ├── styles
    │   └── tailwind
    │   │   ├── route.css
    │   │   └── base.css
    ├── utils.ts
    ├── entry.client.tsx
    ├── routes
    │   ├── index.tsx
    │   ├── marketing
    │   │   ├── index.tsx
    │   │   ├── banners.tsx
    │   │   ├── feature-sections.tsx
    │   │   ├── hero-sections.tsx
    │   │   └── headers.tsx
    │   ├── ecommerce
    │   │   ├── index.tsx
    │   │   ├── product-lists.tsx
    │   │   ├── category-previews.tsx
    │   │   ├── product-features.tsx
    │   │   └── product-quickviews.tsx
    │   ├── application
    │   │   ├── index.tsx
    │   │   ├── pagination.tsx
    │   │   ├── login-and-registration.tsx
    │   │   ├── description-lists.tsx
    │   │   └── dropdowns.tsx
    │   ├── marketing.tsx
    │   ├── application.tsx
    │   └── ecommerce.tsx
    ├── entry.server.tsx
    ├── components
    │   └── sidebar.tsx
    └── root.tsx
├── public
    └── favicon.ico
├── .prettierignore
├── remix.env.d.ts
├── vercel.json
├── docs
    └── styles-logic-statechart.png
├── .gitignore
├── server.js
├── tailwind.config.js
├── .eslintrc.js
├── remix.config.js
├── tsconfig.json
├── README.md
├── package.json
└── scripts
    └── styles.js


/app/styles/tailwind/route.css:
--------------------------------------------------------------------------------
1 | @tailwind components;
2 | @tailwind utilities;
3 | 


--------------------------------------------------------------------------------
/app/styles/tailwind/base.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/brookslybrand/purge-per-route/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | 
3 | /build
4 | /public/build
5 | .env
6 | 
7 | /app/styles/tailwind.css
8 | 


--------------------------------------------------------------------------------
/remix.env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="@remix-run/dev" />
2 | /// <reference types="@remix-run/node/globals" />
3 | 


--------------------------------------------------------------------------------
/vercel.json:
--------------------------------------------------------------------------------
1 | {
2 |   "build": {
3 |     "env": {
4 |       "ENABLE_FILE_SYSTEM_API": "1"
5 |     }
6 |   }
7 | }
8 | 


--------------------------------------------------------------------------------
/docs/styles-logic-statechart.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/brookslybrand/purge-per-route/HEAD/docs/styles-logic-statechart.png


--------------------------------------------------------------------------------
/app/utils.ts:
--------------------------------------------------------------------------------
1 | export function classNames(...classes: (string | undefined)[]) {
2 |   return classes.filter(Boolean).join(' ');
3 | }
4 | 


--------------------------------------------------------------------------------
/app/entry.client.tsx:
--------------------------------------------------------------------------------
1 | import { RemixBrowser } from '@remix-run/react';
2 | import { hydrate } from 'react-dom';
3 | 
4 | hydrate(<RemixBrowser />, document);
5 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | node_modules
 2 | 
 3 | .cache
 4 | .env
 5 | .vercel
 6 | .output
 7 | 
 8 | /build/
 9 | /public/build
10 | /api
11 | 
12 | /app/styles/root.css
13 | /app/styles/routes
14 | 


--------------------------------------------------------------------------------
/server.js:
--------------------------------------------------------------------------------
1 | import { createRequestHandler } from '@remix-run/vercel';
2 | import * as build from '@remix-run/dev/server-build';
3 | 
4 | export default createRequestHandler({ build, mode: process.env.NODE_ENV });
5 | 


--------------------------------------------------------------------------------
/app/routes/index.tsx:
--------------------------------------------------------------------------------
1 | import { redirect } from '@remix-run/server-runtime';
2 | import type { LoaderFunction } from '@remix-run/server-runtime';
3 | 
4 | export const loader: LoaderFunction = () => {
5 |   return redirect('/application');
6 | };
7 | 


--------------------------------------------------------------------------------
/app/routes/marketing/index.tsx:
--------------------------------------------------------------------------------
1 | import { redirect } from '@remix-run/node';
2 | import type { LoaderFunction } from '@remix-run/node';
3 | 
4 | export let loader: LoaderFunction = ({ request }) => {
5 |   return redirect(`${request.url}/hero-sections`);
6 | };
7 | 


--------------------------------------------------------------------------------
/app/routes/ecommerce/index.tsx:
--------------------------------------------------------------------------------
1 | import { redirect } from '@remix-run/node';
2 | import type { LoaderFunction } from '@remix-run/node';
3 | 
4 | export let loader: LoaderFunction = ({ request }) => {
5 |   return redirect(`${request.url}/category-previews`);
6 | };
7 | 


--------------------------------------------------------------------------------
/app/routes/application/index.tsx:
--------------------------------------------------------------------------------
1 | import { redirect } from '@remix-run/node';
2 | import type { LoaderFunction } from '@remix-run/node';
3 | 
4 | export let loader: LoaderFunction = ({ request }) => {
5 |   return redirect(`${request.url}/description-lists`);
6 | };
7 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | const defaultTheme = require('tailwindcss/defaultTheme');
 2 | 
 3 | module.exports = {
 4 |   content: ['./app/**/*.{ts,tsx,jsx,js}'],
 5 |   theme: {
 6 |     extend: {
 7 |       fontFamily: {
 8 |         sans: ['Inter var', ...defaultTheme.fontFamily.sans],
 9 |       },
10 |     },
11 |   },
12 |   plugins: [
13 |     require('@tailwindcss/forms'),
14 |     require('@tailwindcss/aspect-ratio'),
15 |   ],
16 | };
17 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @type {import('@types/eslint').Linter.BaseConfig}
 3 |  */
 4 | module.exports = {
 5 |   extends: [
 6 |     '@remix-run/eslint-config',
 7 |     '@remix-run/eslint-config/node',
 8 |     '@remix-run/eslint-config/jest-testing-library',
 9 |     'prettier',
10 |   ],
11 |   // we're using vitest which has a very similar API to jest
12 |   // (so the linting plugins work nicely), but it we have to explicitly
13 |   // set the jest version.
14 |   settings: {
15 |     jest: {
16 |       version: 27,
17 |     },
18 |   },
19 | };
20 | 


--------------------------------------------------------------------------------
/app/routes/marketing.tsx:
--------------------------------------------------------------------------------
 1 | import { Outlet } from '@remix-run/react';
 2 | import Sidebar from '~/components/sidebar';
 3 | import type { LinksFunction } from '@remix-run/node';
 4 | import marketingCss from '~/styles/routes/marketing.css';
 5 | 
 6 | export let links: LinksFunction = () => [
 7 |   { rel: 'stylesheet', href: marketingCss },
 8 | ];
 9 | 
10 | export default function Marketing() {
11 |   return (
12 |     <Sidebar
13 |       className="rounded-lg bg-red-100"
14 |       subPages={['hero-sections', 'banners', 'feature-sections', 'headers']}
15 |     >
16 |       <Outlet />
17 |     </Sidebar>
18 |   );
19 | }
20 | 


--------------------------------------------------------------------------------
/remix.config.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @type {import('@remix-run/dev').AppConfig}
 3 |  */
 4 | module.exports = {
 5 |   serverBuildTarget: 'vercel',
 6 |   // When running locally in development mode, we use the built in remix
 7 |   // server. This does not understand the vercel lambda module format,
 8 |   // so we default back to the standard build output.
 9 |   server: process.env.NODE_ENV === 'development' ? undefined : './server.js',
10 |   ignoredRouteFiles: ['**/.*'],
11 |   // appDirectory: 'app',
12 |   // assetsBuildDirectory: 'public/build',
13 |   // serverBuildPath: 'api/index.js',
14 |   // publicPath: '/build/',
15 | };
16 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx"],
 3 |   "compilerOptions": {
 4 |     "lib": ["DOM", "DOM.Iterable", "ES2019"],
 5 |     "isolatedModules": true,
 6 |     "esModuleInterop": true,
 7 |     "jsx": "react-jsx",
 8 |     "module": "CommonJS",
 9 |     "moduleResolution": "node",
10 |     "resolveJsonModule": true,
11 |     "target": "ES2019",
12 |     "strict": true,
13 |     "baseUrl": ".",
14 |     "paths": {
15 |       "~/*": ["./app/*"]
16 |     },
17 |     "skipLibCheck": true,
18 |     "noEmit": true,
19 |     "forceConsistentCasingInFileNames": true,
20 |     "allowJs": true
21 |   }
22 | }
23 | 


--------------------------------------------------------------------------------
/app/entry.server.tsx:
--------------------------------------------------------------------------------
 1 | import type { EntryContext } from '@remix-run/node';
 2 | import { RemixServer } from '@remix-run/react';
 3 | import { renderToString } from 'react-dom/server';
 4 | 
 5 | export default function handleRequest(
 6 |   request: Request,
 7 |   responseStatusCode: number,
 8 |   responseHeaders: Headers,
 9 |   remixContext: EntryContext
10 | ) {
11 |   let markup = renderToString(
12 |     <RemixServer context={remixContext} url={request.url} />
13 |   );
14 | 
15 |   responseHeaders.set('Content-Type', 'text/html');
16 | 
17 |   return new Response('<!DOCTYPE html>' + markup, {
18 |     status: responseStatusCode,
19 |     headers: responseHeaders,
20 |   });
21 | }
22 | 


--------------------------------------------------------------------------------
/app/routes/application.tsx:
--------------------------------------------------------------------------------
 1 | import { Outlet } from '@remix-run/react';
 2 | import Sidebar from '~/components/sidebar';
 3 | import type { LinksFunction } from '@remix-run/node';
 4 | import applicationCss from '~/styles/routes/application.css';
 5 | 
 6 | export let links: LinksFunction = () => [
 7 |   { rel: 'stylesheet', href: applicationCss },
 8 | ];
 9 | 
10 | export default function Application() {
11 |   return (
12 |     <Sidebar
13 |       className="rounded-lg bg-zinc-100"
14 |       subPages={[
15 |         'description-lists',
16 |         'dropdowns',
17 |         'login-and-registration',
18 |         'pagination',
19 |       ]}
20 |     >
21 |       <Outlet />
22 |     </Sidebar>
23 |   );
24 | }
25 | 


--------------------------------------------------------------------------------
/app/routes/ecommerce.tsx:
--------------------------------------------------------------------------------
 1 | import { Outlet } from '@remix-run/react';
 2 | import Sidebar from '~/components/sidebar';
 3 | import type { LinksFunction } from '@remix-run/node';
 4 | import ecommerceCss from '~/styles/routes/ecommerce.css';
 5 | 
 6 | export let links: LinksFunction = () => [
 7 |   { rel: 'stylesheet', href: ecommerceCss },
 8 | ];
 9 | 
10 | export default function Marketing() {
11 |   return (
12 |     <Sidebar
13 |       className="rounded-lg bg-violet-50"
14 |       subPages={[
15 |         'category-previews',
16 |         'product-features',
17 |         'product-lists',
18 |         'product-quickviews',
19 |       ]}
20 |     >
21 |       <Outlet />
22 |     </Sidebar>
23 |   );
24 | }
25 | 


--------------------------------------------------------------------------------
/app/components/sidebar.tsx:
--------------------------------------------------------------------------------
 1 | import { Link, useLocation } from '@remix-run/react';
 2 | import { classNames } from '~/utils';
 3 | 
 4 | export interface SidebarProps {
 5 |   className?: string;
 6 |   subPages: string[];
 7 |   children: React.ReactNode;
 8 | }
 9 | 
10 | export default function Sidebar({
11 |   className,
12 |   subPages,
13 |   children,
14 | }: SidebarProps) {
15 |   const { pathname } = useLocation();
16 |   return (
17 |     <div className={classNames('bg-white', className)}>
18 |       <div>
19 |         <section className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
20 |           <section aria-labelledby="products-heading" className="pt-6 pb-24">
21 |             <h2 id="products-heading" className="sr-only">
22 |               Products
23 |             </h2>
24 | 
25 |             <div className="grid grid-cols-1 gap-x-8 gap-y-10 sm:grid-cols-4">
26 |               <div // should this be an aside or nav?
27 |               >
28 |                 <h3 className="sr-only">Categories</h3>
29 |                 <ul className="space-y-4 border-r border-gray-200 pb-6 text-sm font-medium text-gray-900">
30 |                   {subPages.map((to) => (
31 |                     <li key={to}>
32 |                       <Link
33 |                         to={`./${to}`}
34 |                         className={classNames(
35 |                           'capitalize',
36 |                           RegExp(to).test(pathname)
37 |                             ? 'font-bold text-blue-900'
38 |                             : ''
39 |                         )}
40 |                         prefetch="intent"
41 |                       >
42 |                         {to.replace(/-/g, ' ')}
43 |                       </Link>
44 |                     </li>
45 |                   ))}
46 |                 </ul>
47 |               </div>
48 |               <div className="sm:col-span-3">{children}</div>
49 |             </div>
50 |           </section>
51 |         </section>
52 |       </div>
53 |     </div>
54 |   );
55 | }
56 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Tailwind Purge-Per-Route Demo
 2 | 
 3 | This is a demo for creating tailwind stylesheets for routes that purge based on the entire ancestry of the route.
 4 | 
 5 | Feel free to play with the [live demo](https://purge-per-route.vercel.app). To see the CSS splitting per route, open up your Network tab and hover/click on all the links!
 6 | 
 7 | Here is a video that explains what's going on and why it's so cool!
 8 | 
 9 | [![Purge-Per-Route Demo](https://img.youtube.com/vi/hGtdtDVUxIg/0.jpg)](https://www.youtube.com/watch?v=hGtdtDVUxIg)
10 | 
11 | ## How does it work
12 | 
13 | All of the magic is in [scripts/styles.js](./scripts/styles.js)
14 | 
15 | I tried to make the logic as clean as possible, but it's still a solid 500 lines and was built for a demo, so it might not be the most production ready code you've seen.
16 | 
17 | To help orient you around how the logic roughly works, here it is [represented as a statechart](https://stately.ai/registry/editor/105a41c2-1cd9-41a9-a27a-324c71bfb735) (note: the actually logic is not an explicit statechart).
18 | 
19 | ![Statechart for generating stylesheets for a Remix app](docs/styles-logic-statechart.png)
20 | 
21 | ## Getting started
22 | 
23 | - Install dependencies:
24 | 
25 |   ```sh
26 |   npm run install
27 |   ```
28 | 
29 | - Start dev server:
30 | 
31 |   ```sh
32 |   npm run dev
33 |   ```
34 | 
35 | And you should be good to go!
36 | 
37 | ## How this project was developed
38 | 
39 | This project was started with the [Indie Stack](https://github.com/remix-run/indie-stack).
40 | 
41 | A lot of the bits have been removed, such as ƒly, prisma, and mocking and testing
42 | 
43 | To get started with the Indie stack on a separate project, simply run:
44 | 
45 | ```
46 | npx create-remix --template remix-run/indie-stack
47 | ```
48 | 
49 | Additionally, this demo leverages lots of free sample components/views from Tailwind UI: https://tailwindui.com/
50 | 
51 | Tailwind UI is a very cool paid product from Tailwind Labs (the company behind Tailwind CSS). Using Tailwind UI was the quickest way to add a bunch of tailwind classes to demonstrate the power behind the idea in this repository.
52 | 


--------------------------------------------------------------------------------
/app/routes/marketing/banners.tsx:
--------------------------------------------------------------------------------
 1 | /* eslint-disable jsx-a11y/anchor-is-valid */
 2 | import { SpeakerphoneIcon, XIcon } from '@heroicons/react/outline';
 3 | import type { MetaFunction, LinksFunction } from '@remix-run/node';
 4 | 
 5 | import bannersCss from '~/styles/routes/marketing/banners.css';
 6 | 
 7 | export let meta: MetaFunction = () => {
 8 |   return { title: 'Marketing | Banners' };
 9 | };
10 | 
11 | export const links: LinksFunction = () => {
12 |   return [{ rel: 'stylesheet', href: bannersCss }];
13 | };
14 | 
15 | export default function Banners() {
16 |   return (
17 |     <div className="bg-indigo-600">
18 |       <div className="mx-auto max-w-7xl py-3 px-3 sm:px-6 lg:px-8">
19 |         <div className="flex flex-wrap items-center justify-between">
20 |           <div className="flex w-0 flex-1 items-center">
21 |             <span className="flex rounded-lg bg-indigo-800 p-2">
22 |               <SpeakerphoneIcon
23 |                 className="h-6 w-6 text-white"
24 |                 aria-hidden="true"
25 |               />
26 |             </span>
27 |             <p className="ml-3 truncate font-medium text-white">
28 |               <span className="md:hidden">We announced a new product!</span>
29 |               <span className="hidden md:inline">
30 |                 Big news! We're excited to announce a brand new product.
31 |               </span>
32 |             </p>
33 |           </div>
34 |           <div className="order-3 mt-2 w-full flex-shrink-0 sm:order-2 sm:mt-0 sm:w-auto">
35 |             <a
36 |               href="#"
37 |               className="flex items-center justify-center rounded-md border border-transparent bg-white px-4 py-2 text-sm font-medium text-indigo-600 shadow-sm hover:bg-indigo-50"
38 |             >
39 |               Learn more
40 |             </a>
41 |           </div>
42 |           <div className="order-2 flex-shrink-0 sm:order-3 sm:ml-3">
43 |             <button
44 |               type="button"
45 |               className="-mr-1 flex rounded-md p-2 hover:bg-indigo-500 focus:outline-none focus:ring-2 focus:ring-white sm:-mr-2"
46 |             >
47 |               <span className="sr-only">Dismiss</span>
48 |               <XIcon className="h-6 w-6 text-white" aria-hidden="true" />
49 |             </button>
50 |           </div>
51 |         </div>
52 |       </div>
53 |     </div>
54 |   );
55 | }
56 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "purge-per-route-cea0",
 3 |   "private": true,
 4 |   "description": "",
 5 |   "license": "",
 6 |   "sideEffects": false,
 7 |   "scripts": {
 8 |     "postinstall": "remix setup node",
 9 |     "build": "run-s build:*",
10 |     "build:css": "cross-env NODE_ENV=production node scripts/styles.js",
11 |     "build:remix": "remix build",
12 |     "dev": "run-p dev:*",
13 |     "dev:css": "cross-env NODE_ENV=development node scripts/styles.js",
14 |     "dev:remix": "cross-env NODE_ENV=development binode -- @remix-run/dev:remix dev",
15 |     "start": "cross-env NODE_ENV=development npm run build && remix-serve api/",
16 |     "format": "prettier --write .",
17 |     "lint": "eslint --cache --cache-location ./node_modules/.cache/eslint .",
18 |     "typecheck": "tsc -b",
19 |     "validate": "run-p lint typecheck"
20 |   },
21 |   "prettier": {
22 |     "singleQuote": true
23 |   },
24 |   "eslintIgnore": [
25 |     "/node_modules",
26 |     "/public/build",
27 |     "/api/_build"
28 |   ],
29 |   "dependencies": {
30 |     "@headlessui/react": "^1.5.0",
31 |     "@heroicons/react": "^1.0.6",
32 |     "@remix-run/node": "^1.4.1",
33 |     "@remix-run/react": "^1.4.1",
34 |     "@remix-run/serve": "^1.4.1",
35 |     "@remix-run/server-runtime": "^1.4.1",
36 |     "@remix-run/vercel": "^1.4.3",
37 |     "@tailwindcss/aspect-ratio": "^0.4.0",
38 |     "@tailwindcss/forms": "^0.5.0",
39 |     "@vercel/node": "^1.15.2",
40 |     "react": "^17.0.2",
41 |     "react-dom": "^17.0.2"
42 |   },
43 |   "devDependencies": {
44 |     "@remix-run/dev": "^1.4.1",
45 |     "@remix-run/eslint-config": "^1.4.1",
46 |     "@testing-library/dom": "^8.12.0",
47 |     "@testing-library/react": "^12.1.4",
48 |     "@testing-library/user-event": "^14.0.4",
49 |     "@types/eslint": "^8.4.1",
50 |     "@types/node": "^17.0.23",
51 |     "@types/react": "^17.0.43",
52 |     "@types/react-dom": "^17.0.14",
53 |     "autoprefixer": "^10.4.4",
54 |     "binode": "^1.0.5",
55 |     "chokidar": "^3.5.3",
56 |     "cross-env": "^7.0.3",
57 |     "css-tree": "^2.1.0",
58 |     "eslint": "^8.12.0",
59 |     "eslint-config-prettier": "^8.5.0",
60 |     "npm-run-all": "^4.1.5",
61 |     "postcss": "^8.4.12",
62 |     "prettier": "2.6.1",
63 |     "prettier-plugin-tailwindcss": "^0.1.8",
64 |     "purgecss": "^4.1.3",
65 |     "tailwindcss": "^3.0.23",
66 |     "ts-node": "^10.7.0",
67 |     "typescript": "^4.6.3"
68 |   },
69 |   "engines": {
70 |     "node": ">=14"
71 |   }
72 | }
73 | 


--------------------------------------------------------------------------------
/app/routes/ecommerce/product-lists.tsx:
--------------------------------------------------------------------------------
 1 | import type { MetaFunction, LinksFunction } from '@remix-run/node';
 2 | 
 3 | import productListsCss from '~/styles/routes/ecommerce/product-lists.css';
 4 | 
 5 | export let meta: MetaFunction = () => {
 6 |   return { title: 'Ecommerce | Product Lists' };
 7 | };
 8 | 
 9 | export const links: LinksFunction = () => {
10 |   return [{ rel: 'stylesheet', href: productListsCss }];
11 | };
12 | 
13 | const products = [
14 |   {
15 |     id: 1,
16 |     name: 'Earthen Bottle',
17 |     href: '#',
18 |     price: '$48',
19 |     imageSrc:
20 |       'https://tailwindui.com/img/ecommerce-images/category-page-04-image-card-01.jpg',
21 |     imageAlt:
22 |       'Tall slender porcelain bottle with natural clay textured body and cork stopper.',
23 |   },
24 |   {
25 |     id: 2,
26 |     name: 'Nomad Tumbler',
27 |     href: '#',
28 |     price: '$35',
29 |     imageSrc:
30 |       'https://tailwindui.com/img/ecommerce-images/category-page-04-image-card-02.jpg',
31 |     imageAlt:
32 |       'Olive drab green insulated bottle with flared screw lid and flat top.',
33 |   },
34 |   {
35 |     id: 3,
36 |     name: 'Focus Paper Refill',
37 |     href: '#',
38 |     price: '$89',
39 |     imageSrc:
40 |       'https://tailwindui.com/img/ecommerce-images/category-page-04-image-card-03.jpg',
41 |     imageAlt:
42 |       'Person using a pen to cross a task off a productivity paper card.',
43 |   },
44 |   {
45 |     id: 4,
46 |     name: 'Machined Mechanical Pencil',
47 |     href: '#',
48 |     price: '$35',
49 |     imageSrc:
50 |       'https://tailwindui.com/img/ecommerce-images/category-page-04-image-card-04.jpg',
51 |     imageAlt:
52 |       'Hand holding black machined steel mechanical pencil with brass tip and top.',
53 |   },
54 |   // More products...
55 | ];
56 | 
57 | export default function ProductLists() {
58 |   return (
59 |     <div className="bg-white">
60 |       <div className="mx-auto max-w-2xl py-16 px-4 sm:py-24 sm:px-6 lg:max-w-7xl lg:px-8">
61 |         <h2 className="sr-only">Products</h2>
62 | 
63 |         <div className="grid grid-cols-1 gap-y-10 gap-x-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8">
64 |           {products.map((product) => (
65 |             <a key={product.id} href={product.href} className="group">
66 |               <div className="aspect-w-1 aspect-h-1 w-full overflow-hidden rounded-lg bg-gray-200 xl:aspect-w-7 xl:aspect-h-8">
67 |                 <img
68 |                   src={product.imageSrc}
69 |                   alt={product.imageAlt}
70 |                   className="h-full w-full object-cover object-center group-hover:opacity-75"
71 |                 />
72 |               </div>
73 |               <h3 className="mt-4 text-sm text-gray-700">{product.name}</h3>
74 |               <p className="mt-1 text-lg font-medium text-gray-900">
75 |                 {product.price}
76 |               </p>
77 |             </a>
78 |           ))}
79 |         </div>
80 |       </div>
81 |     </div>
82 |   );
83 | }
84 | 


--------------------------------------------------------------------------------
/app/routes/ecommerce/category-previews.tsx:
--------------------------------------------------------------------------------
 1 | import type { MetaFunction, LinksFunction } from '@remix-run/node';
 2 | 
 3 | import categoryPreviewsCss from '~/styles/routes/ecommerce/category-previews.css';
 4 | 
 5 | export let meta: MetaFunction = () => {
 6 |   return { title: 'Ecommerce | Category Previews' };
 7 | };
 8 | 
 9 | export const links: LinksFunction = () => {
10 |   return [{ rel: 'stylesheet', href: categoryPreviewsCss }];
11 | };
12 | 
13 | const callouts = [
14 |   {
15 |     name: 'Desk and Office',
16 |     description: 'Work from home accessories',
17 |     imageSrc:
18 |       'https://tailwindui.com/img/ecommerce-images/home-page-02-edition-01.jpg',
19 |     imageAlt:
20 |       'Desk with leather desk pad, walnut desk organizer, wireless keyboard and mouse, and porcelain mug.',
21 |     href: '#',
22 |   },
23 |   {
24 |     name: 'Self-Improvement',
25 |     description: 'Journals and note-taking',
26 |     imageSrc:
27 |       'https://tailwindui.com/img/ecommerce-images/home-page-02-edition-02.jpg',
28 |     imageAlt:
29 |       'Wood table with porcelain mug, leather journal, brass pen, leather key ring, and a houseplant.',
30 |     href: '#',
31 |   },
32 |   {
33 |     name: 'Travel',
34 |     description: 'Daily commute essentials',
35 |     imageSrc:
36 |       'https://tailwindui.com/img/ecommerce-images/home-page-02-edition-03.jpg',
37 |     imageAlt: 'Collection of four insulated travel bottles on wooden shelf.',
38 |     href: '#',
39 |   },
40 | ];
41 | 
42 | export default function CategoryPreviews() {
43 |   return (
44 |     <div className="bg-gray-100">
45 |       <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
46 |         <div className="mx-auto max-w-2xl py-16 sm:py-24 lg:max-w-none lg:py-32">
47 |           <h2 className="text-2xl font-extrabold text-gray-900">Collections</h2>
48 | 
49 |           <div className="mt-6 space-y-12 lg:grid lg:grid-cols-3 lg:gap-x-6 lg:space-y-0">
50 |             {callouts.map((callout) => (
51 |               <div key={callout.name} className="group relative">
52 |                 <div className="relative h-80 w-full overflow-hidden rounded-lg bg-white group-hover:opacity-75 sm:aspect-w-2 sm:aspect-h-1 sm:h-64 lg:aspect-w-1 lg:aspect-h-1">
53 |                   <img
54 |                     src={callout.imageSrc}
55 |                     alt={callout.imageAlt}
56 |                     className="h-full w-full object-cover object-center"
57 |                   />
58 |                 </div>
59 |                 <h3 className="mt-6 text-sm text-gray-500">
60 |                   <a href={callout.href}>
61 |                     <span className="absolute inset-0" />
62 |                     {callout.name}
63 |                   </a>
64 |                 </h3>
65 |                 <p className="text-base font-semibold text-gray-900">
66 |                   {callout.description}
67 |                 </p>
68 |               </div>
69 |             ))}
70 |           </div>
71 |         </div>
72 |       </div>
73 |     </div>
74 |   );
75 | }
76 | 


--------------------------------------------------------------------------------
/app/routes/marketing/feature-sections.tsx:
--------------------------------------------------------------------------------
 1 | import {
 2 |   AnnotationIcon,
 3 |   GlobeAltIcon,
 4 |   LightningBoltIcon,
 5 |   ScaleIcon,
 6 | } from '@heroicons/react/outline';
 7 | import type { MetaFunction, LinksFunction } from '@remix-run/node';
 8 | 
 9 | import featureSections from '~/styles/routes/marketing/feature-sections.css';
10 | 
11 | export let meta: MetaFunction = () => {
12 |   return { title: 'Marketing | Feature Sections' };
13 | };
14 | 
15 | export const links: LinksFunction = () => {
16 |   return [{ rel: 'stylesheet', href: featureSections }];
17 | };
18 | 
19 | const features = [
20 |   {
21 |     name: 'Competitive exchange rates',
22 |     description:
23 |       'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.',
24 |     icon: GlobeAltIcon,
25 |   },
26 |   {
27 |     name: 'No hidden fees',
28 |     description:
29 |       'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.',
30 |     icon: ScaleIcon,
31 |   },
32 |   {
33 |     name: 'Transfers are instant',
34 |     description:
35 |       'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.',
36 |     icon: LightningBoltIcon,
37 |   },
38 |   {
39 |     name: 'Mobile notifications',
40 |     description:
41 |       'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque, iste dolor cupiditate blanditiis ratione.',
42 |     icon: AnnotationIcon,
43 |   },
44 | ];
45 | 
46 | export default function FeatureSections() {
47 |   return (
48 |     <div className="bg-white py-12">
49 |       <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
50 |         <div className="lg:text-center">
51 |           <h2 className="text-base font-semibold uppercase tracking-wide text-indigo-600">
52 |             Transactions
53 |           </h2>
54 |           <p className="mt-2 text-3xl font-extrabold leading-8 tracking-tight text-gray-900 sm:text-4xl">
55 |             A better way to send money
56 |           </p>
57 |           <p className="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
58 |             Lorem ipsum dolor sit amet consect adipisicing elit. Possimus magnam
59 |             voluptatum cupiditate veritatis in accusamus quisquam.
60 |           </p>
61 |         </div>
62 | 
63 |         <div className="mt-10">
64 |           <dl className="space-y-10 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-10 md:space-y-0">
65 |             {features.map((feature) => (
66 |               <div key={feature.name} className="relative">
67 |                 <dt>
68 |                   <div className="absolute flex h-12 w-12 items-center justify-center rounded-md bg-indigo-500 text-white">
69 |                     <feature.icon className="h-6 w-6" aria-hidden="true" />
70 |                   </div>
71 |                   <p className="ml-16 text-lg font-medium leading-6 text-gray-900">
72 |                     {feature.name}
73 |                   </p>
74 |                 </dt>
75 |                 <dd className="mt-2 ml-16 text-base text-gray-500">
76 |                   {feature.description}
77 |                 </dd>
78 |               </div>
79 |             ))}
80 |           </dl>
81 |         </div>
82 |       </div>
83 |     </div>
84 |   );
85 | }
86 | 


--------------------------------------------------------------------------------
/app/routes/ecommerce/product-features.tsx:
--------------------------------------------------------------------------------
 1 | import type { MetaFunction, LinksFunction } from '@remix-run/node';
 2 | 
 3 | import productFeaturesCss from '~/styles/routes/ecommerce/product-features.css';
 4 | 
 5 | export let meta: MetaFunction = () => {
 6 |   return { title: 'Ecommerce | Product Features' };
 7 | };
 8 | 
 9 | export const links: LinksFunction = () => {
10 |   return [{ rel: 'stylesheet', href: productFeaturesCss }];
11 | };
12 | 
13 | /* This example requires Tailwind CSS v2.0+ */
14 | const features = [
15 |   { name: 'Origin', description: 'Designed by Good Goods, Inc.' },
16 |   {
17 |     name: 'Material',
18 |     description:
19 |       'Solid walnut base with rare earth magnets and powder coated steel card cover',
20 |   },
21 |   { name: 'Dimensions', description: '6.25" x 3.55" x 1.15"' },
22 |   { name: 'Finish', description: 'Hand sanded and finished with natural oil' },
23 |   { name: 'Includes', description: 'Wood card tray and 3 refill packs' },
24 |   {
25 |     name: 'Considerations',
26 |     description:
27 |       'Made from natural materials. Grain and color vary with each item.',
28 |   },
29 | ];
30 | 
31 | export default function ProductFeatures() {
32 |   return (
33 |     <div className="bg-white">
34 |       <div className="mx-auto grid max-w-2xl grid-cols-1 items-center gap-y-16 gap-x-8 px-4 py-4 sm:px-6 lg:max-w-7xl lg:grid-cols-2 lg:px-8">
35 |         <div>
36 |           <h2 className="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl">
37 |             Technical Specifications
38 |           </h2>
39 |           <p className="mt-4 text-gray-500">
40 |             The walnut wood card tray is precision milled to perfectly fit a
41 |             stack of Focus cards. The powder coated steel divider separates
42 |             active cards from new ones, or can be used to archive important task
43 |             lists.
44 |           </p>
45 | 
46 |           <dl className="mt-16 grid grid-cols-1 gap-x-6 gap-y-10 sm:grid-cols-2 sm:gap-y-16 lg:gap-x-8">
47 |             {features.map((feature) => (
48 |               <div key={feature.name} className="border-t border-gray-200 pt-4">
49 |                 <dt className="font-medium text-gray-900">{feature.name}</dt>
50 |                 <dd className="mt-2 text-sm text-gray-500">
51 |                   {feature.description}
52 |                 </dd>
53 |               </div>
54 |             ))}
55 |           </dl>
56 |         </div>
57 |         <div className="grid grid-cols-2 grid-rows-2 gap-4 sm:gap-6 lg:gap-8">
58 |           <img
59 |             src="https://tailwindui.com/img/ecommerce-images/product-feature-03-detail-01.jpg"
60 |             alt="Walnut card tray with white powder coated steel divider and 3 punchout holes."
61 |             className="rounded-lg bg-gray-100"
62 |           />
63 |           <img
64 |             src="https://tailwindui.com/img/ecommerce-images/product-feature-03-detail-02.jpg"
65 |             alt="Top down view of walnut card tray with embedded magnets and card groove."
66 |             className="rounded-lg bg-gray-100"
67 |           />
68 |           <img
69 |             src="https://tailwindui.com/img/ecommerce-images/product-feature-03-detail-03.jpg"
70 |             alt="Side of walnut card tray with card groove and recessed card area."
71 |             className="rounded-lg bg-gray-100"
72 |           />
73 |           <img
74 |             src="https://tailwindui.com/img/ecommerce-images/product-feature-03-detail-04.jpg"
75 |             alt="Walnut card tray filled with cards and card angled in dedicated groove."
76 |             className="rounded-lg bg-gray-100"
77 |           />
78 |         </div>
79 |       </div>
80 |     </div>
81 |   );
82 | }
83 | 


--------------------------------------------------------------------------------
/app/routes/application/pagination.tsx:
--------------------------------------------------------------------------------
  1 | /* eslint-disable jsx-a11y/anchor-is-valid */
  2 | import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/solid';
  3 | import type { MetaFunction, LinksFunction } from '@remix-run/node';
  4 | 
  5 | import paginationCss from '~/styles/routes/application/pagination.css';
  6 | 
  7 | export let meta: MetaFunction = () => {
  8 |   return { title: 'Application | Pagination' };
  9 | };
 10 | 
 11 | export const links: LinksFunction = () => {
 12 |   return [{ rel: 'stylesheet', href: paginationCss }];
 13 | };
 14 | 
 15 | export default function Pagination() {
 16 |   return (
 17 |     <div className="flex items-center justify-between border-t border-gray-200 bg-white px-4 py-3 sm:px-6">
 18 |       <div className="flex flex-1 justify-between sm:hidden">
 19 |         <a
 20 |           href="#"
 21 |           className="relative inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
 22 |         >
 23 |           Previous
 24 |         </a>
 25 |         <a
 26 |           href="#"
 27 |           className="relative ml-3 inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
 28 |         >
 29 |           Next
 30 |         </a>
 31 |       </div>
 32 |       <div className="hidden sm:flex sm:flex-1 sm:items-center sm:justify-between">
 33 |         <div>
 34 |           <p className="text-sm text-gray-700">
 35 |             Showing <span className="font-medium">1</span> to{' '}
 36 |             <span className="font-medium">10</span> of{' '}
 37 |             <span className="font-medium">97</span> results
 38 |           </p>
 39 |         </div>
 40 |         <div>
 41 |           <nav
 42 |             className="relative z-0 inline-flex -space-x-px rounded-md shadow-sm"
 43 |             aria-label="Pagination"
 44 |           >
 45 |             <a
 46 |               href="#"
 47 |               className="relative inline-flex items-center rounded-l-md border border-gray-300 bg-white px-2 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50"
 48 |             >
 49 |               <span className="sr-only">Previous</span>
 50 |               <ChevronLeftIcon className="h-5 w-5" aria-hidden="true" />
 51 |             </a>
 52 |             {/* Current: "z-10 bg-indigo-50 border-indigo-500 text-indigo-600", Default: "bg-white border-gray-300 text-gray-500 hover:bg-gray-50" */}
 53 |             <a
 54 |               href="#"
 55 |               aria-current="page"
 56 |               className="relative z-10 inline-flex items-center border border-indigo-500 bg-indigo-50 px-4 py-2 text-sm font-medium text-indigo-600"
 57 |             >
 58 |               1
 59 |             </a>
 60 |             <a
 61 |               href="#"
 62 |               className="relative inline-flex items-center border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50"
 63 |             >
 64 |               2
 65 |             </a>
 66 |             <a
 67 |               href="#"
 68 |               className="relative hidden items-center border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50 md:inline-flex"
 69 |             >
 70 |               3
 71 |             </a>
 72 |             <span className="relative inline-flex items-center border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700">
 73 |               ...
 74 |             </span>
 75 |             <a
 76 |               href="#"
 77 |               className="relative hidden items-center border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50 md:inline-flex"
 78 |             >
 79 |               8
 80 |             </a>
 81 |             <a
 82 |               href="#"
 83 |               className="relative inline-flex items-center border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50"
 84 |             >
 85 |               9
 86 |             </a>
 87 |             <a
 88 |               href="#"
 89 |               className="relative inline-flex items-center border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50"
 90 |             >
 91 |               10
 92 |             </a>
 93 |             <a
 94 |               href="#"
 95 |               className="relative inline-flex items-center rounded-r-md border border-gray-300 bg-white px-2 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50"
 96 |             >
 97 |               <span className="sr-only">Next</span>
 98 |               <ChevronRightIcon className="h-5 w-5" aria-hidden="true" />
 99 |             </a>
100 |           </nav>
101 |         </div>
102 |       </div>
103 |     </div>
104 |   );
105 | }
106 | 


--------------------------------------------------------------------------------
/app/routes/application/login-and-registration.tsx:
--------------------------------------------------------------------------------
  1 | /* eslint-disable jsx-a11y/anchor-is-valid */
  2 | import { LockClosedIcon } from '@heroicons/react/solid';
  3 | import type { MetaFunction, LinksFunction } from '@remix-run/node';
  4 | import loginAndRegistrationCss from '~/styles/routes/application/login-and-registration.css';
  5 | 
  6 | export let meta: MetaFunction = () => {
  7 |   return { title: 'Application | Login and Registration' };
  8 | };
  9 | 
 10 | export const links: LinksFunction = () => {
 11 |   return [{ rel: 'stylesheet', href: loginAndRegistrationCss }];
 12 | };
 13 | 
 14 | export default function LoginAndRegistration() {
 15 |   return (
 16 |     <>
 17 |       <div className="flex min-h-full items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
 18 |         <div className="w-full max-w-md space-y-8">
 19 |           <div>
 20 |             <img
 21 |               className="mx-auto h-12 w-auto"
 22 |               src="https://tailwindui.com/img/logos/workflow-mark-indigo-600.svg"
 23 |               alt="Workflow"
 24 |             />
 25 |             <h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">
 26 |               Sign in to your account
 27 |             </h2>
 28 |             <p className="mt-2 text-center text-sm text-gray-600">
 29 |               Or{' '}
 30 |               <a
 31 |                 href="#"
 32 |                 className="font-medium text-indigo-600 hover:text-indigo-500"
 33 |               >
 34 |                 start your 14-day free trial
 35 |               </a>
 36 |             </p>
 37 |           </div>
 38 |           <form className="mt-8 space-y-6" action="#" method="POST">
 39 |             <input type="hidden" name="remember" defaultValue="true" />
 40 |             <div className="-space-y-px rounded-md shadow-sm">
 41 |               <div>
 42 |                 <label htmlFor="email-address" className="sr-only">
 43 |                   Email address
 44 |                 </label>
 45 |                 <input
 46 |                   id="email-address"
 47 |                   name="email"
 48 |                   type="email"
 49 |                   autoComplete="email"
 50 |                   required
 51 |                   className="relative block w-full appearance-none rounded-none rounded-t-md border border-gray-300 px-3 py-2 text-gray-900 placeholder-gray-500 focus:z-10 focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm"
 52 |                   placeholder="Email address"
 53 |                 />
 54 |               </div>
 55 |               <div>
 56 |                 <label htmlFor="password" className="sr-only">
 57 |                   Password
 58 |                 </label>
 59 |                 <input
 60 |                   id="password"
 61 |                   name="password"
 62 |                   type="password"
 63 |                   autoComplete="current-password"
 64 |                   required
 65 |                   className="relative block w-full appearance-none rounded-none rounded-b-md border border-gray-300 px-3 py-2 text-gray-900 placeholder-gray-500 focus:z-10 focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm"
 66 |                   placeholder="Password"
 67 |                 />
 68 |               </div>
 69 |             </div>
 70 | 
 71 |             <div className="flex items-center justify-between">
 72 |               <div className="flex items-center">
 73 |                 <input
 74 |                   id="remember-me"
 75 |                   name="remember-me"
 76 |                   type="checkbox"
 77 |                   className="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
 78 |                 />
 79 |                 <label
 80 |                   htmlFor="remember-me"
 81 |                   className="ml-2 block text-sm text-gray-900"
 82 |                 >
 83 |                   Remember me
 84 |                 </label>
 85 |               </div>
 86 | 
 87 |               <div className="text-sm">
 88 |                 <a
 89 |                   href="#"
 90 |                   className="font-medium text-indigo-600 hover:text-indigo-500"
 91 |                 >
 92 |                   Forgot your password?
 93 |                 </a>
 94 |               </div>
 95 |             </div>
 96 | 
 97 |             <div>
 98 |               <button
 99 |                 type="submit"
100 |                 className="group relative flex w-full justify-center rounded-md border border-transparent bg-indigo-600 py-2 px-4 text-sm font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
101 |               >
102 |                 <span className="absolute inset-y-0 left-0 flex items-center pl-3">
103 |                   <LockClosedIcon
104 |                     className="h-5 w-5 text-indigo-500 group-hover:text-indigo-400"
105 |                     aria-hidden="true"
106 |                   />
107 |                 </span>
108 |                 Sign in
109 |               </button>
110 |             </div>
111 |           </form>
112 |         </div>
113 |       </div>
114 |     </>
115 |   );
116 | }
117 | 


--------------------------------------------------------------------------------
/app/routes/application/description-lists.tsx:
--------------------------------------------------------------------------------
  1 | /* eslint-disable jsx-a11y/anchor-is-valid */
  2 | import { PaperClipIcon } from '@heroicons/react/solid';
  3 | import type { MetaFunction, LinksFunction } from '@remix-run/node';
  4 | 
  5 | import descriptionListsCss from '~/styles/routes/application/description-lists.css';
  6 | 
  7 | export let meta: MetaFunction = () => {
  8 |   return { title: 'Application | Description Lists' };
  9 | };
 10 | 
 11 | export const links: LinksFunction = () => {
 12 |   return [{ rel: 'stylesheet', href: descriptionListsCss }];
 13 | };
 14 | 
 15 | export default function DescriptionLists() {
 16 |   return (
 17 |     <div className="overflow-hidden bg-white shadow sm:rounded-lg">
 18 |       <div className="px-4 py-5 sm:px-6">
 19 |         <h3 className="text-lg font-medium leading-6 text-gray-900">
 20 |           Applicant Information
 21 |         </h3>
 22 |         <p className="mt-1 max-w-2xl text-sm text-gray-500">
 23 |           Personal details and application.
 24 |         </p>
 25 |       </div>
 26 |       <div className="border-t border-gray-200">
 27 |         <dl>
 28 |           <div className="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
 29 |             <dt className="text-sm font-medium text-gray-500">Full name</dt>
 30 |             <dd className="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
 31 |               Margot Foster
 32 |             </dd>
 33 |           </div>
 34 |           <div className="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
 35 |             <dt className="text-sm font-medium text-gray-500">
 36 |               Application for
 37 |             </dt>
 38 |             <dd className="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
 39 |               Backend Developer
 40 |             </dd>
 41 |           </div>
 42 |           <div className="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
 43 |             <dt className="text-sm font-medium text-gray-500">Email address</dt>
 44 |             <dd className="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
 45 |               margotfoster@example.com
 46 |             </dd>
 47 |           </div>
 48 |           <div className="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
 49 |             <dt className="text-sm font-medium text-gray-500">
 50 |               Salary expectation
 51 |             </dt>
 52 |             <dd className="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
 53 |               $120,000
 54 |             </dd>
 55 |           </div>
 56 |           <div className="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
 57 |             <dt className="text-sm font-medium text-gray-500">About</dt>
 58 |             <dd className="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
 59 |               Fugiat ipsum ipsum deserunt culpa aute sint do nostrud anim
 60 |               incididunt cillum culpa consequat. Excepteur qui ipsum aliquip
 61 |               consequat sint. Sit id mollit nulla mollit nostrud in ea officia
 62 |               proident. Irure nostrud pariatur mollit ad adipisicing
 63 |               reprehenderit deserunt qui eu.
 64 |             </dd>
 65 |           </div>
 66 |           <div className="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
 67 |             <dt className="text-sm font-medium text-gray-500">Attachments</dt>
 68 |             <dd className="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
 69 |               <ul className="divide-y divide-gray-200 rounded-md border border-gray-200">
 70 |                 <li className="flex items-center justify-between py-3 pl-3 pr-4 text-sm">
 71 |                   <div className="flex w-0 flex-1 items-center">
 72 |                     <PaperClipIcon
 73 |                       className="h-5 w-5 flex-shrink-0 text-gray-400"
 74 |                       aria-hidden="true"
 75 |                     />
 76 |                     <span className="ml-2 w-0 flex-1 truncate">
 77 |                       resume_back_end_developer.pdf
 78 |                     </span>
 79 |                   </div>
 80 |                   <div className="ml-4 flex-shrink-0">
 81 |                     <a
 82 |                       href="#"
 83 |                       className="font-medium text-indigo-600 hover:text-indigo-500"
 84 |                     >
 85 |                       Download
 86 |                     </a>
 87 |                   </div>
 88 |                 </li>
 89 |                 <li className="flex items-center justify-between py-3 pl-3 pr-4 text-sm">
 90 |                   <div className="flex w-0 flex-1 items-center">
 91 |                     <PaperClipIcon
 92 |                       className="h-5 w-5 flex-shrink-0 text-gray-400"
 93 |                       aria-hidden="true"
 94 |                     />
 95 |                     <span className="ml-2 w-0 flex-1 truncate">
 96 |                       coverletter_back_end_developer.pdf
 97 |                     </span>
 98 |                   </div>
 99 |                   <div className="ml-4 flex-shrink-0">
100 |                     <a
101 |                       href="#"
102 |                       className="font-medium text-indigo-600 hover:text-indigo-500"
103 |                     >
104 |                       Download
105 |                     </a>
106 |                   </div>
107 |                 </li>
108 |               </ul>
109 |             </dd>
110 |           </div>
111 |         </dl>
112 |       </div>
113 |     </div>
114 |   );
115 | }
116 | 


--------------------------------------------------------------------------------
/app/routes/marketing/hero-sections.tsx:
--------------------------------------------------------------------------------
  1 | /* eslint-disable jsx-a11y/anchor-is-valid */
  2 | import { Fragment } from 'react';
  3 | import { Popover, Transition } from '@headlessui/react';
  4 | import { MenuIcon, XIcon } from '@heroicons/react/outline';
  5 | import type { MetaFunction, LinksFunction } from '@remix-run/node';
  6 | 
  7 | import hearoSectionsCss from '~/styles/routes/marketing/hero-sections.css';
  8 | 
  9 | export let meta: MetaFunction = () => {
 10 |   return { title: 'Marketing | Hero Sections' };
 11 | };
 12 | 
 13 | export const links: LinksFunction = () => {
 14 |   return [{ rel: 'stylesheet', href: hearoSectionsCss }];
 15 | };
 16 | 
 17 | const navigation = [
 18 |   { name: 'Product', href: '#' },
 19 |   { name: 'Features', href: '#' },
 20 |   { name: 'Marketplace', href: '#' },
 21 |   { name: 'Company', href: '#' },
 22 | ];
 23 | 
 24 | export default function HeroSections() {
 25 |   return (
 26 |     <div className="relative overflow-hidden bg-white">
 27 |       <div className="mx-auto max-w-7xl">
 28 |         <div className="relative z-10 bg-white pb-8 sm:pb-16 md:pb-20 lg:w-full lg:max-w-2xl lg:pb-28 xl:pb-32">
 29 |           <svg
 30 |             className="absolute inset-y-0 right-0 hidden h-full w-48 translate-x-1/2 transform text-white lg:block"
 31 |             fill="currentColor"
 32 |             viewBox="0 0 100 100"
 33 |             preserveAspectRatio="none"
 34 |             aria-hidden="true"
 35 |           >
 36 |             <polygon points="50,0 100,0 50,100 0,100" />
 37 |           </svg>
 38 | 
 39 |           <Popover>
 40 |             <div className="relative px-4 pt-6 sm:px-6 lg:px-8">
 41 |               <nav
 42 |                 className="relative flex items-center justify-between sm:h-10 lg:justify-start"
 43 |                 aria-label="Global"
 44 |               >
 45 |                 <div className="flex flex-shrink-0 flex-grow items-center lg:flex-grow-0">
 46 |                   <div className="flex w-full items-center justify-between md:w-auto">
 47 |                     <a href="#">
 48 |                       <span className="sr-only">Workflow</span>
 49 |                       <img
 50 |                         className="h-8 w-auto sm:h-10"
 51 |                         src="https://tailwindui.com/img/logos/workflow-mark-indigo-600.svg"
 52 |                         alt=""
 53 |                       />
 54 |                     </a>
 55 |                     <div className="-mr-2 flex items-center md:hidden">
 56 |                       <Popover.Button className="inline-flex items-center justify-center rounded-md bg-white p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
 57 |                         <span className="sr-only">Open main menu</span>
 58 |                         <MenuIcon className="h-6 w-6" aria-hidden="true" />
 59 |                       </Popover.Button>
 60 |                     </div>
 61 |                   </div>
 62 |                 </div>
 63 |                 <div className="hidden md:ml-10 md:block md:space-x-8 md:pr-4">
 64 |                   {navigation.map((item) => (
 65 |                     <a
 66 |                       key={item.name}
 67 |                       href={item.href}
 68 |                       className="font-medium text-gray-500 hover:text-gray-900"
 69 |                     >
 70 |                       {item.name}
 71 |                     </a>
 72 |                   ))}
 73 |                   <a
 74 |                     href="#"
 75 |                     className="font-medium text-indigo-600 hover:text-indigo-500"
 76 |                   >
 77 |                     Log in
 78 |                   </a>
 79 |                 </div>
 80 |               </nav>
 81 |             </div>
 82 | 
 83 |             <Transition
 84 |               as={Fragment}
 85 |               enter="duration-150 ease-out"
 86 |               enterFrom="opacity-0 scale-95"
 87 |               enterTo="opacity-100 scale-100"
 88 |               leave="duration-100 ease-in"
 89 |               leaveFrom="opacity-100 scale-100"
 90 |               leaveTo="opacity-0 scale-95"
 91 |             >
 92 |               <Popover.Panel
 93 |                 focus
 94 |                 className="absolute inset-x-0 top-0 z-10 origin-top-right transform p-2 transition md:hidden"
 95 |               >
 96 |                 <div className="overflow-hidden rounded-lg bg-white shadow-md ring-1 ring-black ring-opacity-5">
 97 |                   <div className="flex items-center justify-between px-5 pt-4">
 98 |                     <div>
 99 |                       <img
100 |                         className="h-8 w-auto"
101 |                         src="https://tailwindui.com/img/logos/workflow-mark-indigo-600.svg"
102 |                         alt=""
103 |                       />
104 |                     </div>
105 |                     <div className="-mr-2">
106 |                       <Popover.Button className="inline-flex items-center justify-center rounded-md bg-white p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
107 |                         <span className="sr-only">Close main menu</span>
108 |                         <XIcon className="h-6 w-6" aria-hidden="true" />
109 |                       </Popover.Button>
110 |                     </div>
111 |                   </div>
112 |                   <div className="space-y-1 px-2 pt-2 pb-3">
113 |                     {navigation.map((item) => (
114 |                       <a
115 |                         key={item.name}
116 |                         href={item.href}
117 |                         className="block rounded-md px-3 py-2 text-base font-medium text-gray-700 hover:bg-gray-50 hover:text-gray-900"
118 |                       >
119 |                         {item.name}
120 |                       </a>
121 |                     ))}
122 |                   </div>
123 |                   <a
124 |                     href="#"
125 |                     className="block w-full bg-gray-50 px-5 py-3 text-center font-medium text-indigo-600 hover:bg-gray-100"
126 |                   >
127 |                     Log in
128 |                   </a>
129 |                 </div>
130 |               </Popover.Panel>
131 |             </Transition>
132 |           </Popover>
133 | 
134 |           <main className="mx-auto mt-10 max-w-7xl px-4 sm:mt-12 sm:px-6 md:mt-16 lg:mt-20 lg:px-8 xl:mt-28">
135 |             <div className="sm:text-center lg:text-left">
136 |               <h1 className="text-4xl font-extrabold tracking-tight text-gray-900 sm:text-5xl md:text-6xl">
137 |                 <span className="block xl:inline">Data to enrich your</span>{' '}
138 |                 <span className="block text-indigo-600 xl:inline">
139 |                   online business
140 |                 </span>
141 |               </h1>
142 |               <p className="mt-3 text-base text-gray-500 sm:mx-auto sm:mt-5 sm:max-w-xl sm:text-lg md:mt-5 md:text-xl lg:mx-0">
143 |                 Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui
144 |                 lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat
145 |                 fugiat aliqua.
146 |               </p>
147 |               <div className="mt-5 sm:mt-8 sm:flex sm:justify-center lg:justify-start">
148 |                 <div className="rounded-md shadow">
149 |                   <a
150 |                     href="#"
151 |                     className="flex w-full items-center justify-center rounded-md border border-transparent bg-indigo-600 px-8 py-3 text-base font-medium text-white hover:bg-indigo-700 md:py-4 md:px-10 md:text-lg"
152 |                   >
153 |                     Get started
154 |                   </a>
155 |                 </div>
156 |                 <div className="mt-3 sm:mt-0 sm:ml-3">
157 |                   <a
158 |                     href="#"
159 |                     className="flex w-full items-center justify-center rounded-md border border-transparent bg-indigo-100 px-8 py-3 text-base font-medium text-indigo-700 hover:bg-indigo-200 md:py-4 md:px-10 md:text-lg"
160 |                   >
161 |                     Live demo
162 |                   </a>
163 |                 </div>
164 |               </div>
165 |             </div>
166 |           </main>
167 |         </div>
168 |       </div>
169 |       <div className="lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2">
170 |         <img
171 |           className="h-56 w-full object-cover sm:h-72 md:h-96 lg:h-full lg:w-full"
172 |           src="https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2850&q=80"
173 |           alt=""
174 |         />
175 |       </div>
176 |     </div>
177 |   );
178 | }
179 | 


--------------------------------------------------------------------------------
/app/routes/application/dropdowns.tsx:
--------------------------------------------------------------------------------
  1 | /* eslint-disable jsx-a11y/anchor-is-valid */
  2 | import { Fragment } from 'react';
  3 | import { Menu, Transition } from '@headlessui/react';
  4 | import { ChevronDownIcon } from '@heroicons/react/solid';
  5 | import type { MetaFunction, LinksFunction } from '@remix-run/node';
  6 | import { classNames } from '~/utils';
  7 | 
  8 | import dropdowns from '~/styles/routes/application/dropdowns.css';
  9 | 
 10 | export let meta: MetaFunction = () => {
 11 |   return { title: 'Application | Dropdowns' };
 12 | };
 13 | 
 14 | export const links: LinksFunction = () => {
 15 |   return [{ rel: 'stylesheet', href: dropdowns }];
 16 | };
 17 | 
 18 | export default function Dropdowns() {
 19 |   return (
 20 |     <div className="flex justify-around">
 21 |       <Menu as="div" className="relative inline-block text-left">
 22 |         <div>
 23 |           <Menu.Button className="inline-flex w-full justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-gray-100">
 24 |             Options
 25 |             <ChevronDownIcon
 26 |               className="-mr-1 ml-2 h-5 w-5"
 27 |               aria-hidden="true"
 28 |             />
 29 |           </Menu.Button>
 30 |         </div>
 31 | 
 32 |         <Transition
 33 |           as={Fragment}
 34 |           enter="transition ease-out duration-100"
 35 |           enterFrom="transform opacity-0 scale-95"
 36 |           enterTo="transform opacity-100 scale-100"
 37 |           leave="transition ease-in duration-75"
 38 |           leaveFrom="transform opacity-100 scale-100"
 39 |           leaveTo="transform opacity-0 scale-95"
 40 |         >
 41 |           <Menu.Items className="absolute right-0 mt-2 w-56 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
 42 |             <div className="py-1">
 43 |               <Menu.Item>
 44 |                 {({ active }) => (
 45 |                   <a
 46 |                     href="#"
 47 |                     className={classNames(
 48 |                       active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
 49 |                       'block px-4 py-2 text-sm'
 50 |                     )}
 51 |                   >
 52 |                     Account settings
 53 |                   </a>
 54 |                 )}
 55 |               </Menu.Item>
 56 |               <Menu.Item>
 57 |                 {({ active }) => (
 58 |                   <a
 59 |                     href="#"
 60 |                     className={classNames(
 61 |                       active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
 62 |                       'block px-4 py-2 text-sm'
 63 |                     )}
 64 |                   >
 65 |                     Support
 66 |                   </a>
 67 |                 )}
 68 |               </Menu.Item>
 69 |               <Menu.Item>
 70 |                 {({ active }) => (
 71 |                   <a
 72 |                     href="#"
 73 |                     className={classNames(
 74 |                       active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
 75 |                       'block px-4 py-2 text-sm'
 76 |                     )}
 77 |                   >
 78 |                     License
 79 |                   </a>
 80 |                 )}
 81 |               </Menu.Item>
 82 |               <form method="POST" action="#">
 83 |                 <Menu.Item>
 84 |                   {({ active }) => (
 85 |                     <button
 86 |                       type="submit"
 87 |                       className={classNames(
 88 |                         active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
 89 |                         'block w-full px-4 py-2 text-left text-sm'
 90 |                       )}
 91 |                     >
 92 |                       Sign out
 93 |                     </button>
 94 |                   )}
 95 |                 </Menu.Item>
 96 |               </form>
 97 |             </div>
 98 |           </Menu.Items>
 99 |         </Transition>
100 |       </Menu>
101 | 
102 |       <Menu as="div" className="relative inline-block text-left">
103 |         <div>
104 |           <Menu.Button className="inline-flex w-full justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-gray-100">
105 |             Options
106 |             <ChevronDownIcon
107 |               className="-mr-1 ml-2 h-5 w-5"
108 |               aria-hidden="true"
109 |             />
110 |           </Menu.Button>
111 |         </div>
112 | 
113 |         <Transition
114 |           as={Fragment}
115 |           enter="transition ease-out duration-100"
116 |           enterFrom="transform opacity-0 scale-95"
117 |           enterTo="transform opacity-100 scale-100"
118 |           leave="transition ease-in duration-75"
119 |           leaveFrom="transform opacity-100 scale-100"
120 |           leaveTo="transform opacity-0 scale-95"
121 |         >
122 |           <Menu.Items className="absolute right-0 mt-2 w-56 origin-top-right divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
123 |             <div className="py-1">
124 |               <Menu.Item>
125 |                 {({ active }) => (
126 |                   <a
127 |                     href="#"
128 |                     className={classNames(
129 |                       active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
130 |                       'block px-4 py-2 text-sm'
131 |                     )}
132 |                   >
133 |                     Edit
134 |                   </a>
135 |                 )}
136 |               </Menu.Item>
137 |               <Menu.Item>
138 |                 {({ active }) => (
139 |                   <a
140 |                     href="#"
141 |                     className={classNames(
142 |                       active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
143 |                       'block px-4 py-2 text-sm'
144 |                     )}
145 |                   >
146 |                     Duplicate
147 |                   </a>
148 |                 )}
149 |               </Menu.Item>
150 |             </div>
151 |             <div className="py-1">
152 |               <Menu.Item>
153 |                 {({ active }) => (
154 |                   <a
155 |                     href="#"
156 |                     className={classNames(
157 |                       active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
158 |                       'block px-4 py-2 text-sm'
159 |                     )}
160 |                   >
161 |                     Archive
162 |                   </a>
163 |                 )}
164 |               </Menu.Item>
165 |               <Menu.Item>
166 |                 {({ active }) => (
167 |                   <a
168 |                     href="#"
169 |                     className={classNames(
170 |                       active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
171 |                       'block px-4 py-2 text-sm'
172 |                     )}
173 |                   >
174 |                     Move
175 |                   </a>
176 |                 )}
177 |               </Menu.Item>
178 |             </div>
179 |             <div className="py-1">
180 |               <Menu.Item>
181 |                 {({ active }) => (
182 |                   <a
183 |                     href="#"
184 |                     className={classNames(
185 |                       active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
186 |                       'block px-4 py-2 text-sm'
187 |                     )}
188 |                   >
189 |                     Share
190 |                   </a>
191 |                 )}
192 |               </Menu.Item>
193 |               <Menu.Item>
194 |                 {({ active }) => (
195 |                   <a
196 |                     href="#"
197 |                     className={classNames(
198 |                       active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
199 |                       'block px-4 py-2 text-sm'
200 |                     )}
201 |                   >
202 |                     Add to favorites
203 |                   </a>
204 |                 )}
205 |               </Menu.Item>
206 |             </div>
207 |             <div className="py-1">
208 |               <Menu.Item>
209 |                 {({ active }) => (
210 |                   <a
211 |                     href="#"
212 |                     className={classNames(
213 |                       active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
214 |                       'block px-4 py-2 text-sm'
215 |                     )}
216 |                   >
217 |                     Delete
218 |                   </a>
219 |                 )}
220 |               </Menu.Item>
221 |             </div>
222 |           </Menu.Items>
223 |         </Transition>
224 |       </Menu>
225 |     </div>
226 |   );
227 | }
228 | 


--------------------------------------------------------------------------------
/app/root.tsx:
--------------------------------------------------------------------------------
  1 | import type { LinksFunction, MetaFunction } from '@remix-run/node';
  2 | import {
  3 |   Link,
  4 |   Links,
  5 |   LiveReload,
  6 |   Meta,
  7 |   Outlet,
  8 |   Scripts,
  9 |   ScrollRestoration,
 10 |   useLocation,
 11 | } from '@remix-run/react';
 12 | 
 13 | import { Fragment } from 'react';
 14 | import { Disclosure, Menu, Transition } from '@headlessui/react';
 15 | import { BellIcon, MenuIcon, XIcon } from '@heroicons/react/outline';
 16 | 
 17 | import tailwindStylesheetUrl from '~/styles/root.css';
 18 | import { classNames } from '~/utils';
 19 | 
 20 | export const links: LinksFunction = () => {
 21 |   return [
 22 |     { rel: 'stylesheet', href: 'https://rsms.me/inter/inter.css' },
 23 |     { rel: 'stylesheet', href: tailwindStylesheetUrl },
 24 |   ];
 25 | };
 26 | 
 27 | export const meta: MetaFunction = () => ({
 28 |   charset: 'utf-8',
 29 |   title: 'Purge Per Route',
 30 |   viewport: 'width=device-width,initial-scale=1',
 31 | });
 32 | 
 33 | const user = {
 34 |   name: 'Tom Cook',
 35 |   email: 'tom@example.com',
 36 |   imageUrl:
 37 |     'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
 38 | };
 39 | const userNavigation = [
 40 |   { name: 'Your Profile', href: '#' },
 41 |   { name: 'Settings', href: '#' },
 42 |   { name: 'Sign out', href: '#' },
 43 | ];
 44 | 
 45 | export default function App() {
 46 |   const { pathname } = useLocation();
 47 | 
 48 |   const navigation = ['application', 'marketing', 'ecommerce'].map((route) => {
 49 |     const href = `/${route}`;
 50 |     const regex = RegExp(route);
 51 |     return {
 52 |       name: route,
 53 |       href,
 54 |       current: regex.test(pathname),
 55 |     };
 56 |   });
 57 | 
 58 |   const title = `${navigation.find((current) => current)?.name} examples`;
 59 | 
 60 |   return (
 61 |     <html lang="en" className="h-full">
 62 |       <head>
 63 |         <Meta />
 64 |         <Links />
 65 |       </head>
 66 |       <body className="h-full">
 67 |         <>
 68 |           <div className="min-h-full">
 69 |             <Disclosure as="nav" className="bg-gray-800">
 70 |               {({ open }) => (
 71 |                 <>
 72 |                   <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
 73 |                     <div className="flex h-16 items-center justify-between">
 74 |                       <div className="flex items-center">
 75 |                         <div className="flex-shrink-0">
 76 |                           <img
 77 |                             className="h-8 w-8"
 78 |                             src="https://tailwindui.com/img/logos/workflow-mark-indigo-500.svg"
 79 |                             alt="Workflow"
 80 |                           />
 81 |                         </div>
 82 |                         <div className="hidden md:block">
 83 |                           <div className="ml-10 flex items-baseline space-x-4">
 84 |                             {navigation.map((item) => (
 85 |                               <Link
 86 |                                 key={item.name}
 87 |                                 to={item.href}
 88 |                                 className={classNames(
 89 |                                   item.current
 90 |                                     ? 'bg-gray-900 text-white'
 91 |                                     : 'text-gray-300 hover:bg-gray-700 hover:text-white',
 92 |                                   'rounded-md px-3 py-2 text-sm font-medium capitalize'
 93 |                                 )}
 94 |                                 aria-current={item.current ? 'page' : undefined}
 95 |                               >
 96 |                                 {item.name}
 97 |                               </Link>
 98 |                             ))}
 99 |                           </div>
100 |                         </div>
101 |                       </div>
102 |                       <div className="hidden md:block">
103 |                         <div className="ml-4 flex items-center md:ml-6">
104 |                           <button
105 |                             type="button"
106 |                             className="rounded-full bg-gray-800 p-1 text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800"
107 |                           >
108 |                             <span className="sr-only">View notifications</span>
109 |                             <BellIcon className="h-6 w-6" aria-hidden="true" />
110 |                           </button>
111 | 
112 |                           {/* Profile dropdown */}
113 |                           <Menu as="div" className="relative ml-3">
114 |                             <div>
115 |                               <Menu.Button className="flex max-w-xs items-center rounded-full bg-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800">
116 |                                 <span className="sr-only">Open user menu</span>
117 |                                 <img
118 |                                   className="h-8 w-8 rounded-full"
119 |                                   src={user.imageUrl}
120 |                                   alt=""
121 |                                 />
122 |                               </Menu.Button>
123 |                             </div>
124 |                             <Transition
125 |                               as={Fragment}
126 |                               enter="transition ease-out duration-100"
127 |                               enterFrom="transform opacity-0 scale-95"
128 |                               enterTo="transform opacity-100 scale-100"
129 |                               leave="transition ease-in duration-75"
130 |                               leaveFrom="transform opacity-100 scale-100"
131 |                               leaveTo="transform opacity-0 scale-95"
132 |                             >
133 |                               <Menu.Items className="absolute right-0 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
134 |                                 {userNavigation.map((item) => (
135 |                                   <Menu.Item key={item.name}>
136 |                                     {({ active }) => (
137 |                                       <a
138 |                                         href={item.href}
139 |                                         className={classNames(
140 |                                           active ? 'bg-gray-100' : '',
141 |                                           'block px-4 py-2 text-sm text-gray-700'
142 |                                         )}
143 |                                       >
144 |                                         {item.name}
145 |                                       </a>
146 |                                     )}
147 |                                   </Menu.Item>
148 |                                 ))}
149 |                               </Menu.Items>
150 |                             </Transition>
151 |                           </Menu>
152 |                         </div>
153 |                       </div>
154 |                       <div className="-mr-2 flex md:hidden">
155 |                         {/* Mobile menu button */}
156 |                         <Disclosure.Button className="inline-flex items-center justify-center rounded-md bg-gray-800 p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800">
157 |                           <span className="sr-only">Open main menu</span>
158 |                           {open ? (
159 |                             <XIcon
160 |                               className="block h-6 w-6"
161 |                               aria-hidden="true"
162 |                             />
163 |                           ) : (
164 |                             <MenuIcon
165 |                               className="block h-6 w-6"
166 |                               aria-hidden="true"
167 |                             />
168 |                           )}
169 |                         </Disclosure.Button>
170 |                       </div>
171 |                     </div>
172 |                   </div>
173 | 
174 |                   <Disclosure.Panel className="md:hidden">
175 |                     <div className="space-y-1 px-2 pt-2 pb-3 sm:px-3">
176 |                       {navigation.map((item) => (
177 |                         <Disclosure.Button
178 |                           key={item.name}
179 |                           as="a"
180 |                           href={item.href}
181 |                           className={classNames(
182 |                             item.current
183 |                               ? 'bg-gray-900 text-white'
184 |                               : 'text-gray-300 hover:bg-gray-700 hover:text-white',
185 |                             'block rounded-md px-3 py-2 text-base font-medium'
186 |                           )}
187 |                           aria-current={item.current ? 'page' : undefined}
188 |                         >
189 |                           {item.name}
190 |                         </Disclosure.Button>
191 |                       ))}
192 |                     </div>
193 |                     <div className="border-t border-gray-700 pt-4 pb-3">
194 |                       <div className="flex items-center px-5">
195 |                         <div className="flex-shrink-0">
196 |                           <img
197 |                             className="h-10 w-10 rounded-full"
198 |                             src={user.imageUrl}
199 |                             alt=""
200 |                           />
201 |                         </div>
202 |                         <div className="ml-3">
203 |                           <div className="text-base font-medium leading-none text-white">
204 |                             {user.name}
205 |                           </div>
206 |                           <div className="text-sm font-medium leading-none text-gray-400">
207 |                             {user.email}
208 |                           </div>
209 |                         </div>
210 |                         <button
211 |                           type="button"
212 |                           className="ml-auto flex-shrink-0 rounded-full bg-gray-800 p-1 text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800"
213 |                         >
214 |                           <span className="sr-only">View notifications</span>
215 |                           <BellIcon className="h-6 w-6" aria-hidden="true" />
216 |                         </button>
217 |                       </div>
218 |                       <div className="mt-3 space-y-1 px-2">
219 |                         {userNavigation.map((item) => (
220 |                           <Disclosure.Button
221 |                             key={item.name}
222 |                             as="a"
223 |                             href={item.href}
224 |                             className="block rounded-md px-3 py-2 text-base font-medium text-gray-400 hover:bg-gray-700 hover:text-white"
225 |                           >
226 |                             {item.name}
227 |                           </Disclosure.Button>
228 |                         ))}
229 |                       </div>
230 |                     </div>
231 |                   </Disclosure.Panel>
232 |                 </>
233 |               )}
234 |             </Disclosure>
235 | 
236 |             <header className="bg-white shadow">
237 |               <div className="mx-auto max-w-7xl py-6 px-4 sm:px-6 lg:px-8">
238 |                 <h1 className="text-3xl font-bold capitalize text-gray-900">
239 |                   {title}
240 |                 </h1>
241 |               </div>
242 |             </header>
243 |             <main>
244 |               <div className="mx-auto max-w-7xl py-6 sm:px-6 lg:px-8">
245 |                 <Outlet />
246 |               </div>
247 |             </main>
248 |           </div>
249 |         </>
250 |         <ScrollRestoration />
251 |         <Scripts />
252 |         <LiveReload />
253 |       </body>
254 |     </html>
255 |   );
256 | }
257 | 


--------------------------------------------------------------------------------
/app/routes/ecommerce/product-quickviews.tsx:
--------------------------------------------------------------------------------
  1 | /* eslint-disable jsx-a11y/anchor-is-valid */
  2 | import { Fragment, useState } from 'react';
  3 | import { Dialog, RadioGroup, Transition } from '@headlessui/react';
  4 | import { XIcon } from '@heroicons/react/outline';
  5 | import { StarIcon } from '@heroicons/react/solid';
  6 | import { classNames } from '~/utils';
  7 | import type { MetaFunction, LinksFunction } from '@remix-run/node';
  8 | 
  9 | import productQuickviews from '~/styles/routes/ecommerce/product-quickviews.css';
 10 | 
 11 | export let meta: MetaFunction = () => {
 12 |   return { title: 'Ecommerce | Product Quickviews' };
 13 | };
 14 | 
 15 | export const links: LinksFunction = () => {
 16 |   return [{ rel: 'stylesheet', href: productQuickviews }];
 17 | };
 18 | 
 19 | const product = {
 20 |   name: 'Basic Tee 6-Pack ',
 21 |   price: '$192',
 22 |   rating: 3.9,
 23 |   reviewCount: 117,
 24 |   href: '#',
 25 |   imageSrc:
 26 |     'https://tailwindui.com/img/ecommerce-images/product-quick-preview-02-detail.jpg',
 27 |   imageAlt: 'Two each of gray, white, and black shirts arranged on table.',
 28 |   colors: [
 29 |     { name: 'White', class: 'bg-white', selectedClass: 'ring-gray-400' },
 30 |     { name: 'Gray', class: 'bg-gray-200', selectedClass: 'ring-gray-400' },
 31 |     { name: 'Black', class: 'bg-gray-900', selectedClass: 'ring-gray-900' },
 32 |   ],
 33 |   sizes: [
 34 |     { name: 'XXS', inStock: true },
 35 |     { name: 'XS', inStock: true },
 36 |     { name: 'S', inStock: true },
 37 |     { name: 'M', inStock: true },
 38 |     { name: 'L', inStock: true },
 39 |     { name: 'XL', inStock: true },
 40 |     { name: 'XXL', inStock: true },
 41 |     { name: 'XXXL', inStock: false },
 42 |   ],
 43 | };
 44 | 
 45 | export default function ProductQuickviews() {
 46 |   const [open, setOpen] = useState(true);
 47 |   const [selectedColor, setSelectedColor] = useState(product.colors[0]);
 48 |   const [selectedSize, setSelectedSize] = useState(product.sizes[2]);
 49 | 
 50 |   return (
 51 |     <Transition.Root show={open} as={Fragment}>
 52 |       <Dialog
 53 |         as="div"
 54 |         className="fixed inset-0 z-10 overflow-y-auto"
 55 |         onClose={setOpen}
 56 |       >
 57 |         <div
 58 |           className="flex min-h-screen text-center md:block md:px-2 lg:px-4"
 59 |           style={{ fontSize: 0 }}
 60 |         >
 61 |           <Transition.Child
 62 |             as={Fragment}
 63 |             enter="ease-out duration-300"
 64 |             enterFrom="opacity-0"
 65 |             enterTo="opacity-100"
 66 |             leave="ease-in duration-200"
 67 |             leaveFrom="opacity-100"
 68 |             leaveTo="opacity-0"
 69 |           >
 70 |             <Dialog.Overlay className="fixed inset-0 hidden bg-gray-500 bg-opacity-75 transition-opacity md:block" />
 71 |           </Transition.Child>
 72 | 
 73 |           {/* This element is to trick the browser into centering the modal contents. */}
 74 |           <span
 75 |             className="hidden md:inline-block md:h-screen md:align-middle"
 76 |             aria-hidden="true"
 77 |           >
 78 |             &#8203;
 79 |           </span>
 80 |           <Transition.Child
 81 |             as={Fragment}
 82 |             enter="ease-out duration-300"
 83 |             enterFrom="opacity-0 translate-y-4 md:translate-y-0 md:scale-95"
 84 |             enterTo="opacity-100 translate-y-0 md:scale-100"
 85 |             leave="ease-in duration-200"
 86 |             leaveFrom="opacity-100 translate-y-0 md:scale-100"
 87 |             leaveTo="opacity-0 translate-y-4 md:translate-y-0 md:scale-95"
 88 |           >
 89 |             <div className="flex w-full transform text-left text-base transition md:my-8 md:inline-block md:max-w-2xl md:px-4 md:align-middle lg:max-w-4xl">
 90 |               <div className="relative flex w-full items-center overflow-hidden bg-white px-4 pt-14 pb-8 shadow-2xl sm:px-6 sm:pt-8 md:p-6 lg:p-8">
 91 |                 <button
 92 |                   type="button"
 93 |                   className="absolute top-4 right-4 text-gray-400 hover:text-gray-500 sm:top-8 sm:right-6 md:top-6 md:right-6 lg:top-8 lg:right-8"
 94 |                   onClick={() => setOpen(false)}
 95 |                 >
 96 |                   <span className="sr-only">Close</span>
 97 |                   <XIcon className="h-6 w-6" aria-hidden="true" />
 98 |                 </button>
 99 | 
100 |                 <div className="grid w-full grid-cols-1 items-start gap-y-8 gap-x-6 sm:grid-cols-12 lg:gap-x-8">
101 |                   <div className="aspect-w-2 aspect-h-3 overflow-hidden rounded-lg bg-gray-100 sm:col-span-4 lg:col-span-5">
102 |                     <img
103 |                       src={product.imageSrc}
104 |                       alt={product.imageAlt}
105 |                       className="object-cover object-center"
106 |                     />
107 |                   </div>
108 |                   <div className="sm:col-span-8 lg:col-span-7">
109 |                     <h2 className="text-2xl font-extrabold text-gray-900 sm:pr-12">
110 |                       {product.name}
111 |                     </h2>
112 | 
113 |                     <section
114 |                       aria-labelledby="information-heading"
115 |                       className="mt-2"
116 |                     >
117 |                       <h3 id="information-heading" className="sr-only">
118 |                         Product information
119 |                       </h3>
120 | 
121 |                       <p className="text-2xl text-gray-900">{product.price}</p>
122 | 
123 |                       {/* Reviews */}
124 |                       <div className="mt-6">
125 |                         <h4 className="sr-only">Reviews</h4>
126 |                         <div className="flex items-center">
127 |                           <div className="flex items-center">
128 |                             {[0, 1, 2, 3, 4].map((rating) => (
129 |                               <StarIcon
130 |                                 key={rating}
131 |                                 className={classNames(
132 |                                   product.rating > rating
133 |                                     ? 'text-gray-900'
134 |                                     : 'text-gray-200',
135 |                                   'h-5 w-5 flex-shrink-0'
136 |                                 )}
137 |                                 aria-hidden="true"
138 |                               />
139 |                             ))}
140 |                           </div>
141 |                           <p className="sr-only">
142 |                             {product.rating} out of 5 stars
143 |                           </p>
144 |                           <a
145 |                             href="#"
146 |                             className="ml-3 text-sm font-medium text-indigo-600 hover:text-indigo-500"
147 |                           >
148 |                             {product.reviewCount} reviews
149 |                           </a>
150 |                         </div>
151 |                       </div>
152 |                     </section>
153 | 
154 |                     <section
155 |                       aria-labelledby="options-heading"
156 |                       className="mt-10"
157 |                     >
158 |                       <h3 id="options-heading" className="sr-only">
159 |                         Product options
160 |                       </h3>
161 | 
162 |                       <form>
163 |                         {/* Colors */}
164 |                         <div>
165 |                           <h4 className="text-sm font-medium text-gray-900">
166 |                             Color
167 |                           </h4>
168 | 
169 |                           <RadioGroup
170 |                             value={selectedColor}
171 |                             onChange={setSelectedColor}
172 |                             className="mt-4"
173 |                           >
174 |                             <RadioGroup.Label className="sr-only">
175 |                               Choose a color
176 |                             </RadioGroup.Label>
177 |                             <div className="flex items-center space-x-3">
178 |                               {product.colors.map((color) => (
179 |                                 <RadioGroup.Option
180 |                                   key={color.name}
181 |                                   value={color}
182 |                                   className={({ active, checked }) =>
183 |                                     classNames(
184 |                                       color.selectedClass,
185 |                                       active && checked
186 |                                         ? 'ring ring-offset-1'
187 |                                         : '',
188 |                                       !active && checked ? 'ring-2' : '',
189 |                                       'relative -m-0.5 flex cursor-pointer items-center justify-center rounded-full p-0.5 focus:outline-none'
190 |                                     )
191 |                                   }
192 |                                 >
193 |                                   <RadioGroup.Label as="p" className="sr-only">
194 |                                     {color.name}
195 |                                   </RadioGroup.Label>
196 |                                   <span
197 |                                     aria-hidden="true"
198 |                                     className={classNames(
199 |                                       color.class,
200 |                                       'h-8 w-8 rounded-full border border-black border-opacity-10'
201 |                                     )}
202 |                                   />
203 |                                 </RadioGroup.Option>
204 |                               ))}
205 |                             </div>
206 |                           </RadioGroup>
207 |                         </div>
208 | 
209 |                         {/* Sizes */}
210 |                         <div className="mt-10">
211 |                           <div className="flex items-center justify-between">
212 |                             <h4 className="text-sm font-medium text-gray-900">
213 |                               Size
214 |                             </h4>
215 |                             <a
216 |                               href="#"
217 |                               className="text-sm font-medium text-indigo-600 hover:text-indigo-500"
218 |                             >
219 |                               Size guide
220 |                             </a>
221 |                           </div>
222 | 
223 |                           <RadioGroup
224 |                             value={selectedSize}
225 |                             onChange={setSelectedSize}
226 |                             className="mt-4"
227 |                           >
228 |                             <RadioGroup.Label className="sr-only">
229 |                               Choose a size
230 |                             </RadioGroup.Label>
231 |                             <div className="grid grid-cols-4 gap-4">
232 |                               {product.sizes.map((size) => (
233 |                                 <RadioGroup.Option
234 |                                   key={size.name}
235 |                                   value={size}
236 |                                   disabled={!size.inStock}
237 |                                   className={({ active }) =>
238 |                                     classNames(
239 |                                       size.inStock
240 |                                         ? 'cursor-pointer bg-white text-gray-900 shadow-sm'
241 |                                         : 'cursor-not-allowed bg-gray-50 text-gray-200',
242 |                                       active ? 'ring-2 ring-indigo-500' : '',
243 |                                       'group relative flex items-center justify-center rounded-md border py-3 px-4 text-sm font-medium uppercase hover:bg-gray-50 focus:outline-none sm:flex-1'
244 |                                     )
245 |                                   }
246 |                                 >
247 |                                   {({ active, checked }) => (
248 |                                     <>
249 |                                       <RadioGroup.Label as="p">
250 |                                         {size.name}
251 |                                       </RadioGroup.Label>
252 |                                       {size.inStock ? (
253 |                                         <div
254 |                                           className={classNames(
255 |                                             active ? 'border' : 'border-2',
256 |                                             checked
257 |                                               ? 'border-indigo-500'
258 |                                               : 'border-transparent',
259 |                                             'pointer-events-none absolute -inset-px rounded-md'
260 |                                           )}
261 |                                           aria-hidden="true"
262 |                                         />
263 |                                       ) : (
264 |                                         <div
265 |                                           aria-hidden="true"
266 |                                           className="pointer-events-none absolute -inset-px rounded-md border-2 border-gray-200"
267 |                                         >
268 |                                           <svg
269 |                                             className="absolute inset-0 h-full w-full stroke-2 text-gray-200"
270 |                                             viewBox="0 0 100 100"
271 |                                             preserveAspectRatio="none"
272 |                                             stroke="currentColor"
273 |                                           >
274 |                                             <line
275 |                                               x1={0}
276 |                                               y1={100}
277 |                                               x2={100}
278 |                                               y2={0}
279 |                                               vectorEffect="non-scaling-stroke"
280 |                                             />
281 |                                           </svg>
282 |                                         </div>
283 |                                       )}
284 |                                     </>
285 |                                   )}
286 |                                 </RadioGroup.Option>
287 |                               ))}
288 |                             </div>
289 |                           </RadioGroup>
290 |                         </div>
291 | 
292 |                         <button
293 |                           type="submit"
294 |                           className="mt-6 flex w-full items-center justify-center rounded-md border border-transparent bg-indigo-600 py-3 px-8 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
295 |                         >
296 |                           Add to bag
297 |                         </button>
298 |                       </form>
299 |                     </section>
300 |                   </div>
301 |                 </div>
302 |               </div>
303 |             </div>
304 |           </Transition.Child>
305 |         </div>
306 |       </Dialog>
307 |     </Transition.Root>
308 |   );
309 | }
310 | 


--------------------------------------------------------------------------------
/app/routes/marketing/headers.tsx:
--------------------------------------------------------------------------------
  1 | /* eslint-disable jsx-a11y/anchor-is-valid */
  2 | import { Fragment } from 'react';
  3 | import { Popover, Transition } from '@headlessui/react';
  4 | import {
  5 |   BookmarkAltIcon,
  6 |   CalendarIcon,
  7 |   ChartBarIcon,
  8 |   CursorClickIcon,
  9 |   MenuIcon,
 10 |   PhoneIcon,
 11 |   PlayIcon,
 12 |   RefreshIcon,
 13 |   ShieldCheckIcon,
 14 |   SupportIcon,
 15 |   ViewGridIcon,
 16 |   XIcon,
 17 | } from '@heroicons/react/outline';
 18 | import { ChevronDownIcon } from '@heroicons/react/solid';
 19 | import type { MetaFunction, LinksFunction } from '@remix-run/node';
 20 | import { classNames } from '~/utils';
 21 | 
 22 | import headersCss from '~/styles/routes/marketing/headers.css';
 23 | 
 24 | export let meta: MetaFunction = () => {
 25 |   return { title: 'Marketing | Headers' };
 26 | };
 27 | 
 28 | export const links: LinksFunction = () => {
 29 |   return [{ rel: 'stylesheet', href: headersCss }];
 30 | };
 31 | 
 32 | const solutions = [
 33 |   {
 34 |     name: 'Analytics',
 35 |     description:
 36 |       'Get a better understanding of where your traffic is coming from.',
 37 |     href: '#',
 38 |     icon: ChartBarIcon,
 39 |   },
 40 |   {
 41 |     name: 'Engagement',
 42 |     description: 'Speak directly to your customers in a more meaningful way.',
 43 |     href: '#',
 44 |     icon: CursorClickIcon,
 45 |   },
 46 |   {
 47 |     name: 'Security',
 48 |     description: "Your customers' data will be safe and secure.",
 49 |     href: '#',
 50 |     icon: ShieldCheckIcon,
 51 |   },
 52 |   {
 53 |     name: 'Integrations',
 54 |     description: "Connect with third-party tools that you're already using.",
 55 |     href: '#',
 56 |     icon: ViewGridIcon,
 57 |   },
 58 |   {
 59 |     name: 'Automations',
 60 |     description:
 61 |       'Build strategic funnels that will drive your customers to convert',
 62 |     href: '#',
 63 |     icon: RefreshIcon,
 64 |   },
 65 | ];
 66 | const callsToAction = [
 67 |   { name: 'Watch Demo', href: '#', icon: PlayIcon },
 68 |   { name: 'Contact Sales', href: '#', icon: PhoneIcon },
 69 | ];
 70 | const resources = [
 71 |   {
 72 |     name: 'Help Center',
 73 |     description:
 74 |       'Get all of your questions answered in our forums or contact support.',
 75 |     href: '#',
 76 |     icon: SupportIcon,
 77 |   },
 78 |   {
 79 |     name: 'Guides',
 80 |     description:
 81 |       'Learn how to maximize our platform to get the most out of it.',
 82 |     href: '#',
 83 |     icon: BookmarkAltIcon,
 84 |   },
 85 |   {
 86 |     name: 'Events',
 87 |     description:
 88 |       'See what meet-ups and other events we might be planning near you.',
 89 |     href: '#',
 90 |     icon: CalendarIcon,
 91 |   },
 92 |   {
 93 |     name: 'Security',
 94 |     description: 'Understand how we take your privacy seriously.',
 95 |     href: '#',
 96 |     icon: ShieldCheckIcon,
 97 |   },
 98 | ];
 99 | const recentPosts = [
100 |   { id: 1, name: 'Boost your conversion rate', href: '#' },
101 |   {
102 |     id: 2,
103 |     name: 'How to use search engine optimization to drive traffic to your site',
104 |     href: '#',
105 |   },
106 |   { id: 3, name: 'Improve your customer experience', href: '#' },
107 | ];
108 | 
109 | export default function Headers() {
110 |   return (
111 |     <Popover className="relative bg-white">
112 |       <div className="mx-auto max-w-7xl px-4 sm:px-6">
113 |         <div className="flex items-center justify-between border-b-2 border-gray-100 py-6 md:justify-start md:space-x-10">
114 |           <div className="flex justify-start lg:w-0 lg:flex-1">
115 |             <a href="#">
116 |               <span className="sr-only">Workflow</span>
117 |               <img
118 |                 className="h-8 w-auto sm:h-10"
119 |                 src="https://tailwindui.com/img/logos/workflow-mark-indigo-600.svg"
120 |                 alt=""
121 |               />
122 |             </a>
123 |           </div>
124 |           <div className="-my-2 -mr-2 md:hidden">
125 |             <Popover.Button className="inline-flex items-center justify-center rounded-md bg-white p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
126 |               <span className="sr-only">Open menu</span>
127 |               <MenuIcon className="h-6 w-6" aria-hidden="true" />
128 |             </Popover.Button>
129 |           </div>
130 |           <Popover.Group as="nav" className="hidden space-x-10 md:flex">
131 |             <Popover className="relative">
132 |               {({ open }) => (
133 |                 <>
134 |                   <Popover.Button
135 |                     className={classNames(
136 |                       open ? 'text-gray-900' : 'text-gray-500',
137 |                       'group inline-flex items-center rounded-md bg-white text-base font-medium hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2'
138 |                     )}
139 |                   >
140 |                     <span>Solutions</span>
141 |                     <ChevronDownIcon
142 |                       className={classNames(
143 |                         open ? 'text-gray-600' : 'text-gray-400',
144 |                         'ml-2 h-5 w-5 group-hover:text-gray-500'
145 |                       )}
146 |                       aria-hidden="true"
147 |                     />
148 |                   </Popover.Button>
149 | 
150 |                   <Transition
151 |                     as={Fragment}
152 |                     enter="transition ease-out duration-200"
153 |                     enterFrom="opacity-0 translate-y-1"
154 |                     enterTo="opacity-100 translate-y-0"
155 |                     leave="transition ease-in duration-150"
156 |                     leaveFrom="opacity-100 translate-y-0"
157 |                     leaveTo="opacity-0 translate-y-1"
158 |                   >
159 |                     <Popover.Panel className="absolute z-10 -ml-4 mt-3 w-screen max-w-md transform px-2 sm:px-0 lg:left-1/2 lg:ml-0 lg:-translate-x-1/2">
160 |                       <div className="overflow-hidden rounded-lg shadow-lg ring-1 ring-black ring-opacity-5">
161 |                         <div className="relative grid gap-6 bg-white px-5 py-6 sm:gap-8 sm:p-8">
162 |                           {solutions.map((item) => (
163 |                             <a
164 |                               key={item.name}
165 |                               href={item.href}
166 |                               className="-m-3 flex items-start rounded-lg p-3 hover:bg-gray-50"
167 |                             >
168 |                               <item.icon
169 |                                 className="h-6 w-6 flex-shrink-0 text-indigo-600"
170 |                                 aria-hidden="true"
171 |                               />
172 |                               <div className="ml-4">
173 |                                 <p className="text-base font-medium text-gray-900">
174 |                                   {item.name}
175 |                                 </p>
176 |                                 <p className="mt-1 text-sm text-gray-500">
177 |                                   {item.description}
178 |                                 </p>
179 |                               </div>
180 |                             </a>
181 |                           ))}
182 |                         </div>
183 |                         <div className="space-y-6 bg-gray-50 px-5 py-5 sm:flex sm:space-y-0 sm:space-x-10 sm:px-8">
184 |                           {callsToAction.map((item) => (
185 |                             <div key={item.name} className="flow-root">
186 |                               <a
187 |                                 href={item.href}
188 |                                 className="-m-3 flex items-center rounded-md p-3 text-base font-medium text-gray-900 hover:bg-gray-100"
189 |                               >
190 |                                 <item.icon
191 |                                   className="h-6 w-6 flex-shrink-0 text-gray-400"
192 |                                   aria-hidden="true"
193 |                                 />
194 |                                 <span className="ml-3">{item.name}</span>
195 |                               </a>
196 |                             </div>
197 |                           ))}
198 |                         </div>
199 |                       </div>
200 |                     </Popover.Panel>
201 |                   </Transition>
202 |                 </>
203 |               )}
204 |             </Popover>
205 | 
206 |             <a
207 |               href="#"
208 |               className="text-base font-medium text-gray-500 hover:text-gray-900"
209 |             >
210 |               Pricing
211 |             </a>
212 |             <a
213 |               href="#"
214 |               className="text-base font-medium text-gray-500 hover:text-gray-900"
215 |             >
216 |               Docs
217 |             </a>
218 | 
219 |             <Popover className="relative">
220 |               {({ open }) => (
221 |                 <>
222 |                   <Popover.Button
223 |                     className={classNames(
224 |                       open ? 'text-gray-900' : 'text-gray-500',
225 |                       'group inline-flex items-center rounded-md bg-white text-base font-medium hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2'
226 |                     )}
227 |                   >
228 |                     <span>More</span>
229 |                     <ChevronDownIcon
230 |                       className={classNames(
231 |                         open ? 'text-gray-600' : 'text-gray-400',
232 |                         'ml-2 h-5 w-5 group-hover:text-gray-500'
233 |                       )}
234 |                       aria-hidden="true"
235 |                     />
236 |                   </Popover.Button>
237 | 
238 |                   <Transition
239 |                     as={Fragment}
240 |                     enter="transition ease-out duration-200"
241 |                     enterFrom="opacity-0 translate-y-1"
242 |                     enterTo="opacity-100 translate-y-0"
243 |                     leave="transition ease-in duration-150"
244 |                     leaveFrom="opacity-100 translate-y-0"
245 |                     leaveTo="opacity-0 translate-y-1"
246 |                   >
247 |                     <Popover.Panel className="absolute left-1/2 z-10 mt-3 w-screen max-w-md -translate-x-1/2 transform px-2 sm:px-0">
248 |                       <div className="overflow-hidden rounded-lg shadow-lg ring-1 ring-black ring-opacity-5">
249 |                         <div className="relative grid gap-6 bg-white px-5 py-6 sm:gap-8 sm:p-8">
250 |                           {resources.map((item) => (
251 |                             <a
252 |                               key={item.name}
253 |                               href={item.href}
254 |                               className="-m-3 flex items-start rounded-lg p-3 hover:bg-gray-50"
255 |                             >
256 |                               <item.icon
257 |                                 className="h-6 w-6 flex-shrink-0 text-indigo-600"
258 |                                 aria-hidden="true"
259 |                               />
260 |                               <div className="ml-4">
261 |                                 <p className="text-base font-medium text-gray-900">
262 |                                   {item.name}
263 |                                 </p>
264 |                                 <p className="mt-1 text-sm text-gray-500">
265 |                                   {item.description}
266 |                                 </p>
267 |                               </div>
268 |                             </a>
269 |                           ))}
270 |                         </div>
271 |                         <div className="bg-gray-50 px-5 py-5 sm:px-8 sm:py-8">
272 |                           <div>
273 |                             <h3 className="text-sm font-medium uppercase tracking-wide text-gray-500">
274 |                               Recent Posts
275 |                             </h3>
276 |                             <ul className="mt-4 space-y-4">
277 |                               {recentPosts.map((post) => (
278 |                                 <li
279 |                                   key={post.id}
280 |                                   className="truncate text-base"
281 |                                 >
282 |                                   <a
283 |                                     href={post.href}
284 |                                     className="font-medium text-gray-900 hover:text-gray-700"
285 |                                   >
286 |                                     {post.name}
287 |                                   </a>
288 |                                 </li>
289 |                               ))}
290 |                             </ul>
291 |                           </div>
292 |                           <div className="mt-5 text-sm">
293 |                             <a
294 |                               href="#"
295 |                               className="font-medium text-indigo-600 hover:text-indigo-500"
296 |                             >
297 |                               {' '}
298 |                               View all posts{' '}
299 |                               <span aria-hidden="true">&rarr;</span>
300 |                             </a>
301 |                           </div>
302 |                         </div>
303 |                       </div>
304 |                     </Popover.Panel>
305 |                   </Transition>
306 |                 </>
307 |               )}
308 |             </Popover>
309 |           </Popover.Group>
310 |           <div className="hidden items-center justify-end md:flex md:flex-1 lg:w-0">
311 |             <a
312 |               href="#"
313 |               className="whitespace-nowrap text-base font-medium text-gray-500 hover:text-gray-900"
314 |             >
315 |               Sign in
316 |             </a>
317 |             <a
318 |               href="#"
319 |               className="ml-8 inline-flex items-center justify-center whitespace-nowrap rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-indigo-700"
320 |             >
321 |               Sign up
322 |             </a>
323 |           </div>
324 |         </div>
325 |       </div>
326 | 
327 |       <Transition
328 |         as={Fragment}
329 |         enter="duration-200 ease-out"
330 |         enterFrom="opacity-0 scale-95"
331 |         enterTo="opacity-100 scale-100"
332 |         leave="duration-100 ease-in"
333 |         leaveFrom="opacity-100 scale-100"
334 |         leaveTo="opacity-0 scale-95"
335 |       >
336 |         <Popover.Panel
337 |           focus
338 |           className="absolute inset-x-0 top-0 origin-top-right transform p-2 transition md:hidden"
339 |         >
340 |           <div className="divide-y-2 divide-gray-50 rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5">
341 |             <div className="px-5 pt-5 pb-6">
342 |               <div className="flex items-center justify-between">
343 |                 <div>
344 |                   <img
345 |                     className="h-8 w-auto"
346 |                     src="https://tailwindui.com/img/logos/workflow-mark-indigo-600.svg"
347 |                     alt="Workflow"
348 |                   />
349 |                 </div>
350 |                 <div className="-mr-2">
351 |                   <Popover.Button className="inline-flex items-center justify-center rounded-md bg-white p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
352 |                     <span className="sr-only">Close menu</span>
353 |                     <XIcon className="h-6 w-6" aria-hidden="true" />
354 |                   </Popover.Button>
355 |                 </div>
356 |               </div>
357 |               <div className="mt-6">
358 |                 <nav className="grid gap-y-8">
359 |                   {solutions.map((item) => (
360 |                     <a
361 |                       key={item.name}
362 |                       href={item.href}
363 |                       className="-m-3 flex items-center rounded-md p-3 hover:bg-gray-50"
364 |                     >
365 |                       <item.icon
366 |                         className="h-6 w-6 flex-shrink-0 text-indigo-600"
367 |                         aria-hidden="true"
368 |                       />
369 |                       <span className="ml-3 text-base font-medium text-gray-900">
370 |                         {item.name}
371 |                       </span>
372 |                     </a>
373 |                   ))}
374 |                 </nav>
375 |               </div>
376 |             </div>
377 |             <div className="space-y-6 py-6 px-5">
378 |               <div className="grid grid-cols-2 gap-y-4 gap-x-8">
379 |                 <a
380 |                   href="#"
381 |                   className="text-base font-medium text-gray-900 hover:text-gray-700"
382 |                 >
383 |                   Pricing
384 |                 </a>
385 | 
386 |                 <a
387 |                   href="#"
388 |                   className="text-base font-medium text-gray-900 hover:text-gray-700"
389 |                 >
390 |                   Docs
391 |                 </a>
392 |                 {resources.map((item) => (
393 |                   <a
394 |                     key={item.name}
395 |                     href={item.href}
396 |                     className="text-base font-medium text-gray-900 hover:text-gray-700"
397 |                   >
398 |                     {item.name}
399 |                   </a>
400 |                 ))}
401 |               </div>
402 |               <div>
403 |                 <a
404 |                   href="#"
405 |                   className="flex w-full items-center justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-indigo-700"
406 |                 >
407 |                   Sign up
408 |                 </a>
409 |                 <p className="mt-6 text-center text-base font-medium text-gray-500">
410 |                   Existing customer?{' '}
411 |                   <a href="#" className="text-indigo-600 hover:text-indigo-500">
412 |                     Sign in
413 |                   </a>
414 |                 </p>
415 |               </div>
416 |             </div>
417 |           </div>
418 |         </Popover.Panel>
419 |       </Transition>
420 |     </Popover>
421 |   );
422 | }
423 | 


--------------------------------------------------------------------------------
/scripts/styles.js:
--------------------------------------------------------------------------------
  1 | let { writeFile, readdir, rm, mkdir } = require('fs/promises');
  2 | let path = require('path');
  3 | let { spawn } = require('child_process');
  4 | let csstree = require('css-tree');
  5 | let chokidar = require('chokidar');
  6 | const { performance } = require('perf_hooks');
  7 | 
  8 | let appPath = path.join(__dirname, '../app');
  9 | let routesPath = path.join(appPath, 'routes');
 10 | let stylesPath = path.join(appPath, 'styles');
 11 | let stylesRoutesPath = path.join(stylesPath, 'routes');
 12 | 
 13 | let baseTailwindCss = path.join(stylesPath, 'tailwind/base.css');
 14 | let routeTailwindCss = path.join(stylesPath, 'tailwind/route.css');
 15 | 
 16 | let root = path.join(appPath, 'root.{js,jsx,ts,tsx}');
 17 | let rootStylesPath = path.join(stylesPath, 'root.css');
 18 | 
 19 | createStyles();
 20 | 
 21 | // Main function to generate the stylesheets
 22 | async function createStyles() {
 23 |   let isProd = process.env.NODE_ENV === 'production';
 24 |   let t0 = performance.now();
 25 |   // Dump all the files and start with a clean slate for production
 26 |   // This would be bad in development, lots of dev server crashing 😬
 27 |   if (isProd) {
 28 |     dumpCssFiles();
 29 |   }
 30 | 
 31 |   // Start creating the root tailwind styles
 32 |   let rootAstPromise = generateAndSaveRootTailwindStyles();
 33 |   // Generate all ASTs—we must wait until this process is done to proceed
 34 |   let routeAstMap = await generateRouteTailwindAstMap();
 35 | 
 36 |   // Make all the directories we will need, as well as resolve and pull out the root AST
 37 |   let [rootAst] = await Promise.all([
 38 |     rootAstPromise,
 39 |     makeDirectories(routeAstMap.keys()),
 40 |   ]);
 41 | 
 42 |   // Maybe should check if in Dev specifically, but for now this is fine
 43 |   if (!isProd) {
 44 |     setupWatcher(rootAst, routeAstMap);
 45 |   }
 46 | 
 47 |   // Create all of the route stylesheets
 48 |   await generateAndSaveRouteTailwindStyles(routeAstMap, rootAst.classNames);
 49 | 
 50 |   console.log();
 51 |   if (isProd) {
 52 |     console.log(
 53 |       `All css has been successfully generated in ${millisecondsFromTimestamp(
 54 |         t0
 55 |       )}ms`
 56 |     );
 57 |   } else {
 58 |     console.log(
 59 |       `Initially css generated in ${millisecondsFromTimestamp(t0)}ms`
 60 |     );
 61 |     console.log('Watching for updates...');
 62 |   }
 63 |   console.log();
 64 | }
 65 | 
 66 | // #region Watcher logic for dev mode
 67 | /**
 68 |  * Sets up a watcher to regenerate the stylesheets when appropriate files change
 69 |  * @param {{ast: csstree.CssNode; classNames: Set<string>;} rootAst
 70 |  * @param {Map<string, {ast: csstree.CssNode; classNames: Set<string>;}>} routeAstMap
 71 |  */
 72 | function setupWatcher(rootAst, routeAstMap) {
 73 |   let rootWatcher = chokidar.watch(
 74 |     // `${root},${appPath}/components/**/*.{js,jsx,ts,tsx}`,
 75 |     [root, `${appPath}/components/**/*.{js,jsx,ts,tsx}`],
 76 |     {
 77 |       persistent: true,
 78 |       ignoreInitial: true,
 79 |     }
 80 |   );
 81 | 
 82 |   rootWatcher.on('all', () =>
 83 |     logStyleUpdate('update', async () => {
 84 |       let newRootAst = await generateAndSaveRootTailwindStyles();
 85 |       // Check if the styles have actually changed, otherwise we can bail
 86 |       let hasSameClassnames = areSetsEqual(
 87 |         rootAst.classNames,
 88 |         newRootAst.classNames
 89 |       );
 90 |       if (hasSameClassnames) return;
 91 |       // Update the reference for the other watcher to use and regenerate all styles
 92 |       // since root is the ancestor of everything
 93 |       rootAst = newRootAst;
 94 |       await generateAndSaveRouteTailwindStyles(routeAstMap, rootAst.classNames);
 95 |       return rootStylesPath;
 96 |     })
 97 |   );
 98 | 
 99 |   // Not sure if we need to ignore any files since everything in `/routes/` should be a route
100 |   let routesWatcher = chokidar.watch(routesPath, {
101 |     persistent: true,
102 |     ignoreInitial: true,
103 |   });
104 | 
105 |   // Setup a watcher to remove ASTs and files, create directories and add new ASTs, and update ASTs
106 |   routesWatcher
107 |     .on('unlink', (pathname) =>
108 |       logStyleUpdate('remove', async () => {
109 |         // Remove AST from map and remove the css file
110 |         routeAstMap.delete(pathname);
111 |         rm(getCssPathname(pathname));
112 |         await generateAndSaveRouteTailwindStyles(
113 |           routeAstMap,
114 |           rootAst.classNames
115 |         );
116 |       })
117 |     )
118 |     .on('add', (pathname) => {
119 |       logStyleUpdate('add', async () => {
120 |         // Generate the new entry and create the necessary directory
121 |         // (doesn't matter if directory exists)
122 |         let [entry] = await Promise.all([
123 |           generateRouteTailwindAstEntry(pathname),
124 |           makeDirectories([pathname]),
125 |         ]);
126 |         routeAstMap.set(entry[0], entry[1]);
127 |         await generateAndSaveRouteTailwindStyles(
128 |           routeAstMap,
129 |           rootAst.classNames
130 |         );
131 |         return getCssPathname(entry[0]);
132 |       });
133 |     })
134 |     .on('change', (pathname) => {
135 |       logStyleUpdate('update', async () => {
136 |         let [extensionlessPathname, astObject] =
137 |           await generateRouteTailwindAstEntry(pathname);
138 |         // Check if the styles have actually changed, otherwise we can bail
139 |         let hasSameClassnames = areSetsEqual(
140 |           routeAstMap.get(extensionlessPathname).classNames,
141 |           astObject.classNames
142 |         );
143 |         if (hasSameClassnames) return;
144 |         // Update the AST map and save the styles
145 |         routeAstMap.set(extensionlessPathname, astObject);
146 |         await generateAndSaveRouteTailwindStyles(
147 |           routeAstMap,
148 |           rootAst.classNames,
149 |           new Set([extensionlessPathname])
150 |         );
151 |         return getCssPathname(extensionlessPathname);
152 |       });
153 |       // Generate the AST
154 |     })
155 |     // Don't know if better error handling is needed
156 |     .on('error', (error) => console.error(`Watcher error: ${error}`));
157 | }
158 | 
159 | /**
160 |  * @param {'add' | 'update' | 'remove'} action
161 |  * @param {() => Promise<string | undefined>} cb
162 |  */
163 | async function logStyleUpdate(action, cb) {
164 |   let t0 = performance.now();
165 |   let pathname = await cb();
166 |   if (pathname) {
167 |     let displayAction =
168 |       action === 'add' ? 'Added' : action === 'update' ? 'Updated' : 'Removed';
169 |     let displayPathname = `app${pathname.replace(appPath, '')}`;
170 |     console.log();
171 |     console.log(
172 |       `${displayAction} ${displayPathname} styles and purged relevant stylesheets in ${millisecondsFromTimestamp(
173 |         t0
174 |       )}ms`
175 |     );
176 |     console.log();
177 |   }
178 | }
179 | 
180 | // #endregion
181 | 
182 | // #region Functions to generate ASTs of tailwindcss styles and and ultimately export stylesheets
183 | 
184 | /**
185 |  * Generates an AST of and creates a file for the root/global styles
186 |  * @param {string} contentPathname
187 |  * @returns {Promise<{ast: csstree.CssNode; classNames: Set<string>;}>} AST and Set of classNames
188 |  */
189 | async function generateAndSaveRootTailwindStyles(
190 |   contentPathname = `${root},${appPath}/components/**/*.{js,jsx,ts,tsx}`
191 | ) {
192 |   let rootAst = await generateTailwindAst(baseTailwindCss, contentPathname);
193 | 
194 |   // Kick of the root stylesheet writing
195 |   // This may be a bad idea to delay the return of classNames until this is
196 |   // finished, however I believe this will pretty much always be done before
197 |   // the rest of the ASTs are generated
198 |   let rootStylesheet = csstree.generate(rootAst);
199 |   await writeFile(rootStylesPath, rootStylesheet);
200 | 
201 |   return {
202 |     ast: rootAst,
203 |     classNames: getClassNames(rootAst),
204 |   };
205 | }
206 | 
207 | /**
208 |  *
209 |  * @param {Map<string, {ast: csstree.CssNode; classNames: Set<string>;}>} routeAstMap
210 |  * @param {Set<string>} rootClassNames
211 |  * @param {null | Set<string>} dirtyPathnames If null, all paths are dirty, otherwise only update anything relying on the dirty path
212 |  * @returns
213 |  */
214 | async function generateAndSaveRouteTailwindStyles(
215 |   routeAstMap,
216 |   rootClassNames,
217 |   dirtyPathnames = null
218 | ) {
219 |   let fileWritingPromises = [];
220 |   // Map over all of the route stylesheets, create a set of ancestor classNames, purge the stylesheet, and write it
221 |   for (let pathname of routeAstMap.keys()) {
222 |     let shouldUpdate = dirtyPathnames === null; // if null, all paths are dirty, so definitely update
223 |     let ancestorPathnames = getAncestorPathnames(pathname);
224 |     // Every route has root as the ancestor
225 |     let ancestorClassNames = rootClassNames;
226 | 
227 |     shouldUpdate = shouldUpdate || dirtyPathnames.has(pathname);
228 | 
229 |     for (let ancestorPathname of ancestorPathnames) {
230 |       // Skip ancestorPathnames that don't exist
231 |       if (!routeAstMap.has(ancestorPathname)) continue;
232 |       let { classNames } = routeAstMap.get(ancestorPathname);
233 |       ancestorClassNames = new Set([...rootClassNames, ...classNames]);
234 |       shouldUpdate = shouldUpdate || dirtyPathnames.has(ancestorPathname);
235 |     }
236 | 
237 |     // Skip routes we're not updating
238 |     if (!shouldUpdate) continue;
239 | 
240 |     let { ast } = routeAstMap.get(pathname);
241 |     let stylesheetText = generatePurgedStylesheet(ast, ancestorClassNames);
242 | 
243 |     let promise = writeFile(getCssPathname(pathname), stylesheetText);
244 |     fileWritingPromises.push(promise);
245 |   }
246 | 
247 |   return Promise.all(fileWritingPromises);
248 | }
249 | 
250 | /**
251 |  * Generates and loops over a list of file paths and generates the tailwind styles for each file,
252 |  * returning an AST of the styles in a Map keyed by the route path
253 |  * Note: The pathname keys have their extension stripped
254 |  * @returns {Promise<Map<string, {ast: csstree.CssNode, classNames: Set<string>}>>} Map of file path to AST and Set of classNames
255 |  */
256 | async function generateRouteTailwindAstMap() {
257 |   let filePaths = await getAllFilePaths();
258 |   let entryPromises = filePaths.map((pathname) =>
259 |     generateRouteTailwindAstEntry(pathname)
260 |   );
261 |   let entries = await Promise.all(entryPromises);
262 |   return new Map(entries);
263 | }
264 | 
265 | /**
266 |  * Create a single entry for the map of route pathnames to AST/className
267 |  * @param {string} pathname
268 |  * @returns {Promise<[string, {ast: csstree.CssNode; classNames: Set<string>;}]>}
269 |  */
270 | async function generateRouteTailwindAstEntry(pathname) {
271 |   // drop the extension for the route path—this helps with matching parent directories later
272 |   let extensionRegex = new RegExp(`${path.extname(pathname)}$`);
273 |   let extensionlessPathname = pathname.replace(extensionRegex, '');
274 |   let ast = await generateTailwindAst(routeTailwindCss, pathname);
275 |   let classNames = getClassNames(ast);
276 |   let entry = [extensionlessPathname, { ast, classNames }];
277 |   return entry;
278 | }
279 | 
280 | /**
281 |  * Runs the tailwindcss CLI for a specific file then parses and returns an AST of the styles
282 |  * @param {string} inputStylePathname
283 |  * @param {string} contentPathname
284 |  * @returns {Promise<csstree.CssNode>} AST of tailwindcss styles for contentPathname
285 |  */
286 | async function generateTailwindAst(inputStylePathname, contentPathname) {
287 |   let twProcess = spawn(
288 |     'tailwindcss',
289 |     ['-i', inputStylePathname, `--content=${contentPathname}`],
290 |     { shell: true }
291 |   );
292 |   let output = await promisifyTailwindProcess(twProcess);
293 |   return csstree.parse(output);
294 | }
295 | 
296 | /**
297 |  * Walk the AST of a css file and remove classNames that appear in the ancestors
298 |  * @param {csstree.CssNode} ast
299 |  * @param {Set<string>} ancestorClassNames
300 |  * @returns {string} The purged css
301 |  */
302 | function generatePurgedStylesheet(ast, ancestorClassNames) {
303 |   let cloneAst = csstree.clone(ast);
304 |   // remove all classes that exist in the ancestor classNames
305 |   csstree.walk(cloneAst, {
306 |     visit: 'Rule', // this option is good for performance since reduces walking path length
307 |     enter: function (node, item, list) {
308 |       // since `visit` option is used, handler will be invoked for node.type === 'Rule' only
309 |       if (selectorHasClassName(node.prelude, ancestorClassNames)) {
310 |         list.remove(item);
311 |       }
312 |     },
313 |   });
314 | 
315 |   return csstree.generate(cloneAst);
316 | }
317 | 
318 | // #endregion
319 | 
320 | // #region Various utilities used throughout
321 | 
322 | /**
323 |  * Recursively remove all the generated .css files to ensure we're starting fresh
324 |  */
325 | async function dumpCssFiles() {
326 |   try {
327 |     await Promise.all([
328 |       rm(rootStylesPath),
329 |       rm(stylesRoutesPath, { recursive: true }),
330 |     ]);
331 |   } catch (error) {
332 |     // if the directory doesn't exist just keep going
333 |     if (error.code !== 'ENOENT') {
334 |       throw error;
335 |     }
336 |   }
337 | }
338 | 
339 | /**
340 |  * Make all the styles directories we need
341 |  * @param {string[] | IterableIterator<string>} pathnames
342 |  */
343 | async function makeDirectories(pathnames) {
344 |   // Create all the directories we might need
345 |   let directoryPromise = [];
346 |   let directories = new Set();
347 |   for (let pathname of pathnames) {
348 |     let directory = path.dirname(getCssPathname(pathname));
349 |     // skip directories we're already working on
350 |     if (directories.has(directory)) continue;
351 | 
352 |     // Make the directory and keep track of the promise/update the set
353 |     directoryPromise.push(mkdir(directory, { recursive: true }));
354 |     directories.add(directory);
355 |   }
356 | 
357 |   // Group all directory creation promises into a single promise
358 |   try {
359 |     await Promise.all(directoryPromise);
360 |   } catch (error) {
361 |     // ignore if the directory already exists—just keep trucking
362 |     if (error.code !== 'EEXIST') {
363 |       throw error;
364 |     }
365 |   }
366 | }
367 | 
368 | /**
369 |  * Walk the AST of a css file and return a Set of the classNames
370 |  * @param {csstree.CssNode} ast
371 |  * @returns {Set<string>}
372 |  */
373 | function getClassNames(ast) {
374 |   let classNames = new Set();
375 | 
376 |   csstree.walk(ast, {
377 |     visit: 'ClassSelector',
378 |     enter: function (node) {
379 |       classNames.add(node.name);
380 |     },
381 |   });
382 | 
383 |   return classNames;
384 | }
385 | 
386 | /**
387 |  * Check if a selector has a className that exists in the ancestorClassNames
388 |  * @param {csstree.Raw | csstree.SelectorList} selector
389 |  * @param {Set<string>} classNames Set of the classNames to check
390 |  * @returns {boolean}
391 |  */
392 | function selectorHasClassName(selector, classNames) {
393 |   return csstree.find(
394 |     selector,
395 |     (node) => node.type === 'ClassSelector' && classNames.has(node.name)
396 |   );
397 | }
398 | 
399 | /**
400 |  * Turn a child processes resulting from calling `spawn` into promises
401 |  * that resolves once the process closes
402 |  * @param {import('child_process').ChildProcessWithoutNullStreams} twProcess
403 |  * @returns
404 |  */
405 | function promisifyTailwindProcess(twProcess) {
406 |   return new Promise((resolve, reject) => {
407 |     let output = '';
408 |     twProcess.stdout.on('data', (data) => {
409 |       output += String(data);
410 |     });
411 | 
412 |     twProcess.on('close', (code) => {
413 |       resolve(output);
414 |     });
415 | 
416 |     twProcess.on('error', (error) => {
417 |       reject(error.message);
418 |     });
419 |   });
420 | }
421 | 
422 | /**
423 |  * Recursively walks a directory and returns a list of all the file pathnames
424 |  * @param {string} directoryPath Path of the directory with files to generate ASTs and recursively walk
425 |  * @returns {Promise<string[]>} List of file pathnames
426 |  */
427 | async function getAllFilePaths(directoryPath = routesPath) {
428 |   let filePaths = [];
429 |   let childrenDirectoryPromises = [];
430 | 
431 |   let files = await readdir(directoryPath, { withFileTypes: true });
432 | 
433 |   for (let file of files) {
434 |     let pathname = `${directoryPath}/${file.name}`;
435 |     // Add all files to the list of file names and recursively walk children directories
436 |     if (!file.isDirectory()) {
437 |       filePaths.push(pathname);
438 |     } else {
439 |       childrenDirectoryPromises.push(getAllFilePaths(pathname));
440 |     }
441 |   }
442 | 
443 |   // Add the child directory file names to the list of file names
444 |   let childDirectoryFilePaths = await Promise.all(childrenDirectoryPromises);
445 |   filePaths.push(...childDirectoryFilePaths.flat());
446 | 
447 |   return filePaths;
448 | }
449 | 
450 | /**
451 |  * Takes a pathname and returns the file pathname for each possible layout file.
452 |  * Assumes the pathname does not have it's extension and returns parent pathnames without extensions
453 |  * For more information on how Remix handles layout hierarchy, see https://remix.run/docs/en/v1/guides/routing#rendering-route-layout-hierarchies
454 |  * @param {string} pathname
455 |  * @returns {string[]} List of ancestor pathnames
456 |  */
457 | function getAncestorPathnames(pathname) {
458 |   let ext = path.extname(pathname);
459 |   if (ext !== '') {
460 |     throw new Error(`Pathname should not have an extension: ${pathname}`);
461 |   }
462 | 
463 |   // remove everything up to './routes/' to only capture the pathnames we care about
464 |   let relativePath = pathname.replace(`${routesPath}/`, '');
465 |   let segments = relativePath.split('/');
466 |   segments.pop(); // remove the last segment since we only want ancestor pathnames
467 | 
468 |   return segments.map((s) => path.join(routesPath, s));
469 | }
470 | 
471 | /**
472 |  * Takes a pathname and returns the appropriate stylesheet (.css) file pathname
473 |  * @param {string} pathname
474 |  */
475 | function getCssPathname(pathname) {
476 |   // Remove everything up to './routes/' to only capture the pathnames we care about
477 |   let relativePath = pathname.replace(`${routesPath}/`, '');
478 |   // Ensure extension is removed—regex taken from https://stackoverflow.com/a/4250408
479 |   let extensionlessPathname = relativePath.replace(/\.[^/.]+$/, '');
480 |   return path.join(stylesRoutesPath, `${extensionlessPathname}.css`);
481 | }
482 | 
483 | /**
484 |  * Compares 2 sets to see if they contain the same elements
485 |  * @param {Set<unknown>} set1
486 |  * @param {Set<unknown>} set2
487 |  * @returns {boolean} True if the sets contain the same elements
488 |  */
489 | function areSetsEqual(set1, set2) {
490 |   if (set1.size !== set2.size) {
491 |     return false;
492 |   }
493 |   for (let item of set1) {
494 |     if (!set2.has(item)) {
495 |       return false;
496 |     }
497 |   }
498 |   return true;
499 | }
500 | 
501 | /**
502 |  * Returns a rounded difference between a timestamp and the current time
503 |  * @param {*} t0 number
504 |  */
505 | function millisecondsFromTimestamp(t0) {
506 |   return Math.round(performance.now() - t0);
507 | }
508 | 
509 | // #endregion
510 | 


--------------------------------------------------------------------------------