Skip to content
This repository was archived by the owner on Nov 28, 2020. It is now read-only.

Commit cb5b5e9

Browse files
renoirbrenoirb
committed
TypeScript + VSCode + Nuxt.js + Workspace instrumentation
Vuex Module that are strongly typed with TypeScript * Make PWA optional, refactor comment folding. * Review README * Figure out how static/sw.js works (need documentation)
1 parent 49d229b commit cb5b5e9

29 files changed

+641
-251
lines changed

‎.gitignore

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,9 @@ yarn-error.log
77
*.iml
88
.nuxt
99
.vscode
10+
!.vscode/settings.json
11+
!.vscode/extensions.json
12+
!.vscode/tasks.json
1013

1114
static/manifest*.json
1215
static/sw.js

‎.vscode/extensions.json

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{
2+
"recommendations": [
3+
"CoenraadS.bracket-pair-colorizer",
4+
"editorconfig.editorconfig",
5+
"gamunu.vscode-yarn",
6+
"jasonnutter.search-node-modules",
7+
"mrmlnc.vscode-attrs-sorter",
8+
"octref.vetur",
9+
"richie5um2.vscode-sort-json",
10+
"sourcegraph.javascript-typescript",
11+
"sysoev.language-stylus"
12+
]
13+
}

‎.vscode/settings.json

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
// https://code.visualstudio.com/docs/getstarted/settings
3+
"editor.trimAutoWhitespace": true,
4+
"editor.renderControlCharacters": true,
5+
"editor.renderWhitespace": "all",
6+
"files.trimTrailingWhitespace": true,
7+
"typescript.tsdk": "node_modules/typescript/lib",
8+
"vetur.validation.style": true,
9+
"vetur.validation.template": true,
10+
"[json]": {
11+
"editor.formatOnSave": true
12+
},
13+
"[vue]": {
14+
"editor.formatOnSave": true
15+
},
16+
"[typescript]": {
17+
"editor.formatOnSave": true,
18+
"editor.formatOnPaste": true
19+
}
20+
}

‎README.md

Lines changed: 44 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# Nuxt Hacker News TS
22

3-
HackerNews clone built with Nuxt.js and TypeScript showcasing best practices of developing real life modern isomorphic Web Apps with [Nuxt](https://github.com/nuxt/nuxt.js). It features integrations with [TsLint](https://palantir.github.io/tslint/) (linting), [Prettier](https://prettier.io/) (code formatting), [Jest](https://jestjs.io/) (testing), [Axios](https://github.com/nuxt-community/axios-module) (http calls on steroids), [Storybook](https://storybook.js.org/)* (component playground).
3+
HackerNews clone built with Nuxt.js and TypeScript showcasing best practices of developing real life modern isomorphic Web Apps with [Nuxt](https://github.com/nuxt/nuxt.js). It features integrations with [TsLint](https://palantir.github.io/tslint/) (linting), [Prettier](https://prettier.io/) (code formatting), [Jest](https://jestjs.io/) (testing), [Axios](https://github.com/nuxt-community/axios-module) (http calls on steroids), [Storybook](https://storybook.js.org/)\* (component playground).
44

55
<p align="center">
66
<a href="https://codesandbox.io/s/github/nuxt-community/hackernews-nuxt-ts" target="_blank">
@@ -23,48 +23,80 @@ Coming soon
2323
- Prefetch/Preload JS + DNS + Data
2424
- Critical Path CSS
2525
- PWA experience using [PWA Module](https://github.com/nuxt-community/pwa-module) with almost _zero config_
26+
- Enable optionnaly PWA, e.g. for development that's orthogonal to PWA features
2627
- PRPL
2728
- Hot reloading dev environment
2829
- [TSLint](https://palantir.github.io/tslint/) and [Prettier](https://prettier.io/) integration
29-
- Typescript 3
30+
- TypeScript 3
31+
- VSCode TypeScript bindings
3032
- Storybook Integration (Coming Soon)
31-
- Snapshot and Unit Tests with Jest and [Vue-Test-Utils](https://vue-test-utils.vuejs.org/) (Coming Soon)
33+
- Snapshot and Unit Tests with Jest and [Vue-Test-Utils](https://vue-test-utils.vuejs.org/) (Coming Soon)
34+
- VSCode setup for build into production, and run in dev with debugging helpers and logging
3235

3336
## Build Setup
3437

3538
**Requires Node.js 6+**
3639

3740
```bash
3841
# install dependencies
39-
npm install # or yarn
42+
yarn
4043

4144
# serve in dev mode, with hot reload at localhost:3000
42-
npm run dev
45+
yarn dev
4346

4447
# build for production
45-
npm run build
48+
yarn build
4649

4750
# serve in production mode
48-
npm start
51+
yarn start
4952

5053
# run unit tests
51-
npm run test
54+
yarn test
5255

5356
# validate code with TSLint (with Prettier)
54-
npm run lint
57+
yarn lint
5558

5659
# validate and fix with TSLint (with Prettier)
57-
npm run lintfix
60+
yarn lintfix
61+
```
62+
63+
### Production build
5864

65+
#### SPA
66+
67+
```bash
68+
yarn
69+
yarn build
5970
```
6071

6172
## Links
62-
For Nuxt JS version go [here](https://github.com/nuxt/hackernews)
6373

74+
For [Nuxt.js version, go to **nuxt/hackernews**](https://github.com/nuxt/hackernews)
6475

6576
This repository is originally ported from [vue-hackernews-2.0](https://github.com/vuejs/vue-hackernews-2.0) and [HackerNews Nuxt](https://github.com/nuxt/hackernews)
6677

78+
## Docs
79+
80+
- [vue-property-decorator](https://github.com/kaorun343/vue-property-decorator)
81+
- [vuex-class](https://github.com/ktsn/vuex-class/)
82+
- [vue-class-component](https://github.com/vuejs/vue-class-component)
83+
- [vue-i18n](https://github.com/kazupon/vue-i18n) ([docs](https://kazupon.github.io/vue-i18n/))
84+
85+
### Useful _TypeScript_ + _Nuxt.js_ community curated examples
86+
87+
- [nuxt-community/typescript-template](https://github.com/nuxt-community/typescript-template)
88+
- [nuxt-community/pwa-module](https://github.com/nuxt-community/pwa-module) ([docs](https://pwa.nuxtjs.org/modules/workbox.html))
89+
- [**nuxt/nuxt.js** in _examples/typescript_](https://github.com/nuxt/nuxt.js/tree/dev/examples/typescript)
90+
- [**nuxt/nuxt.js** in _examples/typescript-vuex_](https://github.com/nuxt/nuxt.js/tree/dev/examples/typescript-vuex)
91+
92+
### Other useful _TypeScript_ + _Nuxt.js_ boilerplate/starter-kit projects
93+
94+
- [hisasann/typescript-nuxtjs-boilerplate](https://github.com/hisasann/typescript-nuxtjs-boilerplate)
95+
96+
### Other relevant links to the topic
97+
98+
- https://stackoverflow.com/q/52863117/852395
99+
67100
## License
68101

69102
MIT
70-

‎components/comment.vue

Lines changed: 40 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,22 @@
55
{{ comment.time | timeAgo }} ago
66
</div>
77
<div class="text" v-html="comment.content"/>
8-
<div v-if="comment.comments && comment.comments.length" :class="{ open }" class="toggle">
8+
<div
9+
v-if="comment.comments && comment.comments.length"
10+
:class="{ open }"
11+
class="toggle"
12+
>
913
<a
1014
@click="open = !open"
11-
>{{ open ? '[-]' : '[+] ' + pluralize(comment.comments.length) + ' collapsed' }}</a>
15+
>
16+
<!--
17+
We want minimal things going on here
18+
So that when it's time to do i18n, it's just
19+
going to be a matter of making sure we pass
20+
strings through i18n’s $t() helpers.
21+
-->
22+
{{ pluralize(open, comment.comments.length) }}
23+
</a>
1224
</div>
1325
<ul v-show="open" class="comment-children">
1426
<comment
@@ -30,8 +42,21 @@ export default class Comment extends Vue {
3042
3143
open: boolean = true
3244
33-
pluralize(n) {
34-
return n + (n === 1 ? " reply" : " replies")
45+
pluralize (open, n) {
46+
// Should we have vue-i18n;
47+
// We could also leverage Intl.NumberFormat
48+
// https://kazupon.github.io/vue-i18n/guide/number.html#custom-formatting
49+
const number = n // this.$n(n)
50+
51+
// Should we have vue-i18n;
52+
// We could use vue-i18n $tc helper
53+
// Assuming 'replies' would be 'Replies collapsed | Reply collapsed | Replies collapsed'
54+
// https://kazupon.github.io/vue-i18n/guide/pluralization.html
55+
const textContent = n === 1 ? 'reply' : 'replies' // this.$tc('replies', n)
56+
57+
const append = open ? '' : 'collapsed' // this.$t('collapsed')
58+
59+
return `${number} ${textContent} ${append}`.trim()
3560
}
3661
}
3762
</script>
@@ -78,15 +103,24 @@ export default class Comment extends Vue {
78103
padding: 0.3em 0.5em;
79104
border-radius: 4px;
80105
106+
a:before {
107+
// +
108+
// https://unicode-table.com/en/002B/
109+
content: '\002B';
110+
}
111+
81112
a {
82113
color: #828282;
83114
cursor: pointer;
84115
}
85116
86117
&.open {
87-
padding: 0;
88118
background-color: transparent;
89-
margin-bottom: -0.5em;
119+
a:before {
120+
// −
121+
// https://unicode-table.com/en/2212/
122+
content: '\2212';
123+
}
90124
}
91125
}
92126
}

‎layouts/default.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,10 @@
88
<router-link v-for="(list, key) in feeds" :key="key" :to="`/${key}`">{{ list.title }}</router-link>
99
<a
1010
class="github"
11-
href="https://github.com/nuxt/hackernews"
11+
href="https://github.com/nuxt-community/hackernews-nuxt-ts"
1212
target="_blank"
1313
rel="noopener banner"
14-
>Built with Nuxt.js</a>
14+
>Built with Nuxt.js using TypeScript</a>
1515
</nav>
1616
</header>
1717
<nuxt nuxt-child-key="none" role="main"/>

‎lib/index.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import * as runtime from "./runtime"
2+
3+
export { runtime }

‎lib/models/feed.ts

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
export interface Feed {
2+
comments_count: number
3+
domain: string
4+
id: number
5+
points: number
6+
time: number | Date | undefined
7+
time_ago: string
8+
title: string
9+
type: string
10+
url: string
11+
user: string
12+
}

‎lib/models/index.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export * from "./feed"
2+
export * from "./item"
3+
export * from "./store"
4+
export * from "./user"

‎lib/models/item.ts

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
export interface Items {
2+
[key: number]: Item
3+
}
4+
5+
export interface Item {
6+
comments: any[]
7+
comments_count: number
8+
content: string
9+
domain: string
10+
id: number
11+
points: number
12+
time: number | Date | undefined
13+
time_ago: string
14+
title: string
15+
type: string
16+
url: string
17+
user: string
18+
}

0 commit comments

Comments
 (0)