feat+content: added bonus materials section with a couple of entries

Author: debel

src/client/styles/header.css

@@ -63,4 +63,10 @@
     margin-left: 10px;
     margin-right: 10px;
   }
-}
+}
+
+@media print {
+  .header {
+    display: none !important;
+  }
+}

src/client/styles/main.css

@@ -77,10 +77,10 @@ figure figcaption p {
 /* Page styles */
 .page {
   max-width: 100%;
-  margin: 0 auto;
+  margin: 0;
 }
 
-.page h1, 
+.page h1,
 article h1 {
   font-size: 2rem;
   text-align: left;

src/components/LessonLinks.astro

@@ -2,7 +2,7 @@
 import type { Lesson } from '../types';
 
 export interface Props {
-  lesson: Lesson,
+  lesson: Pick<Lesson, 'links'>,
 }
 
 const { lesson } = Astro.props;
@@ -13,14 +13,25 @@ const linksEntries = Object.entries(lesson.links || {});
 {
   linksEntries.length > 0
     ? (
-      <h2>Useful Resources</h2>
-        <ul>
-          {linksEntries.map(([text, link]) => (
-            <li><a href={link} target="_blank">{text}</a></li>
-          ))}
-        </ul>
+      <div class="lesson-links">
+        <h2>Useful Resources</h2>
+          <ul>
+            {linksEntries.map(([text, link]) => (
+              <li><a href={link} target="_blank">{text}</a></li>
+            ))}
+          </ul>
+      </div>
       )
     : <></>
 }
 
+<style>
+
+@media print {
+  .lesson-links {
+    display: none;
+  }
+}
+
+</style>
 

src/components/LessonNavigation.astro

@@ -30,3 +30,11 @@ const {
     )}
   </div>
 </div>
+
+<style>
+  @media print {
+    .pagination {
+      display: none;
+    }
+  }
+</style>

src/components/LessonOverview.astro

@@ -2,19 +2,26 @@
 import { baseUrl, lessonMarker, type AstroLesson } from '../helpers.astro';
 
 export interface Props {
+  category?: 'lesson' | 'bonus',
   lesson: AstroLesson,
 }
 
-const { lesson } = Astro.props;
+const { category, lesson } = Astro.props;
 
-const lessonUrl = `${baseUrl}lessons/${lesson.slug}`;
+const subPath = category == 'bonus' ? 'bonus/' : 'lessons/';
+
+const lessonUrl = `${baseUrl}${subPath}${lesson.slug}`;
 const slidesUrl = `${baseUrl}slides/${lesson.slug}`
+
+const title = category == 'bonus'
+  ? lesson.data.title
+  : `${lessonMarker(lesson.data.state)} ${lesson.data.order}. ${lesson.data.title}`
 ---
 
 <article class="post on-list">
   <h2 class="post-title">
     <a href={lessonUrl}>
-      {lessonMarker(lesson.data.state)} {lesson.data.order}. {lesson.data.title}
+      {title}
     </a>
   </h2>
   <div class="post-meta">

src/content.config.ts

@@ -13,4 +13,14 @@ const lessons = defineCollection({
   }),
 });
 
-export const collections = { lessons };
+const bonus = defineCollection({
+  type: 'content',
+  schema: z.object({
+    title: z.string(),
+    description: z.string().optional(),
+    links: z.record(z.string()).optional(),
+    hasSlides: z.boolean().default(false),
+  }),
+});
+
+export const collections = { lessons, bonus };

src/content/bonus/permissions.md

@@ -0,0 +1,105 @@
+---
+title: 'File permissions'
+description: 'A short overview of file permissions'
+hasSlides: false
+links: {
+  'Permissions in-depth': 'https://www.linuxfoundation.org/blog/blog/classic-sysadmin-understanding-linux-file-permissions',
+}
+---
+
+## Access control
+
+Multi-user system require a way to control what level of access
+each user has to a specific file or directory.
+
+In Unix-like systems the access is governed through file permissions.
+
+## Viewing file permissions
+
+Use the `ls -l /path/to/file` to view the permissions
+
+```bash
+ls -alh /bin/bash
+# prints: -rwxr-xr-x 1 root root 1.2M Aug  1 22:56 /bin/bash
+```
+
+---
+
+## How are permissions structured
+
+There are 3 types of access:
+
+- Read - view the contents of a file / directory
+- Write - modify the contents of a file / directory
+- Execute - execute a file (run as command) / open a directory
+
+---
+
+In Unix-like systems permissions are applied on 3 levels:
+
+- the user owning the file
+- the group owning the file
+- anyone else
+
+---
+
+When listing permissions we see that are 3 triplets:
+
+_spaces added for clarity_
+
+```
+rwx r-x r--
+```
+
+In this example:
+
+- The user has full access
+- Members of the group can read and execute
+- Everyone else can only read
+
+---
+
+### Permissions as octal numbers
+
+Another way to represent the same information is using octal numbers:
+
+```
+rwx r-x r--
+
+# same as
+
+754
+```
+
+---
+
+This is achieved by assigning a unique, complimentary number to each permission and summing them:
+
+- Read: 4
+- Write: 2
+- Execute: 1
+
+So full access is 4+2+1 = 7
+
+---
+
+## Modifying permissions
+
+Use the `chmod` command to set the permissions for a file / directory:
+
+```bash
+# add the execute permissions for all levels to a file
+chmod +x filename
+
+# remove the execute permissions for all levels to a file
+chmod -x filename
+```
+
+---
+
+Use the octal representation to set the full permissions of a file / directory:
+
+```bash
+# only the owning user has full access to the file
+chmod 700 filename
+```

src/content/bonus/regex.md

@@ -0,0 +1,89 @@
+---
+title: 'Regular expressions'
+description: 'A very short primar on regular expressions'
+hasSlides: false
+links: {
+  'Regex cheatsheet': 'https://www.rexegg.com/regex-quickstart.php',
+}
+---
+
+## Regular expressions
+
+Regular expressions are a powerful way to express search patterns.
+
+Many languages provide a way to use them in your programs.
+
+Internally, regular expressions are represented as **finite state machines**.
+
+### How do regular expressions work
+
+1. The interpreter / compiler parses the regular expression
+2. It builds the finite state machine that will make it efficient to execute the regex
+3. Applying the regex to an input, executes the FSM and produces matches
+
+---
+
+## Regex syntax basics
+
+Characters:
+
+```bash
+. # represents any character
+\s # represents a whites-pace character
+\d # represents a digit
+\n # represents a new line
+\. # represents a literal . character
+```
+
+---
+
+Qualifiers:
+
+```
+* # represents 0 or more repetitions
+.* # 0 or more of any character
+a* # 0 or more 'a' characters
+
++ # represents 1 or more repetitions
+.+ # one or more of any character
+
+? # represents 0 or 1 repetitions
+b? # 0 or 1 b characters
+```
+
+---
+
+Groupings:
+
+```bash
+[abcxyz] # any of the given characters
+[a-z] # any character in the given range
+[^xyz] # any character other than the given
+```
+
+---
+
+Boundaries:
+
+```bash
+^ # represents the start of a line
+$ # represents the end of a line
+```
+
+---
+
+## Putting it all together
+
+The following regular expression selects all lines that:
+
+- start with either a, b or c
+- have any number of any characters
+- do NOT end with a digit
+
+```bash
+
+cat my-long-file | grep -e '^[abc].*[^\d]$'
+
+```
+
+</bonus-content>

src/content/lessons/working-with-the-file-system.md

@@ -69,6 +69,12 @@ cd ../ # still in /
 cd ../../../../ # still in /
 ```
 
+<bonus-content>
+
+> The file system is represented as tree structure of files and directories with the root directory at the top of the tree.
+
+</bonus-content>
+
 ---
 
 We can use a relative path to ensure we are using a local file:
@@ -137,6 +143,8 @@ ls -alh /bin/bash
 # prints: -rwxr-xr-x 1 root root 1.2M Aug  1 22:56 /bin/bash
 ```
 
+See [Bonus: File permissions](/bonus/permissions) for more details
+
 ---
 
 ## Path expansions
@@ -210,6 +218,32 @@ grep -e '^a.*z$' *
 
 ---
 
+### Note on confusing syntax
+
+Note that the syntax for both **path expansions** and **regular expressions** looks similar.
+
+However they are very different and used in different contexts.
+
+---
+
+- Path expressions are performed directly by Bash
+
+- Path expressions are resolved before command execution
+
+- The resulting files are passed as parameters to the command
+
+---
+
+- Regexs are interpreted by the program / command
+
+- Regexs are executed after path expansions
+
+- Regexs are more powerful and applicable in more environments
+
+See [Bonus: Regular Expressions](/bonus/regex) for more details
+
+---
+
 ## Manipulating the file system
 
 There are many commands that allow us to create, move, copy or delete files and directories
@@ -247,6 +281,12 @@ rm filename
 rm -rf useless-dir/
 ```
 
+<class-note>
+
+Be careful, using this form of the `rm` can destroy your files!
+
+</class-note>
+
 ---
 
 ## Redirections

src/helpers.astro

@@ -9,6 +9,10 @@ export async function getLessons() {
     .sort((a, b) => a.data.order - b.data.order);
 }
 
+export async function getBonusMaterials() {
+  return (await getCollection('bonus'));
+}
+
 export const baseUrl = import.meta.env.BASE_URL.endsWith('/') ? import.meta.env.BASE_URL : import.meta.env.BASE_URL + '/';
 
 export function lessonMarker(state: keyof LessonState) {