blog: NOTAM: Infrastructure - CDN

package.json

@@ -8,17 +8,17 @@
     "@fortawesome/fontawesome-svg-core": "^1.2.36",
     "@fortawesome/free-brands-svg-icons": "^5.15.4",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
-    "@fortawesome/react-fontawesome": "^0.1.15",
-    "@tabler/icons": "^1.63.0",
+    "@fortawesome/react-fontawesome": "^0.1.19",
+    "@tabler/icons": "^1.119.0",
     "gray-matter": "^4.0.3",
-    "next": "^12.1.4",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
+    "next": "^12.3.4",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "reading-time": "^1.5.0",
-    "remark": "^14.0.1",
-    "remark-html": "^15.0.1",
-    "swiper": "^6.7.5",
-    "typescript": "^4.6.3"
+    "remark": "^14.0.3",
+    "remark-html": "^15.0.2",
+    "swiper": "^6.8.4",
+    "typescript": "^4.9.5"
   },
   "scripts": {
     "start": "next start",
@@ -41,24 +41,24 @@
     ]
   },
   "devDependencies": {
-    "@flybywiresim/eslint-config": "~0.2.3",
+    "@flybywiresim/eslint-config": "^0.2.3",
     "@flybywiresim/tailwind-config": "^0.5.2",
-    "@tailwindcss/typography": "^0.5.2",
-    "@types/node": "^17.0.23",
-    "@types/react": "^17.0.43",
-    "@types/react-dom": "^17.0.14",
+    "@tailwindcss/typography": "^0.5.10",
+    "@types/node": "^17.0.45",
+    "@types/react": "^17.0.73",
+    "@types/react-dom": "^17.0.25",
     "@types/uuid": "^8.3.4",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",
-    "autoprefixer": "^10.2.5",
+    "autoprefixer": "^10.4.16",
     "eslint": "^7.32.0",
-    "eslint-config-next": "^12.1.4",
-    "eslint-plugin-react": "^7.29.4",
-    "eslint-plugin-tailwindcss": "^3.5.0",
-    "node-html-to-image": "^3.2.4",
-    "postcss": "^8.2.10",
-    "sass": "^1.49.10",
-    "tailwindcss": "^3.0.23",
+    "eslint-config-next": "^12.3.4",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-tailwindcss": "^3.13.0",
+    "node-html-to-image": "^3.4.0",
+    "postcss": "^8.4.32",
+    "sass": "^1.69.5",
+    "tailwindcss": "^3.4.0",
     "uuid": "^8.3.2"
   }
 }

src/components/home/A320Header.tsx

@@ -13,15 +13,15 @@ export const A320Header = () => {
     return (
         <header>
             <video
-                className="object-cover fixed -z-10 w-screen h-screen opacity-10"
+                className="fixed -z-10 h-screen w-screen object-cover opacity-10"
                 src="https://cdn.flybywiresim.com/assets/website/video/A32NX.mp4"
                 playsInline
                 autoPlay
                 muted
                 loop
             />
-            <Container className="relative max-w-6xl min-h-screen">
-                <div className="absolute bottom-0 left-0 h-2/3 px-page">
+            <Container className="relative min-h-screen max-w-6xl">
+                <div className="px-page absolute bottom-0 left-0 h-2/3">
                     <h1 className="text-8xl font-bold">
                         <span className="text-teal">A32</span>
                         <span className="text-blue">N</span>
@@ -31,17 +31,17 @@ export const A320Header = () => {
                         A community built and maintained project aiming to provide high quality and detailed aircraft
                         for Microsoft Flight Simulator.
                     </p>
-                    <div className="flex gap-4 my-5 max-w-md">
+                    <div className="my-5 flex max-w-md gap-4">
                         <Button
                             onClick={handleClick}
-                            className="w-40 hover:text-blue-light bg-blue-light hover:bg-white border-2 border-blue-light"
+                            className="w-40 border-2 border-blue-light bg-blue-light hover:bg-white hover:text-blue-light"
                         >
                             Installer
                         </Button>
 
                         <Link href="/a32nx">
                             <Button
-                                className="w-44 text-blue-light hover:text-blue-light hover:bg-white border-2 border-blue-light"
+                                className="w-44 border-2 border-blue-light text-blue-light hover:bg-white hover:text-blue-light"
                             >
                                 Learn More
                             </Button>

src/components/home/Community.tsx

@@ -49,15 +49,15 @@ export const Community = () => {
         return () => clearInterval(interval);
     }, []);
     return (
-        <section id="community" className="flex flex-col justify-between items-center text-blue-dark-contrast bg-gray-50 lg:flex-row">
-            <Container className="flex flex-col py-12 max-w-6xl lg:px-24">
-                <span className="mb-3 w-24 h-2 bg-teal-light-contrast rounded-full" />
+        <section id="community" className="flex flex-col items-center justify-between bg-gray-50 text-blue-dark-contrast lg:flex-row">
+            <Container className="flex max-w-6xl flex-col py-12 lg:px-24">
+                <span className="mb-3 h-2 w-24 rounded-full bg-teal-light-contrast" />
                 <h1>Community Insights</h1>
                 <p className="max-w-prose text-gray-800">
                     Discover the extensive community behind every FlyByWire Simulations aircraft - a vibrant and active online group that prioritises collaborative work and openness.
                 </p>
 
-                <div className="grid grid-cols-2 gap-y-8 my-6 sm:grid-cols-4">
+                <div className="my-6 grid grid-cols-2 gap-y-8 sm:grid-cols-4">
                     <Statistic statCount={liveFlights} statName="Live Flights" />
                     <Statistic statCount={commitCount} statName="Commits" />
                     <Statistic statCount={contributorCount} statName="Contributors" />
@@ -67,7 +67,7 @@ export const Community = () => {
                 <div className="my-8">
                     <Card bgColour="gray-100" className="border-discord shadow-lg">
                         <CardTitle>
-                            <span className="flex justify-center items-center p-2 mr-2 bg-discord rounded-xl">
+                            <span className="mr-2 flex items-center justify-center rounded-xl bg-discord p-2">
                                 <Image src="/svg/discordLogo.svg" width={23} height={23} />
                             </span>
                             Discord
@@ -78,18 +78,18 @@ export const Community = () => {
                         </CardBody>
 
                         <a
-                            className="self-center py-2 px-3 text-xl font-semibold text-white bg-discord hover:bg-discord-dark rounded-xl transition"
+                            className="self-center rounded-xl bg-discord px-3 py-2 text-xl font-semibold text-white transition hover:bg-discord-dark"
                             href="https://discord.gg/flybywire"
                             target="_blank"
                             rel="noreferrer"
                         >
                             Join the Community
-                            <IconArrowRight className="inline-flex mb-1 ml-1" size={20} stroke={2} />
+                            <IconArrowRight className="mb-1 ml-1 inline-flex" size={20} stroke={2} />
                         </a>
                     </Card>
                 </div>
             </Container>
-            <div className="relative z-10 w-full h-144 lg:w-1/2 lg:h-200">
+            <div className="relative z-10 h-144 w-full lg:h-200 lg:w-1/2">
                 <MapDisplay refreshInterval={mapRefreshInterval} disableMenu disableWeather={false} disableScroll forceTileset="carto-light" />
             </div>
         </section>

src/components/home/Donate.tsx

@@ -4,9 +4,9 @@ import Container from '../utils/Container';
 export const Donate = () => (
     <section className="bg-blue-darker">
         <div className="relative">
-            <img className="object-cover absolute w-full h-full opacity-10" src="/img/donate.jpg" alt="" />
+            <img className="absolute h-full w-full object-cover opacity-10" src="/img/donate.jpg" alt="" />
 
-            <Container className="flex relative top-0 flex-col items-center py-12 max-w-7xl lg:items-start">
+            <Container className="relative top-0 flex max-w-7xl flex-col items-center py-12 lg:items-start">
                 <div className="max-w-4xl text-center lg:text-left">
                     <h1 className="text-teal">Donate</h1>
                     <p>
@@ -17,13 +17,13 @@ export const Donate = () => (
                         We use Open Collective to transparently manage our donations and expenses, which means you can see how we utilize donated funds at any time.
                     </p>
                 </div>
-                <div className="flex flex-col items-center space-y-3 space-x-4 text-center md:space-y-0 lg:flex-row lg:items-start lg:text-left">
+                <div className="flex flex-col items-center space-x-4 space-y-3 text-center md:space-y-0 lg:flex-row lg:items-start lg:text-left">
                     <a href="https://opencollective.com/flybywire/" target="_blank" rel="noreferrer">
-                        <Button className="w-40 hover:text-teal-light-contrast bg-teal-light-contrast hover:bg-white border-2 border-teal-light-contrast">
+                        <Button className="w-40 border-2 border-teal-light-contrast bg-teal-light-contrast hover:bg-white hover:text-teal-light-contrast">
                             Donate
                         </Button>
                     </a>
-                    <em className="self-center max-w-prose text-teal-100">
+                    <em className="max-w-prose self-center text-teal-100">
                         *No profit is generated from donations. Donating does not guarantee access to additional content nor its exclusivity if such content is ever given.
                     </em>
                 </div>

src/components/home/Installer.tsx

@@ -7,10 +7,10 @@ import Container from '../utils/Container';
 export const installerRef = createRef<HTMLDivElement>();
 
 export const Installer = forwardRef(() => (
-    <section ref={installerRef} className="overflow-hidden py-12 bg-blue-dark">
+    <section ref={installerRef} className="overflow-hidden bg-blue-dark py-12">
         <Container className="flex flex-col items-center 3xl:flex-row 3xl:justify-center">
             <div className="mb-4 text-center 2xl:mr-12 3xl:text-left">
-                <IconPackage className="p-2 mx-auto mb-4 bg-blue-light-contrast rounded-xl 3xl:mx-0" size={55} stroke={1.5} />
+                <IconPackage className="mx-auto mb-4 rounded-xl bg-blue-light-contrast p-2 3xl:mx-0" size={55} stroke={1.5} />
                 <h1 className="font-extrabold">
                     Custom-built Installer
                 </h1>
@@ -20,12 +20,12 @@ export const Installer = forwardRef(() => (
                     proper folder.
                 </p>
                 <a href="https://api.flybywiresim.com/installer">
-                    <Button className="mt-8 w-40 hover:text-teal-light-contrast bg-teal-light-contrast hover:bg-white border-2 border-teal-light-contrast">
+                    <Button className="mt-8 w-40 border-2 border-teal-light-contrast bg-teal-light-contrast hover:bg-white hover:text-teal-light-contrast">
                         Download
                     </Button>
                 </a>
             </div>
-            <div className="-mb-[125px] w-11/12 xl:w-5/6 3xl:-mb-3 3xl:w-320">
+            <div className="mb-[-125px] w-11/12 xl:w-5/6 3xl:-mb-3 3xl:w-320">
                 <Image
                     src="/img/InstallerScreenshot.png"
                     alt="Installer"

src/components/home/PartnerSection.tsx

@@ -18,7 +18,7 @@ export const PartnerImage = (props: ImageProps) => (
 );
 
 export const Partner = (props: PropsWithChildren<PartnerProps>) => (
-    <span id={props.name} className={`flex justify-center items-center ${props.className}`}>
+    <span id={props.name} className={`flex items-center justify-center ${props.className}`}>
         <a href={props.path} target="_blank" rel="noreferrer">
             {props.children}
         </a>
@@ -27,7 +27,7 @@ export const Partner = (props: PropsWithChildren<PartnerProps>) => (
 
 export const PartnerSection = () => (
     <section className="bg-blue-dark">
-        <Container className="grid grid-cols-1 gap-x-16 max-w-screen-2xl md:grid-cols-2 lg:grid-cols-4">
+        <Container className="grid max-w-screen-2xl grid-cols-1 gap-x-16 md:grid-cols-2 lg:grid-cols-4">
             <Partner name="Flightsim.to" path="https://flightsim.to/">
                 <PartnerImage src="/img/partners/flightsimto.png" />
             </Partner>

src/components/projects/A32NX/Download.tsx

@@ -11,12 +11,12 @@ export const Download = ({ expOnHold }: { expOnHold?: boolean }) => {
 
     return (
         <section id="download" className="relative bg-blue-dark-contrast">
-            <div className="py-14 px-10 m-auto w-full lg:w-11/12 2xl:w-4/6">
+            <div className="m-auto w-full px-10 py-14 lg:w-11/12 2xl:w-4/6">
                 <div className="flex flex-col lg:flex-row">
-                    <div className="w-full lg:pr-12 lg:w-3/5">
-                        <div className="w-1/2 text-left divide-y divide-gray-500 2xl:w-1/4">
-                            <h2 className="text-base font-medium tracking-widest text-blue-200 uppercase">READY TO FLY?</h2>
-                            <p className="pt-3 mt-3 text-5xl font-medium text-blue-light">
+                    <div className="w-full lg:w-3/5 lg:pr-12">
+                        <div className="w-1/2 divide-y divide-gray-500 text-left 2xl:w-1/4">
+                            <h2 className="text-base font-medium uppercase tracking-widest text-blue-200">READY TO FLY?</h2>
+                            <p className="mt-3 pt-3 text-5xl font-medium text-blue-light">
                                 Download
                             </p>
                         </div>
@@ -26,59 +26,59 @@ export const Download = ({ expOnHold }: { expOnHold?: boolean }) => {
                             or you can download using standalone installations.
                         </p>
 
-                        <ul className="pt-7 pl-5 -m-2 text-lg list-disc text-gray-200">
-                            <li className="pl-2 ml-2">Integrates seamlessly into Microsoft Flight Simulator - no external programs required.</li>
-                            <li className="pl-2 ml-2">Safe, trustworthy, and constantly updated to assure nothing is broken.</li>
-                            <li className="pl-2 ml-2">One click install, neatly organized into one compact folder.</li>
+                        <ul className="-m-2 list-disc pl-5 pt-7 text-lg text-gray-200">
+                            <li className="ml-2 pl-2">Integrates seamlessly into Microsoft Flight Simulator - no external programs required.</li>
+                            <li className="ml-2 pl-2">Safe, trustworthy, and constantly updated to assure nothing is broken.</li>
+                            <li className="ml-2 pl-2">One click install, neatly organized into one compact folder.</li>
                         </ul>
                     </div>
-                    <div className="flex flex-col w-full divide-y divide-gray-500 lg:w-2/5">
+                    <div className="flex w-full flex-col divide-y divide-gray-500 lg:w-2/5">
                         {/* Installer */}
-                        <div className="pt-16 pb-8 lg:pt-0">
+                        <div className="pb-8 pt-16 lg:pt-0">
                             <span className="text-4xl text-blue-100">Installer</span>
 
-                            <p className="mt-4 mb-6 max-w-prose">
+                            <p className="mb-6 mt-4 max-w-prose">
                                 Our easy-to-use installer is the easiest way to get started with our addons. Simply launch and install any addon you want, with only two clicks.
                             </p>
 
                             <a href="https://api.flybywiresim.com/installer">
-                                <Button className="float-right w-40 font-bold bg-green-500 hover:bg-green-700">Download</Button>
+                                <Button className="float-right w-40 bg-green-500 font-bold hover:bg-green-700">Download</Button>
                             </a>
                         </div>
 
                         {/* Direct Download */}
                         <div className="pt-7">
                             <span className="text-2xl text-blue-100">Direct Download</span>
-                            <p className="mt-4 mb-6 max-w-prose">
+                            <p className="mb-6 mt-4 max-w-prose">
                                 If you prefer a direct download, the following links are available.
                             </p>
 
                             <div className="divide-y divide-gray-700">
-                                <div className="flex flex-row justify-between items-center mb-5">
+                                <div className="mb-5 flex flex-row items-center justify-between">
                                     <span className="text-xl text-gray-300">Stable Release</span>
                                     <a href={getDownloadLink(urls.stable)}>
-                                        <Button className="float-right w-40 font-bold bg-green-500 hover:bg-green-700">Download</Button>
+                                        <Button className="float-right w-40 bg-green-500 font-bold hover:bg-green-700">Download</Button>
                                     </a>
                                 </div>
-                                <div className="flex flex-row justify-between items-center pt-5 mb-5">
+                                <div className="mb-5 flex flex-row items-center justify-between pt-5">
                                     <span className="text-xl text-gray-300">Development Build</span>
                                     <a href={getDownloadLink(urls.dev)}>
-                                        <Button className="float-right w-40 font-bold bg-blue-light-contrast hover:bg-blue-medium">Download</Button>
+                                        <Button className="float-right w-40 bg-blue-light-contrast font-bold hover:bg-blue-medium">Download</Button>
                                     </a>
                                 </div>
                                 <div>
-                                    <div className="flex flex-row justify-between items-center pt-5 mb-8">
+                                    <div className="mb-8 flex flex-row items-center justify-between pt-5">
                                         <span className="text-xl text-gray-300">Experimental Build</span>
                                         <a href={expOnHold ? undefined : getDownloadLink(urls.exp)}>
                                             <Button
-                                                className={`float-right w-40 font-bold bg-blue-light-contrast ${expOnHold ? 'opacity-30 cursor-not-allowed' : 'hover:bg-blue-medium'}`}
+                                                className={`float-right w-40 bg-blue-light-contrast font-bold ${expOnHold ? 'cursor-not-allowed opacity-30' : 'hover:bg-blue-medium'}`}
                                             >
                                                 Download
                                             </Button>
                                         </a>
                                     </div>
                                     {expOnHold && (
-                                        <span className="flex-wrap mb-8 text-gray-300">
+                                        <span className="mb-8 flex-wrap text-gray-300">
                                             Our Experimental Version is temporarily
                                             <a href="https://docs.flybywiresim.com/fbw-a32nx/support/exp/" className="text-blue-light">&#32;on hold&#32;</a>
                                             and all of its features have been moved to the Development Version.