Skip to content

Commit ce9f0e0

Browse files
hanieluhanielu
committed
fixed transition
0 parents  commit ce9f0e0

22 files changed

+2454
-0
lines changed

‎.gitignore

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

‎README.md

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
# Google Keep Clone built With SvelteJS And Firebase
2+
This project was a test of my skills as a developer a week into learning svelte. All part of practicing to become a better developer :)
3+
### Started: Sunday, November 29, 2020, 8:28 AM
4+
### Ended: Wednesday, December 2, 2020, 10:05 AM
5+
### Note
6+
> While forking this repo, or taking implementation, please make reference to this repo => https://github.com/HanielU/google-keep-sveltejs-firebase
7+
## Features
8+
- Add notes to to database (firestore) which are fetched and updataed in the UI in real-time.
9+
- Edit notes which are then stored in the database in realtime which is then reflected in the UI.
10+
- Delete selected notes from database as well as UI.
11+
## Demo
12+
A video demonstration of this project is found at https://www.youtube.com/watch?v=qfnhHjBXGtA
13+
An online demo of this project is found https://keep-svelte.netlify.app. ***Internet connection required.*** A
14+
### Disclaimer
15+
--- ---
16+
- Some of the styling was borrowed from *https://github.com/bchiang7/google-keep-vue-firebase*
17+
- I have no affiliations with mentioned party

‎package-lock.json

Lines changed: 1419 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎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+
"scripts": {
5+
"build": "rollup -c",
6+
"dev": "rollup -c -w",
7+
"start": "sirv public"
8+
},
9+
"devDependencies": {
10+
"@rollup/plugin-commonjs": "^16.0.0",
11+
"@rollup/plugin-node-resolve": "^10.0.0",
12+
"rollup": "^2.3.4",
13+
"rollup-plugin-css-only": "^3.0.0",
14+
"rollup-plugin-livereload": "^2.0.0",
15+
"rollup-plugin-svelte": "^7.0.0",
16+
"rollup-plugin-terser": "^7.0.0",
17+
"svelte": "^3.0.0"
18+
},
19+
"dependencies": {
20+
"firebase": "^8.1.1",
21+
"sirv-cli": "^1.0.0"
22+
}
23+
}

‎public/favicon.png

1.34 KB
Loading

‎public/global.css

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
/* html,
8+
body {
9+
position: relative;
10+
width: 100%;
11+
height: 100%;
12+
} */
13+
14+
body {
15+
color: #333;
16+
margin: 0;
17+
/* padding: 8px; */
18+
box-sizing: border-box;
19+
font-family: "Roboto", BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans,
20+
Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
21+
}
22+
23+
a {
24+
color: rgb(0, 100, 200);
25+
text-decoration: none;
26+
}
27+
28+
a:hover {
29+
text-decoration: underline;
30+
}
31+
32+
a:visited {
33+
color: rgb(0, 80, 160);
34+
}
35+
36+
label {
37+
display: block;
38+
}
39+
40+
input,
41+
textarea {
42+
width: 100%;
43+
display: block;
44+
border: 0;
45+
outline: 0;
46+
margin: 0;
47+
padding: 0;
48+
font-size: 16px;
49+
background-color: transparent;
50+
font-family: "Open Sans";
51+
}
52+
53+
textarea::placeholder {
54+
font-weight: 600;
55+
}
56+
57+
input::placeholder,
58+
textarea::placeholder {
59+
opacity: 0.9;
60+
}
61+
62+
input {
63+
font-weight: 600;
64+
font-size: 18px;
65+
margin-bottom: 10px;
66+
}
67+
68+
textarea {
69+
resize: none;
70+
line-height: 1.5;
71+
min-height: 5em;
72+
max-height: 50vh;
73+
width: 100%;
74+
}
75+
76+
input:disabled {
77+
color: #ccc;
78+
}
79+
80+
button {
81+
color: #333;
82+
background-color: #f4f4f4;
83+
outline: none;
84+
}
85+
86+
button:disabled {
87+
color: #999;
88+
}
89+
90+
/* button:not(:disabled):active {
91+
background-color: #ddd;
92+
} */
93+
94+
button:focus {
95+
border-color: #666;
96+
}
97+
98+
.freeze {
99+
overflow: hidden;
100+
}

‎public/imgs/firebase-logo.png

9.87 KB
Loading

‎public/imgs/github-fork.png

10.1 KB
Loading

‎public/imgs/keep-logo.png

6 KB
Loading

‎public/imgs/svelte-logo.png

13.9 KB
Loading

‎public/index.html

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width,initial-scale=1" />
6+
7+
<link rel="preconnect" href="https://fonts.gstatic.com" />
8+
<link
9+
href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap"
10+
rel="stylesheet"
11+
/>
12+
<link rel="preconnect" href="https://fonts.gstatic.com" />
13+
<link
14+
href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap"
15+
rel="stylesheet"
16+
/>
17+
18+
<title>Google Keep Clone</title>
19+
20+
<link rel="icon" type="image/png" href="/favicon.png" />
21+
<link rel="stylesheet" href="./global.css" />
22+
<link rel="stylesheet" href="/build/bundle.css" />
23+
<script defer src="/build/bundle.js"></script>
24+
</head>
25+
26+
<body></body>
27+
</html>

‎rollup.config.js

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
import svelte from 'rollup-plugin-svelte';
2+
import commonjs from '@rollup/plugin-commonjs';
3+
import resolve from '@rollup/plugin-node-resolve';
4+
import livereload from 'rollup-plugin-livereload';
5+
import { terser } from 'rollup-plugin-terser';
6+
import css from 'rollup-plugin-css-only';
7+
8+
const production = !process.env.ROLLUP_WATCH;
9+
10+
function serve() {
11+
let server;
12+
13+
function toExit() {
14+
if (server) server.kill(0);
15+
}
16+
17+
return {
18+
writeBundle() {
19+
if (server) return;
20+
server = require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
21+
stdio: ['ignore', 'inherit', 'inherit'],
22+
shell: true
23+
});
24+
25+
process.on('SIGTERM', toExit);
26+
process.on('exit', toExit);
27+
}
28+
};
29+
}
30+
31+
export default {
32+
input: 'src/main.js',
33+
output: {
34+
sourcemap: true,
35+
format: 'iife',
36+
name: 'app',
37+
file: 'public/build/bundle.js'
38+
},
39+
plugins: [
40+
svelte({
41+
compilerOptions: {
42+
// enable run-time checks when not in production
43+
dev: !production
44+
}
45+
}),
46+
// we'll extract any component CSS out into
47+
// a separate file - better for performance
48+
css({ output: 'bundle.css' }),
49+
50+
// If you have external dependencies installed from
51+
// npm, you'll most likely need these plugins. In
52+
// some cases you'll need additional configuration -
53+
// consult the documentation for details:
54+
// https://github.com/rollup/plugins/tree/master/packages/commonjs
55+
resolve({
56+
browser: true,
57+
dedupe: ['svelte']
58+
}),
59+
commonjs(),
60+
61+
// In dev mode, call `npm run start` once
62+
// the bundle has been generated
63+
!production && serve(),
64+
65+
// Watch the `public` directory and refresh the
66+
// browser on changes when not in production
67+
!production && livereload('public'),
68+
69+
// If we're building for production (npm run build
70+
// instead of npm run dev), minify
71+
production && terser()
72+
],
73+
watch: {
74+
clearScreen: false
75+
}
76+
};

‎scripts/setupTypeScript.js

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
// @ts-check
2+
3+
/** This script modifies the project to support TS code in .svelte files like:
4+
5+
<script lang="ts">
6+
export let name: string;
7+
</script>
8+
9+
As well as validating the code for CI.
10+
*/
11+
12+
/** To work on this script:
13+
rm -rf test-template template && git clone sveltejs/template test-template && node scripts/setupTypeScript.js test-template
14+
*/
15+
16+
const fs = require("fs")
17+
const path = require("path")
18+
const { argv } = require("process")
19+
20+
const projectRoot = argv[2] || path.join(__dirname, "..")
21+
22+
// Add deps to pkg.json
23+
const packageJSON = JSON.parse(fs.readFileSync(path.join(projectRoot, "package.json"), "utf8"))
24+
packageJSON.devDependencies = Object.assign(packageJSON.devDependencies, {
25+
"svelte-check": "^1.0.0",
26+
"svelte-preprocess": "^4.0.0",
27+
"@rollup/plugin-typescript": "^6.0.0",
28+
"typescript": "^3.9.3",
29+
"tslib": "^2.0.0",
30+
"@tsconfig/svelte": "^1.0.0"
31+
})
32+
33+
// Add script for checking
34+
packageJSON.scripts = Object.assign(packageJSON.scripts, {
35+
"validate": "svelte-check"
36+
})
37+
38+
// Write the package JSON
39+
fs.writeFileSync(path.join(projectRoot, "package.json"), JSON.stringify(packageJSON, null, " "))
40+
41+
// mv src/main.js to main.ts - note, we need to edit rollup.config.js for this too
42+
const beforeMainJSPath = path.join(projectRoot, "src", "main.js")
43+
const afterMainTSPath = path.join(projectRoot, "src", "main.ts")
44+
fs.renameSync(beforeMainJSPath, afterMainTSPath)
45+
46+
// Switch the app.svelte file to use TS
47+
const appSveltePath = path.join(projectRoot, "src", "App.svelte")
48+
let appFile = fs.readFileSync(appSveltePath, "utf8")
49+
appFile = appFile.replace("<script>", '<script lang="ts">')
50+
appFile = appFile.replace("export let name;", 'export let name: string;')
51+
fs.writeFileSync(appSveltePath, appFile)
52+
53+
// Edit rollup config
54+
const rollupConfigPath = path.join(projectRoot, "rollup.config.js")
55+
let rollupConfig = fs.readFileSync(rollupConfigPath, "utf8")
56+
57+
// Edit imports
58+
rollupConfig = rollupConfig.replace(`'rollup-plugin-terser';`, `'rollup-plugin-terser';
59+
import sveltePreprocess from 'svelte-preprocess';
60+
import typescript from '@rollup/plugin-typescript';`)
61+
62+
// Replace name of entry point
63+
rollupConfig = rollupConfig.replace(`'src/main.js'`, `'src/main.ts'`)
64+
65+
// Add preprocessor
66+
rollupConfig = rollupConfig.replace(
67+
'compilerOptions:',
68+
'preprocess: sveltePreprocess(),\n\t\t\tcompilerOptions:'
69+
);
70+
71+
// Add TypeScript
72+
rollupConfig = rollupConfig.replace(
73+
'commonjs(),',
74+
'commonjs(),\n\t\ttypescript({\n\t\t\tsourceMap: !production,\n\t\t\tinlineSources: !production\n\t\t}),'
75+
);
76+
fs.writeFileSync(rollupConfigPath, rollupConfig)
77+
78+
// Add TSConfig
79+
const tsconfig = `{
80+
"extends": "@tsconfig/svelte/tsconfig.json",
81+
82+
"include": ["src/**/*"],
83+
"exclude": ["node_modules/*", "__sapper__/*", "public/*"]
84+
}`
85+
const tsconfigPath = path.join(projectRoot, "tsconfig.json")
86+
fs.writeFileSync(tsconfigPath, tsconfig)
87+
88+
// Delete this script, but not during testing
89+
if (!argv[2]) {
90+
// Remove the script
91+
fs.unlinkSync(path.join(__filename))
92+
93+
// Check for Mac's DS_store file, and if it's the only one left remove it
94+
const remainingFiles = fs.readdirSync(path.join(__dirname))
95+
if (remainingFiles.length === 1 && remainingFiles[0] === '.DS_store') {
96+
fs.unlinkSync(path.join(__dirname, '.DS_store'))
97+
}
98+
99+
// Check if the scripts folder is empty
100+
if (fs.readdirSync(path.join(__dirname)).length === 0) {
101+
// Remove the scripts folder
102+
fs.rmdirSync(path.join(__dirname))
103+
}
104+
}
105+
106+
// Adds the extension recommendation
107+
fs.mkdirSync(path.join(projectRoot, ".vscode"))
108+
fs.writeFileSync(path.join(projectRoot, ".vscode", "extensions.json"), `{
109+
"recommendations": ["svelte.svelte-vscode"]
110+
}
111+
`)
112+
113+
console.log("Converted to TypeScript.")
114+
115+
if (fs.existsSync(path.join(projectRoot, "node_modules"))) {
116+
console.log("\nYou will need to re-run your dependency manager to get started.")
117+
}

0 commit comments

Comments
 (0)