Indrajith Makes Games

+{:else} +

+ +

+{/if} diff --git a/src/lib/components/media.svelte b/src/lib/components/media.svelte new file mode 100644 index 0000000..ffa2633 --- /dev/null +++ b/src/lib/components/media.svelte @@ -0,0 +1,22 @@ + + + + + diff --git a/src/lib/components/notes.svelte b/src/lib/components/notes.svelte new file mode 100644 index 0000000..198e18d --- /dev/null +++ b/src/lib/components/notes.svelte @@ -0,0 +1,3 @@ + diff --git a/src/lib/components/presentation.svelte b/src/lib/components/presentation.svelte new file mode 100644 index 0000000..c11010a --- /dev/null +++ b/src/lib/components/presentation.svelte @@ -0,0 +1,77 @@ + + +

+ +

diff --git a/src/lib/components/slide.svelte b/src/lib/components/slide.svelte new file mode 100644 index 0000000..439d312 --- /dev/null +++ b/src/lib/components/slide.svelte @@ -0,0 +1,48 @@ + + +

+ +

diff --git a/src/lib/components/stack.svelte b/src/lib/components/stack.svelte new file mode 100644 index 0000000..a03d205 --- /dev/null +++ b/src/lib/components/stack.svelte @@ -0,0 +1,3 @@ +

+ +

diff --git a/src/lib/components/step.svelte b/src/lib/components/step.svelte new file mode 100644 index 0000000..13c2f7c --- /dev/null +++ b/src/lib/components/step.svelte @@ -0,0 +1,53 @@ + + +

+ +

diff --git a/src/lib/components/stretch.svelte b/src/lib/components/stretch.svelte new file mode 100644 index 0000000..be808d5 --- /dev/null +++ b/src/lib/components/stretch.svelte @@ -0,0 +1,13 @@ + + + + + diff --git a/src/lib/components/vertical.svelte b/src/lib/components/vertical.svelte new file mode 100644 index 0000000..fb20c0a --- /dev/null +++ b/src/lib/components/vertical.svelte @@ -0,0 +1,3 @@ +

+ +

diff --git a/src/lib/languages/index.ts b/src/lib/languages/index.ts new file mode 100644 index 0000000..296c1fa --- /dev/null +++ b/src/lib/languages/index.ts @@ -0,0 +1,6 @@ +import { svelte } from './svelte' +import type { Hljs } from './types' + +export function registerLanguages(hljs: Hljs) { + hljs.registerLanguage('svelte', svelte) +} diff --git a/src/lib/languages/svelte.ts b/src/lib/languages/svelte.ts new file mode 100644 index 0000000..237c7c7 --- /dev/null +++ b/src/lib/languages/svelte.ts @@ -0,0 +1,50 @@ +import type { Hljs } from './types' + +export function svelte(hljs: Hljs) { + return { + subLanguage: 'xml', + contains: [ + hljs.COMMENT('', { + relevance: 10, + }), + { + begin: /^(\s*)()/gm, + end: /^(\s*)(<\/script>)/gm, + subLanguage: 'javascript', + excludeBegin: true, + excludeEnd: true, + contains: [ + { + begin: /^(\s*)(\$:)/gm, + end: /(\s*)/gm, + className: 'keyword', + }, + ], + }, + { + begin: /^(\s*)()/gm, + end: /^(\s*)(<\/style>)/gm, + subLanguage: 'css', + excludeBegin: true, + excludeEnd: true, + }, + { + begin: /\{/gm, + end: /\}/gm, + subLanguage: 'javascript', + contains: [ + { + begin: /[\{]/, + end: /[\}]/, + skip: true, + }, + { + begin: /([#:\/@])(if|else|each|await|then|catch|debug|html)/gm, + className: 'keyword', + relevance: 10, + }, + ], + }, + ], + } +} diff --git a/src/lib/languages/types.ts b/src/lib/languages/types.ts new file mode 100644 index 0000000..a030e24 --- /dev/null +++ b/src/lib/languages/types.ts @@ -0,0 +1,3 @@ +import hljs from 'highlight.js' + +export type Hljs = typeof hljs diff --git a/src/lib/motion/index.ts b/src/lib/motion/index.ts new file mode 100644 index 0000000..79e3d36 --- /dev/null +++ b/src/lib/motion/index.ts @@ -0,0 +1,4 @@ +import { signal } from './signal' +import { animate, all } from './utils' + +export { signal, animate, all } diff --git a/src/lib/motion/signal.ts b/src/lib/motion/signal.ts new file mode 100644 index 0000000..99697ce --- /dev/null +++ b/src/lib/motion/signal.ts @@ -0,0 +1,61 @@ +import { tweened, type TweenedOptions } from 'svelte/motion' +import { cubicInOut } from 'svelte/easing' +import { interpolate } from 'd3-interpolate' +import type { AnimationFn, Resolve } from './types' + +export function signal( + values: TweenValues, + options: TweenedOptions = {} +) { + const { subscribe, update, set } = tweened(values, { + duration: 1000, + easing: cubicInOut, + interpolate, + ...options, + }) + + let tasks: AnimationFn[] = [] + + function to( + this: any, + values: Partial, + toOptions: TweenedOptions = {} + ) { + if (typeof values === 'object') { + tasks.push(() => update((prev) => ({ ...prev, ...values }), toOptions)) + } else { + tasks.push(() => set(values, toOptions)) + } + return this + } + + function reset() { + set(values, { duration: 0 }) + tasks = [] + } + + function sfx(this: any, sound: string, { volume = 0.5 } = {}) { + const audio = new Audio(sound) + audio.volume = volume + + tasks.push(async () => { + audio + .play() + .catch(() => + console.error('To play sounds interact with the page first.') + ) + }) + + return this + } + + async function then(resolve: Resolve) { + for (const task of tasks) { + await task() + } + resolve() + tasks = [] + } + + return { subscribe, to, reset, sfx, then } +} diff --git a/src/lib/motion/types.ts b/src/lib/motion/types.ts new file mode 100644 index 0000000..e97a109 --- /dev/null +++ b/src/lib/motion/types.ts @@ -0,0 +1,2 @@ +export type AnimationFn = () => Promise +export type Resolve = (value?: any) => Promise diff --git a/src/lib/motion/utils.ts b/src/lib/motion/utils.ts new file mode 100644 index 0000000..a81c02e --- /dev/null +++ b/src/lib/motion/utils.ts @@ -0,0 +1,10 @@ +import { onMount } from 'svelte' +import type { AnimationFn } from './types' + +export function animate(fn: AnimationFn) { + onMount(fn) +} + +export function all(...animations: AnimationFn[]) { + return Promise.all(animations) +} diff --git a/src/lib/styles/code.css b/src/lib/styles/code.css new file mode 100644 index 0000000..36adfe4 --- /dev/null +++ b/src/lib/styles/code.css @@ -0,0 +1,56 @@ +.hljs { + display: block; + overflow-x: auto; + padding: 0.5em; + color: #e4f0fb; + background-color: var(--r-background-color); +} + +.hljs-keyword, +.hljs-selector-tag, +.hljs-selector-class, +.hljs-literal, +.hljs-strong, +.hljs-name, +.hljs-string { + color: #5de4c7; +} + +.hljs-code { + color: #66d9ef; +} + +.hljs-class .hljs-title { + color: #add7ff; +} + +.hljs-symbol, +.hljs-regexp, +.hljs-link { + color: #e4f0fb; +} + +.hljs-bullet, +.hljs-subst, +.hljs-title, +.hljs-section, +.hljs-emphasis, +.hljs-type, +.hljs-built_in, +.hljs-builtin-name, +.hljs-selector-attr, +.hljs-selector-pseudo, +.hljs-addition, +.hljs-variable, +.hljs-template-variable, +.hljs-attribute, +.hljs-attr { + color: #add7ff; +} + +.hljs-comment, +.hljs-quote, +.hljs-deletion, +.hljs-meta { + color: #a6accd; +} diff --git a/src/lib/styles/tailwind.css b/src/lib/styles/tailwind.css new file mode 100644 index 0000000..b5c61c9 --- /dev/null +++ b/src/lib/styles/tailwind.css @@ -0,0 +1,3 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; diff --git a/src/lib/styles/theme.css b/src/lib/styles/theme.css new file mode 100644 index 0000000..5215feb --- /dev/null +++ b/src/lib/styles/theme.css @@ -0,0 +1,127 @@ +@import '@fontsource-variable/manrope'; +@import '@fontsource-variable/jetbrains-mono'; + +:root { + --r-background-color: hsl(226 19% 13%); + --r-main-font: 'Manrope Variable'; + --r-main-font-size: 42px; + --r-main-color: hsl(226 19% 98%); + --r-heading-font: 'Manrope'; + --r-code-font: 'JetBrains Mono Variable'; + --r-link-color: hsl(180 100% 50%); +} + +/* required for Reveal.js to work */ +#app { + display: contents; +} + +.reveal-viewport { + background-color: var(--r-background-color); +} + +.reveal { + color: var(--r-main-color); + font-family: var(--r-main-font); + font-size: var(--r-main-font-size); + font-weight: normal; +} + +.reveal pre { + display: block; + position: relative; + margin-inline: auto; + font-family: var(--r-code-font); + font-size: 0.55em; + line-height: 1.6em; + text-align: left; + word-wrap: break-word; +} + +.reveal code { + font-family: var(--r-code-font); + text-transform: none; + tab-size: 2; +} + +.reveal code::-webkit-scrollbar { + display: none; + scrollbar-width: none; +} + +.reveal pre code { + max-height: 600px; + display: block; + padding: 5px; + overflow: auto; + word-wrap: normal; +} + +.reveal .code-wrapper { + white-space: normal; +} + +.reveal .code-wrapper code { + white-space: pre; +} + +.reveal table { + margin: auto; + border-collapse: collapse; + border-spacing: 0; +} + +.reveal table th { + font-weight: bold; +} + +.reveal table th, +.reveal table td { + padding: 0.2em 0.5em 0.2em 0.5em; + text-align: left; + border-bottom: 1px solid; +} + +.reveal table th[align='center'], +.reveal table td[align='center'] { + text-align: center; +} + +.reveal table th[align='right'], +.reveal table td[align='right'] { + text-align: right; +} + +.reveal table tbody tr:last-child th, +.reveal table tbody tr:last-child td { + border-bottom: none; +} + +.reveal sup { + vertical-align: super; + font-size: smaller; +} + +.reveal sub { + vertical-align: sub; + font-size: smaller; +} + +.reveal small { + display: inline-block; + font-size: 0.6em; + line-height: 1.2em; + vertical-align: top; +} + +.reveal small * { + vertical-align: top; +} + +.reveal .controls { + color: var(--r-link-color); +} + +.reveal .progress { + color: var(--r-link-color); +} diff --git a/src/lib/types/highlight.js/index.d.ts b/src/lib/types/highlight.js/index.d.ts new file mode 100644 index 0000000..98dfac2 --- /dev/null +++ b/src/lib/types/highlight.js/index.d.ts @@ -0,0 +1,323 @@ +/* + Yoinked from https://github.com/highlightjs/highlight.js/blob/main/types/index.d.ts +*/ + +/* eslint-disable no-unused-vars */ +/* eslint-disable no-use-before-define */ +// For TS consumers who use Node and don't have dom in their tsconfig lib, import the necessary types here. +/// + +declare module 'highlight.js/private' { + import { CompiledMode, Mode, Language } from 'highlight.js' + + type MatchType = 'begin' | 'end' | 'illegal' + type EnhancedMatch = RegExpMatchArray & { + rule: CompiledMode + type: MatchType + } + type AnnotatedError = Error & { + mode?: Mode | Language + languageName?: string + badRule?: Mode + } + + type KeywordData = [string, number] + type KeywordDict = Record +} +declare module 'highlight.js' { + import { KeywordDict } from 'highlight.js/private' + + export type HLJSApi = PublicApi & ModesAPI + + export interface VuePlugin { + install: (vue: any) => void + } + + // perhaps make this an interface? + type RegexEitherOptions = { + capture?: boolean + } + + interface PublicApi { + highlight: ( + codeOrLanguageName: string, + optionsOrCode: string | HighlightOptions, + ignoreIllegals?: boolean + ) => HighlightResult + highlightAuto: ( + code: string, + languageSubset?: string[] + ) => AutoHighlightResult + highlightBlock: (element: HTMLElement) => void + highlightElement: (element: HTMLElement) => void + configure: (options: Partial) => void + initHighlighting: () => void + initHighlightingOnLoad: () => void + highlightAll: () => void + registerLanguage: (languageName: string, language: LanguageFn) => void + unregisterLanguage: (languageName: string) => void + listLanguages: () => string[] + registerAliases: ( + aliasList: string | string[], + { languageName }: { languageName: string } + ) => void + getLanguage: (languageName: string) => Language | undefined + autoDetection: (languageName: string) => boolean + inherit: (original: T, ...args: Record[]) => T + addPlugin: (plugin: HLJSPlugin) => void + removePlugin: (plugin: HLJSPlugin) => void + debugMode: () => void + safeMode: () => void + versionString: string + vuePlugin: () => VuePlugin + regex: { + concat: (...args: (RegExp | string)[]) => string + lookahead: (re: RegExp | string) => string + either: ( + ...args: + | (RegExp | string)[] + | [...(RegExp | string)[], RegexEitherOptions] + ) => string + optional: (re: RegExp | string) => string + anyNumberOfTimes: (re: RegExp | string) => string + } + newInstance: () => HLJSApi + } + + interface ModesAPI { + SHEBANG: (mode?: Partial & { binary?: string | RegExp }) => Mode + BACKSLASH_ESCAPE: Mode + QUOTE_STRING_MODE: Mode + APOS_STRING_MODE: Mode + PHRASAL_WORDS_MODE: Mode + COMMENT: ( + begin: string | RegExp, + end: string | RegExp, + modeOpts?: Mode | {} + ) => Mode + C_LINE_COMMENT_MODE: Mode + C_BLOCK_COMMENT_MODE: Mode + HASH_COMMENT_MODE: Mode + NUMBER_MODE: Mode + C_NUMBER_MODE: Mode + BINARY_NUMBER_MODE: Mode + REGEXP_MODE: Mode + TITLE_MODE: Mode + UNDERSCORE_TITLE_MODE: Mode + METHOD_GUARD: Mode + END_SAME_AS_BEGIN: (mode: Mode) => Mode + // built in regex + IDENT_RE: string + UNDERSCORE_IDENT_RE: string + MATCH_NOTHING_RE: string + NUMBER_RE: string + C_NUMBER_RE: string + BINARY_NUMBER_RE: string + RE_STARTERS_RE: string + } + + export type LanguageFn = (hljs: HLJSApi) => Language + export type CompilerExt = (mode: Mode, parent: Mode | Language | null) => void + + export interface HighlightResult { + code?: string + relevance: number + value: string + language?: string + illegal: boolean + errorRaised?: Error + // * for auto-highlight + secondBest?: Omit + // private + _illegalBy?: illegalData + _emitter: Emitter + _top?: Language | CompiledMode + } + export interface AutoHighlightResult extends HighlightResult {} + + export interface illegalData { + message: string + context: string + index: number + resultSoFar: string + mode: CompiledMode + } + + export type BeforeHighlightContext = { + code: string + language: string + result?: HighlightResult + } + export type PluginEvent = keyof HLJSPlugin + export type HLJSPlugin = { + 'after:highlight'?: (result: HighlightResult) => void + 'before:highlight'?: (context: BeforeHighlightContext) => void + 'after:highlightElement'?: (data: { + el: Element + result: HighlightResult + text: string + }) => void + 'before:highlightElement'?: (data: { + el: Element + language: string + }) => void + // TODO: Old API, remove with v12 + 'after:highlightBlock'?: (data: { + block: Element + result: HighlightResult + text: string + }) => void + 'before:highlightBlock'?: (data: { + block: Element + language: string + }) => void + } + + interface EmitterConstructor { + new (opts: any): Emitter + } + + export interface HighlightOptions { + language: string + ignoreIllegals?: boolean + } + + export interface HLJSOptions { + noHighlightRe: RegExp + languageDetectRe: RegExp + classPrefix: string + cssSelector: string + languages?: string[] + __emitter: EmitterConstructor + ignoreUnescapedHTML?: boolean + throwUnescapedHTML?: boolean + } + + export interface CallbackResponse { + data: Record + ignoreMatch: () => void + isMatchIgnored: boolean + } + + export type ModeCallback = ( + match: RegExpMatchArray, + response: CallbackResponse + ) => void + export type Language = LanguageDetail & Partial + export interface Mode extends ModeCallbacks, ModeDetails {} + + export interface LanguageDetail { + name?: string + unicodeRegex?: boolean + rawDefinition?: () => Language + aliases?: string[] + disableAutodetect?: boolean + contains: Mode[] + case_insensitive?: boolean + keywords?: string | string[] | Record + isCompiled?: boolean + exports?: any + classNameAliases?: Record + compilerExtensions?: CompilerExt[] + supersetOf?: string + } + + // technically private, but exported for convenience as this has + // been a pretty stable API and is quite useful + export interface Emitter { + startScope(name: string): void + endScope(): void + addText(text: string): void + toHTML(): string + finalize(): void + __addSublanguage(emitter: Emitter, subLanguageName: string): void + } + + export type HighlightedHTMLElement = HTMLElement & { + result?: object + secondBest?: object + parentNode: HTMLElement + } + + /* modes */ + + interface ModeCallbacks { + 'on:end'?: Function + 'on:begin'?: ModeCallback + } + + export interface CompiledLanguage extends LanguageDetail, CompiledMode { + isCompiled: true + contains: CompiledMode[] + keywords: Record + } + + export type CompiledScope = Record & { + _emit?: Record + _multi?: boolean + _wrap?: string + } + + export type CompiledMode = Omit & { + begin?: RegExp | string + end?: RegExp | string + scope?: string + contains: CompiledMode[] + keywords: KeywordDict + data: Record + terminatorEnd: string + keywordPatternRe: RegExp + beginRe: RegExp + endRe: RegExp + illegalRe: RegExp + matcher: any + isCompiled: true + starts?: CompiledMode + parent?: CompiledMode + beginScope?: CompiledScope + endScope?: CompiledScope + } + + interface ModeDetails { + begin?: RegExp | string | (RegExp | string)[] + match?: RegExp | string | (RegExp | string)[] + end?: RegExp | string | (RegExp | string)[] + // deprecated in favor of `scope` + className?: string + scope?: string | Record + beginScope?: string | Record + endScope?: string | Record + contains?: ('self' | Mode)[] + endsParent?: boolean + endsWithParent?: boolean + endSameAsBegin?: boolean + skip?: boolean + excludeBegin?: boolean + excludeEnd?: boolean + returnBegin?: boolean + returnEnd?: boolean + __beforeBegin?: Function + parent?: Mode + starts?: Mode + lexemes?: string | RegExp + keywords?: string | string[] | Record + beginKeywords?: string + relevance?: number + illegal?: string | RegExp | Array + variants?: Mode[] + cachedVariants?: Mode[] + // parsed + subLanguage?: string | string[] + isCompiled?: boolean + label?: string + } + + const hljs: HLJSApi + export default hljs +} + +declare module 'highlight.js/lib/languages/*' { + import { LanguageFn } from 'highlight.js' + const defineLanguage: LanguageFn + export default defineLanguage +} diff --git a/src/main.ts b/src/main.ts new file mode 100644 index 0000000..d64a5b3 --- /dev/null +++ b/src/main.ts @@ -0,0 +1,8 @@ +import Slides from './slides.svelte' +import '@styles/tailwind.css' + +const app = new Slides({ + target: document.getElementById('app'), +}) + +export default app diff --git a/src/slides.svelte b/src/slides.svelte new file mode 100644 index 0000000..64166a8 --- /dev/null +++ b/src/slides.svelte @@ -0,0 +1,276 @@ + + + + +

React Builtin Hooks

+ + + + +

React Builtin Hooks

useState()

useEffect()

useContext()

useReducer()

useRef()

useMemo()

useCallback()

+ + +

What is a State?

+ +

+ State is something which holds the info or details about a Component's State at a TIME +
+ It can change over time. +
+ Whenever the state changes the COMPONENT attached to it re-renders +

+ + + +

useState()

+ +

+ useState hooks allows to have state variable inside a FUNCTIONAL COMPONENT +
+ useState ENCAPSULATES only a single value +
+ For mulatiple values you may need to call multiple useState's +
+ useState arguments +
- + Initialization of a state variable +
- + Passing function as initial value - to calculate an initial value +
+
+ Managing multiple states +
- + Multi-variable's +
- + Object as value +
+

+ + + +

Side Effects

+ + + +

+ Something which is outside the scope of REACT +
- + Calling AJAX requests +
- + Calling Web API stuffs (document.get...) +
- + localStorage etc... +
- + setTimeout, setInterval +
+
+ Everything which is not part of React Library +
+ Fun Fact - What happens if you call setTimeout without any arguments +
- + Executes outside the execution queue +
+

+ + + +

useEffect


+				{`
+				useEffect(() => {
+					document.title = "Hey There, I'm from useEffect"
+				})
+				`}
+

+ + +

useEffect


+				{`
+				useEffect(() => {
+					document.title = "Hey There, I'm from useEffect"
+				}) ← No Arguments means this will be called each time 
+				     this component re-renders
+				`}
+

+ + +

useEffect


+				{`
+				useEffect(() => {
+					document.title = "Hey There, I'm from useEffect"
+				}, []) ← An empty array as an argument will run the 
+				       effect once the component is mounted
+				`}
+

+ + +

useEffect


+				{`
+				useEffect(() => {
+					document.title = "Hey There, I'm from useEffect"
+				}, [prop1]) ← We can pass value
+				`}
+

+ + +

useEffect


+				{`
+				useEffect(() => {
+					document.title = "Hey There, I'm from useEffect"
+				}, [prop1, state1]) ← Actually we can pass multiple-values
+				`}
+

+ + +

useEffect


+				{`
+				useEffect(() => {
+					document.title = "Hey There, I'm from useEffect"
+				}, [prop1, state1]) ← This is called dependency list
+				`}
+

+ + +

useEffect


+				{`
+				useEffect(() => {
+					document.title = "Hey There, I'm from useEffect"
+				}, [prop1, state1]) ← Effect will run whenever any
+										of the values on dependency list changes
+				`}
+

+ + +

useEffect


+				{`
+				useEffect(() => {
+					document.title = "Hey There, I'm from useEffect";
+
+					return () => {
+						// Clean Up function 🧹
+					}
+				}, [prop1, state1]);
+				`}
+

+ +

+ You can do removeListeners, unsubscribes, reset layouts etc +
+ This will be called by default when component unmouts. +

+ + + diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts new file mode 100644 index 0000000..4078e74 --- /dev/null +++ b/src/vite-env.d.ts @@ -0,0 +1,2 @@ +/// +/// -- cgit v1.2.3

Site Under Maintenance