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", "description": "Personal website",
"main": "index.js", "main": "index.js",
"scripts": { "scripts": {
"astro:build": "astro build",
"astro:dev": "astro dev",
"dev": "vite", "dev": "vite",
"build": "vite build", "build": "vite build",
"preview": "vite preview" "preview": "vite preview"
@ -17,6 +19,10 @@
"vite": "^2.9.1" "vite": "^2.9.1"
}, },
"dependencies": { "dependencies": {
"@astrojs/mdx": "^0.9.0",
"@astrojs/react": "^1.0.0",
"@astrojs/sitemap": "^1.0.0",
"astro": "^1.0.5",
"clsx": "^1.1.1", "clsx": "^1.1.1",
"prop-types": "^15.8.1", "prop-types": "^15.8.1",
"react": "^17.0.2", "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 @@
//============================================================ import React from "react";
// Essential Imports
//============================================================
import clsx from "clsx";
import React, { useEffect, useState } from "react";
//============================================================
// Component
//============================================================
const FadeComponent = ({ delay, children }) => { const FadeComponent = ({ delay, children }) => {
const [showComponent, setShowComponent] = useState("opacity-0");
useEffect(() => {
const timer = setTimeout(() => {
setShowComponent("opacity-100");
}, delay);
return () => {
clearTimeout(timer);
};
}, []);
return ( return (
<div className="w-full bg-polar-night-400"> <div className="w-full bg-polar-night-400">
<div <div
className={clsx( className={
"w-full transition-all ease-in-out duration-500 ", "w-full transition-all ease-in-out duration-500"
showComponent }
)}
> >
{children} {children}
</div> </div>

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

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

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

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