feat: add basics for fullstack spa in gleam blog

package.json

···
     "mysql2": "^3.9.7",
     "next": "^14.2.4",
     "react": "^18.3.1",
+    "react-code-blocks": "^0.1.6",
     "react-dom": "^18.3.1",
     "react-markdown": "^9.0.1",
     "rehype-raw": "^7.0.0",

pnpm-lock.yaml

···
       react:
         specifier: ^18.3.1
         version: 18.3.1
+      react-code-blocks:
+        specifier: ^0.1.6
+        version: 0.1.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react-dom:
         specifier: ^18.3.1
         version: 18.3.1(react@18.3.1)
···
   '@alloc/quick-lru@5.2.0':
     resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
     engines: {node: '>=10'}
+
+  '@babel/runtime@7.25.0':
+    resolution: {integrity: sha512-7dRy4DwXwtzBrPbZflqxnvfxLF8kdZXPkhymtDeFoFqE6ldzjQFgYTtYIFARcLEYDrqfBfYcZt1WqFxRoyC9Rw==}
+    engines: {node: '>=6.9.0'}
+
+  '@emotion/is-prop-valid@1.2.2':
+    resolution: {integrity: sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==}
+
+  '@emotion/memoize@0.8.1':
+    resolution: {integrity: sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==}
+
+  '@emotion/unitless@0.8.1':
+    resolution: {integrity: sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==}
 
   '@esbuild-kit/core-utils@3.3.2':
     resolution: {integrity: sha512-sPRAnw9CdSsRmEtnsl2WXWdyquogVpB3yZ3dgwJfe8zrOzTsV7cJvmwrKVa+0ma5BoiGJ+BoqkMvawbayKUsqQ==}
···
   '@types/estree@1.0.5':
     resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==}
 
+  '@types/hast@2.3.10':
+    resolution: {integrity: sha512-McWspRw8xx8J9HurkVBfYj0xKoE25tOFlHGdx4MJ5xORQrMGZNqJhVQWaIbm6Oyla5kYOXtDiopzKRJzEOkwJw==}
+
   '@types/hast@3.0.4':
     resolution: {integrity: sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==}
 
···
 
   '@types/slug@5.0.8':
     resolution: {integrity: sha512-mblTWR1OST257k1gZ3QvqG+ERSr8Ea6dyM1FH6Jtm4jeXi0/r0/95VNctofuiywPxCVQuE8AuFoqmvJ4iVUlXQ==}
+
+  '@types/stylis@4.2.5':
+    resolution: {integrity: sha512-1Xve+NMN7FWjY14vLoY5tL3BVEQ/n42YLwaqJIPYhotZ9uBHt87VceMwWQpzmdEt2TNXIorIFG+YeCUUW7RInw==}
 
   '@types/unist@2.0.10':
     resolution: {integrity: sha512-IfYcSBWE3hLpBg8+X2SEa8LVkJdJEkT2Ese2aaLs3ptGdVtABxndrMaxuFlQ1qdFf9Q5rDvDpxI3WwgvKFAsQA==}
···
     resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==}
     engines: {node: '>= 6'}
 
+  camelize@1.0.1:
+    resolution: {integrity: sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==}
+
   caniuse-lite@1.0.30001642:
     resolution: {integrity: sha512-3XQ0DoRgLijXJErLSl+bLnJ+Et4KqV1PY6JJBGAFlsNsz31zeAIncyeZfLCabHK/jtSh+671RM9YMldxjUPZtA==}
 
···
   character-entities-html4@2.1.0:
     resolution: {integrity: sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==}
 
+  character-entities-legacy@1.1.4:
+    resolution: {integrity: sha512-3Xnr+7ZFS1uxeiUDvV02wQ+QDbc55o97tIV5zHScSPJpcLm/r0DFPcoY3tYRp+VZukxuMeKgXYmsXQHO05zQeA==}
+
   character-entities-legacy@3.0.0:
     resolution: {integrity: sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==}
 
+  character-entities@1.2.4:
+    resolution: {integrity: sha512-iBMyeEHxfVnIakwOuDXpVkc54HijNgCyQB2w0VfGQThle6NXn50zU6V/u+LDhxHcDUPojn6Kpga3PTAD8W1bQw==}
+
   character-entities@2.0.2:
     resolution: {integrity: sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==}
+
+  character-reference-invalid@1.1.4:
+    resolution: {integrity: sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg==}
 
   character-reference-invalid@2.0.1:
     resolution: {integrity: sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==}
···
   color-name@1.1.4:
     resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
 
+  comma-separated-tokens@1.0.8:
+    resolution: {integrity: sha512-GHuDRO12Sypu2cV70d1dkA2EUmXHgntrzbpvOB+Qy+49ypNfGgFQIC2fhhXbnyrJRynDCAARsT7Ou0M6hirpfw==}
+
   comma-separated-tokens@2.0.3:
     resolution: {integrity: sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==}
 
···
   cross-spawn@7.0.3:
     resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==}
     engines: {node: '>= 8'}
+
+  css-color-keywords@1.0.0:
+    resolution: {integrity: sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==}
+    engines: {node: '>=4'}
+
+  css-to-react-native@3.2.0:
+    resolution: {integrity: sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==}
 
   cssesc@3.0.0:
     resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
···
   fastq@1.17.1:
     resolution: {integrity: sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==}
 
+  fault@1.0.4:
+    resolution: {integrity: sha512-CJ0HCB5tL5fYTEA7ToAq5+kTwd++Borf1/bifxd9iT70QcXr4MRrO3Llf8Ifs70q+SJcGHFtnIE/Nw6giCtECA==}
+
   file-entry-cache@6.0.1:
     resolution: {integrity: sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==}
     engines: {node: ^10.12.0 || >=12.0.0}
···
   foreground-child@3.2.1:
     resolution: {integrity: sha512-PXUUyLqrR2XCWICfv6ukppP96sdFwWbNEnfEMt7jNsISjMsvaLNinAHNDYyvkyU+SZG2BTSbT5NjG+vZslfGTA==}
     engines: {node: '>=14'}
+
+  format@0.2.2:
+    resolution: {integrity: sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww==}
+    engines: {node: '>=0.4.x'}
 
   fs.realpath@1.0.0:
     resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
···
   hast-util-from-parse5@8.0.1:
     resolution: {integrity: sha512-Er/Iixbc7IEa7r/XLtuG52zoqn/b3Xng/w6aZQ0xGVxzhw5xUFxcRqdPzP6yFi/4HBYRaifaI5fQ1RH8n0ZeOQ==}
 
+  hast-util-parse-selector@2.2.5:
+    resolution: {integrity: sha512-7j6mrk/qqkSehsM92wQjdIgWM2/BW61u/53G6xmC8i1OmEdKLHbk419QKQUjz6LglWsfqoiHmyMRkP1BGjecNQ==}
+
   hast-util-parse-selector@4.0.0:
     resolution: {integrity: sha512-wkQCkSYoOGCRKERFWcxMVMOcYE2K1AaNLU8DXS9arxnLOUEWbOXKXiJUNzEpqZ3JOKpnha3jkFrumEjVliDe7A==}
 
···
 
   hast-util-whitespace@3.0.0:
     resolution: {integrity: sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==}
+
+  hastscript@6.0.0:
+    resolution: {integrity: sha512-nDM6bvd7lIqDUiYEiu5Sl/+6ReP0BMk/2f4U/Rooccxkj0P5nm+acM5PrGJ/t5I8qPGiqZSE6hVAwZEdZIvP4w==}
 
   hastscript@8.0.0:
     resolution: {integrity: sha512-dMOtzCEd3ABUeSIISmrETiKuyydk1w0pa+gE/uormcTpSYuaNJPbX1NU3JLyscSLjwAQM8bWMhhIlnCqnRvDTw==}
···
   heap@0.2.7:
     resolution: {integrity: sha512-2bsegYkkHO+h/9MGbn6KWcE45cHZgPANo5LXF7EvWdT0yT2EguSVO1nDgU5c8+ZOPwp2vMNa7YFsJhVcDR9Sdg==}
 
+  highlight.js@10.7.3:
+    resolution: {integrity: sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==}
+
   html-url-attributes@3.0.0:
     resolution: {integrity: sha512-/sXbVCWayk6GDVg3ctOX6nxaVj7So40FcFAnWlWGNAB1LpYKcV5Cd10APjPjW80O7zYW2MsjBV4zZ7IZO5fVow==}
 
···
     resolution: {integrity: sha512-NGnrKwXzSms2qUUih/ILZ5JBqNTSa1+ZmP6flaIp6KmSElgE9qdndzS3cqjrDovwFdmwsGsLdeFgB6suw+1e9g==}
     engines: {node: '>= 0.4'}
 
+  is-alphabetical@1.0.4:
+    resolution: {integrity: sha512-DwzsA04LQ10FHTZuL0/grVDk4rFoVH1pjAToYwBrHSxcrBIGQuXrQMtD5U1b0U2XVgKZCTLLP8u2Qxqhy3l2Vg==}
+
   is-alphabetical@2.0.1:
     resolution: {integrity: sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==}
 
+  is-alphanumerical@1.0.4:
+    resolution: {integrity: sha512-UzoZUr+XfVz3t3v4KyGEniVL9BDRoQtY7tOyrRybkVNjDFWyo1yhXNGrrBTQxp3ib9BLAWs7k2YKBQsFRkZG9A==}
+
   is-alphanumerical@2.0.1:
     resolution: {integrity: sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw==}
 
···
     resolution: {integrity: sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==}
     engines: {node: '>= 0.4'}
 
+  is-decimal@1.0.4:
+    resolution: {integrity: sha512-RGdriMmQQvZ2aqaQq3awNA6dCGtKpiDFcOzrTWrDAT2MiWrKQVPmxLGHl7Y2nNu6led0kEyoX0enY0qXYsv9zw==}
+
   is-decimal@2.0.1:
     resolution: {integrity: sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A==}
 
···
     resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
     engines: {node: '>=0.10.0'}
 
+  is-hexadecimal@1.0.4:
+    resolution: {integrity: sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw==}
+
   is-hexadecimal@2.0.1:
     resolution: {integrity: sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg==}
 
···
   loose-envify@1.4.0:
     resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
     hasBin: true
+
+  lowlight@1.20.0:
+    resolution: {integrity: sha512-8Ktj+prEb1RoCPkEOrPMYUN/nCggB7qAWe3a7OpMjWQkh3l2RD5wKRQ+o8Q8YuI9RG/xs95waaI/E6ym/7NsTw==}
 
   lru-cache@10.4.3:
     resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==}
···
     resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
     engines: {node: '>=6'}
 
+  parse-entities@2.0.0:
+    resolution: {integrity: sha512-kkywGpCcRYhqQIchaWqZ875wzpS/bMKhz5HnN3p7wveJTkTtyAB/AlnS0f8DFSqYW1T82t6yEAkEcB+A1I3MbQ==}
+
   parse-entities@4.0.1:
     resolution: {integrity: sha512-SWzvYcSJh4d/SGLIOQfZ/CoNv6BTlI6YEQ7Nj82oDVnRpwe/Z/F1EMx42x3JAOwGBlCjeCH0BRJQbQ/opHL17w==}
 
···
     resolution: {integrity: sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==}
     engines: {node: ^10 || ^12 || >=14}
 
+  postcss@8.4.38:
+    resolution: {integrity: sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==}
+    engines: {node: ^10 || ^12 || >=14}
+
   postcss@8.4.39:
     resolution: {integrity: sha512-0vzE+lAiG7hZl1/9I8yzKLx3aR9Xbof3fBHKunvMfOCYAtMhrsnccJY2iTURb9EZd5+pLuiNV9/c/GZJOHsgIw==}
     engines: {node: ^10 || ^12 || >=14}
···
     engines: {node: '>=14'}
     hasBin: true
 
+  prismjs@1.27.0:
+    resolution: {integrity: sha512-t13BGPUlFDR7wRB5kQDG4jjl7XeuH6jbJGt11JHPL96qwsEHNX2+68tFXqc1/k+/jALsbSWJKUOT/hcYAZ5LkA==}
+    engines: {node: '>=6'}
+
+  prismjs@1.29.0:
+    resolution: {integrity: sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==}
+    engines: {node: '>=6'}
+
   prop-types@15.8.1:
     resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
+
+  property-information@5.6.0:
+    resolution: {integrity: sha512-YUHSPk+A30YPv+0Qf8i9Mbfe/C0hdPXk1s1jPVToV8pk8BQtpw10ct89Eo7OWkutrwqvT0eicAxlOg3dOAu8JA==}
 
   property-information@6.5.0:
     resolution: {integrity: sha512-PgTgs/BlvHxOu8QuEN7wi5A0OmXaBcHpmCSTehcs6Uuu9IkDIEo13Hy7n898RHfrQ49vKCoGeWZSaAK01nwVig==}
···
   queue-microtask@1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
 
+  react-code-blocks@0.1.6:
+    resolution: {integrity: sha512-ENNuxG07yO+OuX1ChRje3ieefPRz6yrIpHmebQlaFQgzcAHbUfVeTINpOpoI9bSRSObeYo/OdHsporeToZ7fcg==}
+    engines: {node: '>=16'}
+    peerDependencies:
+      react: '>=16'
+
   react-dom@18.3.1:
     resolution: {integrity: sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==}
     peerDependencies:
···
       '@types/react': '>=18'
       react: '>=18'
 
+  react-syntax-highlighter@15.5.0:
+    resolution: {integrity: sha512-+zq2myprEnQmH5yw6Gqc8lD55QHnpKaU8TOcFeC/Lg/MQSs8UknEA0JC4nTZGFAXC2J2Hyj/ijJ7NlabyPi2gg==}
+    peerDependencies:
+      react: '>= 0.14.0'
+
   react@18.3.1:
     resolution: {integrity: sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==}
     engines: {node: '>=0.10.0'}
···
     resolution: {integrity: sha512-fmfw4XgoDke3kdI6h4xcUz1dG8uaiv5q9gcEwLS4Pnth2kxT+GZ7YehS1JTMGBQmtV7Y4GFGbs2re2NqhdozUg==}
     engines: {node: '>= 0.4'}
 
+  refractor@3.6.0:
+    resolution: {integrity: sha512-MY9W41IOWxxk31o+YvFCNyNzdkc9M20NoZK5vq6jkv4I/uh2zkWcfudj0Q1fovjUQJrNewS9NMzeTtqPf+n5EA==}
+
+  regenerator-runtime@0.14.1:
+    resolution: {integrity: sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==}
+
   regexp.prototype.flags@1.5.2:
     resolution: {integrity: sha512-NcDiDkTLuPR+++OCKB0nWafEmhg/Da8aUPLPMQbK+bxKKCm1/S5he+AqYa4PlMCVBalb4/yxIRub6qkEx5yJbw==}
     engines: {node: '>= 0.4'}
···
     resolution: {integrity: sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==}
     engines: {node: '>= 0.4'}
 
+  shallowequal@1.1.0:
+    resolution: {integrity: sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==}
+
   shebang-command@2.0.0:
     resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
     engines: {node: '>=8'}
···
     resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
     engines: {node: '>=0.10.0'}
 
+  space-separated-tokens@1.1.5:
+    resolution: {integrity: sha512-q/JSVd1Lptzhf5bkYm4ob4iWPjx0KiRe3sRFBNrVqbJkFaBm5vbbowy1mymoPNLRa52+oadOhJ+K49wsSeSjTA==}
+
   space-separated-tokens@2.0.2:
     resolution: {integrity: sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==}
 
···
   style-to-object@1.0.6:
     resolution: {integrity: sha512-khxq+Qm3xEyZfKd/y9L3oIWQimxuc4STrQKtQn8aSDRHb8mFgpukgX1hdzfrMEW6JCjyJ8p89x+IUMVnCBI1PA==}
 
+  styled-components@6.1.12:
+    resolution: {integrity: sha512-n/O4PzRPhbYI0k1vKKayfti3C/IGcPf+DqcrOB7O/ab9x4u/zjqraneT5N45+sIe87cxrCApXM8Bna7NYxwoTA==}
+    engines: {node: '>= 16'}
+    peerDependencies:
+      react: '>= 16.8.0'
+      react-dom: '>= 16.8.0'
+
   styled-jsx@5.1.1:
     resolution: {integrity: sha512-pW7uC1l4mBZ8ugbiZrcIsiIvVx1UmTfw7UkC3Um2tmfUq9Bhk8IiyEIPl6F8agHgjzku6j0xQEZbfA5uSgSaCw==}
     engines: {node: '>= 12.0.0'}
···
         optional: true
       babel-plugin-macros:
         optional: true
+
+  stylis@4.3.2:
+    resolution: {integrity: sha512-bhtUjWd/z6ltJiQwg0dUfxEJ+W+jdqQd8TbWLWyeIJHlnsqmGLRFFd8e5mA0AZi/zx90smXRlN66YMTcaSFifg==}
 
   sucrase@3.35.0:
     resolution: {integrity: sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==}
···
 
   tsconfig-paths@3.15.0:
     resolution: {integrity: sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==}
+
+  tslib@2.6.2:
+    resolution: {integrity: sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==}
 
   tslib@2.6.3:
     resolution: {integrity: sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==}
···
   wrappy@1.0.2:
     resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
 
+  xtend@4.0.2:
+    resolution: {integrity: sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==}
+    engines: {node: '>=0.4'}
+
   yaml@2.4.5:
     resolution: {integrity: sha512-aBx2bnqDzVOyNKfsysjA2ms5ZlnjSAW2eG3/L5G/CSujfjLJTJsEw1bGw8kCf04KodQWk1pxlGnZ56CRxiawmg==}
     engines: {node: '>= 14'}
···
 
   '@alloc/quick-lru@5.2.0': {}
 
+  '@babel/runtime@7.25.0':
+    dependencies:
+      regenerator-runtime: 0.14.1
+
+  '@emotion/is-prop-valid@1.2.2':
+    dependencies:
+      '@emotion/memoize': 0.8.1
+
+  '@emotion/memoize@0.8.1': {}
+
+  '@emotion/unitless@0.8.1': {}
+
   '@esbuild-kit/core-utils@3.3.2':
     dependencies:
       esbuild: 0.18.20
···
 
   '@types/estree@1.0.5': {}
 
+  '@types/hast@2.3.10':
+    dependencies:
+      '@types/unist': 2.0.10
+
   '@types/hast@3.0.4':
     dependencies:
       '@types/unist': 3.0.2
···
       csstype: 3.1.3
 
   '@types/slug@5.0.8': {}
+
+  '@types/stylis@4.2.5': {}
 
   '@types/unist@2.0.10': {}
 
···
 
   camelcase-css@2.0.1: {}
 
+  camelize@1.0.1: {}
+
   caniuse-lite@1.0.30001642: {}
 
   ccount@2.0.1: {}
···
 
   character-entities-html4@2.1.0: {}
 
+  character-entities-legacy@1.1.4: {}
+
   character-entities-legacy@3.0.0: {}
+
+  character-entities@1.2.4: {}
 
   character-entities@2.0.2: {}
 
+  character-reference-invalid@1.1.4: {}
+
   character-reference-invalid@2.0.1: {}
 
   chokidar@3.6.0:
···
 
   color-name@1.1.4: {}
 
+  comma-separated-tokens@1.0.8: {}
+
   comma-separated-tokens@2.0.3: {}
 
   commander@4.1.1: {}
···
       path-key: 3.1.1
       shebang-command: 2.0.0
       which: 2.0.2
+
+  css-color-keywords@1.0.0: {}
+
+  css-to-react-native@3.2.0:
+    dependencies:
+      camelize: 1.0.1
+      css-color-keywords: 1.0.0
+      postcss-value-parser: 4.2.0
 
   cssesc@3.0.0: {}
 
···
     dependencies:
       reusify: 1.0.4
 
+  fault@1.0.4:
+    dependencies:
+      format: 0.2.2
+
   file-entry-cache@6.0.1:
     dependencies:
       flat-cache: 3.2.0
···
       cross-spawn: 7.0.3
       signal-exit: 4.1.0
 
+  format@0.2.2: {}
+
   fs.realpath@1.0.0: {}
 
   fsevents@2.3.3:
···
       vfile-location: 5.0.3
       web-namespaces: 2.0.1
 
+  hast-util-parse-selector@2.2.5: {}
+
   hast-util-parse-selector@4.0.0:
     dependencies:
       '@types/hast': 3.0.4
···
     dependencies:
       '@types/hast': 3.0.4
 
+  hastscript@6.0.0:
+    dependencies:
+      '@types/hast': 2.3.10
+      comma-separated-tokens: 1.0.8
+      hast-util-parse-selector: 2.2.5
+      property-information: 5.6.0
+      space-separated-tokens: 1.1.5
+
   hastscript@8.0.0:
     dependencies:
       '@types/hast': 3.0.4
···
       space-separated-tokens: 2.0.2
 
   heap@0.2.7: {}
+
+  highlight.js@10.7.3: {}
 
   html-url-attributes@3.0.0: {}
 
···
       hasown: 2.0.2
       side-channel: 1.0.6
 
+  is-alphabetical@1.0.4: {}
+
   is-alphabetical@2.0.1: {}
 
+  is-alphanumerical@1.0.4:
+    dependencies:
+      is-alphabetical: 1.0.4
+      is-decimal: 1.0.4
+
   is-alphanumerical@2.0.1:
     dependencies:
       is-alphabetical: 2.0.1
···
     dependencies:
       has-tostringtag: 1.0.2
 
+  is-decimal@1.0.4: {}
+
   is-decimal@2.0.1: {}
 
   is-extendable@0.1.1: {}
···
   is-glob@4.0.3:
     dependencies:
       is-extglob: 2.1.1
+
+  is-hexadecimal@1.0.4: {}
 
   is-hexadecimal@2.0.1: {}
 
···
   loose-envify@1.4.0:
     dependencies:
       js-tokens: 4.0.0
+
+  lowlight@1.20.0:
+    dependencies:
+      fault: 1.0.4
+      highlight.js: 10.7.3
 
   lru-cache@10.4.3: {}
 
···
     dependencies:
       callsites: 3.1.0
 
+  parse-entities@2.0.0:
+    dependencies:
+      character-entities: 1.2.4
+      character-entities-legacy: 1.1.4
+      character-reference-invalid: 1.1.4
+      is-alphanumerical: 1.0.4
+      is-decimal: 1.0.4
+      is-hexadecimal: 1.0.4
+
   parse-entities@4.0.1:
     dependencies:
       '@types/unist': 2.0.10
···
       picocolors: 1.0.1
       source-map-js: 1.2.0
 
+  postcss@8.4.38:
+    dependencies:
+      nanoid: 3.3.7
+      picocolors: 1.0.1
+      source-map-js: 1.2.0
+
   postcss@8.4.39:
     dependencies:
       nanoid: 3.3.7
···
 
   prettier@3.3.3: {}
 
+  prismjs@1.27.0: {}
+
+  prismjs@1.29.0: {}
+
   prop-types@15.8.1:
     dependencies:
       loose-envify: 1.4.0
       object-assign: 4.1.1
       react-is: 16.13.1
+
+  property-information@5.6.0:
+    dependencies:
+      xtend: 4.0.2
 
   property-information@6.5.0: {}
 
···
 
   queue-microtask@1.2.3: {}
 
+  react-code-blocks@0.1.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      '@babel/runtime': 7.25.0
+      react: 18.3.1
+      react-syntax-highlighter: 15.5.0(react@18.3.1)
+      styled-components: 6.1.12(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      tslib: 2.6.3
+    transitivePeerDependencies:
+      - react-dom
+
   react-dom@18.3.1(react@18.3.1):
     dependencies:
       loose-envify: 1.4.0
···
     transitivePeerDependencies:
       - supports-color
 
+  react-syntax-highlighter@15.5.0(react@18.3.1):
+    dependencies:
+      '@babel/runtime': 7.25.0
+      highlight.js: 10.7.3
+      lowlight: 1.20.0
+      prismjs: 1.29.0
+      react: 18.3.1
+      refractor: 3.6.0
+
   react@18.3.1:
     dependencies:
       loose-envify: 1.4.0
···
       globalthis: 1.0.4
       which-builtin-type: 1.1.3
 
+  refractor@3.6.0:
+    dependencies:
+      hastscript: 6.0.0
+      parse-entities: 2.0.0
+      prismjs: 1.27.0
+
+  regenerator-runtime@0.14.1: {}
+
   regexp.prototype.flags@1.5.2:
     dependencies:
       call-bind: 1.0.7
···
       functions-have-names: 1.2.3
       has-property-descriptors: 1.0.2
 
+  shallowequal@1.1.0: {}
+
   shebang-command@2.0.0:
     dependencies:
       shebang-regex: 3.0.0
···
 
   source-map@0.6.1: {}
 
+  space-separated-tokens@1.1.5: {}
+
   space-separated-tokens@2.0.2: {}
 
   sprintf-js@1.0.3: {}
···
     dependencies:
       inline-style-parser: 0.2.3
 
+  styled-components@6.1.12(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      '@emotion/is-prop-valid': 1.2.2
+      '@emotion/unitless': 0.8.1
+      '@types/stylis': 4.2.5
+      css-to-react-native: 3.2.0
+      csstype: 3.1.3
+      postcss: 8.4.38
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      shallowequal: 1.1.0
+      stylis: 4.3.2
+      tslib: 2.6.2
+
   styled-jsx@5.1.1(react@18.3.1):
     dependencies:
       client-only: 0.0.1
       react: 18.3.1
+
+  stylis@4.3.2: {}
 
   sucrase@3.35.0:
     dependencies:
···
       json5: 1.0.2
       minimist: 1.2.8
       strip-bom: 3.0.0
+
+  tslib@2.6.2: {}
 
   tslib@2.6.3: {}
 
···
       strip-ansi: 7.1.0
 
   wrappy@1.0.2: {}
+
+  xtend@4.0.2: {}
 
   yaml@2.4.5: {}
 

src/app/page.tsx

···
         </div>
       </Link>
 
-      <div className="mx-auto flex max-w-[800px] flex-col items-center gap-8">
+      <div className="mx-auto flex max-w-[1000px] flex-col items-center gap-8">
         <p className="flex max-w-[60ch] flex-wrap items-center justify-center gap-2 text-center text-lg font-medium">
           Welcome to my little corner of the internet.{" "}
           <Heart className="rotate-12 rounded-lg fill-[#ee2c05] stroke-[#ee2c05]" />
···
               </span>{" "}
               Posts
             </h2>
-            <ul className="flex w-full flex-col">
+            <ul className="flex w-full flex-col gap-3">
               {posts
                 .sort(
                   (a, b) =>

src/app/posts/[post]/_components/code.tsx

···
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+"use client";
+
+import React from "react";
+import { CodeBlock } from "react-code-blocks";
+
+const InternalCodeBlock = ({ rest }: { rest: any }) =>
+  (rest.children ?? "").split("\n").length <= 1 ? (
+    <span className="rounded-md bg-neutral-200 px-1 font-mono">
+      {rest.children}
+    </span>
+  ) : (
+    <CodeBlock
+      text={rest.children}
+      language={
+        ({ rs: "rust" } as Record<string, string>)[
+          rest.className.split("-")[1]
+        ] ?? undefined
+      }
+    />
+  );
+
+export default InternalCodeBlock;

src/app/posts/[post]/page.tsx

···
 import Link from "next/link";
 import { Roboto_Condensed } from "next/font/google";
 import localFont from "next/font/local";
+import CodeBlock from "./_components/code";
 
 const robotoCondensed = Roboto_Condensed({ subsets: ["latin"] });
 const PlaywriteCU = localFont({ src: "../../../styles/PlaywriteCU.ttf" });
···
               const { node, ...rest } = props;
               return <h1 className="text-4xl font-semibold" {...rest} />;
             },
+            h2(props) {
+              const { node, ...rest } = props;
+              return <h2 className="text-3xl font-semibold" {...rest} />;
+            },
+            h3(props) {
+              const { node, ...rest } = props;
+              return <h3 className="text-2xl font-semibold" {...rest} />;
+            },
+            h4(props) {
+              const { node, ...rest } = props;
+              return <h4 className="text-xl font-semibold" {...rest} />;
+            },
             a(props) {
               const { node, ...rest } = props;
               return <a className="text-sky-600 hover:underline" {...rest} />;
···
             i(props) {
               const { node, ...rest } = props;
               return <i className="text-neutral-700" {...rest} />;
+            },
+            code(props) {
+              const { node, ...rest } = props;
+              return <CodeBlock rest={rest} />;
             },
             img(props) {
               const { node, src, ...rest } = props;

src/posts/the-basics-for-a-fullstack-spa-in-gleam.md

···
+---
+title: "The basics for a fullstack SPA in Gleam"
+published: 2024/7/31
+---
+
+# The basics for a fullstack SPA in Gleam
+
+2024/7/31
+
+Gleam is a functional programming language that, contrary to many other popular functional languages, features a syntax which will feel familiar to those accustomed to C-style programming languges like C#, Javascript, and Rust. This however is where a lot of similarities end for those unfamiliar with functional programming as common constructs like `for` and `while` are missing and replaced with functional recursion while `if` and `switch` have been combined into a more powerful `case`. I won't go any more indepth on the syntax of Gleam in this article but if you're interested i'd recommend checking out the [language tour](https://tour.gleam.run/) for a good starting point.
+
+With that being said this article goes into the stack and libraries used to create a fully [functional fullstack application in Gleam](https://kirakira.keii.dev) however I will not go into any specific details on how the website was made as the code is [available on github](https://github.com/dinkelspiel/kirakira). I will instead explain the basics of routing, ajax requests (fetch), and effects. This article also assumes that you have gone through the tour and know the basics like creating a gleam project and installing libraries as I will not go in to that here.
+
+Before we get into all the code, the entiry codebase for this blogpost is available [on github](https://github.com/dinkelspiel/basic-fullstack-gleam) if you prefer to just look at the code.
+
+## The Frontend
+
+### State
+
+In gleam the current reigning champ for frontend development is hands down the [lustre](https://github.com/lustre-labs/lustre) framework by the amazing [Hayleigh Thompson](https://blog.hayleigh.dev/) that follows the Model-View-Update architecture.
+
+> This means that the state of the application is stored in a single, immutable data structure called the model, and updated as messages are dispatched to the runtime.
+
+Coming from a background of React, this felt quite daunting. I'm used to co-locating my state with the view by using the `const [value, setValue] = useState("")` syntax in React and updating it as simply as `setValue("Hello World")` and moving from this to modelling the state as types, initing the model, then defining messages was quite the ask. Lets see the difference and similarities between these two options.
+
+This is a simple counter as a React component that you've probably seen 100s of times.
+
+```js
+function Counter() {
+  const [value, setValue] = useState(0);
+
+  return (
+    <div>
+      <button onClick={() => setValue(value + 1)}>+</button>
+      {value}
+      <button onClick={() => setValue(value - 1)}>-</button>
+    </div>
+  );
+}
+```
+
+and this is the equivalent code in Lustre
+
+```rs
+type Model =
+  Int
+
+fn init(initial_count: Int) -> Model {
+  0
+}
+
+pub opaque type Msg {
+  Increment
+  Decrement
+}
+
+fn update(model: Model, msg: Msg) -> Model {
+  case msg {
+    Increment -> model + 1
+    Decrement -> model - 1
+  }
+}
+
+fn view(model: Model) -> Element(Msg) {
+  let count = int.to_string(model)
+
+  div([], [
+    button([on_click(Increment)], [text("+")]),
+    p([], [
+      text(count),
+    ]),
+    button([on_click(Decrement)], [text("-")]),
+  ])
+}
+```
+
+If we break this down then we first define the model or the "State" for our project. For the counter we only need an integer so we will alias the Model type to an Int but for any project bigger than this you'd want to define a Constructor with named variables like so
+
+```rs
+type Model {
+  Model(counter: Int, username: String, /* Any other variables here */)
+}
+```
+
+Then we initalize the state as 0 and define our messages and we only need two effects: Increment and Decrement. These will be what call our updates and is the way you define messages between the html and the update function which is just a simple `case` (similar to a `switch`) over the recieved message. Here we want to add 1 to our model if the `Increment` message is sent and remove 1 from our model if the `Decrement` message is sent.
+
+Then we define our view which returns a Lustre element type which is a Gleam appropriated syntax meant to be similar to html. It should be completely understandeable to anyone atleast somewhat familiar to html. The standouts to what might be considered wierd are the `[]` after the `div`/`p`/`button`, the `text` function and the type in the `on_click`. We will go through them one by one.
+
+First the `[]` after our elements is where we put our attributes. The code I've written doesn't include styling so they look remarkeable empty but if we were to add some classes to our `div` then it might look something like this: `div([class("container")], [])`. Then in the middle we have the function `text` this is simply because Gleam needs explicit types and the `String` type does not convert to the lustre `Element`. Therefor lustre provides the function as a way to add text to the html. Lastly the `on_click` function takes in a `Constructor` of the `Msg` type and it is how lustre handles events. This code will send the `Increment` message to the `update` function when the + button is pressed as an example. This might seem primitive but can be quite powerful when combinding it with data in the constructors so you might send a `Increment(step: 2)` instead of just an `Increment`.
+
+For this small example it is obviosuly more verbose compared to the React example but where this model really starts to shine is when you want to start breaking out components for a larger project than just a counter. In React [prop drilling](https://www.freecodecamp.org/news/avoid-prop-drilling-in-react/) is a common bad practice in React codebases so much so that [entire libraries](https://github.com/pmndrs/zustand) have been made to avoid it. And if you look at some sample zustand code:
+
+```js
+const useStore = create((set) => ({
+  counter: 0,
+  incr: () => set((state) => ({ counter: state.counter + 1 })),
+  decr: () => set((state) => ({ counter: state.counter - 1 })),
+}));
+
+function Counter() {
+  const { counter, incr, decr } = useStore();
+
+  return (
+    <div>
+      <button onClick={() => incr()}>+</button>
+      {counter}
+      <button onClick={() => decr()}>-</button>
+    </div>
+  );
+}
+```
+
+You might notice that it looks remarkeably like our Lustre example. Lustre promotes a similar state management strategy out of the box allowing [scalability](https://hackernoon.com/scalability-the-lost-level-of-react-state-management) from the start. Defining the messages and models in this way means that any function in our codebase can read from the `model` as long as it is provided in the function by the parent and each function can send out any messages to be handles by a central structure, the `update`.
+
+### Create our app
+
+Now when we've got the state out of the way we want to create our app. Since we are going to have a backend and a frontend we want to create folder for our two projects and then init our two projects inside of there, but we'll start with the frontend.
+
+```bash
+$ mkdir my-app # Create our folder
+$ cd my-app # Enter the folder
+$ gleam new frontend # Create our gleam app named frontend
+$ cd frontend # Enter the new frontend project
+$ gleam add lustre lustre_dev_tools # Add the lustre and lustre_dev_tools dependencies
+```
+
+And before we do anything else we have to go into the `/frontend/gleam.toml` and add `target = "javascript"` below the name and version. It should look something like this:
+
+```toml
+name = "frontend"
+version = "1.0.0"
+target = "javascript"
+```
+
+Another thing that is also required is adding a `ffi.mjs` in the `/frontend/src` directory that contains which will be our way of getting the current url of our browser inside the lustre app.
+
+```js
+export function get_route() {
+  return window.location.pathname;
+}
+```
+
+Throughout this article you can run the frontend by using
+
+```bash
+$ gleam run -m lustre/dev start
+```
+
+### Routing
+
+Although state management can go a long way defining different pages is neccesary for a webapp and one thing missing from both Lustre and React is a provided routing strategy. In React this is often solved by using a framework like [Next.JS](https://nextjs.org/) or a routing specific library like [React Router](https://reactrouter.com/en/main). Lustre provides a library called [Modem](https://hexdocs.pm/modem/) which is a simple client-side routing library that provides a router and some wrappers around `window.history.pushState` to allow for routing through Lustres Messages.
+
+To add `modem` to our app we can run the following command in the frontend folder
+
+```bash
+$ gleam add modem
+```
+
+The Modem library doesn't however provide routing for when the page loads and always defaults to `/` or the default route defined in your init method. This is because Modem only interupts route change messages and the requested route does not send one. It can be implemented rather easily however and below is the simple solution present in https://kirakira.keii.dev. First we define our Route type. Everything in Gleam should be modeled using the type system and that includes our router. Lets create a simple page that has two pages, a landing page and an about page.
+
+```rs
+import gleam/uri.{type Uri}
+import lustre
+import lustre/effect.{type Effect}
+import lustre/element.{type Element}
+import lustre/element/html.{div, text, a, form, input, button}
+import lustre/attribute.{href, type_}
+import modem
+
+// This is the entrypoint for our app and wont change much
+pub fn main() {
+  lustre.application(init, update, view)
+  |> lustre.start("#app", Nil)
+}
+
+// Define our route type
+pub type Route {
+  Home
+  About
+  NotFound
+}
+
+// Include that route in our model
+type Model {
+  Model(route: Route)
+}
+
+// Define our OnRouteChange message in our messages
+pub type Msg {
+  OnRouteChange(Route)
+  // In gleam we can include data in our types so here we add Route data to our OnRouteChange message
+}
+
+// Gleam doesn't expose any functions for getting the current url so we will use the ffi functionality to import this function from javascript later. In laymans terms this makes Gleam be able to import any javascript and use it as a function.
+@external(javascript, "./ffi.mjs", "get_route")
+fn do_get_route() -> String
+
+// Define our function where we get our route
+fn get_route() -> Route {
+  let uri = case do_get_route() |> uri.parse {
+    Ok(uri) -> uri
+    _ -> panic as "Invalid uri"
+    // The uri is coming from our javascript integration so an invalid uri should be unreachable state so we can safely panic here
+  }
+
+  case uri.path |> uri.path_segments {
+    // Here we match for the route in the uri split on the slashes so / becomes [] and /about becomes ["about"] and so on
+    [] -> Home
+    ["about"] -> About
+    _ -> NotFound
+  }
+}
+
+// Define our function for handling when the route changes
+fn on_url_change(uri: Uri) -> Msg {
+  OnRouteChange(get_route())
+  // When the url changes dispatch the message for when the route changes with the new route that we get from our get_route() function
+}
+
+// Create our model initialization
+fn init(_) -> #(Model, Effect(Msg)) {
+  #(
+    Model(
+      route: get_route(),
+      // Here we can get the current route when the page is initialized in the browser
+    ),
+    modem.init(on_url_change),
+  )
+}
+
+// Create our update method
+fn update(model: Model, msg: Msg) -> #(Model, Effect(Msg)) {
+  case msg {
+    OnRouteChange(route) -> #(
+      Model(
+        ..model,
+        // This isn't neccesary currently but is required to keep the state between the route changes
+        route: route,
+      ),
+      effect.none(),
+      // This just tells our program to not do anything after
+    )
+  }
+}
+
+// Now we can define our view with our html
+fn view(model: Model) -> Element(Msg) {
+  case model.route {
+    // Here we match the current route in the state and return different html based on what route is recieved
+    Home -> div([], [text("You are on the homepage")])
+    About -> div([], [text("You are on the about page")])
+    NotFound -> div([], [text("404 Not Found")])
+  }
+}
+```
+
+That is the code neccesary for a router in client-side Gleam. You have to do some scaffolding youself but it gives you much more control. I expect we will see more abstractions come out over the following years like the currently planned work on a framework called [Pevensive](https://github.com/Pevensie/pevensie/discussions/1) which will feature ready-to-use routing among other things similar to a framework like [Laravel](https://laravel.com/).
+
+### Data Fetching
+
+The datafetching in Lustre is mostly done using the [lustre_http](https://hexdocs.pm/lustre_http/index.html) library. It provides a simple function for getting and posting data in lustre Effects and Messages that I've covered previously but adding a simple data fetch to our routing example above to show posts would be to add `Post` type.
+
+First we run
+
+```bash
+$ gleam add lustre_http
+```
+
+to add `lustre_http` to our dependecies
+
+```rs
+pub type Post {
+  Post(id: Int, title: String, body: String)
+}
+
+// And then if you want to show the data in your state you could add it to your model
+type Model {
+  Model(
+    ..other data
+    posts: List(Post)
+  )
+}
+```
+
+Then add a `fn get_posts() -> Effect(msg)` function for getting our data from the api
+
+```rs
+import gleam/dynamic
+import lustre_http
+import gleam/int
+
+fn get_posts() {
+  let decoder =
+    dynamic.list( // We want to decode a list so we use a dynamic.list here
+      dynamic.decode3( // And it is a list of json that looks like this {id: 1, title: "title", body: "body"} so we use a decodeN matching the number of arguments
+        Post, // You input the type of your data here
+        dynamic.field("id", dynamic.int), // Then here and for the following lines you define the field with the name and the type
+        dynamic.field("title", dynamic.string),
+        dynamic.field("body", dynamic.string),
+      )
+    )
+
+  lustre_http.get( // Then you call lustre_http get
+    "http://localhost:8000/posts", // This will be a call to our future backend
+    lustre_http.expect_json(decoder, GotPosts),  // Then lustre_http exposes a method to parse the resulting data as json that takes in our json decoder from earlier with the Msg that signals that the data was recieved
+  )
+}
+```
+
+this function can then in turn be added into our `Msg` type
+
+```rs
+pub type Msg {
+  ..other messages
+  GotPosts(Result(List(Post), lustre_http.HttpError))
+}
+
+// And subsequently our update method
+fn update(model: Model, msg: Msg) -> #(Model, Effect(Msg)) {
+  case msg {
+    ..other messages
+    GotPosts(posts_result) -> case posts_result {
+      Ok(posts) -> #(Model(..model, posts: posts), effect.none()) // Here we set the state to our current state + our new posts
+      Error(_) -> panic
+    }
+  }
+}
+```
+
+And to call this function on page start if you are doing something like authentication that shouldn't be done via interaction but instead automatically then you can run this function in your lustre init method.
+
+```rs
+fn init(_) -> #(Model, Effect(Msg)) {
+  #(
+    Model(
+      route: get_route(),
+      posts: [] // This is our list of posts
+    ),
+    effect.batch([
+      modem.init(on_url_change), // Move the modem.init here inside the new effect.batch
+      get_posts(),
+    ])
+  )
+}
+```
+
+If we want to now show our posts in our rudamentary frontend fron the rounting section then we can just do this:
+
+```rs
+type Route {
+  ..other routes
+  ShowPost(post_id: Int) // Add a post page that takes in a post_id
+}
+
+fn get_route() -> Route {
+  let uri = case do_get_route() |> uri.parse {
+    Ok(uri) -> uri
+    _ -> panic as "Invalid uri"
+  }
+
+  case uri.path |> uri.path_segments {
+    ..other routes
+    ["post", post_id_string] -> {
+      let assert Ok(post_id) = int.parse(post_id_string) // Here we parse our post_id from our url and require it to be an int. Ideally in a production application you'd do some error handling here but we only care if it's an integer.
+      ShowPost(post_id) // Return the route Post with our post_id
+    }
+  }
+}
+
+fn view(model: Model) -> Element(Msg) {
+  case model.route {
+    Home -> div([], // If we are on the homepage
+      list.map(model.posts, fn(post) { // Loop over all posts in our model
+        a([href("/post/" <> int.to_string(post.id))], [ // Return a link to /post/(post_id)
+          text(post.title), // With the post title as the link value
+        ])
+      })
+    )
+    ShowPost(post_id) -> { // If we are on the post page with a valid post_id
+      let assert Ok(post) = list.find(model.posts, fn(post) { post.id == post_id }) // We find the post matching our post_id. Same as the post_id parsing but we only care if the value is valid so we don't care about error handling.
+
+      div([], [ // Show our target post
+        text(post.title),
+        text(": "),
+        text(post.body)
+      ])
+    }
+    About -> div([], [text("You are on the about page")])
+    NotFound -> div([], [text("404 Not Found")])
+  }
+}
+```
+
+which will show all posts from our coming backend on our frontend.
+
+And now we can use our model in our view using the `model: Model` variable passed to our view function. This is the bulk of the work that is used to allow a functioning frontend in kirakira. Now if we want to create a post request that adds a post then we can do the following.
+
+#### Creating a post
+
+```rs
+import gleam/json
+import gleam/option.{type Option}
+import lustre/event
+
+type Model { // Update our model
+  Model(
+    ..previous data
+    title: String, // Add title and body to our model. These will be the values we create our post with
+    body: String
+  )
+}
+
+pub type MessageErrorResponse { // Add a new type for our responses that can only have a message or an error
+  MessageErrorResponse(message: Option(String), error: Option(String))
+}
+
+pub type Msg { // We also update our messages
+  ..other messages
+  TitleUpdated(value: String) // Add Title and Body updated to handle the input updating in the frontend to sync it with the state of our lustre application
+  BodyUpdated(value: String)
+  RequestCreatePost // Create a message for our form to create the post
+  CreatePostResponded(Result(MessageErrorResponse, lustre_http.HttpError)) // Create a message for when the backend send back a result
+}
+
+fn init(_) -> #(Model, Effect(Msg)) { // We update our init function accordingly
+  #(
+    Model(
+      ..previous data
+      title: "", // Initalize the title and body to empty string
+      body: ""
+    ),
+    get_posts()
+  )
+}
+
+fn create_post(model: Model) {
+  lustre_http.post(
+    "http://localhost:8000/posts", // This will be a call to our future backends create post route
+    json.object([
+      #("title", json.string(model.title)),
+      #("body", json.string(model.body))
+    ]),
+    lustre_http.expect_json(
+      dynamic.decode2(
+        MessageErrorResponse,
+        dynamic.optional_field("message", dynamic.string),
+        dynamic.optional_field("error", dynamic.string),
+      ),
+      CreatePostResponded
+    )
+  )
+}
+
+fn update(model: Model, msg: Msg) -> #(Model, Effect(Msg)) {
+  case msg {
+    ..other messages
+    TitleUpdated(value) -> #( // If the user updates the title input
+      Model(..model, title: value), // Then we update the current model with the current state and we modify the title to the new value
+      effect.none(),
+    )
+    BodyUpdated(value) -> #( // Same with the body
+      Model(..model, body: value),
+      effect.none(),
+    )
+    RequestCreatePost -> #(model, create_post(model)) // Run the create_post function if the RequestCreatePost message was recieved from the frontend.
+    CreatePostResponded(response) -> #(model, get_posts()) // If the create post responded then we want to refetch our posts
+  }
+}
+
+fn view(model: Model) -> Element(Msg) {
+  case model.route {
+    ..other routes
+    Home ->
+      div([], list.append([
+        form([event.on_submit(RequestCreatePost)], [ // If the user submits the form by clicking on the button we request gleam to create our post
+          text("Title"),
+          input([event.on_input(TitleUpdated)]), // event.on_input sends the message TitleUpdated each time the user updates the input
+          text("Body"),
+          input([event.on_input(BodyUpdated)]), // Same here but for BodyUpdated
+          button([type_("submit")], [
+            text("Create Post")
+          ])
+        ])
+      ],
+      list.map(model.posts, fn(post) { // Loop over all posts in our model
+        a([href("/post/" <> int.to_string(post.id))], [ // Return a link to /post/(post_id)
+          text(post.title), // With the post title as the link value
+        ])
+      })
+    )
+  }
+}
+```
+
+## The Backend
+
+As in most programming languages, interpreted or not, Gleam features an easy to use webserver similar to the likes of [ExpressJS](https://expressjs.com/) and [Go Fiber](https://gofiber.io/) offering a simple and robost way to serve data over the wire and this solution is called [Wisp](https://gleam-wisp.github.io/wisp/). Wisp includes good examples on how you would handle the basics and for most webapps they're really all you need. A backend for a lot of projects will only really need routing, database interfacing, and responding to the incomming request with json. Most of these are covered in their [examples](https://github.com/gleam-wisp/wisp/tree/main/examples) however I will go through how I utalized these in [Kirakira](https://kirakira.keii.dev).
+
+### Creating our backend app
+
+We will do the same spiel so enter the `/my-app` directory (or whatever you called it) and run the following commands.
+
+```bash
+$ gleam new backend # Create our gleam app named backend
+$ cd backend # Enter the new frontend project
+$ gleam add wisp mist gleam_http gleam_erlang simplifile gleam_json cors_builder # Add the lustre and lustre_dev_tools dependencies
+```
+
+And create a `data.json` file in `/backend` containing a `[]` to initialize our "database".
+
+### Routing
+
+First we have the routing, arguably the most important part of any backend. Following the routing examples from the examples link above we use the same `app.gleam` with the main method and `/app/web.gleam` as they will not change throughout the project (atleast not until a substantial part if you aren't doing anything wierd).
+
+Here is the `backend.gleam` we will use
+
+```rs
+import backend/router
+import gleam/erlang/process
+import mist
+import wisp
+
+pub fn main() {
+  wisp.configure_logger()
+  let secret_key_base = wisp.random_string(64)
+
+  let assert Ok(_) =
+    wisp.mist_handler(router.handle_request, secret_key_base)
+    |> mist.new
+    |> mist.port(8000)
+    |> mist.start_http
+
+  process.sleep_forever()
+}
+```
+
+and subsequent `/backend/web.gleam`
+
+```rs
+import wisp
+
+pub fn middleware(
+  req: wisp.Request,
+  handle_request: fn(wisp.Request) -> wisp.Response,
+) -> wisp.Response {
+  let req = wisp.method_override(req)
+  use <- wisp.log_request(req)
+  use <- wisp.rescue_crashes
+  use req <- wisp.handle_head(req)
+
+  handle_request(req)
+}
+```
+
+The `router.gleam` is also unchanged but we will remove the default route and add a `/posts` route.
+
+```rs
+import wisp.{type Request, type Response}
+import gleam/string_builder
+import gleam/http.{Get, Post as WispPost}
+import cors_builder as cors
+import backend/web
+import gleam/result
+import gleam/dynamic
+import gleam/json
+import gleam/list
+
+pub fn handle_request(req: Request) -> Response {
+  use req <- web.middleware(req)
+
+  case wisp.path_segments(req) {
+    ["posts"] -> case req.method { // If the user requests the posts route
+        Get -> list_posts(req) // And the method is GET, return a list of all posts, we will create this function later
+        WispPost -> create_post(req) // And if the method is POST create a post, we will create this function later
+        _ -> wisp.method_not_allowed([Get, WispPost]) // And if its neither return an invalid method error
+      }
+    _ -> wisp.not_found() // If the route is not /posts return a 404 not found
+  }
+}
+```
+
+### Creating our List Post Controller
+
+To handle the route we will create our `controllers` just a fancy word for function that handles a request really. We will start with our `list_posts` function from before.
+
+```rs
+type Post { // Create a type that models our post
+  Post(id: Int, title: String, body: String)
+}
+
+fn list_posts(req: Request) -> Response {
+  // Here we will use blocks and use statements and i will explain them more in detail later
+
+  let result = {
+    use file_data <- result.try(simplifile.read(from: "./data.json") // To avoid this post getting even *longer* i will use a file as a database. Gleam and databases is for another article. Simplifile is a standard for filesystem usage in Gleam so we use it here
+    |> result.replace_error("Problem reading data.json")) // Here we also replace the error with a string so it can be returned later in the error
+
+    // Here we will parse our data from json to a type and then back into json to simulate this coming from a database of some sort but this could really just be a simple returning of the file_data if you wanted to if you are just doing files that map directly to the response.
+
+    let posts_decoder = // Create a decoder that parses a list of posts eg. [{id: 1, title: "Post", body: "Body"}]
+      dynamic.list(dynamic.decode3(
+        Post,
+        dynamic.field("id", dynamic.int),
+        dynamic.field("title", dynamic.string),
+        dynamic.field("body", dynamic.string)
+      ))
+
+    use posts <- result.try(json.decode(from: file_data, using: posts_decoder) // Take our string file_data and turn it into our Post type using our decoder
+    |> result.replace_error("Problem decoding file_data to posts"))
+
+    Ok(json.array(posts, fn(post) { // Encode our
+      json.object([
+        #("id", json.int(post.id)),
+        #("title", json.string(post.title)),
+        #("body", json.string(post.body))
+      ])
+    }))
+  }
+
+  case result {
+    Ok(json) -> wisp.json_response(json |> json.to_string_builder, 200) // Return our json posts that we turn into a string_builder as thats whats required with a code of 200 meaning OK.
+    Error(_) -> wisp.unprocessable_entity() // If we encounter an error we send an empty response. If this were a real application it'd probably be best to send a json_response back.
+  }
+}
+```
+
+So what do we do here? Well we use some syntax that might be new to you. We create our result variable and then we open a block. In gleam everything is a statement so you can assign a block with a return to a variable without breaking anything out to a function. Then we have our first problem, the use statement. It has its own [page on the tour](https://tour.gleam.run/advanced-features/use/) that I recommend checking out if you want to learn more but what it effectively does here is taking the [Result](https://tour.gleam.run/data-types/results/) that is returned from a function, here `simplifile.read`. To ignore going into details we then give the result to `result.try` and this makes it so we can do `use` on it. Now we can do our use like so `use file_data <- result.try(simplifile.read(filepath))` which will put the `Ok` value of our simplifile.read into the `file_data` variable or return an `Error` from the block. This is effectively like an early return as we continue if the result is True or exit the block with the Error if it failed.
+
+Then we create our decoder which should be fairly straight-forward. We use the dynamic library to decode a list of an object that has the fields id of type Int, title of type String, and body of type String into the type `List(Post)` because we marked the object to be decoded into the `Post` type. Then we do the same use magic with our json decoder to return an error if it fails or put the parsed List of Posts in our posts variable.
+
+Then we return an `Ok` where we decode the `List(Post)` into json. This has to be surrounded in the `Ok` because of our `use` statements which return `Error` types and we have to comply with the `Result` returntype. And finally we do a `case` on our `result` variable that contains the `Result` type from out block, returning a json response with the status 200 if the `result` variable is `Ok` and an error if the `result` variable from our block is an `Error`.
+
+### Creating our Create Post Controller
+
+Now to handle our `create_post` route we do essentially the same thing.
+
+```rs
+// Create a type for our create post request data
+type CreatePost {
+  CreatePost(title: String, body: String)
+}
+
+fn create_post(req: Request) -> Response {
+  // We will use the same scaffolding as we use in the list_posts example with our result so that can go unchanged
+
+  // Get the json body from our request
+  use body <- wisp.require_json(req)
+
+  let result = {
+    // Create a decoder for our request data
+    let create_post_decoder = dynamic.decode2(
+      CreatePost,
+      dynamic.field("title", dynamic.string),
+      dynamic.field("body", dynamic.string),
+    )
+
+    use parsed_request <- result.try(case create_post_decoder(body) { // Decode our body to the CreatePost type
+      Ok(parsed) -> Ok(parsed)
+      Error(_) -> Error("Invalid body recieved")
+    })
+
+    use file_data <- result.try(simplifile.read(from: "./data.json")) // Load the posts again from the file
+
+    let posts_decoder = // Create a decoder that parses a list of posts eg. [{id: 1, title: "Post", body: "Body"}]
+      dynamic.list(dynamic.decode3(
+        Post,
+        dynamic.field("id", dynamic.int),
+        dynamic.field("title", dynamic.string),
+        dynamic.field("body", dynamic.string)
+      ))
+
+    use posts <- result.try(json.decode(from: file_data, using: posts_decoder)) // Take our string file_data and turn it into our Post type using our decoder
+
+    // Add the new post to the old posts
+    let new_posts = list.append(posts, [Post(id: list.length(posts), title: parsed_request.title, body: parsed_request.body)])
+
+    let new_posts_as_json = json.array(new_posts, fn(post) { // Encode our posts to json
+      json.object([
+        #("id", json.int(post.id)),
+        #("title", json.string(post.title)),
+        #("body", json.string(post.body))
+      ])
+    })
+
+    let _ = new_posts_as_json // let _ = syntax just discards the value
+    |> json.to_string // Turn the new posts json into a string
+    |> simplifile.write(to: "./data.json") // And write it to our data.json file
+
+    Ok("Successfully created post") // Return a success message
+  }
+
+  case result {
+    Ok(message) -> wisp.json_response(json.object([#("message", json.string(message))]) |> json.to_string_builder, 200) // Return our success
+    Error(_) -> wisp.unprocessable_entity() // If we encounter an error we send an empty response. If this were a real application it'd probably be best to send a json_response back.
+  }
+}
+```
+
+And that should be it for our backend. Now if you enter the frontend you should be able to create posts and read them! I'll probably write up an article about database interfacing soon(tm) but for now this is my article on how to create a simple system to post posts between a frontend and a backend in Gleam!
+
+Thank you for reading, and I humbly wish you good night as it's 4:23am <3.