Skip to content
This repository was archived by the owner on Jan 18, 2024. It is now read-only.

Commit 409e3d0

Browse files
azrikaharazrikahar
authoredJan 20, 2022
Add SvelteKit Example (#20)
* add sveltekit example * update seed to check SvelteKit env variables
1 parent 7db78f5 commit 409e3d0

38 files changed

+4157
-14
lines changed
 

‎README.md

+2-1
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,9 @@
22

33
## Available Examples
44

5-
- [Astro](/astro) - Built with Astro.
5+
- [Astro](/astro) - Built with Astro (Beta).
66
- [Eleventy](/eleventy) - Built with Eleventy v1.
77
- [Gatsby](/gatsby) - Built with Gatsby 4 and `@directus/gatsby-source-directus`.
88
- [Next.js](/nextjs) - Built with Next.js 12.
99
- [Nuxt.js](/nuxtjs) - Built with Nuxt.js 2.
10+
- [SvelteKit](/sveltekit) - Built with SveltKit (Beta).

‎shared/seed/bundle/index.js

+11-11
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎shared/seed/src/env.ts

+8-2
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,16 @@ if (argv.project === "Gatsby") {
88
logger.error(`GATSBY_DIRECTUS_URL environment variable is missing.`);
99
process.exit(1);
1010
}
11-
}
12-
if (argv.project === "Astro") {
11+
} else if (argv.project === "Astro") {
1312
if (!process.env.PUBLIC_DIRECTUS_URL) {
1413
logger.error(`PUBLIC_DIRECTUS_URL environment variable is missing.`);
1514
process.exit(1);
1615
}
16+
} else if (argv.project === "SvelteKit") {
17+
if (!process.env.VITE_DIRECTUS_URL) {
18+
logger.error(`VITE_DIRECTUS_URL environment variable is missing.`);
19+
process.exit(1);
20+
}
1721
} else {
1822
if (!process.env.DIRECTUS_URL) {
1923
logger.error(`DIRECTUS_URL environment variable is missing.`);
@@ -48,6 +52,8 @@ export const env = {
4852
? process.env.GATSBY_DIRECTUS_URL
4953
: argv.project === "Astro"
5054
? process.env.PUBLIC_DIRECTUS_URL
55+
: argv.project === "SvelteKit"
56+
? process.env.VITE_DIRECTUS_URL
5157
: process.env.DIRECTUS_URL,
5258
email:
5359
argv.project === "Astro"

‎sveltekit/.env.example

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
VITE_DIRECTUS_URL=http://localhost:8055
2+
DIRECTUS_EMAIL=
3+
DIRECTUS_PASSWORD=
4+
DIRECTUS_STATIC_TOKEN=

‎sveltekit/.eslintrc.cjs

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
module.exports = {
2+
root: true,
3+
extends: ['eslint:recommended', 'prettier'],
4+
plugins: ['svelte3'],
5+
overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
6+
parserOptions: {
7+
sourceType: 'module',
8+
ecmaVersion: 2020
9+
},
10+
env: {
11+
browser: true,
12+
es2017: true,
13+
node: true
14+
}
15+
};

‎sveltekit/.gitignore

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
.DS_Store
2+
node_modules
3+
/build
4+
/.svelte-kit
5+
/package
6+
.env
7+
.env.*
8+
!.env.example

‎sveltekit/.npmrc

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
engine-strict=true

‎sveltekit/.prettierrc

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"useTabs": true,
3+
"singleQuote": true,
4+
"trailingComma": "none",
5+
"printWidth": 100
6+
}

‎sveltekit/README.md

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
# create-svelte
2+
3+
This is a [SvelteKit](https://kit.svelte.dev/) project bootstrapped with [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
4+
5+
## 📌 Prerequisites
6+
7+
- A new Directus instance ([Installation guide](https://docs.directus.io/getting-started/installation/))
8+
9+
## 🚀 Getting Started
10+
11+
1. Clone this repo.
12+
13+
2. Install dependencies for this example.
14+
15+
```shell
16+
cd sveltekit
17+
npm install
18+
```
19+
20+
3. Create a `.env` file based on the provided `.env.example` file. You can use either the credentials (email & password) or static token of the admin account.
21+
22+
4. Apply the provided `example.yaml` schema onto your Directus instance. [Learn more here](https://docs.directus.io/reference/cli/#applying-a-snapshot)
23+
24+
5. Insert seed data to your Directus instance.
25+
26+
```shell
27+
npm run seed
28+
```
29+
30+
6. Start the development server.
31+
32+
```shell
33+
npm run develop
34+
```
35+
36+
Your Directus SvelteKit example is now running at <http://localhost:8000>.
37+
38+
## 🔗 Links
39+
40+
### Directus
41+
42+
- [Official Site](https://directus.io/)
43+
- [Documentation](https://docs.directus.io/)
44+
45+
### SvelteKit
46+
47+
- [Official Site](https://kit.svelte.dev/)
48+
- [Documentation](https://kit.svelte.dev/docs)

‎sveltekit/jsconfig.json

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"compilerOptions": {
3+
"baseUrl": ".",
4+
"paths": {
5+
"$lib": ["src/lib"],
6+
"$lib/*": ["src/lib/*"]
7+
}
8+
},
9+
"include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.svelte"]
10+
}

‎sveltekit/package-lock.json

+3,414
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎sveltekit/package.json

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
{
2+
"name": "directus-sveltekit-example",
3+
"private": true,
4+
"type": "module",
5+
"scripts": {
6+
"dev": "svelte-kit dev",
7+
"build": "svelte-kit build",
8+
"package": "svelte-kit package",
9+
"preview": "svelte-kit preview",
10+
"lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. . && eslint --ignore-path .gitignore .",
11+
"format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. .",
12+
"seed": "node ../shared/seed --project=SvelteKit"
13+
},
14+
"dependencies": {
15+
"@directus/sdk": "9.4.3"
16+
},
17+
"devDependencies": {
18+
"@sveltejs/adapter-auto": "next",
19+
"@sveltejs/kit": "next",
20+
"dotenv": "^14.2.0",
21+
"eslint": "^7.32.0",
22+
"eslint-config-prettier": "^8.3.0",
23+
"eslint-plugin-svelte3": "^3.2.1",
24+
"modern-normalize": "1.1.0",
25+
"prettier": "^2.4.1",
26+
"prettier-plugin-svelte": "^2.4.0",
27+
"svelte": "^3.44.0"
28+
}
29+
}

‎sveltekit/src/app.html

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
<title>Directus SvelteKit Example</title>
7+
<link rel="icon" href="%svelte.assets%/favicon.png" />
8+
<link
9+
rel="stylesheet"
10+
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&display=swap"
11+
/>
12+
<link
13+
rel="stylesheet"
14+
href="https://fonts.googleapis.com/css2?family=DM+Serif+Display&display=swap"
15+
/>
16+
<link
17+
rel="stylesheet"
18+
href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined"
19+
/>
20+
%svelte.head%
21+
</head>
22+
<body>
23+
<div id="svelte" class="layout">%svelte.body%</div>
24+
</body>
25+
</html>

‎sveltekit/src/global.d.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/// <reference types="@sveltejs/kit" />

‎sveltekit/src/lib/client.js

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { Directus } from '@directus/sdk';
2+
import 'dotenv/config';
3+
4+
const directus = new Directus(process.env.VITE_DIRECTUS_URL);
5+
6+
async function getDirectusClient() {
7+
if (directus.auth.token) return directus;
8+
9+
if (process.env.DIRECTUS_EMAIL && process.env.DIRECTUS_PASSWORD) {
10+
await directus.auth.login({
11+
email: process.env.DIRECTUS_EMAIL,
12+
password: process.env.DIRECTUS_PASSWORD
13+
});
14+
} else if (process.env.DIRECTUS_STATIC_TOKEN) {
15+
await directus.auth.static(process.env.DIRECTUS_STATIC_TOKEN);
16+
}
17+
18+
return directus;
19+
}
20+
21+
export { getDirectusClient };

‎sveltekit/src/lib/components/Article.svelte

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<script>
2+
import { getAssetURL } from '$lib/get-asset-url';
3+
export let article, bordered;
4+
</script>
5+
6+
<article class={bordered ? 'article bordered' : 'article'}>
7+
<div class="article__topWrapper">
8+
<div class="article__imageWrapper">
9+
<img src={getAssetURL(article.cover_image)} alt="" loading="lazy" />
10+
</div>
11+
<span aria-hidden="true" class="tag">Writing</span>
12+
</div>
13+
<div class="article__bottomWrapper">
14+
<h1 class="article__title">
15+
<a href={`/articles/${article.id}`}>
16+
{article.title}
17+
</a>
18+
</h1>
19+
<div class="article__detail">
20+
<div class="article__detailAuthor">
21+
<img src={getAssetURL(article.author.avatar)} alt="" loading="lazy" />
22+
</div>
23+
<div class="article__detailInner">
24+
<div class="article__detailInnerAuthor">
25+
{`${article.author.first_name} ${article.author.last_name}`}
26+
</div>
27+
<div class="article__detailInnerTime">{article.publish_date}</div>
28+
<div class="article__detailInnerCategory">Writing</div>
29+
</div>
30+
</div>
31+
</div>
32+
</article>

‎sveltekit/src/lib/components/Footer.svelte

+64
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
<script>
2+
import GithubIcon from '$lib/components/icons/Github.svelte';
3+
import YoutubeIcon from '$lib/components/icons/Youtube.svelte';
4+
import LinkedinIcon from '$lib/components/icons/Linkedin.svelte';
5+
import TwitterIcon from '$lib/components/icons/Twitter.svelte';
6+
7+
const currentYear = new Date().getFullYear();
8+
</script>
9+
10+
<footer>
11+
<div class="container footer__topWrapper">
12+
<span>
13+
Generated with <span class="underline">SvelteKit</span>, powered by
14+
<span class="underline">Directus</span>.
15+
</span>
16+
</div>
17+
<div class="container footer__bottomWrapper">
18+
<span class="footer__copyright">
19+
© {currentYear} Monospace Inc
20+
</span>
21+
<ul class="footer__socials">
22+
<li>
23+
<a
24+
href="https://github.com/directus"
25+
class="logo"
26+
target="_blank"
27+
rel="noreferrer noopener"
28+
>
29+
<GithubIcon />
30+
</a>
31+
</li>
32+
<li>
33+
<a
34+
href="https://www.youtube.com/c/DirectusVideos"
35+
class="logo"
36+
target="_blank"
37+
rel="noreferrer noopener"
38+
>
39+
<YoutubeIcon />
40+
</a>
41+
</li>
42+
<li>
43+
<a
44+
href="https://www.linkedin.com/company/directus-io"
45+
class="logo"
46+
target="_blank"
47+
rel="noreferrer noopener"
48+
>
49+
<LinkedinIcon />
50+
</a>
51+
</li>
52+
<li>
53+
<a
54+
href="https://twitter.com/directus"
55+
class="logo"
56+
target="_blank"
57+
rel="noreferrer noopener"
58+
>
59+
<TwitterIcon />
60+
</a>
61+
</li>
62+
</ul>
63+
</div>
64+
</footer>

‎sveltekit/src/lib/components/Header.svelte

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<script>
2+
import MonospaceIcon from '$lib/components/icons/Monospace.svelte';
3+
</script>
4+
5+
<header>
6+
<nav class="container">
7+
<a href="/"><MonospaceIcon /></a>
8+
<span class="header__description">
9+
An example site powered by <span class="accent">SvelteKit</span> and
10+
<span class="accent">Directus</span>.
11+
</span>
12+
</nav>
13+
</header>

‎sveltekit/src/lib/components/Hero.svelte

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<script>
2+
import { getAssetURL } from '$lib/get-asset-url';
3+
export let article;
4+
</script>
5+
6+
<article class="hero">
7+
<div class="hero__topWrapper">
8+
<div class="hero__imageWrapper">
9+
<img src={getAssetURL(article.cover_image)} alt="" loading="lazy" />
10+
</div>
11+
<span aria-hidden="true" class="tag"> Writing </span>
12+
</div>
13+
<h1 class="hero__title">
14+
<a href={`/articles/${article.id}`}>{article.title}</a>
15+
</h1>
16+
<p class="hero__excerpt">{article.excerpt}</p>
17+
<div class="hero__detail">
18+
<div class="hero__detailAuthorImage">
19+
<img src={getAssetURL(article.author.avatar)} alt="" loading="lazy" />
20+
</div>
21+
<div>
22+
<div class="hero__detailAuthorName">
23+
{`${article.author.first_name} ${article.author.last_name}`}
24+
</div>
25+
<div>{article.publish_date}</div>
26+
<div class="hero__detailCategory">Writing</div>
27+
</div>
28+
</div>
29+
</article>

‎sveltekit/src/lib/components/Info.svelte

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<section class="info">
2+
<div class="info__background">
3+
<div class="info__backgroundLeft" />
4+
<div class="info__backgroundRight" />
5+
</div>
6+
<div class="container">
7+
<div class="info__wrapperOuter left">
8+
<div class="info_wrapperInner">
9+
<span class="info__subtitle">Documentation</span>
10+
<a href="#" class="info__title"> Read the Tutorial </a>
11+
</div>
12+
</div>
13+
<div class="info__wrapperOuter right">
14+
<div class="info_wrapperInner">
15+
<span class="info__subtitle">Codebase</span>
16+
<a href="#" class="info__title"> View on GitHub </a>
17+
</div>
18+
</div>
19+
</div>
20+
</section>

‎sveltekit/src/lib/components/MoreArticles.svelte

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<script>
2+
import Article from '$lib/components/Article.svelte';
3+
export let articles;
4+
</script>
5+
6+
<section class="more-articles">
7+
<div class="container">
8+
<h1 class="more-articles__title">More Articles</h1>
9+
<div class="articles-grid">
10+
{#each articles as article, index}
11+
<Article {article} bordered={index !== articles.length - 1} />
12+
{/each}
13+
</div>
14+
</div>
15+
</section>

‎sveltekit/src/lib/components/Notice.svelte

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<div class="notice">
2+
<div class="container">
3+
<span>
4+
The source code for this blog is
5+
<a href="https://github.com/directus/examples"> available on GitHub. </a>
6+
</span>
7+
<i class="material-icons-outlined">close</i>
8+
</div>
9+
</div>

‎sveltekit/src/lib/components/icons/Back.svelte

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<svg
2+
aria-hidden="true"
3+
xmlns="http://www.w3.org/2000/svg"
4+
height="32px"
5+
width="32px"
6+
viewBox="0 0 24 24"
7+
fill="currentColor"
8+
class="icon"
9+
>
10+
<path d="M0 0h24v24H0V0z" fill="none" />
11+
<path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" />
12+
</svg>

‎sveltekit/src/lib/components/icons/Github.svelte

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
2+
<path
3+
fillRule="evenodd"
4+
clipRule="evenodd"
5+
d="M14 0C6.265 0 0 6.265 0 14C0 20.195 4.0075 25.4275 9.5725 27.2825C10.2725 27.405 10.535 26.985 10.535 26.6175C10.535 26.285 10.5175 25.1825 10.5175 24.01C7 24.6575 6.09 23.1525 5.81 22.365C5.6525 21.9625 4.97 20.72 4.375 20.3875C3.885 20.125 3.185 19.4775 4.3575 19.46C5.46 19.4425 6.2475 20.475 6.51 20.895C7.77 23.0125 9.7825 22.4175 10.5875 22.05C10.71 21.14 11.0775 20.5275 11.48 20.1775C8.365 19.8275 5.11 18.62 5.11 13.265C5.11 11.7425 5.6525 10.4825 6.545 9.5025C6.405 9.1525 5.915 7.7175 6.685 5.7925C6.685 5.7925 7.8575 5.425 10.535 7.2275C11.655 6.9125 12.845 6.755 14.035 6.755C15.225 6.755 16.415 6.9125 17.535 7.2275C20.2125 5.4075 21.385 5.7925 21.385 5.7925C22.155 7.7175 21.665 9.1525 21.525 9.5025C22.4175 10.4825 22.96 11.725 22.96 13.265C22.96 18.6375 19.6875 19.8275 16.5725 20.1775C17.08 20.615 17.5175 21.455 17.5175 22.7675C17.5175 24.64 17.5 26.145 17.5 26.6175C17.5 26.985 17.7625 27.4225 18.4625 27.2825C21.2418 26.3443 23.6568 24.5581 25.3677 22.1753C27.0786 19.7926 27.9993 16.9334 28 14C28 6.265 21.735 0 14 0Z"
6+
fill="currentColor"
7+
/>
8+
</svg>

‎sveltekit/src/lib/components/icons/Link.svelte

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<svg width="28" height="14" viewBox="0 0 28 14" fill="none" xmlns="http://www.w3.org/2000/svg">
2+
<path
3+
d="M20.6875 0.3125H15.3125V3H20.6875C22.875 3 24.6875 4.8125 24.6875 7C24.6875 9.1875 22.875 11 20.6875 11H15.3125V13.6875H20.6875C24.375 13.6875 27.3125 10.6875 27.3125 7C27.3125 3.3125 24.375 0.3125 20.6875 0.3125ZM12.6875 11H7.3125C5.125 11 3.3125 9.1875 3.3125 7C3.3125 4.8125 5.125 3 7.3125 3H12.6875V0.3125H7.3125C3.625 0.3125 0.6875 3.3125 0.6875 7C0.6875 10.6875 3.625 13.6875 7.3125 13.6875H12.6875V11ZM8.6875 5.6875H19.3125V8.3125H8.6875V5.6875Z"
4+
fill="currentColor"
5+
/>
6+
</svg>

‎sveltekit/src/lib/components/icons/Linkedin.svelte

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<svg width="27" height="27" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
2+
<path
3+
d="M24.4554 0H1.94983C0.87175 0 0 0.851117 0 1.90341V24.5019C0 25.5541 0.87175 26.4104 1.94983 26.4104H24.4554C25.5335 26.4104 26.4104 25.5541 26.4104 24.507V1.90341C26.4104 0.851117 25.5335 0 24.4554 0ZM7.83544 22.5056H3.91514V9.89875H7.83544V22.5056ZM5.87529 8.18104C4.61667 8.18104 3.60048 7.16486 3.60048 5.9114C3.60048 4.65793 4.61667 3.64175 5.87529 3.64175C7.12875 3.64175 8.14493 4.65793 8.14493 5.9114C8.14493 7.1597 7.12875 8.18104 5.87529 8.18104ZM22.5056 22.5056H18.5905V16.3776C18.5905 14.9178 18.5647 13.035 16.5529 13.035C14.5154 13.035 14.2059 14.6289 14.2059 16.2744V22.5056H10.2959V9.89875H14.0512V11.6216H14.1028C14.6237 10.6312 15.903 9.5841 17.8064 9.5841C21.7731 9.5841 22.5056 12.1942 22.5056 15.5883V22.5056Z"
4+
fill="currentColor"
5+
/>
6+
</svg>

‎sveltekit/src/lib/components/icons/Monospace.svelte

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
2+
<path
3+
opacity="0.25"
4+
fillRule="evenodd"
5+
clipRule="evenodd"
6+
d="M16.8587 18.9234C17.2454 18.7002 17.7217 18.7002 18.1084 18.9234L34.3418 28.2958C34.7284 28.519 34.9666 28.9315 34.9666 29.378C34.9666 29.8245 34.7284 30.237 34.3418 30.4602L18.1084 39.8326C17.7217 40.0558 17.2454 40.0558 16.8587 39.8326C16.4721 39.6094 16.2339 39.1968 16.2339 38.7504L16.2339 20.0056C16.2339 19.5592 16.4721 19.1466 16.8587 18.9234ZM18.7332 22.1701L18.7332 36.5859L31.2176 29.378L18.7332 22.1701Z"
7+
fill="var(--foreground-accent)"
8+
/>
9+
<path
10+
opacity="0.25"
11+
fillRule="evenodd"
12+
clipRule="evenodd"
13+
d="M16.8587 0.178713C17.2454 -0.0445155 17.7217 -0.0445155 18.1084 0.178712L34.3418 9.55107C34.7284 9.77429 34.9666 10.1868 34.9666 10.6333C34.9666 11.0797 34.7284 11.4923 34.3418 11.7155L18.1084 21.0879C17.7217 21.3111 17.2454 21.3111 16.8587 21.0879C16.4721 20.8646 16.2339 20.4521 16.2339 20.0056L16.2339 1.26094C16.2339 0.814483 16.4721 0.401941 16.8587 0.178713ZM18.7332 3.42539L18.7332 17.8412L31.2176 10.6333L18.7332 3.42539Z"
14+
fill="var(--foreground-accent)"
15+
/>
16+
<path
17+
opacity="0.25"
18+
fillRule="evenodd"
19+
clipRule="evenodd"
20+
d="M0.624824 9.55106C1.01147 9.32783 1.48783 9.32783 1.87447 9.55106L18.1079 18.9234C18.4945 19.1466 18.7327 19.5592 18.7327 20.0056C18.7327 20.4521 18.4945 20.8646 18.1079 21.0879L1.87448 30.4602C1.48783 30.6834 1.01147 30.6834 0.624828 30.4602C0.238186 30.237 4.17115e-06 29.8244 4.09666e-06 29.378L0 10.6333C-1.4897e-07 10.1868 0.238181 9.77429 0.624824 9.55106ZM2.4993 12.7977L2.4993 27.2135L14.9838 20.0056L2.4993 12.7977Z"
21+
fill="var(--foreground-accent)"
22+
/>
23+
<path
24+
opacity="0.25"
25+
fillRule="evenodd"
26+
clipRule="evenodd"
27+
d="M34.3418 9.55107C34.7284 9.7743 34.9666 10.1868 34.9666 10.6333V29.3771C34.9666 29.8235 34.7284 30.2361 34.3418 30.4593L18.1084 39.8317C17.7217 40.0549 17.2454 40.0549 16.8587 39.8317C16.4721 39.6084 16.2339 39.1959 16.2339 38.7494L16.2339 20.0047C16.2339 19.5583 16.4721 19.1457 16.8588 18.9225L33.0922 9.55103C33.4788 9.32782 33.9551 9.32784 34.3418 9.55107ZM18.7332 20.7262L18.7332 36.585L32.4673 28.6556V12.7976L18.7332 20.7262Z"
28+
fill="var(--foreground-accent)"
29+
/>
30+
<path
31+
opacity="0.25"
32+
fillRule="evenodd"
33+
clipRule="evenodd"
34+
d="M0.624801 9.55107C1.01143 9.32784 1.48778 9.32782 1.87443 9.55103L18.1078 18.9225C18.4945 19.1457 18.7327 19.5583 18.7327 20.0047L18.7327 38.7494C18.7327 39.1959 18.4945 39.6084 18.1079 39.8317C17.7212 40.0549 17.2449 40.0549 16.8582 39.8317L0.624824 30.4593C0.238181 30.2361 0 29.8235 0 29.3771L7.44848e-08 10.6333C7.44848e-08 10.1868 0.238172 9.7743 0.624801 9.55107ZM2.49929 12.7976V28.6556L16.2334 36.585L16.2334 20.7262L2.49929 12.7976Z"
35+
fill="var(--foreground-accent)"
36+
/>
37+
<path
38+
opacity="0.25"
39+
fillRule="evenodd"
40+
clipRule="evenodd"
41+
d="M16.8641 0.167421C17.2507 -0.055807 17.7271 -0.0558068 18.1137 0.167421L34.3471 9.53978C34.7337 9.763 34.9719 10.1755 34.9719 10.622C34.9719 11.0685 34.7337 11.481 34.3471 11.7042L18.1137 21.0766C17.7271 21.2998 17.2507 21.2998 16.8641 21.0766L0.630683 11.7042C0.244041 11.481 0.00585923 11.0684 0.00585938 10.622C0.00585952 10.1755 0.244041 9.76298 0.630684 9.53975L16.8641 0.167421ZM3.7548 10.622L17.4889 18.5514L31.223 10.622L17.4889 2.69262L3.7548 10.622Z"
42+
fill="var(--foreground-accent)"
43+
/>
44+
<path
45+
fillRule="evenodd"
46+
clipRule="evenodd"
47+
d="M0.63051 9.55116C1.01705 9.3279 1.49333 9.32779 1.87998 9.55086L17.5009 18.5629L33.1219 9.55086C33.5085 9.32779 33.9848 9.3279 34.3713 9.55116C34.7579 9.77441 34.996 10.1869 34.996 10.6333V29.378C34.996 30.0682 34.4365 30.6276 33.7463 30.6276C33.0562 30.6276 32.4967 30.0682 32.4967 29.378V12.7969L18.1254 21.0881C17.7389 21.311 17.2629 21.311 16.8764 21.0881L2.50515 12.7969V29.378C2.50515 30.0682 1.94567 30.6276 1.25551 30.6276C0.565346 30.6276 0.00585938 30.0682 0.00585938 29.378V10.6333C0.00585938 10.1869 0.243965 9.77441 0.63051 9.55116Z"
48+
fill="var(--foreground-accent)"
49+
/>
50+
</svg>

‎sveltekit/src/lib/components/icons/Twitter.svelte

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<svg width="27" height="22" viewBox="0 0 27 22" fill="none" xmlns="http://www.w3.org/2000/svg">
2+
<path
3+
d="M8.30556 21.4591C18.2722 21.4591 23.7221 13.2017 23.7221 6.04263C23.7221 5.80832 23.7221 5.57397 23.7074 5.34175C24.7678 4.57445 25.6831 3.62448 26.4104 2.53629C25.4219 2.97472 24.3733 3.26257 23.2995 3.38998C24.4302 2.71217 25.2762 1.64669 25.6803 0.391892C24.6165 1.02338 23.4526 1.46852 22.2388 1.7079C20.5594 -0.0778018 17.8909 -0.514863 15.7297 0.641907C13.5684 1.79868 12.452 4.26156 13.0065 6.64938C8.64964 6.4311 4.59037 4.37328 1.83893 0.988157C0.399309 3.4633 1.13219 6.63127 3.51259 8.22265C2.65623 8.19372 1.8192 7.9606 1.07115 7.54273C1.07115 7.56574 1.07115 7.5887 1.07115 7.61172C1.07084 10.1879 2.88381 12.4084 5.40802 12.9235C4.60988 13.1409 3.77251 13.1724 2.96029 13.0155C3.66925 15.2241 5.70396 16.7376 8.02311 16.7814C6.10257 18.2854 3.73229 19.1003 1.29292 19.0952C0.860844 19.0954 0.429121 19.0703 0 19.0199C2.47759 20.6113 5.3609 21.4559 8.30556 21.4529"
4+
fill="currentColor"
5+
/>
6+
</svg>

‎sveltekit/src/lib/components/icons/Youtube.svelte

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<svg width="31" height="22" viewBox="0 0 31 22" fill="none" xmlns="http://www.w3.org/2000/svg">
2+
<path
3+
d="M30.5052 4.67598C30.5052 4.67598 30.2043 2.55163 29.2776 1.61884C28.1041 0.39117 26.7921 0.385152 26.1903 0.312936C21.8814 -1.72176e-07 15.4121 0 15.4121 0H15.4001C15.4001 0 8.93071 -1.72176e-07 4.62182 0.312936C4.02002 0.385152 2.7081 0.39117 1.53459 1.61884C0.607818 2.55163 0.312936 4.67598 0.312936 4.67598C0.312936 4.67598 0 7.17345 0 9.66491V11.9999C0 14.4913 0.306918 16.9888 0.306918 16.9888C0.306918 16.9888 0.607818 19.1132 1.52857 20.046C2.70208 21.2736 4.24269 21.2315 4.92874 21.3639C7.39612 21.5986 15.4061 21.6708 15.4061 21.6708C15.4061 21.6708 21.8814 21.6588 26.1903 21.3519C26.7921 21.2796 28.1041 21.2736 29.2776 20.046C30.2043 19.1132 30.5052 16.9888 30.5052 16.9888C30.5052 16.9888 30.8122 14.4974 30.8122 11.9999V9.66491C30.8122 7.17345 30.5052 4.67598 30.5052 4.67598ZM12.2226 14.8344V6.17447L20.5455 10.5195L12.2226 14.8344Z"
4+
fill="currentColor"
5+
/>
6+
</svg>

‎sveltekit/src/lib/get-asset-url.js

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export function getAssetURL(id) {
2+
if (!id) return null;
3+
return `${import.meta.env.VITE_DIRECTUS_URL}/assets/${id}`;
4+
}

‎sveltekit/src/routes/__error.svelte

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<main class="error">
2+
<section>
3+
<div class="container">
4+
<h1>Uh-oh, we can't seem to find the page you're looking for.</h1>
5+
<p>
6+
<a href="/">Click here</a> to head back to the safety of the homepage.
7+
</p>
8+
</div>
9+
</section>
10+
</main>

‎sveltekit/src/routes/__layout.svelte

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<script>
2+
import 'modern-normalize';
3+
import '../../../shared/stylesheet/main.css';
4+
5+
import Notice from '$lib/components/Notice.svelte';
6+
import Header from '$lib/components/Header.svelte';
7+
import Info from '$lib/components/Info.svelte';
8+
import Footer from '$lib/components/Footer.svelte';
9+
</script>
10+
11+
<Notice />
12+
<Header />
13+
<slot />
14+
<Info />
15+
<Footer />

‎sveltekit/src/routes/articles/[id].json.js

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import { getDirectusClient } from '$lib/client';
2+
import { formatRelativeTime } from '../../../../shared/utils/format-relative-time';
3+
4+
/** @type {import('@sveltejs/kit').RequestHandler} */
5+
export async function get({ params }) {
6+
const { id } = params;
7+
8+
const directus = await getDirectusClient();
9+
10+
const article = await directus.items('articles').readOne(id, {
11+
fields: ['*', 'author.avatar', 'author.first_name', 'author.last_name']
12+
});
13+
14+
const formattedArticle = {
15+
...article,
16+
publish_date: formatRelativeTime(new Date(article.publish_date))
17+
};
18+
19+
const moreArticlesResponse = await directus.items('articles').readMany({
20+
fields: ['*', 'author.avatar', 'author.first_name', 'author.last_name'],
21+
filter: {
22+
_and: [{ id: { _neq: article.id } }, { status: { _eq: 'published' } }]
23+
},
24+
limit: 2
25+
});
26+
const formattedMoreArticles = moreArticlesResponse.data.map((moreArticle) => {
27+
return {
28+
...moreArticle,
29+
publish_date: formatRelativeTime(new Date(moreArticle.publish_date))
30+
};
31+
});
32+
33+
return {
34+
body: { article: formattedArticle, moreArticles: formattedMoreArticles }
35+
};
36+
}

‎sveltekit/src/routes/articles/[id].svelte

+132
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
<script context="module">
2+
/** @type {import('@sveltejs/kit').Load} */
3+
export async function load({ fetch, params }) {
4+
const { id } = params;
5+
const url = `/articles/${id}.json`;
6+
const response = await fetch(url);
7+
8+
if (!response.ok) {
9+
return {
10+
status: 404
11+
};
12+
}
13+
14+
const data = await response.json();
15+
16+
return {
17+
props: {
18+
article: data.article,
19+
moreArticles: data.moreArticles
20+
}
21+
};
22+
}
23+
</script>
24+
25+
<script>
26+
import { getAssetURL } from '$lib/get-asset-url';
27+
import BackIcon from '$lib/components/icons/Back.svelte';
28+
import LinkIcon from '$lib/components/icons/Link.svelte';
29+
import YoutubeIcon from '$lib/components/icons/Youtube.svelte';
30+
import LinkedinIcon from '$lib/components/icons/Linkedin.svelte';
31+
import TwitterIcon from '$lib/components/icons/Twitter.svelte';
32+
import GithubIcon from '$lib/components/icons/Github.svelte';
33+
import MoreArticles from '$lib/components/MoreArticles.svelte';
34+
35+
export let article, moreArticles;
36+
</script>
37+
38+
<div class="current-article">
39+
<section>
40+
<div class="container">
41+
<a href="/" class="current-article__backlink">
42+
<BackIcon />
43+
<span>Back to Articles</span>
44+
</a>
45+
<h1 class="current-article__title">{article.title}</h1>
46+
<div class="current-article__detail">
47+
<div class="current-article__wrapperOuter">
48+
<div class="current-article__wrapperInner">
49+
<div class="current-article__authorImage">
50+
<img src={getAssetURL(article.author.avatar)} alt="" loading="lazy" />
51+
</div>
52+
<div>
53+
<div class="current-article__authorName">
54+
{`${article.author.first_name} ${article.author.last_name}`}
55+
</div>
56+
<div class="current-article__time">
57+
{article.publish_date}
58+
</div>
59+
</div>
60+
</div>
61+
<ul class="current-article__socials">
62+
<li>
63+
<a href="/" target="_blank" rel="noreferrer noopener">
64+
<LinkIcon />
65+
</a>
66+
</li>
67+
<li>
68+
<a
69+
href="https://www.youtube.com/c/DirectusVideos"
70+
target="_blank"
71+
rel="noreferrer noopener"
72+
>
73+
<YoutubeIcon />
74+
</a>
75+
</li>
76+
<li>
77+
<a
78+
href="https://www.linkedin.com/company/directus-io"
79+
target="_blank"
80+
rel="noreferrer noopener"
81+
>
82+
<LinkedinIcon />
83+
</a>
84+
</li>
85+
<li>
86+
<a href="https://twitter.com/directus" target="_blank" rel="noreferrer noopener">
87+
<TwitterIcon />
88+
</a>
89+
</li>
90+
</ul>
91+
</div>
92+
<div class="current-article_coverImage">
93+
<img src={getAssetURL(article.cover_image)} alt="" />
94+
</div>
95+
</div>
96+
<div class="current-article__body">
97+
<div class="current-article__bodyContent">{@html article.body}</div>
98+
<ul class="current-article__bodySocials">
99+
<li>
100+
<a href="https://github.com/directus" target="_blank" rel="noreferrer noopener">
101+
<GithubIcon />
102+
</a>
103+
</li>
104+
<li>
105+
<a
106+
href="https://www.youtube.com/c/DirectusVideos"
107+
target="_blank"
108+
rel="noreferrer noopener"
109+
>
110+
<YoutubeIcon />
111+
</a>
112+
</li>
113+
<li>
114+
<a
115+
href="https://www.linkedin.com/company/directus-io"
116+
target="_blank"
117+
rel="noreferrer noopener"
118+
>
119+
<LinkedinIcon />
120+
</a>
121+
</li>
122+
<li>
123+
<a href="https://twitter.com/directus" target="_blank" rel="noreferrer noopener">
124+
<TwitterIcon />
125+
</a>
126+
</li>
127+
</ul>
128+
</div>
129+
</div>
130+
</section>
131+
<MoreArticles articles={moreArticles} />
132+
</div>

‎sveltekit/src/routes/index.json.js

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import { getDirectusClient } from '$lib/client';
2+
import { formatRelativeTime } from '../../../shared/utils/format-relative-time';
3+
4+
/** @type {import('@sveltejs/kit').RequestHandler} */
5+
export async function get() {
6+
const directus = await getDirectusClient();
7+
8+
const response = await directus.items('articles').readMany({
9+
fields: ['*', 'author.avatar', 'author.first_name', 'author.last_name'],
10+
sort: '-publish_date'
11+
});
12+
const formattedArticles = response.data.map((article) => {
13+
return {
14+
...article,
15+
publish_date: formatRelativeTime(new Date(article.publish_date))
16+
};
17+
});
18+
19+
if (!formattedArticles) {
20+
return {
21+
status: 404
22+
};
23+
}
24+
25+
const [hero, ...articles] = formattedArticles;
26+
27+
return {
28+
body: {
29+
hero,
30+
articles
31+
}
32+
};
33+
}

‎sveltekit/src/routes/index.svelte

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<script context="module">
2+
/** @type {import('@sveltejs/kit').Load} */
3+
export async function load({ fetch }) {
4+
const url = `/index.json`;
5+
const response = await fetch(url);
6+
const data = await response.json();
7+
8+
return {
9+
props: {
10+
hero: data.hero,
11+
articles: data.articles
12+
}
13+
};
14+
}
15+
</script>
16+
17+
<script>
18+
import Hero from '$lib/components/Hero.svelte';
19+
import Article from '$lib/components/Article.svelte';
20+
21+
export let hero, articles;
22+
</script>
23+
24+
<main>
25+
<section class="main-content">
26+
<div class="container">
27+
<Hero article={hero} />
28+
<div class="articles-grid">
29+
{#each articles as article, index}
30+
<Article {article} bordered={index !== articles.length - 1} />
31+
{/each}
32+
</div>
33+
</div>
34+
</section>
35+
</main>

‎sveltekit/static/favicon.png

1.53 KB
Loading

‎sveltekit/svelte.config.js

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import adapter from '@sveltejs/adapter-auto';
2+
3+
/** @type {import('@sveltejs/kit').Config} */
4+
const config = {
5+
kit: {
6+
adapter: adapter(),
7+
8+
// hydrate the <div id="svelte"> element in src/app.html
9+
target: '#svelte'
10+
}
11+
};
12+
13+
export default config;

0 commit comments

Comments
 (0)
This repository has been archived.