Blog, responsive, account and veLords upgrades

.vscode/settings.json

@@ -14,7 +14,7 @@
     { "pattern": "tooling/*/" }
   ],
   "eslint.runtime": "node",
-  "tailwindCSS.experimental.configFile": "./tooling/tailwind/index.ts",
+  "tailwindCSS.experimental.configFile": "./tooling/tailwind/web.ts",
   "typescript.enablePromptUseWorkspaceTsdk": true,
   "typescript.tsdk": "node_modules/typescript/lib",
   "typescript.preferences.autoImportFileExcludePatterns": [
@@ -24,12 +24,7 @@
   "deno.enable": false,
   "deno.lint": false,
   "deno.unstable": false,
-  "[typescript]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
-  },
-  "[typescriptreact]": {
-    // Sometimes vscode prettier doesn't format .tsx file without this config.
-    // see also: https://stackoverflow.com/questions/61731587/vscode-prettier-doesnt-format-tsx-file
+  "[typescript,typescriptreact]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   }
 

apps/frontinus-house/package.json

@@ -26,7 +26,7 @@
     "react-router-dom": "^6.24.0",
     "remarkable": "^2.0.1",
     "starknet": "5.25.0",
-    "tailwindcss": "3.4.10"
+    "tailwindcss": "catalog:"
   },
   "devDependencies": {
     "@types/node": "^22.3.0",

apps/frontinus-house/src/components/Markdown.jsx

@@ -0,0 +1,109 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Markdown = Markdown;
+var react_1 = require("react");
+var utils_1 = require("@/lib/utils");
+var heroicons_outline_1 = require("@iconify-json/heroicons-outline");
+var core_1 = require("highlight.js/lib/core");
+var javascript_1 = require("highlight.js/lib/languages/javascript");
+var json_1 = require("highlight.js/lib/languages/json");
+var python_1 = require("highlight.js/lib/languages/python");
+var rust_1 = require("highlight.js/lib/languages/rust");
+var highlightjs_solidity_1 = require("highlightjs-solidity");
+var remarkable_1 = require("remarkable");
+var linkify_1 = require("remarkable/linkify");
+core_1.default.registerLanguage("javascript", javascript_1.default);
+core_1.default.registerLanguage("json", json_1.default);
+core_1.default.registerLanguage("rust", rust_1.default);
+core_1.default.registerLanguage("python", python_1.default);
+core_1.default.registerLanguage("solidity", highlightjs_solidity_1.solidity);
+function Markdown(_a) {
+    //const { copy } = useClipboard();
+    var body = _a.body;
+    var remarkable = new remarkable_1.Remarkable({
+        html: false,
+        breaks: true,
+        typographer: false,
+        linkTarget: "_blank",
+        highlight: function (str, lang) {
+            if (lang && core_1.default.getLanguage(lang)) {
+                try {
+                    return core_1.default.highlight(str, { language: lang }).value;
+                }
+                catch (e) { }
+            }
+            try {
+                return core_1.default.highlightAuto(str).value;
+            }
+            catch (e) { }
+            return "";
+        },
+    }).use(linkify_1.linkify);
+    remarkable.core.ruler.disable([
+        "abbr",
+        "abbr2",
+        "footnote_tail",
+        "replacements",
+        "smartquotes",
+    ]);
+    remarkable.block.ruler.disable([
+        "code",
+        "deflist",
+        "footnote",
+        "htmlblock",
+        "lheading",
+    ]);
+    remarkable.inline.ruler.disable([
+        "autolink",
+        "del",
+        "entity",
+        "escape",
+        "footnote_inline",
+        "footnote_ref",
+        "htmltag",
+        "ins",
+        "mark",
+        "sub",
+        "sup",
+        "text",
+    ]);
+    var parsed = function () {
+        var formattedBody = body.replace(/ipfs:\/\/(\w+)/g, function (value) { return (0, utils_1.getUrl)(value) || "#"; });
+        return remarkable.render(formattedBody);
+    };
+    (0, react_1.useEffect)(function () {
+        var body = document.querySelector(".markdown-body");
+        if (!body)
+            return;
+        body.querySelectorAll("pre>code").forEach(function (code) {
+            var _a, _b;
+            var parent = code.parentElement;
+            var copyButton = document.createElement("button");
+            var copySvg = "<svg viewBox=\"0 0 24 24\" width=\"20px\" height=\"20px\">".concat((_a = heroicons_outline_1.icons.icons.duplicate) === null || _a === void 0 ? void 0 : _a.body, "</svg>");
+            copyButton.classList.add("text-skin-text");
+            copyButton.setAttribute("type", "button");
+            copyButton.innerHTML = copySvg;
+            copyButton.addEventListener("click", function () {
+                var _a;
+                if (parent !== null) {
+                    //copy(code.textContent!);
+                    copyButton.innerHTML = "<svg viewBox=\"0 0 24 24\" width=\"20px\" height=\"20px\">".concat((_a = heroicons_outline_1.icons.icons.check) === null || _a === void 0 ? void 0 : _a.body, "</svg>");
+                    copyButton.classList.add("!text-skin-success");
+                    setTimeout(function () {
+                        copyButton.innerHTML = copySvg;
+                        copyButton.classList.remove("!text-skin-success");
+                    }, 1e3);
+                }
+            });
+            var titleBar = document.createElement("div");
+            titleBar.classList.add("title-bar");
+            var language = document.createElement("div");
+            language.innerHTML =
+                ((_b = code.getAttribute("class")) === null || _b === void 0 ? void 0 : _b.split("language-")[1]) || "";
+            titleBar.append(language);
+            titleBar.append(copyButton);
+            parent.prepend(titleBar);
+        });
+    });
+    return (<div className="markdown-body break-words" dangerouslySetInnerHTML={{ __html: parsed() }}/>);
+}

apps/frontinus-house/src/components/app-shell.jsx

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = AppShell;
+var sidebar_1 = require("@/components/sidebar");
+var use_is_collapsed_1 = require("@/hooks/use-is-collapsed");
+var react_router_dom_1 = require("react-router-dom");
+var header_1 = require("./header");
+function AppShell() {
+    var _a = (0, use_is_collapsed_1.default)(), isCollapsed = _a[0], setIsCollapsed = _a[1];
+    return (<div className={"--font-silkscreen --font-inconsolata dark grid min-h-screen w-full bg-background md:grid-cols-[220px_1fr] lg:grid-cols-[280px_1fr]"}>
+      <sidebar_1.default isCollapsed={isCollapsed} setIsCollapsed={setIsCollapsed}/>
+      <div className="flex flex-col">
+        <header_1.default />
+        <main id="content" className={"h-full overflow-x-hidden pt-16 transition-[margin] md:overflow-y-hidden md:pt-0"}>
+          <react_router_dom_1.Outlet />
+        </main>
+      </div>
+    </div>);
+}

apps/frontinus-house/src/components/header.jsx

@@ -0,0 +1,76 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = Header;
+var menuLinks_1 = require("@/data/menuLinks");
+var lucide_react_1 = require("lucide-react");
+var react_router_dom_1 = require("react-router-dom");
+var button_1 = require("@realms-world/ui/components/ui/button");
+var card_1 = require("@realms-world/ui/components/ui/card");
+var dropdown_menu_1 = require("@realms-world/ui/components/ui/dropdown-menu");
+var input_1 = require("@realms-world/ui/components/ui/input");
+var sheet_1 = require("@realms-world/ui/components/ui/sheet");
+function Header() {
+    return (<header className="flex items-center gap-4 border-b bg-muted/40 px-4 lg:h-[60px] lg:px-6">
+      <sheet_1.Sheet>
+        <sheet_1.SheetTrigger asChild>
+          <button_1.Button variant="outline" className="shrink-0 md:hidden">
+            <lucide_react_1.Menu className="h-5 w-5"/>
+            <span className="sr-only">Toggle navigation menu</span>
+          </button_1.Button>
+        </sheet_1.SheetTrigger>
+        <sheet_1.SheetContent className="flex flex-col">
+          <nav className="grid gap-2 text-lg font-medium">
+            {menuLinks_1.sidelinks.map(function (link) { return (<react_router_dom_1.Link to={link.href} className="mx-[-0.65rem] flex items-center gap-4 rounded-xl bg-muted px-3 py-2 text-bright-yellow hover:text-foreground">
+                {link.icon}
+                {link.title}
+                {/*link.badge && (
+              <Badge className="ml-auto flex h-6 w-6 shrink-0 items-center justify-center rounded-full">
+                {link.badge}
+              </Badge>
+            )*/}
+              </react_router_dom_1.Link>); })}
+          </nav>
+          <div className="mt-auto">
+            <card_1.Card>
+              <card_1.CardHeader>
+                <card_1.CardTitle>Upgrade to Pro</card_1.CardTitle>
+                <card_1.CardDescription>
+                  Unlock all features and get unlimited access to our support
+                  team.
+                </card_1.CardDescription>
+              </card_1.CardHeader>
+              <card_1.CardContent>
+                <button_1.Button size="sm" className="w-full">
+                  Upgrade
+                </button_1.Button>
+              </card_1.CardContent>
+            </card_1.Card>
+          </div>
+        </sheet_1.SheetContent>
+      </sheet_1.Sheet>
+      <div className="w-full flex-1">
+        <form>
+          <div className="relative h-[3.7rem]">
+            <lucide_react_1.Search className="absolute left-2.5 top-[20px] h-4 w-4 text-muted-foreground"/>
+            <input_1.Input type="search" placeholder="Search..." className="h-full w-full appearance-none border-0 bg-background pl-8 shadow-none focus:ring-0 md:w-2/3 lg:w-1/3"/>
+          </div>
+        </form>
+      </div>
+      <dropdown_menu_1.DropdownMenu>
+        <dropdown_menu_1.DropdownMenuTrigger asChild>
+          <button_1.Button variant="outline" size="sm" className="rounded-full">
+            <lucide_react_1.CircleUser className="h-5 w-5"/>
+            <span className="sr-only">Toggle user menu</span>
+          </button_1.Button>
+        </dropdown_menu_1.DropdownMenuTrigger>
+        <dropdown_menu_1.DropdownMenuContent align="end">
+          <dropdown_menu_1.DropdownMenuLabel>My Account</dropdown_menu_1.DropdownMenuLabel>
+          <dropdown_menu_1.DropdownMenuSeparator />
+          <dropdown_menu_1.DropdownMenuItem>Settings</dropdown_menu_1.DropdownMenuItem>
+          <dropdown_menu_1.DropdownMenuItem>Support</dropdown_menu_1.DropdownMenuItem>
+          <dropdown_menu_1.DropdownMenuSeparator />
+          <dropdown_menu_1.DropdownMenuItem>Logout</dropdown_menu_1.DropdownMenuItem>
+        </dropdown_menu_1.DropdownMenuContent>
+      </dropdown_menu_1.DropdownMenu>
+    </header>);
+}

apps/frontinus-house/src/components/layout.jsx

@@ -0,0 +1,35 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LayoutBody = exports.LayoutHeader = exports.Layout = void 0;
+var React = require("react");
+var utils_1 = require("@realms-world/utils");
+var Layout = React.forwardRef(function (_a, ref) {
+    var className = _a.className, _b = _a.fadedBelow, fadedBelow = _b === void 0 ? false : _b, _c = _a.fixedHeight, fixedHeight = _c === void 0 ? false : _c, props = __rest(_a, ["className", "fadedBelow", "fixedHeight"]);
+    return (<div ref={ref} className={(0, utils_1.cn)('relative flex h-full w-full flex-col', fadedBelow &&
+            'after:pointer-events-none after:absolute after:bottom-0 after:left-0 after:hidden after:h-32 after:w-full after:bg-[linear-gradient(180deg,_transparent_10%,_hsl(var(--background))_70%)] after:md:block', fixedHeight && 'md:h-svh', className)} {...props}/>);
+});
+exports.Layout = Layout;
+Layout.displayName = 'Layout';
+var LayoutHeader = React.forwardRef(function (_a, ref) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (<div ref={ref} className={(0, utils_1.cn)('flex h-[var(--header-height)] flex-none items-center gap-4 bg-background p-4 md:px-8', className)} {...props}/>);
+});
+exports.LayoutHeader = LayoutHeader;
+LayoutHeader.displayName = 'LayoutHeader';
+var LayoutBody = React.forwardRef(function (_a, ref) {
+    var className = _a.className, fixedHeight = _a.fixedHeight, props = __rest(_a, ["className", "fixedHeight"]);
+    return (<div ref={ref} className={(0, utils_1.cn)('flex-1 overflow-hidden py-6', fixedHeight && 'h-[calc(100%-var(--header-height))]', className)} {...props}/>);
+});
+exports.LayoutBody = LayoutBody;
+LayoutBody.displayName = 'LayoutBody';

apps/frontinus-house/src/components/sidebar.jsx

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = Sidebar;
+var menuLinks_1 = require("@/data/menuLinks");
+var lucide_react_1 = require("lucide-react");
+var react_router_dom_1 = require("react-router-dom");
+var button_1 = require("@realms-world/ui/components/ui/button");
+var card_1 = require("@realms-world/ui/components/ui/card");
+function Sidebar(_a) {
+    var className = _a.className, isCollapsed = _a.isCollapsed, setIsCollapsed = _a.setIsCollapsed;
+    return (<div className="bg-muted/40 hidden border-r md:block">
+      <div className="flex h-full max-h-screen flex-col gap-2">
+        <div className="flex h-14 items-center border-b px-4 lg:h-[60px] lg:px-6">
+          <react_router_dom_1.Link to="/" className="flex items-center gap-2 font-semibold">
+            <lucide_react_1.Package2 className="h-6 w-6"/>
+            <span className="">Frontinus House</span>
+          </react_router_dom_1.Link>
+          <button_1.Button variant="outline" className="ml-auto h-8 w-8">
+            <lucide_react_1.Bell className="h-4 w-4"/>
+            <span className="sr-only">Toggle notifications</span>
+          </button_1.Button>
+        </div>
+        <div className="flex-1">
+          <nav className="grid items-start px-2 text-sm font-medium lg:px-4 mt-2">
+            {menuLinks_1.sidelinks.map(function (link) { return (<react_router_dom_1.Link to={link.href} className="flex items-center gap-3 rounded-lg px-3 py-2 text-lg transition-all hover:text-opacity-40">
+                {link.icon}
+                <span>{link.title}</span>
+                {/*link.badge && (
+              <Badge className="ml-auto flex h-6 w-6 shrink-0 items-center justify-center rounded-full">
+                {link.badge}
+              </Badge>
+            )*/}
+              </react_router_dom_1.Link>); })}
+          </nav>
+        </div>
+        <div className="mt-auto p-4">
+          <card_1.Card x-chunk="dashboard-02-chunk-0">
+            <card_1.CardHeader className="p-2 pt-0 md:p-4">
+              <card_1.CardTitle>Want To Govern?</card_1.CardTitle>
+              <card_1.CardDescription>
+                Purchase a Realm NFT to particpate in the governance of the Realms Autonomous World
+              </card_1.CardDescription>
+            </card_1.CardHeader>
+            <card_1.CardContent className="p-2 pt-0 md:p-4 md:pt-0">
+              <button_1.Button size="sm" className="w-full">
+                Realms.World
+              </button_1.Button>
+            </card_1.CardContent>
+          </card_1.Card>
+        </div>
+      </div>
+    </div>);
+}