feat(examples): rvc website page without browser layout

examples/win95/src/App.tsx

@@ -17,7 +17,6 @@ import { Toaster } from "react-hot-toast";
 import { CommonLayout } from "@/components/layout";
 import { AboutWindow } from "@/components/about-window";
 import { VideoClubLayout } from "@/components/layout";
-import { RVCWebsiteCatalogPage } from "@/components/rvc-website/catalog";
 import { UnsupportedResolutionHandler } from "@/components/unsupported-resolution-handler";
 import { supabaseClient } from "@/supabase-client";
 import { HomePage } from "@/routes/home-page";
@@ -37,6 +36,7 @@ import {
   VideoClubSettingsPage,
 } from "@/routes/video-club";
 import {
+  RVCWebsiteCatalogPage,
   RVCWebsitePageHome,
   RVCWebsitePageTitleDetails,
 } from "@/routes/rvc-website";
@@ -188,7 +188,7 @@ const App = () => {
                     </Route>
                   </Route>
 
-                  <Route path="rvc-website" element={<Outlet />}>
+                  <Route path="browser/rvc-website" element={<Outlet />}>
                     <Route index element={<RVCWebsitePageHome />} />
                     <Route
                       path="titles/:titleId"
@@ -202,6 +202,29 @@ const App = () => {
                   </Route>
                 </Route>
 
+                <Route path="rvc-website" element={<Outlet />}>
+                  <Route
+                    index
+                    element={<Navigate to="/rvc-website/index.html" />}
+                  />
+                  <Route
+                    path="index.html"
+                    element={<RVCWebsitePageHome withBrowser={false} />}
+                  />
+                  <Route
+                    path="titles/:titleId/index.html"
+                    element={<RVCWebsitePageTitleDetails withBrowser={false} />}
+                  />
+                  <Route
+                    path="catalog/index.html"
+                    element={<RVCWebsiteCatalogPage withBrowser={false} />}
+                  />
+                  <Route
+                    path="catalog/:catalogLetter/index.html"
+                    element={<RVCWebsiteCatalogPage withBrowser={false} />}
+                  />
+                </Route>
+
                 <Route
                   element={
                     <Authenticated key="auth-pages" fallback={<Outlet />}>

examples/win95/src/components/rvc-website/index.ts

@@ -1,3 +1 @@
-export { CatalogsList } from "./catalog";
-export { RVCWebsiteLinks } from "./links";
 export { RVCWebsiteLayout } from "./layout";

examples/win95/src/components/rvc-website/layout.tsx

@@ -1,13 +1,68 @@
 import type { PropsWithChildren } from "react";
 import styled from "styled-components";
-import { RVCWebsiteLinks } from "@/components/rvc-website";
+import { Link as ReactRouterLink } from "react-router-dom";
 import { getImagesUrl } from "@/utils/get-cdn-url";
 
-export const RVCWebsiteLayout = ({ children }: PropsWithChildren) => {
+type Props = {
+  withBrowser?: boolean;
+};
+
+export const RVCWebsiteLayout = ({
+  withBrowser = true,
+  children,
+}: PropsWithChildren<Props>) => {
   return (
     <Page>
       <Container>
-        <RVCWebsiteLinks />
+        <ContainerLinkList>
+          <Link>
+            <ReactRouterLink
+              to={
+                withBrowser ? "/browser/rvc-website" : "/rvc-website/index.html"
+              }
+            >
+              Home
+            </ReactRouterLink>
+          </Link>
+          <Link>
+            <ReactRouterLink
+              to={
+                withBrowser
+                  ? "/browser/rvc-website/catalog"
+                  : "/rvc-website/catalog/index.html"
+              }
+            >
+              Our Catalog
+            </ReactRouterLink>
+          </Link>
+          <Link>
+            <a
+              href="https://refine.dev/"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Refine Home
+            </a>
+          </Link>
+          <Link>
+            <a
+              href="https://refine.dev/docs/"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Documentation
+            </a>
+          </Link>
+          <Link>
+            <a
+              href="https://refine.dev/tutorial/essentials/intro/"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Tutorial
+            </a>
+          </Link>
+        </ContainerLinkList>
         {children}
       </Container>
     </Page>
@@ -29,3 +84,34 @@ const Container = styled.div`
   flex-direction: column;
   align-items: center;
 `;
+
+const ContainerLinkList = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: max-content;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 2px;
+  border: 2px solid;
+  gap: 2px;
+  border-top-color: #b5b5b5;
+  border-left-color: #b5b5b5;
+  border-bottom-color: #707070;
+  border-right-color: #707070;
+`;
+
+const Link = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: max-content;
+  padding: 6px 12px;
+  color: #00ccff;
+  font-weight: bold;
+  border: 2px solid;
+  border-top-color: #707070;
+  border-left-color: #707070;
+  border-bottom-color: #b5b5b5;
+  border-right-color: #b5b5b5;
+`;

examples/win95/src/components/unsupported-resolution-handler/index.tsx

@@ -83,7 +83,11 @@ export const UnsupportedResolutionHandler = ({
           }}
         >
           Resolution not supported.
-          <div>
+          <div
+            style={{
+              lineHeight: "32px",
+            }}
+          >
             This website is best browsed at resolutions 1024x768 or higher.
           </div>
         </h2>

examples/win95/src/routes/home-page/index.tsx

@@ -63,7 +63,7 @@ const links = [
   },
   {
     label: "RVC Website",
-    link: "/rvc-website",
+    link: "/browser/rvc-website",
     iconURL: `${getImagesUrl("/rvc-website-app-icon.png")}`,
   },
 ];

examples/win95/src/components/rvc-website/catalog.tsx → examples/win95/src/routes/rvc-website/catalog.tsx

@@ -1,3 +1,4 @@
+import { Fragment } from "react";
 import { useList } from "@refinedev/core";
 import { Link, useNavigate, useParams } from "react-router-dom";
 import { Hourglass } from "react95";
@@ -7,7 +8,11 @@ import { RVCWebsiteLayout } from "@/components/rvc-website";
 import { RefineBanner } from "@/components/refine-banner";
 import type { VideoTitle } from "@/types";
 
-export const RVCWebsiteCatalogPage = () => {
+type Props = {
+  withBrowser?: boolean;
+};
+
+export const RVCWebsiteCatalogPage = ({ withBrowser = true }: Props) => {
   const navigate = useNavigate();
   const { catalogLetter } = useParams();
 
@@ -22,20 +27,25 @@ export const RVCWebsiteCatalogPage = () => {
     ? `http://www.refinevideoclub.geocities.com/catalog/${catalogLetter}.html`
     : "http://www.refinevideoclub.geocities.com/catalog";
 
+  const Wrapper = withBrowser ? Browser : Fragment;
+
   return (
-    <Browser
+    <Wrapper
       title="RVC Website"
       onClose={() => navigate("/")}
       address={address}
     >
-      <RVCWebsiteLayout>
+      <RVCWebsiteLayout withBrowser={withBrowser}>
         <Container>
           <div
             style={{
               marginTop: "64px",
             }}
           />
-          <CatalogsList selectedLetter={catalogLetter} />
+          <CatalogsList
+            selectedLetter={catalogLetter}
+            withBrowser={withBrowser}
+          />
           {titles.length === 0 && !isFetching && (
             <div
               style={{
@@ -62,7 +72,11 @@ export const RVCWebsiteCatalogPage = () => {
               {titles.map((title) => (
                 <CatalogListItem
                   key={title.id}
-                  to={`/rvc-website/titles/${title.id}`}
+                  to={
+                    withBrowser
+                      ? `/browser/rvc-website/titles/${title.id}`
+                      : `/rvc-website/titles/${title.id}/index.html`
+                  }
                 >
                   <CatalogListMarkerContainer>
                     <CatalogListMarker1 />
@@ -81,13 +95,14 @@ export const RVCWebsiteCatalogPage = () => {
           />
         </Container>
       </RVCWebsiteLayout>
-    </Browser>
+    </Wrapper>
   );
 };
 
 export const CatalogsList = ({
   selectedLetter,
-}: { selectedLetter?: string }) => {
+  withBrowser = true,
+}: { selectedLetter?: string; withBrowser?: boolean }) => {
   return (
     <>
       <CatalogTitle>Our Catalog</CatalogTitle>
@@ -99,7 +114,11 @@ export const CatalogsList = ({
                 width: "100%",
                 height: "100%",
               }}
-              to={`/rvc-website/catalog/${letter}`}
+              to={
+                withBrowser
+                  ? `/browser/rvc-website/catalog/${letter}`
+                  : `/rvc-website/catalog/${letter}/index.html`
+              }
             >
               {letter}
             </Link>