LukeParke/unicorn-utterances
1
0
Fork 0
mirror of https://github.com/LukeHagar/unicorn-utterances.git synced 2025-12-06 04:21:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add blog post listings

Browse Source
This commit is contained in:
Corbin Crutchley
2022-07-05 20:44:59 -07:00
committed by Corbin Crutchley
parent cc4903db25
commit ea734fa632
8 changed files with 34 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
package-lock.json generated
View File

@@ -16,7 +16,7 @@
"hast-util-heading-rank": "^2.1.0",
"junk": "^4.0.0",
"preact": "^10.7.3",
"rehype-img-size": "^1.0.1",
"rehype-img-size": "github:unicorn-utterances/rehype-img-size#relative-path-full",
"rehype-slug-custom-id": "^1.1.0",
"rehype-stringify": "^9.0.3",
"remark-behead": "^3.1.0",
@@ -21249,9 +21249,9 @@
}
},
"node_modules/rehype-img-size": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/rehype-img-size/-/rehype-img-size-1.0.1.tgz",
"integrity": "sha512-+rLkxF2H3mQULAg3iA2Z2spJQlBcCpApG8sHC47bc0p33ol+ddz+O3gyUcTgk5xX5jGaj1oQOBs/cBy8nIIhoQ==",
"version": "0.0.1",
"resolved": "git+ssh://git@github.com/unicorn-utterances/rehype-img-size.git#6868057d15abaa94c0240b2d1d62b4f159d3024a",
"license": "MIT",
"dependencies": {
"image-size": "^1.0.0",
"unist-util-visit": "^4.1.0"
@@ -41225,9 +41225,8 @@
}
},
"rehype-img-size": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/rehype-img-size/-/rehype-img-size-1.0.1.tgz",
"integrity": "sha512-+rLkxF2H3mQULAg3iA2Z2spJQlBcCpApG8sHC47bc0p33ol+ddz+O3gyUcTgk5xX5jGaj1oQOBs/cBy8nIIhoQ==",
"version": "git+ssh://git@github.com/unicorn-utterances/rehype-img-size.git#6868057d15abaa94c0240b2d1d62b4f159d3024a",
"from": "rehype-img-size@github:unicorn-utterances/rehype-img-size#relative-path-full",
"requires": {
"image-size": "^1.0.0",
"unist-util-visit": "^4.1.0"

2
package.json
View File

@@ -37,7 +37,7 @@
"hast-util-heading-rank": "^2.1.0",
"junk": "^4.0.0",
"preact": "^10.7.3",
"rehype-img-size": "^1.0.1",
"rehype-img-size": "github:unicorn-utterances/rehype-img-size#relative-path-full",
"rehype-slug-custom-id": "^1.1.0",
"rehype-stringify": "^9.0.3",
"remark-behead": "^3.1.0",

14
src/components/BlogPostPreview.astro
View File

@@ -1,18 +1,20 @@
---
import { ListViewPosts } from "utils/fs/api";
export interface Props {
post: any;
post: ListViewPosts[number];
}
const { post } = Astro.props;
const { post } = Astro.props as Props;
---
<article class="post-preview">
<header>
<p class="publish-date">{post.frontmatter.publishDate}</p>
<a href={post.url}><h1 class="title">{post.frontmatter.title}</h1></a>
<p class="publish-date">{post.published}</p>
<a href={post.slug}><h1 class="title">{post.title}</h1></a>
</header>
<p>{post.frontmatter.description}</p>
<a href={post.url}>Read more</a>
<p>{post.description}</p>
<a href={post.slug}>Read more</a>
</article>
<style>

25
src/pages/index.astro
View File

@@ -3,28 +3,13 @@
import BaseHead from '../components/BaseHead.astro';
import BlogHeader from '../components/BlogHeader.astro';
import BlogPostPreview from '../components/BlogPostPreview.astro';
import { getAllPostsForListView } from "utils/fs/api";
// Component Script:
// You can write any JavaScript/TypeScript that you'd like here.
// It will run during the build, but never in the browser.
// All variables are available to use in the HTML template below.
let title = 'Example Blog';
let description = 'The perfect starter for your perfect blog.';
let permalink = 'https://example.com/';
// Data Fetching: List all Markdown posts in the repo.
let allPosts = await Astro.glob('./posts/*.md');
allPosts = allPosts.sort((a, b) => new Date(b.frontmatter.publishDate).valueOf() - new Date(a.frontmatter.publishDate).valueOf());
// Full Astro Component Syntax:
// https://docs.astro.build/core-concepts/astro-components/
const posts = getAllPostsForListView();
---
<html lang="en">
<head>
<BaseHead {title} {description} {permalink} />
<style>
header {
width: 100%;
@@ -65,12 +50,8 @@ allPosts = allPosts.sort((a, b) => new Date(b.frontmatter.publishDate).valueOf()
<BlogHeader />
<div class="wrapper">
<main class="content">
<section class="intro">
<h1 class="latest">{title}</h1>
<p>{description}</p>
</section>
<section aria-label="Blog post list">
{allPosts.map((p) => <BlogPostPreview post={p} />)}
{posts.map((p) => <BlogPostPreview post={p} />)}
</section>
</main>
</div>

2
src/utils/fs/get-datas.ts
View File

@@ -1,5 +1,5 @@
import { LicenseInfo, PronounInfo, RolesEnum, UnicornInfo } from "types/index";
import fs from "fs";
import * as fs from "fs";
import { join } from "path";
import { getImageSize } from "rehype-img-size";
import { getFullRelativePath } from "utils/url-paths";

2
src/utils/fs/markdown-api.ts
View File

@@ -4,7 +4,7 @@ import {
pickDeep,
PickDeep,
} from "ts-util-helpers";
import fs from "fs";
import * as fs from "fs";
import matter from "gray-matter";
import { countContent } from "utils/count-words";

4
src/utils/fs/posts-and-collections-api.ts
View File

@@ -1,5 +1,5 @@
import fs from "fs";
import path from "path";
import * as fs from "fs";
import * as path from "path";
import {
collectionsDirectory,
postsDirectory,

21
tsconfig.json
View File

@@ -9,17 +9,20 @@
"resolveJsonModule": true,
// Enable stricter transpilation for better output.
"isolatedModules": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
// Add type definitions for our Vite runtime.
"types": ["vite/client", "node"],
"types": ["node", "vite/client"],
"baseUrl": ".",
"paths": {
"constants/*": ["src/constants/*"],
"uu-constants": ["src/constants"],
"types/*": ["src/types/*"],
"uu-types": ["src/types"],
"components/*": ["src/components/*"],
"utils/*": ["src/utils/*"],
"uu-utils": ["src/utils"],
"assets/*": ["src/assets/*"],
"constants/*": ["./src/constants/*"],
"uu-constants": ["./src/constants"],
"types/*": ["./src/types/*"],
"uu-types": ["./src/types"],
"components/*": ["./src/components/*"],
"utils/*": ["./src/utils/*"],
"uu-utils": ["./src/utils"],
"assets/*": ["./src/assets/*"],
}
}
}