New version

.env.sample

@@ -0,0 +1,10 @@
+# Url match
+DOMAIN_MATCH="hodl.ar" # if hidden defaults to local config
+
+# Config Origin
+# VERIFIED=1 # for USER.hodl.ar
+# CONFIG_FROM_PROVIDER=1 # for USER.PROVIDER.hodl.ar
+
+# Endpoints
+NEXT_PUBLIC_API_ENDPOINT="hodl.ar/api/users"
+# NEXT_PUBLIC_DOMAIN_REDIRECT="http://localhost:3001"

.gitignore

@@ -33,4 +33,15 @@ yarn-error.log*
 
 # typescript
 *.tsbuildinfo
-next-env.d.ts
+
+# .env
+.env
+
+# yarn
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions

.nvmrc

@@ -0,0 +1 @@
+v20.11.1

README.md

@@ -7,8 +7,8 @@ Create your own custom Linktr.ee like site.
 - [x] Netlify Button
 - [x] Vercel Button
 - [x] Links config
-- [ ] Title and Page config
-- [ ] Editable Logo
+- [x] Title and Page config
+- [x] Editable Logo
 - [ ] Animations on load
 - [ ] Editable Background
 - [ ] Editable Colors
@@ -82,7 +82,7 @@ Edit file in **/data/links.json**
 First, run the development server:
 
 ```bash
-yarn dev
+pnpm dev
 ```
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

components/admin/Cover.tsx

@@ -0,0 +1,34 @@
+import { motion } from "framer-motion";
+import styled from "styled-components";
+
+const Container = styled.div`
+  ${(props) => `
+  background-color: ${props.theme.cover_color};
+  `}
+`;
+
+const MotionContainer = motion(Container);
+
+interface CoverProps {
+  children?: React.ReactNode;
+}
+
+export const Cover = ({ children }: CoverProps) => {
+  return (
+    <MotionContainer
+      className='relative top-0 sm:w-[800px] sm:mx-auto sm:max-w-lg h-[54px] rounded-t-lg flex flex-row justify-between p-2 z-40'
+      initial={{ paddingTop: "0px", paddingBottom: "0px", maxHeight: "0px" }}
+      animate={{ paddingTop: "9px", paddingBottom: "9px", maxHeight: "200px" }}
+      transition={{
+        delay: 0.45,
+        type: "spring",
+        stiffness: 260,
+        damping: 20,
+      }}
+    >
+      {children}
+    </MotionContainer>
+  );
+};
+
+export default Cover;

components/admin/MenuButton.tsx

@@ -0,0 +1,70 @@
+import { useEffect, useState } from "react";
+import {
+  EllipsisVerticalIcon,
+  UserCircleIcon,
+} from "@heroicons/react/20/solid";
+import { Menu, Transition } from "@headlessui/react";
+
+import { MenuItem as IMenuItem } from "../../types/menu";
+import MenuItem from "../header/menu/MenuItem";
+import { useConfig } from "../../contexts/Config";
+import { useRouter } from "next/router";
+
+interface MenuButtonProps {
+  className?: string;
+}
+
+export const MenuButton = ({ className }: MenuButtonProps) => {
+  const { config } = useConfig();
+  const router = useRouter();
+
+  const [menuItems, setMenuItems] = useState<IMenuItem[]>([]);
+
+  useEffect(() => {
+    if (typeof window === "undefined" || !config) {
+      return;
+    }
+    const _menuItems: IMenuItem[] = [];
+
+    _menuItems.push({
+      label: "Perfil",
+      icon: UserCircleIcon,
+      onClick: () => {
+        router.push("../");
+      },
+    });
+
+    setMenuItems(_menuItems);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [config]);
+
+  return menuItems.length > 0 ? (
+    <Menu as='div' className='relative inline-block text-left'>
+      <div>
+        <Menu.Button className='inline-flex w-full justify-center rounded-full bg-black/10 bg-opacity-20 p-2 text-xs font-medium hover:bg-black/25 active:bg-black/50 text-white/50 hover:text-white/75 active:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75'>
+          <EllipsisVerticalIcon className='h-5 w-5' aria-hidden='true' />
+        </Menu.Button>
+      </div>
+      <Transition
+        enter='transition ease-out duration-100'
+        enterFrom='transform opacity-0 scale-95'
+        enterTo='transform opacity-100 scale-100'
+        leave='transition ease-in duration-75'
+        leaveFrom='transform opacity-100 scale-100'
+        leaveTo='transform opacity-0 scale-95'
+      >
+        <Menu.Items className='absolute z-50 right-0 mt-2 w-56 origin-top-right divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none'>
+          <div className='px-1 py-1 '>
+            {menuItems.map((item, k) => (
+              <MenuItem key={k} item={item} />
+            ))}
+          </div>
+        </Menu.Items>
+      </Transition>
+    </Menu>
+  ) : (
+    <></>
+  );
+};
+
+export default MenuButton;

components/admin/Paper.tsx

@@ -0,0 +1,17 @@
+import { motion } from "framer-motion";
+
+interface IPaperProps {
+  children?: React.ReactNode;
+}
+
+const Paper = ({ children }: IPaperProps) => {
+  return (
+    <div
+      className='bg-white shadow-2xl ring-1 ring-gray-900/5
+      relative z-20'
+    >
+      <div className='mx-auto'>{children}</div>
+    </div>
+  );
+};
+export default Paper;

components/admin/PaperBody.tsx

@@ -0,0 +1,13 @@
+interface IPaperBodyProps {
+  children: React.ReactNode;
+}
+
+const PaperBody = ({ children }: IPaperBodyProps) => {
+  return (
+    <div className='space-y-6 pt-4 pb-8 text-base leading-7 text-gray-600'>
+      {children}
+    </div>
+  );
+};
+
+export default PaperBody;

components/admin/Profile.tsx

@@ -0,0 +1,35 @@
+/* eslint-disable @next/next/no-img-element */
+// import next/config
+import { motion } from "framer-motion";
+
+interface ProfileProps {
+  title: string;
+  picture?: string;
+}
+
+const Profile = ({ title, picture }: ProfileProps) => {
+  return (
+    <motion.div
+      className='bg-white rounded-full ring-2 ring-gray-900/5
+      shadow-lg overflow-hidden w-[36px] h-[36px]'
+      initial={{ scale: 0 }}
+      animate={{ scale: 1 }}
+      transition={{
+        delay: 0.6,
+        type: "spring",
+        stiffness: 260,
+        damping: 20,
+        duration: 0.3,
+      }}
+    >
+      <img
+        width='140'
+        height='140'
+        alt={title}
+        src={picture ? picture : "/images/profile.png"}
+      />
+    </motion.div>
+  );
+};
+
+export default Profile;

components/blocks/block.tsx

@@ -0,0 +1,28 @@
+import { Block as IBlock } from "../../types/block";
+
+interface BlockProps {
+  data: IBlock;
+}
+
+const Block = ({ data }: BlockProps) => {
+  data.type = data.type ? data.type : "link"; // Default
+  let BlockComponent;
+  try {
+    BlockComponent = require(`./${data.type}`).default;
+  } catch (e) {
+    console.error(`Block type ${data.type} not found`);
+    return (
+      <div className='text-center'>
+        Block type <b>{data.type}</b> not found
+      </div>
+    );
+  }
+
+  return (
+    <div className='m-1 mx-6'>
+      <BlockComponent data={data} />
+    </div>
+  );
+};
+
+export default Block;

components/Link.tsx → components/blocks/link.tsx

@@ -1,6 +1,6 @@
 import { IconType } from "react-icons";
 
-import { ILink, LinkType } from "../types/link";
+import { Block, Icon } from "../../types/block";
 
 // Icons
 import { GrInstagram } from "react-icons/gr";
@@ -14,30 +14,34 @@ import {
 } from "react-icons/bs";
 import { AiOutlineLink, AiFillLinkedin } from "react-icons/ai";
 import { IoMdHand } from "react-icons/io";
+import { GiOstrich } from "react-icons/gi";
+import { BsLightningChargeFill } from "react-icons/bs";
 
 import TagManager from "react-gtm-module";
 
-const socialIcon: { [key in LinkType]: IconType } = {
+const socialIcon: { [key in Icon]: IconType } = {
   whatsapp: BsWhatsapp,
   instagram: GrInstagram,
   discord: SiDiscord,
   voluntary: IoMdHand,
+  lightning: BsLightningChargeFill,
   github: BsGithub,
   telegram: BsTelegram,
   twitter: BsTwitter,
   url: AiOutlineLink,
   linkedin: AiFillLinkedin,
   youtube: BsYoutube,
+  nostr: GiOstrich,
 };
 
 interface ILinkProps {
-  data: ILink;
+  data: Block;
 }
 
 const Link = ({ data }: ILinkProps) => {
-  const { title, type, url } = data;
+  const { title, type, icon, url } = data;
 
-  const Icon = socialIcon[type];
+  const Icon = socialIcon[icon];
 
   function handleClick() {
     TagManager.dataLayer({