Skip to content

Commit 17ebc69

Browse files
Benjamin-FrostBenjamin-Frost
committedFeb 13, 2020
feat: Create website using Smelte
1 parent 4582a02 commit 17ebc69

33 files changed

+112620
-672
lines changed
 

‎.gitignore

+5-19
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,5 @@
1-
.gradle
2-
/.idea
3-
/out
4-
/build
5-
*.iml
6-
*.ipr
7-
*.iws
8-
9-
# Ignore Gradle GUI config
10-
gradle-app.setting
11-
12-
# Avoid ignoring Gradle wrapper jar file (.jar files are usually ignored)
13-
!gradle-wrapper.jar
14-
15-
# Cache of project
16-
.gradletasknamecache
17-
18-
# # Work around https://youtrack.jetbrains.com/issue/IDEA-116898
19-
# gradle/wrapper/gradle-wrapper.properties
1+
.DS_Store
2+
node_modules
3+
npm-debug.log
4+
dist
5+
public/bundle.*

‎README.md

+8
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,10 @@
11
# web-frontend
2+
23
Website of the MobileDev-Club
4+
5+
## Installation
6+
Clone the project, install the dependencies and write some pretty code!
7+
```
8+
npm install
9+
npm run dev
10+
```

‎build.gradle.kts

-49
This file was deleted.

‎gradle.properties

-5
This file was deleted.

‎gradle/wrapper/gradle-wrapper.jar

-53.9 KB
Binary file not shown.

‎gradle/wrapper/gradle-wrapper.properties

-5
This file was deleted.

‎gradlew

-172
This file was deleted.

‎gradlew.bat

-84
This file was deleted.

‎package-lock.json

+5,095
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
{
2+
"name": "smelte-template-no-sapper",
3+
"version": "0.0.1",
4+
"license": "MIT",
5+
"author": {
6+
"email": "matyunya@gmail.com",
7+
"name": "Maxim Matyunin"
8+
},
9+
"devDependencies": {
10+
"@fullhuman/postcss-purgecss": "^1.2.0",
11+
"autoprefixer": "^9.6.0",
12+
"npm-run-all": "^4.1.5",
13+
"postcss": "^7.0.17",
14+
"postcss-import": "^12.0.1",
15+
"pre-commit": "^1.2.2",
16+
"rollup": "^1.10.1",
17+
"rollup-plugin-commonjs": "^9.3.4",
18+
"rollup-plugin-livereload": "^1.0.0",
19+
"rollup-plugin-node-resolve": "^4.2.3",
20+
"rollup-plugin-postcss": "^2.0.3",
21+
"rollup-plugin-svelte": "^5.0.3",
22+
"rollup-plugin-terser": "^4.0.4",
23+
"sirv-cli": "^0.4.0",
24+
"svelte": "^3.12.1",
25+
"svelte-preprocess": "^2.14.0",
26+
"tailwindcss": "^1.0.3"
27+
},
28+
"scripts": {
29+
"build": "rollup -c",
30+
"autobuild": "rollup -c -w",
31+
"dev": "run-p start:dev autobuild",
32+
"start": "sirv public",
33+
"start:dev": "sirv public --dev"
34+
},
35+
"dependencies": {
36+
"postcss-input-range": "^4.0.0",
37+
"postcss-url": "^8.0.0",
38+
"smelte": "^0.2.4",
39+
"tailwindcss-elevation": "^0.3.1"
40+
}
41+
}

‎postcss.config.js

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
const extractor = require("smelte/src/utils/css-extractor.js");
2+
3+
module.exports = (purge = false) => {
4+
return [
5+
require("postcss-import")(),
6+
require("postcss-url")(),
7+
require("postcss-input-range")(),
8+
require("autoprefixer")(),
9+
require("tailwindcss")("./tailwind.config.js"),
10+
purge &&
11+
require("cssnano")({
12+
preset: "default"
13+
}),
14+
purge &&
15+
require("@fullhuman/postcss-purgecss")({
16+
content: ["./**/*.svelte"],
17+
extractors: [
18+
{
19+
extractor,
20+
extensions: ["svelte"]
21+
}
22+
],
23+
whitelist: ["html", "body", "stroke-primary"],
24+
whitelistPatterns: [/ripple/]
25+
})
26+
].filter(Boolean);
27+
};

‎public/components.css

+17
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/components.css.map

+40
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/favicon.png

3.05 KB
Loading

‎public/global.css

Whitespace-only changes.

‎public/index.html

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf8" />
5+
<meta name="viewport" content="width=device-width" />
6+
7+
<title>Smelte app app</title>
8+
9+
<link
10+
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500|Material+Icons&display=swap"
11+
rel="stylesheet"
12+
/>
13+
<link rel="icon" type="image/png" href="favicon.png" />
14+
<link rel="stylesheet" href="/components.css" />
15+
<link rel="stylesheet" href="/utils.css" />
16+
</head>
17+
18+
<body>
19+
<script src="bundle.js"></script>
20+
</body>
21+
</html>

‎public/utils.css

+103,614
Large diffs are not rendered by default.

‎rollup.config.js

+60
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
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 postcss from "rollup-plugin-postcss";
7+
import getPreprocessor from "svelte-preprocess";
8+
9+
const production = !process.env.ROLLUP_WATCH;
10+
11+
const preprocess = getPreprocessor({
12+
transformers: {
13+
postcss: {
14+
plugins: require("./postcss.config.js")()
15+
}
16+
}
17+
});
18+
19+
export default {
20+
input: "src/main.js",
21+
output: {
22+
sourcemap: true,
23+
format: "iife",
24+
name: "app",
25+
file: "public/bundle.js"
26+
},
27+
plugins: [
28+
svelte({
29+
preprocess,
30+
// enable run-time checks when not in production
31+
dev: !production,
32+
css: css => {
33+
css.write("public/components.css");
34+
}
35+
}),
36+
postcss({
37+
plugins: require("./postcss.config.js")(production),
38+
extract: "public/utils.css"
39+
}),
40+
41+
// If you have external dependencies installed from
42+
// npm, you'll most likely need these plugins. In
43+
// some cases you'll need additional configuration —
44+
// consult the documentation for details:
45+
// https://github.com/rollup/rollup-plugin-commonjs
46+
resolve({ browser: true }),
47+
commonjs(),
48+
49+
// Watch the `public` directory and refresh the
50+
// browser on changes when not in production
51+
!production && livereload("public"),
52+
53+
// If we're building for production (npm run build
54+
// instead of npm run dev), minify
55+
production && terser()
56+
],
57+
watch: {
58+
clearScreen: false
59+
}
60+
};

‎settings.gradle.kts

-1
This file was deleted.

‎src/App.svelte

+118
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
<script>
2+
import { AppBar, Card, Button, Image } from "smelte";
3+
4+
const listProjects = [{
5+
heading: 'Google',
6+
subheading: 'Subheading 1',
7+
url: 'https://google.de',
8+
imageUrl: 'https://placekitten.com/300/200'
9+
}, {
10+
heading: 'Amazon',
11+
subheading: 'Subheading 2',
12+
url: 'https://amazon.de',
13+
imageUrl: 'https://placekitten.com/300/200'
14+
}, {
15+
heading: 'Amazon',
16+
subheading: 'Subheading 2',
17+
url: 'https://amazon.de',
18+
imageUrl: 'https://placekitten.com/300/200'
19+
},{
20+
heading: 'Amazon',
21+
subheading: 'Subheading 2',
22+
url: 'https://amazon.de',
23+
imageUrl: 'https://placekitten.com/300/200'
24+
}, {
25+
heading: 'Github',
26+
subheading: 'Subheading 3',
27+
url: 'https://github.com',
28+
imageUrl: 'https://placekitten.com/300/200'
29+
}];
30+
31+
const listClubhead = [{
32+
firstname: 'Jonas',
33+
lastname: 'Wanke',
34+
email: 'jonas@wanke.de',
35+
imageUrl: 'https://placekitten.com/300/200'
36+
}, {
37+
firstname: 'Marcel',
38+
lastname: 'Garus',
39+
email: 'marcel@garus.de',
40+
imageUrl: 'https://placekitten.com/300/200'
41+
}];
42+
43+
</script>
44+
45+
<svelte:head>
46+
<title>HPI MobileDev-Klub</title>
47+
</svelte:head>
48+
49+
<AppBar color="bg-hpi-red">
50+
<a href="." class="px-2 md:px-8">
51+
<h6 class="p-3 text-white tracking-widest font-thin text-lg">HPI MobileDev-Klub</h6>
52+
</a>
53+
</AppBar>
54+
<div class="container p-8 lg:max-w-5xl mx-auto h-full items-center mt-24">
55+
<section class="text-center">
56+
<h2>Willkommen auf der Startseite des HPI MobileDev-Klubs!</h2>
57+
<p class="py-4">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
58+
</section>
59+
<section>
60+
<h4 class="pb-3">Unsere Projekte</h4>
61+
<div class="flex flex-wrap">
62+
{#each listProjects as project}
63+
<div class="w-1/3 p-2">
64+
<a href="{ project.url }" target="_blank">
65+
<Card.Card>
66+
<div slot="media">
67+
<Image
68+
class="w-full"
69+
src="{ project.imageUrl }"
70+
alt="kitty"
71+
/>
72+
</div>
73+
<div slot="text" class="p-5 pb-2 pt-3 text-gray-700 body-2">
74+
<h6>{ project.heading }</h6>
75+
<p>{ project.subheading }</p>
76+
</div>
77+
</Card.Card>
78+
</a>
79+
</div>
80+
{/each}
81+
</div>
82+
</section>
83+
<section>
84+
<h4 class="pb-3">Unsere Klubsprecher</h4>
85+
<div class="flex flex-wrap">
86+
{#each listClubhead as clubhead}
87+
<div class="w-1/3 p-2">
88+
<Card.Card hover={ false }>
89+
<div slot="media">
90+
<Image
91+
class="w-full"
92+
src="{ clubhead.imageUrl }"
93+
alt="kitty"
94+
/>
95+
</div>
96+
<div slot="text" class="p-5 pb-2 pt-3 text-gray-700 body-2">
97+
<h6>{ clubhead.firstname + ' ' + clubhead.lastname}</h6>
98+
<a class="text-hpi-red" href="mailto:{ clubhead.email }">{ clubhead.email }</a>
99+
</div>
100+
</Card.Card>
101+
</div>
102+
{/each}
103+
</div>
104+
</section>
105+
<section>
106+
<h4 class="pb-3">Klubtreffen (Termine)</h4>
107+
<p>Unser Klub trifft sich in der Vorlesungszeit an jedem Donnerstag um 17 Uhr.</p>
108+
</section>
109+
110+
</div>
111+
<div class="w-full bg-gray-200 h-12">
112+
<div class="container lg:max-w-5xl mx-auto">
113+
<div class="flex">
114+
<p class="pr-5">Impressum</p>
115+
<p>Datenschutz</p>
116+
</div>
117+
</div>
118+
</div>

‎src/main.css

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
section {
2+
padding-top: 1.25rem;
3+
padding-bottom: 1.25rem;
4+
}
5+
6+
.bg-hpi-red {
7+
background-color: #b1063a;
8+
}
9+
10+
.text-hpi-red {
11+
color: #b1063a;
12+
}

‎src/main.js

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import App from './App.svelte';
2+
import './tailwind.css';
3+
import './main.css';
4+
5+
const app = new App({
6+
target: document.body
7+
});
8+
9+
export default app;

‎src/main/kotlin/de/hpi/cloud/webfrontend/Application.kt

-234
This file was deleted.

‎src/main/kotlin/de/hpi/cloud/webfrontend/Utils.kt

-15
This file was deleted.

‎src/main/resources/WebFrontend.csr

-18
This file was deleted.

‎src/main/resources/WebFrontend.jks

-2.54 KB
Binary file not shown.

‎src/main/resources/application.conf

-18
This file was deleted.

‎src/main/resources/logback.xml

-12
This file was deleted.

‎src/main/resources/static/ktor_logo.svg

-23
This file was deleted.

‎src/tailwind.css

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
@import 'smelte/src/tailwind';

‎src/test/kotlin/de/hpi/cloud/webfrontend/ApplicationTest.kt

-17
This file was deleted.

‎tailwind.config.js

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
// Extend your config here.
2+
const config = require("smelte/tailwind.config.js");
3+
4+
module.exports = config;

‎yarn.lock

+3,548
Large diffs are not rendered by default.

0 commit comments

Comments
 (0)
Please sign in to comment.