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 memoize = require('micro-memoize'); |
||||
const path = require('path'); |
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 = [ |
const remarkPlugins = [ |
||||
[require('./remark-include'), { resolveFrom: path.join(__dirname, '../src/includes') }], |
[memoize(include), { resolveFrom: path.join(__dirname, '../src/includes') }], |
||||
require('remark-vscode'), |
memoize(vscode), |
||||
memoize(require('./remark-paragraph-alerts')), |
memoize(paragraphAlerts), |
||||
memoize(require('remark-external-links')), |
memoize(emoji), |
||||
memoize(require('remark-emoji')), |
memoize(images), |
||||
memoize(require('remark-images')), |
memoize(unwrapImages), |
||||
memoize(require('remark-unwrap-images')), |
memoize(normalizeHeadings), |
||||
memoize(require('remark-normalize-headings')), |
memoize(slug), |
||||
memoize(require('remark-slug')), |
memoize(headingID), |
||||
]; |
]; |
||||
|
|
||||
module.exports = { remarkPlugins }; |
module.exports = { remarkPlugins }; |
||||
|
|||||
@ -1,7 +1,6 @@ |
|||||
export const SIDEBAR_WIDTH = 280; |
export const SIDEBAR_WIDTH = 240; |
||||
export const TOC_WIDTH = 280; |
export const TOC_WIDTH = 240; |
||||
export const CONTENT_MAX_WIDTH = 1104; |
export const CONTENT_MAX_WIDTH = 1104; |
||||
|
|
||||
export const SHIKI_THEME = 'Material-Theme-Default'; |
export const SHIKI_THEME = 'Material-Theme-Default'; |
||||
|
|
||||
export const THEME_STORAGE_KEY = 'theme'; |
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