Bommels05/Modrinth
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Self-host fonts + Move Vite plugins export

Browse Source
This commit is contained in:
venashial 2022-07-28 22:45:53 -07:00
parent 95d6dac055
commit 533f0213e3
12 changed files with 87 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
docs/app.html
View File

@ -2,9 +2,27 @@
<html lang="en" data-color-mode="light"> <html lang="en" data-color-mode="light">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="description" content="" />
<link rel="icon" href="%sveltekit.assets%/assets/omorphia.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="%sveltekit.assets%/assets/omorphia.png" />
<link
rel="preload"
href="/assets/fonts/InterRegular.woff2"
as="font"
type="font/woff2"
crossorigin />
<link
rel="preload"
href="/assets/fonts/InterBold.woff2"
as="font"
type="font/woff2"
crossorigin />
<link
rel="preload"
href="/assets/fonts/InterSemiBold.woff2"
as="font"
type="font/woff2"
crossorigin />
<meta name="theme-color" content="#CF1971" /> <meta name="theme-color" content="#CF1971" />
<meta name="twitter:card" content="summary" /> <meta name="twitter:card" content="summary" />

18
docs/routes/setup.md
View File

@ -142,7 +142,23 @@ Add the `base` class and a theme to the `<body>` tag in `src/app.html`:
</body> </body>
``` ```
## `7.` Using Omorphia ## `7.` Setup fonts
Copy the the `fonts/` folder from [Omorphia's repository](https://github.com/modrinth/omorphia/blob/main/docs/static/assets/fonts) and place them in the `/assets` folder at the root of your project.
Add the following preload tags to your head in `app.html` to speed up font loading:
<!-- prettier-ignore-start -->
```html
<head>
<link rel="preload" href="/assets/fonts/InterRegular.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/assets/fonts/InterBold.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/assets/fonts/InterSemiBold.woff2" as="font" type="font/woff2" crossorigin>
</head>
```
<!-- prettier-ignore-end -->
## `8.` Using Omorphia
### Developing ### Developing

BIN
docs/static/assets/fonts/InterBold.woff2 vendored Normal file
View File

Binary file not shown.

BIN
docs/static/assets/fonts/InterRegular.woff2 vendored Normal file
View File

Binary file not shown.

BIN
docs/static/assets/fonts/InterSemiBold.woff2 vendored Normal file
View File

Binary file not shown.

4
package.json
View File

@ -43,17 +43,17 @@
"eslint-config-prettier": "^8.3.0", "eslint-config-prettier": "^8.3.0",
"eslint-plugin-svelte3": "^3.2.1", "eslint-plugin-svelte3": "^3.2.1",
"mdsvex": "^0.10.5", "mdsvex": "^0.10.5",
"mdsvexamples": "^0.3.0", "mdsvexamples": "^0.3.1",
"merge-dirs": "^0.2.1", "merge-dirs": "^0.2.1",
"nodemon": "^2.0.15", "nodemon": "^2.0.15",
"prettier": "^2.6.2", "prettier": "^2.6.2",
"prettier-plugin-svelte": "^2.7.0", "prettier-plugin-svelte": "^2.7.0",
"sveld": "^0.13.4", "sveld": "^0.13.4",
"svelte": "^3.48.0", "svelte": "^3.48.0",
"svelte2tsx": "^0.5.11",
"svelte-check": "^2.8.0", "svelte-check": "^2.8.0",
"svelte-intl-precompile": "^0.11.1", "svelte-intl-precompile": "^0.11.1",
"svelte-preprocess": "^4.10.7", "svelte-preprocess": "^4.10.7",
"svelte2tsx": "^0.5.11",
"tslib": "^2.3.1", "tslib": "^2.3.1",
"typescript": "~4.7.4", "typescript": "~4.7.4",
"vite": "^3.0.0" "vite": "^3.0.0"

40
pnpm-lock.yaml generated
View File

@ -26,7 +26,7 @@ specifiers:
jimp: ^0.16.1 jimp: ^0.16.1
marked: ^4.0.12 marked: ^4.0.12
mdsvex: ^0.10.5 mdsvex: ^0.10.5
mdsvexamples: ^0.3.0 mdsvexamples: ^0.3.1
merge-dirs: ^0.2.1 merge-dirs: ^0.2.1
nodemon: ^2.0.15 nodemon: ^2.0.15
openapi-typescript: ^5.4.0 openapi-typescript: ^5.4.0
@ -101,7 +101,7 @@ devDependencies:
eslint-config-prettier: 8.5.0_eslint@7.32.0 eslint-config-prettier: 8.5.0_eslint@7.32.0
eslint-plugin-svelte3: 3.4.1_6wevxxng4y4ff26nzlndg2wnpa eslint-plugin-svelte3: 3.4.1_6wevxxng4y4ff26nzlndg2wnpa
mdsvex: 0.10.5_svelte@3.48.0 mdsvex: 0.10.5_svelte@3.48.0
mdsvexamples: 0.3.0_vite@3.0.0 mdsvexamples: 0.3.1_vite@3.0.0
merge-dirs: 0.2.1 merge-dirs: 0.2.1
nodemon: 2.0.15 nodemon: 2.0.15
prettier: 2.6.2 prettier: 2.6.2
@ -1365,7 +1365,6 @@ packages:
resolution: {integrity: sha512-Xx54uLJQZ19lKygFXOWsscKUbsBZW0CPykPhVQdhIeIwrbPmJzqeASDInc8nKBnp/JT6igTs82qPXz069H8I/A==} resolution: {integrity: sha512-Xx54uLJQZ19lKygFXOWsscKUbsBZW0CPykPhVQdhIeIwrbPmJzqeASDInc8nKBnp/JT6igTs82qPXz069H8I/A==}
engines: {node: '>=0.4.0'} engines: {node: '>=0.4.0'}
hasBin: true hasBin: true
dev: false
/ajv/6.12.6: /ajv/6.12.6:
resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==} resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==}
@ -3281,14 +3280,14 @@ packages:
vfile-message: 2.0.4 vfile-message: 2.0.4
dev: true dev: true
/mdsvexamples/0.3.0_vite@3.0.0: /mdsvexamples/0.3.1_vite@3.0.0:
resolution: {integrity: sha512-d662JjeT0Vw+XPwc2u+DAnGq+x8JMNJa17vMQpT+uvHJpkBs5Uszm0oDoU3LHmI1ZVB/Hq17HVrr0N/IUFQUJg==} resolution: {integrity: sha512-bCtJQODJHJIlHT6t+2wHNnZ2TyV4qBqDzhPRcaNj4VUV+q+AVs7fk6v+h890IRNitMUlOlfhpDOa4C/S++zW3Q==}
dependencies: dependencies:
abstract-syntax-tree: 2.20.5 abstract-syntax-tree: 2.20.5
prism-svelte: 0.5.0 prism-svelte: 0.5.0
prismjs: 1.27.0 prismjs: 1.27.0
unist-util-visit: 4.1.0 unist-util-visit: 4.1.0
unplugin: 0.6.2_vite@3.0.0 unplugin: 0.7.2_vite@3.0.0
upath: 2.0.1 upath: 2.0.1
transitivePeerDependencies: transitivePeerDependencies:
- esbuild - esbuild
@ -5390,29 +5389,6 @@ packages:
- webpack - webpack
dev: false dev: false
/unplugin/0.6.2_vite@3.0.0:
resolution: {integrity: sha512-+QONc2uBFQbeo4x5mlJHjTKjR6pmuchMpGVrWhwdGFFMb4ttFZ4E9KqhOOrNcm3Q8NNyB1vJ4s5e36IZC7UWYw==}
peerDependencies:
esbuild: '>=0.13'
rollup: ^2.50.0
vite: ^2.3.0 || ^3.0.0
webpack: 4 || 5
peerDependenciesMeta:
esbuild:
optional: true
rollup:
optional: true
vite:
optional: true
webpack:
optional: true
dependencies:
chokidar: 3.5.3
vite: 3.0.0
webpack-sources: 3.2.3
webpack-virtual-modules: 0.4.3
dev: true
/unplugin/0.7.2_vite@3.0.0: /unplugin/0.7.2_vite@3.0.0:
resolution: {integrity: sha512-m7thX4jP8l5sETpLdUASoDOGOcHaOVtgNyrYlToyQUvILUtEzEnngRBrHnAX3IKqooJVmXpoa/CwQ/QqzvGaHQ==} resolution: {integrity: sha512-m7thX4jP8l5sETpLdUASoDOGOcHaOVtgNyrYlToyQUvILUtEzEnngRBrHnAX3IKqooJVmXpoa/CwQ/QqzvGaHQ==}
peerDependencies: peerDependencies:
@ -5435,7 +5411,6 @@ packages:
vite: 3.0.0 vite: 3.0.0
webpack-sources: 3.2.3 webpack-sources: 3.2.3
webpack-virtual-modules: 0.4.4 webpack-virtual-modules: 0.4.4
dev: false
/upath/2.0.1: /upath/2.0.1:
resolution: {integrity: sha512-1uEe95xksV1O0CYKXo8vQvN1JEbtJp7lb7C5U9HMsIp6IVwntkH/oNUzyVNQSd4S1sYk2FpSSW44FqMc8qee5w==} resolution: {integrity: sha512-1uEe95xksV1O0CYKXo8vQvN1JEbtJp7lb7C5U9HMsIp6IVwntkH/oNUzyVNQSd4S1sYk2FpSSW44FqMc8qee5w==}
@ -5536,13 +5511,8 @@ packages:
resolution: {integrity: sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==} resolution: {integrity: sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==}
engines: {node: '>=10.13.0'} engines: {node: '>=10.13.0'}
/webpack-virtual-modules/0.4.3:
resolution: {integrity: sha512-5NUqC2JquIL2pBAAo/VfBP6KuGkHIZQXW/lNKupLPfhViwh8wNsu0BObtl09yuKZszeEUfbXz8xhrHvSG16Nqw==}
dev: true
/webpack-virtual-modules/0.4.4: /webpack-virtual-modules/0.4.4:
resolution: {integrity: sha512-h9atBP/bsZohWpHnr+2sic8Iecb60GxftXsWNLLLSqewgIsGzByd2gcIID4nXcG+3tNe4GQG3dLcff3kXupdRA==} resolution: {integrity: sha512-h9atBP/bsZohWpHnr+2sic8Iecb60GxftXsWNLLLSqewgIsGzByd2gcIID4nXcG+3tNe4GQG3dLcff3kXupdRA==}
dev: false
/whatwg-url/5.0.0: /whatwg-url/5.0.0:
resolution: {integrity: sha1-lmRU6HZUYuN2RNNib2dCzotwll0=} resolution: {integrity: sha1-lmRU6HZUYuN2RNNib2dCzotwll0=}

11
src/config/svelte.js
View File

@ -1,17 +1,6 @@
import sveltePreprocess from 'svelte-preprocess' import sveltePreprocess from 'svelte-preprocess'
import Icons from 'unplugin-icons/vite'
import svelteSvg from '@poppanator/sveltekit-svg'
export const preprocess = sveltePreprocess({ export const preprocess = sveltePreprocess({
postcss: true, postcss: true,
preserve: ['ld+json'], preserve: ['ld+json'],
}) })
export const plugins = [
svelteSvg(),
Icons({
compiler: 'svelte',
defaultClass: 'icon',
scale: 1,
}),
]

11
src/config/vite.js Normal file
View File

@ -0,0 +1,11 @@
import Icons from 'unplugin-icons/vite'
import svelteSvg from '@poppanator/sveltekit-svg'
export const plugins = [
svelteSvg(),
Icons({
compiler: 'svelte',
defaultClass: 'icon',
scale: 1,
}),
]

2
src/styles/classes/base.postcss
View File

@ -1,7 +1,7 @@
.base { .base {
background-color: var(--color-bg); background-color: var(--color-bg);
color: var(--color-text); color: var(--color-text);
font-family: var(--font-standard); font-family: var(--body-font);
font-size: var(--font-size); font-size: var(--font-size);
font-weight: var(--font-weight-regular); font-weight: var(--font-weight-regular);

32
src/styles/variables/typography.postcss
View File

@ -14,8 +14,36 @@
--font-weight-bold: 700; --font-weight-bold: 700;
/* Font stacks */ /* Font stacks */
--body-font: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica Neue, Helvetica, --body-font: Inter, Times;
/* --body-font: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica Neue, Helvetica,
Oxygen, Ubuntu, Roboto, Cantarell, Fira Sans, Droid Sans, 'Apple Color Emoji', 'Segoe UI Emoji', Oxygen, Ubuntu, Roboto, Cantarell, Fira Sans, Droid Sans, 'Apple Color Emoji', 'Segoe UI Emoji',
Arial, sans-serif; Arial, sans-serif; */
--mono-font: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace; --mono-font: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
/* inter-regular - latin */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: fallback;
src: local(''), url('/assets/fonts/InterRegular.woff2') format('woff2');
}
/* inter-600 - latin */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: fallback;
src: local(''), url('/assets/fonts/InterSemiBold.woff2') format('woff2');
}
/* inter-700 - latin */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-display: fallback;
src: local(''), url('/assets/fonts/InterBold.woff2') format('woff2');
}
} }

2
vite.config.js
View File

@ -1,5 +1,5 @@
import { sveltekit } from '@sveltejs/kit/vite' import { sveltekit } from '@sveltejs/kit/vite'
import { plugins } from './src/config/svelte.js' import { plugins } from './src/config/vite.js'
import examples from 'mdsvexamples/vite' import examples from 'mdsvexamples/vite'
import sveld from './docs/plugins/sveld.js' import sveld from './docs/plugins/sveld.js'
import Generator from './src/plugins/generator/index.js' import Generator from './src/plugins/generator/index.js'