This is the TeachT3ch website revamped. It's build in NextJs and uses Styled Components for styling. Check out below how deploy and test environment. It is directly deployed in Vercel, and the repository main
branch will automatically deploy.
There's a variable called IsCourseOpen
in _app.js
to control this behaviour. This variable controls the admissions forms among other tiny details in the application. If false, the forms are hidden.
Modify the file placed into /utils/eventBarInfo.js
with the following info:
export const eventBarInfo = {
showUntilTimeStamp: null,
eventTitle: (
<p>
No te pierdas las <span className="bold">Winter Sessions 2021</span>. No
te pierdas las Winter Sessions 2021. No te pierdas las Winter Sessions
2021. No te pierdas las Winter Sessions 2021.
</p>
),
eventLinkText: "Comprueba el calendario 馃憠",
eventLinkURL: "/blog",
};
Where:
showUntilTimeStamp
: the bar will be displaying this event until this date. Enter it in timestamp format, number, in milliseconds. If empty, the event bar will always show on load.eventTitle
: the text that will describe the event. Bar will grow according to this text. Max recommended 160 char. Ideal: 100 char.eventLinkText
: the text of the link if any.eventLinkURL
: the URL where the link must head to.
This website has a Markdown (MDX) blog. In order to write a post, you just need to create a new .mdx
file in the folder /posts
.
It is very important that the post contains a header frontmatter with the following information:
---
title: La infraestructura como c贸digo, una introducci贸n
slug: la-infraestructura-como-codigo
tags: [Clases, DevOps]
featuredImg: infra.jpg
summary: Desde el "hierro" a la "nube" han cambiado muchas cosas en el mundo de la Infraestructura y el Devops. En las 煤ltimas Winter Sessions, el profe Nacho nos ha contado c贸mo ha sido esta evoluci贸n y c贸mo se hace actualmente.
userName: nanythery
publishDate: "2021-12-06"
---
title
: The title to be shown for the postslug
: Choose the slug for this post, preferrably keep it just like file name.tags
: Write all the tags within the array that can be aplicable to this post.featuredImg
: The featured image should be uploaded to the desired folder and write here the path. It also admits images from Unsplash and Pixabay. See below for more examples.summary
: Write a summary to be shown in the featured post description.userName
: Enter the autor userName. If you don't have one, there's a generic TTStaff one.publishDate
: Enter the publish date in format "YYYY-MM-DD".
Don't forget to include the ---
before and after the fields.
You can start writing right away, following the same MarkDown format rules as usual.
MDX files allows you to insert custom components. Since this blog has a custom format, there are several custom components you can use:
- To insert images:
<CustomImage src='the full path-absolute or relative' alt="the description"/>
- To insert videos:
<YTvideo id='the id of the video' />
You can use local images by uploading them to the folder /assets/posts/ and specifing the full path without quotes in the featuredImg
field like:
featuredImg: /img/posts/infra.jpg
The web is also prepared to use image from Unsplash and Pixabay as remote locations. But in order to use them you must get the actual link to the image by right clicking on it and copying the link to the image. Like so:
featuredImg: https://cdn.pixabay.com/photo/2018/02/01/06/40/rocket-3122690_960_720.png
The web will admit images from:
- Add a new entry to staff.json, VSCode and other editors should have autocompletion based on the staff.schema.json schema.
- Add a jpg image to the team folder. The name must be the person's name in lowercase with dashes instead of spaces. For example
Rub茅n de Alba
maps toruben-de-alba.jpg
. - Optionally, add an
mp4
following the same naming as the image. This will be displayed on hover. We normally get them from https://giphy.com which allows you to download gifs as mp4. The reason to use mp4 instead of gifs is to save a ton of bandwidth.
See this commit for a real example.
- Cookie banner: we decided to postpone this banner since the website does not use cookies at the moment.
- Adding a custom check box according to the original design.
- Unify all badges used in home, blog and profes
This is a Next.js project bootstrapped with create-next-app
.
First, run the development server:
npm run dev
# or
yarn dev
Open http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying pages/index.js
. The page auto-updates as you edit the file.
API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.js
.
The pages/api
directory is mapped to /api/*
. Files in this directory are treated as API routes instead of React pages.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.