Merge branch 'release/1.0.0-alpha.21'

.github/dependabot.yml

@@ -1,52 +1,76 @@
 version: 2
 updates:
   # Maintain dependencies for GitHub Actions
-  - package-ecosystem: "github-actions"
+  - package-ecosystem: 'github-actions'
     # Files stored in repository root
-    directory: "/"
+    directory: '/'
     # Check for updates every weekday
     schedule:
-      interval: "daily"
+      interval: 'daily'
     # Add assignees
     assignees:
-      - "nekofar"
+      - 'nekofar'
     # Include a list of updated dependencies
     commit-message:
-      prefix: "ci" 
-      include: "scope"
+      prefix: 'ci'
+      include: 'scope'
     # Specify labels for pull requests
     labels:
-      - "dependencies"
-    # Allow up to 10 open pull requests for dependencies
+      - 'dependencies'
+    # Allow up to 20 open pull requests for dependencies
     open-pull-requests-limit: 20
     # Add reviewers
     reviewers:
-      - "nekofar"
+      - 'nekofar'
     # Raise pull requests against the `develop` branch
-    target-branch: "develop"
+    target-branch: 'develop'
 
   # Maintain dependencies for PNPM
-  - package-ecosystem: "npm"
+  - package-ecosystem: 'npm'
     # Files stored in repository root
-    directory: "/"
+    directory: '/'
     # Check for updates every weekday
     schedule:
-      interval: "daily"
+      interval: 'daily'
     # Add assignees
     assignees:
-      - "nekofar"
+      - 'nekofar'
     # Include a list of updated dependencies
     commit-message:
-      prefix: "chore"
-      include: "scope"
+      prefix: 'chore'
+      include: 'scope'
     # Specify labels for pull requests
     labels:
-      - "dependencies"
+      - 'dependencies'
     # Allow up to 10 open pull requests for dependencies
     open-pull-requests-limit: 20
     # Add reviewers
     reviewers:
-      - "nekofar"
+      - 'nekofar'
     # Raise pull requests against the `develop` branch
-    target-branch: "develop"
-
+    target-branch: 'develop'
+    # Create a group of dependencies to be updated together in one pull request
+    groups:
+      babel:
+        patterns:
+          - '@babel/*'
+          - 'babel-core'
+          - 'babel-loader'
+      eslint:
+        patterns:
+          - 'eslint'
+          - '@typescript-eslint/eslint-plugin'
+          - '@typescript-eslint/parser'
+      lingui:
+        patterns:
+          - '@lingui/*'
+      next:
+        patterns:
+          - 'next'
+          - 'eslint-config-next'
+      react:
+        patterns:
+          - 'react'
+          - 'react-dom'
+          - '@types/react'
+          - '@types/react-dom'

.gitignore

@@ -34,3 +34,6 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# cloudflare
+.wrangler

CHANGELOG.md

@@ -2,6 +2,24 @@
 
 All notable changes to this project will be documented in this file.
 
+## [1.0.0-alpha.21] - 2024-02-04
+
+### Refactor
+
+- Update home page meta description
+- Add a new `Header` component to the index page
+- Replace google fonts by local fonts
+- Add new `Layout` and move `Header` to the components
+- Update header height to be same as screen height
+- Add new `Navbar` components extracted from `Header`
+- Remove or disable unnecessary parts on `Navbar`
+- Add new link for delegation to the `Navbar`
+
+### Miscellaneous Tasks
+
+- Add `wrangler` cache folder to `.gitignore`
+- Add group of dependencies to Dependabot configs
+
 ## [1.0.0-alpha.20] - 2024-01-18
 
 ### Bug Fixes

components/header.tsx

@@ -0,0 +1,77 @@
+import {Navbar} from "./navbar";
+import Image from "next/image";
+
+export function Header() {
+  return (
+    <>
+      <header className="absolute inset-x-0 top-0 z-50">
+        <Navbar/>
+      </header>
+
+      <div className="min-h-screen relative isolate overflow-hidden pt-14">
+        {/*<Image
+          src="https://images.unsplash.com/photo-1521737604893-d14cc237f11d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2830&q=80&blend=FAFAE3&sat=-100&exp=15&blend-mode=multiply"
+          alt=""
+          className="absolute inset-0 -z-10 h-full w-full object-cover"
+          width={1098}
+          height={720}
+        />*/}
+        <div
+          className="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
+          aria-hidden="true"
+        >
+          <div
+            className="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-20 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]"
+            style={{
+              clipPath:
+                'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
+            }}
+          />
+        </div>
+        <div className="mx-auto max-w-2xl py-32 sm:py-48 lg:py-56">
+          {/*<div className="hidden sm:mb-8 sm:flex sm:justify-center">
+            <div className="relative rounded-full px-3 py-1 text-sm leading-6 text-gray-400 ring-1 ring-white/10 hover:ring-white/20">
+              Announcing our next round of funding.{' '}
+              <a href="#" className="font-semibold text-white">
+                <span className="absolute inset-0" aria-hidden="true" />
+                Read more <span aria-hidden="true">&rarr;</span>
+              </a>
+            </div>
+          </div>*/}
+          <div className="text-center">
+            <h1 className="text-4xl font-bold tracking-tight text-white sm:text-6xl">
+              Lil Nouncil
+            </h1>
+            <p className="mt-6 text-lg leading-8 text-gray-300">
+              A council of Nounish builders working within the framework of <strong>Lil Nouns DAO</strong> to
+              proliferate CC0 and nounish culture.
+            </p>
+            {/*<div className="mt-10 flex items-center justify-center gap-x-6">
+              <a
+                href="#"
+                className="rounded-md bg-indigo-500 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-400"
+              >
+                Get started
+              </a>
+              <a href="#" className="text-sm font-semibold leading-6 text-white">
+                Learn more <span aria-hidden="true">→</span>
+              </a>
+            </div>*/}
+          </div>
+        </div>
+        <div
+          className="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]"
+          aria-hidden="true"
+        >
+          <div
+            className="relative left-[calc(50%+3rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-20 sm:left-[calc(50%+36rem)] sm:w-[72.1875rem]"
+            style={{
+              clipPath:
+                'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
+            }}
+          />
+        </div>
+      </div>
+    </>
+  )
+}

components/layout.tsx

@@ -0,0 +1,15 @@
+import {ReactNode} from "react";
+import clsx from "clsx";
+import {londrinaSolid} from "../styles/fonts";
+
+interface LayoutProps {
+  children?: ReactNode;
+}
+
+export function Layout({children}: LayoutProps) {
+  return (
+    <main className={clsx(londrinaSolid.variable, 'min-h-screen')}>
+      {children}
+    </main>
+  );
+}

components/navbar.tsx

@@ -0,0 +1,103 @@
+import {useState} from "react";
+import {Bars3Icon, XMarkIcon} from "@heroicons/react/24/outline";
+import {Dialog} from "@headlessui/react";
+import Link from "next/link";
+import Image from "next/image";
+
+const navigation = [
+  {name: 'Home', href: '/'},
+  // {name: 'About', href: '/about'},
+  {name: 'Delegate', href: 'https://lilnouns.wtf/delegate?to=lilnouncil.eth'}
+]
+
+export function Navbar() {
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
+
+  return (
+    <>
+      <nav className="flex items-center justify-between p-6 lg:px-8" aria-label="Global">
+        <div className="flex lg:flex-1">
+          <a href="#" className="-m-1.5 p-1.5">
+            <span className="sr-only">Lil Nouncil</span>
+            {/*<Image
+              className="h-8 w-auto"
+              src=""
+              alt=""
+              height={32}
+              width={32}
+            />*/}
+          </a>
+        </div>
+        <div className="flex lg:hidden">
+          <button
+            type="button"
+            className="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-400"
+            onClick={() => setMobileMenuOpen(true)}
+          >
+            <span className="sr-only">Open main menu</span>
+            <Bars3Icon className="h-6 w-6" aria-hidden="true"/>
+          </button>
+        </div>
+        <div className="hidden lg:flex lg:gap-x-12">
+          {navigation.map((item) => (
+            <Link key={item.name} href={item.href} className="text-sm font-semibold leading-6 text-white">
+              {item.name}
+            </Link>
+          ))}
+        </div>
+        <div className="hidden lg:flex lg:flex-1 lg:justify-end">
+          {/*<a href="#" className="text-sm font-semibold leading-6 text-white">
+            Log in <span aria-hidden="true">&rarr;</span>
+          </a>*/}
+        </div>
+      </nav>
+      <Dialog as="div" className="lg:hidden" open={mobileMenuOpen} onClose={setMobileMenuOpen}>
+        <div className="fixed inset-0 z-50"/>
+        <Dialog.Panel
+          className="fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-gray-900 px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-white/10">
+          <div className="flex items-center justify-between">
+            <a href="#" className="-m-1.5 p-1.5">
+              <span className="sr-only">Lil Nouncil</span>
+              <img
+                className="h-8 w-auto"
+                src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=500"
+                alt=""
+              />
+            </a>
+            <button
+              type="button"
+              className="-m-2.5 rounded-md p-2.5 text-gray-400"
+              onClick={() => setMobileMenuOpen(false)}
+            >
+              <span className="sr-only">Close menu</span>
+              <XMarkIcon className="h-6 w-6" aria-hidden="true"/>
+            </button>
+          </div>
+          <div className="mt-6 flow-root">
+            <div className="-my-6 divide-y divide-gray-500/25">
+              <div className="space-y-2 py-6">
+                {navigation.map((item) => (
+                  <a
+                    key={item.name}
+                    href={item.href}
+                    className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-white hover:bg-gray-800"
+                  >
+                    {item.name}
+                  </a>
+                ))}
+              </div>
+              <div className="py-6">
+                <a
+                  href="#"
+                  className="-mx-3 block rounded-lg px-3 py-2.5 text-base font-semibold leading-7 text-white hover:bg-gray-800"
+                >
+                  Log in
+                </a>
+              </div>
+            </div>
+          </div>
+        </Dialog.Panel>
+      </Dialog>
+    </>
+  )
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "lilnouncil",
-  "version": "1.0.0-alpha.20",
+  "version": "1.0.0-alpha.21",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -10,23 +10,24 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@next/font": "14.0.4",
+    "@headlessui/react": "1.7.18",
+    "@heroicons/react": "2.1.1",
     "autoprefixer": "10.4.17",
     "clsx": "2.1.0",
-    "next": "14.0.4",
+    "next": "14.1.0",
     "postcss": "8.4.33",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "tailwindcss": "3.4.1"
   },
   "devDependencies": {
-    "@types/node": "20.11.5",
-    "@types/react": "18.2.48",
+    "@types/node": "20.11.16",
+    "@types/react": "18.2.51",
     "@types/react-dom": "18.2.18",
     "eslint": "8.56.0",
-    "eslint-config-next": "14.0.4",
+    "eslint-config-next": "14.1.0",
     "typescript": "5.3.3",
-    "wrangler": "3.22.5"
+    "wrangler": "3.26.0"
   },
   "resolutions": {
     "undici": ">=5.26.2"

pages/_app.tsx

@@ -1,8 +1,19 @@
 import '../styles/globals.css'
-import type { AppProps } from 'next/app'
+import type {AppProps} from 'next/app'
+import {londrinaSolid, ptRootUI} from "../styles/fonts";
 
-function MyApp({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />
+function MyApp({Component, pageProps}: AppProps) {
+  return (
+    <>
+      <style jsx global>{`
+        :root {
+          --font-pt-root-ui: ${ptRootUI.style.fontFamily};
+          --font-londrina-solid: ${londrinaSolid.style.fontFamily};
+        }
+      `}</style>
+      <Component {...pageProps} />
+    </>
+  )
 }
 
 export default MyApp

pages/_document.tsx

@@ -10,7 +10,7 @@ class MyDocument extends Document {
         return (
             <Html>
                 <Head/>
-                <body className="bg-neutral-100">
+                <body className="min-h-screen bg-gray-900">
                 <Main/>
                 <NextScript/>
                 </body>