mirror of
https://github.com/zoriya/vex.git
synced 2026-06-07 12:15:35 +00:00
Clément Le Bihan
@@ -0,0 +1,10 @@
|
|||||||
|
.DS_Store
|
||||||
|
node_modules
|
||||||
|
/build
|
||||||
|
/.svelte-kit
|
||||||
|
/package
|
||||||
|
.env
|
||||||
|
.env.*
|
||||||
|
!.env.example
|
||||||
|
vite.config.js.timestamp-*
|
||||||
|
vite.config.ts.timestamp-*
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
engine-strict=true
|
||||||
@@ -0,0 +1,38 @@
|
|||||||
|
# create-svelte
|
||||||
|
|
||||||
|
Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).
|
||||||
|
|
||||||
|
## Creating a project
|
||||||
|
|
||||||
|
If you're seeing this, you've probably already done this step. Congrats!
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# create a new project in the current directory
|
||||||
|
npm create svelte@latest
|
||||||
|
|
||||||
|
# create a new project in my-app
|
||||||
|
npm create svelte@latest my-app
|
||||||
|
```
|
||||||
|
|
||||||
|
## Developing
|
||||||
|
|
||||||
|
Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run dev
|
||||||
|
|
||||||
|
# or start the server and open the app in a new browser tab
|
||||||
|
npm run dev -- --open
|
||||||
|
```
|
||||||
|
|
||||||
|
## Building
|
||||||
|
|
||||||
|
To create a production version of your app:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run build
|
||||||
|
```
|
||||||
|
|
||||||
|
You can preview the production build with `npm run preview`.
|
||||||
|
|
||||||
|
> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
|
||||||
Generated
+2471
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,26 @@
|
|||||||
|
{
|
||||||
|
"name": "web",
|
||||||
|
"version": "0.0.1",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite dev",
|
||||||
|
"build": "vite build",
|
||||||
|
"preview": "vite preview",
|
||||||
|
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
|
||||||
|
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@iconify-json/mingcute": "^1.1.17",
|
||||||
|
"@sveltejs/adapter-auto": "^3.0.0",
|
||||||
|
"@sveltejs/kit": "^2.0.0",
|
||||||
|
"@sveltejs/vite-plugin-svelte": "^3.0.0",
|
||||||
|
"svelte": "^4.2.7",
|
||||||
|
"svelte-check": "^3.6.0",
|
||||||
|
"svelte-time": "^0.9.0",
|
||||||
|
"tslib": "^2.4.1",
|
||||||
|
"typescript": "^5.0.0",
|
||||||
|
"unplugin-icons": "^0.19.0",
|
||||||
|
"vite": "^5.0.3"
|
||||||
|
},
|
||||||
|
"type": "module"
|
||||||
|
}
|
||||||
Vendored
+13
@@ -0,0 +1,13 @@
|
|||||||
|
// See https://kit.svelte.dev/docs/types#app
|
||||||
|
// for information about these interfaces
|
||||||
|
declare global {
|
||||||
|
namespace App {
|
||||||
|
// interface Error {}
|
||||||
|
// interface Locals {}
|
||||||
|
// interface PageData {}
|
||||||
|
// interface PageState {}
|
||||||
|
// interface Platform {}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export {};
|
||||||
@@ -0,0 +1,26 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<style>
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,100..900;1,100..900&display=swap');
|
||||||
|
</style>
|
||||||
|
%sveltekit.head%
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body data-sveltekit-preload-data="hover">
|
||||||
|
<div style="display: contents">%sveltekit.body%</div>
|
||||||
|
</body>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
font-family: 'Hanken Grotesk', sans-serif;
|
||||||
|
font-optical-sizing: auto;
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
</html>
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
// place files you want to import through the `$lib` alias in this folder.
|
||||||
@@ -0,0 +1,72 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import type { Post } from "$lib/types";
|
||||||
|
import Time, { dayjs } from "svelte-time";
|
||||||
|
import TagList from "./tag-list.svelte";
|
||||||
|
import QuillPenLine from "virtual:icons/mingcute/quill-pen-line";
|
||||||
|
export let post: Post;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<article>
|
||||||
|
<div class="origin">
|
||||||
|
<img src={post.feed.faviconUrl} alt={post.feed.title} />
|
||||||
|
<span>{post.feed.title}</span> |
|
||||||
|
{#if post.author}
|
||||||
|
<div class="author">
|
||||||
|
<QuillPenLine />
|
||||||
|
<span>{post.author}</span>
|
||||||
|
</div>
|
||||||
|
|
|
||||||
|
{/if}
|
||||||
|
<Time
|
||||||
|
timestamp={post.date}
|
||||||
|
relative={true}
|
||||||
|
title={dayjs(post.date).locale("en").toString()}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<content>
|
||||||
|
<h2>{post.title}</h2>
|
||||||
|
<p>{post.content}</p>
|
||||||
|
</content>
|
||||||
|
<footer>
|
||||||
|
<TagList tags={post.feed.tags} />
|
||||||
|
</footer>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
article {
|
||||||
|
border-radius: 10px;
|
||||||
|
/* box-shadow: 0px 0px 12px 9px rgba(0, 0, 0, 0.28); */
|
||||||
|
border: 1px solid #e0e0e0;
|
||||||
|
padding: 0.7rem;
|
||||||
|
background-color: rgb(220, 220, 220);
|
||||||
|
}
|
||||||
|
|
||||||
|
.origin {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
border-top-left-radius: 5px;
|
||||||
|
border-top-right-radius: 5px;
|
||||||
|
gap: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
margin-right: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
margin: 0.5rem;
|
||||||
|
font-size: 1.3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.author {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 3px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,26 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import type { Post } from "$lib/types";
|
||||||
|
import Card from "./card.svelte";
|
||||||
|
export let posts: Post[] = [];
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<h1>Posts</h1>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
{#each posts as post}
|
||||||
|
<li>
|
||||||
|
<Card {post} />
|
||||||
|
</li>
|
||||||
|
{/each}
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
ul {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,40 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
export let tags: string[] = [];
|
||||||
|
|
||||||
|
const nbNonExpandedTags = 5;
|
||||||
|
let isExpanded = false;
|
||||||
|
$: tagsToDisplay = isExpanded ? tags : tags.slice(0, nbNonExpandedTags);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
{#each tagsToDisplay as tag}
|
||||||
|
<div class="tag">{tag}</div>
|
||||||
|
{/each}
|
||||||
|
{#if tags.length > nbNonExpandedTags}
|
||||||
|
<button on:click={() => isExpanded = !isExpanded}>
|
||||||
|
{isExpanded ? "Show less" : "Show more"}
|
||||||
|
</button>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.5rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
.tag {
|
||||||
|
background-color: #4d4c4c;
|
||||||
|
padding: 0.25rem 0.5rem;
|
||||||
|
border-radius: 5px;
|
||||||
|
font-size: small;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
padding: 0;
|
||||||
|
background-color: transparent;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,20 @@
|
|||||||
|
import type { Post } from "$lib/types";
|
||||||
|
import { writable } from 'svelte/store';
|
||||||
|
|
||||||
|
const initialState: Post[] = [];
|
||||||
|
|
||||||
|
export const postStore = writable<Post[]>(initialState);
|
||||||
|
|
||||||
|
export const addPost = (post: Post) => {
|
||||||
|
postStore.update((posts) => [...posts, post]);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const removePost = (postId: string) => {
|
||||||
|
postStore.update((posts) => posts.filter((post) => post.id !== postId));
|
||||||
|
};
|
||||||
|
|
||||||
|
export const updatePost = (postId: string, updatedPost: Post) => {
|
||||||
|
postStore.update((posts) =>
|
||||||
|
posts.map((post) => (post.id === postId ? updatedPost : post))
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,2 @@
|
|||||||
|
export type { Feed } from "./types/feed.type";
|
||||||
|
export type { Post } from "./types/post.type";
|
||||||
@@ -0,0 +1,7 @@
|
|||||||
|
export type Feed = {
|
||||||
|
id: string;
|
||||||
|
title: string;
|
||||||
|
url: string;
|
||||||
|
faviconUrl: string;
|
||||||
|
tags: string[];
|
||||||
|
}
|
||||||
@@ -0,0 +1,16 @@
|
|||||||
|
import type { Feed } from "./feed.type";
|
||||||
|
|
||||||
|
export type Post = {
|
||||||
|
id: string;
|
||||||
|
title: string;
|
||||||
|
content: string;
|
||||||
|
link: string;
|
||||||
|
date: Date;
|
||||||
|
|
||||||
|
author?: string;
|
||||||
|
isRead: boolean;
|
||||||
|
isBookmarked: boolean;
|
||||||
|
isIgnored: boolean;
|
||||||
|
isReadLater: boolean;
|
||||||
|
feed: Feed;
|
||||||
|
}
|
||||||
@@ -0,0 +1,52 @@
|
|||||||
|
import type { Post } from "$lib/types";
|
||||||
|
|
||||||
|
const data: Post[] = [
|
||||||
|
{
|
||||||
|
id: "1",
|
||||||
|
title: "The first post",
|
||||||
|
content: "This is the",
|
||||||
|
link: "https://example.com",
|
||||||
|
date: new Date(),
|
||||||
|
isRead: false,
|
||||||
|
isBookmarked: false,
|
||||||
|
isIgnored: false,
|
||||||
|
isReadLater: false,
|
||||||
|
author: "John Doe",
|
||||||
|
feed: {
|
||||||
|
id: "1",
|
||||||
|
title: "The first feed",
|
||||||
|
url: "https://example.com/feed",
|
||||||
|
faviconUrl: "https://kit.svelte.dev/favicon.png",
|
||||||
|
tags: ["tag1", "tag2"],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "2",
|
||||||
|
title: "Wine 9.8 Fixes Nearly 20 Year Old Bug For Installing Microsoft Office 97",
|
||||||
|
content: "Wine 9.8 is out today as the newest bi-weekly development release of this open-source software for enjoying Windows games/applications on Linux / Chrome OS, macOS, and other platforms...",
|
||||||
|
link: "https://example.com",
|
||||||
|
date: new Date(),
|
||||||
|
isRead: false,
|
||||||
|
isBookmarked: true,
|
||||||
|
isIgnored: false,
|
||||||
|
isReadLater: false,
|
||||||
|
feed: {
|
||||||
|
id: "2",
|
||||||
|
title: "Phoronix",
|
||||||
|
url: "https://www.phoronix.com",
|
||||||
|
faviconUrl: "https://www.phoronix.com/favicon.ico",
|
||||||
|
// put 50 tags in the array linked with linux world
|
||||||
|
tags: [
|
||||||
|
"linux", "kernel", "gnu", "gnu/linux", "gnu+linux", "gnu linux",
|
||||||
|
"wine", "winehq", "wine-staging", "wine-devel", "winehq-devel", "winehq-staging",
|
||||||
|
"mesa", "mesa3d", "mesa 3d", "mesa-3d", "mesa3d-devel", "mesa3d-staging",
|
||||||
|
"NVK"
|
||||||
|
],
|
||||||
|
},
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
export function load() {
|
||||||
|
return { data };
|
||||||
|
}
|
||||||
|
|
||||||
@@ -0,0 +1,19 @@
|
|||||||
|
<script>
|
||||||
|
export let data;
|
||||||
|
import List from "$lib/posts/list.svelte";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<h1>Welcome to SvelteKit</h1>
|
||||||
|
<p>
|
||||||
|
Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<List posts={data.data} />
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
main {
|
||||||
|
margin-left: 10%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
@@ -0,0 +1,18 @@
|
|||||||
|
import adapter from '@sveltejs/adapter-auto';
|
||||||
|
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
|
||||||
|
|
||||||
|
/** @type {import('@sveltejs/kit').Config} */
|
||||||
|
const config = {
|
||||||
|
// Consult https://kit.svelte.dev/docs/integrations#preprocessors
|
||||||
|
// for more information about preprocessors
|
||||||
|
preprocess: vitePreprocess(),
|
||||||
|
|
||||||
|
kit: {
|
||||||
|
// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
|
||||||
|
// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
|
||||||
|
// See https://kit.svelte.dev/docs/adapters for more information about adapters.
|
||||||
|
adapter: adapter()
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export default config;
|
||||||
@@ -0,0 +1,19 @@
|
|||||||
|
{
|
||||||
|
"extends": "./.svelte-kit/tsconfig.json",
|
||||||
|
"compilerOptions": {
|
||||||
|
"allowJs": true,
|
||||||
|
"checkJs": true,
|
||||||
|
"esModuleInterop": true,
|
||||||
|
"forceConsistentCasingInFileNames": true,
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"sourceMap": true,
|
||||||
|
"strict": true,
|
||||||
|
"moduleResolution": "bundler"
|
||||||
|
}
|
||||||
|
// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
|
||||||
|
// except $lib which is handled by https://kit.svelte.dev/docs/configuration#files
|
||||||
|
//
|
||||||
|
// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
|
||||||
|
// from the referenced tsconfig.json - TypeScript does not merge them in
|
||||||
|
}
|
||||||
@@ -0,0 +1,9 @@
|
|||||||
|
import { sveltekit } from '@sveltejs/kit/vite';
|
||||||
|
import { defineConfig } from 'vite';
|
||||||
|
import Icons from 'unplugin-icons/vite'
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [sveltekit(), Icons({
|
||||||
|
compiler: 'svelte',
|
||||||
|
})]
|
||||||
|
});
|
||||||
Reference in New Issue
Block a user