"Daily Bruin" Header resize

.github/workflows/deploy.yml

@@ -6,14 +6,15 @@ name: Deploy
 on:
   push:
     branches: [master]
+  workflow_dispatch:
 
 jobs:
   build:
     runs-on: self-hosted
 
     strategy:
       matrix:
-        node-version: [10.x, 12.x]
+        node-version: [16.x]
 
     steps:
       - uses: actions/checkout@v2 # on the runner, check out this code on
@@ -26,3 +27,4 @@ jobs:
       - run: pm2 reload flamingo # reloads on the DigitalOcean droplet
         env:
           CI: true
+          ACTIONS_ALLOW_USE_UNSECURE_NODE_VERSION: true

.github/workflows/new_deploy.yml

@@ -0,0 +1,58 @@
+name: Deploy
+
+on:
+  push:
+    branches: [master]
+  workflow_dispatch:
+
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Check out code
+        uses: actions/checkout@v3
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+
+      - name: Install dependencies
+        run: yarn install
+
+      - name: Build project
+        run: yarn build
+
+      - name: Set up Docker
+        uses: docker/setup-buildx-action@v3
+
+      - name: Log in to DigitalOcean
+        run: echo "${{ secrets.DIGITALOCEAN_ACCESS_TOKEN }}" | docker login -u "doctl" --password-stdin registry.digitalocean.com
+
+      - name: Build and push Docker image
+        run: |
+          docker buildx build --platform linux/amd64,linux/arm64 \
+          --tag registry.digitalocean.com/dailybruin/dbonline:latest \
+          --push .
+
+      - name: Install doctl
+        run: |
+          curl -sL https://github.com/digitalocean/doctl/releases/download/v1.99.0/doctl-1.99.0-linux-amd64.tar.gz | tar -xzv
+          sudo mv doctl /usr/local/bin/
+
+      - name: Authenticate doctl
+        run: |
+            doctl auth init --access-token ${{ secrets.DIGITALOCEAN_ACCESS_TOKEN }}
+
+      - name: Write kubeconfig to file
+        run: |
+          echo "${{ secrets.KUBECONFIG }}" > kubeconfig.yaml
+
+      - name: Update Kubernetes deployment
+        env:
+          KUBECONFIG: kubeconfig.yaml
+        run: |
+          kubectl set image deployment/flamingo flamingo=registry.digitalocean.com/dailybruin/dbonline:latest
+          kubectl rollout status deployment/flamingo
+

Dockerfile

@@ -0,0 +1,18 @@
+FROM node:16.20.2
+
+RUN apt-get update && apt-get install -y \
+    yarn
+
+WORKDIR /usr/src/flamingo
+
+COPY .next ./.next
+
+COPY node_modules ./node_modules
+
+COPY package.json .
+
+COPY yarn.lock .
+
+EXPOSE 1919
+
+CMD ["yarn", "deploy"]

build.sh

@@ -0,0 +1,5 @@
+#!/bin/bash
+
+yarn build
+docker build --platform="linux/amd64" -t registry.digitalocean.com/dailybruin/flamingotestedamd64:latest .
+docker push registry.digitalocean.com/dailybruin/flamingotestedamd64:latest

components/Article/index.jsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import Link from "next/link";
-/** @jsx jsx */
+/** @jsxImportSource @emotion/react */
 import { css, jsx } from "@emotion/core";
 import moment from "moment";
 
@@ -25,7 +25,6 @@ export default class Article extends React.Component {
         // quick patch to prevent attempting to load an author that was not properly fetched.
         continue;
       }
-      console.log(author);
       authorPictures.push(
         <a href={`/author/${author.slug}`}>
           <img

components/ArticleCard/Breaking.jsx

@@ -0,0 +1,160 @@
+import * as React from "react";
+import Link from "next/link";
+/** @jsxImportSource @emotion/react */
+import { css, jsx } from "@emotion/core";
+import * as globals from "../globals";
+import * as locals from "./locals";
+import * as utilities from "./utilities";
+import * as moment from "moment";
+
+export default function Breaking(props) {
+    var CurrentTime = new Date();
+    var PostTime = new Date(props.date);
+    var DiffInMilliseconds = CurrentTime - PostTime;
+    var TotalMinutes = Math.floor(DiffInMilliseconds / (1000 * 60));
+    var DiffInDays = Math.floor(TotalMinutes / (60 * 24));
+    var DiffInHours = Math.floor((TotalMinutes % (60 * 24)) / 60);
+    var DiffInMinutes = TotalMinutes % 60;
+
+    var TimeDiff = "";
+    if (DiffInDays != 0) {
+        TimeDiff += DiffInDays + " Day" + (DiffInDays != 1 ? "s" : "") + ", ";
+    }
+    if (DiffInHours != 0) {
+        TimeDiff += DiffInHours + " Hour" + (DiffInHours != 1 ? "s" : "") + ", ";
+    }
+    TimeDiff += DiffInMinutes + " Minute" + (DiffInMinutes != 1 ? "s" : "") + " Ago";
+
+    return (
+        <div
+            css={css`
+        display: flex;
+        flex-wrap: wrap;
+        box-shadow: ${globals.cardShadow};
+        padding: 0px;
+        background-color: #ffffff;
+        /*border: 10px solid #d12008;*/
+        border-radius: 20px;
+        width: 100%;
+      `}
+        >
+            <div
+                css={css`
+          padding: 20px;
+          padding-bottom: 5px;
+          padding-top: 5px;
+          width: 100%;
+        `}
+            >
+                <span>
+                        <span>
+                            <h3
+                            css={css`
+                            margin: 0;
+
+                            font-family: ${globals.bodyFont};
+                            font-style: normal;
+                            font-weight: bold;
+                            font-size: 11px;
+                            display: inline;
+                            margin-right: 4px;
+                            color: #000000;`}
+                        >
+                            {utilities.renderAuthors(props.authors)}
+                        </h3>
+                    </span>
+
+                    <span
+                        css={css`
+                margin: 0 5px 0 0;
+                font-family: ${globals.bodyFont};
+                font-style: normal;
+                font-weight: 300;
+                font-size: 11px;
+                line-height: 14px;
+                display: inline;
+            `}
+                    >
+                        {PostTime.toLocaleString()}
+                    </span>
+                    <span
+                        css={css`
+              border-left: 1px solid #000;
+              padding-left: 4px;
+              font-family: ${globals.bodyFont};
+              font-style: normal;
+              font-weight: 300;
+              font-size: 11px;
+              line-height: 14px;
+            `}
+                    >
+                        {TimeDiff}
+                    </span>
+                </span>
+                    <div
+                        css={css`
+              margin: 2px 0 4px;
+              font-family: 'DM Serif Text', serif;\n  font-style: normal;\n  font-weight: bold;\n  font-size: 1.5rem;\n  line-height: 1.25;\n  color: #000000;\n
+            `}
+                        style={{
+                            fontStyle:
+                                props.acf.db_article_format == "column" ? "italic" : "normal"
+                        }}
+                        dangerouslySetInnerHTML={{ __html: props.headline }}
+                    />
+                    <div
+                        css={css`
+              margin: 0 0 5px;
+              font-family: 'Roboto', serif;\n font-style: normal;\n font-weight: normal;\n  font-size: 18px;\n  color: #000000;\n\n
+            `}
+                    dangerouslySetInnerHTML={{ __html: props.content }}
+                    />
+            </div>
+            {props.imageurl != "http://wp.dailybruin.com/images/2017/03/db-logo.png" &&
+
+                <div
+                    css={css`
+              height: 100%;
+              width: 100%;
+              padding-top: 66.66%;
+              overflow: hidden;
+              position: relative;
+            `}
+                >
+                    <img
+                        css={css`
+                height: 100%;
+                width: 100%;
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+                object-fit: cover;
+                padding: 20px;
+                padding-top: 0px;
+                padding-bottom: 10px;
+              `}
+                        src={props.imageurl}
+                    />
+                </div>
+                /* <h4
+                    css={css`
+            display: block;
+            margin: 2px 0 0;
+
+            font-family: Arimo;
+            font-style: normal;
+            font-weight: normal;
+            font-size: 8px;
+            text-align: right;
+
+            color: #000000;
+          `}
+                >
+                    {props.photographer}
+                </h4> */
+            }
+
+        </div>
+    );
+}

components/ArticleCard/BreakingOverview.jsx

@@ -0,0 +1,102 @@
+import * as React from "react";
+import Link from "next/link";
+/** @jsxImportSource @emotion/react */
+import { css, jsx } from "@emotion/core";
+import * as globals from "../globals";
+import * as locals from "./locals";
+import * as utilities from "./utilities";
+import * as moment from "moment";
+
+export default function BreakingOverview(props) {
+    return (
+        <div
+            css={css`
+        display: flex;
+        flex-wrap: wrap;
+        box-shadow: ${globals.cardShadow};
+        padding: 0px;
+        background-color: #ffffff;
+        border: 2px solid #d12008;
+        border-radius: 20px;
+        width: 100%;
+        position: sticky;
+      `}
+        >
+            <div
+                css={css`
+          padding: 20px;
+          padding-bottom: 5px;
+          padding-top: 5px;
+          width: 100%;
+        `}
+            >
+                <span>
+                    <span>
+                        <h3
+                            css={css`
+                            margin: 0;
+                            font-family: 'DM Serif Text', serif;\n  font-style: normal;\n  font-weight: bold;\n  font-size: 1.5rem;\n  line-height: 1.25;\n  color: #000000;\n
+                            font-size: 1.3rem;
+                            display: inline;
+                            `}
+                        >
+                            {"What we're covering here"}
+                        </h3>
+                    </span>
+                </span>
+                <div
+                    css={css`
+              margin: 10px 0 5px;
+              font-family: 'Roboto', serif;\n font-style: normal;\n font-weight: normal;\n  font-size: 18px;\n  color: #000000;\n\n
+            `}
+                    dangerouslySetInnerHTML={{ __html: props.excerpt }}
+                />
+            </div>
+            {props.imageurl != "http://wp.dailybruin.com/images/2017/03/db-logo.png" &&
+
+                <div
+                    css={css`
+              height: 100%;
+              width: 100%;
+              padding-top: 66.66%;
+              overflow: hidden;
+              position: relative;
+            `}
+                >
+                    <img
+                        css={css`
+                height: 100%;
+                width: 100%;
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+                object-fit: cover;
+                padding: 20px;
+                padding-top: 0px;
+                padding-bottom: 10px;
+              `}
+                        src={props.imageurl}
+                    />
+                </div>
+                /* <h4
+                    css={css`
+            display: block;
+            margin: 2px 0 0;
+
+            font-family: Arimo;
+            font-style: normal;
+            font-weight: normal;
+            font-size: 8px;
+            text-align: right;
+
+            color: #000000;
+          `}
+                >
+                    {props.photographer}
+                </h4> */
+            }
+
+        </div>
+    );
+}

components/ArticleCard/Full.jsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import Link from "next/link";
-/** @jsx jsx */
+/** @jsxImportSource @emotion/react */
 import { css, jsx } from "@emotion/core";
 import * as globals from "../globals";
 import * as locals from "./locals";