YEW Template

2024-01-18 22:43:48 +00:00
9 changed files with 191 additions and 0 deletions
--- a/Cargo.toml
+++ b/Cargo.toml
@ -0,0 +1,19 @@
+[package]
+name = "trunk-template"
+version = "0.1.0"
+edition = "2021"
+description = "Template for starting a Yew project using Trunk"
+readme = "README.md"
+repository = "https://github.com/yewstack/yew-trunk-minimal-template"
+license = "MIT OR Apache-2.0"
+keywords = ["yew", "trunk"]
+categories = ["gui", "wasm", "web-programming"]
+
+# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
+[dependencies]
+ipfs-car = "1.1.0"
+js-sys = "0.3.66"
+once_cell = "1.18.0"
+wasm-bindgen = "0.2.89"
+wasm-bindgen-futures = "0.4.39"
+yew = { version="0.20", features=["csr"] }
--- a/index.html
+++ b/index.html
@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>DECA NFTs</title>
+    <script scr="/js/script.js"></script>
+    <link data-trunk rel="sass" href="index.scss" />
+  </head>
+</html>
--- a/index.scss
+++ b/index.scss
@ -0,0 +1,25 @@
+html,
+body {
+  height: 100%;
+  margin: 0;
+}
+
+body {
+  align-items: left;
+  display: flex;
+  justify-content: center;
+
+  background: linear-gradient(#cfb0da 42.44%, #a530e4);
+  font-size: 1.5rem;
+}
+
+main {
+  color: #340034;
+  font-family: TimesNewRoman;
+  text-align: center;
+}
+
+h1 + .subtitle {
+  display: block;
+  margin-top: -1em;
+}
--- a/js/car.js
+++ b/js/car.js
@ -0,0 +1,47 @@
+/* eslint-env browser */
+import varint from 'varint'
+import { encode as cborEncode } from '@ipld/dag-cbor'
+
+/**
+ * @param {import('multiformats').UnknownLink[]} roots
+ * @returns {Uint8Array}
+ */
+function encodeHeader (roots) {
+  const headerBytes = cborEncode({ version: 1, roots })
+  const varintBytes = varint.encode(headerBytes.length)
+  const header = new Uint8Array(varintBytes.length + headerBytes.length)
+  header.set(varintBytes, 0)
+  header.set(headerBytes, varintBytes.length)
+  return header
+}
+
+/**
+ * @param {import('@ipld/unixfs').Block} block
+ * @returns {Uint8Array}
+ */
+function encodeBlock (block) {
+  const varintBytes = varint.encode(block.cid.bytes.length + block.bytes.length)
+  const bytes = new Uint8Array(varintBytes.length + block.cid.bytes.length + block.bytes.length)
+  bytes.set(varintBytes)
+  bytes.set(block.cid.bytes, varintBytes.length)
+  bytes.set(block.bytes, varintBytes.length + block.cid.bytes.length)
+  return bytes
+}
+
+/**
+ * @extends {TransformStream<import('@ipld/unixfs').Block, Uint8Array>}
+ */
+export class CAREncoderStream extends TransformStream {
+  /** @param {import('multiformats').UnknownLink[]} roots */
+  constructor (roots = []) {
+    super({
+      start: (controller) => controller.enqueue(encodeHeader(roots)),
+      transform: (block, controller) => {
+        controller.enqueue(encodeBlock(block))
+        this.finalBlock = block
+      }
+    })
+    /** @type {import('@ipld/unixfs').Block?} */
+    this.finalBlock = null
+  }
+}
--- a/js/script.js
+++ b/js/script.js
@ -0,0 +1,5 @@
+export function get_now_date() {
+    console.log("get_now_date called!");
+    var curr_date = new Date();
+    return curr_date.toDateString();
+}
--- a/js/script2.js
+++ b/js/script2.js
@ -0,0 +1,35 @@
+export async function getObj(i) {
+    let url = 'https://gateway.decentralizedscience.org/ipfs/bafybeiai4g5mluuwr4ds34jkqi4kojsrqxrcetntkp5tf76jhx6mccrybu/'+i+'.json';
+    let obj = await (await fetch(url)).json();
+   
+    //console.log(obj);
+    return obj;
+}
+
+var tags;
+export async function createDiv() {
+    for (var i=1; i<=68; i++) {
+          tags = await get(i);
+          var divTag = document.createElement("div");
+          divTag.id = "div"+i;
+          divTag.className = "responsive";
+          divTag.innerHTML = "<div class='gallery'>"+
+          "<a target='_blank' href='"+tags.image+"'>"+
+          "<img src='"+tags.image+"' alt='"+tags.name+"' width='256' height='256'>"+
+          "</a>"+
+          "<div class='name'>"+tags.name+"</div>"+
+          "<div class='desc'>"+tags.description+"</div>"+
+            "<div class='properties'>"+
+              "<details class='details-example'>"+
+                "<summary>Properties</summary>"+
+                  "<ul>"+
+                     "<li>"+tags.attributes[0].trait_type+": <b>"+tags.attributes[0].value+"</b></li>"+
+                     "<li>"+tags.attributes[1].trait_type+": <b>"+tags.attributes[1].value+"</b></li>"+
+                     "<li>"+tags.attributes[2].trait_type+": <b>"+tags.attributes[2].value+"</b></li>"+
+                   "</ul>"+
+               "</details>"+
+             "</div>"+
+           "</div>";
+           document.body.appendChild(divTag);
+    }
+}
--- a/package.json
+++ b/package.json
@ -0,0 +1,6 @@
+{
+  "dependencies": {
+    "helia": "^3.0.1",
+    "ipfs-car": "^1.1.0"
+  }
+}
--- a/src/bindings.rs
+++ b/src/bindings.rs
@ -0,0 +1,11 @@
+use wasm_bindgen::prelude::*;
+
+#[wasm_bindgen(module = "/js/script.js")]
+extern "C" {
+    #[wasm_bindgen]
+    pub fn get_now_date() -> String;
+}
+
+#[wasm_bindgen(module = "/js/index.js")]
+extern "C"{
+}
--- a/src/main.rs
+++ b/src/main.rs
@ -0,0 +1,34 @@
+use yew::prelude::*;
+
+mod bindings;
+
+struct App;
+
+impl Component for App {
+    type Message = ();
+    type Properties = ();
+
+    fn create(_ctx: &Context<Self>) -> Self {
+        Self
+    }
+
+    fn view(&self, _ctx: &Context<Self>) -> Html {
+        //let get_obj = bindings::getObj();
+        //let obj = use_memo((), get_obj); 
+        html! {
+            <div class="section">
+                <div class="container">
+                    <main>
+                    <h1 class="title">{"DECA NFTs"}</h1>
+                    <h4>{"These are the DECA NFTs available for giveaway"}</h4>
+                    <h2 class="subtitle">{bindings::get_now_date()}</h2>    
+                    </main>
+                </div>
+            </div>
+        }
+    }
+}
+   
+fn main() {
+    yew::Renderer::<App>::new().render();
+}