Initialize SvelteKit and rewrite to in Svelte + Tailwind.

.gitignore

@@ -15,97 +15,32 @@ pids
 *.seed
 *.pid.lock
 
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-*.lcov
-
-# nyc test coverage
-.nyc_output
-
-# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# Bower dependency directory (https://bower.io/)
-bower_components
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (https://nodejs.org/api/addons.html)
-build/Release
-
 # Dependency directories
 node_modules/
-jspm_packages/
-
-# TypeScript v1 declaration files
-typings/
-
-# TypeScript cache
-*.tsbuildinfo
-
-# Optional npm cache directory
-.npm
-
-# Optional eslint cache
-.eslintcache
-
-# Microbundle cache
-.rpt2_cache/
-.rts2_cache_cjs/
-.rts2_cache_es/
-.rts2_cache_umd/
-
-# Optional REPL history
-.node_repl_history
-
-# Output of 'npm pack'
-*.tgz
-
-# Yarn Integrity file
-.yarn-integrity
 
 # dotenv environment variables file
 .env
 .env.test
 
-# parcel-bundler cache (https://parceljs.org/)
-.cache
-
-# Next.js build output
-.next
-
-# Nuxt.js build / generate output
-.nuxt
-dist
-
-# Gatsby files
-.cache/
-# Comment in the public line in if your project uses Gatsby and *not* Next.js
-# https://nextjs.org/blog/next-9-1#public-directory-support
-# public
-
-# vuepress build output
-.vuepress/dist
-
-# Serverless directories
-.serverless/
-
-# FuseBox cache
-.fusebox/
+# Local Netlify folder
+.netlify
 
-# DynamoDB Local files
-.dynamodb/
+# Svelte Output
+.output
+.vercel
+/.svelte-kit
+/build
 
-# TernJS port file
-.tern-port
+# OS
 .DS_Store
-.firebase/**
-functions/package-lock.json
-package-lock.json
+Thumbs.db
 
-# Local Netlify folder
-.netlify
+# Env
+.env
+.env.*
+!.env.example
+!.env.test
+
+# Vite
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*

.npmrc

@@ -0,0 +1 @@
+engine-strict=true

.prettierignore

@@ -0,0 +1,4 @@
+# Package Managers
+package-lock.json
+pnpm-lock.yaml
+yarn.lock

.prettierrc

@@ -0,0 +1,15 @@
+{
+	"useTabs": true,
+	"singleQuote": true,
+	"trailingComma": "none",
+	"printWidth": 100,
+	"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
+	"overrides": [
+		{
+			"files": "*.svelte",
+			"options": {
+				"parser": "svelte"
+			}
+		}
+	]
+}

README copy.md

@@ -0,0 +1,38 @@
+# create-svelte
+
+Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```bash
+# create a new project in the current directory
+npx sv create
+
+# create a new project in my-app
+npx sv create my-app
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```bash
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+## Building
+
+To create a production version of your app:
+
+```bash
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.

README.md

@@ -1,3 +1,11 @@
 # timezone.fyi
 
 Source for https://timezone.fyi
+
+# development
+
+````
+pnpm install
+pnpm run dev
+```
+

eslint.config.js

@@ -0,0 +1,23 @@
+import prettier from 'eslint-config-prettier';
+import js from '@eslint/js';
+import svelte from 'eslint-plugin-svelte';
+import globals from 'globals';
+
+/** @type {import('eslint').Linter.Config[]} */
+export default [
+	js.configs.recommended,
+	...svelte.configs['flat/recommended'],
+	prettier,
+	...svelte.configs['flat/prettier'],
+	{
+		languageOptions: {
+			globals: {
+				...globals.browser,
+				...globals.node
+			}
+		}
+	},
+	{
+		ignores: ['build/', '.svelte-kit/', 'dist/']
+	}
+];

netlify.toml

@@ -1,13 +1,8 @@
 [build]
-  edge_functions = "./netlify/edge-functions-disabled"
+	command = "npm run build"
+	publish = "build"
+  edge_functions = "netlify/edge-functions"
 
-[[redirects]]
-  from = "/og"
-  to = "/.netlify/functions/og"
-  status = 200
-  force = true
-
-[[redirects]]
-  from = "/*"
-  to = "/.netlify/functions/index"
-  status = 200
+[[edge_functions]]
+  path = "/ogx"
+  function = "ogx"	

netlify/edge-functions/og.tsx → netlify/edge-functions/ogx.tsx

@@ -1,16 +1,80 @@
 import type { Config, Context } from "@netlify/edge-functions";
 import { ImageResponse } from "https://deno.land/x/og_edge/mod.ts";
 import React from "https://esm.sh/react@18.2.0";
+import {DateTime} from "https://esm.sh/luxon@2";
+
+import { colors } from '../../src/lib/timezones.js'
+
+export const emptyZoneInfo = (zone: string): any=> {
+  return  {
+    description: '',
+  night: false,
+  zoneStart: DateTime.now().setZone(zone),
+  zoneEnd: null,
+  emoji: '',
+  niceZoneName: zone,
+  startString: DateTime.now().setZone(zone).toFormat('h:mm a'),
+  endString: '',
+  extraDay: false,
+};
+}
 
-import { getZoneInfo, colors } from "../common.js";
+const getZoneInfo = (path: string) : any => {
+  let zones : any[] = [];
+  if (!path) {
+    return {}
+  }
+  zones.push(emptyZoneInfo('EST'));
+  zones.push(emptyZoneInfo('PST'));
+  return {zones};
+}
 
 
 export default async (request: Request, context: Context) => {
   let url = new URL(request.url);
   let path = url.searchParams.get("path");
-  const info = getZoneInfo(path);
 
-  console.log("URL:", info);
+  const info = getZoneInfo(path);
+  if (!info.zones) {
+    return new ImageResponse(
+      <div
+        style={{
+          width: "100%",
+          height: "100%",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          fontSize: 128,
+          backgroundImage: "linear-gradient(#e66465, #9198e5)"
+        }}
+      >
+        Hello!
+      </div>
+    );
+  }
+
+  const zones = info.zones;
+  console.log('Hours', zones.map(z => z.zoneStart.hour));
+  console.log('Colors', zones.map(z => colors[z.zoneStart.hour * 2]));
+
+  const zonesElements =  zones.map((z: any, i: number) => {
+    const background = `linear-gradient(${colors[z.zoneStart.hour * 2]}, ${colors[z.zoneStart.hour * 2 + 1]})`;
+    const zoneStyle = {
+      backgroundImage: background,
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      justifyContent: 'center',
+      fontSize: 128,
+    }
+    return (
+      <div key={`zone${i}`} style={zoneStyle}>
+        <div>Hello</div>
+        {/* <div>{z.niceZoneName}</div>
+        <div>{z.startString}</div> */}
+      </div>
+    )
+  });
 
   return new ImageResponse(
     (
@@ -19,31 +83,21 @@ export default async (request: Request, context: Context) => {
           width: "100%",
           height: "100%",
           display: "flex",
+          flexDirection: "row",
           alignItems: "center",
           justifyContent: "center",
           fontSize: 128,
-          backgroundImage: "linear-gradient(#e66465, #9198e5)"
+          backgroundImage: "linear-gradient(#9198e5, #9198e5)"
         }}
       >
-        {info?.zones.map((z, i) => (  
-          <div key={i}
-            style={{  
-              backgroundImage: `linear-gradient(${colors[z.zoneStart.hour() * 2]}, ${colors[z.zoneStart.hour() * 2 + 1]})`,
-            }}
-          >
-
-            <div>{z.niceZoneName}</div>
-            <div>{z.startString}</div>
-          </div>
-        ))}
-        Hello!
+       ${zonesElements}
       </div>
     )
   );
 }
 
-export const config = {
-  path: "/og",
+export const config : Config = {
+  path: "/ogx",
   cache: "manual",
 };
 
@@ -119,4 +173,4 @@ export const config = {
 
 // export const config = {
 //   path: "/og.jpg*",
-// };
+// };