Andrea Arredondo's Website

Hi Andy 🫰

This is a quick guide to the project 🖤

Stack

Typescript	Next	Contentlayer	MDX

Installation

To install all the dependencies of the project just run:

npm install

To run the page in a development environment run:

npm run dev

This will trigger 2 scripts

createNewResizedImages.js This script traverses the /posts and /extracurricularposts folders and extracts all the photos that are in the .mdx files; if it detects a new photo that doesn't have a blurred image it generates it, with the intention of having a placeholder image for each image that exists in the Highlight or Extracurricular sections while the images are loading.
The next/dev script which enables a development environment of NextJS.

MDX Format

MDX is a markup format that combines Markdown and JSX (JavaScript XML). It allows you to write JSX directly within your Markdown documents, which means you can import and use React components within your Markdown files.

The content inside the folders /Extracurricular_posts & /Posts must be only .mdx files. The files are configured for the following format:

---
title: string (required)
postType: string (required)
subtitle: string (required)
date: string (optional)
org: string (optional)
category: string (optional)
title_image: image inside /public folder (required) [Supported formats: .webp, .jpeg, .jpg, .png]
images: array of images inside /public folder (required) [Supported formats: .webp, .jpeg, .jpg, .png]
---
Content in MDX

Example:

---
title: 'Online Education In Times Of Covid' 
postType: 'Extracurricular'
subtitle: 'AMITI'
date: '2022'
org: 'AMITI'
category: 'Other' 
title_image: amiti1.jpeg
images: 
    - amiti1.jpeg
    - amiti2.jpeg
    - amiti3.jpeg
    - amiti4.jpeg
---

Muy contenta por haber sido parte del #DíaAMITI compartiendo desde IBM el taller: Ciencia de datos para la toma de decisiones.

Gracias a AMITI A.C. y Joel González Saldivar por la invitación.
#MotordeInnovación

Adding new posts 🗒️

Highlights

To add a New Highlight Post:

Create a new .mdx in the /Posts following the MDX Format.

Make sure to add all the images you're gonna use in the /public folder then you can reference them with their name in the file.

3.- This will automatically create a new Highlight Card in the Highlight Section

Extracurricular

To add a New Extracurricular Post:

Create a new .mdx in the /Extracurricular_posts following the MDX Format.

Make sure to add all the images you're gonna use in the /public folder then you can reference them with their name in the file.

3.- This will automatically create a new Extracurricular Card in the Extracurricular Section

Adding Code To Your Posts 💻

The .mdx supports the code addition like you were creating a technical content post thanks to Rehype Pretty Code. You can add the same code as the one you read on GitHub like the ones below:

MIT License

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

David-Lazaro-Fernandez/Andrea-Arredondo