diff --git a/.hugo_build.lock b/.hugo_build.lock new file mode 100644 index 000000000..e69de29bb diff --git a/README.md b/README.md index e328194d2..9e305615d 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,13 @@ [![status: active](https://opensource.twitter.dev/status/active.svg)](https://opensource.twitter.dev/status/#active) -This is the Twitter Open Source website at https://opensource.twitter.dev. +Forked Twitter Open Source Website - Huy Nguyen + +This repository contains a fork of the Twitter Open Source website (https://opensource.twitter.dev) built with Hugo. I'm collaborating with Andrew Pipo and Sam Winkelmann to work on this project to improve front-end/back-end functionalities, and animations throughout the web pages. + +Current Status: Done + +Forked from official repository on February 20th, 2024. This site is built with [hugo], using a custom built-in theme. Follow the standard instructions on the hugo website to [install] and [run] hugo. Just @@ -16,3 +22,164 @@ data]. [install]: https://gohugo.io/getting-started/installing/ [run]: https://gohugo.io/getting-started/usage/ [update some repo data]: ./.github/workflows/update-data.yml + +Disclaimer: + +This is a personal fork and not an official Twitter project. + + +# Development/Contributions: +## Sam Winkelmann + +### Project Brainstorming/Setup/Context - 6 hours +- Searching for an open source project to work on +- Understanding the project we chose +- Setting up project details on GitHub + +### Environment Setup - 2 hours +- Setting up development environment (had issues) + +### Home button implementation investigation - 2 hours +- Looking into the way to implement 'Home' button on top bar + +### Investigation: Visual fixes accross the site - 2 hours +- Searching for alignment/visual issues on various pages, including the projects and home tabs + +### Implementation of visual updates - 3 hours +- Fixing alignment/size of project cards + +### Milestones/final report/final organization - 3 hours +- Finished up the organization aspects of the project + +### Reflection - 2 hours +- Discussion with the group about the project/final thoughts +--- +## Huy Nguyen +### Project searching: 2 hours + +- Spent time in class and outside of class to search open-source project that could be good for our team to develop. + +### Brainstorming: 3 hours + +- Spent time brainstorm issues/tasks we could address for this open-source website. + +### Local environment Set up: 1.5 hours + +- Spent time installing, setting up local development environment. + +- Identify which packages to install, applying YAGNI concept into practice (not to install unnecessary software/packages). + +- Document installing progress in .txt file to help teammates install in the same progress. + +### Development: 12 hours - Issues contributed: #1 #4 #9 #10 #12 #14 #15 #17 #18 + +- Handled the light-dark switch and added local storage to improve the website's appearance. + +- Pair-programming with Andrew to address the navigation bar on "Year in review" page. + +- Collaborated with the team to improve the outlook for Projects page including Project's search bar, project count when search bar is applied, and implement a filter board to display the specific projects that the programming language button applies. + +- Collaborated with the team to implement a Home button on the navigation bar for each page. + +### Reflection: 1.5 hours + +- Reflecting the work that we've implemented for this project and consider any issues we could address. + +- Communicate back and forth on issues we developed to make sure we handled all the problems within. + +### Final Report: 4 hours + +- Document everything we did including github links, tasks descriptions, build evidence, etc. for this open source projects. + +- Work with team to check if there are anything we missed along the way and specify what we need to put in for each report section. + +--- +## Andrew T. Pipo +### Prior to 4/19/2024 - 7 hours +- Brainstorming/Researching Project Selection and Issues +- Establishing Local Environment + +--- + +### 4/19/2024 - 4 hours + +Started on Update to reflect name change - Twitter to X #5 + +- Started on removing all instances of Twitter and replace with X within the text - content of the main, projects, and memberships pages +- Replaced the logo with the X logo in the header of the main, projects, and memberships pages +- Removed instances of @TwitterOSS twitter handle as that is no longer an active twitter/X account +- Changed instances of Twitter to X in the footer of the main, projects, and memberships pages + +Started on Projects: Improve outlook of each project section #4 + +- Experimented with SCSS +- Implemented background color to each Project card, discovering inconsistencies with the layout + +--- + +### 4/20/2024 - 2 hours +Continued on Update to reflect name change - Twitter to X #5 + +- Replace the twitter logo with the X logo in the Year In Review Page +- Continued to remove instances of @TwitterOSS twitter handle as that is no longer an active twitter/X account +- Replaced the .ico file from the twitter logo to the X logo + +Continued on Projects: Improve outlook of each project section #4 + +- Adjusted layout of card to be more consistent +- Applied same style to all buttons/links within card + +Implemented Projects: Display project counts next to Projects title #8 + +- Added counted below the title of the projects page +- Implemented JavaScript to count the number of project-cards to indicate total projects on page + +### 4/20/2024 - 0.5 hours +Working on Final Report + +--- + +### 4/21/2024 - 4 hours +Started on Projects: Project counts should be updated and associate to search bar #9 + +- Investigated current search bar integration on Project page +- Removed original counter and replaced with existing counter that displayed the number results after a search inquiry +- Currently developing to have it display total projects if search bar query is blank + +Aided in Alignment/layout adjustments throughout website #7 +- Fixed the home page layout to remove unneccesary spacing and remove dead links +- Centered the title/subtitles in the projects and membership pages + +Implemented Add Navigation Bar to Year in Review Page #6 +- Implemented the navigation bar that is found on the other pages to be consistent with the rest of the website + +Implemented Main: Improve the 3 icons in Our Philosophy section #13 +- Added animations to the icons on the main page under the Philosophy section + + +### 4/21/2024 - 0.5 hours +Reviewed proposed changes to Projects: Improve outlook of each project section #4 +- Accepted incoming changes and proposed aligning everything to the center + +### 4/21/2024 - 2 hours +Worked on Final Report + +--- + +### 4/22/2024 - 1 hour +Started Main: Implement an animation for the .svg file in Explore Project section #16 +- Testing animation to ensure understanding of what file is accepting the .svg file in question +- In progress: Developing the correct animation to ensure that the content is still visible next to the image + +### 4/22/2024 - 0.5 hours +Reviewed proposed changes to Projects: Filter categories by border colors #15 +- Approved incoming changes with suggestion to display the programming language associated with the color/border +- Suggestion to add an "All" button to revert the filtering and to adjust the spacing and style of the button to match more of the project cards + +--- + +### 4/23/2024 - 3 hours +Worked on Final Report +Updated Personal Contributions + +--- \ No newline at end of file diff --git a/assets/css/_feather-core.scss b/assets/css/_feather-core.scss index 2e7750ba0..b8266703f 100644 --- a/assets/css/_feather-core.scss +++ b/assets/css/_feather-core.scss @@ -1873,7 +1873,8 @@ body { line-height: var(--feather-line-height-body); } a { - color: var(--tw-color-text-link); + color: white; + // color: var(--tw-color-text-link); text-decoration: none; } a:hover, diff --git a/assets/css/_main.scss b/assets/css/_main.scss index f6e39d578..638c50049 100644 --- a/assets/css/_main.scss +++ b/assets/css/_main.scss @@ -7,6 +7,13 @@ --line-height-xjumbo: 2.5rem; --font-size-mini-jumbo: 1.6rem; --line-height-mini-jumbo: 1.8rem; + //Original Light mode colors + --primary-color: #302AE6; + --secondary-color: #536390; + --font-color: #424242; + --bg-color: #fff; + --heading-color: #292922; + --dark-color: black; } /* Animations */ @@ -47,7 +54,7 @@ html { /* Containers */ body { - background-color: white; + // background-color: white; display: flex; min-height: 100vh; flex-direction: column; @@ -66,6 +73,8 @@ main { padding: var(--feather-grid-mega) 0; } .section { + background-color: var(--bg-color); + color: var(--font-color); padding: calc(var(--feather-grid-mega) * 2) 0; } @@ -85,7 +94,6 @@ nav, .header, .footer { } a:not(.Button) { - color: white; text-decoration: none; &:hover, &:active { @@ -120,12 +128,84 @@ nav { margin-right: var(--feather-grid-xxsmall); } } +//Dark mode +[data-theme="dark"] { + --primary-color: #9A97F3; + --secondary-color: #818cab; + --font-color: #e1e1ff; + --bg-color: #161625; + --heading-color: #818cab; +} +// Switch light-dark slider +.theme-switch-wrapper { + display: inline-block; + align-items: center; + + em { + margin-left: 10px; + font-size: 1rem; + } +} +.theme-switch { + display: inline-block; + height: 25px; + position: relative; + width: 50px; +} + +.theme-switch input { + display:none; +} + +.slider { + margin: 8px -8px -8px 8px; + background-color: #ccc; + bottom: 0; + cursor: pointer; + left: 0; + position: absolute; + right: 0; + top: 0; + transition: .4s; +} + +.slider:before { + background-color: #fff; + bottom: 3px; + content: ""; + height: 20px; + left: 3px; + position: absolute; + transition: .4s; + width: 20px; +} + +input:checked + .slider { + background-color: #2196F3; +} + +input:checked + .slider:before { + transform: translateX(23.5px); +} + +.slider.round { + border-radius: 34px; +} + +.slider.round:before { + border-radius: 50%; +} + +.theme-label { + padding-left: 10px; + font-family: cursive; +} .home-link { font-weight: var(--feather-font-weight-bold); } -#nav-menu { +#nav-menu, #nav-menu-main { margin: 0; padding: 0; li { @@ -179,6 +259,8 @@ nav { /* Headers */ .header, .footer { + background-color: var(--bg-color); + color: var(--font-color); padding: var(--feather-grid-mega) 0; } @@ -192,6 +274,8 @@ nav { } .subtitle { + background-color: var(--bg-color); + color: var(--font-color); margin: var(--feather-grid-large) 0; } @@ -209,6 +293,8 @@ nav { } a.foot-link { + background-color: var(--bg-color); + color: var(--font-color); display: block; line-height: var(--feather-line-height-xlarge); } @@ -251,15 +337,19 @@ a.foot-link { /* Text */ body { + background-color: var(--bg-color); + // color: var(--font-color); font-size: 0.8rem; // 16px line-height: 1.5; // 24px } h2 { + color: var(--secondary-color); margin: 1.5em 0 0.5em; } .center-text { + color: var(--secondary-color); text-align: center; } diff --git a/assets/css/index.scss b/assets/css/index.scss index 97902472c..8a5fe137d 100644 --- a/assets/css/index.scss +++ b/assets/css/index.scss @@ -2,13 +2,16 @@ .content { padding: 0; + text-align: center; } .grey { background-color: var(--tw-color-gray-faint); @media (prefers-color-scheme: dark) { - background-color: var(--tw-color-gray-1100); + background-color: var(--bg-color); + color: var(--font-color); + // background-color: var(--tw-color-gray-1100); color: white; } } @@ -53,19 +56,14 @@ #career-text { text-align: center; } -@media (min-width: 600px) { - #career .container { - display: flex; - > div { - flex: 1 1 50%; - } - } - #career-text { - text-align: left; - margin-top: 100px; - } + +#career .container { + + text-align: center; + } + /* Our Philosophy - images */ #emoji-cards { @@ -128,3 +126,34 @@ img.emoji-img { max-width: 40%; } } + + +@keyframes flicker { + 0% { opacity: 1; } + 50% { opacity: 0.5; } + 100% { opacity: 1; } +} + +@keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} + +@keyframes bounce { + 0% { transform: translateY(0); } + 50% { transform: translateY(-10px); } + 100% { transform: translateY(0); } +} + +.emoji-card .fire-img { + animation: flicker 1s infinite alternate; +} + +.emoji-card .sun-img { + animation: spin 2s linear infinite; +} + +.emoji-card .heart-img { + animation: bounce 0.5s infinite; +} + diff --git a/assets/css/memberships.scss b/assets/css/memberships.scss index f40ec63ee..bc36d4720 100644 --- a/assets/css/memberships.scss +++ b/assets/css/memberships.scss @@ -69,6 +69,8 @@ a.membership-handle:hover, a.membership-handle:active { } .membership p { + background-color: var(--bg-color); + color: var(--font-color); padding-top: var(--feather-grid-xsmall); margin-bottom: 0; } diff --git a/assets/css/projects.scss b/assets/css/projects.scss index 4c6a05430..18790c06b 100644 --- a/assets/css/projects.scss +++ b/assets/css/projects.scss @@ -4,6 +4,8 @@ :root { --project-card-min-width: 385px; --project-card-max-width: 500px; + --project-card-min-height: 500px; + --project-card-max-height: 750px; --search-bar-width: 450px; } @@ -13,14 +15,65 @@ } .project-card { position: relative; + align-content: end; + text-align: center; flex: 1 1; - padding: var(--feather-grid-mega) calc(var(--feather-grid-mega) * 1.5); + padding: var(--feather-grid-mega) calc(var(--feather-grid-mega) * 1.25); min-width: var(--project-card-min-width); max-width: var(--project-card-max-width); + min-height: var(--project-card-min-height); + max-height: var(--project-card-max-height); +} + +.proj-card-bground { + border: outset black 2px; + border-radius: 10px; + background: linear-gradient(45deg, #aa96dc, #471bca); + padding: 3%; + animation: pulse 2s infinite alternate; + // animation-timing-function: linear; // Smooth color transition +} + +.language-button { + padding: 3px; + margin: 5px 10px 5px 0px; + border: solid black 2px; + border-radius: 8px; + font-family: cursive; +} + +.all-button { + width: 112px; + padding: 3px; + margin: 0px 10px 0px 0px; + font-family: cursive; + border: solid black 2px; + border-radius: 5px; + background: linear-gradient(45deg, #70d1a5, #0b9b75); +} + +.proj-links { + border: solid black 2px; + display: inline-block; + padding: 10px 20px; + background-color: #007bff; /* Change to your desired background color */ + color: #fff; /* Change to your desired text color */ + border-radius: 20px; /* Adjust the border radius to make it more or less rounded */ + text-decoration: none; + transition: background-color 0.3s ease; +} + +.proj-links:hover { + background-color: #0056b3; /* Change to a darker shade for hover effect */ +} + + +.project-card a { + color: #ffffff; } .border { - width: 150px; + // width: 150px; border-bottom-style: solid; border-bottom-width: 5px; } @@ -35,12 +88,6 @@ } } -.project-links a { - display: block; - font-weight: var(--feather-font-weight-bold); - text-decoration: none; -} - .project-links a:link, .project-links a:visited { color: var(--tw-color-text-primary); @@ -81,6 +128,8 @@ background-color: var(--tw-color-blue-light); display: flex; justify-content: space-between; + margin-left: auto; + margin-right: auto; /* Center horizontally */ @media (prefers-color-scheme: dark) { background-color: var(--tw-color-gray-deep); diff --git a/assets/css/year-in-review.scss b/assets/css/year-in-review.scss index 4501ad74b..8af8edef0 100644 --- a/assets/css/year-in-review.scss +++ b/assets/css/year-in-review.scss @@ -115,10 +115,6 @@ section#follow { /* Top navigation */ -nav { - background-color: transparent; -} - .nav-title a { text-decoration: none; font-weight: var(--feather-font-weight-bold); diff --git a/content/_index.html b/content/_index.html index 49eee3e2a..188290bd3 100644 --- a/content/_index.html +++ b/content/_index.html @@ -14,19 +14,19 @@

#OurPhilosophy

- Fire emoji + Fire emoji

Heat

Heat means work.
Upstream contributions, bug fixes, designs, docs--the rigorous work that drives the community.

- Sun emoji + Sun emoji

Light

Light means visibility.
For the projects, contributions, opportunities, challenges, and people that impact the community.

- Pride heart emoji + Pride heart emoji

Love

Love means culture and support.
Why we care. How we work. Actions that grow the community.

@@ -40,22 +40,8 @@

Love

Explore Projects

-

Twitter has been built on open source since the beginning. Openness is part of our DNA. The projects you see here were born at Twitter, and patches are always welcome!

- View All Projects -
-
-
- - - -
-
-
-

Follow Us @TwitterOSS

-
-
- +

X has been built on open source since the beginning. Openness is part of our DNA. The projects you see here were born at X, and patches are always welcome!

+ View All Projects
@@ -68,9 +54,6 @@

Follow Us Join the Flock

We are always on the lookout for innovative and creative individuals who are passionate about building a platform where all voices can be heard.

View All Careers - -
- Tweets by TwitterCareers -
+ diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 2b06a5b15..5ef1b8e2f 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -12,7 +12,7 @@
-
+
{{ block "header" . }} {{ with .Title }}

{{ . }}

{{ end }} {{ with .Params.subtitle }}

{{ . }}

{{ end }} diff --git a/layouts/_default/projects.html b/layouts/_default/projects.html index 9ae1705d0..d1cbc5104 100644 --- a/layouts/_default/projects.html +++ b/layouts/_default/projects.html @@ -1,30 +1,146 @@ {{ define "header" }}

Projects

+ +

Found results for
+

- +
+ +
+

Filter by Programming Languages

+
+ +
+ {{ end }} {{ define "content" }} - -
Found results for
-
{{ range sort $.Site.Data.projects "pushedAt" "desc" -}}
+

{{ .name }}

{{ .descriptionHTML | safeHTML }}
-

{{ with .primaryLanguage }}{{ .name }}{{ end }}

+
+

Language: {{ with .primaryLanguage }}{{ .name }}{{ end }}

-
- GitHub - {{ with .homepageUrl }}Website{{ end }} + Metrics +
+
+ GitHub +
+
+ {{ with .homepageUrl }}Website{{ end }} +
+
- Metrics
{{ end }}
+ {{ end }} diff --git a/layouts/_default/year-in-review.html b/layouts/_default/year-in-review.html index 4e86e475d..3c34346ba 100644 --- a/layouts/_default/year-in-review.html +++ b/layouts/_default/year-in-review.html @@ -3,7 +3,7 @@ {{ end }} @@ -37,7 +42,6 @@
  • Heat metrics
  • Light metrics
  • Love metrics
    • -
  • @TwitterOSS
    • @@ -47,7 +51,7 @@

    {{ (now.AddDate -1 0 0).Format "Jan 2006" }} - {{ now.Format "Jan 2006" }}

    Year in Review

    -

    An overview of the past 12 months of activity on Twitter’s Open Source projects.

    +

    An overview of the past 12 months of activity on X’s Open Source projects.

    @@ -222,7 +226,7 @@

    Love metrics

    -
    +
    diff --git a/layouts/index.html b/layouts/index.html index ddcc2fcb0..f8694c52f 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -1,8 +1,7 @@ {{ define "header" }} -

    - @TwitterOSS -

    -

    Open Source is Happening

    +
    +

    Open Source is Happening

    +
    {{ end }} {{ define "content" }} diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 545c25ea9..294b1bbd0 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -8,7 +8,7 @@

    About

    - Twitter for Good + Careers
    @@ -31,7 +31,7 @@

    - © {{ now.Format "2006"}} Twitter, Inc. + © {{ now.Format "2006"}} X, Inc.
    diff --git a/layouts/partials/head.html b/layouts/partials/head.html index 9a62263da..51f3cef55 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -24,7 +24,7 @@ {{ .Title }}{{ if not .IsHome }} | {{ site.Title }}{{ end }} - + {{- $style := resources.Get "css/style.scss" | toCSS | minify | fingerprint }} diff --git a/layouts/partials/nav.html b/layouts/partials/nav.html index aeaaaecbe..7af614fd7 100644 --- a/layouts/partials/nav.html +++ b/layouts/partials/nav.html @@ -2,16 +2,52 @@ \ No newline at end of file + + \ No newline at end of file diff --git a/static/assets/favicon.ico b/static/assets/favicon.ico deleted file mode 100644 index 3a8b2eeec..000000000 Binary files a/static/assets/favicon.ico and /dev/null differ diff --git a/static/assets/logo.svg b/static/assets/logo.svg new file mode 100644 index 000000000..437e2bfdd --- /dev/null +++ b/static/assets/logo.svg @@ -0,0 +1,3 @@ + + + diff --git a/static/assets/twitter-logo.svg b/static/assets/twitter-logo.svg deleted file mode 100644 index d16b6a7de..000000000 --- a/static/assets/twitter-logo.svg +++ /dev/null @@ -1,16 +0,0 @@ - - - diff --git a/static/assets/twitter.ico b/static/assets/twitter.ico new file mode 100644 index 000000000..a71555fea Binary files /dev/null and b/static/assets/twitter.ico differ diff --git a/static/js/projects.js b/static/js/projects.js index 3e28aac66..0cbb819ea 100644 --- a/static/js/projects.js +++ b/static/js/projects.js @@ -1,116 +1,4 @@ /** * Copyright 2018 Twitter, Inc. * SPDX-License-Identifier: Apache-2.0 - */ - -const projectCards = Array.from(document.getElementsByClassName("project-card")) -const searchBox = document.getElementById("search-box") - -// parse cards to build project list -const projects = [] -projectCards.forEach(card => { - projects.push({ - id: card.id, - name: card.getElementsByClassName("project-name")[0].innerText, - description: card.getElementsByClassName("project-description")[0].innerText, - language: card.getElementsByClassName("project-language")[0].innerText, - }) -}) - -// import fuse and initialize -let fuse; -import("https://cdnjs.cloudflare.com/ajax/libs/fuse.js/6.4.6/fuse.esm.min.js") - .then(module => { - Fuse = module.default - fuse = new Fuse(projects, { - findAllMatches: true, - isCaseSensitive: false, - threshold: 0.1, - ignoreLocation: true, - useExtendedSearch: true, - keys: [ - "name", - "description", - "language", - ], - }) - - // perform initial search with query parameter if present - if (q = new URL(window.location).searchParams.get("q")) { - search(q) - } - // respond to browser history navigation - window.addEventListener("popstate", () => { - q = new URL(window.location).searchParams.get("q") - search(q) - }) - }) - -// perform search on search-box keyup and store in browser history. -searchBox.addEventListener('keyup', function(event) { - const query = this.value - search(query) - - // push new query onto history stack - const url = new URL(window.location) - if (url.searchParams.get('q') != query) { - if (query) { - url.searchParams.set('q', query) - } else { - url.searchParams.delete('q') - } - pushState(query, url) - } -}) - -// debounce wraps a function so that calls will be delayed to prevent repeated -// calls within the specified time window. -const debounce = (fn, timeout = 500) => { - let timer - return (...args) => { - clearTimeout(timer) - timer = setTimeout(() => { fn.apply(this, args); }, timeout); - } -} - -// pushState pushes the new search query onto the browser history on a slight -// delay. This is to prevent every individual keystroke from being pushed onto -// the history stack. -const pushState = debounce((query, url) => { - window.history.pushState({}, `Projects search: ${query}`, url) -}) - -// search the project list for the query string and display ranked results. -const search = (query) => { - searchBox.value = query - const resultsBox = document.getElementById('results') - - if (!query) { - // reset all project cards - projectCards.forEach(card => { - card.classList.remove("hide") - card.style.removeProperty("order") - }) - resultsBox.classList.add("hide") - return - } - const results = fuse.search(query) - - // first, hide all the projects - projectCards.forEach(card => { - card.classList.add("hide") - }) - - - // show results in ranked order - let order = 1 - results.forEach(r => { - const card = document.getElementById(r.item.id) - card.classList.remove("hide") - card.style.setProperty("order", order++) - }) - - resultsBox.getElementsByClassName("count")[0].innerText = results.length - resultsBox.getElementsByClassName("query")[0].innerText = query - resultsBox.classList.remove("hide") -} + */ \ No newline at end of file