Skip to content

Commit

Permalink
update firebase
Browse files Browse the repository at this point in the history
  • Loading branch information
killerbytes committed Sep 21, 2023
1 parent e3a9e1b commit 7988866
Show file tree
Hide file tree
Showing 7 changed files with 299 additions and 28 deletions.
5 changes: 5 additions & 0 deletions .firebaserc
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
"projects": {
"default": "spotitracks"
}
}
20 changes: 20 additions & 0 deletions .github/workflows/firebase-hosting-merge.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
# This file was auto-generated by the Firebase CLI
# https://github.com/firebase/firebase-tools

name: Deploy to Firebase Hosting on merge
'on':
push:
branches:
- master
jobs:
build_and_deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- run: npm ci && npm run build
- uses: FirebaseExtended/action-hosting-deploy@v0
with:
repoToken: '${{ secrets.GITHUB_TOKEN }}'
firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_SPOTITRACKS }}'
channelId: live
projectId: spotitracks
17 changes: 17 additions & 0 deletions .github/workflows/firebase-hosting-pull-request.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
# This file was auto-generated by the Firebase CLI
# https://github.com/firebase/firebase-tools

name: Deploy to Firebase Hosting on PR
'on': pull_request
jobs:
build_and_preview:
if: '${{ github.event.pull_request.head.repo.full_name == github.repository }}'
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- run: npm ci && npm run build
- uses: FirebaseExtended/action-hosting-deploy@v0
with:
repoToken: '${{ secrets.GITHUB_TOKEN }}'
firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_SPOTITRACKS }}'
projectId: spotitracks
7 changes: 7 additions & 0 deletions database.rules.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"rules": {
".read": "auth.uid != 'test'",
".write": "auth.uid != 'test'"
}
}

19 changes: 19 additions & 0 deletions firebase.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
{
"database": {
"rules": "database.rules.json"
},
"hosting": {
"public": "public",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
159 changes: 131 additions & 28 deletions public/index.html
Original file line number Diff line number Diff line change
@@ -1,30 +1,105 @@
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<title>Spotitracks</title>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="theme-color" content="#181818" />
<meta property="fb:app_id" content="919463878212946" />
<meta property="og:type" content="website" />
<meta name="twitter:title" property="og:title" itemprop="title name" content="Spotitracks: Your Top Tracks" />
<meta
name="description"
content="Web site created using create-react-app"
property="og:description"
itemprop="description"
content="Create playlists of your most played tracks"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
<meta property="og:url" content="http://spotitracks.firebaseapp.com" />
<meta
property="og:image"
content="http://azd-spotitracks.s3-website-ap-southeast-1.amazonaws.com/images/cover.jpg"
/>
<!-- update the version number as needed -->
<script defer src="/__/firebase/10.4.0/firebase-app-compat.js"></script>
<!-- include only the Firebase features as you need -->
<script defer src="/__/firebase/10.4.0/firebase-auth-compat.js"></script>
<script defer src="/__/firebase/10.4.0/firebase-database-compat.js"></script>
<script defer src="/__/firebase/10.4.0/firebase-firestore-compat.js"></script>
<script defer src="/__/firebase/10.4.0/firebase-functions-compat.js"></script>
<script defer src="/__/firebase/10.4.0/firebase-messaging-compat.js"></script>
<script defer src="/__/firebase/10.4.0/firebase-storage-compat.js"></script>
<script defer src="/__/firebase/10.4.0/firebase-analytics-compat.js"></script>
<script defer src="/__/firebase/10.4.0/firebase-remote-config-compat.js"></script>
<script defer src="/__/firebase/10.4.0/firebase-performance-compat.js"></script>
<!--
initialize the SDK after all desired features are loaded, set useEmulator to false
to avoid connecting the SDK to running emulators.
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
<script defer src="/__/firebase/init.js?useEmulator=true"></script>

Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
<style media="screen">
body {
background: #eceff1;
color: rgba(0, 0, 0, 0.87);
font-family: Roboto, Helvetica, Arial, sans-serif;
margin: 0;
padding: 0;
}
#message {
background: white;
max-width: 360px;
margin: 100px auto 16px;
padding: 32px 24px;
border-radius: 3px;
}
#message h2 {
color: #ffa100;
font-weight: bold;
font-size: 16px;
margin: 0 0 8px;
}
#message h1 {
font-size: 22px;
font-weight: 300;
color: rgba(0, 0, 0, 0.6);
margin: 0 0 16px;
}
#message p {
line-height: 140%;
margin: 16px 0 24px;
font-size: 14px;
}
#message a {
display: block;
text-align: center;
background: #039be5;
text-transform: uppercase;
text-decoration: none;
color: white;
padding: 16px;
border-radius: 4px;
}
#message,
#message a {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
#load {
color: rgba(0, 0, 0, 0.4);
text-align: center;
font-size: 13px;
}
@media (max-width: 600px) {
body,
#message {
margin-top: 0;
background: white;
box-shadow: none;
}
body {
border-top: 16px solid #ffa100;
}
}
</style>
<style>
.loading-container {
background-color: rgba(0, 0, 0, 0.6);
Expand Down Expand Up @@ -81,20 +156,48 @@
}
}
</style>

</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
<p id="load">Firebase SDK Loading&hellip;</p>

You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
<script>
document.addEventListener('DOMContentLoaded', function () {
const loadEl = document.querySelector('#load');
// // 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥
// // The Firebase SDK is initialized and available here!
//
// firebase.auth().onAuthStateChanged(user => { });
// firebase.database().ref('/path/to/ref').on('value', snapshot => { });
// firebase.firestore().doc('/foo/bar').get().then(() => { });
// firebase.functions().httpsCallable('yourFunction')().then(() => { });
// firebase.messaging().requestPermission().then(() => { });
// firebase.storage().ref('/path/to/ref').getDownloadURL().then(() => { });
// firebase.analytics(); // call to activate
// firebase.analytics().logEvent('tutorial_completed');
// firebase.performance(); // call to activate
//
// // 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥

To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
try {
let app = firebase.app();
let features = [
'auth',
'database',
'firestore',
'functions',
'messaging',
'storage',
'analytics',
'remoteConfig',
'performance',
].filter((feature) => typeof app[feature] === 'function');
loadEl.textContent = `Firebase SDK loaded with ${features.join(', ')}`;
} catch (e) {
console.error(e);
loadEl.textContent = 'Error loading the Firebase SDK, check the console.';
}
});
</script>
</body>
</html>
100 changes: 100 additions & 0 deletions public/xindex.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
<style>
.loading-container {
background-color: rgba(0, 0, 0, 0.6);
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.loading {
position: absolute;
left: 60%;
top: 50%;
margin: -60px 0 0 -60px;
background: #1db954;
width: 50px;
height: 50px;
border-radius: 100%;
border: 10px solid #1db954;
}
.loading:after {
content: '';
background: trasparent;
width: 180%;
height: 180%;
position: absolute;
border-radius: 100%;
top: -40%;
left: -40%;
opacity: 0.7;
box-shadow: rgba(255, 255, 255, 0.6) -4px -5px 3px -3px;
animation: rotate 2s infinite linear;
}
@media (min-width: 768px) {
.loading {
left: 50%;
width: 100px;
height: 100px;
}
.loading:after {
width: 140%;
height: 140%;
top: -20%;
left: -20%;
}
}

@keyframes rotate {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(360deg);
}
}
</style>

</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>

0 comments on commit 7988866

Please sign in to comment.