diff --git a/src/app.html b/src/app.html index dbe39bc..9fc88ed 100755 --- a/src/app.html +++ b/src/app.html @@ -5,6 +5,7 @@ + %sveltekit.head% diff --git a/src/lib/Helper.mjs b/src/lib/Helper.mjs index 9e9f291..d01aec0 100755 --- a/src/lib/Helper.mjs +++ b/src/lib/Helper.mjs @@ -46,11 +46,12 @@ export function animateIn(node, options = {}) { function callback() { timeoutId = setTimeout( - effects.forEach(([effect]) => { - if (effect === 'slide') node.style.removeProperty('translate') - else if (effect === 'fade') node.style.removeProperty('opacity') - else if (effect === 'zoom') node.style.removeProperty('scale') - }), + () => + effects.forEach(([effect]) => { + if (effect === 'slide') node.style.removeProperty('translate') + else if (effect === 'fade') node.style.removeProperty('opacity') + else if (effect === 'zoom') node.style.removeProperty('scale') + }), options.delay ?? 0 ) } diff --git a/src/lib/components/Footer.svelte b/src/lib/components/Footer.svelte index 9095e3a..c08d8a3 100755 --- a/src/lib/components/Footer.svelte +++ b/src/lib/components/Footer.svelte @@ -2,6 +2,7 @@ import DiscordIcon from '~icons/prime/discord' import GithubIcon from '~icons/ri/github-fill' import { discordLink } from '$lib/constants.mjs' + import RssIcon from '~icons/mingcute/rss-fill' /** @type {[string, string, string, string]} */ let team = [ @@ -75,13 +76,21 @@ aria-label="Go to our Github"> +
  • + +

    • Hyprland is licensed under the BSD 3-Clause "New" or "Revised" License.

    © Hyprland Development {new Date().getFullYear()}.

    -

    Doki doki waku waku.

    +

    Stay hydrated

    diff --git a/src/lib/components/news-thumb.svelte b/src/lib/components/news-thumb.svelte index 12d1d97..4e8221e 100644 --- a/src/lib/components/news-thumb.svelte +++ b/src/lib/components/news-thumb.svelte @@ -8,7 +8,7 @@
  • -
    +

    {formatDate(entry.date)}

    @@ -18,7 +18,7 @@ Read upRead up -
    +
    • diff --git a/src/lib/images/logos/HyprlandLogo.png b/src/lib/images/logos/HyprlandLogo.png new file mode 100644 index 0000000..78f0e4a Binary files /dev/null and b/src/lib/images/logos/HyprlandLogo.png differ diff --git a/src/routes/InstallButton.svelte b/src/routes/InstallButton.svelte index 24bd270..c1a88cf 100755 --- a/src/routes/InstallButton.svelte +++ b/src/routes/InstallButton.svelte @@ -27,12 +27,7 @@
    - Distrubution Logo{name} + {name} Logo{name}
    @@ -48,7 +43,7 @@ {command} diff --git a/src/routes/news/+page.svelte b/src/routes/news/+page.svelte index 195b86d..2641571 100644 --- a/src/routes/news/+page.svelte +++ b/src/routes/news/+page.svelte @@ -1,18 +1,64 @@ @@ -22,7 +68,9 @@
    - + <pre class="spinner-wrapper" bind:this={asciiElement} /> + + <Title class="mb-0 duration-1000 animate-in fade-in-0"> <span slot="title">News</span><span slot="subtitle"> Fresh updates straight from the oven </span> @@ -30,12 +78,9 @@ </header> <ul - class="row-auto grid grid-cols-1 gap-14 delay-500 duration-1000 animate-in fade-in-0 slide-in-from-bottom-6 fill-mode-backwards lg:grid-cols-2" + class="row-auto flex flex-col gap-14 animate-in fade-in-0 slide-in-from-bottom-6 fill-mode-backwards [animation-delay:800ms] [animation-duration:1500ms]" > - <div class="col-span-full flex lg:justify-center"> - <NewsThumb entry={latest} /> - </div> - {#each others as entry} + {#each posts as entry} <NewsThumb {entry} /> {/each} </ul> @@ -57,6 +102,14 @@ min-height: 500px; max-height: 900px; width: 100%; - margin-bottom: min(-10vh, -6rem); + margin-bottom: 8rem; + } + + .spinner-wrapper { + @apply mb-4 flex items-center justify-center bg-gradient-to-tr from-blue-500/0 to-cyan-500 bg-clip-text text-transparent animate-in fade-in-0; + animation-duration: 2000ms; + font-size: min(1vh, 1rem); + /* There are 36 rows */ + height: min(36vh, 36rem); } </style> diff --git a/src/routes/rss/+server.js b/src/routes/rss/+server.js new file mode 100644 index 0000000..be9be8e --- /dev/null +++ b/src/routes/rss/+server.js @@ -0,0 +1,44 @@ +const siteURL = 'https://hyprland.org' +const siteTitle = 'Hyprland' +const siteDescription = 'Tiling window manager with the looks' + +export const prerender = true + +export const GET = async ({ fetch }) => { + const allNews = await fetch('api/news') + .then((response) => response.json()) + .then((news) => news.sort((a, b) => new Date(b.date) - new Date(a.date))) + + const body = renderXml(allNews) + const options = { + headers: { + 'Cache-Control': 'max-age=0, s-maxage=3600', + 'Content-Type': 'application/xml' + } + } + + return new Response(body, options) +} + +function renderXml(posts) { + return `<?xml version="1.0" encoding="UTF-8" ?> + <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"> + <channel> + <atom:link href="${siteURL}/rss" rel="self" type="application/rss+xml" /> + <title>${siteTitle} News + ${siteURL}/news + ${siteDescription} + ${posts + .map( + (post) => ` + ${siteURL}/news/${post.slug} + ${post.title} + ${siteURL}/news/${post.slug} + ${new Date(post.date).toUTCString()} +` + ) + .join(' ')} + + + ` +} diff --git a/tailwind.config.js b/tailwind.config.js index a28718d..901f5d6 100755 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,10 +1,6 @@ const { fontFamily } = require('tailwindcss/defaultTheme') const colors = require('tailwindcss/colors') -console.log({ colors }) - -// const sansFamily = - /** @type {import('tailwindcss').Config} */ export default { content: ['./src/**/**/*.{html,js,svelte,ts}'], @@ -26,7 +22,7 @@ export default { css: { code: { padding: '0.2em 0.4em', - 'background-color': colors.slate[700], + 'background-color': colors.slate[800], 'border-radius': '6px', 'font-weight': 'inherit' },