Skip to content

Commit b02c89c

Browse files
MarkPieszakMarkPieszak
committed
chore: update template info
1 parent ddc08ea commit b02c89c

File tree

9 files changed

+198
-67
lines changed

9 files changed

+198
-67
lines changed

‎CODE_OF_CONDUCT.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ further defined and clarified by project maintainers.
5555
## Enforcement
5656

5757
Instances of abusive, harassing, or otherwise unacceptable behavior may be
58-
reported by contacting the project team at hello@DevHelp.Online. All
58+
reported by contacting the project team at hello@trilon.io. All
5959
complaints will be reviewed and investigated and will result in a response that
6060
is deemed necessary and appropriate to the circumstances. The project team is
6161
obligated to maintain confidentiality with regard to the reporter of an incident.

‎content/ClientApp/components/about.vue

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<template>
2+
<div>
3+
<h1 class="mt-4">
4+
ASP.NET Core & Vue Starter Template
5+
</h1>
6+
<p>Powered by:</p>
7+
<ul>
8+
<li><a href="https://get.asp.net/"><icon :icon="['fab', 'microsoft']"/> ASP.NET Core</a> and <a href="https://msdn.microsoft.com/en-us/library/67ef8sbd.aspx">C#</a> for cross-platform server-side code</li>
9+
<li><a href="https://vuejs.org/"><icon :icon="['fab', 'vuejs']"/> Vue.js</a> for client-side code</li>
10+
<li><a href="https://webpack.js.org/">Webpack</a> for building and bundling client-side resources</li>
11+
<li><a href="http://getbootstrap.com/">Bootstrap</a> for layout and styling</li>
12+
<li><a href="http://jquery.com/">JQuery</a> for Bootstrap components</li>
13+
<li><a href="https://fontawesome.com"><icon :icon="['fab', 'font-awesome']"/> Font Awesome</a> (Free) for the icons</li>
14+
<li><a href="api/SampleData/WeatherForecasts">API sample data</a> from the dotnet controller</li>
15+
</ul>
16+
17+
<p>To help you get started, we've also set up:</p>
18+
<ul>
19+
<li><strong>Client-side navigation</strong>. For example, click <em>Counter</em> then <em>Back</em> to return
20+
here.</li>
21+
<li><strong>Webpack dev middleware</strong>. In development mode, there's no need to run the <code>webpack</code> build tool. Your client-side resources are dynamically built on demand. Updates are available as soon
22+
as you modify any file.</li>
23+
<li><strong>Hot module replacement</strong>. In development mode, you don't even need to reload the page after
24+
making most changes. Within seconds of saving changes to files, your Vue.js app will be rebuilt and
25+
a new instance injected is into the page.</li>
26+
<li><strong>Code splitting and lazy loading</strong>. Vue.js components may optionally be bundled individually and
27+
loaded on demand. For example, the code and template for 'Counter' is not loaded until you navigate to
28+
it..</li>
29+
<li><strong>Efficient production builds</strong>. In production mode, development-time features are disabled,
30+
and the <code>webpack</code> build tool produces minified static CSS and JavaScript files.</li>
31+
</ul>
32+
33+
<h3 class="mt-5">
34+
Made with <icon icon="heart" class="fuscia" /> by
35+
<a href="https://trilon.io" target="_blank" class="fuscia">Trilon.io</a>
36+
</h3>
37+
38+
<a href="https://trilon.io" target="_blank">
39+
<img class="trilon-mini" src="https://trilon.io/meta/og-image.png" />
40+
</a>
41+
42+
</div>
43+
</template>
44+
45+
<script>
46+
export default {
47+
data () {
48+
return {}
49+
}
50+
}
51+
</script>
52+
53+
<style>
54+
55+
</style>

‎content/ClientApp/components/fetch-data.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,12 @@
66

77
<div v-if="!forecasts" class="text-center">
88
<p><em>Loading...</em></p>
9-
<h1><icon icon="spinner" pulse/></h1>
9+
<h1><icon icon="spinner" pulse/></h1>
1010
</div>
1111

1212
<template v-if="forecasts">
1313
<table class="table">
14-
<thead class="bg-dark text-white">
14+
<thead class="dark-bg text-white">
1515
<tr>
1616
<th>Date</th>
1717
<th>Temp. (C)</th>

‎content/ClientApp/components/home-page.vue

Lines changed: 50 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,54 @@
11
<template>
22
<div>
3-
<h1>Hello, world!</h1>
4-
<p>Welcome to your new single-page application, built with: </p>
5-
<ul>
6-
<li><a href="https://get.asp.net/"><icon :icon="['fab', 'microsoft']"/> ASP.NET Core</a> and <a href="https://msdn.microsoft.com/en-us/library/67ef8sbd.aspx">C#</a> for cross-platform server-side code</li>
7-
<li><a href="https://vuejs.org/"><icon :icon="['fab', 'vuejs']"/> Vue.js</a> for client-side code</li>
8-
<li><a href="https://webpack.js.org/">Webpack</a> for building and bundling client-side resources</li>
9-
<li><a href="http://getbootstrap.com/">Bootstrap</a> for layout and styling</li>
10-
<li><a href="http://jquery.com/">JQuery</a> for Bootstrap components</li>
11-
<li><a href="https://fontawesome.com"><icon :icon="['fab', 'font-awesome']"/> Font Awesome</a> (Free) for the icons</li>
12-
<li><a href="api/SampleData/WeatherForecasts">API sample data</a> from the dotnet controller</li>
13-
</ul>
14-
<p>To help you get started, we've also set up:</p>
15-
<ul>
16-
<li><strong>Client-side navigation</strong>. For example, click <em>Counter</em> then <em>Back</em> to return
17-
here.</li>
18-
<li><strong>Webpack dev middleware</strong>. In development mode, there's no need to run the <code>webpack</code> build tool. Your client-side resources are dynamically built on demand. Updates are available as soon
19-
as you modify any file.</li>
20-
<li><strong>Hot module replacement</strong>. In development mode, you don't even need to reload the page after
21-
making most changes. Within seconds of saving changes to files, your Vue.js app will be rebuilt and
22-
a new instance injected is into the page.</li>
23-
<li><strong>Code splitting and lazy loading</strong>. Vue.js components may optionally be bundled individually and
24-
loaded on demand. For example, the code and template for 'Counter' is not loaded until you navigate to
25-
it..</li>
26-
<li><strong>Efficient production builds</strong>. In production mode, development-time features are disabled,
27-
and the <code>webpack</code> build tool produces minified static CSS and JavaScript files.</li>
28-
</ul>
29-
30-
<br><br>
31-
32-
<h2>This Template brought to you by <a href="http://DevHelp.Online">DevHelp.Online</a></h2>
33-
<strong>Consulting | Development | Training | Workshops</strong><br>
34-
<p>Get your Team or Application up to speed by working with some of the leading industry experts in JavaScript & ASP.NET!</p>
35-
36-
<strong>Contact us today: </strong>
37-
<p><a href="mailto:hello@devhelp.online"><icon icon="envelope"/> Hello@DevHelp.Online</a></p>
3+
<h1 class="mt-4">
4+
ASP.NET Core & Vue Starter Template
5+
</h1>
6+
7+
<h2 class="mt-5">
8+
Made with <icon icon="heart" class="fuscia" /> by
9+
<a href="https://trilon.io" target="_blank" class="fuscia">Trilon.io</a>
10+
</h2>
11+
12+
<a href="https://trilon.io" target="_blank">
13+
<img class="trilon-logo" src="https://trilon.io/meta/og-image.png" />
14+
</a>
15+
16+
<br><br>
17+
18+
<h3>
19+
<a href="https://trilon.io" target="_blank" class="fuscia">
20+
Enterprise Consulting | Development | Training | Workshops
21+
</a>
22+
</h3>
23+
<strong>
24+
Get your Team & Application up to speed by working with some of the leading industry
25+
experts in JavaScript & ASP.NET!
26+
</strong>
27+
<br><br>
28+
<ul>
29+
<li>Official <a href="https://www.nestjs.com" target="_blank">NestJS</a> Consulting</li>
30+
<li>Architectural Review</li>
31+
<li>JavaScript Application Consulting
32+
<ul>
33+
<li>Vue | React | Angular</li>
34+
<li>Best-practices</li>
35+
</ul>
36+
</li>
37+
<li>Team Augmentation & Support</li>
38+
<li>Much more!</li>
39+
</ul>
40+
41+
<strong>Let's get in touch and see how Trilon can help you! </strong>
42+
<p><a href="mailto:hello@trilon.io"><icon icon="envelope"/> hello@trilon.io</a></p>
43+
44+
<h3 class="mt-5">Find us Online</h3>
45+
<strong>Website: <a href="https://trilon.io" target="_blank">https://trilon.io</a></strong>
46+
<br>
47+
<strong>Twitter: <a href="https://twitter.com/trilon_io" target="_blank">@Trilon_IO</a></strong>
48+
<br>
49+
<strong>Github: <a href="https://github.com/trilonio" target="_blank">@Trilon_IO</a></strong>
50+
51+
<br><br><br>
3852
</div>
3953
</template>
4054

@@ -47,4 +61,5 @@ export default {
4761
</script>
4862

4963
<style>
64+
5065
</style>

‎content/ClientApp/components/nav-menu.vue

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,21 @@
11
<template>
22
<div class="main-nav">
3-
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
3+
<nav class="navbar navbar-expand-md navbar-dark">
44
<button class="navbar-toggler" type="button" @click="toggleCollapsed">
55
<span class="navbar-toggler-icon"></span>
66
<span class="icon-bar"></span>
77
<span class="icon-bar"></span>
88
<span class="icon-bar"></span>
99
</button>
10-
<router-link class="navbar-brand" to="/"><icon :icon="['fab', 'microsoft']"/> ASP.NET Core with Vue.js 2</router-link>
10+
11+
<router-link class="navbar-brand" to="/"><icon :icon="['fab', 'microsoft']"/> ASP.NET Core & Vue.js</router-link>
1112

1213
<transition name="slide">
1314
<div :class="'collapse navbar-collapse' + (!collapsed ? ' show':'')" v-show="!collapsed">
14-
<ul class="navbar-nav mr-auto">
15+
<ul class="navbar-nav">
1516
<li class="nav-item" v-for="(route, index) in routes" :key="index">
1617
<router-link :to="route.path" exact-active-class="active">
17-
<icon :icon="route.icon" class="mr-2" /><span>{{ route.display }}</span>
18+
<icon :icon="route.icon" class="mr-2 menu-icon" /><span>{{ route.display }}</span>
1819
</router-link>
1920
</li>
2021
</ul>
@@ -53,4 +54,4 @@
5354
.slide-enter-to, .slide-leave {
5455
max-height: 20em;
5556
}
56-
</style>
57+
</style>

‎content/ClientApp/css/site.css

Lines changed: 51 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,45 @@
11
/* This file should be reviewed. It's not optimal, but it works for now. */
22
.navbar {
33
display: list-item;
4+
background: #1e0e40;
5+
}
6+
7+
.dark { color: #1e0e40; }
8+
.fuscia { color: #e91e63; }
9+
10+
.dark-bg { background: #1e0e40; }
11+
12+
.btn-primary { background: #e91e63; border: 1px #e91e63 solid;}
13+
.btn-primary:hover { background: #1e0e40; border: 1px #1e0e40 solid;}
14+
15+
.page-item.active .page-link {
16+
background: #e91e63;
17+
border-color: #e91e63;
18+
}
19+
20+
.page-link:focus {
21+
box-shadow: 0 0 0 0.2rem #e9e9e9;
22+
}
23+
24+
a, .page-link, .page-link:hover {
25+
color: #e91e63;
26+
}
27+
a:hover {
28+
color: #1e0e40;
429
}
530

631
/* Highlighting rules for nav menu items */
32+
li.nav-item {
33+
margin: 1rem 0 0 0;
34+
}
35+
.nav-item a {
36+
display: inline-block;
37+
padding: 2rem;
38+
}
739
.nav-item a.active,
840
.nav-item a.active:hover,
941
.nav-item a.active:focus {
10-
background-color: #4189C7;
42+
background-color: #e91e63;
1143
color: white;
1244
text-decoration: underline;
1345
}
@@ -27,6 +59,19 @@
2759
z-index: 1;
2860
}
2961

62+
.menu-icon {
63+
min-width: 30px;
64+
}
65+
66+
.trilon-logo {
67+
max-width: 600px;
68+
height: auto;
69+
}
70+
.trilon-mini {
71+
max-width: 300px;
72+
height: auto;
73+
}
74+
3075
@media (max-width: 767px) {
3176
/* On small screens, the nav menu spans the full width of the screen. Leave a space for it. */
3277
body {
@@ -39,7 +84,7 @@
3984
.main-nav {
4085
height: 100%;
4186
width: calc(25% - 20px);
42-
}
87+
}
4388
.main-nav .navbar {
4489
border-radius: 0px;
4590
border-width: 0px;
@@ -68,12 +113,13 @@
68113
border-radius: 4px;
69114
color: white;
70115
}
71-
116+
72117
.navbar a {
118+
73119
/* If a menu item's text is too long, truncate it */
74120
width: 95%; /* Bug to fix here. Width 100% overflow. */
75121
white-space: nowrap;
76-
overflow: hidden;
122+
/* overflow: hidden; */
77123
text-overflow: ellipsis;
78124
}
79-
}
125+
}

‎content/ClientApp/icons.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,10 @@ import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
77
// unnecessary things.
88
library.add(
99
require('@fortawesome/free-solid-svg-icons').faEnvelope,
10+
require('@fortawesome/free-solid-svg-icons').faHeart,
1011
require('@fortawesome/free-solid-svg-icons').faGraduationCap,
1112
require('@fortawesome/free-solid-svg-icons').faHome,
13+
require('@fortawesome/free-solid-svg-icons').faInfo,
1214
require('@fortawesome/free-solid-svg-icons').faList,
1315
require('@fortawesome/free-solid-svg-icons').faSpinner,
1416
// Brands

‎content/ClientApp/router/routes.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
import CounterExample from 'components/counter-example'
22
import FetchData from 'components/fetch-data'
33
import HomePage from 'components/home-page'
4+
import About from 'components/about'
45

56
export const routes = [
67
{ name: 'home', path: '/', component: HomePage, display: 'Home', icon: 'home' },
8+
{ name: 'about', path: '/about', component: About, display: 'About Template', icon: 'info' },
79
{ name: 'counter', path: '/counter', component: CounterExample, display: 'Counter', icon: 'graduation-cap' },
8-
{ name: 'fetch-data', path: '/fetch-data', component: FetchData, display: 'Fetch data', icon: 'list' }
10+
{ name: 'fetch-data', path: '/fetch-data', component: FetchData, display: 'Data', icon: 'list' }
911
]

0 commit comments

Comments
 (0)