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

docs: add mobile support + seo

Browse Source
This commit is contained in:
venashial 2022-03-30 18:36:13 -07:00
parent 59b3cfee66
commit baef94f14a
13 changed files with 223 additions and 140 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -14,5 +14,5 @@ jobs:
accountEmail: ${{ secrets.CF_ACCOUNT_EMAIL }}
apiKey: ${{ secrets.CF_API_KEY }}
accountId: '9ddae624c98677d68d93df6e524a6061'
project: 'knossos'
project: 'omorphia'
githubToken: ${{ secrets.GITHUB_TOKEN }}

8
postcss.config.cjs
View File

@ -5,7 +5,13 @@ const config = {
require('postcss-strip-inline-comments'),
require('postcss-extend-rule'),
require('postcss-nested'),
require('postcss-preset-env'),
require('postcss-preset-env')({
features: {
'custom-media-queries': {
importFrom: './src/lib/styles/variables/queries.postcss'
}
}
}),
require('postcss-pxtorem'),
require('autoprefixer'),
process.env.NODE_ENV === 'development' && require('cssnano')({

6
src/app.html
View File

@ -5,6 +5,12 @@
<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" />
%svelte.head%
</head>
<body>

13
src/lib/components/CheckboxVirtualList.svelte
View File

@ -43,16 +43,3 @@
</Checkbox>
</div>
</VirtualList>
<style lang="postcss">
.checkbox-list {
display: flex;
flex-direction: column;
&.wrap {
flex-direction: row;
flex-wrap: wrap;
grid-gap: 2rem;
}
}
</style>

4
src/lib/styles/variables/queries.postcss Normal file
View File

@ -0,0 +1,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);

1
src/lib/styles/variables/spacing.postcss
View File

@ -1,4 +1,5 @@
:root {
/* these are values for the display CSS property */
/*
--display-values: (

45
src/routes/__layout.svelte
View File

@ -6,11 +6,13 @@
import Header from './_internal/components/Header.svelte'
</script>
<div class="app">
<div class="app theme-light">
<Header/>
<Sidebar/>
<main class="app__content">
<slot/>
<article>
<slot />
</article>
</main>
</div>
@ -24,43 +26,36 @@
margin: 0;
font-size: var(--body-font-size);
font-family: var(--body-font);
--accent-color: hsl(331, 80%, 45%);
--accent-color-transparent: hsla(331, 80%, 45%, 0.15);
}
}
.app {
display: grid;
display: flex;
flex-direction: column;
min-height: 100vh;
overflow: hidden;
--sidebar-width: 325px;
--header-height: 56px;
@media (width <= 500px) {
display: flex;
flex-direction: column;
}
background-color: var(--color-bg);
--sidebar-width: 275px;
&__content {
padding: var(--header-height) 0 0 var(--sidebar-width);
@media (--md) {
padding-left: var(--sidebar-width);
}
overflow-x: hidden;
overflow-y: auto;
background-color: hsl(220, 13%, 91%);
:global {
a:not(.example__preview *) {
color: var(--accent-color);
article {
max-width: 800px;
padding-block: 140px 64px;
padding-inline: 24px;
&:hover {
text-decoration: underline;
}
}
h1:not(.example__preview *) {
font-size: 54px;
}
p:not(.example__preview *) {
line-height: 1.5;
@media (--sm) {
padding-inline: 48px;
padding-block: 140px 24px;
}
}
}

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

@ -36,6 +36,7 @@
flex-wrap: wrap;
position: relative;
justify-content: flex-start;
z-index: 1;
&__options {
position: absolute;

46
src/routes/_internal/components/Header.svelte
View File

@ -21,15 +21,19 @@
</script>
<header class="header" bind:this={headerElement}>
<OmorphiaLogo height="32px" width="32px"/>
<OmorphiaLogo class="header__logo"/>
<div class="header__title">Omorphia</div>
<div class="header__links">
<a href="https://modrinth.com">Modrinth.com</a>
<span class="spacer-dot"></span>
<a class="hide-sm" href="https://modrinth.com">Modrinth.com</a>
<span class="spacer-dot hide-sm"></span>
<a href="https://www.npmjs.com/package/omorphia">NPM</a>
<span class="spacer-dot"></span>
<a href="https://rewrite.modrinth.com/discord"><IconChat /></a>
<a href="https://github.com/modrinth/omorphia"><IconLogoGithub /></a>
<a href="https://rewrite.modrinth.com/discord">
<IconChat/>
</a>
<a href="https://github.com/modrinth/omorphia">
<IconLogoGithub/>
</a>
</div>
</header>
@ -39,7 +43,8 @@
display: flex;
grid-gap: 10px;
align-items: center;
padding: 0 32px;
flex-wrap: wrap;
padding: 16px 24px;
position: fixed;
height: var(--header-height);
left: 0;
@ -50,6 +55,16 @@
box-shadow: hsla(221, 39%, 11%, 0.2) 0 2px 4px 0, hsla(221, 39%, 11%, 0.05) 0 -2px 2px 0 inset;
transition: top 0.3s ease-in-out;
@media (--sm) {
padding: 10px 32px;
}
:global(&__logo) {
max-width: 32px;
min-width: 32px;
aspect-ratio: 1 / 1;
}
&__title {
font-size: 20px;
font-weight: 600;
@ -57,17 +72,30 @@
&__links {
margin-left: auto;
display: flex;
grid-gap: 16px;
align-items: center;
justify-content: center;
display: flex;
:global(svg) {
height: 22px;
width: auto;
}
a:not(:hover) {
color: unset;
.hide-sm {
display: none;
@media (--sm) {
display: flex;
}
}
a {
text-decoration: none;
&:not(:hover) {
color: unset;
}
}
}
}

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

@ -1,4 +1,6 @@
<script lang="ts">
import IconMenu from 'virtual:icons/lucide/menu'
const components = Object.keys(import.meta.glob('../../components/**'))
.map(it => it.replace('../../components/', '').replace('.md', ''))
.sort();
@ -6,9 +8,11 @@
const classes = Object.keys(import.meta.glob('../../classes/**'))
.map(it => it.replace('../../classes/', '').replace('.md', ''))
.sort();
let slideIn = false
</script>
<nav class="sidebar">
<nav class="sidebar" class:slideIn>
<div class="section">
<span class="section__title">Getting started</span>
<a href="/" class="section__link">Introduction</a>
@ -30,21 +34,38 @@
<a href="/classes/{page}" class="section__link">{page}</a>
{/each}
</div>
<button class="sidebar__toggle" on:click={() => slideIn = !slideIn}><IconMenu /></button>
</nav>
<style lang="postcss">
:root {
--sidebar-color: hsl(220, 15%, 40%);
}
.sidebar {
display: flex;
flex-direction: column;
grid-gap: 2rem;
background-color: hsl(220, 15%, 40%);
background-color: var(--sidebar-color);
color: hsl(216, 10%, 80%);
padding: 5.5rem 2rem 2rem;
height: 100vh;
width: calc(var(--sidebar-width) - 3rem);
max-height: 100vh;
overflow-y: auto;
width: var(--sidebar-width);
max-width: 70vw;
position: fixed;
left: 0;
left: -100%;
top: 0;
z-index: 5;
padding: 88px 32px 32px;
transition: left 0.2s ease-in-out;
box-shadow: 2px 0px 4px hsla(221, 39%, 11%, 0.2);
@media (--md) {
left: 0;
}
.section {
display: flex;
@ -66,5 +87,36 @@
}
}
}
&__toggle {
position: fixed;
left: 16px;
bottom: 16px;
padding: 8px;
aspect-ratio: 1 / 1;
background-color: var(--accent-color);
z-index: 20;
border-radius: var(--rounded);
color: white;
box-shadow: var(--shadow-inset-sm), var(--shadow-floating);
transition: left 0.2s cubic-bezier(.38,.52,.37,1.27);
:global(.icon) {
width: 32px;
height: auto;
}
@media (--md) {
visibility: hidden;
}
}
&.slideIn {
left: 0;
.sidebar__toggle {
left: calc(32px + min(70vw, var(--sidebar-width)))
}
}
}
</style>

148
src/routes/_internal/layout/page.svelte
View File

@ -5,8 +5,9 @@
export let fileName = $page.url.pathname.substring($page.url.pathname.lastIndexOf('/') + 1).replace('.html', '')
export let title = ''
if (!title) title = fileName
export let title = fileName
export let description = 'Learn about Omorphia, the component & style library'
let editUrl = `https://github.com/modrinth/omorphia/edit/main/src/routes/${$page.url.pathname.replace('/', '') || 'index'}.md`
@ -21,91 +22,86 @@
</script>
<svelte:head>
<title>{title ? `${title} - Omorphia` : 'Omorphia'}</title>
<title>{title ? `${title} • Omorphia` : 'Omorphia'}</title>
<meta name="description" content={description} />
</svelte:head>
<article>
{#if title}<h1>{title}</h1>{/if}
<a class="edit-link" href={editUrl}>
<IconPencil/>
Edit this page on GitHub</a>
<slot/>
{#if title}<h1>{title}</h1>{/if}
<a class="edit-link" href={editUrl}>
<IconPencil/>
Edit this page on GitHub</a>
<slot/>
{#if api}
<div class="extra-info">
{#if api.props.length > 0}
<h2>Properties</h2>
<table class="api-table">
<thead>
{#if api}
<div class="extra-info">
{#if api.props.length > 0}
<h2>Properties</h2>
<table class="api-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
{#each api.props as prop}
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
<td><code>{prop.name}</code></td>
<td><code>{prop.type ?? ''}</code></td>
<td><code>{prop.value ?? ''}</code></td>
<td>{prop.constant ? '[Read only] ' : ''}{prop.description?.replace('null', '') || ''}</td>
</tr>
</thead>
<tbody>
{#each api.props as prop}
<tr>
<td><code>{prop.name}</code></td>
<td><code>{prop.type ?? ''}</code></td>
<td><code>{prop.value ?? ''}</code></td>
<td>{prop.constant ? '[Read only] ' : ''}{prop.description?.replace('null', '') || ''}</td>
</tr>
{/each}
</tbody>
</table>
{/if}
{#if api.events.length > 0}
<h2>Events</h2>
<table class="api-table">
<thead>
{/each}
</tbody>
</table>
{/if}
{#if api.events.length > 0}
<h2>Events</h2>
<table class="api-table">
<thead>
<tr>
<th>Name</th>
<th>Forwarded</th>
<th>Description</th>
</tr>
</thead>
<tbody>
{#each api.events as event}
<tr>
<th>Name</th>
<th>Forwarded</th>
<th>Description</th>
<td><code>{event.name}</code></td>
<td>{!!event.parent}</td>
<td>{event.description?.replace('null', '') || ''}</td>
</tr>
</thead>
<tbody>
{#each api.events as event}
<tr>
<td><code>{event.name}</code></td>
<td>{!!event.parent}</td>
<td>{event.description?.replace('null', '') || ''}</td>
</tr>
{/each}
</tbody>
</table>
{/if}
{#if api.slots.length > 0}
<h2>Slots</h2>
<table class="api-table">
<thead>
{/each}
</tbody>
</table>
{/if}
{#if api.slots.length > 0}
<h2>Slots</h2>
<table class="api-table">
<thead>
<tr>
<th>Name</th>
<th>Fallback</th>
</tr>
</thead>
<tbody>
{#each api.slots as slot}
<tr>
<th>Name</th>
<th>Fallback</th>
<td><code>{slot.name}</code></td>
<td>{slot.fallback ?? 'None'}</td>
</tr>
</thead>
<tbody>
{#each api.slots as slot}
<tr>
<td><code>{slot.name}</code></td>
<td>{slot.fallback ?? 'None'}</td>
</tr>
{/each}
</tbody>
</table>
{/if}
</div>
{/if}
</article>
{/each}
</tbody>
</table>
{/if}
</div>
{/if}
<style lang="postcss">
article {
max-width: 800px;
padding: 5rem 1rem;
}
.edit-link {
display: flex;
align-items: center;

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

@ -61,8 +61,13 @@
}
&:where(h1) {
font-size: 28px;
font-size: 40px;
color: black;
font-weight: 600;
@media (--md) {
font-size: 54px;
}
}
&:where(h2) {
@ -356,12 +361,6 @@
border: none;
}
&:where(/* Custom styles */
h1) {
font-weight: 600;
}
&:where(h2) {
font-weight: 500;
}
@ -374,10 +373,14 @@
}
&:where(a) {
color: var(--accent-color)
color: var(--accent-color);
&:hover {
text-decoration: underline;
}
}
&:where(p) {
line-height: 150%;
line-height: 1.5;
}
}

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

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