mirror of
https://github.com/LukeHagar/sveltesociety.dev.git
synced 2025-12-09 12:47:44 +00:00
Run prettier
This commit is contained in:
MacFJA
@@ -1,5 +1,5 @@
|
|||||||
/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
|
/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
|
||||||
module.exports = {
|
module.exports = {
|
||||||
preset: 'ts-jest',
|
preset: 'ts-jest',
|
||||||
testEnvironment: 'node',
|
testEnvironment: 'node'
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -1,83 +1,83 @@
|
|||||||
<script>
|
<script>
|
||||||
export const primary = false;
|
export const primary = false;
|
||||||
export let active = false;
|
export let active = false;
|
||||||
export let small = false
|
export let small = false;
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
|
||||||
div {
|
|
||||||
font-size: 1rem;
|
|
||||||
border: 2px solid var(--dark-gray);
|
|
||||||
border-radius: 3px;
|
|
||||||
background-color: white;
|
|
||||||
color: var(--dark-gray);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 13.5px var(--s-2);
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
div.small {
|
|
||||||
font-size: var(--font-100);
|
|
||||||
}
|
|
||||||
div:hover {
|
|
||||||
cursor: pointer;
|
|
||||||
border-color: var(--secondary);
|
|
||||||
color: var(--secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.arrow {
|
|
||||||
margin-left: 25px;
|
|
||||||
height: 16px;
|
|
||||||
-webkit-mask: url(/images/right-arrow.svg) no-repeat center;
|
|
||||||
mask: url(/images/right-arrow.svg) no-repeat center;
|
|
||||||
background-color: var(--dark-gray);
|
|
||||||
}
|
|
||||||
div:hover .arrow {
|
|
||||||
background-color: var(--secondary);
|
|
||||||
}
|
|
||||||
.arrow.active {
|
|
||||||
background-color: var(--dark-gray);
|
|
||||||
}
|
|
||||||
|
|
||||||
.popin {
|
|
||||||
min-width: 250px;
|
|
||||||
width: 100%;
|
|
||||||
font-size: var(--font-100);
|
|
||||||
display: none;
|
|
||||||
position: absolute;
|
|
||||||
left: var(--s-4);
|
|
||||||
top: 100%;
|
|
||||||
z-index: 100;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
border: 2px solid var(--secondary);
|
|
||||||
border-radius: 5px;
|
|
||||||
background: white;
|
|
||||||
}
|
|
||||||
div:hover .popin:not(:empty) {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
span {
|
|
||||||
font-size: 0.875rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
@media screen and (min-width: 700px) {
|
|
||||||
.popin {
|
|
||||||
left: 95%;
|
|
||||||
top: var(--s-4);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<span>
|
<span>
|
||||||
Package Manager
|
Package Manager
|
||||||
<div on:click class:small>
|
<div on:click class:small>
|
||||||
<span>
|
<span>
|
||||||
<slot />
|
<slot />
|
||||||
</span>
|
</span>
|
||||||
<div class="arrow" class:active />
|
<div class="arrow" class:active />
|
||||||
<section class="popin"><slot name="menu"></slot></section>
|
<section class="popin"><slot name="menu" /></section>
|
||||||
</div>
|
</div>
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
font-size: 1rem;
|
||||||
|
border: 2px solid var(--dark-gray);
|
||||||
|
border-radius: 3px;
|
||||||
|
background-color: white;
|
||||||
|
color: var(--dark-gray);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 13.5px var(--s-2);
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
div.small {
|
||||||
|
font-size: var(--font-100);
|
||||||
|
}
|
||||||
|
div:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
border-color: var(--secondary);
|
||||||
|
color: var(--secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow {
|
||||||
|
margin-left: 25px;
|
||||||
|
height: 16px;
|
||||||
|
-webkit-mask: url(/images/right-arrow.svg) no-repeat center;
|
||||||
|
mask: url(/images/right-arrow.svg) no-repeat center;
|
||||||
|
background-color: var(--dark-gray);
|
||||||
|
}
|
||||||
|
div:hover .arrow {
|
||||||
|
background-color: var(--secondary);
|
||||||
|
}
|
||||||
|
.arrow.active {
|
||||||
|
background-color: var(--dark-gray);
|
||||||
|
}
|
||||||
|
|
||||||
|
.popin {
|
||||||
|
min-width: 250px;
|
||||||
|
width: 100%;
|
||||||
|
font-size: var(--font-100);
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
left: var(--s-4);
|
||||||
|
top: 100%;
|
||||||
|
z-index: 100;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
border: 2px solid var(--secondary);
|
||||||
|
border-radius: 5px;
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
div:hover .popin:not(:empty) {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 700px) {
|
||||||
|
.popin {
|
||||||
|
left: 95%;
|
||||||
|
top: var(--s-4);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@@ -1,17 +1,17 @@
|
|||||||
<script>
|
<script>
|
||||||
import Tag from "../Tag.svelte";
|
import Tag from '../Tag.svelte';
|
||||||
export let active = false;
|
export let active = false;
|
||||||
export let title = "";
|
export let title = '';
|
||||||
export let description = "";
|
export let description = '';
|
||||||
export let tags = [];
|
export let tags = [];
|
||||||
export let stars;
|
export let stars;
|
||||||
export let addedOn = new Date();
|
export let addedOn = new Date();
|
||||||
export let url = "";
|
export let url = '';
|
||||||
export let npm = "";
|
export let npm = '';
|
||||||
export let repo = "";
|
export let repo = '';
|
||||||
export let manager = "npm"
|
export let manager = 'npm';
|
||||||
|
|
||||||
let clipboardCopy = false
|
let clipboardCopy = false;
|
||||||
const copyToClipboard = (text) => {
|
const copyToClipboard = (text) => {
|
||||||
navigator.clipboard
|
navigator.clipboard
|
||||||
.writeText(text)
|
.writeText(text)
|
||||||
@@ -22,90 +22,94 @@
|
|||||||
.catch(() => alert('Clipboard copy Permission denied'));
|
.catch(() => alert('Clipboard copy Permission denied'));
|
||||||
};
|
};
|
||||||
|
|
||||||
const packageManagers = {
|
const packageManagers = {
|
||||||
'npm': "npm install",
|
npm: 'npm install',
|
||||||
"pnpm": "pnpm add",
|
pnpm: 'pnpm add',
|
||||||
"yarn": "yarn add"
|
yarn: 'yarn add'
|
||||||
}
|
};
|
||||||
|
|
||||||
const cleanupNpm = (npm) => {
|
const cleanupNpm = (npm) => {
|
||||||
return npm.replace('https://www.npmjs.com/package/', '')
|
return npm.replace('https://www.npmjs.com/package/', '');
|
||||||
}
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
|
||||||
.card {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
max-width: var(--width-card);
|
|
||||||
padding: 14px;
|
|
||||||
background: #f3f6f9;
|
|
||||||
border-radius: 5px;
|
|
||||||
}
|
|
||||||
.card h3 {
|
|
||||||
word-break: none;
|
|
||||||
font-size: var(--font-300);
|
|
||||||
}
|
|
||||||
.active,
|
|
||||||
.card:hover {
|
|
||||||
background: #e8f3fe;
|
|
||||||
}
|
|
||||||
.card__tags {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
.card__bottom {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
.card__bottom > * {
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flex-grow {
|
|
||||||
flex-grow: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: 400px) {
|
|
||||||
.card {
|
|
||||||
font-size: 0.9rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card h3 {
|
|
||||||
font-size: 24px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<div class="card" class:active id="component-{escape(title)}">
|
<div class="card" class:active id="component-{escape(title)}">
|
||||||
<h3>
|
<h3>
|
||||||
<a href="#component-{escape(title)}">#</a> <a href={url}>{title}</a>
|
<a href="#component-{escape(title)}">#</a> <a href={url}>{title}</a>
|
||||||
{#if npm}<Tag click={() => copyToClipboard(`${packageManagers[manager]}l ${cleanupNpm(npm)}`)} variant="copy" title={clipboardCopy ? 'copied!' : `${packageManagers[manager]} ${cleanupNpm(npm)}`}/>{/if}
|
{#if npm}<Tag
|
||||||
</h3>
|
click={() => copyToClipboard(`${packageManagers[manager]}l ${cleanupNpm(npm)}`)}
|
||||||
<p class="flex-grow">{description}</p>
|
variant="copy"
|
||||||
<div class="card__tags">
|
title={clipboardCopy ? 'copied!' : `${packageManagers[manager]} ${cleanupNpm(npm)}`}
|
||||||
{#each tags as tag}
|
/>{/if}
|
||||||
<Tag title={tag} variant='blue' />
|
</h3>
|
||||||
{/each}
|
<p class="flex-grow">{description}</p>
|
||||||
</div>
|
<div class="card__tags">
|
||||||
{#if typeof stars !== 'undefined'}
|
{#each tags as tag}
|
||||||
<div class="card__bottom">
|
<Tag title={tag} variant="blue" />
|
||||||
<div>
|
{/each}
|
||||||
{#if (repo || url).includes('github')}
|
</div>
|
||||||
<img style="display:inline" src="/images/github_logo.svg" alt="github logo" />
|
{#if typeof stars !== 'undefined'}
|
||||||
{:else if (repo || url).includes('gitlab')}
|
<div class="card__bottom">
|
||||||
<img style="display:inline" src="/images/gitlab_logo.svg" alt="gitlab logo" />
|
<div>
|
||||||
<!-- {:else} -->
|
{#if (repo || url).includes('github')}
|
||||||
{/if}
|
<img style="display:inline" src="/images/github_logo.svg" alt="github logo" />
|
||||||
</div>
|
{:else if (repo || url).includes('gitlab')}
|
||||||
<div>
|
<img style="display:inline" src="/images/gitlab_logo.svg" alt="gitlab logo" />
|
||||||
★
|
<!-- {:else} -->
|
||||||
<code>{stars}</code>
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
<!-- commenting out dates just cause it is not very updated yet - all the cards show same date. put back in when we have better scraping -->
|
<div>
|
||||||
<!-- <datetime value={addedOn}>{new Intl.DateTimeFormat('en-Us').format(Date.parse(addedOn))}</datetime> -->
|
★
|
||||||
</div>
|
<code>{stars}</code>
|
||||||
{/if}
|
</div>
|
||||||
|
<!-- commenting out dates just cause it is not very updated yet - all the cards show same date. put back in when we have better scraping -->
|
||||||
|
<!-- <datetime value={addedOn}>{new Intl.DateTimeFormat('en-Us').format(Date.parse(addedOn))}</datetime> -->
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.card {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
max-width: var(--width-card);
|
||||||
|
padding: 14px;
|
||||||
|
background: #f3f6f9;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
.card h3 {
|
||||||
|
word-break: none;
|
||||||
|
font-size: var(--font-300);
|
||||||
|
}
|
||||||
|
.active,
|
||||||
|
.card:hover {
|
||||||
|
background: #e8f3fe;
|
||||||
|
}
|
||||||
|
.card__tags {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
.card__bottom {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.card__bottom > * {
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex-grow {
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 400px) {
|
||||||
|
.card {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card h3 {
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@@ -1,43 +1,43 @@
|
|||||||
<script>
|
<script>
|
||||||
export let title;
|
export let title;
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
|
||||||
h1 {
|
|
||||||
font-family: Overpass;
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 600;
|
|
||||||
line-height: 150%;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
@apply text-4xl;
|
|
||||||
}
|
|
||||||
.grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(3, 1fr);
|
|
||||||
grid-gap: 25px;
|
|
||||||
}
|
|
||||||
.list {
|
|
||||||
margin-bottom: 5rem;
|
|
||||||
}
|
|
||||||
@media screen and (max-width: 1024px) {
|
|
||||||
.grid {
|
|
||||||
max-width: calc(var(--width-card) * 2 + 25px);
|
|
||||||
grid-template-columns: repeat(2, 1fr);
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media screen and (max-width: 700px) {
|
|
||||||
.grid {
|
|
||||||
max-width: var(--width-card);
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<div class="list">
|
<div class="list">
|
||||||
<h1 id="category-{escape(title)}">{title} <a href="#category-{escape(title)}">#</a></h1>
|
<h1 id="category-{escape(title)}">{title} <a href="#category-{escape(title)}">#</a></h1>
|
||||||
<div class="grid">
|
<div class="grid">
|
||||||
<slot />
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
h1 {
|
||||||
|
font-family: Overpass;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: 150%;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
@apply text-4xl;
|
||||||
|
}
|
||||||
|
.grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
grid-gap: 25px;
|
||||||
|
}
|
||||||
|
.list {
|
||||||
|
margin-bottom: 5rem;
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 1024px) {
|
||||||
|
.grid {
|
||||||
|
max-width: calc(var(--width-card) * 2 + 25px);
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 700px) {
|
||||||
|
.grid {
|
||||||
|
max-width: var(--width-card);
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@@ -11,7 +11,6 @@
|
|||||||
let formattedDate = rawDate.toDateString();
|
let formattedDate = rawDate.toDateString();
|
||||||
return formattedDate;
|
return formattedDate;
|
||||||
}
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<figure class="event-tile">
|
<figure class="event-tile">
|
||||||
@@ -29,9 +28,9 @@
|
|||||||
</figure>
|
</figure>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
h2 {
|
h2 {
|
||||||
font-size: var(--font-300);
|
font-size: var(--font-300);
|
||||||
}
|
}
|
||||||
.event-tile {
|
.event-tile {
|
||||||
--tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
--tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
|
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
|
||||||
@@ -40,9 +39,9 @@
|
|||||||
margin-top: 3rem;
|
margin-top: 3rem;
|
||||||
border-radius: 0.5rem;
|
border-radius: 0.5rem;
|
||||||
background: var(--white);
|
background: var(--white);
|
||||||
display: grid;
|
display: grid;
|
||||||
gap: var(--s-2);
|
gap: var(--s-2);
|
||||||
justify-items: flex-start;
|
justify-items: flex-start;
|
||||||
}
|
}
|
||||||
.event-tile:hover {
|
.event-tile:hover {
|
||||||
filter: brightness(1.1);
|
filter: brightness(1.1);
|
||||||
@@ -76,5 +75,4 @@
|
|||||||
var(--tw-shadow);
|
var(--tw-shadow);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,213 +1,211 @@
|
|||||||
<script>
|
<script>
|
||||||
export let name;
|
export let name;
|
||||||
export let width = "24px";
|
export let width = '24px';
|
||||||
export let height = "24px";
|
export let height = '24px';
|
||||||
let icons = [
|
let icons = [
|
||||||
{
|
{
|
||||||
box: "24 24",
|
box: '24 24',
|
||||||
name: "archive",
|
name: 'archive',
|
||||||
svg: `<path
|
svg: `<path
|
||||||
d="M3 10h18v10.004c0 .55-.445.996-.993.996H3.993A.994.994 0 0 1 3 20.004V10zm6 2v2h6v-2H9zM2 4c0-.552.455-1 .992-1h18.016c.548 0 .992.444.992 1v4H2V4z"
|
d="M3 10h18v10.004c0 .55-.445.996-.993.996H3.993A.994.994 0 0 1 3 20.004V10zm6 2v2h6v-2H9zM2 4c0-.552.455-1 .992-1h18.016c.548 0 .992.444.992 1v4H2V4z"
|
||||||
fill="currentColor"
|
fill="currentColor"
|
||||||
/>`,
|
/>`
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
box: "24 24",
|
box: '24 24',
|
||||||
name: "bug",
|
name: 'bug',
|
||||||
svg: `<path
|
svg: `<path
|
||||||
d="M6.056 8.3a7.01 7.01 0 0 1 .199-.3h11.49c.069.098.135.199.199.3l2.02-1.166l1 1.732l-2.213 1.278c.162.59.249 1.213.249 1.856v1h3v2h-3a6.96 6.96 0 0 1-.536 2.69l2.5 1.444l-1 1.732l-2.526-1.458A6.992 6.992 0 0 1 13 21.929V14h-2v7.93a6.992 6.992 0 0 1-4.438-2.522l-2.526 1.458l-1-1.732l2.5-1.443A6.979 6.979 0 0 1 5 15H2v-2h3v-1c0-.643.087-1.265.249-1.856L3.036 8.866l1-1.732L6.056 8.3zM8 6a4 4 0 1 1 8 0H8z"
|
d="M6.056 8.3a7.01 7.01 0 0 1 .199-.3h11.49c.069.098.135.199.199.3l2.02-1.166l1 1.732l-2.213 1.278c.162.59.249 1.213.249 1.856v1h3v2h-3a6.96 6.96 0 0 1-.536 2.69l2.5 1.444l-1 1.732l-2.526-1.458A6.992 6.992 0 0 1 13 21.929V14h-2v7.93a6.992 6.992 0 0 1-4.438-2.522l-2.526 1.458l-1-1.732l2.5-1.443A6.979 6.979 0 0 1 5 15H2v-2h3v-1c0-.643.087-1.265.249-1.856L3.036 8.866l1-1.732L6.056 8.3zM8 6a4 4 0 1 1 8 0H8z"
|
||||||
fill="currentColor"
|
fill="currentColor"
|
||||||
/>`,
|
/>`
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
box: "24 24",
|
box: '24 24',
|
||||||
name: "calendar",
|
name: 'calendar',
|
||||||
svg: `<path
|
svg: `<path
|
||||||
d="M17 3h4a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h4V1h2v2h6V1h2v2zm3 6V5h-3v2h-2V5H9v2H7V5H4v4h16zm0 2H4v8h16v-8zM6 13h5v4H6v-4z"
|
d="M17 3h4a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h4V1h2v2h6V1h2v2zm3 6V5h-3v2h-2V5H9v2H7V5H4v4h16zm0 2H4v8h16v-8zM6 13h5v4H6v-4z"
|
||||||
fill="currentColor"
|
fill="currentColor"
|
||||||
/>`,
|
/>`
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
box: "24 24",
|
box: '24 24',
|
||||||
name: "code",
|
name: 'code',
|
||||||
svg: `<path
|
svg: `<path
|
||||||
d="M24 12l-5.657 5.657l-1.414-1.414L21.172 12l-4.243-4.243l1.414-1.414L24 12zM2.828 12l4.243 4.243l-1.414 1.414L0 12l5.657-5.657L7.07 7.757L2.828 12zm6.96 9H7.66l6.552-18h2.128L9.788 21z"
|
d="M24 12l-5.657 5.657l-1.414-1.414L21.172 12l-4.243-4.243l1.414-1.414L24 12zM2.828 12l4.243 4.243l-1.414 1.414L0 12l5.657-5.657L7.07 7.757L2.828 12zm6.96 9H7.66l6.552-18h2.128L9.788 21z"
|
||||||
fill="currentColor"
|
fill="currentColor"
|
||||||
/>`,
|
/>`
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
box: "24 24",
|
box: '24 24',
|
||||||
name: "close",
|
name: 'close',
|
||||||
svg: `<path
|
svg: `<path
|
||||||
d="M12 10.586l4.95-4.95l1.414 1.414l-4.95 4.95l4.95 4.95l-1.414 1.414l-4.95-4.95l-4.95 4.95l-1.414-1.414l4.95-4.95l-4.95-4.95L7.05 5.636z"
|
d="M12 10.586l4.95-4.95l1.414 1.414l-4.95 4.95l4.95 4.95l-1.414 1.414l-4.95-4.95l-4.95 4.95l-1.414-1.414l4.95-4.95l-4.95-4.95L7.05 5.636z"
|
||||||
fill="currentColor"
|
fill="currentColor"
|
||||||
/>`,
|
/>`
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
box: "24 24",
|
box: '24 24',
|
||||||
name: "database",
|
name: 'database',
|
||||||
svg: `<path
|
svg: `<path
|
||||||
d="M21 9.5v3c0 2.485-4.03 4.5-9 4.5s-9-2.015-9-4.5v-3c0 2.485 4.03 4.5 9 4.5s9-2.015 9-4.5zm-18 5c0 2.485 4.03 4.5 9 4.5s9-2.015 9-4.5v3c0 2.485-4.03 4.5-9 4.5s-9-2.015-9-4.5v-3zm9-2.5c-4.97 0-9-2.015-9-4.5S7.03 3 12 3s9 2.015 9 4.5s-4.03 4.5-9 4.5z"
|
d="M21 9.5v3c0 2.485-4.03 4.5-9 4.5s-9-2.015-9-4.5v-3c0 2.485 4.03 4.5 9 4.5s9-2.015 9-4.5zm-18 5c0 2.485 4.03 4.5 9 4.5s9-2.015 9-4.5v3c0 2.485-4.03 4.5-9 4.5s-9-2.015-9-4.5v-3zm9-2.5c-4.97 0-9-2.015-9-4.5S7.03 3 12 3s9 2.015 9 4.5s-4.03 4.5-9 4.5z"
|
||||||
fill="currentColor"
|
fill="currentColor"
|
||||||
/>`,
|
/>`
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
box: "24 24",
|
box: '24 24',
|
||||||
name: "discord",
|
name: 'discord',
|
||||||
svg: `<path
|
svg: `<path
|
||||||
d="M10.076 11c.6 0 1.086.45 1.075 1c0 .55-.474 1-1.075 1C9.486 13 9 12.55 9 12s.475-1 1.076-1zm3.848 0c.601 0 1.076.45 1.076 1s-.475 1-1.076 1c-.59 0-1.075-.45-1.075-1s.474-1 1.075-1zm4.967-9C20.054 2 21 2.966 21 4.163V23l-2.211-1.995l-1.245-1.176l-1.317-1.25l.546 1.943H5.109C3.946 20.522 3 19.556 3 18.359V4.163C3 2.966 3.946 2 5.109 2H18.89zm-3.97 13.713c2.273-.073 3.148-1.596 3.148-1.596c0-3.381-1.482-6.122-1.482-6.122c-1.48-1.133-2.89-1.102-2.89-1.102l-.144.168c1.749.546 2.561 1.334 2.561 1.334a8.263 8.263 0 0 0-3.096-1.008a8.527 8.527 0 0 0-2.077.02c-.062 0-.114.011-.175.021c-.36.032-1.235.168-2.335.662c-.38.178-.607.305-.607.305s.854-.83 2.705-1.376l-.103-.126s-1.409-.031-2.89 1.103c0 0-1.481 2.74-1.481 6.121c0 0 .864 1.522 3.137 1.596c0 0 .38-.472.69-.871c-1.307-.4-1.8-1.24-1.8-1.24s.102.074.287.179c.01.01.02.021.041.031c.031.022.062.032.093.053c.257.147.514.262.75.357c.422.168.926.336 1.513.452a7.06 7.06 0 0 0 2.664.01a6.666 6.666 0 0 0 1.491-.451c.36-.137.761-.337 1.183-.62c0 0-.514.861-1.862 1.25c.309.399.68.85.68.85z"
|
d="M10.076 11c.6 0 1.086.45 1.075 1c0 .55-.474 1-1.075 1C9.486 13 9 12.55 9 12s.475-1 1.076-1zm3.848 0c.601 0 1.076.45 1.076 1s-.475 1-1.076 1c-.59 0-1.075-.45-1.075-1s.474-1 1.075-1zm4.967-9C20.054 2 21 2.966 21 4.163V23l-2.211-1.995l-1.245-1.176l-1.317-1.25l.546 1.943H5.109C3.946 20.522 3 19.556 3 18.359V4.163C3 2.966 3.946 2 5.109 2H18.89zm-3.97 13.713c2.273-.073 3.148-1.596 3.148-1.596c0-3.381-1.482-6.122-1.482-6.122c-1.48-1.133-2.89-1.102-2.89-1.102l-.144.168c1.749.546 2.561 1.334 2.561 1.334a8.263 8.263 0 0 0-3.096-1.008a8.527 8.527 0 0 0-2.077.02c-.062 0-.114.011-.175.021c-.36.032-1.235.168-2.335.662c-.38.178-.607.305-.607.305s.854-.83 2.705-1.376l-.103-.126s-1.409-.031-2.89 1.103c0 0-1.481 2.74-1.481 6.121c0 0 .864 1.522 3.137 1.596c0 0 .38-.472.69-.871c-1.307-.4-1.8-1.24-1.8-1.24s.102.074.287.179c.01.01.02.021.041.031c.031.022.062.032.093.053c.257.147.514.262.75.357c.422.168.926.336 1.513.452a7.06 7.06 0 0 0 2.664.01a6.666 6.666 0 0 0 1.491-.451c.36-.137.761-.337 1.183-.62c0 0-.514.861-1.862 1.25c.309.399.68.85.68.85z"
|
||||||
fill="currentColor"
|
fill="currentColor"
|
||||||
/>`,
|
/>`
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
box: "256 185",
|
box: '256 185',
|
||||||
name: "docker",
|
name: 'docker',
|
||||||
svg: `<path
|
svg: `<path
|
||||||
d="M250.716 70.497c-5.765-4-18.976-5.5-29.304-3.5c-1.2-10-6.725-18.749-16.333-26.499l-5.524-4l-3.844 5.75c-4.803 7.5-7.205 18-6.485 28c.24 3.499 1.441 9.749 5.044 15.249c-3.362 2-10.328 4.5-19.455 4.5H1.155l-.48 2c-1.682 9.999-1.682 41.248 18.014 65.247c14.892 18.249 36.99 27.499 66.053 27.499c62.93 0 109.528-30.25 131.386-84.997c8.647.25 27.142 0 36.51-18.75c.24-.5.72-1.5 2.401-5.249l.961-2l-5.284-3.25zM139.986 0h-26.42v24.999h26.42V0zm0 29.999h-26.42v24.999h26.42v-25zm-31.225 0h-26.42v24.999h26.42v-25zm-31.225 0H51.115v24.999h26.421v-25zM46.311 59.998H19.89v24.999H46.31v-25zm31.225 0H51.115v24.999h26.421v-25zm31.225 0h-26.42v24.999h26.42v-25zm31.226 0h-26.422v24.999h26.422v-25zm31.225 0H144.79v24.999h26.422v-25z"
|
d="M250.716 70.497c-5.765-4-18.976-5.5-29.304-3.5c-1.2-10-6.725-18.749-16.333-26.499l-5.524-4l-3.844 5.75c-4.803 7.5-7.205 18-6.485 28c.24 3.499 1.441 9.749 5.044 15.249c-3.362 2-10.328 4.5-19.455 4.5H1.155l-.48 2c-1.682 9.999-1.682 41.248 18.014 65.247c14.892 18.249 36.99 27.499 66.053 27.499c62.93 0 109.528-30.25 131.386-84.997c8.647.25 27.142 0 36.51-18.75c.24-.5.72-1.5 2.401-5.249l.961-2l-5.284-3.25zM139.986 0h-26.42v24.999h26.42V0zm0 29.999h-26.42v24.999h26.42v-25zm-31.225 0h-26.42v24.999h26.42v-25zm-31.225 0H51.115v24.999h26.421v-25zM46.311 59.998H19.89v24.999H46.31v-25zm31.225 0H51.115v24.999h26.421v-25zm31.225 0h-26.42v24.999h26.42v-25zm31.226 0h-26.422v24.999h26.422v-25zm31.225 0H144.79v24.999h26.422v-25z"
|
||||||
fill="currentColor"
|
fill="currentColor"
|
||||||
/>`,
|
/>`
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
box: "24 24",
|
box: '24 24',
|
||||||
name: "double-checkmark",
|
name: 'double-checkmark',
|
||||||
svg: `<path
|
svg: `<path
|
||||||
d="M11.602 13.76l1.412 1.412l8.466-8.466l1.414 1.414l-9.88 9.88l-6.364-6.364l1.414-1.414l2.125 2.125l1.413 1.412zm.002-2.828l4.952-4.953l1.41 1.41l-4.952 4.953l-1.41-1.41zm-2.827 5.655L7.364 18L1 11.636l1.414-1.414l1.413 1.413l-.001.001l4.951 4.951z"
|
d="M11.602 13.76l1.412 1.412l8.466-8.466l1.414 1.414l-9.88 9.88l-6.364-6.364l1.414-1.414l2.125 2.125l1.413 1.412zm.002-2.828l4.952-4.953l1.41 1.41l-4.952 4.953l-1.41-1.41zm-2.827 5.655L7.364 18L1 11.636l1.414-1.414l1.413 1.413l-.001.001l4.951 4.951z"
|
||||||
fill="currentColor"
|
fill="currentColor"
|
||||||
/>`,
|
/>`
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
box: "24 24",
|
box: '24 24',
|
||||||
name: "github",
|
name: 'github',
|
||||||
svg: `<path
|
svg: `<path
|
||||||
d="M12 2C6.475 2 2 6.475 2 12a9.994 9.994 0 0 0 6.838 9.488c.5.087.687-.213.687-.476c0-.237-.013-1.024-.013-1.862c-2.512.463-3.162-.612-3.362-1.175c-.113-.288-.6-1.175-1.025-1.413c-.35-.187-.85-.65-.013-.662c.788-.013 1.35.725 1.538 1.025c.9 1.512 2.338 1.087 2.912.825c.088-.65.35-1.087.638-1.337c-2.225-.25-4.55-1.113-4.55-4.938c0-1.088.387-1.987 1.025-2.688c-.1-.25-.45-1.275.1-2.65c0 0 .837-.262 2.75 1.026a9.28 9.28 0 0 1 2.5-.338c.85 0 1.7.112 2.5.337c1.912-1.3 2.75-1.024 2.75-1.024c.55 1.375.2 2.4.1 2.65c.637.7 1.025 1.587 1.025 2.687c0 3.838-2.337 4.688-4.562 4.938c.362.312.675.912.675 1.85c0 1.337-.013 2.412-.013 2.75c0 .262.188.574.688.474A10.016 10.016 0 0 0 22 12c0-5.525-4.475-10-10-10z"
|
d="M12 2C6.475 2 2 6.475 2 12a9.994 9.994 0 0 0 6.838 9.488c.5.087.687-.213.687-.476c0-.237-.013-1.024-.013-1.862c-2.512.463-3.162-.612-3.362-1.175c-.113-.288-.6-1.175-1.025-1.413c-.35-.187-.85-.65-.013-.662c.788-.013 1.35.725 1.538 1.025c.9 1.512 2.338 1.087 2.912.825c.088-.65.35-1.087.638-1.337c-2.225-.25-4.55-1.113-4.55-4.938c0-1.088.387-1.987 1.025-2.688c-.1-.25-.45-1.275.1-2.65c0 0 .837-.262 2.75 1.026a9.28 9.28 0 0 1 2.5-.338c.85 0 1.7.112 2.5.337c1.912-1.3 2.75-1.024 2.75-1.024c.55 1.375.2 2.4.1 2.65c.637.7 1.025 1.587 1.025 2.687c0 3.838-2.337 4.688-4.562 4.938c.362.312.675.912.675 1.85c0 1.337-.013 2.412-.013 2.75c0 .262.188.574.688.474A10.016 10.016 0 0 0 22 12c0-5.525-4.475-10-10-10z"
|
||||||
fill="currentColor"
|
fill="currentColor"
|
||||||
/>`,
|
/>`
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
box: "24 24",
|
box: '24 24',
|
||||||
name: "globe",
|
name: 'globe',
|
||||||
svg: `<path
|
svg: `<path
|
||||||
d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10s-4.477 10-10 10zm-2.29-2.333A17.9 17.9 0 0 1 8.027 13H4.062a8.008 8.008 0 0 0 5.648 6.667zM10.03 13c.151 2.439.848 4.73 1.97 6.752A15.905 15.905 0 0 0 13.97 13h-3.94zm9.908 0h-3.965a17.9 17.9 0 0 1-1.683 6.667A8.008 8.008 0 0 0 19.938 13zM4.062 11h3.965A17.9 17.9 0 0 1 9.71 4.333A8.008 8.008 0 0 0 4.062 11zm5.969 0h3.938A15.905 15.905 0 0 0 12 4.248A15.905 15.905 0 0 0 10.03 11zm4.259-6.667A17.9 17.9 0 0 1 15.973 11h3.965a8.008 8.008 0 0 0-5.648-6.667z"
|
d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10s-4.477 10-10 10zm-2.29-2.333A17.9 17.9 0 0 1 8.027 13H4.062a8.008 8.008 0 0 0 5.648 6.667zM10.03 13c.151 2.439.848 4.73 1.97 6.752A15.905 15.905 0 0 0 13.97 13h-3.94zm9.908 0h-3.965a17.9 17.9 0 0 1-1.683 6.667A8.008 8.008 0 0 0 19.938 13zM4.062 11h3.965A17.9 17.9 0 0 1 9.71 4.333A8.008 8.008 0 0 0 4.062 11zm5.969 0h3.938A15.905 15.905 0 0 0 12 4.248A15.905 15.905 0 0 0 10.03 11zm4.259-6.667A17.9 17.9 0 0 1 15.973 11h3.965a8.008 8.008 0 0 0-5.648-6.667z"
|
||||||
fill="currentColor"
|
fill="currentColor"
|
||||||
/>`,
|
/>`
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
box: "24 24",
|
box: '24 24',
|
||||||
name: "hammer",
|
name: 'hammer',
|
||||||
svg: `<path
|
svg: `<path
|
||||||
d="M17 8V2h3a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1h-3zm-2 14a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1V8H2.5V6.074a1 1 0 0 1 .496-.863L8.5 2H15v20z"
|
d="M17 8V2h3a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1h-3zm-2 14a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1V8H2.5V6.074a1 1 0 0 1 .496-.863L8.5 2H15v20z"
|
||||||
fill="currentColor"
|
fill="currentColor"
|
||||||
/>`,
|
/>`
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
box: "24 24",
|
box: '24 24',
|
||||||
name: "palette",
|
name: 'palette',
|
||||||
svg: `<path d="M12.5708+2C18.0928+2+22.5708+5.978+22.5708+10.889C22.5692+13.9566+20.0825+16.4429+17.0148+16.444L15.0488+16.444C14.1268+16.444+13.3818+17.189+13.3818+18.111C13.3818+18.533+13.5488+18.922+13.8038+19.211C14.0708+19.511+14.2378+19.9+14.2378+20.333C14.2378+21.256+13.4708+22+12.5708+22C7.04881+22+2.57081+17.522+2.57081+12C2.57081+6.478+7.04881+2+12.5708+2ZM8.07081+12C8.89924+12+9.57081+11.3284+9.57081+10.5C9.57081+9.67157+8.89924+9+8.07081+9C7.24239+9+6.57081+9.67157+6.57081+10.5C6.57081+11.3284+7.24239+12+8.07081+12ZM17.0708+12C17.8992+12+18.5708+11.3284+18.5708+10.5C18.5708+9.67157+17.8992+9+17.0708+9C16.2424+9+15.5708+9.67157+15.5708+10.5C15.5708+11.3284+16.2424+12+17.0708+12ZM12.5708+9C13.3992+9+14.0708+8.32843+14.0708+7.5C14.0708+6.67157+13.3992+6+12.5708+6C11.7424+6+11.0708+6.67157+11.0708+7.5C11.0708+8.32843+11.7424+9+12.5708+9Z" opacity="1" fill="#854d0e"/>
|
svg: `<path d="M12.5708+2C18.0928+2+22.5708+5.978+22.5708+10.889C22.5692+13.9566+20.0825+16.4429+17.0148+16.444L15.0488+16.444C14.1268+16.444+13.3818+17.189+13.3818+18.111C13.3818+18.533+13.5488+18.922+13.8038+19.211C14.0708+19.511+14.2378+19.9+14.2378+20.333C14.2378+21.256+13.4708+22+12.5708+22C7.04881+22+2.57081+17.522+2.57081+12C2.57081+6.478+7.04881+2+12.5708+2ZM8.07081+12C8.89924+12+9.57081+11.3284+9.57081+10.5C9.57081+9.67157+8.89924+9+8.07081+9C7.24239+9+6.57081+9.67157+6.57081+10.5C6.57081+11.3284+7.24239+12+8.07081+12ZM17.0708+12C17.8992+12+18.5708+11.3284+18.5708+10.5C18.5708+9.67157+17.8992+9+17.0708+9C16.2424+9+15.5708+9.67157+15.5708+10.5C15.5708+11.3284+16.2424+12+17.0708+12ZM12.5708+9C13.3992+9+14.0708+8.32843+14.0708+7.5C14.0708+6.67157+13.3992+6+12.5708+6C11.7424+6+11.0708+6.67157+11.0708+7.5C11.0708+8.32843+11.7424+9+12.5708+9Z" opacity="1" fill="#854d0e"/>
|
||||||
<path d="M8.14863+8.91325L8.14863+8.91325C9.02461+8.91325+9.73473+9.62336+9.73473+10.4993L9.73473+10.4993C9.73473+11.3753+9.02461+12.0854+8.14863+12.0854L8.14863+12.0854C7.27266+12.0854+6.56254+11.3753+6.56254+10.4993L6.56254+10.4993C6.56254+9.62336+7.27266+8.91325+8.14863+8.91325Z" opacity="1" fill="#dc2626"/>
|
<path d="M8.14863+8.91325L8.14863+8.91325C9.02461+8.91325+9.73473+9.62336+9.73473+10.4993L9.73473+10.4993C9.73473+11.3753+9.02461+12.0854+8.14863+12.0854L8.14863+12.0854C7.27266+12.0854+6.56254+11.3753+6.56254+10.4993L6.56254+10.4993C6.56254+9.62336+7.27266+8.91325+8.14863+8.91325Z" opacity="1" fill="#dc2626"/>
|
||||||
<path d="M12.5708+5.85437L12.5708+5.85437C13.5146+5.85437+14.2796+6.61942+14.2796+7.56315L14.2796+7.56315C14.2796+8.50689+13.5146+9.27194+12.5708+9.27194L12.5708+9.27194C11.6271+9.27194+10.862+8.50689+10.862+7.56315L10.862+7.56315C10.862+6.61942+11.6271+5.85437+12.5708+5.85437Z" opacity="1" fill="#15803d"/>
|
<path d="M12.5708+5.85437L12.5708+5.85437C13.5146+5.85437+14.2796+6.61942+14.2796+7.56315L14.2796+7.56315C14.2796+8.50689+13.5146+9.27194+12.5708+9.27194L12.5708+9.27194C11.6271+9.27194+10.862+8.50689+10.862+7.56315L10.862+7.56315C10.862+6.61942+11.6271+5.85437+12.5708+5.85437Z" opacity="1" fill="#15803d"/>
|
||||||
<path d="M17.245+8.79055L17.245+8.79055C18.1887+8.79055+18.9537+9.5556+18.9537+10.4993L18.9537+10.4993C18.9537+11.4431+18.1887+12.2081+17.245+12.2081L17.245+12.2081C16.3012+12.2081+15.5362+11.4431+15.5362+10.4993L15.5362+10.4993C15.5362+9.5556+16.3012+8.79055+17.245+8.79055Z" opacity="1" fill="#facc15"/>
|
<path d="M17.245+8.79055L17.245+8.79055C18.1887+8.79055+18.9537+9.5556+18.9537+10.4993L18.9537+10.4993C18.9537+11.4431+18.1887+12.2081+17.245+12.2081L17.245+12.2081C16.3012+12.2081+15.5362+11.4431+15.5362+10.4993L15.5362+10.4993C15.5362+9.5556+16.3012+8.79055+17.245+8.79055Z" opacity="1" fill="#facc15"/>
|
||||||
`,
|
`
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
box: "24 24",
|
box: '24 24',
|
||||||
name: "telegram",
|
name: 'telegram',
|
||||||
svg: `<path
|
svg: `<path
|
||||||
d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10s-4.477 10-10 10zm-3.11-8.83l.013-.007l.87 2.87c.112.311.266.367.453.341c.188-.025.287-.126.41-.244l1.188-1.148l2.55 1.888c.466.257.801.124.917-.432l1.657-7.822c.183-.728-.137-1.02-.702-.788l-9.733 3.76c-.664.266-.66.638-.12.803l2.497.78z"
|
d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10s-4.477 10-10 10zm-3.11-8.83l.013-.007l.87 2.87c.112.311.266.367.453.341c.188-.025.287-.126.41-.244l1.188-1.148l2.55 1.888c.466.257.801.124.917-.432l1.657-7.822c.183-.728-.137-1.02-.702-.788l-9.733 3.76c-.664.266-.66.638-.12.803l2.497.78z"
|
||||||
fill="currentColor"
|
fill="currentColor"
|
||||||
/>`,
|
/>`
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
box: "24 24",
|
box: '24 24',
|
||||||
name: "twitter",
|
name: 'twitter',
|
||||||
svg: `<path
|
svg: `<path
|
||||||
d="M22.162 5.656a8.384 8.384 0 0 1-2.402.658A4.196 4.196 0 0 0 21.6 4c-.82.488-1.719.83-2.656 1.015a4.182 4.182 0 0 0-7.126 3.814a11.874 11.874 0 0 1-8.62-4.37a4.168 4.168 0 0 0-.566 2.103c0 1.45.738 2.731 1.86 3.481a4.168 4.168 0 0 1-1.894-.523v.052a4.185 4.185 0 0 0 3.355 4.101a4.21 4.21 0 0 1-1.89.072A4.185 4.185 0 0 0 7.97 16.65a8.394 8.394 0 0 1-6.191 1.732a11.83 11.83 0 0 0 6.41 1.88c7.693 0 11.9-6.373 11.9-11.9c0-.18-.005-.362-.013-.54a8.496 8.496 0 0 0 2.087-2.165z"
|
d="M22.162 5.656a8.384 8.384 0 0 1-2.402.658A4.196 4.196 0 0 0 21.6 4c-.82.488-1.719.83-2.656 1.015a4.182 4.182 0 0 0-7.126 3.814a11.874 11.874 0 0 1-8.62-4.37a4.168 4.168 0 0 0-.566 2.103c0 1.45.738 2.731 1.86 3.481a4.168 4.168 0 0 1-1.894-.523v.052a4.185 4.185 0 0 0 3.355 4.101a4.21 4.21 0 0 1-1.89.072A4.185 4.185 0 0 0 7.97 16.65a8.394 8.394 0 0 1-6.191 1.732a11.83 11.83 0 0 0 6.41 1.88c7.693 0 11.9-6.373 11.9-11.9c0-.18-.005-.362-.013-.54a8.496 8.496 0 0 0 2.087-2.165z"
|
||||||
fill="currentColor"
|
fill="currentColor"
|
||||||
/>`,
|
/>`
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
box: "24 24",
|
box: '24 24',
|
||||||
name: "virus",
|
name: 'virus',
|
||||||
svg: `<path d="M13.717+1.947L17.451+3.381L16.734+5.248L15.8+4.889L15.054+6.834C15.8324+7.29588+16.4971+7.92675+16.999+8.68L18.902+7.833L18.495+6.919L20.322+6.106L21.949+9.76L20.122+10.573L19.715+9.66L17.813+10.507C18.0374+11.3837+18.0613+12.2998+17.883+13.187L19.827+13.933L20.185+13L22.053+13.717L20.619+17.451L18.752+16.734L19.11+15.801L17.166+15.054C16.7041+15.8324+16.0733+16.4971+15.32+16.999L16.167+18.902L17.081+18.495L17.894+20.322L14.24+21.949L13.427+20.122L14.34+19.715L13.493+17.813C12.6159+18.0372+11.6995+18.0608+10.812+17.882L10.066+19.827L11+20.185L10.283+22.053L6.549+20.619L7.266+18.752L8.198+19.11L8.946+17.166C8.16749+16.7039+7.5025+16.0731+7+15.32L5.097+16.167L5.504+17.081L3.677+17.894L2.05+14.24L3.877+13.427L4.283+14.341L6.186+13.493C5.96355+12.616+5.93997+11.7003+6.117+10.813L4.172+10.067L3.815+11L1.947+10.283L3.381+6.55L5.248+7.267L4.889+8.2L6.834+8.947C7.2958+8.16798+7.92666+7.50261+8.68+7L7.833+5.097L6.919+5.504L6.106+3.677L9.76+2.051L10.573+3.878L9.66+4.285L10.507+6.187C11.3837+5.96262+12.2998+5.9387+13.187+6.117L13.932+4.172L13+3.815L13.717+1.947ZM10.134+13.232C9.85786+13.7106+10.0219+14.3224+10.5005+14.5985C10.9791+14.8746+11.5909+14.7106+11.867+14.232C12.1431+13.7534+11.9791+13.1416+11.5005+12.8655C11.0219+12.5894+10.4101+12.7534+10.134+13.232ZM14+11C13.4477+11+13+11.4477+13+12C13+12.5523+13.4477+13+14+13C14.5523+13+15+12.5523+15+12C15+11.4477+14.5523+11+14+11ZM10.5+9.402C10.0217+9.67842+9.85808+10.2902+10.1345+10.7685C10.4109+11.2468+11.0227+11.4104+11.501+11.134C11.9791+10.8575+12.1426+10.2458+11.8662+9.76767C11.5898+9.28951+10.9783+9.12581+10.5+9.402Z" opacity="1" fill="#fb7185"/>
|
svg: `<path d="M13.717+1.947L17.451+3.381L16.734+5.248L15.8+4.889L15.054+6.834C15.8324+7.29588+16.4971+7.92675+16.999+8.68L18.902+7.833L18.495+6.919L20.322+6.106L21.949+9.76L20.122+10.573L19.715+9.66L17.813+10.507C18.0374+11.3837+18.0613+12.2998+17.883+13.187L19.827+13.933L20.185+13L22.053+13.717L20.619+17.451L18.752+16.734L19.11+15.801L17.166+15.054C16.7041+15.8324+16.0733+16.4971+15.32+16.999L16.167+18.902L17.081+18.495L17.894+20.322L14.24+21.949L13.427+20.122L14.34+19.715L13.493+17.813C12.6159+18.0372+11.6995+18.0608+10.812+17.882L10.066+19.827L11+20.185L10.283+22.053L6.549+20.619L7.266+18.752L8.198+19.11L8.946+17.166C8.16749+16.7039+7.5025+16.0731+7+15.32L5.097+16.167L5.504+17.081L3.677+17.894L2.05+14.24L3.877+13.427L4.283+14.341L6.186+13.493C5.96355+12.616+5.93997+11.7003+6.117+10.813L4.172+10.067L3.815+11L1.947+10.283L3.381+6.55L5.248+7.267L4.889+8.2L6.834+8.947C7.2958+8.16798+7.92666+7.50261+8.68+7L7.833+5.097L6.919+5.504L6.106+3.677L9.76+2.051L10.573+3.878L9.66+4.285L10.507+6.187C11.3837+5.96262+12.2998+5.9387+13.187+6.117L13.932+4.172L13+3.815L13.717+1.947ZM10.134+13.232C9.85786+13.7106+10.0219+14.3224+10.5005+14.5985C10.9791+14.8746+11.5909+14.7106+11.867+14.232C12.1431+13.7534+11.9791+13.1416+11.5005+12.8655C11.0219+12.5894+10.4101+12.7534+10.134+13.232ZM14+11C13.4477+11+13+11.4477+13+12C13+12.5523+13.4477+13+14+13C14.5523+13+15+12.5523+15+12C15+11.4477+14.5523+11+14+11ZM10.5+9.402C10.0217+9.67842+9.85808+10.2902+10.1345+10.7685C10.4109+11.2468+11.0227+11.4104+11.501+11.134C11.9791+10.8575+12.1426+10.2458+11.8662+9.76767C11.5898+9.28951+10.9783+9.12581+10.5+9.402Z" opacity="1" fill="#fb7185"/>
|
||||||
<path d="M11.0058+12.5876L11.0058+12.5876C11.6116+12.5876+12.1026+13.0787+12.1026+13.6845L12.1026+13.6845C12.1026+14.2902+11.6116+14.7813+11.0058+14.7813L11.0058+14.7813C10.4001+14.7813+9.90898+14.2902+9.90898+13.6845L9.90898+13.6845C9.90898+13.0787+10.4001+12.5876+11.0058+12.5876Z" opacity="1" fill="#f43f5e"/>
|
<path d="M11.0058+12.5876L11.0058+12.5876C11.6116+12.5876+12.1026+13.0787+12.1026+13.6845L12.1026+13.6845C12.1026+14.2902+11.6116+14.7813+11.0058+14.7813L11.0058+14.7813C10.4001+14.7813+9.90898+14.2902+9.90898+13.6845L9.90898+13.6845C9.90898+13.0787+10.4001+12.5876+11.0058+12.5876Z" opacity="1" fill="#f43f5e"/>
|
||||||
<path d="M11.0058+8.8978L11.0058+8.8978C11.728+8.8978+12.3135+9.48326+12.3135+10.2054L12.3135+10.2054C12.3135+10.9276+11.728+11.5131+11.0058+11.5131L11.0058+11.5131C10.2836+11.5131+9.69817+10.9276+9.69817+10.2054L9.69817+10.2054C9.69817+9.48326+10.2836+8.8978+11.0058+8.8978Z" opacity="1" fill="#f43f5e"/>
|
<path d="M11.0058+8.8978L11.0058+8.8978C11.728+8.8978+12.3135+9.48326+12.3135+10.2054L12.3135+10.2054C12.3135+10.9276+11.728+11.5131+11.0058+11.5131L11.0058+11.5131C10.2836+11.5131+9.69817+10.9276+9.69817+10.2054L9.69817+10.2054C9.69817+9.48326+10.2836+8.8978+11.0058+8.8978Z" opacity="1" fill="#f43f5e"/>
|
||||||
<path d="M13.9035+10.8667L13.9035+10.8667C14.5294+10.8667+15.0368+11.3741+15.0368+12L15.0368+12C15.0368+12.6259+14.5294+13.1333+13.9035+13.1333L13.9035+13.1333C13.2776+13.1333+12.7702+12.6259+12.7702+12L12.7702+12C12.7702+11.3741+13.2776+10.8667+13.9035+10.8667Z" opacity="1" fill="#f43f5e"/>
|
<path d="M13.9035+10.8667L13.9035+10.8667C14.5294+10.8667+15.0368+11.3741+15.0368+12L15.0368+12C15.0368+12.6259+14.5294+13.1333+13.9035+13.1333L13.9035+13.1333C13.2776+13.1333+12.7702+12.6259+12.7702+12L12.7702+12C12.7702+11.3741+13.2776+10.8667+13.9035+10.8667Z" opacity="1" fill="#f43f5e"/>
|
||||||
`,
|
`
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
box: "24 24",
|
box: '24 24',
|
||||||
name: "youtube",
|
name: 'youtube',
|
||||||
svg: `<path
|
svg: `<path
|
||||||
d="M21.543 6.498C22 8.28 22 12 22 12s0 3.72-.457 5.502c-.254.985-.997 1.76-1.938 2.022C17.896 20 12 20 12 20s-5.893 0-7.605-.476c-.945-.266-1.687-1.04-1.938-2.022C2 15.72 2 12 2 12s0-3.72.457-5.502c.254-.985.997-1.76 1.938-2.022C6.107 4 12 4 12 4s5.896 0 7.605.476c.945.266 1.687 1.04 1.938 2.022zM10 15.5l6-3.5l-6-3.5v7z"
|
d="M21.543 6.498C22 8.28 22 12 22 12s0 3.72-.457 5.502c-.254.985-.997 1.76-1.938 2.022C17.896 20 12 20 12 20s-5.893 0-7.605-.476c-.945-.266-1.687-1.04-1.938-2.022C2 15.72 2 12 2 12s0-3.72.457-5.502c.254-.985.997-1.76 1.938-2.022C6.107 4 12 4 12 4s5.896 0 7.605.476c.945.266 1.687 1.04 1.938 2.022zM10 15.5l6-3.5l-6-3.5v7z"
|
||||||
fill="currentColor"
|
fill="currentColor"
|
||||||
/>`,
|
/>`
|
||||||
},
|
}
|
||||||
];
|
];
|
||||||
let displayIcon = icons.find((e) => e.name === name);
|
let displayIcon = icons.find((e) => e.name === name);
|
||||||
if (!displayIcon) {
|
if (!displayIcon) {
|
||||||
throw Error(`Could not find icon with name ${name}`);
|
throw Error(`Could not find icon with name ${name}`);
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<svg
|
|
||||||
class="svgicon {name}"
|
<svg class="svgicon {name}" focusable="false" {width} {height} viewBox="0 0 {displayIcon.box}"
|
||||||
focusable="false"
|
>{@html displayIcon.svg}</svg
|
||||||
{width}
|
>
|
||||||
{height}
|
|
||||||
viewBox="0 0 {displayIcon.box}">{@html displayIcon.svg}</svg
|
<style>
|
||||||
>
|
:global(span.icon-wrapper) {
|
||||||
<style>
|
padding: 2px 20px;
|
||||||
:global(span.icon-wrapper) {
|
display: flex;
|
||||||
padding: 2px 20px;
|
justify-items: start;
|
||||||
display: flex;
|
}
|
||||||
justify-items: start;
|
svg.svgicon {
|
||||||
}
|
padding-right: 4px;
|
||||||
svg.svgicon {
|
color: #60a5fa;
|
||||||
padding-right: 4px;
|
place-self: center;
|
||||||
color: #60a5fa;
|
}
|
||||||
place-self: center;
|
svg.archive {
|
||||||
}
|
color: #ca8a04;
|
||||||
svg.archive {
|
}
|
||||||
color: #ca8a04;
|
svg.bug {
|
||||||
}
|
color: #84cc16;
|
||||||
svg.bug {
|
}
|
||||||
color: #84cc16;
|
svg.calendar {
|
||||||
}
|
color: #444;
|
||||||
svg.calendar {
|
}
|
||||||
color: #444;
|
svg.code {
|
||||||
}
|
color: #164e63;
|
||||||
svg.code {
|
}
|
||||||
color: #164e63;
|
svg.close {
|
||||||
}
|
color: #dc2626;
|
||||||
svg.close {
|
}
|
||||||
color: #dc2626;
|
svg.database {
|
||||||
}
|
color: #6b7280;
|
||||||
svg.database {
|
}
|
||||||
color: #6b7280;
|
svg.discord {
|
||||||
}
|
color: #7289da;
|
||||||
svg.discord {
|
}
|
||||||
color: #7289da;
|
svg.docker {
|
||||||
}
|
color: #2496ed;
|
||||||
svg.docker {
|
}
|
||||||
color: #2496ed;
|
svg.double-checkmark {
|
||||||
}
|
color: #84cc16;
|
||||||
svg.double-checkmark {
|
}
|
||||||
color: #84cc16;
|
svg.github {
|
||||||
}
|
color: #181717;
|
||||||
svg.github {
|
}
|
||||||
color: #181717;
|
svg.hammer {
|
||||||
}
|
color: #4b5563;
|
||||||
svg.hammer {
|
}
|
||||||
color: #4b5563;
|
svg.palette {
|
||||||
}
|
color: #7f1d1d;
|
||||||
svg.palette {
|
}
|
||||||
color: #7f1d1d;
|
svg.telegram {
|
||||||
}
|
color: #26a5e4;
|
||||||
svg.telegram {
|
}
|
||||||
color: #26a5e4;
|
svg.twitter {
|
||||||
}
|
color: #1da1f2;
|
||||||
svg.twitter {
|
}
|
||||||
color: #1da1f2;
|
svg.youtube {
|
||||||
}
|
color: #ff0000;
|
||||||
svg.youtube {
|
}
|
||||||
color: #ff0000;
|
</style>
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
@@ -29,7 +29,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.themed :global(.select-container) {
|
.themed :global(.select-container) {
|
||||||
border: 2px solid var(--dark-gray);
|
border: 2px solid var(--dark-gray);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -62,5 +62,4 @@
|
|||||||
position: static;
|
position: static;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,7 +1,6 @@
|
|||||||
<script>
|
<script>
|
||||||
import Icon from '$lib/components/Icon/index.svelte';
|
import Icon from '$lib/components/Icon/index.svelte';
|
||||||
import societies from './societies.json';
|
import societies from './societies.json';
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<!--society section-->
|
<!--society section-->
|
||||||
@@ -100,5 +99,4 @@
|
|||||||
var(--tw-shadow);
|
var(--tw-shadow);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,38 +1,38 @@
|
|||||||
<script>
|
<script>
|
||||||
export let title = "";
|
export let title = '';
|
||||||
export let variant;
|
export let variant;
|
||||||
export let click = undefined
|
export let click = undefined;
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
|
||||||
div {
|
|
||||||
/* max-width: 33%; */
|
|
||||||
padding: 2px 12px;
|
|
||||||
border-radius: 5px;
|
|
||||||
font-family: Overpass;
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: normal;
|
|
||||||
font-size: 12px;
|
|
||||||
line-height: 150%;
|
|
||||||
text-align: center;
|
|
||||||
margin-right: 0.5rem;
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.red {
|
|
||||||
color: #ff3e01;
|
|
||||||
background: #ffdbcf;
|
|
||||||
}
|
|
||||||
.blue {
|
|
||||||
color: #158fff;
|
|
||||||
background: #ddefff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.copy {
|
|
||||||
color: #ff6f01;
|
|
||||||
background: #ffe9cf;
|
|
||||||
cursor: copy;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<div on:click={click} class={variant}>{title}</div>
|
<div on:click={click} class={variant}>{title}</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
/* max-width: 33%; */
|
||||||
|
padding: 2px 12px;
|
||||||
|
border-radius: 5px;
|
||||||
|
font-family: Overpass;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: normal;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 150%;
|
||||||
|
text-align: center;
|
||||||
|
margin-right: 0.5rem;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.red {
|
||||||
|
color: #ff3e01;
|
||||||
|
background: #ffdbcf;
|
||||||
|
}
|
||||||
|
.blue {
|
||||||
|
color: #158fff;
|
||||||
|
background: #ddefff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.copy {
|
||||||
|
color: #ff6f01;
|
||||||
|
background: #ffe9cf;
|
||||||
|
cursor: copy;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@@ -3,14 +3,18 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<li class="flex-0 lg:flex-auto flex flex-wrap justify-center font-bold">
|
<li class="flex-0 lg:flex-auto flex flex-wrap justify-center font-bold">
|
||||||
<a href={path} class="text-basics-900 text-lg no-underline uppercase text-center border-b-4 border-transparent hover:border-b-primary focus:border-b-primary"><img src={image} {alt} /><slot /></a>
|
<a
|
||||||
|
href={path}
|
||||||
|
class="text-basics-900 text-lg no-underline uppercase text-center border-b-4 border-transparent hover:border-b-primary focus:border-b-primary"
|
||||||
|
><img src={image} {alt} /><slot /></a
|
||||||
|
>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
img {
|
img {
|
||||||
width: 128px;
|
width: 128px;
|
||||||
}
|
}
|
||||||
a {
|
a {
|
||||||
font-size: var(--font-100);
|
font-size: var(--font-100);
|
||||||
transition: border-bottom 0.2s;
|
transition: border-bottom 0.2s;
|
||||||
letter-spacing: 0.05rem;
|
letter-spacing: 0.05rem;
|
||||||
|
|||||||
@@ -4,47 +4,47 @@
|
|||||||
var year = date.getFullYear();
|
var year = date.getFullYear();
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<span>© {year} Svelte Society</span>
|
<span>© {year} Svelte Society</span>
|
||||||
<span>•</span>
|
<span>•</span>
|
||||||
<a class="underline" href="/about">Code of Conduct</a>
|
<a class="underline" href="/about">Code of Conduct</a>
|
||||||
<span>•</span>
|
<span>•</span>
|
||||||
<span>
|
<span>
|
||||||
Contribute on
|
Contribute on
|
||||||
<a
|
<a
|
||||||
class="underline"
|
class="underline"
|
||||||
href="https://github.com/svelte-society/sveltesociety.dev/"
|
href="https://github.com/svelte-society/sveltesociety.dev/"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noopener">GitHub</a
|
rel="noopener">GitHub</a
|
||||||
>!
|
>!
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
footer {
|
footer {
|
||||||
background-color: var(--accent);
|
background-color: var(--accent);
|
||||||
color: var(--white);
|
color: var(--white);
|
||||||
padding: var(--s-8);
|
padding: var(--s-8);
|
||||||
font-size: var(--font-200);
|
font-size: var(--font-200);
|
||||||
}
|
}
|
||||||
.container {
|
.container {
|
||||||
display: grid;
|
display: grid;
|
||||||
gap: var(--s-2);
|
gap: var(--s-2);
|
||||||
justify-items: center;
|
justify-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
@media (min-width: 768px) {
|
@media (min-width: 768px) {
|
||||||
footer {
|
footer {
|
||||||
padding: var(--s-12);
|
padding: var(--s-12);
|
||||||
}
|
}
|
||||||
.container {
|
.container {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: var(--s-6);
|
gap: var(--s-6);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@media print {
|
@media print {
|
||||||
footer {
|
footer {
|
||||||
display: none;
|
display: none;
|
||||||
|
|||||||
@@ -63,9 +63,9 @@
|
|||||||
width: var(--s-12);
|
width: var(--s-12);
|
||||||
height: var(--s-12);
|
height: var(--s-12);
|
||||||
}
|
}
|
||||||
.logo {
|
.logo {
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
@media (min-width: 1280px) {
|
@media (min-width: 1280px) {
|
||||||
ul {
|
ul {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|||||||
@@ -9,16 +9,16 @@
|
|||||||
</li>
|
</li>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
li {
|
li {
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
}
|
}
|
||||||
a {
|
a {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
border-bottom: transparent;
|
border-bottom: transparent;
|
||||||
color: var(--inherit);
|
color: var(--inherit);
|
||||||
transition: var(--link-transition);
|
transition: var(--link-transition);
|
||||||
font-size: var(--font-200);
|
font-size: var(--font-200);
|
||||||
}
|
}
|
||||||
|
|
||||||
a.nav-item {
|
a.nav-item {
|
||||||
letter-spacing: 0.05rem;
|
letter-spacing: 0.05rem;
|
||||||
@@ -26,7 +26,7 @@
|
|||||||
}
|
}
|
||||||
li a:hover {
|
li a:hover {
|
||||||
border-bottom: 4px solid var(--primary);
|
border-bottom: 4px solid var(--primary);
|
||||||
}
|
}
|
||||||
.active {
|
.active {
|
||||||
border-bottom: 4px solid var(--primary);
|
border-bottom: 4px solid var(--primary);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,50 +1,50 @@
|
|||||||
<script>
|
<script>
|
||||||
export let nodes;
|
export let nodes;
|
||||||
export let currentPath;
|
export let currentPath;
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
|
||||||
ul {
|
|
||||||
list-style: none;
|
|
||||||
margin: 0 0 0 1.75rem;
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
||||||
}
|
|
||||||
li::before {
|
|
||||||
content: "•";
|
|
||||||
color: var(--svelte-grey-light);
|
|
||||||
display: inline-block;
|
|
||||||
width: 1em;
|
|
||||||
margin-left: -1em;
|
|
||||||
}
|
|
||||||
li.active::before {
|
|
||||||
color: var(--svelte-grey);
|
|
||||||
}
|
|
||||||
a {
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
a:hover {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
li.active a {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
@media screen and (max-width: 1024px) {
|
|
||||||
ul {
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media screen and (max-width: 600px) {
|
|
||||||
ul {
|
|
||||||
grid-template-columns: 1fr
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
{#each nodes.filter((r) => r.meta.layout !== 'recipeCategory') as node}
|
{#each nodes.filter((r) => r.meta.layout !== 'recipeCategory') as node}
|
||||||
<li class:active={node.path.includes(node.path)}>
|
<li class:active={node.path.includes(node.path)}>
|
||||||
<a href={node.path}>{node.meta.title}</a>
|
<a href={node.path}>{node.meta.title}</a>
|
||||||
</li>
|
</li>
|
||||||
{/each}
|
{/each}
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
ul {
|
||||||
|
list-style: none;
|
||||||
|
margin: 0 0 0 1.75rem;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||||
|
}
|
||||||
|
li::before {
|
||||||
|
content: '•';
|
||||||
|
color: var(--svelte-grey-light);
|
||||||
|
display: inline-block;
|
||||||
|
width: 1em;
|
||||||
|
margin-left: -1em;
|
||||||
|
}
|
||||||
|
li.active::before {
|
||||||
|
color: var(--svelte-grey);
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
li.active a {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 1024px) {
|
||||||
|
ul {
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 600px) {
|
||||||
|
ul {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@@ -1,28 +1,28 @@
|
|||||||
<style>
|
|
||||||
div {
|
|
||||||
background-color: rgba(99,177,249, 0.2);
|
|
||||||
border-left: 4px solid rgb(99,177,249);
|
|
||||||
border-radius: 5px;
|
|
||||||
margin: 1rem 0;
|
|
||||||
padding: .75rem 1.5rem 1rem 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
div :global(a) {
|
|
||||||
color: inherit;
|
|
||||||
border-bottom: 2px dashed rgb(99,177,249);
|
|
||||||
margin: 0 -3px;
|
|
||||||
padding: 0 3px;
|
|
||||||
}
|
|
||||||
div :global(a:active),
|
|
||||||
div :global(a:focus),
|
|
||||||
div :global(a:hover) {
|
|
||||||
background: rgb(99,177,249);
|
|
||||||
border-bottom: 2px solid black;
|
|
||||||
color: black;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<slot></slot>
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
background-color: rgba(99, 177, 249, 0.2);
|
||||||
|
border-left: 4px solid rgb(99, 177, 249);
|
||||||
|
border-radius: 5px;
|
||||||
|
margin: 1rem 0;
|
||||||
|
padding: 0.75rem 1.5rem 1rem 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
div :global(a) {
|
||||||
|
color: inherit;
|
||||||
|
border-bottom: 2px dashed rgb(99, 177, 249);
|
||||||
|
margin: 0 -3px;
|
||||||
|
padding: 0 3px;
|
||||||
|
}
|
||||||
|
div :global(a:active),
|
||||||
|
div :global(a:focus),
|
||||||
|
div :global(a:hover) {
|
||||||
|
background: rgb(99, 177, 249);
|
||||||
|
border-bottom: 2px solid black;
|
||||||
|
color: black;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@@ -1,28 +1,28 @@
|
|||||||
<style>
|
|
||||||
div {
|
|
||||||
background-color: rgba(99,249,105, 0.2);
|
|
||||||
border-left: 4px solid rgb(99,249,105);
|
|
||||||
border-radius: 5px;
|
|
||||||
margin: 1rem 0;
|
|
||||||
padding: .75rem 1.5rem 1rem 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
div :global(a) {
|
|
||||||
color: inherit;
|
|
||||||
border-bottom: 2px dashed rgb(99,249,105);
|
|
||||||
margin: 0 -3px;
|
|
||||||
padding: 0 3px;
|
|
||||||
}
|
|
||||||
div :global(a:active),
|
|
||||||
div :global(a:focus),
|
|
||||||
div :global(a:hover) {
|
|
||||||
background: rgb(99,249,105);
|
|
||||||
border-bottom: 2px solid black;
|
|
||||||
color: black;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<slot></slot>
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
background-color: rgba(99, 249, 105, 0.2);
|
||||||
|
border-left: 4px solid rgb(99, 249, 105);
|
||||||
|
border-radius: 5px;
|
||||||
|
margin: 1rem 0;
|
||||||
|
padding: 0.75rem 1.5rem 1rem 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
div :global(a) {
|
||||||
|
color: inherit;
|
||||||
|
border-bottom: 2px dashed rgb(99, 249, 105);
|
||||||
|
margin: 0 -3px;
|
||||||
|
padding: 0 3px;
|
||||||
|
}
|
||||||
|
div :global(a:active),
|
||||||
|
div :global(a:focus),
|
||||||
|
div :global(a:hover) {
|
||||||
|
background: rgb(99, 249, 105);
|
||||||
|
border-bottom: 2px solid black;
|
||||||
|
color: black;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@@ -1,28 +1,28 @@
|
|||||||
<style>
|
|
||||||
div {
|
|
||||||
background-color: rgba(255,62,1, 0.2);
|
|
||||||
border-left: 4px solid rgb(255,62,1);
|
|
||||||
border-radius: 5px;
|
|
||||||
margin: 1rem 0;
|
|
||||||
padding: .75rem 1.5rem 1rem 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
div :global(a) {
|
|
||||||
color: inherit;
|
|
||||||
border-bottom: 2px dashed rgb(255, 62, 1);
|
|
||||||
margin: 0 -3px;
|
|
||||||
padding: 0 3px;
|
|
||||||
}
|
|
||||||
div :global(a:active),
|
|
||||||
div :global(a:focus),
|
|
||||||
div :global(a:hover) {
|
|
||||||
background: rgba(255, 62, 1);
|
|
||||||
border-bottom: 2px solid black;
|
|
||||||
color: black;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<slot></slot>
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
background-color: rgba(255, 62, 1, 0.2);
|
||||||
|
border-left: 4px solid rgb(255, 62, 1);
|
||||||
|
border-radius: 5px;
|
||||||
|
margin: 1rem 0;
|
||||||
|
padding: 0.75rem 1.5rem 1rem 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
div :global(a) {
|
||||||
|
color: inherit;
|
||||||
|
border-bottom: 2px dashed rgb(255, 62, 1);
|
||||||
|
margin: 0 -3px;
|
||||||
|
padding: 0 3px;
|
||||||
|
}
|
||||||
|
div :global(a:active),
|
||||||
|
div :global(a:focus),
|
||||||
|
div :global(a:hover) {
|
||||||
|
background: rgba(255, 62, 1);
|
||||||
|
border-bottom: 2px solid black;
|
||||||
|
color: black;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@@ -1,6 +1,5 @@
|
|||||||
<script>
|
<script>
|
||||||
export let title = '';
|
export let title = '';
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
@@ -19,5 +18,4 @@
|
|||||||
text-align: start;
|
text-align: start;
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,75 +1,75 @@
|
|||||||
<script>
|
<script>
|
||||||
import CategoryTree from "$lib/components/recipes/CategoryTree.svelte";
|
import CategoryTree from '$lib/components/recipes/CategoryTree.svelte';
|
||||||
import Icon from '$lib/components/Icon/index.svelte';
|
import Icon from '$lib/components/Icon/index.svelte';
|
||||||
import { categories } from '$lib/stores/recipes';
|
import { categories } from '$lib/stores/recipes';
|
||||||
import { page } from '$app/stores';
|
import { page } from '$app/stores';
|
||||||
|
|
||||||
export let title,
|
export let title,
|
||||||
description = "";
|
description = '';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
<div class="TOC">
|
<div class="TOC">
|
||||||
<h1>Table of Contents</h1>
|
<h1>Table of Contents</h1>
|
||||||
{#each $categories as node}
|
{#each $categories as node}
|
||||||
<div class="TOCLink" class:active={$page.path.includes(node.path)}>
|
<div class="TOCLink" class:active={$page.path.includes(node.path)}>
|
||||||
<Icon name={node.meta.icon} />
|
<Icon name={node.meta.icon} />
|
||||||
<a href={node.path}>{node.meta.title}</a>
|
<a href={node.path}>{node.meta.title}</a>
|
||||||
</div>
|
</div>
|
||||||
{#if $page.path.includes(node.path)}
|
{#if $page.path.includes(node.path)}
|
||||||
<CategoryTree nodes={node.children} />
|
<CategoryTree nodes={node.children} />
|
||||||
{/if}
|
{/if}
|
||||||
{/each}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
<article>
|
<article>
|
||||||
<h1>{title}</h1>
|
<h1>{title}</h1>
|
||||||
<slot />
|
<slot />
|
||||||
</article>
|
</article>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.TOCLink {
|
.TOCLink {
|
||||||
align-items: baseline;
|
align-items: baseline;
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: auto 1fr;
|
grid-template-columns: auto 1fr;
|
||||||
grid-gap: 10px;
|
grid-gap: 10px;
|
||||||
padding: 1rem 0;
|
padding: 1rem 0;
|
||||||
border-bottom: 1px solid #d0deec;
|
border-bottom: 1px solid #d0deec;
|
||||||
font-size: 1.1em;
|
font-size: 1.1em;
|
||||||
}
|
}
|
||||||
.TOCLink.active a {
|
.TOCLink.active a {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
.TOCLink img {
|
.TOCLink img {
|
||||||
height: 1em;
|
height: 1em;
|
||||||
}
|
}
|
||||||
@media (min-width: 1024px) {
|
@media (min-width: 1024px) {
|
||||||
main {
|
main {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
main {
|
main {
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
max-width: var(--width-content);
|
max-width: var(--width-content);
|
||||||
padding: 2rem 1rem;
|
padding: 2rem 1rem;
|
||||||
}
|
}
|
||||||
.TOC {
|
.TOC {
|
||||||
margin-right: 2rem;
|
margin-right: 2rem;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
font-family: Overpass;
|
font-family: Overpass;
|
||||||
line-height: 150%;
|
line-height: 150%;
|
||||||
}
|
}
|
||||||
.TOC :global(a) {
|
.TOC :global(a) {
|
||||||
color: #2e2e35;
|
color: #2e2e35;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
}
|
}
|
||||||
article {
|
article {
|
||||||
flex: 3;
|
flex: 3;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
}
|
}
|
||||||
@media (min-width: 1024px) {
|
@media (min-width: 1024px) {
|
||||||
article {
|
article {
|
||||||
margin-left: 2rem;
|
margin-left: 2rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,85 +1,85 @@
|
|||||||
<script>
|
<script>
|
||||||
import CategoryTree from "$lib/components/recipes/CategoryTree.svelte";
|
import CategoryTree from '$lib/components/recipes/CategoryTree.svelte';
|
||||||
import Icon from '$lib/components/Icon/index.svelte';
|
import Icon from '$lib/components/Icon/index.svelte';
|
||||||
import { categories } from '$lib/stores/recipes';
|
import { categories } from '$lib/stores/recipes';
|
||||||
import { page } from '$app/stores';
|
import { page } from '$app/stores';
|
||||||
|
|
||||||
const childrenNodes = $categories.find(c => c.path === $page.path).children || [];
|
const childrenNodes = $categories.find((c) => c.path === $page.path).children || [];
|
||||||
|
|
||||||
export let title,
|
export let title,
|
||||||
description = "";
|
description = '';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
<div class="TOC">
|
<div class="TOC">
|
||||||
<h1>Table of Contents</h1>
|
<h1>Table of Contents</h1>
|
||||||
{#each $categories as node}
|
{#each $categories as node}
|
||||||
<div class="TOCLink" class:active={$page.path.includes(node.path)}>
|
<div class="TOCLink" class:active={$page.path.includes(node.path)}>
|
||||||
<Icon name={node.meta.icon} />
|
<Icon name={node.meta.icon} />
|
||||||
<a href={node.path}>{node.meta.title}</a>
|
<a href={node.path}>{node.meta.title}</a>
|
||||||
</div>
|
</div>
|
||||||
{#if $page.path.includes(node.path)}
|
{#if $page.path.includes(node.path)}
|
||||||
<CategoryTree nodes={node.children} />
|
<CategoryTree nodes={node.children} />
|
||||||
{/if}
|
{/if}
|
||||||
{/each}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
<article>
|
<article>
|
||||||
<h1>{title}</h1>
|
<h1>{title}</h1>
|
||||||
<slot />
|
<slot />
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
{#each childrenNodes as node}
|
{#each childrenNodes as node}
|
||||||
<li>
|
<li>
|
||||||
<a href={node.path}>{node.meta.title}</a>
|
<a href={node.path}>{node.meta.title}</a>
|
||||||
</li>
|
</li>
|
||||||
{/each}
|
{/each}
|
||||||
</ul>
|
</ul>
|
||||||
</article>
|
</article>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.TOCLink {
|
.TOCLink {
|
||||||
align-items: baseline;
|
align-items: baseline;
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: auto 1fr;
|
grid-template-columns: auto 1fr;
|
||||||
grid-gap: 10px;
|
grid-gap: 10px;
|
||||||
padding: 1rem 0;
|
padding: 1rem 0;
|
||||||
border-bottom: 1px solid #d0deec;
|
border-bottom: 1px solid #d0deec;
|
||||||
font-size: 1.1em;
|
font-size: 1.1em;
|
||||||
}
|
}
|
||||||
.TOCLink.active a {
|
.TOCLink.active a {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
.TOCLink img {
|
.TOCLink img {
|
||||||
height: 1em;
|
height: 1em;
|
||||||
}
|
}
|
||||||
@media (min-width: 1024px) {
|
@media (min-width: 1024px) {
|
||||||
main {
|
main {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
main {
|
main {
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
max-width: var(--width-content);
|
max-width: var(--width-content);
|
||||||
padding: 2rem 1rem;
|
padding: 2rem 1rem;
|
||||||
}
|
}
|
||||||
.TOC {
|
.TOC {
|
||||||
margin-right: 2rem;
|
margin-right: 2rem;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
font-family: Overpass;
|
font-family: Overpass;
|
||||||
line-height: 150%;
|
line-height: 150%;
|
||||||
}
|
}
|
||||||
.TOC :global(a) {
|
.TOC :global(a) {
|
||||||
color: #2e2e35;
|
color: #2e2e35;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
}
|
}
|
||||||
article {
|
article {
|
||||||
flex: 3;
|
flex: 3;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
}
|
}
|
||||||
@media (min-width: 1024px) {
|
@media (min-width: 1024px) {
|
||||||
article {
|
article {
|
||||||
margin-left: 2rem;
|
margin-left: 2rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,58 +1,61 @@
|
|||||||
import { compare } from './sort';
|
import { compare } from './sort';
|
||||||
|
|
||||||
describe("sort", () => {
|
describe('sort', () => {
|
||||||
const mock = [{
|
const mock = [
|
||||||
"addedOn": "2019-09-29T14:39:13Z",
|
{
|
||||||
"category": "Svelte",
|
addedOn: '2019-09-29T14:39:13Z',
|
||||||
"description": "Boilerplate with TypeScript, Webpack, Storybook, Travis CI, SCSS, Babel, EsLint, Prettier, Jest",
|
category: 'Svelte',
|
||||||
"stars": 51,
|
description:
|
||||||
"tags": [],
|
'Boilerplate with TypeScript, Webpack, Storybook, Travis CI, SCSS, Babel, EsLint, Prettier, Jest',
|
||||||
"title": "agusID/boilerplate-svelte",
|
stars: 51,
|
||||||
"url": "https://github.com/agusID/boilerplate-svelte"
|
tags: [],
|
||||||
},
|
title: 'agusID/boilerplate-svelte',
|
||||||
{
|
url: 'https://github.com/agusID/boilerplate-svelte'
|
||||||
"addedOn": "2020-09-29T14:39:13Z",
|
},
|
||||||
"category": "Svelte",
|
{
|
||||||
"description": "An example repo of a Svelte app that is IE11 compatible",
|
addedOn: '2020-09-29T14:39:13Z',
|
||||||
"stars": 27,
|
category: 'Svelte',
|
||||||
"tags": [],
|
description: 'An example repo of a Svelte app that is IE11 compatible',
|
||||||
"title": "angelozehr/svelte-example-museums",
|
stars: 27,
|
||||||
"url": "https://github.com/angelozehr/svelte-example-museums"
|
tags: [],
|
||||||
}];
|
title: 'angelozehr/svelte-example-museums',
|
||||||
|
url: 'https://github.com/angelozehr/svelte-example-museums'
|
||||||
it("should sort by added_desc", () => {
|
}
|
||||||
mock.sort(compare("added_desc"));
|
];
|
||||||
expect(mock[0].title).toEqual("angelozehr/svelte-example-museums");
|
|
||||||
expect(mock[1].title).toEqual("agusID/boilerplate-svelte");
|
it('should sort by added_desc', () => {
|
||||||
});
|
mock.sort(compare('added_desc'));
|
||||||
|
expect(mock[0].title).toEqual('angelozehr/svelte-example-museums');
|
||||||
it("should sort by added_asc", () => {
|
expect(mock[1].title).toEqual('agusID/boilerplate-svelte');
|
||||||
mock.sort(compare("added_asc"));
|
});
|
||||||
expect(mock[0].title).toEqual("agusID/boilerplate-svelte");
|
|
||||||
expect(mock[1].title).toEqual("angelozehr/svelte-example-museums");
|
it('should sort by added_asc', () => {
|
||||||
});
|
mock.sort(compare('added_asc'));
|
||||||
|
expect(mock[0].title).toEqual('agusID/boilerplate-svelte');
|
||||||
it("should sort by name_asc", () => {
|
expect(mock[1].title).toEqual('angelozehr/svelte-example-museums');
|
||||||
mock.sort(compare("name_asc"));
|
});
|
||||||
expect(mock[0].title).toEqual("agusID/boilerplate-svelte");
|
|
||||||
expect(mock[1].title).toEqual("angelozehr/svelte-example-museums");
|
it('should sort by name_asc', () => {
|
||||||
});
|
mock.sort(compare('name_asc'));
|
||||||
|
expect(mock[0].title).toEqual('agusID/boilerplate-svelte');
|
||||||
it("should sort by name_desc", () => {
|
expect(mock[1].title).toEqual('angelozehr/svelte-example-museums');
|
||||||
mock.sort(compare("name_desc"));
|
});
|
||||||
expect(mock[0].title).toEqual("angelozehr/svelte-example-museums");
|
|
||||||
expect(mock[1].title).toEqual("agusID/boilerplate-svelte");
|
it('should sort by name_desc', () => {
|
||||||
});
|
mock.sort(compare('name_desc'));
|
||||||
|
expect(mock[0].title).toEqual('angelozehr/svelte-example-museums');
|
||||||
it("should sort by stars_asc", () => {
|
expect(mock[1].title).toEqual('agusID/boilerplate-svelte');
|
||||||
mock.sort(compare("stars_asc"));
|
});
|
||||||
expect(mock[0].title).toEqual("angelozehr/svelte-example-museums");
|
|
||||||
expect(mock[1].title).toEqual("agusID/boilerplate-svelte");
|
it('should sort by stars_asc', () => {
|
||||||
});
|
mock.sort(compare('stars_asc'));
|
||||||
|
expect(mock[0].title).toEqual('angelozehr/svelte-example-museums');
|
||||||
it("should sort by stars_desc", () => {
|
expect(mock[1].title).toEqual('agusID/boilerplate-svelte');
|
||||||
mock.sort(compare("stars_desc"));
|
});
|
||||||
expect(mock[0].title).toEqual("agusID/boilerplate-svelte");
|
|
||||||
expect(mock[1].title).toEqual("angelozehr/svelte-example-museums");
|
it('should sort by stars_desc', () => {
|
||||||
});
|
mock.sort(compare('stars_desc'));
|
||||||
});
|
expect(mock[0].title).toEqual('agusID/boilerplate-svelte');
|
||||||
|
expect(mock[1].title).toEqual('angelozehr/svelte-example-museums');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|||||||
@@ -27,7 +27,7 @@
|
|||||||
<Footer />
|
<Footer />
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
main {
|
main {
|
||||||
padding: var(--s-10) var(--s-5) var(--s-20);
|
padding: var(--s-10) var(--s-5) var(--s-20);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,22 +1,23 @@
|
|||||||
<svelte:head>
|
<svelte:head>
|
||||||
<title>About Svelte Society</title>
|
<title>About Svelte Society</title>
|
||||||
</svelte:head>
|
</svelte:head>
|
||||||
<div class="wrapper">
|
<div class="wrapper">
|
||||||
<slot />
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.wrapper {
|
.wrapper {
|
||||||
max-width: 65ch;
|
max-width: 65ch;
|
||||||
}
|
}
|
||||||
.wrapper :global(h2), .wrapper :global(h3) {
|
.wrapper :global(h2),
|
||||||
margin-top: 2rem;
|
.wrapper :global(h3) {
|
||||||
margin-bottom: 1.25rem;
|
margin-top: 2rem;
|
||||||
}
|
margin-bottom: 1.25rem;
|
||||||
.wrapper :global(p) {
|
}
|
||||||
margin-bottom: 1.25rem;
|
.wrapper :global(p) {
|
||||||
}
|
margin-bottom: 1.25rem;
|
||||||
.wrapper :global(li) {
|
}
|
||||||
margin-bottom: 1.1rem;
|
.wrapper :global(li) {
|
||||||
}
|
margin-bottom: 1.1rem;
|
||||||
</style>
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@@ -1,12 +1,12 @@
|
|||||||
const replPath = 'https://svelte.dev/repl'
|
const replPath = 'https://svelte.dev/repl';
|
||||||
const docPath = 'https://svelte.dev/docs'
|
const docPath = 'https://svelte.dev/docs';
|
||||||
|
|
||||||
export const cheatSheet = [
|
export const cheatSheet = [
|
||||||
{
|
{
|
||||||
title: "Svelte Component",
|
title: 'Svelte Component',
|
||||||
repl: `${replPath}/6a5416148c4b410b8ee0325eef54b107`,
|
repl: `${replPath}/6a5416148c4b410b8ee0325eef54b107`,
|
||||||
doc: `${docPath}#Component_format`,
|
doc: `${docPath}#Component_format`,
|
||||||
content: `<!-- Widget.svelte -->
|
content: `<!-- Widget.svelte -->
|
||||||
<script>
|
<script>
|
||||||
export let textValue
|
export let textValue
|
||||||
</script>
|
</script>
|
||||||
@@ -31,12 +31,12 @@ export const cheatSheet = [
|
|||||||
|
|
||||||
<Widget textValue="I'm a svelte component" />
|
<Widget textValue="I'm a svelte component" />
|
||||||
`
|
`
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Expressions",
|
title: 'Expressions',
|
||||||
repl: `${replPath}/27bd55a7357046f2911923069dee9d86`,
|
repl: `${replPath}/27bd55a7357046f2911923069dee9d86`,
|
||||||
doc: `${docPath}#Text_expressions`,
|
doc: `${docPath}#Text_expressions`,
|
||||||
content: `<script>
|
content: `<script>
|
||||||
let isShowing = true
|
let isShowing = true
|
||||||
let cat = 'cat'
|
let cat = 'cat'
|
||||||
let user = {name: 'John Wick'}
|
let user = {name: 'John Wick'}
|
||||||
@@ -55,13 +55,12 @@ export const cheatSheet = [
|
|||||||
<p>{user.name}</p>
|
<p>{user.name}</p>
|
||||||
<p>{cat + \`s\`}</p>
|
<p>{cat + \`s\`}</p>
|
||||||
<p>{\`name \${user.name}\`}</p>`
|
<p>{\`name \${user.name}\`}</p>`
|
||||||
|
},
|
||||||
},
|
{
|
||||||
{
|
title: 'Simple Bind',
|
||||||
title: "Simple Bind",
|
repl: `${replPath}/505dfd64708844c7b28ead4834059d69`,
|
||||||
repl: `${replPath}/505dfd64708844c7b28ead4834059d69`,
|
doc: `${docPath}#Attributes_and_props`,
|
||||||
doc: `${docPath}#Attributes_and_props`,
|
content: `//MyLink.svelte
|
||||||
content: `//MyLink.svelte
|
|
||||||
<script>
|
<script>
|
||||||
export let href = ''
|
export let href = ''
|
||||||
export let title = ''
|
export let title = ''
|
||||||
@@ -88,12 +87,12 @@ export const cheatSheet = [
|
|||||||
|
|
||||||
<MyLink {...link} />
|
<MyLink {...link} />
|
||||||
`
|
`
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Two Way Bind",
|
title: 'Two Way Bind',
|
||||||
repl: `${replPath}/63c1cc2e6ab24d33ae531d6acdabc14e`,
|
repl: `${replPath}/63c1cc2e6ab24d33ae531d6acdabc14e`,
|
||||||
doc: `${docPath}#bind_element_property`,
|
doc: `${docPath}#bind_element_property`,
|
||||||
content: `<MyInput bind:value={value} />
|
content: `<MyInput bind:value={value} />
|
||||||
|
|
||||||
// Shorthand
|
// Shorthand
|
||||||
<MyInput bind:value />
|
<MyInput bind:value />
|
||||||
@@ -133,12 +132,12 @@ export const cheatSheet = [
|
|||||||
|
|
||||||
<div bind:this={myDiv}/>
|
<div bind:this={myDiv}/>
|
||||||
`
|
`
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'Use action',
|
title: 'Use action',
|
||||||
repl: `${replPath}/6262d071414f42e98cdeed1f3c78d93e`,
|
repl: `${replPath}/6262d071414f42e98cdeed1f3c78d93e`,
|
||||||
doc: `${docPath}#use_action`,
|
doc: `${docPath}#use_action`,
|
||||||
content: `<script>
|
content: `<script>
|
||||||
function myFunction(node) {
|
function myFunction(node) {
|
||||||
// the node has been mounted in the DOM
|
// the node has been mounted in the DOM
|
||||||
return {
|
return {
|
||||||
@@ -151,12 +150,12 @@ export const cheatSheet = [
|
|||||||
|
|
||||||
<div use:myFunction></div>
|
<div use:myFunction></div>
|
||||||
`
|
`
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Conditional Render",
|
title: 'Conditional Render',
|
||||||
repl: `${replPath}/b023c56cdf0d42819fe7ccc38ea75c41`,
|
repl: `${replPath}/b023c56cdf0d42819fe7ccc38ea75c41`,
|
||||||
doc: `${docPath}#if`,
|
doc: `${docPath}#if`,
|
||||||
content: `{#if condition}
|
content: `{#if condition}
|
||||||
<p>Condition is true</p>
|
<p>Condition is true</p>
|
||||||
{:else if otherCondition}
|
{:else if otherCondition}
|
||||||
<p>OtherCondition is true</p>
|
<p>OtherCondition is true</p>
|
||||||
@@ -169,12 +168,12 @@ export const cheatSheet = [
|
|||||||
<div transition:fade>{value}</div>
|
<div transition:fade>{value}</div>
|
||||||
{/key}
|
{/key}
|
||||||
`
|
`
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Await Template",
|
title: 'Await Template',
|
||||||
repl: `${replPath}/22a36f1affba4334807a133d985ce6ef`,
|
repl: `${replPath}/22a36f1affba4334807a133d985ce6ef`,
|
||||||
doc: `${docPath}#await`,
|
doc: `${docPath}#await`,
|
||||||
content: `{#await promise}
|
content: `{#await promise}
|
||||||
<p>waiting for the promise to resolve...</p>
|
<p>waiting for the promise to resolve...</p>
|
||||||
{:then value}
|
{:then value}
|
||||||
<p>The value is {value}</p>
|
<p>The value is {value}</p>
|
||||||
@@ -182,13 +181,12 @@ export const cheatSheet = [
|
|||||||
<p>Something went wrong: {error.message}</p>
|
<p>Something went wrong: {error.message}</p>
|
||||||
{/await}
|
{/await}
|
||||||
`
|
`
|
||||||
|
},
|
||||||
},
|
{
|
||||||
{
|
title: 'Render HTML',
|
||||||
title: "Render HTML",
|
repl: `${replPath}/44896bb6272d48b2a0a5909678b07cc9`,
|
||||||
repl: `${replPath}/44896bb6272d48b2a0a5909678b07cc9`,
|
doc: `${docPath}#html`,
|
||||||
doc: `${docPath}#html`,
|
content: `<scrit>
|
||||||
content: `<scrit>
|
|
||||||
const myHtml = '<span><strong>My text:</strong> text</span>'
|
const myHtml = '<span><strong>My text:</strong> text</span>'
|
||||||
</scrit>
|
</scrit>
|
||||||
|
|
||||||
@@ -196,13 +194,12 @@ export const cheatSheet = [
|
|||||||
|
|
||||||
{@html myHtml}
|
{@html myHtml}
|
||||||
`
|
`
|
||||||
|
},
|
||||||
},
|
{
|
||||||
{
|
title: 'Handle Events',
|
||||||
title: "Handle Events",
|
repl: `${replPath}/10cfb455b7b84514b35913aabee8b5c3`,
|
||||||
repl: `${replPath}/10cfb455b7b84514b35913aabee8b5c3`,
|
doc: `${docPath}#on_element_event`,
|
||||||
doc: `${docPath}#on_element_event`,
|
content: `<button on:click={handleClick}>
|
||||||
content: `<button on:click={handleClick}>
|
|
||||||
Press me
|
Press me
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
@@ -218,12 +215,12 @@ export const cheatSheet = [
|
|||||||
Press me
|
Press me
|
||||||
</button>
|
</button>
|
||||||
`
|
`
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Forwarding Event",
|
title: 'Forwarding Event',
|
||||||
repl: `${replPath}/f1e3b92d7a3c466bb614aa8f49cde3b1`,
|
repl: `${replPath}/f1e3b92d7a3c466bb614aa8f49cde3b1`,
|
||||||
doc: `${docPath}#createEventDispatcher`,
|
doc: `${docPath}#createEventDispatcher`,
|
||||||
content: `// Widget.svelte
|
content: `// Widget.svelte
|
||||||
<script>
|
<script>
|
||||||
import { createEventDispatcher } from "svelte";
|
import { createEventDispatcher } from "svelte";
|
||||||
const dispatch = createEventDispatcher();
|
const dispatch = createEventDispatcher();
|
||||||
@@ -241,13 +238,12 @@ import Widget from '.Widget.svelte'
|
|||||||
on:message={e => alert(e.detail.text)}>
|
on:message={e => alert(e.detail.text)}>
|
||||||
|
|
||||||
`
|
`
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Rendering List",
|
title: 'Rendering List',
|
||||||
repl: `${replPath}/db8ac032184b455bbeed903ba042937c`,
|
repl: `${replPath}/db8ac032184b455bbeed903ba042937c`,
|
||||||
doc: `${docPath}#each`,
|
doc: `${docPath}#each`,
|
||||||
content:
|
content: `<ul>
|
||||||
`<ul>
|
|
||||||
{#each items as item}
|
{#each items as item}
|
||||||
<li>{item.name} x {item.qty}</li>
|
<li>{item.name} x {item.qty}</li>
|
||||||
{:else}
|
{:else}
|
||||||
@@ -269,14 +265,12 @@ import Widget from '.Widget.svelte'
|
|||||||
</li>
|
</li>
|
||||||
{/each}
|
{/each}
|
||||||
`
|
`
|
||||||
|
},
|
||||||
},
|
{
|
||||||
{
|
title: 'Using Slot',
|
||||||
title: "Using Slot",
|
repl: `${replPath}/4844ee8feb794ed4bde10508cdb177cf`,
|
||||||
repl: `${replPath}/4844ee8feb794ed4bde10508cdb177cf`,
|
doc: `${docPath}#slot`,
|
||||||
doc: `${docPath}#slot`,
|
content: `<!-- Widget.svelte -->
|
||||||
content:
|
|
||||||
`<!-- Widget.svelte -->
|
|
||||||
<div>
|
<div>
|
||||||
<slot>Default content</slot>
|
<slot>Default content</slot>
|
||||||
</div>
|
</div>
|
||||||
@@ -287,14 +281,12 @@ import Widget from '.Widget.svelte'
|
|||||||
<p>I changed the default content</p>
|
<p>I changed the default content</p>
|
||||||
</Widget>
|
</Widget>
|
||||||
`
|
`
|
||||||
|
},
|
||||||
},
|
{
|
||||||
{
|
title: 'Multiple Slot',
|
||||||
title: "Multiple Slot",
|
repl: `${replPath}/abc6ecc5953c4c77af402185a2219df4`,
|
||||||
repl: `${replPath}/abc6ecc5953c4c77af402185a2219df4`,
|
doc: `${docPath}#slot_name`,
|
||||||
doc: `${docPath}#slot_name`,
|
content: `<!-- Widget.svelte -->
|
||||||
content:
|
|
||||||
`<!-- Widget.svelte -->
|
|
||||||
<div>
|
<div>
|
||||||
<slot name="header">
|
<slot name="header">
|
||||||
No header was provided
|
No header was provided
|
||||||
@@ -331,13 +323,12 @@ import Widget from '.Widget.svelte'
|
|||||||
</div>
|
</div>
|
||||||
</FancyList>
|
</FancyList>
|
||||||
`
|
`
|
||||||
|
},
|
||||||
},
|
{
|
||||||
{
|
title: 'Class Binding',
|
||||||
title: "Class Binding",
|
repl: `${replPath}/c0c8e997fec1428ba670d4a95829d110`,
|
||||||
repl: `${replPath}/c0c8e997fec1428ba670d4a95829d110`,
|
doc: `${docPath}#class_name`,
|
||||||
doc: `${docPath}#class_name`,
|
content: `<script>
|
||||||
content: `<script>
|
|
||||||
export let type = 'normal'
|
export let type = 'normal'
|
||||||
export let active = true
|
export let active = true
|
||||||
</script>
|
</script>
|
||||||
@@ -355,14 +346,12 @@ import Widget from '.Widget.svelte'
|
|||||||
|
|
||||||
<div class:active>...</div>
|
<div class:active>...</div>
|
||||||
`
|
`
|
||||||
|
},
|
||||||
},
|
{
|
||||||
{
|
title: 'Lifecycle',
|
||||||
title: "Lifecycle",
|
repl: `${replPath}/ca959a7e552a4b35aa678dbe9a2d2b48`,
|
||||||
repl: `${replPath}/ca959a7e552a4b35aa678dbe9a2d2b48`,
|
doc: `${docPath}#svelte`,
|
||||||
doc: `${docPath}#svelte`,
|
content: `
|
||||||
content:
|
|
||||||
`
|
|
||||||
<script>
|
<script>
|
||||||
import { onMount } from 'svelte'
|
import { onMount } from 'svelte'
|
||||||
|
|
||||||
@@ -380,14 +369,12 @@ onMount(() => {
|
|||||||
afterUpdate(() => {}),
|
afterUpdate(() => {}),
|
||||||
onDestroy(() => {})
|
onDestroy(() => {})
|
||||||
]`
|
]`
|
||||||
|
},
|
||||||
},
|
{
|
||||||
{
|
title: 'Animations',
|
||||||
title: "Animations",
|
repl: `${replPath}/f2ba3adfe6cf49a58a38540530567354`,
|
||||||
repl: `${replPath}/f2ba3adfe6cf49a58a38540530567354`,
|
doc: `${docPath}#svelte_animate`,
|
||||||
doc: `${docPath}#svelte_animate`,
|
content: `<script>
|
||||||
content:
|
|
||||||
`<script>
|
|
||||||
import { flip } from "svelte/animate";
|
import { flip } from "svelte/animate";
|
||||||
import { quintOut } from "svelte/easing";
|
import { quintOut } from "svelte/easing";
|
||||||
let list = [1, 2, 3];
|
let list = [1, 2, 3];
|
||||||
@@ -403,13 +390,12 @@ onMount(() => {
|
|||||||
</div>
|
</div>
|
||||||
{/each}
|
{/each}
|
||||||
`
|
`
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Transitions",
|
title: 'Transitions',
|
||||||
repl: `${replPath}/6e505d732f1e48abbd7d3c4ba4cfc34c`,
|
repl: `${replPath}/6e505d732f1e48abbd7d3c4ba4cfc34c`,
|
||||||
doc: `${docPath}#svelte_transition`,
|
doc: `${docPath}#svelte_transition`,
|
||||||
content:
|
content: `<script>
|
||||||
`<script>
|
|
||||||
import { fade } from "svelte/transition";
|
import { fade } from "svelte/transition";
|
||||||
export let condition;
|
export let condition;
|
||||||
</script>
|
</script>
|
||||||
@@ -423,13 +409,12 @@ onMount(() => {
|
|||||||
// Other transitions
|
// Other transitions
|
||||||
[Blur, Scale, Fly, Draw, Slide]
|
[Blur, Scale, Fly, Draw, Slide]
|
||||||
`
|
`
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Reactive Expressions",
|
title: 'Reactive Expressions',
|
||||||
repl: `${replPath}/0f7793bf7b0745f1b356327fad4a71e1`,
|
repl: `${replPath}/0f7793bf7b0745f1b356327fad4a71e1`,
|
||||||
doc: `${docPath}#2_Assignments_are_reactive`,
|
doc: `${docPath}#2_Assignments_are_reactive`,
|
||||||
content:
|
content: `<script>
|
||||||
`<script>
|
|
||||||
let num = 0
|
let num = 0
|
||||||
$: squared = num * num
|
$: squared = num * num
|
||||||
$: cubed = squared * num
|
$: cubed = squared * num
|
||||||
@@ -442,13 +427,12 @@ onMount(() => {
|
|||||||
<p>{squared}</p>
|
<p>{squared}</p>
|
||||||
<p>{cubed}</p>
|
<p>{cubed}</p>
|
||||||
`
|
`
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Reactive Statement",
|
title: 'Reactive Statement',
|
||||||
repl: `${replPath}/b959727e045e4eb7b70c7f16e425fed5`,
|
repl: `${replPath}/b959727e045e4eb7b70c7f16e425fed5`,
|
||||||
doc: `${docPath}#3_$_marks_a_statement_as_reactive`,
|
doc: `${docPath}#3_$_marks_a_statement_as_reactive`,
|
||||||
content:
|
content: `<script>
|
||||||
`<script>
|
|
||||||
$: if (count >= 10) {
|
$: if (count >= 10) {
|
||||||
alert('count is dangerously high!')
|
alert('count is dangerously high!')
|
||||||
count = 9
|
count = 9
|
||||||
@@ -486,5 +470,5 @@ onMount(() => {
|
|||||||
})()
|
})()
|
||||||
</script>
|
</script>
|
||||||
`
|
`
|
||||||
},
|
}
|
||||||
]
|
];
|
||||||
|
|||||||
@@ -20,11 +20,11 @@
|
|||||||
</main>
|
</main>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
main {
|
main {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
justify-items: stretch;
|
justify-items: stretch;
|
||||||
gap: var(--s-10);
|
gap: var(--s-10);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,24 +1,24 @@
|
|||||||
const components = new Array(6)
|
const components = new Array(6)
|
||||||
.fill({
|
.fill({
|
||||||
image: "/preview-image.png",
|
image: '/preview-image.png',
|
||||||
title: "svelte-tooltip",
|
title: 'svelte-tooltip',
|
||||||
description:
|
description:
|
||||||
"A tooltip action that you can attach to any element and pass in a Svelte component...",
|
'A tooltip action that you can attach to any element and pass in a Svelte component...',
|
||||||
tags: [],
|
tags: [],
|
||||||
stars: 511,
|
stars: 511,
|
||||||
addedOn: new Date(),
|
addedOn: new Date(),
|
||||||
category: "forms"
|
category: 'forms'
|
||||||
})
|
})
|
||||||
.concat(
|
.concat(
|
||||||
new Array(3).fill({
|
new Array(3).fill({
|
||||||
image: "/preview-image.png",
|
image: '/preview-image.png',
|
||||||
title: "svelte-ui",
|
title: 'svelte-ui',
|
||||||
description:
|
description:
|
||||||
"A tooltip action that you can attach to any element and pass in a Svelte component...",
|
'A tooltip action that you can attach to any element and pass in a Svelte component...',
|
||||||
tags: [],
|
tags: [],
|
||||||
stars: 511,
|
stars: 511,
|
||||||
addedOn: new Date(),
|
addedOn: new Date(),
|
||||||
category: "ui"
|
category: 'ui'
|
||||||
})
|
})
|
||||||
);
|
);
|
||||||
export default components;
|
export default components;
|
||||||
|
|||||||
@@ -2216,12 +2216,7 @@
|
|||||||
"description": "Add OAuth2 authorization in Svelte (and SvelteKit, works with SSR)",
|
"description": "Add OAuth2 authorization in Svelte (and SvelteKit, works with SSR)",
|
||||||
"npm": "@macfja/svelte-oauth2",
|
"npm": "@macfja/svelte-oauth2",
|
||||||
"stars": 3,
|
"stars": 3,
|
||||||
"tags": [
|
"tags": ["auth", "integrations", "ssr", "third party services"],
|
||||||
"auth",
|
|
||||||
"integrations",
|
|
||||||
"ssr",
|
|
||||||
"third party services"
|
|
||||||
],
|
|
||||||
"url": "https://github.com/macfja/svelte-oauth2#readme",
|
"url": "https://github.com/macfja/svelte-oauth2#readme",
|
||||||
"addedOn": "2021-09-10T20:00:00.000Z"
|
"addedOn": "2021-09-10T20:00:00.000Z"
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -83,7 +83,7 @@
|
|||||||
</ul>
|
</ul>
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<a href="/help/components" class="submit">Submit a component</a>
|
<a href="/help/components" class="submit">Submit a component</a>
|
||||||
<input
|
<input
|
||||||
class="searchbar"
|
class="searchbar"
|
||||||
|
|||||||
@@ -7,18 +7,16 @@
|
|||||||
error: new Error()
|
error: new Error()
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import Societies from '$lib/components/Societies/index.svelte';
|
import Societies from '$lib/components/Societies/index.svelte';
|
||||||
import EventListElement from '$lib/components/EventListElement/index.svelte';
|
import EventListElement from '$lib/components/EventListElement/index.svelte';
|
||||||
export let events = {};
|
export let events = {};
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<svelte:head>
|
<svelte:head>
|
||||||
<title>Events - Svelte Society</title>
|
<title>Events - Svelte Society</title>
|
||||||
</svelte:head>
|
</svelte:head>
|
||||||
|
|
||||||
<article class="wrapper">
|
<article class="wrapper">
|
||||||
@@ -50,5 +48,4 @@
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<svelte:head>
|
<svelte:head>
|
||||||
<title>Help</title>
|
<title>Help</title>
|
||||||
</svelte:head>
|
</svelte:head>
|
||||||
<main>
|
<main>
|
||||||
<slot />
|
<slot />
|
||||||
</main>
|
</main>
|
||||||
|
|||||||
@@ -14,7 +14,7 @@
|
|||||||
</svelte:head>
|
</svelte:head>
|
||||||
|
|
||||||
<article class="container">
|
<article class="container">
|
||||||
<h1 class="text-center">Welcome to Svelte Society!</h1>
|
<h1 class="text-center">Welcome to Svelte Society!</h1>
|
||||||
<section>
|
<section>
|
||||||
<p>
|
<p>
|
||||||
We are a volunteer global network of Svelte fans that strive to promote Svelte and its
|
We are a volunteer global network of Svelte fans that strive to promote Svelte and its
|
||||||
@@ -61,28 +61,28 @@
|
|||||||
</p>
|
</p>
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
article{
|
article {
|
||||||
max-width: 1024px;
|
max-width: 1024px;
|
||||||
display: grid;
|
display: grid;
|
||||||
gap: var(--s-20);
|
gap: var(--s-20);
|
||||||
}
|
}
|
||||||
h1 {
|
h1 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
section {
|
section {
|
||||||
display: grid;
|
display: grid;
|
||||||
gap: var(--s-5);
|
gap: var(--s-5);
|
||||||
}
|
}
|
||||||
ul {
|
ul {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
column-gap: var(--s-20);
|
column-gap: var(--s-20);
|
||||||
row-gap: var(--s-5);
|
row-gap: var(--s-5);
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
img {
|
img {
|
||||||
width: 128px;
|
width: 128px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -112,8 +112,7 @@
|
|||||||
}
|
}
|
||||||
@media screen and (max-width: 600px) {
|
@media screen and (max-width: 600px) {
|
||||||
.categories-wrap {
|
.categories-wrap {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
grid-template-columns: 1fr
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.category-style {
|
.category-style {
|
||||||
|
|||||||
@@ -3,8 +3,7 @@
|
|||||||
*/
|
*/
|
||||||
export async function get() {
|
export async function get() {
|
||||||
const pages = await Promise.all(
|
const pages = await Promise.all(
|
||||||
Object.entries(import.meta.glob('./**/*.svx'))
|
Object.entries(import.meta.glob('./**/*.svx')).map(async ([path, page]) => {
|
||||||
.map(async ([path, page]) => {
|
|
||||||
const { metadata } = await page();
|
const { metadata } = await page();
|
||||||
const filename = path.split('/').pop();
|
const filename = path.split('/').pop();
|
||||||
path = '/recipes' + path.substring(1, path.length - '.svx'.length);
|
path = '/recipes' + path.substring(1, path.length - '.svx'.length);
|
||||||
@@ -15,11 +14,11 @@ export async function get() {
|
|||||||
})
|
})
|
||||||
);
|
);
|
||||||
|
|
||||||
const categories = pages.filter(page => page.meta.layout === 'recipeCategory');
|
const categories = pages.filter((page) => page.meta.layout === 'recipeCategory');
|
||||||
|
|
||||||
categories.forEach(category => {
|
categories.forEach((category) => {
|
||||||
category.children = [];
|
category.children = [];
|
||||||
pages.forEach(p => {
|
pages.forEach((p) => {
|
||||||
if (category !== p && p.path.startsWith(category.path)) {
|
if (category !== p && p.path.startsWith(category.path)) {
|
||||||
category.children.push(p);
|
category.children.push(p);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -4,7 +4,7 @@
|
|||||||
import components from './templates.json';
|
import components from './templates.json';
|
||||||
import { compare, selectSortItems } from '$lib/utils/sort';
|
import { compare, selectSortItems } from '$lib/utils/sort';
|
||||||
import Select from '$lib/components/Select.svelte';
|
import Select from '$lib/components/Select.svelte';
|
||||||
import SearchLayout from '$lib/layouts/SearchLayout.svelte';
|
import SearchLayout from '$lib/layouts/SearchLayout.svelte';
|
||||||
|
|
||||||
let searchValue;
|
let searchValue;
|
||||||
|
|
||||||
@@ -77,27 +77,26 @@ import SearchLayout from '$lib/layouts/SearchLayout.svelte';
|
|||||||
isClearable={false}
|
isClearable={false}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<a href='/help/components' class="submit">Submit a template</a>
|
<a href="/help/components" class="submit">Submit a template</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<input
|
<input
|
||||||
class="searchbar"
|
class="searchbar"
|
||||||
type="text"
|
type="text"
|
||||||
placeholder="Search for templates..."
|
placeholder="Search for templates..."
|
||||||
bind:value={searchValue}
|
bind:value={searchValue}
|
||||||
/>
|
/>
|
||||||
<span class="searchbar-count"
|
<span class="searchbar-count"
|
||||||
>{dataToDisplay.length} result{#if dataToDisplay.length !== 1}s{/if}</span
|
>{dataToDisplay.length} result{#if dataToDisplay.length !== 1}s{/if}</span
|
||||||
>
|
>
|
||||||
</section>
|
</section>
|
||||||
<section slot="items">
|
<section slot="items">
|
||||||
{#each categories as category}
|
{#each categories as category}
|
||||||
<List title={category || 'Unclassified'}>
|
<List title={category || 'Unclassified'}>
|
||||||
{#each dataToDisplay.filter((d) => d.category === category) as data}
|
{#each dataToDisplay.filter((d) => d.category === category) as data}
|
||||||
<ComponentCard {...data} />
|
<ComponentCard {...data} />
|
||||||
{/each}
|
{/each}
|
||||||
</List>
|
</List>
|
||||||
{/each}
|
{/each}
|
||||||
</section>
|
</section>
|
||||||
</SearchLayout>
|
</SearchLayout>
|
||||||
|
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
<script>
|
<script>
|
||||||
import ComponentCard from '$lib/components/ComponentIndex/Card.svelte';
|
import ComponentCard from '$lib/components/ComponentIndex/Card.svelte';
|
||||||
import List from '$lib/components/ComponentIndex/CardList.svelte';
|
import List from '$lib/components/ComponentIndex/CardList.svelte';
|
||||||
import SearchLayout from '$layouts/SearchLayout.svelte';
|
import SearchLayout from '$layouts/SearchLayout.svelte';
|
||||||
import tools from './tools.json';
|
import tools from './tools.json';
|
||||||
import Select from '$lib/components/Select.svelte';
|
import Select from '$lib/components/Select.svelte';
|
||||||
import { compare, selectSortItems } from '$lib/utils/sort';
|
import { compare, selectSortItems } from '$lib/utils/sort';
|
||||||
@@ -75,7 +75,7 @@
|
|||||||
showIndicator
|
showIndicator
|
||||||
isClearable={false}
|
isClearable={false}
|
||||||
/>
|
/>
|
||||||
<a href="/help/components" class="submit">Submit a tool</a>
|
<a href="/help/components" class="submit">Submit a tool</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<input
|
<input
|
||||||
@@ -89,13 +89,12 @@
|
|||||||
>
|
>
|
||||||
</section>
|
</section>
|
||||||
<section slot="items">
|
<section slot="items">
|
||||||
{#each categories as category}
|
{#each categories as category}
|
||||||
<List title={category || 'Unclassified'}>
|
<List title={category || 'Unclassified'}>
|
||||||
{#each dataToDisplay.filter((d) => d.category === category) as data}
|
{#each dataToDisplay.filter((d) => d.category === category) as data}
|
||||||
<ComponentCard {...data} />
|
<ComponentCard {...data} />
|
||||||
{/each}
|
{/each}
|
||||||
</List>
|
</List>
|
||||||
{/each}
|
{/each}
|
||||||
|
</section>
|
||||||
</section>
|
|
||||||
</SearchLayout>
|
</SearchLayout>
|
||||||
|
|||||||
Reference in New Issue
Block a user