@compiiile/compiiile 2.2.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.
Files changed (55) hide show
  1. package/.compiiile/public/favicon.png +0 -0
  2. package/.compiiile/src/app.js +5 -0
  3. package/.compiiile/src/components/ClientScript.vue +48 -0
  4. package/.compiiile/src/components/ContentWrapper.vue +288 -0
  5. package/.compiiile/src/components/SlidesContent.vue +56 -0
  6. package/.compiiile/src/components/TableOfContent.vue +65 -0
  7. package/.compiiile/src/components/layout/HamburgerButton.vue +90 -0
  8. package/.compiiile/src/components/layout/TopBar.vue +106 -0
  9. package/.compiiile/src/components/layout/navBar/FilesTree.vue +35 -0
  10. package/.compiiile/src/components/layout/navBar/NavBar.vue +48 -0
  11. package/.compiiile/src/components/layout/navBar/NavListItem.vue +216 -0
  12. package/.compiiile/src/components/searchBar/SearchBar.vue +371 -0
  13. package/.compiiile/src/components/searchBar/SearchResult.vue +98 -0
  14. package/.compiiile/src/env.d.ts +1 -0
  15. package/.compiiile/src/layouts/BaseLayout.astro +38 -0
  16. package/.compiiile/src/layouts/SlidesLayout.astro +12 -0
  17. package/.compiiile/src/layouts/WorkspaceLayout.astro +58 -0
  18. package/.compiiile/src/pages/404.astro +17 -0
  19. package/.compiiile/src/pages/[...path].astro +61 -0
  20. package/.compiiile/src/style/code-theme.scss +30 -0
  21. package/.compiiile/src/style/index.scss +36 -0
  22. package/.compiiile/src/style/layouts.scss +43 -0
  23. package/.compiiile/src/style/print.scss +80 -0
  24. package/.compiiile/src/style/slides.scss +79 -0
  25. package/.compiiile/src/style/texts.scss +92 -0
  26. package/.compiiile/src/style/variables.scss +47 -0
  27. package/.compiiile/src/utils/searchIndex.js +28 -0
  28. package/.compiiile/src/utils/styles.js +9 -0
  29. package/.eslintrc.cjs +15 -0
  30. package/.github/FUNDING.yml +2 -0
  31. package/.prettierignore +1 -0
  32. package/.prettierrc.json +9 -0
  33. package/CHANGELOG.md +25 -0
  34. package/CONTRIBUTING.md +31 -0
  35. package/LICENCE.md +674 -0
  36. package/README.md +273 -0
  37. package/bin/cli.js +5 -0
  38. package/bin/config.js +137 -0
  39. package/bin/vitePluginCompiiile/index.js +32 -0
  40. package/bin/vitePluginCompiiile/markdownConfig.js +30 -0
  41. package/bin/vitePluginCompiiile/models/Context.js +138 -0
  42. package/bin/vitePluginCompiiile/models/FileListItem.js +10 -0
  43. package/bin/vitePluginCompiiile/models/FilesTreeItem.js +8 -0
  44. package/bin/vitePluginCompiiile/models/RouteListItem.js +9 -0
  45. package/bin/vitePluginCompiiile/rehypeHandleYamlMatterPlugin.js +8 -0
  46. package/bin/vitePluginCompiiile/rehypeImagePlugin.js +51 -0
  47. package/bin/vitePluginCompiiile/rehypeLinkPlugin.js +20 -0
  48. package/build.js +16 -0
  49. package/compiiile.config.js +6 -0
  50. package/dist/style.css +1 -0
  51. package/markdown-preview.md +242 -0
  52. package/package.json +81 -0
  53. package/slides-preview.mdx +39 -0
  54. package/src/env.d.ts +1 -0
  55. package/tsconfig.json +6 -0
@@ -0,0 +1,98 @@
1
+ <template>
2
+ <a
3
+ :href="$context.routeList.find((route) => route.name === searchResult.uuid).path"
4
+ class="search-result search-result-link"
5
+ >
6
+ <li>
7
+ <div class="search-result-header">
8
+ <h4 class="search-result-title" v-html="searchResult.title"></h4>
9
+ <p class="search-result-file-path text-sm">
10
+ {{ searchResult.fullPath }}
11
+ </p>
12
+ </div>
13
+
14
+ <p
15
+ v-for="contentMatch in searchResult.contentMatches"
16
+ :key="contentMatch"
17
+ class="text-xs search-result-match-preview"
18
+ v-html="contentMatch"
19
+ ></p>
20
+ </li>
21
+ </a>
22
+ </template>
23
+
24
+ <script>
25
+ export default {
26
+ name: "SearchResult",
27
+ props: {
28
+ searchResult: {
29
+ type: Object,
30
+ required: true
31
+ }
32
+ }
33
+ }
34
+ </script>
35
+
36
+ <style scoped lang="scss">
37
+ .search-result,
38
+ .search-result-header {
39
+ background-color: var(--search-background-color);
40
+
41
+ &:hover,
42
+ &:focus {
43
+ background-color: var(--search-background-color);
44
+
45
+ .search-result-header {
46
+ background-color: var(--search-background-color);
47
+ }
48
+ }
49
+
50
+ &:focus {
51
+ box-shadow: inset 0 0 2px 2px rgb(153 133 254 / 80%);
52
+ outline: none;
53
+ }
54
+ }
55
+
56
+ .search-result {
57
+ padding: 6px 10px;
58
+ display: block;
59
+ color: inherit;
60
+ white-space: normal;
61
+ border-radius: 4px;
62
+ text-decoration: none;
63
+
64
+ + .search-result {
65
+ margin-top: 10px;
66
+ }
67
+
68
+ &:last-child {
69
+ border-bottom-left-radius: 6px;
70
+ border-bottom-right-radius: 6px;
71
+ }
72
+ }
73
+
74
+ .search-result-header {
75
+ position: sticky;
76
+ top: -1px;
77
+ padding: 5px 0;
78
+ border-top-left-radius: 4px;
79
+ border-top-right-radius: 4px;
80
+ }
81
+
82
+ .search-result-title {
83
+ margin: 0 0 6px 0;
84
+ }
85
+
86
+ .search-result-file-path {
87
+ margin: 0;
88
+ color: var(--text-color-light);
89
+ line-height: 12px;
90
+ }
91
+
92
+ .search-result-match-preview {
93
+ background-color: var(--darker-background-color);
94
+ padding: 3px 6px;
95
+ border-radius: 6px;
96
+ margin: 5px 0;
97
+ }
98
+ </style>
@@ -0,0 +1 @@
1
+ /// <reference types="astro/client" />
@@ -0,0 +1,38 @@
1
+ ---
2
+ import '../utils/styles.js'
3
+ import {SEO} from "astro-seo"
4
+ const {title, description, isNotFoundPage} = Astro.props
5
+ import { site } from "virtual:compiiile"
6
+ const titleTemplate = site.title ? `%s | ${ site.title }` : ''
7
+ const siteUrl = site.siteUrl || Astro.url.origin
8
+ let siteBase = site.base
9
+ if(!siteBase.endsWith("/")){
10
+ siteBase += "/"
11
+ }
12
+ const faviconBaseUrl = `${ siteBase }favicon.png`
13
+ const faviconAbsoluteUrl = `${ siteUrl }/${ faviconBaseUrl }`
14
+ ---
15
+
16
+ <html lang="en">
17
+ <head>
18
+ <meta charset="utf-8">
19
+ <meta name="viewport" content="width=device-width, initial-scale=1">
20
+ <link rel="icon" type="image/png" href={ faviconBaseUrl }/>
21
+ {isNotFoundPage ? '' :
22
+ <SEO title={title}
23
+ description={description}
24
+ titleTemplate={titleTemplate}
25
+ openGraph={{
26
+ basic: {
27
+ title: title,
28
+ type: "website",
29
+ description: description,
30
+ image: faviconAbsoluteUrl,
31
+ }
32
+ }}
33
+ />}
34
+ </head>
35
+ <body>
36
+ <slot></slot>
37
+ </body>
38
+ </html>
@@ -0,0 +1,12 @@
1
+ ---
2
+ import SlidesContent from "../components/SlidesContent.vue";
3
+ import BaseLayout from "./BaseLayout.astro";
4
+ const { title, description } = Astro.props
5
+ ---
6
+
7
+ <BaseLayout title={ title } description={ description } isNotFoundPage={ false }>
8
+ <SlidesContent client:load>
9
+ <slot></slot>
10
+ </SlidesContent>
11
+ </BaseLayout>
12
+
@@ -0,0 +1,58 @@
1
+ ---
2
+ import BaseLayout from "./BaseLayout.astro"
3
+ import TopBar from "../components/layout/TopBar.vue";
4
+ import NavBar from "../components/layout/navBar/NavBar.vue";
5
+ import ClientScript from "../components/ClientScript.vue";
6
+
7
+ const { title, description } = Astro.props
8
+ let currentPath = Astro.url.pathname
9
+ if(currentPath.length > 1 && currentPath.endsWith("/")){
10
+ currentPath = currentPath.slice(0, -1)
11
+ }
12
+ ---
13
+
14
+
15
+ <BaseLayout title={ title } description={ description } isNotFoundPage={ true }>
16
+ <div class="page">
17
+ <TopBar client:load />
18
+
19
+ <NavBar currentPath={ currentPath }/>
20
+
21
+ <div class="centered-layout">
22
+ <div class="content-wrapper">
23
+ <slot></slot>
24
+ </div>
25
+ </div>
26
+
27
+ <ClientScript client:load />
28
+ </div>
29
+ </BaseLayout>
30
+
31
+ <style>
32
+
33
+ .content-wrapper {
34
+ margin-left: var(--nav-bar-width);
35
+ padding: var(--content-padding);
36
+ position: relative;
37
+ }
38
+
39
+ .centered-layout {
40
+ margin-top: var(--top-bar-height);
41
+ }
42
+
43
+ .not-found {
44
+ font-weight: bold;
45
+ font-family: var(--monospace);
46
+ font-size: 4rem;
47
+ margin-top: 60px;
48
+ }
49
+
50
+ @media screen and (min-width: 1100px) {
51
+ .centered-layout {
52
+ max-width: var(--content-max-width);
53
+ margin: var(--top-bar-height) auto 0;
54
+ }
55
+ }
56
+
57
+ </style>
58
+
@@ -0,0 +1,17 @@
1
+ ---
2
+ import WorkspaceLayout from "../layouts/WorkspaceLayout.astro";
3
+ ---
4
+ <WorkspaceLayout isNotFoundPage={ true }>
5
+ <p class="text-center not-found">404</p>
6
+ </WorkspaceLayout>
7
+
8
+ <style>
9
+
10
+ .not-found {
11
+ font-weight: bold;
12
+ font-family: var(--monospace);
13
+ font-size: 4rem;
14
+ margin-top: 60px;
15
+ }
16
+
17
+ </style>
@@ -0,0 +1,61 @@
1
+ ---
2
+ import WorkspaceLayout from "../layouts/WorkspaceLayout.astro"
3
+ import ContentWrapper from "../components/ContentWrapper.vue"
4
+ import {routeList} from "virtual:compiiile"
5
+ import SlidesLayout from "../layouts/SlidesLayout.astro";
6
+
7
+ export async function getStaticPaths() {
8
+ const markdownFiles = await Astro.glob('@source/**/*.{md,mdx}')
9
+
10
+ return routeList.map(route => {
11
+ const md = markdownFiles.find(post => post.file === `${process.cwd()}/${route.fullPath}`)
12
+
13
+ let routePath = route.path
14
+
15
+ if (routePath !== import.meta.env.BASE_URL) {
16
+ routePath = routePath.substring(import.meta.env.BASE_URL.length)
17
+ }
18
+
19
+ return {
20
+ params: {
21
+ path: routePath === import.meta.env.BASE_URL ? undefined : routePath
22
+ },
23
+ props: {
24
+ name: route.name,
25
+ md,
26
+ asSlides: !!route.meta.asSlides,
27
+ uuid: route.name,
28
+ title: route.meta.title,
29
+ description: route.meta.description || ""
30
+ }
31
+ }
32
+ })
33
+ }
34
+
35
+ let {path} = Astro.params;
36
+
37
+ const {name, title, description, asSlides} = Astro.props
38
+
39
+ const {Content} = Astro.props.md
40
+
41
+ const tableOfContent = Astro.props.md.getHeadings()
42
+ ---
43
+
44
+ {asSlides ?
45
+ <SlidesLayout title={title} description={description}>
46
+ <div class="slides-content">
47
+ <Content/>
48
+ </div>
49
+ </SlidesLayout>
50
+
51
+ :
52
+
53
+ <WorkspaceLayout title={title} description={description} isNotFoundPage={false}>
54
+ <ContentWrapper name={name} tableOfContent={tableOfContent}>
55
+ <Content/>
56
+ </ContentWrapper>
57
+ </WorkspaceLayout>
58
+ }
59
+
60
+
61
+
@@ -0,0 +1,30 @@
1
+ :root {
2
+ --astro-code-color-text: #eeeeee;
3
+ --astro-code-color-background: var(--code-background-color);
4
+ --astro-code-token-constant: #ec6875;
5
+ --astro-code-token-string: var(--code-color);
6
+ --astro-code-token-comment: #8999a9;
7
+ --astro-code-token-keyword: var(--code-color);
8
+ --astro-code-token-parameter: #ffb36f;
9
+ --astro-code-token-function: #ffb36f;
10
+ --astro-code-token-string-expression: #9bea93;
11
+ --astro-code-token-punctuation: var(--code-color);
12
+ --astro-code-token-link: #9a84ff;
13
+ }
14
+
15
+ .astro-code {
16
+ display: block;
17
+ overflow-x: auto;
18
+ background: var(--code-background-color);
19
+ border: solid 1px var(--code-background-color); /* same color, useful when printing without background graphics */
20
+ color: var(--code-color);
21
+ padding: 20px;
22
+ border-radius: 8px;
23
+ line-height: 1.3rem;
24
+ position: relative;
25
+ font-family: "JetBrains Mono Variable", sans-serif;
26
+
27
+ code {
28
+ font-family: "JetBrains Mono Variable", sans-serif;
29
+ }
30
+ }
@@ -0,0 +1,36 @@
1
+ @import "variables";
2
+ @import "texts";
3
+ @import "layouts";
4
+ @import "print";
5
+ @import "code-theme";
6
+
7
+ *,
8
+ *::before,
9
+ *::after {
10
+ box-sizing: border-box;
11
+ margin: 0;
12
+ }
13
+
14
+ html {
15
+ font-size: 16px;
16
+ line-height: 1.618rem;
17
+ word-spacing: 1px;
18
+ -ms-text-size-adjust: 100%;
19
+ -webkit-text-size-adjust: 100%;
20
+ -moz-osx-font-smoothing: grayscale;
21
+ -webkit-font-smoothing: antialiased;
22
+ box-sizing: border-box;
23
+ background-color: var(--layout-background-color);
24
+ font-family: "DM Sans Variable", sans-serif;
25
+ }
26
+
27
+ #__nuxt,
28
+ #__layout,
29
+ #default-layout,
30
+ .page {
31
+ height: 100%;
32
+ }
33
+
34
+ body {
35
+ overflow-x: hidden;
36
+ }
@@ -0,0 +1,43 @@
1
+ .flex {
2
+ display: flex;
3
+ }
4
+
5
+ @media screen and (max-width: 1200px) {
6
+ :root {
7
+ --toc-width: 0;
8
+ }
9
+
10
+ .toc {
11
+ display: none;
12
+ }
13
+ }
14
+
15
+ @media screen and (max-width: 900px) {
16
+ :root {
17
+ --nav-bar-width: 0;
18
+ }
19
+
20
+ nav {
21
+ width: 0;
22
+ left: -40px;
23
+ }
24
+
25
+ html {
26
+ font-size: 14px !important;
27
+ }
28
+ }
29
+
30
+ @media screen and (max-width: 650px) {
31
+ :root {
32
+ --content-padding: 15px;
33
+ }
34
+
35
+ nav {
36
+ padding-left: 15px !important;
37
+ }
38
+
39
+ .header-anchor {
40
+ font-size: 14px;
41
+ margin-top: 5px;
42
+ }
43
+ }
@@ -0,0 +1,80 @@
1
+ @media print {
2
+ :root {
3
+ --toc-width: 0;
4
+ --content-padding: 0;
5
+ --nav-bar-width: 0;
6
+ --top-bar-height: 20px;
7
+ }
8
+
9
+ body {
10
+ padding: 1cm !important;
11
+ }
12
+
13
+ html.print-pdf body {
14
+ padding: 0cm !important;
15
+ }
16
+
17
+ @page {
18
+ margin: 0 !important;
19
+ }
20
+
21
+ .no-print,
22
+ .header-anchor {
23
+ display: none !important;
24
+ }
25
+
26
+ .content-wrapper {
27
+ margin: 0 !important;
28
+ padding: 0 !important;
29
+ }
30
+
31
+ table {
32
+ page-break-inside: auto;
33
+ }
34
+ tr {
35
+ page-break-inside: avoid;
36
+ page-break-after: auto;
37
+ }
38
+ thead {
39
+ display: table-header-group;
40
+ }
41
+ tfoot {
42
+ display: table-footer-group;
43
+ }
44
+
45
+ /* Overriding revealJs stuff */
46
+ html:not(.print-pdf),
47
+ body:not(.print-pdf),
48
+ html {
49
+ background-color: var(--layout-background-color) !important;
50
+ }
51
+
52
+ html:not(.print-pdf) {
53
+ .markdown-content {
54
+ li,
55
+ p,
56
+ td,
57
+ th {
58
+ font-size: 12pt !important;
59
+ }
60
+
61
+ h1,
62
+ h2,
63
+ h3,
64
+ h4,
65
+ h5,
66
+ p,
67
+ li,
68
+ td,
69
+ th {
70
+ color: white !important;
71
+ -webkit-print-color-adjust: economy;
72
+ }
73
+
74
+ a {
75
+ color: var(--link-color) !important;
76
+ }
77
+ }
78
+ }
79
+ /* ------------- */
80
+ }
@@ -0,0 +1,79 @@
1
+ .reveal {
2
+ height: 100vh;
3
+ width: 100vw;
4
+
5
+ pre code {
6
+ padding: 20px !important;
7
+ border-radius: 8px;
8
+ max-height: 80vh !important;
9
+ }
10
+
11
+ h1,
12
+ h2,
13
+ h3,
14
+ h4,
15
+ h5,
16
+ h6 {
17
+ font-family: "Archivo Variable", sans-serif;
18
+ font-variation-settings:
19
+ "wght" 900,
20
+ "wdth" 125;
21
+ letter-spacing: -0.03em;
22
+ font-size: 24px;
23
+ border: none !important;
24
+ }
25
+
26
+ font-family: "DM Sans Variable", sans-serif !important;
27
+
28
+ p,
29
+ li {
30
+ font-size: 24px !important;
31
+ }
32
+
33
+ .hljs {
34
+ font-size: 18px !important;
35
+ }
36
+
37
+ p code {
38
+ background-color: var(--layout-background-color);
39
+ padding: 2px 4px;
40
+ border-radius: 3px;
41
+ font-size: 18px;
42
+ }
43
+
44
+ blockquote {
45
+ background-color: var(--blockquote-background-color);
46
+ border: solid 1px var(--blockquote-border-color);
47
+ border-radius: 8px;
48
+ padding: 0.5em 1em;
49
+ }
50
+
51
+ .header-anchor {
52
+ display: none;
53
+ }
54
+
55
+ ul {
56
+ width: 70%;
57
+ }
58
+
59
+ .slides a {
60
+ color: var(--link-color) !important;
61
+ text-decoration: underline;
62
+ }
63
+
64
+ img {
65
+ object-fit: contain;
66
+ }
67
+ }
68
+
69
+ .reveal-viewport {
70
+ background-color: var(--darker-background-color) !important;
71
+ }
72
+
73
+ .reveal .controls {
74
+ color: var(--slides-controls) !important;
75
+ }
76
+
77
+ .reveal .progress {
78
+ color: var(--slides-controls) !important;
79
+ }
@@ -0,0 +1,92 @@
1
+ h1,
2
+ h2,
3
+ h3,
4
+ h4,
5
+ h5 {
6
+ font-family: "Archivo Variable", sans-serif;
7
+ margin: 3rem 0 1.38rem;
8
+ line-height: 1;
9
+ font-variation-settings: "wght" 900;
10
+ }
11
+
12
+ h1 {
13
+ margin-top: 0;
14
+ font-size: 2.074rem;
15
+ margin-bottom: 2rem;
16
+ }
17
+
18
+ h2 {
19
+ font-size: 1.728rem;
20
+ }
21
+
22
+ h3 {
23
+ font-size: 1.44rem;
24
+ }
25
+
26
+ h4 {
27
+ font-size: 1.2rem;
28
+ }
29
+
30
+ h5 {
31
+ font-size: 1rem;
32
+ }
33
+
34
+ .text-xs {
35
+ font-size: 0.833rem;
36
+ }
37
+
38
+ small,
39
+ .text-sm {
40
+ font-size: 0.694rem;
41
+ }
42
+
43
+ a {
44
+ text-decoration: underline;
45
+ cursor: pointer;
46
+ outline: none;
47
+ }
48
+
49
+ a,
50
+ a:visited {
51
+ color: inherit;
52
+ }
53
+
54
+ body {
55
+ color: var(--text-color-base);
56
+ }
57
+
58
+ .text-color-light {
59
+ color: var(--text-color-light);
60
+ }
61
+
62
+ .bold {
63
+ font-weight: bold;
64
+ }
65
+
66
+ .text-center {
67
+ text-align: center;
68
+ }
69
+
70
+ .no-wrap {
71
+ white-space: nowrap;
72
+ }
73
+
74
+ .ph-icon {
75
+ width: 12px;
76
+ height: 12px;
77
+
78
+ line,
79
+ polyline,
80
+ circle,
81
+ path,
82
+ rect:not(:first-child) {
83
+ stroke: currentColor;
84
+ }
85
+ }
86
+
87
+ .hidden {
88
+ visibility: hidden;
89
+ }
90
+ p.mermaid {
91
+ font-family: var(--monospace);
92
+ }
@@ -0,0 +1,47 @@
1
+ :root {
2
+ --content-max-width: 1400px;
3
+ --nav-bar-width: 220px;
4
+ --toc-width: 200px;
5
+ --layout-padding: 20px;
6
+ --content-padding: 40px;
7
+ --top-bar-height: 60px;
8
+ --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
9
+ --monospace: "JetBrains Mono Variable", monospace;
10
+ --r-code-font: "JetBrains Mono Variable", monospace;
11
+
12
+ /* Dark theme by default */
13
+ --text-color-base: #f7fafc;
14
+ --text-color-light: #9ca6b3;
15
+ --layout-background-color: #1a1b25;
16
+ --darker-background-color: #16161d;
17
+ --search-background-color: #1a1b25;
18
+ --separator-color: #101014;
19
+ --dimmed-text-color: #8e989e;
20
+ --code-background-color: #2a2c3c;
21
+ --code-color: #d2d7e0;
22
+ --highlight-color: #9985fe;
23
+ --link-color: var(--highlight-color);
24
+ --blockquote-background-color: rgba(153, 133, 254, 0.1);
25
+ --blockquote-border-color: var(--highlight-color);
26
+ --table-border-color: var(--separator-color);
27
+ --table-odd-lines-background-color: var(--code-background-color);
28
+ --table-even-lines-background-color: #262a33;
29
+
30
+ --slides-controls: #eeaa6f;
31
+ }
32
+
33
+ .theme--light {
34
+ --text-color-base: #37342f;
35
+ --text-color-light: #a3a29f;
36
+ --navbar-background-color: #f8f8f8;
37
+ --layout-background-color: #ffffff;
38
+ --separator-color: #e2e2e2;
39
+ --dimmed-text-color: #625f57;
40
+ --code-background-color: #eeeeee;
41
+ --blockquote-background-color: #f7f6f6;
42
+ --blockquote-border-color: #dfe2e5;
43
+ --highlight-color: #564ce0;
44
+ --table-border-color: #cccccc;
45
+ --table-odd-lines-background-color: white;
46
+ --table-even-lines-background-color: #f8f8f8;
47
+ }