ToCode

<script setup>
import Child from './Child.vue';
</script>

<template>
  <p class="red">Hello World from App</p>
  <Child />
</template>

<style scoped>
.red {
  color: red;
}
</style>

<script setup></script>

<template>
  <button class="red">
    Hello World from Child
  </button>
</template>

<script setup>
import { ref } from 'vue'
import Child from './Child.vue';
const x = ref(10)
</script>

<template>
  <Child :x="x" />
</template>

<script setup lang="ts">
const {x} = defineProps<{x: any}>();

function inc() {
  x.value++;
}
</script>

<template>
  <p>x = {{x}}</p>
  <button @click="inc">+1</button>
</template>

<script setup>
import { ref } from 'vue'
import Child from './Child.vue';
const x = ref({value: 10})
</script>

<template>
  <Child :x="x" />
</template>

<script setup lang="ts">
const {x} = defineProps<{x: any}>();

function inc() {
  x.value++;
}
</script>

<template>
  <p>x = {{x.value}}</p>
  <button @click="inc">+1</button>
</template>

export default defineOAuthAuth0EventHandler({
  async onSuccess(event, { user, tokens }) {
    await setUserSession(event, {
      user: {
        id: user.sub
      }
    })

    return sendRedirect(event, '/hello')
  },
  // Optional, will return a json error and 401 status code by default
  onError(event, error) {
    console.log(\error in login\);
    return sendRedirect(event, '/')
  },
})

<script setup>
import People from '../components/People.vue';

const { loggedIn, user, session, fetch, clear } = useUserSession()
</script>

<template>
  <div v-if="loggedIn">
    <h1>Welcome {{ user.id }}!</h1>
    <p>Logged in since {{ session.loggedInAt }}</p>
    <button @click="clear">Logout</button>
    <People />
  </div>
  <div v-else>
    <h1>Not logged in</h1>
    <a href="/auth/auth0">Login with Auth0</a>
  </div>
</template>

NUXT_SESSION_PASSWORD=
NUXT_OAUTH_AUTH0_CLIENT_ID=
NUXT_OAUTH_AUTH0_CLIENT_SECRET=
NUXT_OAUTH_AUTH0_DOMAIN=
DATABASE_URL=

import { usersTable } from '@/db/schema';
import { db } from "@/db/drizzle";

export default eventHandler(async (event) => {
  try {
    const res = await requireUserSession(event)
    const users = await db.select().from(usersTable);
    return users;
  } catch (err) {
    return [];
  }
})

<script setup lang="ts">
const { data, status, error, refresh } = await useAsyncData(
  'people',
  () => $fetch('/api/people', {
     credentials: 'include',
     headers: useRequestHeaders(['cookie']),
  })
)
</script>

<template>
  <h1>People. Status = {{ status }}</h1>
  <ul>
    <li v-for="person in data">{{ person.email }}</li>
  </ul>
</template>

<style lang="css" scoped>
</style>

<script setup>
import { ref } from 'vue'
const theme = ref({
    color: 'red',
})
</script>

<template>
  <p>hello</p>
</template>

<style scoped>
p {
  color: v-bind('theme.color');
}
</style>

<script setup>
import { ref } from 'vue'
const theme = ref({
    color: 'red',
})
</script>

<template>
  <p>hello</p>
</template>

<style>
p {
  color: v-bind('theme.color');
}
</style>

xmul(2,4)&mul[3,7]!^don't()_mul(5,5)+mul(32,64](mul(11,8)undo()?mul(8,5))

mul(2,4), mul(8,5)

str = File.read('input.txt').gsub(/don't\(\).*?(?:do\(\)|$)/, '')
pp str.scan(/mul\((\d{1,3}),(\d{1,3})\)/).map { _1.to_i * _2.to_i }.sum

3.3.5 :010 > str = "one\ntwo\nthree\n"
 => "one\ntwo\nthree\n"
3.3.5 :011 > puts str.gsub(/t/, 'T')
one
Two
Three
 => nil

str = File.read('input.txt').gsub(/don't\(\).*?(?:do\(\)|\z)/m, '')
pp str.scan(/mul\((\d{1,3}),(\d{1,3})\)/).map { _1.to_i * _2.to_i }.sum

pp File.read('input.txt')
  .gsub(/don't\(\).*?(?:do\(\)|\z)/m, '')
  .scan(/mul\((\d{1,3}),(\d{1,3})\)/)
  .map { _1.to_i * _2.to_i }
  .sum

<a href="{{ url_for('tasks') }}">All Tasks</a>

<a href="/tasks">All Tasks</a>

<script setup lang="ts">
import {ref, computed} from 'vue';

const data = { count: 0 };
const value = ref(data);
function btn1() {
  data.count = 5;
}

function btn2() {
  value.value.count++;
}
</script>

<template>
  <div>
  <p>
    Value is: <span>{{ value.count }}</span></p>
  <button @click="btn1">Button 1</button>
  <button @click="btn2">Button 2</button>
  <hr />
</div>
</template>

<template>
  <div>
  <p>
    Value is: <span>{{ data.count }}</span></p>
  <button @click="btn1">Button 1</button>
  <button @click="btn2">Button 2</button>
  <hr />
</div>
</template>

{
  "compilerOptions": {
    "resolveJsonModule": true,
    "esModuleInterop": true
  },
  "include": ["src"]
}

import settings from './settings.json';

[{
  "repo": "TypeScript",
  "dry": false,
  "debug": false
}]

import settings from './settings.json';
console.log(settings[0].foo);

{
  "compilerOptions": {
    "allowArbitraryExtensions": true,
    "resolveJsonModule": true,
    "esModuleInterop": true
  },
  "include": ["src"]
}

export interface SavingsData {
  INTERESTSDATE: string;
  SAVINGSPROGRAMBYAGE: string;
  AGE: string;
  BANK: string;
  SAVINGSPLAN: string;
  SAVINGSPERIOD: string;
  FIXEDWITHOUTLINKAGEVAL: number;
  FIXEDLINKEDCONSUMERPRICEINDVAL: number;
  VARIABLESPREAD: number;
}

declare const array: Array<SavingsData>;
export default array;

npm install formik yup

import * as Yup from 'yup';

export default Yup.object().shape({
  email: Yup.string()
    .email('Invalid email format')
    .required('Email is required'),
  password: Yup.string()
    .required('Password is required'),
  rememberMe: Yup.boolean().default(false),
});

import { useFormik } from 'formik';
import loginFormSchema from './schema/LoginForm';

export default () => {
  const formik = useFormik({
    initialValues: {email: '', password: '', rememberMe: false},
    validationSchema: loginFormSchema,
    onSubmit: values => {
      alert(JSON.stringify(values, null, 2));
    },
  });
  
  return (
    <form onSubmit={formik.handleSubmit}>
      <div>
        <label>
          Email
          <input          
            name="email"
            type="email"
            onChange={formik.handleChange}
            onBlur={formik.handleBlur}
            value={formik.values.email}
          />
          {formik.touched.email && formik.errors.email ? (
            <div>{formik.errors.email}</div>
          ) : null}    
        </label>    
    </div>
    
    <div>
      <label>
        Password:
        <input        
        name="password"
        type="text"
        onChange={formik.handleChange}
        onBlur={formik.handleBlur}
        value={formik.values.password}
        />
        {formik.touched.password && formik.errors.password ? (
          <div>{formik.errors.password}</div>
        ) : null}  
      </label>    
    </div>
    
    <div>    
      <label>
        <input
          type="checkbox"
          name="rememberMe"
          onChange={formik.handleChange}
          onBlur={formik.handleBlur}
          checked={formik.values.rememberMe}
          />
        Remember Me
      </label>
    </div>
      
    <button type="submit">Login</button>
    </form>
  );
};

validationSchema: loginFormSchema,

{formik.touched.email && formik.errors.email ? (
  <div>{formik.errors.email}</div>
) : null}

* can become safe by removing exactly one level. *
def is_safe_with_dampener?(levels)
  # If already safe, no need to remove anything.
  return true if is_safe?(levels)
  
  # Otherwise, try removing each level in turn.
  (0...levels.size).each do |idx|
    new_levels = levels[0...idx] + levels[idx+1..-1]
    return true if is_safe?(new_levels)
  end
  
  false
end

* --- Read the input --- *
* Typically you'd read from a file or from standard input. *
* For Advent of Code, you might do something like: *
* lines = File.readlines("input.txt").map(&:strip) *
* Here we'll read from standard input (ARGF) to keep it general. *
lines = ARGF.each_line.map(&:strip)

* Convert each line of space-separated numbers into an integer array. *
reports = lines.map { |line| line.split.map(&:to_i) }

* --- Part 1: Count how many reports are safe under the original rules --- *
part1_safe_count = reports.count { |levels| is_safe?(levels) }

* --- Part 2: Count how many reports are safe with the "Problem Dampener" --- *
part2_safe_count = reports.count { |levels| is_safe_with_dampener?(levels) }

* Output the answers *
puts "Part 1 (original rules) safe reports: #{part1_safe_count}"
puts "Part 2 (with Problem Dampener) safe reports: #{part2_safe_count}"

7 6 4 2 1
1 2 7 8 9
9 7 6 2 1
1 3 2 4 5
8 6 4 4 1
1 3 6 7 9

line.split.map(&:to_i).each_cons(2).map { _2 - _1 }

line = '7 6 4 2 1'

3.3.5 :021 > line.split.map(&:to_i).each_cons(2).map { _2 - _1 }
 => [-1, -2, -2, -1]

filename = ARGV[0]

parsed_input = File.foreach(filename).map do |line|
  line.split.map(&:to_i).each_cons(2).map { _2 - _1 }
end

safe = parsed_input.filter do |seq|
  (seq.all?(&:positive?) || seq.all?(&:negative?)) && (seq.all? { it.abs <= 3 })
end

pp safe.count

filename = ARGV[0]

def check_seq(seq)
  diff_seq = seq.each_cons(2).map { _2 - _1 }
  (diff_seq.all?(&:positive?) || diff_seq.all?(&:negative?)) && (diff_seq.all? { it.abs <= 3 })
end

parsed_input = File.foreach(filename).map do |line|
  line.split.map(&:to_i)
end

safe = parsed_input.filter do |seq|
  check_seq(seq) ||
  seq.each_index.any? do |i|
    check_seq(seq.reject.with_index { _2 == i })
  end
end

pp safe.count

[2, 3, 5].reject.with_index { _2 == 1 }

line = '2 3 4 5 6 7 8 9 10 11 12 100'

* !/usr/bin/env ruby *

* --- Helpers --- *

* Returns true if the array of levels is strictly increasing or strictly decreasing *
* with each adjacent difference in the range [1..3]. *
def is_safe?(levels)
  return true if levels.size < 2  # Trivially safe if 0 or 1 level
  
  # We check both possibilities (strictly increasing or strictly decreasing).
  is_increasing = true
  is_decreasing = true
  
  (0...levels.size-1).each do |i|
    diff = levels[i+1] - levels[i]
    
    # Must be in [-3..-1] or [1..3]; if it's 0 or outside ±3 => not safe
    return false if diff.abs < 1 || diff.abs > 3
    
    # If it's not strictly positive, can't be strictly increasing
    is_increasing = false if diff <= 0
    
    # If it's not strictly negative, can't be strictly decreasing
    is_decreasing = false if diff >= 0
  end
  
  # Safe if either strictly increasing or strictly decreasing
  is_increasing || is_decreasing
end

* Returns true if the array of levels is safe as-is OR *

<p>{lastName}</p>
      <button onClick={swap}>Swap</button>
      <Link href="/">Counter</Link>
    </div>
  )
}

import '@/styles/globals.css'
import type { AppProps } from 'next/app'
import {  makeStore } from '../redux/store'
import { Provider } from 'react-redux'

export default function App({ Component, pageProps }: AppProps) {
  const store = makeStore(pageProps);
  return <Provider store={store}>
    <Component />
  </Provider>
}

import Image from 'next/image'
import Names from '@/components/Names';

export const getServerSideProps = (async () => {
  return { props: {firstName: 'first', lastName: 'last'} };
});

export default function Home() {
  return (
    <main>
      <Names />
    </main>
  )
}

import { configureStore, createReducer } from '@reduxjs/toolkit'
import { set } from './actions';

export function makeStore(initialState: any) {
  return configureStore({
    reducer: createReducer(initialState, builder => {
      builder.addCase(set, (state, action) => {
        // @ts-ignore
        state[action.payload.key] = action.payload.value;
      })
    })
  })  
}

// Infer the \RootState\ and \AppDispatch\ types from the store itself
export type TState = ReturnType<typeof makeStore>;

export type RootState = ReturnType<TState['getState']>
// Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
export type AppDispatch = TState['dispatch']

import {useSelector, TypedUseSelectorHook} from 'react-redux';

export type Counter = {
  count: number;
}

export const initialState: Counter = {
  count: 0,
}

export const useCounterSelector: TypedUseSelectorHook<Counter> = useSelector;

import {useSelector, TypedUseSelectorHook} from 'react-redux';
import { createAction } from '@reduxjs/toolkit';
import type {SetFieldPayload} from './types';

export type Names = {
  firstName: string,
  lastName: string,
}

export const initialState: Names = {
  firstName: 'a',
  lastName: 'b',
}

export const useNamesSelector: TypedUseSelectorHook<Names> = useSelector;

import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { set } from '../redux/actions';
import Link from 'next/link'

import { useNamesSelector } from '@/redux/pages/names';

export default function() {
  const dispatch = useDispatch();
  
  const firstName = useNamesSelector(s => s.firstName);
  const lastName = useNamesSelector(s => s.lastName);

  function swap() {
    dispatch(set({key: 'firstName', value: lastName}))
    dispatch(set({key: 'lastName', value: firstName}))
  }

  return (
    <div>
      <p>{firstName}</p>

x = 3
y = 2
print(x * y)

x = 0.1
y = 0.2
print(x + y)

0.30000000000000004

>>> 2 - 1.1
0.8999999999999999

>>> 200 - 110
90

from decimal import *

>>> Decimal('0.1') + Decimal('0.2')
Decimal('0.3')

<script setup>
import { ref } from 'vue'

const counter = ref(0)
function inc() { counter.value++ }
</script>

<template>
  <p>{{counter}}</p>
  <button @click="inc">+1</button>
</template>

function toRef(value, setter) {
  return new Proxy(
    { value },
    {
      get(target, prop, receiver) {
        return value;
      },
      set(obj, prop, value) {
        setter(value);
      },
    }
  );
}

function useRefState(initialValue) {
  const [value, setter] = useState(initialValue);
  return toRef(value, setter);
}

export default function App() {
  const counter = useRefState(0);
  function inc() {
    counter.value++;
  }

  return (
    <div className="App">
      <p>{counter.value}</p>
      <button onClick={inc}>+1</button>
      <button onClick={() => counter.value--}>-1</button>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

function useRefState(initialValue) {
  const [value, setter] = useState(initialValue);
  return function (...args) {
    if (args.length > 0) {
      setter(...args);
    } else {
      return value;
    }
  };
}

export default function App() {
  const counter = useRefState(0);
  function inc() {
    counter((c) => c + 1);
  }

  return (
    <div className="App">
      <p>{counter()}</p>
      <button onClick={inc}>+1</button>
      <button onClick={() => counter((c) => c - 1)}>-1</button>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

import { createSlice } from '@reduxjs/toolkit'

const initialState = {
  value: 0,
}

export const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment: (state) => {
      state.value += 1
    },
    decrement: (state) => {
      state.value -= 1
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload
    },
  },
})

// Action creators are generated for each case reducer function
export const { increment, decrement, incrementByAmount } = counterSlice.actions

export default counterSlice.reducer

export interface CounterSliceState {
  value: number
  status: "idle" | "loading" | "failed"
  foo: string
  bar: number
  buz: Array<string>
}

extraReducers: (builder) => {
  builder.addCase(setField, (state, action) => {
    const { key, value } = action.payload;
    // @ts-ignore
    state[key] = value;
  });
},

type SetFieldPayload = {
  [K in keyof CounterSliceState]: {
    key: K;
    value: CounterSliceState[K];
  };
}[keyof CounterSliceState];

export const setField = createAction<SetFieldPayload2>('counter/set');

setField({key: 'bar', value: 5}) // compiles OK

setField({key: 'bar', value: '?'}) // compilation error

in2csv --encoding "utf-8" births.csv | csvjson > births.json

[
  {
    "birth_month": 1.0,
    "mother_age": "<18",
    "parity": "1",
    "gestation_week": "37-41",
    "birth_sex": "F",
    "birth_weight": "2500-2599"
  },
  {
    "birth_month": 1.0,
    "mother_age": "<18",
    "parity": "1",
    "gestation_week": "37-41",
    "birth_sex": "F",
    "birth_weight": "2500-2599"
  },
  {
    "birth_month": 1.0,
    "mother_age": "<18",
    "parity": "1",
    "gestation_week": "37-41",
    "birth_sex": "F",
    "birth_weight": "2500-2599"
  }
]

const dataByAge = _.chain(data).groupBy('mother_age').mapValues(
  row => _.chain(row).groupBy('birth_month').mapValues(v => v.length).value()
).value()

const series = _.toPairs(dataByAge).map(([mother_age, entries]) => ({
    name: mother_age,
    type: "bar",
    stack: "total",
    label: {
      show: true,
    },
    emphasis: {
      focus: "series",
    },
    data: Object.values(entries),
  })
)

import data from './births.json' with { type: "json" };
import _ from 'https://cdn.jsdelivr.net/npm/[email protected]/+esm'

window.data = data;
const months = {
  1: 'January',
  2: 'February',
  3: 'March',
  4: 'April',
  5: 'May',
  6: 'June',
  7: 'July',
  8: 'August',
  9: 'September',
  10: 'October',
  11: 'November',
  12: 'December'
};

var dom = document.getElementById("chart-container");
var myChart = echarts.init(dom, null, {
  renderer: "canvas",
  useDirtyRect: false,
});
var app = {};
var option;

const dataByAge = _.chain(data).groupBy('mother_age').mapValues(
  row => _.chain(row).groupBy('birth_month').mapValues(v => v.length).value()
).value()

const series = _.toPairs(dataByAge).map(([mother_age, entries]) => ({
    name: mother_age,
    type: "bar",
    stack: "total",
    label: {
      show: true,
    },
    emphasis: {
      focus: "series",
    },
    data: Object.values(entries),
  })
)

option = {
  tooltip: {
    trigger: "axis",    
    axisPointer: {
      // Use axis to trigger tooltip
      type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
    },
  },
  legend: {},
  grid: {
    left: "3%",
    right: "4%",
    bottom: "3%",
    containLabel: true,
  },
  xAxis: {
    type: "value",
  },
  yAxis: {
    type: "category",
    data: Object.values(months),
  },
  series: series,
};

if (option && typeof option === "object") {
  myChart.setOption(option);
}

window.addEventListener("resize", myChart.resize);

  dataset: [
    {
      // 1) Raw data from your JSON array
      id: 'raw',
      source: data
    },
    {
      // 2) Sort descending by SUMACCIDEN
      id: 'sorted',
      fromDatasetId: 'raw',
      transform: {
        type: 'sort',
        config: {
          dimension: 'SUMACCIDEN',  // the field to sort by
          order: 'desc'
        }
      }
    },
  ],

const sortedData = data
    .filter(item => item.city && item.SUMACCIDEN)
    .sort((a, b) => b.SUMACCIDEN - a.SUMACCIDEN)
    .slice(0, 10);

<script setup>
import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { BarChart } from 'echarts/charts';
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
  DatasetComponent,
} from 'echarts/components';
import VChart from 'vue-echarts';
import { ref } from 'vue';

// Register only the components we need (modular import)
use([
  CanvasRenderer,
  BarChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
  DatasetComponent,
]);

// Fetch your JSON array of objects (converted from CSV)
const data = await fetch('https://assets.codepen.io/5217/data.json').then(res => res.json());

const sortedData = data
.filter(item => item.city && item.SUMACCIDEN)
.sort((a, b) => b.SUMACCIDEN - a.SUMACCIDEN)
.slice(0, 10);

const option = ref({
  title: {
    text: 'Top 10 Cities with Car Accidents',
    left: 'center'
  },
  tooltip: {
    trigger: 'axis'
  },
  // We use ECharts “dataset” + transforms for sorting and limiting to top 10
  dataset: {
    source: sortedData,
    id: 'sorted'
  },
  xAxis: {
    type: 'category'
  },
  yAxis: {
    name: 'Number of Accidents'
  },
  series: [
    {
      type: 'bar',
      datasetId: 'sorted',
      // Map city -> x-axis category, SUMACCIDEN -> y-axis value
      encode: {
        x: 'city',
        y: 'SUMACCIDEN'
      },
      // Optional styling
      itemStyle: {
        color: '#5470c6'
      }
    }
  ]
});

</script>

<template>
  <!-- v-chart from vue-echarts -->
  <v-chart class="chart" :option="option" autoresize />
</template>

<style scoped>
.chart {
  height: 600px;
  width: 100%;
}
</style>

users
  .reject(&:admin?)
  .flat_map { find_teams(it) }
  .uniq

users
  .reject(&:admin?)
  .flat_map { |user| find_teams(users) }
  .uniq

users
  .reject(&:admin?)
  .flat_map { find_teams(_1) }
  .uniq

white-space: pre-wrap;
}
</style>

export default async function* sendQuestion(questionText: string) {
  const res = await fetch('http://localhost:11434/api/generate', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      model: 'llama3.2',
      prompt: questionText,
      stream: true,
    }),
  })
  
  if (!res.ok) throw new Error('Failed to connect to Ollama server')
    
  const reader = res.body?.getReader()
  if (!reader) throw new Error('Failed to initialize stream reader')
    
  while (true) {
    const { done, value } = await reader.read()
    if (done) break
    
    // Decode the stream data
    const chunk = new TextDecoder().decode(value)            
    const json = JSON.parse(chunk)
    yield json
  }
}

<script setup lang="ts">
import { ref } from 'vue'
import streamChatResponse from '../streamChatResponse';
const question = ref('')
const response = ref('')
const isLoading = ref(false)
const error = ref<string | null>(null)

async function sendQuestion() {
  for await (const chunk of streamChatResponse(question.value)) {
    response.value += chunk.response;
  }
  question.value = '';
}

</script>

<template>
  <div class="chat-container">
    <form @submit.prevent="sendQuestion" class="question-form">
      <textarea
        v-model="question"
        placeholder="Ask a question..."
        :disabled="isLoading"
        class="question-input"
      />
      <button 
        type="submit" 
        :disabled="isLoading || !question.trim()"
        class="submit-button"
      >
        {{ isLoading ? 'Thinking...' : 'Send' }}
      </button>
    </form>

    <div v-if="error" class="error-message">
      {{ error }}
    </div>

    <div v-if="response" class="response-container">
      <div class="response-text">{{ response }}</div>
    </div>
  </div>
</template>

<style scoped>
.chat-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 1rem;
}

.question-form {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
}

.question-input {
  flex: 1;
  min-height: 80px;
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
}

.submit-button {
  padding: 0.5rem 1rem;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.submit-button:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}

.error-message {
  color: #dc3545;
  margin-bottom: 1rem;
}

.response-container {
  padding: 1rem;
  background-color: #f8f9fa;
  border-radius: 4px;
}

.response-text {

app.post('/signup', async (c) => {
  const body = await c.req.parseBody()
  try {
    await signupUserSchema.validate(body);
    // create the user and redirect
    return c.json({ ok: true });
  } catch (err) {
    throw new HTTPException(401, {message: String(err)})
  }
});

import {object, string} from 'yup';

export default object().shape({
  email: string().required().email(),
  password: string().required().min(3),
});

<!DOCTYPE html>
<html>
  <body>
    <h1>Sign Up</h1>
    <form action="/signup" method="post">
      <label>
        Email
        <input type="email" name="email" required />
      </label>

      <label>
        Password
        <input type="password" name="password" required minlength="3" />
      </label>
      
      <input type="submit" />
    </form>
  </body>
</html>

import {object, string} from 'yup';

export const signupFormSchema = object({
  email: string()
    .email()
    .required(),

  password: string()
    .min(8, 'password must be at least 8 characters long')
    .required(),
});

try {
    await signupFormSchema.validate({email: '[email protected]', password: '12345678'});
    console.log('OK');
} catch (err) {
    console.log(err);
}

try {
    await signupFormSchema.validate({email: '[email protected]', password: '123'});
    console.log('OK');
} catch (err) {
    console.log(err);
}

<script setup lang="ts">
import {signupFormSchema} from '../schemas/signup1';
import { ValidationError } from 'yup';
import {computed, ref, Ref} from 'vue';
const errors = ref<Array<ValidationError>>([]);
const status = ref<'pending'|'submitted'>('pending');

const errorsObject: Ref<Record<string, Array<ValidationError>>> = computed(() => 
  Object.groupBy(errors.value, e => e.path))

async function signup(ev: Event) {
  const form = ev.target as HTMLFormElement;
  const fd = new FormData(form);  
  const data = Object.fromEntries(fd);

  try {
    await signupFormSchema.validate(data, {abortEarly: false})
    errors.value = [];
    status.value = 'submitted';
  } catch (err) {
    if (err instanceof ValidationError) {
      errors.value = err.inner;
      console.log(err.inner);
    } else {
      throw err
    }    
  }
}
</script>

<template>
  <div v-if="status == 'submitted'">
    Ready!
  </div>
  <form @submit.prevent="signup">
    <div class="errors" v-if="errors.length > 0">
      <h3>Form Erorrs:</h3>
      <ul >
      <li
        v-for="(error, index) in errors"
        :key="index"      
        >
        {{ error.message }}
      </li>
      </ul>
    </div>    

    <div>
      <label>
        <span>Email: </span>
        <input name="email" type="email"  />
      </label>
    </div>
    <div>
      <label>
        <span>
          Password: 
        </span>
      <input name="password" type="password"  />
    </label>
    </div>
    <div>
      <input type="submit" value="Signup" :disabled="status === 'submitted'" />
    </div>    
  </form>
</template>

<style scoped>

label > span {
  width: 100px;
  display: inline-block;
}

form > div {
  text-align: left;
  margin: 10px;
}

.errors {
  text-align: left;
  list-style: none;
  padding-left: 10px;
}
</style>

f1ed4259c fix
75e825f62 fix
c388772ec remove unnecessary env group

1cc57ce33 fix sizing of logo
d26a25c47 fix sizing

f510e4f5d update
89007aad9 update
0d9701a14 updates to workflow

41a1948 fix
0a197d4 fix
e7572cf remove unnecessary env group
daf174b initial commit

$ git reset HEAD~3
Unstaged changes after reset:
M       textfile.txt

$ git add .
$ git commit -m 'remove unnecessary env group'

622a0da remove unnecessary env group
daf174b initial commit

body, html {
  height: 100vh;
  padding: 0;
  margin: 0;
}

main {
  display: flex;
  place-items: center;
  background: #a0a0a0;
}

<main>hello world</main>

$ npx drizzle-kit generate

CREATE TABLE \likes\ (
 \id\ integer PRIMARY KEY AUTOINCREMENT NOT NULL,
 \user_id\ integer NOT NULL,
 \link_id\ integer NOT NULL,
 FOREIGN KEY (\user_id\) REFERENCES \users\(\id\) ON UPDATE no action ON DELETE cascade,
 FOREIGN KEY (\link_id\) REFERENCES \links\(\id\) ON UPDATE no action ON DELETE cascade
);
--> statement-breakpoint
CREATE TABLE \links\ (
 \id\ integer PRIMARY KEY AUTOINCREMENT NOT NULL,
 \user_id\ integer NOT NULL,
 \href\ text NOT NULL,
 FOREIGN KEY (\user_id\) REFERENCES \users\(\id\) ON UPDATE no action ON DELETE cascade
);
--> statement-breakpoint
CREATE TABLE \users\ (
 \id\ integer PRIMARY KEY AUTOINCREMENT NOT NULL,
 \name\ text NOT NULL
);

import { db } from './db';
import { usersTable, linksTable, likesTable } from './db/schema';

async function seedDatabase() {
  // Insert users
  const userIds = await db.insert(usersTable).values([
    { name: 'Alice' },
    { name: 'Bob' },
    { name: 'Charlie' },
    { name: 'Dave'},
  ]).returning({ id: usersTable.id });

  // Insert links
  const linkIds = await db.insert(linksTable).values([
    { user_id: userIds[0].id, href: 'https://www.duckduckgo.com' },
    { user_id: userIds[1].id, href: 'https://www.tocode.co.il' },
    { user_id: userIds[2].id, href: 'https://nextjs.org/blog/next-15' },
  ]).returning({ id: linksTable.id });

  // Insert likes
  await db.insert(likesTable).values([
    { user_id: userIds[0].id, link_id: linkIds[1].id },
    { user_id: userIds[1].id, link_id: linkIds[2].id },
    { user_id: userIds[2].id, link_id: linkIds[1].id },
    { user_id: userIds[1].id, link_id: linkIds[0].id },
    { user_id: userIds[0].id, link_id: linkIds[1].id },
  ]);

  console.log('Database seeded successfully!');
}

seedDatabase().catch(console.error);

import { db } from './db';
import { usersTable, linksTable, likesTable } from './db/schema';

async function truncateDatabase() {
  await db.delete(usersTable)
  await db.delete(linksTable);
  await db.delete(likesTable);
}

truncateDatabase().catch(console.error);

  "scripts": {
    "dev": "next dev",
    "seed-dev": "tsx src/seed-dev.ts",
    "truncate-dev": "tsx src/truncate-dev-db.ts",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },

.leftJoin(users, eq(links.user_id, users.id))
  .leftJoin(likes, eq(links.id, likes.link_id))
  .groupBy(links.id, users.name); 
}

export async function likeLink(user_id: number, link_id: number) {
  console.log(\user id = ${user_id}, link_id = ${link_id}\);
  // Check if the like already exists
  const existingLike = await db
    .select()
    .from(likes)
    .where(and(eq(likes.user_id, user_id), eq(likes.link_id, link_id)))
    .limit(1);

  if (existingLike.length > 0) {
    console.log('User has already liked this link.');
    return { success: false, message: 'You have already liked this link.' };
  } 

  // Add the like
  const newLike = await db
    .insert(likes)
    .values({ user_id, link_id })
    .returning();

  console.log('Like added successfully:', newLike);
  return { success: true, message: 'Like added successfully!', like: newLike };

}

import { queryHomepageLinks } from "@/db/links";
import { login } from "@/db/users";
import Link from './client/Link';

export default async function Home() {
  const homepageLinks = await queryHomepageLinks();
  const currentUser = (await login('Dave')).user!;

  return (
    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
      <main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">
      <ul className="space-y-4 text-left text-gray-500 dark:text-gray-400">
        {homepageLinks.map(link => (
          <Link user={currentUser} key={link.linkId} link={link} />
        ))}
      </ul>
      </main>
    </div>
  );
}

'use client'
import { likeLink } from "@/db/links";
import { useState } from "react";

export default function Link({link, user}: {
  link: {
    linkId: number,
    href: string,
    likesCount: number,  
  },
  user: { id: number, name: string },
}) {  
  const [likesCount, setLikesCount] = useState(link.likesCount);

  async function handleClick() {
    const result = await likeLink(user.id, link.linkId);
    if (result.success) {
      setLikesCount(c => c + 1);
    } else {
      alert(result.message);
    }
  }

  return <li className="flex items-center space-x-3 rtl:space-x-reverse">
    <span className="mx-2 inline-block w-4">{likesCount}</span>          
    <button onClick={handleClick} className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-2 rounded">+1</button>
    <span className="font-bold">{link.href}</span>                    
  </li>
};

import 'dotenv/config';
import { defineConfig } from 'drizzle-kit';
export default defineConfig({
  out: './drizzle',
  schema: './src/db/schema.ts',
  dialect: 'sqlite',
  dbCredentials: {
    url: process.env.DB_FILE_NAME!,
  },
});

import { int, sqliteTable, text } from "drizzle-orm/sqlite-core";

export const usersTable = sqliteTable("users", {
  id: int().primaryKey({ autoIncrement: true }),
  name: text().notNull(),
});

export const linksTable = sqliteTable("links", {
  id: int().primaryKey({ autoIncrement: true }),
  user_id: int().references(() => usersTable.id, {onDelete: 'cascade'}).notNull(),
  href: text().notNull(),
});

export const likesTable = sqliteTable('likes', {
  id: int().primaryKey({autoIncrement: true}),
  user_id: int().references(() => usersTable.id, {onDelete: 'cascade'}).notNull(),
  link_id: int().references(() => linksTable.id, {onDelete: 'cascade'}).notNull(),
});

import {linksTable, usersTable, likesTable as likes} from './schema';
import {db} from './index';
import { eq } from 'drizzle-orm';

export async function login(name: string) {
  // Check if the user already exists
  const existingUser = await db
    .select()
    .from(usersTable)
    .where(eq(usersTable.name, name))
    .limit(1);

  if (existingUser.length > 0) {
    console.log('User logged in:', existingUser[0]);
    return { success: true, user: existingUser[0] };
  } else {
    return { success: false, user: null };
  }
}

'use server';

import {
  linksTable as links,
  usersTable as users,
  likesTable as likes} from './schema';
import {db} from './index';
import { eq, sql, and } from 'drizzle-orm';

/**
 * Returns a list of all links joined with their authors
 * and number of likes
 */
export async function queryHomepageLinks() {
  return db.select({
    linkId: links.id,
    href: links.href,
    authorName: users.name,
    likesCount: sql<number>\COUNT(${likes.id})\, // Aggregates likes
  })
  .from(links)

$ npx create-next-app@latest my-next-app
$ cd my-next-app
$ npm i drizzle-kit drizzle-orm @libsql/client dotenv

npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: [email protected]
npm error Found: [email protected]
npm error node_modules/react
npm error   react@"19.0.0-rc-66855b96-20241106" from the root project
npm error   peer react@"*" from @op-engineering/[email protected]
npm error   node_modules/@op-engineering/op-sqlite
npm error     peerOptional @op-engineering/op-sqlite@">=2" from [email protected]
npm error     node_modules/drizzle-orm
npm error       drizzle-orm@"*" from the root project
npm error   4 more (expo-sqlite, expo, @expo/dom-webview, react-native-webview)
npm error
npm error Could not resolve dependency:
npm error peerOptional react@">=18" from [email protected]
npm error node_modules/drizzle-orm
npm error   drizzle-orm@"*" from the root project

$ npm install react-select

npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: [email protected]
npm error Found: [email protected]
npm error node_modules/react
npm error   react@"19.0.0-rc-66855b96-20241106" from the root project
npm error
npm error Could not resolve dependency:
npm error peer react@"^16.8.0 || ^17.0.0 || ^18.0.0" from [email protected]
npm error node_modules/react-select
npm error   react-select@"*" from the root project

// Form.jsx 
function Form() { 
    const [formData, setFormData] = useState({ name: '' }); 
    return (
        <div>
            <h1>Form</h1> 
            {/* Pass the setter function down to ChildComponent */}
            <Input name={formData.name} setFormData={setFormData} />
            <button onClick={() => console.log(formData)}>Submit</button> 
        </div> 
    ); 
};

// Input.jsx
function Input({ name, setFormData }) { 
    const handleInputChange = (event) => { 
        // Directly using the setFormData setter function from the parent
        setFormData((prevData) => ({ ...prevData, name: event.target.value })); 
    }; 
    
    return ( 
        <div>
            <label> 
                Name: 
                <input type="text" value={name} onChange={handleInputChange} /> 
            </label>
        </div> 
    ); 
};

setFormData((prevData) => ({ ...prevData, name: event.target.value })); 

// Form.jsx 
function Form() { 
    const [name, setName] = useState(''); 
    const [favoriteColor, setFavoriteColor] = useState('#000000);
    
    return (
        <div>
            <h1>Form</h1> 
            <Input label="Name" value={name} setter={setName} />
            <Input label="Favorite Color" value={favoriteColor} setter={setFavoriteColor} />
        </div> 
    ); 
};

// Input.jsx
function Input({ label, value, setter }) { 
    const handleInputChange = (event) => { 
        setter(event.target.value);
    }; 
    
    return ( 
        <div>
            <label> 
                {label}: 
                <input type="text" value={value} onChange={handleInputChange} /> 
            </label>
        </div> 
    ); 
};

if (value > maxValue.value) {        
    maxIndex.value = counterIndex;
    maxValue.value = value;
  }
}
</script>

<template>
  <Counter @change="(newValue) => onNewValue(0, newValue)" :isMax="maxIndex == 0" />
  <Counter @change="(newValue) => onNewValue(1, newValue)" :isMax="maxIndex == 1" />
  <Counter @change="(newValue) => onNewValue(2, newValue)" :isMax="maxIndex == 2" />
  <Counter @change="(newValue) => onNewValue(3, newValue)" :isMax="maxIndex == 3" />
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

const count = ref(0)
const emit = defineEmits(['change']);
const {isMax} = defineProps<{isMax?: boolean}>();
const background = computed(() => isMax ? "green" : "yellow");

function onClick() {
  count.value++;
  emit('change', count.value);
}
</script>

<template>
  <div>
    <p>Value = {{ count }}</p>
    <button @click="onClick">+1</button>
  </div>
</template>

<style scoped>
  div {
    background-color: v-bind(background);
    padding: 20px;
  }

  button {
    color: white;
  }

  p {
    color: black;
  }
</style>

<script setup lang="ts">
import {ref, computed} from 'vue';
import Counter from './Counter.vue';

const counts = ref([0, 0, 0, 0]);
const maxValue = computed(() => Math.max(...counts.value));
const maxIndex = computed(() => counts.value.findIndex(el => el === maxValue.value));

function onClick(counterIndex) {
  counts.value[counterIndex]++;
}
</script>

<template>
  <p>max value = {{ maxValue }}</p>
  <p>max index = {{ maxIndex }}</p>
  <Counter @click="onClick(0)" :isMax="maxIndex == 0" :count="counts[0]"/>
  <Counter @click="onClick(1)" :isMax="maxIndex == 1" :count="counts[1]"/>
  <Counter @click="onClick(2)" :isMax="maxIndex == 2" :count="counts[2]"/>
  <Counter @click="onClick(3)" :isMax="maxIndex == 3" :count="counts[3]"/>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

const emit = defineEmits(['click']);
const {isMax, count} = defineProps<{isMax?: boolean, count: number}>();
const background = computed(() => isMax ? "green" : "yellow");

function onClick() {
  emit('click');
}
</script>

<template>
  <div>
    <p>Value = {{ count }}</p>
    <button @click="onClick">+1</button>
  </div>
</template>

<style scoped>
  div {
    background-color: v-bind(background);
    padding: 20px;
  }

  button {
    color: white;
  }

  p {
    color: black;
  }
</style>

emit('change', 10);

<Counter @change="(newValue) => doSomethingWith(newValue)" />

<script setup lang="ts">
import {ref} from 'vue';
import Counter from './Counter.vue';

const maxValue = ref<null|number>(null);
const maxIndex = ref<null|number>(null);

function onNewValue(counterIndex, value) {

<script setup lang="ts">
/* ref() and computed() are auto-imported */
const count = ref(1)
const double = computed(() => count.value * 2)
</script>

<script setup lang="ts">
const props = defineProps<
  | {number: number}
  | {text1: string, text2: string}>();

const text1 = "number" in props ? String(props.number) : props.text1;
const text2 = "number" in props ? "Great Number!" : props.text2;
</script>

<template>
  <p>{{ text1 }}</p>
  <p>{{ text2 }}</p>
</template>

<Demo :number="5" />
<Demo text1="hello" text2="world" />

const text1 = props.number ? String(props.number) : props.text1;
const text2 = props.number ? "Great Number!" : props.text2;

const props = defineProps<
  | {number: number, text1?: never, text2?: never}
  | {number?: never, text1: string, text2: string}>();

const text1 = props.number ? String(props.number) : props.text1;
const text2 = props.number ? "Great Number!" : props.text2;

<Demo :number="5" />
<Demo text1="hello" text2="world" />

<Demo :number="5" text1="hello" text2="world"  />
<Demo text1="hello"  />
<Demo  />

import {ref, Ref} from 'vue';

export default class ReactiveTicTacToe {
  board: Ref<Array<Array<'O'|'X'|'.'>>>;
  winner: Ref<undefined|'O'|'X'>;
  currentPlayer: Ref<'O'|'X'>;

  constructor() {
    this.board = ref([
      ['.', '.', '.'],
      ['.', '.', '.'],
      ['.', '.', '.']
    ]);
    
    this.currentPlayer = ref('X');
    this.winner = ref();
  }

  play(row: number, column: number) {
    if ((this.winner.value) || (this.board.value[row][column] !== '.')) {
      return;
    }

    this.board.value[row][column] = this.currentPlayer.value;
    if (this.checkWinner(this.currentPlayer.value)) {
      this.winner.value = this.currentPlayer.value;
    }
    this.currentPlayer.value = this.nextPlayer();
  }

  nextPlayer() {
    if (this.currentPlayer.value === 'X') {
      return 'O'
    } else {
      return 'X'
    }
  }

  checkWinner(player: 'X' | 'O') {
    const winningCoordinates = [
      [[0, 0], [0, 1], [0, 2]],
      [[1, 0], [1, 1], [1, 2]],
      [[2, 0], [2, 1], [2, 2]],
      [[0, 0], [1, 0], [2, 0]],
      [[0, 1], [1, 1], [2, 1]],
      [[0, 2], [1, 2], [2, 2]],
      [[0, 0], [1, 1], [2, 2]],
      [[0, 2], [1, 1], [2, 0]]
    ]
    if (winningCoordinates.some(triplet => 
      triplet.every(([row, column]) => (
        this.board.value[row][column] === player
      ))
    )) {
      return true;
    }
    return false;
  }
}

<script setup lang="ts">
  import ReactiveTicTacToe from '../game/logic';

  const {game} = defineProps<{game: ReactiveTicTacToe}>()

</script>

<template>
  <div>    
    <h1 v-if="game.winner.value">Bravo! {{ game.winner }} won</h1>
    <h1 v-else>Next player = {{ game.currentPlayer }}</h1>
    <div v-for="(_, row) in 3" :style="{display: 'flex'}">
      <div v-for="(_, column) in 3" :style="{flex: 1, cursor: 'pointer'}">
        <div
        @click="game.play(row, column)"
        >
        {{ game.board.value[row][column] }}
      </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import TicTacToeGame from './components/TicTacToeGame.vue';
import ReactiveTicTacToe from './game/logic';
</script>

<template>
  <TicTacToeGame :game="new ReactiveTicTacToe()"/>
  <TicTacToeGame :game="new ReactiveTicTacToe()"/>
  <TicTacToeGame :game="new ReactiveTicTacToe()"/>
</template>

  onUpdated(() => {
    console.count(\TicTacToeGame::updated\);
  })

import _ from 'lodash';
import moment from 'moment';

// export const getServerSideProps = (async () => {
//   const _ = (await import('lodash')).default;
//   return { props: { name: foo(), number: _.random(100) } }
// });
 

export default function Home(props: any) {
  return (
    <>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <div
        className={\${styles.page} ${geistSans.variable} ${geistMono.variable}\}
      >        
        <main className={styles.main}>
          <p>Hello {_.head([1, 2, 3])}</p>
          <p>{moment("20111031", "YYYYMMDD").fromNow()}</p>
        </main>
      </div>
    </>
  );
}

$ ls -1 .next/static/chunks
29107295-e679c2f4ae05922d.js
75fc9c18-25d3a9414ec027b7.js
framework-88d0cc4abe8a5763.js
main-22f485a16e76a198.js
pages
polyfills-42372ed130431b0a.js
webpack-69db33922baa0ba7.js

import "@/styles/globals.css";
import type { AppProps } from "next/app";
import _ from 'lodash';
import moment from 'moment';

export default function App({ Component, pageProps }: AppProps) {
  return <div>
    <p>Hello {_.head([1, 2, 3])}</p>
    <p>{moment("20111031", "YYYYMMDD").fromNow()}</p>
    <Component {...pageProps} />;
  </div>
  
}

$ ls -l .next/static/chunks
total 816
-rw-r--r--  1 ynonp  staff  181258 נוב  4 19:42 framework-88d0cc4abe8a5763.js
-rw-r--r--  1 ynonp  staff  113610 נוב  4 19:42 main-22f485a16e76a198.js
drwxr-xr-x  5 ynonp  staff     160 נוב  4 19:42 pages
-rw-r--r--  1 ynonp  staff  112594 נוב  4 19:42 polyfills-42372ed130431b0a.js
-rw-r--r--  1 ynonp  staff    1553 נוב  4 19:42 webpack-69db33922baa0ba7.js

$ ls -l .next/static/chunks/pages
total 272
-rw-r--r--  1 ynonp  staff  129509 נוב  4 19:42 _app-852f41acee199ae3.js
-rw-r--r--  1 ynonp  staff     232 נוב  4 19:42 _error-8c2b6ff87cd513a2.js
-rw-r--r--  1 ynonp  staff    1385 נוב  4 19:42 index-de2181fd4b2adca1.js

import _ from 'lodash';
import moment from 'moment';

export const getServerSideProps = (async () => {
  return {
    props: {
      one: _.head([1, 2, 3]),
      two: moment("20111031", "YYYYMMDD").fromNow(),
    }
  }
});
 

export default function Home(props: any) {
  return (
    <>
      <Head>
        <title>Create Next App</title>

<meta name="description" content="Generated by create next app" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <div
        className={\${styles.page} ${geistSans.variable} ${geistMono.variable}\}
      >        
        <main className={styles.main}>
          <p>{props.one}</p>
          <p>{props.two}</p>
        </main>
      </div>
    </>
  );
}

ynonp@Ynons-MacBook-Air ~/tmp/perf (main*?) $ ls -l .next/static/chunks
total 816
-rw-r--r--  1 ynonp  staff  181258 נוב  4 19:46 framework-88d0cc4abe8a5763.js
-rw-r--r--  1 ynonp  staff  113610 נוב  4 19:46 main-22f485a16e76a198.js
drwxr-xr-x  5 ynonp  staff     160 נוב  4 19:46 pages
-rw-r--r--  1 ynonp  staff  112594 נוב  4 19:46 polyfills-42372ed130431b0a.js
-rw-r--r--  1 ynonp  staff    1459 נוב  4 19:46 webpack-59041051e025bed2.js
ynonp@Ynons-MacBook-Air ~/tmp/perf (main*?) $ ls -l .next/static/chunks/pages
total 24
-rw-r--r--  1 ynonp  staff   400 נוב  4 19:46 _app-f45d290ef4eb0435.js
-rw-r--r--  1 ynonp  staff   232 נוב  4 19:46 _error-8c2b6ff87cd513a2.js
-rw-r--r--  1 ynonp  staff  1480 נוב  4 19:46 index-f051a589b07bc05e.js

const seconds = ref(0);
const minutes = computed(() => {
  get() { return seconds / 60},
  set(minutes) { seconds.value = minutes * 60}
});
const hours = computed(() => {
  get() { return hours / 3600},
  set(hours) {seconds.value = hours * 3600}
})

function deriveTime(start: Ref<number>, factor: number) {
  return computed({
    get() { return Number((start.value / factor).toFixed(2)) },
    set(newValue) { start.value = newValue * factor }
  })
}

const seconds = ref(0);
const minutes = deriveTime(seconds, 60);
const hours = deriveTime(seconds, 3600);

const seconds = ref(0);
const minutes = deriveTime(seconds, 60);
const hours = deriveTime(seconds, 3600);

const seconds = ref(0);
// create reactive modifiable computed refs for other time units:
const minutes = deriveTime(seconds, 60);
const hours = deriveTime(seconds, 3600);

const seconds = ref(0);
const minutes = computed(deriveTime(seconds, 60));
const hours = computed(deriveTime(seconds, 3600));

response = client.embeddings(
  parameters: {
    model: "text-embedding-3-large",
    input: "The food was delicious and the waiter..."
  }
)

puts response.dig("data", 0, "embedding")

sources = blogPost.last(100).map(&:markdown_source)

embeddings2 = sources.map do |s|
  client.embeddings(parameters: {model: "text-embedding-3-large", input: s })
end

def cosine_similarity(vec1, vec2)
  dot_product = vec1.zip(vec2).map { |a, b| a * b }.sum
  magnitude1 = Math.sqrt(vec1.map { |v| v**2 }.sum)
  magnitude2 = Math.sqrt(vec2.map { |v| v**2 }.sum)

  dot_product / (magnitude1 * magnitude2)
end

distances = embeddings2.map {|i| cosine_similarity(embeddings2[-1]["data"][0]["embedding"], i["data"][0]["embedding"])
 }
 
distances.each_index.select {|i| distances[i] > 0.5 } 

<p v-if="seen">Now you see me</p>

function App() {
  const [count, setCount] = useState(0)

  return (
    <>
      <div>        
        <Text v-if={count % 2 == 0}></Text>        
        <Text v-highlight={true} v-if={count % 2 == 0}></Text>
        <button onClick={() => setCount(c => c+1)}>{count}</button>
      </div>
    </>
  )
}

const Text = directify((props) => {
  return <p>Hello World</p>
});

export const Directives = {};

export function directify(c) {
  return (props) => {    
    let el = c(props);
    for (const [directiveName, directive] of Object.entries(Directives)) {
      if (directiveName in props) {
        if (el) {
          el = directive(el, props[directiveName]);          
        } else return el;
      }
    }
    return el;
  }
}

Directives['v-if'] = (el, value) => {
  if (value) {
    return el;
  } else {
    return false;
  }
}

Directives['v-highlight'] = (el, value) => {
  return cloneElement(el, {
    style: {
      ...(el.props.style),
      backgroundColor: 'yellow',
    }
  })
}

import { useEffect, useState } from 'react'
import './App.css'

function useMousePosition() {
  const [position, setPosition] = useState([0, 0]);

  useEffect(() => {
    function handleMove(ev: MouseEvent) {
      setPosition([ev.clientX, ev.clientY]);
    }

    window.addEventListener('mousemove', handleMove);

    return () => {
      window.removeEventListener('mousemove', handleMove);
    }
  }, [])

  return position;
}

function App() {
  const position = useMousePosition();

  return (
    <h1>Position: {position[0]}, {position[1]}</h1>
  )
}

export default App

<script setup lang="ts">

import { shallowRef, onMounted, onUnmounted } from 'vue'

function useMouse() {
  const position = shallowRef([0, 0])

  function update(event: MouseEvent) {
    position.value = [event.clientX, event.clientY];
  }

  onMounted(() => window.addEventListener('mousemove', update))
  onUnmounted(() => window.removeEventListener('mousemove', update))

  return position;
}

const position = useMouse();
</script>

<template>
  <h1>{{ position[0] }}, {{ position[1] }}</h1>
</template>

thead {
  position: sticky;
  top: 0;
  z-index: 2;
}

th:first-child, td:first-child  {
  position: sticky;
  left: 0; 
}

td:first-child {
  background-color: white;
}

th {
  background-color: #f2f2f2;
}

AH00548: NameVirtualHost has no effect and will be removed in the next release /etc/apache2/sites-enabled/002-tocode.co.il.conf:1
VirtualHost configuration:
*:443                  is a NameVirtualHost
         default server tocode.co.il (/etc/apache2/sites-enabled/002-tocode.co.il.conf:8)
         port 443 namevhost tocode.co.il (/etc/apache2/sites-enabled/002-tocode.co.il.conf:8)
         port 443 namevhost www.tocode.co.il (/etc/apache2/sites-enabled/002-tocode.co.il.conf:27)
*:80                   is a NameVirtualHost
         default server tocode.co.il (/etc/apache2/sites-enabled/002-tocode.co.il.conf:3)
         port 80 namevhost tocode.co.il (/etc/apache2/sites-enabled/002-tocode.co.il.conf:3)

  for (let i=0; i < names.length; i++) {
    const fixed = await modifyImage(buffers[i], 512, 512);
    await Deno.writeFile(path.join(dir, names[i]), fixed);
  }

FROM denoland/deno:2.0.3

* The port that your application listens to. *
EXPOSE 8000

WORKDIR /app
RUN bash -c "mkdir -p /app/files && chown -R deno /app/files"

* Prefer not to run as root. *
USER deno

* These steps will be re-run upon each file change in your working directory: *
COPY . .
* Compile the main app so that it doesn't need to be compiled each startup/entry. *
RUN deno cache main.ts

CMD ["run", "-A", "main.ts"]

RUN deno cache main.ts

COPY package*.json ./
RUN npm install

https://en.wikipedia.org/wiki/Special:FilePath/file/{title}

https://upload.wikimedia.org/wikipedia/en/5/5f/Disambig_gray.svg

<template>
  <h2>({{ person.id }}) {{ person.name }}</h2>
  <p>{{ person.url }}</p>
</template>

<script>
import { ref } from 'vue'

export default {
  async setup() {
    const person = ref({
      id: 2,
      name: '',
      url: ''
    })

    try {
      await fetch(\https://swapi.dev/api/people/${person.value.id}\)
      .then(response => response.json())
      .then(data => {
        person.value.name = data.name
        person.value.url  = data.url
      })
    } catch (err) {
      console.error(err);
    }


    return { person }
  }
}
</script>

<script setup lang="ts">
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
import HelloWorld from './components/HelloWorld.vue'
import Person from './components/Person.vue'
</script>

<template>
  <h1>Header</h1>
  <suspense>
    <person />
  </suspense>
  <h1>Footer</h1>
</template>

[:p :foo/bar]

[:p (str :foo/bar)]

given reagent code
https://github.com/reagent-project/reagent

what part of the code causes reagent to convert the element's content to HTML, assuming the content is a keyword

that is what part converts the expression [:p :foo/bar] to React's createElement ?