Initial commit

.eslintignore

@@ -0,0 +1,13 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock

.eslintrc.cjs

@@ -0,0 +1,20 @@
+module.exports = {
+	root: true,
+	parser: '@typescript-eslint/parser',
+	extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
+	plugins: ['svelte3', '@typescript-eslint'],
+	ignorePatterns: ['*.cjs'],
+	overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
+	settings: {
+		'svelte3/typescript': () => require('typescript')
+	},
+	parserOptions: {
+		sourceType: 'module',
+		ecmaVersion: 2020
+	},
+	env: {
+		browser: true,
+		es2017: true,
+		node: true
+	}
+};

.gitignore

@@ -0,0 +1,8 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example

.npmrc

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

.prettierignore

@@ -0,0 +1,13 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock

.prettierrc

@@ -0,0 +1,6 @@
+{
+	"useTabs": true,
+	"singleQuote": true,
+	"trailingComma": "none",
+	"printWidth": 100
+}

README.md

@@ -0,0 +1,15 @@
+# SVELTE-DUPLY sveltekit template
+
+simple sveltekit template for single page app building.
+
+## Setup
+
+- Clone/fork this repository (or click `use this template`)
+- `yarn` or `npm install`
+- `yarn dev` or `npm run dev`
+
+## Build from
+
+- Sveltekit + vite (Typescript)
+- [Tailwindcss](https://tailwindcss.com)
+- [DaisyUi](https://daisyui.com)

package.json

@@ -0,0 +1,43 @@
+{
+	"name": "svelte-duply",
+	"version": "0.0.1",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"package": "svelte-kit package",
+		"preview": "vite preview",
+		"test": "playwright test",
+		"check": "svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
+		"lint": "prettier --check --plugin-search-dir=. . && eslint .",
+		"format": "prettier --write --plugin-search-dir=. ."
+	},
+	"devDependencies": {
+		"@playwright/test": "^1.22.2",
+		"@sveltejs/adapter-auto": "next",
+		"@sveltejs/kit": "next",
+		"@typescript-eslint/eslint-plugin": "^5.27.0",
+		"@typescript-eslint/parser": "^5.27.0",
+		"autoprefixer": "^10.4.7",
+		"daisyui": "^2.22.0",
+		"eslint": "^8.16.0",
+		"eslint-config-prettier": "^8.3.0",
+		"eslint-plugin-svelte3": "^4.0.0",
+		"postcss": "^8.4.14",
+		"postcss-load-config": "^4.0.1",
+		"prettier": "^2.6.2",
+		"prettier-plugin-svelte": "^2.7.0",
+		"svelte": "^3.44.0",
+		"svelte-check": "^2.7.1",
+		"svelte-preprocess": "^4.10.7",
+		"svelte-share-buttons-component": "^1.5.0",
+		"tailwindcss": "^3.1.5",
+		"theme-change": "^2.2.0",
+		"tslib": "^2.3.1",
+		"typescript": "^4.7.4",
+		"vite": "^3.0.0"
+	},
+	"type": "module",
+	"license": "MIT",
+	"dependencies": {}
+}

playwright.config.ts

@@ -0,0 +1,10 @@
+import type { PlaywrightTestConfig } from '@playwright/test';
+
+const config: PlaywrightTestConfig = {
+	webServer: {
+		command: 'npm run build && npm run preview',
+		port: 4173
+	}
+};
+
+export default config;

postcss.config.cjs

@@ -0,0 +1,13 @@
+const tailwindcss = require('tailwindcss');
+const autoprefixer = require('autoprefixer');
+
+const config = {
+	plugins: [
+		//Some plugins, like tailwindcss/nesting, need to run before Tailwind,
+		tailwindcss(),
+		//But others, like autoprefixer, need to run after,
+		autoprefixer
+	]
+};
+
+module.exports = config;

src/app.css

@@ -0,0 +1,4 @@
+/* Write your global styles here, in PostCSS syntax */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

src/app.d.ts

@@ -0,0 +1,11 @@
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+// and what to do when importing types
+declare namespace App {
+	// interface Locals {}
+	// interface Platform {}
+	// interface PrivateEnv {}
+	// interface PublicEnv {}
+	// interface Session {}
+	// interface Stuff {}
+}

src/app.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="coffee">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="description" content="" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		%sveltekit.head%
+	</head>
+	<body>
+		<div>%sveltekit.body%</div>
+	</body>
+</html>

src/lib/components/Darkmode.svelte

@@ -0,0 +1,9 @@
+<div class="fixed top-[2%] right-4">
+    <div>
+        <span class="mx-2">Light</span>
+        <select data-choose-theme class="select select-bordered select-sm">
+            <option value="coffee">Off</option>
+            <option value="garden">On</option>
+        </select>
+    </div>
+</div>

src/lib/components/Footer.svelte

@@ -0,0 +1,10 @@
+<script>
+    const d = new Date()
+    const y = d.getFullYear()
+</script>
+
+<div class="w-full hidden lg:flex fixed top-auto bottom-4 center gap-2 pr-4 sm:pr-0 justify-center">
+    <span class="text-[12px]"> 
+        <a href="https://pickyzz.dev" target="_blank">Pickyzz</a> {y}
+    </span>
+</div>

src/lib/components/Head.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+    export let title: string
+    export let description: string
+    export let url: string
+    export let imageUrl: string
+</script>
+
+<svelte:head>
+  <title>{title}</title>
+
+  <meta name="title" content={title} />
+  <meta name="description" content={description} />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta property="og:url" content={url} />
+  <meta property="og:type" content="website" />
+  <meta property="og:title" content={title} />
+  <meta property="og:description" content={description} />
+  <meta name="twitter:title" content={title} />
+  <meta name="twitter:card" content="summary_large_image" />
+
+  {#if imageUrl}
+    <meta property="og:image" content={imageUrl} />
+    <meta name="twitter:image" content={imageUrl} />
+  {/if}
+</svelte:head>

src/lib/components/Kofi.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+    import LibLoader from './LibLoader.svelte'
+  
+    export let name: string
+    export let label = 'Buy me Coffee'
+  
+    const loadKofiWidget = () => {
+      window.kofiWidgetOverlay?.draw(
+        name,
+        {
+          type: 'floating-chat',
+          'floating-chat.donateButton.text': label,
+          'floating-chat.donateButton.background-color': 'orange',
+          'floating-chat.donateButton.text-color': 'black'
+        },
+        'kofiContainer'
+      )
+    }
+  </script>
+
+  {#if name}
+    <div id="kofiContainer" class="web-only">{label}</div>
+
+    <LibLoader
+      on:load={loadKofiWidget}
+      src="https://storage.ko-fi.com/cdn/scripts/overlay-widget.js"
+      libraryDetectionObject="kofiWidgetOverlay"
+    />
+  {/if}
+

src/lib/components/LibLoader.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+    // Based on code from https://stackoverflow.com/questions/59629947/how-do-i-load-an-external-js-library-in-svelte-sapper
+    import { onMount, createEventDispatcher } from 'svelte'
+    const dispatch = createEventDispatcher()
+    export let src: string
+    export let libraryDetectionObject: string
+    let script: HTMLScriptElement
+    onMount(() => {
+      if (libraryDetectionObject && window && typeof window[libraryDetectionObject] !== 'undefined') {
+        return dispatch('load')
+      }
+      script.addEventListener('load', () => {
+        dispatch('load')
+      })
+      script.addEventListener('error', (event) => {
+        dispatch('error')
+      })
+    })
+  </script>
+
+  <svelte:head>
+    <script bind:this={script} {src}></script>
+  </svelte:head>
+

src/lib/components/ShareButton.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+    import { Facebook, Twitter, Line } from 'svelte-share-buttons-component'
+  
+    export let url: string
+    export let title: string
+  </script>
+
+  {#if url}
+    <div
+      class="w-full fixed top-auto bottom-4 lg:right-2 md:right-0 center flex gap-2 pr-4 sm:pr-0 justify-end sm:justify-end"
+    >
+      <Facebook class="h-10 w-10 rounded-full" {url} quote={title} />
+      <Twitter class="h-10 w-10 rounded-full" {url} text={title} />
+    </div>
+  {/if}
+

src/routes/__layout.svelte

@@ -0,0 +1,28 @@
+<script lang='ts'>
+	import '../app.css';
+	import Footer from '$lib/components/Footer.svelte'
+	import Head from '$lib/components/Head.svelte'
+	import Kofi from '$lib/components/Kofi.svelte'
+	import ShareButton from '$lib/components/ShareButton.svelte'
+	import { themeChange } from 'theme-change'
+	import { onMount } from 'svelte'
+	import Darkmode from '$lib/components/Darkmode.svelte'
+
+	onMount(() => {
+		themeChange(false)
+	})
+
+	const url = 'https://svelte-duply.pickyzz.dev'
+	const title = 'Svelte-duply'
+	const description = 'Sveltekit Template'
+	const imageUrl = `${url}/screenshot.png`
+</script>
+
+<Head {title} {description} {url} {imageUrl} />
+<Kofi name="pickyzz" label="Buy me Coffee" />
+<ShareButton {url} {title} />
+<main>
+	<Darkmode />
+	<Footer />
+	<slot />
+</main>

src/routes/index.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+</script>
+
+<div class="w-full h-screen flex flex-col justify-center items-center">
+  <h1 class="text-6xl flex flex-col">
+    <span>Cats think </span><span>they will</span><span>rule the world</span>
+  </h1>
+</div>

svelte.config.js

@@ -0,0 +1,19 @@
+import adapter from '@sveltejs/adapter-auto';
+import preprocess from 'svelte-preprocess';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	// Consult https://github.com/sveltejs/svelte-preprocess
+	// for more information about preprocessors
+	preprocess: [
+		preprocess({
+			postcss: true
+		})
+	],
+
+	kit: {
+		adapter: adapter()
+	}
+};
+
+export default config;

tailwind.config.cjs

@@ -0,0 +1,13 @@
+const config = {
+	content: ['./src/**/*.{html,js,svelte,ts}'],
+
+	theme: {
+		extend: {}
+	},
+
+	plugins: [
+		require('daisyui')
+	]
+};
+
+module.exports = config;

tests/test.ts

@@ -0,0 +1,6 @@
+import { expect, test } from '@playwright/test';
+
+test('index page has expected h1', async ({ page }) => {
+	await page.goto('/');
+	expect(await page.textContent('h1')).toBe('Welcome to SvelteKit');
+});