070500
This commit is contained in:
44
src/components/ArrowCard.tsx
Normal file
44
src/components/ArrowCard.tsx
Normal file
@@ -0,0 +1,44 @@
|
||||
import { formatDate } from "@lib/utils"
|
||||
import type { CollectionEntry } from "astro:content"
|
||||
|
||||
type Props = {
|
||||
entry: CollectionEntry<"blog"> | CollectionEntry<"projects">
|
||||
pill?: boolean
|
||||
}
|
||||
|
||||
export default function ArrowCard({entry, pill}: Props) {
|
||||
return (
|
||||
<a href={`/${entry.collection}/${entry.slug}`} class="group p-4 gap-3 flex items-center border rounded-lg hover:bg-black/5 hover:dark:bg-white/10 border-black/15 dark:border-white/20 transition-colors duration-300 ease-in-out">
|
||||
<div class="w-full group-hover:text-black group-hover:dark:text-white blend">
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
{pill &&
|
||||
<div class="text-sm capitalize px-2 py-0.5 rounded-full border border-black/15 dark:border-white/25">
|
||||
{entry.collection === "blog" ? "post" : "project"}
|
||||
</div>
|
||||
}
|
||||
<div class="text-sm uppercase">
|
||||
{formatDate(entry.data.date)}
|
||||
</div>
|
||||
</div>
|
||||
<div class="font-semibold mt-3 text-black dark:text-white">
|
||||
{entry.data.title}
|
||||
</div>
|
||||
|
||||
<div class="text-sm line-clamp-2">
|
||||
{entry.data.summary}
|
||||
</div>
|
||||
<ul class="flex flex-wrap mt-2 gap-1">
|
||||
{entry.data.tags.map((tag:string) => ( // this line has an error; Parameter 'tag' implicitly has an 'any' type.ts(7006)
|
||||
<li class="text-xs uppercase py-0.5 px-1 rounded bg-black/5 dark:bg-white/20 text-black/75 dark:text-white/75">
|
||||
{tag}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="stroke-current group-hover:stroke-black group-hover:dark:stroke-white">
|
||||
<line x1="5" y1="12" x2="19" y2="12" class="scale-x-0 group-hover:scale-x-100 translate-x-4 group-hover:translate-x-1 transition-all duration-300 ease-in-out" />
|
||||
<polyline points="12 5 19 12 12 19" class="translate-x-0 group-hover:translate-x-1 transition-all duration-300 ease-in-out" />
|
||||
</svg>
|
||||
</a>
|
||||
)
|
||||
}
|
||||
68
src/components/BaseHead.astro
Normal file
68
src/components/BaseHead.astro
Normal file
@@ -0,0 +1,68 @@
|
||||
---
|
||||
import { ViewTransitions } from "astro:transitions"
|
||||
|
||||
interface Props {
|
||||
title: string
|
||||
description: string
|
||||
image?: string
|
||||
}
|
||||
|
||||
const canonicalURL = new URL(Astro.url.pathname, Astro.site)
|
||||
|
||||
const { title, description, image = "/open-graph.jpg" } = Astro.props
|
||||
---
|
||||
|
||||
<!-- Global Metadata -->
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
|
||||
<link rel="preload" href="/fonts/atkinson-regular.woff" as="font" type="font/woff" crossorigin>
|
||||
<link rel="preload" href="/fonts/atkinson-bold.woff" as="font" type="font/woff" crossorigin>
|
||||
|
||||
<!-- Canonical URL -->
|
||||
<link rel="canonical" href={canonicalURL} />
|
||||
|
||||
<!-- Primary Meta Tags -->
|
||||
<title>{title}</title>
|
||||
<meta name="title" content={title} />
|
||||
<meta name="description" content={description} />
|
||||
|
||||
<!-- Open Graph / Facebook -->
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content={Astro.url} />
|
||||
<meta property="og:title" content={title} />
|
||||
<meta property="og:description" content={description} />
|
||||
<meta property="og:image" content={new URL(image, Astro.url)} />
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta property="twitter:card" content="summary_large_image" />
|
||||
<meta property="twitter:url" content={Astro.url} />
|
||||
<meta property="twitter:title" content={title} />
|
||||
<meta property="twitter:description" content={description} />
|
||||
<meta property="twitter:image" content={new URL(image, Astro.url)} />
|
||||
|
||||
<!-- Sitemap -->
|
||||
<link rel="sitemap" href="/sitemap-index.xml" />
|
||||
|
||||
<!-- RSS Feed -->
|
||||
<link rel="alternate" type="application/rss+xml" title={title} href={`${Astro.site}rss.xml`}/>
|
||||
|
||||
<!-- Global Scripts -->
|
||||
<script is:inline src="/js/theme.js"></script>
|
||||
<script is:inline src="/js/scroll.js"></script>
|
||||
<script is:inline src="/js/animate.js"></script>
|
||||
|
||||
<!-- <ViewTransitions /> -->
|
||||
|
||||
<script>
|
||||
import type { TransitionBeforeSwapEvent } from "astro:transitions/client"
|
||||
document.addEventListener("astro:before-swap", (e) =>
|
||||
[
|
||||
...(e as TransitionBeforeSwapEvent).newDocument.head.querySelectorAll(
|
||||
"link[as=\"font\"]"
|
||||
),
|
||||
].forEach((link) => link.remove())
|
||||
)
|
||||
</script>
|
||||
72
src/components/Blog.tsx
Normal file
72
src/components/Blog.tsx
Normal file
@@ -0,0 +1,72 @@
|
||||
import type { CollectionEntry } from "astro:content"
|
||||
import { createEffect, createSignal, For } from "solid-js"
|
||||
import ArrowCard from "@components/ArrowCard"
|
||||
import { cn } from "@lib/utils"
|
||||
|
||||
type Props = {
|
||||
tags: string[]
|
||||
data: CollectionEntry<"blog">[]
|
||||
}
|
||||
|
||||
export default function Blog({ data, tags }: Props) {
|
||||
const [filter, setFilter] = createSignal(new Set<string>())
|
||||
const [posts, setPosts] = createSignal<CollectionEntry<"blog">[]>([])
|
||||
|
||||
createEffect(() => {
|
||||
setPosts(data.filter((entry) =>
|
||||
Array.from(filter()).every((value) =>
|
||||
entry.data.tags.some((tag:string) =>
|
||||
tag.toLowerCase() === String(value).toLowerCase()
|
||||
)
|
||||
)
|
||||
))
|
||||
})
|
||||
|
||||
function toggleTag(tag: string) {
|
||||
setFilter((prev) =>
|
||||
new Set(prev.has(tag)
|
||||
? [...prev].filter((t) => t !== tag)
|
||||
: [...prev, tag]
|
||||
)
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div class="grid grid-cols-1 sm:grid-cols-3 gap-6">
|
||||
<div class="col-span-3 sm:col-span-1">
|
||||
<div class="sticky top-24">
|
||||
<div class="text-sm font-semibold uppercase mb-2 text-black dark:text-white">Filter</div>
|
||||
<ul class="flex flex-wrap sm:flex-col gap-1.5">
|
||||
<For each={tags}>
|
||||
{(tag) => (
|
||||
<li>
|
||||
<button onClick={() => toggleTag(tag)} class={cn("w-full px-2 py-1 rounded", "whitespace-nowrap overflow-hidden overflow-ellipsis", "flex gap-2 items-center", "bg-black/5 dark:bg-white/10", "hover:bg-black/10 hover:dark:bg-white/15", "transition-colors duration-300 ease-in-out", filter().has(tag) && "text-black dark:text-white")}>
|
||||
<svg class={cn("size-5 fill-black/50 dark:fill-white/50", "transition-colors duration-300 ease-in-out", filter().has(tag) && "fill-black dark:fill-white")}>
|
||||
<use href={`/ui.svg#square`} class={cn(!filter().has(tag) ? "block" : "hidden")} />
|
||||
<use href={`/ui.svg#square-check`} class={cn(filter().has(tag) ? "block" : "hidden")} />
|
||||
</svg>
|
||||
{tag}
|
||||
</button>
|
||||
</li>
|
||||
)}
|
||||
</For>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-3 sm:col-span-2">
|
||||
<div class="flex flex-col">
|
||||
<div class="text-sm uppercase mb-2">
|
||||
SHOWING {posts().length} OF {data.length} POSTS
|
||||
</div>
|
||||
<ul class="flex flex-col gap-3">
|
||||
{posts().map((post) => (
|
||||
<li>
|
||||
<ArrowCard entry={post} />
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
20
src/components/Container.astro
Normal file
20
src/components/Container.astro
Normal file
@@ -0,0 +1,20 @@
|
||||
---
|
||||
import { cn } from "@lib/utils"
|
||||
|
||||
type Props = {
|
||||
size: "sm" | "md" | "lg" | "xl" | "2xl"
|
||||
}
|
||||
|
||||
const { size } = Astro.props;
|
||||
---
|
||||
|
||||
<div class={cn(
|
||||
"w-full h-full mx-auto px-5",
|
||||
size === "sm" && "max-w-screen-sm",
|
||||
size === "md" && "max-w-screen-md",
|
||||
size === "lg" && "max-w-screen-lg",
|
||||
size === "xl" && "max-w-screen-xl",
|
||||
size === "2xl" && "max-w-screen-2xl",
|
||||
)}>
|
||||
<slot/>
|
||||
</div>
|
||||
21
src/components/Counter.tsx
Normal file
21
src/components/Counter.tsx
Normal file
@@ -0,0 +1,21 @@
|
||||
import { createSignal } from "solid-js"
|
||||
|
||||
function CounterButton() {
|
||||
const [count, setCount] = createSignal(0)
|
||||
|
||||
const increment = () => setCount(count() + 1)
|
||||
|
||||
return (
|
||||
<div class="flex gap-4 items-center">
|
||||
<button onClick={increment} class="px-3 py-1 border border-black/25 dark:border-white/25 hover:bg-black/5 dark:hover:bg-white/15 blend">
|
||||
Increment
|
||||
</button>
|
||||
<div>
|
||||
Clicked {count()} {count() === 1 ? "time" : "times"}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
export default CounterButton
|
||||
47
src/components/Drawer.astro
Normal file
47
src/components/Drawer.astro
Normal file
@@ -0,0 +1,47 @@
|
||||
---
|
||||
import { SITE, LINKS } from "@consts"
|
||||
import { cn } from "@lib/utils"
|
||||
const { pathname } = Astro.url
|
||||
const subpath = pathname.match(/[^/]+/g)
|
||||
---
|
||||
|
||||
<div id="drawer" class="fixed inset-0 h-0 z-40 overflow-hidden flex flex-col items-center justify-center md:hidden bg-neutral-100 dark:bg-neutral-900 transition-[height] duration-300 ease-in-out">
|
||||
<nav class="flex flex-col items-center space-y-2">
|
||||
{
|
||||
LINKS.map((LINK) => (
|
||||
<a href={LINK.HREF} class={cn("flex items-center justify-center px-3 py-1 rounded-full", "text-current hover:text-black dark:hover:text-white", "hover:bg-black/5 dark:hover:bg-white/20", "transition-colors duration-300 ease-in-out", pathname === LINK.HREF || "/" + subpath?.[0] === LINK.HREF ? "pointer-events-none bg-black dark:bg-white text-white dark:text-black" : "")}>
|
||||
{LINK.TEXT}
|
||||
</a>
|
||||
))
|
||||
}
|
||||
</nav>
|
||||
|
||||
<div class="flex gap-1 mt-5">
|
||||
<a href="/search" aria-label={`Search blog posts and projects on ${SITE.TITLE}`} class={cn("size-9 rounded-full p-2 items-center justify-center bg-transparent hover:bg-black/5 dark:hover:bg-white/20 stroke-current hover:stroke-black hover:dark:stroke-white border border-black/10 dark:border-white/25 transition-colors duration-300 ease-in-out", pathname === "/search" || "/" + subpath?.[0] === "search" ? "pointer-events-none bg-black dark:bg-white text-white dark:text-black" : "")}>
|
||||
<svg class="size-full">
|
||||
<use href="/ui.svg#search"></use>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a href="/rss.xml" target="_blank" aria-label={`Rss feed for ${SITE.TITLE}`} class="size-9 rounded-full p-2 items-center justify-center bg-transparent hover:bg-black/5 dark:hover:bg-white/20 stroke-current hover:stroke-black hover:dark:stroke-white border border-black/10 dark:border-white/25 transition-colors duration-300 ease-in-out">
|
||||
<svg class="size-full">
|
||||
<use href="/ui.svg#rss"></use>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<button id="drawer-theme-button" aria-label={`Toggle light and dark theme`} class="size-9 rounded-full p-2 items-center justify-center bg-transparent hover:bg-black/5 dark:hover:bg-white/20 stroke-current hover:stroke-black hover:dark:stroke-white border border-black/10 dark:border-white/25 transition-colors duration-300 ease-in-out">
|
||||
<svg class="block dark:hidden size-full">
|
||||
<use href="/ui.svg#sun"></use>
|
||||
</svg>
|
||||
<svg class="hidden dark:block size-full">
|
||||
<use href="/ui.svg#moon"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
#drawer.open {
|
||||
@apply h-full;
|
||||
}
|
||||
</style>
|
||||
104
src/components/Footer.astro
Normal file
104
src/components/Footer.astro
Normal file
@@ -0,0 +1,104 @@
|
||||
---
|
||||
import { SITE, SOCIALS } from "@consts"
|
||||
import Container from "@components/Container.astro"
|
||||
---
|
||||
|
||||
<footer class="relative bg-white dark:bg-black">
|
||||
<div class="animate">
|
||||
<section class="py-5">
|
||||
<Container size="md">
|
||||
<div class="flex items-center justify-center sm:justify-end">
|
||||
<button id="back-to-top" aria-label="Back to top of page" class="group flex w-fit p-1.5 gap-1.5 text-sm items-center border rounded hover:bg-black/5 hover:dark:bg-white/10 border-black/15 dark:border-white/20 transition-colors duration-300 ease-in-out">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="stroke-current group-hover:stroke-black group-hover:dark:stroke-white rotate-90">
|
||||
<line x1="19" y1="12" x2="5" y2="12" class="scale-x-0 group-hover:scale-x-100 translate-x-3 group-hover:translate-x-0 transition-all duration-300 ease-in-out" />
|
||||
<polyline points="12 19 5 12 12 5" class="translate-x-1 group-hover:translate-x-0 transition-all duration-300 ease-in-out" />
|
||||
</svg>
|
||||
<div class="w-full group-hover:text-black group-hover:dark:text-white transition-colors duration-300 ease-in-out">
|
||||
В начало
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
|
||||
<section class=" py-5 overflow-hidden whitespace-nowrap border-t border-black/10 dark:border-white/25">
|
||||
<Container size="md">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
||||
<div class="flex flex-col items-center sm:items-start">
|
||||
<a href="/" class="flex gap-1 w-fit font-semibold text-current hover:text-black dark:hover:text-white transition-colors duration-300 ease-in-out">
|
||||
<svg class="size-6 fill-current">
|
||||
<use href="/brand.svg#brand"/>
|
||||
</svg>
|
||||
{SITE.TITLE}
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex gap-2 justify-center sm:justify-end items-center">
|
||||
<span class="relative flex h-3 w-3">
|
||||
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-300"></span>
|
||||
<span class="relative inline-flex rounded-full h-3 w-3 bg-green-500"></span>
|
||||
</span>
|
||||
Все системы в норме
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
|
||||
<section class=" py-5 overflow-hidden whitespace-nowrap border-t border-black/10 dark:border-white/25">
|
||||
<Container size="md">
|
||||
<div class="h-full grid grid-cols-1 sm:grid-cols-2 gap-3">
|
||||
<div class="order-2 sm:order-1 flex flex-col items-center justify-center sm:items-start">
|
||||
<div class="legal">
|
||||
<a href="/legal/terms" class="text-current hover:text-black dark:hover:text-white transition-colors duration-300 ease-in-out">
|
||||
Условия использования
|
||||
</a> |
|
||||
<a href="/legal/privacy" class="text-current hover:text-black dark:hover:text-white transition-colors duration-300 ease-in-out">
|
||||
Конфиденциальности
|
||||
</a>
|
||||
</div>
|
||||
<div class="text-sm mt-2">
|
||||
© 2024 | @iTKeyS
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="order-1 sm:order-2 flex justify-center sm:justify-end">
|
||||
<div class="flex flex-wrap gap-1 items-center justify-center">
|
||||
{
|
||||
SOCIALS.map((SOCIAL) => (
|
||||
<a
|
||||
href={SOCIAL.HREF}
|
||||
target="_blank"
|
||||
aria-label={`${SITE.TITLE} on ${SOCIAL.NAME}`}
|
||||
class="group size-10 rounded-full p-2 items-center justify-center hover:bg-black/5 dark:hover:bg-white/20 blend"
|
||||
>
|
||||
<svg class="size-full fill-current group-hover:fill-black group-hover:dark:fill-white blend">
|
||||
<use href={`/social.svg#${SOCIAL.ICON}`} />
|
||||
</svg>
|
||||
</a>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
</footer>
|
||||
|
||||
<script is:inline>
|
||||
function goBackToTop(event) {
|
||||
event.preventDefault()
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
behavior: "smooth"
|
||||
})
|
||||
}
|
||||
|
||||
function inintializeBackToTop() {
|
||||
const backToTop = document.getElementById("back-to-top")
|
||||
backToTop?.addEventListener("click", goBackToTop)
|
||||
}
|
||||
|
||||
document.addEventListener("astro:after-swap", inintializeBackToTop)
|
||||
inintializeBackToTop()
|
||||
</script>
|
||||
103
src/components/Header.astro
Normal file
103
src/components/Header.astro
Normal file
@@ -0,0 +1,103 @@
|
||||
---
|
||||
import { SITE, LINKS } from "@consts"
|
||||
import { cn } from "@lib/utils"
|
||||
const { pathname } = Astro.url
|
||||
const subpath = pathname.match(/[^/]+/g)
|
||||
import Container from "@components/Container.astro"
|
||||
---
|
||||
|
||||
<header id="header" class="fixed top-0 w-full h-16 z-50 ">
|
||||
<Container size="md">
|
||||
<div class="relative h-full w-full">
|
||||
<div class="absolute left-0 top-1/2 -translate-y-1/2 flex gap-1 font-semibold">
|
||||
<a href="/" class="flex gap-1 text-current hover:text-black dark:hover:text-white transition-colors duration-300 ease-in-out">
|
||||
<svg class="size-6 fill-current">
|
||||
<use href="/brand.svg#brand"></use>
|
||||
</svg>
|
||||
<div>
|
||||
{SITE.TITLE}
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
|
||||
<nav class="hidden md:flex items-center justify-center text-sm gap-1">
|
||||
{
|
||||
LINKS.map((LINK) => (
|
||||
<a href={LINK.HREF} class={cn("h-8 rounded-full px-3 text-current", "flex items-center justify-center", "transition-colors duration-300 ease-in-out", pathname === LINK.HREF || "/" + subpath?.[0] === LINK.HREF ? "bg-black dark:bg-white text-white dark:text-black" : "hover:bg-black/5 dark:hover:bg-white/20 hover:text-black dark:hover:text-white")}>
|
||||
{LINK.TEXT}
|
||||
</a>
|
||||
))
|
||||
}
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="buttons absolute right-0 top-1/2 -translate-y-1/2 flex gap-1">
|
||||
<a href="/search" aria-label={`Search blog posts and projects on ${SITE.TITLE}`} class={cn("hidden md:flex", "size-9 rounded-full p-2 items-center justify-center", "bg-transparent hover:bg-black/5 dark:hover:bg-white/20", "stroke-current hover:stroke-black hover:dark:stroke-white", "border border-black/10 dark:border-white/25", "transition-colors duration-300 ease-in-out", pathname === "/search" || "/" + subpath?.[0] === "/search" ? "pointer-events-none bg-black dark:bg-white text-white dark:text-black" : "")}>
|
||||
<svg class="size-full">
|
||||
<use href="/ui.svg#search"></use>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a href="/rss.xml" target="_blank" aria-label={`Rss feed for ${SITE.TITLE}`} class={cn("hidden md:flex", "size-9 rounded-full p-2 items-center justify-center", "bg-transparent hover:bg-black/5 dark:hover:bg-white/20", "stroke-current hover:stroke-black hover:dark:stroke-white", "border border-black/10 dark:border-white/25", "transition-colors duration-300 ease-in-out")}>
|
||||
<svg class="size-full">
|
||||
<use href="/ui.svg#rss"></use>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<button id="header-theme-button" aria-label={`Toggle light and dark theme`} class={cn("hidden md:flex", "size-9 rounded-full p-2 items-center justify-center", "bg-transparent hover:bg-black/5 dark:hover:bg-white/20", "stroke-current hover:stroke-black hover:dark:stroke-white", "border border-black/10 dark:border-white/25", "transition-colors duration-300 ease-in-out")}>
|
||||
<svg class="size-full block dark:hidden">
|
||||
<use href="/ui.svg#sun"></use>
|
||||
</svg>
|
||||
<svg class="size-full hidden dark:block">
|
||||
<use href="/ui.svg#moon"></use>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<button id="header-drawer-button" aria-label={`Toggle drawer open and closed`} class={cn("flex md:hidden", "size-9 rounded-full p-2 items-center justify-center", "bg-transparent hover:bg-black/5 dark:hover:bg-white/20", "stroke-current hover:stroke-black hover:dark:stroke-white", "border border-black/10 dark:border-white/25", "transition-colors duration-300 ease-in-out")}>
|
||||
<svg id="drawer-open" class="size-full">
|
||||
<use href="/ui.svg#menu"></use>
|
||||
</svg>
|
||||
<svg id="drawer-close" class="size-full">
|
||||
<use href="/ui.svg#x"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</header>
|
||||
|
||||
<style>
|
||||
#header-drawer-button > #drawer-open {
|
||||
@apply block;
|
||||
}
|
||||
|
||||
#header-drawer-button > #drawer-close {
|
||||
@apply hidden;
|
||||
}
|
||||
|
||||
#header-drawer-button.open > #drawer-open {
|
||||
@apply hidden;
|
||||
}
|
||||
|
||||
#header-drawer-button.open > #drawer-close {
|
||||
@apply block;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script is:inline>
|
||||
function toggleDrawer() {
|
||||
const drawer = document.getElementById("drawer")
|
||||
const drawerButton = document.getElementById("header-drawer-button")
|
||||
drawer?.classList.toggle("open")
|
||||
drawerButton?.classList.toggle("open")
|
||||
}
|
||||
|
||||
function initializeDrawerButton() {
|
||||
const drawerButton = document.getElementById("header-drawer-button")
|
||||
drawerButton?.addEventListener("click", toggleDrawer)
|
||||
}
|
||||
|
||||
document.addEventListener("astro:after-swap", initializeDrawerButton)
|
||||
initializeDrawerButton()
|
||||
</script>
|
||||
42
src/components/MeteorShower.astro
Normal file
42
src/components/MeteorShower.astro
Normal file
@@ -0,0 +1,42 @@
|
||||
---
|
||||
/**
|
||||
* Meteors.astro
|
||||
* This component creates meteors that are appended to the galaxy on interval.
|
||||
* Meteors are removed from the document after the animation is completed.
|
||||
* There are four (4) meteor shower containers, one for each diagonal direction.
|
||||
*/
|
||||
---
|
||||
|
||||
<div id="meteors">
|
||||
<!-- rotations defined in base.css & tailwind.config.mjs -->
|
||||
<div class="shower ur" />
|
||||
<div class="shower dr" />
|
||||
<div class="shower dl" />
|
||||
<div class="shower ul" />
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function createMeteor () {
|
||||
// create a meteor
|
||||
let meteor = document.createElement("div");
|
||||
meteor.setAttribute("class", "meteor");
|
||||
meteor.style.left = Math.round(Math.random() * window.innerWidth) + "px";
|
||||
meteor.style.top = Math.round(Math.random() * window.innerHeight) + "px";
|
||||
|
||||
// append the meteor to a random meteor shower (direction)
|
||||
const showers = document.querySelectorAll(".shower");
|
||||
if (showers.length > 0) {
|
||||
const random = Math.floor(Math.random() * showers.length);
|
||||
const shower = showers[random];
|
||||
shower.append(meteor);
|
||||
}
|
||||
|
||||
// remove the meteor after the animation duration
|
||||
setTimeout(() => {
|
||||
meteor.remove();
|
||||
}, 3500);
|
||||
}
|
||||
|
||||
// Create meteors on interval on two (2) seconds
|
||||
setInterval(createMeteor, 1500);
|
||||
</script>
|
||||
72
src/components/Projects.tsx
Normal file
72
src/components/Projects.tsx
Normal file
@@ -0,0 +1,72 @@
|
||||
import type { CollectionEntry } from "astro:content"
|
||||
import { createEffect, createSignal, For } from "solid-js"
|
||||
import ArrowCard from "@components/ArrowCard"
|
||||
import { cn } from "@lib/utils"
|
||||
|
||||
type Props = {
|
||||
tags: string[]
|
||||
data: CollectionEntry<"projects">[]
|
||||
}
|
||||
|
||||
export default function Projects({ data, tags }: Props) {
|
||||
const [filter, setFilter] = createSignal(new Set<string>())
|
||||
const [projects, setProjects] = createSignal<CollectionEntry<"projects">[]>([])
|
||||
|
||||
createEffect(() => {
|
||||
setProjects(data.filter((entry) =>
|
||||
Array.from(filter()).every((value) =>
|
||||
entry.data.tags.some((tag:string) =>
|
||||
tag.toLowerCase() === String(value).toLowerCase()
|
||||
)
|
||||
)
|
||||
))
|
||||
})
|
||||
|
||||
function toggleTag(tag: string) {
|
||||
setFilter((prev) =>
|
||||
new Set(prev.has(tag)
|
||||
? [...prev].filter((t) => t !== tag)
|
||||
: [...prev, tag]
|
||||
)
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div class="grid grid-cols-1 sm:grid-cols-3 gap-6">
|
||||
<div class="col-span-3 sm:col-span-1">
|
||||
<div class="sticky top-24">
|
||||
<div class="text-sm font-semibold uppercase mb-2 text-black dark:text-white">Filter</div>
|
||||
<ul class="flex flex-wrap sm:flex-col gap-1.5">
|
||||
<For each={tags}>
|
||||
{(tag) => (
|
||||
<li>
|
||||
<button onClick={() => toggleTag(tag)} class={cn("w-full px-2 py-1 rounded", "whitespace-nowrap overflow-hidden overflow-ellipsis", "flex gap-2 items-center", "bg-black/5 dark:bg-white/10", "hover:bg-black/10 hover:dark:bg-white/15", "transition-colors duration-300 ease-in-out", filter().has(tag) && "text-black dark:text-white")}>
|
||||
<svg class={cn("size-5 fill-black/50 dark:fill-white/50", "transition-colors duration-300 ease-in-out", filter().has(tag) && "fill-black dark:fill-white")}>
|
||||
<use href={`/ui.svg#square`} class={cn(!filter().has(tag) ? "block" : "hidden")} />
|
||||
<use href={`/ui.svg#square-check`} class={cn(filter().has(tag) ? "block" : "hidden")} />
|
||||
</svg>
|
||||
{tag}
|
||||
</button>
|
||||
</li>
|
||||
)}
|
||||
</For>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-3 sm:col-span-2">
|
||||
<div class="flex flex-col">
|
||||
<div class="text-sm uppercase mb-2">
|
||||
SHOWING {projects().length} OF {data.length} PROJECTS
|
||||
</div>
|
||||
<ul class="flex flex-col gap-3">
|
||||
{projects().map((project) => (
|
||||
<li>
|
||||
<ArrowCard entry={project} />
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
58
src/components/Search.tsx
Normal file
58
src/components/Search.tsx
Normal file
@@ -0,0 +1,58 @@
|
||||
import type { CollectionEntry } from "astro:content"
|
||||
import { createEffect, createSignal } from "solid-js"
|
||||
import Fuse from "fuse.js"
|
||||
import ArrowCard from "@components/ArrowCard"
|
||||
|
||||
type Props = {
|
||||
data: CollectionEntry<"blog">[]
|
||||
}
|
||||
|
||||
export default function Search({data}: Props) {
|
||||
const [query, setQuery] = createSignal("")
|
||||
const [results, setResults] = createSignal<CollectionEntry<"blog">[]>([])
|
||||
|
||||
const fuse = new Fuse(data, {
|
||||
keys: ["slug", "data.title", "data.summary", "data.tags"],
|
||||
includeMatches: true,
|
||||
minMatchCharLength: 2,
|
||||
threshold: 0.4,
|
||||
})
|
||||
|
||||
createEffect(() => {
|
||||
if (query().length < 2) {
|
||||
setResults([])
|
||||
} else {
|
||||
setResults(fuse.search(query()).map((result) => result.item))
|
||||
}
|
||||
})
|
||||
|
||||
const onInput = (e: Event) => {
|
||||
const target = e.target as HTMLInputElement
|
||||
setQuery(target.value)
|
||||
}
|
||||
|
||||
return (
|
||||
<div class="flex flex-col">
|
||||
<div class="relative">
|
||||
<input name="search" type="text" value={query()} onInput={onInput} autocomplete="off" spellcheck={false} placeholder="What are you looking for?" class="w-full px-2.5 py-1.5 pl-10 rounded outline-none text-black dark:text-white bg-black/5 dark:bg-white/15 border border-black/10 dark:border-white/20 focus:border-black focus:dark:border-white"/>
|
||||
<svg class="absolute size-6 left-1.5 top-1/2 -translate-y-1/2 stroke-current">
|
||||
<use href={`/ui.svg#search`}/>
|
||||
</svg>
|
||||
</div>
|
||||
{(query().length >= 2 && results().length >= 1) && (
|
||||
<div class="mt-12">
|
||||
<div class="text-sm uppercase mb-2">
|
||||
Found {results().length} results for {`'${query()}'`}
|
||||
</div>
|
||||
<ul class="flex flex-col gap-3">
|
||||
{results().map(result => (
|
||||
<li>
|
||||
<ArrowCard entry={result} pill={true} />
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
18
src/components/StackCard.astro
Normal file
18
src/components/StackCard.astro
Normal file
@@ -0,0 +1,18 @@
|
||||
---
|
||||
type Props = {
|
||||
text: string
|
||||
icon: string
|
||||
href: string
|
||||
}
|
||||
|
||||
const { text, icon, href } = Astro.props
|
||||
---
|
||||
|
||||
<a href={href} target="_blank" class="w-fit px-3 py-2 group rounded border flex gap-2 items-center border-neutral-200 dark:border-neutral-700 hover:bg-neutral-100 hover:dark:bg-neutral-800 blend">
|
||||
<svg height={20} width={20}>
|
||||
<use href={`/stack.svg#${icon}`}></use>
|
||||
</svg>
|
||||
<span class="text-sm capitalize text-neutral-500 dark:text-neutral-400 group-hover:text-black group-hover:dark:text-white blend">
|
||||
{text}
|
||||
</span>
|
||||
</a>
|
||||
62
src/components/TwinklingStars.astro
Normal file
62
src/components/TwinklingStars.astro
Normal file
@@ -0,0 +1,62 @@
|
||||
---
|
||||
/**
|
||||
* TwinkleStars.astro
|
||||
* This component creates twinkling stars that are appended to the galaxy on interval.
|
||||
* Twinkle stars are removed from the document after the animation is completed.
|
||||
* The svg below is just a template for the script to clone and append to the galaxy.
|
||||
*/
|
||||
---
|
||||
|
||||
<svg
|
||||
id="twinkle-star"
|
||||
class="template"
|
||||
width="149"
|
||||
height="149"
|
||||
viewBox="0 0 149 149"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="absolute left-full animate-twinkle"
|
||||
>
|
||||
<circle cx="74" cy="74" r="11" fill="white"/>
|
||||
<rect y="141.421" width="200" height="10" transform="rotate(-45 0 141.421)" fill="url(#paint0_linear_4_2)"/>
|
||||
<rect x="7.07107" width="200" height="10" transform="rotate(45 7.07107 0)" fill="url(#paint1_linear_4_2)"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_4_2" x1="0" y1="146.421" x2="200" y2="146.421" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#1E1E1E"/>
|
||||
<stop offset="0.445" stop-color="white"/>
|
||||
<stop offset="0.58721" stop-color="white"/>
|
||||
<stop offset="1" stop-color="#1E1E1E"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear_4_2" x1="7.07107" y1="5" x2="207.071" y2="5" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#1E1E1E"/>
|
||||
<stop offset="0.42" stop-color="white"/>
|
||||
<stop offset="0.555" stop-color="white"/>
|
||||
<stop offset="1" stop-color="#1E1E1E"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
<script is:inline>
|
||||
// Generate a twinkle star and append it to the galaxy, remove it after animation.
|
||||
function generateTwinkleStar() {
|
||||
const twinkleStarTemplate = document.getElementById("twinkle-star")
|
||||
if (!twinkleStarTemplate) { return; }
|
||||
// Clone the twinkle star template and set its attributes.
|
||||
const twinkleStar = twinkleStarTemplate.cloneNode(true);
|
||||
twinkleStar.style.position = "absolute";
|
||||
twinkleStar.style.left = Math.floor(Math.random() * window.innerWidth) + "px";
|
||||
twinkleStar.style.top = Math.floor(Math.random() * (window.innerHeight/3)) + "px";
|
||||
twinkleStar.style.width = window.innerWidth < 768 ? Math.floor(Math.random() * (15 - 7.5 + 1) + 7.5) : Math.floor(Math.random() * (30 - 15 + 1) + 15) + "px";
|
||||
twinkleStar.style.height = twinkleStar.style.width;
|
||||
twinkleStar.classList.add("twinkle");
|
||||
document.getElementById("galaxy").appendChild(twinkleStar);
|
||||
|
||||
// Remove the twinkle star after the animation is completed.
|
||||
setTimeout(() => {
|
||||
twinkleStar.remove();
|
||||
}, 2500);
|
||||
}
|
||||
|
||||
setInterval(generateTwinkleStar, 5000);
|
||||
</script>
|
||||
|
||||
87
src/consts.ts
Normal file
87
src/consts.ts
Normal file
@@ -0,0 +1,87 @@
|
||||
import type { Site, Page, Links, Socials } from "@types"
|
||||
|
||||
// Global
|
||||
export const SITE: Site = {
|
||||
TITLE: "Плата Управления РФ",
|
||||
DESCRIPTION: "Время пришло! Для новых горизонтов возможностей!",
|
||||
AUTHOR: "iTKeyS",
|
||||
}
|
||||
|
||||
// Work Page
|
||||
export const WORK: Page = {
|
||||
TITLE: "Работа",
|
||||
DESCRIPTION: "Сдесь мы собираем задачи которые можем и возможно будем решать.",
|
||||
}
|
||||
|
||||
// Blog Page
|
||||
export const BLOG: Page = {
|
||||
TITLE: "Блог",
|
||||
DESCRIPTION: "В этом разделе мы рассказываем о ходе наших работ.",
|
||||
}
|
||||
|
||||
// Projects Page
|
||||
export const PROJECTS: Page = {
|
||||
TITLE: "Проекты",
|
||||
DESCRIPTION: "Этот раздел уже готовых комплексных задач с подробным описанием.",
|
||||
}
|
||||
|
||||
// Search Page
|
||||
export const SEARCH: Page = {
|
||||
TITLE: "Поиск",
|
||||
DESCRIPTION: "Поиск постов во вкладке проекты.",
|
||||
}
|
||||
|
||||
// Links
|
||||
export const LINKS: Links = [
|
||||
{
|
||||
TEXT: "Главная",
|
||||
HREF: "/",
|
||||
},
|
||||
{
|
||||
TEXT: "Работа",
|
||||
HREF: "/work",
|
||||
},
|
||||
{
|
||||
TEXT: "Блог",
|
||||
HREF: "/blog",
|
||||
},
|
||||
{
|
||||
TEXT: "Проекты",
|
||||
HREF: "/projects",
|
||||
},
|
||||
]
|
||||
|
||||
// Socials
|
||||
export const SOCIALS: Socials = [
|
||||
{
|
||||
NAME: "Email",
|
||||
ICON: "email",
|
||||
TEXT: "krasilnikoff.tihon@gmail.com",
|
||||
HREF: "mailto:krasilnikoff.tihon@gmail.com",
|
||||
},
|
||||
{
|
||||
NAME: "Github",
|
||||
ICON: "github",
|
||||
TEXT: "Plata_Upravleniya_RF",
|
||||
HREF: "https://git.fipi.pro/Plata_Upravleniya_RF"
|
||||
},
|
||||
{
|
||||
NAME: "YouTube",
|
||||
ICON: "youtube",
|
||||
TEXT: "@plata_upravleniya_rf",
|
||||
HREF: "https://www.youtube.com/@plata_upravleniya_rf",
|
||||
},
|
||||
{
|
||||
NAME: "Telegram",
|
||||
ICON: "telegram",
|
||||
TEXT: "plata_upravleniya_rf",
|
||||
HREF: "https://t.me/plata_upravleniya_rf",
|
||||
},
|
||||
{
|
||||
NAME: "Telegram BOT",
|
||||
ICON: "telegram",
|
||||
TEXT: "plata_upravleniya_rf_BOT",
|
||||
HREF: "https://t.me/plata_upravleniya_rf_bot",
|
||||
}
|
||||
]
|
||||
|
||||
51
src/content/blog/01-astro-sphere-file-structure/index.md
Normal file
51
src/content/blog/01-astro-sphere-file-structure/index.md
Normal file
@@ -0,0 +1,51 @@
|
||||
---
|
||||
title: "Astro Sphere: File Structure"
|
||||
summary: "You'll find these directories and files in the project. What do they do?"
|
||||
date: "Mar 17 2024"
|
||||
draft: false
|
||||
tags:
|
||||
- Tutorial
|
||||
- Astro
|
||||
- Astro Sphere
|
||||
---
|
||||
|
||||
A one line summary of what each file and directory is for:
|
||||
```js
|
||||
/
|
||||
├── public/ // Files publicly available to the browser
|
||||
│ ├── fonts/ // The default fonts for Astro Sphere
|
||||
│ │ └── atkinson-bold.woff // default font weight 700
|
||||
│ │ └── atkinson-regular.woff // default font weight 400
|
||||
│ ├── js/ // Javascript that will be imported into <head>
|
||||
│ │ └── animate.js // function for animating page elements
|
||||
│ │ └── bg.js // function for generating the background
|
||||
│ │ └── scroll.js // scroll handler for the header styles
|
||||
│ │ └── theme.js // controls the light and dark theme
|
||||
│ └── brand.svg //the icon that displays in header and footer
|
||||
│ └── favicon.svg //the icon that displays in the browser
|
||||
│ └── ui.svg // an svg sprite for all ui icons on the website
|
||||
│ └── social.svg // an svg sprite for all social media icons
|
||||
│ └── open-graph.jpg // the default image for open-graph
|
||||
│ └── robots.txt // for web crawlers and bots to index the website
|
||||
├── src/ // Everything that will be built for the website
|
||||
│ ├── components/ // All astro and SolidJs components
|
||||
│ ├── content/ // Contains all static markdown to be compiled
|
||||
│ │ | blog/ // Contains all blog post markdown
|
||||
│ │ | projects/ // Contains all projects markdown
|
||||
│ │ | work/ // Contains all work page markdown
|
||||
│ │ | legal/ // Contains all legal docs markdown
|
||||
│ │ └── config.ts // Contains the collection config for Astro
|
||||
│ ├── layouts/ // Reused layouts across the website
|
||||
│ └── pages/ // All of the pages on the website
|
||||
│ └── styles/ // CSS and global tailwind styles
|
||||
│ └── lib/ // Global helper functions
|
||||
│ └── consts.ts // Page metadata, general configuration
|
||||
│ └── types.ts // Types for consts.ts
|
||||
└── .gitignore // Files and directories to be ignored by Git
|
||||
└── .eslintignore // Files and directories to be ignored by ESLint
|
||||
└── eslintrc.cjs // ESLint configuration
|
||||
└── astro.config.mjs // Astro configuration
|
||||
└── tailwind.config.mjs // Tailwind configuration
|
||||
└── tsconfig.json // Typescript configuration
|
||||
└── package.json // All the installed packages
|
||||
```
|
||||
90
src/content/blog/02-astro-sphere-getting-started/index.md
Normal file
90
src/content/blog/02-astro-sphere-getting-started/index.md
Normal file
@@ -0,0 +1,90 @@
|
||||
---
|
||||
title: "Astro Sphere: Getting Started"
|
||||
summary: "You've downloaded and installed the project. Let's hit the ground running."
|
||||
date: "Mar 16 2024"
|
||||
draft: false
|
||||
tags:
|
||||
- Tutorial
|
||||
- Astro
|
||||
- Astro Sphere
|
||||
---
|
||||
|
||||
Astro Sphere is designed to be configurable. This article will cover the basics on
|
||||
configuring the site and make it personal.
|
||||
|
||||
### First let's change the url
|
||||
|
||||
```js
|
||||
//astro.config.mjs
|
||||
|
||||
export default defineConfig({
|
||||
site: "https://astro-sphere.vercel.app", // your domain here
|
||||
integrations: [mdx(), sitemap(), solidJs(), tailwind({ applyBaseStyles: false })],
|
||||
})
|
||||
```
|
||||
|
||||
### Next, Let's configure the Site
|
||||
|
||||
```js
|
||||
// src/consts.ts
|
||||
|
||||
export const SITE: Site = {
|
||||
TITLE: "Astro Sphere",
|
||||
DESCRIPTION: "Welcome to Astro Sphere, a portfolio and blog for designers and developers.",
|
||||
AUTHOR: "Mark Horn",
|
||||
}
|
||||
```
|
||||
|
||||
| Field | Type | Description |
|
||||
| :---------- | :----- | :--------------------------------------------------------------------- |
|
||||
| TITLE | String | The title of the website. Displayed in header and footer. Used in SEO. |
|
||||
| DESCRIPTION | String | The description of the index page of the website. Used in SEO. |
|
||||
| AUTHOR | String | Your name. |
|
||||
|
||||
### Change the branding
|
||||
|
||||
The browser icon is located in `/public/favicon.svg`
|
||||
|
||||
The header and footer branding icon is located in `/public/brand.svg` as a sprite with id="brand"
|
||||
|
||||
### The rest of the consts file
|
||||
|
||||
Each page has a metadata entry that is useful for SEO.
|
||||
|
||||
```js
|
||||
export const WORK: Page = {
|
||||
TITLE: "Work",
|
||||
DESCRIPTION: "Places I have worked.",
|
||||
}
|
||||
```
|
||||
|
||||
The links that are displayed in the header and drawer
|
||||
|
||||
```js
|
||||
export const LINKS: Links = [
|
||||
{ HREF: "/", TEXT: "Home" },
|
||||
{ HREF: "/work", TEXT: "Work" },
|
||||
{ HREF: "/blog", TEXT: "Blog" },
|
||||
{ HREF: "/projects", TEXT: "Projects" },
|
||||
]
|
||||
```
|
||||
|
||||
The social media links
|
||||
|
||||
```js
|
||||
export const SOCIALS: Socials = [
|
||||
{
|
||||
NAME: "Github",
|
||||
ICON: "github",
|
||||
TEXT: "markhorn-dev",
|
||||
HREF: "https://github.com/markhorn-dev/astro-sphere"
|
||||
},
|
||||
]
|
||||
```
|
||||
|
||||
| Field | Type | Required | Description |
|
||||
| :---- | :--- | :------- | :---------- |
|
||||
| NAME | string | yes | Accessible name |
|
||||
| ICON | string | yes | Refers to the symbol id in `public/social.svg` |
|
||||
| TEXT | string | yes | Shorthand profile name |
|
||||
| HREF | string | yes | The link to the social media profile |
|
||||
@@ -0,0 +1,87 @@
|
||||
---
|
||||
title: "Astro Sphere: Adding a new post or project."
|
||||
summary: "Adding a new article (blog post or project) is pretty easy."
|
||||
date: "Mar 14 2024"
|
||||
draft: false
|
||||
tags:
|
||||
- Tutorial
|
||||
- Astro
|
||||
- Astro Sphere
|
||||
---
|
||||
### Basics
|
||||
|
||||
Create a folder in the respective collection you wish to create content. The name of the folder will be the slug in which your content will be found.
|
||||
|
||||
```text
|
||||
creating the following
|
||||
|
||||
/content/blog/my-new-post/index.md
|
||||
|
||||
will be published to
|
||||
|
||||
https://yourdomain.com/blog/my-new-post
|
||||
|
||||
```
|
||||
|
||||
### Frontmatter
|
||||
|
||||
Front matter is in yaml if you are familiar with the format. All posts and projects require frontmatter at the top of the document to be imported. All frontmatter must be inside triple dashes, similar to Astro format. See example below.
|
||||
|
||||
### Blog Collection
|
||||
|
||||
| Field | Type | Req? | Description |
|
||||
| :------ | :------ | :--- | :------------------------------------------------------------ |
|
||||
| title | string | yes | Title of the post. Used in SEO. |
|
||||
| summary | string | yes | Short description of the post. Used in SEO. |
|
||||
| date | string | yes | Any string date that javascript can convert. Used in sorting |
|
||||
| tags | array | yes | Post topic. Array of strings. Used in filtering. |
|
||||
| draft | boolean | no | Hides the post from collections. Unpublished entry. |
|
||||
|
||||
Example blog post frontmatter
|
||||
|
||||
```yaml
|
||||
---
|
||||
title: "Astro Sphere: Adding a new post or project."
|
||||
summary: "Adding a new article (blog post or project) is pretty easy."
|
||||
date: "Mar 18 2024"
|
||||
draft: false
|
||||
tags:
|
||||
- Tutorial
|
||||
- Astro
|
||||
- Astro Sphere
|
||||
---
|
||||
```
|
||||
|
||||
### Projects Collection (extends Blog Collection)
|
||||
|
||||
| Field | Type | Req? | Description |
|
||||
| :------ | :------ | :--- | :------------------------------------------------------------ |
|
||||
| title | string | yes | Title of the post. Used in SEO. |
|
||||
| summary | string | yes | Short description of the post. Used in SEO. |
|
||||
| date | string | yes | Any string date that javascript can convert. Used in sorting |
|
||||
| tags | array | yes | Post topic. Array of strings. Used in filtering. |
|
||||
| draft | boolean | no | Hides the post from collections. Unpublished entry. |
|
||||
| demoUrl | string | no | A link to the deployed project, if applicable. |
|
||||
| repoUrl | string | no | A link to the repository, if applicable. |
|
||||
|
||||
Example project frontmatter
|
||||
|
||||
```yaml
|
||||
---
|
||||
title: "Astro Sphere"
|
||||
summary: "Astro Sphere, a portfolio and blog for designers and developers."
|
||||
date: "Mar 18 2024"
|
||||
draft: false
|
||||
tags:
|
||||
- Astro
|
||||
- Typescript
|
||||
- Javascript
|
||||
- Tailwind
|
||||
- SolidJS
|
||||
demoUrl: https://astro-sphere.vercel.app
|
||||
repoUrl: https://github.com/markhorn-dev/astro-sphere
|
||||
---
|
||||
```
|
||||
|
||||
### Write your content
|
||||
You've made it this far, all that is left to do is write your content beneath the frontmatter. Writing markdown will be covered in the next article.
|
||||
236
src/content/blog/04-astro-sphere-writing-markdown/index.md
Normal file
236
src/content/blog/04-astro-sphere-writing-markdown/index.md
Normal file
@@ -0,0 +1,236 @@
|
||||
---
|
||||
title: "Astro Sphere: Writing Markdown"
|
||||
summary: "Basic Markdown syntax that can be used when writing Markdown content in Astro Sphere."
|
||||
date: "Mar 13 2024"
|
||||
draft: false
|
||||
tags:
|
||||
- Tutorial
|
||||
- Astro
|
||||
- Astro Sphere
|
||||
- Markdown
|
||||
---
|
||||
|
||||
### Headings
|
||||
|
||||
```text
|
||||
# H1
|
||||
|
||||
## H2
|
||||
|
||||
### H3
|
||||
|
||||
#### H4
|
||||
|
||||
##### H5
|
||||
|
||||
###### H6
|
||||
|
||||
```
|
||||
|
||||
# H1
|
||||
|
||||
## H2
|
||||
|
||||
### H3
|
||||
|
||||
#### H4
|
||||
|
||||
##### H5
|
||||
|
||||
###### H6
|
||||
|
||||
### Paragraph
|
||||
|
||||
Xerum, quo qui aut unt expliquam qui dolut labo. Aque venitatiusda cum, voluptionse latur sitiae dolessi aut parist aut dollo enim qui voluptate ma dolestendit peritin re plis aut quas inctum laceat est volestemque commosa as cus endigna tectur, offic to cor sequas etum rerum idem sintibus eiur? Quianimin porecus evelectur, cum que nis nust voloribus ratem aut omnimi, sitatur? Quiatem. Nam, omnis sum am facea corem alique molestrunt et eos evelece arcillit ut aut eos eos nus, sin conecerem erum fuga. Ri oditatquam, ad quibus unda veliamenimin cusam et facea ipsamus es exerum sitate dolores editium rerore eost, temped molorro ratiae volorro te reribus dolorer sperchicium faceata tiustia prat.
|
||||
|
||||
Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sapicia is sinveli squiatum, core et que aut hariosam ex eat.
|
||||
|
||||
### Images
|
||||
|
||||
Relative image in the /public folder
|
||||
|
||||
```markdown
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
Relative Image in the same folder as the markdown
|
||||
|
||||
```markdown
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
## Blockquotes
|
||||
|
||||
The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a `footer` or `cite` element, and optionally with in-line changes such as annotations and abbreviations.
|
||||
|
||||
### Blockquote without attribution
|
||||
|
||||
#### Syntax
|
||||
|
||||
```markdown
|
||||
> Tiam, ad mint andaepu dandae nostion secatur sequo quae.
|
||||
> **Note** that you can use _Markdown syntax_ within a blockquote.
|
||||
```
|
||||
|
||||
#### Output
|
||||
|
||||
> Tiam, ad mint andaepu dandae nostion secatur sequo quae.
|
||||
> **Note** that you can use _Markdown syntax_ within a blockquote.
|
||||
|
||||
### Blockquote with attribution
|
||||
|
||||
#### Syntax
|
||||
|
||||
```markdown
|
||||
> Don't communicate by sharing memory, share memory by communicating.<br>
|
||||
> — <cite>Rob Pike[^1]</cite>
|
||||
```
|
||||
|
||||
#### Output
|
||||
|
||||
> Don't communicate by sharing memory, share memory by communicating.<br>
|
||||
> — <cite>Rob Pike[^1]</cite>
|
||||
|
||||
[^1]: The above quote is excerpted from Rob Pike's [talk](https://www.youtube.com/watch?v=PAAkCSZUG1c) during Gopherfest, November 18, 2015.
|
||||
|
||||
## Tables
|
||||
|
||||
#### Syntax
|
||||
|
||||
```markdown
|
||||
| Italics | Bold | Code |
|
||||
| --------- | -------- | ------ |
|
||||
| _italics_ | **bold** | `code` |
|
||||
```
|
||||
|
||||
#### Output
|
||||
|
||||
| Italics | Bold | Code |
|
||||
| --------- | -------- | ------ |
|
||||
| _italics_ | **bold** | `code` |
|
||||
|
||||
## Code Blocks
|
||||
|
||||
#### Syntax
|
||||
|
||||
we can use 3 backticks ``` in new line and write snippet and close with 3 backticks on new line and to highlight language specific syntac, write one word of language name after first 3 backticks, for eg. html, javascript, css, markdown, typescript, txt, bash
|
||||
|
||||
````markdown
|
||||
```html
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Example HTML5 Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test</p>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
````
|
||||
|
||||
Output
|
||||
|
||||
```html
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Example HTML5 Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test</p>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## List Types
|
||||
|
||||
### Ordered List
|
||||
|
||||
#### Syntax
|
||||
|
||||
```markdown
|
||||
1. First item
|
||||
2. Second item
|
||||
3. Third item
|
||||
```
|
||||
|
||||
#### Output
|
||||
|
||||
1. First item
|
||||
2. Second item
|
||||
3. Third item
|
||||
|
||||
### Unordered List
|
||||
|
||||
#### Syntax
|
||||
|
||||
```markdown
|
||||
- List item
|
||||
- Another item
|
||||
- And another item
|
||||
```
|
||||
|
||||
#### Output
|
||||
|
||||
- List item
|
||||
- Another item
|
||||
- And another item
|
||||
|
||||
### Nested list
|
||||
|
||||
#### Syntax
|
||||
|
||||
```markdown
|
||||
- Fruit
|
||||
- Apple
|
||||
- Orange
|
||||
- Banana
|
||||
- Dairy
|
||||
- Milk
|
||||
- Cheese
|
||||
```
|
||||
|
||||
#### Output
|
||||
|
||||
- Fruit
|
||||
- Apple
|
||||
- Orange
|
||||
- Banana
|
||||
- Dairy
|
||||
- Milk
|
||||
- Cheese
|
||||
|
||||
## Other Elements — abbr, sub, sup, kbd, mark
|
||||
|
||||
#### Syntax
|
||||
|
||||
```markdown
|
||||
<abbr title="Graphics Interchange Format">GIF</abbr> is a bitmap image format.
|
||||
|
||||
H<sub>2</sub>O
|
||||
|
||||
X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup>
|
||||
|
||||
Press <kbd><kbd>CTRL</kbd>+<kbd>ALT</kbd>+<kbd>Delete</kbd></kbd> to end the session.
|
||||
|
||||
Most <mark>salamanders</mark> are nocturnal, and hunt for insects, worms, and other small creatures.
|
||||
```
|
||||
|
||||
#### Output
|
||||
|
||||
<abbr title="Graphics Interchange Format">GIF</abbr> is a bitmap image format.
|
||||
|
||||
H<sub>2</sub>O
|
||||
|
||||
X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup>
|
||||
|
||||
Press <kbd><kbd>CTRL</kbd>+<kbd>ALT</kbd>+<kbd>Delete</kbd></kbd> to end the session.
|
||||
|
||||
Most <mark>salamanders</mark> are nocturnal, and hunt for insects, worms, and other small creatures.
|
||||
BIN
src/content/blog/04-astro-sphere-writing-markdown/spongebob.png
Normal file
BIN
src/content/blog/04-astro-sphere-writing-markdown/spongebob.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 90 KiB |
@@ -0,0 +1,16 @@
|
||||
---
|
||||
type Props = {
|
||||
name: string
|
||||
}
|
||||
const { name } = Astro.props
|
||||
---
|
||||
|
||||
<div class="border p-4 bg-yellow-100 text-black">
|
||||
<div>
|
||||
Hello,
|
||||
<span class="font-semibold">
|
||||
{name}!!!
|
||||
</span>
|
||||
</div>
|
||||
<slot/>
|
||||
</div>
|
||||
53
src/content/blog/05-astro-sphere-writing-mdx/index.mdx
Normal file
53
src/content/blog/05-astro-sphere-writing-mdx/index.mdx
Normal file
@@ -0,0 +1,53 @@
|
||||
---
|
||||
title: "Astro Sphere: Writing MDX"
|
||||
summary: "Lorem ipsum dolor sit amet"
|
||||
date: "Mar 12 2024"
|
||||
draft: false
|
||||
tags:
|
||||
- Tutorial
|
||||
- Astro
|
||||
- Astro Sphere
|
||||
- Markdown
|
||||
- MDX
|
||||
---
|
||||
|
||||
MDX is a special flavor of Markdown that supports embedded JavaScript & JSX syntax. This unlocks the ability to [mix JavaScript and UI Components into your Markdown content](https://docs.astro.build/en/guides/markdown-content/#mdx-features) for things like interactive charts or alerts.
|
||||
|
||||
If you have existing content authored in MDX, this integration will hopefully make migrating to Astro a breeze.
|
||||
|
||||
## An astro component with props
|
||||
|
||||
```
|
||||
// Imported from relative path (same dir as markdown file)
|
||||
import MyComponent from "./MyComponent.astro"
|
||||
|
||||
<MyComponent name="You">
|
||||
Welcome to MDX
|
||||
</MyComponent>
|
||||
```
|
||||
|
||||
import MyComponent from "./MyComponent.astro"
|
||||
|
||||
<MyComponent name="You">
|
||||
Welcome to MDX
|
||||
</MyComponent>
|
||||
|
||||
|
||||
|
||||
## An interactive Solid Js component
|
||||
|
||||
```
|
||||
// Imported from components directory (src/components)
|
||||
import MyComponent from "@components/Counter"
|
||||
|
||||
// Don't forget the astro client:load directive
|
||||
<Counter client:load />
|
||||
```
|
||||
|
||||
import Counter from "@components/Counter"
|
||||
|
||||
<Counter client:load />
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
<br/>
|
||||
54
src/content/blog/06-astro-sphere-social-links/index.md
Normal file
54
src/content/blog/06-astro-sphere-social-links/index.md
Normal file
@@ -0,0 +1,54 @@
|
||||
---
|
||||
title: "Astro Sphere: Social media links"
|
||||
summary: "A quick tutorial on how to change, add or remove social media links"
|
||||
date: "Mar 11 2024"
|
||||
draft: false
|
||||
tags:
|
||||
- Tutorial
|
||||
- Astro
|
||||
- Astro Sphere
|
||||
---
|
||||
|
||||
Astro Sphere comes preconfigured with social media links for Email, Github, Linked In and Twitter (X), but it's very easy to add more.
|
||||
|
||||
### Edit `consts.ts`
|
||||
|
||||
```js
|
||||
// consts.ts
|
||||
|
||||
export const SOCIALS: Socials = [
|
||||
{
|
||||
NAME: "Github",
|
||||
ICON: "github",
|
||||
TEXT: "markhorn-dev",
|
||||
HREF: "https://github.com/markhorn-dev/astro-sphere"
|
||||
},
|
||||
]
|
||||
```
|
||||
|
||||
| Field | Type | Required | Description |
|
||||
| :---- | :--- | :------- | :---------- |
|
||||
| NAME | string | yes | Accessible name |
|
||||
| ICON | string | yes | Refers to the symbol id in `public/social.svg` |
|
||||
| TEXT | string | yes | Shorthand profile name |
|
||||
| HREF | string | yes | The link to the social media profile |
|
||||
|
||||
### Edit /public/social.svg
|
||||
|
||||
Simply add your own symbols to the svg sprite.
|
||||
|
||||
It is recommended that all styles be removed from new symbols added, or they may not show up correctly or conflict with Tailwind's classes.
|
||||
|
||||
The id should match the icon field as specified in your `consts.ts` file.
|
||||
|
||||
```html
|
||||
<!-- public/social.svg -->
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<symbol id="github" viewBox="0 0 496 512">
|
||||
<path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/>
|
||||
</symbol>
|
||||
</defs>
|
||||
</svg>
|
||||
```
|
||||
45
src/content/config.ts
Normal file
45
src/content/config.ts
Normal file
@@ -0,0 +1,45 @@
|
||||
import { defineCollection, z } from "astro:content"
|
||||
|
||||
const work = defineCollection({
|
||||
type: "content",
|
||||
schema: z.object({
|
||||
company: z.string(),
|
||||
role: z.string(),
|
||||
dateStart: z.coerce.date(),
|
||||
dateEnd: z.union([z.coerce.date(), z.string()]),
|
||||
}),
|
||||
})
|
||||
|
||||
const blog = defineCollection({
|
||||
type: "content",
|
||||
schema: z.object({
|
||||
title: z.string(),
|
||||
summary: z.string(),
|
||||
date: z.coerce.date(),
|
||||
tags: z.array(z.string()),
|
||||
draft: z.boolean().optional(),
|
||||
}),
|
||||
})
|
||||
|
||||
const projects = defineCollection({
|
||||
type: "content",
|
||||
schema: z.object({
|
||||
title: z.string(),
|
||||
summary: z.string(),
|
||||
date: z.coerce.date(),
|
||||
tags: z.array(z.string()),
|
||||
draft: z.boolean().optional(),
|
||||
demoUrl: z.string().optional(),
|
||||
repoUrl: z.string().optional(),
|
||||
}),
|
||||
})
|
||||
|
||||
const legal = defineCollection({
|
||||
type: "content",
|
||||
schema: z.object({
|
||||
title: z.string(),
|
||||
date: z.coerce.date(),
|
||||
}),
|
||||
})
|
||||
|
||||
export const collections = { work, blog, projects, legal }
|
||||
28
src/content/legal/privacy.md
Normal file
28
src/content/legal/privacy.md
Normal file
@@ -0,0 +1,28 @@
|
||||
---
|
||||
title: "Privacy Policy"
|
||||
date: "03/07/2024"
|
||||
---
|
||||
|
||||
This Privacy Policy governs the manner in which [Your Company Name] collects, uses, maintains, and discloses information collected from users (each, a "User") of the [Your Website URL] website ("Site"). This privacy policy applies to the Site and all products and services offered by [Your Company Name].
|
||||
|
||||
#### Personal identification information
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sit amet massa ut neque consequat congue. Sed id ipsum vitae sem imperdiet suscipit. Nulla facilisi. Morbi quis nibh at nunc pulvinar rhoncus. Proin porttitor dapibus dolor, id fermentum urna eleifend et. In feugiat pretium erat nec vestibulum.
|
||||
|
||||
#### Non-personal identification information
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sit amet massa ut neque consequat congue. Sed id ipsum vitae sem imperdiet suscipit. Nulla facilisi. Morbi quis nibh at nunc pulvinar rhoncus. Proin porttitor dapibus dolor, id fermentum urna eleifend et. In feugiat pretium erat nec vestibulum.
|
||||
|
||||
#### Web browser cookies
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sit amet massa ut neque consequat congue. Sed id ipsum vitae sem imperdiet suscipit. Nulla facilisi. Morbi quis nibh at nunc pulvinar rhoncus. Proin porttitor dapibus dolor, id fermentum urna eleifend et. In feugiat pretium erat nec vestibulum.
|
||||
|
||||
#### How we use collected information
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sit amet massa ut neque consequat congue. Sed id ipsum vitae sem imperdiet suscipit. Nulla facilisi. Morbi quis nibh at nunc pulvinar rhoncus. Proin porttitor dapibus dolor, id fermentum urna eleifend et. In feugiat pretium erat nec vestibulum.
|
||||
|
||||
#### How we protect your information
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sit amet massa ut neque consequat congue. Sed id ipsum vitae sem imperdiet suscipit. Nulla facilisi. Morbi quis nibh at nunc pulvinar rhoncus. Proin porttitor dapibus dolor, id fermentum urna eleifend et. In feugiat pretium erat nec vestibulum.
|
||||
|
||||
#### Sharing your personal information
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sit amet massa ut neque consequat congue. Sed id ipsum vitae sem imperdiet suscipit. Nulla facilisi. Morbi quis nibh at nunc pulvinar rhoncus. Proin porttitor dapibus dolor, id fermentum urna eleifend et. In feugiat pretium erat nec vestibulum.
|
||||
|
||||
#### Changes to this privacy policy
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sit amet massa ut neque consequat congue. Sed id ipsum vitae sem imperdiet suscipit. Nulla facilisi. Morbi quis nibh at nunc pulvinar rhoncus. Proin porttitor dapibus dolor, id fermentum urna eleifend et. In feugiat pretium erat nec vestibulum.
|
||||
|
||||
27
src/content/legal/terms.md
Normal file
27
src/content/legal/terms.md
Normal file
@@ -0,0 +1,27 @@
|
||||
---
|
||||
title: "Terms of Use"
|
||||
date: "03/07/2024"
|
||||
---
|
||||
|
||||
Please read these Terms of Use ("Terms", "Terms of Use") carefully before using the [Your Website URL] website (the "Service") operated by [Your Company Name] ("us", "we", or "our").
|
||||
|
||||
#### Agreement to Terms
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sit amet massa ut neque consequat congue. Sed id ipsum vitae sem imperdiet suscipit. Nulla facilisi. Morbi quis nibh at nunc pulvinar rhoncus. Proin porttitor dapibus dolor, id fermentum urna eleifend et. In feugiat pretium erat nec vestibulum.
|
||||
|
||||
#### Intellectual Property Rights
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sit amet massa ut neque consequat congue. Sed id ipsum vitae sem imperdiet suscipit. Nulla facilisi. Morbi quis nibh at nunc pulvinar rhoncus. Proin porttitor dapibus dolor, id fermentum urna eleifend et. In feugiat pretium erat nec vestibulum.
|
||||
|
||||
#### User Representations
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sit amet massa ut neque consequat congue. Sed id ipsum vitae sem imperdiet suscipit. Nulla facilisi. Morbi quis nibh at nunc pulvinar rhoncus. Proin porttitor dapibus dolor, id fermentum urna eleifend et. In feugiat pretium erat nec vestibulum.
|
||||
|
||||
#### Links to Other Websites
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sit amet massa ut neque consequat congue. Sed id ipsum vitae sem imperdiet suscipit. Nulla facilisi. Morbi quis nibh at nunc pulvinar rhoncus. Proin porttitor dapibus dolor, id fermentum urna eleifend et. In feugiat pretium erat nec vestibulum.
|
||||
|
||||
#### Termination
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sit amet massa ut neque consequat congue. Sed id ipsum vitae sem imperdiet suscipit. Nulla facilisi. Morbi quis nibh at nunc pulvinar rhoncus. Proin porttitor dapibus dolor, id fermentum urna eleifend et. In feugiat pretium erat nec vestibulum.
|
||||
|
||||
#### Governing Law
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sit amet massa ut neque consequat congue. Sed id ipsum vitae sem imperdiet suscipit. Nulla facilisi. Morbi quis nibh at nunc pulvinar rhoncus. Proin porttitor dapibus dolor, id fermentum urna eleifend et. In feugiat pretium erat nec vestibulum.
|
||||
|
||||
#### Changes to These Terms of Use
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sit amet massa ut neque consequat congue. Sed id ipsum vitae sem imperdiet suscipit. Nulla facilisi. Morbi quis nibh at nunc pulvinar rhoncus. Proin porttitor dapibus dolor, id fermentum urna eleifend et. In feugiat pretium erat nec vestibulum.
|
||||
16
src/content/projects/project-1/index.md
Normal file
16
src/content/projects/project-1/index.md
Normal file
@@ -0,0 +1,16 @@
|
||||
---
|
||||
title: "Project One"
|
||||
summary: "Lorem ipsum dolor sit amet"
|
||||
date: "Mar 18 2022"
|
||||
draft: false
|
||||
tags:
|
||||
- Astro
|
||||
- Javascript
|
||||
- Typescript
|
||||
- Tailwind
|
||||
- SolidJs
|
||||
demoUrl: https://astro-sphere-demo.vercel.app
|
||||
repoUrl: https://github.com/markhorn-dev/astro-sphere
|
||||
---
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae ultricies leo integer malesuada nunc vel risus commodo viverra. Adipiscing enim eu turpis egestas pretium. Euismod elementum nisi quis eleifend quam adipiscing. In hac habitasse platea dictumst vestibulum. Sagittis purus sit amet volutpat. Netus et malesuada fames ac turpis egestas. Eget magna fermentum iaculis eu non diam phasellus vestibulum lorem. Varius sit amet mattis vulputate enim. Habitasse platea dictumst quisque sagittis. Integer quis auctor elit sed vulputate mi. Dictumst quisque sagittis purus sit amet.
|
||||
15
src/content/projects/project-2/index.md
Normal file
15
src/content/projects/project-2/index.md
Normal file
@@ -0,0 +1,15 @@
|
||||
---
|
||||
title: "Project Two"
|
||||
summary: "Lorem ipsum dolor sit amet"
|
||||
date: "Mar 17 2022"
|
||||
draft: false
|
||||
tags:
|
||||
- Svelte
|
||||
- Sveltekit
|
||||
- Typescript
|
||||
- Tailwind
|
||||
---
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae ultricies leo integer malesuada nunc vel risus commodo viverra. Adipiscing enim eu turpis egestas pretium. Euismod elementum nisi quis eleifend quam adipiscing. In hac habitasse platea dictumst vestibulum. Sagittis purus sit amet volutpat. Netus et malesuada fames ac turpis egestas. Eget magna fermentum iaculis eu non diam phasellus vestibulum lorem. Varius sit amet mattis vulputate enim. Habitasse platea dictumst quisque sagittis. Integer quis auctor elit sed vulputate mi. Dictumst quisque sagittis purus sit amet.
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae ultricies leo integer malesuada nunc vel risus commodo viverra. Adipiscing enim eu turpis egestas pretium. Euismod elementum nisi quis eleifend quam adipiscing. In hac habitasse platea dictumst vestibulum. Sagittis purus sit amet volutpat. Netus et malesuada fames ac turpis egestas. Eget magna fermentum iaculis eu non diam phasellus vestibulum lorem. Varius sit amet mattis vulputate enim. Habitasse platea dictumst quisque sagittis. Integer quis auctor elit sed vulputate mi. Dictumst quisque sagittis purus sit amet.
|
||||
12
src/content/projects/project-3/index.md
Normal file
12
src/content/projects/project-3/index.md
Normal file
@@ -0,0 +1,12 @@
|
||||
---
|
||||
title: "Project Three"
|
||||
summary: "Lorem ipsum dolor sit amet"
|
||||
date: "Mar 16 2022"
|
||||
draft: false
|
||||
tags:
|
||||
- Vue
|
||||
- Javascript
|
||||
- Tailwind
|
||||
---
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae ultricies leo integer malesuada nunc vel risus commodo viverra. Adipiscing enim eu turpis egestas pretium. Euismod elementum nisi quis eleifend quam adipiscing. In hac habitasse platea dictumst vestibulum. Sagittis purus sit amet volutpat. Netus et malesuada fames ac turpis egestas. Eget magna fermentum iaculis eu non diam phasellus vestibulum lorem. Varius sit amet mattis vulputate enim. Habitasse platea dictumst quisque sagittis. Integer quis auctor elit sed vulputate mi. Dictumst quisque sagittis purus sit amet.
|
||||
31
src/content/projects/project-4/index.md
Normal file
31
src/content/projects/project-4/index.md
Normal file
@@ -0,0 +1,31 @@
|
||||
---
|
||||
title: "Project Four"
|
||||
summary: "Lorem ipsum dolor sit amet"
|
||||
date: "Mar 15 2022"
|
||||
draft: false
|
||||
tags:
|
||||
- React
|
||||
- Javascript
|
||||
- StyleX
|
||||
---
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae ultricies leo integer malesuada nunc vel risus commodo viverra. Adipiscing enim eu turpis egestas pretium.
|
||||
|
||||
Euismod elementum nisi quis eleifend quam adipiscing. In hac habitasse platea dictumst vestibulum. Sagittis purus sit amet volutpat. Netus et malesuada fames ac turpis egestas.
|
||||
|
||||
Eget magna fermentum iaculis eu non diam phasellus vestibulum lorem.
|
||||
Varius sit amet mattis vulputate enim. Habitasse platea dictumst quisque sagittis. Integer quis auctor elit sed vulputate mi. Dictumst quisque sagittis purus sit amet.
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae ultricies leo integer malesuada nunc vel risus commodo viverra. Adipiscing enim eu turpis egestas pretium.
|
||||
|
||||
Euismod elementum nisi quis eleifend quam adipiscing. In hac habitasse platea dictumst vestibulum. Sagittis purus sit amet volutpat. Netus et malesuada fames ac turpis egestas.
|
||||
|
||||
Eget magna fermentum iaculis eu non diam phasellus vestibulum lorem.
|
||||
Varius sit amet mattis vulputate enim. Habitasse platea dictumst quisque sagittis. Integer quis auctor elit sed vulputate mi. Dictumst quisque sagittis purus sit amet.
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae ultricies leo integer malesuada nunc vel risus commodo viverra. Adipiscing enim eu turpis egestas pretium.
|
||||
|
||||
Euismod elementum nisi quis eleifend quam adipiscing. In hac habitasse platea dictumst vestibulum. Sagittis purus sit amet volutpat. Netus et malesuada fames ac turpis egestas.
|
||||
|
||||
Eget magna fermentum iaculis eu non diam phasellus vestibulum lorem.
|
||||
Varius sit amet mattis vulputate enim. Habitasse platea dictumst quisque sagittis. Integer quis auctor elit sed vulputate mi. Dictumst quisque sagittis purus sit amet.
|
||||
12
src/content/work/Мониторинг ЖКХ.md
Normal file
12
src/content/work/Мониторинг ЖКХ.md
Normal file
@@ -0,0 +1,12 @@
|
||||
---
|
||||
company: "Мониторинг ЖКХ"
|
||||
role: "комплекс устройств опроса"
|
||||
dateStart: "01/01/2023"
|
||||
dateEnd: "11/27/2025"
|
||||
---
|
||||
|
||||
В городе Иркутске внедрили систему мониторинга ЖКХ. Датчики тепла и воды передают данные на гркпповое устройство, далее на центральный сервер. Алгоритмы анализируют потребление и предупреждают о возможных утечках.
|
||||
|
||||
- Беспроводной интерфейс позводяет размещать датчики в любом месте.
|
||||
- Неограниченное колличество датчиков.
|
||||
- Оповещение с выделенного сервера, позволяет получать свежую информацию об всех неисправностях.
|
||||
12
src/content/work/Система вызова персонала.md
Normal file
12
src/content/work/Система вызова персонала.md
Normal file
@@ -0,0 +1,12 @@
|
||||
---
|
||||
company: "Система вызова персонала"
|
||||
role: "Комплекс пультового управления"
|
||||
dateStart: "01/01/2020"
|
||||
dateEnd: "10/21/2023"
|
||||
---
|
||||
|
||||
В частной клинике внедрили систему автоматического вызова персонала. Если датчики обнаруживают падение пациента или аномалию, они отправляют сигнал на пульт оператора. Это спасает жизни!
|
||||
Так же дополнительное размещение обородувани во все кабинеты позволили оповещать персонал об необходимой помощи всех категорий врачей и охраны.
|
||||
|
||||
- Беспроводной интерфейс позволил маштабировать сеть на нестандартную форму здания без дополнительной покладки линий
|
||||
- Выделенный сервер позволяет собирать все журналы вызово.
|
||||
12
src/content/work/Телеграм коммандер.md
Normal file
12
src/content/work/Телеграм коммандер.md
Normal file
@@ -0,0 +1,12 @@
|
||||
---
|
||||
company: "Телеграм коммандер"
|
||||
role: "Программный Комплекс управления"
|
||||
dateStart: "01/01/2020"
|
||||
dateEnd: "10/21/2023"
|
||||
---
|
||||
|
||||
Инженеры создали бота для управления домашними устройствами через Telegram. Он принимает команды от пользователя и включает свет, регулирует температуру и даже готовит кофе. Удобно и современно!
|
||||
|
||||
- Универсальное средство управления экономит ваше время.
|
||||
- Выделенный сервер позволяет контролировать внештатную ситуацию.
|
||||
- Сцанарное управление дает возможность выстравивать алгоритмы последовательноти ваших действий.
|
||||
2
src/env.d.ts
vendored
Normal file
2
src/env.d.ts
vendored
Normal file
@@ -0,0 +1,2 @@
|
||||
/// <reference path="../.astro/types.d.ts" />
|
||||
/// <reference types="astro/client" />
|
||||
58
src/layouts/ArticleBottomLayout.astro
Normal file
58
src/layouts/ArticleBottomLayout.astro
Normal file
@@ -0,0 +1,58 @@
|
||||
---
|
||||
import { type CollectionEntry, getCollection } from "astro:content"
|
||||
|
||||
type Props = {
|
||||
entry: CollectionEntry<"blog"> | CollectionEntry<"projects">
|
||||
}
|
||||
|
||||
// Get the requested entry
|
||||
const { entry } = Astro.props
|
||||
const { collection } = entry
|
||||
const { Content } = await entry.render()
|
||||
|
||||
// Get the next and prev entries (modulo to wrap index)
|
||||
const items = (await getCollection(collection))
|
||||
.filter(post => !post.data.draft)
|
||||
.sort((a, b) => b.data.date.getTime() - a.data.date.getTime())
|
||||
const index = items.findIndex(x => x.slug === entry.slug)
|
||||
const prev = items[(index - 1 + items.length) % items.length]
|
||||
const next = items[(index + 1) % items.length]
|
||||
---
|
||||
|
||||
<div>
|
||||
<article>
|
||||
<Content/>
|
||||
</article>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<a href={`/${prev.collection}/${prev.slug}`} class="group p-4 gap-3 flex items-center border rounded-lg hover:bg-black/5 hover:dark:bg-white/10 border-black/15 dark:border-white/20 blend">
|
||||
<div class="order-2 w-full h-full group-hover:text-black group-hover:dark:text-white blend">
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<div class="text-sm uppercase">
|
||||
Prev
|
||||
</div>
|
||||
</div>
|
||||
<div class="font-semibold mt-3 text-black dark:text-white">
|
||||
{prev.data.title}
|
||||
</div>
|
||||
</div>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="order-1 stroke-current group-hover:stroke-black group-hover:dark:stroke-white rotate-180">
|
||||
<line x1="5" y1="12" x2="19" y2="12" class="scale-x-0 group-hover:scale-x-100 translate-x-4 group-hover:translate-x-1 transition-all duration-300 ease-in-out" />
|
||||
<polyline points="12 5 19 12 12 19" class="translate-x-0 group-hover:translate-x-1 transition-all duration-300 ease-in-out" />
|
||||
</svg>
|
||||
</a>
|
||||
<a href={`/${next.collection}/${next.slug}`} class="group p-4 gap-3 flex items-center border rounded-lg hover:bg-black/5 hover:dark:bg-white/10 border-black/15 dark:border-white/20 transition-colors duration-300 ease-in-out">
|
||||
<div class="w-full h-full text-right group-hover:text-black group-hover:dark:text-white blend">
|
||||
<div class="text-sm uppercase">
|
||||
Next
|
||||
</div>
|
||||
<div class="font-semibold mt-3 text-black dark:text-white">
|
||||
{next.data.title}
|
||||
</div>
|
||||
</div>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="stroke-current group-hover:stroke-black group-hover:dark:stroke-white">
|
||||
<line x1="5" y1="12" x2="19" y2="12" class="scale-x-0 group-hover:scale-x-100 translate-x-4 group-hover:translate-x-1 transition-all duration-300 ease-in-out" />
|
||||
<polyline points="12 5 19 12 12 19" class="translate-x-0 group-hover:translate-x-1 transition-all duration-300 ease-in-out" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
71
src/layouts/ArticleTopLayout.astro
Normal file
71
src/layouts/ArticleTopLayout.astro
Normal file
@@ -0,0 +1,71 @@
|
||||
---
|
||||
import type { CollectionEntry } from "astro:content"
|
||||
import { formatDate, readingTime } from "@lib/utils"
|
||||
|
||||
type Props = {
|
||||
entry: CollectionEntry<"projects"> | CollectionEntry<"blog">
|
||||
}
|
||||
|
||||
const { entry } = Astro.props
|
||||
const { collection, data, body } = entry
|
||||
const { title, summary, date } = data
|
||||
|
||||
const demoUrl = collection === "projects" ? data.demoUrl : null
|
||||
const repoUrl = collection === "projects" ? data.repoUrl : null
|
||||
---
|
||||
|
||||
<div>
|
||||
<a href={`/${collection}`} class="group w-fit p-1.5 gap-1.5 text-sm flex items-center border rounded hover:bg-black/5 hover:dark:bg-white/10 border-black/15 dark:border-white/20 transition-colors duration-300 ease-in-out">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="stroke-current group-hover:stroke-black group-hover:dark:stroke-white">
|
||||
<line x1="19" y1="12" x2="5" y2="12" class="scale-x-0 group-hover:scale-x-100 translate-x-3 group-hover:translate-x-0 transition-all duration-300 ease-in-out" />
|
||||
<polyline points="12 19 5 12 12 5" class="translate-x-1 group-hover:translate-x-0 transition-all duration-300 ease-in-out" />
|
||||
</svg>
|
||||
<div class="w-full group-hover:text-black group-hover:dark:text-white transition-colors duration-300 ease-in-out">
|
||||
Back to {collection}
|
||||
</div>
|
||||
</a>
|
||||
<div class="flex flex-wrap text-sm uppercase mt-12 gap-3 opacity-75">
|
||||
<div class="flex items-center gap-2">
|
||||
<svg class="size-5 stroke-current">
|
||||
<use href="/ui.svg#calendar"/>
|
||||
</svg>
|
||||
{formatDate(date)}
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<svg class="size-5 stroke-current">
|
||||
<use href="/ui.svg#book-open"/>
|
||||
</svg>
|
||||
{readingTime(body)}
|
||||
</div>
|
||||
</div>
|
||||
<h1 class="text-3xl font-semibold text-black dark:text-white mt-2">
|
||||
{title}
|
||||
</h1>
|
||||
<div class="mt-1">
|
||||
{summary}
|
||||
</div>
|
||||
{(demoUrl || repoUrl) &&
|
||||
<div class="mt-4 flex flex-wrap gap-2">
|
||||
{demoUrl &&
|
||||
<a href={demoUrl} target="_blank" class="group flex gap-2 items-center px-3 py-1.5 truncate rounded text-xs md:text-sm lg:text-base border border-black/25 dark:border-white/25 hover:bg-black/5 hover:dark:bg-white/15 blend">
|
||||
<svg class="size-4">
|
||||
<use href="/ui.svg#globe" class="fill-current group-hover:fill-black group-hover:dark:fill-white blend"/>
|
||||
</svg>
|
||||
<span class="text-current group-hover:text-black group-hover:dark:text-white blend">
|
||||
See Demo
|
||||
</span>
|
||||
</a>
|
||||
}
|
||||
{repoUrl &&
|
||||
<a href={repoUrl} target="_blank" class="group flex gap-2 items-center px-3 py-1.5 truncate rounded text-xs md:text-sm lg:text-base border border-black/25 dark:border-white/25 hover:bg-black/5 hover:dark:bg-white/15 blend">
|
||||
<svg class="size-4">
|
||||
<use href="/ui.svg#link" class="fill-current group-hover:fill-black group-hover:dark:fill-white blend"/>
|
||||
</svg>
|
||||
<span class="text-current group-hover:text-black group-hover:dark:text-white blend">
|
||||
See Repository
|
||||
</span>
|
||||
</a>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
9
src/layouts/BottomLayout.astro
Normal file
9
src/layouts/BottomLayout.astro
Normal file
@@ -0,0 +1,9 @@
|
||||
---
|
||||
import Container from "@components/Container.astro"
|
||||
---
|
||||
|
||||
<div class="flex-1 py-5">
|
||||
<Container size="md">
|
||||
<slot/>
|
||||
</Container>
|
||||
</div>
|
||||
24
src/layouts/PageLayout.astro
Normal file
24
src/layouts/PageLayout.astro
Normal file
@@ -0,0 +1,24 @@
|
||||
---
|
||||
import "@styles/global.css"
|
||||
import BaseHead from "@components/BaseHead.astro"
|
||||
import Header from "@components/Header.astro"
|
||||
import Footer from "@components/Footer.astro"
|
||||
import Drawer from "@components/Drawer.astro"
|
||||
const { title, description } = Astro.props
|
||||
import { SITE } from "@consts"
|
||||
---
|
||||
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<BaseHead title={`${title} | ${SITE.TITLE}`} description={description} />
|
||||
</head>
|
||||
<body>
|
||||
<Header />
|
||||
<Drawer />
|
||||
<main>
|
||||
<slot />
|
||||
</main>
|
||||
<Footer />
|
||||
</body>
|
||||
</html>
|
||||
9
src/layouts/TopLayout.astro
Normal file
9
src/layouts/TopLayout.astro
Normal file
@@ -0,0 +1,9 @@
|
||||
---
|
||||
import Container from "@components/Container.astro"
|
||||
---
|
||||
|
||||
<div class="pt-36 pb-5">
|
||||
<Container size="md">
|
||||
<slot/>
|
||||
</Container>
|
||||
</div>
|
||||
21
src/lib/utils.ts
Normal file
21
src/lib/utils.ts
Normal file
@@ -0,0 +1,21 @@
|
||||
import { clsx, type ClassValue } from "clsx"
|
||||
import { twMerge } from "tailwind-merge"
|
||||
|
||||
export function cn(...inputs: ClassValue[]) {
|
||||
return twMerge(clsx(inputs))
|
||||
}
|
||||
|
||||
export function formatDate(date: Date) {
|
||||
return Intl.DateTimeFormat("en-US", {
|
||||
month: "short",
|
||||
day: "2-digit",
|
||||
year: "numeric"
|
||||
}).format(date)
|
||||
}
|
||||
|
||||
export function readingTime(html: string) {
|
||||
const textOnly = html.replace(/<[^>]+>/g, "")
|
||||
const wordCount = textOnly.split(/\s+/).length
|
||||
const readingTimeMinutes = ((wordCount / 200) + 1).toFixed()
|
||||
return `${readingTimeMinutes} min read`
|
||||
}
|
||||
35
src/pages/blog/[...slug].astro
Normal file
35
src/pages/blog/[...slug].astro
Normal file
@@ -0,0 +1,35 @@
|
||||
---
|
||||
import { type CollectionEntry, getCollection } from "astro:content"
|
||||
import PageLayout from "@layouts/PageLayout.astro"
|
||||
import TopLayout from "@layouts/TopLayout.astro"
|
||||
import BottomLayout from "@layouts/BottomLayout.astro"
|
||||
import ArticleTopLayout from "@layouts/ArticleTopLayout.astro"
|
||||
import ArticleBottomLayout from "@layouts/ArticleBottomLayout.astro"
|
||||
|
||||
// Create the static blog pages
|
||||
export async function getStaticPaths() {
|
||||
const posts = await getCollection("blog")
|
||||
return posts.map((post) => ({
|
||||
params: { slug: post.slug },
|
||||
props: post,
|
||||
}))
|
||||
}
|
||||
|
||||
// Get the requested post
|
||||
type Props = CollectionEntry<"blog">
|
||||
const post = Astro.props
|
||||
const { title, summary } = post.data
|
||||
---
|
||||
|
||||
<PageLayout title={title} description={summary}>
|
||||
<TopLayout>
|
||||
<div class="animate">
|
||||
<ArticleTopLayout entry={post}/>
|
||||
</div>
|
||||
</TopLayout>
|
||||
<BottomLayout>
|
||||
<div class="animate">
|
||||
<ArticleBottomLayout entry={post} />
|
||||
</div>
|
||||
</BottomLayout>
|
||||
</PageLayout>
|
||||
30
src/pages/blog/index.astro
Normal file
30
src/pages/blog/index.astro
Normal file
@@ -0,0 +1,30 @@
|
||||
---
|
||||
import { getCollection } from "astro:content"
|
||||
import PageLayout from "@layouts/PageLayout.astro"
|
||||
import TopLayout from "@layouts/TopLayout.astro"
|
||||
import BottomLayout from "@layouts/BottomLayout.astro"
|
||||
import Blog from "@components/Blog"
|
||||
import { BLOG } from "@consts"
|
||||
|
||||
const posts = (await getCollection("blog"))
|
||||
.filter(post => !post.data.draft)
|
||||
.sort((a, b) => b.data.date.getTime() - a.data.date.getTime())
|
||||
|
||||
const tags = [...new Set(posts.flatMap(post => post.data.tags))]
|
||||
.sort((a, b) => a.localeCompare(b))
|
||||
---
|
||||
|
||||
<PageLayout title={BLOG.TITLE} description={BLOG.DESCRIPTION}>
|
||||
<TopLayout>
|
||||
<div class="animate page-heading">
|
||||
{BLOG.TITLE}
|
||||
</div>
|
||||
</TopLayout>
|
||||
<BottomLayout>
|
||||
<div class="animate">
|
||||
<Blog client:load tags={tags} data={posts} />
|
||||
</div>
|
||||
</BottomLayout>
|
||||
</PageLayout>
|
||||
|
||||
|
||||
225
src/pages/index.astro
Normal file
225
src/pages/index.astro
Normal file
@@ -0,0 +1,225 @@
|
||||
---
|
||||
import { getCollection } from "astro:content"
|
||||
import PageLayout from "@layouts/PageLayout.astro"
|
||||
import ArrowCard from "@components/ArrowCard"
|
||||
import StackCard from "@components/StackCard.astro"
|
||||
import { SITE, SOCIALS } from "@consts"
|
||||
import TwinklingStars from "@components/TwinklingStars.astro"
|
||||
import MeteorShower from "@components/MeteorShower.astro"
|
||||
|
||||
const posts = (await getCollection("blog"))
|
||||
.filter(post => !post.data.draft)
|
||||
.sort((a, b) => b.data.date.getTime() - a.data.date.getTime())
|
||||
.slice(0,3)
|
||||
|
||||
const projects = (await getCollection("projects"))
|
||||
.filter(project => !project.data.draft)
|
||||
.sort((a, b) => b.data.date.getTime() - a.data.date.getTime())
|
||||
.slice(0,3)
|
||||
|
||||
const stack = [
|
||||
{
|
||||
text: "Astro",
|
||||
icon: "astro",
|
||||
href: "https://astro.build"
|
||||
},
|
||||
{
|
||||
text: "Javascript",
|
||||
icon: "javascript",
|
||||
href: "https://www.javascript.com"
|
||||
},
|
||||
{
|
||||
text: "Typescript",
|
||||
icon: "typescript",
|
||||
href: "https://www.typescriptlang.org"
|
||||
},
|
||||
{
|
||||
text: "Tailwind",
|
||||
icon: "tailwind",
|
||||
href: "https://tailwindcss.com"
|
||||
},
|
||||
]
|
||||
---
|
||||
|
||||
<PageLayout title="Home" description={SITE.DESCRIPTION}>
|
||||
|
||||
<!-- Light Mode: Particles -->
|
||||
<div class='absolute inset-0 block dark:hidden'>
|
||||
<div id='particles1' class='fixed inset-0'></div>
|
||||
<div id='particles2' class='fixed inset-0'></div>
|
||||
<div id='particles3' class='fixed inset-0'></div>
|
||||
</div>
|
||||
|
||||
<!-- Dark Theme: Stars -->
|
||||
<div class='absolute inset-0 bg-black hidden dark:block'>
|
||||
<div id='stars1' class='fixed inset-0'></div>
|
||||
<div id='stars2' class='fixed inset-0'></div>
|
||||
<div id='stars3' class='fixed inset-0'></div>
|
||||
</div>
|
||||
|
||||
<!-- Dark Theme: Twinkling Stars / Metors -->
|
||||
<div id="galaxy" class="fixed inset-0">
|
||||
<div class="hidden dark:block">
|
||||
<TwinklingStars/>
|
||||
<MeteorShower/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script is:inline src="/js/bg.js"></script>
|
||||
|
||||
<!-- HERO -->
|
||||
<section class="relative h-screen w-full">
|
||||
<div id="planetcont" class='animate absolute inset-0 top-1/4 overflow-hidden'>
|
||||
<div id="crescent" class='absolute top-0 left-1/2 -translate-x-1/2 w-[250vw] min-h-[100vh] aspect-square rounded-full p-[1px] bg-gradient-to-b from-black/25 dark:from-white/75 from-0% to-transparent to-5%'>
|
||||
<div id="planet" class='w-full h-full bg-white dark:bg-black rounded-full p-[1px] overflow-hidden flex justify-center'>
|
||||
<div id="blur" class='w-full h-20 rounded-full bg-neutral-900/25 dark:bg-white/25 blur-3xl'/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="animate absolute h-full w-full flex items-center justify-center">
|
||||
<div class='relative w-full h-full flex items-center justify-center'>
|
||||
<div class='p-5 text-center'>
|
||||
<p class='animated text-lg md:text-xl lg:text-2xl font-semibold opacity-75'>
|
||||
Время пришло!
|
||||
</p>
|
||||
<p class='animated text-2xl md:text-3xl lg:text-4xl font-bold uppercase text-black dark:text-white'>
|
||||
Для новых горизонтов возможностей!
|
||||
</p>
|
||||
<p class='animated text-sm md:text-base lg:text-lg opacity-75'>
|
||||
Мы расскажем вам про новое поколение ПЛАТ УПРАВЛЕНИЯ.
|
||||
</p>
|
||||
<div id="ctaButtons" class='animated flex flex-wrap gap-4 justify-center mt-5'>
|
||||
<a href='/blog' class='py-2 px-4 rounded truncate text-xs md:text-sm lg:text-base bg-black dark:bg-white text-white dark:text-black hover:opacity-75 blend'>
|
||||
Читать блог
|
||||
</a>
|
||||
<a href='/work' class='py-2 px-4 truncate rounded text-xs md:text-sm lg:text-base border border-black/25 dark:border-white/25 hover:bg-black/5 hover:dark:bg-white/15 blend'>
|
||||
Промсмотреть работу
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="relative bg-white dark:bg-black">
|
||||
<div class="mx-auto max-w-screen-sm p-5 space-y-24 pb-16">
|
||||
|
||||
<!-- About Section -->
|
||||
<section class="animate">
|
||||
<article>
|
||||
<p>Мы команда <b><i>инженеров</i></b>, <b><i>програмистов</i></b>, <b><i>архитекторов</i></b>, <b><i>конструкторов</i></b>, <b><i>тестировщиков</i></b>, которвые собрались для общего дела.</p>
|
||||
<p>Проектирование и изготовление печатных плат – это важный этап в создании электронных устройств. Наша компания специализируется на разработке и программировании плат управления, которые могут быть частью различных устройств, от беспилотных летательных аппаратов (БПЛА) до умных домов и систем оповещения.</p>
|
||||
<p><b>Вот несколько ключевых аспектов</b>, <b>которые следует учесть при проектировании и изготовлении печатных плат</b>:</p>
|
||||
<p>
|
||||
<b>Определение правил проектирования платы:</b>
|
||||
<p>Прежде чем начать размещение компонентов, важно определить правила проектирования печатной платы. Это включает в себя выбор метода изготовления, определение стека платы и установку ограничений для обеспечения производительности и надежности.</p>
|
||||
<b>Размещение компонентов:</b>
|
||||
<p>Хорошее размещение компонентов обеспечивает решаемость и простоту трассировки. Группировка компонентов по типу помогает предотвратить необходимость долгой трассировки по всей плате.</p>
|
||||
<b>Расположение питания и заземления:</b>
|
||||
<p>Важно правильно разместить питание и заземление в стеке платы. Это включает в себя учет смешанных сигналов и обеспечение надежной работы.</p>
|
||||
<b>Соблюдение механических ограничений:</b>
|
||||
<p>Расположение разъемов и соблюдение размеров корпуса также важно для успешного проектирования.</p>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<!-- Blog Preview Section -->
|
||||
<section class="animate">
|
||||
<div class="space-y-4">
|
||||
<div class="flex justify-between">
|
||||
<p class="font-semibold text-black dark:text-white">
|
||||
Наши последние посты
|
||||
</p>
|
||||
<a href="/blog" class="w-fit col-span-3 group flex gap-1 items-center underline decoration-[.5px] decoration-black/25 dark:decoration-white/50 hover:decoration-black dark:hover:decoration-white text-black dark:text-white underline-offset-2 blend">
|
||||
<span class="text-black/75 dark:text-white/75 group-hover:text-black group-hover:dark:text-white blend">
|
||||
Все посты
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<ul class="space-y-4">
|
||||
{posts.map((post) => (
|
||||
<li>
|
||||
<ArrowCard entry={post} />
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Tech Stack Section -->
|
||||
<section class="animate">
|
||||
<div class="space-y-4">
|
||||
<p class="font-semibold text-black dark:text-white">
|
||||
Сайт сделан на следующих технологиях
|
||||
</p>
|
||||
<div class="flex flex-wrap items-center gap-2 mt-5">
|
||||
{stack.map(item => (
|
||||
<StackCard
|
||||
text={item.text}
|
||||
icon={item.icon}
|
||||
href={item.href}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<div>
|
||||
Демонстрируя реактивность и статичность, специального фреймворка
|
||||
<a href="https://www.solidjs.com/" target="_blank" class="w-fit group underline decoration-[.5px] decoration-black/25 dark:decoration-white/50 hover:decoration-black dark:hover:decoration-white text-black dark:text-white underline-offset-2 blend">
|
||||
<span class="text-black/75 dark:text-white/75 group-hover:text-black group-hover:dark:text-white blend">
|
||||
SolidJS
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Project Preview Section -->
|
||||
<section class="animate">
|
||||
<div class="space-y-4">
|
||||
<div class="flex justify-between">
|
||||
<p class="font-semibold text-black dark:text-white">
|
||||
Последние проекты
|
||||
</p>
|
||||
<a href="/projects" class="w-fit col-span-3 group flex gap-1 items-center underline decoration-[.5px] decoration-black/25 dark:decoration-white/50 hover:decoration-black dark:hover:decoration-white text-black dark:text-white underline-offset-2 blend">
|
||||
<span class="text-black/75 dark:text-white/75 group-hover:text-black group-hover:dark:text-white blend">
|
||||
Все проекты
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<ul class="space-y-4">
|
||||
{projects.map((project) => (
|
||||
<li>
|
||||
<ArrowCard entry={project} />
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Contact Section -->
|
||||
<section class="animate">
|
||||
<div>
|
||||
<p class="font-semibold text-black dark:text-white">
|
||||
Для связи
|
||||
</p>
|
||||
<p>
|
||||
у нас есть email и телеграм бот обратной связи, так же есть каналы в telegram, youtube, github.
|
||||
</p>
|
||||
<div class="grid grid-cols-4 gap-y-2 mt-4 auto-cols-min">
|
||||
{SOCIALS.map(social => (
|
||||
<div class="col-span-1 flex items-center gap-1">
|
||||
<span class="whitespace-nowrap truncate">
|
||||
{social.NAME}
|
||||
</span>
|
||||
</div>
|
||||
<div class="col-span-3 truncate">
|
||||
<a href={social.HREF} target="_blank" class="w-fit col-span-3 group flex gap-1 items-center underline decoration-[.5px] decoration-black/25 dark:decoration-white/50 hover:decoration-black dark:hover:decoration-white text-black dark:text-white underline-offset-2 blend">
|
||||
<span class="text-black/75 dark:text-white/75 group-hover:text-black group-hover:dark:text-white blend">
|
||||
{social.TEXT}
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</PageLayout>
|
||||
42
src/pages/legal/[...slug].astro
Normal file
42
src/pages/legal/[...slug].astro
Normal file
@@ -0,0 +1,42 @@
|
||||
---
|
||||
import { type CollectionEntry, getCollection } from "astro:content"
|
||||
import PageLayout from "@layouts/PageLayout.astro"
|
||||
import TopLayout from "@layouts/TopLayout.astro"
|
||||
import BottomLayout from "@layouts/BottomLayout.astro"
|
||||
import { formatDate } from "@lib/utils"
|
||||
import { SITE } from "@consts"
|
||||
|
||||
// Create the static pages for legal docs
|
||||
export async function getStaticPaths() {
|
||||
const docs = await getCollection("legal")
|
||||
return docs.map((doc) => ({
|
||||
params: { slug: doc.slug },
|
||||
props: doc,
|
||||
}))
|
||||
}
|
||||
|
||||
// Get the requested legal doc
|
||||
type Props = CollectionEntry<"legal">;
|
||||
const doc = Astro.props
|
||||
const { title, date } = doc.data
|
||||
const { Content } = await doc.render();
|
||||
|
||||
---
|
||||
|
||||
<PageLayout title={title} description={`${title} for ${SITE.TITLE}`}>
|
||||
<TopLayout>
|
||||
<div class="animate">
|
||||
<div class="page-heading">
|
||||
{title}
|
||||
</div>
|
||||
<p class="font-normal opacity-75">
|
||||
Last updated: {formatDate(date)}
|
||||
</p>
|
||||
</div>
|
||||
</TopLayout>
|
||||
<BottomLayout>
|
||||
<article class="animate">
|
||||
<Content/>
|
||||
</article>
|
||||
</BottomLayout>
|
||||
</PageLayout>
|
||||
35
src/pages/projects/[...slug].astro
Normal file
35
src/pages/projects/[...slug].astro
Normal file
@@ -0,0 +1,35 @@
|
||||
---
|
||||
import { type CollectionEntry, getCollection } from "astro:content"
|
||||
import PageLayout from "@layouts/PageLayout.astro"
|
||||
import TopLayout from "@layouts/TopLayout.astro"
|
||||
import BottomLayout from "@layouts/BottomLayout.astro"
|
||||
import ArticleTopLayout from "@layouts/ArticleTopLayout.astro"
|
||||
import ArticleBottomLayout from "@layouts/ArticleBottomLayout.astro"
|
||||
|
||||
// Create the static projects pages
|
||||
export async function getStaticPaths() {
|
||||
const projects = await getCollection("projects")
|
||||
return projects.map((project) => ({
|
||||
params: { slug: project.slug },
|
||||
props: project,
|
||||
}))
|
||||
}
|
||||
|
||||
// Get the requested project
|
||||
type Props = CollectionEntry<"projects">
|
||||
const project = Astro.props
|
||||
const { title, summary } = project.data
|
||||
---
|
||||
|
||||
<PageLayout title={title} description={summary}>
|
||||
<TopLayout>
|
||||
<div class="animate">
|
||||
<ArticleTopLayout entry={project} />
|
||||
</div>
|
||||
</TopLayout>
|
||||
<BottomLayout>
|
||||
<div class="animate">
|
||||
<ArticleBottomLayout entry={project} />
|
||||
</div>
|
||||
</BottomLayout>
|
||||
</PageLayout>
|
||||
28
src/pages/projects/index.astro
Normal file
28
src/pages/projects/index.astro
Normal file
@@ -0,0 +1,28 @@
|
||||
---
|
||||
import { getCollection } from "astro:content"
|
||||
import PageLayout from "@layouts/PageLayout.astro"
|
||||
import TopLayout from "@layouts/TopLayout.astro"
|
||||
import BottomLayout from "@layouts/BottomLayout.astro"
|
||||
import Projects from "@components/Projects"
|
||||
import { PROJECTS } from "@consts"
|
||||
|
||||
const projects = (await getCollection("projects"))
|
||||
.filter(project => !project.data.draft)
|
||||
.sort((a, b) => b.data.date.getTime() - a.data.date.getTime())
|
||||
|
||||
const tags = [...new Set(projects.flatMap(project => project.data.tags))]
|
||||
.sort((a, b) => a.localeCompare(b))
|
||||
---
|
||||
|
||||
<PageLayout title={PROJECTS.TITLE} description={PROJECTS.DESCRIPTION}>
|
||||
<TopLayout>
|
||||
<div class="animate page-heading">
|
||||
{PROJECTS.TITLE}
|
||||
</div>
|
||||
</TopLayout>
|
||||
<BottomLayout>
|
||||
<div class="animate">
|
||||
<Projects client:load tags={tags} data={projects} />
|
||||
</div>
|
||||
</BottomLayout>
|
||||
</PageLayout>
|
||||
16
src/pages/robots.txt.ts
Normal file
16
src/pages/robots.txt.ts
Normal file
@@ -0,0 +1,16 @@
|
||||
import type { APIRoute } from "astro"
|
||||
|
||||
const robotsTxt = `
|
||||
User-agent: *
|
||||
Allow: /
|
||||
|
||||
Sitemap: ${new URL("sitemap-index.xml", import.meta.env.SITE).href}
|
||||
`.trim()
|
||||
|
||||
export const GET: APIRoute = () => {
|
||||
return new Response(robotsTxt, {
|
||||
headers: {
|
||||
"Content-Type": "text/plain; charset=utf-8",
|
||||
},
|
||||
})
|
||||
}
|
||||
30
src/pages/rss.xml.ts
Normal file
30
src/pages/rss.xml.ts
Normal file
@@ -0,0 +1,30 @@
|
||||
import rss from "@astrojs/rss"
|
||||
import { getCollection } from "astro:content"
|
||||
import { SITE } from "@consts"
|
||||
|
||||
type Context = {
|
||||
site: string
|
||||
}
|
||||
|
||||
export async function GET(context: Context) {
|
||||
const posts = await getCollection("blog")
|
||||
const projects = await getCollection("projects")
|
||||
|
||||
const items = [...posts, ...projects]
|
||||
|
||||
items.sort((a, b) => new Date(b.data.date).getTime() - new Date(a.data.date).getTime())
|
||||
|
||||
return rss({
|
||||
title: SITE.TITLE,
|
||||
description: SITE.DESCRIPTION,
|
||||
site: context.site,
|
||||
items: items.map((item) => ({
|
||||
title: item.data.title,
|
||||
description: item.data.summary,
|
||||
pubDate: item.data.date,
|
||||
link: item.slug.startsWith("blog")
|
||||
? `/blog/${item.slug}/`
|
||||
: `/projects/${item.slug}/`,
|
||||
})),
|
||||
})
|
||||
}
|
||||
29
src/pages/search/index.astro
Normal file
29
src/pages/search/index.astro
Normal file
@@ -0,0 +1,29 @@
|
||||
---
|
||||
import { type CollectionEntry, getCollection } from "astro:content"
|
||||
import PageLayout from "@layouts/PageLayout.astro"
|
||||
import TopLayout from "@layouts/TopLayout.astro"
|
||||
import BottomLayout from "@layouts/BottomLayout.astro"
|
||||
import Search from "@components/Search"
|
||||
import { SEARCH } from "@consts"
|
||||
|
||||
const posts = (await getCollection("blog"))
|
||||
.filter(post => !post.data.draft)
|
||||
|
||||
const projects = (await getCollection("projects"))
|
||||
.filter(post => !post.data.draft)
|
||||
|
||||
const data = [...posts, ...projects] as CollectionEntry<"blog">[]
|
||||
---
|
||||
|
||||
<PageLayout title={SEARCH.TITLE} description={SEARCH.DESCRIPTION}>
|
||||
<TopLayout>
|
||||
<div class="animate page-heading">
|
||||
{SEARCH.TITLE}
|
||||
</div>
|
||||
</TopLayout>
|
||||
<BottomLayout>
|
||||
<div class="animate">
|
||||
<Search client:load data={data}/>
|
||||
</div>
|
||||
</BottomLayout>
|
||||
</PageLayout>
|
||||
59
src/pages/work/index.astro
Normal file
59
src/pages/work/index.astro
Normal file
@@ -0,0 +1,59 @@
|
||||
---
|
||||
import { getCollection } from "astro:content"
|
||||
import PageLayout from "@layouts/PageLayout.astro"
|
||||
import TopLayout from "@layouts/TopLayout.astro"
|
||||
import BottomLayout from "@layouts/BottomLayout.astro"
|
||||
import { WORK } from "@consts"
|
||||
|
||||
const collection = await getCollection("work")
|
||||
|
||||
collection.sort((a, b) => new Date(b.data.dateStart).getTime() - new Date(a.data.dateStart).getTime())
|
||||
|
||||
const work = await Promise.all(
|
||||
collection.map(async (item) => {
|
||||
const { Content } = await item.render()
|
||||
return { ...item, Content }
|
||||
})
|
||||
)
|
||||
|
||||
function formatWorkDate(input: Date | string) {
|
||||
if (typeof input === "string") return input
|
||||
|
||||
const month = input.toLocaleDateString("en-US", {
|
||||
month: "short",
|
||||
})
|
||||
|
||||
const year = new Date(input).getFullYear()
|
||||
return `${month} ${year}`
|
||||
}
|
||||
---
|
||||
|
||||
<PageLayout title={WORK.TITLE} description={WORK.DESCRIPTION}>
|
||||
<TopLayout>
|
||||
<div class="animate page-heading">
|
||||
{WORK.TITLE}
|
||||
</div>
|
||||
</TopLayout>
|
||||
<BottomLayout>
|
||||
<ul>
|
||||
{
|
||||
work.map((entry) => (
|
||||
<li class="animate border-b border-black/10 dark:border-white/25 mt-4 py-8 first-of-type:mt-0 first-of-type:pt-0 last-of-type:border-none">
|
||||
<div class="text-sm uppercase mb-4">
|
||||
{formatWorkDate(entry.data.dateStart)} - {formatWorkDate(entry.data.dateEnd)}
|
||||
</div>
|
||||
<div class="text-black dark:text-white font-semibold">
|
||||
{entry.data.company}
|
||||
</div>
|
||||
<div class="text-sm font-semibold">
|
||||
{entry.data.role}
|
||||
</div>
|
||||
<article class="prose dark:prose-invert">
|
||||
<entry.Content />
|
||||
</article>
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
</BottomLayout>
|
||||
</PageLayout>
|
||||
150
src/styles/global.css
Normal file
150
src/styles/global.css
Normal file
@@ -0,0 +1,150 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
@font-face {
|
||||
font-family: "Atkinson";
|
||||
src: url("/fonts/atkinson-regular.woff") format("woff");
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Atkinson";
|
||||
src: url("/fonts/atkinson-bold.woff") format("woff");
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
}
|
||||
|
||||
html {
|
||||
overflow-y: scroll;
|
||||
color-scheme: light;
|
||||
background-color: white;
|
||||
font-family: "Atkinson", sans-serif;
|
||||
|
||||
}
|
||||
|
||||
html.dark {
|
||||
color-scheme: dark;
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
@apply h-full w-full antialiased;
|
||||
@apply bg-white dark:bg-black;
|
||||
@apply text-black/75 dark:text-white/75;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply relative flex flex-col;
|
||||
}
|
||||
|
||||
main {
|
||||
@apply flex flex-col flex-1 bg-white dark:bg-black;
|
||||
}
|
||||
|
||||
header {
|
||||
@apply border-b;
|
||||
@apply transition-all duration-300 ease-in-out;
|
||||
}
|
||||
|
||||
header:not(.scrolled) {
|
||||
@apply bg-transparent border-transparent;
|
||||
}
|
||||
|
||||
header.scrolled {
|
||||
@apply bg-white/75 dark:bg-black/50;
|
||||
@apply border-black/10 dark:border-white/25;
|
||||
@apply backdrop-blur-sm saturate-200;
|
||||
}
|
||||
|
||||
article {
|
||||
@apply prose dark:prose-invert max-w-full pb-12;
|
||||
}
|
||||
|
||||
.page-heading {
|
||||
@apply font-semibold text-black dark:text-white;
|
||||
}
|
||||
|
||||
.blend {
|
||||
@apply transition-all duration-300 ease-in-out;
|
||||
}
|
||||
|
||||
/** Light theme particles on home page */
|
||||
@keyframes animateParticle {
|
||||
from {
|
||||
transform: translateY(0px);
|
||||
}
|
||||
to {
|
||||
transform: translateY(-2000px);
|
||||
}
|
||||
}
|
||||
|
||||
/** styles for public /animation.js */
|
||||
.animate {
|
||||
opacity: 0;
|
||||
transform: translateY(50px);
|
||||
transition: opacity 1s ease, transform 1s ease;
|
||||
}
|
||||
|
||||
.animate.show {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
article img {
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* TWINKLE STARS
|
||||
*/
|
||||
|
||||
#twinkle-star.template {
|
||||
@apply absolute -left-full; /* hide offscreen */
|
||||
}
|
||||
|
||||
#twinkle-star.twinkle {
|
||||
@apply animate-twinkle; /* defined in tailwind.config */
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Meteors
|
||||
*/
|
||||
|
||||
#meteors .shower {
|
||||
@apply absolute inset-0 top-0;;
|
||||
@apply left-1/2 -translate-x-1/2;
|
||||
@apply w-screen aspect-square;
|
||||
}
|
||||
|
||||
#meteors .meteor {
|
||||
@apply animate-meteor; /* defined in tailwind.config */
|
||||
@apply absolute top-1/2 left-1/2 w-px h-[75vh];
|
||||
@apply bg-gradient-to-b from-white to-transparent;
|
||||
}
|
||||
|
||||
#meteors .shower.ur {
|
||||
@apply rotate-45;
|
||||
}
|
||||
|
||||
#meteors .shower.dr {
|
||||
@apply rotate-135;
|
||||
}
|
||||
|
||||
#meteors .shower.dl {
|
||||
@apply rotate-225;
|
||||
}
|
||||
|
||||
#meteors .shower.ul {
|
||||
@apply rotate-315;
|
||||
}
|
||||
20
src/types.ts
Normal file
20
src/types.ts
Normal file
@@ -0,0 +1,20 @@
|
||||
export type Page = {
|
||||
TITLE: string
|
||||
DESCRIPTION: string
|
||||
}
|
||||
|
||||
export interface Site extends Page {
|
||||
AUTHOR: string
|
||||
}
|
||||
|
||||
export type Links = {
|
||||
TEXT: string
|
||||
HREF: string
|
||||
}[]
|
||||
|
||||
export type Socials = {
|
||||
NAME: string
|
||||
ICON: string
|
||||
TEXT: string
|
||||
HREF: string
|
||||
}[]
|
||||
Reference in New Issue
Block a user