Skip to content

Commit

Permalink
added projects, made front page look better.
Browse files Browse the repository at this point in the history
  • Loading branch information
@Cyborgnetical
Cyborgnetical committed Jun 4, 2024
1 parent 069938a commit 257e6f8
Show file tree
Hide file tree
Showing 7 changed files with 154 additions and 27 deletions.
10 changes: 8 additions & 2 deletions data/projects/projects.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,21 +3,27 @@
"slug": "1No1PXOF6A88TofuMBpcGKGm3VEWG6hPV",
"name": "Random",
"dateAdded": "4-2-2024",
"desc": "",
"displayURL": "",
"text": "",
"images": []
},
{
"slug": "10XHgqaww72QZE6IERnNf4RlFTUVT3KIX",
"name": "Project 2",
"dateAdded": "4-2-2024",
"text": " <p style=\"\">Project 2\n</p> ",
"desc": "",
"displayURL": "",
"text": "",
"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 ",
"desc": " <p style=\"\">This is the example of a welding project\n</p> ",
"displayURL": "https://lh3.googleusercontent.com/d/1hX0sTKNxhq4SbW9DUL15KfYq4Jd2UEbn",
"text": " \n \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": []
}
]
38 changes: 35 additions & 3 deletions generateProjects.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,24 @@ function getFileName(file = "") {
return file.split(".").slice(0, -1).join(".");
}
let lineee = 0;
function isImage(element) {
// Check if the element is a table (which images are represented as)
if (!element.table) return false;

// Iterate through rows in the table
for (let row of element.table.rows) {
// Iterate through cells in the row
for (let cell of row.cells) {
// Check if the cell contains an image
if (cell.image) {
return true; // Found an image
}
}
}

return false; // No image found
}

async function getDocData(id=""){
let txt = ""
await docs.documents.get({
Expand Down Expand Up @@ -71,12 +89,13 @@ async function getDocData(id=""){
async function fetchFiles(token = "") {
// List files in the public folder
const response = await drive.files.list({
q: `'${process.env.GOOGLE_FOLDER_ID}' in parents`,
q: `'${process.env.GOOLGE_FOLDER_ID_PROJECTS}' in parents`,
pageSize: 1000,
//pageToken: token,
key: process.env.GOOGLE_API_KEY,
fields: 'nextPageToken, files(id, name, createdTime)'
});
// if folder exists
if(response.data.files){
let folders = response.data.files
for(let i=0;i<folders.length;i++){
Expand All @@ -86,6 +105,8 @@ async function fetchFiles(token = "") {
slug:folder.id,
name:folder.name,
dateAdded:date.getMonth()+"-"+date.getDay()+"-"+date.getFullYear(),
desc:"",
displayURL:"",
text:"",
images:[]
}
Expand All @@ -96,10 +117,20 @@ async function fetchFiles(token = "") {
})
for(let o=0;o<folderData.data.files.length;o++){
let folderfile = folderData.data.files[o]
// if it doc
if(folderfile.mimeType.startsWith("application/vnd.google-apps.document")){
data.text = await getDocData(folderfile.id)
if(folderfile.name == "Post"){
data.text = await getDocData(folderfile.id)
}else if(folderfile.name == "Desc"){
data.desc = await getDocData(folderfile.id)
}
}else if(folderfile.mimeType.startsWith("image/") && getFileName(folderfile.name).toLowerCase() == "display" ){
data.displayURL = `https://lh3.googleusercontent.com/d/${folderfile.id}`
}else if(folderfile.mimeType.startsWith("image/")){
data.images.push(`https://lh3.googleusercontent.com/d/${folderfile.id}`)
}
}

//console.log(images.data.files)
projectJSON.push(data)
}
Expand All @@ -108,12 +139,13 @@ async function fetchFiles(token = "") {

await fetchFiles()

await fs.writeFile(path.join(process.cwd(),"data","projects","projects.json"),JSON.stringify(projectJSON,null,4),(err)=>{
await fs.writeFileSync(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")
3 changes: 3 additions & 0 deletions public/Vector 1.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion src/layouts/Layout.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ const { title="" } = Astro.props
<ViewTransitions />
</head>
<body>
<Header page={title} client:load/>
<Header page={title} client:load transition:persist/>
<slot />
</body>
</html>
33 changes: 25 additions & 8 deletions src/pages/Projects/index.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,12 @@
---
<Layout title="Projects">
<div id="projects">
aa
</div>
</Layout>
<script is:inline define:vars={{data}}>
let projects = document.getElementById("projects")
//projects.style.gridAutoRows = `repeat(${data.length/5},1fr)`

let rando = 0
//random Number I thought of
//good enough random seeded number for me
Expand All @@ -18,29 +20,44 @@
if(!randoInt<addingRando.length){
randoInt = 0
}else{
randInt++
randoInt++
}
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]){
project.style.width = "200px"


if(data[i].displayURL != ""){
let img = document.createElement("img")
img.src = data[i].displayURL
let ratio = img.width/img.height
// 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"
if(img.width > img.height){
img.style.height = "200px";
}else{
img.style.width = "200px";
}
project.style.width = `${200*ratio}px`
project.appendChild(img)
}


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"
if(data[i].desc != ""){
desc.innerHTML = data[i].desc
}else{
desc.innerHTML = "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)
Expand Down
21 changes: 19 additions & 2 deletions src/pages/Projects/styles.css
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,30 @@
.project{
#projects{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
align-items: center;
justify-items: center;
}

.project{
display: inline-grid;

border: 1px solid white;
border-radius: 10px;
background-color: rgba(36.33760937330989, 167.88703417231812, 65.1662236216307, 0.5);
/*background-color: rgba(36.33760937330989, 167.88703417231812, 65.1662236216307, 0.5);*/

padding:10px;
margin:5px;
text-decoration: none;
color: white;

transition: 250ms;
}
.project:hover{
box-shadow: 0 0 5px 5px rgb(140, 182, 255);
}
.project > *{
margin: 2px;
}
.project > p{
text-decoration: underline;
}
74 changes: 63 additions & 11 deletions src/pages/index.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,34 +2,87 @@
import Image from "astro/components/Image.astro";
import Layout from "../layouts/Layout.astro";
import main from "./main.js"
---

<Layout title="Home">
<div id="Main-Display">
<h1>
<span style="overflow-x: hidden;">Parlier</span>
<span style="color:#80b9ff;" id="slideInLeft">Welding Club</span>
</h1>

<div>
<h1>
<span style="overflow-x: hidden;">Parlier</span>
<span style="color:#80b9ff;" id="slideInLeft">Welding Club</span>
</h1>
<a href="/Parlier-Welding-Website/Projects" id="btn-wrapper"><button>Check out our work</button> </a>
</div>
<!-- <button>Check out our work</button> -->
<p><b>
Welding stuff and more text
</b></p>
<svg width="200" height="200" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg" id="triangle" style="transform: scaleX(-1); left:0px">
<path d="M100 100V0L0 100H100Z" fill="var(--backgroundColor)"/>
</svg>
<svg width="200" height="200" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg" id="triangle" style=" right:0px">
<path d="M100 100V0L0 100H100Z" fill="var(--backgroundColor)"/>
</svg>
</div>
</Layout>
<style is:global>
<style>
#triangle{
position:absolute;
bottom:0px;

margin:0px;
}
#left{
transform: scaleX(-1);
left:0px
}
#right{
right:0px;
}
h1{
display:flex;
font-size:36px;
column-gap:5px;
}
h1 span{
padding:10px;
}
h1 span:nth-child(1){
border-top: 1px solid white;
border-left: 1px solid white;
}
h1 span:nth-child(2){
border-bottom: 1px solid white;
border-right: 1px solid white;
}
img{
width: 100vw;
height: auto;
}
#Main-Display{
position:relative;

display: grid;
align-items: center;
justify-items: center;
grid-template-columns: 1fr 1fr;

height: 600px;
height: 500px;


background-image: url("https://weldernation.com/cdn/shop/files/WN_BeanieCollection_Homepage_1800x1000_caf1ceda-8640-402e-add0-38ffcd647294_3000x.jpg?v=1694449280");
object-fit: cover;
background-image: url("https://lh3.googleusercontent.com/d/1FOLup-5KkMDrlTATgjSVyKR1h4vu195f");
background-repeat: no-repeat;
background-position: center center;
object-fit: cover
}
#Main-Display p{
color: azure;
font-size:15px;
}
button{
margin-block:20px;
}
#slideInLeft{
overflow-x: hidden;
Expand All @@ -48,7 +101,6 @@ import main from "./main.js"

position: absolute;
right:0px;

animation: fadeAway 1s;

}
Expand Down

0 comments on commit 257e6f8

Please sign in to comment.