first commit -m

2020-11-28 18:45:01 +03:00 · 2020-11-28 18:45:01 +03:00 · 4a6a5a4da4
commit 4a6a5a4da4
parent 434e3a48ba
24 changed files with 11590 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,25 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+.env*
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
--- a/components/layout.js
+++ b/components/layout.js
@ -0,0 +1,56 @@
+import Head from 'next/head'
+import Link from 'next/link'
+import { useState, useEffect, useCallback, useMemo } from "react";
+import { useWindowWidth } from "../lib/hooks";
+const name = '[Can Burak Sofyalioglu]'
+export const siteTitle = 'Digital Backroom - An Internet Archive'
+
+export default function Layout({ children, home }) {
+    const [isOpen, setIsOpen] = useState(null)
+    const toggle = () => setIsOpen(!isOpen)
+
+    const sidebarposition = isOpen ? "0px" : "-250px"
+    //console.log("effect: ", isOpen, sidebarposition)
+
+  useEffect(()=>{
+    const navbarButtonEl = document.getElementById("nav-button")
+    //navbarButtonEl.addEventListener("click", function(){console.log("asd"); setIsOpen(!isOpen); });
+    navbarButtonEl.addEventListener("click", () => setIsOpen(!isOpen));
+    return navbarButtonEl.removeEventListener("click", () => setIsOpen(!isOpen))
+  },[isOpen])
+
+  useEffect(() => {
+    const sidebarEl = document.getElementById("sidebar");
+    //console.log("sidebar position: ", sidebarposition)
+    //if (isOpen){sidebarEl.classList.add("open"); sidebarEl.classList.remove("close");}
+    //else {sidebarEl.classList.remove("open"); sidebarEl.classList.add("close")}
+    
+    if (isOpen){sidebarEl.style.left = sidebarposition;}
+    else {sidebarEl.style.left = sidebarposition;}
+    
+  },[isOpen])
+
+  return (
+    <div >
+      <Head>
+        <link rel="icon" href="/favicon.ico" />
+        <meta
+          name="description"
+          content="A Digital Backroom of Can Burak Sofyalioglu"
+        />
+        <meta
+          property="og:image"
+          content={`https://og-image.now.sh/${encodeURI(
+            siteTitle
+          )}.png?theme=light&md=0&fontSize=75px&images=https%3A%2F%2Fassets.zeit.co%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg`}
+        />
+        <meta name="og:title" content={siteTitle} />
+        <meta name="twitter:card" content="summary_large_image" />
+      </Head>
+
+      <main>{children}</main>
+
+    </div>
+  )
+}
+
--- a/components/layout.module.css
+++ b/components/layout.module.css
@ -0,0 +1,25 @@
+.container {
+  max-width: 36rem;
+  padding: 0 1rem;
+  margin: 3rem auto 6rem;
+}
+
+.header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.headerImage {
+  width: 6rem;
+  height: 6rem;
+}
+
+.headerHomeImage {
+  width: 8rem;
+  height: 8rem;
+}
+
+.backToHome {
+  margin: 3rem 0 0;
+}
--- a/lib/_post.js
+++ b/lib/_post.js
@ -0,0 +1,132 @@
+import path from 'path'
+import matter from 'gray-matter'
+import fs from "fs"
+import { Node } from "./node"
+
+
+var remark = require('remark')
+const unified = require('unified')
+const markdown = require('remark-parse')
+const { wikiLinkPlugin } = require('remark-wiki-link');
+
+var guide = require('remark-preset-lint-markdown-style-guide')
+var html = require('remark-html')
+var report = require('vfile-reporter')
+
+const postsDirectory = path.join(process.cwd(), 'posts')
+const isFile = fileName => {
+	return fs.lstatSync(fileName).isFile()
+}
+
+
+export function getSortedPostsData() {
+	// Get file names under /posts
+	const filePaths = Node.getFiles(postsDirectory).filter(fn => fn.endsWith(".md"))
+	const fileNames = filePaths.map(f => f.split("/")[f.split("/").length - 1].replace(".md", ""))
+	//console.log("filePaths", filePaths)
+  
+	var allPostsData = filePaths.map(fileName => {
+		  //console.log("filename", fileNames)
+			// Remove ".md" from file name to get id
+			const slug = fileName.replace(/\.md$/, '').split("/")[fileName.split("/").length - 1]
+			//console.log("slug", slug)
+  
+		  // Read markdown file as string
+		  const fileContent = fs.readFileSync(fileName, 'utf8')
+		  
+		  // Use gray-matter to parse the post metadata section
+		  const matterResult = Remark.getFrontMatterData(fileContent)// matter(fileContent).data
+		  const permalink = matterResult.permalink
+		  const content = fileContent.split("---\n")[fileContent.split("---").length -1 ]
+		  //console.log("content", content)
+		  //console.log("frontmatter \n\n", fileContents)
+	  //    let processor = unified()
+	  //        .use(markdown, { gfm: true })
+	  //        .use(wikiLinkPlugin)
+		  const htmlContent = Remark.getHtmlContent(fileContent, {
+			  fileNames:fileNames,
+			  permalink: `/note/${permalink}`
+		  })
+  
+		  //unified()
+		  //.use(markdown)
+		  //.use(wikiLinkPlugin, {
+		  //	permalinks:fileNames,
+		  //	pageResolver: function(pageName){return [pageName.replace(/ /g, "-").toLowerCase()]},
+		  //	hrefTemplate: function(permalink){return `/note/${permalink}`}
+		  //}).use(html)
+		  //.process(content,
+		  //	function (err, file) {
+		  //		//console.log("asd", String(file).slice(0,50))
+		  //		//console.error("remark: ", report(err || file))
+		  //			htmlContent.push(String(file).replace("\n", ""))
+		  //		}
+		  //)
+  
+  
+	  //console.log("tree",tree)
+  
+  
+	  console.log("htmlContent", htmlContent,)
+	  // Combine the data with the slug
+	  return {
+		id:slug,
+		...matterResult,
+		data:htmlContent
+	  }
+	})
+	
+	return allPostsData
+  }
+
+export async function getSortedPostsData() {
+  // Get file names under /posts
+  const fileNames = Node.getFiles(postsDirectory).filter(fn => fn.endsWith(".md"))
+  console.log("filenames", fileNames)
+
+  var allPostsData = fileNames.map(fileName => {
+		//console.log("filename", fileName)
+	  	// Remove ".md" from file name to get id
+	  	const slug = fileName.replace(/\.md$/, '').split("/")[fileName.split("/").length - 1]
+	  	//console.log("slug", slug)
+
+    // Read markdown file as string
+    const fileContents = fs.readFileSync(fileName, 'utf8')
+	
+    // Use gray-matter to parse the post metadata section
+	const matterResult = matter(fileContents).data
+	const content = fileContents.split("---\n")[fileContents.split("---").length -1 ]
+	//console.log("content", content)
+    //console.log("frontmatter \n\n", fileContents)
+//    let processor = unified()
+//        .use(markdown, { gfm: true })
+//        .use(wikiLinkPlugin)
+	const htmlContent = []
+  	remark().use(html).
+      	process(content,
+		    function (err, file) {
+            //console.log("asd", String(file).slice(0,50))
+			//console.error("remark: ", report(err || file))
+			    htmlContent.push(String(file).replace("\n", ""))
+            })
+	//var processor = unified()
+	//		.use(markdown, { gfm: true })
+	//		.use(wikiLinkPlugin)
+	
+	//console.log("processor", processor);
+	//const res = process.stdin.pipe(stream(processor)).pipe(process.stdout)
+	var tree = unified().use(markdown).parse(content)
+	console.log(tree)
+
+
+    console.log("htmlContent", htmlContent.length,)
+    // Combine the data with the slug
+    return {
+      id:slug,
+	  ...matterResult,
+	  data:htmlContent.join("")
+    }
+  })
+  
+  return allPostsData
+}
--- a/lib/hooks.js
+++ b/lib/hooks.js
@ -0,0 +1,25 @@
+import React, { useState, useEffect, useRef } from "react";
+
+export function useWindowWidth() {
+    const [screenSize, setScreenSize] = useState(window.innerWidth)//      S | M | L
+    
+    const screenListener = () => {
+        const currentSize = window.innerWidth;
+        //if size (not width) is changed, then change state
+        if (screenSize != currentSize) {
+            setScreenSize(currentSize);
+        }
+    }
+  
+    useEffect(() => {
+        // Once screenSize changed this will be fired
+        window.addEventListener("resize", screenListener);
+        // for removing repeatedly rendering
+        return () => {
+            window.removeEventListener("resize", screenListener);
+        }
+    })
+  
+  
+    return screenSize
+  }
--- a/lib/node.js
+++ b/lib/node.js
@ -0,0 +1,31 @@
+import path from 'path'
+import fs from "fs"
+
+
+export const Node = {
+    isFile:function(filename){
+        return fs.lstatSync(filename).isFile()
+    },
+    getFullPath:function(folderPath){
+        return fs.readdirSync(folderPath).map(fn  => path.join(folderPath, fn))
+    },
+    getFiles: function(dir) {
+        var results = [];
+        var list = fs.readdirSync(dir);
+        list.forEach(function(file) {
+            file = dir + '/' + file;
+            var stat = fs.statSync(file);
+            if (stat && stat.isDirectory()) { 
+                /* Recurse into a subdirectory */
+                results = results.concat(Node.getFiles(file));
+            } else { 
+                /* Is a file */
+                results.push(file);
+            }
+        });
+        return results;
+    },
+    readFileSync:function(fullPath){
+        return fs.readFileSync(fullPath, "utf8")
+    }
+}
--- a/lib/post.js
+++ b/lib/post.js
@ -0,0 +1,114 @@
+import path from 'path'
+import matter from 'gray-matter'
+import fs from "fs"
+import { Node } from "./node"
+import { Remark } from "./remark";
+import BiMap from "bimap";
+
+
+
+
+const postsDirectory = path.join(process.cwd(), 'posts')
+
+export function getSinglePost(filename, permalink) {
+	// Get file names under /posts
+	const filePaths = Node.getFiles(postsDirectory).filter(fn => fn.endsWith(".md"))
+	const fileNames = filePaths.map(f => f.split("/")[f.split("/").length - 1].replace(".md", ""))
+	const filesFrontMatterData = filePaths.map(fp => Remark.getFrontMatterData(fp))
+
+	const currentFile = filePaths.filter(f => {
+		const testFileName = f.split("/")[f.split("/").length - 1].replace(".md", "")
+		return (filename.replace(".md", "") === testFileName)
+	})[0]
+	//console.log("currenFile: ", currentFile)
+	//const currentFileFrontMatter = filesFrontMatterData.filter(f => f.permalink === permalink)[0]
+	//console.log("Current File By Name: ", currentFile)
+	const currentFileFrontMatter = Remark.getFrontMatterData(currentFile)
+	//console.log("Current File By FrontMatter: ", currentFileFrontMatter)
+
+	const fileContent = fs.readFileSync(currentFile, 'utf8')
+
+	const [htmlContent, backlinks] = Remark.getHtmlContent(fileContent, {
+		fileNames:fileNames,
+	})
+
+	return {
+		id:filename,
+		...currentFileFrontMatter,
+		data:htmlContent
+	  }
+	
+  }
+
+export function getAllBacklinks(){
+	//var bimap = new BiMap
+	var backlinkList = []
+	//bimap.push("key", "value");
+	//bimap.key("key"); // => "value"
+	//bimap.val("value"); // => "key"
+	//bimap.push("France", ["Paris", "Lyon", "Marseille"]);
+
+	// Get file names under /posts
+	const filePaths = Node.getFiles(postsDirectory).filter(fn => fn.endsWith(".md")).filter(f => !f.endsWith("sidebar.md"))
+	const fileNames = filePaths.map(f => f.split("/")[f.split("/").length - 1].replace(".md", ""))
+	//console.log("filePaths", fileNames)
+
+	var allBacklinkData = filePaths.map(fileName => {
+			//console.log("filename", fileNames)
+			// Remove ".md" from file name to get id
+			const slug = fileName.replace(/\.md$/, '').split("/")[fileName.split("/").length - 1]
+			//console.log("AllBacklinks slug", slug)
+
+			// Read markdown file as string
+			const fileContent = fs.readFileSync(fileName, 'utf8')
+			
+			const [htmlContent, backlinks] = Remark.getHtmlContent(fileContent, {
+				fileNames:fileNames,
+			})
+			// Check if scanned slug post has any internal links
+			if (backlinks.length > 0){
+				//console.log("backlinks",[ slug, [backlinks]] )
+				//bimap.push(slug, backlinks)
+
+				// Check if internal link exists
+				const internalLinks = backlinks.filter(bl => fileNames.includes(bl))
+				backlinkList.push([slug, internalLinks])
+				//console.log("bimap: ", bimap.key(slug))
+			}
+
+		// Combine the data with the slug
+		return backlinkList.length > 0 ? JSON.stringify(backlinkList) : null
+  	})
+  
+  return [allBacklinkData.filter(bl => bl !== null), JSON.stringify(fileNames)]
+}
+
+export function getPostListData() {
+  // Get file names under /posts
+  const filePaths = Node.getFiles(postsDirectory).filter(fn => fn.endsWith(".md"))
+  const fileNames = filePaths.map(f => f.split("/")[f.split("/").length - 1].replace(".md", ""))
+  //console.log("filePaths", filePaths)
+
+  var allPostsData = filePaths.map(fileName => {
+		//console.log("filename", fileNames)
+	  	// Remove ".md" from file name to get id
+	  	const slug = fileName.replace(/\.md$/, '').split("/")[fileName.split("/").length - 1]
+	  	//console.log("slug", slug)
+
+		// Read markdown file as string
+		const fileContent = fs.readFileSync(fileName, 'utf8')
+		
+		// Use gray-matter to parse the post metadata section
+		const matterResult = Remark.getFrontMatterData(fileContent)// matter(fileContent).data
+		const permalink = matterResult.permalink
+		const content = fileContent.split("---\n")[fileContent.split("---").length -1 ]
+
+    // Combine the data with the slug
+    return {
+      id:slug,
+	  ...matterResult,
+    }
+  })
+  
+  return allPostsData
+}
--- a/lib/remark.js
+++ b/lib/remark.js
@ -0,0 +1,57 @@
+import matter from 'gray-matter'
+var remark = require('remark')
+import path from 'path'
+import fs from "fs"
+import remark2react from 'remark-react'
+
+const unified = require('unified')
+const markdown = require('remark-parse')
+const { wikiLinkPlugin } = require('remark-wiki-link');
+
+var guide = require('remark-preset-lint-markdown-style-guide')
+var html = require('remark-html')
+var report = require('vfile-reporter')
+var frontmatter = require('remark-frontmatter')
+
+
+
+const postsDirectory = path.join(process.cwd(), 'posts')
+const isFile = fileName => {
+	return fs.lstatSync(fileName).isFile()
+}
+
+export const Remark = {
+    getFrontMatterData:function(filecontent){return matter(filecontent).data},
+
+    getHtmlContent:function(content, {fileNames}){
+        let htmlContent = []
+        let backlinks = []
+		unified()
+            .use(markdown, { gfm: true })
+            .use(frontmatter, ['yaml', 'toml'])
+            .use(wikiLinkPlugin, {
+                permalinks:fileNames,
+                pageResolver: function(pageName){
+                    const name = [pageName.replace(/ /g, "-").toLowerCase()]
+                    backlinks.push(name[0]);
+                    //console.log("backlinks", backlinks);
+                    return name
+                },
+                hrefTemplate: function(permalink){
+                    //console.log("wiki pemalink", permalink);
+                    return `/note/${permalink}`
+                }
+            }).use(html)
+            .process(content,
+                function (err, file) {
+                    //console.log("asd", String(file).slice(0,50))
+                        //console.error("remark: ", report(err || file))
+                        htmlContent.push(String(file).replace("\n", ""))
+                    }
+            )
+        htmlContent =  htmlContent.join("")
+        htmlContent = htmlContent.split("---")
+        //console.log("ffffff ", htmlContent)
+        return [htmlContent, backlinks]
+    }
+}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,31 @@
+{
+  "name": "my-app",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "fs": "^0.0.1-security",
+    "gray-matter": "^4.0.2",
+    "jsnetworkx": "^0.3.4",
+    "next": "^10.0.0",
+    "path": "^0.12.7",
+    "react": "16.13.1",
+    "react-dom": "16.13.1",
+    "remark": "^13.0.0",
+    "remark-html": "^13.0.1",
+    "remark-parse": "^9.0.0",
+    "remark-preset-lint-markdown-style-guide": "^4.0.0",
+    "remark-wiki-link": "^1.0.0",
+    "unified": "^9.2.0",
+    "vfile-reporter": "^6.0.1"
+  },
+  "devDependencies": {
+    "bimap": "^0.0.15",
+    "remark-frontmatter": "^3.0.0",
+    "remark-react": "^8.0.0"
+  }
+}
--- a/pages/_app.js
+++ b/pages/_app.js
@ -0,0 +1,7 @@
+import '../styles/global.css'
+import '../styles/webflow-layout.css'
+
+
+export default function App({ Component, pageProps }) {
+  return <Component {...pageProps} />
+}
--- a/pages/_document.js
+++ b/pages/_document.js
@ -0,0 +1,71 @@
+import Document, { Html, Head, Main, NextScript } from 'next/document'
+import { getSinglePost } from "../lib/post";
+import Link from 'next/link'
+
+class MyDocument extends Document {
+    static async getInitialProps(ctx) {
+        const initialProps = await Document.getInitialProps(ctx)
+        const sidebar = getSinglePost("sidebar.md")
+
+        //console.log("document: ", sidebar)
+        return { sidebar, ...initialProps }
+    }
+
+    render(props) {
+        return (
+        <Html data-wf-page="5fb1bacf34bc79d543fcd389" data-wf-site="5fb1bacf34bc79b9c4fcd388">
+            <Head />
+            <script src="https://d3js.org/d3.v6.min.js"></script>
+
+            <body className="body">
+            
+            {/* NAVBAR */}
+            <div data-collapse="medium" data-animation="default" data-duration="400" role="banner" class="navbar w-nav">
+                <div class="container w-container">
+                <div data-w-id="d4658744-8b5f-bf5e-9b20-4c31718a793d" class="w-nav-button" >
+                    <div class="w-icon-nav-menu" id="nav-button">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#000000" strokeWidth="3.5" strokeLinecap="round" strokeLinejoin="round"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>                    </div>
+                </div>
+                <Link href="/">
+                    <a class="brand-3 w-nav-brand">
+                        <p class="heading">Digital Backroom</p>
+                    </a>
+                </Link>
+                </div>
+            </div>
+
+            
+                <section className="section">
+                    {/* SIDEBAR */}
+                    <div 
+                        data-w-id="71d5791f-856a-b6c4-e8ee-0ab2729e1de3" 
+                        className="sidebar"
+                        id="sidebar"
+                        dangerouslySetInnerHTML={{__html:this.props.sidebar.data}}
+                    >
+
+                    </div>
+
+                    {/* CONTENT */}
+                    <main className="main">
+                        <Main/>
+                    </main>
+                </section>
+            <NextScript />
+            </body>
+        </Html>
+    )
+  }
+}
+
+export function getStaticProps() {
+    const sidebarData = getSinglePost("sidebar.md");
+    console.log("index response: ", contentData, sidebarData)
+    return {
+        props: {
+            sidebar:sidebarData
+        },
+    };
+}
+
+export default MyDocument
--- a/pages/index.js
+++ b/pages/index.js
@ -0,0 +1,59 @@
+import Head from "next/head";
+import { useEffect,useRef } from "react";
+import Link from 'next/link'
+import Layout, { siteTitle } from "../components/layout";
+import { getSinglePost, getAllBacklinks } from "../lib/post";
+var jsnx = require('jsnetworkx');
+
+export default function Home({ content, backlinks, filenames }) {
+    const ref = useRef(null);
+    console.log("Index Page Props: ", backlinks, filenames)
+    //var G = jsnx.binomialGraph(filenames.length, 1)
+    //var G = jsnx.completeGraph(filenames.length);
+    useEffect(() => {
+        if (ref.current){
+
+        var G = new jsnx.Graph();
+        G.addNode(1, {count: 12});
+        G.addNode(2, {count: 8});  
+        G.addNode(3, {count: 15});
+        G.addEdgesFrom([[1,2],[2,3]]);
+        jsnx.draw(G, {
+            element: ref.current,
+            withLabels: true,
+            nodeAttr: {
+              r: function(d) {
+                // `d` has the properties `node`, `data` and `G`
+                return d.data.count;
+              }
+            }
+          });
+        }
+    })
+    return (
+        <Layout home>
+            <Head>…</Head>
+            <section
+            >
+                <div 
+                    dangerouslySetInnerHTML={{__html: content.data}}
+                ></div>
+                <div id="demo-canvas" ref={ref}></div>
+            </section>
+        </Layout>
+    );
+
+}
+
+export function getStaticProps() {
+    const contentData = getSinglePost("index.md");
+    const [backlinksRaw, filenamesRaw] = getAllBacklinks();
+    return {
+        props: {
+            content:contentData,
+            backlinks:JSON.parse(backlinksRaw), 
+            filenames:JSON.parse(filenamesRaw)
+            //sidebar:sidebarData
+        },
+    };
+}
--- a/pages/note/[id].js
+++ b/pages/note/[id].js
@ -0,0 +1,39 @@
+import Head from "next/head";
+import Link from 'next/link'
+
+import Layout, { siteTitle } from "../../components/layout";
+import { getPostListData, getSinglePost} from "../../lib/post";
+
+export default function Home({ note }) {
+    console.log("Note Page: ", note)
+    return (
+        <Layout home>
+            <Head>…</Head>
+            <section
+            >
+                <div 
+                    className="article-body" 
+                    dangerouslySetInnerHTML={{__html:note.data}}>
+
+                </div>
+            </section>
+        </Layout>
+    );
+}
+export async function getStaticPaths() {
+    const allPostsData = await getPostListData();
+    const paths = allPostsData.map(p => ({params: {id:p.id}}))
+    return {
+      paths,
+      fallback:false
+    };
+  }
+export async function getStaticProps({ params }) {
+    const note = await getSinglePost(params.id);
+    console.log("note: ", note)
+    return {
+        props: {
+            note,
+        },
+    };
+}
--- a/posts/.obsidian/config
+++ b/posts/.obsidian/config
@ -0,0 +1 @@
+{"theme":"moonstone","pluginEnabledStatus":{"file-explorer":true,"global-search":true,"switcher":true,"graph":true,"backlink":true,"command-palette":true,"markdown-importer":true,"word-count":true,"open-with-default-app":true},"promptDelete":false,"showFrontmatter":false}
--- a/posts/.obsidian/workspace
+++ b/posts/.obsidian/workspace
@ -0,0 +1,106 @@
+{
+  "main": {
+    "id": "6eb16750324040cd",
+    "type": "split",
+    "children": [
+      {
+        "id": "ba2b426490a0a575",
+        "type": "leaf",
+        "active": true,
+        "state": {
+          "type": "markdown",
+          "state": {
+            "file": "index.md",
+            "mode": "source"
+          }
+        },
+        "group": "2c4b2f12094a2335"
+      },
+      {
+        "id": "7aa82793eba6e4fb",
+        "type": "leaf",
+        "state": {
+          "type": "markdown",
+          "state": {
+            "file": "index.md",
+            "mode": "preview"
+          }
+        },
+        "group": "2c4b2f12094a2335"
+      }
+    ],
+    "direction": "vertical"
+  },
+  "left": {
+    "id": "d9f6ed51bfb2a3a6",
+    "type": "split",
+    "children": [
+      {
+        "id": "9ba85e6bae3ec9f3",
+        "type": "tabs",
+        "children": [
+          {
+            "id": "52b7187e736ea647",
+            "type": "leaf",
+            "state": {
+              "type": "file-explorer",
+              "state": {}
+            }
+          },
+          {
+            "id": "1c9e874d653cde9d",
+            "type": "leaf",
+            "state": {
+              "type": "search",
+              "state": {
+                "query": "",
+                "matchingCase": false,
+                "explainSearch": false,
+                "collapseAll": false,
+                "extraContext": false,
+                "sortOrder": "alphabetical"
+              }
+            }
+          }
+        ]
+      }
+    ],
+    "direction": "horizontal",
+    "width": 300
+  },
+  "right": {
+    "id": "6576f251ebe95476",
+    "type": "split",
+    "children": [
+      {
+        "id": "123c044acaf945c8",
+        "type": "tabs",
+        "children": [
+          {
+            "id": "673e8bbfb11e3c2b",
+            "type": "leaf",
+            "state": {
+              "type": "backlink",
+              "state": {
+                "file": "index.md",
+                "collapseAll": false,
+                "extraContext": false,
+                "sortOrder": "alphabetical",
+                "backlinkCollapsed": false,
+                "unlinkedCollapsed": true
+              }
+            }
+          }
+        ]
+      }
+    ],
+    "direction": "horizontal",
+    "width": 300,
+    "collapsed": true
+  },
+  "lastOpenFiles": [
+    "index.md",
+    "sidebar.md",
+    "Untitled.md"
+  ]
+}
--- a/posts/articles/zettelkasten-metodu.md
+++ b/posts/articles/zettelkasten-metodu.md
@ -0,0 +1,6 @@
+---
+title: 'Zettelkasten Metodu'
+date: '2020-01-09'
+---
+
+We recommend using **Static Generation** 
--- a/posts/index.md
+++ b/posts/index.md
@ -0,0 +1,27 @@
+---
+title: "Digital Backroom"
+permalink: "/"
+---
+
+This is my digital backroom. It is intended to be a personal public wiki page. I'll share my notes, codes, bookmarks and other links.
+
+
+## Quicklinks
+[[Codesheet]]: Code Snippets including Python, JS, CSS, HTML and Bash.
+
+### Blog (Turkish)
+[[Zettelkasten Metodu]]: Zettelkasten metodu ile akıllı notlar nasıl alınır?
+
+[[En İyi Blog Siteleri]]:Bir blog açmaya karar verdiniz ve henüz platform seçmediyseniz, bu yazıda nelere dikkat edilmesi gerektiğini ve çeşitli blog platformlarını bulacaksınız. Ücretsiz blog sitesi arayanlar, okuyucaları için paywall koymak isteyenler, portfolyo oluşturmak isteyenler için çeşitli alternatifler mevcut.
+
+[[Clover Notes]]: Clover not alma uygulamasını beta-tester olarak deneyerek ilk izlenimlerimi paylaştım.
+
+[[Obsidian]]: Obsidian not alma uygulaması hakkındaki tanıtım yazım. 
+
+
+
+### Blog (English)
+[[Confluence Installation]]: Install self-hosted Atlassian Confluence on your host. In this way, you can use your own domain with Confluence.
+[[Collaborative Filtering]]: What is collaborative filtering? How does a simple recommendation engine makes good suggestions.
+
+
--- a/posts/sidebar.md
+++ b/posts/sidebar.md
@ -0,0 +1,3 @@
+### Digital Notes
+
+* [[Zettelkasten Metodu]]
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/images/profile.jpg
+++ b/public/images/profile.jpg
--- a/styles/global.css
+++ b/styles/global.css
@ -0,0 +1,14 @@
+html,
+body {
+  padding: 0;
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
+    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+  line-height: 1.6;
+  font-size: 18px;
+}
+
+* {
+  box-sizing: border-box;
+}
+
--- a/styles/webflow-layout.css
+++ b/styles/webflow-layout.css
@ -0,0 +1,241 @@
+body {
+  font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
+  color: #333;
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.body {
+  display: block;
+  padding-top: 0px;
+  padding-bottom: 0px;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {font-weight: bold;line-height: 1.6em;}
+h5,h6 {font-weight: normal;}
+h1 {font-size: 2.1rem;text-align: left;font-weight: bold; margin-bottom:32px; margin-top:64px; color:#222}
+h2 {font-size: 1.9em;font-weight: bold; margin-top:64px; color:#333}
+h3 {font-size: 1.5em;font-weight: bold; margin-top:48px; color:#444}
+h4 {font-size: 1.3em;font-weight: bold; color:#444}
+p, li {
+    box-sizing: inherit;
+    font-family: GT-Walsheim, "Neue Helvetica W02", "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-size: 18px;
+    font-variant: common-ligatures;
+    line-height: 1.8;
+    text-size-adjust: inherit;
+    color:#222
+}
+
+p,a, li, h1, h2,h3,h4,h5,h6 {
+  overflow-wrap: break-word;
+}
+
+ul, ol {padding-left: 16px;}
+
+a {text-decoration: none;color:#222 !important}
+a.internal {
+  color: #131313 ;
+  background-color: transparent !important;
+  background-image: linear-gradient(transparent 0%,transparent calc(50% - 9px),rgba(0,255,0,0.35) calc(50% - 9px), 	    		 rgba(0,255,0,0.35) 100%);
+  background-position: 0px 0px;
+  background-size: 100% 200%;
+  font-weight: bold;
+  border-radius: 4px;
+  padding: 2px 4px;
+  transition: all 0.2s ease-out;
+}
+a.internal:hover {
+  color:#131313;
+  background-image: 
+      linear-gradient(transparent 0%,transparent calc(50% - 9px),
+          rgba(0, 255, 85, 0.7) calc(50% - 9px));
+  background-position: 0px 100%;
+}
+
+
+.sidebar h3,.sidebar h4 {margin-top:16px;}
+.w-nav-brand  {color:#333333; text-decoration: none;}
+#nav-button {cursor: pointer; margin-left: 16px;}
+#nav-icon { cursor: pointer; margin-left: 16px;}
+
+/* -----------------------*/
+.navigation-2 {
+  position: relative;
+  left: 0%;
+  top: 0%;
+  right: 0%;
+  bottom: auto;
+  z-index: 9;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  padding-right: 3%;
+  padding-left: 3%;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border-bottom: 2px solid #2f85a5;
+  background-color: #0b1e25;
+}
+
+.sidebar {
+  position: absolute;
+  left: 0px;
+  z-index: 5;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  height: 100%;
+  min-height: 100vh;
+  min-width: 250px;
+  padding: 32px 16px;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-box-align: start;
+  -webkit-align-items: flex-start;
+  -ms-flex-align: start;
+  align-items: flex-start;
+  border-right: 1px solid #999;
+  background-color: #f5f6f8;
+  color: #222;
+}
+
+.main {
+  position: relative;
+  left: 250px;
+  z-index: 0;
+  width: 100%;
+  min-height: 100vh;
+  padding: 32px 32px;
+  overflow-wrap: break-word;
+}
+
+
+.section {
+  position: relative;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  max-width: 100vw;
+  min-height: 50vh;
+  -webkit-box-align: start;
+  -webkit-align-items: flex-start;
+  -ms-flex-align: start;
+  align-items: flex-start;
+}
+
+.heading {
+  font-size: 20px;
+  line-height: 24px;
+}
+
+.navbar {
+  display: none;
+}
+
+@media screen and (max-width: 991px) {
+  .navigation-2 {
+    display: none;
+  }
+
+  .sidebar {
+    position: absolute;
+    left: 0px;
+  }
+
+  .main {
+    padding-right: 32px;
+    padding-left: 32px;
+  }
+
+  .navbar {
+    display: none;
+  }
+}
+@media screen and (min-width: 767px) { 
+  .sidebar {left: 0 !important;}
+  .main {width: calc(100% - 250px);}
+}
+
+  @media screen and (max-width: 767px) {
+  .sidebar {
+    position: absolute;
+    left: -250px;
+    box-shadow: 3px 3px 8px -2px rgba(0, 0, 0, 0.3);
+  }
+
+  .main {
+    left: 0px;
+  }
+
+  .heading {
+    margin-top: 20px;
+    margin-bottom:24px;
+    margin-left: 32px;
+  }
+
+  .container {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
+    -ms-flex-align: center;
+    align-items: center;
+    background-color: #ddd;
+    color: #333;
+  }
+
+  .navbar {
+    display: block;
+    background-color: #fff;
+  }
+
+  .brand-3 {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    padding-left: 0px;
+    -webkit-box-pack: center;
+    -webkit-justify-content: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
+    -ms-flex-align: center;
+    align-items: center;
+  }
+}
--- a/yarn.lock
+++ b/yarn.lock
				`@ -0,0 +1 @@`
				`{"theme":"moonstone","pluginEnabledStatus":{"file-explorer":true,"global-search":true,"switcher":true,"graph":true,"backlink":true,"command-palette":true,"markdown-importer":true,"word-count":true,"open-with-default-app":true},"promptDelete":false,"showFrontmatter":false}`