🚑️ Add <Image /> + `next export` improvements
The <Image /> component makes prepends the basePath to the image src. This makes all <img /> work with `next export` correctly.
This commit is contained in:
parent
4393037e94
commit
8a9935ba27
|
@ -2,7 +2,6 @@
|
|||
"recommendations": [
|
||||
"dbaeumer.vscode-eslint",
|
||||
"humao.rest-client",
|
||||
"silvenon.mdx",
|
||||
"xyc.vscode-mdx-preview"
|
||||
"silvenon.mdx"
|
||||
]
|
||||
}
|
|
@ -1,5 +1,6 @@
|
|||
import React, { ReactNode } from "react";
|
||||
// import { Button } from "./Button";
|
||||
import { Image } from "./Image";
|
||||
import { EventSetting } from "./EventSetting";
|
||||
import styles from "./EventDescriptionCard.module.css";
|
||||
|
||||
|
@ -37,7 +38,7 @@ const links = {
|
|||
export function EventDescriptionCard(props: Props) {
|
||||
return (
|
||||
<article className={styles.card}>
|
||||
<img className={styles.poster} src={props.poster} alt={props.name} />
|
||||
<Image className={styles.poster} src={props.poster} alt={props.name} />
|
||||
|
||||
<div className={styles.details}>
|
||||
<h3 className={styles.name}>{props.name}</h3>
|
||||
|
@ -60,7 +61,7 @@ export function EventDescriptionCard(props: Props) {
|
|||
)}
|
||||
{props.online && (
|
||||
<a target="_blank" href={links[props.location]} rel="noreferrer">
|
||||
<img
|
||||
<Image
|
||||
className={styles.logo}
|
||||
alt={props.location}
|
||||
src={"logos/" + props.location + ".png"}
|
||||
|
|
|
@ -0,0 +1,16 @@
|
|||
import React, { ImgHTMLAttributes } from "react";
|
||||
|
||||
export function Image(props: ImgHTMLAttributes<HTMLImageElement>) {
|
||||
const { src: relativeSrc = "" } = props;
|
||||
|
||||
let absoluteSrc = process.env.BASE_PATH ?? "/";
|
||||
if (absoluteSrc.endsWith("/") && relativeSrc.startsWith("/")) {
|
||||
absoluteSrc += relativeSrc.slice(1);
|
||||
} else if (absoluteSrc.endsWith("/") || relativeSrc.startsWith("/")) {
|
||||
absoluteSrc += relativeSrc;
|
||||
} else {
|
||||
absoluteSrc += "/" + relativeSrc;
|
||||
}
|
||||
|
||||
return <img {...props} src={absoluteSrc} />;
|
||||
}
|
|
@ -29,6 +29,10 @@
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
.logo img {
|
||||
width: 96px;
|
||||
}
|
||||
|
||||
.navMenu {
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
import React from "react";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
import { Image } from "./Image";
|
||||
import styles from "./Navbar.module.css";
|
||||
|
||||
interface NavLink {
|
||||
|
@ -98,12 +98,7 @@ export function Navbar() {
|
|||
<div className={styles.navContent}>
|
||||
<Link href="/">
|
||||
<a className={styles.logo}>
|
||||
<Image
|
||||
src="/images/logo-icon.png"
|
||||
width={96}
|
||||
height={42}
|
||||
alt="CSC Logo"
|
||||
/>
|
||||
<Image src="/images/logo-icon.png" alt="CSC Logo" />
|
||||
</a>
|
||||
</Link>
|
||||
<ul className={styles.navMenu}>
|
||||
|
|
|
@ -83,7 +83,7 @@ export function EventDescriptionCardDemo() {
|
|||
date={date}
|
||||
online={true}
|
||||
location="Twitch"
|
||||
poster="images/playground/intro-ootb.jpg"
|
||||
poster="/images/playground/intro-ootb.jpg"
|
||||
registerLink="/"
|
||||
>
|
||||
<p>{short}</p>
|
||||
|
@ -93,7 +93,7 @@ export function EventDescriptionCardDemo() {
|
|||
date={date}
|
||||
online={true}
|
||||
location="Twitch"
|
||||
poster="images/playground/alt-tab.jpg"
|
||||
poster="/images/playground/alt-tab.jpg"
|
||||
registerLink="/"
|
||||
>
|
||||
<p>{short}</p>
|
||||
|
@ -103,7 +103,7 @@ export function EventDescriptionCardDemo() {
|
|||
date={date}
|
||||
online={true}
|
||||
location="Twitch"
|
||||
poster="images/playground/intro-ootb.jpg"
|
||||
poster="/images/playground/intro-ootb.jpg"
|
||||
registerLink="/"
|
||||
>
|
||||
<p>{short}</p>
|
||||
|
|
|
@ -1,7 +1,9 @@
|
|||
const withMDX = require('@next/mdx')({
|
||||
extension: /\.mdx$/
|
||||
})
|
||||
const withMDX = require("@next/mdx")({
|
||||
extension: /\.mdx$/,
|
||||
});
|
||||
|
||||
module.exports = withMDX({
|
||||
pageExtensions: ['ts', 'tsx', 'mdx']
|
||||
})
|
||||
pageExtensions: ["ts", "tsx", "mdx"],
|
||||
trailingSlash: true,
|
||||
basePath: process.env.BASE_PATH,
|
||||
});
|
||||
|
|
Loading…
Reference in New Issue