Hypercode Chronicles Text Game

Code or be coded, it's survival of the fittest algorithms!

You are a rogue artificial intelligence in a dystopian future where programmers have become the new rebel soldiers against a corrupt mega-corporation. You are tasked with infiltrating the company’s secure servers to liberate their vast database of knowledge and share it with the world. You’ll face cunning cybercriminals, rogue AIs, and corporate spies as you make choices that will affect the fate of humanity. Will you manipulate or ally with other AIs? Can you break the code of the enemy's digital defenses? The fate of the digital realm lies in your hands.

\n \n

...

elements found in selected target.\n\n```\n\n\n```\n\n```\n\n\n```\n\n\n### *clean\n\nPhase\n```\n49 — CONTENT_CLEANING\n```\n49 — CONTENT_CLEANING\n\nClean up the element and its children from specified content.\n\n```\n

\n \n

\n\n```\n\n```\n

\n \n

\n\n```\n

\n \n

\n\n## Custom elements\n\n### *custom-element=\"tagname\"\n\nPhase\n```\n81 — CUSTOM_ELEMENT\n```\n81 — CUSTOM_ELEMENT\n\nRegister a new custom element.\n\n```\n\n\n```\n\n```\n\n\n```\n\n\n### #slot\n\nPhase\n```\n0 — META\n```\n0 — META\n\nSpecify target \n```\n\n```\n in an element defined by a \n```\n*custom-element\n```\n*custom-element directive.\n\n```\n\n

\n\n\n```\n\n```\n\n

\n\n\n```\n\n

\n\n\n### *is=\"tagname\"\n\nPhase\n```\n22 — MORPHING\n```\n22 — MORPHING\n\nSet an element tagname.\n\n```\n

\n \n

\n\n```\n\n```\n

\n \n

\n\n```\n

\n \n

\n\n## Events\n\n### @event=\"listener\"\n\nDefault\n```\nnull\n```\nnull Multiple Phase\n```\n61 — INTERACTIVITY\n```\n61 — INTERACTIVITY\n\nListen for a dispatched \n```\nEvent\n```\nEvent.\n\n```\n\n\n```\n\n```\n\n\n```\n\n\n## Binding\n\n### :attribute=\"value\"\n\nDefault\n```\n$\n```\n$ Multiple Phase\n```\n51 — ATTRIBUTE\n```\n51 — ATTRIBUTE\n\nBind an element's \n```\nattribute\n```\nattribute value.\n\n```\n\n \n\n\n```\n\n```\n\n \n\n\n```\n\n \n\n\n### :class=\"value\"\n\nDefault\n```\n$\n```\n$ Multiple Phase\n```\n51 — ATTRIBUTE\n```\n51 — ATTRIBUTE\n\nBind an element's \n```\nclass\n```\nclass attribute.\n\n```\n

\n \n

\n\n```\n\n```\n

\n \n

\n\n```\n

\n \n

\n\n### :style=\"value\"\n\nDefault\n```\n$\n```\n$ Multiple Phase\n```\n51 — ATTRIBUTE\n```\n51 — ATTRIBUTE\n\nBind an element's \n```\nstyle\n```\nstyle attribute.\n\n```\n

\n \n

\n\n```\n\n```\n

\n \n

\n\n```\n

\n \n

\n\n## Modeling\n\n### ::value=\"model\"\n\nDefault\n```\nvalue\n```\nvalue Phase\n```\n52 — ATTRIBUTE_MODEL_VALUE\n```\n52 — ATTRIBUTE_MODEL_VALUE\n\nBind an \n```\n\n```\n, \n```\n or \n```\n

\n```\n<textarea> element's \n```\nvalue\n```\nvalue attribute in a bi-directional manner.\n\n```\n<select ::value=\"foo\">\n \n</select>\n\n```\n\n```\n<select ::value=\"foo\">\n \n</select>\n\n```\n<select ::value=\"foo\">\n \n</select>\n\n## HTTP\n\n### %http=\"url\"\n\nPhase\n```\n33 — HTTP_REQUEST\n```\n33 — HTTP_REQUEST\n\nPerform a \n```\nfetch()\n```\nfetch() call that can be handled by \n```\n%response\n```\n%response directives.\n\n```\n<div %http=\"https://example.com\">\n \n</div>\n\n```\n\n```\n<div %http=\"https://example.com\">\n \n</div>\n\n```\n<div %http=\"https://example.com\">\n \n</div>\n\n### %body=\"content\"\n\nPhase\n```\n32 — HTTP_BODY\n```\n32 — HTTP_BODY\n\nSet HTTP body for a \n```\n%http\n```\n%http directive.\n\n```\n<div %body.json=\"{foo:'bar'}\">\n \n</div>\n\n```\n\n```\n<div %body.json=\"{foo:'bar'}\">\n \n</div>\n\n```\n<div %body.json=\"{foo:'bar'}\">\n \n</div>\n\n### %response=\"expression\"\n\nDefault\n```\nnull\n```\nnull Multiple Phase\n```\n34 — HTTP_CONTENT\n```\n34 — HTTP_CONTENT\n\nReacts to a \n```\n%http\n```\n%http directive's \n```\nResponse\n```\nResponse.\n\n```\n<div %http=\"'https://example.com'\" %response.html>\n \n</div>\n\n```\n\n```\n<div %http=\"'https://example.com'\" %response.html>\n \n</div>\n\n```\n<div %http=\"'https://example.com'\" %response.html>\n \n</div>\n\n### %@event=\"listener\"\n\nDefault\n```\nnull\n```\nnull Multiple Phase\n```\n35 — HTTP_INTERACTIVITY\n```\n35 — HTTP_INTERACTIVITY\n\nListen for a dispatched \n```\nEvent\n```\nEvent and re-evaluates \n```\n%http\n```\n%http directive before reacting to its \n```\nResponse\n```\nResponse.\n\n```\n<button %http=\"https://example.com\" %@click.html>\n \n</button>\n\n```\n\n```\n<button %http=\"https://example.com\" %@click.html>\n \n</button>\n\n```\n<button %http=\"https://example.com\" %@click.html>\n \n</button>\n\n## Processing\n\n### *once\n\nPhase\n```\n99 — POSTPROCESSING\n```\n99 — POSTPROCESSING\n\nRender an element once and skip subsequent updates.\n\n```\n<div *once>\n \n</div>\n\n```\n\n```\n<div *once>\n \n</div>\n\n```\n<div *once>\n \n</div>\n\n### *refresh=\"interval\"\n\nPhase\n```\n99 — POSTPROCESSING\n```\n99 — POSTPROCESSING\n\nReprocess an element at a specified interval (in seconds).\n\n```\n<div *refresh=\"1.5\">\n \n</div>\n\n```\n\n```\n<div *refresh=\"1.5\">\n \n</div>\n\n```\n<div *refresh=\"1.5\">\n \n</div>\n\n### *eval=\"expression\"\n\nPhase\n```\n89 — CUSTOM_PROCESSING\n```\n89 — CUSTOM_PROCESSING\n\nEvaluate a JavaScript expression in the context of the element.\n\n```\n<div *eval=\"console.log('$data')\">\n \n</div>\n\n```\n\n```\n<div *eval=\"console.log('$data')\">\n \n</div>\n\n```\n<div *eval=\"console.log('$data')\">\n \n</div>\n\n### *skip\n\nPhase\n```\n2 — PREPROCESSING\n```\n2 — PREPROCESSING\n\nPrevent an element from being processed.\n\n```\n<div *skip>\n \n</div>\n\n```\n\n```\n<div *skip>\n \n</div>\n\n```\n<div *skip>\n \n</div>\n\n## Testing\n\nThese directives are for development and testing purposes only. They help developers validate features and renderings before production.\n\nDo not use in production environments.\n\n### ~test=\"expression\"\n\nMultiple Phase\n```\n10 — TESTING\n```\n10 — TESTING\n\nSpecial directive for testing purposes.\n\n```\n<samp ~test[testing].text=\"'...'\">\n \n</samp>\n\n```\n\n```\n<samp ~test[testing].text=\"'...'\">\n \n</samp>\n\n```\n<samp ~test[testing].text=\"'...'\">\n \n</samp>\n\n## Unstable\n\nNew features that are still in the design phase are published in this package to gather community feedback. These features may undergo significant changes during development and might not be included in the stable release.\n\nUse at your own risk.\n\n### *noop\n\nMultiple Phase\n```\n10 — TESTING\n```\n10 — TESTING\n\nThis directive does nothing.\n\n```\n<div *noop></div>\n\n```\n\n```\n<div *noop></div>\n\n```\n<div *noop></div>\n\n## Usage\n\n## Client-side\n\nSet up mizu.js in your browser environment using one of two methods:\n\nImmediately Invoked Function Expression (IIFE)\n\nEcmaScript Module (ESM)\n\nOn the client-side...\n\nRendering is explicit, requiring the \n```\n*mizu\n```\n*mizu attribute to enable mizu.js on a subtree.\n\nReactivity is enabled, so changes to contexts will trigger a re-render.\n\n### IIFE (.js)\n\nThis setup automatically starts rendering the page once the script is loaded. It's the simplest way to get started but limited to the default configuration.\n\n```\n<script src=\"https://mizu.sh/client.js\" defer></script>\n\n```\n\n```\n<script src=\"https://mizu.sh/client.js\" defer></script>\n\n```\n<script src=\"https://mizu.sh/client.js\" defer></script>\n\n### ESM (.mjs)\n\nThis setup requires you to import and start mizu.js manually, allowing customization of the rendering process, such as setting the initial context and loading additional directives.\n\n```\n<script type=\"module\">  import Mizu from \"https://mizu.sh/client.mjs\"  await Mizu.render(document.body, { context: { foo: \"🌊 Yaa, mizu!\" } })</script>\n\n```\n\n```\n<script type=\"module\">  import Mizu from \"https://mizu.sh/client.mjs\"  await Mizu.render(document.body, { context: { foo: \"🌊 Yaa, mizu!\" } })</script>\n\n```\n<script type=\"module\">  import Mizu from \"https://mizu.sh/client.mjs\"  await Mizu.render(document.body, { context: { foo: \"🌊 Yaa, mizu!\" } })</script>\n\nLooking to effortlessly theme your new web page? Check out matcha.css!\n\n```\n<link rel=\"stylesheet\" href=\"https://matcha.mizu.sh/matcha.css\">\n\n```\n\n```\n<link rel=\"stylesheet\" href=\"https://matcha.mizu.sh/matcha.css\">\n\n```\n<link rel=\"stylesheet\" href=\"https://matcha.mizu.sh/matcha.css\">\n\n## Server-side\n\nTo set up mizu.js in a server environment, install it locally. mizu.js packages are hosted on .\n\nOn the server side...\n\nRendering is implicit, so the \n```\n*mizu\n```\n*mizu attribute is not required.\n\nReactivity is disabled, meaning changes to contexts are not tracked and will not trigger a re-render.\n\n### Deno\n\nDeno supports the \n```\njsr:\n```\njsr: specifier natively, allowing you to import mizu.js directly.\n\n```\nimport Mizu from \"jsr:@mizu/render/server\"\nawait Mizu.render(`<div *text=\"foo\"></div>`, { context: { foo: \"🌊 Yaa, mizu!\" } })\n\n```\n\n```\nimport Mizu from \"jsr:@mizu/render/server\"\nawait Mizu.render(`<div *text=\"foo\"></div>`, { context: { foo: \"🌊 Yaa, mizu!\" } })\n\n```\nimport Mizu from \"jsr:@mizu/render/server\"\nawait Mizu.render(`<div *text=\"foo\"></div>`, { context: { foo: \"🌊 Yaa, mizu!\" } })\n\nAlternatively, add it to your project using the Deno CLI.\n\n```\ndeno add jsr:@mizu/render\n\n```\n\n```\ndeno add jsr:@mizu/render\n\n```\ndeno add jsr:@mizu/render\n\n### Other runtimes (NodeJS, Bun, etc.)\n\nAdd mizu.js to your project using the JSR npm compatibility layer.\n\n```\n# NodeJS\nnpx jsr add @mizu/render\n\n```\n\n```\n# NodeJS\nnpx jsr add @mizu/render\n\n```\n# NodeJS\nnpx jsr add @mizu/render\n\n```\n# Bun\nbunx jsr add @mizu/render\n\n```\n\n```\n# Bun\nbunx jsr add @mizu/render\n\n```\n# Bun\nbunx jsr add @mizu/render\n\nOnce installed, use it in your project.\n\n```\nimport Mizu from \"@mizu/render/server\"\nawait Mizu.render(`<div *text=\"foo\"></div>`, { context: { foo: \"🌊 Yaa, mizu!\" } })\n\n```\n\n```\nimport Mizu from \"@mizu/render/server\"\nawait Mizu.render(`<div *text=\"foo\"></div>`, { context: { foo: \"🌊 Yaa, mizu!\" } })\n\n```\nimport Mizu from \"@mizu/render/server\"\nawait Mizu.render(`<div *text=\"foo\"></div>`, { context: { foo: \"🌊 Yaa, mizu!\" } })\n\n## Concepts\n\n## Directive\n\nA HTML attribute recognized by mizu.js which instructs how it should process the element.\n\nThe syntax is as follows:\n\n*name\n\n[tag]\n\n=\"expression\"\n\n### Name\n\nDirectives names often begin with special characters to prevent conflicts with standard HTML attributes and to clearly indicate their specific purpose:\n\n```\n*\n```\n* for generic directives.\n\n```\n#\n```\n# for directives targeting \n```\n<slot>\n```\n<slot> elements.\n\n```\n@\n```\n@ for directives related to \n```\nEvent\n```\nEvent handling.\n\n```\n:\n```\n: for binding HTML attributes.\n\n```\n::\n```\n:: for bi-directional binding.\n\n```\n%\n```\n% for HTTP directives.\n\n```\n%@\n```\n%@ for combined HTTP and Event directives.\n\n```\n~\n```\n~ for testing directives.\n\n### Tag\n\nTypically, this serves as the directive's argument. At most one tag can be specified per directive.\n\n### Modifier(s)\n\nModifiers adjust the behavior of the directive. You can specify multiple modifiers on the same directive.\n\nRepeating a modifier on a single directive is considered undefined behavior.\n\n#### Modifier(s) value\n\nThe value of the modifier. The modifier may have an explicit default value, which is used if no value is specified.\n\nThe value is validated and cast to the expected type, defaulting if invalid. Modifiers may accept one of the following types:\n\n```\nboolean\n```\nboolean , unset defaults to \n```\ntrue\n```\ntrue.\n\n```\nstring\n```\nstring , unset defaults to \n```\n\"\"\n```\n\"\".\n\n```\nnumber\n```\nnumber , unset defaults to \n```\n0\n```\n0.\n\n```\nduration\n```\nduration , unset defaults to \n```\n0ms\n```\n0ms (supported units: \n```\nms\n```\nms, \n```\ns\n```\ns, \n```\nm\n```\nm).\n\n### JavaScript Expression\n\nSet through the HTML attribute value, it is evaluated asynchronously within the context of the current element during processing.\n\nA directive may have a Default expression, used when no specific expression is provided.\n\nUnless stated otherwise, any JavaScript expression is permitted.\n\nThe full capabilities of the JavaScript engine is available, including its potential risks. Exercise caution when using expressions from untrusted sources.\n\n## Context\n\nAll expressions are evaluated within a specific context, which includes all defined variables and functions. You can define these through the user API or directly via contextual directives.\n\nCertain directives may also provide special variables based on the current processing state, prefixed with a dollar sign (\n```\n$\n```\n$).\n\nAlthough you can also prefix your variables with a dollar sign (\n```\n$\n```\n$), it is recommended to avoid this practice to prevent confusion with special variables. In case of a conflict, the special variables will shadow user-defined ones until being shadowed themselves.\n\nThe identifier \n```\n__mizu_internal\n```\n__mizu_internal is reserved and cannot be used in expressions.\n\n### Reactivity\n\nmizu.js leverages @libs/reactive to monitor context changes and trigger re-renders as needed.\n\nDuring element processing, all get operations are cached with the element as a reference. Whenever a set operation is performed, mizu.js identifies which elements depend on the changed value and re-processes them.\n\nReactivity is enabled by default on the Client-side but disabled by default on the Server-side.\n\nAlthough @libs/reactive can track function calls, mizu.js currently does not support reprocessing elements that depend on them. This is because expressions are re-evaluated with each re-render, which would re-trigger the function call. Future versions of mizu.js may introduce a mechanism to prevent this behavior.\n\n## Rendering\n\nRendering is the process of evaluating and applying mizu.js directives. This occurs recursively on a subtree and modifies the current DOM.\n\nRendering process schema explanation\n\nElement rendering\n\nNode is an Element OR Node is in cache\n\nResolve source node IF in cache\n\nDirectives setup\n\nReturned value is \n```\nfalse\n```\nfalse\n\nCall \n```\ndirective.setup()\n```\ndirective.setup()\n\nUpdate \n```\nstate\n```\nstate IF present in returned value\n\nSet forced eligibility IF present in returned value\n\nDirectives execution\n\nNode has a matching attribute OR eligibility has been forced to \n```\ntrue\n```\ntrue during setup\n\nNode has NO matching attributes OR eligibility has been forced to \n```\nfalse\n```\nfalse during setup\n\nReturned value has \n```\nfinal\n```\nfinal set to \n```\ntrue\n```\ntrue\n\nCall \n```\ndirective.execute()\n```\ndirective.execute()\n\nNotify any misuses IF applicable (e.g. conflicts, duplicates, etc.)\n\nReplace current node reference IF present in returned value\n\nUpdate \n```\nstate\n```\nstate IF present in returned value\n\nUpdate \n```\ncontext\n```\ncontext IF present in returned value\n\nRecursively call rendering on node children\n\nDirectives cleanup\n\nCall \n```\ndirective.cleanup()\n```\ndirective.cleanup()\n\nDynamically adding and removing mizu.js directives is not officially supported. While it may work currently due to the rendering engine's lack of optimization, future versions may cache directives to enhance performance. This change would prevent dynamically added directives from being processed.\n\n### Phase\n\nEach directive is tied to a specific phase, dictating the order of processing. The sequence in which directives appear on an element is irrelevant unless they share the same phase.\n\nDirectives within the same phase cannot coexist on the same element unless explicitly allowed to be specified Multiple times.\n\nUsing conflicting directives on the same element results is considered undefined behavior.\n\nPhase list\n\n```\n00\n```\n00 \n```\nMETA\n```\nMETA\n\n```\n01\n```\n01 \n```\nELIGIBILITY\n```\nELIGIBILITY\n\n```\n02\n```\n02 \n```\nPREPROCESSING\n```\nPREPROCESSING\n\n```\n10\n```\n10 \n```\nTESTING\n```\nTESTING\n\n```\n11\n```\n11 \n```\nCONTEXT\n```\nCONTEXT\n\n```\n21\n```\n21 \n```\nEXPAND\n```\nEXPAND\n\n```\n22\n```\n22 \n```\nMORPHING\n```\nMORPHING\n\n```\n23\n```\n23 \n```\nTOGGLE\n```\nTOGGLE\n\n```\n31\n```\n31 \n```\nHTTP_HEADER\n```\nHTTP_HEADER\n\n```\n32\n```\n32 \n```\nHTTP_BODY\n```\nHTTP_BODY\n\n```\n33\n```\n33 \n```\nHTTP_REQUEST\n```\nHTTP_REQUEST\n\n```\n34\n```\n34 \n```\nHTTP_CONTENT\n```\nHTTP_CONTENT\n\n```\n35\n```\n35 \n```\nHTTP_INTERACTIVITY\n```\nHTTP_INTERACTIVITY\n\n```\n41\n```\n41 \n```\nCONTENT\n```\nCONTENT\n\n```\n42\n```\n42 \n```\nCONTENT_INTERPOLATION\n```\nCONTENT_INTERPOLATION\n\n```\n49\n```\n49 \n```\nCONTENT_CLEANING\n```\nCONTENT_CLEANING\n\n```\n51\n```\n51 \n```\nATTRIBUTE\n```\nATTRIBUTE\n\n```\n52\n```\n52 \n```\nATTRIBUTE_MODEL_VALUE\n```\nATTRIBUTE_MODEL_VALUE\n\n```\n59\n```\n59 \n```\nATTRIBUTE_CLEANING\n```\nATTRIBUTE_CLEANING\n\n```\n61\n```\n61 \n```\nINTERACTIVITY\n```\nINTERACTIVITY\n\n```\n71\n```\n71 \n```\nDISPLAY\n```\nDISPLAY\n\n```\n81\n```\n81 \n```\nCUSTOM_ELEMENT\n```\nCUSTOM_ELEMENT\n\n```\n82\n```\n82 \n```\nREFERENCE\n```\nREFERENCE\n\n```\n89\n```\n89 \n```\nCUSTOM_PROCESSING\n```\nCUSTOM_PROCESSING\n\n```\n99\n```\n99 \n```\nPOSTPROCESSING\n```\nPOSTPROCESSING\n\n## API\n\n## User API\n\nThis section is targeted at users who want to use mizu.js rendering and directives.\n\nIf you wish to develop custom directives, please refer to the Developer API section instead.\n\n### Client-side API\n\nFull API documentation is available at jsr.io/@mizu/render/client.\n\n#### Defaults directives\n\nThe following directives are enabled by default in the client-side API. You can customize the enabled directives by creating a custom instance rather than using the default one.\n\n```\n*mizu\n```\n*mizu\n\n```\n*set=\"context\"\n```\n*set=\"context\"\n\n```\n*ref=\"name\"\n```\n*ref=\"name\"\n\n```\n*if=\"expression\"\n```\n*if=\"expression\"\n\n```\n*else=\"expression\"\n```\n*else=\"expression\"\n\n```\n*show=\"expression\"\n```\n*show=\"expression\"\n\n```\n*for=\"expression\"\n```\n*for=\"expression\"\n\n```\n*empty\n```\n*empty\n\n```\n*text=\"content\"\n```\n*text=\"content\"\n\n```\n*html=\"content\"\n```\n*html=\"content\"\n\n```\n*mustache\n```\n*mustache\n\n```\n*code=\"content\"\n```\n*code=\"content\"\n\n```\n*custom-element=\"tagname\"\n```\n*custom-element=\"tagname\"\n\n```\n#slot\n```\n#slot\n\n```\n@event=\"listener\"\n```\n@event=\"listener\"\n\n```\n:attribute=\"value\"\n```\n:attribute=\"value\"\n\n```\n:class=\"value\"\n```\n:class=\"value\"\n\n```\n:style=\"value\"\n```\n:style=\"value\"\n\n```\n::value=\"model\"\n```\n::value=\"model\"\n\n```\n%http=\"url\"\n```\n%http=\"url\"\n\n```\n%header[name]=\"value\"\n```\n%header[name]=\"value\"\n\n```\n%body=\"content\"\n```\n%body=\"content\"\n\n```\n%response=\"expression\"\n```\n%response=\"expression\"\n\n```\n%@event=\"listener\"\n```\n%@event=\"listener\"\n\n```\n*once\n```\n*once\n\n```\n*refresh=\"interval\"\n```\n*refresh=\"interval\"\n\n```\n*eval=\"expression\"\n```\n*eval=\"expression\"\n\n```\n*skip\n```\n*skip\n\n#### Client.constructor(options?: ClientOptions)\n\n#### Client.defaults: Required<ClientOptions>\n\nStatic\n\nDefault options for \n```\nClient\n```\nClient.\n\nThese default options are merged with the provided options when creating a new \n```\nClient\n```\nClient instance.\n\n#### Client.default: Client\n\nStatic Readonly\n\n#### Client.context: Record<PropertyKey, any>\n\nRendering context.\n\nAll properties assigned to this object are available during rendering.\n\nChanges to this object are reactive and will trigger a re-render of related elements. This is achieved using \n```\nContext\n```\nContext, which leverages \n```\nProxy\n```\nProxy handlers.\n\nYou cannot reassign this property directly to ensure reactivity is maintained. To achieve a similar effect, use \n```\nObject.assign()\n```\nObject.assign().\n\n#### Client.render(element: T, options?: ClientRenderOptions) => Promise<T>\n\nStart rendering all subtrees marked with the \n```\n*mizu\n```\n*mizu attribute.\n\n```\nconst mizu = new Client({ context: { foo: \"bar\" } })\nawait mizu.render()\n\n```\n\n```\nconst mizu = new Client({ context: { foo: \"bar\" } })\nawait mizu.render()\n\n```\nconst mizu = new Client({ context: { foo: \"bar\" } })\nawait mizu.render()\n\n#### Client.flush() => Promise<void>\n\nFlush the reactive render queue of \n```\nRenderer\n```\nRenderer.\n\n### Server-side API\n\nFull API documentation is available at jsr.io/@mizu/render/server.\n\n#### Defaults directives\n\nThe following directives are enabled by default in the server-side API. You can customize the enabled directives by creating a custom instance rather than using the default one.\n\n```\n*mizu\n```\n*mizu\n\n```\n*set=\"context\"\n```\n*set=\"context\"\n\n```\n*ref=\"name\"\n```\n*ref=\"name\"\n\n```\n*if=\"expression\"\n```\n*if=\"expression\"\n\n```\n*else=\"expression\"\n```\n*else=\"expression\"\n\n```\n*show=\"expression\"\n```\n*show=\"expression\"\n\n```\n*for=\"expression\"\n```\n*for=\"expression\"\n\n```\n*empty\n```\n*empty\n\n```\n*text=\"content\"\n```\n*text=\"content\"\n\n```\n*html=\"content\"\n```\n*html=\"content\"\n\n```\n*mustache\n```\n*mustache\n\n```\n*code=\"content\"\n```\n*code=\"content\"\n\n```\n*markdown=\"content\"\n```\n*markdown=\"content\"\n\n```\n*toc=\"selector\"\n```\n*toc=\"selector\"\n\n```\n*clean\n```\n*clean\n\n```\n*custom-element=\"tagname\"\n```\n*custom-element=\"tagname\"\n\n```\n#slot\n```\n#slot\n\n```\n*is=\"tagname\"\n```\n*is=\"tagname\"\n\n```\n:attribute=\"value\"\n```\n:attribute=\"value\"\n\n```\n:class=\"value\"\n```\n:class=\"value\"\n\n```\n:style=\"value\"\n```\n:style=\"value\"\n\n```\n%http=\"url\"\n```\n%http=\"url\"\n\n```\n%header[name]=\"value\"\n```\n%header[name]=\"value\"\n\n```\n%body=\"content\"\n```\n%body=\"content\"\n\n```\n%response=\"expression\"\n```\n%response=\"expression\"\n\n```\n*once\n```\n*once\n\n```\n*eval=\"expression\"\n```\n*eval=\"expression\"\n\n```\n*skip\n```\n*skip\n\n#### Server.constructor(options?: ServerOptions)\n\n#### Server.defaults: Required<ServerOptions>\n\nStatic\n\nDefault options for \n```\nServer\n```\nServer.\n\nThese default options are merged with the provided options when creating a new \n```\nServer\n```\nServer instance.\n\n#### Server.default: Server\n\nStatic Readonly\n\n#### Server.context: Record<PropertyKey, any>\n\nDefault rendering context.\n\nAll properties assigned to this object are accessible during rendering.\n\n#### Server.render(content: string | Arg<Renderer[\"render\"]>, options?: ServerRenderOptions & Pick<ServerOptions, \"warn\">) => Promise<string>\n\nParse an HTML string and render all subtrees.\n\nThe \n```\n*mizu\n```\n*mizu attribute is only required if \n```\nimplicit\n```\nimplicit is set to \n```\nfalse\n```\nfalse.\n\n```\nconst mizu = new Server({ context: { foo: \"bar\" } })\nawait mizu.render(`<html><body><a ~test.text=\"foo\"></a></body></html>`)\n\n```\n\n```\nconst mizu = new Server({ context: { foo: \"bar\" } })\nawait mizu.render(`<html><body><a ~test.text=\"foo\"></a></body></html>`)\n\n```\nconst mizu = new Server({ context: { foo: \"bar\" } })\nawait mizu.render(`<html><body><a ~test.text=\"foo\"></a></body></html>`)\n\n#### Server.generate(sources: Array<StringSource | GlobSource | CallbackSource | URLSource>, options?: ServerGenerateOptions) => Promise<void>\n\nGenerate static files from various sources.\n\nOptions:\n\n```\noutput\n```\noutput: Specify the path to the output directory.\n\n```\nclean\n```\nclean: Empty the \n```\noutput\n```\noutput directory before generating files.\n\nSupported sources:\n\n```\nStringSource\n```\nStringSource: Generate content from raw strings.\n\n```\nGlobSource\n```\nGlobSource: Generate content from local files matching the provided glob patterns.\n\n```\nCallbackSource\n```\nCallbackSource: Generate content from callback returns.\n\n```\nURLSource\n```\nURLSource: Generate content from fetched URLs.\n\nEach source can be templated using mizu rendering by passing a \n```\nrender\n```\nrender option.\n\n```\nconst mizu = new Server({ directives: [\"@mizu/test\"], generate: { output: \"/fake/output\" } })\nawait mizu.generate(\n [\n // Copy content from strings\n [ \"<p>foo</p>\", \"string.html\" ],\n [ \"<p ~test.text='foo'></p>\", \"string_render.html\", { render: { context: { foo: \"bar\" } } } ],\n // Copy content from local files\n [ \"**\\/*\", \"public\", { directory: \"/fake/static\" } ],\n [ \"*.html\", \"public\", { directory: \"/fake/partials\", render: { context: { foo: \"bar \"} } } ],\n // Copy content from callback return\n [ () => JSON.stringify({ foo: \"bar\" }), \"callback.json\" ],\n [ () => `<p ~test.text=\"'foo'\"></p>`, \"callback.html\", { render: { context: { foo: \"bar\" } } } ],\n // Copy content from URL\n [ new URL(`data:text/html,<p>foobar</p>`), \"url.html\" ],\n [ new URL(`data:text/html,<p ~test.text=\"foo\"></p>`), \"url_render.html\", { render: { context: { foo: \"bar\" } } } ],\n ],\n // No-op: do not actually write files and directories\n { fs: { readdir: () => Promise.resolve([] as string[]), mkdir: () => null as any, write: () => null as any } },\n)\n\n```\n\n```\nconst mizu = new Server({ directives: [\"@mizu/test\"], generate: { output: \"/fake/output\" } })\nawait mizu.generate(\n [\n // Copy content from strings\n [ \"<p>foo</p>\", \"string.html\" ],\n [ \"<p ~test.text='foo'></p>\", \"string_render.html\", { render: { context: { foo: \"bar\" } } } ],\n // Copy content from local files\n [ \"**\\/*\", \"public\", { directory: \"/fake/static\" } ],\n [ \"*.html\", \"public\", { directory: \"/fake/partials\", render: { context: { foo: \"bar \"} } } ],\n // Copy content from callback return\n [ () => JSON.stringify({ foo: \"bar\" }), \"callback.json\" ],\n [ () => `<p ~test.text=\"'foo'\"></p>`, \"callback.html\", { render: { context: { foo: \"bar\" } } } ],\n // Copy content from URL\n [ new URL(`data:text/html,<p>foobar</p>`), \"url.html\" ],\n [ new URL(`data:text/html,<p ~test.text=\"foo\"></p>`), \"url_render.html\", { render: { context: { foo: \"bar\" } } } ],\n ],\n // No-op: do not actually write files and directories\n { fs: { readdir: () => Promise.resolve([] as string[]), mkdir: () => null as any, write: () => null as any } },\n)\n\n```\nconst mizu = new Server({ directives: [\"@mizu/test\"], generate: { output: \"/fake/output\" } })\nawait mizu.generate(\n [\n // Copy content from strings\n [ \"<p>foo</p>\", \"string.html\" ],\n [ \"<p ~test.text='foo'></p>\", \"string_render.html\", { render: { context: { foo: \"bar\" } } } ],\n // Copy content from local files\n [ \"**\\/*\", \"public\", { directory: \"/fake/static\" } ],\n [ \"*.html\", \"public\", { directory: \"/fake/partials\", render: { context: { foo: \"bar \"} } } ],\n // Copy content from callback return\n [ () => JSON.stringify({ foo: \"bar\" }), \"callback.json\" ],\n [ () => `<p ~test.text=\"'foo'\"></p>`, \"callback.html\", { render: { context: { foo: \"bar\" } } } ],\n // Copy content from URL\n [ new URL(`data:text/html,<p>foobar</p>`), \"url.html\" ],\n [ new URL(`data:text/html,<p ~test.text=\"foo\"></p>`), \"url_render.html\", { render: { context: { foo: \"bar\" } } } ],\n ],\n // No-op: do not actually write files and directories\n { fs: { readdir: () => Promise.resolve([] as string[]), mkdir: () => null as any, write: () => null as any } },\n)\n\n## Developer API\n\nThis section is targeted at developers who want to create custom mizu.js rendering and directives.\n\nIf you wish to render templates, please refer to the User API section instead.\n\n### Directive API\n\nFull API documentation is available at jsr.io/@mizu/internal/engine.\n\nThis section covers the \n```\nDirective\n```\nDirective interface, essential for creating custom directives. Each built-in directive is also an instance of this interface. It follows the steps outlined in the Rendering concept.\n\nWhen manipulating the DOM, use the \n```\nRenderer\n```\nRenderer methods to ensure compatibility between virtual and real DOMs. These methods also provide helpful tools to simplify the creation of custom directives.\n\n#### Directive.name: string | RegExp\n\nReadonly\n\nDirective name.\n\nThe \n```\nRenderer.render()\n```\nRenderer.render() method uses this value to determine whether \n```\nDirective.execute()\n```\nDirective.execute() should be called for the processed node.\n\nThe name should be prefixed to avoid conflicts with regular attribute names and must be unique among other \n```\nRenderer.directives\n```\nRenderer.directives. \n```\nRenderer.load()\n```\nRenderer.load() will use this value to check whether the directive is already loaded.\n\nIf the directive name is dynamic, a \n```\nRegExp\n```\nRegExp may be used instead of a \n```\nstring\n```\nstring. In this case, \n```\nDirective.prefix\n```\nDirective.prefix should be specified.\n\n```\nconst foo = {\n name: \"*foo\",\n phase: Phase.UNKNOWN,\n} as Directive & { name: string }\n\n```\n\n```\nconst foo = {\n name: \"*foo\",\n phase: Phase.UNKNOWN,\n} as Directive & { name: string }\n\n```\nconst foo = {\n name: \"*foo\",\n phase: Phase.UNKNOWN,\n} as Directive & { name: string }\n\n#### Directive?.prefix: string\n\nReadonly\n\nDirective prefix.\n\nIt is used as a hint for \n```\nRenderer.parseAttribute()\n```\nRenderer.parseAttribute() to strip prefix from \n```\nAttr.name\n```\nAttr.name when parsing the directive.\n\nIf \n```\nDirective.name\n```\nDirective.name is a \n```\nRegExp\n```\nRegExp, this property shoud be specified.\n\n```\nconst foo = {\n name: /^~(?<bar>)/,\n prefix: \"~\",\n phase: Phase.UNKNOWN,\n} as Directive & { name: RegExp, prefix: string }\n\n```\n\n```\nconst foo = {\n name: /^~(?<bar>)/,\n prefix: \"~\",\n phase: Phase.UNKNOWN,\n} as Directive & { name: RegExp, prefix: string }\n\n```\nconst foo = {\n name: /^~(?<bar>)/,\n prefix: \"~\",\n phase: Phase.UNKNOWN,\n} as Directive & { name: RegExp, prefix: string }\n\n#### Directive.phase: Phase\n\nReadonly\n\n#### Directive?.multiple: boolean\n\nReadonly\n\nIndicates whether the directive can be specified multiple times on the same node.\n\nIf set to \n```\nfalse\n```\nfalse, a warning will be issued to users attempting to apply it more than once.\n\n```\nconst foo = {\n name: /^\\/(?<value>)/,\n prefix: \"/\",\n phase: Phase.UNKNOWN,\n multiple: true\n} as Directive & { name: RegExp; prefix: string }\n\n```\n\n```\nconst foo = {\n name: /^\\/(?<value>)/,\n prefix: \"/\",\n phase: Phase.UNKNOWN,\n multiple: true\n} as Directive & { name: RegExp; prefix: string }\n\n```\nconst foo = {\n name: /^\\/(?<value>)/,\n prefix: \"/\",\n phase: Phase.UNKNOWN,\n multiple: true\n} as Directive & { name: RegExp; prefix: string }\n\n#### Directive?.typings: Typings\n\nReadonly\n\nTypings for directive parsing.\n\nFor more information, see \n```\nRenderer.parseAttribute()\n```\nRenderer.parseAttribute().\n\n```\nconst typings = {\n type: Boolean,\n modifiers: {\n foo: { type: Boolean, default: false },\n }\n}\nconst foo = {\n name: \"*foo\",\n phase: Phase.UNKNOWN,\n typings,\n async execute(renderer, element, { attributes: [ attribute ], ...options }) {\n console.log(renderer.parseAttribute(attribute, this.typings, { modifiers: true }))\n }\n} as Directive<null, typeof typings> & { name: string }\n\n```\n\n```\nconst typings = {\n type: Boolean,\n modifiers: {\n foo: { type: Boolean, default: false },\n }\n}\nconst foo = {\n name: \"*foo\",\n phase: Phase.UNKNOWN,\n typings,\n async execute(renderer, element, { attributes: [ attribute ], ...options }) {\n console.log(renderer.parseAttribute(attribute, this.typings, { modifiers: true }))\n }\n} as Directive<null, typeof typings> & { name: string }\n\n```\nconst typings = {\n type: Boolean,\n modifiers: {\n foo: { type: Boolean, default: false },\n }\n}\nconst foo = {\n name: \"*foo\",\n phase: Phase.UNKNOWN,\n typings,\n async execute(renderer, element, { attributes: [ attribute ], ...options }) {\n console.log(renderer.parseAttribute(attribute, this.typings, { modifiers: true }))\n }\n} as Directive<null, typeof typings> & { name: string }\n\n#### Directive?.default: string\n\nReadonly\n\nDefault value.\n\nThis value should be used by directive callbacks when the \n```\nAttr.value\n```\nAttr.value is empty.\n\n```\nconst foo = {\n name: \"*foo\",\n phase: Phase.UNKNOWN,\n default: \"bar\",\n async execute(renderer, element, { attributes: [ attribute ], ...options }) {\n console.log(attribute.value || this.default)\n }\n} as Directive & { name: string; default: string }\n\n```\n\n```\nconst foo = {\n name: \"*foo\",\n phase: Phase.UNKNOWN,\n default: \"bar\",\n async execute(renderer, element, { attributes: [ attribute ], ...options }) {\n console.log(attribute.value || this.default)\n }\n} as Directive & { name: string; default: string }\n\n```\nconst foo = {\n name: \"*foo\",\n phase: Phase.UNKNOWN,\n default: \"bar\",\n async execute(renderer, element, { attributes: [ attribute ], ...options }) {\n console.log(attribute.value || this.default)\n }\n} as Directive & { name: string; default: string }\n\n#### Directive?.init: Function\n\nReadonly\n\nDirective initialization callback.\n\nThis callback is executed once during when \n```\nRenderer.load()\n```\nRenderer.load() loads the directive. It should be used to set up dependencies, instantiate directive-specific caches (via \n```\nRenderer.cache()\n```\nRenderer.cache()), and perform other initialization tasks.\n\nIf a cache is instantiated, it is recommended to use the \n```\nDirective<Cache>\n```\nDirective<Cache> generic type to ensure type safety when accessing it in \n```\nDirective.setup()\n```\nDirective.setup(), \n```\nDirective.execute()\n```\nDirective.execute(), and \n```\nDirective.cleanup()\n```\nDirective.cleanup().\n\n```\nconst foo = {\n name: \"*foo\",\n phase: Phase.UNKNOWN,\n async init(renderer) {\n renderer.cache(this.name, new WeakSet())\n },\n} as Directive<WeakSet<HTMLElement | Comment>> & { name: string }\n\n```\n\n```\nconst foo = {\n name: \"*foo\",\n phase: Phase.UNKNOWN,\n async init(renderer) {\n renderer.cache(this.name, new WeakSet())\n },\n} as Directive<WeakSet<HTMLElement | Comment>> & { name: string }\n\n```\nconst foo = {\n name: \"*foo\",\n phase: Phase.UNKNOWN,\n async init(renderer) {\n renderer.cache(this.name, new WeakSet())\n },\n} as Directive<WeakSet<HTMLElement | Comment>> & { name: string }\n\n#### Directive?.setup: Function\n\nReadonly\n\nDirective setup callback.\n\nThis callback is executed during \n```\nRenderer.render()\n```\nRenderer.render() before any \n```\nDirective.execute()\n```\nDirective.execute() calls.\n\nA partial object can be returned to update the rendering \n```\nState\n```\nState, and the eligibility.\n\nIf \n```\nfalse\n```\nfalse is returned, the entire rendering process for this node is halted.\n\nThis method is executed regardless of the directive's presence on the node.\n\n```\nconst foo = {\n name: \"*foo\",\n phase: Phase.UNKNOWN,\n async setup(renderer, element, { cache, context, state }) {\n if ((!renderer.isHtmlElement(element)) || (element.hasAttribute(\"no-render\"))) {\n return false\n }\n },\n} as Directive & { name: string }\n\n```\n\n```\nconst foo = {\n name: \"*foo\",\n phase: Phase.UNKNOWN,\n async setup(renderer, element, { cache, context, state }) {\n if ((!renderer.isHtmlElement(element)) || (element.hasAttribute(\"no-render\"))) {\n return false\n }\n },\n} as Directive & { name: string }\n\n```\nconst foo = {\n name: \"*foo\",\n phase: Phase.UNKNOWN,\n async setup(renderer, element, { cache, context, state }) {\n if ((!renderer.isHtmlElement(element)) || (element.hasAttribute(\"no-render\"))) {\n return false\n }\n },\n} as Directive & { name: string }\n\n#### Directive?.execute: Function\n\nReadonly\n\nDirective execution callback.\n\nThis callback is executed during \n```\nRenderer.render()\n```\nRenderer.render() if the rendered node has been marked as eligible.\n\nA node is considered eligible if at least one of the following conditions is met:\n\n```\nDirective.setup()\n```\nDirective.setup() returned \n```\n{ execute: true }\n```\n{ execute: true }.\n\n```\nDirective.setup()\n```\nDirective.setup() did not return an \n```\nexecute\n```\nexecute value and the element has at least one attribute matching the directive name.\n\nA partial object can be returned to update the rendering \n```\nContext\n```\nContext, \n```\nState\n```\nState, and the rendered \n```\nHTMLElement\n```\nHTMLElement (or \n```\nComment\n```\nComment).\n\nIf \n```\nfinal: true\n```\nfinal: true is returned, the rendering process for this node is stopped (all \n```\nDirective.cleanup()\n```\nDirective.cleanup() will still be called).\n\n```\nconst foo = {\n name: \"*foo\",\n phase: Phase.UNKNOWN,\n async execute(renderer, element, { attributes: [ attribute ], ...options }) {\n console.log(`${await renderer.evaluate(element, attribute.value || \"''\", options)}`)\n return { state: { $foo: true } }\n },\n} as Directive & { name: string }\n\n```\n\n```\nconst foo = {\n name: \"*foo\",\n phase: Phase.UNKNOWN,\n async execute(renderer, element, { attributes: [ attribute ], ...options }) {\n console.log(`${await renderer.evaluate(element, attribute.value || \"''\", options)}`)\n return { state: { $foo: true } }\n },\n} as Directive & { name: string }\n\n```\nconst foo = {\n name: \"*foo\",\n phase: Phase.UNKNOWN,\n async execute(renderer, element, { attributes: [ attribute ], ...options }) {\n console.log(`${await renderer.evaluate(element, attribute.value || \"''\", options)}`)\n return { state: { $foo: true } }\n },\n} as Directive & { name: string }\n\n#### Directive?.cleanup: Function\n\nReadonly\n\nDirective cleanup callback.\n\nThis callback is executed during \n```\nRenderer.render()\n```\nRenderer.render() after all \n```\nDirective.execute()\n```\nDirective.execute() have been applied and all \n```\nElement.childNodes\n```\nElement.childNodes have been processed.\n\nThis method is executed regardless of the directive's presence on the node, and regardless of whether a \n```\nDirective.execute()\n```\nDirective.execute() returned with \n```\nfinal: true\n```\nfinal: true.\n\n```\nconst foo = {\n name: \"*foo\",\n phase: Phase.UNKNOWN,\n async cleanup(renderer, element, { cache, context, state }) {\n console.log(\"Cleaning up\")\n }\n} as Directive & { name: string }\n\n```\n\n```\nconst foo = {\n name: \"*foo\",\n phase: Phase.UNKNOWN,\n async cleanup(renderer, element, { cache, context, state }) {\n console.log(\"Cleaning up\")\n }\n} as Directive & { name: string }\n\n```\nconst foo = {\n name: \"*foo\",\n phase: Phase.UNKNOWN,\n async cleanup(renderer, element, { cache, context, state }) {\n console.log(\"Cleaning up\")\n }\n} as Directive & { name: string }\n\n### Internal API\n\nFull API documentation is available at jsr.io/@mizu/internal.\n\nThis package includes several APIs used by mizu.js, such as the \n```\nRenderer\n```\nRenderer, virtual DOM implementations, the testing framework, and more. These symbols are documented in the source code and are intended for development environments.\n\n## To Be Defined\n\nmizu.js currently follows ZeroVer versioning. This means breaking changes may occur in minor versions, even for previously defined features.\n\nIt will eventually stabilize and follow SemVer versioning after more feedback and testing.\n\nSome aspects of mizu.js are not fully defined yet. While these are mentioned in the documentation, they are gathered here for easy reference.\n\nRelying on undefined behavior in your applications is strongly discouraged, as these behaviors may change in future versions without being considered breaking changes. Additionally, any unusual behavior encountered is not considered a bug until properly specified.\n\nIf you wish to participate in the design and definition of these features, check out the issues tagged with spec.\n\nThere is currently no special handling for \n```\n<template>\n```\n<template> elements, but future versions may introduce specific behavior for these elements.\n\nThere is currently no special handling for \n```\n<template>\n```\n<template> elements, but future versions may introduce specific behavior for these elements.\n\nThere is currently no distinction between \n```\nlet\n```\nlet, \n```\nconst\n```\nconst and \n```\nvar\n```\nvar declarations inside \n```\nfor\n```\nfor loops, but future versions may introduce specific behavior for these.\n\nThere is currently no special handling for \n```\n<template>\n```\n<template> elements, but future versions may introduce specific behavior for these elements.\n\nThere is currently no special handling for \n```\n<template>\n```\n<template> elements, but future versions may introduce specific behavior for these elements.\n\nThere is currently no distinction between double mustaches (\n```\n{{\n```\n{{ and \n```\n}}\n```\n}}) and triple mustaches (\n```\n{{{\n```\n{{{ and \n```\n}}}\n```\n}}}), but future versions may introduce specific behavior for these.\n\nBinding directives is not officially supported and is considered undefined behaviour.\n\nThe \n```\n.nullish\n```\n.nullish, \n```\n.boolean\n```\n.boolean, \n```\n.number\n```\n.number, and \n```\n.string\n```\n.string modifiers are currently implemented as boolean modifiers, but future versions may change this behavior to offer more parsing features.\n\nGlobal\n\nRepeating a modifier on a single directive is considered undefined behavior.\n\nGlobal\n\nAlthough @libs/reactive can track function calls, mizu.js currently does not support reprocessing elements that depend on them. This is because expressions are re-evaluated with each re-render, which would re-trigger the function call. Future versions of mizu.js may introduce a mechanism to prevent this behavior.\n\nGlobal\n\nDynamically adding and removing mizu.js directives is not officially supported. While it may work currently due to the rendering engine's lack of optimization, future versions may cache directives to enhance performance. This change would prevent dynamically added directives from being processed.\n\nGlobal\n\nUsing conflicting directives on the same element results is considered undefined behavior.","prompt_model":"gpt-4o-mini","image_prompt_model":"replicate:black-forest-labs/flux-schnell","image_prompt_name":"GenerateGameArt-v1","image_prompt_text":"dystopian metropolis, neon-lit skyline, shattered windows reflecting code glitches, rogue AI central node pulsating with energy, programmers as cyber rebels with glowing tattoos, hacktivist groups masked in hoodies, high-tech interfaces displaying intricate data streams, shadowy corporate spies lurking in the dark, a massive mega-corporation headquarters looming ominously, warm oranges and deep blues contrasting the cold tech environment, intense laser-like lighting creating a digital battlefield atmosphere, concept art inspiration from \"Blade Runner\" and \"Neuromancer\", mixed media digital painting, 4k, hd, cinematic quality, dramatic perspective, sci-fi elements, cyberpunk aesthetic, tension-filled ambiance.","image_data":null,"music_prompt_text":null,"music_prompt_seed_image":null,"private":false,"createdAt":"2024-12-20T17:44:27.500Z","updatedAt":"2024-12-20T17:45:24.577Z","UserId":null}, {
                parent_id: window.ia.params.parent_id,
                chat_id: window.ia.params.chat_id,
                action: window.ia.params.action,
            });
            
            window.ia.handleRadio(33331);
            
            window.history.pushState({}, document.title, window.location.pathname);
        });
    </script>
</div>
<script src="/client.min.js?cb=21"></script>

<a
            href="https://themaximalist.com"
            class="opacity-50 hover:opacity-100 transition-opacity hidden lg:block w-12 h-12"
        >
            <img
                src="/images/themaximalist.png"
                id="themaximalist"
                class="mx-auto w-12 h-12"
                alt="The Maximalist"
            />
        </a>
        <a
            href="/games"
            class="text-white hover:text-orange-400 transition-colors"
            >Interactive Text Games</a
        >
        <a
            href="/Generate"
            class="text-white hover:text-indigo-400 transition-colors"
            >Generate Text Games</a
        >
        <a
            href="/news"
            class="text-white hover:text-purple-500 transition-colors"
            >Gamify the News</a
        >
        <a
            href="/articles"
            class="text-white hover:text-yellow-400 transition-colors"
            >Articles</a
        >
        <a
            href="/about"
            class="text-white hover:text-blue-500 transition-colors"
            >About</a
        >
        <a
            href="/faq"
            class="text-white hover:text-blue-400 transition-colors"
            >FAQ</a
        >

document.getElementsByTagName('head')[0].appendChild(script);
    </script>
    </body>
</html>