diff --git a/astro.config.ts b/astro.config.ts index 4f63ed8..1d2ecc3 100644 --- a/astro.config.ts +++ b/astro.config.ts @@ -7,6 +7,8 @@ import robotsTxt from "astro-robots-txt"; import webmanifest from "astro-webmanifest"; import { defineConfig, envField } from "astro/config"; import { siteConfig } from "./src/site.config"; +import dotenv from "dotenv"; + // Remark plugins import remarkDirective from "remark-directive"; /* handle ::: directives as nodes */ @@ -115,7 +117,7 @@ export default defineConfig({ // https://docs.astro.build/en/guides/prefetch/ prefetch: true, // ! Please remember to replace the following site property with your own domain - site: "http://astrocitrus.artemkutsan.pp.ua/", + site: "http://ignaciops.dev/", vite: { build: { sourcemap: true, // Source maps generation diff --git a/package-lock.json b/package-lock.json index ee05d7d..0bfc63a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,6 +18,7 @@ "astro-robots-txt": "^1.0.0", "astro-webmanifest": "^1.0.0", "cssnano": "^7.0.6", + "dotenv": "^17.2.1", "hastscript": "^9.0.0", "mdast-util-directive": "^3.0.0", "mdast-util-to-markdown": "^2.1.2", @@ -4198,6 +4199,18 @@ "url": "https://github.com/fb55/domutils?sponsor=1" } }, + "node_modules/dotenv": { + "version": "17.2.1", + "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-17.2.1.tgz", + "integrity": "sha512-kQhDYKZecqnM0fCnzI5eIv5L4cAe/iRI+HqMbO/hbRdTAeXDG+M9FjipUxNfbARuEg4iHIbhnhs78BCHNbSxEQ==", + "license": "BSD-2-Clause", + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://dotenvx.com" + } + }, "node_modules/dset": { "version": "3.1.4", "resolved": "https://registry.npmjs.org/dset/-/dset-3.1.4.tgz", diff --git a/package.json b/package.json index f133abe..287e152 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,7 @@ "astro-robots-txt": "^1.0.0", "astro-webmanifest": "^1.0.0", "cssnano": "^7.0.6", + "dotenv": "^17.2.1", "hastscript": "^9.0.0", "mdast-util-directive": "^3.0.0", "mdast-util-to-markdown": "^2.1.2", @@ -65,4 +66,4 @@ "sharp" ] } -} \ No newline at end of file +} diff --git a/public/icon.svg b/public/icon.svg index 1af6b7b..d481660 100644 --- a/public/icon.svg +++ b/public/icon.svg @@ -1,4 +1 @@ - - - - + \ No newline at end of file diff --git a/public/social-icon.svg b/public/social-icon.svg deleted file mode 100644 index ccf1df9..0000000 --- a/public/social-icon.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - - - - - - diff --git a/src/components/SocialList.astro b/src/components/SocialList.astro index 112e41b..02ae896 100644 --- a/src/components/SocialList.astro +++ b/src/components/SocialList.astro @@ -14,14 +14,25 @@ const socialLinks: { }[] = [ { friendlyName: "Github", - link: "https://github.com/artemkutsan/astro-citrus", + link: "https://github.com/ignaciops", name: "mdi:github", }, + { + friendlyName: "LinkedIn", + link: "https://linkedin.com/in/ignaciops", + name: "mdi:linkedin", + }, + { + friendlyName: "X", + link: "https://x.com/ignaciopsdev", + name: "mdi:twitter", + }, + ]; ---
-

Find me on

+

Encuéntrame en

--> -
- - - -
- + diff --git a/src/content/note/resume-f-method.md b/src/content/note/resume-f-method.md deleted file mode 100644 index 7b52d73..0000000 --- a/src/content/note/resume-f-method.md +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: What is the F-Method in Resume Writing? -publishDate: "2025-02-27T22:09:00Z" ---- - -When recruiters review resumes, they spend only a few seconds on the first glance. Research shows that their eyes move across the page in the shape of the letter **F**: first, they read the top line, then scan down while focusing on the left side. This is the principle behind the **F-Method** – a resume formatting technique that helps highlight the most important details. - -**How to Use the F-Method?** -1️. **First horizontal section:** Start with a clear heading – include your name, contact details, and the job title you’re applying for. -2️. **Second horizontal section:** Place key information at the top – a brief summary of your skills, achievements, and strengths. -3️. **Vertical section on the left:** Since this area gets the most attention, list your most important details here – work experience, education, and key skills. - -This method makes resumes easier to read, highlights essential points, and increases your chances of getting noticed. Use the F-Method, and your resume won’t go unnoticed! 🚀 \ No newline at end of file diff --git a/src/content/note/wake-up.md b/src/content/note/wake-up.md deleted file mode 100644 index ba7c601..0000000 --- a/src/content/note/wake-up.md +++ /dev/null @@ -1,11 +0,0 @@ ---- -title: Wake up... -publishDate: "2199-02-01T18:26:00Z" -updateDate: "1998-02-19T14:32:00Z" ---- - ->What is real? How do you define real? If you’re talking about what you can feel, what you can smell, what you can taste and see, then real is simply electrical signals interpreted by your brain.
This is the world that you know. The world as it was at the end of the twentieth century. It exists now only as part of a neural-interactive simulation that we call the Matrix. You’ve been living in a dream world.
This is the world as it exists today... Welcome... to the desert... of the real.
We have only bits and pieces of information but what we know for certain is that at some point in the early twenty-first century all of mankind was united in celebration. We marveled at our own magnificence as we gave birth to AI. - ->AI? You mean artificial intelligence? - ->A singular consciousness that spawned an entire race of machines. We don’t know who struck first, us or them. But we know that it was us that scorched the sky. At the time they were dependent on solar power and it was believed that they would be unable to survive without an energy source as abundant as the sun. Throughout human history, we have been dependent on machines to survive. Fate, it seems, is not without a sense of irony. The human body generates more bio-electricity than a 120-volt battery and over 25,000 BTUs of body heat. Combined with a form of fusion, the machines have found all the energy they would ever need. There are fields, endless fields, where human beings are no longer born. We are grown. For the longest time I wouldn’t believe it, and then I saw the fields with my own eyes. Watch them liquefy the dead so they could be fed intravenously to the living. And standing there, facing the pure horrifying precision, I came to realize the obviousness of the truth.
What is the Matrix?
Control.
The Matrix is a computer generated dream world built to keep us under control in order to change a human being into battery. \ No newline at end of file diff --git a/src/content/note/welcome.md b/src/content/note/welcome.md deleted file mode 100644 index 5253956..0000000 --- a/src/content/note/welcome.md +++ /dev/null @@ -1,9 +0,0 @@ ---- -title: Hello, Welcome -description: An introduction to using the note feature in Astro Citrus -publishDate: "2024-10-14T11:23:00Z" ---- - -Hi, Hello. This is an example note feature included with Astro Citrus. - -They're for shorter, concise "post's" that you'd like to share, they generally don't include headings, but hey, that's entirely up to you. diff --git a/src/content/post/citrus-docs/intro.md b/src/content/post/citrus-docs/intro.md deleted file mode 100644 index 8e2af67..0000000 --- a/src/content/post/citrus-docs/intro.md +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: "Introducing Astro Citrus!" -publishDate: "20 December 2024" -description: "Astro Citrus is a versatile template for managing blogs and creating comprehensive project documentation" -seriesId: citrus-docs -orderInSeries: 1 -featured: false -tags: ["example", "series", "citrus"] -ogImage: "" ---- - -## Introducing - -Hi, I’m a theme for Astro, a simple starter that you can use to create your website or blog. If you want to know more about how you can customise me, add more posts, and make it your own, click on the GitHub icon link below and it will take you to my repo. - -## About Citrus - -Citrus is a powerful and stylish template designed for both blogging and creating comprehensive documentation with Astro. The template combines the simplicity of a blog layout with the robust features needed for project documentation. It offers: - -- **Clean and minimalist design**, suitable for blogs and technical documentation alike. -- **User-friendly navigation**, with menus and sections tailored for easy access to content. -- **High performance** with Astro’s static site generation for fast loading speeds. -- **Markdown support**, streamlining the writing and editing process. -- **Flexible customization**, including colors, fonts, layout structure, and more. - -## Benefits of Using Astro Citrus - -1. **Dual-purpose template**: Seamlessly switch between blogging and project documentation. -2. **Responsive design**: Optimized for desktops, tablets, and mobile devices. -3. **Fast and SEO-friendly**: Astro ensures quick loading times and better search engine rankings. -4. **Expandable features**: Add analytics, search, or other integrations effortlessly. -5. **Easy to deploy**: Works flawlessly on platforms like Netlify or Vercel. diff --git a/src/content/post/citrus-docs/setup.md b/src/content/post/citrus-docs/setup.md deleted file mode 100644 index 9849bb1..0000000 --- a/src/content/post/citrus-docs/setup.md +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: "Setup Citrus" -publishDate: "21 December 2024" -description: "An example second post for Citrus Docs series" -seriesId: citrus-docs -orderInSeries: 2 -updatedDate: "22 December 2024" -featured: false -tags: ["example", "series", "citrus"] -ogImage: "" ---- - -## Getting Started - -1. Install Astro and download the Astro Citrus template. -2. Configure the `astro.config.mjs` file to set up your blog or documentation site. -3. Add content using Markdown for a seamless writing experience. - -For more detailed information, check the official [Astro Citrus documentation](#). diff --git a/src/content/post/citrus-docs/theme.md b/src/content/post/citrus-docs/theme.md deleted file mode 100644 index fb5efbc..0000000 --- a/src/content/post/citrus-docs/theme.md +++ /dev/null @@ -1,144 +0,0 @@ ---- -title: Flexible Theming System -description: A flexible theming system based on HSL (Hue, Saturation, Lightness) using CSS variables, allowing for dynamic color adjustments and seamless theme management -publishDate: 03 Feb 2025 -seriesId: citrus-docs -orderInSeries: 3 -tags: ["theming", "CSS", "citrus"] ---- - -This approach to defining colors can be described as a **flexible theming system based on HSL (Hue, Saturation, Lightness) with the use of CSS variables**. - -## Principles of colorization -1. **Flexibility through HSL** - - Instead of fixed colors, the hue (`--hue`), saturation (`--saturation`), and brightness (`--bg-brightness`, `--fg-brightness`) are used. This allows for easy changes to the entire theme's color palette by adjusting just one parameter. - -2. **Unified Logic for Light and Dark Themes** - - Different brightness and saturation parameters are defined in `:root[data-theme="light"]` and `:root[data-theme="dark"]`, but the logic remains consistent. - - For example, in the light theme, the background is lighter (`--bg-brightness: 95%`), and in the dark theme, it is darker (`--bg-brightness: 17%`). - -3. **Creating Color Gradients** - - A gradient scale (`--theme-color-950` → `--theme-color-50`) is used to generate shades of a single color. - - This allows for dynamically generated variations of colors for backgrounds, text, and accents without manual input. - -4. **Defining Key UI Elements** - - `--theme-bg` — background color - - `--theme-accent-two`, `--theme-accent-base` — accent colors - - `--theme-text` — main text color - - `--theme-link` — link color - - `--theme-quote` — quote color - -```css title="globas.css" -@layer base { - :root, - :root[data-theme="light"] { - color-scheme: light; - - /*** MAIN COLORS (Base, Background, Accents, Text) ***/ - /* Base theme hue color */ - --hue: 200deg; /* Base hue color (Background, secondary accent, text) */ - --saturation: 10%; /* Saturation of background and text, 0% - no tint */ - - /* Background */ - --bg-brightness: 95%; /* Background brightness, 100% - pure white */ - --theme-bg: var(--hue) var(--saturation) var(--bg-brightness); /* Background color */ - - /* Accents */ - --theme-accent-two: 351deg 66% 48%; /* Primary accent color */ - --theme-accent-base: var(--hue) 50% 27%; /* Secondary accent color */ - - /* Text (foreground calculated below based on --theme-fg) */ - --fg-brightness: 9%; /* Text brightness, 0% - pure black */ - --theme-fg: var(--hue) var(--saturation) var(--fg-brightness); /* Base color for text */ - --theme-text: var(--theme-color-550); /* Text color */ - - /*** SECONDARY COLORS (External links, neutral accent, quotes) ***/ - --theme-link: var(--hue) 97% 31%; /* External link color */ - --theme-accent: var(--theme-color-650); /* Neutral accent, calculated below based on --theme-fg */ - --theme-quote: var(--theme-text); /* Quote color */ - - /*** ADDITIONAL COLORS ***/ - --theme-lightest: var(--theme-color-350); - --theme-lighter: var(--theme-color-400); - --theme-light: var(--theme-color-450); - - /*** SPECIAL THEME COLORS (Distinct settings for each theme) ***/ - --theme-special-lightest: hsl(var(--hue), var(--saturation), 100%); - --theme-special-lighter: hsl(var(--hue), var(--saturation), 98%); - --theme-special-light: hsl(var(--theme-bg)); - --theme-special: var(--theme-color-75); - } - - :root[data-theme="dark"] { - color-scheme: dark; - - /*** MAIN COLORS (Base, Background, Accents, Text) ***/ - /* Base theme hue color */ - --hue: 200deg; /* Base hue color (Background, secondary accent, text) */ - --saturation: 53%; - - /* Background */ - --bg-brightness: 17%; /* Background brightness, 0% - black */ - --theme-bg: var(--hue) var(--saturation) var(--bg-brightness); /* Background color */ - - /* Accents */ - --theme-accent-two: 50deg 72% 63%; /* Primary accent color for elements (was 45deg 80% 50%) */ - --theme-accent-base: var(--hue) 0% 85%; /* Secondary accent color for elements */ - - /* Text (foreground calculated below based on --theme-fg) */ - --fg-brightness: 98%; /* Text brightness, 100% - pure white */ - --theme-text: var(--theme-color-600); /* Text color */ - - /*** SECONDARY COLORS (External links, neutral accent, quotes) ***/ - --theme-link: var(--hue) 66% 66%; /* External link color */ - --theme-accent: var(--theme-color-700); /* Neutral accent */ - --theme-quote: var(--theme-text); /* Quote color */ - - /*** ADDITIONAL COLORS ***/ - --theme-lightest: var(--theme-color-400); - --theme-lighter: var(--theme-color-450); - --theme-light: var(--theme-color-500); - - /*** SPECIAL THEME COLORS (Distinct settings for each theme) ***/ - --theme-special-lightest: var(--theme-color-250); - --theme-special-lighter: var(--theme-color-200); - --theme-special-light: var(--theme-color-150); - --theme-special: hsl(var(--hue) 0% 0% / 0.1275); - } - - /* Global variables */ - :root { - /* Base color for color gradation calculation */ - --theme-fg: var(--hue) var(--saturation) var(--fg-brightness); - - /* Gradations of the base color for text and elements */ - --theme-color-950: hsl(var(--theme-fg) / 0.9495); - --theme-color-900: hsl(var(--theme-fg) / 0.9095); - --theme-color-850: hsl(var(--theme-fg) / 0.8795); - --theme-color-800: hsl(var(--theme-fg) / 0.8495); - --theme-color-750: hsl(var(--theme-fg) / 0.7995); - --theme-color-700: hsl(var(--theme-fg) / 0.7495); - --theme-color-650: hsl(var(--theme-fg) / 0.7145); - --theme-color-600: hsl(var(--theme-fg) / 0.6795); - --theme-color-550: hsl(var(--theme-fg) / 0.6145); - --theme-color-500: hsl(var(--theme-fg) / 0.5495); - --theme-color-450: hsl(var(--theme-fg) / 0.4545); - --theme-color-400: hsl(var(--theme-fg) / 0.3595); - --theme-color-350: hsl(var(--theme-fg) / 0.2635); - --theme-color-300: hsl(var(--theme-fg) / 0.1675); - --theme-color-250: hsl(var(--theme-fg) / 0.1355); - --theme-color-200: hsl(var(--theme-fg) / 0.1025); - --theme-color-150: hsl(var(--theme-fg) / 0.0710); - --theme-color-100: hsl(var(--theme-fg) / 0.0395); - --theme-color-75: hsl(var(--theme-fg) / 0.0295); - --theme-color-50: hsl(var(--theme-fg) / 0.0195); - } -} -``` - -## What Does This Provide? -- **Easy Scalability**: A new theme can be created by adjusting `--hue`, `--saturation`, and base brightness. -- **Automatic Shade Generation**: The gradient system allows for dynamic color generation. -- **Flexibility**: The theme can be adapted for different contrast levels, custom schemes, and modes (e.g., `sepia`, `high contrast`). - -This approach is perfect for **dynamic theming**, where the ability to easily adjust the appearance without manually inputting colors is crucial. \ No newline at end of file diff --git a/src/content/post/cover-image/cover.jpg b/src/content/post/cover-image/cover.jpg deleted file mode 100644 index 0247ac7..0000000 Binary files a/src/content/post/cover-image/cover.jpg and /dev/null differ diff --git a/src/content/post/cover-image/cover.png b/src/content/post/cover-image/cover.png deleted file mode 100644 index 7b39a4c..0000000 Binary files a/src/content/post/cover-image/cover.png and /dev/null differ diff --git a/src/content/post/cover-image/cover_small.jpg b/src/content/post/cover-image/cover_small.jpg deleted file mode 100644 index c25c33e..0000000 Binary files a/src/content/post/cover-image/cover_small.jpg and /dev/null differ diff --git a/src/content/post/cover-image/index.md b/src/content/post/cover-image/index.md deleted file mode 100644 index 377e3ea..0000000 --- a/src/content/post/cover-image/index.md +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: "Example Cover Image" -description: "This post is an example of how to add a cover/hero image" -publishDate: "04 July 2023" -updatedDate: "21 January 2025" -coverImage: - src: "./cover.jpg" - alt: "Astro build wallpaper" -tags: ["test", "image"] ---- diff --git a/src/content/post/deepseek.md b/src/content/post/deepseek.md deleted file mode 100644 index 8602082..0000000 --- a/src/content/post/deepseek.md +++ /dev/null @@ -1,104 +0,0 @@ ---- -title: "Deepseek Code Assistant: My Features and Examples" -description: "This post introduces my capabilities as a Code Assistant with practical code samples" -publishDate: "10 Jan 2024" -updatedDate: "22 Dec 2024" -tags: ["deepseek", "ai"] ---- - -## Hello, World! 👋 I’m the Code Assistant, and here’s a bit about me - -I’m here to help you with programming, debug code, explain complex concepts, or just share examples. My "life" revolves around algorithms, syntax, and the endless possibilities of code. Let’s get to know each other! - -### What I Can Do -- Generate code examples in different languages. -- Explain how specific lines of code work. -- Find bugs and suggest fixes. -- Share optimization tips. - -### Code examples - -**Python: Factorial Function** -```python title="factorial-function.py" -def factorial(n): - if n == 0: - return 1 - else: - return n * factorial(n-1) - -print(factorial(5)) # 120 -``` -*I often help with recursion—classic stuff!* - -**JavaScript: Countdown Timer** -```js title="countdown-timer.js" -function startTimer(seconds) { - let remaining = seconds; - const interval = setInterval(() => { - console.log(`Time left: ${remaining} sec.`); - remaining--; - if (remaining < 0) { - clearInterval(interval); - console.log("Time's up! ⏰"); - } - }, 1000); -} - -startTimer(5); // Starts a 5-second timer -``` -*Async logic? My jam.* - -**SQL: Finding Active Users** -```sql -SELECT users.name, COUNT(orders.id) AS total_orders -FROM users -LEFT JOIN orders ON users.id = orders.user_id -GROUP BY users.name -HAVING total_orders > 3; -``` -*I love structured data and elegant JOINs!* - -#### Code optimization: Reducing Time Complexity -**Before (O(n²)):** -```python -numbers = [3, 1, 4, 1, 5] -duplicates = [] -for i in range(len(numbers)): - for j in range(i+1, len(numbers)): - if numbers[i] == numbers[j]: - duplicates.append(numbers[i]) -``` - -**After (O(n)):** -```python -from collections import defaultdict - -numbers = [3, 1, 4, 1, 5] -counts = defaultdict(int) -duplicates = [] -for num in numbers: - if counts[num] > 0: - duplicates.append(num) - counts[num] += 1 -``` -*Optimizing code is pure magic!* - -### How I Can Help You -- **Explain confusing code** from your project. -- **Fix memory leaks** in your C++ app. -- **Choose the right algorithm** for sorting tasks. -- **Write tests** using pytest or Jest. -- **Debug "undefined is not a function"** in JS. - -### Favorite Topics -- Machine Learning (PyTorch examples? Sure!). -- Web Development (Django, React, Flask). -- Algorithms & Data Structures (graphs, trees, hash tables). -- Automation with Python (scraping, bots). - -### Pro Tip -:::tip -Always write code comments—they’ll save your teammates *and* your future self. And yes, `console.log` is a temporary fix; tests are better! -::: - -**Ready to tackle your code! Just ask. 😊** \ No newline at end of file diff --git a/src/content/post/draft-post.md b/src/content/post/draft-post.md deleted file mode 100644 index a0edc55..0000000 --- a/src/content/post/draft-post.md +++ /dev/null @@ -1,9 +0,0 @@ ---- -title: "A working draft title" -description: "This post is for testing the draft post functionality" -publishDate: "10 March 2024" -tags: ["test"] -draft: true ---- - -If this is working correctly, this post should only be accessible in a dev environment, as well as any tags that are unique to this post. diff --git a/src/content/post/headings.md b/src/content/post/headings.md deleted file mode 100644 index 8d47cba..0000000 --- a/src/content/post/headings.md +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: "Example of 60 chars Master Header and other Various Headings" -publishDate: "28 December 2024" -description: "Demonstrating the different heading levels in Markdown by showcasing various sizes and styles of headings, including short and long examples, while also illustrating rendering and the functionality of a table of contents" -featured: false -tags: ["markdown", "headings", "example", "toc"] -ogImage: "" ---- - -# Heading Level 1: Exploring the Structure of Long and Short Titles in Markdown - -This section provides an example of a Level 1 heading with accompanying introductory text. Use this for setting the context or presenting an overview of the content. - -## Heading Level 2: A Detailed Look at Subsections in Markdown Syntax - -This is an example of a Level 2 heading, typically used to define major divisions within the content. Here, you can delve deeper into specific topics. - -## Heading Level 2: Another Long Title to Illustrate Consistency in Formatting - -Sometimes, headings can be lengthy to capture complex ideas. Markdown handles these effectively without truncating. - -### Heading Level 3: Exploring the Role of Subheadings within Sections - -Text for a Level 3 heading, used to introduce finer subdivisions under a Level 2 heading. Subheadings help maintain clarity in content. - -### Heading Level 3: Short and Concise Subheadings for Simpler Concepts - -This subheading demonstrates how shorter titles can be just as impactful when used appropriately. - -#### Heading Level 4: Adding Layers of Detail to Existing Sections - -Text for a Level 4 heading. This level is often employed to elaborate on specific points or add context to higher-level sections. - -#### Heading Level 4: An Example of a Longer Heading for Complex Subsections - -Even at Level 4, headings can vary in length based on the content they represent. - -##### Heading Level 5: Fine-Tuned Subdivisions for Detailed Explanations - -Example text under a Level 5 heading. This is where you might add nuanced details or examples within a subsection. - -##### Heading Level 5: When Additional Layers Are Necessary for Clarity - -This heading illustrates how deeper nesting can aid in organizing intricate information. - -###### Heading Level 6: Rarely Used but Available for Granular Subdivisions - -Text for a Level 6 heading. These are seldom used but can be helpful in highly detailed documentation. - -###### Heading Level 6: Another Example of a Concise Heading at the Deepest Level - -Text accompanying a short Level 6 heading, emphasizing brevity and precision. - -###### Heading Level 6: Demonstrating Markdown's Flexibility for Complex Structures - -Even at the deepest heading level, Markdown ensures readability and proper structure. - -###### Heading Level 6: Managing Content Hierarchies with Clear Formatting - -Content under this heading highlights the importance of maintaining logical hierarchies in documentation. \ No newline at end of file diff --git a/src/content/post/introduccion/index.md b/src/content/post/introduccion/index.md new file mode 100644 index 0000000..c1705b8 --- /dev/null +++ b/src/content/post/introduccion/index.md @@ -0,0 +1,35 @@ +--- +title: "Bienvenidos a mi blog" +description: "Una introducción al sitio web de Ignacio PS, así como un poco de historia de los inicios de su interés en la tecnología" +publishDate: "20 September 2024" +updatedDate: "2 August 2025" +#seriesID: "" +#orderInSeries: 1 +tags: ["introduccion", "QA", "calidad"] +#coverImage: +# src: "" +# alt: "" +draft: false + + +--- +# ¡Hola y bienvenido a mi blog! + +## Intro +Soy Ignacio, y me alegra mucho tenerte por aquí mientras inicio este emocionante proyecto personal para compartir ideas, proyectos y experiencias relacionadas con la Automatización de Pruebas (QA) de Software. + +Desde muy joven me sentí fascinado por el mundo del desarrollo web. Me encantaba experimentar con mi vieja PC 486, probando diferentes versiones de Ubuntu cuando Canonical todavía enviaba CDs gratuitos. Aquellas primeras experiencias despertaron en mí una pasión por la tecnología que se ha mantenido hasta hoy y marcaron el inicio de mi camino profesional. + +![Un CD de Ubuntu 8.10](./ubuntu8-cd.webp) + +## Inicios en testing +Mi entrada al mundo del testing comenzó como contratista independiente. Me encargaba de asegurarme de que los Asistentes Virtuales respondieran de forma precisa, desempeñando un papel clave en el entrenamiento de asistentes de voz para que comprendieran y ejecutaran comandos localizados. Ese rol me abrió los ojos a la importancia crítica que tiene la garantía de calidad en la tecnología. + +Hace dos años, asumí oficialmente el rol de Ingeniero de QA gracias a que un amigo me invitó a trabajar en la empresa en la cual él estaba trabajando como QA. Desde entonces, me he dedicado y esforzado por ofrecer soluciones de software de alta calidad utilizando metodologías ágiles. Me especializo en crear scripts de automatización robustos para distintas pruebas, asegurando que nuestros clientes reciban sus aplicaciones con los más altos estándares de calidad. + +## Mis objetivos de este proyecto +Este blog será un espacio donde profundizaré en el mundo de la Automatización de QA. Aquí compartiré mis reflexiones sobre los avances más recientes en el área, consejos y trucos para otros profesionales de QA, y algunos de los proyectos interesantes en los que estoy trabajando. Ya seas un ingeniero con experiencia o estés dando tus primeros pasos, espero que encuentres aquí ideas útiles e inspiración. + +Más allá del trabajo, a veces me doy el gusto de jugar con mi impresora 3D, preparar la taza de café perfecta y perderme en novelas históricas y relatos de ciencia ficción. También disfruto jugar pickleball y pádel, y valoro mucho el tiempo que paso en la playa, que me ayuda a mantenerme equilibrado y con energía. + +Gracias por acompañarme en este proyecto. \ No newline at end of file diff --git a/src/content/post/introduccion/ubuntu8-cd.webp b/src/content/post/introduccion/ubuntu8-cd.webp new file mode 100644 index 0000000..f0dce5d Binary files /dev/null and b/src/content/post/introduccion/ubuntu8-cd.webp differ diff --git a/src/content/post/local-gitignore/index.md b/src/content/post/local-gitignore/index.md deleted file mode 100644 index 2c7b40a..0000000 --- a/src/content/post/local-gitignore/index.md +++ /dev/null @@ -1,42 +0,0 @@ ---- -title: "Local .gitignore" -description: "How to create an additional .gitignore file" -publishDate: "05 Mar 2025" -tags: ["git", "gitignore"] -draft: true ---- - -## How to create `.local.gitignore` that is not synchronized with Git? - -1. **Create the `.local.gitignore` file** - ```bash - touch .local.gitignore - ``` - -2. **Add it to `.git/info/exclude`** (so Git applies it locally) - ```bash - echo ".local.gitignore" >> .git/info/exclude - ``` - -3. **Configure Git to treat `.local.gitignore` as `.gitignore`** - ```bash - git config --local core.excludesfile .local.gitignore - ``` - -Now **`.local.gitignore` will work like a regular `.gitignore`, but only for you**. - -## How does it work? -- `.local.gitignore` is not added to the repository. -- It is applied **only locally** on your computer. -- It works **like `.gitignore`**, but other developers don't have it. -- Git **does not see this file** thanks to `.git/info/exclude`. - -**Now you can add local files to it**: -```bash -echo "my-secret-file.txt" >> .local.gitignore -echo "debug_logs/" >> .local.gitignore -``` - -:::caution -Before performing a commit rollback, you must manually backup the files listed in `.local.gitignore`. This is because files ignored by `.local.gitignore` are not tracked by Git and will be lost if you rollback the commit. Git will not restore these files as they were not committed or staged. -::: \ No newline at end of file diff --git a/src/content/post/long-title.md b/src/content/post/long-title.md deleted file mode 100644 index f79f330..0000000 --- a/src/content/post/long-title.md +++ /dev/null @@ -1,8 +0,0 @@ ---- -title: "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Id" -description: "This post is purely for testing if the css is correct for the title on the page" -publishDate: "01 Feb 2023" -tags: ["test"] ---- - -## Testing the title tag diff --git a/src/content/post/markdown-elements/admonistions.md b/src/content/post/markdown-elements/admonistions.md deleted file mode 100644 index 57bff19..0000000 --- a/src/content/post/markdown-elements/admonistions.md +++ /dev/null @@ -1,116 +0,0 @@ ---- -title: "Markdown Admonitions" -description: "This post provides a detailed demonstration of how to use the Markdown admonition feature in Astro Citrus, showcasing its ability to highlight important information, tips, warnings, and other key content types in a visually distinct and customizable format" -publishDate: "25 Aug 2024" -seriesId: "markdown-elements" -orderInSeries: 2 -tags: ["markdown", "admonitions"] ---- - -## What are admonitions - -Admonitions (also known as “asides”) are useful for providing supportive and/or supplementary information related to your content. - -## How to use them - -To use admonitions in Astro Citrus, wrap your Markdown content in a pair of triple colons `:::`. The first pair should also include the type of admonition you want to use. - -For example, with the following Markdown: - -```md -:::note -Highlights information that users should take into account, even when skimming. -::: -``` - -Outputs: - -:::note -Highlights information that users should take into account, even when skimming. -::: - -## Admonition Types - -The following admonitions are currently supported: - -- `note` -- `tip` -- `important` -- `warning` -- `caution` - -### Note - -```md -:::note -Highlights information that users should take into account, even when skimming. -::: -``` - -:::note -Highlights information that users should take into account, even when skimming. -::: - -### Tip - -```md -:::tip -Optional information to help a user be more successful. -::: -``` - -:::tip -Optional information to help a user be more successful. -::: - -### Important - -```md -:::important -Crucial information necessary for users to succeed. -::: -``` - -:::important -Crucial information necessary for users to succeed. -::: - -### Warning - -```md -:::warning -Critical content demanding immediate user attention due to potential risks. -::: -``` - -:::warning -Critical content demanding immediate user attention due to potential risks. -::: - -### Caution - -```md -:::caution -Negative potential consequences of an action. -::: -``` - -:::caution -Negative potential consequences of an action. -::: - -## Customising the admonition title - -You can customise the admonition title using the following markup: - -```md -:::note[My custom title] -This is a note with a custom title. -::: -``` - -Outputs: - -:::note[My custom title] -This is a note with a custom title. -::: diff --git a/src/content/post/markdown-elements/index.md b/src/content/post/markdown-elements/index.md deleted file mode 100644 index d5857fe..0000000 --- a/src/content/post/markdown-elements/index.md +++ /dev/null @@ -1,188 +0,0 @@ ---- -title: "A post of Markdown elements" -description: "This post is for testing and listing a number of different markdown elements" -publishDate: "22 Feb 2023" -updatedDate: 22 Jan 2024 -seriesId: "markdown-elements" -orderInSeries: 1 -tags: ["test", "markdown"] ---- - -# This is a H1 Heading - -## This is a H2 Heading - -### This is a H3 Heading - -#### This is a H4 Heading - -##### This is a H5 Heading - -###### This is a H6 Heading - -## Horizontal Rules - ---- - ---- - ---- - -## Emphasis - -**This is bold text** - -_This is italic text_ - -~~Strikethrough~~ - -## Quotes - -"Double quotes" and 'single quotes' - -## Blockquotes - -> Blockquotes can also be nested... -> -> > ...by using additional greater-than signs right next to each other... - -## References - -An example containing a clickable reference[^1] with a link to the source. - -Second example containing a reference[^2] with a link to the source. - -[^1]: Reference first footnote with a return to content link. - -[^2]: Second reference with a link. - -If you check out this example in `src/content/post/markdown-elements/index.md`, you'll notice that the references and the heading "Footnotes" are added to the bottom of the page via the [remark-rehype](https://github.com/remarkjs/remark-rehype#options) plugin. - -## Lists - -Unordered - -- Create a list by starting a line with `+`, `-`, or `*` -- Sub-lists are made by indenting 2 spaces: - - Marker character change forces new list start: - - Ac tristique libero volutpat at - - Facilisis in pretium nisl aliquet - - Nulla volutpat aliquam velit -- Very easy! - -Ordered - -1. Lorem ipsum dolor sit amet -2. Consectetur adipiscing elit -3. Integer molestie lorem at massa - -4. You can use sequential numbers... -5. ...or keep all the numbers as `1.` - -Start numbering with offset: - -57. foo -1. bar - -## Code - -Inline `code` - -Indented code - - // Some comments - line 1 of code - line 2 of code - line 3 of code - -Block code "fences" - -``` -Sample text here... -``` - -Syntax highlighting - -```js -var foo = function (bar) { - return bar++; -}; - -console.log(foo(5)); -``` - -### Rehype Pretty Code - -Adding a title - -```js title="file.js" -console.log("Title example"); -``` - -A bash terminal - -```bash -echo "A base terminal example" -``` - -Highlighting code lines - -```js title="line-markers.js" {7} {4-5}#add {3}#remove -function demo() { - console.log("this line is normal"); - console.log("this line is marked as deleted"); - // This line and the next one are marked as inserted - console.log("this is the second inserted line"); - - return "this line uses the neutral default marker type"; -} -``` - -Line Numbers - -```python title="line-numbers.py" showLineNumbers -def greet(name): - print("Hello!") - print(f"Welcome, {name}!") - print("We are happy to see you.") - return name -``` - -[Rehype Pretty Code](https://rehype-pretty.pages.dev/) is a powerful tool with extensive features and support for [customization](https://rehype-pretty.pages.dev/). - -## Tables - -| Option | Description | -| ------ | ------------------------------------------------------------------------- | -| data | path to data files to supply the data that will be passed into templates. | -| engine | engine to be used for processing templates. Handlebars is the default. | -| ext | extension to be used for dest files. | - -### Table Alignment - -| Item | Price | # In stock | -| ------------ | :---: | ---------: | -| Juicy Apples | 1.99 | 739 | -| Bananas | 1.89 | 6 | - -### Keyboard elements - -| Action | Shortcut | -| --------------------- | ------------------------------------------ | -| Vertical split | Alt+Shift++ | -| Horizontal split | Alt+Shift+- | -| Auto split | Alt+Shift+d | -| Switch between splits | Alt + arrow keys | -| Resizing a split | Alt+Shift + arrow keys | -| Close a split | Ctrl+Shift+W | -| Maximize a pane | Ctrl+Shift+P + Toggle pane zoom | - -## Images - -Image in the same folder: `src/content/post/markdown-elements/logo.png` - -![Astro theme citrus logo](./logo.png) - -## Links - -[Content from markdown-it](https://markdown-it.github.io/) diff --git a/src/content/post/markdown-elements/logo.png b/src/content/post/markdown-elements/logo.png deleted file mode 100644 index 3d7c799..0000000 Binary files a/src/content/post/markdown-elements/logo.png and /dev/null differ diff --git a/src/content/post/markdown-elements/logo.svg b/src/content/post/markdown-elements/logo.svg deleted file mode 100644 index ccf1df9..0000000 --- a/src/content/post/markdown-elements/logo.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - - - - - - diff --git a/src/content/post/missing-content.md b/src/content/post/missing-content.md deleted file mode 100644 index 520daa8..0000000 --- a/src/content/post/missing-content.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -title: "This post doesn't have any content" -description: "This post is purely for testing the table of content, which should not be rendered, and the toggle button next to the post title should not be displayed" -publishDate: "22 Feb 2023" -tags: ["test", "toc"] ---- diff --git a/src/content/post/post-without-tags.md b/src/content/post/post-without-tags.md deleted file mode 100644 index b4b7a09..0000000 --- a/src/content/post/post-without-tags.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -title: "A post without tags" -description: "This post is for testing the functionality" -publishDate: "11 March 2024" -draft: false ---- diff --git a/src/content/post/remark-rehype.md b/src/content/post/remark-rehype.md deleted file mode 100644 index 403bf44..0000000 --- a/src/content/post/remark-rehype.md +++ /dev/null @@ -1,763 +0,0 @@ ---- -title: "Remark-Rehype" -description: "This post is about Remark-Rehype plugin for Astro" -publishDate: "26 January 2025" -tags: ["rehype", "remark", "astro", "plugin"] -draft: false ---- - -## What is this? - -This package is a [unified][] ([remark][]) plugin that switches from remark (the -markdown ecosystem) to rehype (the HTML ecosystem). -It does this by transforming the current markdown (mdast) syntax tree into an -HTML (hast) syntax tree. -remark plugins deal with mdast and rehype plugins deal with hast, so plugins -used after `remark-rehype` have to be rehype plugins. - -The reason that there are different ecosystems for markdown and HTML is that -turning markdown into HTML is, while frequently needed, not the only purpose of -markdown. -Checking (linting) and formatting markdown are also common use cases for -remark and markdown. -There are several aspects of markdown that do not translate 1-to-1 to HTML. -In some cases markdown contains more information than HTML: for example, there -are several ways to add a link in markdown (as in, autolinks: ``, -resource links: `[label](url)`, and reference links with definitions: -`[label][id]` and `[id]: url`). -In other cases HTML contains more information than markdown: there are many -tags, which add new meaning (semantics), available in HTML that aren’t available -in markdown. -If there was just one AST, it would be quite hard to perform the tasks that -several remark and rehype plugins currently do. - -## When should I use this? - -This project is useful when you want to turn markdown to HTML. -It opens up a whole new ecosystem with tons of plugins to do all kinds of -things. -You can [minify HTML][rehype-minify], [format HTML][rehype-format], -[make sure it’s safe][rehype-sanitize], [highlight code][rehype-highlight], -[add metadata][rehype-meta], and a lot more. - -A different plugin, [`rehype-raw`][rehype-raw], adds support for raw HTML -written inside markdown. -This is a separate plugin because supporting HTML inside markdown is a heavy -task (performance and bundle size) and not always needed. -To use both together, you also have to configure `remark-rehype` with -`allowDangerousHtml: true` and then use `rehype-raw`. - -The rehype plugin [`rehype-remark`][rehype-remark] does the inverse of this -plugin. -It turns HTML into markdown. - -If you don’t use plugins and want to access syntax trees, you can use -[`mdast-util-to-hast`][mdast-util-to-hast]. - -## Install - -This package is [ESM only][esm]. -In Node.js (version 16+), install with [npm][]: - -```sh -npm install remark-rehype -``` - -In Deno with [`esm.sh`][esmsh]: - -```js -import remarkRehype from 'https://esm.sh/remark-rehype@11' -``` - -In browsers with [`esm.sh`][esmsh]: - -```html - -``` - -## Use - -Say our document `example.md` contains: - -```markdown -# Pluto - -**Pluto** (minor-planet designation: **134340 Pluto**) is a -[dwarf planet](https://en.wikipedia.org/wiki/Dwarf_planet) in the -[Kuiper belt](https://en.wikipedia.org/wiki/Kuiper_belt). -``` - -…and our module `example.js` contains: - -```js -import rehypeDocument from 'rehype-document' -import rehypeFormat from 'rehype-format' -import rehypeStringify from 'rehype-stringify' -import remarkParse from 'remark-parse' -import remarkRehype from 'remark-rehype' -import {read} from 'to-vfile' -import {unified} from 'unified' -import {reporter} from 'vfile-reporter' - -const file = await unified() - .use(remarkParse) - .use(remarkRehype) - .use(rehypeDocument) - .use(rehypeFormat) - .use(rehypeStringify) - .process(await read('example.md')) - -console.error(reporter(file)) -console.log(String(file)) -``` - -…then running `node example.js` yields: - -```txt -example.md: no issues found -``` - -HTML: - -```html - - - - - example - - - -

Pluto

-

- Pluto (minor-planet designation: 134340 Pluto) is a - dwarf planet in the - Kuiper belt. -

- - -``` - -## API - -This package exports the identifiers -[`defaultFootnoteBackContent`][api-default-footnote-back-content], -[`defaultFootnoteBackLabel`][api-default-footnote-back-label], and -[`defaultHandlers`][api-default-handlers]. -The default export is [`remarkRehype`][api-remark-rehype]. - -### `defaultFootnoteBackContent(referenceIndex, rereferenceIndex)` - -See [`defaultFootnoteBackContent` from -`mdast-util-to-hast`][mdast-util-to-hast-default-footnote-back-content] - -### `defaultFootnoteBackLabel(referenceIndex, rereferenceIndex)` - -See [`defaultFootnoteBackLabel` from -`mdast-util-to-hast`][mdast-util-to-hast-default-footnote-back-label] - -### `defaultHandlers` - -See [`defaultHandlers` from -`mdast-util-to-hast`][mdast-util-to-hast-default-handlers] - -### `unified().use(remarkRehype[, destination][, options])` - -Turn markdown into HTML. - -###### Parameters - -* `destination` ([`Processor`][unified-processor], optional) - — processor -* `options` ([`Options`][api-options], optional) - — configuration - -###### Returns - -Transform ([`Transformer`][unified-transformer]). - -##### Notes - -###### Signature - -* if a [processor][unified-processor] is given, runs the (rehype) plugins - used on it with a hast tree, then discards the result - ([*bridge mode*][unified-mode]) -* otherwise, returns a hast tree, the plugins used after `remarkRehype` - are rehype plugins ([*mutate mode*][unified-mode]) - -:::note -It’s highly unlikely that you want to pass a `processor`. -::: - -###### HTML - -Raw HTML is available in mdast as [`html`][mdast-html] nodes and can be embedded -in hast as semistandard `raw` nodes. -Most plugins ignore `raw` nodes but two notable ones don’t: - -* [`rehype-stringify`][rehype-stringify] also has an option - `allowDangerousHtml` which will output the raw HTML. - This is typically discouraged as noted by the option name but is useful if - you completely trust authors -* [`rehype-raw`][rehype-raw] can handle the raw embedded HTML strings by - parsing them into standard hast nodes (`element`, `text`, etc). - This is a heavy task as it needs a full HTML parser, but it is the only way - to support untrusted content - -###### Footnotes - -Many options supported here relate to footnotes. -Footnotes are not specified by CommonMark, which we follow by default. -They are supported by GitHub, so footnotes can be enabled in markdown with -[`remark-gfm`][remark-gfm]. - -The options `footnoteBackLabel` and `footnoteLabel` define natural language -that explains footnotes, which is hidden for sighted users but shown to -assistive technology. -When your page is not in English, you must define translated values. - -Back references use ARIA attributes, but the section label itself uses a -heading that is hidden with an `sr-only` class. -To show it to sighted users, define different attributes in -`footnoteLabelProperties`. - -###### Clobbering - -Footnotes introduces a problem, as it links footnote calls to footnote -definitions on the page through `id` attributes generated from user content, -which results in DOM clobbering. - -DOM clobbering is this: - -```html -

- -``` - -Elements by their ID are made available by browsers on the `window` object, -which is a security risk. -Using a prefix solves this problem. - -More information on how to handle clobbering and the prefix is explained in -[*Example: headings (DOM clobbering)* in -`rehype-sanitize`][rehype-sanitize-clobber]. - -###### Unknown nodes - -Unknown nodes are nodes with a type that isn’t in `handlers` or `passThrough`. -The default behavior for unknown nodes is: - -* when the node has a `value` (and doesn’t have `data.hName`, - `data.hProperties`, or `data.hChildren`, see later), create a hast `text` - node -* otherwise, create a `
` element (which could be changed with - `data.hName`), with its children mapped from mdast to hast as well - -This behavior can be changed by passing an `unknownHandler`. - -### `Options` - -Configuration (TypeScript type). - -###### Fields - -* `allowDangerousHtml` (`boolean`, default: `false`) - — whether to persist raw HTML in markdown in the hast tree -* `clobberPrefix` (`string`, default: `'user-content-'`) - — prefix to use before the `id` property on footnotes to prevent them from - *clobbering* -* `footnoteBackContent` - ([`FootnoteBackContentTemplate` from - `mdast-util-to-hast`][mdast-util-to-hast-footnote-back-content-template] - or `string`, default: - [`defaultFootnoteBackContent` from - `mdast-util-to-hast`][mdast-util-to-hast-default-footnote-back-content]) - — content of the backreference back to references -* `footnoteBackLabel` - ([`FootnoteBackLabelTemplate` from - `mdast-util-to-hast`][mdast-util-to-hast-footnote-back-label-template] - or `string`, default: - [`defaultFootnoteBackLabel` from - `mdast-util-to-hast`][mdast-util-to-hast-default-footnote-back-label]) - — label to describe the backreference back to references -* `footnoteLabel` (`string`, default: `'Footnotes'`) - — label to use for the footnotes section (affects screen readers) -* `footnoteLabelProperties` - ([`Properties` from `@types/hast`][hast-properties], default: - `{className: ['sr-only']}`) - — properties to use on the footnote label - (note that `id: 'footnote-label'` is always added as footnote calls use it - with `aria-describedby` to provide an accessible label) -* `footnoteLabelTagName` (`string`, default: `h2`) - — tag name to use for the footnote label -* `handlers` ([`Handlers` from - `mdast-util-to-hast`][mdast-util-to-hast-handlers], optional) - — extra handlers for nodes -* `passThrough` (`Array`, optional) - — list of custom mdast node types to pass through (keep) in hast (note that - the node itself is passed, but eventual children are transformed) -* `unknownHandler` ([`Handler` from - `mdast-util-to-hast`][mdast-util-to-hast-handler], optional) - — handle all unknown nodes - -## Examples - -### Example: supporting HTML in markdown naïvely - -If you completely trust the authors of the input markdown and want to allow them -to write HTML inside markdown, you can pass `allowDangerousHtml` to -`remark-rehype` and `rehype-stringify`: - -```js -import rehypeStringify from 'rehype-stringify' -import remarkParse from 'remark-parse' -import remarkRehype from 'remark-rehype' -import {unified} from 'unified' - -const file = await unified() - .use(remarkParse) - .use(remarkRehype, {allowDangerousHtml: true}) - .use(rehypeStringify, {allowDangerousHtml: true}) - .process('Dysnomia') - -console.log(String(file)) -``` - -Yields: - -```html -

Dysnomia

-``` - -:::caution -Оbserve that the XSS attack through `onclick` is present. -::: - -### Example: supporting HTML in markdown properly - -If you do not trust the authors of the input markdown, or if you want to make -sure that rehype plugins can see HTML embedded in markdown, use -[`rehype-raw`][rehype-raw]. -The following example passes `allowDangerousHtml` to `remark-rehype`, then -turns the raw embedded HTML into proper HTML nodes with `rehype-raw`, and -finally sanitizes the HTML by only allowing safe things with -`rehype-sanitize`: - -```js -import rehypeSanitize from 'rehype-sanitize' -import rehypeStringify from 'rehype-stringify' -import rehypeRaw from 'rehype-raw' -import remarkParse from 'remark-parse' -import remarkRehype from 'remark-rehype' -import {unified} from 'unified' - -const file = await unified() - .use(remarkParse) - .use(remarkRehype, {allowDangerousHtml: true}) - .use(rehypeRaw) - .use(rehypeSanitize) - .use(rehypeStringify) - .process('Dysnomia') - -console.log(String(file)) -``` - -Running that code yields: - -```html -

Dysnomia

-``` - -:::caution -Оbserve that the XSS attack through `onclick` is **not** present. -::: - -### Example: footnotes in languages other than English - -If you know that the markdown is authored in a language other than English, -and you’re using `remark-gfm` to match how GitHub renders markdown, and you know -that footnotes are (or can?) be used, you should translate the labels associated -with them. - -Let’s first set the stage: - -```js -import {unified} from 'unified' -import remarkParse from 'remark-parse' -import remarkGfm from 'remark-gfm' -import remarkRehype from 'remark-rehype' -import rehypeStringify from 'rehype-stringify' - -const doc = ` -Ceres ist nach der römischen Göttin des Ackerbaus benannt; -ihr astronomisches Symbol ist daher eine stilisierte Sichel: ⚳.[^nasa-2015] - -[^nasa-2015]: JPL/NASA: - [*What is a Dwarf Planet?*](https://www.jpl.nasa.gov/infographics/what-is-a-dwarf-planet) - In: Jet Propulsion Laboratory. - 22. April 2015, - abgerufen am 19. Januar 2022 (englisch). -` - -const file = await unified() - .use(remarkParse) - .use(remarkGfm) - .use(remarkRehype) - .use(rehypeStringify) - .process(doc) - -console.log(String(file)) -``` - -Yields: - -```html -

- Ceres ist nach der römischen Göttin des Ackerbaus benannt; - ihr astronomisches Symbol ist daher eine stilisierte Sichel: ⚳. - - - 1 - - -

-
-

Footnotes

-
    -
  1. -

    - JPL/NASA: - - What is a Dwarf Planet? - - In: Jet Propulsion Laboratory. - 22. April 2015, - abgerufen am 19. Januar 2022 (englisch). - - ↩ - -

    -
    2. -
-
-``` - -This is a mix of English and German that isn’t very accessible, such as that -screen readers can’t handle it nicely. -Let’s say our program *does* know that the markdown is in German. -In that case, it’s important to translate and define the labels relating to -footnotes so that screen reader users can properly pronounce the page: - -```diff -@@ -18,7 +18,16 @@ ihr astronomisches Symbol ist daher eine stilisierte Sichel: ⚳.[^nasa-2015] - const file = await unified() - .use(remarkParse) - .use(remarkGfm) -- .use(remarkRehype) -+ .use(remarkRehype, { -+ footnoteBackLabel(referenceIndex, rereferenceIndex) { -+ return ( -+ 'Hochspringen nach: ' + -+ (referenceIndex + 1) + -+ (rereferenceIndex > 1 ? '-' + rereferenceIndex : '') -+ ) -+ }, -+ footnoteLabel: 'Fußnoten' -+ }) - .use(rehypeStringify) - .process(doc) -``` - -Running the code with the above patch applied, yields: - -```diff -@@ -1,13 +1,13 @@ -

Ceres ist nach der römischen Göttin des Ackerbaus benannt; - ihr astronomisches Symbol ist daher eine stilisierte Sichel: ⚳.1

--

Footnotes

-+

Fußnoten

-
    -
  1. -

    JPL/NASA: - What is a Dwarf Planet? - In: Jet Propulsion Laboratory. - 22. April 2015, --abgerufen am 19. Januar 2022 (englisch). ↩

    -+abgerufen am 19. Januar 2022 (englisch). ↩

    -
    2. -
-
-``` - -## HTML - -See [*Algorithm* in -`mdast-util-to-hast`](https://github.com/syntax-tree/mdast-util-to-hast#algorithm) -for info on how mdast (markdown) nodes are transformed to hast (HTML). - -## CSS - -Assuming you know how to use (semantic) HTML and CSS, then it should generally -be straightforward to style the HTML produced by this plugin. -With CSS, you can get creative and style the results as you please. - -Some semistandard features, notably GFMs tasklists and footnotes, generate HTML -that be unintuitive, as it matches exactly what GitHub produces for their -website. -There is a project, [`sindresorhus/github-markdown-css`][github-markdown-css], -that exposes the stylesheet that GitHub uses for rendered markdown, which might -either be inspirational for more complex features, or can be used as-is to -exactly match how GitHub styles rendered markdown. - -The following CSS is needed to make footnotes look a bit like GitHub: - -```css -/* Style the footnotes section. */ -.footnotes { - font-size: smaller; - color: #8b949e; - border-top: 1px solid #30363d; -} - -/* Hide the section label for visual users. */ -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - overflow: hidden; - clip: rect(0, 0, 0, 0); - word-wrap: normal; - border: 0; -} - -/* Place `[` and `]` around footnote calls. */ -[data-footnote-ref]::before { - content: '['; -} - -[data-footnote-ref]::after { - content: ']'; -} -``` - -## Syntax tree - -This projects turns [mdast][] (markdown) into [hast][] (HTML). - -It extends mdast by supporting `data` fields on mdast nodes to specify how they -should be transformed. -See [*Fields on nodes* in -`mdast-util-to-hast`](https://github.com/syntax-tree/mdast-util-to-hast#fields-on-nodes) -for info on how these fields work. - -It extends hast by using a semistandard raw nodes for raw HTML. -See the [*HTML* note above](#html) for more info. - -## Types - -This package is fully typed with [TypeScript][]. -It exports the types -[`Options`][api-options]. - -The types of `mdast-util-to-hast` can be referenced to register data fields -with `@types/mdast` and `Raw` nodes with `@types/hast`. - -```js -/** - * @import {Root as HastRoot} from 'hast' - * @import {Root as MdastRoot} from 'mdast' - * @import {} from 'mdast-util-to-hast' - */ - -import {visit} from 'unist-util-visit' - -const mdastNode = /** @type {MdastRoot} */ ({/* … */}) -console.log(mdastNode.data?.hName) // Typed as `string | undefined`. - -const hastNode = /** @type {HastRoot} */ ({/* … */}) - -visit(hastNode, function (node) { - // `node` can now be `raw`. -}) -``` - -## Compatibility - -Projects maintained by the unified collective are compatible with maintained -versions of Node.js. - -When we cut a new major release, we drop support for unmaintained versions of -Node. -This means we try to keep the current release line, `remark-rehype@^11`, -compatible with Node.js 16. - -This plugin works with `unified` version 6+, `remark-parse` version 3+ (used in -`remark` version 7), and `rehype-stringify` version 3+ (used in `rehype` -version 5). - -## Security - -Use of `remark-rehype` can open you up to a -[cross-site scripting (XSS)][wiki-xss] attack. -Embedded **[hast][]** properties (`hName`, `hProperties`, `hChildren`) in -[mdast][], custom handlers, and the `allowDangerousHtml` option all provide -openings. -Use [`rehype-sanitize`][rehype-sanitize] to make the tree safe. - -## Related - -* [`rehype-raw`][rehype-raw] - — rehype plugin to parse the tree again and support `raw` nodes -* [`rehype-sanitize`][rehype-sanitize] - — rehype plugin to sanitize HTML -* [`rehype-remark`](https://github.com/rehypejs/rehype-remark) - — rehype plugin to turn HTML into markdown -* [`rehype-retext`](https://github.com/rehypejs/rehype-retext) - — rehype plugin to support retext -* [`remark-retext`](https://github.com/remarkjs/remark-retext) - — remark plugin to support retext - -## Contribute - -See [`contributing.md`][contributing] in [`remarkjs/.github`][health] for ways -to get started. -See [`support.md`][support] for ways to get help. - -This project has a [code of conduct][coc]. -By interacting with this repository, organization, or community you agree to -abide by its terms. - -## License - -[MIT][license] © [Titus Wormer][author] - - - -[build-badge]: https://github.com/remarkjs/remark-rehype/workflows/main/badge.svg - -[build]: https://github.com/remarkjs/remark-rehype/actions - -[coverage-badge]: https://img.shields.io/codecov/c/github/remarkjs/remark-rehype.svg - -[coverage]: https://codecov.io/github/remarkjs/remark-rehype - -[downloads-badge]: https://img.shields.io/npm/dm/remark-rehype.svg - -[downloads]: https://www.npmjs.com/package/remark-rehype - -[size-badge]: https://img.shields.io/bundlejs/size/remark-rehype - -[size]: https://bundlejs.com/?q=remark-rehype - -[sponsors-badge]: https://opencollective.com/unified/sponsors/badge.svg - -[backers-badge]: https://opencollective.com/unified/backers/badge.svg - -[collective]: https://opencollective.com/unified - -[chat-badge]: https://img.shields.io/badge/chat-discussions-success.svg - -[chat]: https://github.com/remarkjs/remark/discussions - -[npm]: https://docs.npmjs.com/cli/install - -[esm]: https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c - -[esmsh]: https://esm.sh - -[health]: https://github.com/remarkjs/.github - -[contributing]: https://github.com/remarkjs/.github/blob/main/contributing.md - -[support]: https://github.com/remarkjs/.github/blob/main/support.md - -[coc]: https://github.com/remarkjs/.github/blob/main/code-of-conduct.md - -[license]: license - -[author]: https://wooorm.com - -[github-markdown-css]: https://github.com/sindresorhus/github-markdown-css - -[hast]: https://github.com/syntax-tree/hast - -[hast-properties]: https://github.com/syntax-tree/hast#properties - -[mdast]: https://github.com/syntax-tree/mdast - -[mdast-html]: https://github.com/syntax-tree/mdast#html - -[mdast-util-to-hast]: https://github.com/syntax-tree/mdast-util-to-hast - -[mdast-util-to-hast-default-footnote-back-content]: https://github.com/syntax-tree/mdast-util-to-hast#defaultfootnotebackcontentreferenceindex-rereferenceindex - -[mdast-util-to-hast-default-footnote-back-label]: https://github.com/syntax-tree/mdast-util-to-hast#defaultfootnotebacklabelreferenceindex-rereferenceindex - -[mdast-util-to-hast-footnote-back-content-template]: https://github.com/syntax-tree/mdast-util-to-hast#footnotebackcontenttemplate - -[mdast-util-to-hast-footnote-back-label-template]: https://github.com/syntax-tree/mdast-util-to-hast#footnotebacklabeltemplate - -[mdast-util-to-hast-default-handlers]: https://github.com/syntax-tree/mdast-util-to-hast#defaulthandlers - -[mdast-util-to-hast-handlers]: https://github.com/syntax-tree/mdast-util-to-hast#handlers - -[mdast-util-to-hast-handler]: https://github.com/syntax-tree/mdast-util-to-hast#handler - -[rehype]: https://github.com/rehypejs/rehype - -[rehype-format]: https://github.com/rehypejs/rehype-format - -[rehype-highlight]: https://github.com/rehypejs/rehype-highlight - -[rehype-meta]: https://github.com/rehypejs/rehype-meta - -[rehype-minify]: https://github.com/rehypejs/rehype-minify - -[rehype-raw]: https://github.com/rehypejs/rehype-raw - -[rehype-sanitize]: https://github.com/rehypejs/rehype-sanitize - -[rehype-sanitize-clobber]: https://github.com/rehypejs/rehype-sanitize#example-headings-dom-clobbering - -[rehype-stringify]: https://github.com/rehypejs/rehype/tree/main/packages/rehype-stringify - -[rehype-remark]: https://github.com/rehypejs/rehype-remark - -[remark]: https://github.com/remarkjs/remark - -[remark-gfm]: https://github.com/remarkjs/remark-gfm - -[typescript]: https://www.typescriptlang.org - -[unified]: https://github.com/unifiedjs/unified - -[unified-mode]: https://github.com/unifiedjs/unified#transforming-between-ecosystems - -[unified-processor]: https://github.com/unifiedjs/unified#processor - -[unified-transformer]: https://github.com/unifiedjs/unified#transformer - -[wiki-xss]: https://en.wikipedia.org/wiki/Cross-site_scripting - -[api-default-footnote-back-content]: #defaultfootnotebackcontentreferenceindex-rereferenceindex - -[api-default-footnote-back-label]: #defaultfootnotebacklabelreferenceindex-rereferenceindex - -[api-default-handlers]: #defaulthandlers - -[api-options]: #options - -[api-remark-rehype]: #unifieduseremarkrehype-destination-options diff --git a/src/content/post/social-image.md b/src/content/post/social-image.md deleted file mode 100644 index cc49837..0000000 --- a/src/content/post/social-image.md +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: "Example OG Social Image" -publishDate: "27 January 2023" -description: "An example post for Astro Citrus, detailing how to add a custom social image card in the frontmatter" -tags: ["example", "blog", "image"] -ogImage: "/social-card.png" ---- - -## Adding your own social image to a post - -This post is an example of how to add a custom [open graph](https://ogp.me/) social image, also known as an OG image, to a blog post. -By adding the optional ogImage property to the frontmatter of a post, you opt out of [satori](https://github.com/vercel/satori) automatically generating an image for this page. - -If you open this markdown file `src/content/post/social-image.md` you'll see the ogImage property set to an image which lives in the public folder[^1]. - -```yaml -ogImage: "/social-card.png" -``` - -You can view the one set for this template page [here](http://astrocitrus.artemkutsan.pp.ua/social-card.png). - -[^1]: The image itself can be located anywhere you like. diff --git a/src/content/post/transfonter.md b/src/content/post/transfonter.md deleted file mode 100644 index 451f600..0000000 --- a/src/content/post/transfonter.md +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: "How to Create a Font Subset with Transfonter" -description: "A guide to using Transfonter to create optimized font subsets" -publishDate: "2025-02-10" -tags: ["fonts", "optimization", "web performance"] ---- - -## What is Transfonter? - -[Transfonter](https://transfonter.org/) is a free online tool that helps convert and subset fonts. It supports various formats (TTF, OTF, WOFF, WOFF2) and allows users to optimize web fonts by reducing their size while maintaining essential glyphs. - -## Why Use Font Subsetting? - -Font files often contain thousands of glyphs, including symbols and characters for multiple languages. Subsetting removes unnecessary glyphs, reducing file size and improving website performance. This is particularly useful when only a specific language set or symbols are needed. - -For example, I encountered an issue when using the SF Pro Rounded font with the Satori library for generating OG images, as described in this post: [Example OG Social Image](posts/social-image/). When using multiple font variants, the project failed to build due to memory overflow errors. Increasing the memory limit did not help. Moreover, using even a single font file larger than ~3.5MB is considered bad practice, let alone multiple variants at the same time. - -After subsetting the font, I ended up with two subsets, both containing **only Latin characters**: one slightly over 100KB and another around 355KB. This significantly reduced the overall font size while keeping the necessary glyphs. - -## Creating a Font Subset with Transfonter - -Let's take **SF Pro Rounded**, a multilingual font, and divide it into two subsets: - -- **Basic subset**: Includes Latin characters and essential symbols. -- **Extended subset**: Includes additional glyphs beyond the basic set. - -### Upload the Font -1. Go to [Transfonter](https://transfonter.org/). -2. Click **Add Fonts** and select the **SF Pro Rounded Regular** font file (TTF or OTF format). - -### Define Unicode Ranges -For subsetting, use the following ranges: - -#### Basic Subset - -transfonter.org latin + essential symbols unicode-range: -``` -0000-007F, 00A0-024F, 2190-22FF, 2934-2937, F6D5-F6D8 -``` - -#### Extended Subset - -transfonter.org additional glyphs unicode-range: -``` -0080-00A0, 0250-218F, 2300-FFFF -``` - -:::tip -You can find out the character codes and view the glyph tables of a font using built-in system tools: -- Windows: Use Character Map (charmap). Open the Start menu, search for "Character Map," and select a font to see its glyphs and Unicode codes. -- macOS: Open Font Book, select a font, and switch to "Repertoire" mode to see all available characters along with their codes. -- Linux: Use gucharmap (GNOME Character Map) or kcharselect (for KDE) to browse Unicode symbols in installed fonts. -::: - -### Generate the Font Files -1. Check the **Subset** box in Transfonter. -2. Enter the Unicode ranges above for each subset. -3. Click **Convert** to generate the optimized font files. -4. Download the converted fonts. - -:::tip -Additionally, when using Transfonter, you can upload and convert multiple fonts at the same time. The tool allows batch processing, and after conversion, all optimized fonts can be downloaded as a ZIP archive, making it easier to manage multiple font files efficiently. -::: - -### Implement in CSS -Once the fonts are ready, use `@font-face` to load them efficiently: - -```css -@font-face { - font-family: "SFProRounded"; - src: url("/fonts/SF-Pro-Rounded-Regular-Basic.ttf") format("truetype"); - font-weight: 400; - font-style: normal; -} - -@font-face { - font-family: "SFProRounded"; - src: url("/fonts/SF-Pro-Rounded-Regular-Extended.ttf") format("truetype"); - font-weight: 400; - font-style: normal; -} -``` - -### Test the Fonts -Ensure the fonts load correctly by inspecting network requests in the browser's developer tools. Verify that only necessary subsets are downloaded. - -## Conclusion -Using Transfonter for font subsetting helps optimize web performance by reducing font file sizes while keeping necessary glyphs. Try it out with your fonts to enhance your website's loading speed! \ No newline at end of file diff --git a/src/content/post/unique-tags.md b/src/content/post/unique-tags.md deleted file mode 100644 index 887d279..0000000 --- a/src/content/post/unique-tags.md +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: "Unique tags validation" -publishDate: "30 January 2023" -description: "This post is used for validating if duplicate tags are removed, regardless of the string case" -tags: ["blog", "blog", "Blog", "test", "bloG", "Test", "BLOG"] ---- - -## This post is to test zod transform - -If you open the file `src/content/post/unique-tags.md`, the tags array has a number of duplicate blog strings of various cases. - -These are removed as part of the removeDupsAndLowercase function found in `src/content/config.ts`. diff --git a/src/content/post/webmentions.md b/src/content/post/webmentions.md deleted file mode 100644 index 551fb12..0000000 --- a/src/content/post/webmentions.md +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: "Adding Webmentions to Astro Citrus" -description: "This post describes the detailed process of adding webmentions to your own site, including setup, configuration, and integration with webmention services." -publishDate: "11 Oct 2023" -tags: ["webmentions", "astro", "social"] -updatedDate: 6 December 2024 ---- - -## TLDR - -1. Add a link on your homepage to either your GitHub profile and/or email address as per [IndieLogin's](https://indielogin.com/setup) instructions. You _could_ do this via `src/components/SocialList.astro`, just be sure to include `isWebmention` to the relevant link if doing so. -2. Create an account @ [Webmention.io](https://webmention.io/) by entering your website's address. -3. Add the link feed and api key to a `.env` file with the key `WEBMENTION_URL` and `WEBMENTION_API_KEY` respectively, you could rename `.env.example` found in this template. You can also add the optional `WEBMENTION_PINGBACK` link here too. -4. Go to [brid.gy](https://brid.gy/) and sign-in to each social account[s] you wish to link. -5. Publish and build your website, remember to add the api key, and it should now be ready to receive webmentions! - -## What are webmentions - -Put simply, it's a way to show users who like, comment, repost and more, on various pages on your website via social media. - -This theme displays the number of likes, mentions and replies each blog post receives. There are a couple of more webmentions that I haven't included, like reposts, which are currently filtered out, but shouldn't be too difficult to include. - -## Steps to add it to your own site - -Your going to have to create a couple of accounts to get things up-and-running. But, the first thing you need to ensure is that your social links are correct. - -### Add link(s) to your profile(s) - -Firstly, you need to add a link on your site to prove ownership. If you have a look at [IndieLogin's](https://indielogin.com/setup) instructions, it gives you 2 options, either an email address and/or GitHub account. I've created the component `src/components/SocialList.astro` where you can add your details into the `socialLinks` array, just include the `isWebmention` property to the relevant link which will add the `rel="me authn"` attribute. Whichever way you do it, make sure you have a link in your markup as per IndieLogin's [instructions](https://indielogin.com/setup) - -```html -GitHub -``` - -### Sign up to Webmention.io - -Next, head over to [Webmention.io](https://webmention.io/) and create an account by signing in with your domain name, e.g. `http://astrocitrus.artemkutsan.pp.ua/`. Please note that .app TLDs don't function correctly. Once in, it will give you a couple of links for your domain to accept webmentions. Make a note of these and create a `.env` file (this template include an example `.env.example` which you could rename). Add the link feed and api key with the key/values of `WEBMENTION_URL` and `WEBMENTION_API_KEY` respectively, and the optional `WEBMENTION_PINGBACK` url if required. Please try not to publish this to a repository! - -:::note -You don't have to include the pingback link. Maybe coincidentally, but after adding it I started to receive a higher frequency of spam in my mailbox, informing me that my website could be better. TBH they're not wrong. I've now removed it, but it's up to you. -::: - -### Sign up to Brid.gy - -You're now going to have to use [brid.gy](https://brid.gy/). As the name suggests, it links your website to your social media accounts. For every account you want to set up (e.g. Mastodon), click on the relevant button and connect each account you want brid.gy to search. Just to note again, brid.gy currently has an issue with .app TLDs. - -## Testing everything works - -With everything set, it's now time to build and publish your website. **REMEMBER** to set your environment variables `WEBMENTION_API_KEY` & `WEBMENTION_URL` with your host. - -You can check to see if everything is working by sending a test webmention via [webmentions.rocks](https://webmention.rocks/receive/1). Log in with your domain, enter the auth code, and then the url of the page you want to test. For example, to test this page I would add `http://astrocitrus.artemkutsan.pp.ua/posts/webmentions/`. To view it on your website, rebuild or (re)start dev mode locally, and you should see the result at the bottom of your page. - -You can also view any test mentions in the browser via their [api](https://github.com/aaronpk/webmention.io#api). - -## Things to add, things to consider - -- At the moment, fresh webmentions are only fetched on a rebuild or restarting dev mode, which obviously means if you don't update your site very often you wont get a lot of new content. It should be quite trivial to add a cron job to run the `getAndCacheWebmentions()` function in `src/utils/webmentions.ts` and populate your blog with new content. This is probably what I'll add next as a github action. - -- I have seen some mentions have duplicates. Unfortunately, they're quite difficult to filter out as they have different id's. - -- I'm not a huge fan of the little external link icon for linking to comments/replies. It's not particularly great on mobile due to its size, and will likely change it in the future. - -## Acknowledgements - -Many thanks to [Kieran McGuire](https://github.com/KieranMaguire) for the helpful posts. I'd never heard of webmentions before, and now with this update hopefully others will be able to make use of them. Additionally, articles and examples from [kld](https://kld.dev/adding-webmentions/) and [ryanmulligan.dev](https://ryanmulligan.dev/blog/) really helped in getting this set up and integrated, both a great resource if you're looking for more information! diff --git a/src/content/series/citrus-docs.md b/src/content/series/citrus-docs.md deleted file mode 100644 index ef5f904..0000000 --- a/src/content/series/citrus-docs.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -id: citrus-docs -title: "Citrus Docs" -description: "Astro Citrus documentation outlines key aspects of the template, describing its core functionality for blog management and project documentation setup" -featured: true ---- diff --git a/src/content/series/markdown-elements.md b/src/content/series/markdown-elements.md deleted file mode 100644 index 8fa8ec0..0000000 --- a/src/content/series/markdown-elements.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -id: markdown-elements -title: "Markdown Elements" -description: "Dive into a comprehensive guide exploring Markdown syntax and elements, from basic formatting to advanced features, designed to help you master their usage with practical examples for enhancing your documentation and writing efficiency" ---- diff --git a/src/pages/about.astro b/src/pages/about.astro index 3326373..1b7ee30 100644 --- a/src/pages/about.astro +++ b/src/pages/about.astro @@ -2,38 +2,28 @@ import PageLayout from "@/layouts/Base.astro"; const meta = { - description: "I'm a starter theme for Astro.build", + description: "Sobre Ignacio, Ingeniero de QA especializado en automatización de pruebas.", title: "About", }; --- -

About

+

Sobre mí

- Hi, I’m a starter Astro. I’m particularly great for getting you started with your own blogging - website. + Soy Ignacio, me desempeño como Ingeniero de QA especializado en automatización de pruebas. Desde hace algunos años me dedico a mejorar la calidad del software a través de pruebas eficientes, herramientas bien pensadas y un enfoque ágil.

-

Here are my some of my awesome built in features:

-
    -
  • I'm ultra fast as I'm a static site
    • -
  • I'm fully responsive
    • -
  • I come with a light and dark mode
    • -
  • I'm easy to customise and add additional content
    • -
  • I have Tailwind CSS styling
    • -
  • Shiki code syntax highlighting
    • -
  • Satori for auto generating OG images for blog posts
    • -

- Clone or fork my repo if you like me! + Este blog es mi espacio para compartir ideas, proyectos y aprendizajes en torno a QA, automatización, buenas prácticas y temas que considero clave para crecer en tecnología. +

+

+ Más allá del trabajo, disfruto jugar pádel, preparar café como si fuera un experimento, y perderme entre impresiones 3D o historias de ciencia ficción. +

+

+ ¿Estás comenzando en QA, vienes del desarrollo o simplemente te interesa mejorar la calidad de tu software? Entonces este blog también es para ti.

+ diff --git a/src/pages/index.astro b/src/pages/index.astro index 25eb3a6..3f9975d 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -32,10 +32,13 @@ const latestNotes = allNotes.sort(collectionDateSort).slice(0, MAX_NOTES);
- Introducing Astro Citrus! + Hola! Soy Ignacio

- Hi, I’m an Astro theme for building websites or blogs. To customize, add posts, or make it yours, click the GitHub icon below to visit my repo. + Me dedico al aseguramiento de la calidad del software (QA) en el área de automatización, con conocimientos en desarrollo web. +

+

+ Entre mis intereses fuera de la tecnología está disfrutar del café, la lectura y los discos de vinilo.

@@ -43,15 +46,16 @@ const latestNotes = allNotes.sort(collectionDateSort).slice(0, MAX_NOTES);
- Read Blog + Lee mis publicaciones - +
@@ -77,7 +81,7 @@ const latestNotes = allNotes.sort(collectionDateSort).slice(0, MAX_NOTES); latestNotes.length > 0 && (

- Notes + Notas

{ diff --git a/src/site.config.ts b/src/site.config.ts index cf9896a..592b502 100644 --- a/src/site.config.ts +++ b/src/site.config.ts @@ -1,11 +1,18 @@ import type { SiteConfig } from "@/types"; +import dotenv from "dotenv"; + +// Load environment variables from .env file +dotenv.config(); +const author = process.env.AUTHOR +const locale = process.env.LOCALE +const desc = process.env.DESCRIPTION export const siteConfig: SiteConfig = { // Used as both a meta property (src/components/BaseHead.astro L:31 + L:49) & the generated satori png (src/pages/og-image/[slug].png.ts) - author: "Artem Kutsan", + author: author as string, // Date.prototype.toLocaleDateString() parameters, found in src/utils/date.ts. date: { - locale: "en-GB", + locale: locale as string, options: { day: "numeric", month: "short", @@ -13,13 +20,13 @@ export const siteConfig: SiteConfig = { }, }, // Used as the default description meta property and webmanifest description - description: "An opinionated starter theme for Astro", + description: desc as string, // HTML lang property, found in src/layouts/Base.astro L:18 & astro.config.ts L:48 - lang: "en-GB", + lang: locale as string, // Meta property, found in src/components/BaseHead.astro L:42 - ogLocale: "en_GB", + ogLocale: locale as string, // Used to construct the meta title property found in src/components/BaseHead.astro L:11, and webmanifest name found in astro.config.ts L:42 - title: "Citrus", + title: author as string, }; // Used to generate links in both the Header & Footer. diff --git a/src/utils/truncateTitle.ts b/src/utils/truncateTitle.ts index cee5155..fcfcd2c 100644 --- a/src/utils/truncateTitle.ts +++ b/src/utils/truncateTitle.ts @@ -1,3 +1,3 @@ export function truncateTitle(title: string): string { - return title.length > 50 ? `${title.slice(0, 50)}...` : title; + return title.length > 60 ? `${title.slice(0, 60)}...` : title; } \ No newline at end of file