show all blogs on /
This commit is contained in:
array-in-a-matrix
parent
f8be92a7b9
commit
789c5d17d9
|
|
@ -2,14 +2,12 @@
|
|||
import { SITE_TITLE } from '../consts';
|
||||
---
|
||||
<!-- https://git.inamatrix.xyz/array-in-a-matrix/bloginamatrix.xyz/src/branch/hpx-spa/src/components -->
|
||||
<!-- TODO: replace style created nav component -->
|
||||
<!-- TODO: make nav bar vertical to the right -->
|
||||
<header>
|
||||
<nav>
|
||||
<h2><a href="/">{SITE_TITLE}</a></h2>
|
||||
<div class="internal-links">
|
||||
<a href="/">Home</a>
|
||||
<a href="/blog">Blog</a>
|
||||
<a href="https://arrayinamatrix.xyz">Main site</a>
|
||||
<a href="https://arrayinamatrix.xyz">Main</a>
|
||||
<a href="https://chatinamatrix.xyz">Chat</a>
|
||||
<a href="https://git.inamatrix.xyz/array-in-a-matrix/bloginamatrix.xyz">Source code</a>
|
||||
</div>
|
||||
|
|
|
|||
243
src/content/blog/Example 1.md
Normal file
243
src/content/blog/Example 1.md
Normal file
|
|
@ -0,0 +1,243 @@
|
|||
---
|
||||
title: 'Example 1'
|
||||
description: 'Lorem ipsum dolor sit amet'
|
||||
pubDate: 'Jul 08 2022'
|
||||
heroImage: '/blog-placeholder-3.jpg'
|
||||
---
|
||||
|
||||
# Heading level 1
|
||||
|
||||
## Heading level 2
|
||||
|
||||
### Heading level 3
|
||||
|
||||
#### Heading level 4
|
||||
|
||||
##### Heading level 5
|
||||
|
||||
###### Heading level 6
|
||||
|
||||
Heading level 1
|
||||
===============
|
||||
|
||||
Heading level 2
|
||||
---------------
|
||||
|
||||
I really like using Markdown.
|
||||
|
||||
I think I'll use it to format all of my documents from now on.
|
||||
|
||||
This is the first line.
|
||||
And this is the second line.
|
||||
|
||||
I just love **bold text**.
|
||||
|
||||
I just love __bold text__.
|
||||
|
||||
Love**is**bold
|
||||
|
||||
Italicized text is the *cat's meow*.
|
||||
|
||||
Italicized text is the _cat's meow_.
|
||||
|
||||
A*cat*meow
|
||||
|
||||
This text is ***really important***.
|
||||
|
||||
This text is ___really important___.
|
||||
|
||||
This text is __*really important*__.
|
||||
|
||||
This text is **_really important_**.
|
||||
|
||||
This is really***very***important text.
|
||||
|
||||
> Dorothy followed her through many of the beautiful rooms in her castle.
|
||||
|
||||
> Dorothy followed her through many of the beautiful rooms in her castle.
|
||||
>
|
||||
> The Witch bade her clean the pots and kettles and sweep the floor and keep the fire fed with wood.
|
||||
|
||||
> Dorothy followed her through many of the beautiful rooms in her castle.
|
||||
>
|
||||
>> The Witch bade her clean the pots and kettles and sweep the floor and keep the fire fed with wood.
|
||||
|
||||
> #### The quarterly results look great!
|
||||
>
|
||||
> - Revenue was off the chart.
|
||||
> - Profits were higher than ever.
|
||||
>
|
||||
> *Everything* is going according to **plan**.
|
||||
|
||||
1. First item
|
||||
2. Second item
|
||||
3. Third item
|
||||
4. Fourth item
|
||||
|
||||
a
|
||||
|
||||
1. First item
|
||||
1. Second item
|
||||
1. Third item
|
||||
1. Fourth item
|
||||
|
||||
a
|
||||
|
||||
1. First item
|
||||
8. Second item
|
||||
3. Third item
|
||||
5. Fourth item
|
||||
|
||||
a
|
||||
|
||||
1. First item
|
||||
2. Second item
|
||||
3. Third item
|
||||
1. Indented item
|
||||
2. Indented item
|
||||
4. Fourth item
|
||||
|
||||
- First item
|
||||
- Second item
|
||||
- Third item
|
||||
- Fourth item
|
||||
|
||||
* First item
|
||||
* Second item
|
||||
* Third item
|
||||
* Fourth item
|
||||
|
||||
+ First item
|
||||
+ Second item
|
||||
+ Third item
|
||||
+ Fourth item
|
||||
|
||||
- First item
|
||||
- Second item
|
||||
- Third item
|
||||
- Indented item
|
||||
- Indented item
|
||||
- Fourth item
|
||||
|
||||
- 1968\. A great year!
|
||||
- I think 1969 was second best.
|
||||
|
||||
|
||||
|
||||
At the command prompt, type `nano`.
|
||||
|
||||
``Use `code` in your Markdown file.``
|
||||
|
||||
<html>
|
||||
<head>
|
||||
</head>
|
||||
</html>
|
||||
|
||||
***
|
||||
|
||||
---
|
||||
|
||||
_________________
|
||||
|
||||
These are taken from [Markdown Guide](https://www.markdownguide.org/basic-syntax/ "Link to cheatsheet").
|
||||
|
||||
<https://arrayinamatrix.xyz>
|
||||
<example@bloginamatrix.xyz>
|
||||
|
||||
I love supporting the **[EFF](https://eff.org)**.
|
||||
This is from *[Markdown Guide](https://www.markdownguide.org)*.
|
||||
Back to the [`beginning`](#heading-level-1)?
|
||||
|
||||
This **word** is bold. This <em>word</em> is italic.
|
||||
|
||||
This <p>italic and **bold**</p> won’t work.
|
||||
|
||||
https://www.markdownguide.org/extended-syntax/
|
||||
|
||||
| Syntax | Description |
|
||||
| ----------- | ----------- |
|
||||
| Header | Title |
|
||||
| Paragraph | Text |
|
||||
|
||||
| Syntax | Description | Test Text |
|
||||
| :--- | :----: | ---: |
|
||||
| Header | Title | Here's this |
|
||||
| Paragraph | Text | And more |
|
||||
|
||||
```
|
||||
{
|
||||
"firstName": "John",
|
||||
"lastName": "Smith",
|
||||
"age": 25
|
||||
}
|
||||
```
|
||||
|
||||
```json
|
||||
{
|
||||
"firstName": "John",
|
||||
"lastName": "Smith",
|
||||
"age": 25
|
||||
}
|
||||
```
|
||||
|
||||
Here's a simple footnote,[^1] and here's a longer one.[^bignote]
|
||||
|
||||
[^1]: This is the first footnote.
|
||||
|
||||
[^bignote]: Here's one with multiple paragraphs and code.
|
||||
|
||||
Indent paragraphs to include them in the footnote.
|
||||
|
||||
`{ my code }`
|
||||
|
||||
Add as many paragraphs as you like.
|
||||
|
||||
|
||||
### My Great Heading {#custom-id}
|
||||
|
||||
First Term
|
||||
: This is the definition of the first term.
|
||||
|
||||
Second Term
|
||||
: This is one definition of the second term.
|
||||
: This is another definition of the second term.
|
||||
|
||||
~~The world is flat.~~ We now know that the world is round.
|
||||
|
||||
- [x] Write the press release
|
||||
- [ ] Update the website
|
||||
- [ ] Contact the media
|
||||
|
||||
Gone camping! :tent: Be back soon.
|
||||
|
||||
That is so funny! :joy:
|
||||
|
||||
I need to highlight these ==very important words==.
|
||||
|
||||
I need to highlight these <mark>very important words</mark>.
|
||||
|
||||
H~2~O
|
||||
|
||||
H<sub>2</sub>O
|
||||
|
||||
X^2^
|
||||
|
||||
X<sup>2</sup>
|
||||
|
||||
$$
|
||||
f(x) = \int_{-\infty}^{\infty} \hat{f}(\xi)\,e^{2 \pi i \xi x}\,d\xi
|
||||
$$
|
||||
|
||||
This matrix, $\begin{bmatrix} & Array & in & a & Matrix & \\ & was & here && \begin{bmatrix} x \\ y \\ z\end{bmatrix} \end{bmatrix}$, is inline written with $\KaTeX$.
|
||||
|
||||
$$
|
||||
\ce{x Na(NH4)HPO4 ->[\Delta] (NaPO3)_x + x NH3 ^ + x H2O}
|
||||
$$
|
||||
|
||||
$$
|
||||
\ce{Zn^2+ <=>[+ 2OH-][+ 2H+] $\underset{\text{amphoteres Hydroxid}}{\ce{Zn(OH)2 v}}$ <=>[+ 2OH-][+ 2H+] $\underset{\text{Hydroxozikat}}{\ce{[Zn(OH)4]^2-}}$}
|
||||
$$
|
||||
|
||||
$$
|
||||
\ce{$K = \frac{[\ce{Hg^2+}][\ce{Hg}]}{[\ce{Hg2^2+}]}$}
|
||||
$$
|
||||
78
src/content/blog/Example 2.md
Normal file
78
src/content/blog/Example 2.md
Normal file
|
|
@ -0,0 +1,78 @@
|
|||
---
|
||||
title: 'Example 2'
|
||||
description: 'Lorem ipsum dolor sit amet'
|
||||
pubDate: 'Jul 08 2022'
|
||||
heroImage: '/blog-placeholder-3.jpg'
|
||||
---
|
||||
|
||||
```mermaid
|
||||
graph LR;
|
||||
A--> B & C & D;
|
||||
B--> A & E;
|
||||
C--> A & E;
|
||||
D--> A & E;
|
||||
E--> B & C & D;
|
||||
```
|
||||
|
||||
```mermaid
|
||||
graph RL
|
||||
A --- B
|
||||
B-->C[fa:fa-ban forbidden]
|
||||
B-->D(fa:fa-spinner);
|
||||
```
|
||||
|
||||
```mermaid
|
||||
sequenceDiagram
|
||||
participant Alice
|
||||
participant Bob
|
||||
Alice->>John: Hello John, how are you?
|
||||
loop Healthcheck
|
||||
John->>John: Fight against hypochondria
|
||||
end
|
||||
Note right of John: Rational thoughts <br/>prevail...
|
||||
John-->>Alice: Great!
|
||||
John->>Bob: How about you?
|
||||
Bob-->>John: Jolly good!
|
||||
```
|
||||
|
||||
```abc
|
||||
K:F
|
||||
!f!(fgag-g2c2)|
|
||||
```
|
||||
|
||||
```abc
|
||||
T:Major scale in D
|
||||
K:D
|
||||
DEFG ABcd|
|
||||
```
|
||||
|
||||
```abc
|
||||
C2 C2 Ez A2|
|
||||
s: "C" * "Am" * |
|
||||
s: * * !>! * |
|
||||
```
|
||||
|
||||
```abc
|
||||
X:1
|
||||
T:Zocharti Loch
|
||||
C:Louis Lewandowski (1821-1894)
|
||||
M:C
|
||||
Q:1/4=76
|
||||
%%score (T1 T2) (B1 B2)
|
||||
V:T1 clef=treble-8 name="Tenore I" snm="T.I"
|
||||
V:T2 clef=treble-8 name="Tenore II" snm="T.II"
|
||||
V:B1 clef=bass name="Basso I" snm="B.I" octave=-2
|
||||
V:B2 clef=bass name="Basso II" snm="B.II" octave=-2
|
||||
K:Gm
|
||||
% End of header, start of tune body:
|
||||
% 1
|
||||
[V:T1] (B2c2 d2g2) | f6e2 | (d2c2 d2)e2 | d4 c2z2 |
|
||||
[V:T2] (G2A2 B2e2) | d6c2 | (B2A2 B2)c2 | B4 A2z2 |
|
||||
[V:B1] z8 | z2f2 g2a2 | b2z2 z2 e2 | f4 f2z2 |
|
||||
[V:B2] x8 | x8 | x8 | x8 |
|
||||
% 5
|
||||
[V:T1] (B2c2 d2g2) | f8 | d3c (d2fe) | H d6 ||
|
||||
[V:T2] z8 | z8 | B3A (B2c2) | H A6 ||
|
||||
[V:B1] (d2f2 b2e'2) | d'8 | g3g g4 | H^f6 ||
|
||||
[V:B2] x8 | z2B2 c2d2 | e3e (d2c2) | H d6 ||
|
||||
```
|
||||
6
src/content/blog/test/test lol.md
Normal file
6
src/content/blog/test/test lol.md
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
---
|
||||
title: 'test lol'
|
||||
description: 'Lorem ipsum dolor sit amet'
|
||||
pubDate: 'Jul 08 2022'
|
||||
heroImage: '/blog-placeholder-3.jpg'
|
||||
---
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
import { type CollectionEntry, getCollection } from 'astro:content';
|
||||
import BlogPost from '../../layouts/BlogPost.astro';
|
||||
import BlogPost from '../layouts/BlogPost.astro';
|
||||
|
||||
export async function getStaticPaths() {
|
||||
const posts = await getCollection('blog');
|
||||
|
|
@ -1,109 +0,0 @@
|
|||
---
|
||||
import BaseHead from '../../components/BaseHead.astro';
|
||||
import Header from '../../components/Header.astro';
|
||||
import { SITE_TITLE, SITE_DESCRIPTION } from '../../consts';
|
||||
import { getCollection } from 'astro:content';
|
||||
import FormattedDate from '../../components/FormattedDate.astro';
|
||||
|
||||
const posts = (await getCollection('blog')).sort(
|
||||
(a, b) => a.data.pubDate.valueOf() - b.data.pubDate.valueOf()
|
||||
);
|
||||
---
|
||||
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
|
||||
<style>
|
||||
main {
|
||||
width: 960px;
|
||||
}
|
||||
ul {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 2rem;
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
ul li {
|
||||
width: calc(50% - 1rem);
|
||||
}
|
||||
ul li * {
|
||||
text-decoration: none;
|
||||
transition: 0.2s ease;
|
||||
}
|
||||
ul li:first-child {
|
||||
width: 100%;
|
||||
margin-bottom: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
ul li:first-child img {
|
||||
width: 100%;
|
||||
}
|
||||
ul li:first-child .title {
|
||||
font-size: 2.369rem;
|
||||
}
|
||||
ul li img {
|
||||
margin-bottom: 0.5rem;
|
||||
border-radius: 12px;
|
||||
}
|
||||
ul li a {
|
||||
display: block;
|
||||
}
|
||||
.title {
|
||||
margin: 0;
|
||||
color: rgb(var(--black));
|
||||
line-height: 1;
|
||||
}
|
||||
.date {
|
||||
margin: 0;
|
||||
color: rgb(var(--gray));
|
||||
}
|
||||
ul li a:hover h4,
|
||||
ul li a:hover .date {
|
||||
color: rgb(var(--accent));
|
||||
}
|
||||
ul a:hover img {
|
||||
box-shadow: var(--box-shadow);
|
||||
}
|
||||
@media (max-width: 720px) {
|
||||
ul {
|
||||
gap: 0.5em;
|
||||
}
|
||||
ul li {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
ul li:first-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
ul li:first-child .title {
|
||||
font-size: 1.563em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<Header />
|
||||
<main>
|
||||
<section>
|
||||
<ul>
|
||||
{
|
||||
posts.map((post) => (
|
||||
<li>
|
||||
<a href={`/blog/${post.slug}/`}>
|
||||
<img width={720} height={360} src={post.data.heroImage} alt="" />
|
||||
<h4 class="title">{post.data.title}</h4>
|
||||
<p class="date">
|
||||
<FormattedDate date={post.data.pubDate} />
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -2,17 +2,108 @@
|
|||
import BaseHead from '../components/BaseHead.astro';
|
||||
import Header from '../components/Header.astro';
|
||||
import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
|
||||
import { getCollection } from 'astro:content';
|
||||
import FormattedDate from '../components/FormattedDate.astro';
|
||||
|
||||
const posts = (await getCollection('blog')).sort(
|
||||
(a, b) => a.data.pubDate.valueOf() - b.data.pubDate.valueOf()
|
||||
);
|
||||
---
|
||||
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
|
||||
<style>
|
||||
main {
|
||||
width: 960px;
|
||||
}
|
||||
ul {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 2rem;
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
ul li {
|
||||
width: calc(50% - 1rem);
|
||||
}
|
||||
ul li * {
|
||||
text-decoration: none;
|
||||
transition: 0.2s ease;
|
||||
}
|
||||
ul li:first-child {
|
||||
width: 100%;
|
||||
margin-bottom: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
ul li:first-child img {
|
||||
width: 100%;
|
||||
}
|
||||
ul li:first-child .title {
|
||||
font-size: 2.369rem;
|
||||
}
|
||||
ul li img {
|
||||
margin-bottom: 0.5rem;
|
||||
border-radius: 12px;
|
||||
}
|
||||
ul li a {
|
||||
display: block;
|
||||
}
|
||||
.title {
|
||||
margin: 0;
|
||||
color: rgb(var(--black));
|
||||
line-height: 1;
|
||||
}
|
||||
.date {
|
||||
margin: 0;
|
||||
color: rgb(var(--gray));
|
||||
}
|
||||
ul li a:hover h4,
|
||||
ul li a:hover .date {
|
||||
color: rgb(var(--accent));
|
||||
}
|
||||
ul a:hover img {
|
||||
box-shadow: var(--box-shadow);
|
||||
}
|
||||
@media (max-width: 720px) {
|
||||
ul {
|
||||
gap: 0.5em;
|
||||
}
|
||||
ul li {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
ul li:first-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
ul li:first-child .title {
|
||||
font-size: 1.563em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<Header title={SITE_TITLE} />
|
||||
<Header />
|
||||
<main>
|
||||
<h1>Hello, World!</h1>
|
||||
<section>
|
||||
<ul>
|
||||
{
|
||||
posts.map((post) => (
|
||||
<li>
|
||||
<a href={`/${post.slug}/`}>
|
||||
<img width={720} height={360} src={post.data.heroImage} alt="" />
|
||||
<h4 class="title">{post.data.title}</h4>
|
||||
<p class="date">
|
||||
<FormattedDate date={post.data.pubDate} />
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ export async function GET(context) {
|
|||
site: context.site,
|
||||
items: posts.map((post) => ({
|
||||
...post.data,
|
||||
link: `/blog/${post.slug}/`,
|
||||
link: `/${post.slug}/`,
|
||||
})),
|
||||
});
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue