mirror of
https://github.com/pyscript/pyscript.git
synced 2022-05-01 19:47:48 +03:00
add new pyscript project files
This commit is contained in:
Fabio Pliger
12
pyscriptjs/README.md
Normal file
12
pyscriptjs/README.md
Normal file
@@ -0,0 +1,12 @@
|
|||||||
|
# Svelte TypeScript Tailwindcss Setup
|
||||||
|
|
||||||
|
svelte template based on the default svelte/template with enabled typescript and tailwindcss support.
|
||||||
|
|
||||||
|
Related blogpost (on Svelte+TS+Tailwind): https://www.liip.ch/en/blog/svelte-typescript-tailwind-setup
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npx degit munxar/svelte-template my-svelte-project
|
||||||
|
cd my-svelte-project
|
||||||
|
npm i
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
32
pyscriptjs/package.json
Normal file
32
pyscriptjs/package.json
Normal file
@@ -0,0 +1,32 @@
|
|||||||
|
{
|
||||||
|
"name": "svelte-app",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"scripts": {
|
||||||
|
"build": "NODE_ENV=production rollup -c",
|
||||||
|
"dev": "rollup -c -w",
|
||||||
|
"start": "sirv public",
|
||||||
|
"validate": "svelte-check"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@rollup/plugin-commonjs": "^17.0.0",
|
||||||
|
"@rollup/plugin-node-resolve": "^11.0.0",
|
||||||
|
"@rollup/plugin-typescript": "^8.1.0",
|
||||||
|
"@tsconfig/svelte": "^1.0.0",
|
||||||
|
"autoprefixer": "^10.2.3",
|
||||||
|
"postcss": "^8.2.4",
|
||||||
|
"rollup": "^2.3.4",
|
||||||
|
"rollup-plugin-css-only": "^3.1.0",
|
||||||
|
"rollup-plugin-livereload": "^2.0.0",
|
||||||
|
"rollup-plugin-svelte": "^7.0.0",
|
||||||
|
"rollup-plugin-terser": "^7.0.0",
|
||||||
|
"svelte": "^3.0.0",
|
||||||
|
"svelte-check": "^1.0.0",
|
||||||
|
"svelte-preprocess": "^4.6.3",
|
||||||
|
"tailwindcss": "^2.0.2",
|
||||||
|
"tslib": "^2.0.0",
|
||||||
|
"typescript": "^4.1.3"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"sirv-cli": "^1.0.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
74
pyscriptjs/rollup.config.js
Normal file
74
pyscriptjs/rollup.config.js
Normal file
@@ -0,0 +1,74 @@
|
|||||||
|
import svelte from "rollup-plugin-svelte";
|
||||||
|
import commonjs from "@rollup/plugin-commonjs";
|
||||||
|
import resolve from "@rollup/plugin-node-resolve";
|
||||||
|
import livereload from "rollup-plugin-livereload";
|
||||||
|
import { terser } from "rollup-plugin-terser";
|
||||||
|
import sveltePreprocess from "svelte-preprocess";
|
||||||
|
import typescript from "@rollup/plugin-typescript";
|
||||||
|
import css from "rollup-plugin-css-only";
|
||||||
|
|
||||||
|
const production = !process.env.ROLLUP_WATCH;
|
||||||
|
|
||||||
|
function serve() {
|
||||||
|
let server;
|
||||||
|
|
||||||
|
function toExit() {
|
||||||
|
if (server) server.kill(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
writeBundle() {
|
||||||
|
if (server) return;
|
||||||
|
server = require("child_process").spawn(
|
||||||
|
"npm",
|
||||||
|
["run", "start", "--", "--dev"],
|
||||||
|
{
|
||||||
|
stdio: ["ignore", "inherit", "inherit"],
|
||||||
|
shell: true,
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
process.on("SIGTERM", toExit);
|
||||||
|
process.on("exit", toExit);
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export default {
|
||||||
|
input: "src/main.ts",
|
||||||
|
output: {
|
||||||
|
sourcemap: true,
|
||||||
|
format: "iife",
|
||||||
|
name: "app",
|
||||||
|
file: "public/build/bundle.js",
|
||||||
|
},
|
||||||
|
plugins: [
|
||||||
|
svelte({
|
||||||
|
// add postcss config with tailwind
|
||||||
|
preprocess: sveltePreprocess({
|
||||||
|
postcss: {
|
||||||
|
plugins: [require("tailwindcss"), require("autoprefixer")],
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
compilerOptions: {
|
||||||
|
dev: !production,
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
css({ output: "bundle.css" }),
|
||||||
|
resolve({
|
||||||
|
browser: true,
|
||||||
|
dedupe: ["svelte"],
|
||||||
|
}),
|
||||||
|
commonjs(),
|
||||||
|
typescript({
|
||||||
|
sourceMap: !production,
|
||||||
|
inlineSources: !production,
|
||||||
|
}),
|
||||||
|
!production && serve(),
|
||||||
|
!production && livereload("public"),
|
||||||
|
production && terser(),
|
||||||
|
],
|
||||||
|
watch: {
|
||||||
|
clearScreen: false,
|
||||||
|
},
|
||||||
|
};
|
||||||
16
pyscriptjs/src/App.svelte
Normal file
16
pyscriptjs/src/App.svelte
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
// import Button from "./Button.svelte";
|
||||||
|
// import Logo from "./Logo.svelte";
|
||||||
|
import Main from "./Main.svelte";
|
||||||
|
import Header from "./Header.svelte";
|
||||||
|
import Tailwind from "./Tailwind.svelte";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<Tailwind />
|
||||||
|
|
||||||
|
<div class="min-h-full">
|
||||||
|
<Header />
|
||||||
|
|
||||||
|
<Main />
|
||||||
|
|
||||||
|
</div>
|
||||||
133
pyscriptjs/src/Header.svelte
Normal file
133
pyscriptjs/src/Header.svelte
Normal file
@@ -0,0 +1,133 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
export let name = "PyScript";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<nav class="bg-gray-800">
|
||||||
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<div class="flex items-center justify-between h-16">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="flex-shrink-0">
|
||||||
|
<!-- <img class="h-8 w-8" src="https://tailwindui.com/img/logos/workflow-mark-indigo-500.svg" alt="Workflow"> -->
|
||||||
|
<label class="text-gray-300">{name}</label>
|
||||||
|
</div>
|
||||||
|
<div class="hidden md:block">
|
||||||
|
<div class="ml-10 flex items-baseline space-x-4">
|
||||||
|
<!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
|
||||||
|
<a href="#" class="bg-gray-900 text-white px-3 py-2 rounded-md text-sm font-medium" aria-current="page">Dashboard</a>
|
||||||
|
|
||||||
|
<!-- <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Team</a>
|
||||||
|
|
||||||
|
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Projects</a>
|
||||||
|
|
||||||
|
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Calendar</a>
|
||||||
|
|
||||||
|
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Reports</a> -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="hidden md:block">
|
||||||
|
<div class="ml-4 flex items-center md:ml-6">
|
||||||
|
<button type="button" class="bg-gray-800 p-1 rounded-full text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
|
||||||
|
<span class="sr-only">View notifications</span>
|
||||||
|
<!-- Heroicon name: outline/bell -->
|
||||||
|
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- Profile dropdown -->
|
||||||
|
<div class="ml-3 relative">
|
||||||
|
<!-- <div>
|
||||||
|
<button type="button" class="max-w-xs bg-gray-800 rounded-full flex items-center text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
|
||||||
|
<span class="sr-only">Open user menu</span>
|
||||||
|
<img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
|
||||||
|
</button>
|
||||||
|
</div> -->
|
||||||
|
|
||||||
|
<!--
|
||||||
|
Dropdown menu, show/hide based on menu state.
|
||||||
|
|
||||||
|
Entering: "transition ease-out duration-100"
|
||||||
|
From: "transform opacity-0 scale-95"
|
||||||
|
To: "transform opacity-100 scale-100"
|
||||||
|
Leaving: "transition ease-in duration-75"
|
||||||
|
From: "transform opacity-100 scale-100"
|
||||||
|
To: "transform opacity-0 scale-95"
|
||||||
|
-->
|
||||||
|
<!-- <div class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1"> -->
|
||||||
|
<!-- Active: "bg-gray-100", Not Active: "" -->
|
||||||
|
<!-- <a href="#" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-0">Your Profile</a>
|
||||||
|
|
||||||
|
<a href="#" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-1">Settings</a>
|
||||||
|
|
||||||
|
<a href="#" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-2">Sign out</a>
|
||||||
|
</div> -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="-mr-2 flex md:hidden">
|
||||||
|
<!-- Mobile menu button -->
|
||||||
|
<button type="button" class="bg-gray-800 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white" aria-controls="mobile-menu" aria-expanded="false">
|
||||||
|
<span class="sr-only">Open main menu</span>
|
||||||
|
<!--
|
||||||
|
Heroicon name: outline/menu
|
||||||
|
|
||||||
|
Menu open: "hidden", Menu closed: "block"
|
||||||
|
-->
|
||||||
|
<svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
||||||
|
</svg>
|
||||||
|
<!--
|
||||||
|
Heroicon name: outline/x
|
||||||
|
|
||||||
|
Menu open: "block", Menu closed: "hidden"
|
||||||
|
-->
|
||||||
|
<svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Mobile menu, show/hide based on menu state. -->
|
||||||
|
<div class="md:hidden" id="mobile-menu">
|
||||||
|
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
|
||||||
|
<!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
|
||||||
|
<a href="#" class="bg-gray-900 text-white block px-3 py-2 rounded-md text-base font-medium" aria-current="page">Dashboard</a>
|
||||||
|
|
||||||
|
<!-- <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Team</a>
|
||||||
|
|
||||||
|
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Projects</a>
|
||||||
|
|
||||||
|
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Calendar</a>
|
||||||
|
|
||||||
|
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Reports</a> -->
|
||||||
|
</div>
|
||||||
|
<div class="pt-4 pb-3 border-t border-gray-700">
|
||||||
|
<div class="flex items-center px-5">
|
||||||
|
<!-- <div class="flex-shrink-0">
|
||||||
|
<img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="ml-3">
|
||||||
|
<div class="text-base font-medium leading-none text-white">Tom Cook</div>
|
||||||
|
<div class="text-sm font-medium leading-none text-gray-400">tom@example.com</div>
|
||||||
|
</div> -->
|
||||||
|
<button type="button" class="ml-auto bg-gray-800 flex-shrink-0 p-1 rounded-full text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
|
||||||
|
<span class="sr-only">View notifications</span>
|
||||||
|
<!-- Heroicon name: outline/bell -->
|
||||||
|
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<!-- <div class="mt-3 px-2 space-y-1">
|
||||||
|
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700">Your Profile</a>
|
||||||
|
|
||||||
|
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700">Settings</a>
|
||||||
|
|
||||||
|
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700">Sign out</a>
|
||||||
|
</div> -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
15
pyscriptjs/src/Main.svelte
Normal file
15
pyscriptjs/src/Main.svelte
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
|
||||||
|
<header class="bg-white shadow">
|
||||||
|
<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
|
||||||
|
<h1 class="text-3xl font-bold text-gray-900">Dashboard</h1>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
<div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
|
||||||
|
<!-- Replace with your content -->
|
||||||
|
<div class="px-4 py-6 sm:px-0">
|
||||||
|
<div class="border-4 border-dashed border-gray-200 rounded-lg h-96"></div>
|
||||||
|
</div>
|
||||||
|
<!-- /End replace -->
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
5
pyscriptjs/src/Tailwind.svelte
Normal file
5
pyscriptjs/src/Tailwind.svelte
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
<style global lang="postcss">
|
||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
|
</style>
|
||||||
7
pyscriptjs/src/main.ts
Normal file
7
pyscriptjs/src/main.ts
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
import App from "./App.svelte";
|
||||||
|
|
||||||
|
const app = new App({
|
||||||
|
target: document.body,
|
||||||
|
});
|
||||||
|
|
||||||
|
export default app;
|
||||||
24
pyscriptjs/tailwind.config.js
Normal file
24
pyscriptjs/tailwind.config.js
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
const { tailwindExtractor } = require("tailwindcss/lib/lib/purgeUnusedStyles");
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
purge: {
|
||||||
|
content: ["src/**/*.svelte", "public/index.html"],
|
||||||
|
options: {
|
||||||
|
defaultExtractor: (content) => [
|
||||||
|
...tailwindExtractor(content),
|
||||||
|
...[...content.matchAll(/(?:class:)*([\w\d-/:%.]+)/gm)].map(
|
||||||
|
([_match, group, ..._rest]) => group
|
||||||
|
),
|
||||||
|
],
|
||||||
|
keyframes: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
darkMode: false, // or 'media' or 'class'
|
||||||
|
theme: {
|
||||||
|
extend: {},
|
||||||
|
},
|
||||||
|
variants: {
|
||||||
|
extend: {},
|
||||||
|
},
|
||||||
|
plugins: [],
|
||||||
|
};
|
||||||
6
pyscriptjs/tsconfig.json
Normal file
6
pyscriptjs/tsconfig.json
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
{
|
||||||
|
"extends": "@tsconfig/svelte/tsconfig.json",
|
||||||
|
|
||||||
|
"include": ["src/**/*"],
|
||||||
|
"exclude": ["node_modules/*", "__sapper__/*", "public/*"]
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user