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">
<head>
<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" />
<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="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>
```
## `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

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-plugin-svelte3": "^3.2.1",
"mdsvex": "^0.10.5",
"mdsvexamples": "^0.3.0",
"mdsvexamples": "^0.3.1",
"merge-dirs": "^0.2.1",
"nodemon": "^2.0.15",
"prettier": "^2.6.2",
"prettier-plugin-svelte": "^2.7.0",
"sveld": "^0.13.4",
"svelte": "^3.48.0",
"svelte2tsx": "^0.5.11",
"svelte-check": "^2.8.0",
"svelte-intl-precompile": "^0.11.1",
"svelte-preprocess": "^4.10.7",
"svelte2tsx": "^0.5.11",
"tslib": "^2.3.1",
"typescript": "~4.7.4",
"vite": "^3.0.0"

40
pnpm-lock.yaml generated
View File

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

11
src/config/svelte.js
View File

@ -1,17 +1,6 @@
import sveltePreprocess from 'svelte-preprocess'
import Icons from 'unplugin-icons/vite'
import svelteSvg from '@poppanator/sveltekit-svg'
export const preprocess = sveltePreprocess({
postcss: true,
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 {
background-color: var(--color-bg);
color: var(--color-text);
font-family: var(--font-standard);
font-family: var(--body-font);
font-size: var(--font-size);
font-weight: var(--font-weight-regular);

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

@ -14,8 +14,36 @@
--font-weight-bold: 700;
/* 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',
Arial, sans-serif;
Arial, sans-serif; */
--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 { plugins } from './src/config/svelte.js'
import { plugins } from './src/config/vite.js'
import examples from 'mdsvexamples/vite'
import sveld from './docs/plugins/sveld.js'
import Generator from './src/plugins/generator/index.js'