rcaetano/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Creating and Deploying a Vault in Akord

Akord provides a decentralized platform for users to securely store and share their digital assets. One of its features is the ability to create a Vault, which can be thought of as a secure container for your digital files. In this article, we'll walk you through the steps to set up a Vault in Akord, upload files, and publish a manifest to make your content accessible via the Permaweb.
Step 1: Setting Up Your Vault


Navigate to Akord: Open your web browser and head to v2.akord.com.
Create a New Public Vault: Once on the platform, initiate the process to create a new 'public' vault. This vault will be accessible to anyone on the permaweb, making it perfect for sharing content like photo galleries.

Step 2: Uploading Your Content


Create a 'photos' Folder: Within your newly created vault, set up a folder named photos. This will be the designated space for all the images you wish to display in your gallery.
Upload Images: Drag and drop, or manually select and upload all the images you want in your gallery into the photos folder.
Edit body.md: This file will serve as the content section below your gallery. Use a markdown editor or any text editor to add the desired content to body.md.
Upload Additional Files: Alongside your photos folder, upload the index.html and body.md files to your vault. These files will dynamically present the images and content of your gallery.

Step 3: Publishing the Manifest


Add a Manifest: From the vault menu, select 'Add Manifest'. A set of instructions will guide you through the process. The manifest.json file will contain a list of all your files and map them to their identifiers so that they are available from the permaweb.
Network Confirmation: After adding your manifest, allow approximately 10 minutes for the network to confirm your actions. This duration ensures that your content is securely and correctly stored on the decentralized network.
Retrieve File Info: Once confirmed, locate the manifest.json row. Click on the adjacent menu and select 'File Info'.
Copy the Permaweb Link: Within the file information, you'll find a 'Permaweb link'. Copy this link.

Step 4: Accessing Your Gallery


Open in Permaweb: With the 'Permaweb link' copied, paste it into your browser's address bar and hit enter. Your gallery, complete with the images and content from body.md, will now be accessible from anywhere via the Permaweb.

Conclusion

Akord's integration with the Permaweb offers users a seamless way to store, share, and access content in a decentralized manner. By following the steps above, you can easily set up a photo gallery, ensuring your memories are not only beautifully displayed but also securely stored. Whether you're a photographer looking to showcase your work or someone wanting to share memories with loved ones, Akord's Vault feature provides a robust solution.

  
## body.md

      
    Raw
  

              body.md
            
          
    Welcome to my Gallery

Feel free to browse these photos, forever preserved on the Arweave blockchain

  
## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Photo Gallery</title>
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap"
      rel="stylesheet"
    />
    <script src="marked.min.js"></script>
    <style>
      body {
        font-family: "Roboto", sans-serif;
        background-color: #f4f4f4;
        color: #333;
      }
      header {
        text-align: center;
        padding: 20px;
      }
      h1,
      h2 {
        margin: 0;
      }
      h1 {
        font-weight: 700;
        font-size: 2em;
      }
      h2 {
        font-weight: 300;
        margin-top: 10px;
      }
      #gallery {
        max-width: 800px;
        margin: 20px auto;
        position: relative;
      }
      #gallery img {
        width: 100%;
        height: auto;
        display: block;
      }
      #thumbnails {
        display: flex;
        overflow-x: auto;
        gap: 10px;
        padding: 10px 0;
      }

      #thumbnails img {
        cursor: pointer;
        opacity: 0.6;
        transition: opacity 0.3s;
        width: calc(
          33.33% - 10px
        ); /* Adjusted width to fit 3 images with a gap */
        height: auto;
      }

      #thumbnails img:hover {
        opacity: 1;
      }

      .arrow {
        position: absolute;
        top: 87%;
        transform: translateY(-50%);
        font-size: 2em;
        cursor: pointer;
        background-color: rgba(255, 255, 255, 0.7);
        padding: 10px;
        z-index: 10;
        user-select: none;
      }

      #arrow-left {
        left: 0;
      }

      #arrow-right {
        right: 0;
      }

      #content {
        max-width: 800px;
        margin: 20px auto;
        background-color: #fff;
        padding: 20px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      }
    </style>
  </head>
  <body>
    <header>
      <h1>Photo Gallery</h1>
      <h2>Subtle Shades of Gray</h2>
    </header>

    <div id="gallery">
      <img id="mainImage" src="" alt="Main Image" />
      <div id="arrow-left" class="arrow">&lt;</div>
      <div id="thumbnails"></div>
      <div id="arrow-right" class="arrow">&gt;</div>
    </div>

    <div id="content"></div>

    <script>
      fetch("manifest.json")
        .then((response) => response.json())
        .then((data) => {
          const photoPaths = Object.keys(data.paths).filter((path) =>
            path.startsWith("photos/")
          );
          const thumbnailsDiv = document.getElementById("thumbnails");
          photoPaths.forEach((path) => {
            console.log(path);
            const img = document.createElement("img");
            img.src = path;
            img.onclick = () =>
              (document.getElementById("mainImage").src = path);
            thumbnailsDiv.appendChild(img);
          });
          document.getElementById("mainImage").src = photoPaths[0];
        });

      fetch("body.md")
        .then((response) => response.text())
        .then((data) => {
          // Simple markdown to HTML conversion for the sake of this example
          const content = data
            .replace(/## (.+)/g, "<h2>$1</h2>")
            .replace(/# (.+)/g, "<h1>$1</h1>")
            .replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>")
            .replace(/\n/g, "<br>");
          document.getElementById("content").innerHTML = content;
        });

      document.getElementById("arrow-left").addEventListener("click", () => {
        const thumbnailsDiv = document.getElementById("thumbnails");
        thumbnailsDiv.scrollBy({
          top: 0,
          left: -thumbnailsDiv.offsetWidth / 3, // Scroll by one-third of the container's width
          behavior: "smooth",
        });
      });

      document.getElementById("arrow-right").addEventListener("click", () => {
        const thumbnailsDiv = document.getElementById("thumbnails");
        thumbnailsDiv.scrollBy({
          top: 0,
          left: thumbnailsDiv.offsetWidth / 3, // Scroll by one-third of the container's width
          behavior: "smooth",
        });
      });
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Photo Gallery</title>
	<link
	href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap"
	rel="stylesheet"
	/>
	<script src="marked.min.js"></script>
	<style>
	body {
	font-family: "Roboto", sans-serif;
	background-color: #f4f4f4;
	color: #333;
	}
	header {
	text-align: center;
	padding: 20px;
	}
	h1,
	h2 {
	margin: 0;
	}
	h1 {
	font-weight: 700;
	font-size: 2em;
	}
	h2 {
	font-weight: 300;
	margin-top: 10px;
	}
	#gallery {
	max-width: 800px;
	margin: 20px auto;
	position: relative;
	}
	#gallery img {
	width: 100%;
	height: auto;
	display: block;
	}
	#thumbnails {
	display: flex;
	overflow-x: auto;
	gap: 10px;
	padding: 10px 0;
	}

	#thumbnails img {
	cursor: pointer;
	opacity: 0.6;
	transition: opacity 0.3s;
	width: calc(
	33.33% - 10px
	); /* Adjusted width to fit 3 images with a gap */
	height: auto;
	}

	#thumbnails img:hover {
	opacity: 1;
	}

	.arrow {
	position: absolute;
	top: 87%;
	transform: translateY(-50%);
	font-size: 2em;
	cursor: pointer;
	background-color: rgba(255, 255, 255, 0.7);
	padding: 10px;
	z-index: 10;
	user-select: none;
	}

	#arrow-left {
	left: 0;
	}

	#arrow-right {
	right: 0;
	}

	#content {
	max-width: 800px;
	margin: 20px auto;
	background-color: #fff;
	padding: 20px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	}
	</style>
	</head>
	<body>
	<header>
	<h1>Photo Gallery</h1>
	<h2>Subtle Shades of Gray</h2>
	</header>

	<div id="gallery">
	<img id="mainImage" src="" alt="Main Image" />
	<div id="arrow-left" class="arrow"><</div>
	<div id="thumbnails"></div>
	<div id="arrow-right" class="arrow">></div>
	</div>

	<div id="content"></div>

	<script>
	fetch("manifest.json")
	.then((response) => response.json())
	.then((data) => {
	const photoPaths = Object.keys(data.paths).filter((path) =>
	path.startsWith("photos/")
	);
	const thumbnailsDiv = document.getElementById("thumbnails");
	photoPaths.forEach((path) => {
	console.log(path);
	const img = document.createElement("img");
	img.src = path;
	img.onclick = () =>
	(document.getElementById("mainImage").src = path);
	thumbnailsDiv.appendChild(img);
	});
	document.getElementById("mainImage").src = photoPaths[0];
	});

	fetch("body.md")
	.then((response) => response.text())
	.then((data) => {
	// Simple markdown to HTML conversion for the sake of this example
	const content = data
	.replace(/## (.+)/g, "<h2>$1</h2>")
	.replace(/# (.+)/g, "<h1>$1</h1>")
	.replace(/\\(.+?)\\/g, "<strong>$1</strong>")
	.replace(/\n/g, "<br>");
	document.getElementById("content").innerHTML = content;
	});

	document.getElementById("arrow-left").addEventListener("click", () => {
	const thumbnailsDiv = document.getElementById("thumbnails");
	thumbnailsDiv.scrollBy({
	top: 0,
	left: -thumbnailsDiv.offsetWidth / 3, // Scroll by one-third of the container's width
	behavior: "smooth",
	});
	});

	document.getElementById("arrow-right").addEventListener("click", () => {
	const thumbnailsDiv = document.getElementById("thumbnails");
	thumbnailsDiv.scrollBy({
	top: 0,
	left: thumbnailsDiv.offsetWidth / 3, // Scroll by one-third of the container's width
	behavior: "smooth",
	});
	});
	</script>
	</body>
	</html>