diff --git a/day17/vite.config.js.timestamp-1665100531736.mjs b/day17/vite.config.js.timestamp-1665100531736.mjs
new file mode 100644
index 0000000..66ceccb
--- /dev/null
+++ b/day17/vite.config.js.timestamp-1665100531736.mjs
@@ -0,0 +1,14 @@
+// vite.config.js
+var vite_config_default = {
+ build: {
+ target: "es2020"
+ },
+ server: {
+ port: 3e3,
+ host: "0.0.0.0"
+ }
+};
+export {
+ vite_config_default as default
+};
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcuanMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCIvaG9tZS9qdWxzMDcvQ29kZS9ub2RlLXByb2plY3RzLzEwMERheXNPZkNvZGUvZGF5MTRcIjtjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfZmlsZW5hbWUgPSBcIi9ob21lL2p1bHMwNy9Db2RlL25vZGUtcHJvamVjdHMvMTAwRGF5c09mQ29kZS9kYXkxNC92aXRlLmNvbmZpZy5qc1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9pbXBvcnRfbWV0YV91cmwgPSBcImZpbGU6Ly8vaG9tZS9qdWxzMDcvQ29kZS9ub2RlLXByb2plY3RzLzEwMERheXNPZkNvZGUvZGF5MTQvdml0ZS5jb25maWcuanNcIjsvKiogQHR5cGUge2ltcG9ydCgndml0ZScpLlVzZXJDb25maWd9ICovXG5leHBvcnQgZGVmYXVsdCB7XG4gICAgYnVpbGQ6IHtcbiAgICAgICAgdGFyZ2V0OiAnZXMyMDIwJyxcbiAgICB9LFxuICAgIFxuICAgIHNlcnZlcjoge1xuICAgICAgICBwb3J0OiAzMDAwLFxuICAgICAgICBob3N0OiAnMC4wLjAuMCdcbiAgICB9XG59XG4iXSwKICAibWFwcGluZ3MiOiAiO0FBQ0EsSUFBTyxzQkFBUTtBQUFBLEVBQ1gsT0FBTztBQUFBLElBQ0gsUUFBUTtBQUFBLEVBQ1o7QUFBQSxFQUVBLFFBQVE7QUFBQSxJQUNKLE1BQU07QUFBQSxJQUNOLE1BQU07QUFBQSxFQUNWO0FBQ0o7IiwKICAibmFtZXMiOiBbXQp9Cg==
diff --git a/day18/.env b/day18/.env
new file mode 100644
index 0000000..89258af
--- /dev/null
+++ b/day18/.env
@@ -0,0 +1 @@
+VITE_VERBOSE = true
\ No newline at end of file
diff --git a/day18/index.html b/day18/index.html
new file mode 100644
index 0000000..c197335
--- /dev/null
+++ b/day18/index.html
@@ -0,0 +1,29 @@
+
+
+
+
+ Document
+
+
+
+
+
+
+
+
+ Javascript is
+ reccommended to run this app
+
+
+
count is: { appState.contents.count }
+
+
\ No newline at end of file
diff --git a/day18/src/components/RouterLink.devto b/day18/src/components/RouterLink.devto
new file mode 100644
index 0000000..b731bae
--- /dev/null
+++ b/day18/src/components/RouterLink.devto
@@ -0,0 +1 @@
+TODO
\ No newline at end of file
diff --git a/day18/src/components/cookieInput.devto b/day18/src/components/cookieInput.devto
new file mode 100644
index 0000000..73438c8
--- /dev/null
+++ b/day18/src/components/cookieInput.devto
@@ -0,0 +1,12 @@
+
+
Username cookie is: {appState.contents.cookie}
+
+
+ Submit
+ Cookie
+
\ No newline at end of file
diff --git a/day18/src/components/htmlInput.devto b/day18/src/components/htmlInput.devto
new file mode 100644
index 0000000..71bd52b
--- /dev/null
+++ b/day18/src/components/htmlInput.devto
@@ -0,0 +1,11 @@
+
+
html input is: {appState.contents.html}
+
+
\ No newline at end of file
diff --git a/day18/src/components/myDad.devto b/day18/src/components/myDad.devto
new file mode 100644
index 0000000..873bddd
--- /dev/null
+++ b/day18/src/components/myDad.devto
@@ -0,0 +1,25 @@
+
+
My dad {appState.contents.year}
+
+
+
+
+
\ No newline at end of file
diff --git a/day18/src/components/textInput.devto b/day18/src/components/textInput.devto
new file mode 100644
index 0000000..a09dcc5
--- /dev/null
+++ b/day18/src/components/textInput.devto
@@ -0,0 +1,10 @@
+
+
Input is: {appState.contents.text}
+
+
\ No newline at end of file
diff --git a/day18/src/entry-client.js b/day18/src/entry-client.js
new file mode 100644
index 0000000..9174e9a
--- /dev/null
+++ b/day18/src/entry-client.js
@@ -0,0 +1,44 @@
+import { appState } from './main';
+
+export async function mount(mounted) {
+ eval(mounted)
+}
+
+let SSR
+
+export function isSSR() {
+ if (!import.meta.env.SSR) {
+ if (SSR !== undefined) return SSR
+ SSR = true;
+ document.head.childNodes.forEach((e) => {
+ if (e.nodeName == '#comment' && e.textContent == `style-outlet`) {
+ SSR = false
+ }
+ })
+ return SSR
+ }
+}
+
+if (!import.meta.env.SSR) {
+ if (!isSSR()) {
+ async function initClient() {
+ await import('./style.css')
+ const { renderPage } = await import('./lib/router/pageRenderer')
+ await renderPage()
+ window.onpopstate = async (e) => {
+ if (e.state === null) {
+ return
+ }
+ await renderPage()
+ }
+ }
+ initClient()
+ } else {
+ async function initSSR() {
+ console.log('hydrate')
+ let { hydratePage } = await import('./lib/router/hydrationManager')
+ await hydratePage()
+ }
+ initSSR()
+ }
+}
\ No newline at end of file
diff --git a/day18/src/entry-server.js b/day18/src/entry-server.js
new file mode 100644
index 0000000..c037109
--- /dev/null
+++ b/day18/src/entry-server.js
@@ -0,0 +1,6 @@
+import { render } from './lib/templateRenderer';
+import { appState } from './main';
+
+export function SSRPage(pageName) {
+ return render(pageName)
+}
\ No newline at end of file
diff --git a/day18/src/layouts/404.devto b/day18/src/layouts/404.devto
new file mode 100644
index 0000000..a350894
--- /dev/null
+++ b/day18/src/layouts/404.devto
@@ -0,0 +1,5 @@
+
+
404
+
Looks like you're lost
+
+ {
+ if (e === undefined) return
+ // here we check for elements with the name of "data-token-"
+ const uuid = e.split("").map(c => c.charCodeAt(0).toString(16).padStart(2, "0")).join("")
+ const listeningElements = document.querySelectorAll(`[${"data-token-" + uuid}]`)
+ listeningElements.forEach((elm) => {
+ if (elm.parentElement?.getAttribute('d-once') !== null) {
+ elm.parentElement?.removeAttribute('d-once');
+ return;
+ }
+
+ if (elm.parentElement?.getAttribute('d-html') !== null) {
+ appState.listen(e, (change) => elm.innerHTML = change);
+ elm.parentElement?.removeAttribute('d-html')
+ } else {
+ appState.listen(e, (change) => elm.textContent = change);
+ }
+ })
+ })
+
+ // here we look for elements with the d-on:click attribute and on click run the function in the attribute
+ let elms = documentBody.querySelectorAll('*[d-on\\3A click]')
+ elms.forEach((e) => {
+ const clickFunction = e.getAttribute("d-on\:click")
+ e.removeAttribute('d-on\:click')
+ if (!clickFunction) return;
+ e.addEventListener('click', () => {
+ eval(clickFunction)
+ })
+ })
+
+ document.body.addEventListener('keydown', (e) => {
+ ctrlPressed = e.ctrlKey
+ })
+
+ document.body.addEventListener('keyup', (e) => {
+ ctrlPressed = e.ctrlKey
+ })
+
+ // here we determine if an element should be deleted form the DOM via the d-if directive
+ let conditionalElms = document.querySelectorAll('*[d-if]')
+ conditionalElms.forEach(async (e) => {
+ const condition = e.getAttribute('d-if')
+
+ let siblingConditionalElms = []
+ // recursively check for subsequent elements with the d-else of d-else-if attribute
+ function checkForConditionSibling(elm) {
+ if (elm.nextElementSibling?.getAttribute('d-else-if') !== null) {
+ siblingConditionalElms.push(elm.nextElementSibling)
+ checkForConditionSibling(elm.nextElementSibling)
+ }
+
+ if (elm.nextElementSibling?.getAttribute('d-else') !== null) {
+ siblingConditionalElms.push(elm.nextElementSibling)
+ }
+ }
+ checkForConditionSibling(e)
+
+ function resetHTML() {
+ e.innerHTML = ''
+ for (let i = 0; i < siblingConditionalElms.length; i++) {
+ siblingConditionalElms[i].innerHTML = ''
+ }
+ }
+
+ let ifStatement = `if (!!eval(condition)) {
+ e.innerHTML = originalHTML
+ } `
+
+ for (let i = 0; i < siblingConditionalElms.length; i++) {
+ const originHTML = siblingConditionalElms[i].innerHTML
+ siblingConditionalElms[i].innerHTML = ''
+ let statementDirective = 'else'
+ if (siblingConditionalElms[i].getAttribute('d-else-if') !== null) {
+ statementDirective = 'else if'
+ }
+ const condition = eval(`siblingConditionalElms[i].getAttribute('d-' + statementDirective.split(' ').join('-'))`)
+
+ if (statementDirective == 'else if') {
+ statementDirective = 'else if (' + condition + ')'
+ }
+
+ ifStatement = ifStatement + statementDirective + `{
+ siblingConditionalElms[${i}].innerHTML = "${originHTML}"
+ }`
+ }
+
+ e.removeAttribute('d-if')
+ const originalHTML = e.innerHTML
+ if (!condition) return;
+ if (condition.includes("appState.contents.")) {
+ let reactiveProp = /appState\.contents\.[a-zA-Z]+/.exec(condition)
+ if (!reactiveProp) return;
+ reactiveProp = reactiveProp[0].split('.')[2]
+ appState.listen(reactiveProp, () => {
+ resetHTML()
+ eval(ifStatement)
+ })
+ }
+
+
+ eval(ifStatement)
+ })
+
+ let pointerEnterElms = document.querySelectorAll('*[d-on\\3A pointerEnter]')
+ pointerEnterElms.forEach((e) => {
+ const enterFunction = e.getAttribute('d-on\:pointerEnter')
+ e.removeAttribute('d-on\:pointerEnter')
+ if (!enterFunction) return;
+ e.addEventListener('pointerenter', (event) => {
+ eval(enterFunction)
+ })
+ })
+
+ let pointerExitElms = document.querySelectorAll('*[d-on\\3A pointerExit]')
+ pointerExitElms.forEach((e) => {
+ const exitFunction = e.getAttribute('d-on\:pointerExit')
+ e.removeAttribute('d-on\:pointerExit')
+ if (!exitFunction) return;
+ e.addEventListener('pointerleave', (event) => {
+ eval(exitFunction)
+ })
+ })
+
+ let mouseDownElms = document.querySelectorAll('*[d-on\\3A mouseDown]')
+ mouseDownElms.forEach((e) => {
+ const downFunction = e.getAttribute('d-on\:mouseDown')
+ e.removeAttribute('d-on\:mouseDown')
+ if (!downFunction) return;
+ e.addEventListener('mousedown', (event) => {
+ eval(downFunction)
+ })
+ })
+
+ let mouseUpElms = document.querySelectorAll('*[d-on\\3A mouseUp]')
+ mouseUpElms.forEach((e) => {
+ const dupFunction = e.getAttribute('d-on\:mouseUp')
+ e.removeAttribute('d-on\:mouseUp')
+ if (!dupFunction) return;
+ e.addEventListener('mouseup', (event) => {
+ eval(dupFunction)
+ })
+ })
+
+ // here we look for elements with the d-model attribute and if there is any input in the element then we update the appState item with the name
+ // of the attribute value
+ // example: if the user types "hello" into a text field with the d-model attribute of "text" then we update the appState item with the name "text"
+ // to "hello"
+ // similar to vue.js v-model attribute
+ let modelElms = document.querySelectorAll('input[d-model], textarea[d-model]');
+ modelElms.forEach((e) => {
+ const modelName = e.getAttribute("d-model")
+ if (!modelName) return;
+ e.addEventListener('input', (event) => {
+ appState.contents[modelName] = event.target.value
+ })
+ })
+
+ let anchorElms = document.querySelectorAll('a');
+ anchorElms.forEach((e) => {
+ e.addEventListener('click', async (click) => {
+ event.preventDefault()
+ let { renderPage } = await import('./pageRenderer')
+ renderPage(click.target.getAttribute('href'));
+ })
+ })
+
+ // if SSR is enabled then we should prefetch pages so that they will render instantly when navigated to
+ if (isSSR()) {
+ let linkPrefetcher = await import('./linkPrefetcher.js');
+ linkPrefetcher.default(anchorElms)
+ }
+}
\ No newline at end of file
diff --git a/day18/src/lib/router/linkPrefetcher.js b/day18/src/lib/router/linkPrefetcher.js
new file mode 100644
index 0000000..90f8b40
--- /dev/null
+++ b/day18/src/lib/router/linkPrefetcher.js
@@ -0,0 +1,50 @@
+export default (anchorElms) => {
+ let prefetchedPages = []
+
+ function prefetchLink(url) {
+ const prefetchElm = document.createElement('link')
+ prefetchElm.rel = 'prefetch'
+ prefetchElm.href = url
+ prefetchElm.as = 'document'
+
+ if (import.meta.env.VITE_VERBOSE && !import.meta.env.PROD) {
+ prefetchElm.onload = () => { console.log('prefetched url: ' + url) }
+ prefetchElm.onerror = (err) => { console.error('cant prefetch url: ' + url, err) }
+ }
+
+ document.head.appendChild(prefetchElm)
+ prefetchedPages.push(url)
+ }
+
+ if (!('IntersectionObserver' in window)) return
+ const visibleObserver = new IntersectionObserver((entries, observer) => {
+ entries.forEach((entry) => {
+ const url = entry.target.getAttribute('href')
+ if (prefetchedPages.includes(url)) {
+ observer.unobserve(entry.target);
+ return
+ }
+ if (entry.isIntersecting) {
+ prefetchLink(url)
+ observer.unobserve(entry.target)
+ }
+ });
+ })
+
+ anchorElms.forEach((e) => {
+ const prefetch = e.getAttribute('client\:prefetch');
+ let method
+ if (prefetch == null) return
+ if (!!prefetch) method = prefetch
+ if (e.href.includes(document.location.origin) && !e.href.includes('#') && !e.href !== (document.location.href || document.location.href + '/')) {
+ // page would be a valid prefetch
+ if (method == 'hover') {
+ const url = e.getAttribute('href')
+ e.addEventListener('pointerenter', () => prefetchLink(url), { once: true })
+ } else {
+ // method is empty, visible, or invalid, either way we so the default of visible
+ visibleObserver.observe(e)
+ }
+ }
+ })
+}
\ No newline at end of file
diff --git a/day18/src/lib/router/pageRenderer.js b/day18/src/lib/router/pageRenderer.js
new file mode 100644
index 0000000..ffe9269
--- /dev/null
+++ b/day18/src/lib/router/pageRenderer.js
@@ -0,0 +1,166 @@
+import { compileToString } from '../templateRenderer'
+import { isSSR } from '../../entry-client'
+import { appState } from '../../main'
+const tags = ["a", "abbr", "acronym", "address", "applet", "area", "article", "aside", "audio", "b", "base", "basefont", "bdi", "bdo", "bgsound", "big", "blink", "blockquote", "body", "br", "button", "canvas", "caption", "center", "cite", "code", "col", "colgroup", "content", "data", "datalist", "dd", "decorator", "del", "details", "dfn", "dir", "div", "dl", "dt", "element", "em", "embed", "fieldset", "figcaption", "figure", "font", "footer", "form", "frame", "frameset", "h1", "h2", "h3", "h4", "h5", "h6", "head", "header", "hgroup", "hr", "html", "i", "iframe", "img", "input", "ins", "isindex", "kbd", "keygen", "label", "legend", "li", "link", "listing", "main", "map", "mark", "marquee", "menu", "menuitem", "meta", "meter", "nav", "nobr", "noframes", "noscript", "object", "ol", "optgroup", "option", "output", "p", "param", "plaintext", "pre", "progress", "q", "rp", "rt", "ruby", "s", "samp", "script", "section", "select", "shadow", "small", "source", "spacer", "span", "strike", "strong", "style", "sub", "summary", "sup", "table", "tbody", "td", "template", "textarea", "tfoot", "th", "thead", "time", "title", "tr", "track", "tt", "u", "ul", "var", "video", "wbr", "xmp"]
+let enabled = true;
+let ctrlPressed = false;
+
+function isHTML(tag) {
+ return tags.indexOf(tag.trim().toLowerCase()) > -1;
+}
+
+let documentBody
+
+if (import.meta.env.SSR) {
+ const fs = await import('fs')
+ const path = await import('path')
+ documentBody = fs.readFileSync(
+ path.resolve('index.html'),
+ 'utf-8'
+ )
+} else {
+ documentBody = document.getElementById('app')
+}
+
+
+// Global function to handle rendering a page and navigation
+export async function renderPage(route) {
+ if (ctrlPressed && route) {
+ window.open(route, '__blank')
+ return
+ }
+ if (isSSR() && route) {
+ window.location.href = route
+ return
+ }
+ if (isSSR()) return;
+
+ // Gotta remove all the style and script tags from this page so they dont leak into other pages
+ let decimateMode = false
+ document.head.childNodes.forEach((e, i, arr) => {
+ if (!arr[i - 2]) return
+ if (decimateMode) {
+ document.head.removeChild(e)
+ }
+ if (arr[i - 2].nodeName == '#comment' && arr[i - 2].textContent == `style-outlet`) {
+ decimateMode = true
+ }
+ })
+
+
+ if (!window.history) {
+ enabled = false;
+ return;
+ }
+
+ if (!documentBody) {
+ throw new Error('Fatal Error: element with id app not found')
+ }
+
+ if (route) history.pushState('', '', route);
+
+ let fileName = window.location.pathname.split('/');
+ if (fileName[1] === '') {
+ fileName = '/index';
+ } else {
+ fileName = fileName.join('/').toLowerCase().trim();
+ }
+
+ const page = await loadPage(fileName);
+
+ // tell the web page that the router has loaded a new page, SSR is unaffected
+ document.dispatchEvent(new CustomEvent('router:load', {
+ detail: {
+ page: fileName,
+ url: window.location.pathname,
+ tempalte: page,
+ timeStamp: new Date().getTime()
+ }
+ }))
+
+ const stringifiedTemplate = await compileToString(page);
+
+ if (import.meta.env.VITE_VERBOSE && !import.meta.env.PROD && !import.meta.env.SSR) {
+ console.groupCollapsed('Loaded page ' + fileName);
+ console.info('Template: ' + page)
+ console.info('stringified template: ' + stringifiedTemplate.fnStr)
+ console.groupEnd()
+ }
+
+ documentBody.innerHTML = await eval(stringifiedTemplate.fnStr);
+ if (stringifiedTemplate.styles) {
+ const cssElement = document.createElement('style')
+ cssElement.type = 'text/css'
+ cssElement.innerHTML = stringifiedTemplate.styles
+ document.head.appendChild(cssElement)
+ }
+
+ if (stringifiedTemplate.script) {
+ const scriptElement = document.createElement('script')
+ scriptElement.type = 'text/javascript'
+ scriptElement.innerHTML = stringifiedTemplate.script
+ document.head.appendChild(scriptElement)
+ }
+ // here we hydrate/re-hydrate the page content
+ const { hydratePage} = await import('./hydrationManager')
+ await hydratePage()
+}
+
+async function loadPage(page) {
+ if (import.meta.env.SSR) return;
+ if (isSSR()) return;
+ const file = await fetchPage(page)
+
+ return file;
+}
+
+async function fetchPage(url) {
+ let file
+ let path
+
+ (import.meta.env.PROD) ? path = '/' : path = '/src/'
+
+ await fetch(path + `pages${url}.devto`).then((response) => {
+ if (response.ok) {
+ return response.text();
+ }
+ throw new Error('Something went wrong');
+ })
+ .then((data) => {
+ file = data
+ })
+ .catch(async (error) => {
+ await fetch(path + 'layouts/404.devto').then((response) => {
+ if (response.ok) {
+ return response.text();
+ }
+ throw new Error('Something went wrong');
+ })
+ .then((data) => {
+ file = data
+ })
+ });
+
+ let template = file
+ let elements = file.split('<')
+
+ await Promise.all(elements.map(async (component) => {
+ component = component.split(' ')[0]
+ if (component.includes('/') || component.includes('{') || !component) return
+ component = component.split('>')[0]
+ if (isHTML(component)) return
+ await fetch(path + `components/${component}.devto`).then((response) => {
+ if (response.ok) {
+ return response.text();
+ }
+ throw new Error('Something went wrong');
+ })
+ .then((data) => {
+ file = data
+ })
+ template = template.replace('<' + component + ' />', file)
+ })
+ )
+
+ return template
+}
\ No newline at end of file
diff --git a/day18/src/lib/templateRenderer.js b/day18/src/lib/templateRenderer.js
new file mode 100644
index 0000000..23988fd
--- /dev/null
+++ b/day18/src/lib/templateRenderer.js
@@ -0,0 +1,92 @@
+export const compileToString = async (template) => {
+ let styles = ``
+
+ const style = parseFromRegex(template, /')) {
+ styles += arr[i + 1]
+ }
+
+ // remove the style from the body
+ template = template.split('').join('')
+ })
+
+ let script = ``
+
+ const scriptContent = parseFromRegex(template, /')) {
+ script += arr[i + 1]
+ }
+
+ // remove the style from the body
+ template = template.split('').join('')
+ })
+
+ let ast = parseFromRegex(template, /{(.*?)}/g);
+ let fnStr = `\`\``;
+
+ ast.map(async t => {
+ // checking to see if it is an interpolation
+ if (t.startsWith("{") && t.endsWith("}")) {
+ // TODO: rewrite comment
+ let bracketVariable = t.split(/{|}/).filter(Boolean)[0].trim();
+ const parentElement = fnStr.split(t)[0].split('>')
+ const isRawHTML = parentElement[parentElement.length - 2].includes('d-html')
+ if (bracketVariable.startsWith("appState.contents.")) {
+ const uuid = bracketVariable.substring(bracketVariable.length, 18).split('').map(c => c.charCodeAt(0).toString(16).padStart(2, "0")).join("");
+ fnStr = fnStr.substring(0, fnStr.length - 1) + `\``;
+ } else {
+ fnStr = fnStr.substring(0, fnStr.length - 1) + `\``;
+ }
+ let runVar = `((${bracketVariable}).toString().replace(/&/g,'&').replace(//g,'>'))`
+
+ if (isRawHTML) {
+ runVar = `(${bracketVariable})`
+ }
+
+ fnStr += `+ (${runVar})` + `+\` \``;
+ } else {
+ // append the string to the fnStr
+ fnStr += `+\`${t}\``;
+ }
+ });
+
+ if (import.meta.env.VITE_VERBOSE && !import.meta.env.PROD && !import.meta.env.SSR) {
+ console.groupCollapsed('Compiled tempalte to String')
+ console.info('Template String: ' + fnStr)
+ console.groupEnd()
+ }
+
+
+ return { fnStr, styles, script };
+}
+
+const parseFromRegex = (template, regex) => {
+ let result = regex.exec(template);
+ const arr = []
+ let firstPos
+
+ while (result) {
+ firstPos = result.index
+ if (firstPos !== 0) {
+ arr.push(template.substr(0, firstPos))
+ template = template.slice(firstPos)
+ }
+
+ arr.push(result[0])
+ template = template.slice(result[0].length)
+ result = regex.exec(template)
+ }
+
+ if (template) arr.push(template)
+ return arr
+}
+
+export const render = (template) => {
+ return compileToString(template)
+}
\ No newline at end of file
diff --git a/day18/src/main.js b/day18/src/main.js
new file mode 100644
index 0000000..1d59c88
--- /dev/null
+++ b/day18/src/main.js
@@ -0,0 +1,11 @@
+import { Reactive } from './lib/ReactiveObject'
+import { getCookie } from './lib/cookieManager';
+
+export const appState = new Reactive({
+ count: 0,
+ cookie: getCookie('username'),
+ text: '',
+ html: '',
+ year: '',
+ cookiedata: "",
+});
\ No newline at end of file
diff --git a/day18/src/pages/index.devto b/day18/src/pages/index.devto
new file mode 100644
index 0000000..aa75130
--- /dev/null
+++ b/day18/src/pages/index.devto
@@ -0,0 +1,12 @@
+
\ No newline at end of file
diff --git a/day18/src/pages/page2.devto b/day18/src/pages/page2.devto
new file mode 100644
index 0000000..770c376
--- /dev/null
+++ b/day18/src/pages/page2.devto
@@ -0,0 +1,8 @@
+
\ No newline at end of file
diff --git a/day18/src/pages/page3.devto b/day18/src/pages/page3.devto
new file mode 100644
index 0000000..b505c9b
--- /dev/null
+++ b/day18/src/pages/page3.devto
@@ -0,0 +1,6 @@
+
\ No newline at end of file
diff --git a/day18/src/style.css b/day18/src/style.css
new file mode 100644
index 0000000..a3f80c7
--- /dev/null
+++ b/day18/src/style.css
@@ -0,0 +1,21 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+html,
+body {
+ background-color: #101010;
+ color: #FEFEFE;
+ font-family: Helvetica, Arial, Sans-Serif;
+ padding: 0;
+ margin: 0;
+ min-height: 100vh;
+}
+
+a:hover {
+ text-decoration: underline;
+}
+
+.container__content {
+ box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
+}
\ No newline at end of file
diff --git a/day18/tailwind.config.cjs b/day18/tailwind.config.cjs
new file mode 100644
index 0000000..f33704f
--- /dev/null
+++ b/day18/tailwind.config.cjs
@@ -0,0 +1,17 @@
+/** @type {import('tailwindcss').Config} */
+const colors = require('tailwindcss/colors')
+
+module.exports = {
+ content: [
+ "./index.html",
+ "./src/**/*.{devto,js,ts,jsx,tsx}",
+ ],
+ theme: {
+ extend: {
+ colors: {
+ gray: colors.zinc
+ }
+ },
+ },
+ plugins: [],
+}
diff --git a/day18/vite.config.js b/day18/vite.config.js
new file mode 100644
index 0000000..8488159
--- /dev/null
+++ b/day18/vite.config.js
@@ -0,0 +1,11 @@
+/** @type {import('vite').UserConfig} */
+export default {
+ build: {
+ target: 'es2020',
+ },
+
+ server: {
+ port: 8080,
+ host: '0.0.0.0'
+ }
+}
diff --git a/day18/vite.config.js.timestamp-1665100531736.mjs b/day18/vite.config.js.timestamp-1665100531736.mjs
new file mode 100644
index 0000000..66ceccb
--- /dev/null
+++ b/day18/vite.config.js.timestamp-1665100531736.mjs
@@ -0,0 +1,14 @@
+// vite.config.js
+var vite_config_default = {
+ build: {
+ target: "es2020"
+ },
+ server: {
+ port: 3e3,
+ host: "0.0.0.0"
+ }
+};
+export {
+ vite_config_default as default
+};
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcuanMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCIvaG9tZS9qdWxzMDcvQ29kZS9ub2RlLXByb2plY3RzLzEwMERheXNPZkNvZGUvZGF5MTRcIjtjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfZmlsZW5hbWUgPSBcIi9ob21lL2p1bHMwNy9Db2RlL25vZGUtcHJvamVjdHMvMTAwRGF5c09mQ29kZS9kYXkxNC92aXRlLmNvbmZpZy5qc1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9pbXBvcnRfbWV0YV91cmwgPSBcImZpbGU6Ly8vaG9tZS9qdWxzMDcvQ29kZS9ub2RlLXByb2plY3RzLzEwMERheXNPZkNvZGUvZGF5MTQvdml0ZS5jb25maWcuanNcIjsvKiogQHR5cGUge2ltcG9ydCgndml0ZScpLlVzZXJDb25maWd9ICovXG5leHBvcnQgZGVmYXVsdCB7XG4gICAgYnVpbGQ6IHtcbiAgICAgICAgdGFyZ2V0OiAnZXMyMDIwJyxcbiAgICB9LFxuICAgIFxuICAgIHNlcnZlcjoge1xuICAgICAgICBwb3J0OiAzMDAwLFxuICAgICAgICBob3N0OiAnMC4wLjAuMCdcbiAgICB9XG59XG4iXSwKICAibWFwcGluZ3MiOiAiO0FBQ0EsSUFBTyxzQkFBUTtBQUFBLEVBQ1gsT0FBTztBQUFBLElBQ0gsUUFBUTtBQUFBLEVBQ1o7QUFBQSxFQUVBLFFBQVE7QUFBQSxJQUNKLE1BQU07QUFBQSxJQUNOLE1BQU07QUFBQSxFQUNWO0FBQ0o7IiwKICAibmFtZXMiOiBbXQp9Cg==