added pages

gatsby-node.esm.js

@@ -0,0 +1,20 @@
+import alertList from './src/data/alerts'
+import postList from './src/data/posts'
+
+exports.createPages = ({ actions }) => {
+  const { createPage } = actions
+  alertList.forEach(alert => {
+    createPage({
+      path: `/alert/${alert.alertId}/`,
+      component: require.resolve('./src/templates/standard-post.js'),
+      context: { post: alert }
+    })
+  })
+  postList.forEach(post => {
+    createPage({
+      path: `/post/${post.postId}/`,
+      component: require.resolve('./src/templates/standard-post.js'),
+      context: { post }
+    })
+  })
+}

gatsby-node.js

@@ -1,9 +1,2 @@
-exports.createPages = async ({ actions }) => {
-  const { createPage } = actions
-  createPage({
-    path: '/using-dsg',
-    component: require.resolve('./src/templates/using-dsg.js'),
-    context: {},
-    defer: true
-  })
-}
+require = require('esm')(module)
+module.exports = require('./gatsby-node.esm.js')

package.json

@@ -6,6 +6,7 @@
   "author": "Samuel Lee <[email protected]>",
   "dependencies": {
     "babel-plugin-styled-components": "^2.0.7",
+    "esm": "^3.2.25",
     "gatsby": "^4.15.2",
     "gatsby-plugin-gatsby-cloud": "^4.15.0",
     "gatsby-plugin-image": "^2.15.1",

src/components/album-slideshow.js

@@ -0,0 +1,131 @@
+import React, { useState } from 'react'
+import s from 'styled-components'
+import { Link } from 'gatsby'
+import { StaticImage } from 'gatsby-plugin-image'
+
+import navLinks from '../data/navigation'
+import postList from '../data/posts'
+
+const AlbumSubwrapper = s.div`
+  margin: auto;
+  display: table-row;
+  align-items: center;
+  justify-content: space-between;
+  background-color: white;
+  border: 3px solid grey;
+`
+
+const AlbumSubtitle = s.h1`
+  position: relative;
+  align-items: center;
+  justify-content: space-between;
+  text-align: center;
+`
+
+const AlbumSlideshowWrapper = s.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`
+
+const AlbumSlideshowSlide = s(Link)`
+  border-collapse: collapse;
+  text-decoration: none;
+`
+
+const AlbumSlideshowImage = s.img`
+  margin: 0;
+  display: flex;
+  position: relative;
+  width: 420px;
+  height: 300px;
+  object-fit: scale-down;
+  border: 1px solid black;
+`
+
+const AlbumSlideshowImageText = s.div`
+  margin: 0;
+  position: relative;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  border-left: 1px solid black;
+  border-right: 1px solid black;
+  border-bottom: 1px solid black;
+`
+
+// const AlbumSlideshowGuide = s.div`
+// `
+
+const AlbumSlideshowLeftButton = s.i`
+  border: solid black;
+  border-width: 0 5px 5px 0;
+  padding: 5px;
+  transform: rotate(135deg);
+  -webkit-transform: rotate(135deg);
+`
+
+const AlbumSlideshowRightButton = s.i`
+  border: solid black;
+  border-width: 0 5px 5px 0;
+  padding: 5px;
+  transform: rotate(-45deg);
+  -webkit-transform: rotate(-45deg);
+`
+
+const firstFivePosts = postList.sort((a, b) => b.date.getTime() - a.date.getTime()).slice(0, 5)
+
+const increaseSlide = (slideNum, slideNumFunc) => {
+  if (slideNum === 5) {
+    slideNumFunc(1)
+  } else {
+    slideNumFunc(slideNum + 1)
+  }
+}
+
+const decreaseSlide = (slideNum, slideNumFunc) => {
+  if (slideNum === 1) {
+    slideNumFunc(5)
+  } else {
+    slideNumFunc(slideNum - 1)
+  }
+}
+
+const albumSlideTemplate = post => (
+  <AlbumSlideshowSlide to={`/post/${post.postId}`}>
+    <AlbumSlideshowImage src={post.image} />
+    <AlbumSlideshowImageText>
+      {post.title}
+    </AlbumSlideshowImageText>
+  </AlbumSlideshowSlide>
+)
+
+const AlbumSubpanel = () => {
+  const [slideNumber, setSlideNumber] = useState(1)
+  return (
+    <AlbumSubwrapper>
+      <AlbumSubtitle>
+        앨범
+      </AlbumSubtitle>
+      <AlbumSlideshowWrapper>
+        {/* {firstFivePosts.map(post => (
+          <AlbumSlideshowSlide>
+            <AlbumSlideshowImage src={post.image} />
+            <AlbumSlideshowImageText>
+              {post.text}
+            </AlbumSlideshowImageText>
+          </AlbumSlideshowSlide>
+        ))} */}
+        <AlbumSlideshowLeftButton onClick={() => decreaseSlide(slideNumber, setSlideNumber)} />
+        {(slideNumber === 1) && albumSlideTemplate(firstFivePosts[0])}
+        {(slideNumber === 2) && albumSlideTemplate(firstFivePosts[1])}
+        {(slideNumber === 3) && albumSlideTemplate(firstFivePosts[2])}
+        {(slideNumber === 4) && albumSlideTemplate(firstFivePosts[3])}
+        {(slideNumber === 5) && albumSlideTemplate(firstFivePosts[4])}
+        <AlbumSlideshowRightButton onClick={() => increaseSlide(slideNumber, setSlideNumber)} />
+      </AlbumSlideshowWrapper>
+    </AlbumSubwrapper>
+  )
+}
+
+export default AlbumSubpanel

src/components/alert-table.js

@@ -0,0 +1,71 @@
+import React from 'react'
+import s from 'styled-components'
+import { Link } from 'gatsby'
+import { StaticImage } from 'gatsby-plugin-image'
+
+import navLinks from '../data/navigation'
+import alertList from '../data/alerts'
+
+const AlertSubwrapper = s.div`
+  display: table-row;
+  align-items: center;
+  justify-content: space-between;
+  margin: auto;
+  background-color: white;
+  border: 3px solid grey;
+ `
+
+const AlertSubtitle = s.h1`
+  position: relative;
+  align-items: center;
+  justify-content: space-between;
+  text-align: center;
+`
+
+const AlertTableWrapper = s.table`
+  border: 1px solid grey;
+  border-collapse: collapse;
+  width: 420px;
+`
+
+const AlertTableCell = s(Link)`
+  display: flex;
+  padding: 10px 7px 10px 7px;
+  text-decoration: none;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  border: 1px solid grey;
+`
+
+const AlertTableCellTitle = s.div`
+  color: black;
+  text-align: left;
+`
+
+const AlertTableCellDate = s.small`
+  color: grey;
+  text-align: right;
+`
+
+const AlertSubpanel = () => (
+  <AlertSubwrapper>
+    <AlertSubtitle>
+      공지사항
+    </AlertSubtitle>
+    <AlertTableWrapper>
+      {alertList.sort((a, b) => b.date.getTime() - a.date.getTime()).slice(0, 7).map(alert => (
+          <AlertTableCell to={`/alert/${alert.alertId}`}>
+            <AlertTableCellTitle>
+              {alert.title}
+            </AlertTableCellTitle>
+            <AlertTableCellDate>
+              {alert.date.toLocaleDateString('en-CA').slice(5)}
+            </AlertTableCellDate>
+          </AlertTableCell>
+      ))}
+    </AlertTableWrapper>
+  </AlertSubwrapper>
+)
+
+export default AlertSubpanel

src/components/header.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import s from 'styled-components'
 import { Link } from 'gatsby'
 import { StaticImage } from 'gatsby-plugin-image'
-import { navLinks } from '../data/navigation'
+import navLinks from '../data/navigation'
 
 const HeaderWrapper = s.header`
   margin: 0 auto;
@@ -35,6 +35,7 @@ const NavLink = s(Link)`
 `
 
 const SubnavWrapper = s.nav`
+  background-color: white;
   position: absolute; 
   display: none;
   z-index: 10;

src/components/image-layout.js

@@ -0,0 +1,14 @@
+import React from "react"
+
+import Layout from "./layout"
+
+const ImageLayout = props => (
+  <Layout pageTitle={props.title} pageSubtitle={props.subtitle}>
+    <img
+      src={props.imageUrl}
+      alt="MISSING JPG"
+    />
+  </Layout>
+)
+
+export default ImageLayout

src/components/layout.js

@@ -12,8 +12,11 @@ import { useStaticQuery, graphql } from 'gatsby'
 import Header from './header'
 import Footer from './footer'
 import './layout.css'
+import { StaticImage } from 'gatsby-plugin-image'
+import PageTitle from './page-title'
+import { SubHeading } from '../data/typography'
 
-const Layout = ({ children }) => {
+const Layout = ({ children, pageTitle, pageSubtitle }) => {
   const data = useStaticQuery(graphql`
     query SiteTitleQuery {
       site {
@@ -34,7 +37,9 @@ const Layout = ({ children }) => {
           padding: 'var(--size-gutter)'
         }}
       > */}
-        <main>{children}</main>
+      {pageTitle && <PageTitle pageTitle={pageTitle} />}
+      {pageSubtitle && <SubHeading>{pageSubtitle}</SubHeading>}
+      <main>{children}</main>
         {/* <footer
           style={{
             marginTop: 'var(--space-5)',