Clean thing up.
This commit is contained in:
Tuan Cao
parent
e69581cb9f
commit
92116df077
@ -1,12 +1,7 @@
|
||||
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)
|
||||
|
||||
return (
|
||||
<div >
|
||||
|
||||
@ -1,25 +0,0 @@
|
||||
.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;
|
||||
}
|
||||
@ -1,5 +1,5 @@
|
||||
import '../styles/global.css'
|
||||
import '../styles/webflow-layout.css'
|
||||
import '../styles/style.css'
|
||||
|
||||
|
||||
export default function App({ Component, pageProps }) {
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
import Head from "next/head";
|
||||
import { useRouter } from 'next/router'
|
||||
import { useEffect,useRef } from "react";
|
||||
import Link from 'next/link'
|
||||
import Layout, { siteTitle } from "../components/layout";
|
||||
import { getSinglePost, getGraphData } from "../lib/post";
|
||||
import { Network } from "../components/graph";
|
||||
@ -13,9 +12,6 @@ export default function Home({ content, graphdata, filenames, ...props }) {
|
||||
const router = useRouter()
|
||||
const routeQuery = router.query.id
|
||||
const routeHandler = (r) => router.push(r)
|
||||
//console.log("route", router)
|
||||
//var G = jsnx.binomialGraph(filenames.length, 1)
|
||||
//var G = jsnx.completeGraph(filenames.length);
|
||||
useEffect(() => {
|
||||
if (ref && ref.current){
|
||||
|
||||
@ -33,19 +29,9 @@ export default function Home({ content, graphdata, filenames, ...props }) {
|
||||
|
||||
return (
|
||||
<Layout home>
|
||||
<Head>
|
||||
<meta name="google-site-verification" content="7iZ3AXo66Mm1qElIrjOAcUD6pqBeDQGC63zZfwiGhbE" />
|
||||
{content.title && <meta name="title" content={content.title} />}
|
||||
{content.canonical && <meta name="canonical_url" content={content.canonical} />}
|
||||
{content.description && <meta name="description" content={content.description} />}
|
||||
</Head>
|
||||
|
||||
<section>
|
||||
<div dangerouslySetInnerHTML={{__html: content.data}} />
|
||||
</section>
|
||||
<hr/>
|
||||
|
||||
|
||||
</Layout>
|
||||
);
|
||||
|
||||
@ -58,8 +44,6 @@ export function getStaticProps() {
|
||||
props: {
|
||||
content:contentData,
|
||||
graphdata:graphdata,
|
||||
//filenames:JSON.parse(filenamesRaw)
|
||||
//sidebar:sidebarData
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
@ -5,7 +5,6 @@ import { useEffect,useRef } from "react";
|
||||
import Layout, { siteTitle } from "../../components/layout";
|
||||
import { getPostListData, getSinglePost, getGraphData} from "../../lib/post";
|
||||
import { Network } from "../../components/graph";
|
||||
import Cytoscape from "cytoscape";
|
||||
|
||||
|
||||
export default function Home({ note, graphdata, ...props }) {
|
||||
@ -57,22 +56,12 @@ export default function Home({ note, graphdata, ...props }) {
|
||||
<Layout home>
|
||||
<Head>
|
||||
{note.title && <meta name="title" content={note.title} />}
|
||||
{note.canonical && <meta name="canonical_url" content={note.canonical} />}
|
||||
{note.description && <meta name="description" content={note.description} />}
|
||||
|
||||
</Head>
|
||||
<section
|
||||
>
|
||||
{/* COVER IMAGE */}
|
||||
{note.cover && <img src={note.cover} />}
|
||||
|
||||
{/* TITLE */}
|
||||
{note.title && <h1>{note.title}</h1>}
|
||||
|
||||
<div
|
||||
<div
|
||||
className="article-body"
|
||||
dangerouslySetInnerHTML={{__html:note.data}}>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
<hr/>
|
||||
|
||||
0
styles/style.css
Normal file
0
styles/style.css
Normal file
@ -1,385 +0,0 @@
|
||||
body {
|
||||
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 1.5rem;
|
||||
font-size: 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:#222}
|
||||
h3 {font-size: 1.5em;font-weight: bold; margin-top:48px; color:#222}
|
||||
h4 {font-size: 1.3em;font-weight: bold; color:#333}
|
||||
p, li {
|
||||
padding-bottom: 4px;
|
||||
padding-top: 4px;
|
||||
box-sizing: inherit;
|
||||
font-family: "Work Sans", sans-serif;
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
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:#333 }
|
||||
.main a.internal {
|
||||
color: #131313 ;
|
||||
background-color: transparent !important;
|
||||
background-image: linear-gradient(transparent 0%,transparent calc(50% - 9px),rgba(0, 255, 85, 0.159) calc(50% - 9px),rgba(0, 255, 85, 0.159) 100%);
|
||||
background-position: 0px 0px;
|
||||
background-size: 100% 200%;
|
||||
font-weight: bold;
|
||||
border-radius: 4px;
|
||||
padding: 2px 4px;
|
||||
transition: all 0.2s ease-out;
|
||||
}
|
||||
.main a.internal:hover {
|
||||
color:#131313;
|
||||
background-image: linear-gradient(transparent 0%,transparent calc(40% - 9px),rgba(0, 255, 85, 0.159) calc(50% - 9px));
|
||||
background-position: 0px 100%;
|
||||
}
|
||||
.main a:not(.internal, footer) {
|
||||
color: #131313 ;
|
||||
background-color: transparent !important;
|
||||
background-image: linear-gradient(transparent 0%,transparent calc(50% - 6px),rgba(75, 58, 225, 0.631) calc(50% - 4px),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;
|
||||
}
|
||||
.main a.internal.new, .sidebar .main a.internal.new {
|
||||
color: #131313 ;
|
||||
background-color: transparent !important;
|
||||
background-image: linear-gradient(transparent 0%,transparent calc(50% - 9px),rgba(250, 51, 54, 0.631) 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;
|
||||
}
|
||||
|
||||
|
||||
#graph-box {
|
||||
width: 100%;
|
||||
margin-top: 32px;
|
||||
margin-bottom:64px;
|
||||
min-height:300px;
|
||||
background-color: #222831;
|
||||
border-radius: 8px;
|
||||
border:2px solid #2ba792;
|
||||
box-shadow: 0 8px 16px 4px rgba(50, 224, 195, 0.247);
|
||||
cursor: grab;
|
||||
}
|
||||
#graph-box:hover {
|
||||
box-shadow: inset 4px 8px 16px 0px rgba(50, 224, 195, 0.247);
|
||||
}
|
||||
|
||||
#side-graph-box {
|
||||
width: 100%;
|
||||
margin-top: 32px;
|
||||
margin-bottom:64px;
|
||||
/*
|
||||
min-height:250px;
|
||||
*/
|
||||
background-color: #29203d;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 0px 8px 1px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
#side-graph-box label {
|
||||
margin: 32px 0 !important;
|
||||
}
|
||||
|
||||
.jsnx .node-node {fill: #32E0C4 !important;}
|
||||
.jsnx .node-node:hover {fill: #32E0C4 !important;}
|
||||
.jsnx .node-label { fill: #fff !important;font-size:12px; font-weight: bold;}
|
||||
.jsnx g.node {height:60px !important;}
|
||||
.jsnx .nde-edge { fill:black; stroke-width:2; stroke:black; }
|
||||
|
||||
pre code {padding:16px !important; border-radius: 8px;}
|
||||
img {width:100%; height:auto; margin-top:16px; margin-bottom:48px; border-radius: 8px; box-shadow: 0 4px 8px -1px rgba(0, 0, 0, 0.3);}
|
||||
.w-nav-brand {color:#333333; text-decoration: none;}
|
||||
#nav-button {cursor: pointer; margin-left: 16px;}
|
||||
#nav-icon { cursor: pointer; margin-left: 16px;}
|
||||
|
||||
.sidebar h3,.sidebar h4 {margin-top:0px;padding-bottom: 16px; border-bottom: 2px solid rgba(0, 0, 0, 0.05);}
|
||||
.sidebar ul {list-style: none;}
|
||||
.sidebar li {font-weight: bold; font-size: 14px; transition: 0.3s all ease-out;}
|
||||
.sidebar li:hover {background-color: #32E0C4; }
|
||||
.sidebar li a {display:block; width: 100% !important;padding-left: 16px; padding-right: 16px;}
|
||||
.sidebar#sidebar a {color: #EEEEEE !important}
|
||||
main.main .main {max-width:800px;}
|
||||
|
||||
blockquote {
|
||||
margin: 0;
|
||||
padding-left: 3em;
|
||||
border-left: 0.5em rgb(222, 223, 255) solid;
|
||||
margin:16px 0;
|
||||
}
|
||||
|
||||
/* -----------------------*/
|
||||
.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: fixed;
|
||||
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 0px;
|
||||
-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: #222831;
|
||||
color: #EEEEEE !important;
|
||||
}
|
||||
.sidebar div { width: 100%; padding: 32px 0;}
|
||||
|
||||
.sidebar ul {
|
||||
width: 100%;
|
||||
padding:0;
|
||||
}
|
||||
|
||||
|
||||
.main {
|
||||
position: relative;
|
||||
|
||||
background-color: #fcfcfc !important;
|
||||
max-width: 88rem;
|
||||
padding: 2rem;
|
||||
margin: auto;
|
||||
line-height: 1.5rem;
|
||||
font-size: 20px;
|
||||
}
|
||||
main.parent-main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.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: fixed;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
|
||||
.navbar {
|
||||
display: none;
|
||||
z-index: 5 !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media screen and (min-width: 767px) {
|
||||
.sidebar {left: 0 !important;}
|
||||
.main {width: calc(100% ); }
|
||||
}
|
||||
/*
|
||||
*/
|
||||
@media screen and (min-width: 991px) {
|
||||
.parent-main {width: calc(100% ); padding-left: 20vw !important; padding-right: 20vw;}
|
||||
}
|
||||
@media screen and (max-width: 767px) {
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
top:0;
|
||||
z-index: 1;
|
||||
left: -250px;
|
||||
box-shadow: 3px 3px 8px -2px rgba(0, 0, 0, 0.3);
|
||||
padding-top:96px;
|
||||
}
|
||||
/*
|
||||
.parent-main {max-width: calc(100% - 32px);}
|
||||
*/
|
||||
.main {
|
||||
left: 16px;
|
||||
/*
|
||||
width:calc(100% - 32px);
|
||||
*/
|
||||
}
|
||||
|
||||
.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: #EEEEEE;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
display: block;
|
||||
background-color: #fff;
|
||||
}
|
||||
#navbar {
|
||||
position: relative;
|
||||
z-index: 5 !important;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar#sidebar a {
|
||||
color: #ddd !important;
|
||||
transition: all 0.3s ease-out;
|
||||
}
|
||||
|
||||
.sidebar#sidebar a:hover {
|
||||
color: #fff !important;
|
||||
/*
|
||||
color: #5221c4;
|
||||
*/
|
||||
}
|
||||
|
||||
body section {
|
||||
background-color: #fcfcfc;
|
||||
}
|
||||
text.node-label {
|
||||
fill:#fff !important;
|
||||
}
|
||||
|
||||
#graph-box text {
|
||||
color: #fff !important;
|
||||
}
|
||||
main.main {
|
||||
font-size: 16px !important;
|
||||
line-height: 1.5rem !important;
|
||||
}
|
||||
.sidebar#sidebar {
|
||||
border-right: 4px solid #32E0C4;
|
||||
box-shadow: 2px 0 8px 0 rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
body section {
|
||||
display: flex !important;
|
||||
flex-direction: row !important;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user