commit 5860ab4c6a5a3cb688118a2ecfd4cf698c6cd65d · knotbin.com/airport

+4 -1

deno.json

···

       14
       14
        
         "exclude": ["**/_fresh/*"],

     

       15
       15
        
         "imports": {

     

       16
       16
        
           "@atproto/api": "npm:@atproto/api@^0.15.6",

     

       17
       17
       +
           "@bigmoves/atproto-oauth-client": "jsr:@bigmoves/atproto-oauth-client@^0.2.0",

     

       17
       18
        
           "@knotbin/posthog-fresh": "jsr:@knotbin/posthog-fresh@^0.1.3",

     

       18
       19
        
           "fresh": "jsr:@fresh/core@^2.0.0-alpha.33",

     

       19
       20
        
           "@fresh/plugin-tailwind": "jsr:@fresh/plugin-tailwind@^0.0.1-alpha.7",

     

       21
       21
       +
           "posthog-js": "npm:posthog-js@1.120.0",

     

       20
       22
        
           "preact": "npm:preact@^10.26.6",

     

       21
       23
        
           "@preact/signals": "npm:@preact/signals@^2.0.4",

     

       22
       24
        
           "tailwindcss": "npm:tailwindcss@^3.4.3"

     
···

       25
       27
        
           "lib": ["dom", "dom.asynciterable", "dom.iterable", "deno.ns"],

     

       26
       28
        
           "jsx": "precompile",

     

       27
       29
        
           "jsxImportSource": "preact",

     

       28
       28
       -
           "jsxPrecompileSkipElements": ["a", "img", "source", "body", "html", "head"]

     

       30
       30
       +
           "jsxPrecompileSkipElements": ["a", "img", "source", "body", "html", "head"],

     

       31
       31
       +
           "types": ["node"]

     

       29
       32
        
         },

     

       30
       33
        
         "unstable": ["kv"]

     

       31
       34
        
       }

+53

deno.lock

···

       2
       2
        
         "version": "5",

     

       3
       3
        
         "specifiers": {

     

       4
       4
        
           "jsr:@bigmoves/atproto-oauth-client@*": "0.1.0",

     

       5
       5
       +
           "jsr:@bigmoves/atproto-oauth-client@0.2": "0.2.0",

     

       5
       6
        
           "jsr:@fresh/core@^2.0.0-alpha.1": "2.0.0-alpha.33",

     

       6
       7
        
           "jsr:@fresh/core@^2.0.0-alpha.33": "2.0.0-alpha.33",

     

       7
       8
        
           "jsr:@fresh/plugin-tailwind@^0.0.1-alpha.7": "0.0.1-alpha.7",

     
···

       51
       52
        
           "npm:jose@5.9.6": "5.9.6",

     

       52
       53
        
           "npm:lucide-preact@*": "0.511.0_preact@10.26.6",

     

       53
       54
        
           "npm:postcss@8.4.35": "8.4.35",

     

       55
       55
       +
           "npm:posthog-js@*": "1.120.0",

     

       56
       56
       +
           "npm:posthog-js@1.120.0": "1.120.0",

     

       57
       57
       +
           "npm:posthog-js@^1.120.0": "1.247.0",

     

       54
       58
        
           "npm:preact-feather@*": "4.2.1_preact@10.26.6",

     

       55
       59
        
           "npm:preact-render-to-string@^6.5.11": "6.5.13_preact@10.26.6",

     

       56
       60
        
           "npm:preact@^10.25.1": "10.26.6",

     
···

       72
       76
        
               "npm:jose"

     

       73
       77
        
             ]

     

       74
       78
        
           },

     

       79
       79
       +
           "@bigmoves/atproto-oauth-client@0.2.0": {

     

       80
       80
       +
             "integrity": "5c3ca124dd52eff51dace83790779ebe48c4b41559b799e16c8750bd415f2124",

     

       81
       81
       +
             "dependencies": [

     

       82
       82
       +
               "npm:@atproto-labs/handle-resolver-node",

     

       83
       83
       +
               "npm:@atproto-labs/simple-store",

     

       84
       84
       +
               "npm:@atproto/jwk",

     

       85
       85
       +
               "npm:@atproto/oauth-client",

     

       86
       86
       +
               "npm:@atproto/oauth-types",

     

       87
       87
       +
               "npm:jose"

     

       88
       88
       +
             ]

     

       89
       89
       +
           },

     

       75
       90
        
           "@fresh/core@2.0.0-alpha.33": {

     

       76
       91
        
             "integrity": "0263ad090120cca6f814bb5914383c74f67d494e552ed33cbf58d667f12d7e9f",

     

       77
       92
        
             "dependencies": [

     
···

       699
       714
        
           "cookie@0.7.2": {

     

       700
       715
        
             "integrity": "sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w=="

     

       701
       716
        
           },

     

       717
       717
       +
           "core-js@3.42.0": {

     

       718
       718
       +
             "integrity": "sha512-Sz4PP4ZA+Rq4II21qkNqOEDTDrCvcANId3xpIgB34NDkWc3UduWj2dqEtN9yZIq8Dk3HyPI33x9sqqU5C8sr0g==",

     

       719
       719
       +
             "scripts": true

     

       720
       720
       +
           },

     

       702
       721
        
           "cross-spawn@7.0.6": {

     

       703
       722
        
             "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",

     

       704
       723
        
             "dependencies": [

     
···

       900
       919
        
               "reusify"

     

       901
       920
        
             ]

     

       902
       921
        
           },

     

       922
       922
       +
           "fflate@0.4.8": {

     

       923
       923
       +
             "integrity": "sha512-FJqqoDBR00Mdj9ppamLa/Y7vxm+PRmNWA67N846RvsoYVMKB4q3y/de5PA7gUmRMYK/8CMz2GDZQmCRN1wBcWA=="

     

       924
       924
       +
           },

     

       903
       925
        
           "fill-range@7.1.1": {

     

       904
       926
        
             "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",

     

       905
       927
        
             "dependencies": [

     
···

       1394
       1416
        
               "source-map-js"

     

       1395
       1417
        
             ]

     

       1396
       1418
        
           },

     

       1419
       1419
       +
           "posthog-js@1.120.0": {

     

       1420
       1420
       +
             "integrity": "sha512-A1FOJabDjt0mFg2ePfgqeZPUQl8WY6L+fNNfN/89gqvPoI7HmHta2hY/9tDQ+mBRHjj4nah5KK/EWqJHq69fGw==",

     

       1421
       1421
       +
             "dependencies": [

     

       1422
       1422
       +
               "fflate",

     

       1423
       1423
       +
               "preact@10.26.7"

     

       1424
       1424
       +
             ],

     

       1425
       1425
       +
             "deprecated": true

     

       1426
       1426
       +
           },

     

       1427
       1427
       +
           "posthog-js@1.247.0": {

     

       1428
       1428
       +
             "integrity": "sha512-ml7QRfNbXhEHTS/g0HML2Vfs/goZELyFoKlmraJZ9nwyoQq9l4Q/8TLV/JLIlr7/6Io/sSDAwM6xBbJ/8pVBzQ==",

     

       1429
       1429
       +
             "dependencies": [

     

       1430
       1430
       +
               "core-js",

     

       1431
       1431
       +
               "fflate",

     

       1432
       1432
       +
               "preact@10.26.7",

     

       1433
       1433
       +
               "web-vitals"

     

       1434
       1434
       +
             ]

     

       1435
       1435
       +
           },

     

       1397
       1436
        
           "preact-feather@4.2.1_preact@10.26.6": {

     

       1398
       1437
        
             "integrity": "sha512-yK5kYW64AoOkm+xTtUjwcFx0zNrqVTbwmtww8G2AmAB6f8wyQgwZgc6oRXllSYeg7q1I8VbkUpErJuKJ6Vq2eA==",

     

       1399
       1438
        
             "dependencies": [

     
···

       1620
       1659
        
           "util-deprecate@1.0.2": {

     

       1621
       1660
        
             "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="

     

       1622
       1661
        
           },

     

       1662
       1662
       +
           "web-vitals@4.2.4": {

     

       1663
       1663
       +
             "integrity": "sha512-r4DIlprAGwJ7YM11VZp4R884m0Vmgr6EAKe3P+kO0PPj3Unqyvv59rczf6UiGcb9Z8QxZVcqKNwv/g0WNdWwsw=="

     

       1664
       1664
       +
           },

     

       1623
       1665
        
           "which@2.0.2": {

     

       1624
       1666
        
             "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",

     

       1625
       1667
        
             "dependencies": [

     
···

       1651
       1693
        
             "integrity": "sha512-OdqJE9UDRPwWsrHjLN2F8bPxvwJBK22EHLWtanu0LSYr5YqzsaaW3RMgmjwr8Rypg5k+meEJdSPXJZXE/yqOMg=="

     

       1652
       1694
        
           }

     

       1653
       1695
        
         },

     

       1696
       1696
       +
         "redirects": {

     

       1697
       1697
       +
           "https://esm.sh/posthog-js": "https://esm.sh/posthog-js@1.247.0"

     

       1698
       1698
       +
         },

     

       1699
       1699
       +
         "remote": {

     

       1700
       1700
       +
           "https://esm.sh/posthog-js@1.120.0": "e7a2cb35b74bda7ed8ba7e0ee7ce53a11ebba5c3ebf9e595b0ea0168a4c20202",

     

       1701
       1701
       +
           "https://esm.sh/posthog-js@1.120.0/denonext/posthog-js.mjs": "9ca5a3b08bc4188793e010ff059fc81ad48327d0ac618d7768bdb44f4e938492",

     

       1702
       1702
       +
           "https://esm.sh/posthog-js@1.247.0": "cca238e1a47ea00f3d01a6e4bc0cf1985096ee6e0c09553e4e72ce0a0abd9955",

     

       1703
       1703
       +
           "https://esm.sh/posthog-js@1.247.0/denonext/posthog-js.mjs": "6dbdabdcce8c35240b34086133030bd3cdd8a3998fe5c42b03b57180ceb891e4"

     

       1704
       1704
       +
         },

     

       1654
       1705
        
         "workspace": {

     

       1655
       1706
        
           "dependencies": [

     

       1707
       1707
       +
             "jsr:@bigmoves/atproto-oauth-client@0.2",

     

       1656
       1708
        
             "jsr:@fresh/core@^2.0.0-alpha.33",

     

       1657
       1709
        
             "jsr:@fresh/plugin-tailwind@^0.0.1-alpha.7",

     

       1658
       1710
        
             "jsr:@knotbin/posthog-fresh@~0.1.3",

     

       1659
       1711
        
             "npm:@atproto/api@~0.15.6",

     

       1660
       1712
        
             "npm:@preact/signals@^2.0.4",

     

       1713
       1713
       +
             "npm:posthog-js@1.120.0",

     

       1661
       1714
        
             "npm:preact@^10.26.6",

     

       1662
       1715
        
             "npm:tailwindcss@^3.4.3"

     

       1663
       1716
        
           ]

+114

islands/PostHogAnalytics.tsx

···

       1
       1
       +
       import { useEffect } from "preact/hooks";

     

       2
       2
       +
       

     

       3
       3
       +
       interface PostHogConfig {

     

       4
       4
       +
         api_host: string;

     

       5
       5
       +
         [key: string]: unknown; // Allow additional optional properties

     

       6
       6
       +
       }

     

       7
       7
       +
       

     

       8
       8
       +
       interface PostHogInstance {

     

       9
       9
       +
         __SV?: number;

     

       10
       10
       +
         _i: Array<[string, PostHogConfig, string?]>;

     

       11
       11
       +
         people?: PostHogPeople;

     

       12
       12
       +
         init: (apiKey: string, config: PostHogConfig, name?: string) => void;

     

       13
       13
       +
         capture: (event: string, properties?: Record<string, unknown>) => void;

     

       14
       14
       +
         identify: (distinctId: string, properties?: Record<string, unknown>) => void;

     

       15
       15
       +
         toString: (includeStub?: number) => string;

     

       16
       16
       +
         [key: string]: unknown;

     

       17
       17
       +
       }

     

       18
       18
       +
       

     

       19
       19
       +
       interface PostHogPeople {

     

       20
       20
       +
         toString: () => string;

     

       21
       21
       +
         [key: string]: unknown;

     

       22
       22
       +
       }

     

       23
       23
       +
       

     

       24
       24
       +
       declare global {

     

       25
       25
       +
         var posthog: PostHogInstance | undefined;

     

       26
       26
       +
       }

     

       27
       27
       +
       

     

       28
       28
       +
       interface PostHogProps {

     

       29
       29
       +
         apiKey: string;

     

       30
       30
       +
         apiHost?: string;

     

       31
       31
       +
       }

     

       32
       32
       +
       

     

       33
       33
       +
       export default function PostHogAnalytics({

     

       34
       34
       +
         apiKey,

     

       35
       35
       +
         apiHost = "https://us.i.posthog.com"

     

       36
       36
       +
       }: PostHogProps) {

     

       37
       37
       +
         useEffect(() => {

     

       38
       38
       +
           // PostHog initialization script

     

       39
       39
       +
           (function(t: Document, e: PostHogInstance) {

     

       40
       40
       +
             let o: string[];

     

       41
       41
       +
             let n: number;

     

       42
       42
       +
             let p: HTMLScriptElement;

     

       43
       43
       +
             let r: HTMLScriptElement | null;

     

       44
       44
       +
       

     

       45
       45
       +
             if (e.__SV) return;

     

       46
       46
       +
       

     

       47
       47
       +
             globalThis.posthog = e;

     

       48
       48
       +
             e._i = [];

     

       49
       49
       +
             e.init = function(i: string, s: PostHogConfig, a?: string) {

     

       50
       50
       +
               function g(target: Record<string, unknown>, methodName: string) {

     

       51
       51
       +
                 const parts = methodName.split(".");

     

       52
       52
       +
                 if (2 == parts.length) {

     

       53
       53
       +
                   target = target[parts[0]] as Record<string, unknown>;

     

       54
       54
       +
                   methodName = parts[1];

     

       55
       55
       +
                 }

     

       56
       56
       +
                 target[methodName] = function() {

     

       57
       57
       +
                   (target as { push: (args: unknown[]) => void }).push([methodName].concat(Array.prototype.slice.call(arguments, 0)));

     

       58
       58
       +
                 };

     

       59
       59
       +
               }

     

       60
       60
       +
       

     

       61
       61
       +
               p = t.createElement("script");

     

       62
       62
       +
               p.type = "text/javascript";

     

       63
       63
       +
               p.crossOrigin = "anonymous";

     

       64
       64
       +
               p.async = true;

     

       65
       65
       +
               p.src = s.api_host.replace(".i.posthog.com", "-assets.i.posthog.com") + "/static/array.js";

     

       66
       66
       +
               r = t.getElementsByTagName("script")[0];

     

       67
       67
       +
               if (r && r.parentNode) {

     

       68
       68
       +
                 r.parentNode.insertBefore(p, r);

     

       69
       69
       +
               }

     

       70
       70
       +
       

     

       71
       71
       +
               let u: PostHogInstance = e;

     

       72
       72
       +
               if (typeof a !== "undefined") {

     

       73
       73
       +
                 u = (e as Record<string, PostHogInstance>)[a] = {} as PostHogInstance;

     

       74
       74
       +
                 u._i = [];

     

       75
       75
       +
               } else {

     

       76
       76
       +
                 a = "posthog";

     

       77
       77
       +
               }

     

       78
       78
       +
       

     

       79
       79
       +
               u.people = u.people || {} as PostHogPeople;

     

       80
       80
       +
               u.toString = function(includeStub?: number) {

     

       81
       81
       +
                 let name = "posthog";

     

       82
       82
       +
                 if ("posthog" !== a) {

     

       83
       83
       +
                   name += "." + a;

     

       84
       84
       +
                 }

     

       85
       85
       +
                 if (!includeStub) {

     

       86
       86
       +
                   name += " (stub)";

     

       87
       87
       +
                 }

     

       88
       88
       +
                 return name;

     

       89
       89
       +
               };

     

       90
       90
       +
       

     

       91
       91
       +
               u.people.toString = function() {

     

       92
       92
       +
                 return u.toString(1) + ".people (stub)";

     

       93
       93
       +
               };

     

       94
       94
       +
       

     

       95
       95
       +
               o = "init capture register register_once register_for_session unregister unregister_for_session getFeatureFlag getFeatureFlagPayload isFeatureEnabled reloadFeatureFlags updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures on onFeatureFlags onSessionId getSurveys getActiveMatchingSurveys renderSurvey canRenderSurvey getNextSurveyStep identify setPersonProperties group resetGroups setPersonPropertiesForFlags resetPersonPropertiesForFlags setGroupPropertiesForFlags resetGroupPropertiesForFlags reset get_distinct_id getGroups get_session_id get_session_replay_url alias set_config startSessionRecording stopSessionRecording sessionRecordingStarted captureException loadToolbar get_property getSessionProperty createPersonProfile opt_in_capturing opt_out_capturing has_opted_in_capturing has_opted_out_capturing clear_opt_in_out_capturing debug".split(" ");

     

       96
       96
       +
       

     

       97
       97
       +
               for (n = 0; n < o.length; n++) {

     

       98
       98
       +
                 g(u as Record<string, unknown>, o[n]);

     

       99
       99
       +
               }

     

       100
       100
       +
       

     

       101
       101
       +
               e._i.push([i, s, a]);

     

       102
       102
       +
             };

     

       103
       103
       +
       

     

       104
       104
       +
             e.__SV = 1;

     

       105
       105
       +
           })(document, globalThis.posthog || {} as PostHogInstance);

     

       106
       106
       +
       

     

       107
       107
       +
           // Initialize PostHog

     

       108
       108
       +
           if (globalThis.posthog) {

     

       109
       109
       +
             globalThis.posthog.init(apiKey, { api_host: apiHost });

     

       110
       110
       +
           }

     

       111
       111
       +
         }, [apiKey, apiHost]);

     

       112
       112
       +
       

     

       113
       113
       +
         return null; // This component doesn't render anything visible

     

       114
       114
       +
       }

+15

islands/PostHogInitializer.tsx

···

       1
       1
       +
       import { useEffect } from "preact/hooks";

     

       2
       2
       +
       import posthog from "posthog-js";

     

       3
       3
       +
       

     

       4
       4
       +
       interface Props {

     

       5
       5
       +
         apiKey: string;

     

       6
       6
       +
         apiHost: string;

     

       7
       7
       +
       }

     

       8
       8
       +
       

     

       9
       9
       +
       export default function PostHogInitializer({ apiKey, apiHost }: Props) {

     

       10
       10
       +
         useEffect(() => {

     

       11
       11
       +
           posthog.default.init(apiKey, { api_host: apiHost });

     

       12
       12
       +
         }, [apiKey, apiHost]);

     

       13
       13
       +
       

     

       14
       14
       +
         return null;

     

       15
       15
       +
       }

+23 -1

islands/SocialLinks.tsx

···

       9
       9
        
         const [starCount, setStarCount] = useState<number | null>(null);

     

       10
       10
        
       

     

       11
       11
        
         useEffect(() => {

     

       12
       12
       +
           const CACHE_KEY = 'github_stars';

     

       13
       13
       +
           const CACHE_DURATION = 15 * 60 * 1000; // 15 minutes in milliseconds

     

       14
       14
       +
       

     

       12
       15
        
           const fetchRepoInfo = async () => {

     

       13
       16
        
             try {

     

       14
       17
        
               const response = await fetch("https://api.github.com/repos/knotbin/airport");

     

       15
       18
        
               const data: GitHubRepo = await response.json();

     

       19
       19
       +
               const cacheData = {

     

       20
       20
       +
                 count: data.stargazers_count,

     

       21
       21
       +
                 timestamp: Date.now()

     

       22
       22
       +
               };

     

       23
       23
       +
               localStorage.setItem(CACHE_KEY, JSON.stringify(cacheData));

     

       16
       24
        
               setStarCount(data.stargazers_count);

     

       17
       25
        
             } catch (error) {

     

       18
       26
        
               console.error("Failed to fetch GitHub repo info:", error);

     

       19
       27
        
             }

     

       20
       28
        
           };

     

       21
       29
        
       

     

       22
       22
       -
           fetchRepoInfo();

     

       30
       30
       +
           const getCachedStars = () => {

     

       31
       31
       +
             const cached = localStorage.getItem(CACHE_KEY);

     

       32
       32
       +
             if (cached) {

     

       33
       33
       +
               const { count, timestamp } = JSON.parse(cached);

     

       34
       34
       +
               if (Date.now() - timestamp < CACHE_DURATION) {

     

       35
       35
       +
                 setStarCount(count);

     

       36
       36
       +
                 return true;

     

       37
       37
       +
               }

     

       38
       38
       +
             }

     

       39
       39
       +
             return false;

     

       40
       40
       +
           };

     

       41
       41
       +
       

     

       42
       42
       +
           if (!getCachedStars()) {

     

       43
       43
       +
             fetchRepoInfo();

     

       44
       44
       +
           }

     

       23
       45
        
         }, []);

     

       24
       46
        
       

     

       25
       47
        
         const formatStarCount = (count: number | null) => {

+1 -1

lib/oauth/client.ts

···

       1
       1
       -
       import { AtprotoOAuthClient } from "jsr:@bigmoves/atproto-oauth-client";

     

       1
       1
       +
       import { AtprotoOAuthClient } from "@bigmoves/atproto-oauth-client";

     

       2
       2
        
       import { SessionStore, StateStore } from "../storage.ts";

     

       3
       3
        
       

     

       4
       4
        
       export const createClient = (db: Deno.Kv) => {

+5 -5

routes/_app.tsx

···

       1
       1
        
       import { type PageProps } from "fresh";

     

       2
       2
        
       import Header from "../islands/Header.tsx";

     

       3
       3
       -
       import { PostHogAnalytics } from "@knotbin/posthog-fresh";

     

       3
       3
       +
       import PostHogInitializer from "../islands/PostHogInitializer.tsx";

     

       4
       4
        
       

     

       5
       5
        
       export default function App({ Component }: PageProps) {

     

       6
       6
       +
         const apiKey = Deno.env.get("PUBLIC_POSTHOG_KEY")!;

     

       7
       7
       +
         const apiHost = Deno.env.get("PUBLIC_POSTHOG_HOST")!;

     

       8
       8
       +
       

     

       6
       9
        
         return (

     

       7
       10
        
           <html>

     

       8
       11
        
             <head>

     
···

       20
       23
        
             </head>

     

       21
       24
        
             <script defer src="https://cloud.umami.is/script.js" data-website-id={Deno.env.get("UMAMI_ID")}></script>

     

       22
       25
        
             <body>

     

       23
       23
       -
               <PostHogAnalytics

     

       24
       24
       -
                 apiKey={Deno.env.get("PUBLIC_POSTHOG_KEY")!}

     

       25
       25
       -
                 apiHost={Deno.env.get("PUBLIC_POSTHOG_HOST")!}

     

       26
       26
       -
               />

     

       26
       26
       +
               <PostHogInitializer apiKey={apiKey} apiHost={apiHost} />

     

       27
       27
        
               <Header />

     

       28
       28
        
               <main className="pt-8">

     

       29
       29
        
                 <Component />

routes/_error.tsx

···

       1
       1
        
       import { PageProps, HttpError } from "fresh";

     

       2
       2
       +
       import posthog from "posthog-js";

     

       2
       3
        
       

     

       3
       4
        
       export default function ErrorPage(props: PageProps) {

     

       4
       5
        
         const error = props.error; // Contains the thrown Error or HTTPError

     

       5
       6
        
         if (error instanceof HttpError) {

     

       7
       7
       +
           posthog.default.capture('error', {

     

       8
       8
       +
             error: error.message,

     

       9
       9
       +
             status: error.status,

     

       10
       10
       +
           });

     

       6
       11
        
           const status = error.status; // HTTP status code

     

       7
       12
        
           // Render a 404 not found page

     

       8
       13
        
           if (status === 404) {