For this project, I have developed an interactive e-textiles archive showing the Kunst Universität Linz’s Interface Cultures master’s students’ work. For this website, I have produced 14 project pages, a home page, an about page, a search query page, 8 tutorial pages and a project gallery page. The purpose of this document is to ensure that other users can add more content to the website in an easy manner. As well as ensuring that the content is maintainable and can be updated when needed.
The website is hosted at: Setting up the repository:
- Install Visual Studio Code (suitable for Windows and Mac). https://code.visualstudio.com
- Install the latest Git version. https://git-scm.com/install/
- Once in the terminal type: git config --global user.name "Your Name" git config --global user.email "your.email@example.com" (These should be the same as your Git account).
- Click on ‘Clone a repository’.
- Click on ‘Clone from GitHub’
- Go to the Git repository (https://github.com/maltepeter2000/soundingtextiles/tree/main)
- Click on the code button and copy the https link.
- Paste this into the search bar after step 5.
- It should ask where you would like to store the project, create a new folder and name it ‘soundingTextiles’. Now, the next time you want to open this project, simply find this folder on your computer, and it will automatically connect. Uploading New contents:
-
Insert the project cover photo into ‘soundingtextiles/src/assets/Projects’
-
Ensure its name is ‘projectTitle.webp’
-
Insert the authors’ images into ‘soundingtextiles/src/assets/Author Images’.
-
Ensure each name is ‘firstnameSurname.jpg’
-
Go to ‘soundingtextiles/src/assets/student_projects’.
-
Create a new folder within this folder called ‘project_title_images’.
-
Once in that folder, insert all the videos and photos.
-
Go to ‘soundingtextiles/src/data/projects.ts’.
-
Insert: { id: (last number + 1), title: "Project Name ", slug: "project-name", authors: ["Surname, Firstname"], date: "Year", description: "Descriptive text”, processingTechniques: [""], conductiveMaterials: [“"], type: "project", link: "Path to cover photo location in repository” },
-
Repeat step 9 until all new projects have been added.
-
For each author, go to ‘soundingtextiles/src/data/authors.ts’.
-
Insert: { id: (last number + 1), name: "Firstname Lastname", slug: "firstname-lastname", website: "Link to personal website", Instagram: " Link to personal Instagram ", photos: "link to path of profile picture" },
-
Repeat step 12 until all new authors have been added. If you don’t have the link to the website, Instagram or photo, just leave the string empty.
-
Go to ‘ soundingtextiles/src/pages/ProjectGallery ‘ and duplicate ‘soundingtextiles/src/pages/ProjectGallery/projectTemplate.tsx’.
-
Rename the file to ‘projectTitle.tsx’.
-
Fill in the information as commented in the image above.
-
To insert the images and videos, insert the path to them inside the folder created in step 6.
-
Navigate to ‘soundingtextiles/src/routes/AppRoutes.tsx’.
-
(Approx line 30) insert ‘import ProjectTitle from "../pages/ProjectGallery/project-title";’
-
(Approx Line 68) At the bottom of the content on the page, insert ‘<Route path="/projects/your-project-title" element={} />’
Additionally, before any changes are officially made to the repository, it would be beneficial to test it locally.
- Open the terminal
- Type ‘npm run dev’
- The link to the local host should appear. Once it does, copy and paste it into your local browser.
- Closing the terminal will stop the website from running.
- To upload this to the main repository, open the source control window.
- Type in a message in the commit section. Then click commit.
- It will ask if you would like to stage all changes. Click yes.
- Then click on the sync button, it will ask if you want to push and pull, click ok.