|
1 | | -# Astro Terminal Theme |
| 1 | +# Intro to Git |
2 | 2 |
|
3 | | -I love both Astro and the Terminal theme by panr, so I decided to port this theme to Astro. This is an adaptation of the [Hugo Terminal Theme](https://github.com/panr/hugo-theme-terminal) created by [panr](https://github.com/panr). All design credit goes to the original author. |
4 | | - |
5 | | - |
6 | | - |
7 | | -- [Demo site](https://dennisklappe.github.io/astro-theme-terminal/) |
8 | | -- [Terminal.css - Create your own colour scheme](https://panr.github.io/terminal-css/) |
9 | | - |
10 | | -## Features |
11 | | - |
12 | | -- **Customisable colour schemes** — works with panr's [Terminal.css colour scheme generator](https://panr.github.io/terminal-css/) or choose from the default schemes available there |
13 | | -- **[Fira Code](https://github.com/tonsky/FiraCode)** as default monospaced font — easily changeable |
14 | | -- **nice syntax highlighting** — thanks to Astro's built-in Shiki support |
15 | | -- **fully responsive** — works great on mobile and desktop |
16 | | -- **tag support** — organise posts with tags and browse by tag |
17 | | -- **RSS feed** — automatically generated RSS feed for your blog |
18 | | - |
19 | | -## Requirements |
20 | | - |
21 | | -- Astro v5.0.0 or higher |
22 | | -- Node.js 18 or higher |
23 | | - |
24 | | -## Installation |
25 | | - |
26 | | -### Clone repository |
27 | | - |
28 | | -```bash |
29 | | -git clone https://github.com/dennisklappe/astro-theme-terminal.git your-site-name |
30 | | -cd your-site-name |
31 | | -npm install |
32 | | -``` |
33 | | - |
34 | | -### Use as a template |
35 | | - |
36 | | -You can also use this repository as a template on GitHub: |
37 | | - |
38 | | -1. Click the "Use this template" button on the GitHub repository |
39 | | -2. Create a new repository from the template |
40 | | -3. Clone your new repository and install dependencies |
41 | | - |
42 | | -## How to start |
43 | | - |
44 | | -```bash |
45 | | -npm run dev |
46 | | -``` |
47 | | - |
48 | | -## How to build |
49 | | - |
50 | | -```bash |
51 | | -npm run build |
52 | | -``` |
53 | | - |
54 | | -## Configuration |
55 | | - |
56 | | -### Site Configuration |
57 | | - |
58 | | -Edit `astro.config.mjs`: |
59 | | - |
60 | | -```js |
61 | | -import { defineConfig } from 'astro/config'; |
62 | | - |
63 | | -export default defineConfig({ |
64 | | - site: 'https://your-domain.com', |
65 | | - markdown: { |
66 | | - shikiConfig: { |
67 | | - theme: 'css-variables', |
68 | | - langs: [], |
69 | | - wrap: true, |
70 | | - }, |
71 | | - }, |
72 | | -}); |
73 | | -``` |
74 | | - |
75 | | -### Theme Configuration |
76 | | - |
77 | | -The theme uses CSS custom properties for theming. To change colours, modify the variables in `src/styles/terminal.css`: |
78 | | - |
79 | | -```css |
80 | | -:root { |
81 | | - --background: #1e2022; |
82 | | - --foreground: #d6deeb; |
83 | | - --accent: #ffa86a; |
84 | | - --secondary: #8be9fd; |
85 | | - --selection: #4c5f7a; |
86 | | - --code-border: #4c5f7a; |
87 | | - --comment: #637777; |
88 | | -} |
89 | | -``` |
90 | | - |
91 | | -You can also use panr's [Terminal.css generator](https://panr.github.io/terminal-css/) to create your own colour scheme - this Astro port is fully compatible with the generated colour schemes. |
92 | | - |
93 | | -### Navigation Menu |
94 | | - |
95 | | -Edit the navigation in `src/layouts/BaseLayout.astro`. The theme includes a dropdown menu for additional pages: |
96 | | - |
97 | | -```astro |
98 | | -<!-- Main navigation items --> |
99 | | -<li><a href="/about">About</a></li> |
100 | | -<li><a href="/posts/showcase">Showcase</a></li> |
101 | | -
|
102 | | -<!-- Dropdown menu --> |
103 | | -<ul class="menu__dropdown"> |
104 | | - <li><a href="/posts">Posts</a></li> |
105 | | - <li><a href="/tags">Tags</a></li> |
106 | | - <li><a href="/posts/rich-content">Rich Content</a></li> |
107 | | -</ul> |
108 | | -``` |
109 | | - |
110 | | -## Content |
111 | | - |
112 | | -### Posts |
113 | | - |
114 | | -Create posts in `src/content/posts/`: |
115 | | - |
116 | | -```md |
117 | | ---- |
118 | | -title: 'My First Post' |
119 | | -description: 'This is my first blog post' |
120 | | -pubDate: 2024-01-01 |
121 | | -author: 'Your Name' |
122 | | -tags: ['astro', 'terminal'] |
123 | | ---- |
124 | | - |
125 | | -Your content here... |
126 | | -``` |
127 | | - |
128 | | -### Pages |
129 | | - |
130 | | -Create pages in `src/pages/`: |
131 | | - |
132 | | -```astro |
133 | | ---- |
134 | | -import BaseLayout from '../layouts/BaseLayout.astro'; |
135 | | ---- |
136 | | -
|
137 | | -<BaseLayout title="About"> |
138 | | - <div class="page"> |
139 | | - <h1>About</h1> |
140 | | - <p>Your content here...</p> |
141 | | - </div> |
142 | | -</BaseLayout> |
143 | | -``` |
144 | | - |
145 | | -## Syntax Highlighting |
146 | | - |
147 | | -The theme uses Astro's built-in Shiki syntax highlighter with a custom monochrome theme that matches the terminal aesthetic. Code blocks automatically get syntax highlighting: |
148 | | - |
149 | | -```js |
150 | | -// JavaScript example |
151 | | -function hello() { |
152 | | - console.log("Hello, World!"); |
153 | | -} |
154 | | -``` |
155 | | - |
156 | | -## Layouts |
157 | | - |
158 | | -### BaseLayout |
159 | | - |
160 | | -The main layout that includes header, footer, and all necessary CSS imports. |
161 | | - |
162 | | -### PostLayout |
163 | | - |
164 | | -Layout specifically for posts, includes metadata display and post navigation. |
165 | | - |
166 | | -## Components |
167 | | - |
168 | | -- **Header** - Site header with terminal decoration |
169 | | -- **Footer** - Site footer with copyright |
170 | | -- **PostCard** - Post preview card |
171 | | -- **Pagination** - Page navigation component |
172 | | -- **FormattedDate** - Date formatting component |
173 | | - |
174 | | -## Features |
175 | | - |
176 | | -### Tags |
177 | | - |
178 | | -Posts can be organised with tags. Each tag gets its own page at `/tags/[tag-name]` showing all posts with that tag. A tag index page at `/tags` displays all available tags. |
179 | | - |
180 | | - |
181 | | -## Customization |
182 | | - |
183 | | -### Fonts |
184 | | - |
185 | | -To change the monospace font, update the font import in `src/styles/fonts.css` and the font-family in `src/styles/terminal.css`. |
186 | | - |
187 | | -### Colours |
188 | | - |
189 | | -Create your own colour scheme or choose from the default schemes using panr's [Terminal.css generator](https://panr.github.io/terminal-css/). |
190 | | - |
191 | | -### CSS Structure |
192 | | - |
193 | | -The theme uses modular CSS files: |
194 | | -- `terminal.css` - Core theme styles and variables |
195 | | -- `fonts.css` - Font imports and utilities |
196 | | -- `main.css` - Layout and utility classes |
197 | | -- `header.css` - Header styles |
198 | | -- `menu.css` - Navigation menu |
199 | | -- `footer.css` - Footer styles |
200 | | -- `post.css` - Post styles |
201 | | -- `buttons.css` - Button components |
202 | | -- `code.css` - Code block functionality |
203 | | -- `syntax.css` - Syntax highlighting theme |
204 | | -- `pagination.css` - Pagination styles |
205 | | -- `gist.css` - GitHub Gist embed styles |
206 | | -- `terms.css` - Terms and conditions styles |
207 | | - |
208 | | -## Deployment |
209 | | - |
210 | | -### GitHub Pages |
211 | | - |
212 | | -This theme includes a GitHub Actions workflow for automatic deployment to GitHub Pages: |
213 | | - |
214 | | -1. Go to your repository Settings → Pages |
215 | | -2. Set Source to "GitHub Actions" |
216 | | -3. Push to the `main` branch or manually trigger the workflow |
217 | | -4. Your site will be available at `https://[username].github.io/astro-theme-terminal` |
218 | | - |
219 | | -To deploy to a custom domain or different base path, update the `site` and `base` options in `astro.config.mjs`. |
220 | | - |
221 | | -**Note**: The base path is only applied in production builds. During development, the site runs at the root path (`/`) for easier testing. |
222 | | - |
223 | | -## Contributing |
224 | | - |
225 | | -If you find any bugs or have ideas for improvements, please open an issue or submit a pull request. |
| 3 | +A short course about learning to use bash and git as a software developer. |
226 | 4 |
|
227 | 5 | ## Credits |
228 | 6 |
|
229 | | -This theme is a port of the [Hugo Terminal Theme](https://github.com/panr/hugo-theme-terminal) created by [panr](https://github.com/panr). All design decisions, colour schemes, and visual aesthetics are credited to the original author. |
230 | | - |
231 | | -Astro port created by [Dennis Klappe](https://github.com/dennisklappe). |
232 | | - |
233 | | -## License |
234 | | - |
235 | | -The original Hugo Terminal Theme is licensed under the MIT License. This Astro port maintains the same licence. |
236 | | - |
237 | | -Copyright for the original design: panr |
| 7 | +All content compiled and prepared by [Mihail Mikov](https://github.com/debel) with linked attributions within the text. |
238 | 8 |
|
239 | | ---- |
| 9 | +The theme is a port of the [Hugo Terminal Theme](https://github.com/panr/hugo-theme-terminal) created by [panr](https://github.com/panr). All design decisions, colour schemes, and visual aesthetics are credited to the original author. Astro port created by [Dennis Klappe](https://github.com/dennisklappe). |
240 | 10 |
|
241 | | -Made with love for the Astro community |
0 commit comments