├── .npmrc
├── .npmignore
├── .vscode
    ├── extensions.json
    ├── apply.json
    └── settings.json
├── screenshots
    ├── 01.png
    ├── 02.png
    ├── 03.png
    ├── 04.png
    ├── 05.png
    ├── 06.png
    ├── 07.png
    └── 08.png
├── global-top.vue
├── layouts
    ├── intro.vue
    └── cover.vue
├── .gitignore
├── styles
    ├── index.ts
    ├── layout.css
    └── frankfurt.css
├── components
    ├── Item.vue
    ├── slidev.d.ts
    ├── InfoLine.vue
    └── Frankfurt.vue
├── setup
    └── shiki.ts
├── section.md
├── package.json
├── README.md
├── example.md
└── tsconfig.json


/.npmrc:
--------------------------------------------------------------------------------
1 | # for pnpm
2 | shamefully-hoist=true
3 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | .vscode/
2 | example.md
3 | section.md
4 | screenshots/


--------------------------------------------------------------------------------
/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 | 	"recommendations": [
3 | 		"antfu.slidev",
4 | 		"vue.volar"
5 | 	]
6 | }


--------------------------------------------------------------------------------
/screenshots/01.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MuTsunTsai/slidev-theme-frankfurt/HEAD/screenshots/01.png


--------------------------------------------------------------------------------
/screenshots/02.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MuTsunTsai/slidev-theme-frankfurt/HEAD/screenshots/02.png


--------------------------------------------------------------------------------
/screenshots/03.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MuTsunTsai/slidev-theme-frankfurt/HEAD/screenshots/03.png


--------------------------------------------------------------------------------
/screenshots/04.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MuTsunTsai/slidev-theme-frankfurt/HEAD/screenshots/04.png


--------------------------------------------------------------------------------
/screenshots/05.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MuTsunTsai/slidev-theme-frankfurt/HEAD/screenshots/05.png


--------------------------------------------------------------------------------
/screenshots/06.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MuTsunTsai/slidev-theme-frankfurt/HEAD/screenshots/06.png


--------------------------------------------------------------------------------
/screenshots/07.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MuTsunTsai/slidev-theme-frankfurt/HEAD/screenshots/07.png


--------------------------------------------------------------------------------
/screenshots/08.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MuTsunTsai/slidev-theme-frankfurt/HEAD/screenshots/08.png


--------------------------------------------------------------------------------
/global-top.vue:
--------------------------------------------------------------------------------
1 | <template>
2 | 	<Frankfurt />
3 | 	<InfoLine v-if="$slidev.configs.infoLine ?? true" />
4 | </template>
5 | 


--------------------------------------------------------------------------------
/layouts/intro.vue:
--------------------------------------------------------------------------------
1 | <template>
2 | 	<div class="slidev-layout intro">
3 | 		<div class="my-auto">
4 | 			<slot />
5 | 		</div>
6 | 	</div>
7 | </template>
8 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | node_modules
 2 | .DS_Store
 3 | dist
 4 | *.local
 5 | index.html
 6 | .remote-assets
 7 | .idea/
 8 | components.d.ts
 9 | example-export.pdf
10 | 


--------------------------------------------------------------------------------
/layouts/cover.vue:
--------------------------------------------------------------------------------
1 | <template>
2 | 	<div class="slidev-layout cover">
3 | 		<div class="my-auto w-full text-center">
4 | 			<slot />
5 | 		</div>
6 | 	</div>
7 | </template>
8 | 


--------------------------------------------------------------------------------
/styles/index.ts:
--------------------------------------------------------------------------------
1 | // inherit from base layouts, remove it to get full customizations
2 | import '@slidev/client/styles/layouts-base.css'
3 | import './layout.css'
4 | import './frankfurt.css'


--------------------------------------------------------------------------------
/components/Item.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="item">
 3 | 		<header v-if="title">{{ title }}</header>
 4 | 		<main>
 5 | 			<slot></slot>
 6 | 		</main>
 7 | 	</div>
 8 | </template>
 9 | 
10 | <script setup lang="ts">
11 | 	defineProps<{
12 | 		title?: string;
13 | 	}>();
14 | </script>
15 | 


--------------------------------------------------------------------------------
/setup/shiki.ts:
--------------------------------------------------------------------------------
 1 | import { ShikiSetupReturn, defineShikiSetup } from '@slidev/types/dist/index.mjs'
 2 | 
 3 | export default defineShikiSetup(async () => {
 4 | 	return {
 5 | 		theme: {
 6 | 			dark: 'dark-plus',
 7 | 			light: 'light-plus',
 8 | 		},
 9 | 	} as ShikiSetupReturn;
10 | });
11 | 


--------------------------------------------------------------------------------
/styles/layout.css:
--------------------------------------------------------------------------------
 1 | :root {
 2 | 	/* default theme color */
 3 | 	/* can be overrided by uses `themeConfig` option */
 4 | 	--slidev-theme-primary: #3333B3;
 5 | }
 6 | 
 7 | .slidev-layout.cover,
 8 | .slidev-layout.intro {
 9 | 	@apply h-full grid;
10 | 
11 | 	h1 {
12 | 		@apply text-6xl leading-20;
13 | 	}
14 | 
15 | 	h1 + p {
16 | 		@apply -mt-2 opacity-50 mb-4;
17 | 	}
18 | 
19 | 	p + h2,
20 | 	ul + h2,
21 | 	table + h2 {
22 | 		@apply mt-10;
23 | 	}
24 | }


--------------------------------------------------------------------------------
/.vscode/apply.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"version": 1.1,
 3 | 	"atDirectives": [
 4 | 		{
 5 | 			"name": "@apply",
 6 | 			"description": "Use the `@apply` directive to inline any existing utility classes into your own custom CSS. This is useful when you find a common utility pattern in your HTML that you’d like to extract to a new component.",
 7 | 			"references": [
 8 | 				{
 9 | 					"name": "Tailwind Documentation",
10 | 					"url": "https://tailwindcss.com/docs/functions-and-directives#apply"
11 | 				}
12 | 			]
13 | 		}
14 | 	]
15 | }


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "cSpell.words": [
 3 |         "Shiki",
 4 |         "slidev"
 5 |     ],
 6 |     "css.customData": [
 7 |         ".vscode/apply.json"
 8 |     ],
 9 |     "explorerExclude.backup": {},
10 |     "files.exclude": {
11 |         "**/.DS_Store": true,
12 |         "**/.classpath": true,
13 |         "**/.factorypath": true,
14 |         "**/.git": true,
15 |         "**/.hg": true,
16 |         "**/.project": true,
17 |         "**/.settings": true,
18 |         "**/.svn": true,
19 |         "**/CVS": true,
20 |         "**/Thumbs.db": true,
21 |         "node_modules": true
22 |     }
23 | }


--------------------------------------------------------------------------------
/components/slidev.d.ts:
--------------------------------------------------------------------------------
 1 | import type { UnwrapNestedRefs, Ref } from "vue";
 2 | import type { SlidevContext } from "@slidev/client/modules/context";
 3 | 
 4 | declare global {
 5 | 	// These will be injected in every component
 6 | 	const $slidev: UnwrapNestedRefs<SlidevContext>;
 7 | 	const $renderContext: Ref<string>;
 8 | }
 9 | 
10 | declare module 'vue' {
11 | 	interface ComponentCustomProperties {
12 | 		$slidev: UnwrapNestedRefs<SlidevContext>;
13 | 		$renderContext: string;
14 | 	}
15 | }
16 | 
17 | declare module '@slidev/types' {
18 | 	interface SlidevConfig {
19 | 		infoLine?: boolean;
20 | 		date?: string;
21 | 		author?: string;
22 | 	}
23 | }
24 | 


--------------------------------------------------------------------------------
/components/InfoLine.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<footer class="absolute bottom-0 left-0 right-0 flex text-center text-white">
 3 | 		<div class="flex-1 p-1" style="background:#191959">
 4 | 			{{ $slidev.configs.author || "Unknown author" }}
 5 | 		</div>
 6 | 		<div class="flex-1 p-1" style="background:#262686">
 7 | 			{{ $slidev.configs.title || "Unknown title" }}
 8 | 		</div>
 9 | 		<div class="flex-1 p-1" style="background:#3333B3">
10 | 			<div class="float-right">
11 | 				{{ $slidev.nav.currentPage }} /
12 | 				<SlidesTotal />
13 | 			</div>
14 | 			{{ $slidev.configs.date || new Date().toLocaleDateString() }}
15 | 		</div>
16 | 	</footer>
17 | </template>
18 | 
19 | <script setup lang="ts">
20 | import SlidesTotal from "@slidev/client/builtin/SlidesTotal.vue";
21 | </script>


--------------------------------------------------------------------------------
/section.md:
--------------------------------------------------------------------------------
 1 | 
 2 | # Frankfurt theme
 3 | 
 4 | <Item title="Definition 1">This is definition 1.</Item>
 5 | 
 6 | ---
 7 | 
 8 | # Theorem 1
 9 | 
10 | <Item title="Theorem 1">
11 | 
12 | Let $A\subseteq\N$ be a set such that $\pi_A(x)=x/\delta+O(x^\alpha)$,
13 | where $\delta\in[1,\infty)$ and $0\le\alpha<1$.
14 | Then we have
15 | 
16 | $$
17 | M_A(x)=\frac{1}{2\delta}x\log x+
18 | 	\frac 1 \delta\left(\gamma-\frac{1}{2}\log\frac \delta 2-\frac{1}{2}\right)x
19 | 	+O_A\!\left(x^{\frac{2\alpha+2}{\alpha+3}}\right).
20 | $$
21 | 
22 | </Item>
23 | 
24 | ---
25 | 
26 | # Theorem 2
27 | 
28 | <Item title="Theorem 2">
29 | 
30 | Let $A\subseteq\N$ be a set such that, for some $\delta>0$,
31 | $$
32 | \pi_A(x)=\frac{x}{\delta\log x}\left(1+\frac{1}{\log x}+O\!\left({\frac{1}{\log^2 x}}\right)\right)
33 | $$
34 | for all sufficiently large $x$. Then we have, for sufficiently large $x$,
35 | $$
36 | \begin{align*}
37 | 	M_A(x)
38 | 	&=
39 | 	\frac{\log2}{\delta}x-\frac{1}{\delta}\frac{x\log\log x}{\log x}+
40 | 	\frac{1}{\delta}\left(\gamma-\log\frac{\delta}{4}\right)\frac{x\log\log x}{\log x}\\
41 | 	&\qquad+
42 | 	\frac{1}{2\delta}\frac{x(\log\log x)^2}{\log^2 x}+O_A\!\left(\frac{x\log\log x}{\log^2 x}\right).
43 | \end{align*}
44 | $$
45 | 
46 | </Item>


--------------------------------------------------------------------------------
/styles/frankfurt.css:
--------------------------------------------------------------------------------
 1 | html {
 2 | 	font-size: 10pt;
 3 | }
 4 | 
 5 | .slidev-page,
 6 | .slidev-layout {
 7 | 
 8 | 	overflow: hidden;
 9 | 
10 | 	html.dark & {
11 | 		background: #222;
12 | 	}
13 | 
14 | 	h1 {
15 | 		@apply text-white shadow-md;
16 | 		background: #3333B3;
17 | 		margin-top: -4rem;
18 | 		margin-bottom: 2rem;
19 | 		margin-left: -5.5rem;
20 | 		margin-right: -5.5rem;
21 | 		padding: 5.5rem 3rem 1rem 3rem;
22 | 		width: 1000%;
23 | 		--un-shadow-opacity: 1;
24 | 		--un-shadow-color: #3333B3;
25 | 	}
26 | 
27 | 	&.center,
28 | 	&.cover,
29 | 	&.intro {
30 | 		h1 {
31 | 			@apply shadow-md shadow-gray;
32 | 
33 | 			display: inline-block;
34 | 			padding: 1rem 5rem;
35 | 			border-radius: 1rem;
36 | 			width: unset;
37 | 			margin-top: unset;
38 | 			margin-left: unset;
39 | 			margin-right: unset;
40 | 
41 | 			html.dark & {
42 | 				--un-shadow-opacity: 1;
43 | 				--un-shadow-color: #3333B3;
44 | 			}
45 | 		}
46 | 	}
47 | }
48 | 
49 | .item {
50 | 	@apply shadow-md shadow-gray;
51 | 	margin: 1rem 0;
52 | 	border-radius: .5rem;
53 | 	overflow: hidden;
54 | 
55 | 	html.dark & {
56 | 		--un-shadow-color: #111;
57 | 	}
58 | 
59 | 	header {
60 | 		padding: 0.5rem;
61 | 		color: white;
62 | 		background: #262686;
63 | 	}
64 | 
65 | 	main {
66 | 		padding: 0.5rem;
67 | 		background: #E9E9F3;
68 | 
69 | 		html.dark & {
70 | 			background: #444;
71 | 		}
72 | 	}
73 | }


--------------------------------------------------------------------------------
/components/Frankfurt.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<header class="absolute top-0 left-0 right-0 flex shadow-md shadow-black text-sm px-4 -mx-4" style="background:black">
 3 | 		<div v-for="(sec, i) in sections" class="flex-1 py-1 px-3"
 4 | 			 :class="sec[1].includes($slidev.nav.currentPage - 1) ? 'text-white' : 'text-stone'" :key="i">
 5 | 			<div>{{ sec[0] || "&emsp;" }}</div>
 6 | 			<div>
 7 | 				<span v-for="p in sec[1]" :key="p">
 8 | 					<Link :to="p + 1" style="color:unset">{{ $slidev.nav.currentPage == p + 1 ? "●" : "○" }}</Link>
 9 | 				</span>
10 | 			</div>
11 | 		</div>
12 | 	</header>
13 | </template>
14 | 
15 | <script setup lang="ts">
16 | 	import { computed } from "vue";
17 | 	import Link from "@slidev/client/builtin/Link.vue";
18 | 
19 | 	import type { SlideInfoBase } from "@slidev/types";
20 | 
21 | 	const sections = computed(() => {
22 | 		const result: [string, number[]][] = [];
23 | 		let pages: number[] = [];
24 | 		let title = "";
25 | 		for(let i = 1; i < $slidev.nav.slides.length; i++) {
26 | 			const slide = $slidev.nav.slides[i];
27 | 			const section = (slide.meta?.slide as SlideInfoBase)?.frontmatter?.section;
28 | 			if(section && section != title) {
29 | 				if(pages.length > 0) result.push([title, pages]);
30 | 				pages = [];
31 | 				title = section;
32 | 			}
33 | 			pages.push(i);
34 | 		}
35 | 		result.push([title, pages]);
36 | 		return result;
37 | 	});
38 | </script>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"name": "slidev-theme-frankfurt",
 3 | 	"version": "1.0.8",
 4 | 	"type": "module",
 5 | 	"description": "A theme for Slidev, inspired by the Frankfurt theme in Beamer.",
 6 | 	"repository": {
 7 | 		"type": "git",
 8 | 		"url": "git+https://github.com/MuTsunTsai/slidev-theme-frankfurt.git"
 9 | 	},
10 | 	"author": "Mu-Tsun Tsai",
11 | 	"license": "MIT",
12 | 	"keywords": [
13 | 		"slidev-theme",
14 | 		"slidev"
15 | 	],
16 | 	"engines": {
17 | 		"node": ">=18.0.0",
18 | 		"slidev": ">=0.19.3"
19 | 	},
20 | 	"scripts": {
21 | 		"build": "slidev build example.md",
22 | 		"dev": "slidev example.md",
23 | 		"export": "slidev export example.md",
24 | 		"screenshot": "slidev export example.md --per-slide --format png --output screenshots"
25 | 	},
26 | 	"dependencies": {
27 | 		"@slidev/types": "^52.1.0",
28 | 		"codemirror-theme-vars": "^0.1.2",
29 | 		"prism-theme-vars": "^0.2.5",
30 | 		"theme-vitesse": "^1.0.0"
31 | 	},
32 | 	"devDependencies": {
33 | 		"@slidev/cli": "^52.1.0",
34 | 		"playwright-chromium": "^1.55.0"
35 | 	},
36 | 	"//": "Learn more: https://sli.dev/themes/write-a-theme.html",
37 | 	"slidev": {
38 | 		"colorSchema": "both",
39 | 		"highlighter": "shiki",
40 | 		"defaults": {
41 | 			"fonts": {
42 | 				"sans": "Nunito Sans",
43 | 				"mono": "Fira Code"
44 | 			},
45 | 			"hightlighter": "shiki"
46 | 		}
47 | 	},
48 | 	"pnpm": {
49 | 		"onlyBuiltDependencies": [
50 | 			"esbuild",
51 | 			"playwright-chromium",
52 | 			"vue-demi"
53 | 		]
54 | 	}
55 | }
56 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # slidev-theme-frankfurt
 2 | 
 3 | [![NPM version](https://img.shields.io/npm/v/slidev-theme-frankfurt?color=3AB9D4&label=)](https://www.npmjs.com/package/slidev-theme-frankfurt)
 4 | 
 5 | A theme for [Slidev](https://github.com/slidevjs/slidev),
 6 | inspired by the Frankfurt theme in [Beamer](https://github.com/josephwright/beamer),
 7 | well-suited for academic talks.
 8 | 
 9 | ![](screenshots/01.png)
10 | 
11 | ## Install
12 | 
13 | Add the following frontmatter to your `slides.md`.
14 | Start Slidev and then it will prompt you to install the theme automatically.
15 | 
16 | ```yaml
17 | ---
18 | theme: frankfurt
19 | infoLine: true # on by default, can be turned off
20 | author: 'Your name here' # shows in infoLine
21 | title: 'Title' # shows in infoLine
22 | date: '2023/01/01' # shows in infoLine, defaults to the current date
23 | ---
24 | ```
25 | 
26 | Learn more about [how to use a theme](https://sli.dev/guide/theme-addon#use-theme).
27 | 
28 | ## Using sections
29 | 
30 | The main feature of Frankfurt theme is the section and progress indicators on top.
31 | To divide your slides into sections,
32 | add the following frontmatter to the first page of each section:
33 | 
34 | ```yaml
35 | ---
36 | section: 'Section title'
37 | ---
38 | ```
39 | 
40 | ## Components
41 | 
42 | This theme provides the following component:
43 | 
44 | ```html
45 | <Item title="Title of your thing">
46 | 	Create a box for definitions, lemmas, theorems, etc.
47 | </Item>
48 | ```
49 | 
50 | ![](screenshots/06.png)
51 | 
52 | ## Contributing
53 | 
54 | - `npm install`
55 | - `npm run dev` to start theme preview of `example.md`
56 | - Edit the `example.md` and style to see the changes
57 | - `npm run export` to generate the preview PDF
58 | - `npm run screenshot` to generate the preview PNG
59 | 


--------------------------------------------------------------------------------
/example.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | theme: ./
 3 | colorSchema: auto
 4 | author: Mu-Tsun Tsai
 5 | date: 2023/01/01
 6 | transition: slide-left
 7 | ---
 8 | 
 9 | # Slidev Theme Frankfurt
10 | 
11 | Presentation slides for developers
12 | 
13 | <div class="pt-12">
14 |   <span @click="next" class="px-2 p-1 rounded cursor-pointer hover:bg-white hover:bg-opacity-10">
15 |     Press Space for next page <carbon:arrow-right class="inline"/>
16 |   </span>
17 | </div>
18 | 
19 | ---
20 | section: Introduction
21 | ---
22 | 
23 | # What is Slidev?
24 | 
25 | Slidev is a slides maker and presenter designed for developers, consist of the following features
26 | 
27 | - 📝 **Text-based** - focus on the content with Markdown, and then style them later
28 | - 🎨 **Themable** - theme can be shared and used with npm packages
29 | - 🧑‍💻 **Developer Friendly** - code highlighting, live coding with autocompletion
30 | - 🤹 **Interactive** - embedding Vue components to enhance your expressions
31 | - 🎥 **Recording** - built-in recording and camera view
32 | - 📤 **Portable** - export into PDF, PNGs, or even a hostable SPA
33 | - 🛠 **Hackable** - anything possible on a webpage
34 | 
35 | <br>
36 | <br>
37 | 
38 | Read more about [Why Slidev?](https://sli.dev/guide/why)
39 | 
40 | 
41 | ---
42 | 
43 | # Navigation
44 | 
45 | Hover on the bottom-left corner to see the navigation's controls panel
46 | 
47 | ## Keyboard Shortcuts
48 | 
49 | |     |     |
50 | | --- | --- |
51 | | <kbd>space</kbd> / <kbd>tab</kbd> / <kbd>right</kbd> | next animation or slide |
52 | | <kbd>left</kbd>  / <kbd>shift</kbd><kbd>space</kbd> | previous animation or slide |
53 | | <kbd>up</kbd> | previous slide |
54 | | <kbd>down</kbd> | next slide |
55 | 
56 | ---
57 | layout: image-right
58 | image: 'https://source.unsplash.com/collection/94734566/1920x1080'
59 | ---
60 | 
61 | # Code
62 | 
63 | Use code snippets and get the highlighting directly!
64 | 
65 | ```ts
66 | interface User {
67 |   id: number
68 |   firstName: string
69 |   lastName: string
70 |   role: string
71 | }
72 | 
73 | function updateUser(id: number, update: Partial<User>) {
74 |   const user = getUser(id)
75 |   const newUser = { ...user, ...update }
76 |   saveUser(id, newUser)
77 | }
78 | ```
79 | 
80 | ---
81 | section: Frankfurt
82 | src: section.md
83 | ---
84 | 
85 | ---
86 | section: Final words
87 | layout: center
88 | class: "text-center"
89 | ---
90 | 
91 | # Learn More
92 | 
93 | [Documentations](https://sli.dev) / [GitHub Repo](https://github.com/slidevjs/slidev)
94 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "compilerOptions": {
  3 |     /* Visit https://aka.ms/tsconfig to read more about this file */
  4 | 
  5 |     /* Projects */
  6 |     // "incremental": true,                              /* Save .tsbuildinfo files to allow for incremental compilation of projects. */
  7 |     // "composite": true,                                /* Enable constraints that allow a TypeScript project to be used with project references. */
  8 |     // "tsBuildInfoFile": "./.tsbuildinfo",              /* Specify the path to .tsbuildinfo incremental compilation file. */
  9 |     // "disableSourceOfProjectReferenceRedirect": true,  /* Disable preferring source files instead of declaration files when referencing composite projects. */
 10 |     // "disableSolutionSearching": true,                 /* Opt a project out of multi-project reference checking when editing. */
 11 |     // "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */
 12 | 
 13 |     /* Language and Environment */
 14 |     "target": "es2016",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
 15 |     // "lib": [],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
 16 |     // "jsx": "preserve",                                /* Specify what JSX code is generated. */
 17 |     // "experimentalDecorators": true,                   /* Enable experimental support for legacy experimental decorators. */
 18 |     // "emitDecoratorMetadata": true,                    /* Emit design-type metadata for decorated declarations in source files. */
 19 |     // "jsxFactory": "",                                 /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */
 20 |     // "jsxFragmentFactory": "",                         /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
 21 |     // "jsxImportSource": "",                            /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */
 22 |     // "reactNamespace": "",                             /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */
 23 |     // "noLib": true,                                    /* Disable including any library files, including the default lib.d.ts. */
 24 |     // "useDefineForClassFields": true,                  /* Emit ECMAScript-standard-compliant class fields. */
 25 |     // "moduleDetection": "auto",                        /* Control what method is used to detect module-format JS files. */
 26 | 
 27 |     /* Modules */
 28 |     "module": "commonjs",                                /* Specify what module code is generated. */
 29 |     // "rootDir": "./",                                  /* Specify the root folder within your source files. */
 30 |     // "moduleResolution": "node10",                     /* Specify how TypeScript looks up a file from a given module specifier. */
 31 |     // "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
 32 |     // "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
 33 |     // "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
 34 |     // "typeRoots": [],                                  /* Specify multiple folders that act like './node_modules/@types'. */
 35 |     // "types": [],                                      /* Specify type package names to be included without being referenced in a source file. */
 36 |     // "allowUmdGlobalAccess": true,                     /* Allow accessing UMD globals from modules. */
 37 |     // "moduleSuffixes": [],                             /* List of file name suffixes to search when resolving a module. */
 38 |     // "allowImportingTsExtensions": true,               /* Allow imports to include TypeScript file extensions. Requires '--moduleResolution bundler' and either '--noEmit' or '--emitDeclarationOnly' to be set. */
 39 |     // "resolvePackageJsonExports": true,                /* Use the package.json 'exports' field when resolving package imports. */
 40 |     // "resolvePackageJsonImports": true,                /* Use the package.json 'imports' field when resolving imports. */
 41 |     // "customConditions": [],                           /* Conditions to set in addition to the resolver-specific defaults when resolving imports. */
 42 |     // "resolveJsonModule": true,                        /* Enable importing .json files. */
 43 |     // "allowArbitraryExtensions": true,                 /* Enable importing files with any extension, provided a declaration file is present. */
 44 |     // "noResolve": true,                                /* Disallow 'import's, 'require's or '<reference>'s from expanding the number of files TypeScript should add to a project. */
 45 | 
 46 |     /* JavaScript Support */
 47 |     // "allowJs": true,                                  /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */
 48 |     // "checkJs": true,                                  /* Enable error reporting in type-checked JavaScript files. */
 49 |     // "maxNodeModuleJsDepth": 1,                        /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */
 50 | 
 51 |     /* Emit */
 52 |     // "declaration": true,                              /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
 53 |     // "declarationMap": true,                           /* Create sourcemaps for d.ts files. */
 54 |     // "emitDeclarationOnly": true,                      /* Only output d.ts files and not JavaScript files. */
 55 |     // "sourceMap": true,                                /* Create source map files for emitted JavaScript files. */
 56 |     // "inlineSourceMap": true,                          /* Include sourcemap files inside the emitted JavaScript. */
 57 |     // "outFile": "./",                                  /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */
 58 |     // "outDir": "./",                                   /* Specify an output folder for all emitted files. */
 59 |     // "removeComments": true,                           /* Disable emitting comments. */
 60 |     // "noEmit": true,                                   /* Disable emitting files from a compilation. */
 61 |     // "importHelpers": true,                            /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
 62 |     // "importsNotUsedAsValues": "remove",               /* Specify emit/checking behavior for imports that are only used for types. */
 63 |     // "downlevelIteration": true,                       /* Emit more compliant, but verbose and less performant JavaScript for iteration. */
 64 |     // "sourceRoot": "",                                 /* Specify the root path for debuggers to find the reference source code. */
 65 |     // "mapRoot": "",                                    /* Specify the location where debugger should locate map files instead of generated locations. */
 66 |     // "inlineSources": true,                            /* Include source code in the sourcemaps inside the emitted JavaScript. */
 67 |     // "emitBOM": true,                                  /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */
 68 |     // "newLine": "crlf",                                /* Set the newline character for emitting files. */
 69 |     // "stripInternal": true,                            /* Disable emitting declarations that have '@internal' in their JSDoc comments. */
 70 |     // "noEmitHelpers": true,                            /* Disable generating custom helper functions like '__extends' in compiled output. */
 71 |     // "noEmitOnError": true,                            /* Disable emitting files if any type checking errors are reported. */
 72 |     // "preserveConstEnums": true,                       /* Disable erasing 'const enum' declarations in generated code. */
 73 |     // "declarationDir": "./",                           /* Specify the output directory for generated declaration files. */
 74 |     // "preserveValueImports": true,                     /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */
 75 | 
 76 |     /* Interop Constraints */
 77 |     // "isolatedModules": true,                          /* Ensure that each file can be safely transpiled without relying on other imports. */
 78 |     // "verbatimModuleSyntax": true,                     /* Do not transform or elide any imports or exports not marked as type-only, ensuring they are written in the output file's format based on the 'module' setting. */
 79 |     // "allowSyntheticDefaultImports": true,             /* Allow 'import x from y' when a module doesn't have a default export. */
 80 |     "esModuleInterop": true,                             /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
 81 |     // "preserveSymlinks": true,                         /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
 82 |     "forceConsistentCasingInFileNames": true,            /* Ensure that casing is correct in imports. */
 83 | 
 84 |     /* Type Checking */
 85 |     "strict": true,                                      /* Enable all strict type-checking options. */
 86 |     // "noImplicitAny": true,                            /* Enable error reporting for expressions and declarations with an implied 'any' type. */
 87 |     // "strictNullChecks": true,                         /* When type checking, take into account 'null' and 'undefined'. */
 88 |     // "strictFunctionTypes": true,                      /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
 89 |     // "strictBindCallApply": true,                      /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */
 90 |     // "strictPropertyInitialization": true,             /* Check for class properties that are declared but not set in the constructor. */
 91 |     // "noImplicitThis": true,                           /* Enable error reporting when 'this' is given the type 'any'. */
 92 |     // "useUnknownInCatchVariables": true,               /* Default catch clause variables as 'unknown' instead of 'any'. */
 93 |     // "alwaysStrict": true,                             /* Ensure 'use strict' is always emitted. */
 94 |     // "noUnusedLocals": true,                           /* Enable error reporting when local variables aren't read. */
 95 |     // "noUnusedParameters": true,                       /* Raise an error when a function parameter isn't read. */
 96 |     // "exactOptionalPropertyTypes": true,               /* Interpret optional property types as written, rather than adding 'undefined'. */
 97 |     // "noImplicitReturns": true,                        /* Enable error reporting for codepaths that do not explicitly return in a function. */
 98 |     // "noFallthroughCasesInSwitch": true,               /* Enable error reporting for fallthrough cases in switch statements. */
 99 |     // "noUncheckedIndexedAccess": true,                 /* Add 'undefined' to a type when accessed using an index. */
100 |     // "noImplicitOverride": true,                       /* Ensure overriding members in derived classes are marked with an override modifier. */
101 |     // "noPropertyAccessFromIndexSignature": true,       /* Enforces using indexed accessors for keys declared using an indexed type. */
102 |     // "allowUnusedLabels": true,                        /* Disable error reporting for unused labels. */
103 |     // "allowUnreachableCode": true,                     /* Disable error reporting for unreachable code. */
104 | 
105 |     /* Completeness */
106 |     // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
107 |     "skipLibCheck": true                                 /* Skip type checking all .d.ts files. */
108 |   }
109 | }
110 | 


--------------------------------------------------------------------------------