Switch to Nuxt
This commit is contained in:
Mikhail Oleynikov
parent
b11d5514b9
commit
25203934e6
13
.editorconfig
Normal file
13
.editorconfig
Normal file
@ -0,0 +1,13 @@
|
||||
# editorconfig.org
|
||||
root = true
|
||||
|
||||
[*]
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
end_of_line = lf
|
||||
charset = utf-8
|
||||
trim_trailing_whitespace = true
|
||||
insert_final_newline = true
|
||||
|
||||
[*.md]
|
||||
trim_trailing_whitespace = false
|
||||
20
.eslintrc.js
Normal file
20
.eslintrc.js
Normal file
@ -0,0 +1,20 @@
|
||||
module.exports = {
|
||||
root: true,
|
||||
env: {
|
||||
browser: true,
|
||||
node: true,
|
||||
},
|
||||
parserOptions: {
|
||||
parser: 'babel-eslint',
|
||||
},
|
||||
extends: [
|
||||
'@nuxtjs',
|
||||
'prettier',
|
||||
'prettier/vue',
|
||||
'plugin:prettier/recommended',
|
||||
'plugin:nuxt/recommended',
|
||||
],
|
||||
plugins: ['prettier'],
|
||||
// add your custom rules here
|
||||
rules: {},
|
||||
}
|
||||
94
.gitignore
vendored
94
.gitignore
vendored
@ -1,8 +1,90 @@
|
||||
# Created by .ignore support plugin (hsz.mobi)
|
||||
### Node template
|
||||
# Logs
|
||||
/logs
|
||||
*.log
|
||||
.cache
|
||||
.DS_Store
|
||||
src/.temp
|
||||
node_modules
|
||||
dist
|
||||
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
|
||||
.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
|
||||
|
||||
4
.prettierrc
Normal file
4
.prettierrc
Normal file
@ -0,0 +1,4 @@
|
||||
{
|
||||
"semi": false,
|
||||
"singleQuote": true
|
||||
}
|
||||
15
README.md
15
README.md
@ -1,15 +0,0 @@
|
||||
### DISCLAIMER
|
||||
- I use Gridsome for sketching
|
||||
- It won't be Gridsome after I finish the sketch
|
||||
- It will be Nuxt
|
||||
- No, it likely won't be not Nuxt
|
||||
- Vue has 2 major concepts you need to grasp: components and reactivity.
|
||||
Catch up on that, and you'll be understanding the code easily
|
||||
- Node is performant enough, we will apply aggressive Nginx caching to it
|
||||
to ensure that even more
|
||||
- SSR is rendering as much HTML on the server as possible and sending
|
||||
ready to display HTML to the client instead of JS creating it client-side
|
||||
- Hydration is constructing vDOM from ready-to-display server-
|
||||
or statically rendered HTML
|
||||
- vDOM is a representation of DOM created by Vue to batch DOM changes for
|
||||
performance reason
|
||||
|
Before Width: | Height: | Size: 3.8 KiB After Width: | Height: | Size: 3.8 KiB |
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
46
assets/styles/components.scss
Normal file
46
assets/styles/components.scss
Normal file
@ -0,0 +1,46 @@
|
||||
// Here lies 𝖄𝖊 𝕸𝖆𝖗𝖌𝖎𝖓 𝕸𝖆𝖌𝖎𝖈
|
||||
// which allows to have just one wrapper div
|
||||
.iconified-input {
|
||||
align-items: center;
|
||||
display: inline-flex;
|
||||
flex-direction: row-reverse;
|
||||
|
||||
input {
|
||||
padding-left: 2.5rem;
|
||||
|
||||
&:hover {
|
||||
&+svg {
|
||||
color: var(--color-grey-6);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
&+svg {
|
||||
color: var(--color-text);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
color: var(--color-grey-5);
|
||||
margin-right: -2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.badge {
|
||||
border-radius: 1rem;
|
||||
font-size: 0.8rem;
|
||||
font-weight: bold;
|
||||
letter-spacing: 0.02rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
|
||||
&.red {
|
||||
background-color: #fed7d7;
|
||||
color: #9b2c2c;
|
||||
}
|
||||
|
||||
&.green {
|
||||
background-color: #c6f6d5;
|
||||
color: #276749;
|
||||
}
|
||||
}
|
||||
92
assets/styles/global.scss
Normal file
92
assets/styles/global.scss
Normal file
@ -0,0 +1,92 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');
|
||||
|
||||
:root {
|
||||
/**
|
||||
* Colors
|
||||
*/
|
||||
--color-text: #1a202c;
|
||||
--color-bg: #ffffff;
|
||||
|
||||
--color-text-inverted: var(--color-bg);
|
||||
--color-bg-inverted: var(--color-text);
|
||||
|
||||
--color-brand: #4d9227;
|
||||
|
||||
--color-grey-0: #f7fafc;
|
||||
--color-grey-1: #edf2f7;
|
||||
--color-grey-2: #e2e8f0;
|
||||
--color-grey-3: #cbd5e0;
|
||||
--color-grey-4: #a0aec0;
|
||||
--color-grey-5: #718096;
|
||||
--color-grey-6: #4a5568;
|
||||
--color-grey-7: #2d3748;
|
||||
|
||||
/**
|
||||
* Sizes
|
||||
*/
|
||||
--size-rounded-sm: 0.25rem;
|
||||
--size-rounded-md: 0.5rem;
|
||||
--size-rounded-lg: 1rem;
|
||||
|
||||
/**
|
||||
* Defaults
|
||||
*/
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-text);
|
||||
font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen,
|
||||
Ubuntu, Roboto, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
svg {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
input {
|
||||
background: var(--color-bg);
|
||||
border: 2px solid var(--color-grey-3);
|
||||
border-radius: var(--size-rounded-sm);
|
||||
color: var(--color-grey-9);
|
||||
font-size: 1rem;
|
||||
padding: 0.5rem 1rem;
|
||||
width: 100%;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
border-color: var(--color-grey-4);
|
||||
color: var(--color-text);
|
||||
|
||||
&::placeholder {
|
||||
color: var(--color-grey-7);
|
||||
}
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: var(--color-grey-6);
|
||||
}
|
||||
}
|
||||
|
||||
@import "~assets/styles/layout.scss";
|
||||
@import "~assets/styles/utils.scss";
|
||||
@import "~assets/styles/components.scss";
|
||||
9
assets/styles/layout.scss
Normal file
9
assets/styles/layout.scss
Normal file
@ -0,0 +1,9 @@
|
||||
.columns {
|
||||
display: flex;
|
||||
|
||||
@for $i from 1 through 4 {
|
||||
.column-grow-#{$i} {
|
||||
flex-grow: $i;
|
||||
}
|
||||
}
|
||||
}
|
||||
3
assets/styles/utils.scss
Normal file
3
assets/styles/utils.scss
Normal file
@ -0,0 +1,3 @@
|
||||
.rounded-md {
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
@ -1,4 +0,0 @@
|
||||
module.exports = {
|
||||
siteName: 'Staging',
|
||||
plugins: []
|
||||
}
|
||||
12
jsconfig.json
Normal file
12
jsconfig.json
Normal file
@ -0,0 +1,12 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"~/*": ["./*"],
|
||||
"@/*": ["./*"],
|
||||
"~~/*": ["./*"],
|
||||
"@@/*": ["./*"]
|
||||
}
|
||||
},
|
||||
"exclude": ["node_modules", ".nuxt", "dist"]
|
||||
}
|
||||
@ -2,135 +2,120 @@
|
||||
<div class="layout">
|
||||
<aside>
|
||||
<div class="logo-wrapper">
|
||||
<g-image class="logo" src="~/assets/images/logo.png"/>
|
||||
<img class="logo" src="~/assets/images/logo.png" />
|
||||
</div>
|
||||
<nav>
|
||||
<section class="links">
|
||||
<h3>Projects</h3>
|
||||
<section>
|
||||
<g-link to="/mods">
|
||||
<nuxt-link to="/modpacks">
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round">
|
||||
<polyline points="16 18 22 12 16 6"/>
|
||||
<polyline points="8 6 2 12 8 18"/>
|
||||
</svg>
|
||||
<span>Mods</span>
|
||||
</g-link>
|
||||
<g-link to="/modpacks">
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round">
|
||||
<line x1="16.5" y1="9.4" x2="7.5" y2="4.21"/>
|
||||
<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/>
|
||||
<polyline points="3.27 6.96 12 12.01 20.73 6.96"/>
|
||||
<line x1="12" y1="22.08" x2="12" y2="12"/>
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<line x1="16.5" y1="9.4" x2="7.5" y2="4.21" />
|
||||
<path
|
||||
d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"
|
||||
/>
|
||||
<polyline points="3.27 6.96 12 12.01 20.73 6.96" />
|
||||
<line x1="12" y1="22.08" x2="12" y2="12" />
|
||||
</svg>
|
||||
<span>
|
||||
Modpacks
|
||||
</span>
|
||||
</g-link>
|
||||
</nuxt-link>
|
||||
<nuxt-link to="/mods">
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<polyline points="16 18 22 12 16 6" />
|
||||
<polyline points="8 6 2 12 8 18" />
|
||||
</svg>
|
||||
<span>Mods</span>
|
||||
</nuxt-link>
|
||||
</section>
|
||||
|
||||
<h3>Community</h3>
|
||||
<section>
|
||||
<g-link to="/forums">
|
||||
<nuxt-link to="/support">
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round">
|
||||
<path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/>
|
||||
</svg>
|
||||
<span>Forums</span>
|
||||
</g-link>
|
||||
<g-link to="/support">
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round">
|
||||
<circle cx="12" cy="12" r="10"/>
|
||||
<circle cx="12" cy="12" r="4"/>
|
||||
<line x1="4.93" y1="4.93" x2="9.17" y2="9.17"/>
|
||||
<line x1="14.83" y1="14.83" x2="19.07" y2="19.07"/>
|
||||
<line x1="14.83" y1="9.17" x2="18.36" y2="5.64"/>
|
||||
<line x1="4.93" y1="19.07" x2="9.17" y2="14.83"/>
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<circle cx="12" cy="12" r="10" />
|
||||
<circle cx="12" cy="12" r="4" />
|
||||
<line x1="4.93" y1="4.93" x2="9.17" y2="9.17" />
|
||||
<line x1="14.83" y1="14.83" x2="19.07" y2="19.07" />
|
||||
<line x1="14.83" y1="9.17" x2="18.36" y2="5.64" />
|
||||
<line x1="4.93" y1="19.07" x2="9.17" y2="14.83" />
|
||||
</svg>
|
||||
<span>Support</span>
|
||||
</g-link>
|
||||
<g-link to="/guides">
|
||||
</nuxt-link>
|
||||
<nuxt-link to="/guides">
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round">
|
||||
<path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/>
|
||||
<path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/>
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z" />
|
||||
<path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z" />
|
||||
</svg>
|
||||
<span>Guides</span>
|
||||
</g-link>
|
||||
</nuxt-link>
|
||||
</section>
|
||||
|
||||
<h3>Dashboard</h3>
|
||||
<section>
|
||||
<g-link to="/dashboard/projects">
|
||||
<nuxt-link to="/dashboard/projects">
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round">
|
||||
<path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path
|
||||
d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"
|
||||
/>
|
||||
</svg>
|
||||
<span>My projects</span>
|
||||
</g-link>
|
||||
<g-link to="/dashboard/analytics">
|
||||
</nuxt-link>
|
||||
<nuxt-link to="/dashboard/analytics">
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round">
|
||||
<polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<polyline points="22 12 18 12 15 21 9 3 6 12 2 12" />
|
||||
</svg>
|
||||
<span>Analytics</span>
|
||||
</g-link>
|
||||
<g-link to="/dashboard/rewards">
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round">
|
||||
<circle cx="12" cy="8" r="7"/>
|
||||
<polyline points="8.21 13.89 7 23 12 20 17 23 15.79 13.88"/>
|
||||
</svg>
|
||||
<span>Rewards</span>
|
||||
</g-link>
|
||||
</nuxt-link>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<section class="user-actions">
|
||||
<div class="avatar">
|
||||
<g-image src="~/assets/images/avatar.jpg"/>
|
||||
<img src="~/assets/images/avatar.jpg" />
|
||||
<span>
|
||||
falseresync
|
||||
</span>
|
||||
@ -142,9 +127,10 @@
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round">
|
||||
<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/>
|
||||
<path d="M13.73 21a2 2 0 0 1-3.46 0"/>
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" />
|
||||
<path d="M13.73 21a2 2 0 0 1-3.46 0" />
|
||||
</svg>
|
||||
</div>
|
||||
</section>
|
||||
@ -168,61 +154,12 @@
|
||||
</div>
|
||||
</header> -->
|
||||
|
||||
<div class="content">
|
||||
<slot/>
|
||||
</div>
|
||||
<nuxt />
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');
|
||||
|
||||
:root {
|
||||
/**
|
||||
* Colors
|
||||
*/
|
||||
--color-text: #1A202C;
|
||||
--color-bg: #FFFFFF;
|
||||
|
||||
--color-text-inverted: var(--color-bg);
|
||||
--color-bg-inverted: var(--color-text);
|
||||
|
||||
--color-brand: #4D9227;
|
||||
|
||||
--color-grey-0: #F7FAFC;
|
||||
--color-grey-1: #EDF2F7;
|
||||
--color-grey-2: #E2E8F0;
|
||||
--color-grey-3: #CBD5E0;
|
||||
--color-grey-4: #A0AEC0;
|
||||
--color-grey-5: #718096;
|
||||
--color-grey-6: #4A5568;
|
||||
--color-grey-7: #2D3748;
|
||||
|
||||
/**
|
||||
* Defaults
|
||||
*/
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-text);
|
||||
font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Roboto, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
svg {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.layout {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
@ -232,7 +169,7 @@ a {
|
||||
border-right: 1px solid var(--color-grey-2);
|
||||
display: flex; // Flex here to safely expand navigation height
|
||||
flex-direction: column;
|
||||
width: 15%;
|
||||
min-width: 15%;
|
||||
|
||||
.logo-wrapper {
|
||||
align-items: center;
|
||||
@ -282,12 +219,12 @@ a {
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.active {
|
||||
&.nuxt-link-active {
|
||||
background-color: var(--color-grey-1);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
&.active {
|
||||
&.nuxt-link-active {
|
||||
box-shadow: -4px 0 0 0 var(--color-brand);
|
||||
}
|
||||
|
||||
@ -302,7 +239,6 @@ a {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user-actions {
|
||||
align-items: center;
|
||||
border-top: 2px solid var(--color-grey-2);
|
||||
@ -337,7 +273,6 @@ a {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
background-color: var(--color-grey-0);
|
||||
flex-grow: 1;
|
||||
67
nuxt.config.js
Normal file
67
nuxt.config.js
Normal file
@ -0,0 +1,67 @@
|
||||
export default {
|
||||
/*
|
||||
** Nuxt rendering mode
|
||||
** See https://nuxtjs.org/api/configuration-mode
|
||||
*/
|
||||
mode: 'universal',
|
||||
/*
|
||||
** Nuxt target
|
||||
** See https://nuxtjs.org/api/configuration-target
|
||||
*/
|
||||
target: 'server',
|
||||
/*
|
||||
** Headers of the page
|
||||
** See https://nuxtjs.org/api/configuration-head
|
||||
*/
|
||||
head: {
|
||||
title: 'Modrinth',
|
||||
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: '/favicon.ico' }],
|
||||
},
|
||||
/*
|
||||
** Global CSS
|
||||
*/
|
||||
css: ['~assets/styles/global.scss'],
|
||||
/*
|
||||
** Plugins to load before mounting the App
|
||||
** https://nuxtjs.org/guide/plugins
|
||||
*/
|
||||
plugins: [],
|
||||
/*
|
||||
** Auto import components
|
||||
** See https://nuxtjs.org/api/configuration-components
|
||||
*/
|
||||
components: true,
|
||||
/*
|
||||
** Nuxt.js dev-modules
|
||||
*/
|
||||
buildModules: [
|
||||
// Doc: https://github.com/nuxt-community/eslint-module
|
||||
'@nuxtjs/eslint-module',
|
||||
],
|
||||
/*
|
||||
** Nuxt.js modules
|
||||
*/
|
||||
modules: [
|
||||
// Doc: https://axios.nuxtjs.org/usage
|
||||
'@nuxtjs/axios',
|
||||
],
|
||||
/*
|
||||
** Axios module configuration
|
||||
** See https://axios.nuxtjs.org/options
|
||||
*/
|
||||
axios: {},
|
||||
/*
|
||||
** Build configuration
|
||||
** See https://nuxtjs.org/api/configuration-build/
|
||||
*/
|
||||
build: {},
|
||||
}
|
||||
10766
package-lock.json
generated
10766
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
26
package.json
26
package.json
@ -1,16 +1,30 @@
|
||||
{
|
||||
"name": "mineunity",
|
||||
"name": "knossos",
|
||||
"version": "1.0.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "gridsome build",
|
||||
"develop": "gridsome develop",
|
||||
"explore": "gridsome explore"
|
||||
"dev": "nuxt",
|
||||
"build": "nuxt build",
|
||||
"start": "nuxt start",
|
||||
"export": "nuxt export",
|
||||
"serve": "nuxt serve",
|
||||
"lint:js": "eslint --ext .js,.vue --ignore-path .gitignore .",
|
||||
"lint": "npm run lint:js"
|
||||
},
|
||||
"dependencies": {
|
||||
"gridsome": "^0.7.0"
|
||||
"@nuxtjs/axios": "^5.11.0",
|
||||
"nuxt": "^2.13.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@nuxtjs/eslint-config": "^3.0.0",
|
||||
"@nuxtjs/eslint-module": "^2.0.0",
|
||||
"babel-eslint": "^10.1.0",
|
||||
"eslint": "^7.2.0",
|
||||
"eslint-config-prettier": "^6.11.0",
|
||||
"eslint-plugin-nuxt": "^1.0.0",
|
||||
"eslint-plugin-prettier": "^3.1.4",
|
||||
"node-sass": "^4.14.1",
|
||||
"sass-loader": "^8.0.2"
|
||||
"prettier": "^2.0.5",
|
||||
"sass-loader": "^9.0.2"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,14 +1,15 @@
|
||||
<template>
|
||||
<layout>
|
||||
<div class="content">
|
||||
<h2>My projects</h2>
|
||||
|
||||
<h3>Mods</h3>
|
||||
<div class="section-header">
|
||||
<h3>Mods</h3>
|
||||
<button>Create a new mod</button>
|
||||
</div>
|
||||
<table>
|
||||
<colgroup>
|
||||
<col span="2">
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>Name</th>
|
||||
<th>Role</th>
|
||||
<th>Status</th>
|
||||
@ -19,15 +20,8 @@
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<g-image src="~/assets/images/aof-mini.png" />
|
||||
All of Fabric Mini
|
||||
<img class="rounded-md" src="~/assets/images/aof-mini.png" />
|
||||
</td>
|
||||
<td>Contributor</td>
|
||||
<td><span class="badge red">Abandoned</span></td>
|
||||
<td>357</td>
|
||||
<td>Apr 1, 2020</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Finite Water</td>
|
||||
<td>Owner</td>
|
||||
<td><span class="badge green">Active</span></td>
|
||||
@ -35,6 +29,9 @@
|
||||
<td>Nov 4, 2019</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<img class="rounded-md" src="~/assets/images/aof-mini.png" />
|
||||
</td>
|
||||
<td>Vivatech</td>
|
||||
<td>Contributor</td>
|
||||
<td><span class="badge green">Active</span></td>
|
||||
@ -43,35 +40,45 @@
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</layout>
|
||||
|
||||
<div class="section-header">
|
||||
<h3>Modpacks</h3>
|
||||
<button>Create a new modpack</button>
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>Name</th>
|
||||
<th>Role</th>
|
||||
<th>Status</th>
|
||||
<th>Downloads</th>
|
||||
<th>Last updated</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<img class="rounded-md" src="~/assets/images/aof-mini.png" />
|
||||
</td>
|
||||
<td>All of Fabric Mini</td>
|
||||
<td>Contributor</td>
|
||||
<td><span class="badge red">Abandoned</span></td>
|
||||
<td>357</td>
|
||||
<td>Apr 1, 2020</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
h2 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
.section-header {
|
||||
display: flex;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
h3 {
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.badge {
|
||||
border-radius: 1rem;
|
||||
font-size: 0.8rem;
|
||||
font-weight: bold;
|
||||
letter-spacing: 0.02rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
|
||||
&.red {
|
||||
background-color: #FED7D7;
|
||||
color: #9B2C2C;
|
||||
}
|
||||
|
||||
&.green {
|
||||
background-color: #C6F6D5;
|
||||
color: #276749;
|
||||
& > * {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -80,10 +87,11 @@ table {
|
||||
border-collapse: collapse;
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: 0 2px 3px 1px var(--color-grey-2);
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
|
||||
* {
|
||||
text-align: start;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
tr:not(:last-child),
|
||||
@ -96,7 +104,15 @@ table {
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: 1rem 1.25rem;
|
||||
&:first-child {
|
||||
text-align: center;
|
||||
width: 5%;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
padding-left: 0;
|
||||
width: 30%;
|
||||
}
|
||||
}
|
||||
|
||||
th {
|
||||
@ -105,16 +121,16 @@ table {
|
||||
letter-spacing: 0.02rem;
|
||||
margin-bottom: 0.5rem;
|
||||
margin-top: 1.5rem;
|
||||
padding: 1rem 1rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
td {
|
||||
&:nth-child(5n - 4) {
|
||||
max-width: 50%;
|
||||
}
|
||||
padding: 0.25rem 1rem;
|
||||
|
||||
&:not(:nth-child(5n - 4)) {
|
||||
min-width: 15%;
|
||||
img {
|
||||
height: 3rem;
|
||||
width: 3rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
44
pages/modpacks.vue
Normal file
44
pages/modpacks.vue
Normal file
@ -0,0 +1,44 @@
|
||||
<template>
|
||||
<div class="content">
|
||||
<h2>Modpacks</h2>
|
||||
<div class="columns">
|
||||
<div class="column-grow-4">
|
||||
<section id="search-pagination">
|
||||
<div class="iconified-input column-grow-2">
|
||||
<input
|
||||
id="search"
|
||||
type="search"
|
||||
name="search"
|
||||
placeholder="Search modpacks"
|
||||
/>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<circle cx="11" cy="11" r="8" />
|
||||
<line x1="21" y1="21" x2="16.65" y2="16.65" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="pagination column-grow-1">
|
||||
pagination
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<section class="column-grow-1">
|
||||
<h3>Filters</h3>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
#search-pagination {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
</style>
|
||||
BIN
src/favicon.png
BIN
src/favicon.png
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB |
@ -1,6 +0,0 @@
|
||||
import DefaultLayout from '~/layouts/Default.vue'
|
||||
import '~/assets/styles/global.scss'
|
||||
|
||||
export default function (Vue, { router, head, isClient }) {
|
||||
Vue.component('Layout', DefaultLayout)
|
||||
}
|
||||
@ -1,5 +0,0 @@
|
||||
<template>
|
||||
<Layout>
|
||||
The actual dashbo
|
||||
</Layout>
|
||||
</template>
|
||||
@ -1,5 +0,0 @@
|
||||
<template>
|
||||
<Layout>
|
||||
The actual dashboaard, mod list, mod README will go here
|
||||
</Layout>
|
||||
</template>
|
||||
BIN
static/favicon.ico
Normal file
BIN
static/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Loading…
x
Reference in New Issue
Block a user