init

.gitignore

@@ -0,0 +1,24 @@
+node_modules
+
+# Output
+.output
+.vercel
+/.svelte-kit
+/build
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Env
+.env
+.env.*
+!.env.example
+!.env.test
+
+# Vite
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*
+
+# Virtual Environment
+**/venv/

.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,8 @@
+{
+	"useTabs": true,
+	"singleQuote": true,
+	"trailingComma": "none",
+	"printWidth": 100,
+	"plugins": ["prettier-plugin-svelte"],
+	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
+}

.vscode/settings.json

@@ -0,0 +1 @@
+{}

README.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
+npm create svelte@latest
+
+# create a new project in my-app
+npm create svelte@latest 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://kit.svelte.dev/docs/adapters) for your target environment.

eslint.config.js

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

package.json

@@ -0,0 +1,48 @@
+{
+	"name": "tutorials",
+	"version": "0.0.1",
+	"private": true,
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"lint": "prettier --check . && eslint .",
+		"format": "prettier --write ."
+	},
+	"devDependencies": {
+		"@iconify/json": "^2.2.230",
+		"@sveltejs/adapter-auto": "^3.0.0",
+		"@sveltejs/kit": "^2.0.0",
+		"@sveltejs/vite-plugin-svelte": "^3.1.1",
+		"@types/eslint": "^8.56.7",
+		"autoprefixer": "^10.4.19",
+		"eslint": "^9.0.0",
+		"eslint-config-prettier": "^9.1.0",
+		"eslint-plugin-svelte": "^2.36.0",
+		"globals": "^15.0.0",
+		"postcss": "^8.4.39",
+		"prettier": "^3.1.1",
+		"prettier-plugin-svelte": "^3.1.2",
+		"shiki": "^1.17.6",
+		"svelte": "^4.2.7",
+		"svelte-check": "^3.6.0",
+		"tailwindcss": "^3.4.6",
+		"tslib": "^2.4.1",
+		"typescript": "^5.0.0",
+		"typescript-eslint": "^8.0.0-alpha.20",
+		"unplugin-icons": "^0.19.0",
+		"vite": "^5.0.3"
+	},
+	"type": "module",
+	"dependencies": {
+		"@shikijs/markdown-it": "^1.17.6",
+		"@tailwindcss/typography": "^0.5.15",
+		"highlight.js": "^11.10.0",
+		"mdsvex": "^0.11.2",
+		"remark-gfm": "^4.0.0",
+		"svelte-icons": "^2.1.0",
+		"svelte-tiny-virtual-list": "^2.1.2"
+	}
+}

postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

src/app.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

src/app.d.ts

@@ -0,0 +1,13 @@
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+declare global {
+	namespace App {
+		// interface Error {}
+		// interface Locals {}
+		// interface PageData {}
+		// interface PageState {}
+		// interface Platform {}
+	}
+}
+
+export {};

src/app.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>

src/lib/components/CodeBlock.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+	import hljs from 'highlight.js/lib/core';
+	import sql from 'highlight.js/lib/languages/sql';
+	import FaRegCopy from 'svelte-icons/fa/FaRegCopy.svelte';
+	import FaCheck from 'svelte-icons/fa/FaCheck.svelte';
+	import FaChevronDown from 'svelte-icons/fa/FaChevronDown.svelte';
+	import 'highlight.js/styles/atom-one-dark.css';
+
+	hljs.registerLanguage('sql', sql);
+
+	export let code: string;
+	export let language: string;
+
+	let highlightedCode: string;
+	let isCopied = false;
+	let isExpanded = false;
+	let codeWrapper: HTMLElement;
+	let shouldShowExpand = false;
+
+	$: highlightedCode = hljs.highlight(code, { language }).value;
+	$: if (codeWrapper) {
+		shouldShowExpand = codeWrapper.scrollHeight > 192;
+	}
+
+	function copyCode() {
+		navigator.clipboard.writeText(code);
+		isCopied = true;
+		setTimeout(() => (isCopied = false), 2000);
+	}
+</script>
+
+<div class="rounded-lg overflow-hidden shadow-lg bg-transparent text-white">
+	<div class="flex justify-end p-2 bg-[#1E1E1E] border-b border-[#2F2E2E]">
+		<button
+			on:click={copyCode}
+			class="p-[1px] rounded-md text-gray-400 hover:text-white transition-colors duration-200 focus:outline-none focus:ring-1 focus:ring-white"
+			aria-label="Copy code"
+		>
+			<div class="w-3 h-3">
+				{#if isCopied}
+					<FaCheck class="text-green-500" />
+				{:else}
+					<FaRegCopy />
+				{/if}
+			</div>
+		</button>
+	</div>
+	<div class="relative" bind:this={codeWrapper}>
+		<pre
+			class="transition-all duration-300 ease-in-out overflow-hidden"
+			class:max-h-48={!isExpanded && shouldShowExpand}
+		><code class="hljs language-{language} text-xs font-mono block">{@html highlightedCode}</code></pre>
+
+		{#if !isExpanded && shouldShowExpand}
+			<div class="absolute inset-x-0 bottom-0 h-6 bg-gradient-to-t from-gray-900 to-transparent pointer-events-none"></div>
+			<button
+				on:click={() => (isExpanded = true)}
+				class="absolute inset-x-0 bottom-0 h-6 flex items-center justify-center text-gray-400 text-xs hover:text-gray-300 transition-colors duration-200"
+			>
+				<div class="w-3 h-3">
+					<FaChevronDown />
+				</div>
+			</button>
+		{/if}
+	</div>
+</div>
+
+<style>
+	pre {
+		scrollbar-width: none;
+		-ms-overflow-style: none;
+	}
+	pre::-webkit-scrollbar {
+		display: none;
+	}
+</style>

src/lib/components/Navbar.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { page } from '$app/stores';
+</script>
+
+<nav class="p-4">
+  <div class="container mx-auto">
+    <a 
+      href="/" 
+      class="font-bold text-xl"
+      class:active={$page.url.pathname === '/'}
+    >
+      DuckDB Snippets
+    </a>
+  </div>
+</nav>

src/lib/config.ts

@@ -0,0 +1,2 @@
+export const title = 'SQL Snippets'
+export const description = 'DuckDB SQL Snippets for the Hugging Face SQL Console'

src/lib/index.ts

@@ -0,0 +1 @@
+// place files you want to import through the `$lib` alias in this folder.

src/lib/types.ts

@@ -0,0 +1,7 @@
+export interface Snippet {
+	id: string
+	title: string
+	slug: string
+	description: string
+	code: string
+}

src/lib/utils.ts

@@ -0,0 +1,8 @@
+type DateStyle = Intl.DateTimeFormatOptions['dateStyle']
+
+export function formatDate(date: string, dateStyle: DateStyle = 'medium', locales = 'en') {
+	// Safari is mad about dashes in the date
+	const dateToFormat = new Date(date.replaceAll('-', '/'))
+	const dateFormatter = new Intl.DateTimeFormat(locales, { dateStyle })
+	return dateFormatter.format(dateToFormat)
+}

src/routes/+layout.svelte

@@ -0,0 +1,11 @@
+<script>
+	import '../app.css';
+	import Navbar from '../lib/components/Navbar.svelte';
+</script>
+
+<div class="flex flex-col min-h-screen font-inter">
+	<main class="flex-grow">
+		<Navbar />
+		<slot />
+	</main>
+</div>

src/routes/+page.server.ts

@@ -0,0 +1,7 @@
+import type { Snippet } from '$lib/types'
+
+export async function load({ fetch }) {
+	const response = await fetch('api/snippets')
+	const snippets: Snippet[] = await response.json()
+	return { snippets }
+}

src/routes/+page.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import * as config from '$lib/config'
+	import type { Snippet } from '$lib/types'
+	import CodeBlock from '$lib/components/CodeBlock.svelte'
+
+	export let data: { snippets: Snippet[] }
+</script>
+
+<svelte:head>
+	<title>{config.title} in DuckDB</title>
+	<meta name="description" content="A collection of snippets for DuckDB." />
+</svelte:head>
+
+<section class="max-w-2xl mx-auto px-4 py-8">
+	<h1 class="text-5xl mt-20 font-bold text-center tracking-tight text-slate-800 mb-8">{config.title}</h1>
+	<p class="text-base text-center text-slate-600 mb-8">{config.description}</p>
+	<ul class="space-y-12">
+		{#each data.snippets as snippet}
+			<li class="bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300">
+				<div class="p-4">
+					<a href={`${snippet.slug}`} class="block mb-4 hover:underline transition-colors duration-300">
+						<h2 class="text-2xl font-bold transition-colors duration-300">{snippet.title}</h2>
+					</a>
+					<p class="text-sm text-slate-700 font-mono mb-6">{snippet.description}</p>
+					{#if snippet.code}
+						<CodeBlock code={snippet.code} language="sql" />
+					{/if}
+					</div>
+				</li>
+			{/each}
+		</ul>
+	</section>

src/routes/[slug]/+page.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import type { PageData } from './$types'
+
+	export let data: PageData
+</script>
+
+<!-- SEO -->
+<svelte:head>
+	<title>{data.snippet.title}</title>
+	<meta property="og:type" content="article" />
+	<meta property="og:title" content={data.snippet.title} />
+	<meta name="description" content={data.snippet.description} />
+</svelte:head>
+
+<article class="max-w-3xl mx-auto px-4 py-8">
+	<div class="prose max-w-none">
+		<svelte:component this={data.content} />
+	</div>
+</article>

src/routes/[slug]/+page.ts

@@ -0,0 +1,17 @@
+import { error } from '@sveltejs/kit'
+
+export async function load({ params }) {
+	try {
+		const snippet = await import(`../../snippets/${params.slug}.md`)
+		if (!snippet) {
+			throw error(404, `Could not find snippet ${params.slug}`)
+		}
+
+		return {
+			snippet: snippet.metadata,
+			content: snippet.default
+		}
+	} catch {
+		throw error(404, `Could not find snippet ${params.slug}`)
+	}
+}

src/routes/api/snippets/+server.ts

@@ -0,0 +1,26 @@
+import { json } from '@sveltejs/kit'
+import type { Snippet } from '$lib/types'
+
+async function getSnippets() {
+	const snippets: Snippet[] = []
+
+	const paths = import.meta.glob('/src/snippets/*.md', { eager: true })
+
+	for (const path in paths) {
+		const file = paths[path]
+		const slug = path.split('/').at(-1)?.replace('.md', '')
+
+		if (file && typeof file === 'object' && 'metadata' in file && slug) {
+			const metadata = file.metadata as Omit<Snippet, 'slug'>
+			const snippet = { ...metadata, slug } satisfies Snippet
+			snippets.push(snippet)
+		}
+	}
+
+	return snippets.sort((a, b) => a.title.localeCompare(b.title))
+}
+
+export async function GET() {
+	const snippets = await getSnippets()
+	return json(snippets)
+}

src/snippets/leakage.md

@@ -0,0 +1,64 @@
+---
+id: "duckdb-leakage-detection"
+title: "Leakage Detection"
+slug: "duckdb-leakage-detection-query"
+description: "Detect data leakage between train and test datasets by calculating the overlap percentage."
+code: |
+    WITH
+        overlapping_rows AS (
+            SELECT COUNT(*) AS overlap_count
+            FROM train
+            INTERSECT
+            SELECT COUNT(*) AS overlap_count
+            FROM test
+        ),
+        total_unique_rows AS (
+            SELECT COUNT(*) AS total_count
+            FROM (
+                SELECT * FROM train
+                UNION
+                SELECT * FROM test
+            ) combined
+        )
+    SELECT
+        overlap_count,
+        total_count,
+        (overlap_count * 100.0 / total_count) AS overlap_percentage
+    FROM overlapping_rows, total_unique_rows;
+---
+
+# DuckDB Leakage Detection Query
+
+This snippet demonstrates how to use DuckDB to detect potential data leakage between train and test datasets by calculating the overlap percentage.
+
+```sql
+WITH
+    overlapping_rows AS (
+        SELECT COUNT(*) AS overlap_count
+        FROM train
+        INTERSECT
+        SELECT COUNT(*) AS overlap_count
+        FROM test
+    ),
+    total_unique_rows AS (
+        SELECT COUNT(*) AS total_count
+        FROM (
+            SELECT * FROM train
+            UNION
+            SELECT * FROM test
+        ) combined
+    )
+SELECT
+    overlap_count,
+    total_count,
+    (overlap_count * 100.0 / total_count) AS overlap_percentage
+FROM overlapping_rows, total_unique_rows;
+```
+
+There is a very good in depth explanation of leakage in public datasets in this [article](https://huggingface.co/blog/lbourdois/lle).
+
+# Example Query
+
+You can check out this [link](https://huggingface.co/datasets/stanfordnlp/imdb?sql_console=true&sql=WITH%0A++++overlapping_rows+AS+%28%0A++++++++SELECT+COUNT%28*%29+AS+overlap_count%0A++++++++FROM+train%0A++++++++INTERSECT%0A++++++++SELECT+COUNT%28*%29+AS+overlap_count%0A++++++++FROM+test%0A++++%29%2C%0A++++total_unique_rows+AS+%28%0A++++++++SELECT+COUNT%28*%29+AS+total_count%0A++++++++FROM+%28%0A++++++++++++SELECT+*+FROM+train%0A++++++++++++UNION%0A++++++++++++SELECT+*+FROM+test%0A++++++++%29+combined%0A++++%29%0ASELECT%0A++++overlap_count%2C%0A++++total_count%2C%0A++++%28overlap_count+*+100.0+%2F+total_count%29+AS+overlap_percentage%0AFROM+overlapping_rows%2C+total_unique_rows%3B%0A) for the leakage query for the IMDB dataset.
+
+![leakage-query-imdb](./leakage-query-image.png)

src/snippets/summarize.md

@@ -0,0 +1,38 @@
+---
+id: "duckdb-summarize"
+title: "Summarize"
+slug: "duckdb-summarize-query"
+description: "Summarize a specific table or columns for a quick overview of the dataset's structure and statistics."
+code: |
+    -- summarize a specific table
+    SUMMARIZE my_table
+
+    -- summarize a specific column
+    SUMMARIZE my_table.my_column
+---
+
+# DuckDB Summarize Query
+
+This snippet demonstrates how to use the `SUMMARIZE` function in DuckDB to calculate aggregate statistics for a dataset.
+
+```sql
+-- summarize a specific table
+SUMMARIZE my_table
+
+-- summarize a specific column
+SUMMARIZE my_table.my_column
+```
+
+The `SUMMARIZE` command in DuckDB provides a comprehensive overview of your data by computing various aggregates for each column:
+
+- `min` and `max`: The minimum and maximum values in the column.
+- `approx_unique`: An approximation of the number of unique values.
+- `avg`: The average value for numeric columns.
+- `std`: The standard deviation for numeric columns.
+- `q25`, `q50`, `q75`: The 25th, 50th (median), and 75th percentiles.
+- `count`: The total number of rows.
+- `null_percentage`: The percentage of NULL values in the column.
+
+This command is particularly useful for quick data exploration and understanding the distribution of values across your dataset.
+
+You can read more about the `SUMMARIZE` command in the DuckDB documentation [here](https://duckdb.org/docs/guides/meta/summarize.html).

svelte.config.js

@@ -0,0 +1,32 @@
+import adapter from '@sveltejs/adapter-auto'
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
+
+import { mdsvex, escapeSvelte } from 'mdsvex'
+import { createHighlighter } from 'shiki'
+
+/** @type {import('mdsvex').MdsvexOptions} */
+const mdsvexOptions = {
+	extensions: ['.md'],
+	highlight: {
+		highlighter: async (code, lang = 'text') => {
+			const highlighter = await createHighlighter({
+				themes: ['github-dark'],
+				langs: [ 'sql']
+			})
+			await highlighter.loadLanguage('sql')
+			const html = escapeSvelte(highlighter.codeToHtml(code, { lang, theme: 'github-dark' }))
+			return `{@html \`${html}\` }`
+		}
+	},
+}
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	extensions: ['.svelte', '.md'],
+	preprocess: [vitePreprocess(), mdsvex(mdsvexOptions)],
+	kit: {
+		adapter: adapter()
+	}
+}
+
+export default config

tailwind.config.js

@@ -0,0 +1,9 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./src/**/*.{html,js,svelte,ts}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [require('@tailwindcss/typography')]
+}
+

tsconfig.json

@@ -0,0 +1,26 @@
+{
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"types": [
+			"unplugin-icons/types/svelte"
+		],
+		"paths": {
+			"$lib": ["./src/lib"],
+			"$lib/*": ["./src/lib/*"]
+		},
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true,
+		"moduleResolution": "bundler"
+	}
+	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
+	// except $lib which is handled by https://kit.svelte.dev/docs/configuration#files
+	//
+	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
+	// from the referenced tsconfig.json - TypeScript does not merge them in
+}

vite.config.ts

@@ -0,0 +1,9 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+import Icons from 'unplugin-icons/vite'
+
+export default defineConfig({
+	plugins: [sveltekit(), Icons({ compiler: 'svelte' })]
+});
+
+