@articles-media/articles-dev-box 1.0.1 → 1.0.3

package/src/components/ArticlesAd.jsx

@@ -1,76 +0,0 @@
-import React from 'react';
-
-// const ArticlesAd = () => {
-//   return (
-//     <div style={{ border: '1px solid #ccc', padding: '20px', margin: '10px', textAlign: 'center' }}>
-//       <p>Advertisement</p>
-//     </div>
-//   );
-// };
-
-// export default ArticlesAd;
-
-// import Script from "next/script";
-import { useEffect } from "react";
-// import { useStore } from "@/hooks/useStore";
-
-// Non typescript version, if copying consider using the typescript version instead from a repo like amcot or battle-trap
-
-export default function ArticlesAd({
-    darkMode
-}) {
-
-    // const darkMode = useStore((state) => state.darkMode)
-
-    useEffect(() => {
-        // if (!process.env.NEXT_PUBLIC_ARTICLES_OAUTH_ID) {
-        //     console.log("NEXT_PUBLIC_ARTICLES_OAUTH_ID is not set, skipping Articles Media Sign In button initialization.");
-        // }
-    }, []);
-
-    useEffect(() => {
-        const script = document.createElement('script');
-
-        script.src = "https://accounts.articles.media/js/ad.js";
-        script.async = true;
-
-        document.body.appendChild(script);
-
-        return () => {
-            document.body.removeChild(script);
-        }
-    }, []);
-
-    return (
-        <div className="">
-
-            {/* <script
-                src={process.env.NODE_ENV === "development" ?
-                    // `${process.env.NEXT_PUBLIC_LOCAL_ACCOUNTS_ADDRESS}/js/ad.js`
-                    `https://accounts.articles.media/js/ad.js?darkMode=${darkMode}`
-                    :
-                    `https://accounts.articles.media/js/ad.js?darkMode=${darkMode}`
-                }
-                strategy="afterInteractive"
-
-                data-version="1"
-            // data-articles-color-mode="Dark"
-            // data-articles-button-style={style}
-            // data-articles-client-id={process.env.NEXT_PUBLIC_ARTICLES_OAUTH_ID}
-            // data-articles-redirect-uri="https://localhost:3002"
-            // data-articles-redirect-uri={process.env.NEXT_PUBLIC_ARTICLES_REDIRECT_URI}
-            // data-articles-authHost={
-            //     process.env.NODE_ENV == "development" ? // "http://localhost:3001" 
-            //         process.env.NEXT_PUBLIC_LOCAL_ACCOUNTS_ADDRESS
-            //         :
-            //         "https://accounts.articles.media"
-            // }
-            /> */}
-
-            <div className={"articles-media-ad"}>
-
-            </div>
-
-        </div>
-    );
-}

package/src/hooks/Ads/useAd.js

@@ -1,55 +0,0 @@
-import useSWR from "swr";
-
-import axios from "axios";
-
-const fetcher = async (data) => {
-    if (process.env.NODE_ENV === 'development') {
-        try {
-            const res = await axios.get(`http://localhost:3001/api/ads/${data.ad_id}`, {
-                params: {
-                    ad_id: data.ad_id
-                }
-            });
-            return res.data.result;
-        } catch (err) {
-            // Failed to fetch from localhost, fallback to default URL
-        }
-    }
-
-    return axios.get(data.url, {
-        params: {
-            ad_id: data.ad_id
-        }
-    }).then((res) => res.data.result);
-};
-
-const minutes = 60;
-const options = {
-    dedupingInterval: ((1000 * 60) * minutes),
-    // keepPreviousData: true,
-    // fallbackData: []
-}
-
-const useAd = (ad_id) => {
-
-    const { data, error, isLoading, mutate } = useSWR(
-        ad_id ?
-        {
-            url: `https://articles.media/api/ads/${ad_id}`, 
-            ad_id
-        }
-        :
-        null,
-        fetcher,
-        options
-    );
-
-    return {
-        data,
-        error,
-        isLoading,
-        mutate,
-    };
-};
-
-export default useAd;

package/src/hooks/Ads/useAds.js

@@ -1,54 +0,0 @@
-import useSWR from "swr";
-
-import axios from "axios";
-import { minutesToMilliseconds } from "date-fns";
-
-const fetcher = async (data) => {
-    if (process.env.NODE_ENV === 'development') {
-        try {
-            const res = await axios.get("http://localhost:3001/api/ads", {
-                params: {
-                    // ad_id: data.ad_id
-                }
-            });
-            return res.data;
-        } catch (err) {
-            // Failed to fetch from localhost, fallback to default URL
-        }
-    }
-
-    return axios.get(data.url, {
-        params: {
-            // ad_id: data.ad_id
-        }
-    }).then((res) => res.data);
-};
-
-const minutes = 60;
-const options = {
-    dedupingInterval: minutesToMilliseconds(minutes),
-    focusThrottleInterval: minutesToMilliseconds(minutes),
-    // keepPreviousData: true,
-    // fallbackData: []
-}
-
-const useAds = (params) => {
-
-    const { data, error, isLoading, mutate } = useSWR(
-        {
-            url: `https://articles.media/api/ads`, 
-            // ad_id
-        },
-        fetcher,
-        options
-    );
-
-    return {
-        data,
-        error,
-        isLoading,
-        mutate,
-    };
-};
-
-export default useAds;

package/src/hooks/useGameScoreboard.js

@@ -1,59 +0,0 @@
-import useSWR from "swr";
-
-import axios from "axios";
-
-const fetcher = async (obj) => {
-    if (process.env.NODE_ENV === 'development') {
-        try {
-            const res = await axios.get("http://localhost:3001/api/community/games/scoreboard", {
-                params: {
-                    game: obj.game,
-                }
-            });
-            return res.data;
-        } catch (err) {
-            // Failed to fetch from localhost, fallback to default URL
-        }
-    }
-    
-    return axios.get(obj.url, {
-        params: {
-            game: obj.game,
-        }
-    }).then((res) => res.data);
-};
-
-const options = {
-    dedupingInterval: ((1000 * 60) * 30),
-    refreshInterval: 0,
-    revalidateOnFocus: false,
-    revalidateIfStale: false,
-    shouldRetryOnError: false,
-    // fallbackData: []
-}
-
-const useGameScoreboard = (params) => {
-
-    const { data, error, isLoading, isValidating, mutate } = useSWR(
-        params?.game ?
-            {
-                // url: "/api/community/games/scoreboard",
-                url: "https://articles.media/api/community/games/scoreboard",
-                game: params.game,
-            }
-            :
-            null,
-        fetcher,
-        options
-    );
-
-    return {
-        data,
-        error,
-        isLoading,
-        isValidating,
-        mutate,
-    };
-};
-
-export default useGameScoreboard;

package/styles/components/Ad.scss

@@ -1,223 +0,0 @@
-@use "../global.scss" as *;
-
-.ad-wrap {
-    z-index: 1;
-    margin: 0 auto;
-    margin-bottom: 1rem;
-    max-width: 312px;
-    width: 100%;
-
-    .ad {
-        position: relative;
-        align-self: flex-start;
-        width: 100%;
-        z-index: 2;
-        font-family: brandon-grotesque, sans-serif;
-        @include shadow-articles;
-        font-size: 14px;
-
-        @include media-breakpoint-down(md) {
-            font-size: 16px;
-            width: 100%;
-        }
-
-        .main-panel {
-            background-color: var(--articles-ad-background-color, var(--card-background));
-            color: var(--articles-ad-font-color, var(--bs-body-color));
-            // background-color: #343746;
-            height: 400px;
-            display: flex;
-            flex-direction: column;
-
-            .ad-warning {
-                // background-color: $base-color;
-                // background-color: white;
-                // color: black;
-                padding: 0.1rem 0.75rem;
-                font-family: brandon-grotesque, sans-serif;
-                // font-style: normal;
-                font-weight: 900;
-                font-size: 1rem;
-                border-bottom: 1px solid var(--articles-ad-border-color, var(--card-background));
-            }
-
-            .content-wrap {
-                display: flex;
-                // flex-direction: row;
-                flex-direction: column;
-                align-items: center;
-
-                @include media-breakpoint-up(lg) {
-                    flex-direction: column;
-                }
-            }
-
-            .photo-banner {
-                position: relative;
-                height: 100px;
-                width: 100px;
-                flex-shrink: 0;
-                display: flex;
-                // justify-content: center;
-                align-items: center;
-                padding-left: 1rem;
-                margin-left: 0.75rem;
-
-                // @include media-breakpoint-up(lg) {
-                margin-left: 0rem;
-                height: 125px;
-                width: 100%;
-                // }
-
-                .logo {
-                    // padding: 1rem;
-                    // $height: 125px;
-                    // position: absolute;
-                    // top: 1rem;
-                    // left: 50%;
-                    // transform: translateX(-50%);
-                    // height: $height;
-                    object-fit: cover;
-                    z-index: 1;
-
-                    img {
-                        width: 75px;
-                        height: 75px;
-                        object-fit: contain;
-
-                        // @include media-breakpoint-up(lg) {
-                        //     width: 100px;
-                        //     height: 100px;
-                        // }
-                    }
-                }
-
-                .icon {
-                    display: none;
-                    position: absolute;
-                    bottom: calc(-125px / 2);
-                    left: 20px;
-                    height: 125px;
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                    color: white;
-                    font-size: 3.5rem;
-                }
-
-                .photo {
-                    position: absolute;
-                    left: 0;
-                    top: 0;
-                    width: 100%;
-                    height: 100%;
-                    object-fit: cover;
-                }
-            }
-
-            .details-wrap {
-                width: 100%;
-            }
-
-            .details,
-            .detail-title {
-                padding: 0.75rem;
-                // color: white;
-                display: grid;
-                grid-gap: 5px 5px;
-                grid-template-columns: repeat(2, 1fr);
-                padding-bottom: 0rem;
-
-                @include media-breakpoint-down(md) {
-                    // padding-top: 80px;
-                }
-
-                .detail {
-                    // margin-left: 5%;
-                    // width: 50%;
-
-                    .icon {
-                        display: inline-block;
-                        width: 1.5rem;
-
-                        i {
-                            justify-content: flex-start;
-                            display: flex;
-                        }
-                    }
-                }
-            }
-
-            .short-description {
-                padding: 0.75rem;
-                padding-top: 0.25rem;
-                padding-bottom: 0rem;
-                min-height: 50px;
-                overflow-y: auto;
-                max-height: 125px;
-                // @include articles-scrollbar;
-                @include alternate-scrollbar;
-                // color: white;
-            }
-
-            .detail-title {
-                display: flex;
-                justify-content: space-between;
-                align-items: center;
-
-                // .detail {
-                //     // font-size: 2rem;
-                //     width: 100%;
-                //     font-family: brandon-grotesque, sans-serif;
-                //     font-style: normal;
-                //     font-weight: 900;
-                //     font-size: 1.25rem;
-
-                //     .icon {
-                //         margin-right: 1rem;
-                //     }
-                // }
-            }
-
-            .action-wrap {
-                // background-color: #343746;
-                // color: white;
-                border-top: 1px solid var(--articles-ad-border-color, var(--card-background));
-
-                .action {
-                    // color: white;
-                    // margin-top: 0.75rem;
-                    padding: 0.25rem;
-                    display: flex;
-                    justify-content: center;
-                    align-items: center;
-                    border: 1px solid var(--articles-ad-border-color, var(--card-background));
-                    color: var(--articles-ad-font-color, var(--bs-body-color));
-                    border-radius: 10px;
-                    margin-left: auto;
-                    margin-right: auto;
-                    cursor: pointer;
-                    transition-duration: 200ms;
-
-                    &:hover {
-                        background-color: white;
-                        color: black;
-                    }
-
-                    &:active {
-                        background-color: gray;
-                    }
-                }
-            }
-        }
-    }
-
-    .advertise-with-us {
-        background-color: var(--articles-ad-background-color, var(--card-background));
-        border-top: 2px solid var(--articles-ad-border-color, var(--card-background));
-
-        a {
-            color: var(--articles-ad-font-color, var(--bs-body-color))!important;
-        }
-    }
-}

package/styles/components/GameScoreboard.scss

@@ -1,37 +0,0 @@
-@use "../global.scss" as *;
-
-.scoreboard {
-    margin-top: 1rem;
-    max-width: 300px;
-    width: 100%;
-    margin-bottom: 1rem;
-
-    @include media-breakpoint-up(lg) {
-        margin-top: 0rem;
-        margin-bottom: 0rem;
-        display: block;
-        position: absolute;
-        left: 1rem;
-        top: 50%;
-        transform: translateY(-50%);
-    }
-}
-
-.articles-game-scoreboard {
-    border: 1px solid rgb(206, 212, 218);
-    border-radius: 8px;
-    box-shadow: rgba(0, 0, 0, 0.07) 0px 2px 8px;
-    // background: rgb(255, 255, 255);
-    color: rgb(34, 34, 34);
-    width: 100%;
-    max-width: 350px;
-    margin: 0px 1rem;
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-    z-index: 1;
-    position: fixed;
-    bottom: 50%;
-    transform: translateY(50%);
-    left: 8px;
-}

package/styles/global.scss

@@ -1,98 +0,0 @@
-@use "sass:map";
-
-@use "./variables.scss" as *;
-
-@mixin alternate-scrollbar {
-    
-}
-
-// Define Bootstrap-like breakpoints
-$grid-breakpoints: (
-    xs: 0,
-    sm: 576px,
-    md: 768px,
-    lg: 992px,
-    xl: 1200px,
-    xxl: 1400px
-);
-
-// Mixin for media-breakpoint-up
-@mixin media-breakpoint-up($name) {
-    $min: map.get($grid-breakpoints, $name);
-    @if $min != null and $min != 0 {
-        @media (min-width: $min) {
-            @content;
-        }
-    } @else if $min == 0 {
-        @content;
-    }
-}
-
-// Mixin for media-breakpoint-down
-@mixin media-breakpoint-down($name) {
-    $max: map.get($grid-breakpoints, $name);
-    @if $max != null and $max != 0 {
-        @media (max-width: $max) {
-            @content;
-        }
-    }
-}
-
-$shadow-articles: 0 0 0 1px rgba(0, 0, 0, 25%), 0 2px 3px rgba(0, 0, 0, 20%);
-
-@mixin shadow-articles {
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 25%), 0 2px 3px rgba(0, 0, 0, 20%);
-}
-
-.shadow-articles {
-    box-shadow:
-        0 0 0 1px rgba(0, 0, 0, 30%),
-        0 2px 3px rgba(0, 0, 0, 20%);
-    @include shadow-articles;
-}
-
-// @mixin alternate-scrollbar {
-//     /* Width */
-//     &::-webkit-scrollbar {
-//         width: 10px;
-//         height: 10px;
-//     }
-
-//     /* Track */
-//     &::-webkit-scrollbar-track {
-//         background: rgba(255, 255, 255, 0);
-//     }
-
-//     /* Handle */
-//     &::-webkit-scrollbar-thumb {
-//         background: #000;
-//         height: 10px;
-//         height: 6px;
-//         border: 4px solid rgba(0, 0, 0, 0);
-//         background-clip: padding-box;
-//         -webkit-border-radius: 7px;
-//         background-color: rgba(0, 0, 0, 0.15);
-//         -webkit-box-shadow:
-//             inset -1px -1px 0px rgba(0, 0, 0, 0.473),
-//             inset 1px 1px 0px rgba(0, 0, 0, 0.493);
-//     }
-
-//     /* Handle on hover */
-//     &::-webkit-scrollbar-thumb:hover {
-//         background: rgba(128, 128, 128, 0.5);
-//     }
-// }
-
-.text-center {
-    text-align: center;
-}
-
-.d-flex {
-    display: flex;
-}
-
-.flex-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}

package/styles/variables.scss

@@ -1,3 +0,0 @@
-:root {
-    --articles-theme-primary: #f9edcd;
-}