JohnCosta27/JohnTech
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

migrating to astro

Browse Source
This commit is contained in:
John Costa
2022-08-15 22:29:21 +01:00
parent a5b8a6a3e0
commit a3a94feb7a
8 changed files with 3186 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
astro.config.mjs Normal file
View File

@ -0,0 +1,11 @@
import { defineConfig } from "astro/config";
import mdx from "@astrojs/mdx";
import react from "@astrojs/react";
import sitemap from "@astrojs/sitemap";
// https://astro.build/config
export default defineConfig({
site: "https://example.com",
integrations: [react(), mdx(), sitemap()],
});

6
package.json
View File

@ -4,6 +4,8 @@
"description": "Personal website",
"main": "index.js",
"scripts": {
"astro:build": "astro build",
"astro:dev": "astro dev",
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
@ -17,6 +19,10 @@
"vite": "^2.9.1"
},
"dependencies": {
"@astrojs/mdx": "^0.9.0",
"@astrojs/react": "^1.0.0",
"@astrojs/sitemap": "^1.0.0",
"astro": "^1.0.5",
"clsx": "^1.1.1",
"prop-types": "^15.8.1",
"react": "^17.0.2",

3209
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

29
src/components/core/FadeComponent.jsx
View File

@ -1,34 +1,13 @@
//============================================================
// Essential Imports
//============================================================
import clsx from "clsx";
import React, { useEffect, useState } from "react";
//============================================================
// Component
//============================================================
import React from "react";
const FadeComponent = ({ delay, children }) => {
const [showComponent, setShowComponent] = useState("opacity-0");
useEffect(() => {
const timer = setTimeout(() => {
setShowComponent("opacity-100");
}, delay);
return () => {
clearTimeout(timer);
};
}, []);
return (
<div className="w-full bg-polar-night-400">
<div
className={clsx(
"w-full transition-all ease-in-out duration-500 ",
showComponent
)}
className={
"w-full transition-all ease-in-out duration-500"
}
>
{children}
</div>

3
src/components/pages/Front.page.jsx → src/components/pages/FrontPage.jsx
View File

@ -3,6 +3,7 @@
//============================================================
import React from "react";
import '../../index.css';
//============================================================
// Imported Components
@ -19,7 +20,7 @@ import Projects from '../sections/Projects';
// Component
//============================================================
const DELAY = 750;
const DELAY = 0;
const FrontPage = () => {
return (

29
src/components/text/AppearText.jsx
View File

@ -1,35 +1,10 @@
//============================================================
// Essential Imports
//============================================================
import React, { useState, useEffect } from "react";
import clsx from "clsx";
//============================================================
// Component
//============================================================
import clsx from 'clsx';
const AppearText = ({ text, delay, className }) => {
const [showText, setShowText] = useState("opacity-0");
useEffect(() => {
const timer = setTimeout(() => {
setShowText("opacity-100");
}, delay);
return () => {
clearTimeout(timer);
};
}, []);
return (
<>
<h1
className={clsx(
"transition-all ease-in-out duration-500",
className,
showText
)}
className={clsx("transition-all ease-in-out duration-500", className)}
>
{text}
</h1>

11
src/pages/index.astro Normal file
View File

@ -0,0 +1,11 @@
---
import FrontPage from '../components/pages/FrontPage';
---
<html>
<head>
<title>My Homepage</title>
</head>
<body>
<FrontPage></FrontPage>
</body>
</html>

5
src/pages/test.md Normal file
View File

@ -0,0 +1,5 @@
---
---
# Hello world
## Just testing