DarkCat09/dc09.ru
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Compare commits

base: DarkCat09:f6cc226e0386d77c7f2ffcb8222d3933f75cc4ef
Branches Tags
DarkCat09:main
..
compare: DarkCat09:73f8046888f94c024fe95a6ca5da79c77e2f9dee
Branches Tags
DarkCat09:main

No commits in common. "f6cc226e0386d77c7f2ffcb8222d3933f75cc4ef" and "73f8046888f94c024fe95a6ca5da79c77e2f9dee" have entirely different histories.
f6cc226e03 ... 73f8046888

11 changed files with 81 additions and 186 deletions
Show stats Expand all files Collapse all files

25
src/components/Article.astro
View file

@ -1,11 +1,8 @@
---
import ArticleMenu from './ArticleMenu.astro';
import { AstroComponentFactory } from 'astro/dist/runtime/server';
export interface Props {
PostContent: AstroComponentFactory;
slug: string;
title: string;
description: string;
readingTime: number;
@ -15,9 +12,8 @@ export interface Props {
}
const {
PostContent, slug,
title, description,
readingTime, date,
PostContent, title, description,
readingTime, date, image,
preview = false,
} = Astro.props;
@ -36,28 +32,13 @@ const locale = 'ru';
{readingTime.toFixed(1)} min read
</span>
</address>
{
!preview ?
<ArticleMenu slug={slug} title={title} /> :
""
}
</header>
{
!preview ?
<article>
<PostContent />
</article> :
<div class="description">
<div>
{description}
</div>
}
<style lang="less">
address {
margin-top: 0.25rem;
}
.description {
margin-top: 0.25rem;
}
</style>

40
src/components/ArticleCard.astro
View file

@ -1,6 +1,7 @@
---
import Article from './Article.astro';
import ArticleMenu from './ArticleMenu.astro';
import SimpleMenu from '../layouts/SimpleMenu.astro';
import MenuItem from './MenuItem.astro';
import postRenderer from '../post-renderer.mjs';
import { postType } from '../post-renderer.mjs';
@ -14,6 +15,7 @@ const {
PostContent, title, description,
readingTime, date, image,
} = await postRenderer(post);
const link = `/blog/${post.slug}`;
---
<div class="card card-elevated" id={post.slug}>
@ -26,7 +28,41 @@ const {
image={image}
preview={true}
/>
<ArticleMenu slug={post.slug} title={title} isCard />
<SimpleMenu jcc="end">
<MenuItem
name={/*Comments*/""}
link={`/blog/comments#${post.slug}`}
icon="&#xf075;"
atLeft={false}
/>
<MenuItem
name={/*Copy Link*/""}
link="javascript:void(0)"
icon="&#xf0c5;"
atLeft={false}>
<span slot="js-dataset"
data-btn="copylink"
data-url={link}>
</span>
</MenuItem>
<MenuItem
name={/*Share*/""}
link="javascript:void(0)"
icon="&#xf1e0;"
atLeft={false}>
<span slot="js-dataset"
data-btn="share"
data-title={title}
data-url={link}>
</span>
</MenuItem>
<MenuItem
name="Read"
link={link}
icon="&#xf105;"
atLeft={false}
/>
</SimpleMenu>
</div>
<style>

78
src/components/ArticleMenu.astro
View file

@ -1,78 +0,0 @@
---
import SimpleMenu from '../layouts/SimpleMenu.astro';
import MenuItem from './MenuItem.astro';
export interface Props {
slug: string;
title: string;
isCard?: boolean;
}
const { slug, title, isCard = false } = Astro.props;
const link = `/blog/${slug}`;
---
<SimpleMenu jc={isCard ? "end" : "start"} largeGap={!isCard}>
<MenuItem
name="Comments"
link={`${link}#comments`}
icon="&#xf075;"
iconAfter={isCard}
hideLabel={isCard}
/>
<MenuItem
name="Copy link"
link="javascript:void(0)"
icon="&#xf0c5;"
classes={["btn-copy"]}
dataset={{"data-url": link}}
iconAfter={isCard}
hideLabel={isCard}
/>
<MenuItem
name="Share"
link="javascript:void(0)"
icon="&#xf1e0;"
classes={["btn-share"]}
dataset={{"data-url": link, "data-title": title}}
iconAfter={isCard}
hideLabel={isCard}
/>
{
isCard ?
<MenuItem
name="Read"
link={link}
icon="&#xf105;"
iconAfter={true}
/> :
""
}
</SimpleMenu>
<script>
const handlerCopy = (ev: Event) => {
const elem = ev.currentTarget as HTMLAnchorElement
navigator.clipboard.writeText(
location.origin + elem.dataset.url
)
}
const handlerShare = (ev: Event) => {
const elem = ev.currentTarget as HTMLAnchorElement
navigator.share({
title: elem.dataset.title,
url: elem.dataset.url,
})
}
const btnsCopy = document.querySelectorAll('.btn-copy')
for (let btn of btnsCopy) {
btn.addEventListener('click', handlerCopy)
}
const btnsShare = document.querySelectorAll('.btn-share')
for (let btn of btnsShare) {
btn.addEventListener('click', handlerShare)
}
</script>

1
src/components/GridItem.astro
View file

@ -1,4 +1,5 @@
---
import SimpleMenu from '../layouts/SimpleMenu.astro';
import Icon from './Icon.astro';
export interface Props {

88
src/components/MenuItem.astro
View file

@ -6,89 +6,51 @@ export interface Props {
link: string;
icon: string;
tblank?: boolean;
iconAfter?: boolean;
hideLabel?: boolean;
atLeft?: boolean;
classes?: Array<string>;
dataset?: Object;
datajs?: string;
}
const {
name, link, icon,
tblank = false,
iconAfter = false,
hideLabel = false,
atLeft = true,
classes = [],
dataset = {},
datajs = "",
} = Astro.props;
---
<li class:list={{"icon-after": iconAfter, "hide-label": hideLabel}}>
<a href={link} target={tblank ? "_blank" : "_self"} class:list={classes} {...dataset}>
<li>
<slot name="js-dataset"></slot>
<a href={link} target={tblank ? "_blank" : "_self"} class:list={classes} data-js={datajs}>
<span class="icon-wrapper">
<Icon code={icon} />
</span>
<span class="name">{name}</span>
{name}
</a>
</li>
<style lang="less">
@icon-size: 1.5rem;
<style lang="less" define:vars={{fxd: atLeft ? "row" : "row-reverse"}}>
a {
display: flex;
flex-direction: var(--fxd);
align-items: center;
li {
a {
display: flex;
flex-direction: row;
align-items: center;
column-gap: 0.125rem;
font-size: 1.15rem;
}
&:hover {
.icon-wrapper {
color: var(--fg);
}
}
}
li.icon-after {
a {
flex-direction: row-reverse;
}
}
li.hide-label {
a {
flex-direction: column;
align-items: center;
}
.name {
display: none;
}
position: relative;
&:hover {
.name {
display: block;
width: max-content;
padding: 0.2rem;
position: absolute;
bottom: @icon-size + 0.25rem;
z-index: 10;
font-size: 0.9rem;
color: #eee;
background: rgba(0, 0, 0, .7);
border-radius: 0.2rem;
}
}
font-size: 1.15rem;
}
.icon-wrapper {
width: @icon-size;
font-size: @icon-size;
margin-right: 0.2rem;
width: 1.5rem;
font-size: 1.5rem;
color: var(--fg-sec);
}
li:hover {
.icon-wrapper {
color: var(--fg);
}
}
</style>

9
src/layouts/BlogLayout.astro
View file

@ -6,18 +6,19 @@ import MenuItem from "../components/MenuItem.astro";
export interface Props {
title: string;
description: string;
mainpage?: boolean;
article?: boolean;
}
const { title, description, mainpage = false } = Astro.props;
const { title, description, article = false } = Astro.props;
---
<Layout title={"Blog | " + title} description={description}>
<slot name="metadata" slot="metadata" />
<NavMenu>
{
mainpage ?
<MenuItem name="Home" icon="&#xf104;" link="/" /> :
!article ?
<MenuItem name="Home" icon="&#xf104;" link="/" />
<MenuItem name="Articles" icon="&#xf1ea;" link="/blog" /> :
<MenuItem name="Articles" icon="&#xf104;" link="/blog" />
}
<MenuItem name="Shorts" icon="&#xf0e7;" link="/blog/shorts" />

1
src/layouts/Layout.astro
View file

@ -52,6 +52,7 @@ const { title, description } = Astro.props;
margin: auto;
padding: @main-padding;
max-width: @max-width;
width: 100%;
}
article {

1
src/layouts/Modal.astro
View file

@ -59,7 +59,6 @@ const { id } = Astro.props;
border-radius: var(--bdrs);
background: var(--bg);
box-shadow: 0 0 1rem #161616;
}
.controls {

11
src/layouts/SimpleMenu.astro
View file

@ -1,17 +1,16 @@
---
export interface Props {
jc: "start" | "center" | "end" | "space-around" | "space-between";
largeGap?: boolean;
jcc: "start" | "center" | "end" | "space-around" | "space-between";
}
const { jc, largeGap = false } = Astro.props;
const { jcc } = Astro.props;
---
<ul style={{columnGap: largeGap ? "0.5rem" : "0.125rem"}}>
<ul>
<slot />
</ul>
<style lang="less" define:vars={{jc: jc}}>
<style lang="less" define:vars={{jcc: jcc}}>
ul {
list-style: none;
margin: 0;
@ -19,6 +18,6 @@ const { jc, largeGap = false } = Astro.props;
display: flex;
flex-direction: row;
justify-content: var(--jc);
justify-content: var(--jcc);
}
</style>

11
src/pages/blog/[slug].astro
View file

@ -3,9 +3,7 @@ import BlogLayout from "../../layouts/BlogLayout.astro";
import Article from "../../components/Article.astro";
import { getCollection } from "astro:content";
import postRenderer from "../../post-renderer.mjs";
import { postType } from "../../post-renderer.mjs";
export async function getStaticPaths() {
const posts = await getCollection("blog");
@ -17,14 +15,14 @@ export async function getStaticPaths() {
}));
}
const post: postType = Astro.props.post;
const { post } = Astro.props;
const {
PostContent, title, description,
readingTime, date, image,
} = await postRenderer(post);
---
<BlogLayout title={title} description={description}>
<BlogLayout title={title} description={description} article={true}>
<Fragment slot="metadata">
<meta property="og:type" content="article" />
<meta property="og:title" content={title} />
@ -39,7 +37,6 @@ const {
</Fragment>
<Article
PostContent={PostContent}
slug={post.slug}
title={title}
description={description}
readingTime={readingTime}
@ -51,10 +48,6 @@ const {
<style lang="less" is:global>
@import "/src/styles/max_width.less";
main {
width: 100%;
}
article {
margin: 0;

2
src/pages/blog/page[page].astro
View file

@ -28,7 +28,7 @@ const description =
"The simpliest things!";
---
<BlogLayout title="Homepage" description={description} mainpage>
<BlogLayout title="Homepage" description={description}>
<Fragment slot="metadata">
<meta name="robots" content="noindex, follow" />
</Fragment>