Skip to content

Commit

Permalink
[pkg/core,site,datopian#120][s]: Remove navbar dropdown and frontpage…
Browse files Browse the repository at this point in the history
… edits

* Remove navbar dropdown support
* Bump core v0.3.2
* Make images smaller in frontpage
  • Loading branch information
PhilippeduPreez authored Feb 24, 2023
1 parent 1ab19be commit 5686d72
Show file tree
Hide file tree
Showing 10 changed files with 46 additions and 183 deletions.
6 changes: 6 additions & 0 deletions packages/core/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,11 @@
# @flowershow/core

## 0.3.2

### Patch Changes

- e83bc87: Remove support for nav dropdown

## 0.3.1

### Patch Changes
Expand Down
2 changes: 1 addition & 1 deletion packages/core/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@flowershow/core",
"version": "0.3.1",
"version": "0.3.2",
"description": "Core Flowershow components, configs and utils.",
"repository": {
"type": "git",
Expand Down
27 changes: 12 additions & 15 deletions packages/core/src/ui/Layout/Footer.tsx
Original file line number Diff line number Diff line change
@@ -1,29 +1,26 @@
import Link from "next/link.js";

import { AuthorConfig, isNavDropdown, NavDropdown, NavLink } from "../types";
import { AuthorConfig, NavLink } from "../types";

interface Props {
links: Array<NavLink | NavDropdown>;
links: Array<NavLink>;
author: AuthorConfig;
}

export const Footer: React.FC<Props> = ({ links, author }) => {
return (
<footer className="bg-background dark:bg-background-dark prose dark:prose-invert max-w-none flex flex-col items-center justify-center w-full h-auto pt-10 pb-20">
<div className="flex w-full flex-wrap justify-center">
{links.map(
(item) =>
!isNavDropdown(item) && (
<Link
key={item.href}
href={item.href}
className="inline-flex items-center mx-4 px-1 pt-1 font-regular hover:text-slate-300 no-underline"
>
{/* TODO aria-current={item.current ? "page" : undefined} */}
{item.name}
</Link>
)
)}
{links.map((item) => (
<Link
key={item.href}
href={item.href}
className="inline-flex items-center mx-4 px-1 pt-1 font-regular hover:text-slate-300 no-underline"
>
{/* TODO aria-current={item.current ? "page" : undefined} */}
{item.name}
</Link>
))}
</div>
<p className="flex items-center justify-center">
Created by
Expand Down
77 changes: 8 additions & 69 deletions packages/core/src/ui/Nav/NavItem.tsx
Original file line number Diff line number Diff line change
@@ -1,82 +1,21 @@
import { Menu, Transition } from "@headlessui/react";
import { Menu } from "@headlessui/react";
import Link from "next/link.js";
import { Fragment, useRef, useState } from "react";

import { BaseLink } from "../Base";

import { NavLink, NavDropdown, isNavDropdown } from "../types";
import { NavLink } from "../types";

interface Props {
link: NavLink | NavDropdown;
link: NavLink;
}

export const NavItem: React.FC<Props> = ({ link }) => {
const dropdownRef = useRef(null);
const [showDropdown, setshowDropdown] = useState(false);

const timeoutDuration = 200;
let timeoutId;

const openDropdown = () => {
clearTimeout(timeoutId);
setshowDropdown(true);
};
const closeDropdown = () => {
timeoutId = setTimeout(() => setshowDropdown(false), timeoutDuration);
};

return (
<Menu as="div" className="relative">
<Menu.Button
onClick={() => setshowDropdown(!showDropdown)}
onMouseEnter={openDropdown}
onMouseLeave={closeDropdown}
<Link
href={link.href}
className="text-slate-500 inline-flex items-center mr-2 px-1 pt-1 text-sm font-medium hover:text-slate-600"
>
{!isNavDropdown(link) ? (
<Link
href={link.href}
className="text-slate-500 inline-flex items-center mr-2 px-1 pt-1 text-sm font-medium hover:text-slate-600"
>
{link.name}
</Link>
) : (
<div className="text-slate-500 inline-flex items-center mr-2 px-1 pt-1 text-sm font-medium hover:text-slate-600 fill-slate-500 hover:fill-slate-600">
{link.name}
</div>
)}
</Menu.Button>

{isNavDropdown(link) && (
<Transition
as={Fragment}
show={showDropdown}
enter="transition ease-out duration-200"
enterFrom="transform opacity-0 scale-5"
enterTo="transform opacity-100 scale-100"
leave="transition ease-in duration-75"
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-5"
>
<Menu.Items
className="absolute top-5 flex flex-col dark:bg-slate-900/95 backdrop-blur"
ref={dropdownRef}
onMouseEnter={openDropdown}
onMouseLeave={closeDropdown}
>
{link.subItems.map(({ name, href }) => (
<Menu.Item key={name}>
<BaseLink
href={href}
onClick={() => setshowDropdown(false)}
className="text-slate-500 inline-flex items-center mt-2 px-1 pt-1 text-sm font-medium hover:text-slate-600"
>
{name}
</BaseLink>
</Menu.Item>
))}
</Menu.Items>
</Transition>
)}
{link.name}
</Link>
</Menu>
);
};
71 changes: 12 additions & 59 deletions packages/core/src/ui/Nav/NavMobile.tsx
Original file line number Diff line number Diff line change
@@ -1,21 +1,14 @@
import { Dialog, Menu, Transition } from "@headlessui/react";
import { Dialog, Menu } from "@headlessui/react";
import Link from "next/link.js";
import { useRouter } from "next/router.js";
import { Fragment, useEffect, useState } from "react";

import { useEffect, useState } from "react";
import { SearchContext, SearchField } from "../Search";
import { BaseLink } from "../Base";
import { MenuIcon, CloseIcon } from "../Icons";
import {
NavLink,
NavDropdown,
isNavDropdown,
SearchProviderConfig,
} from "../types";
import { NavLink, SearchProviderConfig } from "../types";

interface Props extends React.PropsWithChildren {
author?: string;
links?: Array<NavLink | NavDropdown>;
links?: Array<NavLink>;
search?: SearchProviderConfig;
}

Expand Down Expand Up @@ -99,56 +92,16 @@ export const NavMobile: React.FC<Props> = ({
{links.map((link) => (
<Menu as="div" key={link.name} className="relative">
<Menu.Button>
{!isNavDropdown(link) ? (
<li key={link.href}>
<Link
href={link.href}
className={`
<li key={link.href}>
<Link
href={link.href}
className={`
block w-full pl-3.5 before:pointer-events-none before:absolute before:-left-1 before:top-1/2 before:h-1.5 before:w-1.5 before:-translate-y-1/2 before:rounded-full text-slate-500 before:hidden before:bg-slate-300 hover:text-slate-600 hover:before:block dark:text-slate-400 dark:before:bg-slate-700 dark:hover:text-slate-300`}
>
{link.name}
</Link>
</li>
) : (
<li key={link.name}>
<div className="flex w-full pl-3.5 before:pointer-events-none before:absolute before:-left-1 before:top-1/2 before:h-1.5 before:w-1.5 before:-translate-y-1/2 before:rounded-full text-slate-500 before:hidden before:bg-slate-300 hover:text-slate-600 hover:before:block dark:text-slate-400 dark:before:bg-slate-700 dark:hover:text-slate-300 dark:hover:fill-slate-300 fill-slate-500 hover:fill-slate-600">
{link.name}
<svg
height="20"
viewBox="0 0 20 20"
width="20"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M7 10l5 5 5-5z" />
</svg>
</div>
</li>
)}
>
{link.name}
</Link>
</li>
</Menu.Button>
{isNavDropdown(link) && (
<Transition
as={Fragment}
enter="transition ease-out duration-200"
enterFrom="transform opacity-0 scale-5"
enterTo="transform opacity-100 scale-100"
leave="transition ease-in duration-75"
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-5"
>
<Menu.Items className="flex flex-col ml-3">
{link.subItems.map((subItem) => (
<Menu.Item key={subItem.name}>
<BaseLink
href={subItem.href}
className="text-slate-500 inline-flex items-center mt-2 px-1 pt-1 text-sm font-medium hover:text-slate-600 dark:text-slate-400 dark:hover:text-slate-300"
>
{subItem.name}
</BaseLink>
</Menu.Item>
))}
</Menu.Items>
</Transition>
)}
</Menu>
))}
</ul>
Expand Down
13 changes: 1 addition & 12 deletions packages/core/src/ui/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,22 +7,11 @@ export interface NavLink {
href: string;
}

export interface NavDropdown {
name: string;
subItems: Array<NavLink>;
}

export function isNavDropdown(
link: NavLink | NavDropdown
): link is NavDropdown {
return (link as NavDropdown).subItems !== undefined;
}

export interface NavConfig {
title: string;
logo?: string;
version?: string;
links: Array<NavLink | NavDropdown>;
links: Array<NavLink>;
search?: SearchProviderConfig;
social?: Array<SocialLink>;
}
Expand Down
2 changes: 1 addition & 1 deletion packages/template/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
"generate": "contentlayer build && cross-env NODE_OPTIONS=\"--experimental-json-modules --experimental-modules\" node ./scripts/search.mjs"
},
"dependencies": {
"@flowershow/core": "^0.3.1",
"@flowershow/core": "^0.3.2",
"@flowershow/remark-callouts": "^1.0.0",
"@flowershow/remark-embed": "^1.0.0",
"@flowershow/remark-wiki-link": "^1.0.0",
Expand Down
6 changes: 3 additions & 3 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

21 changes: 0 additions & 21 deletions site/content/docs/config.md
Original file line number Diff line number Diff line change
Expand Up @@ -26,27 +26,6 @@ const config = {
export default config;
```

## Navbar

### Dropdown

Flowershow supports adding dropdown menus in your navbar.

Example of configuration in `your-content-dir/config.js`:

```js
const userConfig = {
// links to the pages you want to add to the navbar
navLinks: [
{ href: '/about', name: 'About' },
//dropdown menu should not have an href and should contain 'subItems' array
{name: 'DropdownExample', subItems: [{href: '/goToLink1', name: 'Link1'}, {href: 'goToLink2', name: 'Link2}]}
],
}
export default userConfig
```
### Title and Logo

The Title and the logo in the navbar can be set by adding a **navbarTitle** attribute in your config. If you don't want a logo to be displayed in the navbar of your site, then don't include the logo field.
Expand Down
4 changes: 2 additions & 2 deletions site/content/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ import { WhatIsFlowershow } from "components/custom/WhatIsFlowershow.jsx"
<h2 className="text-center">
Self-publish your digital garden with Flowershow
</h2>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4 lg:gap-12">
<div className="grid grid-cols-1 md:grid-cols-2 md:gap-8 gap-4 lg:gap-12">
{ /* 1. markdown folder */ }
<div className="relative">
<div className="flex items-center space-x-4 sm:space-x-8">
Expand Down Expand Up @@ -88,7 +88,7 @@ import { WhatIsFlowershow } from "components/custom/WhatIsFlowershow.jsx"
</h2>
<p className="text-center">🚧 Coming soon! 🚧</p>
<p>We are actively trialling Flowershow before wide release. If you'd like to help us test or be first on the list to use it please sign up using the form at the top of this page.</p>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4 lg:gap-12">
<div className="grid grid-cols-1 md:grid-cols-2 md:gap-8 gap-4 lg:gap-12">
{ /* 1. markdown folder */ }
<div className="relative">
<div className="flex items-center space-x-4 sm:space-x-8">
Expand Down

0 comments on commit 5686d72

Please sign in to comment.