@myst-theme/site 0.1.24 → 0.1.26

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/package.json +8 -9
  2. package/src/components/DocumentOutline.tsx +11 -10
  3. package/src/components/Navigation/TableOfContents.tsx +38 -34
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@myst-theme/site",
3
- "version": "0.1.24",
3
+ "version": "0.1.26",
4
4
  "main": "./src/index.ts",
5
5
  "types": "./src/index.ts",
6
6
  "files": [
@@ -16,17 +16,16 @@
16
16
  "dependencies": {
17
17
  "@headlessui/react": "^1.7.8",
18
18
  "@heroicons/react": "^2.0.14",
19
- "@myst-theme/diagrams": "^0.1.24",
20
- "@myst-theme/frontmatter": "^0.1.24",
21
- "@myst-theme/jupyter": "^0.1.24",
22
- "@myst-theme/providers": "^0.1.24",
19
+ "@myst-theme/diagrams": "^0.1.26",
20
+ "@myst-theme/frontmatter": "^0.1.26",
21
+ "@myst-theme/jupyter": "^0.1.26",
22
+ "@myst-theme/providers": "^0.1.26",
23
23
  "classnames": "^2.3.2",
24
24
  "lodash.throttle": "^4.1.1",
25
- "myst-common": "^0.0.12",
25
+ "myst-common": "^0.0.14",
26
26
  "myst-config": "^0.0.9",
27
- "myst-demo": "^0.1.24",
28
- "myst-to-react": "^0.1.24",
29
- "mystjs": "^0.0.15",
27
+ "myst-demo": "^0.1.26",
28
+ "myst-to-react": "^0.1.26",
30
29
  "nbtx": "^0.2.3",
31
30
  "node-cache": "^5.1.2",
32
31
  "node-fetch": "^2.6.7",
package/src/components/DocumentOutline.tsx CHANGED
@@ -27,23 +27,24 @@ const Headings = ({ headings, activeId, highlight }: Props) => (
27
27
  {headings.map((heading) => (
28
28
  <li
29
29
  key={heading.id}
30
- className={classNames('border-l-2', {
30
+ className={classNames('border-l-2 hover:border-l-blue-500', {
31
31
  'text-blue-600': heading.id === activeId,
32
- 'border-l-gray-300 dark:border-l-gray-50 hover:border-l-blue-500':
33
- heading.id !== activeId,
32
+ 'border-l-gray-300 dark:border-l-gray-50': heading.id !== activeId,
34
33
  'border-l-blue-500': heading.id === activeId,
35
34
  'bg-blue-50 dark:bg-slate-800': heading.id === activeId,
36
35
  })}
37
36
  >
38
37
  <a
39
- className={classNames('block p-1 pl-2 text-slate-800 dark:text-slate-100', {
40
- 'text-blue-600 dark:text-white font-semibold': heading.id === activeId,
38
+ className={classNames('block p-1 pl-2', {
39
+ 'text-slate-900 dark:text-slate-50': heading.level < 3 && heading.id !== activeId,
40
+ 'text-slate-500 dark:text-slate-300': heading.level >= 3 && heading.id !== activeId,
41
+ 'text-blue-600 dark:text-white font-bold': heading.id === activeId,
41
42
  'pr-2': heading.id !== activeId,
42
- 'pl-3': heading.level === 2,
43
+ 'pl-2': heading.level === 2,
43
44
  'pl-4': heading.level === 3,
44
- 'pl-5': heading.level === 4,
45
- 'pl-6': heading.level === 5,
46
- 'pl-7': heading.level === 6,
45
+ 'pl-8 text-xs': heading.level === 4,
46
+ 'pl-10 text-xs font-light': heading.level === 5,
47
+ 'pl-12 text-xs font-extralight': heading.level === 6,
47
48
  })}
48
49
  href={`#${heading.id}`}
49
50
  onClick={(e) => {
@@ -152,7 +153,7 @@ const useIntersectionObserver = (highlight: () => void, onScreen: Set<HTMLHeadin
152
153
  };
153
154
 
154
155
  const DOC_OUTLINE_CLASS =
155
- 'fixed z-10 bottom-0 right-[max(0px,calc(50%-45rem))] w-[14rem] lg:w-[18rem] py-10 px-4 lg:px-8 overflow-y-auto hidden md:block';
156
+ 'fixed z-10 bottom-0 right-[max(0px,calc(50%-45rem))] w-[14rem] lg:w-[18rem] py-10 px-4 lg:px-8 overflow-y-auto hidden lg:block';
156
157
 
157
158
  export const DocumentOutline = ({
158
159
  top,
package/src/components/Navigation/TableOfContents.tsx CHANGED
@@ -35,12 +35,13 @@ const HeadingLink = ({
35
35
  title={title}
36
36
  className={({ isActive }: { isActive: boolean }) =>
37
37
  classNames('block break-words', {
38
- 'text-blue-600 dark:text-white': !isIndex && isActive,
38
+ 'mb-8 lg:mb-3 font-semibold': isIndex,
39
+ 'text-slate-900 dark:text-slate-200': isIndex && !exact,
40
+ 'text-blue-500 dark:text-blue-400': isIndex && exact,
41
+ 'border-l pl-4 text-blue-500 border-current dark:text-blue-400': !isIndex && isActive,
39
42
  'font-semibold': isActive,
40
- 'hover:text-slate-800 dark:hover:text-slate-100': !isActive,
41
- 'border-b pb-1': isIndex,
42
- 'border-stone-200 dark:border-stone-700': isIndex && !exact,
43
- 'border-blue-500': isIndex && exact,
43
+ 'border-l pl-4 border-transparent hover:border-slate-400 dark:hover:border-slate-500 text-slate-700 hover:text-slate-900 dark:text-slate-400 dark:hover:text-slate-300':
44
+ !isActive,
44
45
  })
45
46
  }
46
47
  to={withUrlbase(path, urlbase)}
@@ -55,24 +56,24 @@ const HeadingLink = ({
55
56
  );
56
57
  };
57
58
 
58
- const HEADING_CLASSES = 'text-slate-900 text-lg leading-6 dark:text-slate-100';
59
+ const HEADING_CLASSES = 'text-slate-900 leading-5 dark:text-slate-100';
59
60
  const Headings = ({ folder, headings, sections }: Props) => {
60
61
  const secs = sections || [];
61
62
  return (
62
- <ul className="text-slate-500 dark:text-slate-300 leading-6">
63
+ <ul className="space-y-6 lg:space-y-2">
63
64
  {secs.map((sec) => {
64
65
  if (sec.slug === folder) {
65
66
  return headings.map((heading, index) => (
66
67
  <li
67
68
  key={heading.slug || index}
68
- className={classNames('p-1', {
69
+ className={classNames('', {
69
70
  [HEADING_CLASSES]: heading.level === 'index',
70
71
  'font-semibold': heading.level === 'index',
71
- 'pl-4': heading.level === 2,
72
- 'pl-6': heading.level === 3,
73
- 'pl-8': heading.level === 4,
74
- 'pl-10': heading.level === 5,
75
- 'pl-12': heading.level === 6,
72
+ // 'pl-4': heading.level === 2,
73
+ // 'pl-6': heading.level === 3,
74
+ // 'pl-8': heading.level === 4,
75
+ // 'pl-10': heading.level === 5,
76
+ // 'pl-12': heading.level === 6,
76
77
  })}
77
78
  >
78
79
  {heading.path ? (
@@ -84,7 +85,7 @@ const Headings = ({ folder, headings, sections }: Props) => {
84
85
  {heading.short_title || heading.title}
85
86
  </HeadingLink>
86
87
  ) : (
87
- <h5 className="text-slate-900 font-semibold my-2 text-md leading-6 dark:text-slate-100 break-words">
88
+ <h5 className="mb-3 lg:mt-8 font-semibold break-words dark:text-white">
88
89
  {heading.short_title || heading.title}
89
90
  </h5>
90
91
  )}
@@ -101,9 +102,6 @@ const Headings = ({ folder, headings, sections }: Props) => {
101
102
  );
102
103
  };
103
104
 
104
- const TOC_CLASS =
105
- 'flex-col fixed z-30 bottom-0 left-[max(0px,calc(50%-45rem))] w-[19.5rem] border-r border-stone-200 dark:border-stone-700';
106
-
107
105
  export const TableOfContents = ({
108
106
  projectSlug,
109
107
  top,
@@ -126,28 +124,34 @@ export const TableOfContents = ({
126
124
  if (!headings) return null;
127
125
  return (
128
126
  <div
129
- className={classNames(TOC_CLASS, 'overflow-hidden', {
130
- flex: open,
131
- 'bg-white dark:bg-stone-900': open, // just apply when open, so that theme can transition
132
- 'hidden xl:flex': !open,
133
- })}
127
+ className="fixed xl:article-grid article-grid-gap xl:w-screen z-30 xl:pointer-events-none overflow-auto max-xl:min-w-[300px]"
134
128
  style={{
135
129
  top: top ?? 0,
136
- height:
137
- typeof document === 'undefined' || (height && height > window.innerHeight - (top ?? 0))
138
- ? undefined
139
- : height,
130
+ height: `min(calc(100vh - ${top ?? 0}px), ${height}px)`,
140
131
  }}
141
- suppressHydrationWarning
142
132
  >
143
- <nav
144
- aria-label="Table of Contents"
145
- className="flex-grow pt-10 pb-3 px-8 overflow-y-auto transition-opacity"
146
- style={{ opacity: height && height > 150 ? undefined : 0 }}
133
+ <div
134
+ className={classNames(
135
+ 'pointer-events-auto',
136
+ 'xl:col-margin-left flex-col',
137
+ 'overflow-hidden',
138
+ // 'border-r border-stone-200 dark:border-stone-700',
139
+ {
140
+ flex: open,
141
+ 'bg-white dark:bg-stone-900': open, // just apply when open, so that theme can transition
142
+ 'hidden xl:flex': !open,
143
+ },
144
+ )}
147
145
  >
148
- <Headings folder={resolvedProjectSlug} headings={headings} sections={config?.projects} />
149
- </nav>
150
- {footer && <div className="flex-none py-4">{footer}</div>}
146
+ <nav
147
+ aria-label="Table of Contents"
148
+ className="flex-grow overflow-y-auto transition-opacity mt-6 pb-3 ml-3 xl:ml-0 mr-3"
149
+ style={{ opacity: height && height > 150 ? undefined : 0 }}
150
+ >
151
+ <Headings folder={resolvedProjectSlug} headings={headings} sections={config?.projects} />
152
+ </nav>
153
+ {footer && <div className="flex-none py-4">{footer}</div>}
154
+ </div>
151
155
  </div>
152
156
  );
153
157
  };