Skip to content

Commit 64776b0

Browse files
chdeskurchdeskur
authored
Merge pull request #1 from emily-dominguez/patch-2
update main.tsx and docs.yml
2 parents 9f0a90d + e008381 commit 64776b0

File tree

12 files changed

+118
-72
lines changed

12 files changed

+118
-72
lines changed

‎custom-app/src/NavFooter.tsx‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
export function NavFooter() {
2+
return (
3+
<div className="tw-border-t tw-border-sage6 tw-bg-sage3">
4+
<div className="tw-max-w-[var(--spacing-page-width)] tw-mx-auto tw-px-4 md:tw-px-6 lg:tw-px-8">
5+
<div className="tw-grid tw-grid-cols-4 py-8">
6+
<ul className="tw-space-y-2">
7+
<li>Footer Item 1</li>
8+
<li>Footer Item 2</li>
9+
<li>Footer Item 3</li>
10+
</ul>
11+
<ul className="tw-space-y-2">
12+
<li>Footer Item 1</li>
13+
<li>Footer Item 2</li>
14+
<li>Footer Item 3</li>
15+
</ul>
16+
<div className="tw-flex tw-justify-end tw-items-end tw-text-sage11 tw-flex-col tw-text-end tw-gap-2 tw-col-span-2">
17+
<h4>Footer Title</h4>
18+
<p className="tw-max-w-96">
19+
Footer content goes here. This is a good place to put contact
20+
information or other important information.
21+
</p>
22+
</div>
23+
</div>
24+
</div>
25+
</div>
26+
)
27+
}

‎custom-app/src/NavHeader.tsx‎

Lines changed: 9 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,30 @@
1-
import NavigationMenuDemo from "./NavMenu"
1+
import { Transition } from "@headlessui/react"
2+
import NavigationMenu from "./NavMenu"
3+
import { Fragment } from "react"
24

5+
// main header wrapper component
36
export function NavHeader() {
47
return (
5-
<div className="tw-fixed tw-top-0 tw-inset-x-0 tw-border-b tw-border-sage6 tw-backdrop-blur-2xl tw-h-[var(--spacing-header-height)] tw-z-30 tw-flex tw-items-center">
6-
{/* <Transition
8+
<div className="tw-fixed tw-top-0 tw-inset-x-0 tw-border-b tw-border-sage6 tw-h-[var(--spacing-header-height)] tw-z-30 tw-flex tw-items-center tw-bg-white">
9+
<Transition
710
as={Fragment}
811
show={true}
912
appear={true}
1013
enter="tw-transition-opacity"
1114
enterFrom="tw-opacity-0"
12-
enterTo="tw-opacity-100"> */}
15+
enterTo="tw-opacity-100">
1316
<div className="tw-relative tw-w-full tw-flex tw-justify-between tw-items-center tw-max-w-[var(--spacing-page-width)] tw-mx-auto tw-px-4 md:tw-px-6 lg:tw-px-8">
1417
<h2 className="tw-whitespace-nowrap tw-m-0">Custom Header</h2>
1518
<div className="tw-absolute tw-right-0 sm:tw-right-auto sm:tw-w-full sm:tw-left-1/2 sm:-tw-translate-x-1/2 tw-h-full sm:tw-top-0 sm:tw-flex sm:tw-items-center">
16-
<NavigationMenuDemo />
19+
<NavigationMenu/>
1720
</div>
1821
<div className="tw-hidden sm:tw-block">
1922
<button className="tw-rounded-md tw-bg-grass11 tw-text-white tw-py-2 tw-px-3">
2023
Sign Up
2124
</button>
2225
</div>
2326
</div>
24-
{/* </Transition> */}
27+
</Transition>
2528
</div>
2629
)
2730
}
28-
29-
export function NavFooter() {
30-
return (
31-
<div className="tw-border-t tw-border-sage6 tw-bg-sage3">
32-
<div className="tw-max-w-[var(--spacing-page-width)] tw-mx-auto tw-px-4 md:tw-px-6 lg:tw-px-8">
33-
<div className="tw-grid tw-grid-cols-4 py-8">
34-
<ul className="tw-space-y-2">
35-
<li>Footer Item 1</li>
36-
<li>Footer Item 2</li>
37-
<li>Footer Item 3</li>
38-
</ul>
39-
<ul className="tw-space-y-2">
40-
<li>Footer Item 1</li>
41-
<li>Footer Item 2</li>
42-
<li>Footer Item 3</li>
43-
</ul>
44-
<div className="tw-flex tw-justify-end tw-items-end tw-text-sage11 tw-flex-col tw-text-end tw-gap-2 tw-col-span-2">
45-
<h4>Footer Title</h4>
46-
<p className="tw-max-w-96">
47-
Footer content goes here. This is a good place to put contact
48-
information or other important information.
49-
</p>
50-
</div>
51-
</div>
52-
</div>
53-
</div>
54-
)
55-
}

‎custom-app/src/NavMenu.tsx‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -129,11 +129,15 @@ const NavigationMenuDemo = () => {
129129
</NavigationMenu.Item>
130130

131131
<NavigationMenu.Item>
132-
<NavigationMenu.Link
133-
className="hover:tw-no-underline hover:tw-text-grass11 tw-text-grass11 hover:tw-bg-grass3 focus:tw-shadow-grass7 tw-block tw-select-none tw-rounded-[4px] tw-px-3 tw-py-2 tw-text-[15px] tw-font-medium tw-leading-none tw-no-underline tw-outline-none focus:tw-shadow-[0_0_0_2px]"
134-
href="/">
135-
Github
136-
</NavigationMenu.Link>
132+
<NavigationMenu.Trigger
133+
className="tw-text-grass11 hover:tw-bg-grass3 focus:tw-shadow-grass7 tw-group tw-flex tw-select-none tw-items-center tw-justify-between tw-gap-[2px] tw-rounded-[4px] tw-px-3 tw-py-2 tw-text-[15px] tw-font-medium tw-leading-none tw-outline-none focus:tw-shadow-[0_0_0_2px]"
134+
asChild>
135+
<a
136+
className="hover:tw-no-underline hover:tw-text-grass11 tw-text-grass11 hover:tw-bg-grass3 focus:tw-shadow-grass7 tw-block tw-select-none tw-rounded-[4px] tw-px-3 tw-py-2 tw-text-[15px] tw-font-medium tw-leading-none tw-no-underline tw-outline-none focus:tw-shadow-[0_0_0_2px]"
137+
href="/">
138+
Github
139+
</a>
140+
</NavigationMenu.Trigger>
137141
</NavigationMenu.Item>
138142

139143
<NavigationMenu.Indicator className="data-[state=visible]:tw-animate-fadeIn data-[state=hidden]:tw-animate-fadeOut tw-top-full tw-z-[1] tw-flex tw-h-[10px] tw-items-end tw-justify-center tw-overflow-hidden tw-transition-[width,transform_250ms_ease]">
@@ -157,11 +161,11 @@ const ListItem = React.forwardRef<
157161
HTMLAnchorElement,
158162
PropsWithChildren<ListItemProps>
159163
>(({ className, children, title, ...props }, forwardedRef) => (
160-
<li>
164+
<li className="tw-h-full">
161165
<NavigationMenu.Link asChild>
162166
<a
163167
className={classNames(
164-
'hover:tw-no-underline focus:tw-shadow-[0_0_0_2px] focus:tw-shadow-grass7 hover:tw-bg-sage3 tw-block tw-select-none tw-rounded-[6px] tw-p-3 tw-text-[15px] tw-leading-none tw-no-underline tw-outline-none tw-transition-colors',
168+
'hover:tw-no-underline focus:tw-shadow-[0_0_0_2px] focus:tw-shadow-grass7 hover:tw-bg-sage3 tw-block tw-select-none tw-rounded-[6px] tw-p-3 tw-text-[15px] tw-leading-none tw-no-underline tw-outline-none tw-transition-colors tw-h-full',
165169
className,
166170
)}
167171
{...props}

‎custom-app/src/main.css‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,15 @@
11
@tailwind base;
22
@tailwind components;
33
@tailwind utilities;
4+
5+
:root {
6+
--spacing-custom-header-height: 80px;
7+
}
8+
9+
#fern-header {
10+
height: var(--spacing-custom-header-height) !important;
11+
}
12+
13+
#fern-footer {
14+
position: relative;
15+
}

‎custom-app/src/main.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
import './main.css'
2-
3-
import { NavFooter, NavHeader } from './NavHeader'
2+
import { NavHeader } from './NavHeader'
3+
import { NavFooter } from './NavFooter'
44
import { onDOMContentMutate, renderInContainer } from './utils'
55

66
function render() {
77
// render custom header
8-
renderInContainer(NavHeader, document.getElementById('fern-header'))
8+
renderInContainer(NavHeader, document.getElementById('fern-header'));
99

1010
// render custom footer
11-
renderInContainer(NavFooter, document.getElementById('fern-footer'))
11+
renderInContainer(NavFooter, document.getElementById('fern-footer'));
1212
}
1313

1414
onDOMContentMutate(render)

‎custom-app/src/utils.ts‎

Lines changed: 37 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -23,27 +23,42 @@ export function renderInContainer(Component: FunctionComponent, container: HTMLE
2323
}
2424

2525
export function onDOMContentMutate(render: () => void) {
26-
// observe DOM changes to re-render the custom header and footer
27-
let observations = 0
26+
let hasRendered = false
27+
// observe DOM changes to re-render the custom header and footer
28+
let observations = 0
29+
30+
const setupMutationObserver = () => {
31+
if (!hasRendered) {
32+
console.log("Initial render")
33+
render()
34+
hasRendered = true
35+
}
36+
new MutationObserver((e, o) => {
37+
for (const item of e) {
38+
if (item.target instanceof HTMLElement) {
39+
const target = item.target
40+
if (target.id === 'fern-header' || target.id === 'fern-footer') {
41+
if (observations < 3) {
42+
// react hydration will trigger a mutation event
43+
observations++
44+
} else {
45+
o.disconnect()
46+
}
47+
break
48+
}
49+
}
50+
}
51+
}).observe(document.body, { childList: true, subtree: true })
52+
}
53+
54+
// if DOM is already loaded we run
55+
if (document.readyState === 'loading') {
2856
document.addEventListener('DOMContentLoaded', () => {
29-
console.log('DOMContentLoaded')
30-
render()
31-
new MutationObserver((e, o) => {
32-
render()
33-
for (const item of e) {
34-
if (item.target instanceof HTMLElement) {
35-
const target = item.target
36-
if (target.id === 'fern-header' || target.id === 'fern-footer') {
37-
if (observations < 3) {
38-
// react hydration will trigger a mutation event
39-
observations++
40-
} else {
41-
o.disconnect()
42-
}
43-
break
44-
}
45-
}
46-
}
47-
}).observe(document.body, { childList: true, subtree: true })
57+
console.log('DOMContentLoaded (delayed)')
58+
setupMutationObserver()
4859
})
49-
}
60+
} else {
61+
console.log('DOMContentLoaded already fired')
62+
setupMutationObserver()
63+
}
64+
}

‎fern/docs.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,4 +24,4 @@ css:
2424

2525
js:
2626
- path: ./dist/output.js
27-
strategy: beforeInteractive
27+
strategy: afterInteractive

‎fern/docs/pages/welcome.mdx‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,9 +25,6 @@ Welcome to our documentation! Here you'll find information to get started as wel
2525
href="https://discord.com/invite/JkkXumPzcG"
2626
/>
2727
</Cards>
28-
29-
<br />
30-
3128
<Cards>
3229
<Card
3330
title="Blog"

‎fern/fern.config.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
{
22
"organization": "fern",
3-
"version": "0.18.0"
3+
"version": "0.61.24"
44
}

‎fern/generators.yml‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
api:
2+
specs:
3+
- openapi: openapi/openapi.yaml

0 commit comments

Comments
 (0)