Project setup with Nuxt, basic landing page finished

This commit is contained in:
Dan Šuster 2020-04-05 23:28:05 +02:00
commit 6a61f7810c
Signed by: dan
GPG Key ID: ADA5CF11515C3242
27 changed files with 15752 additions and 0 deletions

16
.babelrc Normal file
View File

@ -0,0 +1,16 @@
{
"env": {
"test": {
"presets": [
[
"@babel/preset-env",
{
"targets": {
"node": "current"
}
}
]
]
}
}
}

13
.editorconfig Normal file
View File

@ -0,0 +1,13 @@
# editorconfig.org
root = true
[*]
indent_style = space
indent_size = 4
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
[*.md]
trim_trailing_whitespace = false

21
.eslintrc.js Normal file
View File

@ -0,0 +1,21 @@
module.exports = {
root: true,
env: {
browser: true,
node: true
},
extends: [
'@nuxtjs/eslint-config-typescript',
'prettier',
'prettier/vue',
'plugin:prettier/recommended',
'plugin:nuxt/recommended'
],
plugins: [
'prettier'
],
// add your custom rules here
rules: {
'nuxt/no-cjs-in-config': 'off'
}
}

90
.gitignore vendored Normal file
View File

@ -0,0 +1,90 @@
# Created by .ignore support plugin (hsz.mobi)
### Node template
# Logs
/logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Runtime data
pids
*.pid
*.seed
*.pid.lock
# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov
# Coverage directory used by tools like istanbul
coverage
# nyc test coverage
.nyc_output
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt
# Bower dependency directory (https://bower.io/)
bower_components
# node-waf configuration
.lock-wscript
# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release
# Dependency directories
node_modules/
jspm_packages/
# TypeScript v1 declaration files
typings/
# Optional npm cache directory
.npm
# Optional eslint cache
.eslintcache
# Optional REPL history
.node_repl_history
# Output of 'npm pack'
*.tgz
# Yarn Integrity file
.yarn-integrity
# dotenv environment variables file
.env
# parcel-bundler cache (https://parceljs.org/)
.cache
# next.js build output
.next
# nuxt.js build output
.nuxt
# Nuxt generate
dist
# vuepress build output
.vuepress/dist
# Serverless directories
.serverless
# IDE / Editor
.idea
# Service worker
sw.*
# macOS
.DS_Store
# Vim swap files
*.swp

5
.prettierrc Normal file
View File

@ -0,0 +1,5 @@
{
"semi": false,
"arrowParens": "always",
"singleQuote": true
}

21
Dockerfile Normal file
View File

@ -0,0 +1,21 @@
FROM node:12-slim
RUN mkdir -p /home/node/app/node_modules && chown -R node:node /home/node/app
WORKDIR /home/node/app
COPY package*.json ./
USER node
RUN npm install
COPY --chown=node:node . .
ENV HOST 0.0.0.0
RUN npm run build
EXPOSE 3000
CMD ["npm", "run", "start"]

22
README.md Normal file
View File

@ -0,0 +1,22 @@
# Landing Page *TheGolem.cz*
> One server to host them all!
## Build Setup
```bash
# install dependencies
$ npm install
# serve with hot reload at localhost:3000
$ npm run dev
# build for production and launch server
$ npm run build
$ npm run start
# generate static project
$ npm run generate
```
For detailed explanation on how things work, check out [Nuxt.js docs](https://nuxtjs.org).

7
assets/README.md Normal file
View File

@ -0,0 +1,7 @@
# ASSETS
**This directory is not required, you can delete it if you don't want to use it.**
This directory contains your un-compiled assets such as LESS, SASS, or JavaScript.
More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#webpacked).

90
components/Logo.vue Normal file
View File

@ -0,0 +1,90 @@
<template>
<svg class="NuxtLogo" enable-background="new 0 0 1109 1097" height="347" id="Layer_1" version="1.1"
viewBox="0 0 1109 1097"
width="350" x="0px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" y="0px">
<ellipse cx="604.776" cy="152.5" fill="none" rx="25" ry="30" stroke="#000000" stroke-miterlimit="10" stroke-width="5"/>
<ellipse cx="604.776" cy="152.5" fill="none" rx="2.5" ry="3" stroke="#000000" stroke-miterlimit="10"
stroke-width="5"/>
<ellipse cx="515.776" cy="152.5" fill="none" rx="25" ry="30" stroke="#000000" stroke-miterlimit="10"
stroke-width="5"/>
<ellipse cx="515.776" cy="152.5" fill="none" rx="2.5" ry="3" stroke="#000000" stroke-miterlimit="10"
stroke-width="5"/>
<path d="M530.443,285.875
c0,8.061,13.343,14.583,29.833,14.583" fill="none" stroke="#000000" stroke-linejoin="bevel" stroke-miterlimit="10"
stroke-width="5"/>
<path d="M590.109,285.875
c0,8.061-13.343,14.583-29.833,14.583" fill="none" stroke="#000000" stroke-linecap="square" stroke-miterlimit="10"
stroke-width="5"/>
<g>
<polygon points="1062.776,145 1035.276,145 735.276,145 717.776,145 717.776,102.5 717.776,50 717.776,45 712.776,45 685.276,45
560.276,45 435.276,45 407.776,45 402.776,45 402.776,50 402.776,102.5 402.776,145 385.276,145 85.276,145 57.776,145 52.776,145
52.776,150 52.776,202.5 52.776,802.5 52.776,855 52.776,860 57.776,860 85,860 85.276,860 135,860 185,860 202.5,860 202.5,902.5
202.5,1002.5 202.5,1055 202.5,1060 207.5,1060 235,1060 485,1060 512.5,1060 517.5,1060 517.5,1055 517.5,1002.5 512.5,1002.5
512.5,1055 485,1055 235,1055 207.5,1055 207.5,1002.5 207.5,902.5 207.5,855 202.5,855 185,855 135,855 85.276,855 85,855
57.776,855 57.776,802.5 57.776,202.5 57.776,150 85.276,150 385.276,150 402.776,150 407.776,150 407.776,102.5 407.776,50
435.276,50 560.276,50 685.276,50 712.776,50 712.776,102.5 712.776,150 717.776,150 735.276,150 1035.276,150 1062.776,150
1062.776,202.5 1062.776,802.5 1062.776,855 1035.552,855 1035.276,855 985.552,855 935.552,855 918.052,855 913.052,855
913.052,902.5 913.052,1002.5 913.052,1055 885.552,1055 885.552,1055 635.552,1055 635.552,1060 885.552,1060 885.552,1060
913.052,1060 918.052,1060 918.052,1055 918.052,1002.5 918.052,902.5 918.052,860 935.552,860 985.552,860 1035.276,860
1035.552,860 1062.776,860 1067.776,860 1067.776,855 1067.776,802.5 1067.776,202.5 1067.776,150 1067.776,145 "/>
<path d="M560.276,400h125h17.5h5v-47.5v-150v-100V55h-5h-17.5h-125h-125h-17.5h-5v47.5v100v150V400h5h17.5H560.276z M417.776,352.5
v-150v-100V60h17.5h125h125h17.5v42.5v100v150V395h-17.5h-125h-125h-17.5V352.5z"/>
<polygon points="963.052,802.5 963.052,850 968.052,850 985.552,850 1003.052,850 1008.052,850 1008.052,802.5 1003.052,802.5
1003.052,845 985.552,845 968.052,845 968.052,802.5 "/>
<polygon points="913.052,802.5 913.052,850 918.052,850 935.552,850 953.052,850 958.052,850 958.052,802.5 953.052,802.5
953.052,845 935.552,845 918.052,845 918.052,802.5 "/>
<polygon points="908.052,802.5 903.052,802.5 903.052,845 885.552,845 868.052,845 868.052,802.5 863.052,802.5 863.052,850
868.052,850 885.552,850 903.052,850 908.052,850 "/>
<polygon points="818.052,402.5 813.052,402.5 813.052,802.5 813.052,850 818.052,850 835.552,850 853.052,850 858.052,850
858.052,802.5 853.052,802.5 853.052,845 835.552,845 818.052,845 818.052,802.5 "/>
<polygon points="903.052,1002.5 903.052,1045 885.552,1045 885.552,1045 635.552,1045 635.552,1050 885.552,1050 885.552,1050
903.052,1050 908.052,1050 908.052,1002.5 908.052,902.5 908.052,855 903.052,855 885.552,855 835.552,855 808.052,855
808.052,802.5 808.052,402.5 803.052,402.5 803.052,802.5 803.052,855 803.052,860 808.052,860 835.552,860 885.552,860
903.052,860 903.052,902.5 "/>
<polygon points="402.776,160 402.776,202.5 402.776,352.5 402.776,405 402.776,410 407.776,410 435.276,410 560.276,410
685.276,410 712.776,410 717.776,410 717.776,405 717.776,352.5 717.776,202.5 717.776,160 735.276,160 1035.276,160 1052.776,160
1052.776,202.5 1052.776,802.5 1052.776,845 1035.552,845 1035.276,845 1018.052,845 1018.052,802.5 1013.052,802.5 1013.052,850
1018.052,850 1035.276,850 1035.552,850 1052.776,850 1057.776,850 1057.776,802.5 1057.776,202.5 1057.776,155 1052.776,155
1035.276,155 735.276,155 717.776,155 712.776,155 712.776,202.5 712.776,352.5 712.776,405 685.276,405 560.276,405 435.276,405
407.776,405 407.776,352.5 407.776,202.5 407.776,155 402.776,155 385.276,155 85.276,155 67.776,155 62.776,155 62.776,202.5
62.776,802.5 62.776,850 67.776,850 85,850 85.276,850 102.5,850 107.5,850 107.5,802.5 102.5,802.5 102.5,845 85.276,845 85,845
67.776,845 67.776,802.5 67.776,202.5 67.776,160 85.276,160 385.276,160 "/>
<polygon
points="618.052,1002.5 613.052,1002.5 613.052,1050 618.052,1050 635.552,1050 635.552,1045 618.052,1045 "/>
<polygon points="608.052,1002.5 603.052,1002.5 603.052,1055 603.052,1060 608.052,1060 635.552,1060 635.552,1055 608.052,1055
"/>
<polygon points="603.052,902.5 603.052,902.5 603.052,1002.5 608.052,1002.5 608.052,902.5 608.052,902.5 608.052,855 603.052,855
585.552,855 535,855 517.5,855 512.5,855 512.5,902.5 512.5,902.5 512.5,1002.5 517.5,1002.5 517.5,902.5 517.5,902.5 517.5,860
535,860 585.552,860 603.052,860 "/>
<polygon points="507.5,902.5 507.5,902.5 507.5,850 535,850 585.552,850 613.052,850 613.052,902.5 613.052,902.5 613.052,1002.5
618.052,1002.5 618.052,902.5 618.052,902.5 618.052,850 618.052,845 613.052,845 585.552,845 535,845 507.5,845 502.5,845
502.5,850 502.5,902.5 502.5,902.5 502.5,1002.5 507.5,1002.5 "/>
<polygon points="112.5,802.5 112.5,850 117.5,850 135,850 152.5,850 157.5,850 157.5,802.5 152.5,802.5 152.5,845 135,845
117.5,845 117.5,802.5 "/>
<polygon points="162.5,802.5 162.5,850 167.5,850 185,850 202.5,850 207.5,850 207.5,802.5 202.5,802.5 202.5,845 185,845
167.5,845 167.5,802.5 "/>
<polygon points="212.5,802.5 212.5,850 217.5,850 235,850 252.5,850 257.5,850 257.5,802.5 252.5,802.5 252.5,845 235,845
217.5,845 217.5,802.5 "/>
<polygon points="262.5,802.5 262.5,850 267.5,850 285,850 302.5,850 307.5,850 307.5,802.5 307.5,402.5 302.5,402.5 302.5,802.5
302.5,845 285,845 267.5,845 267.5,802.5 "/>
<polygon points="235,1050 485,1050 502.5,1050 507.5,1050 507.5,1002.5 502.5,1002.5 502.5,1045 485,1045 235,1045 217.5,1045
217.5,1002.5 217.5,902.5 217.5,860 235,860 285,860 312.5,860 317.5,860 317.5,855 317.5,802.5 317.5,402.5 312.5,402.5
312.5,802.5 312.5,855 285,855 235,855 217.5,855 212.5,855 212.5,902.5 212.5,1002.5 212.5,1050 217.5,1050 "/>
</g>
</svg>
</template>
<style>
.NuxtLogo {
animation: 2s appear;
margin: auto;
}
@keyframes appear {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
</style>

7
components/README.md Normal file
View File

@ -0,0 +1,7 @@
# COMPONENTS
**This directory is not required, you can delete it if you don't want to use it.**
The components directory contains your Vue.js Components.
_Nuxt.js doesn't supercharge these components._

23
jest.config.js Normal file
View File

@ -0,0 +1,23 @@
module.exports = {
moduleNameMapper: {
'^@/(.*)$': '<rootDir>/$1',
'^~/(.*)$': '<rootDir>/$1',
'^vue$': 'vue/dist/vue.common.js'
},
moduleFileExtensions: [
'ts',
'js',
'vue',
'json'
],
transform: {
'^.+\\.ts$': 'ts-jest',
'^.+\\.js$': 'babel-jest',
'.*\\.(vue)$': 'vue-jest'
},
collectCoverage: true,
collectCoverageFrom: [
'<rootDir>/components/**/*.vue',
'<rootDir>/pages/**/*.vue'
]
}

7
layouts/README.md Normal file
View File

@ -0,0 +1,7 @@
# LAYOUTS
**This directory is not required, you can delete it if you don't want to use it.**
This directory contains your Application Layouts.
More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/views#layouts).

61
layouts/default.vue Normal file
View File

@ -0,0 +1,61 @@
<template>
<div>
<nuxt/>
</div>
</template>
<style>
@font-face {
font-family: GolemAscend;
src: url(https://thegolem.cz/font/GolemAscend.ttf);
}
html {
font-family: GolemAscend, 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI',
Roboto, 'Helvetica Neue', Arial, sans-serif;
font-size: 16px;
word-spacing: 1px;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: border-box;
margin: 0;
}
.button--green {
display: inline-block;
border-radius: 4px;
border: 1px solid #3b8070;
color: #3b8070;
text-decoration: none;
padding: 10px 30px;
}
.button--green:hover {
color: #fff;
background-color: #3b8070;
}
.button--grey {
display: inline-block;
border-radius: 4px;
border: 1px solid #35495e;
color: #35495e;
text-decoration: none;
padding: 10px 30px;
margin-left: 15px;
}
.button--grey:hover {
color: #fff;
background-color: #35495e;
}
</style>

8
middleware/README.md Normal file
View File

@ -0,0 +1,8 @@
# MIDDLEWARE
**This directory is not required, you can delete it if you don't want to use it.**
This directory contains your application middleware.
Middleware let you define custom functions that can be run before rendering either a page or a group of pages.
More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing#middleware).

61
nuxt.config.js Normal file
View File

@ -0,0 +1,61 @@
module.exports = {
mode: 'universal',
/*
** Headers of the page
*/
head: {
title: 'TheGolem.cz',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/icon_golem.png' }
]
},
/*
** Customize the progress-bar color
*/
loading: { color: '#fff' },
/*
** Global CSS
*/
css: [],
/*
** Plugins to load before mounting the App
*/
plugins: [],
/*
** Nuxt.js dev-modules
*/
buildModules: [
'@nuxt/typescript-build'
],
/*
** Nuxt.js modules
*/
modules: [
// Doc: https://bootstrap-vue.js.org
'bootstrap-vue/nuxt',
// Doc: https://axios.nuxtjs.org/usage
'@nuxtjs/axios',
// Doc: https://github.com/nuxt-community/dotenv-module
'@nuxtjs/dotenv'
],
/*
** Axios module configuration
** See https://axios.nuxtjs.org/options
*/
axios: {},
/*
** Build configuration
*/
build: {
/*
** You can extend webpack config here
*/
extend(config, ctx) {
}
}
}

15077
package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

41
package.json Normal file
View File

@ -0,0 +1,41 @@
{
"name": "thegolem_landing_page",
"version": "1.0.0",
"description": "Landing page for TheGolem.cz",
"author": "Dan Šuster",
"private": true,
"scripts": {
"dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server",
"build": "nuxt build",
"start": "cross-env NODE_ENV=production node server/index.js",
"generate": "nuxt generate",
"lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
"test": "jest"
},
"dependencies": {
"nuxt": "^2.0.0",
"cross-env": "^5.2.0",
"express": "^4.16.4",
"bootstrap-vue": "^2.0.0",
"bootstrap": "^4.1.3",
"@nuxtjs/axios": "^5.3.6",
"@nuxtjs/dotenv": "^1.4.0"
},
"devDependencies": {
"nodemon": "^1.18.9",
"@nuxt/typescript-build": "^0.6.0",
"@nuxtjs/eslint-config-typescript": "^1.0.0",
"@nuxtjs/eslint-module": "^1.0.0",
"babel-eslint": "^10.0.1",
"eslint": "^6.1.0",
"eslint-plugin-nuxt": ">=0.4.2",
"eslint-config-prettier": "^6.10.0",
"eslint-plugin-prettier": "^3.1.2",
"prettier": "^1.19.1",
"@vue/test-utils": "^1.0.0-beta.27",
"babel-jest": "^24.1.0",
"jest": "^24.1.0",
"vue-jest": "^4.0.0-0",
"ts-jest": "^25.0.0"
}
}

6
pages/README.md Normal file
View File

@ -0,0 +1,6 @@
# PAGES
This directory contains your Application Views and Routes.
The framework reads all the `*.vue` files inside this directory and creates the router of your application.
More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing).

69
pages/index.vue Normal file
View File

@ -0,0 +1,69 @@
<template>
<div class="container">
<div>
<logo/>
<h1 class="title">
TheGolem.cz
</h1>
<h2 class="subtitle">
One server to host them all!
</h2>
</div>
</div>
</template>
<script lang="ts">
import Vue from 'vue'
import Logo from '~/components/Logo.vue'
export default Vue.extend({
components: {
Logo
}
})
</script>
<style>
.container {
margin: 0 auto;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.title {
font-family: GolemAscend, 'Quicksand', 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
display: block;
font-weight: 300;
font-size: 100px;
color: #35495e;
letter-spacing: 1px;
}
.subtitle {
font-family: GolemAscend, 'Quicksand', 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
font-weight: 300;
font-size: 42px;
color: #526488;
word-spacing: 5px;
padding-bottom: 15px;
}
@media screen and (max-width: 700px) {
.title {
font-size: 50px;
}
.subtitle {
font-size: 30px;
}
}
.links {
padding-top: 15px;
}
</style>

7
plugins/README.md Normal file
View File

@ -0,0 +1,7 @@
# PLUGINS
**This directory is not required, you can delete it if you don't want to use it.**
This directory contains Javascript plugins that you want to run before mounting the root Vue.js application.
More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/plugins).

34
server/index.js Normal file
View File

@ -0,0 +1,34 @@
const express = require('express')
const consola = require('consola')
const { Nuxt, Builder } = require('nuxt')
const app = express()
// Import and Set Nuxt.js options
const config = require('../nuxt.config.js')
config.dev = process.env.NODE_ENV !== 'production'
async function start() {
// Init Nuxt.js
const nuxt = new Nuxt(config)
const { host, port } = nuxt.options.server
await nuxt.ready()
// Build only in dev mode
if (config.dev) {
const builder = new Builder(nuxt)
await builder.build()
}
// Give nuxt middleware to express
app.use(nuxt.render)
// Listen the server
app.listen(port, host)
consola.ready({
message: `Server listening on http://${host}:${port}`,
badge: true
})
}
start()

11
static/README.md Normal file
View File

@ -0,0 +1,11 @@
# STATIC
**This directory is not required, you can delete it if you don't want to use it.**
This directory contains your static files.
Each file inside this directory is mapped to `/`.
Thus you'd want to delete this README.md before deploying to production.
Example: `/static/robots.txt` is mapped as `/robots.txt`.
More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#static).

BIN
static/favicon.ico Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
static/icon_golem.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.0 KiB

10
store/README.md Normal file
View File

@ -0,0 +1,10 @@
# STORE
**This directory is not required, you can delete it if you don't want to use it.**
This directory contains your Vuex Store files.
Vuex Store option is implemented in the Nuxt.js framework.
Creating a file in this directory automatically activates the option in the framework.
More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/vuex-store).

9
test/Logo.spec.js Normal file
View File

@ -0,0 +1,9 @@
import { mount } from '@vue/test-utils'
import Logo from '@/components/Logo.vue'
describe('Logo', () => {
test('is a Vue instance', () => {
const wrapper = mount(Logo)
expect(wrapper.isVueInstance()).toBeTruthy()
})
})

36
tsconfig.json Normal file
View File

@ -0,0 +1,36 @@
{
"compilerOptions": {
"target": "es2018",
"module": "esnext",
"moduleResolution": "node",
"lib": [
"esnext",
"esnext.asynciterable",
"dom"
],
"esModuleInterop": true,
"allowJs": true,
"sourceMap": true,
"strict": true,
"noEmit": true,
"experimentalDecorators": true,
"baseUrl": ".",
"paths": {
"~/*": [
"./*"
],
"@/*": [
"./*"
]
},
"types": [
"@types/node",
"@nuxt/types"
]
},
"exclude": [
"node_modules",
".nuxt",
"dist"
]
}