@universal-ember/docs-support 0.0.0 → 0.1.0
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.
- package/README.md +20 -0
- package/declarations/{index.d.ts → index.gts.d.ts} +3 -2
- package/declarations/index.gts.d.ts.map +1 -0
- package/declarations/menu-layout.gts.d.ts +19 -0
- package/declarations/menu-layout.gts.d.ts.map +1 -0
- package/declarations/{layouts.gts.d.ts → page-layout.gts.d.ts} +8 -13
- package/declarations/page-layout.gts.d.ts.map +1 -0
- package/declarations/shell.gts.d.ts +14 -2
- package/declarations/shell.gts.d.ts.map +1 -1
- package/declarations/side-nav.gts.d.ts +13 -0
- package/declarations/side-nav.gts.d.ts.map +1 -0
- package/declarations/theme-toggle.gts.d.ts +1 -0
- package/declarations/theme-toggle.gts.d.ts.map +1 -1
- package/dist/article.js +47 -0
- package/dist/article.js.map +1 -0
- package/dist/callout.js +14 -0
- package/dist/callout.js.map +1 -0
- package/dist/errors.js +10 -0
- package/dist/errors.js.map +1 -0
- package/dist/h2.js +10 -0
- package/dist/h2.js.map +1 -0
- package/dist/icons.js +48 -0
- package/dist/icons.js.map +1 -0
- package/dist/index-page.css +22 -0
- package/dist/index-page.js +15 -0
- package/dist/index-page.js.map +1 -0
- package/dist/index.js +12 -0
- package/dist/index.js.map +1 -0
- package/dist/links.js +30 -0
- package/dist/links.js.map +1 -0
- package/dist/menu-layout.js +26 -0
- package/dist/menu-layout.js.map +1 -0
- package/dist/page-layout.js +60 -0
- package/dist/page-layout.js.map +1 -0
- package/dist/shell.js +30 -0
- package/dist/shell.js.map +1 -0
- package/dist/side-nav.js +104 -0
- package/dist/side-nav.js.map +1 -0
- package/dist/site-css/components.css +22 -0
- package/dist/site-css/featured-demo.css +7 -0
- package/dist/site-css/shell.css +95 -0
- package/dist/site-css/shiki.css +27 -0
- package/dist/site-css/site.css +75 -0
- package/dist/text.js +10 -0
- package/dist/text.js.map +1 -0
- package/dist/theme-toggle.css +48 -0
- package/dist/theme-toggle.js +33 -0
- package/dist/theme-toggle.js.map +1 -0
- package/package.json +38 -36
- package/tailwind.mjs +74 -0
- package/declarations/index.d.ts.map +0 -1
- package/declarations/layouts.gts.d.ts.map +0 -1
package/README.md
ADDED
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
# @universal-ember/docs-support
|
|
2
|
+
|
|
3
|
+
All docs' needs abstracted into one package for better sharing across the docs apps.
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
## Fonts
|
|
7
|
+
|
|
8
|
+
Add to the HTML `<head>`:
|
|
9
|
+
```html
|
|
10
|
+
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
11
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
12
|
+
```
|
|
13
|
+
Add to the bottom of the `<body>`
|
|
14
|
+
```html
|
|
15
|
+
<link
|
|
16
|
+
href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Lexend:wght@100..900&display=swap"
|
|
17
|
+
rel="stylesheet">
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
|
|
@@ -6,6 +6,7 @@ export { Shell } from './shell.gts';
|
|
|
6
6
|
export { IndexPage } from './index-page.gts';
|
|
7
7
|
export { Link, InternalLink } from './links.gts';
|
|
8
8
|
export { OopsError } from './errors.gts';
|
|
9
|
-
export {
|
|
9
|
+
export { ResponsiveMenuLayout } from './menu-layout.gts';
|
|
10
|
+
export { PageLayout, TopRight } from './page-layout.gts';
|
|
10
11
|
export { ThemeToggle } from './theme-toggle.gts';
|
|
11
|
-
//# sourceMappingURL=index.d.ts.map
|
|
12
|
+
//# sourceMappingURL=index.gts.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.gts.d.ts","sourceRoot":"","sources":["../src/index.gts"],"names":[],"mappings":"AAWA,OAAO,EAAE,EAAE,EAAE,MAAM,UAAU,CAAC;AAC9B,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAClC,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC"}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import type { TOC } from '@ember/component/template-only';
|
|
2
|
+
import type { ComponentLike, WithBoundArgs } from '@glint/template';
|
|
3
|
+
declare const Toggle: TOC<{
|
|
4
|
+
Args: {
|
|
5
|
+
toggle: ComponentLike<{
|
|
6
|
+
Blocks: {
|
|
7
|
+
default: [];
|
|
8
|
+
};
|
|
9
|
+
}>;
|
|
10
|
+
};
|
|
11
|
+
}>;
|
|
12
|
+
export declare const ResponsiveMenuLayout: TOC<{
|
|
13
|
+
Blocks: {
|
|
14
|
+
content: [];
|
|
15
|
+
header: [toggle: WithBoundArgs<typeof Toggle, 'toggle'>];
|
|
16
|
+
};
|
|
17
|
+
}>;
|
|
18
|
+
export {};
|
|
19
|
+
//# sourceMappingURL=menu-layout.gts.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"menu-layout.gts.d.ts","sourceRoot":"","sources":["../src/menu-layout.gts"],"names":[],"mappings":"AA8CA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,gCAAgC,CAAC;AAC1D,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAKpE,QAAA,MAAM,MAAM,EAAE,GAAG,CAAC;IAChB,IAAI,EAAE;QACJ,MAAM,EAAE,aAAa,CAAC;YAAE,MAAM,EAAE;gBAAE,OAAO,EAAE,EAAE,CAAA;aAAE,CAAA;SAAE,CAAC,CAAC;KACpD,CAAC;CACH,CAgBC,CAAC;AAEH,eAAO,MAAM,oBAAoB,EAAE,GAAG,CAAC;IACrC,MAAM,EAAE;QACN,OAAO,EAAE,EAAE,CAAC;QACZ,MAAM,EAAE,CAAC,MAAM,EAAE,aAAa,CAAC,OAAO,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC;KAC1D,CAAC;CACH,CAgDC,CAAC"}
|
|
@@ -1,18 +1,8 @@
|
|
|
1
1
|
import type { TOC } from '@ember/component/template-only';
|
|
2
|
-
import type { ComponentLike } from '@glint/template';
|
|
3
|
-
export declare const Layout: TOC<{
|
|
4
|
-
Blocks: {
|
|
5
|
-
nav: [options?: {
|
|
6
|
-
close: () => void;
|
|
7
|
-
}];
|
|
8
|
-
content: [];
|
|
9
|
-
header: [toggle: ComponentLike];
|
|
10
|
-
};
|
|
11
|
-
}>;
|
|
12
2
|
export declare const PageLayout: TOC<{
|
|
13
3
|
Blocks: {
|
|
14
|
-
|
|
15
|
-
|
|
4
|
+
logoLink: [];
|
|
5
|
+
topRight: [];
|
|
16
6
|
editLink: [typeof EditLink];
|
|
17
7
|
error: [error: string];
|
|
18
8
|
};
|
|
@@ -25,5 +15,10 @@ declare const EditLink: TOC<{
|
|
|
25
15
|
default: [];
|
|
26
16
|
};
|
|
27
17
|
}>;
|
|
18
|
+
export declare const TopRight: TOC<{
|
|
19
|
+
Blocks: {
|
|
20
|
+
default: [];
|
|
21
|
+
};
|
|
22
|
+
}>;
|
|
28
23
|
export {};
|
|
29
|
-
//# sourceMappingURL=
|
|
24
|
+
//# sourceMappingURL=page-layout.gts.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"page-layout.gts.d.ts","sourceRoot":"","sources":["../src/page-layout.gts"],"names":[],"mappings":"AAmJA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,gCAAgC,CAAC;AA4B1D,eAAO,MAAM,UAAU,EAAE,GAAG,CAAC;IAC3B,MAAM,EAAE;QACN,QAAQ,EAAE,EAAE,CAAC;QACb,QAAQ,EAAE,EAAE,CAAC;QACb,QAAQ,EAAE,CAAC,OAAO,QAAQ,CAAC,CAAC;QAC5B,KAAK,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;KACxB,CAAC;CACH,CAyGC,CAAC;AAEH,QAAA,MAAM,QAAQ,EAAE,GAAG,CAAC;IAAE,IAAI,EAAE;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IAAC,MAAM,EAAE;QAAE,OAAO,EAAE,EAAE,CAAA;KAAE,CAAA;CAAE,CAcrE,CAAC;AAEH,eAAO,MAAM,QAAQ,EAAE,GAAG,CAAC;IAAE,MAAM,EAAE;QAAE,OAAO,EAAE,EAAE,CAAA;KAAE,CAAA;CAAE,CAapD,CAAC"}
|
|
@@ -1,6 +1,18 @@
|
|
|
1
|
-
import type { TOC } from '@ember/component/template-only';
|
|
2
1
|
import 'ember-mobile-menu/themes/android';
|
|
3
|
-
|
|
2
|
+
/**
|
|
3
|
+
* NOTE: while this project uses tailwind,
|
|
4
|
+
* CSS is better than tailwind for
|
|
5
|
+
* - global styles
|
|
6
|
+
* - styling some recursive structures generated by other libraries.
|
|
7
|
+
*
|
|
8
|
+
* Using both together is *very nice* 🎉
|
|
9
|
+
*/
|
|
10
|
+
import './site-css/site.css';
|
|
11
|
+
import './site-css/components.css';
|
|
12
|
+
import './site-css/featured-demo.css';
|
|
13
|
+
import './site-css/shiki.css';
|
|
14
|
+
import './site-css/shell.css';
|
|
15
|
+
import type { TOC } from '@ember/component/template-only';
|
|
4
16
|
export declare const Shell: TOC<{
|
|
5
17
|
Blocks: {
|
|
6
18
|
default: [];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"shell.gts.d.ts","sourceRoot":"","sources":["../src/shell.gts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"shell.gts.d.ts","sourceRoot":"","sources":["../src/shell.gts"],"names":[],"mappings":"AAoCA,OAAO,kCAAkC,CAAC;AAE1C;;;;;;;GAOG;AACH,OAAO,qBAAqB,CAAC;AAC7B,OAAO,2BAA2B,CAAC;AACnC,OAAO,8BAA8B,CAAC;AACtC,OAAO,sBAAsB,CAAC;AAC9B,OAAO,sBAAsB,CAAC;AAE9B,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,gCAAgC,CAAC;AAI1D,eAAO,MAAM,KAAK,EAAE,GAAG,CAAC;IAAE,MAAM,EAAE;QAAE,OAAO,EAAE,EAAE,CAAA;KAAE,CAAA;CAAE,CAIjD,CAAC"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import Component from '@glimmer/component';
|
|
2
|
+
import type { DocsService } from 'kolay';
|
|
3
|
+
export declare class SideNav extends Component<{
|
|
4
|
+
Element: HTMLElement;
|
|
5
|
+
Args: {
|
|
6
|
+
onClick?: () => void;
|
|
7
|
+
};
|
|
8
|
+
}> {
|
|
9
|
+
docs: DocsService;
|
|
10
|
+
get humanSelected(): string | undefined;
|
|
11
|
+
closeNav: (event: Event) => void;
|
|
12
|
+
}
|
|
13
|
+
//# sourceMappingURL=side-nav.gts.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"side-nav.gts.d.ts","sourceRoot":"","sources":["../src/side-nav.gts"],"names":[],"mappings":"AAyKA,OAAO,SAAS,MAAM,oBAAoB,CAAC;AAU3C,OAAO,KAAK,EAAE,WAAW,EAAQ,MAAM,OAAO,CAAC;AAuG/C,qBAAa,OAAQ,SAAQ,SAAS,CAAC;IACrC,OAAO,EAAE,WAAW,CAAC;IACrB,IAAI,EAAE;QACJ,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;KACtB,CAAC;CACH,CAAC;IAC+B,IAAI,EAAE,WAAW,CAAC;IAEjD,IAAI,aAAa,uBAMhB;IAED,QAAQ,UAAW,KAAK,UAItB;CAqDH"}
|
|
@@ -1,2 +1,3 @@
|
|
|
1
|
+
import './theme-toggle.css';
|
|
1
2
|
export declare const ThemeToggle: import("@ember/component/template-only").TemplateOnlyComponent<never> & (abstract new () => import("@glint/template/-private/integration").InvokableInstance<() => import("@glint/template/-private/integration").ComponentReturn<{}>> & import("@glint/template/-private/integration").HasContext<import("@glint/template/-private/integration").TemplateContext<void, {}, {}, void>>);
|
|
2
3
|
//# sourceMappingURL=theme-toggle.gts.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"theme-toggle.gts.d.ts","sourceRoot":"","sources":["../src/theme-toggle.gts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"theme-toggle.gts.d.ts","sourceRoot":"","sources":["../src/theme-toggle.gts"],"names":[],"mappings":"AAoCA,OAAO,oBAAoB,CAAC;AAqB5B,eAAO,MAAM,WAAW,yXAoDtB,CAAC"}
|
package/dist/article.js
ADDED
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import { precompileTemplate } from '@ember/template-compilation';
|
|
2
|
+
import { setComponentTemplate } from '@ember/component';
|
|
3
|
+
import templateOnly from '@ember/component/template-only';
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* TODO: use CSS, this is silly.
|
|
7
|
+
*/
|
|
8
|
+
const proseClasses = `
|
|
9
|
+
prose prose-slate max-w-none
|
|
10
|
+
dark:prose-invert dark:text-slate-400
|
|
11
|
+
prose-th:table-cell
|
|
12
|
+
prose-headings:inline-block
|
|
13
|
+
prose-headings:scroll-mt-28
|
|
14
|
+
prose-headings:font-display
|
|
15
|
+
prose-headings:font-normal
|
|
16
|
+
lg:prose-headings:scroll-mt-[8.5rem]
|
|
17
|
+
prose-h1:text-3xl
|
|
18
|
+
|
|
19
|
+
prose-lead:text-slate-500
|
|
20
|
+
dark:prose-lead:text-slate-400
|
|
21
|
+
|
|
22
|
+
prose-a:font-semibold
|
|
23
|
+
dark:prose-a:text-sky-400
|
|
24
|
+
prose-a:no-underline
|
|
25
|
+
prose-a:shadow-[inset_0_-2px_0_0_var(--tw-prose-background,#fff),inset_0_calc(-1*(var(--tw-prose-underline-size,2px)+2px))_0_0_var(--tw-prose-underline,theme(colors.sky.300))]
|
|
26
|
+
hover:prose-a:[--tw-prose-underline-size:3px]
|
|
27
|
+
dark:[--tw-prose-background:theme(colors.slate.900)]
|
|
28
|
+
dark:prose-a:shadow-[inset_0_calc(-1*var(--tw-prose-underline-size,2px))_0_0_var(--tw-prose-underline,theme(colors.sky.800))]
|
|
29
|
+
dark:hover:prose-a:[--tw-prose-underline-size:6px]
|
|
30
|
+
prose-pre:rounded-xl prose-pre:bg-slate-900
|
|
31
|
+
prose-pre:shadow-lg
|
|
32
|
+
dark:prose-pre:bg-slate-800/60
|
|
33
|
+
dark:prose-pre:shadow-none
|
|
34
|
+
dark:prose-pre:ring-1
|
|
35
|
+
dark:prose-pre:ring-slate-300/10
|
|
36
|
+
dark:prose-hr:border-slate-800
|
|
37
|
+
dark:prose-code:text-slate-50
|
|
38
|
+
`;
|
|
39
|
+
const Article = setComponentTemplate(precompileTemplate("\n <article class={{proseClasses}} ...attributes>\n {{yield}}\n </article>\n", {
|
|
40
|
+
strictMode: true,
|
|
41
|
+
scope: () => ({
|
|
42
|
+
proseClasses
|
|
43
|
+
})
|
|
44
|
+
}), templateOnly());
|
|
45
|
+
|
|
46
|
+
export { Article };
|
|
47
|
+
//# sourceMappingURL=article.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"article.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/dist/callout.js
ADDED
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { LightBulb } from './icons.js';
|
|
2
|
+
import { precompileTemplate } from '@ember/template-compilation';
|
|
3
|
+
import { setComponentTemplate } from '@ember/component';
|
|
4
|
+
import templateOnly from '@ember/component/template-only';
|
|
5
|
+
|
|
6
|
+
const Callout = setComponentTemplate(precompileTemplate("\n <div class=\"flex p-6 my-8 rounded-3xl bg-sky-50 dark:bg-slate-800/60 dark:ring-1 dark:ring-slate-300/10\">\n <LightBulb class=\"flex-none w-8 h-8\" />\n <div class=\"flex-auto min-w-0 ml-4\">\n <div class=\"text-sky-800 [--tw-prose-background:theme(colors.sky.50)] prose-a:text-sky-900 dark:text-slate-50 [&>*:first-child]:mt-0 [&>*:last-child]:mb-0\">\n {{yield}}\n </div>\n </div>\n </div>\n", {
|
|
7
|
+
strictMode: true,
|
|
8
|
+
scope: () => ({
|
|
9
|
+
LightBulb
|
|
10
|
+
})
|
|
11
|
+
}), templateOnly());
|
|
12
|
+
|
|
13
|
+
export { Callout };
|
|
14
|
+
//# sourceMappingURL=callout.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"callout.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;"}
|
package/dist/errors.js
ADDED
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { precompileTemplate } from '@ember/template-compilation';
|
|
2
|
+
import { setComponentTemplate } from '@ember/component';
|
|
3
|
+
import templateOnly from '@ember/component/template-only';
|
|
4
|
+
|
|
5
|
+
const OopsError = setComponentTemplate(precompileTemplate("\n <div data-page-error class=\"dark:text-white text:slate-900\" style=\"border: 1px solid red; padding: 1rem; word-break: break-all;\">\n <h1>Oops!</h1><br />\n {{@error}}\n\n <br />\n <br />\n {{yield}}\n </div>\n", {
|
|
6
|
+
strictMode: true
|
|
7
|
+
}), templateOnly());
|
|
8
|
+
|
|
9
|
+
export { OopsError };
|
|
10
|
+
//# sourceMappingURL=errors.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"errors.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}
|
package/dist/h2.js
ADDED
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { precompileTemplate } from '@ember/template-compilation';
|
|
2
|
+
import { setComponentTemplate } from '@ember/component';
|
|
3
|
+
import templateOnly from '@ember/component/template-only';
|
|
4
|
+
|
|
5
|
+
const H2 = setComponentTemplate(precompileTemplate("\n <h2 class=\"text-3xl\">{{yield}}</h2>\n", {
|
|
6
|
+
strictMode: true
|
|
7
|
+
}), templateOnly());
|
|
8
|
+
|
|
9
|
+
export { H2 };
|
|
10
|
+
//# sourceMappingURL=h2.js.map
|
package/dist/h2.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"h2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}
|
package/dist/icons.js
ADDED
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import { precompileTemplate } from '@ember/template-compilation';
|
|
2
|
+
import { setComponentTemplate } from '@ember/component';
|
|
3
|
+
import templateOnly from '@ember/component/template-only';
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* Copied from font-awesome directly,
|
|
7
|
+
* but with the addition of fill="currentColor"
|
|
8
|
+
*
|
|
9
|
+
* Font Awesome Free 6.6.0 by @fontawesome
|
|
10
|
+
* - https://fontawesome.com License
|
|
11
|
+
* - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.
|
|
12
|
+
*/
|
|
13
|
+
const XTwitter = setComponentTemplate(precompileTemplate("\n <svg aria-hidden=\"true\" ...attributes>\n <use xlink:href=\"#social-xtwitter\" />\n </svg>\n", {
|
|
14
|
+
strictMode: true
|
|
15
|
+
}), templateOnly());
|
|
16
|
+
const Discord = setComponentTemplate(precompileTemplate("\n <svg aria-hidden=\"true\" ...attributes>\n <use xlink:href=\"#social-discord\" />\n </svg>\n", {
|
|
17
|
+
strictMode: true
|
|
18
|
+
}), templateOnly());
|
|
19
|
+
const Threads = setComponentTemplate(precompileTemplate("\n <svg aria-hidden=\"true\" ...attributes>\n <use xlink:href=\"#social-threads\" />\n </svg>\n", {
|
|
20
|
+
strictMode: true
|
|
21
|
+
}), templateOnly());
|
|
22
|
+
const BlueSky = setComponentTemplate(precompileTemplate("\n <svg aria-hidden=\"true\" ...attributes>\n <use xlink:href=\"#social-bluesky\" />\n </svg>\n", {
|
|
23
|
+
strictMode: true
|
|
24
|
+
}), templateOnly());
|
|
25
|
+
const Mastodon = setComponentTemplate(precompileTemplate("\n <svg aria-hidden=\"true\" ...attributes>\n <use xlink:href=\"#social-mastodon\" />\n </svg>\n", {
|
|
26
|
+
strictMode: true
|
|
27
|
+
}), templateOnly());
|
|
28
|
+
const GitHub = setComponentTemplate(precompileTemplate("\n <svg aria-hidden=\"true\" ...attributes>\n <use xlink:href=\"#social-github\" />\n </svg>\n", {
|
|
29
|
+
strictMode: true
|
|
30
|
+
}), templateOnly());
|
|
31
|
+
const Flask = setComponentTemplate(precompileTemplate("\n <svg fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\" height=\"1em\" viewBox=\"0 0 448 512\" ...attributes>{{!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --}}<path d=\"M288 0H160 128C110.3 0 96 14.3 96 32s14.3 32 32 32V196.8c0 11.8-3.3 23.5-9.5 33.5L10.3 406.2C3.6 417.2 0 429.7 0 442.6C0 480.9 31.1 512 69.4 512H378.6c38.3 0 69.4-31.1 69.4-69.4c0-12.8-3.6-25.4-10.3-36.4L329.5 230.4c-6.2-10.1-9.5-21.7-9.5-33.5V64c17.7 0 32-14.3 32-32s-14.3-32-32-32H288zM192 196.8V64h64V196.8c0 23.7 6.6 46.9 19 67.1L309.5 320h-171L173 263.9c12.4-20.2 19-43.4 19-67.1z\" /></svg>\n", {
|
|
32
|
+
strictMode: true
|
|
33
|
+
}), templateOnly());
|
|
34
|
+
const Menu = setComponentTemplate(precompileTemplate("\n <svg aria-hidden=\"true\" viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" ...attributes>\n <path d=\"M4 7h16M4 12h16M4 17h16\" />\n </svg>\n", {
|
|
35
|
+
strictMode: true
|
|
36
|
+
}), templateOnly());
|
|
37
|
+
const Sun = setComponentTemplate(precompileTemplate("\n <svg aria-hidden=\"true\" viewBox=\"0 0 16 16\" ...attributes>\n <path fillRule=\"evenodd\" clipRule=\"evenodd\" d=\"M7 1a1 1 0 0 1 2 0v1a1 1 0 1 1-2 0V1Zm4 7a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm2.657-5.657a1 1 0 0 0-1.414 0l-.707.707a1 1 0 0 0 1.414 1.414l.707-.707a1 1 0 0 0 0-1.414Zm-1.415 11.313-.707-.707a1 1 0 0 1 1.415-1.415l.707.708a1 1 0 0 1-1.415 1.414ZM16 7.999a1 1 0 0 0-1-1h-1a1 1 0 1 0 0 2h1a1 1 0 0 0 1-1ZM7 14a1 1 0 1 1 2 0v1a1 1 0 1 1-2 0v-1Zm-2.536-2.464a1 1 0 0 0-1.414 0l-.707.707a1 1 0 0 0 1.414 1.414l.707-.707a1 1 0 0 0 0-1.414Zm0-8.486A1 1 0 0 1 3.05 4.464l-.707-.707a1 1 0 0 1 1.414-1.414l.707.707ZM3 8a1 1 0 0 0-1-1H1a1 1 0 0 0 0 2h1a1 1 0 0 0 1-1Z\" />\n </svg>\n", {
|
|
38
|
+
strictMode: true
|
|
39
|
+
}), templateOnly());
|
|
40
|
+
const Moon = setComponentTemplate(precompileTemplate("\n <svg aria-hidden=\"true\" viewBox=\"0 0 16 16\" ...attributes>\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M7.23 3.333C7.757 2.905 7.68 2 7 2a6 6 0 1 0 0 12c.68 0 .758-.905.23-1.332A5.989 5.989 0 0 1 5 8c0-1.885.87-3.568 2.23-4.668ZM12 5a1 1 0 0 1 1 1 1 1 0 0 0 1 1 1 1 0 1 1 0 2 1 1 0 0 0-1 1 1 1 0 1 1-2 0 1 1 0 0 0-1-1 1 1 0 1 1 0-2 1 1 0 0 0 1-1 1 1 0 0 1 1-1Z\" />\n </svg>\n", {
|
|
41
|
+
strictMode: true
|
|
42
|
+
}), templateOnly());
|
|
43
|
+
const LightBulb = setComponentTemplate(precompileTemplate("\n <svg aria-hidden=\"true\" viewBox=\"0 0 32 32\" fill=\"none\" class=\"[--icon-foreground:theme(colors.slate.900)] [--icon-background:theme(colors.white)]\" ...attributes>\n <defs>\n <radialGradient cx=\"0\" cy=\"0\" r=\"1\" gradientUnits=\"userSpaceOnUse\" id=\":S6:-gradient\" gradientTransform=\"matrix(0 21 -21 0 20 11)\">\n <stop stop-color=\"#0EA5E9\"></stop><stop stop-color=\"#22D3EE\" offset=\".527\"></stop>\n <stop stop-color=\"#818CF8\" offset=\"1\"></stop>\n </radialGradient>\n <radialGradient cx=\"0\" cy=\"0\" r=\"1\" gradientUnits=\"userSpaceOnUse\" id=\":S6:-gradient-dark\" gradientTransform=\"matrix(0 24.5001 -19.2498 0 16 5.5)\">\n <stop stop-color=\"#0EA5E9\"></stop><stop stop-color=\"#22D3EE\" offset=\".527\"></stop>\n <stop stop-color=\"#818CF8\" offset=\"1\"></stop>\n </radialGradient></defs>\n <g class=\"dark:hidden\">\n <circle cx=\"20\" cy=\"20\" r=\"12\" fill=\"url(#:S6:-gradient)\"></circle>\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M20 24.995c0-1.855 1.094-3.501 2.427-4.792C24.61 18.087 26 15.07 26 12.231 26 7.133 21.523 3 16 3S6 7.133 6 12.23c0 2.84 1.389 5.857 3.573 7.973C10.906 21.494 12 23.14 12 24.995V27a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2v-2.005Z\" class=\"fill-[var(--icon-background)]\" fill-opacity=\"0.5\"></path>\n <path d=\"M25 12.23c0 2.536-1.254 5.303-3.269 7.255l1.391 1.436c2.354-2.28 3.878-5.547 3.878-8.69h-2ZM16 4c5.047 0 9 3.759 9 8.23h2C27 6.508 21.998 2 16 2v2Zm-9 8.23C7 7.76 10.953 4 16 4V2C10.002 2 5 6.507 5 12.23h2Zm3.269 7.255C8.254 17.533 7 14.766 7 12.23H5c0 3.143 1.523 6.41 3.877 8.69l1.392-1.436ZM13 27v-2.005h-2V27h2Zm1 1a1 1 0 0 1-1-1h-2a3 3 0 0 0 3 3v-2Zm4 0h-4v2h4v-2Zm1-1a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2Zm0-2.005V27h2v-2.005h-2ZM8.877 20.921C10.132 22.136 11 23.538 11 24.995h2c0-2.253-1.32-4.143-2.731-5.51L8.877 20.92Zm12.854-1.436C20.32 20.852 19 22.742 19 24.995h2c0-1.457.869-2.859 2.122-4.074l-1.391-1.436Z\" class=\"fill-[var(--icon-foreground)]\"></path>\n <path d=\"M20 26a1 1 0 1 0 0-2v2Zm-8-2a1 1 0 1 0 0 2v-2Zm2 0h-2v2h2v-2Zm1 1V13.5h-2V25h2Zm-5-11.5v1h2v-1h-2Zm3.5 4.5h5v-2h-5v2Zm8.5-3.5v-1h-2v1h2ZM20 24h-2v2h2v-2Zm-2 0h-4v2h4v-2Zm-1-10.5V25h2V13.5h-2Zm2.5-2.5a2.5 2.5 0 0 0-2.5 2.5h2a.5.5 0 0 1 .5-.5v-2Zm2.5 2.5a2.5 2.5 0 0 0-2.5-2.5v2a.5.5 0 0 1 .5.5h2ZM18.5 18a3.5 3.5 0 0 0 3.5-3.5h-2a1.5 1.5 0 0 1-1.5 1.5v2ZM10 14.5a3.5 3.5 0 0 0 3.5 3.5v-2a1.5 1.5 0 0 1-1.5-1.5h-2Zm2.5-3.5a2.5 2.5 0 0 0-2.5 2.5h2a.5.5 0 0 1 .5-.5v-2Zm2.5 2.5a2.5 2.5 0 0 0-2.5-2.5v2a.5.5 0 0 1 .5.5h2Z\" class=\"fill-[var(--icon-foreground)]\"></path>\n </g>\n <g class=\"hidden dark:inline\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M16 2C10.002 2 5 6.507 5 12.23c0 3.144 1.523 6.411 3.877 8.691.75.727 1.363 1.52 1.734 2.353.185.415.574.726 1.028.726H12a1 1 0 0 0 1-1v-4.5a.5.5 0 0 0-.5-.5A3.5 3.5 0 0 1 9 14.5V14a3 3 0 1 1 6 0v9a1 1 0 1 0 2 0v-9a3 3 0 1 1 6 0v.5a3.5 3.5 0 0 1-3.5 3.5.5.5 0 0 0-.5.5V23a1 1 0 0 0 1 1h.36c.455 0 .844-.311 1.03-.726.37-.833.982-1.626 1.732-2.353 2.354-2.28 3.878-5.547 3.878-8.69C27 6.507 21.998 2 16 2Zm5 25a1 1 0 0 0-1-1h-8a1 1 0 0 0-1 1 3 3 0 0 0 3 3h4a3 3 0 0 0 3-3Zm-8-13v1.5a.5.5 0 0 1-.5.5 1.5 1.5 0 0 1-1.5-1.5V14a1 1 0 1 1 2 0Zm6.5 2a.5.5 0 0 1-.5-.5V14a1 1 0 1 1 2 0v.5a1.5 1.5 0 0 1-1.5 1.5Z\" fill=\"url(#:S6:-gradient-dark)\"></path>\n </g>\n </svg>\n", {
|
|
44
|
+
strictMode: true
|
|
45
|
+
}), templateOnly());
|
|
46
|
+
|
|
47
|
+
export { BlueSky, Discord, Flask, GitHub, LightBulb, Mastodon, Menu, Moon, Sun, Threads, XTwitter };
|
|
48
|
+
//# sourceMappingURL=icons.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"icons.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
.gradient-background {
|
|
2
|
+
background-image: linear-gradient(-45deg in oklch, #1252e3, #485de5, #7812e5, #3512c5);
|
|
3
|
+
background-size: 400% 400%;
|
|
4
|
+
animation: gradient-animation 16s ease infinite;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
body.dark .gradient-background {
|
|
8
|
+
background-image: linear-gradient(-45deg in oklch, #110043, #182d75, #280065, #350076);
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
@keyframes gradient-animation {
|
|
12
|
+
0% {
|
|
13
|
+
background-position: 0% 50%;
|
|
14
|
+
}
|
|
15
|
+
50% {
|
|
16
|
+
background-position: 100% 50%;
|
|
17
|
+
}
|
|
18
|
+
100% {
|
|
19
|
+
background-position: 0% 50%;
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { Hero } from 'ember-primitives/layout/hero';
|
|
2
|
+
import './index-page.css';
|
|
3
|
+
import { precompileTemplate } from '@ember/template-compilation';
|
|
4
|
+
import { setComponentTemplate } from '@ember/component';
|
|
5
|
+
import templateOnly from '@ember/component/template-only';
|
|
6
|
+
|
|
7
|
+
const IndexPage = setComponentTemplate(precompileTemplate("\n <Hero class=\"shadow-xl shadow-slate-900/5 gradient-background\">\n <header class=\"absolute md:sticky right-0 bottom-0 md:top-0 z-50 p-4 flex items-center\">\n {{yield to=\"header\"}}\n </header>\n\n <div class=\"h-full flex flex-col gap-8 justify-center items-center\">\n <div style=\"width: 66%; margin: 0 auto; transform: translateY(-20%);\" class=\"grid gap-4\">\n <h1 style=\"filter: drop-shadow(3px 5px 0px rgba(0, 0, 0, 0.4));\">\n {{yield to=\"logo\"}}\n </h1>\n <p class=\"italic text-white w-full md:w-1/2 mx-auto\">\n {{yield to=\"tagline\"}}\n </p>\n </div>\n {{yield to=\"callToAction\"}}\n </div>\n </Hero>\n\n {{yield to=\"content\"}}\n\n <hr />\n <footer style=\"padding: 3rem; width: 66%;\" class=\"mx-auto gap-12 flex-wrap flex justify-between\">\n {{yield to=\"footer\"}}\n </footer>\n", {
|
|
8
|
+
strictMode: true,
|
|
9
|
+
scope: () => ({
|
|
10
|
+
Hero
|
|
11
|
+
})
|
|
12
|
+
}), templateOnly());
|
|
13
|
+
|
|
14
|
+
export { IndexPage };
|
|
15
|
+
//# sourceMappingURL=index-page.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index-page.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;"}
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
export { H2 } from './h2.js';
|
|
2
|
+
export { Callout } from './callout.js';
|
|
3
|
+
export { Text } from './text.js';
|
|
4
|
+
export { Article } from './article.js';
|
|
5
|
+
export { Shell } from './shell.js';
|
|
6
|
+
export { IndexPage } from './index-page.js';
|
|
7
|
+
export { InternalLink, Link } from './links.js';
|
|
8
|
+
export { OopsError } from './errors.js';
|
|
9
|
+
export { ResponsiveMenuLayout } from './menu-layout.js';
|
|
10
|
+
export { PageLayout, TopRight } from './page-layout.js';
|
|
11
|
+
export { ThemeToggle } from './theme-toggle.js';
|
|
12
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}
|
package/dist/links.js
ADDED
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { ExternalLink } from 'ember-primitives/components/external-link';
|
|
2
|
+
import { precompileTemplate } from '@ember/template-compilation';
|
|
3
|
+
import { setComponentTemplate } from '@ember/component';
|
|
4
|
+
import templateOnly from '@ember/component/template-only';
|
|
5
|
+
|
|
6
|
+
const linkClasses = `
|
|
7
|
+
text-sm font-semibold
|
|
8
|
+
dark:text-sky-400
|
|
9
|
+
no-underline shadow-[inset_0_-2px_0_0_var(--tw-prose-background,#fff),inset_0_calc(-1*(var(--tw-prose-underline-size,4px)+2px))_0_0_var(--tw-prose-underline,theme(colors.sky.300))]
|
|
10
|
+
hover:[--tw-prose-underline-size:6px]
|
|
11
|
+
dark:[--tw-prose-background:theme(colors.slate.900)]
|
|
12
|
+
dark:shadow-[inset_0_calc(-1*var(--tw-prose-underline-size,2px))_0_0_var(--tw-prose-underline,theme(colors.sky.800))]
|
|
13
|
+
dark:hover:[--tw-prose-underline-size:6px]
|
|
14
|
+
`;
|
|
15
|
+
const InternalLink = setComponentTemplate(precompileTemplate("\n <a class={{linkClasses}} href=\"#\" ...attributes>\n {{yield}}\n </a>\n", {
|
|
16
|
+
strictMode: true,
|
|
17
|
+
scope: () => ({
|
|
18
|
+
linkClasses
|
|
19
|
+
})
|
|
20
|
+
}), templateOnly());
|
|
21
|
+
const Link = setComponentTemplate(precompileTemplate("\n <ExternalLink class={{linkClasses}} ...attributes>\n {{yield}}\n </ExternalLink>\n", {
|
|
22
|
+
strictMode: true,
|
|
23
|
+
scope: () => ({
|
|
24
|
+
ExternalLink,
|
|
25
|
+
linkClasses
|
|
26
|
+
})
|
|
27
|
+
}), templateOnly());
|
|
28
|
+
|
|
29
|
+
export { InternalLink, Link };
|
|
30
|
+
//# sourceMappingURL=links.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"links.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import MenuWrapper from 'ember-mobile-menu/components/mobile-menu-wrapper';
|
|
2
|
+
import { Menu } from './icons.js';
|
|
3
|
+
import { SideNav } from './side-nav.js';
|
|
4
|
+
import { precompileTemplate } from '@ember/template-compilation';
|
|
5
|
+
import { setComponentTemplate } from '@ember/component';
|
|
6
|
+
import templateOnly from '@ember/component/template-only';
|
|
7
|
+
|
|
8
|
+
// @ts-expect-error - no types are provided for ember-mobile-menu
|
|
9
|
+
|
|
10
|
+
const Toggle = setComponentTemplate(precompileTemplate("\n <@toggle>\n <Menu class=\"w-6 h-6 stroke-slate-500\" />\n </@toggle>\n", {
|
|
11
|
+
strictMode: true,
|
|
12
|
+
scope: () => ({
|
|
13
|
+
Menu
|
|
14
|
+
})
|
|
15
|
+
}), templateOnly());
|
|
16
|
+
const ResponsiveMenuLayout = setComponentTemplate(precompileTemplate("\n <MenuWrapper as |mmw|>\n <mmw.MobileMenu @mode=\"push\" @maxWidth={{300}} as |mm|>\n <SideNav @onClick={{mm.actions.close}} />\n </mmw.MobileMenu>\n\n <mmw.Content>\n {{yield (component Toggle toggle=mmw.Toggle) to=\"header\"}}\n\n <div class=\"outer-content\">\n <SideNav />\n\n <main class=\"relative grid justify-center flex-auto w-full mx-auto max-w-8xl\">\n {{yield to=\"content\"}}\n </main>\n </div>\n </mmw.Content>\n </MenuWrapper>\n", {
|
|
17
|
+
strictMode: true,
|
|
18
|
+
scope: () => ({
|
|
19
|
+
MenuWrapper,
|
|
20
|
+
SideNav,
|
|
21
|
+
Toggle
|
|
22
|
+
})
|
|
23
|
+
}), templateOnly());
|
|
24
|
+
|
|
25
|
+
export { ResponsiveMenuLayout };
|
|
26
|
+
//# sourceMappingURL=menu-layout.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"menu-layout.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
import { cell } from 'ember-resources';
|
|
2
|
+
import { modifier } from 'ember-modifier';
|
|
3
|
+
import { Page } from 'kolay/components';
|
|
4
|
+
import { ResponsiveMenuLayout } from './menu-layout.js';
|
|
5
|
+
import { Link } from './links.js';
|
|
6
|
+
import { Article } from './article.js';
|
|
7
|
+
import { ThemeToggle } from './theme-toggle.js';
|
|
8
|
+
import { precompileTemplate } from '@ember/template-compilation';
|
|
9
|
+
import { setComponentTemplate } from '@ember/component';
|
|
10
|
+
import templateOnly from '@ember/component/template-only';
|
|
11
|
+
|
|
12
|
+
function removeLoader() {
|
|
13
|
+
document.querySelector('#initial-loader')?.remove();
|
|
14
|
+
}
|
|
15
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
16
|
+
function resetScroll(..._args) {
|
|
17
|
+
document.querySelector('html')?.scrollTo(0, 0);
|
|
18
|
+
}
|
|
19
|
+
const isScrolled = cell(false);
|
|
20
|
+
const onWindowScroll = modifier(() => {
|
|
21
|
+
function onScroll() {
|
|
22
|
+
isScrolled.current = window.scrollY > 0;
|
|
23
|
+
}
|
|
24
|
+
onScroll();
|
|
25
|
+
window.addEventListener('scroll', onScroll, {
|
|
26
|
+
passive: true
|
|
27
|
+
});
|
|
28
|
+
return () => {
|
|
29
|
+
window.removeEventListener('scroll', onScroll);
|
|
30
|
+
};
|
|
31
|
+
});
|
|
32
|
+
const PageLayout = setComponentTemplate(precompileTemplate("\n <ResponsiveMenuLayout>\n <:header as |Toggle|>\n <header class=\"sticky top-0 z-50 transition duration-500 shadow-md shadow-slate-900/5 dark:shadow-none bg-white/95\n {{if isScrolled.current \"dark:bg-slate-900/95 dark:backdrop-blur dark:[@supports(backdrop-filter:blur(0))]:bg-slate-900/75\" \"dark:bg-slate-900/95\"}}\" {{onWindowScroll}}>\n <div class=\"outer-content flex flex-none flex-wrap items-center justify-between py-4\">\n <div class=\"flex mr-6 lg:hidden\">\n <Toggle />\n </div>\n <div class=\"relative flex items-center flex-grow basis-0\">\n <a href=\"/\" aria-label=\"Home page\">\n {{yield to=\"logoLink\"}}\n </a>\n </div>\n {{!--\n If we ever have a search bar\n <div class=\"mr-6 -my-5 sm:mr-8 md:mr-0\">\n input here\n </div>\n --}}\n <TopRight>\n {{yield to=\"topRight\"}}\n </TopRight>\n </div>\n </header>\n </:header>\n <:content>\n <section data-main-scroll-container class=\"flex-auto max-w-2xl min-w-0 py-4 lg:max-w-none\">\n <Article>\n <Page>\n {{!-- TODO: we need a pending state here\n right now this is ignored, because the :pending\n block doesn't exist.\n --}}\n {{!-- -- <:pending>\n <div class=\"h-full w-full\"></div>\n </:pending>\n --}}\n\n <:error as |error|>\n <section>\n {{yield error to=\"error\"}}\n </section>\n </:error>\n\n <:success as |prose|>\n <prose />\n {{(removeLoader)}}\n {{!-- this is probably really bad, and anti-patterny\n but ember doesn't have a good way to have libraries\n tie in to the URL without a bunch of setup -- which is maybe fine?\n needs some experimenting -- there is a bit of a disconnect with\n deriving data from the URL, and the timing of the model hooks.\n It might be possible to have an afterModel hook wait until the page is\n compiled.\n (that's why we have async state, because we're compiling, not loading)\n --}}\n {{resetScroll prose}}\n </:success>\n </Page>\n </Article>\n\n {{#if (has-block \"editLink\")}}\n\n <div class=\"flex justify-end pt-6 mt-12 border-t border-slate-200 dark:border-slate-800\">\n\n {{yield EditLink to=\"editLink\"}}\n </div>\n {{/if}}\n </section>\n </:content>\n\n </ResponsiveMenuLayout>\n", {
|
|
33
|
+
strictMode: true,
|
|
34
|
+
scope: () => ({
|
|
35
|
+
ResponsiveMenuLayout,
|
|
36
|
+
isScrolled,
|
|
37
|
+
onWindowScroll,
|
|
38
|
+
TopRight,
|
|
39
|
+
Article,
|
|
40
|
+
Page,
|
|
41
|
+
removeLoader,
|
|
42
|
+
resetScroll,
|
|
43
|
+
EditLink
|
|
44
|
+
})
|
|
45
|
+
}), templateOnly());
|
|
46
|
+
const EditLink = setComponentTemplate(precompileTemplate("\n <Link class=\"edit-page flex\" href={{@href}}>\n {{yield}}\n </Link>\n", {
|
|
47
|
+
strictMode: true,
|
|
48
|
+
scope: () => ({
|
|
49
|
+
Link
|
|
50
|
+
})
|
|
51
|
+
}), templateOnly());
|
|
52
|
+
const TopRight = setComponentTemplate(precompileTemplate("\n <div class=\"relative flex justify-end gap-6 basis-0 sm:gap-8 md:flex-grow\">\n <ThemeToggle />\n {{yield}}\n </div>\n", {
|
|
53
|
+
strictMode: true,
|
|
54
|
+
scope: () => ({
|
|
55
|
+
ThemeToggle
|
|
56
|
+
})
|
|
57
|
+
}), templateOnly());
|
|
58
|
+
|
|
59
|
+
export { PageLayout, TopRight };
|
|
60
|
+
//# sourceMappingURL=page-layout.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"page-layout.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/dist/shell.js
ADDED
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import 'ember-mobile-menu/themes/android';
|
|
2
|
+
import './site-css/site.css';
|
|
3
|
+
import './site-css/components.css';
|
|
4
|
+
import './site-css/featured-demo.css';
|
|
5
|
+
import './site-css/shiki.css';
|
|
6
|
+
import './site-css/shell.css';
|
|
7
|
+
import { colorScheme } from 'ember-primitives/color-scheme';
|
|
8
|
+
import { precompileTemplate } from '@ember/template-compilation';
|
|
9
|
+
import { setComponentTemplate } from '@ember/component';
|
|
10
|
+
import templateOnly from '@ember/component/template-only';
|
|
11
|
+
|
|
12
|
+
const Shell = setComponentTemplate(precompileTemplate("\n {{(syncBodyClass)}}\n {{yield}}\n", {
|
|
13
|
+
strictMode: true,
|
|
14
|
+
scope: () => ({
|
|
15
|
+
syncBodyClass
|
|
16
|
+
})
|
|
17
|
+
}), templateOnly());
|
|
18
|
+
function isDark() {
|
|
19
|
+
return colorScheme.current === 'dark';
|
|
20
|
+
}
|
|
21
|
+
function syncBodyClass() {
|
|
22
|
+
if (isDark()) {
|
|
23
|
+
document.body.classList.add('dark');
|
|
24
|
+
} else {
|
|
25
|
+
document.body.classList.remove('dark');
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
export { Shell };
|
|
30
|
+
//# sourceMappingURL=shell.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"shell.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/dist/side-nav.js
ADDED
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
import Component from '@glimmer/component';
|
|
2
|
+
import { on } from '@ember/modifier';
|
|
3
|
+
import { service } from '@ember/service';
|
|
4
|
+
import { sentenceCase } from 'change-case';
|
|
5
|
+
import { link } from 'ember-primitives/helpers';
|
|
6
|
+
import { PageNav } from 'kolay/components';
|
|
7
|
+
import { getAnchor } from 'should-handle-link';
|
|
8
|
+
import { precompileTemplate } from '@ember/template-compilation';
|
|
9
|
+
import { setComponentTemplate } from '@ember/component';
|
|
10
|
+
import templateOnly from '@ember/component/template-only';
|
|
11
|
+
import { g, i } from 'decorator-transforms/runtime';
|
|
12
|
+
|
|
13
|
+
function fixWords(text) {
|
|
14
|
+
switch (text.toLowerCase()) {
|
|
15
|
+
case 'ui':
|
|
16
|
+
return 'UI';
|
|
17
|
+
case 'iframe':
|
|
18
|
+
return 'IFrame';
|
|
19
|
+
default:
|
|
20
|
+
return text;
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
/**
|
|
24
|
+
* Converts 1-2-hyphenated-thing
|
|
25
|
+
* to
|
|
26
|
+
* Hyphenated Thing
|
|
27
|
+
*/
|
|
28
|
+
const titleize = str => {
|
|
29
|
+
return str.split(/-|\s/).filter(Boolean).filter(text => !text.match(/^[\d]+$/)).map(text => `${text[0]?.toLocaleUpperCase()}${text.slice(1, text.length)}`).map(text => fixWords(text)).join(' ').split('.')[0] || '';
|
|
30
|
+
};
|
|
31
|
+
function nameFor(x) {
|
|
32
|
+
if ('componentName' in x) {
|
|
33
|
+
return `${x.componentName}`;
|
|
34
|
+
}
|
|
35
|
+
let page = x;
|
|
36
|
+
return page.title ? page.title : sentenceCase(page.name);
|
|
37
|
+
}
|
|
38
|
+
const asComponent = str => {
|
|
39
|
+
return `<${str.split('.')[0]?.replaceAll(' ', '')} />`;
|
|
40
|
+
};
|
|
41
|
+
const isComponents = str => str === 'components';
|
|
42
|
+
const SectionLink = setComponentTemplate(precompileTemplate("\n {{#let (link @href) as |l|}}\n <a href={{@href}} class=\"font-medium font-display\n {{if l.isActive \"text-sky-500\" \"text-slate-900 hover:text-slate-600 dark:text-white dark:hover:text-slate-300\"}}\" {{on \"click\" l.handleClick}} ...attributes>\n {{#if (isComponents @name)}}\n {{asComponent (titleize @name)}}\n {{else}}\n {{titleize @name}}\n {{/if}}\n </a>\n {{/let}}\n ", {
|
|
43
|
+
strictMode: true,
|
|
44
|
+
scope: () => ({
|
|
45
|
+
link,
|
|
46
|
+
on,
|
|
47
|
+
isComponents,
|
|
48
|
+
asComponent,
|
|
49
|
+
titleize
|
|
50
|
+
})
|
|
51
|
+
}), templateOnly());
|
|
52
|
+
const SubSectionLink = setComponentTemplate(precompileTemplate("\n {{#let (link @href) as |l|}}\n <a href={{@href}} class=\"block w-full before:pointer-events-none before:absolute before:-left-1 before:top-1/2 before:h-1.5 before:w-1.5 before:-translate-y-1/2 before:rounded-full\n {{if l.isActive \"font-semibold text-sky-500 before:bg-sky-500\" \"text-slate-500 before:hidden before:bg-slate-300 hover:text-slate-600 hover:before:block dark:text-slate-400 dark:before:bg-slate-700 dark:hover:text-slate-300\"}}\" {{on \"click\" l.handleClick}} ...attributes>\n {{#if (isComponents @name)}}\n {{asComponent (titleize @name)}}\n {{else}}\n {{titleize @name}}\n {{/if}}\n </a>\n {{/let}}\n ", {
|
|
53
|
+
strictMode: true,
|
|
54
|
+
scope: () => ({
|
|
55
|
+
link,
|
|
56
|
+
on,
|
|
57
|
+
isComponents,
|
|
58
|
+
asComponent,
|
|
59
|
+
titleize
|
|
60
|
+
})
|
|
61
|
+
}), templateOnly());
|
|
62
|
+
class SideNav extends Component {
|
|
63
|
+
static {
|
|
64
|
+
g(this.prototype, "docs", [service('kolay/docs')]);
|
|
65
|
+
}
|
|
66
|
+
#docs = (i(this, "docs"), void 0);
|
|
67
|
+
get humanSelected() {
|
|
68
|
+
let path = this.docs.selected?.path;
|
|
69
|
+
if (!path) return undefined;
|
|
70
|
+
return path.split('/').filter(Boolean).map(titleize).join(' / ');
|
|
71
|
+
}
|
|
72
|
+
closeNav = event => {
|
|
73
|
+
if (!getAnchor(event)) return;
|
|
74
|
+
this.args.onClick?.();
|
|
75
|
+
};
|
|
76
|
+
/**
|
|
77
|
+
*
|
|
78
|
+
* This nav needs an aria-label to get around
|
|
79
|
+
* "Ensure landmarks are unique"
|
|
80
|
+
* because some demos render navs, and it's important that those
|
|
81
|
+
* demos are as simple as possible.
|
|
82
|
+
*
|
|
83
|
+
*
|
|
84
|
+
* nav isn't actually made in to an interactive element,
|
|
85
|
+
* it's an event delegation handler.
|
|
86
|
+
* The links themselves remain the actual interactive elements.
|
|
87
|
+
*/
|
|
88
|
+
static {
|
|
89
|
+
setComponentTemplate(precompileTemplate("\n <aside class=\"bg-white dark:bg-slate-900\" ...attributes>\n <PageNav aria-label=\"Main Navigation\">\n <:page as |x|>\n <SubSectionLink @href={{x.page.path}} @name={{nameFor x.page}} {{on \"click\" this.closeNav}} />\n </:page>\n\n <:collection as |x|>\n {{#if x.index}}\n <SectionLink @href={{x.index.page.path}} @name={{titleize x.collection.name}} {{on \"click\" this.closeNav}} />\n {{else}}\n <h2>\n {{titleize x.collection.name}}\n </h2>\n {{/if}}\n </:collection>\n </PageNav>\n </aside>\n ", {
|
|
90
|
+
strictMode: true,
|
|
91
|
+
scope: () => ({
|
|
92
|
+
PageNav,
|
|
93
|
+
SubSectionLink,
|
|
94
|
+
nameFor,
|
|
95
|
+
on,
|
|
96
|
+
SectionLink,
|
|
97
|
+
titleize
|
|
98
|
+
})
|
|
99
|
+
}), this);
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
export { SideNav };
|
|
104
|
+
//# sourceMappingURL=side-nav.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"side-nav.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
.edit-page:after {
|
|
2
|
+
content: "➚";
|
|
3
|
+
@apply pl-1;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
.prose details {
|
|
7
|
+
@apply px-6 py-3 mb-6 -mt-0 border rounded-xl dark:border-slate-800;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.prose summary {
|
|
11
|
+
@apply font-medium cursor-default select-none text-slate-900 dark:text-slate-200;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.prose summary h1,
|
|
15
|
+
.prose summary h2,
|
|
16
|
+
.prose summary h3 {
|
|
17
|
+
@apply inline m-0;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.prose pre {
|
|
21
|
+
max-height: 520px;
|
|
22
|
+
}
|
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
.mobile-menu-wrapper {
|
|
2
|
+
height: 100dvh;
|
|
3
|
+
overflow: auto !important;
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* Set our theme-based background colors
|
|
7
|
+
*/
|
|
8
|
+
.mobile-menu__tray,
|
|
9
|
+
.mobile-menu-wrapper__content {
|
|
10
|
+
background: transparent;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
aside,
|
|
14
|
+
aside nav {
|
|
15
|
+
@apply bg-white dark:bg-slate-900;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
/**
|
|
19
|
+
* Layout
|
|
20
|
+
*/
|
|
21
|
+
.outer-content {
|
|
22
|
+
max-width: 80rem;
|
|
23
|
+
@apply sm:px-2 lg:px-8 xl:px-12;
|
|
24
|
+
}
|
|
25
|
+
.mobile-menu-wrapper__content {
|
|
26
|
+
.outer-content {
|
|
27
|
+
display: grid;
|
|
28
|
+
grid-auto-flow: column;
|
|
29
|
+
grid-template-columns: 300px 1fr;
|
|
30
|
+
margin: 0 auto;
|
|
31
|
+
|
|
32
|
+
aside {
|
|
33
|
+
margin-top: 1.5rem;
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
header .outer-content {
|
|
38
|
+
display: flex;
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
/**
|
|
43
|
+
* Mobile-only visible
|
|
44
|
+
*/
|
|
45
|
+
.mobile-menu__tray aside {
|
|
46
|
+
height: 100dvh;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
/**
|
|
50
|
+
* Spacing
|
|
51
|
+
*/
|
|
52
|
+
.mobile-menu__tray {
|
|
53
|
+
overflow-x: hidden;
|
|
54
|
+
|
|
55
|
+
nav {
|
|
56
|
+
padding: 1rem;
|
|
57
|
+
|
|
58
|
+
ul {
|
|
59
|
+
padding-left: 0.5rem;
|
|
60
|
+
list-style: none;
|
|
61
|
+
line-height: 1.75rem;
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
header button.mobile-menu__toggle {
|
|
68
|
+
padding: 0.25rem 0.5rem;
|
|
69
|
+
width: 48px;
|
|
70
|
+
height: 44px;
|
|
71
|
+
display: inline-flex;
|
|
72
|
+
align-self: center;
|
|
73
|
+
align-items: center;
|
|
74
|
+
justify-content: center;
|
|
75
|
+
margin: 0;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
@media (min-width: 800px) {
|
|
79
|
+
header button.mobile-menu__toggle {
|
|
80
|
+
display: none;
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
@media (max-width: 800px) {
|
|
85
|
+
.mobile-menu-wrapper .mobile-menu-wrapper__content {
|
|
86
|
+
.outer-content {
|
|
87
|
+
grid-template-columns: 1fr;
|
|
88
|
+
|
|
89
|
+
@apply px-4;
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
.mobile-menu-wrapper__content aside {
|
|
93
|
+
display: none;
|
|
94
|
+
}
|
|
95
|
+
}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Technique discovered here:
|
|
3
|
+
* https://github.com/shikijs/shiki/discussions/669
|
|
4
|
+
*
|
|
5
|
+
* Documentation here: https://shiki.matsu.io/guide/dual-themes#class-based-dark-mode
|
|
6
|
+
*
|
|
7
|
+
* Themes setup variables after a color,
|
|
8
|
+
* example: color:#fff;--shiki-dark:#000;--shikiwhite:#fff;
|
|
9
|
+
* and setting defaultColor to `false` means there are _only_ variables,
|
|
10
|
+
* which is how the following code works.
|
|
11
|
+
*/
|
|
12
|
+
|
|
13
|
+
html[style*="color-scheme: dark"] {
|
|
14
|
+
.shiki,
|
|
15
|
+
.shiki span {
|
|
16
|
+
color: var(--shiki-dark) !important;
|
|
17
|
+
background-color: var(--shiki-dark-bg) !important;
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
html[style*="color-scheme: light"] {
|
|
22
|
+
.shiki,
|
|
23
|
+
.shiki span {
|
|
24
|
+
color: var(--shiki-light) !important;
|
|
25
|
+
background-color: var(--shiki-light-bg) !important;
|
|
26
|
+
}
|
|
27
|
+
}
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
@import "tailwindcss/base";
|
|
2
|
+
@import "tailwindcss/components";
|
|
3
|
+
@import "tailwindcss/utilities";
|
|
4
|
+
|
|
5
|
+
html,
|
|
6
|
+
body {
|
|
7
|
+
/*overflow: hidden;*/
|
|
8
|
+
/*height: 100dvh;*/
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
@layer base {
|
|
12
|
+
body {
|
|
13
|
+
@apply font-sans text-gray-900 bg-white;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
[inert] ::-webkit-scrollbar {
|
|
17
|
+
display: none;
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
a,
|
|
22
|
+
button,
|
|
23
|
+
input,
|
|
24
|
+
select,
|
|
25
|
+
textarea,
|
|
26
|
+
[role="switch"],
|
|
27
|
+
[role="button"],
|
|
28
|
+
[tabindex] {
|
|
29
|
+
&:focus,
|
|
30
|
+
&:focus-visible {
|
|
31
|
+
@apply outline-none;
|
|
32
|
+
}
|
|
33
|
+
&:focus-visible {
|
|
34
|
+
@apply ring-2 ring-offset-2 ring-[#e04e39] ring-offset-black rounded;
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
[role="switch"][name="color-scheme"]:focus-visible + label .ball {
|
|
39
|
+
@apply ring-2 ring-offset-2 ring-[#e04e39] ring-offset-black rounded;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.facade-header {
|
|
43
|
+
position: fixed;
|
|
44
|
+
z-index: 49;
|
|
45
|
+
top: 0;
|
|
46
|
+
left: 0;
|
|
47
|
+
right: 0;
|
|
48
|
+
height: 5rem;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
nav[aria-label="Main Navigation"] {
|
|
52
|
+
@apply text-base;
|
|
53
|
+
|
|
54
|
+
> ul {
|
|
55
|
+
@apply space-y-9;
|
|
56
|
+
|
|
57
|
+
h2 {
|
|
58
|
+
@apply font-medium font-display text-slate-900 dark:text-white;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
ul {
|
|
62
|
+
@apply mt-2 space-y-2 border-l-2 border-slate-100 lg:mt-4 lg:space-y-4 lg:border-slate-200 dark:border-slate-800;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
li {
|
|
66
|
+
@apply pl-4 relative;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
> li {
|
|
70
|
+
> a {
|
|
71
|
+
@apply font-medium font-display;
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
}
|
package/dist/text.js
ADDED
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { precompileTemplate } from '@ember/template-compilation';
|
|
2
|
+
import { setComponentTemplate } from '@ember/component';
|
|
3
|
+
import templateOnly from '@ember/component/template-only';
|
|
4
|
+
|
|
5
|
+
const Text = setComponentTemplate(precompileTemplate("\n <span class=\"dark:text-white text:slate-900\">{{yield}}</span>\n", {
|
|
6
|
+
strictMode: true
|
|
7
|
+
}), templateOnly());
|
|
8
|
+
|
|
9
|
+
export { Text };
|
|
10
|
+
//# sourceMappingURL=text.js.map
|
package/dist/text.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"text.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
.site-theme-toggle {
|
|
2
|
+
display: flex;
|
|
3
|
+
justify-content: center;
|
|
4
|
+
align-items: center;
|
|
5
|
+
flex-direction: column;
|
|
6
|
+
text-align: center;
|
|
7
|
+
margin: 0;
|
|
8
|
+
transition: background 0.2s linear;
|
|
9
|
+
|
|
10
|
+
.sr-only {
|
|
11
|
+
margin-left: -0.5rem;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
input[type="checkbox"][role="switch"] {
|
|
15
|
+
opacity: 0;
|
|
16
|
+
position: absolute;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
label {
|
|
20
|
+
background-color: #111;
|
|
21
|
+
width: 50px;
|
|
22
|
+
height: 26px;
|
|
23
|
+
border-radius: 50px;
|
|
24
|
+
position: relative;
|
|
25
|
+
padding: 5px;
|
|
26
|
+
cursor: pointer;
|
|
27
|
+
display: flex;
|
|
28
|
+
justify-content: space-between;
|
|
29
|
+
align-items: center;
|
|
30
|
+
gap: 0.5rem;
|
|
31
|
+
box-shadow: inset 1px 0px 1px gray;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
label .ball {
|
|
35
|
+
background-color: #fff;
|
|
36
|
+
width: 22px;
|
|
37
|
+
height: 22px;
|
|
38
|
+
position: absolute;
|
|
39
|
+
left: 2px;
|
|
40
|
+
top: 2px;
|
|
41
|
+
border-radius: 50%;
|
|
42
|
+
transition: transform 0.2s linear;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
input[type="checkbox"][role="switch"]:checked + label .ball {
|
|
46
|
+
transform: translateX(24px);
|
|
47
|
+
}
|
|
48
|
+
}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import './theme-toggle.css';
|
|
2
|
+
import { on } from '@ember/modifier';
|
|
3
|
+
import { Switch } from 'ember-primitives';
|
|
4
|
+
import { colorScheme } from 'ember-primitives/color-scheme';
|
|
5
|
+
import { Moon, Sun } from './icons.js';
|
|
6
|
+
import { precompileTemplate } from '@ember/template-compilation';
|
|
7
|
+
import { setComponentTemplate } from '@ember/component';
|
|
8
|
+
import templateOnly from '@ember/component/template-only';
|
|
9
|
+
|
|
10
|
+
function toggleTheme() {
|
|
11
|
+
if (colorScheme.current === 'dark') {
|
|
12
|
+
colorScheme.update('light');
|
|
13
|
+
} else {
|
|
14
|
+
colorScheme.update('dark');
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
function isDark() {
|
|
18
|
+
return colorScheme.current === 'dark';
|
|
19
|
+
}
|
|
20
|
+
const ThemeToggle = setComponentTemplate(precompileTemplate("\n <Switch class=\"site-theme-toggle\" as |s|>\n <s.Control name=\"color-scheme\" checked={{(isDark)}} {{on \"change\" toggleTheme}} />\n <s.Label>\n <span class=\"sr-only\">Toggle between light and dark mode</span>\n {{!--\n \uD83C\uDFB5 It's raining, it's pouring, ... \uD83C\uDFB5\n https://www.youtube.com/watch?v=ll5ykbAumD4\n --}}\n <Moon class=\"fill-sky-400\" />\n <Sun class=\"fill-yellow-400\" />\n <span class=\"ball\"></span>\n </s.Label>\n </Switch>\n", {
|
|
21
|
+
strictMode: true,
|
|
22
|
+
scope: () => ({
|
|
23
|
+
Switch,
|
|
24
|
+
isDark,
|
|
25
|
+
on,
|
|
26
|
+
toggleTheme,
|
|
27
|
+
Moon,
|
|
28
|
+
Sun
|
|
29
|
+
})
|
|
30
|
+
}), templateOnly());
|
|
31
|
+
|
|
32
|
+
export { ThemeToggle };
|
|
33
|
+
//# sourceMappingURL=theme-toggle.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"theme-toggle.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@universal-ember/docs-support",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.1.0",
|
|
4
4
|
"description": "The default blueprint for Embroider v2 addons.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"ember-addon"
|
|
@@ -10,11 +10,14 @@
|
|
|
10
10
|
"author": "",
|
|
11
11
|
"exports": {
|
|
12
12
|
".": {
|
|
13
|
-
"types": "./declarations/index.d.ts",
|
|
13
|
+
"types": "./declarations/index.gts.d.ts",
|
|
14
14
|
"default": "./dist/index.js"
|
|
15
15
|
},
|
|
16
|
+
"./tailwind": {
|
|
17
|
+
"import": "./tailwind.mjs"
|
|
18
|
+
},
|
|
16
19
|
"./*": {
|
|
17
|
-
"types": "./declarations/*.d.ts",
|
|
20
|
+
"types": "./declarations/*.gts.d.ts",
|
|
18
21
|
"default": "./dist/*.js"
|
|
19
22
|
},
|
|
20
23
|
"./addon-main.js": "./addon-main.cjs"
|
|
@@ -28,49 +31,44 @@
|
|
|
28
31
|
},
|
|
29
32
|
"files": [
|
|
30
33
|
"addon-main.cjs",
|
|
34
|
+
"tailwind.mjs",
|
|
31
35
|
"declarations",
|
|
32
36
|
"dist"
|
|
33
37
|
],
|
|
34
38
|
"dependencies": {
|
|
35
39
|
"@embroider/addon-shim": "^1.8.7",
|
|
36
|
-
"
|
|
40
|
+
"@fontsource/lexend": "^5.1.1",
|
|
41
|
+
"@tailwindcss/typography": "^0.5.15",
|
|
42
|
+
"change-case": "^5.4.4",
|
|
43
|
+
"decorator-transforms": "^2.0.0",
|
|
44
|
+
"ember-mobile-menu": "^5.1.0",
|
|
45
|
+
"ember-modifier": "^4.2.0",
|
|
46
|
+
"ember-primitives": "^0.26.0",
|
|
47
|
+
"ember-resources": "^7.0.3",
|
|
48
|
+
"inter-ui": "^4.0.2",
|
|
49
|
+
"kolay": "^2.0.2",
|
|
50
|
+
"package-up": "^5.0.0",
|
|
51
|
+
"read-package-up": "^11.0.0",
|
|
52
|
+
"should-handle-link": "^1.2.2",
|
|
53
|
+
"tailwindcss": "^3.4.14"
|
|
37
54
|
},
|
|
38
55
|
"devDependencies": {
|
|
39
56
|
"@babel/core": "^7.24.4",
|
|
40
57
|
"@babel/plugin-transform-typescript": "^7.24.4",
|
|
41
58
|
"@babel/runtime": "^7.24.4",
|
|
42
|
-
"@embroider/addon-dev": "^
|
|
43
|
-
"@
|
|
44
|
-
"@glint/
|
|
45
|
-
"@glint/environment-ember-
|
|
46
|
-
"@glint/template": "
|
|
59
|
+
"@embroider/addon-dev": "^6.0.1",
|
|
60
|
+
"@glimmer/component": "^2.0.0",
|
|
61
|
+
"@glint/core": "unstable",
|
|
62
|
+
"@glint/environment-ember-loose": "unstable",
|
|
63
|
+
"@glint/environment-ember-template-imports": "unstable",
|
|
64
|
+
"@glint/template": "1.4.1-unstable.34c4510",
|
|
47
65
|
"@rollup/plugin-babel": "^6.0.4",
|
|
48
66
|
"@tsconfig/ember": "^3.0.6",
|
|
49
|
-
"@
|
|
50
|
-
"@
|
|
51
|
-
"@types/ember__array": "^4.0.9",
|
|
52
|
-
"@types/ember__component": "^4.0.21",
|
|
53
|
-
"@types/ember__controller": "^4.0.11",
|
|
54
|
-
"@types/ember__debug": "^4.0.7",
|
|
55
|
-
"@types/ember__destroyable": "^4.0.4",
|
|
56
|
-
"@types/ember__engine": "^4.0.10",
|
|
57
|
-
"@types/ember__error": "^4.0.5",
|
|
58
|
-
"@types/ember__helper": "^4.0.5",
|
|
59
|
-
"@types/ember__modifier": "^4.0.8",
|
|
60
|
-
"@types/ember__object": "^4.0.11",
|
|
61
|
-
"@types/ember__owner": "^4.0.8",
|
|
62
|
-
"@types/ember__polyfills": "^4.0.5",
|
|
63
|
-
"@types/ember__routing": "^4.0.19",
|
|
64
|
-
"@types/ember__runloop": "^4.0.8",
|
|
65
|
-
"@types/ember__service": "^4.0.8",
|
|
66
|
-
"@types/ember__string": "^3.16.3",
|
|
67
|
-
"@types/ember__template": "^4.0.5",
|
|
68
|
-
"@types/ember__test": "^4.0.5",
|
|
69
|
-
"@types/ember__utils": "^4.0.6",
|
|
70
|
-
"@typescript-eslint/eslint-plugin": "^7.7.1",
|
|
71
|
-
"@typescript-eslint/parser": "^7.7.1",
|
|
67
|
+
"@typescript-eslint/eslint-plugin": "^8.13.0",
|
|
68
|
+
"@typescript-eslint/parser": "^8.13.0",
|
|
72
69
|
"babel-plugin-ember-template-compilation": "^2.2.5",
|
|
73
70
|
"concurrently": "^8.2.2",
|
|
71
|
+
"ember-source": "^5.12.0",
|
|
74
72
|
"ember-template-lint": "^6.0.0",
|
|
75
73
|
"eslint": "^8.56.0",
|
|
76
74
|
"eslint-config-prettier": "^9.1.0",
|
|
@@ -85,7 +83,8 @@
|
|
|
85
83
|
"typescript": "^5.4.5"
|
|
86
84
|
},
|
|
87
85
|
"publishConfig": {
|
|
88
|
-
"registry": "https://registry.npmjs.org"
|
|
86
|
+
"registry": "https://registry.npmjs.org",
|
|
87
|
+
"access": "public"
|
|
89
88
|
},
|
|
90
89
|
"ember": {
|
|
91
90
|
"edition": "octane"
|
|
@@ -93,7 +92,11 @@
|
|
|
93
92
|
"ember-addon": {
|
|
94
93
|
"version": 2,
|
|
95
94
|
"type": "addon",
|
|
96
|
-
"main": "addon-main.cjs"
|
|
95
|
+
"main": "addon-main.cjs",
|
|
96
|
+
"app-js": {}
|
|
97
|
+
},
|
|
98
|
+
"peerDependencies": {
|
|
99
|
+
"ember-source": "^5.12.0"
|
|
97
100
|
},
|
|
98
101
|
"scripts": {
|
|
99
102
|
"build": "concurrently 'pnpm:build:*'",
|
|
@@ -108,7 +111,6 @@
|
|
|
108
111
|
"lint:types": "glint",
|
|
109
112
|
"start": "concurrently 'pnpm:start:*'",
|
|
110
113
|
"start:js": "rollup --config --watch --no-watch.clearScreen",
|
|
111
|
-
"start:types": "glint --declaration --watch"
|
|
112
|
-
"test": "echo 'A v2 addon does not have tests, run tests in test-app'"
|
|
114
|
+
"start:types": "glint --declaration --watch"
|
|
113
115
|
}
|
|
114
116
|
}
|
package/tailwind.mjs
ADDED
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
import path from 'node:path';
|
|
2
|
+
import assert from 'node:assert';
|
|
3
|
+
import { createRequire } from 'node:module';
|
|
4
|
+
|
|
5
|
+
import { readPackageUp } from 'read-package-up';
|
|
6
|
+
import { packageUp } from 'package-up';
|
|
7
|
+
import defaultTheme from 'tailwindcss/defaultTheme.js';
|
|
8
|
+
import typography from '@tailwindcss/typography';
|
|
9
|
+
|
|
10
|
+
// tailwindcss is built incorrectly to allow named imports
|
|
11
|
+
const fontFamily = defaultTheme.fontFamily;
|
|
12
|
+
|
|
13
|
+
const require = createRequire(import.meta.url);
|
|
14
|
+
|
|
15
|
+
/**
|
|
16
|
+
* Thanks, past self
|
|
17
|
+
* https://github.com/CrowdStrike/ember-oss-docs/blob/main/ember-oss-docs/tailwind.cjs
|
|
18
|
+
*/
|
|
19
|
+
const files = '**/*.{js,ts,hbs,gjs,gts,html}';
|
|
20
|
+
const sourceEntries = '{app,src}';
|
|
21
|
+
|
|
22
|
+
export async function config(root, { packages } = {}) {
|
|
23
|
+
const appManifestPath = await packageUp(root);
|
|
24
|
+
const packageResult = await readPackageUp(root);
|
|
25
|
+
const appRoot = path.dirname(appManifestPath);
|
|
26
|
+
|
|
27
|
+
const appPackageJson = packageResult?.packageJson;
|
|
28
|
+
|
|
29
|
+
assert(appPackageJson, `Could not find package.json for ${root}`);
|
|
30
|
+
|
|
31
|
+
const contentPaths = [
|
|
32
|
+
`${appRoot}/${sourceEntries}/${files}`,
|
|
33
|
+
|
|
34
|
+
/**
|
|
35
|
+
* Also check if addons/libraries contain any tailwind classes
|
|
36
|
+
* that we need to include
|
|
37
|
+
*
|
|
38
|
+
* This may be overkill for the typical app,
|
|
39
|
+
* but for our use case, documentation apps, it should be fine.
|
|
40
|
+
* (The risk here is scanning too many files and potentially
|
|
41
|
+
* running out of files watchers (tho, this isn't a problem on linux haha))
|
|
42
|
+
*/
|
|
43
|
+
...Object.keys(appPackageJson.dependencies)
|
|
44
|
+
.map((depName) => {
|
|
45
|
+
if (packages) {
|
|
46
|
+
if (!packages.includes(depName)) {
|
|
47
|
+
return;
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
const packagePath = path.dirname(require.resolve(depName, { paths: [appRoot] }));
|
|
51
|
+
|
|
52
|
+
return `${packagePath}/${files}`;
|
|
53
|
+
})
|
|
54
|
+
.filter(Boolean),
|
|
55
|
+
];
|
|
56
|
+
|
|
57
|
+
/** @type {import('tailwindcss').Config} */
|
|
58
|
+
return {
|
|
59
|
+
content: [...contentPaths],
|
|
60
|
+
darkMode: 'selector',
|
|
61
|
+
theme: {
|
|
62
|
+
extend: {
|
|
63
|
+
maxWidth: {
|
|
64
|
+
'8xl': '88rem',
|
|
65
|
+
},
|
|
66
|
+
fontFamily: {
|
|
67
|
+
sans: ['InterVariable', ...fontFamily.sans],
|
|
68
|
+
display: ['Lexend', { fontFeatureSettings: '"ss01"' }],
|
|
69
|
+
},
|
|
70
|
+
},
|
|
71
|
+
},
|
|
72
|
+
plugins: [typography],
|
|
73
|
+
};
|
|
74
|
+
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,UAAU,CAAC;AAC9B,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAClC,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"layouts.gts.d.ts","sourceRoot":"","sources":["../src/layouts.gts"],"names":[],"mappings":"AAqIA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,gCAAgC,CAAC;AAC1D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AA4BrD,eAAO,MAAM,MAAM,EAAE,GAAG,CAAC;IACvB,MAAM,EAAE;QACN,GAAG,EAAE,CAAC,OAAO,CAAC,EAAE;YAAE,KAAK,EAAE,MAAM,IAAI,CAAA;SAAE,CAAC,CAAC;QACvC,OAAO,EAAE,EAAE,CAAC;QACZ,MAAM,EAAE,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;KACjC,CAAC;CACH,CA4CC,CAAC;AAaH,eAAO,MAAM,UAAU,EAAE,GAAG,CAAC;IAC3B,MAAM,EAAE;QACN,GAAG,EAAE,EAAE,CAAC;QACR,MAAM,EAAE,EAAE,CAAC;QACX,QAAQ,EAAE,CAAC,OAAO,QAAQ,CAAC,CAAC;QAC5B,KAAK,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;KACxB,CAAC;CACH,CAgEC,CAAC;AAEH,QAAA,MAAM,QAAQ,EAAE,GAAG,CAAC;IAAE,IAAI,EAAE;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IAAC,MAAM,EAAE;QAAE,OAAO,EAAE,EAAE,CAAA;KAAE,CAAA;CAAE,CAcrE,CAAC"}
|