mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-22 05:35:13 +00:00
refactor: convert to monorepo
This commit is contained in:
Pooya Parsa
commit
d38da4cd6a
73
packages/ui-templates/CHANGELOG.md
Normal file
73
packages/ui-templates/CHANGELOG.md
Normal file
@ -0,0 +1,73 @@
|
||||
# Changelog
|
||||
|
||||
All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
|
||||
|
||||
### [0.1.5](https://github.com/nuxt/ui/compare/v0.1.4...v0.1.5) (2021-11-10)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* don't include `const` declaration in `.d.ts` ([#40](https://github.com/nuxt/ui/issues/40)) ([75a5eae](https://github.com/nuxt/ui/commit/75a5eae76b797a9f49e30ec5469056d093a3a302))
|
||||
|
||||
### [0.1.4](https://github.com/nuxt/ui/compare/v0.1.3...v0.1.4) (2021-10-20)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* add button background on dark media ([#36](https://github.com/nuxt/ui/issues/36)) ([de0a759](https://github.com/nuxt/ui/commit/de0a75959d06e90239b5a203eeb9e9be6031f0c2))
|
||||
* add missing `rel="noopener` on some links([#34](https://github.com/nuxt/ui/issues/34)) ([8f18183](https://github.com/nuxt/ui/commit/8f18183f1d6cca49753e3b0a6a1da0aa8e0c9c83))
|
||||
|
||||
### [0.1.3](https://github.com/nuxt/ui/compare/v0.1.2...v0.1.3) (2021-10-12)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* updates colors and templates ([e5691b0](https://github.com/nuxt/ui/commit/e5691b049b684ae98a04c5a324679d0b1f34053b))
|
||||
|
||||
### [0.1.2](https://github.com/nuxt/ui/compare/v0.1.0...v0.1.2) (2021-10-12)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* add welcome page template ([d7f95db](https://github.com/nuxt/ui/commit/d7f95db8c3344a2a05f91fb332f0f5ab1908b780))
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* add rootdir to vite fs.allow ([02da788](https://github.com/nuxt/ui/commit/02da78871564c5128b435694daa62c02b3acbef0))
|
||||
|
||||
### [0.1.1](https://github.com/nuxt/ui/compare/v0.1.0...v0.1.1) (2021-10-07)
|
||||
|
||||
## [0.1.0](https://github.com/nuxt/ui/compare/v0.0.6...v0.1.0) (2021-09-23)
|
||||
|
||||
### [0.0.6](https://github.com/nuxt/ui/compare/v0.0.5...v0.0.6) (2021-09-23)
|
||||
|
||||
### [0.0.5](https://github.com/nuxt/ui/compare/v0.0.3...v0.0.5) (2021-07-20)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* correct color for the logo in dark mode ([408e6aa](https://github.com/nuxt/ui/commit/408e6aa22c0ba4920dadfa4f2eae9391d2862111))
|
||||
|
||||
### [0.0.4](https://github.com/nuxt/ui/compare/v0.0.3...v0.0.4) (2021-07-14)
|
||||
|
||||
### [0.0.3](https://github.com/nuxt/ui/compare/v0.0.2...v0.0.3) (2021-07-14)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* use statusCode not message for 500 dev ([#19](https://github.com/nuxt/ui/issues/19)) ([a910883](https://github.com/nuxt/ui/commit/a910883024b2280770cbe985092153666eb17790))
|
||||
|
||||
### 0.0.2 (2021-07-14)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* add prerender script to preview ([4721560](https://github.com/nuxt/ui/commit/4721560e969ce52d29107546aae2fef9a6e6224f))
|
||||
* loading page ([#18](https://github.com/nuxt/ui/issues/18)) ([78799fb](https://github.com/nuxt/ui/commit/78799fb695a896f6a992f28225b99283a38503ff))
|
||||
* update new structure (closes [#14](https://github.com/nuxt/ui/issues/14)) ([631c740](https://github.com/nuxt/ui/commit/631c740396736e124c3cea288c0bcc22545d4269))
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* fix prerender and strict context ([ae26e1f](https://github.com/nuxt/ui/commit/ae26e1f21e85155595cfd861d20cddeff858ad5f))
|
||||
12
packages/ui-templates/README.md
Normal file
12
packages/ui-templates/README.md
Normal file
@ -0,0 +1,12 @@
|
||||
# `@nuxt/ui-templates`
|
||||
|
||||
Pre-compiled html templates used for Nuxt.
|
||||
|
||||
## Development
|
||||
|
||||
- Clone the repository
|
||||
- Install dependencies with `yarn install`
|
||||
- Start development server with `yarn dev`
|
||||
- Open `http://localhost:3000/` for a list of all the templates
|
||||
|
||||
To add a new template, simply create a new file: `./templates/<templateName>/index.html`.
|
||||
14
packages/ui-templates/index.html
Normal file
14
packages/ui-templates/index.html
Normal file
@ -0,0 +1,14 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://cdn.jsdelivr.net/npm/petite-vue" defer init></script>
|
||||
<script type="module" src="/styles.ts"></script>
|
||||
</head>
|
||||
<body v-scope='{{ data }}'>
|
||||
<ul>
|
||||
<li v-for="name in templateNames">
|
||||
<a :href="`/templates/${name}`">{{ name }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</body>
|
||||
</html>
|
||||
32
packages/ui-templates/lib/dev.ts
Normal file
32
packages/ui-templates/lib/dev.ts
Normal file
@ -0,0 +1,32 @@
|
||||
import { resolve, join } from 'path'
|
||||
import { promises as fsp } from 'fs'
|
||||
import type { Plugin } from 'vite'
|
||||
import template from 'lodash.template'
|
||||
import genericMessages from '../templates/messages.json'
|
||||
|
||||
const r = (...path: string[]) => resolve(join(__dirname, '..', ...path))
|
||||
|
||||
export const DevRenderingPlugin = () => {
|
||||
return <Plugin>{
|
||||
name: 'dev-rendering',
|
||||
async transformIndexHtml (html: string, context) {
|
||||
const page = context.originalUrl || '/'
|
||||
|
||||
if (page === '/') {
|
||||
const templateNames = await fsp.readdir(r('templates'))
|
||||
const serializedData = JSON.stringify({ templateNames })
|
||||
return html.replace('{{ data }}', serializedData)
|
||||
}
|
||||
|
||||
const contents = await fsp.readFile(r(page, 'index.html'), 'utf-8')
|
||||
|
||||
const messages = JSON.parse(await fsp.readFile(r(page, 'messages.json'), 'utf-8'))
|
||||
|
||||
return template(contents, {
|
||||
interpolate: /{{([\s\S]+?)}}/g
|
||||
})({
|
||||
messages: { ...genericMessages, ...messages }
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
21
packages/ui-templates/lib/prerender.ts
Normal file
21
packages/ui-templates/lib/prerender.ts
Normal file
@ -0,0 +1,21 @@
|
||||
import { resolve, join } from 'path'
|
||||
import { promises as fsp } from 'fs'
|
||||
import glob from 'globby'
|
||||
|
||||
const r = (...path: string[]) => resolve(join(__dirname, '..', ...path))
|
||||
|
||||
async function main () {
|
||||
const templates = await glob(r('dist/templates/*.mjs'))
|
||||
for (const file of templates) {
|
||||
const { template } = await import(file)
|
||||
const updated = template({
|
||||
// messages: {},
|
||||
name: '{{ name }}' // TODO
|
||||
})
|
||||
await fsp.mkdir(file.replace('.mjs', ''))
|
||||
await fsp.writeFile(file.replace('.mjs', '/index.html'), updated)
|
||||
}
|
||||
}
|
||||
|
||||
// eslint-disable-next-line no-console
|
||||
main().catch(console.error)
|
||||
105
packages/ui-templates/lib/render.ts
Normal file
105
packages/ui-templates/lib/render.ts
Normal file
@ -0,0 +1,105 @@
|
||||
import { promises as fsp } from 'fs'
|
||||
import { resolve, join, dirname, basename } from 'upath'
|
||||
import type { Plugin } from 'vite'
|
||||
import Critters from 'critters'
|
||||
import glob from 'globby'
|
||||
import template from 'lodash.template'
|
||||
import htmlMinifier from 'html-minifier'
|
||||
import { camelCase } from 'scule'
|
||||
import genericMessages from '../templates/messages.json'
|
||||
|
||||
const r = (...path: string[]) => resolve(join(__dirname, '..', ...path))
|
||||
|
||||
const replaceAll = (input, search, replace) => input.split(search).join(replace)
|
||||
|
||||
export const RenderPlugin = () => {
|
||||
return <Plugin>{
|
||||
name: 'render',
|
||||
enforce: 'post',
|
||||
async writeBundle () {
|
||||
const distDir = r('dist')
|
||||
const critters = new Critters({ path: distDir })
|
||||
const htmlFiles = await glob(r('dist/templates/**/*.html'))
|
||||
|
||||
const templateExports = []
|
||||
|
||||
for (const fileName of htmlFiles) {
|
||||
// Infer template name
|
||||
const templateName = basename(dirname(fileName))
|
||||
|
||||
// eslint-disable-next-line no-console
|
||||
console.log('Processing', templateName)
|
||||
|
||||
// Read source template
|
||||
let html = await fsp.readFile(fileName, 'utf-8')
|
||||
|
||||
// Apply criters to inline styles
|
||||
html = await critters.process(html)
|
||||
// We no longer need references to external CSS
|
||||
html = html.replace(/<link[^>]*>/g, '')
|
||||
|
||||
// Inline SVGs
|
||||
const svgSources = Array.from(html.matchAll(/src="([^"]+)"|url([^)]+)/g))
|
||||
.map(m => m[1])
|
||||
.filter(src => src?.match(/\.svg$/))
|
||||
|
||||
for (const src of svgSources) {
|
||||
const svg = await fsp.readFile(r('dist', src), 'utf-8')
|
||||
const base64Source = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`
|
||||
html = replaceAll(html, src, base64Source)
|
||||
}
|
||||
|
||||
// Inline our scripts
|
||||
const scriptSources = Array.from(html.matchAll(/<script[^>]*src="(.*)"[^>]*>[\s\S]*?<\/script>/g))
|
||||
.filter(([_block, src]) => src?.match(/^\/.*\.js$/))
|
||||
|
||||
for (const [scriptBlock, src] of scriptSources) {
|
||||
let contents = await fsp.readFile(r('dist', src), 'utf-8')
|
||||
contents = replaceAll(contents, '/* empty css */', '').trim()
|
||||
html = html.replace(scriptBlock, contents.length ? `<script>${contents}</script>` : '')
|
||||
}
|
||||
|
||||
// Minify HTML
|
||||
html = htmlMinifier.minify(html, { collapseWhitespace: true })
|
||||
|
||||
// Load messages
|
||||
const messages = JSON.parse(await fsp.readFile(r(`templates/${templateName}/messages.json`), 'utf-8'))
|
||||
|
||||
// Serialize into a js function
|
||||
const jsCode = [
|
||||
`const _messages = ${JSON.stringify({ ...genericMessages, ...messages })}`,
|
||||
`const _render = ${template(html, { variable: '__var__', interpolate: /{{([\s\S]+?)}}/g }).toString().replace('__var__', '{ messages }')}`,
|
||||
'const _template = (messages) => _render({ messages: { ..._messages, ...messages } })'
|
||||
].join('\n').trim()
|
||||
|
||||
// Generate types
|
||||
const types = [
|
||||
`export type DefaultMessages = Record<${Object.keys(messages).map(a => `"${a}"`).join(' | ')}, string | boolean | number >`,
|
||||
'declare const template: (data: Partial<DefaultMessages>) => string',
|
||||
'export { template }'
|
||||
].join('\n')
|
||||
|
||||
// Register exports
|
||||
templateExports.push({
|
||||
exportName: camelCase(templateName),
|
||||
templateName,
|
||||
types
|
||||
})
|
||||
|
||||
// Write new template
|
||||
await fsp.writeFile(fileName.replace('/index.html', '.mjs'), `${jsCode}\nexport const template = _template`)
|
||||
await fsp.writeFile(fileName.replace('/index.html', '.d.ts'), `${types}`)
|
||||
|
||||
// Remove original html file
|
||||
await fsp.unlink(fileName)
|
||||
await fsp.rmdir(dirname(fileName))
|
||||
}
|
||||
|
||||
// Write an index file with named exports for each template
|
||||
const contents = templateExports.map(exp => `export { template as ${exp.exportName} } from './templates/${exp.templateName}.mjs'`).join('\n')
|
||||
await fsp.writeFile(r('dist/index.mjs'), contents, 'utf8')
|
||||
|
||||
await fsp.writeFile(r('dist/index.d.ts'), replaceAll(contents, /\.mjs/g, ''), 'utf8')
|
||||
}
|
||||
}
|
||||
}
|
||||
42
packages/ui-templates/package.json
Normal file
42
packages/ui-templates/package.json
Normal file
@ -0,0 +1,42 @@
|
||||
{
|
||||
"name": "@nuxt/ui-templates",
|
||||
"version": "0.1.5",
|
||||
"repository": "nuxt/ui",
|
||||
"license": "CC-BY-ND-4.0",
|
||||
"exports": {
|
||||
"./templates/*": "./dist/templates/*.mjs",
|
||||
".": "./dist/index.mjs",
|
||||
"./*": "./dist/*"
|
||||
},
|
||||
"main": "./dist/index.mjs",
|
||||
"types": "./dist/index.d.ts",
|
||||
"files": [
|
||||
"dist/templates",
|
||||
"dist/index.*"
|
||||
],
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"lint": "eslint --ext .ts,.js .",
|
||||
"test": "yarn lint && yarn build",
|
||||
"prepack": "yarn build",
|
||||
"release": "yarn test && standard-version && npm publish && git push --follow-tags",
|
||||
"optimize-assets": "npx svgo public/assets/**/*.svg",
|
||||
"prerender": "yarn build && jiti ./lib/prerender"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@nuxt/ui-assets": "^0.1.0",
|
||||
"@types/html-minifier": "^4.0.1",
|
||||
"@types/lodash.template": "^4.5.0",
|
||||
"critters": "^0.0.14",
|
||||
"globby": "^11.0.4",
|
||||
"html-minifier": "^4.0.0",
|
||||
"lodash.template": "^4.5.0",
|
||||
"scule": "^0.2.1",
|
||||
"standard-version": "^9.3.2",
|
||||
"upath": "^2.0.1",
|
||||
"vite": "^2.6.14",
|
||||
"vite-plugin-windicss": "^1.5.1",
|
||||
"windicss": "^3.2.1"
|
||||
}
|
||||
}
|
||||
1
packages/ui-templates/public
Symbolic link
1
packages/ui-templates/public
Symbolic link
@ -0,0 +1 @@
|
||||
../assets
|
||||
1
packages/ui-templates/styles.ts
Normal file
1
packages/ui-templates/styles.ts
Normal file
@ -0,0 +1 @@
|
||||
import 'virtual:windi.css'
|
||||
72
packages/ui-templates/templates/error-404/index.html
Normal file
72
packages/ui-templates/templates/error-404/index.html
Normal file
@ -0,0 +1,72 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>{{ messages.statusCode }} - {{ messages.statusMessage }} | {{ messages.appName }}</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta
|
||||
content="width=device-width,initial-scale=1.0,minimum-scale=1.0"
|
||||
name="viewport"
|
||||
/>
|
||||
<script type="module" src="/styles.ts"></script>
|
||||
</head>
|
||||
<body
|
||||
class="
|
||||
font-sans
|
||||
antialiased
|
||||
bg-cloud-surface
|
||||
dark:bg-sky-darker
|
||||
text-sky-darkest
|
||||
dark:text-sky-surface
|
||||
"
|
||||
>
|
||||
<!-- <sprite> -->
|
||||
<div class="min-h-screen md:flex">
|
||||
<div class="flex items-center justify-center w-full md:w-1/2">
|
||||
<div class="max-w-sm m-8">
|
||||
<div class="text-5xl font-bold dark:text-white md:text-15xl">
|
||||
{{ messages.statusCode }}
|
||||
</div>
|
||||
<div class="w-16 h-1 my-3 bg-primary md:my-6"></div>
|
||||
<p
|
||||
class="
|
||||
mb-8
|
||||
text-2xl
|
||||
font-light
|
||||
leading-normal
|
||||
dark:text-cloud-lighter
|
||||
md:text-3xl
|
||||
"
|
||||
>
|
||||
{{ messages.description }}
|
||||
</p>
|
||||
<a
|
||||
href="/"
|
||||
class="
|
||||
px-4
|
||||
py-3
|
||||
font-bold
|
||||
bg-transparent
|
||||
rounded
|
||||
text-sky-darkest
|
||||
bg-primary
|
||||
hover:bg-primary-400
|
||||
dark:bg-primary
|
||||
"
|
||||
>
|
||||
{{ messages.backHome }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="
|
||||
relative
|
||||
w-full
|
||||
pb-full
|
||||
md:flex md:pb-0 md:min-h-screen md:w-1/2
|
||||
"
|
||||
>
|
||||
<img src="/assets/images/404.svg" class="object-cover">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
6
packages/ui-templates/templates/error-404/messages.json
Normal file
6
packages/ui-templates/templates/error-404/messages.json
Normal file
@ -0,0 +1,6 @@
|
||||
{
|
||||
"statusCode": "404",
|
||||
"statusMessage": "Not Found",
|
||||
"description": "Sorry, the page you are looking for could not be found.",
|
||||
"backHome": "Go back home"
|
||||
}
|
||||
49
packages/ui-templates/templates/error-500/index.html
Normal file
49
packages/ui-templates/templates/error-500/index.html
Normal file
@ -0,0 +1,49 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>{{ messages.statusCode }} - {{ messages.statusMessage }} | {{ messages.appName }}</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta content="width=device-width,initial-scale=1.0,minimum-scale=1.0" name="viewport" />
|
||||
<script type="module" src="/styles.ts"></script>
|
||||
</head>
|
||||
|
||||
<body class="
|
||||
font-sans
|
||||
antialiased
|
||||
bg-cloud-surface
|
||||
dark:bg-sky-darker
|
||||
text-sky-darkest
|
||||
dark:text-sky-surface
|
||||
">
|
||||
<div class="min-h-screen md:flex">
|
||||
<div class="flex items-center justify-center w-full md:w-1/2">
|
||||
<div class="max-w-sm m-8">
|
||||
<div class="text-5xl font-bold dark:text-white md:text-15xl">
|
||||
{{ messages.statusCode }}
|
||||
</div>
|
||||
<div class="w-16 h-1 my-3 bg-primary md:my-6"></div>
|
||||
<p class="
|
||||
mb-8
|
||||
text-2xl
|
||||
font-light
|
||||
leading-normal
|
||||
dark:text-cloud-lighter
|
||||
md:text-3xl
|
||||
">
|
||||
{{ messages.description }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="
|
||||
relative
|
||||
w-full
|
||||
pb-full
|
||||
md:flex md:pb-0 md:min-h-screen md:w-1/2
|
||||
">
|
||||
<img src="@nuxt/ui-assets/images/5002.svg" class="object-cover">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
5
packages/ui-templates/templates/error-500/messages.json
Normal file
5
packages/ui-templates/templates/error-500/messages.json
Normal file
@ -0,0 +1,5 @@
|
||||
{
|
||||
"statusCode": "500",
|
||||
"statusMessage": "Server error",
|
||||
"description": "This page is temporarily unavailable."
|
||||
}
|
||||
45
packages/ui-templates/templates/error-dev/index.html
Normal file
45
packages/ui-templates/templates/error-dev/index.html
Normal file
@ -0,0 +1,45 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>{{ messages.statusCode }} - {{ messages.statusMessage }} | {{ messages.appName }}</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta
|
||||
content="width=device-width,initial-scale=1.0,minimum-scale=1.0"
|
||||
name="viewport"
|
||||
/>
|
||||
<script type="module" src="/styles.ts"></script>
|
||||
</head>
|
||||
<body
|
||||
class="
|
||||
font-sans
|
||||
antialiased
|
||||
bg-cloud-surface
|
||||
dark:bg-sky-darker
|
||||
text-sky-darkest
|
||||
dark:text-sky-surface
|
||||
"
|
||||
>
|
||||
<div class="min-h-screen md:flex">
|
||||
<div class="flex items-center justify-center w-full md:w-1/2">
|
||||
<div class="max-w-sm m-8">
|
||||
<div class="text-5xl font-bold dark:text-white md:text-15xl">
|
||||
{{ messages.statusCode }}
|
||||
</div>
|
||||
<div class="w-16 h-1 my-3 bg-primary md:my-6"></div>
|
||||
<p
|
||||
class="
|
||||
mb-8
|
||||
text-2xl
|
||||
font-light
|
||||
leading-normal
|
||||
dark:text-cloud-lighter
|
||||
md:text-3xl
|
||||
"
|
||||
>
|
||||
{{ messages.description }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
5
packages/ui-templates/templates/error-dev/messages.json
Normal file
5
packages/ui-templates/templates/error-dev/messages.json
Normal file
@ -0,0 +1,5 @@
|
||||
{
|
||||
"statusCode": "500",
|
||||
"statusMessage": "Server error",
|
||||
"description": "An error occurred in the application and the page could not be served. If you are the application owner, check your server logs for details."
|
||||
}
|
||||
119
packages/ui-templates/templates/loading/index.html
Normal file
119
packages/ui-templates/templates/loading/index.html
Normal file
@ -0,0 +1,119 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>{{ messages.loading }} | {{ messages.appName }}</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta
|
||||
content="width=device-width,initial-scale=1.0,minimum-scale=1.0"
|
||||
name="viewport"
|
||||
/>
|
||||
<script type="module" src="/styles.ts"></script>
|
||||
</head>
|
||||
<body class="nuxt-loading h-screen bg-cloud-surface flex flex-col justify-center items-center text-center">
|
||||
<svg width="221" height="65" viewBox="0 0 221 65" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M76.333 20.5005H82.8185L96.5631 42.4764V20.5005H102.55V51.6393H96.1087L82.3198 29.7091V51.6393H76.333V20.5005Z" fill="currentColor"/>
|
||||
<path d="M129.311 51.6393H123.732V48.1611C122.462 50.6089 119.877 51.9871 116.612 51.9871C111.441 51.9871 108.083 48.3393 108.083 43.0894V29.2178H113.662V41.9416C113.662 45.0111 115.568 47.1459 118.425 47.1459C121.555 47.1459 123.732 44.7437 123.732 41.4524V29.2178H129.311V51.6393Z" fill="currentColor"/>
|
||||
<path d="M148.724 51.2848L143.372 43.811L138.019 51.2848H132.076L140.333 39.5849L132.712 28.8633H138.79L143.372 35.3154L147.906 28.8633H154.031L146.364 39.5849L154.62 51.2848H148.724Z" fill="currentColor"/>
|
||||
<path d="M165.96 22.4565V29.2173H172.311V33.7999H165.96V44.9302C165.96 45.304 166.111 45.6626 166.381 45.9271C166.65 46.1916 167.015 46.3405 167.397 46.3411H172.311V51.6302H168.636C163.646 51.6302 160.381 48.7824 160.381 43.8042V33.8043H155.891V29.2173H158.708C160.022 29.2173 160.787 28.45 160.787 27.1804V22.4565H165.96Z" fill="currentColor"/>
|
||||
<path d="M186.374 44.5872V20.5005H192.359V42.7416C192.359 48.748 189.411 51.6393 184.422 51.6393H177.455V46.3502H184.577C185.053 46.3502 185.511 46.1645 185.848 45.8339C186.185 45.5032 186.374 45.0548 186.374 44.5872" fill="currentColor"/>
|
||||
<path d="M195.945 41.1847H201.708C202.027 44.6629 204.386 46.8781 208.196 46.8781C211.598 46.8781 213.959 45.5455 213.959 42.7869C213.959 36.113 196.892 40.739 196.892 28.8174C196.896 23.7023 201.387 20.1479 207.839 20.1479C214.553 20.1479 219.088 23.9283 219.365 29.7565H213.633C213.363 27.0435 211.195 25.2196 207.828 25.2196C204.698 25.2196 202.748 26.6435 202.748 28.8218C202.748 35.7174 220.037 30.5609 220.037 42.7021C220.037 48.4846 215.182 51.9998 208.198 51.9998C200.986 51.9998 196.269 47.7281 195.952 41.189" fill="currentColor"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M29.7513 14.261C28.0767 11.3817 23.8903 11.3817 22.2157 14.261L3.96535 45.641C2.29077 48.5204 4.38399 52.1195 7.73316 52.1195H21.9804C20.5493 50.8688 20.0193 48.7051 21.1023 46.8487L34.9243 23.1556L29.7513 14.261Z" fill="#80EEC0"/>
|
||||
<path d="M41.3151 21.1443C42.701 18.7885 46.1656 18.7885 47.5515 21.1443L62.6552 46.8188C64.0411 49.1746 62.3088 52.1194 59.537 52.1194H29.3296C26.5579 52.1194 24.8255 49.1746 26.2114 46.8188L41.3151 21.1443Z" fill="#00DC82"/>
|
||||
</svg>
|
||||
|
||||
<div class="nuxt-loader-background h-1 flex justify-center w-full opacity-0">
|
||||
<div class="nuxt-loader-bar h-1 w-0 inline bg-primary"></div>
|
||||
</div>
|
||||
<style>
|
||||
.nuxt-loading {
|
||||
color: #003543;
|
||||
animation: switch 6s infinite;
|
||||
animation-delay: 0.5s;
|
||||
}
|
||||
.nuxt-logo {
|
||||
animation: fade 1s ease-out forwards;
|
||||
}
|
||||
.nuxt-loader-background
|
||||
{
|
||||
background: rgb(120,120,120, 0.2);
|
||||
animation: fade 1s ease-out forwards;
|
||||
}
|
||||
|
||||
.nuxt-loader-bar {
|
||||
animation: growth 6s ease-in-out infinite;
|
||||
animation-delay: 0.5s;
|
||||
}
|
||||
/*
|
||||
2 sec for bg switch
|
||||
2 sec for shrink
|
||||
2 sec for bg switch
|
||||
*/
|
||||
@keyframes growth {
|
||||
/* 2 sec for growth in black */
|
||||
0% {
|
||||
width: 0%;
|
||||
}
|
||||
/* 2 sec for waiting bg switch */
|
||||
25% {
|
||||
width: 100%;
|
||||
}
|
||||
50% {
|
||||
width: 100%;
|
||||
}
|
||||
75% {
|
||||
width: 0%;
|
||||
}
|
||||
/* 2 sec for waiting bg switch */
|
||||
100% {
|
||||
width: 0%;
|
||||
}
|
||||
}
|
||||
@keyframes switch {
|
||||
/* 2 sec for growth in black */
|
||||
0% {
|
||||
background-color: #E6F0F0;
|
||||
color: #003543;
|
||||
}
|
||||
/* 2 sec for waiting bg switch */
|
||||
25% {
|
||||
background-color: #E6F0F0;
|
||||
color: #003543;
|
||||
}
|
||||
50% {
|
||||
background-color: #003543;
|
||||
color: #E6F0F0;
|
||||
}
|
||||
75% {
|
||||
background-color: #003543;
|
||||
color: #E6F0F0;
|
||||
}
|
||||
/* 2 sec for waiting bg switch */
|
||||
100% {
|
||||
background-color: #E6F0F0;
|
||||
color: #003543;
|
||||
}
|
||||
}
|
||||
@keyframes fade {
|
||||
to {
|
||||
opacity: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
if (typeof window.fetch === 'undefined') {
|
||||
setTimeout(() => window.location.reload(), 1000)
|
||||
} else {
|
||||
const check = async () => {
|
||||
try {
|
||||
const body = await window.fetch(window.location.href).then(r => r.text())
|
||||
if (!body.includes('__NUXT_LOADING__')) {
|
||||
return window.location.reload()
|
||||
}
|
||||
} catch {}
|
||||
setTimeout(check, 1000)
|
||||
}
|
||||
check()
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
3
packages/ui-templates/templates/loading/messages.json
Normal file
3
packages/ui-templates/templates/loading/messages.json
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"loading": "Loading"
|
||||
}
|
||||
3
packages/ui-templates/templates/messages.json
Normal file
3
packages/ui-templates/templates/messages.json
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"appName": "Nuxt"
|
||||
}
|
||||
93
packages/ui-templates/templates/welcome/index.html
Normal file
93
packages/ui-templates/templates/welcome/index.html
Normal file
@ -0,0 +1,93 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>{{ messages.title }}</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta content="width=device-width,initial-scale=1.0,minimum-scale=1.0" name="viewport" />
|
||||
<script type="module" src="/styles.ts"></script>
|
||||
</head>
|
||||
<body class="text-secondary-darker dark:text-white bg-cloud-surface dark:bg-sky-darkest">
|
||||
<div class="relative flex items-top justify-center min-h-screen sm:items-center sm:pt-0">
|
||||
<div class="max-w-4xl mx-auto sm:px-6 lg:px-8">
|
||||
<div class="flex justify-center pt-8 sm:justify-start sm:pt-0">
|
||||
<svg width="221" height="65" viewBox="0 0 221 65" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M76.333 20.5005H82.8185L96.5631 42.4764V20.5005H102.55V51.6393H96.1087L82.3198 29.7091V51.6393H76.333V20.5005Z"
|
||||
fill="currentColor" />
|
||||
<path
|
||||
d="M129.311 51.6393H123.732V48.1611C122.462 50.6089 119.877 51.9871 116.612 51.9871C111.441 51.9871 108.083 48.3393 108.083 43.0894V29.2178H113.662V41.9416C113.662 45.0111 115.568 47.1459 118.425 47.1459C121.555 47.1459 123.732 44.7437 123.732 41.4524V29.2178H129.311V51.6393Z"
|
||||
fill="currentColor" />
|
||||
<path
|
||||
d="M148.724 51.2848L143.372 43.811L138.019 51.2848H132.076L140.333 39.5849L132.712 28.8633H138.79L143.372 35.3154L147.906 28.8633H154.031L146.364 39.5849L154.62 51.2848H148.724Z"
|
||||
fill="currentColor" />
|
||||
<path
|
||||
d="M165.96 22.4565V29.2173H172.311V33.7999H165.96V44.9302C165.96 45.304 166.111 45.6626 166.381 45.9271C166.65 46.1916 167.015 46.3405 167.397 46.3411H172.311V51.6302H168.636C163.646 51.6302 160.381 48.7824 160.381 43.8042V33.8043H155.891V29.2173H158.708C160.022 29.2173 160.787 28.45 160.787 27.1804V22.4565H165.96Z"
|
||||
fill="currentColor" />
|
||||
<path
|
||||
d="M186.374 44.5872V20.5005H192.359V42.7416C192.359 48.748 189.411 51.6393 184.422 51.6393H177.455V46.3502H184.577C185.053 46.3502 185.511 46.1645 185.848 45.8339C186.185 45.5032 186.374 45.0548 186.374 44.5872"
|
||||
fill="currentColor" />
|
||||
<path
|
||||
d="M195.945 41.1847H201.708C202.027 44.6629 204.386 46.8781 208.196 46.8781C211.598 46.8781 213.959 45.5455 213.959 42.7869C213.959 36.113 196.892 40.739 196.892 28.8174C196.896 23.7023 201.387 20.1479 207.839 20.1479C214.553 20.1479 219.088 23.9283 219.365 29.7565H213.633C213.363 27.0435 211.195 25.2196 207.828 25.2196C204.698 25.2196 202.748 26.6435 202.748 28.8218C202.748 35.7174 220.037 30.5609 220.037 42.7021C220.037 48.4846 215.182 51.9998 208.198 51.9998C200.986 51.9998 196.269 47.7281 195.952 41.189"
|
||||
fill="currentColor" />
|
||||
<path fill-rule="evenodd" clip-rule="evenodd"
|
||||
d="M29.7513 14.261C28.0767 11.3817 23.8903 11.3817 22.2157 14.261L3.96535 45.641C2.29077 48.5204 4.38399 52.1195 7.73316 52.1195H21.9804C20.5493 50.8688 20.0193 48.7051 21.1023 46.8487L34.9243 23.1556L29.7513 14.261Z"
|
||||
fill="#80EEC0" />
|
||||
<path
|
||||
d="M41.3151 21.1443C42.701 18.7885 46.1656 18.7885 47.5515 21.1443L62.6552 46.8188C64.0411 49.1746 62.3088 52.1194 59.537 52.1194H29.3296C26.5579 52.1194 24.8255 49.1746 26.2114 46.8188L41.3151 21.1443Z"
|
||||
fill="#00DC82" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="mt-4 bg-white dark:bg-sky-darker overflow-hidden shadow sm:rounded-lg">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2">
|
||||
<div class="p-6">
|
||||
<div class="flex items-center">
|
||||
<svg class="w-6 h-6 text-cloud-dark dark:text-cloud-light" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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" />
|
||||
</svg>
|
||||
<div class="ml-4 text-lg leading-7 font-semibold">
|
||||
<a href="https://v3.nuxtjs.org" target="_blank" rel="noopener" class="hover:underline text-sky-black dark:text-white">
|
||||
{{ messages.documentation }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ml-10">
|
||||
<div class="mt-2 text-cloud-dark dark:text-cloud-light text-sm">
|
||||
{{ messages.readDocs }}<br/>
|
||||
<a href="https://v3.nuxtjs.org" class="inline-block mt-2 text-primary hover:underline" target="_blank" rel="noopener">
|
||||
{{ messages.documentation }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-6 border-t border-gray-200 dark:border-sky-darkest md:border-t-0 md:border-l">
|
||||
<div class="flex items-center">
|
||||
<svg class="w-6 h-6 text-cloud-dark dark:text-cloud-light" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z" />
|
||||
</svg>
|
||||
<div class="ml-4 text-lg leading-7 font-semibold">
|
||||
<a href="https://twitter.com/nuxt_js" target="_blank" rel="noopener"
|
||||
class="hover:underline text-sky-black dark:text-white">Twitter</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ml-10">
|
||||
<div class="mt-2 text-cloud-dark dark:text-cloud-light text-sm">
|
||||
{{ messages.followTwitter }}<br>
|
||||
<a href="https://twitter.com/nuxt_js" target="_blank" class="inline-block mt-2 text-primary hover:underline" rel="noopener">@nuxt_js</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="mt-4 text-sm bg-white border-l-8 border-cloud-light dark:bg-sky-darker dark:border-sky overflow-hidden shadow sm:rounded-lg p-6 pl-4">
|
||||
<p>To remove this welcome page, <strong class="font-bold">you have 2 options</strong>:</p>
|
||||
<ul class="list-inside list-disc pt-1 pl-2">
|
||||
<li>Create an <code class="text-primary">app.vue</code></li>
|
||||
<li>Create a <code class="text-primary">pages/index.vue</code></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
6
packages/ui-templates/templates/welcome/messages.json
Normal file
6
packages/ui-templates/templates/welcome/messages.json
Normal file
@ -0,0 +1,6 @@
|
||||
{
|
||||
"title": "Welcome to Nuxt 3!",
|
||||
"documentation": "Documentation",
|
||||
"readDocs": "We highly recommend you take a look at the Nuxt documentation, whether you are new or have previous experience with the framework.",
|
||||
"followTwitter": "Follow the Nuxt Twitter account to get latest news about releases, new modules, tutorials and tips."
|
||||
}
|
||||
41
packages/ui-templates/vite.config.ts
Normal file
41
packages/ui-templates/vite.config.ts
Normal file
@ -0,0 +1,41 @@
|
||||
import { resolve } from 'path'
|
||||
import { readdirSync } from 'fs'
|
||||
|
||||
import { defineConfig } from 'vite'
|
||||
import WindiCSS from 'vite-plugin-windicss'
|
||||
|
||||
import { DevRenderingPlugin } from './lib/dev'
|
||||
import { RenderPlugin } from './lib/render'
|
||||
|
||||
const r = (...path: string[]) => resolve(__dirname, ...path)
|
||||
|
||||
export default defineConfig({
|
||||
build: {
|
||||
rollupOptions: {
|
||||
input: {
|
||||
...Object.fromEntries(
|
||||
readdirSync(r('templates')).filter(dir => dir !== 'messages.json').map(dir => [
|
||||
dir,
|
||||
r('templates', dir, 'index.html')
|
||||
])
|
||||
),
|
||||
index: r('index.html')
|
||||
}
|
||||
}
|
||||
},
|
||||
plugins: [
|
||||
WindiCSS({
|
||||
scan: {
|
||||
dirs: ['templates'],
|
||||
fileExtensions: ['html']
|
||||
}
|
||||
}),
|
||||
DevRenderingPlugin(),
|
||||
RenderPlugin()
|
||||
],
|
||||
server: {
|
||||
fs: {
|
||||
allow: ['./templates', __dirname]
|
||||
}
|
||||
}
|
||||
})
|
||||
77
packages/ui-templates/windi.config.js
Normal file
77
packages/ui-templates/windi.config.js
Normal file
@ -0,0 +1,77 @@
|
||||
const colors = require('windicss/colors')
|
||||
|
||||
module.exports = {
|
||||
purge: ['./src/**/*.html'],
|
||||
darkMode: 'media',
|
||||
theme: {
|
||||
colors: {
|
||||
white: 'white',
|
||||
black: 'black',
|
||||
transparent: 'transparent',
|
||||
current: 'currentColor',
|
||||
primary: {
|
||||
50: '#F2FDF9',
|
||||
100: '#E6FCF3',
|
||||
200: '#BFF6E0',
|
||||
300: '#99F1CD',
|
||||
400: '#4DE7A8',
|
||||
DEFAULT: '#00DC82',
|
||||
600: '#00C675',
|
||||
700: '#00844E',
|
||||
800: '#00633B',
|
||||
900: '#004227'
|
||||
},
|
||||
'secondary-surface': '#E5F9FF',
|
||||
'secondary-lightest': '#B7E1ED',
|
||||
'secondary-lighter': '#95CDDE',
|
||||
'secondary-light': '#71A2B0',
|
||||
secondary: '#497A87',
|
||||
'secondary-dark': '#255461',
|
||||
'secondary-darker': '#003543',
|
||||
'secondary-darkest': '#012A35',
|
||||
'secondary-black': '#001E26',
|
||||
tertiary: '#B2CCCC', // cloud
|
||||
'cloud-surface': '#E6F0F0',
|
||||
'cloud-lightest': '#D1E2E2',
|
||||
'cloud-lighter': '#B2CCCC',
|
||||
'cloud-light': '#92ADAD',
|
||||
cloud: '#688282',
|
||||
'cloud-dark': '#566B6B',
|
||||
'cloud-darker': '#334040',
|
||||
'cloud-darkest': '#273131',
|
||||
'cloud-black': '#1A2121',
|
||||
blue: colors.sky,
|
||||
green: {
|
||||
// 50: "#eefdf2",
|
||||
50: '#d0fcde',
|
||||
100: '#b0fccb',
|
||||
200: '#8cfab7',
|
||||
300: '#64f4a3',
|
||||
400: '#37e990',
|
||||
500: '#00d77d',
|
||||
600: '#00bb6a',
|
||||
700: '#009956',
|
||||
800: '#047342',
|
||||
900: '#134d2e'
|
||||
// 950: "#132a1c",
|
||||
},
|
||||
red: colors.red,
|
||||
rose: colors.rose,
|
||||
yellow: colors.amber,
|
||||
orange: colors.orange,
|
||||
gray: colors.gray,
|
||||
purple: colors.purple,
|
||||
sky: {
|
||||
surface: '#E5F9FF',
|
||||
lightest: '#B7E1ED',
|
||||
lighter: '#95CDDE',
|
||||
light: '#71A2B0',
|
||||
DEFAULT: '#497A87',
|
||||
dark: '#255461',
|
||||
darker: '#003543',
|
||||
darkest: '#012A35',
|
||||
black: '#001E26'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user