Skip to content

Commit

Permalink
huge changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@LunaeSomnia
LunaeSomnia committed Jun 6, 2023
1 parent eeb20bd commit 7169e72
Show file tree
Hide file tree
Showing 120 changed files with 1,866 additions and 1,488 deletions.
528 changes: 270 additions & 258 deletions package-lock.json
View file

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
},
"devDependencies": {
"@sveltejs/adapter-auto": "^2.0.0",
"@sveltejs/kit": "^1.5.0",
"@sveltejs/kit": "^1.20.0",
"@typescript-eslint/eslint-plugin": "^5.45.0",
"@typescript-eslint/parser": "^5.45.0",
"eslint": "^8.28.0",
Expand All @@ -35,4 +35,4 @@
"sass": "^1.62.0",
"svelte-markdown": "^0.2.3"
}
}
}
31 changes: 17 additions & 14 deletions src/app.html
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,21 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/vizia_logo.svg" />
<title>Vizia</title>
<meta name="viewport" content="width=device-width" />

<link rel="preconnect" href="https://api.fonts.coollabs.io" crossorigin />
<link href="https://api.fonts.coollabs.io/css2?family=Inter:wght@400;600;800&display=swap" rel="stylesheet" />
<link href="https://api.fonts.coollabs.io/css2?family=Fira+Code:wght@400;600&display=swap" rel="stylesheet" />
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/vizia_logo.svg" />
<title>Vizia</title>
<meta name="viewport" content="width=device-width" />

%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div>
</body>
</html>
<link rel="preconnect" href="https://api.fonts.coollabs.io" crossorigin />
<link href="https://api.fonts.coollabs.io/css2?family=Rubik:wght@400;600;800&display=swap" rel="stylesheet" />
<link href="https://api.fonts.coollabs.io/css2?family=Fira+Code:wght@400;600&display=swap" rel="stylesheet" />

%sveltekit.head%
</head>

<body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div>
</body>

</html>
8 changes: 8 additions & 0 deletions src/lib/assets/vizia_logo_white.svg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
36 changes: 36 additions & 0 deletions src/lib/blogs.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@

export interface IBlogPost {
date: string;
title: string;
queryName: string;
description: string;
author: string;
image: string;
type: string;
markdown: string;
path: string;
}

export class BlogPost implements IBlogPost {
date: string;
title: string;
queryName: string;
description: string;
author: string;
image: string;
type: string;
markdown: string;
path: string;

constructor(post: IBlogPost) {
this.date = post.date
this.title = post.date
this.queryName = post.queryName
this.description = post.description
this.author = post.author
this.image = post.date
this.type = post.type
this.markdown = post.markdown
this.path = post.path
}
}
206 changes: 100 additions & 106 deletions src/lib/components/Card.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,130 +1,124 @@
<script lang="ts">
import type { BlogPost, Tutorial } from '$lib/types';
import { base } from '$app/paths';
import ViziaLogo from '$lib/assets/vizia_logo.svg';
export let decorations: "none" = "none"
export let id = ""
export let link = ""
export let title = "Card title"
export let desc = "Description here"
export let img = ""
import ViziaLogoWhite from '$lib/assets/vizia_logo_white.svg';
export let decorations: 'none' = 'none';
export let id = '';
export let link = '';
export let title = 'Card title';
export let desc = 'Description here';
export let img = '';
export let date: string | null = null;
export let invertInfo = false
export let imgLayout: "side" | "bottom" = "side"
export let style = ""
export let invertInfo = false;
export let imgLayout: 'side' | 'bottom' = 'side';
export let style = '';
</script>

<a class="card img{imgLayout}" href="{base}/{link}" style={style}>
<a class="card img{imgLayout}" href={link} {style}>
<div class="info" class:invert={invertInfo}>
<h1 id="{id}">{title}</h1>
<p>{desc}</p>
</div>
<h1 {id}>{title}</h1>
<p>{desc}</p>
</div>
<!-- <div class="wrapper">
<p class="chip {tutorial.type}">{tutorial.type}</p>
<p>by {tutorial.author}</p>
</div> -->
<div class="sub">
{#if img === ""}
<div class="sub">
{#if img === ''}
<!-- svelte-ignore a11y-missing-attribute -->
<svg class="default-img" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.158 2.21573C14.2526 1.9924 14.4716 1.84734 14.7142 1.84734H17.3953C17.8288 1.84734 18.1212 2.2904 17.9507 2.68897L13.907 12.1433C13.8118 12.3656 13.5933 12.5098 13.3515 12.5098H12.2596C12.0156 12.5098 11.7957 12.3631 11.7019 12.138L10.9328 10.2911C10.8704 10.1412 10.8709 9.97258 10.9343 9.82313L14.158 2.21573Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.30452 1.87885C5.55001 1.877 5.77219 2.02392 5.86664 2.25051L10.7797 14.0375C10.8735 14.2625 11.0935 14.4091 11.3373 14.4091H12.147C12.5724 14.4091 12.8646 14.8371 12.7096 15.2333L11.7157 17.7734C11.6251 18.005 11.4018 18.1574 11.1532 18.1574H8.92831C8.68511 18.1574 8.46562 18.0115 8.37141 17.7873L2.04782 2.73727C1.88128 2.34097 2.17033 1.90244 2.60019 1.8992L5.30452 1.87885Z" fill="white"/>
</svg>
<img src={ViziaLogoWhite} class="default-img" />
{/if}

{/if}


<slot />
</div>
<slot />
</div>
</a>

<style lang="scss">
.card {
--backgroundColor: var(--c-0);
--textColor: #fff;
--backgroundColor: var(--c-0);
--textColor: #fff;
position: relative;
position: relative;
border-radius: 0.5rem;
padding: 2rem;
background: var(--backgroundColor);
box-sizing: border-box;
border: 0.125rem solid;
border-color: transparent;
transition: all 0.25s ease-in-out;
.info {
display: flex;
flex-direction: column;
gap: 1rem;
h1 {
scroll-margin-top: 8rem;
}
* {
color: var(--textColor);
}
}
.sub {
display: block;
border-radius: 0.5rem;
padding: 0.125rem;
box-sizing: content-box;
overflow: hidden;
}
&:hover {
border-color: white;
}
&.imgside {
.info {
width: calc(100% - 12rem);
}
.sub {
position: absolute;
width: 100%;
height: 100%;
left: -0.125rem;
top: -0.125rem;
}
.default-img {
opacity: 0.1;
margin-left: 100%;
transform: translate(-100%, 0);
}
}
&.imgside:hover {
.default-img {
opacity: 0.5;
}
}
&.imgbottom {
.info {
width: 100%;
}
.sub {
margin-top: 1rem;
display: grid;
place-items: center;
}
}
box-sizing: border-box;
border: 0.125rem solid;
border-color: transparent;
transition: all 0.25s ease-in-out;
.info {
display: flex;
flex-direction: column;
gap: 1rem;
h1 {
scroll-margin-top: 8rem;
}
* {
color: var(--textColor);
}
}
.sub {
display: block;
border-radius: 0.5rem;
padding: 0.125rem;
box-sizing: content-box;
overflow: hidden;
}
&:hover {
border-color: white;
}
&.imgside {
.info {
width: calc(100% - 12rem);
}
.sub {
position: absolute;
width: 100%;
height: 100%;
left: -0.125rem;
top: -0.125rem;
}
.default-img {
opacity: 0.1;
margin-left: 100%;
transform: translate(-100%, 0);
}
}
&.imgside:hover {
.default-img {
opacity: 0.5;
}
}
&.imgbottom {
.info {
width: 100%;
}
.sub {
margin-top: 1rem;
display: grid;
place-items: center;
}
}
}
.default-img {
width: 11rem;
transition: all 0.25s ease-in-out;
.default-img {
width: 12rem;
transition: all 0.25s ease-in-out;
padding-top: 0;
* {
fill: #fff;
color: #fff;
}
}
* {
fill: #fff;
color: #fff;
}
}
</style>
25 changes: 12 additions & 13 deletions src/lib/components/Dropdown.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,36 +1,36 @@
<script lang="ts">
import { base } from '$app/paths';
import type { ItemJSON } from '$lib/parser';
import { SvgIcon } from '$lib/svg';
import type { DropdownItem } from '$lib/types';
import Svg from './Svg.svelte';
export let header = 'dropdown';
export let link: string | null = null;
export let items: DropdownItem[];
export let item: ItemJSON;
export let items: ItemJSON[];
export let level = 0;
export let open = true;
export let open = false;
export let linkOnClick = false;
export let indexStack: number[] = [];
export let enumerate = false;
const link = item.filePath.replace('.md', '').replace('docs/', '');
export let onClick = (i: number[]) => {};
export let matcher = (idx: number[], header: string, link: string | null) => false;
export let matcher = (idx: number[], header: string, link: string) => false;
$: active = matcher(indexStack, header, link);
$: active = matcher(indexStack, item.headerName, link);
</script>

<div class="dropdown-header {open ? 'open' : ''} {active ? 'active' : ''}">
<!-- svelte-ignore a11y-click-events-have-key-events -->
{#if linkOnClick}
<a href="{base}/{link}" class={items.length !== 0 ? 'compact' : ''}>{header}</a>
<a href={link} class={items.length !== 0 ? 'compact' : ''}>{item.headerName}</a>
{:else}
<p
class={items.length !== 0 ? 'compact' : ''}
on:click={() => {
onClick(indexStack);
}}
>
{header}
{item.headerName}
</p>
{/if}
{#if items.length !== 0}
Expand All @@ -54,9 +54,8 @@
<div class="dropdown-wrapper">
{#each items as item, i}
<svelte:self
items={item.items}
header={item.name}
link={item.link}
{item}
items={item.subItems}
{enumerate}
{linkOnClick}
indexStack={[...indexStack, i + 1]}
Expand Down

0 comments on commit 7169e72

Please sign in to comment.