mirror of
https://github.com/StepanovPlaton/AboutMe.git
synced 2026-04-04 12:50:49 +04:00
Initial commit
This commit is contained in:
GitHub
23
src/content/posts/draft.md
Normal file
23
src/content/posts/draft.md
Normal file
@@ -0,0 +1,23 @@
|
||||
---
|
||||
title: Draft Example
|
||||
published: 2021-12-02
|
||||
tags: [Markdown]
|
||||
category: Examples
|
||||
draft: true
|
||||
---
|
||||
|
||||
|
||||
# This Article is a Draft
|
||||
|
||||
This article is currently in a draft state and is not published. Therefore, it will not be visible to the general audience. The content is still a work in progress and may require further editing and review.
|
||||
|
||||
When the article is ready for publication, you can update the "draft" field to "false" in the Frontmatter:
|
||||
|
||||
```markdown
|
||||
---
|
||||
title: Draft Example
|
||||
published: 2024-01-11T04:40:26.381Z
|
||||
tags: [Markdown]
|
||||
category: Examples
|
||||
draft: false
|
||||
---
|
||||
38
src/content/posts/encryption.md
Normal file
38
src/content/posts/encryption.md
Normal file
@@ -0,0 +1,38 @@
|
||||
---
|
||||
title: Encryption Example
|
||||
published: 2020-02-02
|
||||
description: 'Password: 123456'
|
||||
encrypted: true
|
||||
pinned: false
|
||||
password: "123456"
|
||||
tags: [Encryption]
|
||||
category: Examples
|
||||
---
|
||||
|
||||
|
||||
# Password Protected Post
|
||||
|
||||
This is an example of a password-protected post in the Twilight theme. The content below is encrypted using AES and can only be viewed by entering the correct password.
|
||||
|
||||
|
||||
## Frontmatter Example
|
||||
|
||||
```yaml
|
||||
---
|
||||
title: Encryption Example
|
||||
published: 2020-02-02
|
||||
encrypted: true
|
||||
password: "your-password"
|
||||
...
|
||||
---
|
||||
```
|
||||
|
||||
- `encrypted` - Whether encryption is enabled for the post.
|
||||
- `password` - The password required to unlock the content.
|
||||
|
||||
|
||||
## Note
|
||||
|
||||
:::warning
|
||||
Do not use this for extremely sensitive information like bank passwords or private keys. The encryption happens on the client side, and the password itself is stored in the post's metadata (though usually not displayed directly).
|
||||
:::
|
||||
96
src/content/posts/features.md
Normal file
96
src/content/posts/features.md
Normal file
@@ -0,0 +1,96 @@
|
||||
---
|
||||
title: Extended Features
|
||||
published: 2010-01-02
|
||||
updated: 2020-02-02
|
||||
description: 'Read more about Markdown features in Twilight'
|
||||
image: ''
|
||||
tags: [Markdown]
|
||||
category:
|
||||
draft: false
|
||||
---
|
||||
|
||||
|
||||
## GitHub Repository Cards
|
||||
|
||||
You can add dynamic cards that link to GitHub repositories, on page load, the repository information is pulled from the GitHub API.
|
||||
|
||||
::github{repo="Spr-Aachen/Twilight"}
|
||||
|
||||
Create a GitHub repository card with the code `::github{repo="Spr-Aachen/Twilight"}`.
|
||||
|
||||
```markdown
|
||||
::github{repo="Spr-Aachen/Twilight"}
|
||||
```
|
||||
|
||||
|
||||
## Admonitions
|
||||
|
||||
Following types of admonitions are supported: `note` `tip` `important` `warning` `caution`
|
||||
|
||||
:::note
|
||||
Highlights information that users should take into account, even when skimming.
|
||||
:::
|
||||
|
||||
:::tip
|
||||
Optional information to help a user be more successful.
|
||||
:::
|
||||
|
||||
:::important
|
||||
Crucial information necessary for users to succeed.
|
||||
:::
|
||||
|
||||
:::warning
|
||||
Critical content demanding immediate user attention due to potential risks.
|
||||
:::
|
||||
|
||||
:::caution
|
||||
Negative potential consequences of an action.
|
||||
:::
|
||||
|
||||
### Basic Syntax
|
||||
|
||||
```markdown
|
||||
:::note
|
||||
Highlights information that users should take into account, even when skimming.
|
||||
:::
|
||||
|
||||
:::tip
|
||||
Optional information to help a user be more successful.
|
||||
:::
|
||||
```
|
||||
|
||||
### Custom Titles
|
||||
|
||||
The title of the admonition can be customized.
|
||||
|
||||
:::note[MY CUSTOM TITLE]
|
||||
This is a note with a custom title.
|
||||
:::
|
||||
|
||||
```markdown
|
||||
:::note[MY CUSTOM TITLE]
|
||||
This is a note with a custom title.
|
||||
:::
|
||||
```
|
||||
|
||||
### GitHub Syntax
|
||||
|
||||
> [!TIP]
|
||||
> [The GitHub syntax](https://github.com/orgs/community/discussions/16925) is also supported.
|
||||
|
||||
```
|
||||
> [!NOTE]
|
||||
> The GitHub syntax is also supported.
|
||||
|
||||
> [!TIP]
|
||||
> The GitHub syntax is also supported.
|
||||
```
|
||||
|
||||
### Spoiler
|
||||
|
||||
You can add spoilers to your text. The text also supports **Markdown** syntax.
|
||||
|
||||
The content :spoiler[is hidden **ayyy**]!
|
||||
|
||||
```markdown
|
||||
The content :spoiler[is hidden **ayyy**]!
|
||||
BIN
src/content/posts/guide/cover.jpg
Normal file
BIN
src/content/posts/guide/cover.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 208 KiB |
56
src/content/posts/guide/index.md
Normal file
56
src/content/posts/guide/index.md
Normal file
@@ -0,0 +1,56 @@
|
||||
---
|
||||
title: Guide for Blog Template
|
||||
published: 2001-10-02
|
||||
description: "How to use this blog template."
|
||||
cover: "./cover.jpg"
|
||||
pinned: true
|
||||
tags: []
|
||||
category: Guides
|
||||
draft: false
|
||||
---
|
||||
|
||||
|
||||
Tip: For the things that are not mentioned in this guide, you may find the answers in the [Astro Docs](https://docs.astro.build/).
|
||||
|
||||
|
||||
## Front-matter of Posts
|
||||
|
||||
```yaml
|
||||
---
|
||||
title: My First Blog Post
|
||||
published: 2020-02-02
|
||||
description: This is the first post of my new Astro blog.
|
||||
cover: ./cover.jpg
|
||||
tags: [Foo, Bar]
|
||||
category: Front-end
|
||||
draft: false
|
||||
---
|
||||
```
|
||||
|
||||
|
||||
| Attribute | Description |
|
||||
|---------------|---------------|
|
||||
| `title` | The title of the post. |
|
||||
| `published` | The date the post was published. |
|
||||
| `pinned` | Whether this post is pinned to the top of the post list. |
|
||||
| `description` | A short description of the post. Displayed on index page. |
|
||||
| `cover` | The cover image path of the post. <br/>1. Start with `http://` or `https://`: For web image <br/>2. Start with `/`: For image in `public` dir <br/>3. With none of the prefixes: Relative to the markdown file |
|
||||
| `tags` | The tags of the post. |
|
||||
| `category` | The category of the post. |
|
||||
| `licenseName` | The license name for the post content. |
|
||||
| `author` | The author of the post. |
|
||||
| `sourceLink` | The source link or reference for the post content. |
|
||||
| `draft` | If this post is still a draft, which won't be displayed. |
|
||||
|
||||
|
||||
## Where to Place the Post Files
|
||||
|
||||
Your post files should be placed in `src/content/posts/` directory. You can also create sub-directories to better organize your posts and assets.
|
||||
|
||||
```
|
||||
src/content/posts/
|
||||
├── post-1.md
|
||||
└── post-2/
|
||||
├── cover.jpg
|
||||
└── index.md
|
||||
```
|
||||
198
src/content/posts/mermaids.md
Normal file
198
src/content/posts/mermaids.md
Normal file
@@ -0,0 +1,198 @@
|
||||
---
|
||||
title: Mermaid Example
|
||||
published: 2011-11-02
|
||||
pinned: false
|
||||
description: A simple example of a Markdown blog post with Mermaid.
|
||||
tags: [Markdown, Mermaid]
|
||||
category: Examples
|
||||
draft: false
|
||||
---
|
||||
|
||||
|
||||
# Complete Guide to Markdown with Mermaid Diagrams
|
||||
|
||||
This article demonstrates how to create various complex diagrams using Mermaid in Markdown documents, including flowcharts, sequence diagrams, Gantt charts, class diagrams, and state diagrams.
|
||||
|
||||
|
||||
## Flowchart Example
|
||||
|
||||
Flowcharts are excellent for representing processes or algorithm steps.
|
||||
|
||||
```mermaid
|
||||
graph TD
|
||||
A[Start] --> B{Condition Check}
|
||||
B -->|Yes| C[Process Step 1]
|
||||
B -->|No| D[Process Step 2]
|
||||
C --> E[Subprocess]
|
||||
D --> E
|
||||
subgraph E [Subprocess Details]
|
||||
E1[Substep 1] --> E2[Substep 2]
|
||||
E2 --> E3[Substep 3]
|
||||
end
|
||||
E --> F{Another Decision}
|
||||
F -->|Option 1| G[Result 1]
|
||||
F -->|Option 2| H[Result 2]
|
||||
F -->|Option 3| I[Result 3]
|
||||
G --> J[End]
|
||||
H --> J
|
||||
I --> J
|
||||
```
|
||||
|
||||
|
||||
## Sequence Diagram Example
|
||||
|
||||
Sequence diagrams show interactions between objects over time.
|
||||
|
||||
```mermaid
|
||||
sequenceDiagram
|
||||
participant User
|
||||
participant WebApp
|
||||
participant Server
|
||||
participant Database
|
||||
|
||||
User->>WebApp: Submit Login Request
|
||||
WebApp->>Server: Send Auth Request
|
||||
Server->>Database: Query User Credentials
|
||||
Database-->>Server: Return User Data
|
||||
Server-->>WebApp: Return Auth Result
|
||||
|
||||
alt Auth Successful
|
||||
WebApp->>User: Show Welcome Page
|
||||
WebApp->>Server: Request User Data
|
||||
Server->>Database: Get User Preferences
|
||||
Database-->>Server: Return Preferences
|
||||
Server-->>WebApp: Return User Data
|
||||
WebApp->>User: Load Personalized Interface
|
||||
else Auth Failed
|
||||
WebApp->>User: Show Error Message
|
||||
WebApp->>User: Prompt Re-entry
|
||||
end
|
||||
```
|
||||
|
||||
|
||||
## Gantt Chart Example
|
||||
|
||||
Gantt charts are perfect for displaying project schedules and timelines.
|
||||
|
||||
```mermaid
|
||||
gantt
|
||||
title Website Development Project Timeline
|
||||
dateFormat YYYY-MM-DD
|
||||
axisFormat %m/%d
|
||||
|
||||
section Design Phase
|
||||
Requirements Analysis :a1, 2023-10-01, 7d
|
||||
UI Design :a2, after a1, 10d
|
||||
Prototype Creation :a3, after a2, 5d
|
||||
|
||||
section Development Phase
|
||||
Frontend Development :b1, 2023-10-20, 15d
|
||||
Backend Development :b2, after a2, 18d
|
||||
Database Design :b3, after a1, 12d
|
||||
|
||||
section Testing Phase
|
||||
Unit Testing :c1, after b1, 8d
|
||||
Integration Testing :c2, after b2, 10d
|
||||
User Acceptance Testing :c3, after c2, 7d
|
||||
|
||||
section Deployment
|
||||
Production Deployment :d1, after c3, 3d
|
||||
Launch :milestone, after d1, 0d
|
||||
```
|
||||
|
||||
|
||||
## Class Diagram Example
|
||||
|
||||
Class diagrams show the static structure of a system, including classes, attributes, methods, and their relationships.
|
||||
|
||||
```mermaid
|
||||
classDiagram
|
||||
class User {
|
||||
+String username
|
||||
+String password
|
||||
+String email
|
||||
+Boolean active
|
||||
+login()
|
||||
+logout()
|
||||
+updateProfile()
|
||||
}
|
||||
|
||||
class Article {
|
||||
+String title
|
||||
+String content
|
||||
+Date publishDate
|
||||
+Boolean published
|
||||
+publish()
|
||||
+edit()
|
||||
+delete()
|
||||
}
|
||||
|
||||
class Comment {
|
||||
+String content
|
||||
+Date commentDate
|
||||
+addComment()
|
||||
+deleteComment()
|
||||
}
|
||||
|
||||
class Category {
|
||||
+String name
|
||||
+String description
|
||||
+addArticle()
|
||||
+removeArticle()
|
||||
}
|
||||
|
||||
User "1" -- "*" Article : writes
|
||||
User "1" -- "*" Comment : posts
|
||||
Article "1" -- "*" Comment : has
|
||||
Article "1" -- "*" Category : belongs to
|
||||
```
|
||||
|
||||
|
||||
## State Diagram Example
|
||||
|
||||
State diagrams show the sequence of states an object goes through during its life cycle.
|
||||
|
||||
```mermaid
|
||||
stateDiagram-v2
|
||||
[*] --> Draft
|
||||
|
||||
Draft --> UnderReview : submit
|
||||
UnderReview --> Draft : reject
|
||||
UnderReview --> Approved : approve
|
||||
Approved --> Published : publish
|
||||
Published --> Archived : archive
|
||||
Published --> Draft : retract
|
||||
|
||||
state Published {
|
||||
[*] --> Active
|
||||
Active --> Hidden : temporarily hide
|
||||
Hidden --> Active : restore
|
||||
Active --> [*]
|
||||
Hidden --> [*]
|
||||
}
|
||||
|
||||
Archived --> [*]
|
||||
```
|
||||
|
||||
|
||||
## Pie Chart Example
|
||||
|
||||
Pie charts are ideal for displaying proportions and percentage data.
|
||||
|
||||
```mermaid
|
||||
pie title Website Traffic Sources Analysis
|
||||
"Search Engines" : 45.6
|
||||
"Direct Access" : 30.1
|
||||
"Social Media" : 15.3
|
||||
"Referral Links" : 6.4
|
||||
"Other Sources" : 2.6
|
||||
```
|
||||
|
||||
|
||||
## Conclusion
|
||||
|
||||
Mermaid is a powerful tool for creating various types of diagrams in Markdown documents. This article demonstrated how to use flowcharts, sequence diagrams, Gantt charts, class diagrams, state diagrams, and pie charts. These diagrams can help you express complex concepts, processes, and data structures more clearly.
|
||||
|
||||
To use Mermaid, simply specify the mermaid language in a code block and describe the diagram using concise text syntax. Mermaid will automatically convert these descriptions into beautiful visual diagrams.
|
||||
|
||||
Try using Mermaid diagrams in your next technical blog post or project documentation - they will make your content more professional and easier to understand!
|
||||
34
src/content/posts/videos.md
Normal file
34
src/content/posts/videos.md
Normal file
@@ -0,0 +1,34 @@
|
||||
---
|
||||
title: Video Example
|
||||
published: 2021-12-02
|
||||
description: This post demonstrates how to embed video in a blog post.
|
||||
tags: [Markdown, Video]
|
||||
category: Examples
|
||||
draft: false
|
||||
---
|
||||
|
||||
|
||||
## Instructions
|
||||
|
||||
Just copy the embed code from YouTube or other platforms, and paste it in the markdown file as below:
|
||||
|
||||
```yaml
|
||||
---
|
||||
title: Include Video in the Post
|
||||
published: 2023-10-19
|
||||
// ...
|
||||
---
|
||||
|
||||
<iframe width="100%" height="468" src="https://www.youtube.com/embed/yrn7eInApnc?si=gGZeFbPcfMpJ1uV3_" title="YouTube video player" frameborder="0" allowfullscreen></iframe>
|
||||
```
|
||||
|
||||
|
||||
## Examples
|
||||
|
||||
### YouTube
|
||||
|
||||
<iframe width="100%" height="468" src="https://www.youtube.com/embed/yrn7eInApnc?si=gGZeFbPcfMpJ1uV3_" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
||||
|
||||
### Bilibili
|
||||
|
||||
<iframe width="100%" height="468" src="//player.bilibili.com/player.html?bvid=BV14QpMeSEuD&p=1&autoplay=0" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" &autoplay=0> </iframe>
|
||||
Reference in New Issue
Block a user