Remix

.vscode/extensions.json

@@ -1,9 +1,8 @@
 {
-    "recommendations": [
-		"ms-azuretools.vscode-dapr",
-		"ms-azuretools.vscode-docker",
-		"ms-dotnettools.csharp",
-		"ms-vscode.azurecli",
-		"ms-azuretools.vscode-bicep"
-    ]
-}
+  "recommendations": [
+    "ms-azuretools.vscode-docker",
+    "ms-vscode.azurecli",
+    "ms-azuretools.vscode-bicep",
+    "bradlc.vscode-tailwindcss"
+  ]
+}

react-router-app/.dockerignore

@@ -0,0 +1,4 @@
+.react-router
+build
+node_modules
+README.md

react-router-app/.gitignore

@@ -0,0 +1,6 @@
+.DS_Store
+/node_modules/
+
+# React Router
+/.react-router/
+/build/

react-router-app/Dockerfile

@@ -0,0 +1,22 @@
+FROM node:20-alpine AS development-dependencies-env
+COPY . /app
+WORKDIR /app
+RUN npm ci
+
+FROM node:20-alpine AS production-dependencies-env
+COPY ./package.json package-lock.json /app/
+WORKDIR /app
+RUN npm ci --omit=dev
+
+FROM node:20-alpine AS build-env
+COPY . /app/
+COPY --from=development-dependencies-env /app/node_modules /app/node_modules
+WORKDIR /app
+RUN npm run build
+
+FROM node:20-alpine
+COPY ./package.json package-lock.json /app/
+COPY --from=production-dependencies-env /app/node_modules /app/node_modules
+COPY --from=build-env /app/build /app/build
+WORKDIR /app
+CMD ["npm", "run", "start"]

react-router-app/Dockerfile.bun

@@ -0,0 +1,25 @@
+FROM oven/bun:1 AS dependencies-env
+COPY . /app
+
+FROM dependencies-env AS development-dependencies-env
+COPY ./package.json bun.lockb /app/
+WORKDIR /app
+RUN bun i --frozen-lockfile
+
+FROM dependencies-env AS production-dependencies-env
+COPY ./package.json bun.lockb /app/
+WORKDIR /app
+RUN bun i --production
+
+FROM dependencies-env AS build-env
+COPY ./package.json bun.lockb /app/
+COPY --from=development-dependencies-env /app/node_modules /app/node_modules
+WORKDIR /app
+RUN bun run build
+
+FROM dependencies-env
+COPY ./package.json bun.lockb /app/
+COPY --from=production-dependencies-env /app/node_modules /app/node_modules
+COPY --from=build-env /app/build /app/build
+WORKDIR /app
+CMD ["bun", "run", "start"]

react-router-app/Dockerfile.pnpm

@@ -0,0 +1,26 @@
+FROM node:20-alpine AS dependencies-env
+RUN npm i -g pnpm
+COPY . /app
+
+FROM dependencies-env AS development-dependencies-env
+COPY ./package.json pnpm-lock.yaml /app/
+WORKDIR /app
+RUN pnpm i --frozen-lockfile
+
+FROM dependencies-env AS production-dependencies-env
+COPY ./package.json pnpm-lock.yaml /app/
+WORKDIR /app
+RUN pnpm i --prod --frozen-lockfile
+
+FROM dependencies-env AS build-env
+COPY ./package.json pnpm-lock.yaml /app/
+COPY --from=development-dependencies-env /app/node_modules /app/node_modules
+WORKDIR /app
+RUN pnpm build
+
+FROM dependencies-env
+COPY ./package.json pnpm-lock.yaml /app/
+COPY --from=production-dependencies-env /app/node_modules /app/node_modules
+COPY --from=build-env /app/build /app/build
+WORKDIR /app
+CMD ["pnpm", "start"]

react-router-app/README.md

@@ -0,0 +1,100 @@
+# Welcome to React Router!
+
+A modern, production-ready template for building full-stack React applications using React Router.
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/remix-run/react-router-templates/tree/main/default)
+
+## Features
+
+- 🚀 Server-side rendering
+- ⚡️ Hot Module Replacement (HMR)
+- 📦 Asset bundling and optimization
+- 🔄 Data loading and mutations
+- 🔒 TypeScript by default
+- 🎉 TailwindCSS for styling
+- 📖 [React Router docs](https://reactrouter.com/)
+
+## Getting Started
+
+### Installation
+
+Install the dependencies:
+
+```bash
+npm install
+```
+
+### Development
+
+Start the development server with HMR:
+
+```bash
+npm run dev
+```
+
+Your application will be available at `http://localhost:5173`.
+
+## Building for Production
+
+Create a production build:
+
+```bash
+npm run build
+```
+
+## Deployment
+
+### Docker Deployment
+
+This template includes three Dockerfiles optimized for different package managers:
+
+- `Dockerfile` - for npm
+- `Dockerfile.pnpm` - for pnpm
+- `Dockerfile.bun` - for bun
+
+To build and run using Docker:
+
+```bash
+# For npm
+docker build -t my-app .
+
+# For pnpm
+docker build -f Dockerfile.pnpm -t my-app .
+
+# For bun
+docker build -f Dockerfile.bun -t my-app .
+
+# Run the container
+docker run -p 3000:3000 my-app
+```
+
+The containerized application can be deployed to any platform that supports Docker, including:
+
+- AWS ECS
+- Google Cloud Run
+- Azure Container Apps
+- Digital Ocean App Platform
+- Fly.io
+- Railway
+
+### DIY Deployment
+
+If you're familiar with deploying Node applications, the built-in app server is production-ready.
+
+Make sure to deploy the output of `npm run build`
+
+```
+├── package.json
+├── package-lock.json (or pnpm-lock.yaml, or bun.lockb)
+├── build/
+│   ├── client/    # Static assets
+│   └── server/    # Server-side code
+```
+
+## Styling
+
+This template comes with [Tailwind CSS](https://tailwindcss.com/) already configured for a simple default starting experience. You can use whatever CSS framework you prefer.
+
+---
+
+Built with ❤️ using React Router.

react-router-app/app/Home.css

@@ -0,0 +1,10 @@
+main img
+{
+    max-height: 400px;
+    transition: 0.20s ease-out;
+}
+
+    main img:hover
+    {
+        transform: scale(0.9);
+    }

react-router-app/app/Home.tsx

@@ -0,0 +1,110 @@
+import type { Route } from "./+types/Home";
+import { Link } from "react-router";
+import house from "./images/house.jpg";
+// import lightForTheWorldSmall from './images/light-for-the-world-small.jpg';
+// import oComeEmmanuelSmall from './images/o-come-emmanuel-small.jpg';
+import myPeaceIGiveYou from "./images/my-peace-i-give-you.avif";
+import { myPeaceIGiveYouPath } from "./main/MyPeaceIGiveYou";
+import "./Home.css";
+import { Footer } from "./components/Footer";
+
+export function meta({}: Route.MetaArgs) {
+  return [
+    { title: "Poor Clares of Arundel" },
+    {
+      name: "description",
+      content: "Welcome to the website of the Poor Clares of Arundel!",
+    },
+  ];
+}
+
+// https://schema.org/CatholicChurch
+const catholicChurchStructuredData = {
+  "@context": "https://schema.org",
+  "@type": "CatholicChurch",
+  address: {
+    "@type": "PostalAddress",
+    addressLocality: "Crossbush, Arundel",
+    postalCode: "BN18 9PJ",
+    streetAddress: "Convent of Poor Clares",
+  },
+  email: "[email protected]",
+  hasMap: "https://goo.gl/maps/RYAL6WvbkAadDrTF9",
+  telephone: "+441903882536",
+  name: "Convent of Poor Clares",
+  description:
+    "We are sisters, who share prayer, work, laughter and struggles, and live according to the Form of Life drawn up by St Clare of Assisi in 1253.",
+  image: house,
+};
+
+export default function Home() {
+  return (
+    <>
+      <script type="application/ld+json">
+        {JSON.stringify(catholicChurchStructuredData)}
+      </script>
+      <div className="text-center">
+        <div className="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
+          <header className="masthead mb-auto">
+            <div className="inner">
+              <h2 className="masthead-brand">
+                Welcome to the Poor Clares of Arundel
+              </h2>
+            </div>
+          </header>
+
+          <main role="main" className="flex space-x-2 justify-center">
+            {/* {new Date().getMonth() !== 11 ? (
+                    <Link to="/light-for-the-world" title="We made an album...">
+                        <img
+                            id="light-of-the-world"
+                            src={lightForTheWorldSmall}
+                            alt="We made an album..."
+                            className="img-fluid img-rounded"
+                        />
+                    </Link>
+                ) : (
+                    <Link to="/light-for-the-world" title="We made a Christmas song...">
+                        <img
+                            id="o-come-emmanuel"
+                            src={oComeEmmanuelSmall}
+                            alt="We made an album..."
+                            className="img-fluid img-rounded"
+                        />
+                    </Link>
+                )} */}
+
+            <Link to={myPeaceIGiveYouPath} title="We made an album...">
+              <img
+                id="my-peace-i-give-you"
+                src={myPeaceIGiveYou}
+                alt="We made an album..."
+                className="img-fluid img-rounded"
+              />
+            </Link>
+
+            <Link to="/us" title="Learn more about us...">
+              <img
+                id="house"
+                src={house}
+                alt="Click here to enter..."
+                className="img-fluid img-rounded"
+              />
+            </Link>
+          </main>
+
+          <p className="lead">
+            We are sisters, who share prayer, work, laughter and struggles,
+            <br />
+            and live according to the Form of Life drawn up by St Clare of
+            Assisi in 1253.
+          </p>
+          <p className="lead">
+            <Link to="/us">Learn more about us...</Link>
+          </p>
+        </div>
+      </div>
+      <Footer />
+    </>
+  );
+}

react-router-app/app/app.css

@@ -0,0 +1,12 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+html,
+body {
+  @apply bg-white dark:bg-gray-950;
+
+  /* @media (prefers-color-scheme: dark) {
+    color-scheme: dark;
+  } */
+}

react-router-app/app/components/Footer.css

@@ -0,0 +1,3 @@
+footer {
+    font-size: 0.9em;
+}

react-router-app/app/components/Footer.tsx

@@ -0,0 +1,28 @@
+import { faFacebook } from '@fortawesome/free-brands-svg-icons';
+import { faEnvelope } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import './Footer.css';
+
+export function Footer() {
+    return (
+        // <div className="text-center">
+        // <div className="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
+
+        <footer className="cover-container d-flex w-100 flex-column text-center mastfoot mt-auto">
+            <div className="inner">
+                <p>
+                    © Community of Poor Clares, Arundel 2014-{new Date().getFullYear()}
+                    <br /> Convent of Poor Clares, Crossbush, Arundel, BN18 9PJ
+                </p>
+                <p>
+                    <a href="mailto:[email protected]">
+                        <FontAwesomeIcon icon={faEnvelope} /> [email protected]
+                    </a>{' '}
+                    <a href="https://www.facebook.com/poorclaresarundel">
+                        <FontAwesomeIcon icon={faFacebook} /> Facebook
+                    </a>
+                </p>
+            </div>
+        </footer>
+    );
+}

react-router-app/app/components/Loading.css

@@ -0,0 +1,6 @@
+.loader {
+    color: #964E02 !important;
+    text-align: center;
+    margin-top: 40vh;
+}
+