From 92116df0771dea084cf3341992730edea3ea3b5f Mon Sep 17 00:00:00 2001 From: Tuan Cao Date: Thu, 17 Mar 2022 14:35:32 +0700 Subject: [PATCH] Clean thing up. --- components/layout.js | 5 - components/layout.module.css | 25 --- pages/_app.js | 2 +- pages/index.js | 16 -- pages/note/[id].js | 13 +- styles/style.css | 0 styles/webflow-layout.css | 385 ----------------------------------- 7 files changed, 2 insertions(+), 444 deletions(-) delete mode 100644 components/layout.module.css create mode 100644 styles/style.css delete mode 100644 styles/webflow-layout.css diff --git a/components/layout.js b/components/layout.js index 1698b7d..bbf35b5 100644 --- a/components/layout.js +++ b/components/layout.js @@ -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 (
diff --git a/components/layout.module.css b/components/layout.module.css deleted file mode 100644 index d0e3a8f..0000000 --- a/components/layout.module.css +++ /dev/null @@ -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; -} diff --git a/pages/_app.js b/pages/_app.js index ef05811..db7ef02 100644 --- a/pages/_app.js +++ b/pages/_app.js @@ -1,5 +1,5 @@ import '../styles/global.css' -import '../styles/webflow-layout.css' +import '../styles/style.css' export default function App({ Component, pageProps }) { diff --git a/pages/index.js b/pages/index.js index 79185be..a9a5683 100644 --- a/pages/index.js +++ b/pages/index.js @@ -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 ( - - - {content.title && } - {content.canonical && } - {content.description && } - -
-
- - ); @@ -58,8 +44,6 @@ export function getStaticProps() { props: { content:contentData, graphdata:graphdata, - //filenames:JSON.parse(filenamesRaw) - //sidebar:sidebarData }, }; } diff --git a/pages/note/[id].js b/pages/note/[id].js index dbfbeff..b066659 100644 --- a/pages/note/[id].js +++ b/pages/note/[id].js @@ -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 }) { {note.title && } - {note.canonical && } - {note.description && } -
- {/* COVER IMAGE */} - {note.cover && } - - {/* TITLE */} - {note.title &&

{note.title}

} - -
-
diff --git a/styles/style.css b/styles/style.css new file mode 100644 index 0000000..e69de29 diff --git a/styles/webflow-layout.css b/styles/webflow-layout.css deleted file mode 100644 index 8ba3d2c..0000000 --- a/styles/webflow-layout.css +++ /dev/null @@ -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; -}