mirror of https://github.com/lukechilds/docs.git
Thomas Osmonson
4 years ago
21 changed files with 785 additions and 775 deletions
@ -1,16 +1,26 @@ |
|||
const memoize = require('micro-memoize'); |
|||
const path = require('path'); |
|||
|
|||
const include = require('./remark-include'); |
|||
const vscode = require('remark-vscode'); |
|||
const emoji = require('remark-emoji'); |
|||
const paragraphAlerts = require('./remark-paragraph-alerts'); |
|||
const images = require('remark-images'); |
|||
const unwrapImages = require('remark-unwrap-images'); |
|||
const normalizeHeadings = require('remark-normalize-headings'); |
|||
const slug = require('remark-slug'); |
|||
const headingID = require('remark-heading-id'); |
|||
|
|||
const remarkPlugins = [ |
|||
[require('./remark-include'), { resolveFrom: path.join(__dirname, '../src/includes') }], |
|||
require('remark-vscode'), |
|||
memoize(require('./remark-paragraph-alerts')), |
|||
memoize(require('remark-external-links')), |
|||
memoize(require('remark-emoji')), |
|||
memoize(require('remark-images')), |
|||
memoize(require('remark-unwrap-images')), |
|||
memoize(require('remark-normalize-headings')), |
|||
memoize(require('remark-slug')), |
|||
[memoize(include), { resolveFrom: path.join(__dirname, '../src/includes') }], |
|||
memoize(vscode), |
|||
memoize(paragraphAlerts), |
|||
memoize(emoji), |
|||
memoize(images), |
|||
memoize(unwrapImages), |
|||
memoize(normalizeHeadings), |
|||
memoize(slug), |
|||
memoize(headingID), |
|||
]; |
|||
|
|||
module.exports = { remarkPlugins }; |
|||
|
|||
@ -1,7 +1,6 @@ |
|||
export const SIDEBAR_WIDTH = 280; |
|||
export const TOC_WIDTH = 280; |
|||
export const SIDEBAR_WIDTH = 240; |
|||
export const TOC_WIDTH = 240; |
|||
export const CONTENT_MAX_WIDTH = 1104; |
|||
|
|||
export const SHIKI_THEME = 'Material-Theme-Default'; |
|||
|
|||
export const THEME_STORAGE_KEY = 'theme'; |
|||
|
|||
@ -0,0 +1,43 @@ |
|||
import { Ref, useEffect, useState } from 'react'; |
|||
import debounce from 'lodash.debounce'; |
|||
import { useRect } from '@reach/rect'; |
|||
import { useScroll } from '@common/hooks/use-scroll'; |
|||
|
|||
export const useHeadroom = (target: Ref<HTMLDivElement>, { useStyle = true, wait = 0 } = {}) => { |
|||
let styleInserted = false; |
|||
const rect = useRect(target as any); |
|||
const { scrollY, scrollDirection } = useScroll(); |
|||
|
|||
if (typeof document !== 'undefined') { |
|||
const header = document.querySelector('.headroom'); |
|||
|
|||
const listener = debounce(() => { |
|||
header?.classList?.toggle('unpinned', window.pageYOffset >= rect?.height); |
|||
}, 50); |
|||
|
|||
useEffect(() => { |
|||
if ( |
|||
scrollDirection === 'down' && |
|||
header.classList.contains('unpinned') && |
|||
header.classList.contains('hidden') |
|||
) { |
|||
header.classList.remove('hidden'); |
|||
} |
|||
if ( |
|||
scrollDirection === 'up' && |
|||
header.classList.contains('unpinned') && |
|||
!header.classList.contains('hidden') |
|||
) { |
|||
header.classList.add('hidden'); |
|||
} |
|||
}, [scrollDirection]); |
|||
|
|||
useEffect(() => { |
|||
if (rect) { |
|||
document.addEventListener('scroll', listener, { passive: true }); |
|||
|
|||
return () => document.removeEventListener('scroll', listener); |
|||
} |
|||
}, [rect]); |
|||
} |
|||
}; |
|||
@ -0,0 +1,65 @@ |
|||
/** |
|||
* useScroll React custom hook |
|||
* Usage: |
|||
* const { scrollX, scrollY, scrollDirection } = useScroll();7 |
|||
* Original Source: https://gist.github.com/joshuacerbito/ea318a6a7ca4336e9fadb9ae5bbb8f4
|
|||
*/ |
|||
import { useState, useEffect } from 'react'; |
|||
|
|||
type SSRRect = { |
|||
bottom: number; |
|||
height: number; |
|||
left: number; |
|||
right: number; |
|||
top: number; |
|||
width: number; |
|||
x: number; |
|||
y: number; |
|||
}; |
|||
const EmptySSRRect: SSRRect = { |
|||
bottom: 0, |
|||
height: 0, |
|||
left: 0, |
|||
right: 0, |
|||
top: 0, |
|||
width: 0, |
|||
x: 0, |
|||
y: 0, |
|||
}; |
|||
|
|||
export const useScroll = () => { |
|||
const [lastScrollTop, setLastScrollTop] = useState<number>(0); |
|||
const [bodyOffset, setBodyOffset] = useState<DOMRect | SSRRect>( |
|||
typeof window === 'undefined' || !window.document |
|||
? EmptySSRRect |
|||
: document.body.getBoundingClientRect() |
|||
); |
|||
const [scrollY, setScrollY] = useState<number>(bodyOffset.top); |
|||
const [scrollX, setScrollX] = useState<number>(bodyOffset.left); |
|||
const [scrollDirection, setScrollDirection] = useState<'down' | 'up' | undefined>(); |
|||
|
|||
const listener = () => { |
|||
setBodyOffset( |
|||
typeof window === 'undefined' || !window.document |
|||
? EmptySSRRect |
|||
: document.body.getBoundingClientRect() |
|||
); |
|||
setScrollY(-bodyOffset.top); |
|||
setScrollX(bodyOffset.left); |
|||
setScrollDirection(lastScrollTop > -bodyOffset.top ? 'down' : 'up'); |
|||
setLastScrollTop(-bodyOffset.top); |
|||
}; |
|||
|
|||
useEffect(() => { |
|||
window.addEventListener('scroll', listener); |
|||
return () => { |
|||
window.removeEventListener('scroll', listener); |
|||
}; |
|||
}); |
|||
|
|||
return { |
|||
scrollY, |
|||
scrollX, |
|||
scrollDirection, |
|||
}; |
|||
}; |
|||
File diff suppressed because it is too large
Loading…
Reference in new issue