+
+
+
+
+
-
+ 
+ cosanostra
+
+
-
-
+
+
+
);
}
diff --git a/src/home/Home.js b/src/home/Home.js
new file mode 100644
index 0000000..5f80d61
--- /dev/null
+++ b/src/home/Home.js
@@ -0,0 +1,25 @@
+import { useEffect } from 'react';
+
+import useMousePosition from '../hooks/useMousePosition';
+
+const Home = () => {
+ const [ref, mousePosition] = useMousePosition();
+
+ useEffect(() => {
+ document.documentElement.style.setProperty('--x', `${mousePosition.left}%`);
+ document.documentElement.style.setProperty('--y', `${mousePosition.top}%`);
+ }, [mousePosition]);
+
+ return (
+
-
+
);
\ No newline at end of file
diff --git a/src/papers/Paper.css b/src/papers/Paper.css
new file mode 100644
index 0000000..c335285
--- /dev/null
+++ b/src/papers/Paper.css
@@ -0,0 +1,29 @@
+.paper {
+ min-height: 100vh;
+ margin-bottom: 80px;
+}
+
+.paper .container {
+ max-width: 650px;
+}
+
+.paper .markdown p img {
+ position: relative;
+ width: 100%;
+ height: auto;
+}
+
+.paper .attributes {
+ margin-bottom: 40px;
+}
+
+.paper-progress {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 2px;
+ height: 2px;
+ background: #FFD800;
+ z-index: 100;
+ transition: all 0.1s ease;
+}
\ No newline at end of file
diff --git a/src/papers/Paper.js b/src/papers/Paper.js
new file mode 100644
index 0000000..11547a4
--- /dev/null
+++ b/src/papers/Paper.js
@@ -0,0 +1,63 @@
+import Markdown from 'markdown-to-jsx';
+
+import { useEffect } from 'react';
+import { useQuery } from 'react-query';
+import { useParams } from 'react-router-dom';
+
+import { fetchPaper } from "../hooks/papers";
+
+import Meta from '../seo/Meta';
+
+import useMousePosition from '../hooks/useMousePosition';
+
+import "./Paper.css"
+
+const Paper = () => {
+ const { slug } = useParams();
+
+ const query = useQuery(["paper", `${slug}.md`], fetchPaper);
+
+ const [ref, mousePosition] = useMousePosition();
+
+ useEffect(() => {
+ document.documentElement.style.setProperty('--x', `${mousePosition.left}%`);
+ document.documentElement.style.setProperty('--y', `${mousePosition.top}%`);
+ }, [mousePosition]);
+
+ // Render paper
+ return (
+ <>
+
+
+
+ {title}
+
+
+
+
+
+
+
+ )
+}
+
+export default Meta;
+ papers
+
-
+
+
+
+ );
+}
+
+export default Home;
\ No newline at end of file
diff --git a/src/hooks/papers.js b/src/hooks/papers.js
new file mode 100644
index 0000000..a12a491
--- /dev/null
+++ b/src/hooks/papers.js
@@ -0,0 +1,72 @@
+const req = require.context("../../papers", true, /\.md$/);
+
+const processContents = (files, contents) => {
+ return files.map((file, index) => {
+ // Get the attributes from the markdown file
+ const parsedContents = contents[index].split("---");
+ const attributes = parsedContents[0].split("\n");
+ const attributesObject = {};
+ attributes.forEach((attribute) => {
+ const [key, value] = attribute.split(":");
+
+ if (key && value) {
+ attributesObject[key.trim()] = value.trim();
+ }
+ });
+
+ // Get the content from the markdown file
+ const content = parsedContents[1];
+
+ return {
+ filename: file.filename,
+ attributes: attributesObject,
+ content,
+ };
+ });
+};
+
+const fetchPapers = async () => {
+ // Get all markdown papers in /papers
+ const files = req.keys().map((filename) => {
+ const file = req(filename);
+ filename = filename
+ .replace("./", "")
+ .replace(".md", "");
+
+ return {
+ filename,
+ file,
+ };
+ });
+
+ // Get the content of all the files
+ const papers = Promise.all(
+ files.map(async (file) => {
+ return fetch(file.file).then((response) => response.text());
+ })
+ ).then((contents) => processContents(files, contents));
+
+ return papers;
+}
+
+const fetchPaper = async (query) => {
+ // Import the specific paper
+
+ const req = require.context("../../papers", true, /\.md$/);
+
+ // Get the filename from the query
+ const filename = query.queryKey[1];
+
+ // Get the file
+ const file = req(`./${filename}`);
+
+ // Get the content of the file
+ const paper = await fetch(file).then((response) => response.text());
+
+ return processContents([file], [paper])[0];
+}
+
+module.exports = {
+ fetchPapers,
+ fetchPaper
+}
\ No newline at end of file
diff --git a/src/hooks/useMousePosition.js b/src/hooks/useMousePosition.js
index 929b934..865b3e6 100644
--- a/src/hooks/useMousePosition.js
+++ b/src/hooks/useMousePosition.js
@@ -6,14 +6,15 @@ const useMousePosition = () => {
top: 0,
});
- const handleMouseMove = useCallback(
- (e) =>
- setMousePosition({
- left: e.pageX,
- top: e.pageY,
- }),
- []
- );
+ const handleMouseMove = useCallback((e) => {
+ const left = e.pageX / window.innerWidth * 100;
+ const top = e.pageY / window.innerHeight * 100;
+
+ setMousePosition({
+ left,
+ top
+ })
+ }, []);
const ref = useRef();
diff --git a/src/hooks/useScroll.js b/src/hooks/useScroll.js
new file mode 100644
index 0000000..7a026cf
--- /dev/null
+++ b/src/hooks/useScroll.js
@@ -0,0 +1,19 @@
+import { useEffect, useState } from 'react';
+
+const useScroll = () => {
+ const [scroll, setScroll] = useState(0);
+ const handleScroll = () => {
+ setScroll(window.scrollY);
+ };
+
+ useEffect(() => {
+ window.addEventListener('scroll', handleScroll);
+ return () => {
+ window.removeEventListener('scroll', handleScroll);
+ };
+ }, []);
+
+ return scroll;
+}
+
+export default useScroll;
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index 25c7c87..cf13474 100644
--- a/src/index.css
+++ b/src/index.css
@@ -8,7 +8,79 @@
font-family: 'Telugu MN', serif;
}
+html, body {
+ margin: 0;
+}
+
+h1, h2, h3, h4, h5 {
+ color: rgba(255, 255, 255, 0.85)
+}
+
+p {
+ color: rgba(255, 255, 255, 0.65)
+}
+
+ul, ol, li {
+ color: rgba(255, 255, 255, 0.55)
+}
+
a {
text-decoration: none;
- color: rgba(255 255 255 0.35)
+ color: rgba(255, 255, 255, 0.35);
+ transition: all .1s ease-in-out;
+}
+
+a:hover,
+a:focus {
+ color: rgba(255, 255, 255, 0.65);
+}
+
+.light {
+ transition: all .1s ease-in-out;
+}
+
+.light-bg {
+ background: #fff;
+}
+
+.light body {
+ background: #fff;
+}
+
+.light h1,
+.light h2,
+.light h3,
+.light h4,
+.light h5 {
+ color: rgba(0, 0, 0, 0.85)
+}
+
+.light p {
+ color: rgba(0, 0, 0, 0.65)
+}
+
+.light ul, .light ol, .light li {
+ color: rgba(0, 0, 0, 0.55)
+}
+
+.light a {
+ color: rgba(0, 0, 0, 0.35);
+}
+
+.light a:hover,
+.light a:focus {
+ color: rgba(0, 0, 0, 0.65);
+}
+
+.light .navbar {
+ background: #fff;
+}
+
+.light .navbar .links svg {
+ color:rgba(0, 0, 0, 0.35);
+}
+
+.light .navbar .links svg:hover,
+.light .navbar .links svg:focus {
+ color:rgba(0, 0, 0, 0.65);
}
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index b2f8d15..7f03527 100644
--- a/src/index.js
+++ b/src/index.js
@@ -2,11 +2,15 @@ import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
+import { BrowserRouter as Router } from 'react-router-dom';
+
import './index.css';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
+
+
+
+
+ a collective building value-driven on-chain primitives.
+
+
+
+ );
+}
+
+export default Paper;
\ No newline at end of file
diff --git a/src/papers/Papers.js b/src/papers/Papers.js
new file mode 100644
index 0000000..4768045
--- /dev/null
+++ b/src/papers/Papers.js
@@ -0,0 +1,54 @@
+import { useEffect } from 'react';
+import { useQuery } from 'react-query';
+import { Link } from 'react-router-dom';
+
+import { fetchPapers } from "../hooks/papers";
+
+import Meta from '../seo/Meta';
+
+import useMousePosition from '../hooks/useMousePosition';
+
+const Papers = () => {
+ const title = "papers | cosanostra";
+ const description = "research & development of primitive & protocol for on-chain organizations, defi, and web3. explore value-driven on-chain primitives by crypto developers & value-creating products by web3 operators.";
+
+ const query = useQuery("papers", fetchPapers);
+
+ const [ref, mousePosition] = useMousePosition();
+
+ useEffect(() => {
+ document.documentElement.style.setProperty('--x', `${mousePosition.left}%`);
+ document.documentElement.style.setProperty('--y', `${mousePosition.top}%`);
+ }, [mousePosition]);
+
+ return (
+ <>
+
+
+
+
+ {query.data.content}
+ }
+
+
+
+
+
+
+
+ {query?.data?.attributes?.title}
+{query?.data?.attributes?.date} | {query?.data?.attributes?.author}
+ + {query?.data?.content &&
+
+
+ );
+}
+
+export default Papers;
\ No newline at end of file
diff --git a/src/seo/Meta.js b/src/seo/Meta.js
new file mode 100644
index 0000000..5d2389f
--- /dev/null
+++ b/src/seo/Meta.js
@@ -0,0 +1,17 @@
+import { Helmet } from 'react-helmet-async';
+
+const Meta = ({ title, description }) => {
+ return (
+
+
+
+
+
+
+
+
+ Research papers published by the cosanostra collective.
+
+
+
+ {query?.data && query?.data.map((paper, index) => (
+
+
+ {paper.attributes.title}
+{paper.attributes.description}
+{paper.attributes.date} | {paper.attributes.author}
+ + ))} +