valentineus/popov.link
valentineus/popov.link
0
Fork 0
Code Issues Pull Requests 1 Actions Releases Activity

Updated the main page and page structures
All checks were successful
Test / test (push) Successful in 38s
Details
Test / test (pull_request) Successful in 36s
Details

Browse Source
This commit is contained in:
Valentin Popov 2024-09-12 13:11:16 +00:00
parent 70fa9c2033
commit 4ba339984d
Signed by: Valentin Popov
GPG Key ID: AE3CE523DAAA8401
9 changed files with 132 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
package-lock.json generated
View File

@ -14,6 +14,7 @@
"astro": "^4.15.4", "astro": "^4.15.4",
"autoprefixer": "^10.4.20", "autoprefixer": "^10.4.20",
"cssnano": "^7.0.6", "cssnano": "^7.0.6",
"dayjs": "^1.11.13",
"mdast-util-to-string": "^4.0.0", "mdast-util-to-string": "^4.0.0",
"reading-time": "^1.5.0", "reading-time": "^1.5.0",
"sass": "^1.78.0", "sass": "^1.78.0",
@ -2894,6 +2895,12 @@
"integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==", "integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==",
"license": "CC0-1.0" "license": "CC0-1.0"
}, },
"node_modules/dayjs": {
"version": "1.11.13",
"resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.13.tgz",
"integrity": "sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==",
"license": "MIT"
},
"node_modules/debug": { "node_modules/debug": {
"version": "4.3.7", "version": "4.3.7",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",

1
package.json
View File

@ -18,6 +18,7 @@
"astro": "^4.15.4", "astro": "^4.15.4",
"autoprefixer": "^10.4.20", "autoprefixer": "^10.4.20",
"cssnano": "^7.0.6", "cssnano": "^7.0.6",
"dayjs": "^1.11.13",
"mdast-util-to-string": "^4.0.0", "mdast-util-to-string": "^4.0.0",
"reading-time": "^1.5.0", "reading-time": "^1.5.0",
"sass": "^1.78.0", "sass": "^1.78.0",

46
src/components/PostElement.astro Normal file
View File

@ -0,0 +1,46 @@
---
import dayjs from "dayjs";
const { post } = Astro.props;
---
<style lang="scss">
@import "../scss/_variables.scss";
/* Post */
.post {
padding-bottom: 3rem;
}
.link {
color: $colorText;
}
/* Meta */
.meta {
padding-bottom: 1.5rem;
}
.date {
opacity: 0.5;
}
.tag {
display: none;
}
</style>
<article class="post">
<h2><a class="link" href={`/blog/${post.slug}`}>{post.data.title}</a></h2>
<div class="meta">
<time class="date" datetime={post.data.pubDate.toISOString()}>
{dayjs(post.data.pubDate.toString()).format("YYYY-MM-DD")}
</time>
<ul class="tag">
<li><a href="#">tag1</a></li>
<li><a href="#">tag2</a></li>
</ul>
</div>
<p>{post.data.description}</p>
<a href={`/blog/${post.slug}`}>Read More</a>
</article>

4
src/layouts/BaseLayout.astro
View File

@ -11,8 +11,8 @@ const { title, description } = Astro.props;
<body> <body>
<Header /> <Header />
<article> <main>
<slot /> <slot />
</article> </main>
</body> </body>
</html> </html>

34
src/pages/blog/[...slug].astro
View File

@ -23,17 +23,25 @@ const { Content, remarkPluginFrontmatter } = await post.render();
</style> </style>
<Layout title={post.data.title} description={post.data.description}> <Layout title={post.data.title} description={post.data.description}>
<div class="header"> <article>
<h1>{post.data.title}</h1> <section class="header">
<p> <h1>{post.data.title}</h1>
<small> <p>
Posted <small>
<time datetime={post.data.pubDate.toISOString()}>{post.data.pubDate.toDateString()}</time> Posted
&nbsp;by&nbsp;{post.data.author}&nbsp;‐ <time datetime={post.data.pubDate.toISOString()}>{post.data.pubDate.toDateString()}</time>
<strong>{remarkPluginFrontmatter.minutesRead}</strong> &nbsp;by&nbsp;{post.data.author}&nbsp;‐
</small> <strong>{remarkPluginFrontmatter.minutesRead}</strong>
</p> </small>
</div> </p>
<Content /> </section>
<Comments />
<section>
<Content />
</section>
<section>
<Comments />
</section>
</article>
</Layout> </Layout>

13
src/pages/index.astro
View File

@ -1,18 +1,13 @@
--- ---
import { getCollection } from "astro:content"; import { getCollection } from "astro:content";
import Element from "../components/PostElement.astro";
import Layout from "../layouts/PageLayout.astro"; import Layout from "../layouts/PageLayout.astro";
const posts = await getCollection("blog"); const posts = await getCollection("blog");
--- ---
<Layout> <Layout>
<ul> <section>
{ {posts.map((post) => <Element post={post} />)}
posts.map((post) => ( </section>
<li>
<a href={`/blog/${post.slug}`}>{post.data.title}</a>
</li>
))
}
</ul>
</Layout> </Layout>

63
src/scss/_framework.scss
View File

@ -6,16 +6,29 @@
} }
html { html {
font-family: $font-family-base; font-family:
"Jost",
-apple-system,
blinkmacsystemfont,
"Segoe UI",
roboto,
"Helvetica Neue",
arial,
"Noto Sans",
sans-serif,
"Apple Color Emoji",
"Segoe UI Emoji",
"Segoe UI Symbol",
"Noto Color Emoji";
font-size: 62.5%; font-size: 62.5%;
min-height: 100%; min-height: 100%;
overflow-y: scroll; overflow-y: scroll;
} }
body { body {
background-color: $color-bg; background-color: $colorBg;
color: $color-text; color: $colorText;
font-size: $font-size-base; font-size: $fontSizeBase;
font-synthesis: weight style small-caps; font-synthesis: weight style small-caps;
font-weight: 400; font-weight: 400;
line-height: 1.5; line-height: 1.5;
@ -28,7 +41,7 @@ body {
@media (width <=684px) { @media (width <=684px) {
body { body {
font-size: $font-size-base * 0.85; font-size: $fontSizeBase * 0.85;
padding: 4em 1em 2em; padding: 4em 1em 2em;
} }
} }
@ -84,16 +97,16 @@ sup {
} }
hr { hr {
border-color: $color-blossom; border-color: $colorBlossom;
} }
a { a {
color: $color-blossom; color: $colorBlossom;
text-decoration: inherit; text-decoration: inherit;
transition: color 0.25s; transition: color 0.25s;
&:visited { &:visited {
color: $color-blossom; color: $colorBlossom;
} }
&:active, &:active,
@ -114,8 +127,8 @@ li {
} }
blockquote { blockquote {
background-color: $color-bg-alt; background-color: $colorBgAlt;
border-left: 5px solid $color-blossom; border-left: 5px solid $colorBlossom;
margin-bottom: 2.5rem; margin-bottom: 2.5rem;
margin-left: 0; margin-left: 0;
margin-right: 0; margin-right: 0;
@ -136,9 +149,9 @@ video {
} }
pre { pre {
background-color: $color-bg-alt; background-color: $colorBgAlt;
border-radius: 4px; border-radius: 4px;
border: 1px solid $color-bg-alt; border: 1px solid $colorBgAlt;
display: block; display: block;
font-size: 0.9em; font-size: 0.9em;
margin-bottom: 2.5rem; margin-bottom: 2.5rem;
@ -150,7 +163,7 @@ pre {
code, code,
kbd, kbd,
samp { samp {
background-color: $color-bg-code; background-color: $colorBgCode;
border-radius: 4px; border-radius: 4px;
font-size: 0.9em; font-size: 0.9em;
padding: 0 0.2em; padding: 0 0.2em;
@ -172,7 +185,7 @@ table {
td, td,
th { th {
border-bottom: 1px dashed $color-blossom; border-bottom: 1px dashed $colorBlossom;
padding: 0.5em; padding: 0.5em;
} }
@ -185,11 +198,11 @@ button,
input[type="submit"], input[type="submit"],
input[type="reset"], input[type="reset"],
input[type="button"] { input[type="button"] {
background-color: $color-blossom; background-color: $colorBlossom;
border: 1px solid $color-blossom; border: 1px solid $colorBlossom;
border-radius: 1px; border-radius: 1px;
box-sizing: border-box; box-sizing: border-box;
color: $color-bg; color: $colorBg;
cursor: pointer; cursor: pointer;
display: inline-block; display: inline-block;
padding: 5px 10px; padding: 5px 10px;
@ -204,9 +217,9 @@ input[type="button"] {
&:focus:enabled, &:focus:enabled,
&:hover:enabled { &:hover:enabled {
background-color: $color-fade; background-color: $colorFade;
border-color: $color-fade; border-color: $colorFade;
color: $color-bg; color: $colorBg;
outline: 0; outline: 0;
} }
} }
@ -214,23 +227,23 @@ input[type="button"] {
textarea, textarea,
select, select,
input { input {
background-color: $color-bg-alt; background-color: $colorBgAlt;
border: 1px solid $color-bg-alt; border: 1px solid $colorBgAlt;
border-radius: 4px; border-radius: 4px;
box-shadow: none; box-shadow: none;
box-sizing: border-box; box-sizing: border-box;
color: $color-text; color: $colorText;
margin-bottom: 10px; margin-bottom: 10px;
padding: 6px 10px; padding: 6px 10px;
&:focus { &:focus {
border: 1px solid $color-blossom; border: 1px solid $colorBlossom;
outline: 0; outline: 0;
} }
} }
input[type="checkbox"]:focus { input[type="checkbox"]:focus {
outline: 1px dotted $color-blossom; outline: 1px dotted $colorBlossom;
} }
label, label,

10
src/scss/_navbar.scss
View File

@ -1,7 +1,7 @@
header { header {
background-color: $color-bg; background-color: $colorBg;
border-bottom: 1px solid $color-header; border-bottom: 1px solid $colorHeader;
box-shadow: 0 5px 5px $color-bg; box-shadow: 0 5px 5px $colorBg;
left: 0; left: 0;
line-height: 3.5em; line-height: 3.5em;
opacity: 0.975; opacity: 0.975;
@ -17,11 +17,11 @@ nav {
text-align: right; text-align: right;
a { a {
color: $color-text; color: $colorText;
padding: 0 1em; padding: 0 1em;
&:visited { &:visited {
color: $color-text; color: $colorText;
} }
} }
} }

30
src/scss/_variables.scss
View File

@ -1,22 +1,8 @@
$color-bg: #212529; $colorBg: #212529;
$color-bg-alt: hwb(0deg 0% 100% / 20%); $colorBgAlt: hwb(0deg 0% 100% / 20%);
$color-bg-code: #3b3d42; $colorBgCode: #3b3d42;
$color-blossom: #6da13f; $colorBlossom: #6da13f;
$color-fade: #598332; $colorFade: #598332;
$color-header: #1b1f22; $colorHeader: #1b1f22;
$color-text: #dee2e6; $colorText: #dee2e6;
$font-family-base: $fontSizeBase: 1.8rem;
"Jost",
-apple-system,
blinkmacsystemfont,
"Segoe UI",
roboto,
"Helvetica Neue",
arial,
"Noto Sans",
sans-serif,
"Apple Color Emoji",
"Segoe UI Emoji",
"Segoe UI Symbol",
"Noto Color Emoji";
$font-size-base: 1.8rem;