Merge pull request #2 from almond-ui/develop

feat: use stronger blue on documentation
almond-ui · Jul 27, 2023 · c41dfba · c41dfba
2 parents 919ffd0 + a08f9a6
commit c41dfba
Show file tree

Hide file tree

Showing 40 changed files with 217 additions and 167 deletions.
diff --git a/README.md b/README.md
@@ -8,6 +8,6 @@
 
     Almond web components built using tailwind css
 
-[//]: # ([![Onboarding service]&#40;./public/readme.png&#41;]&#40;https://gitlab.safaricom.co.ke/service-availability/onboarding-service/frontend/onboarding-service&#41;)
+[//]: # '[![Onboarding service](./public/readme.png)](https://gitlab.safaricom.co.ke/service-availability/onboarding-service/frontend/onboarding-service)'
 
 #### Simple but complicated ui
diff --git a/apps/docs/app/(docs)/(pages)/[...slug]/page.tsx b/apps/docs/app/(docs)/(pages)/[...slug]/page.tsx
@@ -75,7 +75,7 @@ const PageLayout = async ({ params }: PageProps) => {
         <Pager current={page} />
       </article>
 
-      <div className='hidden 2xl:block 2xl:w-1/6'>
+      <div className='hidden border-l border-l-gray-100 pl-4 2xl:block 2xl:w-1/6'>
         <Toc toc={toc} />
       </div>
     </div>

diff --git a/apps/docs/app/(docs)/components/[slug]/page.tsx b/apps/docs/app/(docs)/components/[slug]/page.tsx
@@ -88,7 +88,7 @@ const ComponentLayout = async ({ params }: ComponentProps) => {
         <Pager current={component} />
       </article>
 
-      <div className='hidden 2xl:block 2xl:w-1/6'>
+      <div className='hidden border-l border-l-gray-100 pl-4 2xl:block 2xl:w-1/6'>
         <Toc toc={toc} />
       </div>
     </div>

diff --git a/apps/docs/app/(docs)/layout.tsx b/apps/docs/app/(docs)/layout.tsx
@@ -52,7 +52,7 @@ export const metadata = {
 export default function DocsLayout({ children }: { children: ReactNode }) {
   return (
     <>
-      <div className='max-w-8xl container mx-auto flex h-full items-center'>
+      <div className='container mx-auto flex h-full items-center'>
         <div className='flex w-full'>
           <div className='hidden border-r border-r-gray-100 2xl:block 2xl:w-1/6'>
             <Aside />

diff --git a/apps/docs/app/layout.tsx b/apps/docs/app/layout.tsx
@@ -61,7 +61,7 @@ export default function RootLayout({ children }: { children: ReactNode }) {
       )}
     >
       <body className='antialiased'>
-        <main className='flex min-h-screen flex-col'>
+        <main className='relative flex min-h-screen flex-col items-center justify-center'>
           <Header />
           {children}
         </main>

diff --git a/apps/docs/app/page.tsx b/apps/docs/app/page.tsx
@@ -1,8 +1,10 @@
 import { config } from '@/lib/config';
+import { CopyCommand } from '@/ui/CopyCommand';
+import ExpandingArrow from '@/ui/ExpandingArrow';
 import { Features } from '@/ui/Features';
 import { Footer } from '@/ui/Footer';
-import { Hero } from '@/ui/Hero';
 import { Support } from '@/ui/Support';
+import Link from 'next/link';
 import * as React from 'react';
 
 export const generateMetadata = ({ params }) => {
@@ -31,15 +33,22 @@ export const generateMetadata = ({ params }) => {
   };
 };
 
-const LandingLayout = async ({ params }) => {
+const LandingLayout = async () => {
   return (
-    <div className='flex min-h-screen flex-col'>
-      <div className='bg-gradient-to-tr from-transparent to-slate-100'>
-        <div className='max-w-8xl container mx-auto'>
-          <Hero />
-        </div>
-      </div>
-    </div>
+    <>
+      <Link
+        href='/introduction'
+        className='group mt-20 flex space-x-1 rounded-full border border-blue-100 bg-white/30 px-10 py-2 text-sm font-medium text-gray-600 ring-0 transition-all hover:border-blue-800 hover:bg-blue-50 sm:mt-0'
+      >
+        <p>Get your boring components here</p>
+        <ExpandingArrow />
+      </Link>
+      <h1 className='bg-gradient-to-br from-black via-[#171717] to-[#575757] bg-clip-text pb-8 pt-4 text-center text-2xl font-medium text-transparent md:text-4xl'>
+        Another boring component library
+      </h1>
+
+      <CopyCommand />
+    </>
   );
 };
 

diff --git a/apps/docs/assets/fonts/InterSoft-Bold.woff b/apps/docs/assets/fonts/InterSoft-Bold.woff
diff --git a/apps/docs/assets/fonts/InterSoft-Bold.woff2 b/apps/docs/assets/fonts/InterSoft-Bold.woff2
diff --git a/apps/docs/assets/fonts/InterSoft-Medium.woff b/apps/docs/assets/fonts/InterSoft-Medium.woff
diff --git a/apps/docs/assets/fonts/InterSoft-Medium.woff2 b/apps/docs/assets/fonts/InterSoft-Medium.woff2
diff --git a/apps/docs/assets/fonts/InterSoft-Regular.woff b/apps/docs/assets/fonts/InterSoft-Regular.woff
diff --git a/apps/docs/assets/fonts/InterSoft-Regular.woff2 b/apps/docs/assets/fonts/InterSoft-Regular.woff2
diff --git a/apps/docs/assets/fonts/InterSoft-Semibold.woff b/apps/docs/assets/fonts/InterSoft-Semibold.woff
diff --git a/apps/docs/assets/fonts/InterSoft-Semibold.woff2 b/apps/docs/assets/fonts/InterSoft-Semibold.woff2
diff --git a/apps/docs/content/introduction.mdx b/apps/docs/content/introduction.mdx
@@ -110,14 +110,13 @@ All Almond-UI components are highly customizable. This means that you can easily
 # Credits
 ---
 Special thanks to the following people:
+* [Rewind UI](https://twitter.com/joebell_) - For his amazing open source project [Rewind UI](https://rewind-ui.dev) which I have ported for Almond-UI.
 * [Joe Bell](https://twitter.com/joebell_) - For his amazing open source library [Class Variance Authority](https://cva.style/docs) which is the foundation of almond's theming system.
-* [Jack Herrington](https://twitter.com/jherr) - For inspiring me to start building Almond-UI.
 * [shadcn](https://twitter.com/shadcn) - For his open source projects ([taxonomy](https://tx.shadcn.com/) & [ui](https://ui.shadcn.com/)) that helped me build this documentation.
 
 Special thanks to the following teams:
 * [React](https://react.dev/) - For creating React.
 * [Tailwind Labs](https://tailwindcss.com) - For creating Tailwind CSS.
 * [Vercel](https://vercel.com/) - For creating Next.js and their awesome open source templates.
-* [Mantine](https://mantine.dev/) - For creating Mantine UI, which was a great source of inspiration for Almond-UI.
 * [Floating-UI](https://floating-ui.com/) - For creating Floating-UI.
 * [Phosphor](https://phosphoricons.com/) - For creating Phosphor icon family.
diff --git a/apps/docs/lib/fonts.ts b/apps/docs/lib/fonts.ts
@@ -1,10 +1,42 @@
 import { Inter, JetBrains_Mono } from 'next/font/google';
 import localFont from 'next/font/local';
 
-export const fontSans = Inter({
-  display: 'swap',
+// export const fontSans = Inter({
+//   display: 'swap',
+//   variable: '--font-sans',
+//   subsets: ['latin'],
+// });
+
+export const fontSans = localFont({
+  src: [
+    {
+      path: '../assets/fonts/InterSoft-Regular.woff2',
+      weight: '400',
+      style: 'normal',
+    },
+    {
+      path: '../assets/fonts/InterSoft-Medium.woff2',
+      weight: '500',
+      style: 'normal',
+    },
+    {
+      path: '../assets/fonts/InterSoft-SemiBold.woff2',
+      weight: '600',
+      style: 'normal',
+    },
+    {
+      path: '../assets/fonts/InterSoft-Bold.woff2',
+      weight: '700',
+      style: 'normal',
+    },
+    {
+      path: '../assets/fonts/InterSoft-Bold.woff2',
+      weight: '800',
+      style: 'normal',
+    },
+  ],
   variable: '--font-sans',
-  subsets: ['latin'],
+  display: 'swap',
 });
 
 export const fontMono = JetBrains_Mono({

diff --git a/apps/docs/styles/globals.css b/apps/docs/styles/globals.css
@@ -2,6 +2,22 @@
 @tailwind components;
 @tailwind utilities;
 
+@layer base {
+    :root {
+        --blue: 198 100% 33%;
+    }
+
+    .dark {
+        --blue: 198 100% 33%;
+    }
+}
+
+@layer base {
+    body {
+        font-feature-settings: "rlig" 1, "calt" 1;
+    }
+}
+
 @media (min-width: 400px) {
     .bg-gradient::before {
         background: radial-gradient(

diff --git a/apps/docs/tailwind.config.ts b/apps/docs/tailwind.config.ts
@@ -17,17 +17,17 @@ const tailwindConfig = {
         slate: colors.slate,
         neutral: colors.neutral,
         blue: {
-          50: '#e3f2fd',
-          100: '#bbdefb',
-          200: '#90caf9',
-          300: '#64b5f6',
-          400: '#42a5f5',
-          500: '#2095f3',
-          600: '#1e87e5',
-          700: '#1976d2',
-          800: '#1564c0',
-          900: '#0d46a1',
-          950: '#0d46a1',
+          50: '#e1f4fa',
+          100: '#b2e4f2',
+          200: '#82d1ea',
+          300: '#55bfe2',
+          400: '#35b2de',
+          500: '#17a5da',
+          600: '#0d98cc',
+          700: '#0085b9',
+          800: '#0074a6',
+          900: '#005585',
+          950: '#005585',
         },
         red: {
           50: '#FEECF0',

diff --git a/apps/docs/ui/Aside.tsx b/apps/docs/ui/Aside.tsx
@@ -4,7 +4,7 @@ import { Menu } from './Menu';
 
 export const Aside = () => {
   return (
-    <aside className='fixed py-8 h-[calc(100%-9rem)] w-[16rem] overflow-auto'>
+    <aside className='fixed h-[calc(100%-3rem)] w-[16rem] overflow-auto py-8'>
       <Menu />
     </aside>
   );

diff --git a/apps/docs/ui/CopyCommand.tsx b/apps/docs/ui/CopyCommand.tsx
@@ -0,0 +1,57 @@
+'use client';
+
+import { useState } from 'react';
+
+export const CopyCommand = () => {
+  const [copying, setCopying] = useState(false);
+
+  const handleCopy = () => {
+    navigator.clipboard.writeText('npm install @almond-ui/core');
+    setCopying(true);
+    setTimeout(() => setCopying(false), 1500);
+  };
+
+  return (
+    <div
+      onClick={handleCopy}
+      className='group relative flex cursor-copy items-center'
+    >
+      <svg
+        xmlns='http://www.w3.org/2000/svg'
+        className='mr-2 fill-slate-600'
+        height='0.75em'
+        viewBox='0 0 576 512'
+      >
+        <path d='M9.4 41.4C-3.1 53.9-3.1 74.1 9.4 86.6L178.7 256 9.4 425.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3l-192-192c-12.5-12.5-32.8-12.5-45.3 0z' />
+        <path
+          className='opacity-50'
+          d='M224 448c0-17.7 14.3-32 32-32H544c17.7 0 32 14.3 32 32s-14.3 32-32 32H256c-17.7 0-32-14.3-32-32z'
+        />
+      </svg>
+      <span className='text-slate-500 transition-colors group-hover:text-slate-600'>
+        npm install @almond-ui/core
+      </span>
+      <span className='invisible absolute -right-6 ml-2 group-hover:visible'>
+        {copying ? (
+          <svg
+            xmlns='http://www.w3.org/2000/svg'
+            className='fill-green-600'
+            height='1em'
+            viewBox='0 0 512 512'
+          >
+            <path d='M443.3 100.7c6.2 6.2 6.2 16.4 0 22.6l-272 272c-6.2 6.2-16.4 6.2-22.6 0l-144-144c-6.2-6.2-6.2-16.4 0-22.6s16.4-6.2 22.6 0L160 361.4 420.7 100.7c6.2-6.2 16.4-6.2 22.6 0z' />
+          </svg>
+        ) : (
+          <svg
+            xmlns='http://www.w3.org/2000/svg'
+            className='fill-slate-600'
+            height='1em'
+            viewBox='0 0 512 512'
+          >
+            <path d='M448 352H288c-17.7 0-32-14.3-32-32V64c0-17.7 14.3-32 32-32H396.1c4.2 0 8.3 1.7 11.3 4.7l67.9 67.9c3 3 4.7 7.1 4.7 11.3V320c0 17.7-14.3 32-32 32zM497.9 81.9L430.1 14.1c-9-9-21.2-14.1-33.9-14.1H288c-35.3 0-64 28.7-64 64V320c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V115.9c0-12.7-5.1-24.9-14.1-33.9zM64 128c-35.3 0-64 28.7-64 64V448c0 35.3 28.7 64 64 64H224c35.3 0 64-28.7 64-64V416H256v32c0 17.7-14.3 32-32 32H64c-17.7 0-32-14.3-32-32V192c0-17.7 14.3-32 32-32H192V128H64z' />
+          </svg>
+        )}
+      </span>
+    </div>
+  );
+};
diff --git a/apps/docs/ui/ExpandingArrow.tsx b/apps/docs/ui/ExpandingArrow.tsx
@@ -0,0 +1,36 @@
+export default function ExpandingArrow({ className }: { className?: string }) {
+  return (
+    <div className='group relative flex items-center'>
+      <svg
+        className={`${
+          className ? className : 'h-4 w-4'
+        } absolute transition-all group-hover:translate-x-1 group-hover:opacity-0`}
+        xmlns='http://www.w3.org/2000/svg'
+        fill='currentColor'
+        viewBox='0 0 16 16'
+        width='16'
+        height='16'
+      >
+        <path
+          fillRule='evenodd'
+          d='M6.22 3.22a.75.75 0 011.06 0l4.25 4.25a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06-1.06L9.94 8 6.22 4.28a.75.75 0 010-1.06z'
+        ></path>
+      </svg>
+      <svg
+        className={`${
+          className ? className : 'h-4 w-4'
+        } absolute opacity-0 transition-all group-hover:translate-x-1 group-hover:opacity-100`}
+        xmlns='http://www.w3.org/2000/svg'
+        fill='currentColor'
+        viewBox='0 0 16 16'
+        width='16'
+        height='16'
+      >
+        <path
+          fillRule='evenodd'
+          d='M8.22 2.97a.75.75 0 011.06 0l4.25 4.25a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06-1.06l2.97-2.97H3.75a.75.75 0 010-1.5h7.44L8.22 4.03a.75.75 0 010-1.06z'
+        ></path>
+      </svg>
+    </div>
+  );
+}
diff --git a/apps/docs/ui/Header.tsx b/apps/docs/ui/Header.tsx
@@ -62,7 +62,7 @@ export const Header = () => {
         >
           <div className='container mx-auto flex justify-between'>
             <div className='hidden items-center justify-center gap-2 align-middle lg:flex'>
-              <ScribbleLoop size={32} color='#1976d2' weight='duotone' />
+              <ScribbleLoop size={32} color='#0074a6' weight='duotone' />
               <Link
                 href='/'
                 aria-label='musings'