mirror of
https://github.com/zoriya/vex.git
synced 2026-05-23 23:07:28 +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