pushing changes

data/projects/projects.json

@@ -0,0 +1,23 @@
+[
+    {
+        "slug": "1No1PXOF6A88TofuMBpcGKGm3VEWG6hPV",
+        "name": "Random",
+        "dateAdded": "4-2-2024",
+        "text": "",
+        "images": []
+    },
+    {
+        "slug": "10XHgqaww72QZE6IERnNf4RlFTUVT3KIX",
+        "name": "Project 2",
+        "dateAdded": "4-2-2024",
+        "text": " <p style=\"\">Project 2\n</p> ",
+        "images": []
+    },
+    {
+        "slug": "1vZ-HBwff_sAiBSfDGxAmYx9O7aJ3mMiW",
+        "name": "Project 1",
+        "dateAdded": "4-1-2024",
+        "text": " \n  <p style=\"\">Project 1\n</p>  \n  \n  <p style=\"font-size:10.5px; font-family:\"Open Sans\"\">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ultrices quam eget est interdum hendrerit. Morbi erat ante, gravida ut porttitor sit amet, suscipit quis odio. Praesent eget malesuada ante. Aliquam ullamcorper metus sed turpis blandit, vitae pharetra nisl lacinia. Etiam ipsum ante, tempus at turpis ac, placerat hendrerit magna. Morbi a eros sed nulla sodales aliquam. Nullam rutrum justo lorem, sed blandit magna hendrerit ac. Ut congue laoreet pellentesque. Integer rhoncus, velit vitae consectetur hendrerit, augue erat laoreet ligula, vel bibendum magna ex ac neque. Aliquam congue est at ante eleifend accumsan. Quisque egestas venenatis lacus in porttitor. Cras iaculis metus quis neque dictum, quis sagittis libero elementum. Proin feugiat a velit nec congue.\n</p>  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  <b><p style=\"font-size:14.5px; font-family:\"Inter\"\">Phasellus semper maximus pretium. Vivamus placerat eros non elit posuere sollicitudin. Aenean blandit ante est, et suscipit ligula porttitor eget. Nunc dictum luctus felis, id volutpat nibh congue id. Aenean maximus metus a erat consequat, eu rutrum elit ullamcorper. Vestibulum id vulputate sem, non varius odio. Nullam </p></b>  <i><p style=\"font-size:9.5px; font-family:\"Lexend\"\">id turpis dignissim, facilisis ex sed, ullamcorper metus. Nunc id orci eget ex accumsan sodales quis posuere nibh. Praesent at massa ac nisl viverra ultricies vel in dolor. Nullam lacinia lacus ut leo cursus, et ullamcorper tortor fermentum.\n</p></i>  \n ",
+        "images": []
+    }
+]

app.js → generateGallery.js

@@ -1,7 +1,6 @@
 import { google } from "googleapis";
 import fs from "fs";
 import path from "path";
-import axios from "axios";
 import * as dotenv from "dotenv";
 dotenv.config();
 

generateProjects.js

@@ -0,0 +1,119 @@
+import { google } from "googleapis";
+import fs from "fs";
+import path from "path";
+import crypto from "crypto"
+import * as dotenv from "dotenv";
+dotenv.config();
+
+const drive = google.drive({ version: "v3", auth: process.env.GOOGLE_API_KEY });
+const oauth2Client = new google.auth.GoogleAuth({
+    keyFile: "secrets/moarloginStuff.json",
+    scopes: ["https://www.googleapis.com/auth/documents.readonly"],
+});
+
+const docs = google.docs({ version: "v1", auth: oauth2Client });
+
+let projectJSON = []
+
+function getFileName(file = "") {
+    return file.split(".").slice(0, -1).join(".");
+}
+let lineee = 0;
+async function getDocData(id=""){
+    let txt = ""
+    await docs.documents.get({
+        documentId: id,
+        fields: 'body.content'
+    }).then((val) => {
+        val.data.body.content.forEach((el) => {
+            if (el.paragraph && el.paragraph.elements) {
+                el.paragraph.elements.forEach((elm) => {
+                    let text = []
+                    if(elm.horizontalRule){
+                        text="<hr>"
+                    }
+                    else if (elm.textRun) {
+                        let style = ""
+                        text.push(elm.textRun.content)
+                        if(elm.textRun.content=="\n"){
+
+                        }else{
+                            // handles font size and familiy
+                            if(elm.textRun.textStyle){
+                                if(elm.textRun.textStyle.fontSize){
+                                    style += `font-size:${elm.textRun.textStyle.fontSize.magnitude}px; `
+                                }
+                                if(elm.textRun.textStyle.weightedFontFamily){
+                                    style += `font-family:"${elm.textRun.textStyle.weightedFontFamily.fontFamily}"`
+                                }
+                            }
+                            text.unshift(`<p style="${style}">`)
+                            text.push(`</p>`)
+                            if(elm.textRun.textStyle.bold){
+                                text.unshift("<b>")
+                                text.push("</b>")
+                            }
+                            if(elm.textRun.textStyle.italic){
+                                text.unshift("<i>")
+                                text.push("</i>")
+                            }
+                        }
+                        let finalText = text.join('')
+                        txt+=" "+finalText+" "
+                    }
+                });
+            }
+        });
+    });
+    return txt
+
+}
+async function fetchFiles(token = "") {
+    // List files in the public folder
+    const response = await drive.files.list({
+        q: `'${process.env.GOOGLE_FOLDER_ID}' in parents`,
+        pageSize: 1000,
+        //pageToken: token,
+        key: process.env.GOOGLE_API_KEY,
+        fields: 'nextPageToken, files(id, name, createdTime)'
+    });
+    if(response.data.files){
+        let folders = response.data.files
+        for(let i=0;i<folders.length;i++){
+            let folder = folders[i]
+            let date = new Date(folder.createdTime)
+            let data = {
+                slug:folder.id,
+                name:folder.name,
+                dateAdded:date.getMonth()+"-"+date.getDay()+"-"+date.getFullYear(),
+                text:"",
+                images:[]
+            }
+            let folderData = await drive.files.list({
+                q:`'${folder.id}' in parents`,
+                pageSize:200,
+                key: process.env.GOOGLE_API_KEY
+            })
+            for(let o=0;o<folderData.data.files.length;o++){
+                let folderfile = folderData.data.files[o]
+                if(folderfile.mimeType.startsWith("application/vnd.google-apps.document")){
+                    data.text = await getDocData(folderfile.id)
+                }
+            }
+            //console.log(images.data.files)
+            projectJSON.push(data)
+        }
+    }
+}
+
+await fetchFiles()
+
+await fs.writeFile(path.join(process.cwd(),"data","projects","projects.json"),JSON.stringify(projectJSON,null,4),(err)=>{
+    if(err){
+        console.log("Faliure to write file")
+        console.log("error:\n--------------------------------\n"+err)
+    }else{
+        console.log("writing file successful")
+    }
+})
+console.log("End of execution")

src/layouts/Layout.astro

@@ -1,6 +1,7 @@
 ---
 
 import { Header } from '../components/Header.tsx';
+import { ViewTransitions } from 'astro:transitions';
 import "./styles.css"
 
 interface Props {
@@ -16,6 +17,7 @@ const { title="" } = Astro.props
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<title>{title}</title>
+	<ViewTransitions />
 </head>
 <body>
 	<Header page={title} client:load/>

src/layouts/styles.css

@@ -26,6 +26,7 @@ body{
     background-color: var(--backgroundColor);
     color: white;
     font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    overflow-x: hidden;
 }
 *{
     position: relative;

src/pages/Gallery/index.astro

@@ -7,7 +7,7 @@
 ---
 <Layout title="Projects">
     <div id="CarouselControls">
-        <div id="lefto"><button id="leftBtn" onclick="backwards()">&lt;</button></div>
+        <div id="lefto"><button id="leftBtn">&lt;</button></div>
         <div id="righto"><button id="rightBtn"> &gt; </button></div>
     </div>
     <div id="ImageCarousel">
@@ -30,7 +30,7 @@
             <span id="info">Extra info</span>
             <p id="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lectus arcu bibendum at varius vel pharetra vel turpis. Consectetur adipiscing elit pellentesque habitant morbi tristique senectus. Tincidunt eget nullam non nisi est sit amet facilisis. Egestas pretium aenean pharetra magna ac placerat vestibulum. Lobortis feugiat vivamus at augue eget. Dictum sit amet justo donec enim. Id volutpat lacus laoreet non curabitur. Sit amet tellus cras adipiscing enim eu. Felis eget velit aliquet sagittis. Interdum velit laoreet id donec ultrices tincidunt. Eget arcu dictum varius duis at consectetur. Sed felis eget velit aliquet sagittis. Rhoncus urna neque viverra justo nec ultrices dui sapien eget. In metus vulputate eu scelerisque felis imperdiet proin. In fermentum posuere urna nec.</p>
         </div>
-    <script is:inline define:vars={{data}} lang="javascript">
+    <script is:inline define:vars={{data}} defer lang="javascript">
         let displayingImages = []
         let currentImage = {}
         let currentIndex = 0

src/pages/Projects/[...slug].astro

@@ -0,0 +1,28 @@
+---
+    import Layout from "../../layouts/Layout.astro"
+    import data from "../../../data/projects/projects.json"
+    import "./slug.css"
+    export async function getStaticPaths(){
+        return data.map(({slug,name,dateAdded,text,images})=>{
+            return {
+                params:{slug},
+                props:{name,dateAdded,text,images}
+            }
+        })
+    }
+    const { name, dateAdded, text, images } = Astro.props
+---
+<Layout title=`Welding Projects`>
+    <div id="main-wrapper">
+        <div id="title">
+            <h1>{name}</h1>
+            <hr>
+            <h3>Date Added: {dateAdded}</h3>
+        </div>
+        <main id="main"></main>
+    </div>
+</Layout>
+<script lang="js" define:vars={{text}}>
+    document.getElementById("main").innerHTML = text
+</script>
+

src/pages/Projects/index.astro

@@ -1,9 +1,50 @@
 ---
     import Layout from "../../layouts/Layout.astro";
-    import Projects from "./Projects.tsx";
+    import data from "../../../data/projects/projects.json"
+    import "./styles.css"
 ---
 <Layout title="Projects">
-    <div style="display: grid;">
-        <Projects />
+    <div id="projects">
+        aa
     </div>
-</Layout>
+</Layout>
+<script is:inline define:vars={{data}}>
+    let rando = 0
+    //random Number I thought of
+    //good enough random seeded number for me
+    let addingRando = [1,Math.PI,5*Math.cos(284)^2,41,Math.tan(9)*Math.sqrt(Math.cbrt(384)),Math.PI^2,2,3]
+    let randoInt = 0
+    function getRando(){
+        if(!randoInt<addingRando.length){
+            randoInt = 0
+        }else{
+            randInt++
+        }
+        return(rando[randoInt])
+    }
+    for(let i=0;i<data.length;i++){
+        let project = document.createElement("a");
+        project.href = "Projects/"+data[i].slug
+        project.className = "project"
+        if(data[i].images[0]){
+            // if the width is greater, set height to 200px
+            // if the height is greater, set width to 200px
+            // This is to bring different rectanges
+        }else{
+            project.style.width = "200px"
+        }
+            let title = document.createElement("h3");
+            title.innerText = data[i].name;
+
+            let subtitle = document.createElement("h6");
+            subtitle.innerText = data[i].dateAdded
+
+            let desc = document.createElement("p");
+            desc.innerText = "In publishing and graphic design, Lorem ipsum (/ˌlɔː.rəm ˈɪp.səm/) is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before the final copy is available. It is also used to temporarily replace text in a process called greeking, which allows designers to consider the form of a webpage or publication, without the meaning of the text influencing the design. - Wikipedia"
+
+        project.appendChild(title)
+        project.appendChild(subtitle)
+        project.appendChild(desc)
+        document.getElementById("projects").appendChild(project)
+    }
+</script>

src/pages/Projects/slug.css

@@ -0,0 +1,25 @@
+#main-wrapper{
+    width: 50vw;
+    max-width: 100vw;
+
+    display: grid;
+    justify-items: stretch;
+    row-gap: 25px;
+
+    margin:10px auto;
+}
+#main-wrapper > *{
+    background-color: rgb(90, 115, 145);
+    border-radius: 5px;
+    padding:5px;
+}
+#main-wrapper > #title > *{
+    margin:5px;
+}
+main{
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+
+    padding:10px;
+}

src/pages/Projects/styles.css

@@ -1,10 +1,13 @@
-#Projects{
-    display: flex;
-    align-items: center;
-
-    overflow-y: scroll;
+.project{
+    display: grid;
+
+    border: 1px solid white;
+    border-radius: 10px;
+    background-color: rgba(36.33760937330989, 167.88703417231812, 65.1662236216307, 0.5);
+
+    padding:10px;
+    color: white;
 }
-.Project:hover{
-    text-shadow: 0 0 2px whitesmoke;
-    box-shadow: 0 0 5px 5px inherit;
+.project > *{
+    margin: 2px;
 }