Skip to content

Commit 94fadc2

Browse files
xiaohkxiaohk
committed
Add initial skeleton
0 parents  commit 94fadc2

14 files changed

+330
-0
lines changed

‎.gitignore

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.DS_Store
2+
node_modules
3+
public/bundle.*
4+
package-lock.json

‎README.md

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
*Psst — looking for a shareable component template? Go here --> [sveltejs/component-template](https://github.com/sveltejs/component-template)*
2+
3+
---
4+
5+
# svelte app
6+
7+
This is a project template for [Svelte](https://svelte.dev) apps. It lives at https://github.com/sveltejs/template.
8+
9+
To create a new project based on this template using [degit](https://github.com/Rich-Harris/degit):
10+
11+
```bash
12+
npx degit sveltejs/template svelte-app
13+
cd svelte-app
14+
```
15+
16+
*Note that you will need to have [Node.js](https://nodejs.org) installed.*
17+
18+
19+
## Get started
20+
21+
Install the dependencies...
22+
23+
```bash
24+
cd svelte-app
25+
npm install
26+
```
27+
28+
...then start [Rollup](https://rollupjs.org):
29+
30+
```bash
31+
npm run dev
32+
```
33+
34+
Navigate to [localhost:5000](http://localhost:5000). You should see your app running. Edit a component file in `src`, save it, and reload the page to see your changes.
35+
36+
By default, the server will only respond to requests from localhost. To allow connections from other computers, edit the `sirv` commands in package.json to include the option `--host 0.0.0.0`.
37+
38+
39+
## Deploying to the web
40+
41+
### With [now](https://zeit.co/now)
42+
43+
Install `now` if you haven't already:
44+
45+
```bash
46+
npm install -g now
47+
```
48+
49+
Then, from within your project folder:
50+
51+
```bash
52+
cd public
53+
now
54+
```
55+
56+
As an alternative, use the [Now desktop client](https://zeit.co/download) and simply drag the unzipped project folder to the taskbar icon.
57+
58+
### With [surge](https://surge.sh/)
59+
60+
Install `surge` if you haven't already:
61+
62+
```bash
63+
npm install -g surge
64+
```
65+
66+
Then, from within your project folder:
67+
68+
```bash
69+
npm run build
70+
surge public
71+
```

‎package.json

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
{
2+
"name": "svelte-app",
3+
"version": "1.0.0",
4+
"devDependencies": {
5+
"rollup": "^1.12.0",
6+
"rollup-plugin-commonjs": "^10.0.0",
7+
"rollup-plugin-livereload": "^1.0.0",
8+
"rollup-plugin-node-resolve": "^5.2.0",
9+
"rollup-plugin-svelte": "^5.0.3",
10+
"rollup-plugin-terser": "^5.1.2",
11+
"svelte": "^3.0.0"
12+
},
13+
"dependencies": {
14+
"bulma": "^0.8.0",
15+
"sirv-cli": "^0.4.4"
16+
},
17+
"scripts": {
18+
"build": "rollup -c",
19+
"dev": "rollup -c -w",
20+
"start": "sirv public --single",
21+
"start:dev": "sirv public --single --dev"
22+
}
23+
}

‎public/favicon.png

3.05 KB
Loading

‎public/global.css

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
:root {
2+
--outer-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
3+
--outer-shadow-sm: 0 .125rem .25rem rgba(0,0,0,.075);
4+
--outer-shadow-lg: 0 1rem 3rem rgba(0,0,0,.175);
5+
--g-red: rgb(255, 59, 48);
6+
--g-blue: rgb(0, 122, 255);
7+
--g-green: rgb(52, 199, 89);
8+
--g-teal: rgb(90, 200, 250);
9+
--g-light-gray: rgb(250, 250, 250);
10+
--g-middle-gray: rgb(190, 190, 190);
11+
--g-dark-gray: rgb(155, 155, 155);
12+
}
13+
14+
html, body {
15+
position: relative;
16+
width: 100%;
17+
height: 100%;
18+
}
19+
20+
body {
21+
color: #333;
22+
margin: 0;
23+
padding: 0;
24+
box-sizing: border-box;
25+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
26+
}
27+

‎public/index.html

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset='utf-8'>
5+
<meta name='viewport' content='width=device-width'>
6+
7+
<title>CNN Explainer</title>
8+
9+
<link rel='icon' type='image/png' href='/favicon.png'>
10+
<link rel='stylesheet' href='/global.css'>
11+
<link rel='stylesheet' href='/bundle.css'>
12+
13+
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
14+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css" />
15+
16+
<script defer src='/bundle.js'></script>
17+
</head>
18+
19+
<body>
20+
</body>
21+
</html>

‎rollup.config.js

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import svelte from 'rollup-plugin-svelte';
2+
import resolve from 'rollup-plugin-node-resolve';
3+
import commonjs from 'rollup-plugin-commonjs';
4+
import livereload from 'rollup-plugin-livereload';
5+
import { terser } from 'rollup-plugin-terser';
6+
import rollup_start_dev from './rollup_start_dev';
7+
8+
const production = !process.env.ROLLUP_WATCH;
9+
10+
export default {
11+
input: 'src/main.js',
12+
output: {
13+
sourcemap: true,
14+
format: 'iife',
15+
name: 'app',
16+
file: 'public/bundle.js'
17+
},
18+
plugins: [
19+
svelte({
20+
// enable run-time checks when not in production
21+
dev: !production,
22+
// we'll extract any component CSS out into
23+
// a separate file — better for performance
24+
css: css => {
25+
css.write('public/bundle.css');
26+
}
27+
}),
28+
29+
// If you have external dependencies installed from
30+
// npm, you'll most likely need these plugins. In
31+
// some cases you'll need additional configuration —
32+
// consult the documentation for details:
33+
// https://github.com/rollup/rollup-plugin-commonjs
34+
resolve({
35+
browser: true,
36+
dedupe: importee => importee === 'svelte' || importee.startsWith('svelte/')
37+
}),
38+
commonjs(),
39+
40+
// In dev mode, call `npm run start:dev` once
41+
// the bundle has been generated
42+
!production && rollup_start_dev,
43+
44+
// Watch the `public` directory and refresh the
45+
// browser on changes when not in production
46+
!production && livereload('public'),
47+
48+
// If we're building for production (npm run build
49+
// instead of npm run dev), minify
50+
production && terser()
51+
],
52+
watch: {
53+
clearScreen: false
54+
}
55+
};

‎rollup_start_dev.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import * as child_process from 'child_process';
2+
3+
let running_dev_server = false;
4+
5+
export default {
6+
writeBundle() {
7+
if (!running_dev_server) {
8+
running_dev_server = true;
9+
child_process.spawn('npm', ['run', 'start:dev'], { stdio: ['ignore', 'inherit', 'inherit'], shell: true });
10+
}
11+
}
12+
};

‎src/App.svelte

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<script>
2+
import Explainer from './Explainer.svelte';
3+
</script>
4+
5+
<style>
6+
#header {
7+
height: 80px;
8+
background: var(--g-middle-gray);
9+
margin-bottom: 20px;
10+
}
11+
</style>
12+
13+
<div id="app-page">
14+
<div id="header"></div>
15+
<Explainer />
16+
</div>

‎src/Detailview.svelte

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<script>
2+
3+
</script>
4+
5+
<style>
6+
</style>
7+
8+
<div>
9+
<h1>Detailview</h1>
10+
</div>

0 commit comments

Comments
 (0)