Gitbook Theme

.github/workflows/intergrate.yml

@@ -9,21 +9,21 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
         with:
           persist-credentials: false
 
       - name: Cache
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         with:
           path: ${{ github.workspace }}/.next/cache
           key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}
 
       - name: Install and Build
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v3
         with:
-          node-version: 16.x
+          node-version: 18.x
       - run: npm install
       - run: npm run build
         env:
-            CI: true
+          CI: true

.gitignore

@@ -37,9 +37,6 @@ yarn-error.log*
 /.idea/
 /.vscode/
 
-# yarn
-yarn.lock
-
 # docker
 /.devcontainer
 

components/colormode-toggler.jsx

@@ -18,7 +18,7 @@ function ColorModeToggler() {
             ? _('Toggle light mode')
             : _('Toggle dark mode')
         }
-        className='shadow bg-gray-100 text-gray-600 dark:text-gray-400 dark:bg-gray-700 rounded p-1 mr-1 md:mr-7 focus:outline-none w-8 h-8'
+        className='hover:bg-gray-100 text-gray-600 dark:text-gray-400 dark:hover:bg-gray-700 rounded p-1 mr-1 md:mr-7 focus:outline-none w-8 h-8'
       >
         {themeCtx.theme === 'dark' ? <Sun /> : <Moon />}
       </button>

components/component-mapper.jsx

@@ -1,53 +1,119 @@
-import Counter from './example-counter'
+import { AirtableBase, AirtableForm } from "mdx-embed2/dist/components/airtable";
+import { Buzzsprout } from "mdx-embed2/dist/components/buzzsprout";
+import { Cinnamon } from "mdx-embed2/dist/components/cinnamon";
+import { CodePen } from "mdx-embed2/dist/components/codepen";
+import { CodeSandbox } from "mdx-embed2/dist/components/codesandbox";
+import { EggheadLesson } from "mdx-embed2/dist/components/egghead";
+import { Figma } from "mdx-embed2/dist/components/figma";
+import { Flickr } from "mdx-embed2/dist/components/flickr";
+import { Gist } from "mdx-embed2/dist/components/gist";
+import { Instagram } from "mdx-embed2/dist/components/instagram";
+import { Lbry } from "mdx-embed2/dist/components/lbry";
+import { LinkedInBadge } from "mdx-embed2/dist/components/linkedin";
+import { Pin, PinterestBoard, PinterestFollowButton } from "mdx-embed2/dist/components/pinterest";
+import { Replit } from "mdx-embed2/dist/components/replit";
+import { SimplecastEpisode } from "mdx-embed2/dist/components/simplecast";
+import { Snack } from "mdx-embed2/dist/components/snack";
+import { SoundCloud } from "mdx-embed2/dist/components/soundcloud";
+import { Spotify } from "mdx-embed2/dist/components/spotify";
+import { TikTok } from "mdx-embed2/dist/components/tiktok";
+import { Twitch } from "mdx-embed2/dist/components/twitch";
+import { Tweet, TwitterFollowButton, TwitterHashtagButton, TwitterList, TwitterMentionButton, TwitterTimeline } from "mdx-embed2/dist/components/twitter";
+import { Vimeo } from "mdx-embed2/dist/components/vimeo";
+import { Whimsical } from "mdx-embed2/dist/components/whimsical";
+import { Wikipedia } from "mdx-embed2/dist/components/wikipedia";
+import { Wistia } from "mdx-embed2/dist/components/wistia";
+import { YouTube } from "mdx-embed2/dist/components/youtube";
+
+import Counter from './example-counter';
 import {
-  Accordion,
-  Blockquote,
-  Code,
-  CustomImage,
-  CustomLink,
-  H1,
-  H2,
-  H3,
-  H4,
-  H5,
-  H6,
-  Hr,
-  Ol,
-  P,
-  Tab,
-  Table,
-  Tabs,
-  Tbody,
-  Td,
-  Th,
-  Thead,
-  Tr,
-  Ul
-} from './mdx-components'
+	Accordion,
+	Blockquote,
+	Code,
+	CustomImage,
+	CustomLink,
+	H1,
+	H2,
+	H3,
+	H4,
+	H5,
+	H6,
+	Hr,
+	Ol,
+	P,
+	Tab,
+	Table,
+	Tabs,
+	Tbody,
+	Td,
+	Th,
+	Thead,
+	Tr,
+	Ul
+} from './mdx-components';
 
 export const componentMap = {
-  Counter,
-  Accordion,
-  Tab,
-  Tabs,
-  table: Table,
-  thead: Thead,
-  tbody: Tbody,
-  tr: Tr,
-  td: Td,
-  th: Th,
-  a: CustomLink,
-  img: CustomImage,
-  blockquote: Blockquote,
-  code: Code,
-  h1: H1,
-  h2: H2,
-  h3: H3,
-  h4: H4,
-  h5: H5,
-  h6: H6,
-  ol: Ol,
-  ul: Ul,
-  hr: Hr,
-  p: P
+	// Example Counter Component
+	Counter,
+
+	// NextBook Components
+	Accordion,
+	Tab,
+	Tabs,
+	table: Table,
+	thead: Thead,
+	tbody: Tbody,
+	tr: Tr,
+	td: Td,
+	th: Th,
+	a: CustomLink,
+	img: CustomImage,
+	blockquote: Blockquote,
+	code: Code,
+	h1: H1,
+	h2: H2,
+	h3: H3,
+	h4: H4,
+	h5: H5,
+	h6: H6,
+	ol: Ol,
+	ul: Ul,
+	hr: Hr,
+	p: P,
+
+	// mdx-embed2
+	AirtableBase,
+	AirtableForm,
+	Buzzsprout,
+	Cinnamon,
+	CodePen,
+	CodeSandbox,
+	EggheadLesson,
+	Figma,
+	Flickr,
+	Gist,
+	Instagram,
+	Lbry,
+	LinkedInBadge,
+	Pin,
+	PinterestBoard,
+	PinterestFollowButton,
+	Replit,
+	SimplecastEpisode,
+	Snack,
+	SoundCloud,
+	Spotify,
+	TikTok,
+	Twitch,
+	Tweet,
+	TwitterFollowButton,
+	TwitterHashtagButton,
+	TwitterList,
+	TwitterMentionButton,
+	TwitterTimeline,
+	Vimeo,
+	Whimsical,
+	Wikipedia,
+	Wistia,
+	YouTube,
 }

components/in-page-toc.jsx

@@ -1,44 +1,76 @@
+import { useEffect, useState } from 'react';
+import router from 'next/router';
 import Scrollspy from 'components/scrollspy'
 import Text from './text'
+import { Link } from './svg-icons';
 
 function InPageTocElement(props) {
-  // remove 1 from first heading to prevent exe left padding and add standard left padding
-  const style = { paddingLeft: `${props.levels[props.children] - 1 + 0.2}em` }
-  return (
-    <li style={style} className={props.className} onClick={props.onClick}>
-      {props.children}
-    </li>
-  )
+	// Indent headings based on their level
+	const level = props.levels[props.slug] >= 1 ? props.levels[props.slug] : 1
+	const style = { paddingLeft: `${level / 2}em` }
+	return (
+		<li style={style} className={props.className} onClick={props.onClick}>
+			{props.children}
+		</li>
+	)
 }
 
 function InPageToc({ tocRaw }) {
-  let tocIds = []
-  let levels = {}
-  tocRaw.forEach((row) => {
-    // populate dictionary of heading slugs
-    tocIds.push(row.slug)
-    // populate dictionary of headings and their levels
-    levels[row.content] = row.lvl
-  })
-
-  if (tocIds.length) {
-    return (
-      <div className='pr-2'>
-        <div className='font-medium rounded py-2 text-center text-gray-700 dark:text-gray-100 bg-gray-300 dark:bg-gray-700'>
-          <Text tid='Page Contents' />
-        </div>
-        <Scrollspy
-          ids={tocIds}
-          itemElement={<InPageTocElement levels={levels} />}
-          itemContainerClassName='tracking-wide mt-4 text-gray-600 dark:text-gray-400 text-sm 2xl:text-base border-0 border-l border-gray-300 dark:border-gray-600 leading-6 cursor-pointer'
-          activeItemClassName='text-gray-900 dark:text-gray-200 border-l border-gray-900 dark:border-gray-200'
-          includeParentClasses={false}
-        />
-      </div>
-    )
-  } else {
-    return null
-  }
+
+	let tocIds = []
+	let levels = {}
+	tocRaw.forEach((row) => {
+		// populate dictionary of heading slugs
+		tocIds.push(row.slug)
+		// populate dictionary of headings and their levels
+		levels[row.slug] = row.lvl
+	})
+
+	// Update current "copy link" button when the user scrolls
+	const [url, setUrl] = useState('')
+
+	const onUpdateHash = (hash) => {
+		setUrl(window.location.origin + window.location.pathname + hash)
+	}
+
+	// on mount, set the initial hash
+	useEffect(() => {
+		setUrl(router.asPath)
+	}, []);
+
+	if (tocIds.length) {
+		return (
+			<div className='px-4'>
+				<a
+					className='m-4 text-sm text-gray-400 hover:text-gray-500 dark:text-gray-400 dark:hover:text-gray-300 block'
+					href={url}
+					onClick={(e) => {
+						e.preventDefault();
+						navigator.clipboard.writeText(url);
+					}}
+				>
+					<Link />
+					<Text tid='Permalink' className="px-4" />
+				</a>
+
+				<div className='py-2 text-gray-400 dark:text-gray-300 uppercase text-sm font-bold'>
+					<Text tid='Page Contents' className="tracking-widest" />
+				</div>
+				<Scrollspy
+					ids={tocIds}
+					itemElement={<InPageTocElement levels={levels} />}
+					itemContainerClassName='tracking-wide mt-4 text-gray-600 dark:text-gray-400 text-xs 2xl:text-sm border-0 border-l border-gray-200 dark:border-gray-600 leading-6 cursor-pointer'
+					itemClassName="text-gray-500 truncate py-1 hover:text-gray-700 dark:hover:text-gray-300"
+					activeItemClassName='active text-gray-700 dark:text-gray-200 border-l-2 border-gray-900 dark:border-gray-200'
+					includeParentClasses={false}
+					onUpdateHash={onUpdateHash}
+				/>
+
+			</div>
+		)
+	} else {
+		return null
+	}
 }
 
 export default InPageToc