Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[OPTIONAL] - Newssite - updates to support different languages / html direction in the future #248

Merged
merged 8 commits into from
Jun 29, 2023
Merged

[OPTIONAL] - Newssite - updates to support different languages / html direction in the future #248

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
5c4c6e0
initial setup
flashdesignory Jun 20, 2023
bb1d12c
add test
flashdesignory Jun 20, 2023
f6a309a
cleanup
flashdesignory Jun 20, 2023
00fbbc7
rename components
flashdesignory Jun 20, 2023
f516896
skip link
flashdesignory Jun 20, 2023
20c788b
remove other languages
flashdesignory Jun 28, 2023
23a7e02
remove empty lines
flashdesignory Jun 28, 2023
ea57376
pr feedback
flashdesignory Jun 29, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion resources/newssite/news-next/dist/404.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><meta name="next-head-count" content="2"/><link rel="preload" href="./_next/static/css/5c49298423df7aa9.css" as="style"/><link rel="stylesheet" href="./_next/static/css/5c49298423df7aa9.css" data-n-g=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="./_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="./_next/static/chunks/webpack-e50e9853db18b759.js" defer=""></script><script src="./_next/static/chunks/framework-2c79e2a64abdb08b.js" defer=""></script><script src="./_next/static/chunks/main-2ba37e62325cc71b.js" defer=""></script><script src="./_next/static/chunks/pages/_app-77983e68be50f72a.js" defer=""></script><script src="./_next/static/chunks/pages/_error-54de1933a164a1ff.js" defer=""></script><script src="./_next/static/F195PZl4yn18BfMZaSMUr/_buildManifest.js" defer=""></script><script src="./_next/static/F195PZl4yn18BfMZaSMUr/_ssgManifest.js" defer=""></script></head><body><div id="__next"></div><div id="settings-container"></div><div id="notifications-container"></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"statusCode":404}},"page":"/_error","query":{},"buildId":"F195PZl4yn18BfMZaSMUr","assetPrefix":".","nextExport":true,"isFallback":false,"gip":true,"scriptLoader":[]}</script></body></html>
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><meta name="next-head-count" content="2"/><link rel="preload" href="./_next/static/css/5c49298423df7aa9.css" as="style"/><link rel="stylesheet" href="./_next/static/css/5c49298423df7aa9.css" data-n-g=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="./_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="./_next/static/chunks/webpack-e50e9853db18b759.js" defer=""></script><script src="./_next/static/chunks/framework-2c79e2a64abdb08b.js" defer=""></script><script src="./_next/static/chunks/main-2ba37e62325cc71b.js" defer=""></script><script src="./_next/static/chunks/pages/_app-77983e68be50f72a.js" defer=""></script><script src="./_next/static/chunks/pages/_error-54de1933a164a1ff.js" defer=""></script><script src="./_next/static/t9NOr8PuVZjocZMRyrerF/_buildManifest.js" defer=""></script><script src="./_next/static/t9NOr8PuVZjocZMRyrerF/_ssgManifest.js" defer=""></script></head><body><div id="__next"></div><div id="settings-container"></div><div id="notifications-container"></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"statusCode":404}},"page":"/_error","query":{},"buildId":"t9NOr8PuVZjocZMRyrerF","assetPrefix":".","nextExport":true,"isFallback":false,"gip":true,"scriptLoader":[]}</script></body></html>
1 change: 1 addition & 0 deletions resources/newssite/news-next/dist/_next/static/chunks/pages/index-697895d5144433b5.js
View file
Open in desktop

Large diffs are not rendered by default.

1 change: 0 additions & 1 deletion resources/newssite/news-next/dist/_next/static/chunks/pages/index-85192d51d3aa6df8.js
View file
Open in desktop

This file was deleted.

2 changes: 1 addition & 1 deletion ...c/F195PZl4yn18BfMZaSMUr/_buildManifest.js → ...c/t9NOr8PuVZjocZMRyrerF/_buildManifest.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 ...tic/F195PZl4yn18BfMZaSMUr/_ssgManifest.js → ...tic/t9NOr8PuVZjocZMRyrerF/_ssgManifest.js
View file
Open in desktop
File renamed without changes.
2 changes: 1 addition & 1 deletion resources/newssite/news-next/dist/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><meta name="next-head-count" content="2"/><link rel="preload" href="./_next/static/css/5c49298423df7aa9.css" as="style"/><link rel="stylesheet" href="./_next/static/css/5c49298423df7aa9.css" data-n-g=""/><link rel="preload" href="./_next/static/css/8b914e4a9001ee1d.css" as="style"/><link rel="stylesheet" href="./_next/static/css/8b914e4a9001ee1d.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="./_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="./_next/static/chunks/webpack-e50e9853db18b759.js" defer=""></script><script src="./_next/static/chunks/framework-2c79e2a64abdb08b.js" defer=""></script><script src="./_next/static/chunks/main-2ba37e62325cc71b.js" defer=""></script><script src="./_next/static/chunks/pages/_app-77983e68be50f72a.js" defer=""></script><script src="./_next/static/chunks/743-fd706aeabb7828e3.js" defer=""></script><script src="./_next/static/chunks/pages/index-85192d51d3aa6df8.js" defer=""></script><script src="./_next/static/F195PZl4yn18BfMZaSMUr/_buildManifest.js" defer=""></script><script src="./_next/static/F195PZl4yn18BfMZaSMUr/_ssgManifest.js" defer=""></script></head><body><div id="__next"></div><div id="settings-container"></div><div id="notifications-container"></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/","query":{},"buildId":"F195PZl4yn18BfMZaSMUr","assetPrefix":".","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><meta name="next-head-count" content="2"/><link rel="preload" href="./_next/static/css/5c49298423df7aa9.css" as="style"/><link rel="stylesheet" href="./_next/static/css/5c49298423df7aa9.css" data-n-g=""/><link rel="preload" href="./_next/static/css/8b914e4a9001ee1d.css" as="style"/><link rel="stylesheet" href="./_next/static/css/8b914e4a9001ee1d.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="./_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="./_next/static/chunks/webpack-e50e9853db18b759.js" defer=""></script><script src="./_next/static/chunks/framework-2c79e2a64abdb08b.js" defer=""></script><script src="./_next/static/chunks/main-2ba37e62325cc71b.js" defer=""></script><script src="./_next/static/chunks/pages/_app-77983e68be50f72a.js" defer=""></script><script src="./_next/static/chunks/743-fd706aeabb7828e3.js" defer=""></script><script src="./_next/static/chunks/pages/index-697895d5144433b5.js" defer=""></script><script src="./_next/static/t9NOr8PuVZjocZMRyrerF/_buildManifest.js" defer=""></script><script src="./_next/static/t9NOr8PuVZjocZMRyrerF/_ssgManifest.js" defer=""></script></head><body><div id="__next"></div><div id="settings-container"></div><div id="notifications-container"></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/","query":{},"buildId":"t9NOr8PuVZjocZMRyrerF","assetPrefix":".","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>
0 ...s-next/src/components/article/Article.jsx → ...s-next/src/components/article/article.jsx
View file
Open in desktop
File renamed without changes.
6 changes: 4 additions & 2 deletions ...ews-next/src/components/dialog/Dialog.jsx → ...ews-next/src/components/dialog/dialog.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,13 @@ import { useState, useEffect } from "react";
import classNames from "classnames";

import Toggle from "../toggle/toggle";
import { useDataContext } from "@/context/data-context";

import styles from "news-site-css/dist/dialog.module.css";

export default function Dialog({ onClose }) {
const [isChecked, setIsChecked] = useState(false);
const { settings } = useDataContext();

useEffect(() => {
setIsChecked(document.body.classList.contains("reduced-motion"));
Expand All @@ -32,11 +34,11 @@ export default function Dialog({ onClose }) {
</div>
</button>
<header className={styles["dialog-header"]}>
<h2>Settings</h2>
<h2>{settings.header}</h2>
</header>
<section className={styles["dialog-body"]}>
<div className={styles["dialog-item"]}>
<Toggle label="Reduced Motion" onChange={handleChange} checked={isChecked} />
<Toggle label={settings.items.motion.label} onChange={handleChange} checked={isChecked} />
</div>
</section>
</div>
Expand Down
5 changes: 3 additions & 2 deletions ...next/src/components/dropdown/Dropdown.jsx → ...next/src/components/dropdown/dropdown.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
import { useState } from "react";
import classNames from "classnames";

import { more } from "@/data/buttons";
import { useDataContext } from "@/context/data-context";

import styles from "news-site-css/dist/dropdown.module.css";

export default function Dropdown({ children, animatedIconClass }) {
const [isOpen, setIsOpen] = useState(false);
const { buttons } = useDataContext();

function handleChange(e) {
setIsOpen(e.target.checked);
Expand All @@ -20,7 +21,7 @@ export default function Dropdown({ children, animatedIconClass }) {
<div className={styles.dropdown}>
<input type="checkbox" id="navbar-dropdown-toggle" className={styles["dropdown-toggle"]} onChange={handleChange} checked={isOpen} />
<label htmlFor="navbar-dropdown-toggle" className={styles["dropdown-label"]}>
<span className={styles["dropdown-label-text"]}>{more.label}</span>
<span className={styles["dropdown-label-text"]}>{buttons.more.label}</span>
<div className={classNames("animated-icon", "arrow-icon", "arrow", animatedIconClass)}>
<span className="animated-icon-inner" title="Arrow Icon">
<span></span>
Expand Down
0 ...ews-next/src/components/navbar/Navbar.jsx → ...ews-next/src/components/navbar/navbar.jsx
View file
Open in desktop
File renamed without changes.
4 changes: 3 additions & 1 deletion ...s-next/src/components/navlist/NavList.jsx → ...s-next/src/components/navlist/navlist.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
import { content } from "@/data/content";
import { useDataContext } from "@/context/data-context";
import Dropdown from "../dropdown/dropdown";
import NavListItem from "./navlist-item";

import styles from "news-site-css/dist/navbar.module.css";

export default function NavList({ callback, id }) {
const { content } = useDataContext();

const navItems = [];
const dropdownItems = [];

Expand Down
5 changes: 4 additions & 1 deletion resources/newssite/news-next/src/components/sitemap/sitemap.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,15 @@
import classNames from "classnames";

import { content } from "@/data/content";
import { useDataContext } from "@/context/data-context";

import { NavLink } from "react-router-dom";
import { HashLink } from "react-router-hash-link";

import styles from "news-site-css/dist/sitemap.module.css";

export default function Sitemap() {
const { content } = useDataContext();

const keys = Object.keys(content);
const navItems = keys.reduce((result, key) => {
result.push(key);
Expand Down
0 ...ews-next/src/components/toggle/Toggle.jsx → ...ews-next/src/components/toggle/toggle.jsx
View file
Open in desktop
File renamed without changes.
46 changes: 46 additions & 0 deletions resources/newssite/news-next/src/context/data-context.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
import { createContext, useContext } from "react";
import { content as contentEn } from "@/data/en/content";
import { settings as settingsEn } from "@/data/en/dialog";
import { footer as footerEn } from "@/data/en/footer";
import * as buttonsEn from "@/data/en/buttons";
import * as linksEn from "@/data/en/links";

const strings = {
en: {
content: contentEn,
settings: settingsEn,
footer: footerEn,
buttons: buttonsEn,
links: linksEn,
},
};

const DataContext = createContext(null);

export const DataContextProvider = ({ children }) => {
const defaultLanguage = "en";
const urlParams = new URLSearchParams(window.location.search);
const dir = urlParams.get("dir") ?? "ltr";
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This could be work for later, but in our project we're infering the direction from the language directly: https://github.com/firefox-devtools/profiler/blob/8ab31e7e35f0075ea93ef76784697f84185de9f1/src/app-logic/l10n.js#L53-L57
Might be worth doing the same thing here.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

let's do that one later....

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, we can do it once we add an actual RTL language.

const langFromUrl = urlParams.get("lang");
const lang = langFromUrl && langFromUrl in strings ? langFromUrl : defaultLanguage;

document.documentElement.setAttribute("dir", dir);
document.documentElement.setAttribute("lang", lang);

const value = {
lang,
dir,
...strings[lang],
};

return <DataContext.Provider value={value}>{children}</DataContext.Provider>;
};

export const useDataContext = () => {
const dataContext = useContext(DataContext);

if (!dataContext)
throw new Error("A DataProvider must be rendered before using useDataContext");

return dataContext;
};
0 ...es/newssite/news-next/src/data/buttons.js → ...newssite/news-next/src/data/en/buttons.js
View file
Open in desktop
File renamed without changes.
4 changes: 2 additions & 2 deletions ...es/newssite/news-next/src/data/content.js → ...newssite/news-next/src/data/en/content.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -151,7 +151,7 @@ export const content = {
meta: {
captions: "Photo taken by someone.",
},
title: "Volutpat est velit egestas dui id ornare arcu.",
title: "Nunc felis tellus, ultrices eget massa ac, lobortis laoreet lorem.",
type: "list",
content: [
{
Expand Down Expand Up @@ -454,7 +454,7 @@ export const content = {
"Orci ac auctor augue mauris augue neque gravida. Lectus magna fringilla urna porttitor rhoncus dolor purus non enim. Sagittis aliquam malesuada bibendum arcu vitae. Pellentesque habitant morbi tristique senectus et netus. Etiam erat velit scelerisque in dictum non consectetur a.",
},
{
title: "Netus et malesuada fames ac turpis egestas maecenas pharetra.",
title: "Suspendisse convallis efficitur felis ac mattis. Cras faucibus ultrices condimentum.",
content:
"Facilisis leo vel fringilla est. Turpis tincidunt id aliquet risus feugiat in ante metus. Viverra ipsum nunc aliquet bibendum enim facilisis. Tristique et egestas quis ipsum suspendisse ultrices gravida dictum. Tristique senectus et netus et malesuada fames ac turpis egestas.",
},
Expand Down
8 changes: 8 additions & 0 deletions resources/newssite/news-next/src/data/en/dialog.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
export const settings = {
header: "Settings",
items: {
motion: {
label: "Reduced Motion",
},
},
};
5 changes: 5 additions & 0 deletions resources/newssite/news-next/src/data/en/footer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
export const footer = {
copyright: {
label: "all rights reserved!",
},
};
6 changes: 6 additions & 0 deletions ...rces/newssite/news-next/src/data/links.js → ...s/newssite/news-next/src/data/en/links.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,3 +38,9 @@ export const legal = {
target: "external",
},
};

export const a11y = {
skip: {
label: "Skip to content",
},
};
27 changes: 15 additions & 12 deletions resources/newssite/news-next/src/pages/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React from "react";
import { HashRouter as Router, Routes, Route } from "react-router-dom";
import Page from "@/partials/page/page";
import Head from "next/head";
import { DataContextProvider } from "@/context/data-context";

export default function App() {
return (
Expand All @@ -10,18 +11,20 @@ export default function App() {
<title>The Daily Broadcast</title>
<meta name="description" content="A news site developed with Next.js." key="description" />
</Head>
<Router>
<Routes>
<Route path="/business" element={<Page id="business" />} />
<Route path="/health" element={<Page id="health" />} />
<Route path="/opinion" element={<Page id="opinion" />} />
<Route path="/politics" element={<Page id="politics" />} />
<Route path="/us" element={<Page id="us" />} />
<Route path="/world" element={<Page id="world" />} />
<Route path="/home" element={<Page id="home" />} />
<Route path="/" element={<Page id="home" />} />
</Routes>
</Router>
<DataContextProvider>
<Router>
<Routes>
<Route path="/business" element={<Page id="business" />} />
<Route path="/health" element={<Page id="health" />} />
<Route path="/opinion" element={<Page id="opinion" />} />
<Route path="/politics" element={<Page id="politics" />} />
<Route path="/us" element={<Page id="us" />} />
<Route path="/world" element={<Page id="world" />} />
<Route path="/home" element={<Page id="home" />} />
<Route path="/" element={<Page id="home" />} />
</Routes>
</Router>
</DataContextProvider>
</>
);
}
11 changes: 7 additions & 4 deletions .../news-next/src/partials/footer/Footer.jsx → .../news-next/src/partials/footer/footer.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,13 @@ import Dialog from "@/components/dialog/dialog";
import SettingsIcons from "../icons/settings-icons";
import SocialIcons from "../icons/social-icons";
import Sitemap from "@/components/sitemap/sitemap";
import { legal } from "@/data/links";
import { useDataContext } from "@/context/data-context";

import styles from "news-site-css/dist/footer.module.css";

export default function Footer() {
const [showPortal, setShowPortal] = useState(false);
const { footer, links } = useDataContext();

function openPortal() {
setShowPortal(true);
Expand All @@ -31,8 +32,8 @@ export default function Footer() {
<div className={styles["footer-column-center"]}>
<div className={styles["footer-links"]}>
<ul className={styles["footer-links-list"]}>
{Object.keys(legal).map((key) => {
const item = legal[key];
{Object.keys(links.legal).map((key) => {
const item = links.legal[key];
return (
<li className={styles["footer-links-item"]} key={`footer-links-item-${key}`}>
<a href={item.href} id={`footer-link-${key}`} className={styles["footer-link"]}>
Expand All @@ -49,7 +50,9 @@ export default function Footer() {
<div className={styles["footer-column-left"]}>
<SocialIcons id="footer-social-icons" />
</div>
<div className={styles["footer-column-center"]}>© {new Date().getFullYear()} No Rights Reserved</div>
<div className={styles["footer-column-center"]}>
© {new Date().getFullYear()} {footer.copyright.label}
</div>
<div className={styles["footer-column-right"]}>
<SettingsIcons onClick={openPortal} id="footer-settings-icons" />
</div>
Expand Down
0 .../news-next/src/partials/header/Header.jsx → .../news-next/src/partials/header/header.jsx
View file
Open in desktop
File renamed without changes.
10 changes: 6 additions & 4 deletions resources/newssite/news-next/src/partials/icons/social-icons.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,30 +2,32 @@ import FacebookIcon from "@/assets/facebook-icon";
import InstagramIcon from "@/assets/instagram-icon";
import TwitterIcon from "@/assets/twitter-icon";

import { social } from "@/data/links";
import { useDataContext } from "@/context/data-context";

import styles from "news-site-css/dist/icons-group.module.css";

export default function SocialIcons({ id }) {
const { links } = useDataContext();

return (
<div className={styles["icons-group"]}>
<ul className={styles["icons-group-list"]}>
<li className={styles["icons-group-item"]}>
<a href={social.facebook.href} id={`${id}-facebook`}>
<a href={links.social.facebook.href} id={`${id}-facebook`}>
<div className={styles["group-icon"]}>
<FacebookIcon />
</div>
</a>
</li>
<li className={styles["icons-group-item"]}>
<a href={social.instagram.href} id={`${id}-instagram`}>
<a href={links.social.instagram.href} id={`${id}-instagram`}>
<div className={styles["group-icon"]}>
<InstagramIcon />
</div>
</a>
</li>
<li className={styles["icons-group-item"]}>
<a href={social.twitter.href} id={`${id}-twitter`}>
<a href={links.social.twitter.href} id={`${id}-twitter`}>
<div className={styles["group-icon"]}>
<TwitterIcon />
</div>
Expand Down
Loading