commit
c471107b73
@ -0,0 +1,2 @@
|
||||
node_modules
|
||||
public/out
|
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,31 @@
|
||||
{
|
||||
"name": "svelte-app",
|
||||
"version": "1.0.0",
|
||||
"scripts": {
|
||||
"build": "rollup -c",
|
||||
"dev": "rollup -c -w",
|
||||
"start": "sirv public"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@rollup/plugin-commonjs": "^14.0.0",
|
||||
"@rollup/plugin-node-resolve": "^8.4.0",
|
||||
"autoprefixer": "^9.8.5",
|
||||
"cssnano": "^4.1.10",
|
||||
"postcss-cli": "^7.1.1",
|
||||
"postcss-color-mod-function": "^3.0.3",
|
||||
"postcss-import": "^12.0.1",
|
||||
"postcss-preset-env": "^6.7.0",
|
||||
"postcss-url": "^8.0.0",
|
||||
"rollup": "^2.23.0",
|
||||
"rollup-plugin-livereload": "^1.3.0",
|
||||
"rollup-plugin-postcss": "^3.1.3",
|
||||
"rollup-plugin-svelte": "^5.2.3",
|
||||
"rollup-plugin-terser": "^6.1.0",
|
||||
"sirv-cli": "^1.0.3",
|
||||
"svelte": "^3.24.0",
|
||||
"svelte-preprocess-postcss": "^1.1.1",
|
||||
"svelte-spa-router": "^2.2.0",
|
||||
"tailwindcss": "^1.6.0"
|
||||
},
|
||||
"dependencies": {}
|
||||
}
|
@ -0,0 +1,27 @@
|
||||
const cssnano = require("cssnano");
|
||||
const postcss_color_mod = require("postcss-color-mod-function");
|
||||
const postcss_preset_env = require("postcss-preset-env");
|
||||
const postcss_Import = require("postcss-import");
|
||||
const postcss_Url = require("postcss-url");
|
||||
const purgecss = require("@fullhuman/postcss-purgecss");
|
||||
|
||||
const production = !process.env.ROLLUP_WATCH;
|
||||
|
||||
module.exports = {
|
||||
plugins: [
|
||||
postcss_Import(),
|
||||
postcss_Url(),
|
||||
require("tailwindcss"),
|
||||
postcss_preset_env({
|
||||
stage: 0,
|
||||
autoprefixer: {
|
||||
grid: true,
|
||||
},
|
||||
}),
|
||||
postcss_color_mod(),
|
||||
cssnano({
|
||||
autoprefixer: false,
|
||||
preset: ["default"],
|
||||
}),
|
||||
],
|
||||
};
|
After Width: | Height: | Size: 186 B |
After Width: | Height: | Size: 172 B |
@ -0,0 +1,13 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="bg-primary text-words">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<link rel="stylesheet" href="out/bundle.css">
|
||||
<title>Stealing posts from Nyafuu</title>
|
||||
</head>
|
||||
<body class="max-w-4xl mx-auto px-4 my-8 color-text">
|
||||
<script src="out/bundle.js"></script>
|
||||
</body>
|
||||
</html>
|
@ -0,0 +1,66 @@
|
||||
import svelte from "rollup-plugin-svelte";
|
||||
import resolve from "@rollup/plugin-node-resolve";
|
||||
import commonjs from "@rollup/plugin-commonjs";
|
||||
import livereload from "rollup-plugin-livereload";
|
||||
import postcss from "rollup-plugin-postcss";
|
||||
import { terser } from "rollup-plugin-terser";
|
||||
import sveltePreprocessPostcss from "svelte-preprocess-postcss";
|
||||
|
||||
const production = !process.env.ROLLUP_WATCH;
|
||||
|
||||
export default {
|
||||
input: "src/main.js",
|
||||
output: {
|
||||
sourcemap: true,
|
||||
format: "iife",
|
||||
name: "app",
|
||||
file: "public/out/bundle.js",
|
||||
},
|
||||
|
||||
plugins: [
|
||||
svelte({
|
||||
dev: !production,
|
||||
|
||||
// Allow PostCSS to include the CSS output from our SFCs.
|
||||
preprocess: { style: sveltePreprocessPostcss() },
|
||||
|
||||
emitCss: true, // Let PostCSS handle it.
|
||||
|
||||
// We can also write CSS to a file.
|
||||
//css: (css) => css.write("public/out/svelte.css");
|
||||
}),
|
||||
|
||||
postcss({ extract: true }), // Write to a file
|
||||
|
||||
resolve({
|
||||
browser: true,
|
||||
dedupe: ["svelte"],
|
||||
}),
|
||||
commonjs(),
|
||||
|
||||
!production && serve(),
|
||||
!production && livereload('public') ,// reload when /public changes
|
||||
production && terser()
|
||||
],
|
||||
|
||||
watch: {
|
||||
clearScreen: false,
|
||||
},
|
||||
};
|
||||
|
||||
function serve() {
|
||||
let started = false;
|
||||
|
||||
return {
|
||||
writeBundle() {
|
||||
if (!started) {
|
||||
started = true;
|
||||
|
||||
require("child_process").spawn("npm", ["run", "start", "--", "--dev"], {
|
||||
stdio: ["ignore", "inherit", "inherit"],
|
||||
shell: true,
|
||||
});
|
||||
}
|
||||
},
|
||||
};
|
||||
}
|
@ -0,0 +1,15 @@
|
||||
<script>
|
||||
import Router from 'svelte-spa-router'
|
||||
import Index from './index.svelte';
|
||||
const themes = [
|
||||
'default'
|
||||
]
|
||||
|
||||
const routes = {
|
||||
'/': Index
|
||||
}
|
||||
</script>
|
||||
|
||||
<main>
|
||||
<Router {routes} />
|
||||
</main>
|
@ -0,0 +1,5 @@
|
||||
<script>
|
||||
let world = 'qt';
|
||||
</script>
|
||||
|
||||
<h1 class="text-center text-4xl font-bold">Hey {world}</h1>
|
@ -0,0 +1,8 @@
|
||||
import './main.pcss';
|
||||
import App from './App.svelte';
|
||||
|
||||
const app = new App({
|
||||
target: document.body
|
||||
});
|
||||
|
||||
export default app;
|
@ -0,0 +1,8 @@
|
||||
@import 'tailwindcss/base';
|
||||
@import 'css/base.css';
|
||||
|
||||
@import 'tailwindcss/components';
|
||||
@import 'css/components.css';
|
||||
|
||||
@import 'tailwindcss/utilities';
|
||||
@import 'css/utilities.css';
|
@ -0,0 +1,36 @@
|
||||
<script>
|
||||
import {onMount} from 'svelte';
|
||||
export let themes;
|
||||
|
||||
let theme;
|
||||
let themeSelect;
|
||||
|
||||
let html = document.querySelector('html');
|
||||
let baseTheme = 'default';
|
||||
|
||||
function toggleTheme() {
|
||||
html.classList.toggle(theme);
|
||||
}
|
||||
|
||||
function handle_theme() {
|
||||
toggleTheme();
|
||||
theme = themeSelect.value
|
||||
toggleTheme();
|
||||
|
||||
localStorage.setItem('theme', theme);
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
theme = localStorage.getItem('theme') || baseTheme;
|
||||
html.classList.toggle(theme);
|
||||
|
||||
themeSelect = document.querySelector('#theme-select');
|
||||
themeSelect.value = theme;
|
||||
});
|
||||
</script>
|
||||
|
||||
<select id="theme-select" class="float-right bg-nav border-1 border-secondary text-nav-link w-1/5" on:change={handle_theme} >
|
||||
{#each themes as theme}
|
||||
<option value={theme} >{theme}</option>
|
||||
{/each}
|
||||
</select>
|
@ -0,0 +1,12 @@
|
||||
const production = !process.env.ROLLUP_WATCH;
|
||||
|
||||
module.exports = {
|
||||
// Use PurgeCSS
|
||||
purge: {
|
||||
enabled: production,
|
||||
content: ["./src/**/*.svelte", "./public/*.html"],
|
||||
},
|
||||
theme: {},
|
||||
variants: {},
|
||||
plugins: [],
|
||||
};
|
Loading…
Reference in new issue