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

Run pnpm format

Browse Source
This commit is contained in:
venashial 2022-05-20 00:10:45 -07:00
parent 0f6263d82e
commit d37fd6bea0
58 changed files with 653 additions and 687 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
.eslintrc.cjs
View File

@ -1,20 +1,20 @@
module.exports = {
root: true,
parser: '@typescript-eslint/parser',
extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
plugins: ['svelte3', '@typescript-eslint'],
ignorePatterns: ['*.cjs'],
overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
settings: {
'svelte3/typescript': () => require('typescript')
},
parserOptions: {
sourceType: 'module',
ecmaVersion: 2020
},
env: {
browser: true,
es2017: true,
node: true
}
root: true,
parser: '@typescript-eslint/parser',
extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
plugins: ['svelte3', '@typescript-eslint'],
ignorePatterns: ['*.cjs'],
overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
settings: {
'svelte3/typescript': () => require('typescript'),
},
parserOptions: {
sourceType: 'module',
ecmaVersion: 2020,
},
env: {
browser: true,
es2017: true,
node: true,
},
};

26
.github/workflows/deploy.yml vendored
View File

@ -3,16 +3,16 @@ name: Deploy
on: push
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- name: Wait for CF Pages
id: cf-pages
uses: WalshyDev/cf-pages-await@v1
with:
accountEmail: ${{ secrets.CF_ACCOUNT_EMAIL }}
apiKey: ${{ secrets.CF_API_KEY }}
accountId: '9ddae624c98677d68d93df6e524a6061'
project: 'omorphia'
githubToken: ${{ secrets.GITHUB_TOKEN }}
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- name: Wait for CF Pages
id: cf-pages
uses: WalshyDev/cf-pages-await@v1
with:
accountEmail: ${{ secrets.CF_ACCOUNT_EMAIL }}
apiKey: ${{ secrets.CF_API_KEY }}
accountId: '9ddae624c98677d68d93df6e524a6061'
project: 'omorphia'
githubToken: ${{ secrets.GITHUB_TOKEN }}

78
.github/workflows/release.yml vendored
View File

@ -1,50 +1,50 @@
name: Release
on:
push:
branches:
- 'main'
push:
branches:
- 'main'
jobs:
release:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v2
release:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v2
- uses: pnpm/action-setup@v2.1.0
with:
version: 6.32.0
- uses: pnpm/action-setup@v2.1.0
with:
version: 6.32.0
- name: Setup Node
uses: actions/setup-node@v2
with:
node-version: '14'
registry-url: 'https://registry.npmjs.org'
- name: Setup Node
uses: actions/setup-node@v2
with:
node-version: '14'
registry-url: 'https://registry.npmjs.org'
- name: Cache pnpm modules
uses: actions/cache@v2
with:
path: ~/.pnpm-store
key: ${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
restore-keys: |
${{ runner.os }}-
- name: Cache pnpm modules
uses: actions/cache@v2
with:
path: ~/.pnpm-store
key: ${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
restore-keys: |
${{ runner.os }}-
- name: Install dependencies
run: pnpm install
- name: Install dependencies
run: pnpm install
- name: Package
run: |
pnpm version patch --commit-hooks false --git-tag-version false
pnpm package
- name: Package
run: |
pnpm version patch --commit-hooks false --git-tag-version false
pnpm package
- name: Publish
run: |
cd package
pnpm publish --no-git-checks --tag alpha
env:
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
- name: Publish
run: |
cd package
pnpm publish --no-git-checks --tag alpha
env:
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
- uses: EndBug/add-and-commit@v9
with:
message: 'Bump package version [skip ci]'
default_author: github_actions
- uses: EndBug/add-and-commit@v9
with:
message: 'Bump package version [skip ci]'
default_author: github_actions

4
.prettierrc
View File

@ -1,5 +1,5 @@
{
"singleQuote": true,
"printWidth": 100,
"singleQuote": true,
"printWidth": 100,
"tabWidth": 4
}

38
mdsvex.config.js
View File

@ -1,28 +1,28 @@
import { defineMDSveXConfig as defineConfig } from 'mdsvex';
import examples from 'mdsvexamples'
import examples from 'mdsvexamples';
const config = defineConfig({
extensions: ['.svelte.md', '.md', '.svx'],
extensions: ['.svelte.md', '.md', '.svx'],
smartypants: {
dashes: 'oldschool',
},
smartypants: {
dashes: 'oldschool',
},
remarkPlugins: [
[
examples,
{
defaults: {
Wrapper: '$routes/_internal/components/Example.svelte'
}
}
]
],
rehypePlugins: [],
remarkPlugins: [
[
examples,
{
defaults: {
Wrapper: '$routes/_internal/components/Example.svelte',
},
},
],
],
rehypePlugins: [],
layout: {
_: "./src/routes/_internal/layout/page.svelte",
}
layout: {
_: './src/routes/_internal/layout/page.svelte',
},
});
export default config;

47
plugins/sveld.js
View File

@ -1,55 +1,58 @@
import {ComponentParser} from 'sveld'
import * as svelte from 'svelte/compiler'
import fs from 'fs/promises'
import path from 'path'
import {preprocess} from "../src/package/config/svelte.config.js";
import { ComponentParser } from 'sveld';
import * as svelte from 'svelte/compiler';
import fs from 'fs/promises';
import path from 'path';
import { preprocess } from '../src/package/config/svelte.config.js';
export default function sveld() {
return {
name: 'vite-plugin-sveld',
async transform(src, id) {
if (id.endsWith('?raw&sveld')) {
const raw = JSON.parse(src.split('export default ')[1])
const raw = JSON.parse(src.split('export default ')[1]);
const data = await parseRaw(raw, id)
const data = await parseRaw(raw, id);
return {
code: `export default ${JSON.stringify(data)}`,
map: null
}
map: null,
};
}
},
// This generates a `COMPONENT_API.json` with sveld in the `/_app` folder on build, which is used by the docs about components (only when built statically)
async buildStart() {
const output = {};
const componentFiles = await fs.readdir(path.resolve('./src/package/components'))
const componentFiles = await fs.readdir(path.resolve('./src/package/components'));
for (const fileName of componentFiles) {
const filePath = path.resolve('./src/package/components', fileName)
const raw = (await fs.readFile(filePath)).toString()
output[fileName] = await parseRaw(raw, filePath)
const filePath = path.resolve('./src/package/components', fileName);
const raw = (await fs.readFile(filePath)).toString();
output[fileName] = await parseRaw(raw, filePath);
}
try {
await fs.mkdir(path.resolve('./src/generated'))
await fs.mkdir(path.resolve('./src/generated'));
} catch {
// Do nothing, directory already exists
}
await fs.writeFile(path.resolve('./src/generated/COMPONENT_API.json'), JSON.stringify(output))
await fs.writeFile(
path.resolve('./src/generated/COMPONENT_API.json'),
JSON.stringify(output)
);
},
}
};
}
async function parseRaw(raw, filePath) {
let { code } = await svelte.preprocess(raw, preprocess, {
filename: filePath
})
filename: filePath,
});
return new ComponentParser({
verbose: false
verbose: false,
}).parseSvelteComponent(code, {
filePath,
moduleName: filePath
})
}
moduleName: filePath,
});
}

2
postcss.config.cjs
View File

@ -1 +1 @@
module.exports = require('./src/package/config/postcss.config.cjs')
module.exports = require('./src/package/config/postcss.config.cjs');

8
src/app.d.ts vendored
View File

@ -4,8 +4,8 @@
// See https://kit.svelte.dev/docs/types#the-app-namespace
// for information about these interfaces
declare namespace App {
// interface Locals {}
// interface Platform {}
// interface Session {}
// interface Stuff {}
// interface Locals {}
// interface Platform {}
// interface Session {}
// interface Stuff {}
}

28
src/app.html
View File

@ -1,19 +1,19 @@
<!DOCTYPE html>
<html lang="en" data-color-mode="light">
<head>
<meta charset="utf-8" />
<meta name="description" content="" />
<link rel="icon" href="%svelte.assets%/assets/omorphia.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<head>
<meta charset="utf-8" />
<meta name="description" content="" />
<link rel="icon" href="%svelte.assets%/assets/omorphia.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#CF1971">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://omorphia.modrinth.com/assets/omorphia.png">
<meta property="og:site_name" content="Modrinth" />
<meta name="theme-color" content="#CF1971" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:image" content="https://omorphia.modrinth.com/assets/omorphia.png" />
<meta property="og:site_name" content="Modrinth" />
%svelte.head%
</head>
<body>
%svelte.body%
</body>
%svelte.head%
</head>
<body>
%svelte.body%
</body>
</html>

2
src/global.d.ts vendored
View File

@ -1 +1 @@
/// <reference types="vite-plugin-sveld" />
/// <reference types="vite-plugin-sveld" />

13
src/package/config/postcss.config.cjs
View File

@ -17,15 +17,16 @@ const config = {
'--xl': '(min-width: 1280px)',
},
},
]
}
}
],
},
},
}),
require('postcss-pxtorem'),
require('autoprefixer'),
process.env.NODE_ENV === 'development' && require('cssnano')({
preset: 'default',
})
process.env.NODE_ENV === 'development' &&
require('cssnano')({
preset: 'default',
}),
],
};

2
src/package/plugins/generator/outputs/landingPage.ts
View File

@ -1,7 +1,5 @@
import { fetch } from 'undici';
import { promises as fs } from 'fs';
import sharp from 'sharp';
import FastAverageColor from 'fast-average-color';
import cliProgress from 'cli-progress';
export async function landingPage(API_URL: string) {

2
src/package/styles.postcss
View File

@ -1,4 +1,4 @@
@import-glob "./styles/normalize.postcss"; /* Doesn't need to glob but fixes warning */
@import-glob "./styles/themes/**.postcss";
@import-glob "./styles/variables/**.postcss";
@import-glob "./styles/classes/**.postcss";
@import-glob "./styles/classes/**.postcss";

2
src/package/styles/classes/actions.postcss
View File

@ -17,4 +17,4 @@
align-items: flex-start;
margin-left: unset;
}
}
}

2
src/package/styles/classes/button-group.postcss
View File

@ -2,4 +2,4 @@
display: flex;
grid-gap: 0.5rem;
flex-wrap: wrap;
}
}

2
src/package/styles/classes/card.postcss
View File

@ -98,4 +98,4 @@
p {
line-height: 130%;
}
}
}

2
src/package/styles/classes/divider.postcss
View File

@ -3,4 +3,4 @@
border: none;
border-top: 1px solid var(--color-divider);
width: 100%;
}
}

4
src/package/styles/classes/illustration.postcss
View File

@ -11,6 +11,6 @@
&__description {
font-size: 1.2rem;
color: var(--color-text-light)
color: var(--color-text-light);
}
}
}

2
src/package/styles/classes/info-table.postcss
View File

@ -8,4 +8,4 @@
color: var(--color-text-lightest);
font-weight: var(--font-weight-medium);
}
}
}

3
src/package/styles/classes/link.postcss
View File

@ -20,7 +20,6 @@
&:hover {
color: var(--color-link);
}
}
}
}

2
src/package/styles/classes/markdown.postcss
View File

@ -134,4 +134,4 @@
margin: 0;
padding: 0;
}
}
}

2
src/package/styles/classes/member.postcss
View File

@ -10,4 +10,4 @@
font-weight: var(--font-weight-medium);
}
}
}
}

2
src/package/styles/classes/tag.postcss
View File

@ -15,4 +15,4 @@
flex-wrap: wrap;
margin-top: auto;
grid-gap: 0.25rem 0.6rem;
}
}

2
src/package/styles/classes/title.postcss
View File

@ -11,4 +11,4 @@
.title-tertiary {
font-size: 16px;
font-weight: var(--font-weight-bold);
}
}

10
src/package/styles/normalize.postcss
View File

@ -55,8 +55,8 @@ ul {
}
.icon {
height: auto;
width: 16px;
min-width: 16px;
aspect-ratio: 1 / 1;
}
height: auto;
width: 16px;
min-width: 16px;
aspect-ratio: 1 / 1;
}

2
src/package/styles/themes/base.postcss
View File

@ -6,7 +6,7 @@
--rounded-max: 999999999px;
--font-standard: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Roboto,
Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
--font-size-nm: 1rem; /* 16px */
--font-size-xl: 1.5rem; /* 24px */

2
src/package/styles/themes/dark.postcss
View File

@ -16,7 +16,7 @@
--shadow-raised-lg: 0px 2px 4px hsla(221, 39%, 11%, 0.2);
--shadow-raised: 0px -2px 4px hsla(221, 39%, 11%, 0.1);
--shadow-floating: hsla(0, 0%, 0%, 0) 0px 0px 0px 0px, hsla(0, 0%, 0%, 0) 0px 0px 0px 0px,
hsla(0, 0%, 0%, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
hsla(0, 0%, 0%, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
--shadow-mobile-bar: hsla(0, 0%, 0%, 0.3) 0 0 20px 2px;
/* Text colors */

2
src/package/styles/themes/light.postcss
View File

@ -16,7 +16,7 @@
--shadow-raised-lg: 0px 2px 4px hsla(221, 39%, 11%, 0.2);
--shadow-raised: 0px 2px 4px hsla(221, 39%, 11%, 0.1);
--shadow-floating: hsla(0, 0%, 0%, 0) 0px 0px 0px 0px, hsla(0, 0%, 0%, 0) 0px 0px 0px 0px,
hsla(0, 0%, 0%, 0.1) 0px 4px 6px -1px, hsla(0, 0%, 0%, 0.1) 0px 2px 4px -1px;
hsla(0, 0%, 0%, 0.1) 0px 4px 6px -1px, hsla(0, 0%, 0%, 0.1) 0px 2px 4px -1px;
--shadow-mobile-bar: hsla(0, 0%, 0%, 0.3) 0 0 20px 2px;
/* Text colors */

28
src/package/styles/variables/borders.postcss
View File

@ -1,16 +1,16 @@
:root {
/* Borders */
--border-width: 1px;
--border-style: solid;
--border: var(--border-width) var(--border-style);
/* Borders */
--border-width: 1px;
--border-style: solid;
--border: var(--border-width) var(--border-style);
/* Rounded radii */
--rounded-sm: 8px;
--rounded: 10px;
--rounded-lg: 12px;
--rounded-max: 100px;
--rounded-top: var(--rounded) var(--rounded) 0 0;
--rounded-bottom: 0 0 var(--rounded) var(--rounded);
--rounded-sm-top: var(--rounded-sm) var(--rounded-sm) 0 0;
--rounded-sm-bottom: 0 0 var(--rounded-sm) var(--rounded-sm);
}
/* Rounded radii */
--rounded-sm: 8px;
--rounded: 10px;
--rounded-lg: 12px;
--rounded-max: 100px;
--rounded-top: var(--rounded) var(--rounded) 0 0;
--rounded-bottom: 0 0 var(--rounded) var(--rounded);
--rounded-sm-top: var(--rounded-sm) var(--rounded-sm) 0 0;
--rounded-sm-bottom: 0 0 var(--rounded-sm) var(--rounded-sm);
}

29
src/package/styles/variables/spacing.postcss
View File

@ -1,7 +1,6 @@
:root {
/* these are values for the display CSS property */
/*
/* these are values for the display CSS property */
/*
--display-values: (
block,
flex,
@ -22,7 +21,7 @@
);
*/
/*
/*
These are our margin and padding utility spacers. The default step size we
use is 8px. This gives us a key of:
0 => 0px
@ -32,18 +31,18 @@
4 => 24px
5 => 32px
6 => 40px */
--spacer: 8px;
--spacer: 8px;
/* Our spacing scale */
--spacer-0: 0; /* 0 */
--spacer-1: calc(var(--spacer) * 0.5); /* 4px */
--spacer-2: --spacer; /* 8px */
--spacer-3: calc(var(--spacer) * 2); /* 16px */
--spacer-4: calc(var(--spacer) * 3); /* 24px */
--spacer-5: calc(var(--spacer) * 4); /* 32px */
--spacer-6: calc(var(--spacer) * 5); /* 40px */
/* Our spacing scale */
--spacer-0: 0; /* 0 */
--spacer-1: calc(var(--spacer) * 0.5); /* 4px */
--spacer-2: --spacer; /* 8px */
--spacer-3: calc(var(--spacer) * 2); /* 16px */
--spacer-4: calc(var(--spacer) * 3); /* 24px */
--spacer-5: calc(var(--spacer) * 4); /* 32px */
--spacer-6: calc(var(--spacer) * 5); /* 40px */
/*
/*
/* The list of spacer values
--spacers: (
--spacer-0,
@ -210,4 +209,4 @@
@custom-media --sm (min-width: 544px);
@custom-media --md (min-width: 768px);
@custom-media --lg (min-width: 1012px);
@custom-media --xl (min-width: 544px);
@custom-media --xl (min-width: 544px);

65
src/package/styles/variables/typography.postcss
View File

@ -1,38 +1,39 @@
:root {
/* Heading sizes - mobile */
/* h4-h6 remain the same size on both mobile & desktop */
--h00-size-mobile: 40px;
--h0-size-mobile: 32px;
--h1-size-mobile: 26px;
--h2-size-mobile: 22px;
--h3-size-mobile: 18px;
/* Heading sizes - mobile */
/* h4-h6 remain the same size on both mobile & desktop */
--h00-size-mobile: 40px;
--h0-size-mobile: 32px;
--h1-size-mobile: 26px;
--h2-size-mobile: 22px;
--h3-size-mobile: 18px;
/* Heading sizes - desktop */
--h00-size: 48px;
--h0-size: 40px;
--h1-size: 32px;
--h2-size: 24px;
--h3-size: 20px;
--h4-size: 16px;
--h5-size: 14px;
--h6-size: 12px;
/* Heading sizes - desktop */
--h00-size: 48px;
--h0-size: 40px;
--h1-size: 32px;
--h2-size: 24px;
--h3-size: 20px;
--h4-size: 16px;
--h5-size: 14px;
--h6-size: 12px;
--font-size-lg: 19px;
--font-size-sm: 13px;
--font-size: 16px;
--font-size-lg: 19px;
--font-size-sm: 13px;
--font-size: 16px;
/* Line heights */
--lh-condensed-ultra: 1;
--lh-condensed: 1.25;
--lh-default: 1.5;
/* Line heights */
--lh-condensed-ultra: 1;
--lh-condensed: 1.25;
--lh-default: 1.5;
/* Font weights */
--font-weight-light: 300;
--font-weight-normal: 400;
--font-weight-semibold: 500;
--font-weight-bold: 600;
/* Font weights */
--font-weight-light: 300;
--font-weight-normal: 400;
--font-weight-semibold: 500;
--font-weight-bold: 600;
/* Font stacks */
--body-font: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
--mono-font: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
}
/* Font stacks */
--body-font: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif,
'Apple Color Emoji', 'Segoe UI Emoji';
--mono-font: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
}

96
src/package/utils/ago.ts
View File

@ -4,54 +4,56 @@
* @see https://stackoverflow.com/a/67338038/938822
*/
export function ago(
/** A Date object, timestamp or string parsable with Date.parse() */
date: string | number | Date,
/** A Date object, timestamp or string parsable with Date.parse() */
nowDate: string | number | Date = Date.now(),
/** A Intl formater */
rft: Intl.RelativeTimeFormat = new Intl.RelativeTimeFormat(undefined, { numeric: 'auto' })
/** A Date object, timestamp or string parsable with Date.parse() */
date: string | number | Date,
/** A Date object, timestamp or string parsable with Date.parse() */
nowDate: string | number | Date = Date.now(),
/** A Intl formater */
rft: Intl.RelativeTimeFormat = new Intl.RelativeTimeFormat(undefined, { numeric: 'auto' })
): string {
const SECOND = 1000;
const MINUTE = 60 * SECOND;
const HOUR = 60 * MINUTE;
const DAY = 24 * HOUR;
const WEEK = 7 * DAY;
const MONTH = 30 * DAY;
const YEAR = 365 * DAY;
const intervals = [
{ ge: YEAR, divisor: YEAR, unit: 'year' },
{ ge: MONTH, divisor: MONTH, unit: 'month' },
{ ge: WEEK, divisor: WEEK, unit: 'week' },
{ ge: DAY, divisor: DAY, unit: 'day' },
{ ge: HOUR, divisor: HOUR, unit: 'hour' },
{ ge: MINUTE, divisor: MINUTE, unit: 'minute' },
{ ge: 30 * SECOND, divisor: SECOND, unit: 'seconds' },
{ ge: 0, divisor: 1, text: 'just now' },
];
const now = typeof nowDate === 'object' ? nowDate.getTime() : new Date(nowDate).getTime();
const diff = now - (typeof date === 'object' ? date : new Date(date)).getTime();
const diffAbs = Math.abs(diff);
for (const interval of intervals) {
if (diffAbs >= interval.ge) {
const x = Math.round(Math.abs(diff) / interval.divisor);
const isFuture = diff < 0;
return interval.unit ? rft.format(isFuture ? x : -x, interval.unit as Unit) : interval.text;
}
}
const SECOND = 1000;
const MINUTE = 60 * SECOND;
const HOUR = 60 * MINUTE;
const DAY = 24 * HOUR;
const WEEK = 7 * DAY;
const MONTH = 30 * DAY;
const YEAR = 365 * DAY;
const intervals = [
{ ge: YEAR, divisor: YEAR, unit: 'year' },
{ ge: MONTH, divisor: MONTH, unit: 'month' },
{ ge: WEEK, divisor: WEEK, unit: 'week' },
{ ge: DAY, divisor: DAY, unit: 'day' },
{ ge: HOUR, divisor: HOUR, unit: 'hour' },
{ ge: MINUTE, divisor: MINUTE, unit: 'minute' },
{ ge: 30 * SECOND, divisor: SECOND, unit: 'seconds' },
{ ge: 0, divisor: 1, text: 'just now' },
];
const now = typeof nowDate === 'object' ? nowDate.getTime() : new Date(nowDate).getTime();
const diff = now - (typeof date === 'object' ? date : new Date(date)).getTime();
const diffAbs = Math.abs(diff);
for (const interval of intervals) {
if (diffAbs >= interval.ge) {
const x = Math.round(Math.abs(diff) / interval.divisor);
const isFuture = diff < 0;
return interval.unit
? rft.format(isFuture ? x : -x, interval.unit as Unit)
: interval.text;
}
}
}
type Unit =
| 'second'
| 'seconds'
| 'minute'
| 'minutes'
| 'hour'
| 'hours'
| 'day'
| 'days'
| 'week'
| 'weeks'
| 'month'
| 'months'
| 'year'
| 'years';
| 'second'
| 'seconds'
| 'minute'
| 'minutes'
| 'hour'
| 'hours'
| 'day'
| 'days'
| 'week'
| 'weeks'
| 'month'
| 'months'
| 'year'
| 'years';

4
src/package/utils/classCombine.ts
View File

@ -1,3 +1,3 @@
export function classCombine(names) {
return names.filter(name => name && !name.includes('undefined')).join(' ')
}
return names.filter((name) => name && !name.includes('undefined')).join(' ');
}

2
src/package/utils/index.ts
View File

@ -1,4 +1,4 @@
export { ago } from './ago';
export { simplify } from './number';
export { Permissions } from './permissions';
export { formatVersions } from './versions';
export { formatVersions } from './versions';

40
src/package/utils/number.ts
View File

@ -1,40 +0,0 @@
/**
* Convert large numbers to human readable strings
* @source https://github.com/rohmanhm/simplify-number
*/
export function simplify(num = 0): string {
let numberVar = num;
// 2 decimal places => 100, 3 => 1000, etc
const decPlaces = Math.pow(10, 1);
// Enumerate number abbreviations
const abbrev = ['K', 'M', 'B', 'T'];
// Go through the array backwards, so we do the largest first
for (let i = abbrev.length - 1; i >= 0; i--) {
// Convert array index to "1000", "1000000", etc
const size = Math.pow(10, (i + 1) * 3);
// If the number is bigger or equal do the abbreviation
if (size <= numberVar) {
// Here, we multiply by decPlaces, round, and then divide by decPlaces.
// This gives us nice rounding to a particular decimal place.
numberVar = Math.round((numberVar * decPlaces) / size) / decPlaces;
// Handle special case where we round up to the next abbreviation
if (numberVar === 1000 && i < abbrev.length - 1) {
numberVar = 1;
i++;
}
// Add the letter for the abbreviation
(numberVar as any) += abbrev[i];
// We are done... stop
break;
}
}
return String(numberVar);
}

216
src/package/utils/parse.ts
View File

@ -5,130 +5,130 @@ import insane from 'insane';
const renderer = new marked.Renderer();
renderer.image = (href, text) => {
if (/^https?:\/\/(www\.)?youtube\.com\/watch\?v=[a-zA-Z0-9_]{11}$/.test(href)) {
const id = href.substring(32, 43);
return `<iframe src="https://www.youtube-nocookie.com/embed/${id}?&modestbranding=1&autoplay=0&rel=0" frameborder="0" allowfullscreen></iframe>`;
} else {
return `<img src="${href}" alt="${text}" />`;
}
if (/^https?:\/\/(www\.)?youtube\.com\/watch\?v=[a-zA-Z0-9_]{11}$/.test(href)) {
const id = href.substring(32, 43);
return `<iframe src="https://www.youtube-nocookie.com/embed/${id}?&modestbranding=1&autoplay=0&rel=0" frameborder="0" allowfullscreen></iframe>`;
} else {
return `<img src="${href}" alt="${text}" />`;
}
};
renderer.link = (href, title, text) => {
if (href === null) {
return text;
}
let out = '<a href="' + href + '" rel="external nofollow"';
if (title) {
out += ' title="' + title + '"';
}
out += '>' + text + '</a>';
return out;
if (href === null) {
return text;
}
let out = '<a href="' + href + '" rel="external nofollow"';
if (title) {
out += ' title="' + title + '"';
}
out += '>' + text + '</a>';
return out;
};
marked.setOptions({
renderer,
highlight: function (code, lang) {
const language = hljs.getLanguage(lang) ? lang : 'plaintext';
return hljs.highlight(code, { language }).value;
},
langPrefix: 'hljs language-',
headerPrefix: '',
gfm: true,
smartLists: true,
renderer,
highlight: function (code, lang) {
const language = hljs.getLanguage(lang) ? lang : 'plaintext';
return hljs.highlight(code, { language }).value;
},
langPrefix: 'hljs language-',
headerPrefix: '',
gfm: true,
smartLists: true,
});
function sanitize(html: string): string {
return insane(html, {
allowedAttributes: {
a: ['href', 'name', 'target', 'title', 'rel'],
iframe: ['allowfullscreen', 'src', 'width', 'height'],
img: ['src', 'width', 'height', 'alt'],
h1: ['id'],
h2: ['id'],
h3: ['id'],
h4: ['id'],
h5: ['id'],
h6: ['id'],
code: ['class'],
span: ['class'],
input: ['type', 'checked', 'disabled'],
font: ['color'],
},
allowedClasses: {},
allowedSchemes: ['http', 'https', 'mailto'],
allowedTags: [
'a',
'b',
'blockquote',
'br',
'caption',
'center',
'code',
'del',
'details',
'div',
'em',
'font',
'h1',
'h2',
'h3',
'h4',
'h5',
'h6',
'hr',
'i',
'iframe',
'img',
'input',
'ins',
'kbd',
'li',
'main',
'ol',
'p',
'pre',
'span',
'strike',
'strong',
'sub',
'summary',
'sup',
'table',
'tbody',
'td',
'th',
'thead',
'tr',
'u',
'ul',
],
filter: ({ tag, attrs }): boolean => {
if (tag === 'iframe') {
return /^https?:\/\/(www\.)?(youtube|youtube-nocookie)\.com\/embed\/[a-zA-Z0-9_]{11}(\?)?(&modestbranding=1)?(&autoplay=0)?(&loop=1)?(&playlist=[a-zA-Z0-9_]{11})?(&rel=0)?$/.test(
attrs.src || ''
);
} else if (['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(tag)) {
return attrs.id !== 'svelte';
} else if (tag === 'input') {
return attrs.type === 'checkbox' && attrs.disabled === '';
} else if (tag === 'code' || tag === 'span') {
return !attrs.class || attrs.class.replace(' ', '').startsWith('hljs');
} else {
return true;
}
},
transformText: null,
});
return insane(html, {
allowedAttributes: {
a: ['href', 'name', 'target', 'title', 'rel'],
iframe: ['allowfullscreen', 'src', 'width', 'height'],
img: ['src', 'width', 'height', 'alt'],
h1: ['id'],
h2: ['id'],
h3: ['id'],
h4: ['id'],
h5: ['id'],
h6: ['id'],
code: ['class'],
span: ['class'],
input: ['type', 'checked', 'disabled'],
font: ['color'],
},
allowedClasses: {},
allowedSchemes: ['http', 'https', 'mailto'],
allowedTags: [
'a',
'b',
'blockquote',
'br',
'caption',
'center',
'code',
'del',
'details',
'div',
'em',
'font',
'h1',
'h2',
'h3',
'h4',
'h5',
'h6',
'hr',
'i',
'iframe',
'img',
'input',
'ins',
'kbd',
'li',
'main',
'ol',
'p',
'pre',
'span',
'strike',
'strong',
'sub',
'summary',
'sup',
'table',
'tbody',
'td',
'th',
'thead',
'tr',
'u',
'ul',
],
filter: ({ tag, attrs }): boolean => {
if (tag === 'iframe') {
return /^https?:\/\/(www\.)?(youtube|youtube-nocookie)\.com\/embed\/[a-zA-Z0-9_]{11}(\?)?(&modestbranding=1)?(&autoplay=0)?(&loop=1)?(&playlist=[a-zA-Z0-9_]{11})?(&rel=0)?$/.test(
attrs.src || ''
);
} else if (['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(tag)) {
return attrs.id !== 'svelte';
} else if (tag === 'input') {
return attrs.type === 'checkbox' && attrs.disabled === '';
} else if (tag === 'code' || tag === 'span') {
return !attrs.class || attrs.class.replace(' ', '').startsWith('hljs');
} else {
return true;
}
},
transformText: null,
});
}
export function markdown(markdown: string): string {
return marked.parse(markdown);
return marked.parse(markdown);
}
export function markdownInline(markdown: string): string {
return marked.parseInline(markdown);
return marked.parseInline(markdown);
}
export function markdownXSS(markdown: string): string {
return sanitize(marked.parse(markdown));
return sanitize(marked.parse(markdown));
}

68
src/package/utils/permissions.ts
View File

@ -1,38 +1,38 @@
export class Permissions {
data = {
uploadVersions: false,
deleteVersion: false,
editDetails: false,
editBody: false,
manageInvites: false,
removeMember: false,
editMember: false,
deleteProject: false,
};
data = {
uploadVersions: false,
deleteVersion: false,
editDetails: false,
editBody: false,
manageInvites: false,
removeMember: false,
editMember: false,
deleteProject: false,
};
get settingsPage(): boolean {
return (
this.data.manageInvites ||
this.data.removeMember ||
this.data.editMember ||
this.data.deleteProject
);
}
get settingsPage(): boolean {
return (
this.data.manageInvites ||
this.data.removeMember ||
this.data.editMember ||
this.data.deleteProject
);
}
constructor(from: number | 'ALL' | null) {
if (from === 'ALL' || from === 0b11111111 || from === null) {
Object.keys(this.data).forEach((v) => (this.data[v] = true));
} else if (typeof from === 'number') {
this.data = {
uploadVersions: !!(from & (1 << 0)),
deleteVersion: !!(from & (1 << 1)),
editDetails: !!(from & (1 << 2)),
editBody: !!(from & (1 << 3)),
manageInvites: !!(from & (1 << 4)),
removeMember: !!(from & (1 << 5)),
editMember: !!(from & (1 << 6)),
deleteProject: !!(from & (1 << 7)),
};
}
}
constructor(from: number | 'ALL' | null) {
if (from === 'ALL' || from === 0b11111111 || from === null) {
Object.keys(this.data).forEach((v) => (this.data[v] = true));
} else if (typeof from === 'number') {
this.data = {
uploadVersions: !!(from & (1 << 0)),
deleteVersion: !!(from & (1 << 1)),
editDetails: !!(from & (1 << 2)),
editBody: !!(from & (1 << 3)),
manageInvites: !!(from & (1 << 4)),
removeMember: !!(from & (1 << 5)),
editMember: !!(from & (1 << 6)),
deleteProject: !!(from & (1 << 7)),
};
}
}
}

2
src/package/utils/uniqueId.ts
View File

@ -3,4 +3,4 @@ let idCounter = 0;
export function uniqueId(prefix = ''): string {
const id = ++idCounter;
return prefix + id;
}
}

131
src/package/utils/versions.ts
View File

@ -1,84 +1,87 @@
import gameVersions from '$generated/gameVersions.json';
export function formatVersions(versionArray: string[]): string {
const allVersions = gameVersions.slice().reverse();
const allReleases = allVersions.filter((x) => x.version_type === 'release');
const allVersions = gameVersions.slice().reverse();
const allReleases = allVersions.filter((x) => x.version_type === 'release');
const intervals = [];
let currentInterval = 0;
const intervals = [];
let currentInterval = 0;
for (let i = 0; i < versionArray.length; i++) {
const index = allVersions.findIndex((x) => x.version === versionArray[i]);
const releaseIndex = allReleases.findIndex((x) => x.version === versionArray[i]);
for (let i = 0; i < versionArray.length; i++) {
const index = allVersions.findIndex((x) => x.version === versionArray[i]);
const releaseIndex = allReleases.findIndex((x) => x.version === versionArray[i]);
if (i === 0) {
intervals.push([[versionArray[i], index, releaseIndex]]);
} else {
const intervalBase = intervals[currentInterval];
if (i === 0) {
intervals.push([[versionArray[i], index, releaseIndex]]);
} else {
const intervalBase = intervals[currentInterval];
if (
(index - intervalBase[intervalBase.length - 1][1] === 1 ||
releaseIndex - intervalBase[intervalBase.length - 1][2] === 1) &&
(allVersions[intervalBase[0][1]].version_type === 'release' ||
allVersions[index].version_type !== 'release')
) {
intervalBase[1] = [versionArray[i], index, releaseIndex];
} else {
currentInterval += 1;
intervals[currentInterval] = [[versionArray[i], index, releaseIndex]];
}
}
}
if (
(index - intervalBase[intervalBase.length - 1][1] === 1 ||
releaseIndex - intervalBase[intervalBase.length - 1][2] === 1) &&
(allVersions[intervalBase[0][1]].version_type === 'release' ||
allVersions[index].version_type !== 'release')
) {
intervalBase[1] = [versionArray[i], index, releaseIndex];
} else {
currentInterval += 1;
intervals[currentInterval] = [[versionArray[i], index, releaseIndex]];
}
}
}
const newIntervals = [];
for (let i = 0; i < intervals.length; i++) {
const interval = intervals[i];
const newIntervals = [];
for (let i = 0; i < intervals.length; i++) {
const interval = intervals[i];
if (interval.length === 2 && interval[0][2] !== -1 && interval[1][2] === -1) {
let lastSnapshot = null;
for (let j = interval[1][1]; j > interval[0][1]; j--) {
if (allVersions[j].version_type === 'release') {
newIntervals.push([
interval[0],
[
allVersions[j].version,
j,
allReleases.findIndex((x) => x.version === allVersions[j].version),
],
]);
if (interval.length === 2 && interval[0][2] !== -1 && interval[1][2] === -1) {
let lastSnapshot = null;
for (let j = interval[1][1]; j > interval[0][1]; j--) {
if (allVersions[j].version_type === 'release') {
newIntervals.push([
interval[0],
[
allVersions[j].version,
j,
allReleases.findIndex((x) => x.version === allVersions[j].version),
],
]);
if (lastSnapshot !== null && lastSnapshot !== j + 1) {
newIntervals.push([[allVersions[lastSnapshot].version, lastSnapshot, -1], interval[1]]);
} else {
newIntervals.push([interval[1]]);
}
if (lastSnapshot !== null && lastSnapshot !== j + 1) {
newIntervals.push([
[allVersions[lastSnapshot].version, lastSnapshot, -1],
interval[1],
]);
} else {
newIntervals.push([interval[1]]);
}
break;
} else {
lastSnapshot = j;
}
}
} else {
newIntervals.push(interval);
}
}
break;
} else {
lastSnapshot = j;
}
}
} else {
newIntervals.push(interval);
}
}
const output = [];
const output = [];
for (const interval of newIntervals) {
if (interval.length === 2) {
output.push(`${interval[0][0]}—${interval[1][0]}`);
} else {
output.push(interval[0][0]);
}
}
for (const interval of newIntervals) {
if (interval.length === 2) {
output.push(`${interval[0][0]}—${interval[1][0]}`);
} else {
output.push(interval[0][0]);
}
}
return output.join(', ');
return output.join(', ');
}
export const getPrimary = (files: Version['files']) =>
files.find((file) => file.primary) || files[0];
files.find((file) => file.primary) || files[0];
export function downloadUrl(file): string {
return import.meta.env.VITE_API_URL + `version_file/${file?.hashes.sha1}/download`;
return import.meta.env.VITE_API_URL + `version_file/${file?.hashes.sha1}/download`;
}

1
src/routes/_internal/components/Sidebar.svelte
View File

@ -28,6 +28,7 @@ import { page } from '$app/stores';
<a href="/getting-started/css" class="section__link">Writing CSS</a>
<a href="/getting-started/illustrations" class="section__link">Illustrations</a>
<a href="/getting-started/utils" class="section__link">Built-in utilities</a>
<a href="/getting-started/generator" class="section__link">Generator plugin</a>
</div>
<div class="section">

14
src/routes/_internal/styles/gh-markdown.postcss
View File

@ -27,12 +27,14 @@
position: relative;
}
&:where(h2:first-child, h1:first-child, h1:first-child + h2, h3:first-child, h4:first-child, h5:first-child, h6:first-child) {
&:where(h2:first-child, h1:first-child, h1:first-child
+ h2, h3:first-child, h4:first-child, h5:first-child, h6:first-child) {
margin-top: 0;
padding-top: 0;
}
&:where(h1:hover a.anchor, h2:hover a.anchor, h3:hover a.anchor, h4:hover a.anchor, h5:hover a.anchor, h6:hover a.anchor) {
&:where(h1:hover a.anchor, h2:hover a.anchor, h3:hover a.anchor, h4:hover a.anchor, h5:hover
a.anchor, h6:hover a.anchor) {
text-decoration: none;
}
@ -119,12 +121,14 @@
padding-top: 0;
}
&:where(body > h3:first-child, body > h4:first-child, body > h5:first-child, body > h6:first-child) {
&:where(body > h3:first-child, body > h4:first-child, body > h5:first-child, body
> h6:first-child) {
margin-top: 0;
padding-top: 0;
}
&:where(a:first-child h1, a:first-child h2, a:first-child h3, a:first-child h4, a:first-child h5, a:first-child h6) {
&:where(a:first-child h1, a:first-child h2, a:first-child h3, a:first-child h4, a:first-child
h5, a:first-child h6) {
margin-top: 0;
padding-top: 0;
}
@ -383,4 +387,4 @@
&:where(p) {
line-height: 1.5;
}
}
}

231
src/routes/_internal/styles/prism-one-dark.css
View File

@ -28,77 +28,77 @@
* --syntax-cursor-line: hsla(220, 100%, 80%, 0.04);
*/
code[class*="language-"],
pre[class*="language-"] {
background: hsl(220, 13%, 18%);
color: hsl(220, 14%, 71%);
text-shadow: 0 1px rgba(0, 0, 0, 0.3);
font-family: "Fira Code", "Fira Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;
direction: ltr;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
line-height: 1.5;
-moz-tab-size: 2;
-o-tab-size: 2;
tab-size: 2;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
code[class*='language-'],
pre[class*='language-'] {
background: hsl(220, 13%, 18%);
color: hsl(220, 14%, 71%);
text-shadow: 0 1px rgba(0, 0, 0, 0.3);
font-family: 'Fira Code', 'Fira Mono', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
direction: ltr;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
line-height: 1.5;
-moz-tab-size: 2;
-o-tab-size: 2;
tab-size: 2;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
/* Selection */
code[class*="language-"]::-moz-selection,
code[class*="language-"] *::-moz-selection,
pre[class*="language-"] *::-moz-selection {
background: hsl(220, 13%, 28%);
color: inherit;
text-shadow: none;
code[class*='language-']::-moz-selection,
code[class*='language-'] *::-moz-selection,
pre[class*='language-'] *::-moz-selection {
background: hsl(220, 13%, 28%);
color: inherit;
text-shadow: none;
}
code[class*="language-"]::selection,
code[class*="language-"] *::selection,
pre[class*="language-"] *::selection {
background: hsl(220, 13%, 28%);
color: inherit;
text-shadow: none;
code[class*='language-']::selection,
code[class*='language-'] *::selection,
pre[class*='language-'] *::selection {
background: hsl(220, 13%, 28%);
color: inherit;
text-shadow: none;
}
/* Code blocks */
pre[class*="language-"] {
padding: 16px;
margin: 0.5em 0;
overflow: auto;
border-radius: var(--rounded);
pre[class*='language-'] {
padding: 16px;
margin: 0.5em 0;
overflow: auto;
border-radius: var(--rounded);
}
/* Inline code */
:not(pre) > code[class*="language-"] {
padding: 0.2em 0.3em;
border-radius: 0.3em;
white-space: normal;
:not(pre) > code[class*='language-'] {
padding: 0.2em 0.3em;
border-radius: 0.3em;
white-space: normal;
}
/* Print */
@media print {
code[class*="language-"],
pre[class*="language-"] {
text-shadow: none;
}
code[class*='language-'],
pre[class*='language-'] {
text-shadow: none;
}
}
.token.comment,
.token.prolog,
.token.cdata {
color: hsl(220, 10%, 40%);
color: hsl(220, 10%, 40%);
}
.token.doctype,
.token.punctuation,
.token.entity {
color: hsl(220, 14%, 71%);
color: hsl(220, 14%, 71%);
}
.token.attr-name,
@ -107,11 +107,11 @@ pre[class*="language-"] {
.token.constant,
.token.number,
.token.atrule {
color: hsl(29, 54%, 61%);
color: hsl(29, 54%, 61%);
}
.token.keyword {
color: hsl(286, 60%, 67%);
color: hsl(286, 60%, 67%);
}
.token.property,
@ -119,8 +119,8 @@ pre[class*="language-"] {
.token.symbol,
.token.deleted,
.token.important {
color: hsl(355, 65%, 65%) !important;
display: unset;
color: hsl(355, 65%, 65%) !important;
display: unset;
}
.token.selector,
@ -131,123 +131,126 @@ pre[class*="language-"] {
.token.regex,
.token.attr-value,
.token.attr-value > .token.punctuation {
color: hsl(95, 38%, 62%);
color: hsl(95, 38%, 62%);
}
.token.variable,
.token.operator,
.token.function {
color: hsl(207, 82%, 66%);
color: hsl(207, 82%, 66%);
}
.token.url {
color: hsl(187, 47%, 55%);
color: hsl(187, 47%, 55%);
}
/* HTML overrides */
.token.attr-value > .token.punctuation.attr-equals,
.token.special-attr > .token.attr-value > .token.value.css {
color: hsl(220, 14%, 71%);
color: hsl(220, 14%, 71%);
}
/* CSS overrides */
.language-css .token.selector {
color: hsl(355, 65%, 65%);
color: hsl(355, 65%, 65%);
}
.language-css .token.property {
color: hsl(220, 14%, 71%);
color: hsl(220, 14%, 71%);
}
.language-css .token.function,
.language-css .token.url > .token.function {
color: hsl(187, 47%, 55%);
color: hsl(187, 47%, 55%);
}
.language-css .token.url > .token.string.url {
color: hsl(95, 38%, 62%);
color: hsl(95, 38%, 62%);
}
.language-css .token.important,
.language-css .token.atrule .token.rule {
color: hsl(286, 60%, 67%);
color: hsl(286, 60%, 67%);
}
/* JS overrides */
.language-javascript .token.operator {
color: hsl(286, 60%, 67%);
color: hsl(286, 60%, 67%);
}
.language-javascript .token.template-string > .token.interpolation > .token.interpolation-punctuation.punctuation {
color: hsl(5, 48%, 51%);
.language-javascript
.token.template-string
> .token.interpolation
> .token.interpolation-punctuation.punctuation {
color: hsl(5, 48%, 51%);
}
/* JSON overrides */
.language-json .token.operator {
color: hsl(220, 14%, 71%);
color: hsl(220, 14%, 71%);
}
.language-json .token.null.keyword {
color: hsl(29, 54%, 61%);
color: hsl(29, 54%, 61%);
}
/* MD overrides */
.language-markdown .token.url,
.language-markdown .token.url > .token.operator,
.language-markdown .token.url-reference.url > .token.string {
color: hsl(220, 14%, 71%);
color: hsl(220, 14%, 71%);
}
.language-markdown .token.url > .token.content {
color: hsl(207, 82%, 66%);
color: hsl(207, 82%, 66%);
}
.language-markdown .token.url > .token.url,
.language-markdown .token.url-reference.url {
color: hsl(187, 47%, 55%);
color: hsl(187, 47%, 55%);
}
.language-markdown .token.blockquote.punctuation,
.language-markdown .token.hr.punctuation {
color: hsl(220, 10%, 40%);
font-style: italic;
color: hsl(220, 10%, 40%);
font-style: italic;
}
.language-markdown .token.code-snippet {
color: hsl(95, 38%, 62%);
color: hsl(95, 38%, 62%);
}
.language-markdown .token.bold .token.content {
color: hsl(29, 54%, 61%);
color: hsl(29, 54%, 61%);
}
.language-markdown .token.italic .token.content {
color: hsl(286, 60%, 67%);
color: hsl(286, 60%, 67%);
}
.language-markdown .token.strike .token.content,
.language-markdown .token.strike .token.punctuation,
.language-markdown .token.list.punctuation,
.language-markdown .token.title.important > .token.punctuation {
color: hsl(355, 65%, 65%);
color: hsl(355, 65%, 65%);
}
/* General */
.token.bold {
font-weight: bold;
font-weight: bold;
}
.token.comment,
.token.italic {
font-style: italic;
font-style: italic;
}
.token.entity {
cursor: help;
cursor: help;
}
.token.namespace {
opacity: 0.8;
opacity: 0.8;
}
/* Plugin overrides */
@ -258,24 +261,24 @@ pre[class*="language-"] {
.token.token.cr:before,
.token.token.lf:before,
.token.token.space:before {
color: hsla(220, 14%, 71%, 0.15);
text-shadow: none;
color: hsla(220, 14%, 71%, 0.15);
text-shadow: none;
}
/* Toolbar plugin overrides */
/* Space out all buttons and move them away from the right edge of the code block */
div.code-toolbar > .toolbar.toolbar > .toolbar-item {
margin-right: 0.4em;
margin-right: 0.4em;
}
/* Styling the buttons */
div.code-toolbar > .toolbar.toolbar > .toolbar-item > button,
div.code-toolbar > .toolbar.toolbar > .toolbar-item > a,
div.code-toolbar > .toolbar.toolbar > .toolbar-item > span {
background: hsl(220, 13%, 26%);
color: hsl(220, 9%, 55%);
padding: 0.1em 0.4em;
border-radius: 0.3em;
background: hsl(220, 13%, 26%);
color: hsl(220, 9%, 55%);
padding: 0.1em 0.4em;
border-radius: 0.3em;
}
div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:hover,
@ -284,43 +287,43 @@ div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:hover,
div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:focus,
div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:hover,
div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:focus {
background: hsl(220, 13%, 28%);
color: hsl(220, 14%, 71%);
background: hsl(220, 13%, 28%);
color: hsl(220, 14%, 71%);
}
/* Line Highlight plugin overrides */
/* The highlighted line itself */
.line-highlight.line-highlight {
background: hsla(220, 100%, 80%, 0.04);
background: hsla(220, 100%, 80%, 0.04);
}
/* Default line numbers in Line Highlight plugin */
.line-highlight.line-highlight:before,
.line-highlight.line-highlight[data-end]:after {
background: hsl(220, 13%, 26%);
color: hsl(220, 14%, 71%);
padding: 0.1em 0.6em;
border-radius: 0.3em;
box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2); /* same as Toolbar plugin default */
background: hsl(220, 13%, 26%);
color: hsl(220, 14%, 71%);
padding: 0.1em 0.6em;
border-radius: 0.3em;
box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2); /* same as Toolbar plugin default */
}
/* Hovering over a linkable line number (in the gutter area) */
/* Requires Line Numbers plugin as well */
pre[id].linkable-line-numbers.linkable-line-numbers span.line-numbers-rows > span:hover:before {
background-color: hsla(220, 100%, 80%, 0.04);
background-color: hsla(220, 100%, 80%, 0.04);
}
/* Line Numbers and Command Line plugins overrides */
/* Line separating gutter from coding area */
.line-numbers.line-numbers .line-numbers-rows,
.command-line .command-line-prompt {
border-right-color: hsla(220, 14%, 71%, 0.15);
border-right-color: hsla(220, 14%, 71%, 0.15);
}
/* Stuff in the gutter */
.line-numbers .line-numbers-rows > span:before,
.command-line .command-line-prompt > span:before {
color: hsl(220, 14%, 45%);
color: hsl(220, 14%, 45%);
}
/* Match Braces plugin overrides */
@ -328,65 +331,65 @@ pre[id].linkable-line-numbers.linkable-line-numbers span.line-numbers-rows > spa
.rainbow-braces .token.token.punctuation.brace-level-1,
.rainbow-braces .token.token.punctuation.brace-level-5,
.rainbow-braces .token.token.punctuation.brace-level-9 {
color: hsl(355, 65%, 65%);
color: hsl(355, 65%, 65%);
}
.rainbow-braces .token.token.punctuation.brace-level-2,
.rainbow-braces .token.token.punctuation.brace-level-6,
.rainbow-braces .token.token.punctuation.brace-level-10 {
color: hsl(95, 38%, 62%);
color: hsl(95, 38%, 62%);
}
.rainbow-braces .token.token.punctuation.brace-level-3,
.rainbow-braces .token.token.punctuation.brace-level-7,
.rainbow-braces .token.token.punctuation.brace-level-11 {
color: hsl(207, 82%, 66%);
color: hsl(207, 82%, 66%);
}
.rainbow-braces .token.token.punctuation.brace-level-4,
.rainbow-braces .token.token.punctuation.brace-level-8,
.rainbow-braces .token.token.punctuation.brace-level-12 {
color: hsl(286, 60%, 67%);
color: hsl(286, 60%, 67%);
}
/* Diff Highlight plugin overrides */
/* Taken from https://github.com/atom/github/blob/master/styles/variables.less */
pre.diff-highlight > code .token.token.deleted:not(.prefix),
pre > code.diff-highlight .token.token.deleted:not(.prefix) {
background-color: hsla(353, 100%, 66%, 0.15);
background-color: hsla(353, 100%, 66%, 0.15);
}
pre.diff-highlight > code .token.token.deleted:not(.prefix)::-moz-selection,
pre.diff-highlight > code .token.token.deleted:not(.prefix) *::-moz-selection,
pre > code.diff-highlight .token.token.deleted:not(.prefix)::-moz-selection,
pre > code.diff-highlight .token.token.deleted:not(.prefix) *::-moz-selection {
background-color: hsla(353, 95%, 66%, 0.25);
background-color: hsla(353, 95%, 66%, 0.25);
}
pre.diff-highlight > code .token.token.deleted:not(.prefix)::selection,
pre.diff-highlight > code .token.token.deleted:not(.prefix) *::selection,
pre > code.diff-highlight .token.token.deleted:not(.prefix)::selection,
pre > code.diff-highlight .token.token.deleted:not(.prefix) *::selection {
background-color: hsla(353, 95%, 66%, 0.25);
background-color: hsla(353, 95%, 66%, 0.25);
}
pre.diff-highlight > code .token.token.inserted:not(.prefix),
pre > code.diff-highlight .token.token.inserted:not(.prefix) {
background-color: hsla(137, 100%, 55%, 0.15);
background-color: hsla(137, 100%, 55%, 0.15);
}
pre.diff-highlight > code .token.token.inserted:not(.prefix)::-moz-selection,
pre.diff-highlight > code .token.token.inserted:not(.prefix) *::-moz-selection,
pre > code.diff-highlight .token.token.inserted:not(.prefix)::-moz-selection,
pre > code.diff-highlight .token.token.inserted:not(.prefix) *::-moz-selection {
background-color: hsla(135, 73%, 55%, 0.25);
background-color: hsla(135, 73%, 55%, 0.25);
}
pre.diff-highlight > code .token.token.inserted:not(.prefix)::selection,
pre.diff-highlight > code .token.token.inserted:not(.prefix) *::selection,
pre > code.diff-highlight .token.token.inserted:not(.prefix)::selection,
pre > code.diff-highlight .token.token.inserted:not(.prefix) *::selection {
background-color: hsla(135, 73%, 55%, 0.25);
background-color: hsla(135, 73%, 55%, 0.25);
}
/* Previewers plugin overrides */
@ -394,48 +397,48 @@ pre > code.diff-highlight .token.token.inserted:not(.prefix) *::selection {
/* Border around popup */
.prism-previewer.prism-previewer:before,
.prism-previewer-gradient.prism-previewer-gradient div {
border-color: hsl(224, 13%, 17%);
border-color: hsl(224, 13%, 17%);
}
/* Angle and time should remain as circles and are hence not included */
.prism-previewer-color.prism-previewer-color:before,
.prism-previewer-gradient.prism-previewer-gradient div,
.prism-previewer-easing.prism-previewer-easing:before {
border-radius: 0.3em;
border-radius: 0.3em;
}
/* Triangles pointing to the code */
.prism-previewer.prism-previewer:after {
border-top-color: hsl(224, 13%, 17%);
border-top-color: hsl(224, 13%, 17%);
}
.prism-previewer-flipped.prism-previewer-flipped.after {
border-bottom-color: hsl(224, 13%, 17%);
border-bottom-color: hsl(224, 13%, 17%);
}
/* Background colour within the popup */
.prism-previewer-angle.prism-previewer-angle:before,
.prism-previewer-time.prism-previewer-time:before,
.prism-previewer-easing.prism-previewer-easing {
background: hsl(219, 13%, 22%);
background: hsl(219, 13%, 22%);
}
/* For angle, this is the positive area (eg. 90deg will display one quadrant in this colour) */
/* For time, this is the alternate colour */
.prism-previewer-angle.prism-previewer-angle circle,
.prism-previewer-time.prism-previewer-time circle {
stroke: hsl(220, 14%, 71%);
stroke-opacity: 1;
stroke: hsl(220, 14%, 71%);
stroke-opacity: 1;
}
/* Stroke colours of the handle, direction point, and vector itself */
.prism-previewer-easing.prism-previewer-easing circle,
.prism-previewer-easing.prism-previewer-easing path,
.prism-previewer-easing.prism-previewer-easing line {
stroke: hsl(220, 14%, 71%);
stroke: hsl(220, 14%, 71%);
}
/* Fill colour of the handle */
.prism-previewer-easing.prism-previewer-easing circle {
fill: transparent;
fill: transparent;
}

2
src/routes/classes/InfoTable.md
View File

@ -7,4 +7,4 @@
<span class="info-table__label">Visibilty</span>
<span>Approved</span>
</div>
```
```

2
src/routes/classes/Link.md
View File

@ -19,4 +19,4 @@
<a class="link" href="#source"><IconCode /> Source</a>
<a class="link" href="#wiki"><IconWiki /> Wiki</a>
</div>
```
```

2
src/routes/components/Badge.md
View File

@ -7,4 +7,4 @@
<Badge color="yellow" label="Squash" />
<Badge color="green" label="Lettuce" />
<Badge label="Onion" />
```
```

6
src/routes/components/CheckboxList.md
View File

@ -4,11 +4,11 @@
import IconSquare from 'virtual:icons/lucide/square'
import IconCircle from 'virtual:icons/lucide/circle'
import IconTriangle from 'virtual:icons/lucide/triangle'
let selected = []
</script>
<CheckboxList
<CheckboxList
bind:value={selected}
options={[
{
@ -26,7 +26,7 @@
icon: IconSquare,
value: 'SQU',
},
]}
]}
/>
Selected: {selected}

6
src/routes/components/CheckboxVirtualList.md
View File

@ -3,18 +3,18 @@
import { CheckboxVirtualList } from "omorphia";
import IconStar from 'virtual:icons/heroicons-outline/star'
import { uniqueId } from 'omorphia/utils/uniqueId'
let options = Array(100).fill({})
.map(option => ({
label: 'Star-' + uniqueId(),
icon: IconStar,
value: uniqueId(),
}))
let selected = ['2', '6']
</script>
<CheckboxVirtualList
<CheckboxVirtualList
bind:value={selected}
{options}
/>

1
src/routes/components/Chips.md
View File

@ -17,7 +17,6 @@
/>
```
### Force an option to be selected with `neverEmpty`
```svelte example raised

2
src/routes/components/NavRow.md
View File

@ -23,4 +23,4 @@
]}>
Click for fun
</NavRow>
```
```

2
src/routes/components/Pagination.md
View File

@ -6,4 +6,4 @@ Use pagination to show a set of page numbers and navigation directions to move t
</script>
<Pagination page={20} count={50} />
```
```

6
src/routes/components/Select.md
View File

@ -1,19 +1,19 @@
```svelte example raised
<script lang="ts">
import { Select } from "omorphia";
let sortMethod = "downloads"
</script>
<Select
color="raised"
color="raised"
options={[
{ value: "", label: "Relevance" },
{ value: "downloads", label: "Downloads" },
{ value: "follows", label: "Followers" },
{ value: "newest", label: "Recently created" },
{ value: "updated", label: "Recently updated" },
]}
]}
bind:value={sortMethod}
/>
```

2
src/routes/components/Slider.md
View File

@ -1,4 +1,4 @@
```svelte example
```svelte example raised
<script lang="ts">
import { Slider } from "omorphia";
</script>

16
src/routes/getting-started/configure.md
View File

@ -4,24 +4,20 @@ title: Configure
To make use of the built-in icons, styles, and plugins in omorphia, you will need to update your project's config files.
## SvelteKit
## SvelteKit
Add the following parts to your `svelte.config.js` file:
```js
import { preprocess, plugins } from 'omorphia/config/svelte.config'
import { preprocess, plugins } from 'omorphia/config/svelte.config';
/** @type {import('@sveltejs/kit').Config} */
const config = {
preprocess: [
preprocess,
],
preprocess: [preprocess],
kit: {
vite: {
plugins: [
...plugins,
],
plugins: [...plugins],
},
},
};
@ -36,5 +32,5 @@ Create a `postcss.config.cjs` file in the root of your project.
Add the following line to that file:
```js
module.exports = require('omorphia/config/postcss.config.cjs')
```
module.exports = require('omorphia/config/postcss.config.cjs');
```

4
src/routes/getting-started/css.md
View File

@ -4,8 +4,8 @@ title: Writing CSS
TODO
Use `px` measurements.
Use `px` measurements.
Use `hsl` for colors.
Use `margin-inline` (x) and `margin-block` (y). Use `inline` & `block` for `padding` too.
Use `margin-inline` (x) and `margin-block` (y). Use `inline` & `block` for `padding` too.

2
src/routes/getting-started/illustrations.md
View File

@ -18,4 +18,4 @@ Import the SVG in the `<script>` of your svelte file, and treat the illustration
</script>
<NoData />
```
```

8
src/routes/getting-started/utils.md
View File

@ -12,10 +12,10 @@ TODO
### Parsers
- sanitize
- markdown
- markdownInline
- markdownXSS
- sanitize
- markdown
- markdownInline
- markdownXSS
### Markdown

2
src/routes/index.md
View File

@ -38,4 +38,4 @@ For more information on each component, check out the pages on the sidebar navig
### Using icons and styles
Follow the guides on the sidebar to learn how to use [icons](/getting-started/icons) and general concepts.
Follow the guides on the sidebar to learn how to use [icons](/getting-started/icons) and general concepts.

23
svelte.config.js
View File

@ -1,19 +1,16 @@
import {mdsvex} from 'mdsvex';
import { mdsvex } from 'mdsvex';
import mdsvexConfig from './mdsvex.config.js';
import adapter from '@sveltejs/adapter-static';
import examples from 'mdsvexamples/vite'
import sveld from './plugins/sveld.js'
import path from "path";
import { preprocess, plugins } from './src/package/config/svelte.config.js'
import examples from 'mdsvexamples/vite';
import sveld from './plugins/sveld.js';
import path from 'path';
import { preprocess, plugins } from './src/package/config/svelte.config.js';
/** @type {import('@sveltejs/kit').Config} */
const config = {
extensions: ['.svelte', ...mdsvexConfig.extensions],
preprocess: [
preprocess,
mdsvex(mdsvexConfig),
],
preprocess: [preprocess, mdsvex(mdsvexConfig)],
kit: {
adapter: adapter(),
@ -38,13 +35,13 @@ const config = {
build: {
rollupOptions: {
external: '/_app/COMPONENT_API.json'
}
}
external: '/_app/COMPONENT_API.json',
},
},
},
files: {
lib: 'src/package',
}
},
},
};